@genexus/genexus-ide-ui 0.0.104 → 0.0.107

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/cjs/genexus-ide-ui.cjs.js +1 -3
  2. package/dist/cjs/genexus-ide-ui.cjs.js.map +1 -1
  3. package/dist/cjs/gx-ide-empty-state_2.cjs.entry.js +2 -1
  4. package/dist/cjs/gx-ide-empty-state_2.cjs.entry.js.map +1 -1
  5. package/dist/cjs/gx-ide-start-page.cjs.entry.js +3 -3
  6. package/dist/cjs/gx-ide-start-page.cjs.entry.js.map +1 -1
  7. package/dist/cjs/loader.cjs.js +1 -3
  8. package/dist/cjs/loader.cjs.js.map +1 -1
  9. package/dist/collection/components/start-page/start-page.js +3 -3
  10. package/dist/collection/components/start-page/start-page.js.map +1 -1
  11. package/dist/collection/global/global.js +0 -7
  12. package/dist/components/card.js +4 -2
  13. package/dist/components/card.js.map +1 -1
  14. package/dist/components/gx-ide-start-page.js +3 -3
  15. package/dist/components/gx-ide-start-page.js.map +1 -1
  16. package/dist/components/index.js +0 -12
  17. package/dist/components/index.js.map +1 -1
  18. package/dist/esm/genexus-ide-ui.js +1 -3
  19. package/dist/esm/genexus-ide-ui.js.map +1 -1
  20. package/dist/esm/gx-ide-empty-state_2.entry.js +2 -1
  21. package/dist/esm/gx-ide-empty-state_2.entry.js.map +1 -1
  22. package/dist/esm/gx-ide-start-page.entry.js +3 -3
  23. package/dist/esm/gx-ide-start-page.entry.js.map +1 -1
  24. package/dist/esm/loader.js +1 -3
  25. package/dist/esm/loader.js.map +1 -1
  26. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -6
  27. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js.map +1 -1
  28. package/dist/genexus-ide-ui/{p-5ed3968f.entry.js → p-3165370d.entry.js} +6 -5
  29. package/dist/genexus-ide-ui/p-3165370d.entry.js.map +1 -0
  30. package/dist/genexus-ide-ui/{p-5270ef52.entry.js → p-a6db9f7d.entry.js} +3 -2
  31. package/dist/genexus-ide-ui/p-a6db9f7d.entry.js.map +1 -0
  32. package/package.json +3 -3
  33. package/dist/cjs/app-globals-8aa6a58f.js +0 -15
  34. package/dist/cjs/app-globals-8aa6a58f.js.map +0 -1
  35. package/dist/esm/app-globals-95b9010a.js +0 -13
  36. package/dist/esm/app-globals-95b9010a.js.map +0 -1
  37. package/dist/genexus-ide-ui/p-348a7094.js +0 -12
  38. package/dist/genexus-ide-ui/p-348a7094.js.map +0 -1
  39. package/dist/genexus-ide-ui/p-5270ef52.entry.js.map +0 -1
  40. package/dist/genexus-ide-ui/p-5ed3968f.entry.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"names":["gxIdeEmptyStateCss","GxIdeEmptyState","this","transitionSpeed","watchDisplayHandler","display","primaryButtonLabel","primaryButtonEl","disabled","secondaryButtonLabel","secondaryButtonEl","setTimeout","componentWillLoad","el","style","setProperty","componentDidLoad","render","h","Host","class","container","stateIcon","type","color","stateTitle","alignment","stateDescription","textAlign","ref","escapeRegExp","str","replace","hiChar","text","filterValue","escapedFilterValue","re","RegExp","innerHTML","cardCss","GxgCard","constructor","hostRef","titleType","hasSlot","hasHeaderSlot","renderCardSubtitle","cardSubtitle","subtitleLink","href","target","elevation","background","padding","minHeight","height","maxWidth","noShadow","noBorder","undefined","noPaddingTop","cardTitle","noHeaderBorder","titleSemibold","subtitleIcon","cardType","icon","iconColor","subtitleColor","editableTitle","actionable","displayHeaderSlot","querySelector","headerSlot","role","card","mercury","state","wrapper","value","disableEdition","name"],"sources":["src/components/_helpers/empty-state/gx-ide-empty-state.scss?tag=gx-ide-empty-state&encapsulation=shadow","src/components/_helpers/empty-state/gx-ide-empty-state.tsx","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":[":host {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.container {\n max-width: 520px;\n margin: 0 auto;\n gap: var(--mer-spacing--xl);\n opacity: 0;\n transition: opacity var(--state-transition-speed);\n padding: var(--mer-spacing--md);\n\n .icon-wrapper {\n border: var(--mer-border__width--sm) dashed var(--mer-accent__primary);\n border-radius: 50%;\n min-width: 40px;\n min-height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &__main {\n gap: var(--mer-spacing--sm);\n }\n &__buttons {\n gap: var(--mer-spacing--xs);\n }\n &--visible {\n opacity: 1;\n }\n}\n.container,\n.container__main,\n.container__buttons {\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n","import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\n@Component({\n tag: \"gx-ide-empty-state\",\n styleUrl: \"gx-ide-empty-state.scss\",\n shadow: true\n})\nexport class GxIdeEmptyState {\n /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n // 1.OWN PROPERTIES //\n\n private transitionSpeed: number = 200;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeEmptyStateElement;\n private primaryButtonEl!: HTMLGxgButtonElement;\n private secondaryButtonEl!: HTMLGxgButtonElement;\n\n // 3.STATE() VARIABLES //\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n /**\n * The state icon\n */\n @Prop() readonly stateIcon?: string;\n\n /**\n * The state title\n */\n @Prop() readonly stateTitle!: string;\n\n /**\n * The state description\n */\n @Prop() readonly stateDescription?: string;\n\n /**\n * The button primary label\n */\n @Prop() readonly primaryButtonLabel?: string;\n\n /**\n * The button secondary label\n */\n @Prop() readonly secondaryButtonLabel?: string;\n\n /**\n * If true, it will display the content\n */\n @Prop({ mutable: true }) display: boolean = false;\n @Watch(\"display\")\n watchDisplayHandler(display: boolean) {\n if (display) {\n this.primaryButtonLabel && (this.primaryButtonEl.disabled = false);\n this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = false);\n } else {\n setTimeout(() => {\n this.primaryButtonLabel && (this.primaryButtonEl.disabled = true);\n this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = true);\n }, this.transitionSpeed);\n }\n }\n\n // 5.EVENTS (EMIT) //\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n componentWillLoad() {\n this.el.style.setProperty(\n \"--state-transition-speed\",\n `${this.transitionSpeed}ms`\n );\n }\n\n componentDidLoad() {\n this.display = true;\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <div class={{ \"container\": true, \"container--visible\": this.display }}>\n {this.stateIcon ? (\n <span class=\"icon-wrapper\">\n <gxg-icon\n class=\"icon\"\n type={this.stateIcon}\n color=\"mercury-primary\"\n >\n {this.stateTitle}\n </gxg-icon>\n </span>\n ) : null}\n <main class=\"container__main\">\n {this.stateTitle ? (\n <gx-ide-title alignment=\"center\">{this.stateTitle}</gx-ide-title>\n ) : null}\n {this.stateDescription ? (\n <gxg-text textAlign=\"center\">{this.stateDescription}</gxg-text>\n ) : null}\n </main>\n <div class=\"container__buttons\">\n {this.primaryButtonLabel ? (\n <gxg-button\n type=\"primary-text-only\"\n ref={el => (this.primaryButtonEl = el as HTMLGxgButtonElement)}\n >\n {this.primaryButtonLabel}\n </gxg-button>\n ) : null}\n {this.secondaryButtonLabel ? (\n <gxg-button\n type=\"secondary-text-only\"\n ref={el =>\n (this.secondaryButtonEl = el as HTMLGxgButtonElement)\n }\n >\n {this.secondaryButtonLabel}\n </gxg-button>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n","/* 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"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genexus/genexus-ide-ui",
3
3
  "license": "Apache-2.0",
4
- "version": "0.0.104",
4
+ "version": "0.0.107",
5
5
  "description": "GeneXus IDE UI components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",
@@ -36,10 +36,10 @@
36
36
  "@types/react": "^18.2.8"
37
37
  },
38
38
  "peerDependencies": {
39
- "@genexus/gemini": "*0.2.109"
39
+ "@genexus/gemini": "*0.2.110"
40
40
  },
41
41
  "devDependencies": {
42
- "@genexus/gemini": "*0.2.109",
42
+ "@genexus/gemini": "*0.2.110",
43
43
  "@stencil-community/eslint-plugin": "^0.6.0",
44
44
  "@stencil/core": "~4.9.0",
45
45
  "@stencil/sass": "~1.4.0",
@@ -1,15 +0,0 @@
1
- 'use strict';
2
-
3
- function appGlobalScript () {
4
- // or export default async function()
5
- const head = document.head || document.getElementsByTagName("head")[0];
6
- const chStyle = document.createElement("ch-style");
7
- chStyle.setAttribute("href", "/gemini/ch-styles.css");
8
- head.appendChild(chStyle);
9
- }
10
-
11
- const globalScripts = appGlobalScript;
12
-
13
- exports.globalScripts = globalScripts;
14
-
15
- //# sourceMappingURL=app-globals-8aa6a58f.js.map
@@ -1 +0,0 @@
1
- {"file":"app-globals-8aa6a58f.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;;ACLY,MAAC,aAAa,GAAG;;;;","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}
@@ -1,13 +0,0 @@
1
- function appGlobalScript () {
2
- // or export default async function()
3
- const head = document.head || document.getElementsByTagName("head")[0];
4
- const chStyle = document.createElement("ch-style");
5
- chStyle.setAttribute("href", "/gemini/ch-styles.css");
6
- head.appendChild(chStyle);
7
- }
8
-
9
- const globalScripts = appGlobalScript;
10
-
11
- export { globalScripts as g };
12
-
13
- //# sourceMappingURL=app-globals-95b9010a.js.map
@@ -1 +0,0 @@
1
- {"file":"app-globals-95b9010a.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;;ACLY,MAAC,aAAa,GAAG;;;;","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}
@@ -1,12 +0,0 @@
1
- function appGlobalScript() {
2
- // or export default async function()
3
- const c = document.head || document.getElementsByTagName("head")[0];
4
- const t = document.createElement("ch-style");
5
- t.setAttribute("href", "/gemini/ch-styles.css");
6
- c.appendChild(t);
7
- }
8
-
9
- const c = appGlobalScript;
10
-
11
- export { c as g };
12
- //# sourceMappingURL=p-348a7094.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["appGlobalScript","head","document","getElementsByTagName","chStyle","createElement","setAttribute","appendChild","globalScripts"],"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"],"mappings":"AAAe,SAAAA;;EAEX,MAAMC,IAAOC,SAASD,QAAQC,SAASC,qBAAqB,QAAQ;EACpE,MAAMC,IAAUF,SAASG,cAAc;EACvCD,EAAQE,aAAa,QAAQ;EAC7BL,EAAKM,YAAYH;AACrB;;ACLY,MAACI,IAAgBR"}
@@ -1 +0,0 @@
1
- {"version":3,"names":["gxIdeEmptyStateCss","GxIdeEmptyState","this","transitionSpeed","watchDisplayHandler","display","primaryButtonLabel","primaryButtonEl","disabled","secondaryButtonLabel","secondaryButtonEl","setTimeout","componentWillLoad","el","style","setProperty","componentDidLoad","render","h","Host","class","container","stateIcon","type","color","stateTitle","alignment","stateDescription","textAlign","ref","escapeRegExp","str","replace","hiChar","text","filterValue","escapedFilterValue","re","RegExp","innerHTML","cardCss","GxgCard","constructor","hostRef","titleType","hasSlot","hasHeaderSlot","renderCardSubtitle","cardSubtitle","subtitleLink","href","target","elevation","background","padding","minHeight","height","maxWidth","noShadow","noBorder","undefined","noPaddingTop","cardTitle","noHeaderBorder","titleSemibold","subtitleIcon","cardType","icon","iconColor","subtitleColor","editableTitle","actionable","querySelector","headerSlot","role","card","mercury","state","wrapper","value","disableEdition","name"],"sources":["src/components/_helpers/empty-state/gx-ide-empty-state.scss?tag=gx-ide-empty-state&encapsulation=shadow","src/components/_helpers/empty-state/gx-ide-empty-state.tsx","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":[":host {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.container {\n max-width: 520px;\n margin: 0 auto;\n gap: var(--mer-spacing--xl);\n opacity: 0;\n transition: opacity var(--state-transition-speed);\n padding: var(--mer-spacing--md);\n\n .icon-wrapper {\n border: var(--mer-border__width--sm) dashed var(--mer-accent__primary);\n border-radius: 50%;\n min-width: 40px;\n min-height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &__main {\n gap: var(--mer-spacing--sm);\n }\n &__buttons {\n gap: var(--mer-spacing--xs);\n }\n &--visible {\n opacity: 1;\n }\n}\n.container,\n.container__main,\n.container__buttons {\n display: flex;\n align-items: center;\n flex-direction: column;\n}\n","import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\n@Component({\n tag: \"gx-ide-empty-state\",\n styleUrl: \"gx-ide-empty-state.scss\",\n shadow: true\n})\nexport class GxIdeEmptyState {\n /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n // 1.OWN PROPERTIES //\n\n private transitionSpeed: number = 200;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeEmptyStateElement;\n private primaryButtonEl!: HTMLGxgButtonElement;\n private secondaryButtonEl!: HTMLGxgButtonElement;\n\n // 3.STATE() VARIABLES //\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n /**\n * The state icon\n */\n @Prop() readonly stateIcon?: string;\n\n /**\n * The state title\n */\n @Prop() readonly stateTitle!: string;\n\n /**\n * The state description\n */\n @Prop() readonly stateDescription?: string;\n\n /**\n * The button primary label\n */\n @Prop() readonly primaryButtonLabel?: string;\n\n /**\n * The button secondary label\n */\n @Prop() readonly secondaryButtonLabel?: string;\n\n /**\n * If true, it will display the content\n */\n @Prop({ mutable: true }) display: boolean = false;\n @Watch(\"display\")\n watchDisplayHandler(display: boolean) {\n if (display) {\n this.primaryButtonLabel && (this.primaryButtonEl.disabled = false);\n this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = false);\n } else {\n setTimeout(() => {\n this.primaryButtonLabel && (this.primaryButtonEl.disabled = true);\n this.secondaryButtonLabel && (this.secondaryButtonEl.disabled = true);\n }, this.transitionSpeed);\n }\n }\n\n // 5.EVENTS (EMIT) //\n\n // 6.COMPONENT LIFECYCLE METHODS //\n\n componentWillLoad() {\n this.el.style.setProperty(\n \"--state-transition-speed\",\n `${this.transitionSpeed}ms`\n );\n }\n\n componentDidLoad() {\n this.display = true;\n }\n\n // 7.LISTENERS //\n\n // 8.PUBLIC METHODS API //\n\n // 9.LOCAL METHODS //\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host>\n <div class={{ \"container\": true, \"container--visible\": this.display }}>\n {this.stateIcon ? (\n <span class=\"icon-wrapper\">\n <gxg-icon\n class=\"icon\"\n type={this.stateIcon}\n color=\"mercury-primary\"\n >\n {this.stateTitle}\n </gxg-icon>\n </span>\n ) : null}\n <main class=\"container__main\">\n {this.stateTitle ? (\n <gx-ide-title alignment=\"center\">{this.stateTitle}</gx-ide-title>\n ) : null}\n {this.stateDescription ? (\n <gxg-text textAlign=\"center\">{this.stateDescription}</gxg-text>\n ) : null}\n </main>\n <div class=\"container__buttons\">\n {this.primaryButtonLabel ? (\n <gxg-button\n type=\"primary-text-only\"\n ref={el => (this.primaryButtonEl = el as HTMLGxgButtonElement)}\n >\n {this.primaryButtonLabel}\n </gxg-button>\n ) : null}\n {this.secondaryButtonLabel ? (\n <gxg-button\n type=\"secondary-text-only\"\n ref={el =>\n (this.secondaryButtonEl = el as HTMLGxgButtonElement)\n }\n >\n {this.secondaryButtonLabel}\n </gxg-button>\n ) : null}\n </div>\n </div>\n </Host>\n );\n }\n}\n","/* 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"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"names":["startPageCss","GxIdeStartPage","this","getNewsCallbackRecentNews","async","Promise","resolve","getNewsCallback","newsResult","kbClickHandler","e","kbId","target","id","openKbCallback","searchKbsInputHandler","kbsFilterValue","detail","toLowerCase","renderKb","kb","name","includes","formattedDate","formatDate","lastOpenedDate","subtitle","_componentLocale","recentKbs","lastOpened","h","key","cardType","cardTitle","icon","iconColor","cardSubtitle","actionable","filterValue","onClick","renderHomeTabContent","class","title","kbs","length","_a","map","slot","placeholder","onInput","stateIcon","stateTitle","stateDescription","openNewsCallback","componentWillLoad","Locale","getComponentStrings","el","componentDidRender","renderedFirstTime","componentDidRenderFirstTime","emit","componentName","render","Host","rendered"],"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"],"mappings":";;;;;;AAAA,MAAMA,IAAe;;MCsBRC,IAAc;;;;IA+EjBC,KAAAC,4BAA4BC,YAC3B,IAAIC,SAAQD,MAAME;MACvB,IAAIJ,KAAKK,iBAAiB;QACxB,MAAMC,UAAmBN,KAAKK;QAC9BD,EAAQE;;;;;;QAoBNN,KAAAO,iBAAiBL,MAAOM;MAC9B,MAAMC,IAAQD,EAAEE,OAAuBC;MACvC,IAAIX,KAAKY,gBAAgB;cACjBZ,KAAKY,eAAeH;;;IAItBT,KAAAa,wBAAyBL;MAC/BR,KAAKc,iBAAiBN,EAAEO,OAAOC;AAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoCtChB,KAAAiB,WAAYC;MAClB,IACEA,EAAGP,MACHO,EAAGC,QACHD,EAAGC,KAAKH,cAAcI,SAASpB,KAAKc,iBACpC;QACA,MAAMO,IAAgBC,EAAWJ,EAAGK,gBAAgB;QACpD,MAAMC,IAAWH,IACb,GAAGrB,KAAKyB,iBAAiBC,UAAUC,cAAcN,MACjD;QACJ,OACEO,EAAA;UACEjB,IAAIO,EAAGP;UACPkB,KAAKX,EAAGP;UACRmB,UAAS;UACTC,WAAWb,EAAGC;UACda,MAAK;UACLC,WAAU;UACVC,cAAcV;UACdW,YAAU;UACVC,aAAapC,KAAKc;UAClBuB,SAASrC,KAAKO;;;MAIpB,OAAO;AAAI;IAGLP,KAAAsC,uBAAuB;;MAC7B,OACEV,EAAA;QAAKW,OAAM;SACTX,EAAA;QACEW,OAAM;QACNR,WAAW/B,KAAKyB,iBAAiBC,UAAUc;SAE1CxC,KAAKyC,IAAIC,SAAS,IAAC,EAEhBd,EAAA;QAAKW,OAAM;UACRI,IAAA3C,KAAKyC,SAAG,QAAAE,WAAA,aAAAA,EAAEC,KAAI1B,KACNlB,KAAKiB,SAASC,OAGzBU,EAAA;QACEiB,MAAK;QACLC,aAAY;QACZC,SAAS/C,KAAKa;aAIlBe,EAAA;QACEW,OAAM;QACNS,WAAU;QACVC,YAAW;QACXC,kBAAiB;WAKvBtB,EAAA;QACEW,OAAM;QACNlC,iBAAiBL,KAAKC;QACtBkD,kBAAkBnD,KAAKmD;;AAErB;0BAlLgB;6BAKG;;;;;;;;EAsC7B,uBAAMC;IACJpD,KAAKyB,yBAAyB4B,EAAOC,oBAAoBtD,KAAKuD;;EAYhE,kBAAAC;IACE,KAAKxD,KAAKyD,mBAAmB;MAC3BzD,KAAK0D,4BAA4BC,KAC/B3D,KAAKyB,iBAAiBmC;MAExB5D,KAAKyD,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuK7B,MAAAI;IACE,OACEjC,EAACkC,GAAI;MAACvB,OAAO;QAAEwB,UAAU/D,KAAKyD;;OAE3BzD,KAAKsC"}