@genexus/genexus-ide-ui 0.0.104 → 0.0.106

package/dist/components/card.js

@@ -68,6 +68,7 @@ const GxgCard = /*@__PURE__*/ proxyCustomElement(class GxgCard extends HTMLEleme
         this.subtitleColor = "auto";
         this.editableTitle = false;
         this.actionable = false;
+        this.displayHeaderSlot = false;
     }
     get el() { return this; }
     componentWillLoad() {
@@ -82,7 +83,7 @@ const GxgCard = /*@__PURE__*/ proxyCustomElement(class GxgCard extends HTMLEleme
             this.hasSlot = true;
         }
         const headerSlot = this.el.querySelector("[slot='header']");
-        if (headerSlot) {
+        if (headerSlot || this.displayHeaderSlot) {
             this.hasHeaderSlot = true;
         }
     }
@@ -141,7 +142,8 @@ const GxgCard = /*@__PURE__*/ proxyCustomElement(class GxgCard extends HTMLEleme
         "iconColor": [1, "icon-color"],
         "subtitleColor": [1, "subtitle-color"],
         "editableTitle": [4, "editable-title"],
-        "actionable": [4]
+        "actionable": [4],
+        "displayHeaderSlot": [4, "display-header-slot"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/card.js.map

@@ -1 +1 @@
-{"file":"card.js","mappings":"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","names":[],"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"],"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"],"version":3}
+{"file":"card.js","mappings":"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","names":[],"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"],"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        this.displayHeaderSlot = 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 || this.displayHeaderSlot) {\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            \"displayHeaderSlot\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"A way to force header slot evaluation.\"\n                },\n                \"attribute\": \"display-header-slot\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=card.js.map\n"],"version":3}

package/dist/components/gx-ide-start-page.js

@@ -88,9 +88,9 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
             return null;
         };
         this.renderHomeTabContent = () => {
-            var _a;
-            return (h("div", { class: "layout layout--two-cols layout--space-above" }, h("gxg-card", { class: "section", cardTitle: this._componentLocale.recentKbs.title }, this.kbs.length > 0 ? ([
-                h("div", { class: "kbs-container" }, (_a = this.kbs) === null || _a === void 0 ? void 0 : _a.map(kb => {
+            var _a, _b;
+            return (h("div", { class: "layout layout--two-cols layout--space-above" }, h("gxg-card", { class: "section", cardTitle: this._componentLocale.recentKbs.title, displayHeaderSlot: true }, ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ([
+                h("div", { class: "kbs-container" }, (_b = this.kbs) === null || _b === void 0 ? void 0 : _b.map(kb => {
                     return this.renderKb(kb);
                 })),
                 h("gxg-form-text", { slot: "header", placeholder: "Search KBs by name", onInput: this.searchKbsInputHandler })

package/dist/components/gx-ide-start-page.js.map

@@ -1 +1 @@
-{"file":"gx-ide-start-page.js","mappings":"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","names":["GxIdeStartPage"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.tsx"],"sourcesContent":["@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: auto;\n  opacity: 0;\n  transition: var(--gx-ide-show-component-delay) opacity;\n}\n:host(.rendered) {\n  opacity: 1;\n}\ngxg-tabs {\n  background-color: transparent;\n  box-shadow: none;\n  height: 100% !important;\n  overflow: auto;\n}\n.kbs-empty-state {\n  height: 100%;\n}\n.layout {\n  height: 100%;\n  overflow: auto;\n  gxg-card {\n    height: 100%;\n    overflow: auto;\n  }\n}\n.kbs-container,\n.news-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-articles-gap);\n}\n.news-container {\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n}\ngxg-card.section {\n  border-bottom: 2px solid var(--gray-00);\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\n@Component({\n  tag: \"gx-ide-start-page\",\n  styleUrl: \"start-page.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\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: HTMLGxIdeStartPageElement;\n  // private recentNewsEl!: HTMLGxgCardElement;\n\n  // 3.STATE() VARIABLES //\n\n  /*\n   * The filter value to search for kbs\n   */\n  @State() kbsFilterValue = \"\";\n\n  /**\n   * True if the component has been rendered for the first time.\n   */\n  @State() renderedFirstTime = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * A temporary array of news for testing purposes\n   */\n  @Prop() readonly news: NewsData[];\n\n  /**\n   * Ann array of the user's KB's\n   */\n  @Prop() readonly kbs: RecentKBData[];\n\n  /**\n   * Callback invoked to open a knowledge base when the user clicks on a KB card.\n   */\n  @Prop() readonly openKbCallback: OpenKbCallback;\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  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  private getNewsCallbackRecentNews = async (): Promise<NewsData[]> => {\n    return new Promise(async resolve => {\n      if (this.getNewsCallback) {\n        const newsResult = await this.getNewsCallback();\n        resolve(newsResult);\n      }\n    });\n  };\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private kbClickHandler = async (e: MouseEvent) => {\n    const kbId = (e.target as HTMLElement).id;\n    if (this.openKbCallback) {\n      await this.openKbCallback(kbId);\n    }\n  };\n\n  private searchKbsInputHandler = (e: CustomEvent<string>) => {\n    this.kbsFilterValue = e.detail.toLowerCase();\n  };\n\n  // private NewsClickHandler = async (e: MouseEvent) => {\n  //   const newsId = (e.target as HTMLElement).id;\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.NewsClickHandler}\n  //         titleSemibold\n  //         noHeaderBorder\n  //       >\n  //         {news.body ? <p>{news.body}</p> : null}\n  //       </gxg-card>\n  //     );\n  //   }\n  //   return null;\n  // };\n\n  // 9.LOCAL METHODS -> RENDERS //\n\n  private renderKb = (kb: RecentKBData): HTMLGxgCardElement | null => {\n    if (\n      kb.id &&\n      kb.name &&\n      kb.name.toLowerCase().includes(this.kbsFilterValue)\n    ) {\n      const formattedDate = formatDate(kb.lastOpenedDate, \"pretty\");\n      const subtitle = formattedDate\n        ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`\n        : null;\n      return (\n        <gxg-card\n          id={kb.id}\n          key={kb.id}\n          cardType=\"article\"\n          cardTitle={kb.name}\n          icon=\"general/knowledge-base\"\n          iconColor=\"auto\"\n          cardSubtitle={subtitle}\n          actionable\n          filterValue={this.kbsFilterValue}\n          onClick={this.kbClickHandler}\n        ></gxg-card>\n      );\n    }\n    return null;\n  };\n\n  private renderHomeTabContent = (): HTMLElement => {\n    return (\n      <div class=\"layout layout--two-cols layout--space-above\">\n        <gxg-card\n          class=\"section\"\n          cardTitle={this._componentLocale.recentKbs.title}\n        >\n          {this.kbs.length > 0 ? (\n            [\n              <div class=\"kbs-container\">\n                {this.kbs?.map(kb => {\n                  return this.renderKb(kb);\n                })}\n              </div>,\n              <gxg-form-text\n                slot=\"header\"\n                placeholder=\"Search KBs by name\"\n                onInput={this.searchKbsInputHandler as any}\n              ></gxg-form-text>\n            ]\n          ) : (\n            <gx-ide-empty-state\n              class=\"kbs-empty-state\"\n              stateIcon=\"mercury/folder\"\n              stateTitle=\" You haven't created any Knowledge Base\"\n              stateDescription=\"Once you have created your first knowledge base it will appear on this \n          window.\"\n            ></gx-ide-empty-state>\n          )}\n        </gxg-card>\n        <gx-ide-recent-news\n          class=\"section\"\n          getNewsCallback={this.getNewsCallbackRecentNews}\n          openNewsCallback={this.openNewsCallback}\n        ></gx-ide-recent-news>\n      </div>\n    );\n  };\n\n  // private renderTabs = (): HTMLGxgTabsElement => {\n  //   return (\n  //     <gxg-tabs height=\"auto\" minWidth=\"100%\" no-border>\n  //       <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.home}\n  //           tab=\"home\"\n  //           is-selected\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.learn}\n  //           tab=\"learn\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.samples}\n  //           tab=\"samples\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.marketplace}\n  //           tab=\"marketplace\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.updates}\n  //           tab=\"updates\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //       </gxg-tab-bar>\n  //       <gxg-tab tab=\"home\">{this.renderHomeTabContent()}</gxg-tab>\n  //       <gxg-tab tab=\"learn\"></gxg-tab>\n  //       <gxg-tab tab=\"samples\"></gxg-tab>\n  //       <gxg-tab tab=\"marketplace\"></gxg-tab>\n  //       <gxg-tab tab=\"updates\"></gxg-tab>\n  //     </gxg-tabs>\n  //   );\n  // };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class={{ rendered: this.renderedFirstTime }}>\n        {/* this.renderTabs()*/}\n        {this.renderHomeTabContent()}\n      </Host>\n    );\n  }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n  id: string;\n  name: string;\n  lastOpenedDate?: Date;\n};\nexport type NewsData = {\n  id: string;\n  title: string;\n  body: string;\n};\n"],"version":3}
+{"file":"gx-ide-start-page.js","mappings":"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","names":["GxIdeStartPage"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.tsx"],"sourcesContent":["@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: auto;\n  opacity: 0;\n  transition: var(--gx-ide-show-component-delay) opacity;\n}\n:host(.rendered) {\n  opacity: 1;\n}\ngxg-tabs {\n  background-color: transparent;\n  box-shadow: none;\n  height: 100% !important;\n  overflow: auto;\n}\n.kbs-empty-state {\n  height: 100%;\n}\n.layout {\n  height: 100%;\n  overflow: auto;\n  gxg-card {\n    height: 100%;\n    overflow: auto;\n  }\n}\n.kbs-container,\n.news-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-articles-gap);\n}\n.news-container {\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n}\ngxg-card.section {\n  border-bottom: 2px solid var(--gray-00);\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\n@Component({\n  tag: \"gx-ide-start-page\",\n  styleUrl: \"start-page.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\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: HTMLGxIdeStartPageElement;\n  // private recentNewsEl!: HTMLGxgCardElement;\n\n  // 3.STATE() VARIABLES //\n\n  /*\n   * The filter value to search for kbs\n   */\n  @State() kbsFilterValue = \"\";\n\n  /**\n   * True if the component has been rendered for the first time.\n   */\n  @State() renderedFirstTime = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * A temporary array of news for testing purposes\n   */\n  @Prop() readonly news: NewsData[];\n\n  /**\n   * Ann array of the user's KB's\n   */\n  @Prop() readonly kbs: RecentKBData[];\n\n  /**\n   * Callback invoked to open a knowledge base when the user clicks on a KB card.\n   */\n  @Prop() readonly openKbCallback: OpenKbCallback;\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  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  private getNewsCallbackRecentNews = async (): Promise<NewsData[]> => {\n    return new Promise(async resolve => {\n      if (this.getNewsCallback) {\n        const newsResult = await this.getNewsCallback();\n        resolve(newsResult);\n      }\n    });\n  };\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private kbClickHandler = async (e: MouseEvent) => {\n    const kbId = (e.target as HTMLElement).id;\n    if (this.openKbCallback) {\n      await this.openKbCallback(kbId);\n    }\n  };\n\n  private searchKbsInputHandler = (e: CustomEvent<string>) => {\n    this.kbsFilterValue = e.detail.toLowerCase();\n  };\n\n  // private NewsClickHandler = async (e: MouseEvent) => {\n  //   const newsId = (e.target as HTMLElement).id;\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.NewsClickHandler}\n  //         titleSemibold\n  //         noHeaderBorder\n  //       >\n  //         {news.body ? <p>{news.body}</p> : null}\n  //       </gxg-card>\n  //     );\n  //   }\n  //   return null;\n  // };\n\n  // 9.LOCAL METHODS -> RENDERS //\n\n  private renderKb = (kb: RecentKBData): HTMLGxgCardElement | null => {\n    if (\n      kb.id &&\n      kb.name &&\n      kb.name.toLowerCase().includes(this.kbsFilterValue)\n    ) {\n      const formattedDate = formatDate(kb.lastOpenedDate, \"pretty\");\n      const subtitle = formattedDate\n        ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`\n        : null;\n      return (\n        <gxg-card\n          id={kb.id}\n          key={kb.id}\n          cardType=\"article\"\n          cardTitle={kb.name}\n          icon=\"general/knowledge-base\"\n          iconColor=\"auto\"\n          cardSubtitle={subtitle}\n          actionable\n          filterValue={this.kbsFilterValue}\n          onClick={this.kbClickHandler}\n        ></gxg-card>\n      );\n    }\n    return null;\n  };\n\n  private renderHomeTabContent = (): HTMLElement => {\n    return (\n      <div class=\"layout layout--two-cols layout--space-above\">\n        <gxg-card\n          class=\"section\"\n          cardTitle={this._componentLocale.recentKbs.title}\n          displayHeaderSlot\n        >\n          {this.kbs?.length > 0 ? (\n            [\n              <div class=\"kbs-container\">\n                {this.kbs?.map(kb => {\n                  return this.renderKb(kb);\n                })}\n              </div>,\n              <gxg-form-text\n                slot=\"header\"\n                placeholder=\"Search KBs by name\"\n                onInput={this.searchKbsInputHandler as any}\n              ></gxg-form-text>\n            ]\n          ) : (\n            <gx-ide-empty-state\n              class=\"kbs-empty-state\"\n              stateIcon=\"mercury/folder\"\n              stateTitle=\" You haven't created any Knowledge Base\"\n              stateDescription=\"Once you have created your first knowledge base it will appear on this \n          window.\"\n            ></gx-ide-empty-state>\n          )}\n        </gxg-card>\n        <gx-ide-recent-news\n          class=\"section\"\n          getNewsCallback={this.getNewsCallbackRecentNews}\n          openNewsCallback={this.openNewsCallback}\n        ></gx-ide-recent-news>\n      </div>\n    );\n  };\n\n  // private renderTabs = (): HTMLGxgTabsElement => {\n  //   return (\n  //     <gxg-tabs height=\"auto\" minWidth=\"100%\" no-border>\n  //       <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.home}\n  //           tab=\"home\"\n  //           is-selected\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.learn}\n  //           tab=\"learn\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.samples}\n  //           tab=\"samples\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.marketplace}\n  //           tab=\"marketplace\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.updates}\n  //           tab=\"updates\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //       </gxg-tab-bar>\n  //       <gxg-tab tab=\"home\">{this.renderHomeTabContent()}</gxg-tab>\n  //       <gxg-tab tab=\"learn\"></gxg-tab>\n  //       <gxg-tab tab=\"samples\"></gxg-tab>\n  //       <gxg-tab tab=\"marketplace\"></gxg-tab>\n  //       <gxg-tab tab=\"updates\"></gxg-tab>\n  //     </gxg-tabs>\n  //   );\n  // };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class={{ rendered: this.renderedFirstTime }}>\n        {/* this.renderTabs()*/}\n        {this.renderHomeTabContent()}\n      </Host>\n    );\n  }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n  id: string;\n  name: string;\n  lastOpenedDate?: Date;\n};\nexport type NewsData = {\n  id: string;\n  title: string;\n  body: string;\n};\n"],"version":3}

package/dist/components/index.js

@@ -1,15 +1,15 @@
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 
-function appGlobalScript () {
-    // or export default async function()
-    const head = document.head || document.getElementsByTagName("head")[0];
-    const chStyle = document.createElement("ch-style");
-    chStyle.setAttribute("href", "/gemini/ch-styles.css");
-    head.appendChild(chStyle);
+function geminiGlobal () {
+  // or export default async function()
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const chStyle = document.createElement("ch-style");
+  document.createElement("style");
+  chStyle.innerText =
+    "::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width);cursor:initial}::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius);}::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}::-webkit-scrollbar-corner{background:rgba(0,0,0,0)}";
+  head.appendChild(chStyle);
 }
 
-const globalScripts = appGlobalScript;
-
-globalScripts();
+geminiGlobal();
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;AAAe,wBAAQ,IAAI;AAC3B;AACA,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC;AACzE,IAAI,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU;AACrD,IAAI,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,uBAAuB;AACxD,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO;AAC5B;;ACLO,MAAM,aAAa,GAAG,eAAe;;","names":[],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["export default function () {\n  // or export default async function()\n  const head = document.head || document.getElementsByTagName(\"head\")[0];\n  const chStyle = document.createElement(\"ch-style\");\n  chStyle.setAttribute(\"href\", \"/gemini/ch-styles.css\");\n  head.appendChild(chStyle);\n}\n","import appGlobalScript from '/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"version":3}
+{"file":"index.js","mappings":";;AAAe,qBAAQ,IAAI;AAC3B;AACA,EAAE,MAAM,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACzE,EAAE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACrD,EAAgB,QAAQ,CAAC,aAAa,CAAC,OAAO,EAAE;AAChD,EAAE,OAAO,CAAC,SAAS;AACnB,IAAI,qhBAAqhB,CAAC;AAC1hB,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAC5B;;ACPA,YAAY,EAAE","names":[],"sources":["node_modules/@genexus/gemini/dist/collection/globals/global.js","src/global/global.js"],"sourcesContent":["export default function () {\n  // or export default async function()\n  const head = document.head || document.getElementsByTagName(\"head\")[0];\n  const chStyle = document.createElement(\"ch-style\");\n  const style = document.createElement(\"style\");\n  chStyle.innerText =\n    \"::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width);cursor:initial}::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius);}::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}::-webkit-scrollbar-corner{background:rgba(0,0,0,0)}\";\n  head.appendChild(chStyle);\n}\n","import geminiGlobal from \"@genexus/gemini/dist/collection/globals/global\";\ngeminiGlobal();\n"],"version":3}