@genexus/genexus-ide-ui 0.0.124 → 0.0.126

package/dist/esm/gx-ide-container_2.entry.js

@@ -1,319 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-5bd24426.js';
-import { f as formMessageLogic } from './form-8e67e664.js';
-import { f as formClasses, c as commonClassesNames } from './classesNames-ee9623a5.js';
-import { s as state } from './store-d2c5d5bd.js';
-import { e as exportParts } from './export-parts-639c8817.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--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 = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.headingClasses = () => {
-            var _a;
-            return {
-                "heading": true,
-                "heading--inactive": this.inactiveTitle,
-                "heading--slimmer": this.titleType === "secondary",
-                "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
-            };
-        };
-        this.contentClasses = () => {
-            return {
-                "content": true,
-                "content--flex": this.flexContent,
-                "content--no-padding": this.noContentPadding,
-                "content--no-gap": this.noContentGap,
-                "content--no-border-top": this.noContentBorderTop,
-                "content--border-end": this.contentBorderEnd,
-                [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
-                [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
-            };
-        };
-        this.aboveFooter = () => {
-            return this.hasAboveFooterSlot ? (h("footer", { class: {
-                    "footer-above": true,
-                    "footer-above--no-border-top": this.noBorderAboveFooter,
-                    "footer-above--no-padding": this.noAboveFooterPadding,
-                    "footer-above--slimmer": this.slimmerFooter
-                } }, h("slot", { name: "footer-above" }))) : null;
-        };
-        this.footer = () => {
-            return this.hasFooterSlot ? (h("footer", { class: {
-                    "footer": true,
-                    "footer--no-border": this.hasOnlyFooter ||
-                        !this.hasSlottedContent ||
-                        this.noBorderFooter,
-                    [`footer--justify-${this.footerJustify}`]: true,
-                    [`footer--justify-${this.footerJustify}`]: true,
-                    "footer--no-padding": this.noFooterPadding,
-                    "footer--slimmer": this.slimmerFooter
-                } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
-        };
-        this.inactiveTitle = false;
-        this.containerTitle = undefined;
-        this.titleType = "primary";
-        this.displayBorder = false;
-        this.displayBorderTop = false;
-        this.displayBorderEnd = false;
-        this.displayBorderBottom = false;
-        this.displayBorderStart = false;
-        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;
-        this.flexRow = false;
-        this.flexContent = false;
-        this.noContentBorderTop = false;
-        this.noContentPadding = false;
-        this.noContentGap = false;
-        this.alignItems = undefined;
-        this.justifyContent = undefined;
-        this.contentBorderEnd = false;
-        this.slimmerAboveFooter = false;
-        this.noAboveFooterPadding = false;
-        this.noBorderAboveFooter = false;
-        this.slimmerFooter = false;
-        this.noFooterPadding = false;
-        this.footerJustify = "end";
-        this.noBorderFooter = false;
-        this.hasHeaderSlot = false;
-        this.hasSlottedContent = false;
-        this.hasFooterSlot = false;
-        this.hasAboveFooterSlot = false;
-        this.hasOnlyHeading = false;
-        this.hasOnlyContent = false;
-        this.hasOnlyFooter = false;
-    }
-    // 4.PUBLIC PROPERTY API //
-    // 5.EVENTS (EMIT) //
-    // 6.COMPONENT LIFECYCLE EVENTS //
-    componentWillLoad() {
-        this.evaluateSlots();
-    }
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    evaluateSlots() {
-        // header
-        const headerSlot = this.el.querySelectorAll(':scope > [slot="header"]');
-        if (headerSlot.length) {
-            this.hasHeaderSlot = true;
-        }
-        // content
-        const slottedContent = this.el.querySelectorAll(":scope >  :not([slot])");
-        if (slottedContent.length) {
-            this.hasSlottedContent = true;
-        }
-        // footer
-        const footerAboveSlot = this.el.querySelectorAll(':scope >  [slot="footer-above"]');
-        const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
-        const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
-        if (footerStartSlot.length || footerEndSlot.length) {
-            this.hasFooterSlot = true;
-        }
-        if (footerAboveSlot.length) {
-            this.hasAboveFooterSlot = true;
-        }
-    }
-    evaluateSections() {
-        // has only heading
-        if (!this.hasSlottedContent &&
-            !this.hasFooterSlot &&
-            !this.hasAboveFooterSlot) {
-            this.hasOnlyHeading = true;
-        }
-        // has only content
-        if (this.hasSlottedContent &&
-            !this.containerTitle &&
-            !this.hasHeaderSlot &&
-            !this.hasAboveFooterSlot &&
-            !this.hasFooterSlot) {
-            this.hasOnlyContent = true;
-        }
-        // has only footer
-        if (!this.hasSlottedContent &&
-            !this.containerTitle &&
-            !this.hasAboveFooterSlot) {
-            this.hasOnlyFooter = true;
-        }
-    }
-    // 10.RENDER() FUNCTION //
-    render() {
-        this.evaluateSections();
-        const result = [
-            this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gx-ide-title", { class: "heading__title", type: this.titleType, alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
-            this.hasSlottedContent ? (h("div", { class: this.contentClasses(), part: "content" }, h("slot", null))) : null,
-            this.aboveFooter(),
-            this.footer()
-        ];
-        return (h(Host, null, h("div", { class: {
-                "container": true,
-                [`container--padding-${this.sectionsPadding}`]: true,
-                "container--display-border": this.displayBorder,
-                "container--display-border-top": this.displayBorderTop,
-                "container--display-border-end": this.displayBorderEnd,
-                "container--display-border-bottom": this.displayBorderBottom,
-                "container--display-border-start": this.displayBorderStart,
-                "container--only-content": this.hasOnlyContent,
-                "container--no-header": !this.hasHeaderSlot && !this.containerTitle,
-                "container--no-footer": !this.hasFooterSlot && !this.hasAboveFooterSlot
-            } }, result)));
-    }
-    get el() { return getElement(this); }
-};
-GxIdeContainer.style = containerCss;
-
-const formCheckboxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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(.gxg-validation--warning) .form-element{border-color:var(--ds-border-color--warning)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--ds-border-color--warning);border-color:var(--ds-border-color--warning)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--warning)}:host(.gxg-validation--error) .form-element{border-color:var(--ds-border-color--error)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--ds-border-color--error);border-color:var(--ds-border-color--error)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--error)}:host(.gxg-validation--success) .form-element{border-color:var(--ds-border-color--success)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--ds-border-color--success);border-color:var(--ds-border-color--success)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--ds-border-color--success)}.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{--margin-inline-start:6px;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(--margin-inline-start);box-sizing:border-box}.tooltip-inner-wrapper--visible{width:calc(var(--ds-icon-size-box--small) + var(--margin-inline-start))}.tooltip-inner-wrapper--hidden{display:none}:host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--ds-background-color-disabled) !important;color:var(--ds-color--disabled) !important;border-color:var(--ds-border-color-disabled) !important;cursor:default !important}:host{display:block;line-height:0}.gxg-form-checkbox__wrapper{display:inline-flex;align-items:center;cursor:pointer}.gxg-form-checkbox__wrapper:hover .wrapper{border-color:var(--gxg-checkbox-border-color--hover)}.wrapper{flex-shrink:0;border-color:var(--gxg-checkbox-border-color);background-color:var(--gxg-checkbox-background-color);width:var(--gxg-checkbox-size);height:var(--gxg-checkbox-size);position:relative;border-width:var(--gxg-checkbox-border-width);border-style:solid;border-color:var(--gxg-checkbox-border-color);border-radius:var(--gxg-checkbox-border-radius)}.wrapper:after{content:\"\";position:absolute;display:block;border:solid;border-color:transparent;z-index:0}.wrapper--checked:after{left:5.5px;top:3px;width:4px;height:7px;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-color:var(--gxg-checkbox-indicator-color)}.wrapper--indeterminate:after{left:50%;top:50%;width:8px;height:1.5px;border:0;background-color:var(--gxg-checkbox-indicator-color);-webkit-transform:rotate(0) translateY(-50%) translateX(-50%);-ms-transform:rotate(0) translateY(-50%) translateX(-50%);transform:rotate(0) translateY(-50%) translateX(-50%)}.wrapper--has-icon{margin-inline-end:var(--gxg-checkbox-spacing)}.input{position:relative;z-index:1;display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0;cursor:pointer;height:0;width:0}.input:focus+.wrapper{outline:var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);outline-offset:-1px;outline-offset:0;outline-offset:-1px}.label--has-icon{padding-inline-start:var(--gxg-checkbox-spacing)}:host([disabled]) .gxg-form-checkbox__wrapper,:host([disabled]) .input{cursor:initial}:host([disabled]) .wrapper{border-color:var(--ds-border-color-disabled);background-color:var(--gxg-checkbox-disabled-background-color)}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}";
-
-const GxgFormCheckbox = class {
-    constructor(hostRef) {
-        this.parts = {
-            input: "input"
-        };
-        /**
-         * The logic for displaying or hidding the validation messages
-         *
-         */
-        this.formMessageLogic = formMessageLogic;
-        this.attachExportParts = () => {
-            const part = this.el.getAttribute("part");
-            const exportPartsResult = exportParts(part, this.parts);
-            exportPartsResult.length && (this.exportparts = exportPartsResult);
-        };
-        this.handleGxgLabelClick = () => {
-            this.checkboxInput.click();
-        };
-        this.focusHandler = () => {
-            //this.hasFocus = true;
-        };
-        this.blurHandler = () => {
-            //this.hasFocus = false;
-        };
-        this.renderCheckbox = () => {
-            return [
-                h("input", { ref: el => (this.checkboxInput = el), type: "checkbox", checked: this.checked, class: "input", id: this.checkboxId, name: this.name, value: this.value, disabled: this.disabled, onChange: this.changed.bind(this), onKeyUp: this.handlerOnKeyUp.bind(this), onFocus: this.focusHandler, onBlur: this.blurHandler, tabindex: "0", onClick: this.handleInputClick, part: this.parts.input }),
-                h("div", { class: {
-                        wrapper: true,
-                        "wrapper--checked": this.checked,
-                        "wrapper--indeterminate": this.indeterminate,
-                        "wrapper--focus": this.hasFocus,
-                        "wrapper--has-icon": !!this.iconName
-                    } }),
-                h("span", { part: "box", class: {
-                        box: true,
-                        "no-label": !this.label,
-                        "has-icon": !!this.iconName,
-                        "form-element": true,
-                        indeterminate: this.indeterminate,
-                        checkbox: true
-                    }, role: "checkbox" }),
-                this.icon()
-            ];
-        };
-        registerInstance(this, hostRef);
-        this.change = createEvent(this, "change", 7);
-        this.checkboxId = undefined;
-        this.checked = false;
-        this.indeterminate = false;
-        this.disabled = false;
-        this.label = undefined;
-        this.labelSize = "regular";
-        this.value = undefined;
-        this.name = undefined;
-        this.iconName = undefined;
-        this.alignTop = false;
-        this.hasFocus = false;
-        this.required = false;
-        this.validationStatus = "indeterminate";
-        this.validationMessage = undefined;
-        this.informationMessage = undefined;
-        this.tooltip = undefined;
-    }
-    get el() { return getElement(this); }
-    /*********************************
-    METHODS
-    *********************************/
-    componentWillLoad() {
-        this.attachExportParts();
-    }
-    compontentDidLoad() {
-        if (this.checked && this.disabled) {
-            this.checked = false;
-            this.checkboxInput.removeAttribute("checked");
-        }
-    }
-    changed() {
-        this.checked = this.checkboxInput.checked;
-    }
-    checkedHandler() {
-        this.change.emit({
-            id: this.checkboxId,
-            value: this.checked,
-            disabled: this.disabled
-        });
-    }
-    handlerOnKeyUp(event) {
-        if (event.code == "Space") {
-            this.checked = !this.checked;
-        }
-    }
-    ariaChecked() {
-        if (this.checked) {
-            return "true";
-        }
-        else {
-            return "false";
-        }
-    }
-    handleInputClick(e) {
-        e.stopPropagation();
-    }
-    icon() {
-        if (this.iconName) {
-            return (h("gxg-icon", { type: this.iconName, color: "auto", size: "small" }));
-        }
-    }
-    render() {
-        return (h(Host, { role: "checkbox", value: this.value, "aria-checked": this.ariaChecked, "aria-label": this.label, class: {
-                large: state.large,
-                [formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
-                [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
-            }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
-                "gxg-form-checkbox__wrapper": true,
-                "gxg-form-checkbox__wrapper--align-top": this.alignTop
-            }, onClick: this.handleGxgLabelClick }, this.label
-            ? [
-                this.renderCheckbox(),
-                h("gxg-label", { class: {
-                        label: true,
-                        "label--has-icon": !!this.iconName
-                    }, disabled: this.disabled, labelPosition: "end", tooltip: this.tooltip, noMargin: !!this.iconName, size: this.labelSize }, this.label)
-            ]
-            : this.renderCheckbox()), this.formMessageLogic(this)));
-    }
-    static get delegatesFocus() { return true; }
-    static get watchers() { return {
-        "checked": ["checkedHandler"]
-    }; }
-};
-GxgFormCheckbox.style = formCheckboxCss;
-
-export { GxIdeContainer as gx_ide_container, GxgFormCheckbox as gxg_form_checkbox };
-
-//# sourceMappingURL=gx-ide-container_2.entry.js.map

package/dist/esm/gx-ide-container_2.entry.js.map

@@ -1 +0,0 @@
-{"file":"gx-ide-container.gxg-form-checkbox.entry.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","node_modules/@genexus/gemini/dist/collection/components/form-checkbox/form-checkbox.css?tag=gxg-form-checkbox&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/form-checkbox/form-checkbox.js"],"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\":\n              !this.hasFooterSlot && !this.hasAboveFooterSlot\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","/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n/* Document\n   ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\nhtml {\n  line-height: 1.15;\n  /* 1 */\n  -webkit-text-size-adjust: 100%;\n  /* 2 */\n}\n\n/* Sections\n   ========================================================================== */\n/**\n * Remove the margin in all browsers.\n */\nbody {\n  margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\nmain {\n  display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n   ========================================================================== */\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n  box-sizing: content-box;\n  /* 1 */\n  height: 0;\n  /* 1 */\n  overflow: visible;\n  /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/* Text-level semantics\n   ========================================================================== */\n/**\n * Remove the gray background on active links in IE 10.\n */\na {\n  background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n  border-bottom: none;\n  /* 1 */\n  text-decoration: underline;\n  /* 2 */\n  text-decoration: underline dotted;\n  /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace;\n  /* 1 */\n  font-size: 1em;\n  /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n   ========================================================================== */\n/**\n * Remove the border on images inside links in IE 10.\n */\nimg {\n  border-style: none;\n}\n\n/* Forms\n   ========================================================================== */\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  /* 1 */\n  font-size: 100%;\n  /* 1 */\n  line-height: 1.15;\n  /* 1 */\n  margin: 0;\n  /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n  -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=button]::-moz-focus-inner,\n[type=reset]::-moz-focus-inner,\n[type=submit]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=button]:-moz-focusring,\n[type=reset]:-moz-focusring,\n[type=submit]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\nlegend {\n  box-sizing: border-box;\n  /* 1 */\n  color: inherit;\n  /* 2 */\n  display: table;\n  /* 1 */\n  max-width: 100%;\n  /* 1 */\n  padding: 0;\n  /* 3 */\n  white-space: normal;\n  /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\ntextarea {\n  overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n[type=checkbox],\n[type=radio] {\n  box-sizing: border-box;\n  /* 1 */\n  padding: 0;\n  /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=number]::-webkit-inner-spin-button,\n[type=number]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=search] {\n  -webkit-appearance: textfield;\n  /* 1 */\n  outline-offset: -2px;\n  /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n[type=search]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n  -webkit-appearance: button;\n  /* 1 */\n  font: inherit;\n  /* 2 */\n}\n\n/* Interactive\n   ========================================================================== */\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\ndetails {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n  display: list-item;\n}\n\n/* Misc\n   ========================================================================== */\n/**\n * Add the correct display in IE 10+.\n */\ntemplate {\n  display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n[hidden] {\n  display: none;\n}\n\n:root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*Warning*/\n:host(.gxg-validation--warning) .form-element {\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus {\n  outline-color: var(--ds-border-color--warning);\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--warning);\n}\n\n/*Error*/\n:host(.gxg-validation--error) .form-element {\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus {\n  outline-color: var(--ds-border-color--error);\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--error);\n}\n\n/*Success*/\n:host(.gxg-validation--success) .form-element {\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus {\n  outline-color: var(--ds-border-color--success);\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--success);\n}\n\n/*Tooltip*/\n.tooltip-outer-wrapper {\n  display: grid;\n  grid-template-columns: 0fr;\n  transition: grid-template-columns var(--timing-02);\n}\n\n:host(.tooltip--visible) .tooltip-outer-wrapper {\n  grid-template-columns: 1fr;\n}\n\n.tooltip-inner-wrapper {\n  --margin-inline-start: 6px;\n  overflow: hidden;\n  transition: 150ms width;\n  width: 0;\n}\n.tooltip-inner-wrapper gxg-icon {\n  display: flex;\n  position: relative !important;\n  top: 0 !important;\n  transform: none !important;\n  margin-inline-start: var(--margin-inline-start);\n  box-sizing: border-box;\n}\n.tooltip-inner-wrapper--visible {\n  width: calc(var(--ds-icon-size-box--small) + var(--margin-inline-start));\n}\n.tooltip-inner-wrapper--hidden {\n  display: none;\n}\n\n:host(.gxg--disabled) .form-element,\n:host(.gxg--disabled.form-element) {\n  pointer-events: none;\n  background-color: var(--ds-background-color-disabled) !important;\n  color: var(--ds-color--disabled) !important;\n  border-color: var(--ds-border-color-disabled) !important;\n  cursor: default !important;\n}\n\n:host {\n  display: block;\n  line-height: 0;\n}\n\n.gxg-form-checkbox__wrapper {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n.gxg-form-checkbox__wrapper:hover .wrapper {\n  border-color: var(--gxg-checkbox-border-color--hover);\n}\n\n.wrapper {\n  flex-shrink: 0;\n  border-color: var(--gxg-checkbox-border-color);\n  background-color: var(--gxg-checkbox-background-color);\n  /*additional styles*/\n  width: var(--gxg-checkbox-size);\n  height: var(--gxg-checkbox-size);\n  position: relative;\n  border-width: var(--gxg-checkbox-border-width);\n  border-style: solid;\n  border-color: var(--gxg-checkbox-border-color);\n  border-radius: var(--gxg-checkbox-border-radius);\n}\n.wrapper:after {\n  content: \"\";\n  position: absolute;\n  display: block;\n  border: solid;\n  border-color: transparent;\n  z-index: 0;\n}\n.wrapper--checked:after {\n  left: 5.5px;\n  top: 3px;\n  width: 4px;\n  height: 7px;\n  border-width: 0 2px 2px 0;\n  -webkit-transform: rotate(45deg);\n  -ms-transform: rotate(45deg);\n  transform: rotate(45deg);\n  border-color: var(--gxg-checkbox-indicator-color);\n}\n.wrapper--indeterminate:after {\n  left: 50%;\n  top: 50%;\n  width: 8px;\n  height: 1.5px;\n  border: 0;\n  background-color: var(--gxg-checkbox-indicator-color);\n  -webkit-transform: rotate(0) translateY(-50%) translateX(-50%);\n  -ms-transform: rotate(0) translateY(-50%) translateX(-50%);\n  transform: rotate(0) translateY(-50%) translateX(-50%);\n}\n.wrapper--has-icon {\n  margin-inline-end: var(--gxg-checkbox-spacing);\n}\n\n.input {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.input:focus + .wrapper {\n  outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);\n  outline-offset: -1px;\n  outline-offset: 0;\n  outline-offset: -1px;\n}\n\n.label--has-icon {\n  padding-inline-start: var(--gxg-checkbox-spacing);\n}\n\n/*Disabled*/\n:host([disabled]) .gxg-form-checkbox__wrapper,\n:host([disabled]) .input {\n  cursor: initial;\n}\n:host([disabled]) .wrapper {\n  border-color: var(--ds-border-color-disabled);\n  background-color: var(--gxg-checkbox-disabled-background-color);\n}\n\n/*********************************************\nVALIDATION\n**********************************************/\n.messages-wrapper {\n  margin-top: var(--spacing-comp-02);\n  display: flex;\n  gap: var(--spacing-comp-01);\n  flex-direction: column;\n}","import { Host, h } from \"@stencil/core\";\nimport { formMessageLogic } from \"../../common/form\";\nimport { formClasses } from \"../../common/classesNames\";\nimport { commonClassesNames } from \"../../common/classesNames\";\nimport state from \"../store\";\nimport { exportParts } from \"../../common/export-parts\";\nexport class GxgFormCheckbox {\n    constructor() {\n        this.checkboxId = undefined;\n        this.checked = false;\n        this.indeterminate = false;\n        this.disabled = false;\n        this.label = undefined;\n        this.labelSize = \"regular\";\n        this.value = undefined;\n        this.name = undefined;\n        this.iconName = undefined;\n        this.alignTop = false;\n        this.hasFocus = false;\n        this.required = false;\n        this.validationStatus = \"indeterminate\";\n        this.validationMessage = undefined;\n        this.informationMessage = undefined;\n        this.tooltip = undefined;\n    }\n    parts = {\n        input: \"input\"\n    };\n    exportparts;\n    el;\n    //A reference to the input\n    checkboxInput;\n    change;\n    /**\n     * The logic for displaying or hidding the validation messages\n     *\n     */\n    formMessageLogic = formMessageLogic;\n    /*********************************\n    METHODS\n    *********************************/\n    componentWillLoad() {\n        this.attachExportParts();\n    }\n    attachExportParts = () => {\n        const part = this.el.getAttribute(\"part\");\n        const exportPartsResult = exportParts(part, this.parts);\n        exportPartsResult.length && (this.exportparts = exportPartsResult);\n    };\n    compontentDidLoad() {\n        if (this.checked && this.disabled) {\n            this.checked = false;\n            this.checkboxInput.removeAttribute(\"checked\");\n        }\n    }\n    changed() {\n        this.checked = this.checkboxInput.checked;\n    }\n    checkedHandler() {\n        this.change.emit({\n            id: this.checkboxId,\n            value: this.checked,\n            disabled: this.disabled\n        });\n    }\n    handlerOnKeyUp(event) {\n        if (event.code == \"Space\") {\n            this.checked = !this.checked;\n        }\n    }\n    handleGxgLabelClick = () => {\n        this.checkboxInput.click();\n    };\n    ariaChecked() {\n        if (this.checked) {\n            return \"true\";\n        }\n        else {\n            return \"false\";\n        }\n    }\n    handleInputClick(e) {\n        e.stopPropagation();\n    }\n    icon() {\n        if (this.iconName) {\n            return (h(\"gxg-icon\", { type: this.iconName, color: \"auto\", size: \"small\" }));\n        }\n    }\n    focusHandler = () => {\n        //this.hasFocus = true;\n    };\n    blurHandler = () => {\n        //this.hasFocus = false;\n    };\n    renderCheckbox = () => {\n        return [\n            h(\"input\", { ref: el => (this.checkboxInput = el), type: \"checkbox\", checked: this.checked, class: \"input\", id: this.checkboxId, name: this.name, value: this.value, disabled: this.disabled, onChange: this.changed.bind(this), onKeyUp: this.handlerOnKeyUp.bind(this), onFocus: this.focusHandler, onBlur: this.blurHandler, tabindex: \"0\", onClick: this.handleInputClick, part: this.parts.input }),\n            h(\"div\", { class: {\n                    wrapper: true,\n                    \"wrapper--checked\": this.checked,\n                    \"wrapper--indeterminate\": this.indeterminate,\n                    \"wrapper--focus\": this.hasFocus,\n                    \"wrapper--has-icon\": !!this.iconName\n                } }),\n            h(\"span\", { part: \"box\", class: {\n                    box: true,\n                    \"no-label\": !this.label,\n                    \"has-icon\": !!this.iconName,\n                    \"form-element\": true,\n                    indeterminate: this.indeterminate,\n                    checkbox: true\n                }, role: \"checkbox\" }),\n            this.icon()\n        ];\n    };\n    render() {\n        return (h(Host, { role: \"checkbox\", value: this.value, \"aria-checked\": this.ariaChecked, \"aria-label\": this.label, class: {\n                large: state.large,\n                [formClasses[\"VALIDATION_INDETERMINATE_CLASS\"]]: this.validationStatus === \"indeterminate\",\n                [formClasses[\"VALIDATION_WARNING_CLASS\"]]: this.validationStatus === \"warning\",\n                [formClasses[\"VALIDATION_ERROR_CLASS\"]]: this.validationStatus === \"error\",\n                [formClasses[\"VALIDATION_SUCCESS_CLASS\"]]: this.validationStatus === \"success\",\n                [commonClassesNames[\"DISABLED_CLASS\"]]: this.disabled\n            }, exportParts: this.exportparts ? this.exportparts : null }, h(\"div\", { class: {\n                \"gxg-form-checkbox__wrapper\": true,\n                \"gxg-form-checkbox__wrapper--align-top\": this.alignTop\n            }, onClick: this.handleGxgLabelClick }, this.label\n            ? [\n                this.renderCheckbox(),\n                h(\"gxg-label\", { class: {\n                        label: true,\n                        \"label--has-icon\": !!this.iconName\n                    }, disabled: this.disabled, labelPosition: \"end\", tooltip: this.tooltip, noMargin: !!this.iconName, size: this.labelSize }, this.label)\n            ]\n            : this.renderCheckbox()), this.formMessageLogic(this)));\n    }\n    static get is() { return \"gxg-form-checkbox\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get delegatesFocus() { return true; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"form-checkbox.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"form-checkbox.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"checkboxId\": {\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\": \"The checkbox id\"\n                },\n                \"attribute\": \"checkbox-id\",\n                \"reflect\": false\n            },\n            \"checked\": {\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\": \"The presence of this attribute makes the checkbox checked by default\"\n                },\n                \"attribute\": \"checked\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"indeterminate\": {\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\": \"The presence of this attribute makes the checkbox indeterminate\"\n                },\n                \"attribute\": \"indeterminate\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"disabled\": {\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\": \"The presence of this attribute disables the checkbox\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"label\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string | undefined\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The checkbox label\"\n                },\n                \"attribute\": \"label\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"labelSize\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"size\",\n                    \"resolved\": \"\\\"large\\\" | \\\"regular\\\"\",\n                    \"references\": {\n                        \"size\": {\n                            \"location\": \"import\",\n                            \"path\": \"../label/gxg-label\",\n                            \"id\": \"src/components/label/gxg-label.tsx::size\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The checkbox label size\"\n                },\n                \"attribute\": \"label-size\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"regular\\\"\"\n            },\n            \"value\": {\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\": \"The checkbox value\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false\n            },\n            \"name\": {\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\": \"The checkbox name\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": false\n            },\n            \"iconName\": {\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\": \"The checkbox icon\"\n                },\n                \"attribute\": \"icon-name\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"alignTop\": {\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\": \"Aligns the checkbox to the top of the label (useful when the label is too long)\"\n                },\n                \"attribute\": \"align-top\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"required\": {\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\": \"The presence of this attribute makes the commbo required\"\n                },\n                \"attribute\": \"required\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"validationStatus\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"ValidationStatus\",\n                    \"resolved\": \"\\\"error\\\" | \\\"indeterminate\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"ValidationStatus\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../common/types\",\n                            \"id\": \"src/common/types.ts::ValidationStatus\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The validation status\"\n                },\n                \"attribute\": \"validation-status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"indeterminate\\\"\"\n            },\n            \"validationMessage\": {\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\": \"The message to display when validation fails (error)\"\n                },\n                \"attribute\": \"validation-message\",\n                \"reflect\": false\n            },\n            \"informationMessage\": {\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\": \"An informative message to help the user filling the information\"\n                },\n                \"attribute\": \"information-message\",\n                \"reflect\": false\n            },\n            \"tooltip\": {\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\": \"\"\n                },\n                \"attribute\": \"tooltip\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"hasFocus\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"change\",\n                \"name\": \"change\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"CheckboxInfo\",\n                    \"resolved\": \"{ id: string; value: boolean; disabled?: boolean; }\",\n                    \"references\": {\n                        \"CheckboxInfo\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/form-checkbox/form-checkbox.tsx\",\n                            \"id\": \"src/components/form-checkbox/form-checkbox.tsx::CheckboxInfo\"\n                        }\n                    }\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"checked\",\n                \"methodName\": \"checkedHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=form-checkbox.js.map\n"],"version":3}