npm - @genexus/genexus-ide-ui - Versions diffs - 0.0.99 → 0.0.100 - Mend

@genexus/genexus-ide-ui 0.0.99 → 0.0.100

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

Files changed (183) hide show

package/dist/components/gxg-pills.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gxg-pills.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,~~sJAAsJ~~;;~~MCE1JA~~,UAAQ;;;;;;;;;;IAKjB,MAAM,QAAQ,CAAC,WAAW,GAAG,IAAI;QAC7B,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,IAAI,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;QAC7D,IAAI,WAAW,EAAE;YACb,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAClD;QACD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;YACf,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC1B,CAAC,CAAC;QACH,OAAO,QAAQ,CAAC;KACnB;IACD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE;KAClH;;;;;;;;;;;;;;;;;;;;;;;;","names":["GxgPills"],"sources":["node_modules/@genexus/gemini/dist/collection/components/pills/pills.css?tag=gxg-pills&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/pills/pills.js"],"sourcesContent":[":host {\n display: block;\n}\n\n.pills-wrapper {\n display: flex;\n gap: var(--~~spacing~~-~~comp-02~~);\n flex-wrap: wrap;\n}~~\n\n/*******************************************\nMercury\n******************************************/\n:host(.mercury) .pills-wrapper {\n gap: var(--spacing-comp-04);\n}~~","import { Host, h } from \"@stencil/core\";\nimport state from \"../store\";\nexport class GxgPills {\n el;\n /\n * Returns an array with the id's of all the pills\n */\n async getPills(onlyEnabled = true) {\n const pillsIds = [];\n let pills = Array.from(this.el.querySelectorAll(\"gxg-pill\"));\n if (onlyEnabled) {\n pills = pills.filter((pill) => !pill.disabled);\n }\n pills.forEach((pill) => {\n pillsIds.push(pill.id);\n });\n return pillsIds;\n }\n render() {\n return (h(Host, { class: { mercury: state.mercury } }, h(\"div\", { class: \"pills-wrapper\" }, h(\"slot\", null))));\n }\n static get is() { return \"gxg-pills\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"pills.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"pills.css\"]\n };\n }\n static get methods() {\n return {\n \"getPills\": {\n \"complexType\": {\n \"signature\": \"(onlyEnabled?: boolean) => Promise<string[]>\",\n \"parameters\": [{\n \"name\": \"onlyEnabled\",\n \"type\": \"boolean\",\n \"docs\": \"\"\n }],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<string[]>\"\n },\n \"docs\": {\n \"text\": \"Returns an array with the id's of all the pills\",\n \"tags\": []\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=pills.js.map\n"],"version":3}
1	+ {"file":"gxg-pills.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,2FAA2F;;MCE/FA,UAAQ;;;;;;;;;;IAKjB,MAAM,QAAQ,CAAC,WAAW,GAAG,IAAI;QAC7B,MAAM,QAAQ,GAAG,EAAE,CAAC;QACpB,IAAI,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;QAC7D,IAAI,WAAW,EAAE;YACb,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAClD;QACD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;YACf,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC1B,CAAC,CAAC;QACH,OAAO,QAAQ,CAAC;KACnB;IACD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE;KAClH;;;;;;;;;;;;;;;;;;;;;;;;","names":["GxgPills"],"sources":["node_modules/@genexus/gemini/dist/collection/components/pills/pills.css?tag=gxg-pills&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/pills/pills.js"],"sourcesContent":[":host {\n display: block;\n}\n\n.pills-wrapper {\n display: flex;\n gap: var(--gxg-pills__gap);\n flex-wrap: wrap;\n}","import { Host, h } from \"@stencil/core\";\nimport state from \"../store\";\nexport class GxgPills {\n el;\n /*\n Returns an array with the id's of all the pills\n */\n async getPills(onlyEnabled = true) {\n const pillsIds = [];\n let pills = Array.from(this.el.querySelectorAll(\"gxg-pill\"));\n if (onlyEnabled) {\n pills = pills.filter((pill) => !pill.disabled);\n }\n pills.forEach((pill) => {\n pillsIds.push(pill.id);\n });\n return pillsIds;\n }\n render() {\n return (h(Host, { class: { mercury: state.mercury } }, h(\"div\", { class: \"pills-wrapper\" }, h(\"slot\", null))));\n }\n static get is() { return \"gxg-pills\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"pills.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"pills.css\"]\n };\n }\n static get methods() {\n return {\n \"getPills\": {\n \"complexType\": {\n \"signature\": \"(onlyEnabled?: boolean) => Promise<string[]>\",\n \"parameters\": [{\n \"name\": \"onlyEnabled\",\n \"type\": \"boolean\",\n \"docs\": \"\"\n }],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<string[]>\"\n },\n \"docs\": {\n \"text\": \"Returns an array with the id's of all the pills\",\n \"tags\": []\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=pills.js.map\n"],"version":3}

package/dist/components/gxg-top-state-bar2.js CHANGED Viewed

@@ -2,18 +2,32 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './icon2.js';
-const gxgTopStateBarCss = ":host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{}.top-state-bar__wrapper{padding:0 var(--mer-spacing--md);display:flex;justify-content:center;align-items:center;height:var(--mer-spacing--xxl)}.top-state-bar__caption{opacity:0;transition:150ms opacity;color:var(--mer-text__on-message);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--semi-bold)}.top-state-bar__caption--visible{opacity:1}.top-state-bar__close{opacity:0;transition:200ms opacity;cursor:pointer}.top-state-bar__close:hover{opacity:0.75}.top-state-bar__close--visible{opacity:1}.top-state-bar--accent .top-state-bar__wrapper{background-color:var(--mer-accent__primary);color:var(--mer-text__on-primary)}.top-state-bar--success .top-state-bar__wrapper{background-color:var(--mer-color__message-green--100)}.top-state-bar--warning .top-state-bar__wrapper{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--error .top-state-bar__wrapper{background-color:var(--mer-color__message-red--100)}.top-state-bar--in-progress .top-state-bar__wrapper{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .top-state-bar__wrapper:after{content:\"\";position:absolute;z-index:0;width:300%;height:100%;left:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgress;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--in-progress .top-state-bar__caption{display:flex;align-items:center;flex-direction:column;position:relative;z-index:2}.top-state-bar--with-action .top-state-bar__caption{flex:1;text-align:center}.top-state-bar--with-action .top-state-bar__wrapper{padding-inline-end:var(--mer-spacing--xxs)}@-webkit-keyframes inProgress{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgress{0%{left:0%}100%{left:200%}}@keyframes inProgress{0%{left:0%}100%{left:-200%}}.progress-bar{transition:all 200ms;width:var(--top-bar-progress);background-color:var(--mer-accent__primary);height:var(--mer-spacing--xxs)}.progress-bar--hidden{height:0}";
+const gxgTopStateBarCss = ":host{--top-bar-progress:0%;display:grid;grid-template-rows:0fr;transition:200ms grid-template-rows}:host>*{overflow:hidden}:host(.visible){grid-template-rows:1fr}.top-state-bar{position:relative;border-radius:var(--mer-border__width--lg);list-style:var(--mer-font__size--xxs);display:flex;opacity:0;transition:150ms opacity;}.top-state-bar:before{content:\"\";width:100%;height:100%;position:absolute;background-color:var(--mer-color__elevation--04);z-index:-1}.top-state-bar:after{content:\"\";left:var(--mer-border__width--sm);top:var(--mer-border__width--sm);width:calc(100% - var(--mer-border__width--sm) * 2);height:calc(100% - var(--mer-border__width--sm) * 2);position:absolute;background-color:var(--mer-color__surface);z-index:0;border-radius:var(--mer-border__width--lg)}.top-state-bar>*{position:relative;z-index:1}.top-state-bar__wrapper{flex:1;display:flex;flex-direction:column;gap:var(--mer-spacing--xs);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.top-state-bar__caption{color:var(--mer-text__on-message);font-family:var(--ds-base-font-family-primary);font-size:var(--mer-font__size--xxs);line-height:var(--mer-font__size--xxs);font-weight:var(--mer-font__weight--regular);display:flex;align-items:baseline;font-style:italic}.top-state-bar__progress-wrapper{height:var(--mer-spacing--xxs);background-color:var(--mer-color__elevation--04)}.top-state-bar__close-wrapper{cursor:pointer;border-inline-start:1px solid var(--mer-color__elevation--04);display:flex;align-items:center;transition:200ms background-color}.top-state-bar__close-wrapper:hover .top-state-bar__close{opacity:0.75}.top-state-bar__close-wrapper:active .top-state-bar__close{opacity:0.5}.top-state-bar--accent .progress-bar{background-color:var(--mer-accent__primary)}.top-state-bar--accent .top-state-bar__caption{color:var(--mer-accent__primary)}.top-state-bar--success .progress-bar{background-color:var(--mer-color__message-green--100)}.top-state-bar--success .top-state-bar__caption{color:var(--mer-color__message-green--100)}.top-state-bar--warning .progress-bar{background-color:var(--mer-color__message-yellow--100)}.top-state-bar--warning .top-state-bar__caption{color:var(--mer-color__message-yellow--100)}.top-state-bar--error .progress-bar{background-color:var(--mer-color__message-red--100)}.top-state-bar--error .top-state-bar__caption{color:var(--mer-color__message-red--100)}.top-state-bar--in-progress:before{height:0;width:120%;padding-top:60%;padding-bottom:60%;background:linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);top:50%;left:50%;transform:translate(-50%, -50%);-webkit-animation:inProgressBackgroundColor 1s linear infinite;animation:inProgressBackgroundColor 1s linear infinite}.top-state-bar--in-progress .top-state-bar__close-wrapper{border-inline-start-color:#3fa89b;-webkit-animation:inProgressBorderColor 1s linear infinite;animation:inProgressBorderColor 1s linear infinite}.top-state-bar--in-progress .progress-bar{position:relative;overflow:hidden;z-index:1}.top-state-bar--in-progress .progress-bar:after{content:\"\";position:absolute;z-index:0;width:300%;height:100%;left:0;background:linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);animation-name:inProgressBar;animation-duration:2s;animation-iteration-count:infinite}.top-state-bar--in-progress .top-state-bar__caption{color:#3fa89b}.top-state-bar--visible{opacity:1}@-webkit-keyframes inProgressBorderColor{0%{border-inline-start-color:#3fa89b}100%{border-inline-start-color:#5ba7ff}}@-webkit-keyframes inProgressBackgroundColor{0%{transform:translate(-50%, -50%) rotate(0)}100%{transform:translate(-50%, -50%) rotate(1turn)}}@-webkit-keyframes inProgressBar{0%{left:0%}100%{left:-200%}}@-moz-keyframes inProgressBar{0%{left:0%}100%{left:200%}}@keyframes inProgressBar{0%{left:0%}100%{left:-200%}}.progress-bar{display:block;transition:all 200ms;width:var(--top-bar-progress);border-radius:calc(var(--mer-spacing--xxs) / 2);height:100%}:host([no-border]) .top-state-bar{position:relative}:host([no-border]) .top-state-bar:before,:host([no-border]) .top-state-bar:after{display:none}:host([no-border]) .top-state-bar__close-wrapper{border-inline-start:none}";
 const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar extends HTMLElement {
     constructor() {
         // 7.LISTENERS //
         // 8.PUBLIC METHODS API //
         // 9.LOCAL METHODS //
+        this.evaluateInitialProgress = () => {
+            if (this.progress === undefined &&
+                (this.stateType === "error" ||
+                    this.stateType === "warning" ||
+                    this.stateType === "success")) {
+                this.progress = 100;
+            }
+            else if (this.progress === undefined &&
+                this.stateType === "in-progress") {
+                this.progress = 0;
+            }
+            this.el.style.setProperty("--top-bar-progress", `${this.progress}%`);
+        };
         this.evaluateWithAction = () => {
-            if (this.stateType === "error" ||
-                this.stateType === "warning" ||
-                this.stateType === "success") {
-                this.stateWithAction = true;
+            if (this.withClose === undefined &&
+                (this.stateType === "error" ||
+                    this.stateType === "warning" ||
+                    this.stateType === "success")) {
+                this.withClose = true;
             }
         };
         this.closeButtonHandler = () => {
@@ -22,30 +36,31 @@ const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar ext
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.stateWithAction = false;
-        this.captionVisible = false;
+        this.topStateBarVisible = false;
         this.visible = false;
         this.caption = undefined;
+        this.minimal = false;
         this.active = false;
         this.stateType = "in-progress";
-        this.withProgressBar = false;
-        this.progress = 0;
+        this.progress = undefined;
+        this.withClose = undefined;
         this.autoClose = false;
+        this.noBorder = false;
+        this.closedCallback = false;
     }
     get el() { return this; }
     watchActiveHandler(active) {
         if (active) {
             this.visible = true;
             setTimeout(() => {
-                this.captionVisible = true;
+                this.topStateBarVisible = true;
             }, 300);
         }
         else {
-            this.captionVisible = false;
+            this.topStateBarVisible = false;
             setTimeout(() => {
                 this.visible = false;
             }, 300);
-            this.progress = 0;
         }
     }
     watchStateTypeHandler() {
@@ -56,16 +71,19 @@ const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar ext
             this.el.style.setProperty("--top-bar-progress", `${progress}%`);
         }
         if (progress === 100 && this.autoClose) {
-            this.active = false;
+            setTimeout(() => {
+                this.active = false;
+            }, 200);
         }
     }
     // 5.EVENTS (EMIT) //
     // 6.COMPONENT LIFECYCLE EVENTS //
     componentWillLoad() {
         this.evaluateWithAction();
+        this.evaluateInitialProgress();
         if (this.active) {
             this.visible = true;
-            this.captionVisible = true;
+            this.topStateBarVisible = true;
         }
     }
     //  10.RENDER() FUNCTION //
@@ -73,19 +91,15 @@ const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar ext
         return (h(Host, { class: { visible: this.visible }, "aria-hidden": !this.active }, h("div", { role: "status", "aria-labelledby": "label", "aria-hidden": !this.active, class: {
                 "top-state-bar": true,
                 [`top-state-bar--${this.stateType}`]: true,
-                "top-state-bar--with-action": this.stateWithAction
-            } }, h("div", { class: {
-                "top-state-bar__wrapper": true
-            }, part: "wrapper" }, h("label", { id: "label", class: {
-                "top-state-bar__caption": true,
-                "top-state-bar__caption--visible": this.captionVisible
-            }, part: "label" }, this.caption), this.stateWithAction ? (h("gxg-icon", { class: {
-                "top-state-bar__close": true,
-                "top-state-bar__close--visible": this.captionVisible
-            }, role: "button", "aria-label": "close", type: "gemini-tools/close", color: "mercury-text-on-message", tabIndex: 0, onClick: this.closeButtonHandler })) : null), this.withProgressBar ? (h("div", { class: {
-                "progress-bar": true,
-                "progress-bar--hidden": this.progress === 0 || this.progress === 100
-            } })) : null)));
+                "top-state-bar--with-close": this.withClose,
+                "top-state-bar--visible": this.topStateBarVisible
+            } }, h("div", { class: "top-state-bar__wrapper" }, !this.minimal ? (h("label", { id: "label", class: {
+                "top-state-bar__caption": true
+            }, part: "label" }, this.caption)) : null, h("div", { class: {
+                "top-state-bar__progress-wrapper": true
+            }, part: "progress-wrapper" }, h("span", { class: "progress-bar" }))), this.withClose && !this.minimal ? (h("div", { class: "top-state-bar__close-wrapper", onClick: this.closeButtonHandler }, h("gxg-icon", { class: {
+                "top-state-bar__close": true
+            }, role: "button", "aria-label": "close", type: "gemini-tools/close", color: "mercury-primary", tabIndex: 0 }))) : null)));
     }
     static get watchers() { return {
         "active": ["watchActiveHandler"],
@@ -95,13 +109,15 @@ const GxgTopStateBar = /*@__PURE__*/ proxyCustomElement(class GxgTopStateBar ext
     static get style() { return gxgTopStateBarCss; }
 }, [1, "gxg-top-state-bar", {
         "caption": [1],
+        "minimal": [516],
         "active": [4],
         "stateType": [513, "state-type"],
-        "withProgressBar": [4, "with-progress-bar"],
         "progress": [2],
+        "withClose": [4, "with-close"],
         "autoClose": [4, "auto-close"],
-        "stateWithAction": [32],
-        "captionVisible": [32],
+        "noBorder": [516, "no-border"],
+        "closedCallback": [516, "closed-callback"],
+        "topStateBarVisible": [32],
         "visible": [32]
     }, undefined, {
         "active": ["watchActiveHandler"],

package/dist/components/gxg-top-state-bar2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gxg-top-state-bar2.js","mappings":"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","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":[":host {\n --top-bar-progress: 0%;\n display: grid;\n grid-template-rows: 0fr;\n transition: 200ms grid-template-rows;\n}\n:host > * {\n overflow: hidden;\n}\n\n:host(.visible) {\n grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n /states/\n /with action/\n}\n.top-state-bar__wrapper {\n padding: 0 var(--mer-spacing--md);\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--mer-spacing--xxl);\n}\n.top-state-bar__caption {\n opacity: 0;\n transition: 150ms opacity;\n color: var(--mer-text__on-message);\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--semi-bold);\n}\n.top-state-bar__caption--visible {\n opacity: 1;\n}\n.top-state-bar__close {\n opacity: 0;\n transition: 200ms opacity;\n cursor: pointer;\n}\n.top-state-bar__close:hover {\n opacity: 0.75;\n}\n.top-state-bar__close--visible {\n opacity: 1;\n}\n.top-state-bar--accent .top-state-bar__wrapper {\n background-color: var(--mer-accent__primary);\n color: var(--mer-text__on-primary);\n}\n.top-state-bar--success .top-state-bar__wrapper {\n background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .top-state-bar__wrapper {\n background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .top-state-bar__wrapper {\n background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress .top-state-bar__wrapper {\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n.top-state-bar--in-progress .top-state-bar__wrapper:after {\n content: \"\";\n position: absolute;\n z-index: 0;\n width: 300%;\n height: 100%;\n left: 0;\n background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);\n animation-name: inProgress;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n}\n.top-state-bar--in-progress .top-state-bar__caption {\n display: flex;\n align-items: center;\n flex-direction: column;\n position: relative;\n z-index: 2;\n}\n.top-state-bar--with-action .top-state-bar__caption {\n flex: 1;\n text-align: center;\n}\n.top-state-bar--with-action .top-state-bar__wrapper {\n padding-inline-end: var(--mer-spacing--xxs);\n}\n\n/in progress animation/\n@-webkit-keyframes inProgress {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n@-moz-keyframes inProgress {\n 0% {\n left: 0%;\n }\n 100% {\n left: 200%;\n }\n}\n@keyframes inProgress {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n.progress-bar {\n transition: all 200ms;\n width: var(--top-bar-progress);\n background-color: var(--mer-accent__primary);\n height: var(--mer-spacing--xxs);\n}\n.progress-bar--hidden {\n height: 0;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n constructor() {\n this.stateWithAction = false;\n this.captionVisible = false;\n this.visible = false;\n this.caption = undefined;\n this.active = false;\n this.stateType = \"in-progress\";\n this.withProgressBar = false;\n this.progress = 0;\n this.autoClose = false;\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 METHODS\n 7.LISTENERS\n 8.PUBLIC METHODS API\n 9.LOCAL METHODS\n 10.RENDER() FUNCTION\n /\n // 1.OWN PROPERTIES //\n // 2. REFERENCE TO ELEMENTS //\n el;\n watchActiveHandler(active) {\n if (active) {\n this.visible = true;\n setTimeout(() => {\n this.captionVisible = true;\n }, 300);\n }\n else {\n this.captionVisible = false;\n setTimeout(() => {\n this.visible = false;\n }, 300);\n this.progress = 0;\n }\n }\n watchStateTypeHandler() {\n this.evaluateWithAction();\n }\n watchProgressHandler(progress) {\n if (progress => 0 && progress <= 100) {\n this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n }\n if (progress === 100 && this.autoClose) {\n this.active = false;\n }\n }\n // 5.EVENTS (EMIT) //\n // 6.COMPONENT LIFECYCLE EVENTS //\n componentWillLoad() {\n this.evaluateWithAction();\n if (this.active) {\n this.visible = true;\n this.captionVisible = true;\n }\n }\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n evaluateWithAction = () => {\n if (this.stateType === \"error\" \|\|\n this.stateType === \"warning\" \|\|\n this.stateType === \"success\") {\n this.stateWithAction = true;\n }\n };\n closeButtonHandler = () => {\n this.active = false;\n };\n // 10.RENDER() FUNCTION //\n render() {\n return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n \"top-state-bar\": true,\n [`top-state-bar--${this.stateType}`]: true,\n \"top-state-bar--with-action\": this.stateWithAction\n } }, h(\"div\", { class: {\n \"top-state-bar__wrapper\": true\n }, part: \"wrapper\" }, h(\"label\", { id: \"label\", class: {\n \"top-state-bar__caption\": true,\n \"top-state-bar__caption--visible\": this.captionVisible\n }, part: \"label\" }, this.caption), this.stateWithAction ? (h(\"gxg-icon\", { class: {\n \"top-state-bar__close\": true,\n \"top-state-bar__close--visible\": this.captionVisible\n }, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-text-on-message\", tabIndex: 0, onClick: this.closeButtonHandler })) : null), this.withProgressBar ? (h(\"div\", { class: {\n \"progress-bar\": true,\n \"progress-bar--hidden\": this.progress === 0 \|\| this.progress === 100\n } })) : null)));\n }\n static get is() { return \"gxg-top-state-bar\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.css\"]\n };\n }\n static get properties() {\n return {\n \"caption\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"caption\",\n \"reflect\": false\n },\n \"active\": {\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 top-bar active state. If false it will be hidden\"\n },\n \"attribute\": \"active\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"stateType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"topStateBarType\",\n \"resolved\": \"\\\"accent\\\" \| \\\"error\\\" \| \\\"in-progress\\\" \| \\\"success\\\" \| \\\"warning\\\"\",\n \"references\": {\n \"topStateBarType\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/top-state-bar/gxg-top-state-bar.tsx\",\n \"id\": \"src/components/top-state-bar/gxg-top-state-bar.tsx::topStateBarType\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"state-type\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"in-progress\\\"\"\n },\n \"withProgressBar\": {\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 will display a progress bar\"\n },\n \"attribute\": \"with-progress-bar\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"progress\": {\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 progress bar progress\"\n },\n \"attribute\": \"progress\",\n \"reflect\": false,\n \"defaultValue\": \"0\"\n },\n \"autoClose\": {\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 true, it will auto-close when the progress is 100\"\n },\n \"attribute\": \"auto-close\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get states() {\n return {\n \"stateWithAction\": {},\n \"captionVisible\": {},\n \"visible\": {}\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"active\",\n \"methodName\": \"watchActiveHandler\"\n }, {\n \"propName\": \"stateType\",\n \"methodName\": \"watchStateTypeHandler\"\n }, {\n \"propName\": \"progress\",\n \"methodName\": \"watchProgressHandler\"\n }];\n }\n}\n//# sourceMappingURL=gxg-top-state-bar.js.map\n"],"version":3}
1	+ {"file":"gxg-top-state-bar2.js","mappings":"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","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css?tag=gxg-top-state-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.js"],"sourcesContent":[":host {\n --top-bar-progress: 0%;\n display: grid;\n grid-template-rows: 0fr;\n transition: 200ms grid-template-rows;\n}\n:host > * {\n overflow: hidden;\n}\n\n:host(.visible) {\n grid-template-rows: 1fr;\n}\n\n.top-state-bar {\n position: relative;\n border-radius: var(--mer-border__width--lg);\n list-style: var(--mer-font__size--xxs);\n display: flex;\n opacity: 0;\n transition: 150ms opacity;\n /states/\n}\n.top-state-bar:before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n background-color: var(--mer-color__elevation--04);\n z-index: -1;\n}\n.top-state-bar:after {\n content: \"\";\n left: var(--mer-border__width--sm);\n top: var(--mer-border__width--sm);\n width: calc(100% - var(--mer-border__width--sm) * 2);\n height: calc(100% - var(--mer-border__width--sm) * 2);\n position: absolute;\n background-color: var(--mer-color__surface);\n z-index: 0;\n border-radius: var(--mer-border__width--lg);\n}\n.top-state-bar > * {\n position: relative;\n z-index: 1;\n}\n.top-state-bar__wrapper {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: var(--mer-spacing--xs);\n padding: var(--mer-spacing--sm) var(--mer-spacing--sm);\n}\n.top-state-bar__caption {\n color: var(--mer-text__on-message);\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--mer-font__size--xxs);\n line-height: var(--mer-font__size--xxs);\n font-weight: var(--mer-font__weight--regular);\n display: flex;\n align-items: baseline;\n font-style: italic;\n}\n.top-state-bar__progress-wrapper {\n height: var(--mer-spacing--xxs);\n background-color: var(--mer-color__elevation--04);\n}\n.top-state-bar__close-wrapper {\n cursor: pointer;\n border-inline-start: 1px solid var(--mer-color__elevation--04);\n display: flex;\n align-items: center;\n transition: 200ms background-color;\n}\n.top-state-bar__close-wrapper:hover .top-state-bar__close {\n opacity: 0.75;\n}\n.top-state-bar__close-wrapper:active .top-state-bar__close {\n opacity: 0.5;\n}\n.top-state-bar--accent .progress-bar {\n background-color: var(--mer-accent__primary);\n}\n.top-state-bar--accent .top-state-bar__caption {\n color: var(--mer-accent__primary);\n}\n.top-state-bar--success .progress-bar {\n background-color: var(--mer-color__message-green--100);\n}\n.top-state-bar--success .top-state-bar__caption {\n color: var(--mer-color__message-green--100);\n}\n.top-state-bar--warning .progress-bar {\n background-color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--warning .top-state-bar__caption {\n color: var(--mer-color__message-yellow--100);\n}\n.top-state-bar--error .progress-bar {\n background-color: var(--mer-color__message-red--100);\n}\n.top-state-bar--error .top-state-bar__caption {\n color: var(--mer-color__message-red--100);\n}\n.top-state-bar--in-progress:before {\n height: 0;\n width: 120%;\n padding-top: 60%;\n padding-bottom: 60%;\n background: linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n -webkit-animation: inProgressBackgroundColor 1s linear infinite;\n animation: inProgressBackgroundColor 1s linear infinite;\n}\n.top-state-bar--in-progress .top-state-bar__close-wrapper {\n border-inline-start-color: #3fa89b;\n -webkit-animation: inProgressBorderColor 1s linear infinite;\n animation: inProgressBorderColor 1s linear infinite;\n}\n.top-state-bar--in-progress .progress-bar {\n position: relative;\n overflow: hidden;\n z-index: 1;\n}\n.top-state-bar--in-progress .progress-bar:after {\n content: \"\";\n position: absolute;\n z-index: 0;\n width: 300%;\n height: 100%;\n left: 0;\n background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);\n animation-name: inProgressBar;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n}\n.top-state-bar--in-progress .top-state-bar__caption {\n color: #3fa89b;\n}\n.top-state-bar--visible {\n opacity: 1;\n}\n\n/in progress animation/\n@-webkit-keyframes inProgressBorderColor {\n 0% {\n border-inline-start-color: #3fa89b;\n }\n 100% {\n border-inline-start-color: #5ba7ff;\n }\n}\n@-webkit-keyframes inProgressBackgroundColor {\n 0% {\n transform: translate(-50%, -50%) rotate(0);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(1turn);\n }\n}\n@-webkit-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n@-moz-keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: 200%;\n }\n}\n@keyframes inProgressBar {\n 0% {\n left: 0%;\n }\n 100% {\n left: -200%;\n }\n}\n.progress-bar {\n display: block;\n transition: all 200ms;\n width: var(--top-bar-progress);\n border-radius: calc(var(--mer-spacing--xxs) / 2);\n height: 100%;\n}\n\n:host([no-border]) .top-state-bar {\n position: relative;\n}\n:host([no-border]) .top-state-bar:before, :host([no-border]) .top-state-bar:after {\n display: none;\n}\n:host([no-border]) .top-state-bar__close-wrapper {\n border-inline-start: none;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTopStateBar {\n constructor() {\n this.topStateBarVisible = false;\n this.visible = false;\n this.caption = undefined;\n this.minimal = false;\n this.active = false;\n this.stateType = \"in-progress\";\n this.progress = undefined;\n this.withClose = undefined;\n this.autoClose = false;\n this.noBorder = false;\n this.closedCallback = false;\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 METHODS\n 7.LISTENERS\n 8.PUBLIC METHODS API\n 9.LOCAL METHODS\n 10.RENDER() FUNCTION\n /\n // 1.OWN PROPERTIES //\n // 2. REFERENCE TO ELEMENTS //\n el;\n watchActiveHandler(active) {\n if (active) {\n this.visible = true;\n setTimeout(() => {\n this.topStateBarVisible = true;\n }, 300);\n }\n else {\n this.topStateBarVisible = false;\n setTimeout(() => {\n this.visible = false;\n }, 300);\n }\n }\n watchStateTypeHandler() {\n this.evaluateWithAction();\n }\n watchProgressHandler(progress) {\n if (progress => 0 && progress <= 100) {\n this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n }\n if (progress === 100 && this.autoClose) {\n setTimeout(() => {\n this.active = false;\n }, 200);\n }\n }\n // 5.EVENTS (EMIT) //\n // 6.COMPONENT LIFECYCLE EVENTS //\n componentWillLoad() {\n this.evaluateWithAction();\n this.evaluateInitialProgress();\n if (this.active) {\n this.visible = true;\n this.topStateBarVisible = true;\n }\n }\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n evaluateInitialProgress = () => {\n if (this.progress === undefined &&\n (this.stateType === \"error\" \|\|\n this.stateType === \"warning\" \|\|\n this.stateType === \"success\")) {\n this.progress = 100;\n }\n else if (this.progress === undefined &&\n this.stateType === \"in-progress\") {\n this.progress = 0;\n }\n this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n };\n evaluateWithAction = () => {\n if (this.withClose === undefined &&\n (this.stateType === \"error\" \|\|\n this.stateType === \"warning\" \|\|\n this.stateType === \"success\")) {\n this.withClose = true;\n }\n };\n closeButtonHandler = () => {\n this.active = false;\n };\n // 10.RENDER() FUNCTION //\n render() {\n return (h(Host, { class: { visible: this.visible }, \"aria-hidden\": !this.active }, h(\"div\", { role: \"status\", \"aria-labelledby\": \"label\", \"aria-hidden\": !this.active, class: {\n \"top-state-bar\": true,\n [`top-state-bar--${this.stateType}`]: true,\n \"top-state-bar--with-close\": this.withClose,\n \"top-state-bar--visible\": this.topStateBarVisible\n } }, h(\"div\", { class: \"top-state-bar__wrapper\" }, !this.minimal ? (h(\"label\", { id: \"label\", class: {\n \"top-state-bar__caption\": true\n }, part: \"label\" }, this.caption)) : null, h(\"div\", { class: {\n \"top-state-bar__progress-wrapper\": true\n }, part: \"progress-wrapper\" }, h(\"span\", { class: \"progress-bar\" }))), this.withClose && !this.minimal ? (h(\"div\", { class: \"top-state-bar__close-wrapper\", onClick: this.closeButtonHandler }, h(\"gxg-icon\", { class: {\n \"top-state-bar__close\": true\n }, role: \"button\", \"aria-label\": \"close\", type: \"gemini-tools/close\", color: \"mercury-primary\", tabIndex: 0 }))) : null)));\n }\n static get is() { return \"gxg-top-state-bar\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"gxg-top-state-bar.css\"]\n };\n }\n static get properties() {\n return {\n \"caption\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"string\",\n \"resolved\": \"string\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"caption\",\n \"reflect\": false\n },\n \"minimal\": {\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 will only display the bar (no title, no close button)\"\n },\n \"attribute\": \"minimal\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"active\": {\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 top-bar active state. If false it will be hidden\"\n },\n \"attribute\": \"active\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"stateType\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"topStateBarType\",\n \"resolved\": \"\\\"accent\\\" \| \\\"error\\\" \| \\\"in-progress\\\" \| \\\"success\\\" \| \\\"warning\\\"\",\n \"references\": {\n \"topStateBarType\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/top-state-bar/gxg-top-state-bar.tsx\",\n \"id\": \"src/components/top-state-bar/gxg-top-state-bar.tsx::topStateBarType\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The top-bar title\"\n },\n \"attribute\": \"state-type\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"in-progress\\\"\"\n },\n \"progress\": {\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 progress bar progress\"\n },\n \"attribute\": \"progress\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"withClose\": {\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 will display a close action button\"\n },\n \"attribute\": \"with-close\",\n \"reflect\": false,\n \"defaultValue\": \"undefined\"\n },\n \"autoClose\": {\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 true, it will auto-close when the progress is 100\"\n },\n \"attribute\": \"auto-close\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"noBorder\": {\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 removes the border (actually is box shadow)\"\n },\n \"attribute\": \"no-border\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"closedCallback\": {\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\": \"A callback that gets called when the top-state-bar is closed\"\n },\n \"attribute\": \"closed-callback\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get states() {\n return {\n \"topStateBarVisible\": {},\n \"visible\": {}\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"active\",\n \"methodName\": \"watchActiveHandler\"\n }, {\n \"propName\": \"stateType\",\n \"methodName\": \"watchStateTypeHandler\"\n }, {\n \"propName\": \"progress\",\n \"methodName\": \"watchProgressHandler\"\n }];\n }\n}\n//# sourceMappingURL=gxg-top-state-bar.js.map\n"],"version":3}

package/dist/components/gxg-window-v2.js ADDED Viewed

@@ -0,0 +1,44 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+const windowCss = ":host{display:block}";
+const GxgWindowV2$1 = /*@__PURE__*/ proxyCustomElement(class GxgWindowV2 extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.displayTitle = false;
+    }
+    // 5.EVENTS (EMIT) //
+    // 6.COMPONENT LIFECYCLE METHODS //
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    // 10.RENDER() FUNCTION //
+    render() {
+        return h(Host, null, "window");
+    }
+    static get style() { return windowCss; }
+}, [1, "gxg-window-v2", {
+        "displayTitle": [4, "display-title"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gxg-window-v2"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gxg-window-v2":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GxgWindowV2$1);
+            }
+            break;
+    } });
+}
+const GxgWindowV2 = GxgWindowV2$1;
+const defineCustomElement = defineCustomElement$1;
+export { GxgWindowV2, defineCustomElement };
+//# sourceMappingURL=gxg-window-v2.js.map

package/dist/components/gxg-window-v2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"gxg-window-v2.js","mappings":";;AAAA,MAAM,SAAS,GAAG,sBAAsB;;MCC3BA,aAAW;IACpB;;;;QACI,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;KAC7B;;;;;;;IAOD,MAAM;QACF,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;KAClC;;;;;;;;;;;;;;;;;;;;;;;;","names":["GxgWindowV2"],"sources":["node_modules/@genexus/gemini/dist/collection/components/window-v2/window.css?tag=gxg-window-v2&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/window-v2/window-v2.js"],"sourcesContent":[":host {\n display: block;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgWindowV2 {\n constructor() {\n this.displayTitle = false;\n }\n // 5.EVENTS (EMIT) //\n // 6.COMPONENT LIFECYCLE METHODS //\n // 7.LISTENERS //\n // 8.PUBLIC METHODS API //\n // 9.LOCAL METHODS //\n // 10.RENDER() FUNCTION //\n render() {\n return h(Host, null, \"window\");\n }\n static get is() { return \"gxg-window-v2\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"window.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"window.css\"]\n };\n }\n static get properties() {\n return {\n \"displayTitle\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"false\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If true it displays the component title on the header\"\n },\n \"attribute\": \"display-title\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n }\n };\n }\n}\n//# sourceMappingURL=window-v2.js.map\n"],"version":3}

package/dist/components/icon2.js CHANGED Viewed

@@ -19,10 +19,11 @@ const COLOR_MAPPINGS = {
     "primary-hover": "color-primary-hover",
     success: "ds-success-color--dark",
     warning: "ds-warning-color--dark",
-    mercury: "gray-03",
+    mercury: "mer-icon__primary",
     "mercury-primary": "mer-icon__primary",
     "mercury-on-primary": "mer-text__on-primary",
-    "mercury-text-on-message": "mer-text__on-message"
+    "mercury-text-on-message": "mer-text__on-message",
+    "mercury-neutral": "mer-icon__neutral"
 };
 const GxgIcon = /*@__PURE__*/ proxyCustomElement(class GxgIcon extends HTMLElement {
     constructor() {

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

	@@ -1 +1 @@
1	- {"file":"icon2.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,i/TAAi/T;;ACCjgU;;;AAGA,MAAM,cAAc,GAAG;IACnB,WAAW,EAAE,oBAAoB;IACjC,QAAQ,EAAE,wBAAwB;IAClC,UAAU,EAAE,mBAAmB;IAC/B,KAAK,EAAE,sBAAsB;IAC7B,QAAQ,EAAE,kBAAkB;IAC5B,YAAY,EAAE,qBAAqB;IACnC,aAAa,EAAE,sBAAsB;IACrC,iBAAiB,EAAE,uBAAuB;IAC1C,gBAAgB,EAAE,sBAAsB;IACxC,eAAe,EAAE,qBAAqB;IACtC,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,mBAAmB;IACtC,oBAAoB,EAAE,sBAAsB;IAC5C,yBAAyB,EAAE,sBAAsB;CACpD,CAAC;MACW,OAAO;IAChB;;;;QACI,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;KACzB;;;;;IAKD,UAAU;QACN,OAAO,YAAY,CAAC,iBAAiB,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC;KACzD;IACD,QAAQ;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzB,OAAO,8BAA8B,CAAC;SACzC;aACI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAC5B,OAAO,4BAA4B,CAAC;SACvC;KACJ;IACD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAC7C,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aAC5C,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE;gBACvB,cAAc,EAAE,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACjE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE;aACjC,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE;KAC5F;IACD,gBAAgB,CAAC,KAAK;;QAElB,OAAO,+BAA+B,KAAK,IAAI,CAAC;KACnD;IAaD,WAAW,UAAU,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/icon/icon.css?tag=gxg-icon&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/icon/icon.js"],"sourcesContent":["/*******************************\nICON\n******************************/\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:host {\n display: inline-block;\n line-height: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n:host(.icon-size--regular) {\n height: var(--ds-icon-size-box--regular);\n width: var(--ds-icon-size-box--regular);\n}\n\n:host(.icon-size--small) {\n height: var(--ds-icon-size-box--small);\n width: var(--ds-icon-size-box--small);\n}","import { Host, getAssetPath, h } from \"@stencil/core\";\n/******************************\nCONSTANTS\n*****************************/\nconst COLOR_MAPPINGS = {\n alwaysblack: \"color-always-black\",\n disabled: \"color-primary-disabled\",\n ondisabled: \"color-on-disabled\",\n error: \"ds-alert-color--dark\",\n negative: \"color-on-primary\",\n onbackground: \"color-on-background\",\n indeterminate: \"color-primary-active\",\n \"primary-enabled\": \"color-primary-enabled\",\n \"primary-active\": \"color-primary-active\",\n \"primary-hover\": \"color-primary-hover\",\n success: \"ds-success-color--dark\",\n warning: \"ds-warning-color--dark\",\n mercury: \"gray-03\",\n \"mercury-primary\": \"mer-icon__primary\",\n \"mercury-on-primary\": \"mer-text__on-primary\",\n \"mercury-text-on-message\": \"mer-text__on-message\"\n};\nexport class GxgIcon {\n constructor() {\n this.color = undefined;\n this.size = \"regular\";\n this.type = undefined;\n }\n element;\n /*****************************\n METHODS\n *******************************/\n getSrcPath() {\n return getAssetPath(`./icon-assets/${this.type}.svg`);\n }\n iconSize() {\n if (this.size === \"regular\") {\n return \"var(--ds-icon-size--regular)\";\n }\n else if (this.size === \"small\") {\n return \"var(--ds-icon-size--small)\";\n }\n }\n render() {\n return (h(Host, { class: {\n \"icon-size--regular\": this.size === \"regular\",\n \"icon-size--small\": this.size === \"small\"\n } }, h(\"ch-icon\", { style: {\n \"--icon-color\": this.mapColorToCssVar(COLOR_MAPPINGS[this.color]),\n \"--icon-size\": this.iconSize()\n }, \"auto-color\": this.color === \"auto\", src: this.getSrcPath(), part: \"ch-icon\" })));\n }\n mapColorToCssVar(color) {\n //return `var(--color-on-background)`;\n return `var(--gxg-icon-color, var(--${color}))`;\n }\n static get is() { return \"gxg-icon\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"icon.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"icon.css\"]\n };\n }\n static get assetsDirs() { return [\"icon-assets\"]; }\n static get properties() {\n return {\n \"color\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Color\",\n \"resolved\": \"\\\"alwaysblack\\\" \| \\\"auto\\\" \| \\\"disabled\\\" \| \\\"error\\\" \| \\\"indeterminate\\\" \| \\\"mercury\\\" \| \\\"mercury-on-primary\\\" \| \\\"mercury-primary\\\" \| \\\"mercury-text-on-message\\\" \| \\\"negative\\\" \| \\\"onbackground\\\" \| \\\"ondisabled\\\" \| \\\"primary-active\\\" \| \\\"primary-enabled\\\" \| \\\"primary-hover\\\" \| \\\"success\\\" \| \\\"warning\\\"\",\n \"references\": {\n \"Color\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/icon/icon.tsx\",\n \"id\": \"src/components/icon/icon.tsx::Color\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The color of the icon.\"\n },\n \"attribute\": \"color\",\n \"reflect\": false\n },\n \"size\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Size\",\n \"resolved\": \"\\\"regular\\\" \| \\\"small\\\"\",\n \"references\": {\n \"Size\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/icon/icon.tsx\",\n \"id\": \"src/components/icon/icon.tsx::Size\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the icon. Possible values: regular, small.\"\n },\n \"attribute\": \"size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"regular\\\"\"\n },\n \"type\": {\n \"type\": \"any\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"any\",\n \"resolved\": \"any\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The type of icon.\"\n },\n \"attribute\": \"type\",\n \"reflect\": false\n }\n };\n }\n static get elementRef() { return \"element\"; }\n}\n//# sourceMappingURL=icon.js.map\n"],"version":3}
1	+ {"file":"icon2.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,i/TAAi/T;;ACCjgU;;;AAGA,MAAM,cAAc,GAAG;IACnB,WAAW,EAAE,oBAAoB;IACjC,QAAQ,EAAE,wBAAwB;IAClC,UAAU,EAAE,mBAAmB;IAC/B,KAAK,EAAE,sBAAsB;IAC7B,QAAQ,EAAE,kBAAkB;IAC5B,YAAY,EAAE,qBAAqB;IACnC,aAAa,EAAE,sBAAsB;IACrC,iBAAiB,EAAE,uBAAuB;IAC1C,gBAAgB,EAAE,sBAAsB;IACxC,eAAe,EAAE,qBAAqB;IACtC,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,wBAAwB;IACjC,OAAO,EAAE,mBAAmB;IAC5B,iBAAiB,EAAE,mBAAmB;IACtC,oBAAoB,EAAE,sBAAsB;IAC5C,yBAAyB,EAAE,sBAAsB;IACjD,iBAAiB,EAAE,mBAAmB;CACzC,CAAC;MACW,OAAO;IAChB;;;;QACI,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;KACzB;;;;;IAKD,UAAU;QACN,OAAO,YAAY,CAAC,iBAAiB,IAAI,CAAC,IAAI,MAAM,CAAC,CAAC;KACzD;IACD,QAAQ;QACJ,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACzB,OAAO,8BAA8B,CAAC;SACzC;aACI,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;YAC5B,OAAO,4BAA4B,CAAC;SACvC;KACJ;IACD,MAAM;QACF,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;gBAC7C,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aAC5C,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE;gBACvB,cAAc,EAAE,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACjE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE;aACjC,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,KAAK,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE;KAC5F;IACD,gBAAgB,CAAC,KAAK;;QAElB,OAAO,+BAA+B,KAAK,IAAI,CAAC;KACnD;IAaD,WAAW,UAAU,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/components/icon/icon.css?tag=gxg-icon&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/icon/icon.js"],"sourcesContent":["/*******************************\nICON\n******************************/\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:host {\n display: inline-block;\n line-height: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n:host(.icon-size--regular) {\n height: var(--ds-icon-size-box--regular);\n width: var(--ds-icon-size-box--regular);\n}\n\n:host(.icon-size--small) {\n height: var(--ds-icon-size-box--small);\n width: var(--ds-icon-size-box--small);\n}","import { Host, getAssetPath, h } from \"@stencil/core\";\n/******************************\nCONSTANTS\n*****************************/\nconst COLOR_MAPPINGS = {\n alwaysblack: \"color-always-black\",\n disabled: \"color-primary-disabled\",\n ondisabled: \"color-on-disabled\",\n error: \"ds-alert-color--dark\",\n negative: \"color-on-primary\",\n onbackground: \"color-on-background\",\n indeterminate: \"color-primary-active\",\n \"primary-enabled\": \"color-primary-enabled\",\n \"primary-active\": \"color-primary-active\",\n \"primary-hover\": \"color-primary-hover\",\n success: \"ds-success-color--dark\",\n warning: \"ds-warning-color--dark\",\n mercury: \"mer-icon__primary\",\n \"mercury-primary\": \"mer-icon__primary\",\n \"mercury-on-primary\": \"mer-text__on-primary\",\n \"mercury-text-on-message\": \"mer-text__on-message\",\n \"mercury-neutral\": \"mer-icon__neutral\"\n};\nexport class GxgIcon {\n constructor() {\n this.color = undefined;\n this.size = \"regular\";\n this.type = undefined;\n }\n element;\n /*****************************\n METHODS\n *******************************/\n getSrcPath() {\n return getAssetPath(`./icon-assets/${this.type}.svg`);\n }\n iconSize() {\n if (this.size === \"regular\") {\n return \"var(--ds-icon-size--regular)\";\n }\n else if (this.size === \"small\") {\n return \"var(--ds-icon-size--small)\";\n }\n }\n render() {\n return (h(Host, { class: {\n \"icon-size--regular\": this.size === \"regular\",\n \"icon-size--small\": this.size === \"small\"\n } }, h(\"ch-icon\", { style: {\n \"--icon-color\": this.mapColorToCssVar(COLOR_MAPPINGS[this.color]),\n \"--icon-size\": this.iconSize()\n }, \"auto-color\": this.color === \"auto\", src: this.getSrcPath(), part: \"ch-icon\" })));\n }\n mapColorToCssVar(color) {\n //return `var(--color-on-background)`;\n return `var(--gxg-icon-color, var(--${color}))`;\n }\n static get is() { return \"gxg-icon\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"icon.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"icon.css\"]\n };\n }\n static get assetsDirs() { return [\"icon-assets\"]; }\n static get properties() {\n return {\n \"color\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Color\",\n \"resolved\": \"\\\"alwaysblack\\\" \| \\\"auto\\\" \| \\\"disabled\\\" \| \\\"error\\\" \| \\\"indeterminate\\\" \| \\\"mercury\\\" \| \\\"mercury-neutral\\\" \| \\\"mercury-on-primary\\\" \| \\\"mercury-primary\\\" \| \\\"mercury-text-on-message\\\" \| \\\"negative\\\" \| \\\"onbackground\\\" \| \\\"ondisabled\\\" \| \\\"primary-active\\\" \| \\\"primary-enabled\\\" \| \\\"primary-hover\\\" \| \\\"success\\\" \| \\\"warning\\\"\",\n \"references\": {\n \"Color\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/icon/icon.tsx\",\n \"id\": \"src/components/icon/icon.tsx::Color\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The color of the icon.\"\n },\n \"attribute\": \"color\",\n \"reflect\": false\n },\n \"size\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"Size\",\n \"resolved\": \"\\\"regular\\\" \| \\\"small\\\"\",\n \"references\": {\n \"Size\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/icon/icon.tsx\",\n \"id\": \"src/components/icon/icon.tsx::Size\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The size of the icon. Possible values: regular, small.\"\n },\n \"attribute\": \"size\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"regular\\\"\"\n },\n \"type\": {\n \"type\": \"any\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"any\",\n \"resolved\": \"any\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The type of icon.\"\n },\n \"attribute\": \"type\",\n \"reflect\": false\n }\n };\n }\n static get elementRef() { return \"element\"; }\n}\n//# sourceMappingURL=icon.js.map\n"],"version":3}

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

@@ -1,12 +1,38 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as formMessageLogic } from './form.js';
 import { f as formClasses, c as commonClassesNames } from './classesNames.js';
-import { r as repositionScroll } from './reposition-scroll.js';
+import { K as KeyboardKeys } from './types.js';
 import { s as state } from './store.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './button.js';
 import { d as defineCustomElement$1 } from './icon2.js';
+const repositionScroll = (scollableElementRef, activeItem, direction) => {
+    const scrollableElement = scollableElementRef;
+    const hasVerticalScrollbar = scrollableElement?.scrollHeight > scrollableElement?.clientHeight;
+    if (hasVerticalScrollbar && activeItem) {
+        const scrollableElementScrollTop = scrollableElement.scrollTop;
+        if (direction === KeyboardKeys.ARROW_UP) {
+            const scrollableElementTop = scrollableElement.getBoundingClientRect().top;
+            const selectedItemTop = activeItem.getBoundingClientRect().top;
+            if (selectedItemTop < scrollableElementTop) {
+                const offset = scrollableElementTop - selectedItemTop;
+                scrollableElement.scrollTo(0, scrollableElementScrollTop - offset);
+            }
+        }
+        else if (direction === KeyboardKeys.ARROW_DOWN) {
+            const scrollableElementBottom = scrollableElement.getBoundingClientRect().bottom;
+            const selectedItemBottom = activeItem.getBoundingClientRect().bottom;
+            if (selectedItemBottom > scrollableElementBottom) {
+                console.log("selectedItemBottom", selectedItemBottom);
+                console.log("scrollableElementBottom", scrollableElementBottom);
+                const offset = selectedItemBottom - scrollableElementBottom;
+                scrollableElement.scrollTo(0, scrollableElementScrollTop + offset);
+            }
+        }
+    }
+};
 const listBoxCss = ":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}: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{display:block;font-size:var(--ds-base-font-size);font-family:var(--ds-base-font-family-primary);background-color:var(--ds-base-background-color);color:var(--ds-base-font-color);height:100%}:host .container{height:100%;border:var(--gxg-list-box-container__border);border-radius:var(--gxg-list-box-general__border-radius);overflow:hidden;box-sizing:border-box}:host .header{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;background-color:var(--gxg-list-box-header__background-color);border-bottom:var(--ds-border-common-styles);padding:var(--gxg-list-box-header__padding);text-transform:capitalize;font-size:inherit;font-weight:var(--gxg-list-box-header__font-weight);color:var(--gxg-list-box-header__color)}:host .icon{margin-inline-end:var(--spacing-comp-01)}:host .checkbox{margin-inline-end:var(--spacing-comp-01)}.main{overflow-y:auto;padding:var(--gxg-list-box-main__padding);box-sizing:border-box}.main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.main--no-border{border:none}.container:focus-within{outline:none}.container:not(:focus-within){--ds-border-color-control--focused:transparent;--ds-border-color--focused:transparent;--ds-focus-border-color:transparent}:host([no-border]) .container{border:none}.suggestions__container{background-color:var(--gxg-list-box-suggestions-container__background-color);color:var(--gxg-list-box-suggestions-container__color);font-family:inherit;font-size:var(--gxg-list-box-suggestions-container__font-size);padding:var(--gxg-list-box-suggestions-container__padding);display:flex;gap:var(--gxg-list-box-suggestions-container__gap);align-items:center}.suggestions__list{margin:0;padding:0;list-style-type:none;flex-grow:1}:host([no-border]) .container{border:none}:host([border-top]) .container{border-top:1px solid var(--ds-border-color--regular)}:host([border-end]) .container{border-inline-end:1px solid var(--ds-border-color--regular)}:host([border-bottom]) .container{border-bottom:1px solid var(--ds-border-color--regular)}:host([border-start]) .container{border-inline-start:1px solid var(--ds-border-color--regular)}:host(.gxg--disabled) .header{color:var(--ds-color--disabled);border-bottom-color:var(--ds-border-color-disabled)}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}";
 const GxgListBox = /*@__PURE__*/ proxyCustomElement(class GxgListBox extends HTMLElement {