@genexus/genexus-ide-ui 0.0.98 → 0.0.100

package/dist/genexus-ide-ui/p-b0e539fe.entry.js

@@ -0,0 +1,41 @@
+import { r as s, g as r, h as l, H as a } from "./p-2776d2f9.js";
+
+import { s as p } from "./p-12e3a3de.js";
+
+const t = ":host{display:block}.pills-wrapper{display:flex;gap:var(--gxg-pills__gap);flex-wrap:wrap}";
+
+const e = class {
+  constructor(r) {
+    s(this, r);
+  }
+  get el() {
+    return r(this);
+  }
+  /**
+     * Returns an array with the id's of all the pills
+     */  async getPills(s = true) {
+    const r = [];
+    let l = Array.from(this.el.querySelectorAll("gxg-pill"));
+    if (s) {
+      l = l.filter((s => !s.disabled));
+    }
+    l.forEach((s => {
+      r.push(s.id);
+    }));
+    return r;
+  }
+  render() {
+    return l(a, {
+      class: {
+        mercury: p.mercury
+      }
+    }, l("div", {
+      class: "pills-wrapper"
+    }, l("slot", null)));
+  }
+};
+
+e.style = t;
+
+export { e as gxg_pills };
+//# sourceMappingURL=p-b0e539fe.entry.js.map

package/dist/genexus-ide-ui/p-b0e539fe.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pillsCss","GxgPills","getPills","onlyEnabled","pillsIds","pills","Array","from","this","el","querySelectorAll","filter","pill","disabled","forEach","push","id","render","h","Host","class","mercury","state"],"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"],"mappings":";;;;AAAA,MAAMA,IAAW;;MCEJC,IAAQ;;;;;;;;;SAKjB,cAAMC,CAASC,IAAc;IACzB,MAAMC,IAAW;IACjB,IAAIC,IAAQC,MAAMC,KAAKC,KAAKC,GAAGC,iBAAiB;IAChD,IAAIP,GAAa;MACbE,IAAQA,EAAMM,QAAQC,MAAUA,EAAKC;;IAEzCR,EAAMS,SAASF;MACXR,EAASW,KAAKH,EAAKI;AAAG;IAE1B,OAAOZ;;EAEX,MAAAa;IACI,OAAQC,EAAEC,GAAM;MAAEC,OAAO;QAAEC,SAASC,EAAMD;;OAAaH,EAAE,OAAO;MAAEE,OAAO;OAAmBF,EAAE,QAAQ"}

package/dist/genexus-ide-ui/{p-a439149b.entry.js → p-bff2603a.entry.js}

@@ -24,7 +24,7 @@ const hiChar = function(e, r) {
   }
 };
 
-const c = '/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:block;background-color:var(--gxg-card_background-color);box-shadow:var(--gxg-card_box-shadow);border-radius:var(--gxg-card_border-radius);border-style:solid;border-width:1px;border-color:transparent;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)}:host([elevation=xs]){box-shadow:var(--gxg-card_box-shadow)}:host([elevation=m]){box-shadow:var(--gxg-card_box-shadow)}:host([padding="0"]){padding:0}:host([padding=xs]){padding:var(--gxg-card_padding-xs)}:host([padding=s]){padding:var(--gxg-card_padding-s)}:host([padding=m]){padding:var(--gxg-card_padding-m)}:host([padding=l]){padding:var(--gxg-card_padding-l)}:host([padding=xl]){padding:var(--gxg-card_padding-xl)}:host([padding=xxl]){padding:var(--gxg-card_padding-xxl)}:host([padding=xxxl]){padding:var(--gxg-card_padding-xxxl)}:host([background=white]){background:var(--gxg-card_background-white)}:host([background=gray-01]){background:var(--gxg-card_background-gray)}.content{overflow:auto;height:100%}.content::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.content::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.content::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.content::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host(.card--no-shadow){box-shadow:none}:host(.card--title) .wrapper{display:flex;flex-direction:column;height:100%;grid-template-rows:auto 1fr}:host(.card){background-color:var(--gxg-card_background-color)}:host(.card) .card__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;margin:var(--gxg-card-header_margin);padding-block-end:var(--gxg-card-header_padding-block-end);border-block-end:var(--gxg-card-header_border-block-end);gap:var(--gxg-card-header_gap)}:host(.card) .card__header--left{display:flex;align-items:center;gap:var(--gxg-card-header-left_gap);width:var(--gxg-card-header-left_width)}:host(.card) .card__header--left .card-title-wrapper{width:100%;white-space:nowrap;overflow:hidden}:host(.card) .card__header--right{display:flex;flex-direction:row;align-items:center;justify-content:end;gap:var(--gxg-card-header-right_gap);font-size:var(--font-size-xl);width:var(--gxg-card-header-right_width);overflow:hidden;white-space:nowrap}:host(.card) .card__header .subtitle-wrapper{overflow:hidden;text-overflow:ellipsis;color:var(--gxg-card-subtitle_color);padding-inline-end:var(--gxg-card-subtitle-wrapper_padding-inline-end);}:host(.card) .card__header .subtitle-wrapper a{color:var(--gxg-card-subtitle-wrapper_link-color)}:host(.card) .card__header .subtitle{white-space:nowrap;color:var(--gxg-card-subtitle-wrapper_color)}:host(.card) .content{padding:var(--gxg-card-content_padding);font-size:var(--gxg-card-content_font-size);line-height:var(--gxg-card-content_line-height);color:var(--gxg-card-content_color)}:host(.card--default){background:var(--color-background)}:host(.card--default) .content{padding:0}:host(.card--section){font-size:var(--gxg-card-section_font-size);border-radius:var(--gxg-card-section_border-radius);padding:var(--gxg-card-section_padding);background-color:var(--mer-elevation__background-color--01);border:var(--mer-elevation__border-01);box-shadow:var(--mer-elevation__box-shadow--01)}:host(.card--section) .card__title{font-weight:var(--gxg-card-section-title_font-weight);font-size:var(--gxg-card-section-title_font-size)}:host(.card--article){font-size:var(--gxg-card-article_font-size);border-radius:var(--gxg-card-article_border-radius);padding:var(--gxg-card-article_padding);background-color:var(--mer-elevation__background-color--02);border:var(--mer-elevation__border-02);box-shadow:var(--mer-elevation__box-shadow--02)}:host(.card--article) .card__header .card__title{margin:var(--gxg-card-article-title_margin);color:var(--gxg-card-article-title_color);overflow:hidden;text-overflow:ellipsis;font-weight:var(--gxg-card-article-title_font-weight);font-size:var(--gxg-card-article-title_font-size)}:host(.card--article) .card__header .subtitle-wrapper{color:var(--gxg-card-article-subtitle-wrapper_color);font-style:var(--gxg-card-article-subtitle-wrapper_font-style)}:host(.card--article) .content{font-style:var(--gxg-card-article-subtitle-content_font-style);color:var(--gxg-card-article-content_color);line-height:var(--gxg-card-article-subtitle-content_line-height)}:host(.card--article.title-semibold) .card__header .card__title{font-weight:var(--gxg-card-article-title-semibold_font-weight)}:host(.card--mini){font-size:var(--gxg-card-mini_font-size);border-radius:var(--gxg-card-mini_border-radius);padding:var(--gxg-card-mini_padding);background-color:var(--mer-elevation__background-color--02);border:var(--mer-elevation__border-02);box-shadow:var(--mer-elevation__box-shadow--02);border-color:transparent}:host(.card--mini) .card__header{margin:var(--gxg-card-mini-header_margin);padding-block-end:var(--gxg-card-mini-header_padding-block-end);border-bottom:var(--gxg-card-mini-header_border-bottom)}:host(.card--mini) .card__header .card__header--left{width:var(--gxg-card-mini-header-left_width);gap:var(--gxg-card-mini-header-left_gap)}:host(.card--mini) .card__header .card__title{margin:var(--gxg-card-mini-title_margin);overflow:hidden;text-overflow:ellipsis;font-weight:var(--gxg-card-mini-title_font-weight);font-size:var(--gxg-card-mini-title_font-size);color:var(--gxg-card-mini-title_color)}:host(.card--mini) .content{font-style:var(--gxg-card-mini-content_font-style);font-size:var(--gxg-card-mini_font-size);padding:var(--gxg-card-mini-content_padding);color:var(--gxg-card-mini-content_color)}:host(.card--no-content) .card__header{border-bottom:0}:host(.card--actionable:hover){filter:brightness(var(--gxg-card-actionable-brightness--hover))}:host(.card--actionable:hover) .wrapper,:host(.card--actionable:hover) .card__header,:host(.card--actionable:hover) .content{cursor:pointer}:host(.no-header-border) .card__header{padding-bottom:0;border-bottom:0}.hiChar{color:var(--gxg-hi-char-color);font-weight:600}';
+const c = '/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host{display:block;background-color:var(--gxg-card_background-color);box-shadow:var(--gxg-card_box-shadow);border-radius:var(--gxg-card_border-radius);border-style:solid;border-width:1px;border-color:transparent;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)}:host([elevation=xs]){box-shadow:var(--gxg-card_box-shadow)}:host([elevation=m]){box-shadow:var(--gxg-card_box-shadow)}:host([padding="0"]){padding:0}:host([padding=xs]){padding:var(--gxg-card_padding-xs)}:host([padding=s]){padding:var(--gxg-card_padding-s)}:host([padding=m]){padding:var(--gxg-card_padding-m)}:host([padding=l]){padding:var(--gxg-card_padding-l)}:host([padding=xl]){padding:var(--gxg-card_padding-xl)}:host([padding=xxl]){padding:var(--gxg-card_padding-xxl)}:host([padding=xxxl]){padding:var(--gxg-card_padding-xxxl)}:host([background=white]){background:var(--gxg-card_background-white)}:host([background=gray-01]){background:var(--gxg-card_background-gray)}.content{overflow:auto;height:100%}.content::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.content::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.content::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.content::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}:host(.card--no-shadow){box-shadow:none}:host(.card--title) .wrapper{display:flex;flex-direction:column;height:100%;grid-template-rows:auto 1fr}:host(.card){background-color:var(--gxg-card_background-color)}:host(.card) .card__header{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;margin:var(--gxg-card-header_margin);padding-block-end:var(--gxg-card-header_padding-block-end);border-block-end:var(--gxg-card-header_border-block-end);gap:var(--gxg-card-header_gap)}:host(.card) .card__header--left{display:flex;align-items:center;gap:var(--gxg-card-header-left_gap);width:var(--gxg-card-header-left_width)}:host(.card) .card__header--left .card-title-wrapper{width:100%;white-space:nowrap;overflow:hidden}:host(.card) .card__header--left-full-width{width:100% !important}:host(.card) .card__header--left-full-width .card-title-wrapper{white-space:unset}:host(.card) .card__header--right{display:flex;flex-direction:row;align-items:center;justify-content:end;gap:var(--gxg-card-header-right_gap);font-size:var(--font-size-xl);width:var(--gxg-card-header-right_width);overflow:hidden;white-space:nowrap}:host(.card) .card__header .subtitle-wrapper{overflow:hidden;text-overflow:ellipsis;color:var(--gxg-card-subtitle_color);padding-inline-end:var(--gxg-card-subtitle-wrapper_padding-inline-end);}:host(.card) .card__header .subtitle-wrapper a{color:var(--gxg-card-subtitle-wrapper_link-color)}:host(.card) .card__header .subtitle{white-space:nowrap;color:var(--gxg-card-subtitle-wrapper_color)}:host(.card) .content{padding:var(--gxg-card-content_padding);font-size:var(--gxg-card-content_font-size);line-height:var(--gxg-card-content_line-height);color:var(--gxg-card-content_color)}:host(.card--default){background:var(--color-background)}:host(.card--default) .content{padding:0}:host(.card--section){font-size:var(--gxg-card-section_font-size);border-radius:var(--gxg-card-section_border-radius);padding:var(--gxg-card-section_padding);background-color:var(--mer-elevation__background-color--01);border:var(--mer-elevation__border-01);box-shadow:var(--mer-elevation__box-shadow--01)}:host(.card--section) .card__title{font-weight:var(--gxg-card-section-title_font-weight);font-size:var(--gxg-card-section-title_font-size)}:host(.card--article){font-size:var(--gxg-card-article_font-size);border-radius:var(--gxg-card-article_border-radius);padding:var(--gxg-card-article_padding);background-color:var(--mer-elevation__background-color--02);border:var(--mer-elevation__border-02);box-shadow:var(--mer-elevation__box-shadow--02);border:var(--gxg-card-article_border)}:host(.card--article) .card__header .card__title{margin:var(--gxg-card-article-title_margin);color:var(--gxg-card-article-title_color);overflow:hidden;text-overflow:ellipsis;font-weight:var(--gxg-card-article-title_font-weight);font-size:var(--gxg-card-article-title_font-size)}:host(.card--article) .card__header .subtitle-wrapper{color:var(--gxg-card-article-subtitle-wrapper_color);font-style:var(--gxg-card-article-subtitle-wrapper_font-style)}:host(.card--article) .content{font-style:var(--gxg-card-article-subtitle-content_font-style);color:var(--gxg-card-article-content_color);line-height:var(--gxg-card-article-subtitle-content_line-height)}:host(.card--article.title-semibold) .card__header .card__title{font-weight:var(--gxg-card-article-title-semibold_font-weight)}:host(.card--mini){font-size:var(--gxg-card-mini_font-size);border-radius:var(--gxg-card-mini_border-radius);padding:var(--gxg-card-mini_padding);background-color:var(--mer-elevation__background-color--02);border:var(--mer-elevation__border-02);box-shadow:var(--mer-elevation__box-shadow--02);border:var(--gxg-card-mini_border)}:host(.card--mini) .card__header{margin:var(--gxg-card-mini-header_margin);padding-block-end:var(--gxg-card-mini-header_padding-block-end);border-bottom:var(--gxg-card-mini-header_border-bottom)}:host(.card--mini) .card__header .card__header--left{width:var(--gxg-card-mini-header-left_width);gap:var(--gxg-card-mini-header-left_gap)}:host(.card--mini) .card__header .card__title{margin:var(--gxg-card-mini-title_margin);overflow:hidden;text-overflow:ellipsis;font-weight:var(--gxg-card-mini-title_font-weight);font-size:var(--gxg-card-mini-title_font-size);color:var(--gxg-card-mini-title_color)}:host(.card--mini) .content{font-style:var(--gxg-card-mini-content_font-style);font-size:var(--gxg-card-mini_font-size);padding:var(--gxg-card-mini-content_padding);color:var(--gxg-card-mini-content_color)}:host(.card--no-content) .card__header{border-bottom:0}:host(.card--actionable:hover){filter:brightness(var(--gxg-card-actionable-brightness--hover))}:host(.card--actionable:hover) .wrapper,:host(.card--actionable:hover) .card__header,:host(.card--actionable:hover) .content{cursor:pointer}:host(.no-header-border) .card__header{padding-bottom:0;border-bottom:0}:host(.card--no-border){border:none !important}.hiChar{color:var(--gxg-hi-char-color);font-weight:600}';
 
 const g = class {
   constructor(r) {
@@ -53,6 +53,7 @@ const g = class {
     this.height = "auto";
     this.maxWidth = "100%";
     this.noShadow = false;
+    this.noBorder = false;
     this.hiChar = false;
     this.filterValue = undefined;
     this.noPaddingTop = false;
@@ -101,6 +102,7 @@ const g = class {
         "card--actionable": this.actionable && (this.cardType === "article" || this.cardType === "mini"),
         "title-semibold": this.titleSemibold,
         "card--no-shadow": this.noShadow,
+        "card--no-border": this.noBorder,
         "no-header-border": this.noHeaderBorder
       },
       style: {
@@ -117,7 +119,10 @@ const g = class {
     }, this.cardTitle ? t("header", {
       class: "card__header"
     }, t("div", {
-      class: "card__header--left"
+      class: {
+        "card__header--left": true,
+        "card__header--left-full-width": !this.cardSubtitle
+      }
     }, this.icon ? t("gxg-icon", {
       type: this.icon,
       color: this.iconColor
@@ -286,4 +291,4 @@ const h = class {
 h.style = f;
 
 export { g as gxg_card, h as gxg_title_editable };
-//# sourceMappingURL=p-a439149b.entry.js.map
+//# sourceMappingURL=p-bff2603a.entry.js.map

package/dist/genexus-ide-ui/p-bff2603a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["escapeRegExp","str","replace","hiChar","text","filterValue","escapedFilterValue","re","RegExp","h","innerHTML","cardCss","GxgCard","constructor","hostRef","this","titleType","hasSlot","hasHeaderSlot","renderCardSubtitle","cardSubtitle","subtitleLink","class","href","target","elevation","background","padding","minHeight","height","maxWidth","noShadow","noBorder","undefined","noPaddingTop","cardTitle","noHeaderBorder","titleSemibold","subtitleIcon","cardType","icon","iconColor","subtitleColor","editableTitle","actionable","componentWillLoad","el","querySelector","headerSlot","render","Host","role","card","mercury","state","style","wrapper","type","color","value","disableEdition","name","titleEditableCss","GxgTitleEditable","edit","editing","positionCursorAtTheEnd","wrapperClickedHandler","textInput","selectionStart","selectionEnd","length","focus","inputKeyDownHandler","e","key","preventDefault","editButtonEl","fluid","setInputWidth","detectClickOutsideFunc","clickedOutside","detectClickOutside","wrapperEl","width","inputInputHandler","ghostDiv","innerText","updateInputWidth","ghostDivWidth","getBoundingClientRect","debounce","debounceDelay","disabled","clickToEdit","focusType","validationStatus","validationMessage","hideTooltip","watchValueHandler","newValue","clearTimeout","timeoutReference","setTimeout","valueChanged","emit","watchEditingHandler","document","addEventListener","removeEventListener","componentDidLoad","formClasses","commonClassesNames","onMouseUp","ref","readOnly","onKeyDown","onInput","tabIndex","onClick","formTooltipLogic"],"sources":["node_modules/@genexus/gemini/dist/collection/common/hiChar.js","node_modules/@genexus/gemini/dist/collection/components/card/card.css?tag=gxg-card&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/card/card.js","node_modules/@genexus/gemini/dist/collection/components/title-editable/title-editable.css?tag=gxg-title-editable&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/title-editable/title-editable.js"],"sourcesContent":["/* STENCIL IMPORTS */\nimport { h } from \"@stencil/core\";\n/*A function that helps highlighting characters when searching.*/\nexport const escapeRegExp = (str) => {\n    return str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\nexport const hiChar = function (text, filterValue) {\n    if (text && filterValue) {\n        /* this function highlights the character(s) that match(es) the filter value. (hi)light (Char)acters */\n        const escapedFilterValue = escapeRegExp(filterValue);\n        const re = new RegExp(escapedFilterValue, \"gi\");\n        return (h(\"span\", { innerHTML: text.replace(re, '<span class=\"hiChar\">$&</span>') }));\n    }\n    else {\n        return text;\n    }\n};\n//# sourceMappingURL=hiChar.js.map\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/*--- Elevation ---*/\n:host {\n  display: block;\n  background-color: var(--gxg-card_background-color);\n  box-shadow: var(--gxg-card_box-shadow);\n  border-radius: var(--gxg-card_border-radius);\n  border-style: solid;\n  border-width: 1px;\n  border-color: transparent;\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:host([elevation=xs]) {\n  box-shadow: var(--gxg-card_box-shadow);\n}\n\n:host([elevation=m]) {\n  box-shadow: var(--gxg-card_box-shadow);\n}\n\n:host([padding=\"0\"]) {\n  padding: 0;\n}\n\n:host([padding=xs]) {\n  padding: var(--gxg-card_padding-xs);\n}\n\n:host([padding=s]) {\n  padding: var(--gxg-card_padding-s);\n}\n\n:host([padding=m]) {\n  padding: var(--gxg-card_padding-m);\n}\n\n:host([padding=l]) {\n  padding: var(--gxg-card_padding-l);\n}\n\n:host([padding=xl]) {\n  padding: var(--gxg-card_padding-xl);\n}\n\n:host([padding=xxl]) {\n  padding: var(--gxg-card_padding-xxl);\n}\n\n:host([padding=xxxl]) {\n  padding: var(--gxg-card_padding-xxxl);\n}\n\n:host([background=white]) {\n  background: var(--gxg-card_background-white);\n}\n\n:host([background=gray-01]) {\n  background: var(--gxg-card_background-gray);\n}\n\n.content {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n  overflow: auto;\n  height: 100%;\n}\n.content::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.content::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.content::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.content::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.content::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*No Shadow*/\n:host(.card--no-shadow) {\n  box-shadow: none;\n}\n\n/*Title*/\n:host(.card--title) .wrapper {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  grid-template-rows: auto 1fr;\n}\n\n:host(.card) {\n  background-color: var(--gxg-card_background-color);\n}\n:host(.card) .card__header {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: var(--gxg-card-header_margin);\n  padding-block-end: var(--gxg-card-header_padding-block-end);\n  border-block-end: var(--gxg-card-header_border-block-end);\n  gap: var(--gxg-card-header_gap);\n}\n:host(.card) .card__header--left {\n  display: flex;\n  align-items: center;\n  gap: var(--gxg-card-header-left_gap);\n  width: var(--gxg-card-header-left_width);\n}\n:host(.card) .card__header--left .card-title-wrapper {\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n}\n:host(.card) .card__header--left-full-width {\n  width: 100% !important;\n}\n:host(.card) .card__header--left-full-width .card-title-wrapper {\n  white-space: unset;\n}\n:host(.card) .card__header--right {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: end;\n  gap: var(--gxg-card-header-right_gap);\n  font-size: var(--font-size-xl);\n  width: var(--gxg-card-header-right_width);\n  overflow: hidden;\n  white-space: nowrap;\n}\n:host(.card) .card__header .subtitle-wrapper {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--gxg-card-subtitle_color);\n  padding-inline-end: var(--gxg-card-subtitle-wrapper_padding-inline-end);\n  /*prevents text cut text if italic, due to ellipsis*/\n}\n:host(.card) .card__header .subtitle-wrapper a {\n  color: var(--gxg-card-subtitle-wrapper_link-color);\n}\n:host(.card) .card__header .subtitle {\n  white-space: nowrap;\n  color: var(--gxg-card-subtitle-wrapper_color);\n}\n:host(.card) .content {\n  padding: var(--gxg-card-content_padding);\n  font-size: var(--gxg-card-content_font-size);\n  line-height: var(--gxg-card-content_line-height);\n  color: var(--gxg-card-content_color);\n}\n\n/*--- Default ---*/\n:host(.card--default) {\n  background: var(--color-background);\n}\n:host(.card--default) .content {\n  padding: 0;\n}\n\n/*--- Section ---*/\n:host(.card--section) {\n  font-size: var(--gxg-card-section_font-size);\n  border-radius: var(--gxg-card-section_border-radius);\n  padding: var(--gxg-card-section_padding);\n  background-color: var(--mer-elevation__background-color--01);\n  border: var(--mer-elevation__border-01);\n  box-shadow: var(--mer-elevation__box-shadow--01);\n}\n:host(.card--section) .card__title {\n  font-weight: var(--gxg-card-section-title_font-weight);\n  font-size: var(--gxg-card-section-title_font-size);\n}\n\n/*--- Article ---*/\n:host(.card--article) {\n  font-size: var(--gxg-card-article_font-size);\n  border-radius: var(--gxg-card-article_border-radius);\n  padding: var(--gxg-card-article_padding);\n  background-color: var(--mer-elevation__background-color--02);\n  border: var(--mer-elevation__border-02);\n  box-shadow: var(--mer-elevation__box-shadow--02);\n  border: var(--gxg-card-article_border);\n}\n:host(.card--article) .card__header .card__title {\n  margin: var(--gxg-card-article-title_margin);\n  color: var(--gxg-card-article-title_color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: var(--gxg-card-article-title_font-weight);\n  font-size: var(--gxg-card-article-title_font-size);\n}\n:host(.card--article) .card__header .subtitle-wrapper {\n  color: var(--gxg-card-article-subtitle-wrapper_color);\n  font-style: var(--gxg-card-article-subtitle-wrapper_font-style);\n}\n:host(.card--article) .content {\n  font-style: var(--gxg-card-article-subtitle-content_font-style);\n  color: var(--gxg-card-article-content_color);\n  line-height: var(--gxg-card-article-subtitle-content_line-height);\n}\n\n/*semibold*/\n:host(.card--article.title-semibold) .card__header .card__title {\n  font-weight: var(--gxg-card-article-title-semibold_font-weight);\n}\n\n/*--- Mini ---*/\n:host(.card--mini) {\n  font-size: var(--gxg-card-mini_font-size);\n  border-radius: var(--gxg-card-mini_border-radius);\n  padding: var(--gxg-card-mini_padding);\n  background-color: var(--mer-elevation__background-color--02);\n  border: var(--mer-elevation__border-02);\n  box-shadow: var(--mer-elevation__box-shadow--02);\n  border: var(--gxg-card-mini_border);\n}\n:host(.card--mini) .card__header {\n  margin: var(--gxg-card-mini-header_margin);\n  padding-block-end: var(--gxg-card-mini-header_padding-block-end);\n  border-bottom: var(--gxg-card-mini-header_border-bottom);\n}\n:host(.card--mini) .card__header .card__header--left {\n  width: var(--gxg-card-mini-header-left_width);\n  gap: var(--gxg-card-mini-header-left_gap);\n}\n:host(.card--mini) .card__header .card__title {\n  margin: var(--gxg-card-mini-title_margin);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: var(--gxg-card-mini-title_font-weight);\n  font-size: var(--gxg-card-mini-title_font-size);\n  color: var(--gxg-card-mini-title_color);\n}\n:host(.card--mini) .content {\n  font-style: var(--gxg-card-mini-content_font-style);\n  font-size: var(--gxg-card-mini_font-size);\n  padding: var(--gxg-card-mini-content_padding);\n  color: var(--gxg-card-mini-content_color);\n}\n\n:host(.card--no-content) .card__header {\n  border-bottom: 0;\n}\n\n/*actionable*/\n:host(.card--actionable:hover) {\n  filter: brightness(var(--gxg-card-actionable-brightness--hover));\n}\n:host(.card--actionable:hover) .wrapper,\n:host(.card--actionable:hover) .card__header,\n:host(.card--actionable:hover) .content {\n  cursor: pointer;\n}\n\n/*no header border*/\n:host(.no-header-border) .card__header {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n\n/*noBorder*/\n:host(.card--no-border) {\n  border: none !important;\n}\n\n/*hiChar*/\n.hiChar {\n  color: var(--gxg-hi-char-color);\n  font-weight: 600;\n}","import { h, Host } from \"@stencil/core\";\nimport state from \"../store\";\nimport { hiChar } from \"../../common/hiChar\";\nexport class GxgCard {\n    constructor() {\n        this.elevation = \"xs\";\n        this.background = \"white\";\n        this.padding = \"xs\";\n        this.minHeight = \"auto\";\n        this.height = \"auto\";\n        this.maxWidth = \"100%\";\n        this.noShadow = false;\n        this.noBorder = false;\n        this.hiChar = false;\n        this.filterValue = undefined;\n        this.noPaddingTop = false;\n        this.cardTitle = undefined;\n        this.noHeaderBorder = false;\n        this.titleSemibold = false;\n        this.cardSubtitle = undefined;\n        this.subtitleLink = undefined;\n        this.subtitleIcon = undefined;\n        this.cardType = \"section\";\n        this.icon = undefined;\n        this.iconColor = \"auto\";\n        this.subtitleColor = \"auto\";\n        this.editableTitle = false;\n        this.actionable = false;\n    }\n    el;\n    /*---  Mercury Only Tokens ---*/\n    titleType = \"h2\";\n    hasSlot = false;\n    hasHeaderSlot = false;\n    componentWillLoad() {\n        if (this.cardType === \"article\") {\n            this.titleType = \"h2\";\n        }\n        else if (this.cardType === \"mini\") {\n            this.titleType = \"h4\";\n        }\n        const hasSlot = this.el.querySelector(\"*\");\n        if (hasSlot) {\n            this.hasSlot = true;\n        }\n        const headerSlot = this.el.querySelector(\"[slot='header']\");\n        if (headerSlot) {\n            this.hasHeaderSlot = true;\n        }\n    }\n    renderCardSubtitle = () => {\n        if (this.cardSubtitle && this.subtitleLink) {\n            return (h(\"a\", { class: \"subtitle\", href: this.subtitleLink, target: \"_blank\" }, this.cardSubtitle));\n        }\n        else if (this.cardSubtitle && !this.subtitleLink) {\n            {\n                return this.hiChar\n                    ? hiChar(this.cardSubtitle, this.filterValue)\n                    : this.cardSubtitle;\n            }\n        }\n    };\n    render() {\n        return (h(Host, { role: \"article\", class: {\n                card: true,\n                mercury: state.mercury,\n                \"card--no-content\": !this.hasSlot,\n                \"card--section\": this.cardType === \"section\",\n                \"card--article\": this.cardType === \"article\",\n                \"card--mini\": this.cardType === \"mini\",\n                \"card--title\": this.cardTitle !== undefined,\n                \"card--actionable\": this.actionable &&\n                    (this.cardType === \"article\" || this.cardType === \"mini\"),\n                \"title-semibold\": this.titleSemibold,\n                \"card--no-shadow\": this.noShadow,\n                \"card--no-border\": this.noBorder,\n                \"no-header-border\": this.noHeaderBorder\n            }, style: {\n                maxWidth: this.maxWidth,\n                minHeight: this.minHeight,\n                height: this.height\n            } }, h(\"div\", { role: this.actionable ? \"button\" : \"none\", class: {\n                wrapper: true,\n                \"wrapper--header\": this.cardTitle !== undefined\n            } }, this.cardTitle ? (h(\"header\", { class: \"card__header\" }, h(\"div\", { class: {\n                \"card__header--left\": true,\n                \"card__header--left-full-width\": !this.cardSubtitle\n            } }, this.icon ? (h(\"gxg-icon\", { type: this.icon, color: this.iconColor })) : null, h(\"div\", { class: \"card-title-wrapper\" }, this.cardType === \"section\" ? (h(\"gxg-title-editable\", { class: \"card__title\", titleType: this.titleType, value: this.cardTitle, disableEdition: !this.editableTitle })) : (h(\"h2\", { class: \"card__title\" }, this.hiChar\n            ? hiChar(this.cardTitle, this.filterValue)\n            : this.cardTitle)))), this.cardSubtitle &&\n            this.cardType !== \"mini\" &&\n            !this.hasHeaderSlot ? (h(\"div\", { class: \"card__header--right\" }, h(\"div\", { class: \"subtitle-wrapper\" }, this.renderCardSubtitle()), this.subtitleIcon ? (h(\"gxg-icon\", { type: this.subtitleIcon, color: this.subtitleColor })) : null)) : null, this.hasHeaderSlot ? (h(\"div\", { class: \"card__header--right\" }, h(\"slot\", { name: \"header\" }))) : null)) : null, this.hasSlot ? (h(\"div\", { class: \"content\" }, h(\"slot\", null))) : null)));\n    }\n    static get is() { return \"gxg-card\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"card.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"card.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"elevation\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"elevation\",\n                    \"resolved\": \"\\\"m\\\" | \\\"xs\\\"\",\n                    \"references\": {\n                        \"elevation\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/card/card.tsx\",\n                            \"id\": \"src/components/card/card.tsx::elevation\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The card box-shadow\"\n                },\n                \"attribute\": \"elevation\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"xs\\\"\"\n            },\n            \"background\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"background\",\n                    \"resolved\": \"\\\"gray-01\\\" | \\\"white\\\"\",\n                    \"references\": {\n                        \"background\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/card/card.tsx\",\n                            \"id\": \"src/components/card/card.tsx::background\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The background color\"\n                },\n                \"attribute\": \"background\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"white\\\"\"\n            },\n            \"padding\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"padding\",\n                    \"resolved\": \"\\\"0\\\" | \\\"l\\\" | \\\"m\\\" | \\\"s\\\" | \\\"xl\\\" | \\\"xs\\\" | \\\"xxl\\\" | \\\"xxxl\\\"\",\n                    \"references\": {\n                        \"padding\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/card/card.tsx\",\n                            \"id\": \"src/components/card/card.tsx::padding\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The card padding\"\n                },\n                \"attribute\": \"padding\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"xs\\\"\"\n            },\n            \"minHeight\": {\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 component min. height\"\n                },\n                \"attribute\": \"min-height\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"auto\\\"\"\n            },\n            \"height\": {\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 component height\"\n                },\n                \"attribute\": \"height\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"auto\\\"\"\n            },\n            \"maxWidth\": {\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 component max. width\"\n                },\n                \"attribute\": \"max-width\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"100%\\\"\"\n            },\n            \"noShadow\": {\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\": \"Disables box-shadow\"\n                },\n                \"attribute\": \"no-shadow\",\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\": \"Removes border\"\n                },\n                \"attribute\": \"no-border\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"hiChar\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This allows to highlight any character on the card title, or subtitle.\"\n                },\n                \"attribute\": \"hi-char\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"filterValue\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This is the filter value needed for hiChar.\"\n                },\n                \"attribute\": \"filter-value\",\n                \"reflect\": false\n            },\n            \"noPaddingTop\": {\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\": \"Remove padding from the top (applies only for the \\\"section\\\" card type)\"\n                },\n                \"attribute\": \"no-padding-top\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"cardTitle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An optional title\"\n                },\n                \"attribute\": \"card-title\",\n                \"reflect\": false\n            },\n            \"noHeaderBorder\": {\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\": \"Removes the header border\"\n                },\n                \"attribute\": \"no-header-border\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"titleSemibold\": {\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\": \"Card title semibold\"\n                },\n                \"attribute\": \"title-semibold\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"cardSubtitle\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An optional subtitle\"\n                },\n                \"attribute\": \"card-subtitle\",\n                \"reflect\": false\n            },\n            \"subtitleLink\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An optional subtitle link\"\n                },\n                \"attribute\": \"subtitle-link\",\n                \"reflect\": false\n            },\n            \"subtitleIcon\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"An optional subtitle icon\"\n                },\n                \"attribute\": \"subtitle-icon\",\n                \"reflect\": false\n            },\n            \"cardType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"CardType\",\n                    \"resolved\": \"\\\"article\\\" | \\\"mini\\\" | \\\"section\\\"\",\n                    \"references\": {\n                        \"CardType\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/card/card.tsx\",\n                            \"id\": \"src/components/card/card.tsx::CardType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The card type (only for mercury)\"\n                },\n                \"attribute\": \"card-type\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"section\\\"\"\n            },\n            \"icon\": {\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 card type (only for mercury)\"\n                },\n                \"attribute\": \"icon\",\n                \"reflect\": false\n            },\n            \"iconColor\": {\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\": \"import\",\n                            \"path\": \"../icon/icon\",\n                            \"id\": \"src/components/icon/icon.tsx::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The icon color\"\n                },\n                \"attribute\": \"icon-color\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"auto\\\"\"\n            },\n            \"subtitleColor\": {\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\": \"import\",\n                            \"path\": \"../icon/icon\",\n                            \"id\": \"src/components/icon/icon.tsx::Color\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The icon color\"\n                },\n                \"attribute\": \"subtitle-color\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"auto\\\"\"\n            },\n            \"editableTitle\": {\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 makes the title editable (only for mercury)\"\n                },\n                \"attribute\": \"editable-title\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"actionable\": {\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 applies a different style on hover. Useful when the card is actionable (has an action attached to the click event).\"\n                },\n                \"attribute\": \"actionable\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=card.js.map\n",":root {\n  --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-01-font-weight);\n  font-size: var(--ds-title-01-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-02-font-weight);\n  font-size: var(--ds-title-02-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-03-font-weight);\n  font-size: var(--ds-title-03-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  text-transform: uppercase;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-04-font-weight);\n  font-size: var(--ds-title-04-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--ds-title-05-font-weight);\n  font-size: var(--ds-title-05-font-size);\n  letter-spacing: var(--ds-base-font-letter-spacing--regular);\n  color: var(--ds-base-font-color);\n  text-align: start;\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  font-style: italic;\n}\n\n.gxg-quote--negative {\n  color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.gxg-link:hover {\n  color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n  color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n  line-height: unset;\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--link);\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n  color: var(--ds-base-font-color--dimmed);\n  filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--error);\n  display: inline-block;\n}\n\n.gxg-alert-warning {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--warning);\n  display: inline-block;\n}\n\n.gxg-alert-success {\n  font-family: var(--ds-base-font-family-primary);\n  font-size: var(--ds-base-font-size);\n  color: var(--ds-base-font-size-color);\n  font-weight: var(--ds-base-font-size-weight);\n  line-height: var(--ds-base-font-line-height--comfortable);\n  color: var(--ds-base-font-color--success);\n  display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n  color: var(--color-primary-disabled);\n  pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n  font-family: var(--ds-base-font-family-primary);\n  font-weight: var(--gxg-label-font-weight);\n  font-size: var(--gxg-label-font-size);\n  color: var(--gxg-label-color);\n  text-align: center;\n  line-height: 1.455em;\n  display: flex;\n  align-items: center;\n}\n.gxg-label:hover {\n  color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n  color: var(--color-primary-active);\n}\n.gxg-label:active {\n  color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n  color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n  color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n  color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n  /* Track */\n  /* Handle */\n  /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n  width: var(--gxg-scrollbar-width);\n  height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n  background-color: var(--gxg-scrollbar-track-background);\n  border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--gxg-scrollbar-track-thumb-background);\n  border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n  background: rgba(0, 0, 0, 0);\n}\n\n/*Warning*/\n:host(.gxg-validation--warning) .form-element {\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus {\n  outline-color: var(--ds-border-color--warning);\n  border-color: var(--ds-border-color--warning);\n}\n:host(.gxg-validation--warning) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--warning);\n}\n\n/*Error*/\n:host(.gxg-validation--error) .form-element {\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus {\n  outline-color: var(--ds-border-color--error);\n  border-color: var(--ds-border-color--error);\n}\n:host(.gxg-validation--error) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--error);\n}\n\n/*Success*/\n:host(.gxg-validation--success) .form-element {\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus {\n  outline-color: var(--ds-border-color--success);\n  border-color: var(--ds-border-color--success);\n}\n:host(.gxg-validation--success) .form-element:focus + .checkmark {\n  --checkmark-border-color: var(--ds-border-color--success);\n}\n\n/*Tooltip*/\n.tooltip-outer-wrapper {\n  display: grid;\n  grid-template-columns: 0fr;\n  transition: grid-template-columns var(--timing-02);\n}\n\n:host(.tooltip--visible) .tooltip-outer-wrapper {\n  grid-template-columns: 1fr;\n}\n\n.tooltip-inner-wrapper {\n  --margin-inline-start: 6px;\n  overflow: hidden;\n  transition: 150ms width;\n  width: 0;\n}\n.tooltip-inner-wrapper gxg-icon {\n  display: flex;\n  position: relative !important;\n  top: 0 !important;\n  transform: none !important;\n  margin-inline-start: var(--margin-inline-start);\n  box-sizing: border-box;\n}\n.tooltip-inner-wrapper--visible {\n  width: calc(var(--ds-icon-size-box--small) + var(--margin-inline-start));\n}\n.tooltip-inner-wrapper--hidden {\n  display: none;\n}\n\n:host(.gxg--disabled) .form-element,\n:host(.gxg--disabled.form-element) {\n  pointer-events: none;\n  background-color: var(--ds-background-color-disabled) !important;\n  color: var(--ds-color--disabled) !important;\n  border-color: var(--ds-border-color-disabled) !important;\n  cursor: default !important;\n}\n\n:host {\n  display: block;\n  color: var(--gxg-title-editable__color);\n}\n:host .wrapper {\n  font-family: var(--ds-base-font-family-primary);\n  position: relative;\n  max-width: 100%;\n}\n:host input {\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  text-transform: inherit;\n  color: inherit;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-sizing: border-box;\n  flex-grow: 1;\n  cursor: auto;\n  border-bottom: 2px solid transparent;\n}\n:host input:focus {\n  outline: none;\n}\n\n/*wrapper*/\n.wrapper {\n  display: flex;\n  align-items: center;\n  gap: var(--gxg-title-editable-wrapper__gap);\n  font-weight: var(--gxg-title-editable__font-weight);\n}\n\n/*editing*/\n:host(:not([editing])) input {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/*click-to-edit*/\n:host([click-to-edit]:not([disable-edition])) .wrapper,\n:host([click-to-edit]:not([disable-edition])) input {\n  cursor: pointer;\n}\n\n/*title types*/\n:host([title-type=h1]) .wrapper {\n  font-size: var(--gxg-title-editable-h1__font-size);\n  text-transform: capitalize;\n}\n\n:host([title-type=h2]) .wrapper {\n  font-size: var(--gxg-title-editable-h2__font-size);\n}\n\n/*fluid*/\n:host([fluid]) .wrapper {\n  display: inline-flex;\n}\n\n/*focus (optional)*/\n:host(.focus--text.editing) input {\n  color: var(--gxg-title-editable__color--editing);\n}\n\n/*focus (optional)*/\n:host(.focus--line.editing) input {\n  border-bottom-color: var(--gxg-title-editable__color--editing);\n}\n\n/*ghost div: it helps measuring the text width, to make the input as wide as needed (fluid)*/\n.ghost {\n  font-family: inherit;\n  font-size: inherit;\n  position: fixed;\n  visibility: hidden;\n  height: auto;\n  width: auto;\n  white-space: nowrap;\n  /*remove from viewport*/\n  bottom: 0;\n  left: 0;\n  transform: translate(-100%, -100%);\n}\n\n.right-wrapper {\n  display: flex;\n  align-items: center;\n}","import { Host, h } from \"@stencil/core\";\nimport { formTooltipLogic } from \"../../common/form\";\nimport { formClasses } from \"../../common/classesNames\";\nimport { commonClassesNames } from \"../../common/classesNames\";\nimport { detectClickOutside } from \"../../common/detect-click-outside\";\nexport class GxgTitleEditable {\n    constructor() {\n        this.value = undefined;\n        this.titleType = \"h1\";\n        this.disableEdition = false;\n        this.debounce = false;\n        this.debounceDelay = 800;\n        this.disabled = false;\n        this.clickToEdit = false;\n        this.fluid = false;\n        this.focusType = undefined;\n        this.validationStatus = \"indeterminate\";\n        this.validationMessage = undefined;\n        this.hideTooltip = false;\n        this.editing = false;\n    }\n    textInput;\n    wrapperEl;\n    editButtonEl;\n    ghostDiv;\n    el;\n    timeoutReference;\n    watchValueHandler(newValue) {\n        if (this.debounce) {\n            clearTimeout(this.timeoutReference);\n            this.timeoutReference = setTimeout(() => {\n                this.valueChanged.emit(newValue);\n            }, this.debounceDelay);\n        }\n        else {\n            this.valueChanged.emit(newValue);\n        }\n    }\n    watchEditingHandler(editing) {\n        if (editing) {\n            document.addEventListener(\"click\", this.detectClickOutsideFunc);\n        }\n        else {\n            document.removeEventListener(\"click\", this.detectClickOutsideFunc);\n        }\n    }\n    /* EVENTS */\n    /**\n     * Emitted when the value changes\n     */\n    valueChanged;\n    /*COMPONENT LIFECYCLE METHODS*/\n    componentDidLoad() {\n        if (this.fluid) {\n            this.inputInputHandler();\n        }\n    }\n    /*PRIVATE METHODS*/\n    edit = () => {\n        this.editing = true;\n        this.positionCursorAtTheEnd();\n    };\n    wrapperClickedHandler = () => {\n        this.editing = true;\n    };\n    positionCursorAtTheEnd = () => {\n        this.textInput.selectionStart = this.textInput.selectionEnd =\n            this.textInput.value.length;\n        this.textInput.focus();\n    };\n    inputKeyDownHandler = (e) => {\n        if (e.key === \"Enter\" || e.key === \"Escape\") {\n            e.preventDefault();\n            this.editing = false;\n            this.editButtonEl.focus();\n        }\n        else if (this.fluid) {\n            this.setInputWidth();\n        }\n    };\n    detectClickOutsideFunc = (e) => {\n        const clickedOutside = detectClickOutside(e, this.wrapperEl);\n        if (clickedOutside) {\n            this.editing = false;\n        }\n    };\n    setInputWidth = () => {\n        this.textInput.style.width = this.value.length + 1 + \"ch\";\n    };\n    inputInputHandler = () => {\n        this.value = this.textInput.value;\n        if (this.fluid) {\n            this.ghostDiv.innerText = this.value;\n            this.updateInputWidth();\n        }\n    };\n    updateInputWidth = () => {\n        if (this.fluid) {\n            const ghostDivWidth = this.ghostDiv.getBoundingClientRect().width;\n            this.textInput.style.width = `${ghostDivWidth}px`;\n        }\n    };\n    /*RENDER*/\n    render() {\n        return (h(Host, { class: {\n                editing: this.editing,\n                \"focus--text\": this.focusType === \"text\",\n                \"focus--line\": this.focusType === \"line\",\n                [formClasses[\"VALIDATION_INDETERMINATE_CLASS\"]]: this.validationStatus === \"indeterminate\",\n                [formClasses[\"VALIDATION_WARNING_CLASS\"]]: this.validationStatus === \"warning\",\n                [formClasses[\"VALIDATION_ERROR_CLASS\"]]: this.validationStatus === \"error\",\n                [formClasses[\"VALIDATION_SUCCESS_CLASS\"]]: this.validationStatus === \"success\",\n                [commonClassesNames[\"DISABLED_CLASS\"]]: this.disabled\n            } }, h(\"div\", { onMouseUp: this.clickToEdit &&\n                !this.editing &&\n                !this.disableEdition &&\n                this.wrapperClickedHandler, class: {\n                wrapper: true\n            }, ref: el => (this.wrapperEl = el) }, this.fluid ? (h(\"div\", { class: \"ghost\", ref: el => (this.ghostDiv = el) })) : null, h(\"input\", { type: \"text\", value: this.value, readOnly: !this.editing, ref: el => (this.textInput = el), onKeyDown: this.inputKeyDownHandler, onInput: this.inputInputHandler, tabIndex: this.editing ? 0 : -1 }), h(\"div\", { class: \"right-wrapper\" }, !this.disableEdition ? (h(\"gxg-button\", { type: \"secondary-icon-only\", icon: \"gemini-tools/edit\", onClick: this.edit, ref: el => (this.editButtonEl = el) })) : null, formTooltipLogic(this, this.hideTooltip)))));\n    }\n    static get is() { return \"gxg-title-editable\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"title-editable.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"title-editable.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"value\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The title value\"\n                },\n                \"attribute\": \"value\",\n                \"reflect\": false,\n                \"defaultValue\": \"undefined\"\n            },\n            \"titleType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"EditableTitleType\",\n                    \"resolved\": \"\\\"h1\\\" | \\\"h2\\\" | \\\"h3\\\" | \\\"h4\\\"\",\n                    \"references\": {\n                        \"EditableTitleType\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/title-editable/title-editable.tsx\",\n                            \"id\": \"src/components/title-editable/title-editable.tsx::EditableTitleType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The title type\"\n                },\n                \"attribute\": \"title-type\",\n                \"reflect\": true,\n                \"defaultValue\": \"\\\"h1\\\"\"\n            },\n            \"disableEdition\": {\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\": \"If true, the title will not be editable\"\n                },\n                \"attribute\": \"disable-edition\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"debounce\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute activates a debounce for the valueChanged event. This will cause the event to be emitted after 'debounceDelay' time.\"\n                },\n                \"attribute\": \"debounce\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"debounceDelay\": {\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 debounce delay value. Only applies if 'debounce' is true.\"\n                },\n                \"attribute\": \"debounce-delay\",\n                \"reflect\": false,\n                \"defaultValue\": \"800\"\n            },\n            \"disabled\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The presence of this attribute makes the input disabled\"\n                },\n                \"attribute\": \"disabled\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"clickToEdit\": {\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\": \"If true, it will allow the title to be edited\"\n                },\n                \"attribute\": \"click-to-edit\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"fluid\": {\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\": \"If true, the width of the title will take only the minimum needed space\"\n                },\n                \"attribute\": \"fluid\",\n                \"reflect\": true,\n                \"defaultValue\": \"false\"\n            },\n            \"focusType\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"EditableTitleFocusType\",\n                    \"resolved\": \"\\\"line\\\" | \\\"text\\\"\",\n                    \"references\": {\n                        \"EditableTitleFocusType\": {\n                            \"location\": \"local\",\n                            \"path\": \"/home/circleci/repo/src/components/title-editable/title-editable.tsx\",\n                            \"id\": \"src/components/title-editable/title-editable.tsx::EditableTitleFocusType\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If true, the width of the title will take only the minimum needed space\"\n                },\n                \"attribute\": \"focus-type\",\n                \"reflect\": true\n            },\n            \"validationStatus\": {\n                \"type\": \"string\",\n                \"mutable\": true,\n                \"complexType\": {\n                    \"original\": \"ValidationStatus\",\n                    \"resolved\": \"\\\"error\\\" | \\\"indeterminate\\\" | \\\"success\\\" | \\\"warning\\\"\",\n                    \"references\": {\n                        \"ValidationStatus\": {\n                            \"location\": \"import\",\n                            \"path\": \"../../common/types\",\n                            \"id\": \"src/common/types.ts::ValidationStatus\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The validation status\"\n                },\n                \"attribute\": \"validation-status\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"indeterminate\\\"\"\n            },\n            \"validationMessage\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The message to display when validation fails (error)\"\n                },\n                \"attribute\": \"validation-message\",\n                \"reflect\": false\n            },\n            \"hideTooltip\": {\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\": \"Shows or hides the tooltip\"\n                },\n                \"attribute\": \"hide-tooltip\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"editing\": {}\n        };\n    }\n    static get events() {\n        return [{\n                \"method\": \"valueChanged\",\n                \"name\": \"valueChanged\",\n                \"bubbles\": true,\n                \"cancelable\": true,\n                \"composed\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Emitted when the value changes\"\n                },\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                }\n            }];\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"value\",\n                \"methodName\": \"watchValueHandler\"\n            }, {\n                \"propName\": \"editing\",\n                \"methodName\": \"watchEditingHandler\"\n            }];\n    }\n}\n//# sourceMappingURL=title-editable.js.map\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-050bc199.entry.js → p-e0924e3f.entry.js}

@@ -1,10 +1,100 @@
 import { r as i, h as e, H as t, g as r } from "./p-2776d2f9.js";
 
-import { L as o } from "./p-74d59062.js";
+import { L as a } from "./p-74d59062.js";
 
-const a = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;box-shadow:none;height:100%;overflow:hidden;padding-bottom:2px;box-sizing:border-box}.news-container{display:flex;flex-direction:column;gap:var(--gx-ide-articles-gap)}.news-container p:first-child{margin-top:0}.news-container p:last-child{margin-bottom:0}gxg-card.section{height:100% !important;overflow:auto;border-bottom:2px solid var(--gray-00)}gxg-ide-loader::part(loader-wrapper){border-radius:8px;overflow:hidden}.gxg-card-container{height:100%;overflow:auto}.gx-ide-message{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm)}.gx-ide-message--hidden{display:none}gx-ide-title{max-width:250px}.news-article{transition:200ms opacity;opacity:0}.news-article.visible{opacity:1}";
+const n = ":host{display:flex;align-items:center;justify-content:center}.container{max-width:520px;margin:0 auto;gap:var(--mer-spacing--xl);opacity:0;transition:opacity var(--state-transition-speed);padding:var(--mer-spacing--md)}.container .icon-wrapper{border:var(--mer-border__width--sm) dashed var(--mer-accent__primary);border-radius:50%;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}.container__main{gap:var(--mer-spacing--sm)}.container__buttons{gap:var(--mer-spacing--xs)}.container--visible{opacity:1}.container,.container__main,.container__buttons{display:flex;align-items:center;flex-direction:column}";
 
 const s = class {
+  constructor(e) {
+    i(this, e);
+    /*
+      INDEX:
+      1.OWN PROPERTIES
+      2.REFERENCE TO ELEMENTS
+      3.STATE() VARIABLES
+      4.PUBLIC PROPERTY API | WATCH'S
+      5.EVENTS (EMIT)
+      6.COMPONENT LIFECYCLE METHODS
+      7.LISTENERS
+      8.PUBLIC METHODS API
+      9.LOCAL METHODS
+      10.RENDER() FUNCTION
+      */
+    // 1.OWN PROPERTIES //
+        this.transitionSpeed = 200;
+    this.stateIcon = undefined;
+    this.stateTitle = undefined;
+    this.stateDescription = undefined;
+    this.primaryButtonLabel = undefined;
+    this.secondaryButtonLabel = undefined;
+    this.display = false;
+  }
+  watchDisplayHandler(i) {
+    if (i) {
+      this.primaryButtonEl.disabled = false;
+      this.secondaryButtonEl.disabled = false;
+    } else {
+      setTimeout((() => {
+        this.primaryButtonEl.disabled = true;
+        this.secondaryButtonEl.disabled = true;
+      }), this.transitionSpeed);
+    }
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE METHODS //
+  componentWillLoad() {
+    this.el.style.setProperty("--state-transition-speed", `${this.transitionSpeed}ms`);
+  }
+  componentDidLoad() {
+    this.display = true;
+  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  // 10.RENDER() FUNCTION //
+  render() {
+    return e(t, null, e("div", {
+      class: {
+        container: true,
+        "container--visible": this.display
+      }
+    }, this.stateIcon ? e("span", {
+      class: "icon-wrapper"
+    }, e("gxg-icon", {
+      class: "icon",
+      type: this.stateIcon,
+      color: "mercury-primary"
+    }, this.stateTitle)) : null, e("main", {
+      class: "container__main"
+    }, this.stateTitle ? e("gx-ide-title", {
+      alignment: "center"
+    }, this.stateTitle) : null, this.stateDescription ? e("gxg-text", {
+      textAlign: "center"
+    }, this.stateDescription) : null), e("div", {
+      class: "container__buttons"
+    }, this.primaryButtonLabel ? e("gxg-button", {
+      type: "primary-text-only",
+      ref: i => this.primaryButtonEl = i
+    }, this.primaryButtonLabel) : null, this.secondaryButtonLabel ? e("gxg-button", {
+      type: "secondary-text-only",
+      ref: i => this.secondaryButtonEl = i
+    }, this.secondaryButtonLabel) : null)));
+  }
+  get el() {
+    return r(this);
+  }
+  static get watchers() {
+    return {
+      display: [ "watchDisplayHandler" ]
+    };
+  }
+};
+
+s.style = n;
+
+const o = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;box-shadow:none;height:100%;overflow:hidden;padding-bottom:2px;box-sizing:border-box}.news-container{display:flex;flex-direction:column;gap:var(--gx-ide-articles-gap)}.news-container p:first-child{margin-top:0}.news-container p:last-child{margin-bottom:0}gxg-card.section{height:100% !important;overflow:auto;border-bottom:2px solid var(--gray-00)}gxg-ide-loader::part(loader-wrapper){border-radius:var(--gxg-card-section_border-radius);overflow:hidden}.gxg-card-container{height:100%;overflow:auto}.gx-ide-message{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm)}.gx-ide-message--hidden{display:none}gx-ide-title{max-width:250px}.news-article{transition:200ms opacity;opacity:0}.news-article.visible{opacity:1}";
+
+const l = class {
   constructor(t) {
     i(this, t);
     this.newsRendered = false;
@@ -87,7 +177,7 @@ const s = class {
   // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
-    this._componentLocale = await o.getComponentStrings(this.el);
+    this._componentLocale = await a.getComponentStrings(this.el);
   }
   componentDidLoad() {
     this.getNews();
@@ -140,7 +230,7 @@ const s = class {
   }
 };
 
-s.style = a;
+l.style = o;
 
-export { s as gx_ide_recent_news };
-//# sourceMappingURL=p-050bc199.entry.js.map
+export { s as gx_ide_empty_state, l as gx_ide_recent_news };
+//# sourceMappingURL=p-e0924e3f.entry.js.map

package/dist/genexus-ide-ui/p-e0924e3f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["gxIdeEmptyStateCss","GxIdeEmptyState","this","transitionSpeed","watchDisplayHandler","display","primaryButtonEl","disabled","secondaryButtonEl","setTimeout","componentWillLoad","el","style","setProperty","componentDidLoad","render","h","Host","class","container","stateIcon","type","color","stateTitle","alignment","stateDescription","textAlign","primaryButtonLabel","ref","secondaryButtonLabel","recentNewsCss","GxIdeRecentNews","newsRendered","setTimeOutNewsDelay","evaluateNewsDisplay","news","length","newsContainerEl","undefined","displayNews","Array","from","querySelectorAll","forEach","classList","add","attachLoaderEvents","loaderEl","addEventListener","newsLoadFailed","getNews","async","show","getNewsCallback","newsResult","openNewsHandler","newsId","openNewsCallback","renderNews","id","title","key","cardType","cardTitle","icon","iconColor","actionable","onClick","titleSemibold","noHeaderBorder","body","watchNewsHandler","_componentLocale","Locale","getComponentStrings","componentDidRender","recentNews","_a","map","singleNews","newsNotFetched","tryAgainButtonLabel","href","target","readThemOnline","abortTime","loaderTitle","loader","description"],"sources":["src/components/_helpers/empty-state/gx-ide-empty-state.scss?tag=gx-ide-empty-state&encapsulation=shadow","src/components/_helpers/empty-state/gx-ide-empty-state.tsx","src/components/start-page/recent-news.scss?tag=gx-ide-recent-news&encapsulation=shadow","src/components/start-page/recent-news.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.container {\n  max-width: 520px;\n  margin: 0 auto;\n  gap: var(--mer-spacing--xl);\n  opacity: 0;\n  transition: opacity var(--state-transition-speed);\n  padding: var(--mer-spacing--md);\n\n  .icon-wrapper {\n    border: var(--mer-border__width--sm) dashed var(--mer-accent__primary);\n    border-radius: 50%;\n    min-width: 40px;\n    min-height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &__main {\n    gap: var(--mer-spacing--sm);\n  }\n  &__buttons {\n    gap: var(--mer-spacing--xs);\n  }\n  &--visible {\n    opacity: 1;\n  }\n}\n.container,\n.container__main,\n.container__buttons {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n","import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\n@Component({\n  tag: \"gx-ide-empty-state\",\n  styleUrl: \"gx-ide-empty-state.scss\",\n  shadow: true\n})\nexport class GxIdeEmptyState {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  private transitionSpeed: number = 200;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeEmptyStateElement;\n  private primaryButtonEl!: HTMLGxgButtonElement;\n  private secondaryButtonEl!: HTMLGxgButtonElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The state icon\n   */\n  @Prop() readonly stateIcon?: string;\n\n  /**\n   * The state title\n   */\n  @Prop() readonly stateTitle!: string;\n\n  /**\n   * The state description\n   */\n  @Prop() readonly stateDescription?: string;\n\n  /**\n   * The button primary label\n   */\n  @Prop() readonly primaryButtonLabel?: string;\n\n  /**\n   * The button secondary label\n   */\n  @Prop() readonly secondaryButtonLabel?: string;\n\n  /**\n   * If true, it will display the content\n   */\n  @Prop({ mutable: true }) display: boolean = false;\n  @Watch(\"display\")\n  watchDisplayHandler(display: boolean) {\n    if (display) {\n      this.primaryButtonEl.disabled = false;\n      this.secondaryButtonEl.disabled = false;\n    } else {\n      setTimeout(() => {\n        this.primaryButtonEl.disabled = true;\n        this.secondaryButtonEl.disabled = true;\n      }, this.transitionSpeed);\n    }\n  }\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  componentWillLoad() {\n    this.el.style.setProperty(\n      \"--state-transition-speed\",\n      `${this.transitionSpeed}ms`\n    );\n  }\n\n  componentDidLoad() {\n    this.display = true;\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <div class={{ \"container\": true, \"container--visible\": this.display }}>\n          {this.stateIcon ? (\n            <span class=\"icon-wrapper\">\n              <gxg-icon\n                class=\"icon\"\n                type={this.stateIcon}\n                color=\"mercury-primary\"\n              >\n                {this.stateTitle}\n              </gxg-icon>\n            </span>\n          ) : null}\n          <main class=\"container__main\">\n            {this.stateTitle ? (\n              <gx-ide-title alignment=\"center\">{this.stateTitle}</gx-ide-title>\n            ) : null}\n            {this.stateDescription ? (\n              <gxg-text textAlign=\"center\">{this.stateDescription}</gxg-text>\n            ) : null}\n          </main>\n          <div class=\"container__buttons\">\n            {this.primaryButtonLabel ? (\n              <gxg-button\n                type=\"primary-text-only\"\n                ref={el => (this.primaryButtonEl = el as HTMLGxgButtonElement)}\n              >\n                {this.primaryButtonLabel}\n              </gxg-button>\n            ) : null}\n            {this.secondaryButtonLabel ? (\n              <gxg-button\n                type=\"secondary-text-only\"\n                ref={el =>\n                  (this.secondaryButtonEl = el as HTMLGxgButtonElement)\n                }\n              >\n                {this.secondaryButtonLabel}\n              </gxg-button>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: block;\n  box-shadow: none;\n  height: 100%;\n  overflow: hidden;\n  padding-bottom: 2px;\n  box-sizing: border-box;\n}\n.news-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-articles-gap);\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n}\ngxg-card.section {\n  height: 100% !important;\n  overflow: auto;\n  border-bottom: 2px solid var(--gray-00);\n}\ngxg-ide-loader::part(loader-wrapper) {\n  border-radius: var(--gxg-card-section_border-radius);\n  overflow: hidden;\n}\n.gxg-card-container {\n  height: 100%;\n  overflow: auto;\n}\n.gx-ide-message {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--mer-spacing--sm);\n\n  &--hidden {\n    display: none;\n  }\n}\ngx-ide-title {\n  max-width: 250px;\n}\n.news-article {\n  transition: 200ms opacity;\n  opacity: 0;\n\n  &.visible {\n    opacity: 1;\n  }\n}\n","/* STENCIL IMPORTS */\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { NewsData, GetNewsCallback, OpenNewsCallback } from \"./start-page\";\n\n@Component({\n  tag: \"gx-ide-recent-news\",\n  styleUrl: \"recent-news.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/recent-news\"]\n})\nexport class GxIdeRecentNews {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeRecentNewsElement;\n  private loaderEl!: HTMLGxgIdeLoaderElement;\n  private newsContainerEl: HTMLDivElement;\n  private newsRendered = false;\n  private setTimeOutNewsDelay = 75;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * The list of news\n   */\n  @State() news: NewsData[] = [];\n  @Watch(\"news\")\n  watchNewsHandler() {\n    this.displayNews();\n  }\n\n  /**\n   * True if news couldn't be loaded\n   */\n  @State() newsLoadFailed = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * Callback invoked to load the news feed (right panel \"Recent News\").\n   */\n  @Prop() readonly getNewsCallback: GetNewsCallback;\n\n  /**\n   * Callback invoked to open a news article.\n   */\n  @Prop() readonly openNewsCallback: OpenNewsCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.getNews();\n    this.attachLoaderEvents();\n  }\n\n  componentDidRender() {\n    this.evaluateNewsDisplay();\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateNewsDisplay = () => {\n    if (\n      !this.newsRendered &&\n      this.news.length > 0 &&\n      this.newsContainerEl !== undefined\n    ) {\n      this.displayNews();\n      this.newsRendered = true;\n    }\n  };\n\n  private displayNews = () => {\n    if (this.newsContainerEl !== undefined) {\n      const news = Array.from(\n        this.newsContainerEl.querySelectorAll(\"gxg-card\")\n      );\n      news.forEach(news => {\n        setTimeout(() => {\n          news.classList.add(\"visible\");\n        }, this.setTimeOutNewsDelay);\n        this.setTimeOutNewsDelay += 75;\n      });\n    }\n  };\n\n  private attachLoaderEvents = () => {\n    this.loaderEl.addEventListener(\"loaderFinished\", () => {\n      if (this.news.length === 0) {\n        this.newsLoadFailed = true;\n      } else {\n        this.newsLoadFailed = false;\n      }\n    });\n  };\n\n  private getNews = async () => {\n    this.loaderEl.show = true;\n    if (this.getNewsCallback) {\n      const newsResult = await this.getNewsCallback();\n      this.loaderEl.show = false;\n      if (newsResult && newsResult.length > 0) {\n        this.news = newsResult;\n        this.newsLoadFailed = false;\n      } else {\n        this.newsLoadFailed = true;\n      }\n    }\n  };\n\n  private openNewsHandler = (newsId: string) => async () => {\n    if (this.openNewsCallback) {\n      await this.openNewsCallback(newsId);\n    }\n  };\n\n  // 9.LOCAL METHODS -> RENDERS //\n\n  private renderNews = (news: NewsData): HTMLGxgCardElement | null => {\n    if (news.id && news.title) {\n      return (\n        <gxg-card\n          id={news.id}\n          key={news.id}\n          cardType=\"article\"\n          cardTitle={news.title}\n          icon=\"gx-test/test-results\"\n          iconColor=\"auto\"\n          actionable\n          onClick={this.openNewsHandler(news.id)}\n          titleSemibold\n          noHeaderBorder\n          class=\"news-article\"\n        >\n          {news.body ? <p>{news.body}</p> : null}\n        </gxg-card>\n      );\n    }\n    return null;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <gxg-card\n          class=\"section\"\n          cardType=\"section\"\n          cardTitle={this._componentLocale.recentNews.title}\n        >\n          {this.news.length > 0 ? (\n            <div\n              class=\"news-container\"\n              ref={el => (this.newsContainerEl = el as HTMLDivElement)}\n            >\n              {this.news?.map(singleNews => {\n                return this.renderNews(singleNews);\n              })}\n            </div>\n          ) : (\n            <div\n              class={{\n                \"gx-ide-message\": true,\n                \"gx-ide-message--hidden\": !this.newsLoadFailed\n              }}\n            >\n              <gx-ide-title alignment=\"center\">\n                {this._componentLocale.recentNews.newsNotFetched}\n              </gx-ide-title>\n              <gxg-button onClick={this.getNews}>\n                {this._componentLocale.recentNews.tryAgainButtonLabel}\n              </gxg-button>\n              <gxg-text\n                type=\"text-link\"\n                href=\"https://www.genexus.com/en/news\"\n                target=\"_blank\"\n              >\n                {this._componentLocale.recentNews.readThemOnline}\n              </gxg-text>\n            </div>\n          )}\n        </gxg-card>\n        <gxg-ide-loader\n          abortTime={8000}\n          container={this.el}\n          loaderTitle={this._componentLocale.loader.title}\n          description=\"Hang on please\"\n          ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n        ></gxg-ide-loader>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;;AAAA,MAAMA,IAAqB;;MCOdC,IAAe;;;;;;;;;;;;;;;;;QAiBlBC,KAAAC,kBAA0B;;;;;;mBAwCU;;EAE5C,mBAAAC,CAAoBC;IAClB,IAAIA,GAAS;MACXH,KAAKI,gBAAgBC,WAAW;MAChCL,KAAKM,kBAAkBD,WAAW;WAC7B;MACLE,YAAW;QACTP,KAAKI,gBAAgBC,WAAW;QAChCL,KAAKM,kBAAkBD,WAAW;AAAI,UACrCL,KAAKC;;;;;EAQZ,iBAAAO;IACER,KAAKS,GAAGC,MAAMC,YACZ,4BACA,GAAGX,KAAKC;;EAIZ,gBAAAW;IACEZ,KAAKG,UAAU;;;;;;EAWjB,MAAAU;IACE,OACEC,EAACC,GAAI,MACHD,EAAA;MAAKE,OAAO;QAAEC,WAAa;QAAM,sBAAsBjB,KAAKG;;OACzDH,KAAKkB,YACJJ,EAAA;MAAME,OAAM;OACVF,EAAA;MACEE,OAAM;MACNG,MAAMnB,KAAKkB;MACXE,OAAM;OAELpB,KAAKqB,eAGR,MACJP,EAAA;MAAME,OAAM;OACThB,KAAKqB,aACJP,EAAA;MAAcQ,WAAU;OAAUtB,KAAKqB,cACrC,MACHrB,KAAKuB,mBACJT,EAAA;MAAUU,WAAU;OAAUxB,KAAKuB,oBACjC,OAENT,EAAA;MAAKE,OAAM;OACRhB,KAAKyB,qBACJX,EAAA;MACEK,MAAK;MACLO,KAAKjB,KAAOT,KAAKI,kBAAkBK;OAElCT,KAAKyB,sBAEN,MACHzB,KAAK2B,uBACJb,EAAA;MACEK,MAAK;MACLO,KAAKjB,KACFT,KAAKM,oBAAoBG;OAG3BT,KAAK2B,wBAEN;;;;;;;;;;;;;;AC9IhB,MAAMC,IAAgB;;MCaTC,IAAe;;;IA2BlB7B,KAAA8B,eAAe;IACf9B,KAAA+B,sBAAsB;;;;QAqDtB/B,KAAAgC,sBAAsB;MAC5B,KACGhC,KAAK8B,gBACN9B,KAAKiC,KAAKC,SAAS,KACnBlC,KAAKmC,oBAAoBC,WACzB;QACApC,KAAKqC;QACLrC,KAAK8B,eAAe;;;IAIhB9B,KAAAqC,cAAc;MACpB,IAAIrC,KAAKmC,oBAAoBC,WAAW;QACtC,MAAMH,IAAOK,MAAMC,KACjBvC,KAAKmC,gBAAgBK,iBAAiB;QAExCP,EAAKQ,SAAQR;UACX1B,YAAW;YACT0B,EAAKS,UAAUC,IAAI;AAAU,cAC5B3C,KAAK+B;UACR/B,KAAK+B,uBAAuB;AAAE;;;IAK5B/B,KAAA4C,qBAAqB;MAC3B5C,KAAK6C,SAASC,iBAAiB,mBAAkB;QAC/C,IAAI9C,KAAKiC,KAAKC,WAAW,GAAG;UAC1BlC,KAAK+C,iBAAiB;eACjB;UACL/C,KAAK+C,iBAAiB;;;AAExB;IAGI/C,KAAAgD,UAAUC;MAChBjD,KAAK6C,SAASK,OAAO;MACrB,IAAIlD,KAAKmD,iBAAiB;QACxB,MAAMC,UAAmBpD,KAAKmD;QAC9BnD,KAAK6C,SAASK,OAAO;QACrB,IAAIE,KAAcA,EAAWlB,SAAS,GAAG;UACvClC,KAAKiC,OAAOmB;UACZpD,KAAK+C,iBAAiB;eACjB;UACL/C,KAAK+C,iBAAiB;;;;IAKpB/C,KAAAqD,kBAAmBC,KAAmBL;MAC5C,IAAIjD,KAAKuD,kBAAkB;cACnBvD,KAAKuD,iBAAiBD;;;;;IAMxBtD,KAAAwD,aAAcvB;MACpB,IAAIA,EAAKwB,MAAMxB,EAAKyB,OAAO;QACzB,OACE5C,EAAA;UACE2C,IAAIxB,EAAKwB;UACTE,KAAK1B,EAAKwB;UACVG,UAAS;UACTC,WAAW5B,EAAKyB;UAChBI,MAAK;UACLC,WAAU;UACVC,YAAU;UACVC,SAASjE,KAAKqD,gBAAgBpB,EAAKwB;UACnCS,eAAa;UACbC,gBAAc;UACdnD,OAAM;WAELiB,EAAKmC,OAAOtD,EAAA,WAAImB,EAAKmC,QAAY;;MAIxC,OAAO;AAAI;gBA3He;0BASF;;;;EAP1B,gBAAAC;IACErE,KAAKqC;;;;EAwBP,uBAAM7B;IACJR,KAAKsE,yBAAyBC,EAAOC,oBAAoBxE,KAAKS;;EAGhE,gBAAAG;IACEZ,KAAKgD;IACLhD,KAAK4C;;EAGP,kBAAA6B;IACEzE,KAAKgC;;;EA2FP,MAAAnB;;IACE,OACEC,EAACC,GAAI,MACHD,EAAA;MACEE,OAAM;MACN4C,UAAS;MACTC,WAAW7D,KAAKsE,iBAAiBI,WAAWhB;OAE3C1D,KAAKiC,KAAKC,SAAS,IAClBpB,EAAA;MACEE,OAAM;MACNU,KAAKjB,KAAOT,KAAKmC,kBAAkB1B;QAElCkE,IAAA3E,KAAKiC,UAAI,QAAA0C,WAAA,aAAAA,EAAEC,KAAIC,KACP7E,KAAKwD,WAAWqB,QAI3B/D,EAAA;MACEE,OAAO;QACL,kBAAkB;QAClB,2BAA2BhB,KAAK+C;;OAGlCjC,EAAA;MAAcQ,WAAU;OACrBtB,KAAKsE,iBAAiBI,WAAWI,iBAEpChE,EAAA;MAAYmD,SAASjE,KAAKgD;OACvBhD,KAAKsE,iBAAiBI,WAAWK,sBAEpCjE,EAAA;MACEK,MAAK;MACL6D,MAAK;MACLC,QAAO;OAENjF,KAAKsE,iBAAiBI,WAAWQ,mBAK1CpE,EAAA;MACEqE,WAAW;MACXlE,WAAWjB,KAAKS;MAChB2E,aAAapF,KAAKsE,iBAAiBe,OAAO3B;MAC1C4B,aAAY;MACZ5D,KAAKjB,KAAOT,KAAK6C,WAAWpC"}