@genexus/genexus-ide-ui 0.0.108 → 0.0.110

package/dist/cjs/gxg-ide-loader.cjs.entry.js

@@ -4,23 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5ab4492a.js');
 
-const ideLoaderCss = ":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}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader__wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:var(--gxg-ide-loader-wrapper__background-color--from);backdrop-filter:var(--gxg-ide-loader-wrapper__backdrop-filter);padding:var(--gxg-ide-loader-wrapper__padding);flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;color:var(--gxg-ide-loader-wrapper__color)}.loader__wrapper--visible{opacity:1}.loader__spinner{border:var(--gxg-ide-loader-spinner__border);border-top:var(--gxg-ide-loader-spinner__border-top);border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:var(--gxg-ide-loader-spinner__width);height:var(--gxg-ide-loader-spinner__width);flex-shrink:0}.loader__content-wrapper{display:flex;flex-direction:column;margin-block-start:var(--gxg-ide-loader-content-wrapper__mbs);gap:var(--gxg-ide-loader-content-wrapper__gap);max-width:var(--gxg-ide-loader-content-wrapper__max-width)}.loader__content-wrapper--hidden{display:none}@keyframes wrapper{from{background-color:var(--gxg-ide-loader-wrapper__background-color--from)}to{background-color:var(--gxg-ide-loader-wrapper__background-color--to)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}";
+const ideLoaderCss = ":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}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader__wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:var(--gxg-ide-loader-wrapper__background-color--from);backdrop-filter:var(--gxg-ide-loader-wrapper__backdrop-filter);padding:var(--gxg-ide-loader-wrapper__padding);flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;color:var(--gxg-ide-loader-wrapper__color)}.loader__wrapper--visible{opacity:1}.loader__spinner{border:var(--gxg-ide-loader-spinner__border);border-top:var(--gxg-ide-loader-spinner__border-top);border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:var(--gxg-ide-loader-spinner__width);height:var(--gxg-ide-loader-spinner__width);flex-shrink:0}.loader__content-wrapper{display:flex;flex-direction:column;margin-block-start:var(--gxg-ide-loader-content-wrapper__mbs);gap:var(--gxg-ide-loader-content-wrapper__gap);max-width:var(--gxg-ide-loader-content-wrapper__max-width)}.loader__content-wrapper--hidden{display:none}@keyframes wrapper{from{background-color:var(--gxg-ide-loader-wrapper__background-color--from)}to{background-color:var(--gxg-ide-loader-wrapper__background-color--to)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}:host([display-border]) .loader__wrapper{border:1px solid var(--mer-color__elevation--02)}";
 
 const IdeLoader = class {
     constructor(hostRef) {
-        /*
-      INDEX:
-      1.OWN PROPERTIES
-      2.REFERENCE TO ELEMENTS
-      3.STATE() VARIABLES
-      4.PUBLIC PROPERTY API | WATCH'S
-      5.EVENTS (EMIT)
-      6.COMPONENT LIFECYCLE EVENTS
-      7.LISTENERS
-      8.PUBLIC METHODS API
-      9.LOCAL METHODS
-      10.RENDER() FUNCTION
-      */
         // 1.OWN PROPERTIES //
         /**
          * The transition speed for displaying/hiding the ch-window
@@ -58,6 +45,8 @@ const IdeLoader = class {
         this.cancelCallback = undefined;
         this.show = false;
         this.abortTime = 5000;
+        this.displayBorder = false;
+        this.borderRadius = "0";
         this.container = undefined;
     }
     showHandler(show) {
@@ -89,7 +78,7 @@ const IdeLoader = class {
         return (index.h(index.Host, null, index.h("ch-window", { closeOnEscape: false, closeOnOutsideClick: false, container: this.container, hidden: !this.showWindow, modal: false, showFooter: false, showHeader: false, style: { "--show-transition": `${this.showTransition}ms` } }, index.h("div", { class: {
                 [`loader__wrapper`]: true,
                 "loader__wrapper--visible": this.showWrapper
-            }, part: "loader-wrapper" }, index.h("div", { class: "loader__spinner" }), index.h("div", { class: {
+            }, style: { borderRadius: this.borderRadius }, part: "loader-wrapper" }, index.h("div", { class: "loader__spinner" }), index.h("div", { class: {
                 "loader__content-wrapper": true,
                 "loader__content-wrapper--hidden": !this.description && !this.loaderTitle && !this.cancelLabel
             } }, this.renderTitle(), this.renderDescription(), this.renderCancelButton())))));

package/dist/cjs/gxg-ide-loader.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"gxg-ide-loader.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["node_modules/@genexus/gemini/dist/collection/components/ide-loader/ide-loader.css?tag=gxg-ide-loader&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/ide-loader/ide-loader.js"],"sourcesContent":[":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}\n\nch-window::part(mask) {\n  overflow: hidden;\n}\n\nch-window::part(main) {\n  height: 100%;\n}\n\nch-window::part(window) {\n  width: 100%;\n  height: 100%;\n}\n\n.loader__wrapper {\n  opacity: 0;\n  transition: var(--show-transition) opacity;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n  backdrop-filter: var(--gxg-ide-loader-wrapper__backdrop-filter);\n  padding: var(--gxg-ide-loader-wrapper__padding);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  color: var(--gxg-ide-loader-wrapper__color);\n}\n.loader__wrapper--visible {\n  opacity: 1;\n}\n.loader__spinner {\n  border: var(--gxg-ide-loader-spinner__border);\n  border-top: var(--gxg-ide-loader-spinner__border-top);\n  border-radius: 50%;\n  -webkit-animation: spinner 0.6s infinite linear;\n  animation: spinner 0.6s infinite linear;\n  width: var(--gxg-ide-loader-spinner__width);\n  height: var(--gxg-ide-loader-spinner__width);\n  flex-shrink: 0;\n}\n.loader__content-wrapper {\n  display: flex;\n  flex-direction: column;\n  margin-block-start: var(--gxg-ide-loader-content-wrapper__mbs);\n  gap: var(--gxg-ide-loader-content-wrapper__gap);\n  max-width: var(--gxg-ide-loader-content-wrapper__max-width);\n}\n.loader__content-wrapper--hidden {\n  display: none;\n}\n\n/*background color animation*/\n@keyframes wrapper {\n  from {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n  }\n  to {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--to);\n  }\n}\n/*spinner animation*/\n@-webkit-keyframes spinner {\n  from {\n    -webkit-transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(359deg);\n  }\n}\n@keyframes spinner {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}","import { Host, h } from \"@stencil/core\";\nexport class IdeLoader {\n    constructor() {\n        this.showWindow = false;\n        this.showWrapper = false;\n        this.loaderTitle = undefined;\n        this.description = undefined;\n        this.cancelLabel = undefined;\n        this.cancelCallback = undefined;\n        this.show = false;\n        this.abortTime = 5000;\n        this.container = undefined;\n    }\n    /*\n  INDEX:\n  1.OWN PROPERTIES\n  2.REFERENCE TO ELEMENTS\n  3.STATE() VARIABLES\n  4.PUBLIC PROPERTY API | WATCH'S\n  5.EVENTS (EMIT)\n  6.COMPONENT LIFECYCLE EVENTS\n  7.LISTENERS\n  8.PUBLIC METHODS API\n  9.LOCAL METHODS\n  10.RENDER() FUNCTION\n  */\n    // 1.OWN PROPERTIES //\n    /**\n     * The transition speed for displaying/hiding the ch-window\n     */\n    showTransition = 200;\n    timeoutReference;\n    // 2. REFERENCE TO ELEMENTS //\n    containerEl;\n    showHandler(show) {\n        const timeout = 50;\n        if (show) {\n            this.showWindow = true;\n            setTimeout(() => {\n                this.showWrapper = true;\n            }, timeout);\n        }\n        else {\n            this.showWrapper = false;\n            setTimeout(() => {\n                this.showWindow = false;\n                this.loaderFinished.emit();\n            }, this.showTransition);\n        }\n        if (show) {\n            if (this.timeoutReference) {\n                clearTimeout(this.timeoutReference);\n            }\n            this.timeoutReference = setTimeout(() => {\n                this.show = false;\n            }, this.abortTime);\n        }\n    }\n    // 5.EVENTS (EMIT) //\n    loaderFinished;\n    // 6.COMPONENT LIFECYCLE EVENTS //\n    // 7.LISTENERS //\n    // 8.PUBLIC METHODS API //\n    // 9.LOCAL METHODS //\n    renderTitle = () => {\n        return this.loaderTitle ? (h(\"gxg-title\", { class: \"loader__title\", type: \"title-04\", alignment: \"center\" }, this.loaderTitle)) : null;\n    };\n    renderDescription = () => {\n        return this.description ? (h(\"gxg-text\", { class: \"loader__description\", type: \"text-regular\", textAlign: \"center\" }, this.description)) : null;\n    };\n    renderCancelButton = () => {\n        return this.cancelLabel ? (h(\"gxg-button\", { class: {\n                [`loader__cancel-button`]: true\n            }, type: \"secondary-text-icon\", onClick: this.cancelProcess }, this.cancelLabel)) : null;\n    };\n    cancelProcess = () => {\n        if (this.cancelCallback) {\n            this.cancelCallback();\n        }\n        clearTimeout(this.timeoutReference);\n        this.show = false;\n    };\n    //  10.RENDER() FUNCTION //\n    render() {\n        return (h(Host, null, h(\"ch-window\", { closeOnEscape: false, closeOnOutsideClick: false, container: this.container, hidden: !this.showWindow, modal: false, showFooter: false, showHeader: false, style: { \"--show-transition\": `${this.showTransition}ms` } }, h(\"div\", { class: {\n                [`loader__wrapper`]: true,\n                \"loader__wrapper--visible\": this.showWrapper\n            }, part: \"loader-wrapper\" }, h(\"div\", { class: \"loader__spinner\" }), h(\"div\", { class: {\n                \"loader__content-wrapper\": true,\n                \"loader__content-wrapper--hidden\": !this.description && !this.loaderTitle && !this.cancelLabel\n            } }, this.renderTitle(), this.renderDescription(), this.renderCancelButton())))));\n    }\n    static get is() { return \"gxg-ide-loader\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ide-loader.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ide-loader.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"loaderTitle\": {\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 loader title (optional)\"\n                },\n                \"attribute\": \"loader-title\",\n                \"reflect\": false\n            },\n            \"description\": {\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 loader description (optional)\"\n                },\n                \"attribute\": \"description\",\n                \"reflect\": false\n            },\n            \"cancelLabel\": {\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 cancel button label (optional)\"\n                },\n                \"attribute\": \"cancel-label\",\n                \"reflect\": false\n            },\n            \"cancelCallback\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IdeLoaderCancelCallback\",\n                    \"resolved\": \"() => void\",\n                    \"references\": {\n                        \"IdeLoaderCancelCallback\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/ide-loader/ide-loader.tsx\",\n                            \"id\": \"src/components/ide-loader/ide-loader.tsx::IdeLoaderCancelCallback\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The cancel callback\"\n                }\n            },\n            \"show\": {\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\": \"It shows the loader\"\n                },\n                \"attribute\": \"show\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"abortTime\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The time the loader will await before abort.\"\n                },\n                \"attribute\": \"abort-time\",\n                \"reflect\": false,\n                \"defaultValue\": \"5000\"\n            },\n            \"container\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"HTMLElement\",\n                    \"resolved\": \"HTMLElement\",\n                    \"references\": {\n                        \"HTMLElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLElement\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The container element for the loader.\"\n                }\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"showWindow\": {},\n            \"showWrapper\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"loaderFinished\",\n                \"name\": \"loaderFinished\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get watchers() {\n        return [{\n                \"propName\": \"show\",\n                \"methodName\": \"showHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ide-loader.js.map\n"],"version":3}
+{"file":"gxg-ide-loader.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,42DAA42D;;MCCp3D,SAAS;IAClB;;;;;QAiBA,mBAAc,GAAG,GAAG,CAAC;;;;;QAkCrB,gBAAW,GAAG;YACV,OAAO,IAAI,CAAC,WAAW,IAAIA,OAAC,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC;SAC1I,CAAC;QACF,sBAAiB,GAAG;YAChB,OAAO,IAAI,CAAC,WAAW,IAAIA,OAAC,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC;SACnJ,CAAC;QACF,uBAAkB,GAAG;YACjB,OAAO,IAAI,CAAC,WAAW,IAAIA,OAAC,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE;oBAC5C,CAAC,uBAAuB,GAAG,IAAI;iBAClC,EAAE,IAAI,EAAE,qBAAqB,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC;SAChG,CAAC;QACF,kBAAa,GAAG;YACZ,IAAI,IAAI,CAAC,cAAc,EAAE;gBACrB,IAAI,CAAC,cAAc,EAAE,CAAC;aACzB;YACD,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;YACpC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;SACrB,CAAC;;;QAnEE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,YAAY,GAAG,GAAG,CAAC;QACxB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC9B;IASD,WAAW,CAAC,IAAI;QACZ,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,UAAU,CAAC;gBACP,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;aAC3B,EAAE,OAAO,CAAC,CAAC;SACf;aACI;YACD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YACzB,UAAU,CAAC;gBACP,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;aAC9B,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;SAC3B;QACD,IAAI,IAAI,EAAE;YACN,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBACvB,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACvC;YACD,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC;gBAC/B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;aACrB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;SACtB;KACJ;;IA0BD,MAAM;QACF,QAAQA,OAAC,CAACC,UAAI,EAAE,IAAI,EAAED,OAAC,CAAC,WAAW,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,mBAAmB,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,EAAE,EAAE,EAAEA,OAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;gBAC1Q,CAAC,iBAAiB,GAAG,IAAI;gBACzB,0BAA0B,EAAE,IAAI,CAAC,WAAW;aAC/C,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,EAAEA,OAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC,EAAEA,OAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;gBAC/H,yBAAyB,EAAE,IAAI;gBAC/B,iCAAiC,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,WAAW;aACjG,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;KACzF;;;;;;;;;","names":["h","Host"],"sources":["node_modules/@genexus/gemini/dist/collection/components/ide-loader/ide-loader.css?tag=gxg-ide-loader&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/ide-loader/ide-loader.js"],"sourcesContent":[":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}\n\nch-window::part(mask) {\n  overflow: hidden;\n}\n\nch-window::part(main) {\n  height: 100%;\n}\n\nch-window::part(window) {\n  width: 100%;\n  height: 100%;\n}\n\n.loader__wrapper {\n  opacity: 0;\n  transition: var(--show-transition) opacity;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n  backdrop-filter: var(--gxg-ide-loader-wrapper__backdrop-filter);\n  padding: var(--gxg-ide-loader-wrapper__padding);\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  color: var(--gxg-ide-loader-wrapper__color);\n}\n.loader__wrapper--visible {\n  opacity: 1;\n}\n.loader__spinner {\n  border: var(--gxg-ide-loader-spinner__border);\n  border-top: var(--gxg-ide-loader-spinner__border-top);\n  border-radius: 50%;\n  -webkit-animation: spinner 0.6s infinite linear;\n  animation: spinner 0.6s infinite linear;\n  width: var(--gxg-ide-loader-spinner__width);\n  height: var(--gxg-ide-loader-spinner__width);\n  flex-shrink: 0;\n}\n.loader__content-wrapper {\n  display: flex;\n  flex-direction: column;\n  margin-block-start: var(--gxg-ide-loader-content-wrapper__mbs);\n  gap: var(--gxg-ide-loader-content-wrapper__gap);\n  max-width: var(--gxg-ide-loader-content-wrapper__max-width);\n}\n.loader__content-wrapper--hidden {\n  display: none;\n}\n\n/*background color animation*/\n@keyframes wrapper {\n  from {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--from);\n  }\n  to {\n    background-color: var(--gxg-ide-loader-wrapper__background-color--to);\n  }\n}\n/*spinner animation*/\n@-webkit-keyframes spinner {\n  from {\n    -webkit-transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(359deg);\n  }\n}\n@keyframes spinner {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n:host([display-border]) .loader__wrapper {\n  border: 1px solid var(--mer-color__elevation--02);\n}","import { Host, h } from \"@stencil/core\";\nexport class IdeLoader {\n    constructor() {\n        this.showWindow = false;\n        this.showWrapper = false;\n        this.loaderTitle = undefined;\n        this.description = undefined;\n        this.cancelLabel = undefined;\n        this.cancelCallback = undefined;\n        this.show = false;\n        this.abortTime = 5000;\n        this.displayBorder = false;\n        this.borderRadius = \"0\";\n        this.container = undefined;\n    }\n    // 1.OWN PROPERTIES //\n    /**\n     * The transition speed for displaying/hiding the ch-window\n     */\n    showTransition = 200;\n    timeoutReference;\n    // 2. REFERENCE TO ELEMENTS //\n    containerEl;\n    showHandler(show) {\n        const timeout = 50;\n        if (show) {\n            this.showWindow = true;\n            setTimeout(() => {\n                this.showWrapper = true;\n            }, timeout);\n        }\n        else {\n            this.showWrapper = false;\n            setTimeout(() => {\n                this.showWindow = false;\n                this.loaderFinished.emit();\n            }, this.showTransition);\n        }\n        if (show) {\n            if (this.timeoutReference) {\n                clearTimeout(this.timeoutReference);\n            }\n            this.timeoutReference = setTimeout(() => {\n                this.show = false;\n            }, this.abortTime);\n        }\n    }\n    // 5.EVENTS (EMIT) //\n    loaderFinished;\n    // 6.COMPONENT LIFECYCLE EVENTS //\n    // 7.LISTENERS //\n    // 8.PUBLIC METHODS API //\n    // 9.LOCAL METHODS //\n    renderTitle = () => {\n        return this.loaderTitle ? (h(\"gxg-title\", { class: \"loader__title\", type: \"title-04\", alignment: \"center\" }, this.loaderTitle)) : null;\n    };\n    renderDescription = () => {\n        return this.description ? (h(\"gxg-text\", { class: \"loader__description\", type: \"text-regular\", textAlign: \"center\" }, this.description)) : null;\n    };\n    renderCancelButton = () => {\n        return this.cancelLabel ? (h(\"gxg-button\", { class: {\n                [`loader__cancel-button`]: true\n            }, type: \"secondary-text-icon\", onClick: this.cancelProcess }, this.cancelLabel)) : null;\n    };\n    cancelProcess = () => {\n        if (this.cancelCallback) {\n            this.cancelCallback();\n        }\n        clearTimeout(this.timeoutReference);\n        this.show = false;\n    };\n    //  10.RENDER() FUNCTION //\n    render() {\n        return (h(Host, null, h(\"ch-window\", { closeOnEscape: false, closeOnOutsideClick: false, container: this.container, hidden: !this.showWindow, modal: false, showFooter: false, showHeader: false, style: { \"--show-transition\": `${this.showTransition}ms` } }, h(\"div\", { class: {\n                [`loader__wrapper`]: true,\n                \"loader__wrapper--visible\": this.showWrapper\n            }, style: { borderRadius: this.borderRadius }, part: \"loader-wrapper\" }, h(\"div\", { class: \"loader__spinner\" }), h(\"div\", { class: {\n                \"loader__content-wrapper\": true,\n                \"loader__content-wrapper--hidden\": !this.description && !this.loaderTitle && !this.cancelLabel\n            } }, this.renderTitle(), this.renderDescription(), this.renderCancelButton())))));\n    }\n    static get is() { return \"gxg-ide-loader\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ide-loader.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ide-loader.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"loaderTitle\": {\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 loader title (optional)\"\n                },\n                \"attribute\": \"loader-title\",\n                \"reflect\": false\n            },\n            \"description\": {\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 loader description (optional)\"\n                },\n                \"attribute\": \"description\",\n                \"reflect\": false\n            },\n            \"cancelLabel\": {\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 cancel button label (optional)\"\n                },\n                \"attribute\": \"cancel-label\",\n                \"reflect\": false\n            },\n            \"cancelCallback\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IdeLoaderCancelCallback\",\n                    \"resolved\": \"() => void\",\n                    \"references\": {\n                        \"IdeLoaderCancelCallback\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/ide-loader/ide-loader.tsx\",\n                            \"id\": \"src/components/ide-loader/ide-loader.tsx::IdeLoaderCancelCallback\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The cancel callback\"\n                }\n            },\n            \"show\": {\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\": \"It shows the loader\"\n                },\n                \"attribute\": \"show\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"abortTime\": {\n                \"type\": \"number\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"number\",\n                    \"resolved\": \"number\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The time the loader will await before abort.\"\n                },\n                \"attribute\": \"abort-time\",\n                \"reflect\": false,\n                \"defaultValue\": \"5000\"\n            },\n            \"displayBorder\": {\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\": \"Displays a border all around\"\n                },\n                \"attribute\": \"display-border\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"borderRadius\": {\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 border radius value that applies on the .loader__wrapper\"\n                },\n                \"attribute\": \"border-radius\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"0\\\"\"\n            },\n            \"container\": {\n                \"type\": \"unknown\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"HTMLElement\",\n                    \"resolved\": \"HTMLElement\",\n                    \"references\": {\n                        \"HTMLElement\": {\n                            \"location\": \"global\",\n                            \"id\": \"global::HTMLElement\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The container element for the loader.\"\n                }\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"showWindow\": {},\n            \"showWrapper\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"loaderFinished\",\n                \"name\": \"loaderFinished\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\"\n                },\n                \"complexType\": {\n                    \"original\": \"void\",\n                    \"resolved\": \"void\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get watchers() {\n        return [{\n                \"propName\": \"show\",\n                \"methodName\": \"showHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=ide-loader.js.map\n"],"version":3}

package/dist/cjs/gxg-tab_4.cjs.entry.js

@@ -395,7 +395,7 @@ const GxgTabButton = class {
 };
 GxgTabButton.style = tabButtonCss;
 
-const tabsCss = ":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{display:block;height:auto;background:var(--color-background);border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);position:relative;font-family:var(--ds-base-font-family-primary)}.main-container{height:100%;max-height:100%;display:flex;flex-direction:column;justify-content:space-between;border-width:var(--gxg-tabs-border-width);border-style:solid;border-color:var(--gxg-tabs-border-color);border-radius:var(--gxg-tabs-border-radius);overflow:hidden}.main-container--no-border{border:none}.tabs-container{height:100%;overflow-y:auto}:host([position=left-rotated]) .main-container,:host([position=right-rotated]) .main-container{flex-direction:row}:host([position=left-rotated]) .tab-bar-container,:host([position=right-rotated]) .tab-bar-container{height:100%;overflow:auto;width:40px;position:relative;}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-track,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-corner,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host([position=left-rotated]) ::slotted(gxg-tab-bar),:host([position=right-rotated]) ::slotted(gxg-tab-bar){transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10}:host([position=left-rotated]) ::slotted(gxg-tab),:host([position=right-rotated]) ::slotted(gxg-tab){border-left-width:var(--gxg-tabs-border-width);border-left-style:solid;border-left-color:var(--gxg-tabs-border-color)}:host([position=left-rotated]) .tabs-container,:host([position=right-rotated]) .tabs-container{width:calc(100% - 32px)}:host([position=left-rotated]) .main-container{flex-direction:row}:host([position=right-rotated]) .main-container{flex-direction:row-reverse}:host([position=left-stacked]) .main-container,:host([position=right-stacked]) .main-container{flex-direction:row}:host([position=left-stacked]) .main-container{flex-direction:row}:host([position=right-stacked]) .main-container{flex-direction:row-reverse}";
+const tabsCss = ":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{display:block;height:auto;background:var(--color-background);border-radius:var(--border-width-md);box-shadow:var(--box-shadow-01);position:relative;font-family:var(--ds-base-font-family-primary)}.main-container{height:100%;max-height:100%;display:flex;flex-direction:column;justify-content:space-between;border-width:var(--gxg-tabs-border-width);border-style:solid;border-color:var(--gxg-tabs-border-color);border-radius:var(--gxg-tabs-border-radius);overflow:hidden;background-color:var(--gxg-tab-bar-background-color)}.main-container--no-border{border:none}.tabs-container{height:100%;overflow-y:auto}:host([position=left-rotated]) .main-container,:host([position=right-rotated]) .main-container{flex-direction:row}:host([position=left-rotated]) .tab-bar-container,:host([position=right-rotated]) .tab-bar-container{height:100%;overflow:auto;width:40px;position:relative;}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-track,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-corner,:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host([position=left-rotated]) ::slotted(gxg-tab-bar),:host([position=right-rotated]) ::slotted(gxg-tab-bar){transform:rotate(-90deg) translate(-100%, 0);transform-origin:left top;position:absolute;z-index:10}:host([position=left-rotated]) ::slotted(gxg-tab),:host([position=right-rotated]) ::slotted(gxg-tab){border-left-width:var(--gxg-tabs-border-width);border-left-style:solid;border-left-color:var(--gxg-tabs-border-color)}:host([position=left-rotated]) .tabs-container,:host([position=right-rotated]) .tabs-container{width:calc(100% - 32px)}:host([position=left-rotated]) .main-container{flex-direction:row}:host([position=right-rotated]) .main-container{flex-direction:row-reverse}:host([position=left-stacked]) .main-container,:host([position=right-stacked]) .main-container{flex-direction:row}:host([position=left-stacked]) .main-container{flex-direction:row}:host([position=right-stacked]) .main-container{flex-direction:row-reverse}";
 
 const GxgTabs = class {
     constructor(hostRef) {