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

@genexus/genexus-ide-ui 0.0.99 → 0.0.100

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

Files changed (183) hide show

package/dist/genexus-ide-ui/p-85639fa5.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["tabCss","GxgTab","constructor","hostRef","this","tab","undefined","noPadding","flexContainer","flex","overflowAuto","flexDirection","isSelected","reduced","render","h","Host","class","open","large","state","mercury","container","part","tabBarCss","GxgTabBar","parts","buttonMenu","lastAddedOrRemovedTabBarButtonWidth","evaluateMenuButtonsTabIndex","menuCollapsed","disableTabIndex","enableTabIndex","setFocus","tabBarMenuToggleButton","focus","menuButtons","el","querySelectorAll","length","attachExportParts","getAttribute","exportPartsResult","exportParts","exportparts","allButtons","forEach","button","removeAttribute","setAttribute","hidden","appendedButtons","tabBarMenuHeight","tabBarMenuWidth","tabBarMenuCollapsed","tabBarMenuPosition","displayBorder","scrollable","stacked","rtl","detectClickOutsideTabBarMenu","bind","openMenu","event","stopPropagation","document","addEventListener","tabBarMenuCollapsedHandler","appendTabButtons","numberOfButtons","i","appendTabItemsToMenu","tabActivatedHandler","PrevOrNextTabHandler","e","tabEnabledButtons","allTabButtons","tabButton","disabled","push","arrowPressed","detail","targetButton","target","clickedButtonIndex","findIndex","destinationTab","tabButtonClick","gxgTabsPosition","parentElement","position","buttonHeight","children","item","clientHeight","sizeReference","offsetWidth","offsetHeight","tabBarWidth","tabBar","tabButtons","lastTabButton","classList","add","menuFirstButton","remove","componentWillLoad","componentDidLoad","dirHtml","getElementsByTagName","dirBody","myObserver","ResizeObserver","entries","observe","setIndexToTabButtons","index","toString","renderTabBarMenu","onClick","type","icon","ref","x","y","tabBarMenuClientRect","tabBarMenu","getBoundingClientRect","left","right","top","bottom","disconnectedCallback","removeEventListener","nav","name","style","tabButtonCss","GxgTabButton","tabLabel","borderAbove","stackedStyle","buttonClickHandler","isSelectedHandler","newValue","hiddenHandler","parseInt","tabActivated","emit","buttonKeyDownHandler","key","PrevOrNextTab","originTab","preventDefault","printIcon","size","color","onKeyDown","delegatesFocus","tabsCss","GxgTabs","evaluateStacked","querySelector","evaluateReduced","gxgTabButtons","Array","from","gxgTabs","getTab","activateTab","activeTab","tabs","height","maxHeight","minWidth","tabBarBorder","noBorder","buttonsBorderAbove","noBackground","watchActiveTabHandler","updateActiveChildren","configureTabs","tagName","child","setActiveTab","tabEl","setFirstActiveTab","allTabs","firstEnabledTab","find"],"sources":["node_modules/@genexus/gemini/dist/collection/components/tab/tab.css?tag=gxg-tab&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/tab/tab.js","node_modules/@genexus/gemini/dist/collection/components/tab-bar/tab-bar.css?tag=gxg-tab-bar&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/tab-bar/tab-bar.js","node_modules/@genexus/gemini/dist/collection/components/tab-button/tab-button.css?tag=gxg-tab-button&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/tab-button/tab-button.js","node_modules/@genexus/gemini/dist/collection/components/tabs/tabs.css?tag=gxg-tabs&encapsulation=shadow","node_modules/@genexus/gemini/dist/collection/components/tabs/tabs.js"],"sourcesContent":[":root {\n --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--error);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--warning);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--success);\n display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--gxg-label-font-weight);\n font-size: var(--gxg-label-font-size);\n color: var(--gxg-label-color);\n text-align: center;\n line-height: 1.455em;\n display: flex;\n align-items: center;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host {\n height: 100%;\n overflow-y: auto;\n display: block;\n}\n:host .container {\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 /* Track */\n /* Handle */\n /* Handle on hover */\n font-size: var(--gxg-tab-font-size);\n color: var(--gxg-tab-color);\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding-block-start: var(--gxg-tab-vertical-padding);\n padding-inline-end: var(--gxg-tab-horizontal-padding);\n padding-block-end: var(--gxg-tab-vertical-padding);\n padding-inline-start: var(--gxg-tab-horizontal-padding);\n overflow-y: auto;\n background-color: var(--gxg-tab-background-color);\n}\n:host .container::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n:host .container::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n:host .container::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n:host .container::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n:host .container::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n:host .container--reduced {\n font-size: var(--gxg-tab-font-size--reduced);\n padding-block-start: var(--gxg-tab-vertical-padding--reduced);\n padding-inline-end: var(--gxg-tab-horizontal-padding--reduced);\n padding-block-end: var(--gxg-tab-vertical-padding--reduced);\n padding-inline-start: var(--gxg-tab-horizontal-padding--reduced);\n}\n\n:host(.not-selected) {\n display: none;\n}\n\n:host(.no-padding) .container {\n padding: 0;\n}\n\n:host(.flex) {\n display: flex;\n}\n\n:host(.overflow-auto) {\n overflow: auto;\n}\n\n.container--flex {\n display: flex;\n}\n.container--flex.flex-column {\n flex-direction: column;\n}\n.container--flex.flex-row {\n flex-direction: row;\n}","import { h, Host } from \"@stencil/core\";\nimport state from \"../store\";\nexport class GxgTab {\n constructor() {\n this.tab = undefined;\n this.noPadding = false;\n this.flexContainer = false;\n this.flex = false;\n this.overflowAuto = false;\n this.flexDirection = \"column\";\n this.isSelected = false;\n this.reduced = false;\n }\n el;\n render() {\n return (h(Host, { class: {\n \"overflow-auto\": this.overflowAuto,\n flex: this.flex && this.isSelected,\n open: this.isSelected,\n \"not-selected\": !this.isSelected,\n \"no-padding\": this.noPadding,\n large: state.large,\n mercury: state.mercury\n } }, h(\"div\", { class: {\n container: true,\n \"container--flex\": this.flexContainer,\n \"flex-column\": this.flexDirection === \"column\",\n \"flex-row\": this.flexDirection === \"row\",\n \"container--reduced\": this.reduced\n }, part: \"container\" }, h(\"slot\", null))));\n }\n static get is() { return \"gxg-tab\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"tab.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"tab.css\"]\n };\n }\n static get properties() {\n return {\n \"tab\": {\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 tab id. Should match the \\\"tab\\\" value of the correlative \\\"gxg-tab\\\"\"\n },\n \"attribute\": \"tab\",\n \"reflect\": false\n },\n \"noPadding\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute removes the tab .container padding\"\n },\n \"attribute\": \"no-padding\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"flexContainer\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute makes the container display flex\"\n },\n \"attribute\": \"flex-container\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"flex\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute makes the display of the tab 'flex' only when is open\"\n },\n \"attribute\": \"flex\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"overflowAuto\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute makes the .container overflow property set to 'auto'\"\n },\n \"attribute\": \"overflow-auto\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"flexDirection\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"TabContainerFlexDirection\",\n \"resolved\": \"\\\"column\\\" | \\\"row\\\"\",\n \"references\": {\n \"TabContainerFlexDirection\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/tab/tab.tsx\",\n \"id\": \"src/components/tab/tab.tsx::TabContainerFlexDirection\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The container flex-direction, if container is flex.\"\n },\n \"attribute\": \"flex-direction\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"column\\\"\"\n },\n \"isSelected\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The selected tab\"\n },\n \"attribute\": \"is-selected\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"reduced\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute will make the font size smaller.\"\n },\n \"attribute\": \"reduced\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get elementRef() { return \"el\"; }\n}\n//# sourceMappingURL=tab.js.map\n",":root {\n --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--error);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--warning);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--success);\n display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--gxg-label-font-weight);\n font-size: var(--gxg-label-font-size);\n color: var(--gxg-label-color);\n text-align: center;\n line-height: 1.455em;\n display: flex;\n align-items: center;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host {\n --tabBarMenuHeight: 0;\n --tabBarMenuWidth: 0;\n display: inline-flex;\n text-align: right;\n position: relative;\n display: flex;\n justify-content: space-between;\n}\n:host .nav {\n display: flex;\n justify-content: space-between;\n width: 100%;\n background-color: var(--gxg-tab-bar-background-color);\n}\n:host .nav--border {\n border-bottom: var(--ds-border-common-styles);\n}\n:host .tab-bar {\n list-style-type: none;\n padding-inline-start: 0;\n display: flex !important;\n margin-bottom: 0;\n margin-top: 0;\n}\n:host .tab-bar__menu {\n display: flex;\n align-items: center;\n}\n:host .tab-bar__menu-button {\n padding-right: 4px;\n transform: scale(0.9);\n}\n:host .tab-bar-menu {\n border-radius: var(--border-width-md);\n box-shadow: var(--box-shadow-01);\n height: var(--tabBarMenuHeight);\n position: absolute;\n z-index: 10;\n background-color: var(--color-on-primary);\n right: 0;\n margin: 0;\n padding: 0;\n list-style: none;\n display: inline-flex;\n flex-direction: column;\n overflow: hidden;\n transition-property: height;\n transition-duration: var(--ui-animaton-speed);\n transition-timing-function: ease;\n}\n:host .tab-bar-menu.bottom {\n bottom: 0;\n}\n:host .tab-bar-menu.right {\n bottom: 0;\n rotate: 90deg;\n transform-origin: top right;\n transform: translateX(100%);\n height: auto !important;\n width: var(--tabBarMenuHeight);\n}\n:host .tab-bar-menu--collapsed {\n height: 0;\n}\n:host .tab-bar-menu--collapsed.right {\n width: 0;\n}\n\n/*Stacked*/\n:host(.gxg-tab-bar--left-stacked),\n:host(.gxg-tab-bar--right-stacked) {\n height: 100%;\n}\n:host(.gxg-tab-bar--left-stacked) .tab-bar,\n:host(.gxg-tab-bar--right-stacked) .tab-bar {\n flex-direction: column;\n}\n\n:host(.gxg-tab-bar--left-stacked) {\n border-inline-end: var(--ds-border-common-styles);\n}\n\n:host(.gxg-tab-bar--right-stacked) {\n border-inline-start: var(--ds-border-common-styles);\n}\n\n/*Scrollable*/\n:host([scrollable]) .nav {\n width: 100%;\n overflow-y: auto;\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n:host([scrollable]) .nav::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n:host([scrollable]) .nav::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n:host([scrollable]) .nav::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n:host([scrollable]) .nav::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n:host([scrollable]) .nav::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host(.gxg-tab-bar--hidden) {\n display: none;\n}\n\n:host(.rtl) .tab-bar-menu {\n left: 0;\n right: auto;\n}","import { h, Host } from \"@stencil/core\";\nimport state from \"../store\";\nimport { exportParts } from \"../../common/export-parts\";\nexport class GxgTabBar {\n parts = {\n buttonMenu: \"button-menu\"\n };\n exportparts;\n constructor() {\n this.hidden = false;\n this.appendedButtons = 0;\n this.tabBarMenuHeight = \"auto\";\n this.tabBarMenuWidth = \"auto\";\n this.tabBarMenuCollapsed = true;\n this.tabBarMenuPosition = undefined;\n this.displayBorder = false;\n this.scrollable = false;\n this.stacked = null;\n this.rtl = false;\n this.detectClickOutsideTabBarMenu =\n this.detectClickOutsideTabBarMenu.bind(this);\n }\n el;\n tabBar;\n tabBarMenu;\n tabBarMenuToggleButton;\n lastAddedOrRemovedTabBarButtonWidth = 0;\n openMenu(event) {\n event.stopPropagation();\n this.tabBarMenuCollapsed = false;\n document.addEventListener(\"click\", this.detectClickOutsideTabBarMenu);\n }\n tabBarMenuCollapsedHandler(menuCollapsed) {\n this.evaluateMenuButtonsTabIndex(menuCollapsed);\n this.setFocus(menuCollapsed);\n }\n evaluateMenuButtonsTabIndex = (menuCollapsed) => {\n if (menuCollapsed) {\n this.disableTabIndex();\n }\n else {\n this.enableTabIndex();\n }\n };\n setFocus = (menuCollapsed) => {\n if (menuCollapsed) {\n this.tabBarMenuToggleButton.focus();\n }\n else {\n const menuButtons = this.el.querySelectorAll(\"[slot=tab-menu]\");\n if (menuButtons.length) {\n menuButtons[0].focus();\n }\n }\n };\n async appendTabButtons() {\n if (!this.scrollable) {\n const numberOfButtons = this.el.querySelectorAll(\"gxg-tab-button\").length;\n for (let i = 0; i <= numberOfButtons; i++) {\n this.appendTabItemsToMenu();\n }\n }\n }\n tabActivatedHandler() {\n this.tabBarMenuCollapsed = true;\n }\n PrevOrNextTabHandler(e) {\n const tabEnabledButtons = [];\n const allTabButtons = this.el.querySelectorAll(\"gxg-tab-button\");\n if (allTabButtons) {\n allTabButtons.forEach(tabButton => {\n if (!tabButton.disabled && !tabButton.hidden) {\n tabEnabledButtons.push(tabButton);\n }\n });\n }\n const arrowPressed = e.detail[\"arrowPressed\"];\n const targetButton = e.target;\n const clickedButtonIndex = tabEnabledButtons.findIndex(button => {\n return button === targetButton;\n });\n let destinationTab;\n if (arrowPressed === \"ArrowLeft\" && clickedButtonIndex !== -1) {\n destinationTab = tabEnabledButtons[clickedButtonIndex - 1];\n }\n else if (arrowPressed === \"ArrowRight\" && clickedButtonIndex !== -1) {\n destinationTab = tabEnabledButtons[clickedButtonIndex + 1];\n }\n if (destinationTab) {\n destinationTab.tabButtonClick();\n }\n }\n appendTabItemsToMenu() {\n //This function appends tab-buttons into a tab-menu, as long as the tab-buttons are too tight\n const gxgTabsPosition = this.el.parentElement\n .position;\n const buttonHeight = this.el.children.item(0).clientHeight;\n let sizeReference;\n if (gxgTabsPosition === \"top\" || gxgTabsPosition === \"bottom\") {\n sizeReference = this.el.parentElement.offsetWidth;\n }\n else if (gxgTabsPosition === \"right-rotated\" ||\n gxgTabsPosition === \"left-rotated\") {\n sizeReference = this.el.parentElement.offsetHeight;\n }\n const tabBarWidth = this.tabBar.offsetWidth;\n if (tabBarWidth + 20 > sizeReference) {\n const tabButtons = this.el.querySelectorAll(\"gxg-tab-button[slot='tab-bar']\");\n //get the last item of the nodeList\n const lastTabButton = tabButtons[tabButtons.length - 1];\n if (lastTabButton) {\n this.lastAddedOrRemovedTabBarButtonWidth = lastTabButton.offsetWidth;\n //add \"menu-button\" class to button component, in order to stylize the buttons inside the menu differently\n lastTabButton.classList.add(\"menu-button\");\n lastTabButton.setAttribute(\"slot\", \"tab-menu\");\n this.appendedButtons++;\n }\n //}\n }\n else if (tabBarWidth + 20 + this.lastAddedOrRemovedTabBarButtonWidth <\n sizeReference) {\n const menuButtons = this.el.querySelectorAll(\"[slot=tab-menu]\");\n const menuFirstButton = menuButtons[0];\n if (menuFirstButton) {\n menuFirstButton.classList.remove(\"menu-button\");\n menuFirstButton.setAttribute(\"slot\", \"tab-bar\");\n this.lastAddedOrRemovedTabBarButtonWidth = menuFirstButton.offsetWidth;\n this.appendedButtons--;\n }\n }\n if (gxgTabsPosition === \"right-rotated\" ||\n gxgTabsPosition === \"left-rotated\") {\n this.tabBarMenuHeight = this.appendedButtons * buttonHeight + \"px\";\n }\n this.evaluateMenuButtonsTabIndex(this.tabBarMenuCollapsed);\n }\n componentWillLoad() {\n this.attachExportParts();\n }\n attachExportParts = () => {\n const part = this.el.getAttribute(\"part\");\n const exportPartsResult = exportParts(part, this.parts);\n exportPartsResult.length && (this.exportparts = exportPartsResult);\n };\n componentDidLoad() {\n //Reading Direction\n const dirHtml = document\n .getElementsByTagName(\"html\")[0]\n .getAttribute(\"dir\");\n const dirBody = document\n .getElementsByTagName(\"body\")[0]\n .getAttribute(\"dir\");\n if (dirHtml === \"rtl\" || dirBody === \"rtl\") {\n this.rtl = true;\n }\n if (!this.scrollable) {\n const myObserver = new ResizeObserver(entries => {\n entries.forEach(() => {\n //get any button space between text and button border\n this.appendTabItemsToMenu();\n });\n });\n myObserver.observe(this.el.parentElement);\n //Collapse buttons if they dont't fit in the available space already\n const numberOfButtons = this.el.querySelectorAll(\"gxg-tab-button\").length;\n for (let i = 0; i <= numberOfButtons; i++) {\n this.appendTabItemsToMenu();\n }\n }\n //Tabbar menu on bottom\n const gxgTabsPosition = this.el.parentElement.getAttribute(\"position\");\n if (gxgTabsPosition === \"bottom\") {\n this.tabBarMenuPosition = \"bottom\";\n }\n //Tabbar menu on right\n if (gxgTabsPosition === \"right-rotated\") {\n this.tabBarMenuPosition = \"right-rotated\";\n }\n this.setIndexToTabButtons();\n }\n setIndexToTabButtons() {\n const tabButtons = this.el.querySelectorAll(\"gxg-tab-button\");\n tabButtons.forEach((tabButton, index) => {\n tabButton.setAttribute(\"data-index\", index.toString());\n });\n }\n renderTabBarMenu() {\n if (this.appendedButtons > 0) {\n return (h(\"div\", { class: \"tab-bar__menu\" }, h(\"gxg-button\", { class: \"tab-bar__menu-button\", onClick: this.openMenu.bind(this), type: \"tertiary\", icon: \"gemini-tools/show-more-vertical\", ref: el => (this.tabBarMenuToggleButton = el), part: this.parts.buttonMenu })));\n }\n }\n detectClickOutsideTabBarMenu(event) {\n const x = event.x;\n const y = event.y;\n //card main container coordinates\n const tabBarMenuClientRect = this.tabBarMenu.getBoundingClientRect();\n if (x > tabBarMenuClientRect.left &&\n x < tabBarMenuClientRect.right &&\n y > tabBarMenuClientRect.top &&\n y < tabBarMenuClientRect.bottom) {\n //Click happened inside the menu\n }\n else {\n //Click happened outside the menu\n this.tabBarMenuCollapsed = true;\n }\n }\n disconnectedCallback() {\n document.removeEventListener(\"click\", this.detectClickOutsideTabBarMenu);\n }\n enableTabIndex = () => {\n const allButtons = this.el.querySelectorAll(\"gxg-tab-button\");\n allButtons.forEach(button => {\n button.removeAttribute(\"tabindex\");\n });\n };\n disableTabIndex = () => {\n const menuButtons = this.el.querySelectorAll(\"[slot=tab-menu]\");\n menuButtons.forEach(button => {\n button.setAttribute(\"tabindex\", \"-1\");\n });\n };\n render() {\n return (h(Host, { class: {\n rtl: this.rtl,\n \"gxg-tab-bar\": true,\n \"gxg-tab-bar--hidden\": this.hidden,\n \"gxg-tab-bar--left-stacked\": this.stacked === \"left-stacked\",\n \"gxg-tab-bar--right-stacked\": this.stacked === \"right-stacked\",\n mercury: state.mercury\n }, exportParts: this.exportparts ? this.exportparts : null }, h(\"nav\", { class: {\n nav: true,\n \"nav--border\": this.displayBorder && this.stacked === null\n } }, h(\"ul\", { class: {\n \"tab-bar\": true\n }, ref: el => (this.tabBar = el) }, h(\"slot\", { name: \"tab-bar\" })), this.renderTabBarMenu(), h(\"ul\", { class: {\n \"tab-bar-menu\": true,\n \"tab-bar-menu--collapsed\": this.tabBarMenuCollapsed,\n top: this.tabBarMenuPosition === \"top\",\n right: this.tabBarMenuPosition === \"right-rotated\",\n bottom: this.tabBarMenuPosition === \"bottom\",\n left: this.tabBarMenuPosition === \"left-rotated\"\n }, style: {\n \"--tabBarMenuHeight\": this.tabBarMenuHeight,\n \"--tabBarMenuWidth\": this.tabBarMenuWidth\n }, ref: el => (this.tabBarMenu = el) }, h(\"slot\", { name: \"tab-menu\" })))));\n }\n static get is() { return \"gxg-tab-bar\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"tab-bar.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"tab-bar.css\"]\n };\n }\n static get properties() {\n return {\n \"hidden\": {\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\": \"Hides the tab-bar\"\n },\n \"attribute\": \"hidden\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"displayBorder\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute displays a border-bottom line on the tab bar\"\n },\n \"attribute\": \"display-border\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"scrollable\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute with display a scrollbar if the buttons total width is greater than the tab-bar width.\"\n },\n \"attribute\": \"scrollable\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"stacked\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"TabsStackedPosition\",\n \"resolved\": \"\\\"left-stacked\\\" | \\\"right-stacked\\\"\",\n \"references\": {\n \"TabsStackedPosition\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/tab-bar/tab-bar.tsx\",\n \"id\": \"src/components/tab-bar/tab-bar.tsx::TabsStackedPosition\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"If true the buttons will be stacked on each other, instead of inline. (used for \\\"position:left-stacked\\\", or \\\"position:right-stacked\\\" on gxg-tabs)\"\n },\n \"attribute\": \"stacked\",\n \"reflect\": false,\n \"defaultValue\": \"null\"\n }\n };\n }\n static get states() {\n return {\n \"appendedButtons\": {},\n \"tabBarMenuHeight\": {},\n \"tabBarMenuWidth\": {},\n \"tabBarMenuCollapsed\": {},\n \"tabBarMenuPosition\": {},\n \"rtl\": {}\n };\n }\n static get methods() {\n return {\n \"appendTabButtons\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"\",\n \"tags\": []\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"tabBarMenuCollapsed\",\n \"methodName\": \"tabBarMenuCollapsedHandler\"\n }];\n }\n static get listeners() {\n return [{\n \"name\": \"tabActivated\",\n \"method\": \"tabActivatedHandler\",\n \"target\": undefined,\n \"capture\": false,\n \"passive\": false\n }, {\n \"name\": \"PrevOrNextTab\",\n \"method\": \"PrevOrNextTabHandler\",\n \"target\": undefined,\n \"capture\": false,\n \"passive\": false\n }];\n }\n}\n//# sourceMappingURL=tab-bar.js.map\n",":root {\n --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--error);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--warning);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--success);\n display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--gxg-label-font-weight);\n font-size: var(--gxg-label-font-size);\n color: var(--gxg-label-color);\n text-align: center;\n line-height: 1.455em;\n display: flex;\n align-items: center;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host {\n display: block;\n align-self: center !important;\n line-height: 0;\n}\n:host .tab-button {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--gxg-tab-button-font-size);\n font-weight: var(--gxg-tab-button-font-weight);\n font-family: inherit;\n text-transform: var(--gxg-tab-button-font-text-transform);\n color: var(--gxg-tab-button-color);\n letter-spacing: var(--letter-spacing-regular);\n padding-top: 0;\n padding-inline-end: var(--gxg-tab-button-horizontal-padding);\n padding-bottom: 0;\n padding-inline-start: var(--gxg-tab-button-horizontal-padding);\n margin-top: 0;\n margin-right: 0;\n margin-bottom: 0;\n margin-left: 0;\n border: 0;\n width: 100%;\n height: var(--gxg-tab-button-height);\n position: relative;\n -webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n background-color: transparent;\n /*stacked style*/\n}\n:host .tab-button:focus-visible {\n outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);\n outline-offset: -1px;\n outline-offset: -2px;\n}\n:host .tab-button:after {\n content: \"\";\n width: 100%;\n height: var(--gxg-tab-button-line-height);\n left: 0;\n bottom: 0;\n position: absolute;\n background-color: transparent;\n}\n:host .tab-button:hover {\n cursor: pointer;\n}\n:host .tab-button:hover:focus-visible {\n outline-color: var(--gxg-tab-button-line-background-color-hover);\n}\n:host .tab-button:hover:after {\n background-color: var(--gxg-tab-button-line-background-color-hover);\n}\n:host .tab-button:active:focus-visible {\n outline-color: var(--gxg-tab-button-line-background-color-active);\n}\n:host .tab-button:active:after {\n background-color: var(--gxg-tab-button-line-background-color-active);\n}\n:host .tab-button[disabled] {\n color: var(--ds-color-disabled);\n pointer-events: none;\n}\n:host .tab-button[disabled]:after {\n background-color: var(--ds-background-color-disabled);\n}\n:host .tab-button[disabled] gxg-icon {\n --gxg-icon-color: var(--ds-icon-color-disabled);\n}\n:host .tab-button--selected {\n color: var(--gxg-tab-button-color--selected);\n font-weight: var(--gxg-tab-button-font-weight-selected);\n}\n:host .tab-button--selected:after {\n background-color: var(--gxg-tab-button-line-background-color);\n}\n:host .tab-button--text-icon gxg-icon {\n margin-right: var(--spacing-comp-02);\n}\n:host .tab-button--hidden {\n display: none;\n}\n:host .tab-button--border-above:after {\n top: 0;\n bottom: auto;\n}\n:host .tab-button gxg-icon {\n --gxg-icon-color: var(--gxg-tab-button-icon-color);\n}\n:host .tab-button--reduced {\n padding-inline-end: var(--gxg-tab-button-horizontal-padding--reduced);\n padding-inline-start: var(--gxg-tab-button-horizontal-padding--reduced);\n font-size: var(--gxg-tab-button-font-size--reduced);\n height: var(--gxg-tab-button-height--reduced);\n}\n:host .tab-button--stacked-style {\n justify-content: flex-start;\n}\n:host .tab-button--stacked-style.tab-button--text-icon {\n padding-inline-start: var(--gxg-tab-button-horizontal-padding--stacked);\n}\n:host .tab-button__text {\n display: inline-block;\n}\n\n:host(.stacked) {\n width: 100%;\n}\n\n:host([slot=tab-menu]) .tab-button {\n padding-left: 0;\n padding-right: 0;\n}\n\n:host(.menu-button) {\n width: 100%;\n box-sizing: border-box;\n}\n:host(.menu-button) .tab-button {\n padding: 0 var(--gxg-tab-menu-button-padding);\n min-height: calc(var(--gxg-tab-menu-button-min-height) * 0.85);\n justify-content: flex-start;\n}\n:host(.menu-button) .tab-button:after {\n display: none;\n}\n:host(.menu-button) .tab-button__text {\n font-size: var(--gxg-tab-menu-button-font-size);\n}\n:host(.menu-button) gxg-icon {\n transform: scale(0.85);\n}\n\n:host(.menu-button:hover) {\n background: var(--ds-item-background-color--hover);\n}","import { h, Host } from \"@stencil/core\";\nimport state from \"../store\";\nimport { exportParts } from \"../../common/export-parts\";\nexport class GxgTabButton {\n constructor() {\n this.hidden = false;\n this.tabLabel = null;\n this.tab = null;\n this.isSelected = false;\n this.disabled = false;\n this.icon = null;\n this.borderAbove = false;\n this.stackedStyle = false;\n this.reduced = false;\n }\n parts = {\n button: \"button\"\n };\n exportparts;\n el;\n tabButton;\n //Events\n tabActivated;\n PrevOrNextTab;\n async tabButtonClick() {\n this.buttonClickHandler();\n this.tabButton.focus();\n }\n isSelectedHandler(newValue) {\n if (newValue) {\n this.el.removeAttribute(\"tabindex\");\n }\n else {\n this.el.setAttribute(\"tabindex\", \"-1\");\n }\n }\n hiddenHandler(hidden) {\n if (hidden) {\n this.el.setAttribute(\"tabindex\", \"-1\");\n }\n else {\n this.el.removeAttribute(\"tabindex\");\n }\n }\n buttonClickHandler() {\n this.isSelected = true;\n const index = parseInt(this.el.getAttribute(\"data-index\"), 10);\n this.tabActivated.emit({\n tab: this.tab,\n index: index\n });\n }\n buttonKeyDownHandler(e) {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n this.PrevOrNextTab.emit({\n originTab: this.tab,\n arrowPressed: e.key\n });\n }\n else if (e.key === \"ArrowUp\" || e.key === \"ArrowDown\") {\n e.preventDefault();\n }\n }\n printIcon() {\n if (this.icon !== null) {\n if (this.disabled) {\n return (h(\"gxg-icon\", { size: \"small\", color: \"disabled\", type: this.icon, part: \"icon\" }));\n }\n return h(\"gxg-icon\", { size: \"small\", type: this.icon, part: \"icon\" });\n }\n }\n componentWillLoad() {\n this.attachExportParts();\n this.hiddenHandler(this.hidden);\n }\n attachExportParts = () => {\n const part = this.el.getAttribute(\"part\");\n const exportPartsResult = exportParts(part, this.parts);\n exportPartsResult.length && (this.exportparts = exportPartsResult);\n };\n componentDidLoad() {\n //Set the active tab for this tab-button if this is selected by default\n if (this.isSelected) {\n this.tabActivated.emit();\n }\n }\n render() {\n return (h(Host, { class: {\n large: state.large,\n mercury: state.mercury,\n stacked: this.stackedStyle\n }, exportParts: this.exportparts ? this.exportparts : null }, h(\"li\", { class: \"tab-item\" }, h(\"button\", { disabled: this.disabled, class: {\n \"tab-button\": true,\n \"tab-button--hidden\": this.hidden,\n \"tab-button--selected\": this.isSelected === true,\n \"tab-button--text-icon\": this.tabLabel !== null && this.icon !== null,\n large: state.large,\n \"tab-button--border-above\": this.borderAbove,\n \"tab-button--reduced\": this.reduced,\n \"tab-button--stacked-style\": this.stackedStyle\n }, onClick: this.buttonClickHandler.bind(this), onKeyDown: this.buttonKeyDownHandler.bind(this), ref: el => (this.tabButton = el), part: this.parts.button }, !this.reduced && this.printIcon(), h(\"span\", { class: \"tab-button__text\", part: \"button-text\" }, this.tabLabel)), h(\"slot\", null))));\n }\n static get is() { return \"gxg-tab-button\"; }\n static get encapsulation() { return \"shadow\"; }\n static get delegatesFocus() { return true; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"tab-button.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"tab-button.css\"]\n };\n }\n static get properties() {\n return {\n \"hidden\": {\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\": \"Hides the tab button\"\n },\n \"attribute\": \"hidden\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"tabLabel\": {\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 button label\"\n },\n \"attribute\": \"tab-label\",\n \"reflect\": false,\n \"defaultValue\": \"null\"\n },\n \"tab\": {\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 tab id. Must be unique, and match the \\\"tab\\\" value of the correlative \\\"gxg-tab\\\" element\"\n },\n \"attribute\": \"tab\",\n \"reflect\": true,\n \"defaultValue\": \"null\"\n },\n \"isSelected\": {\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\": \"Provide this attribute to make this button selected by default\"\n },\n \"attribute\": \"is-selected\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"disabled\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Provide this attribute to make this button disabled\"\n },\n \"attribute\": \"disabled\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\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\": \"(Optional) provide an icon to this button\"\n },\n \"attribute\": \"icon\",\n \"reflect\": false,\n \"defaultValue\": \"null\"\n },\n \"borderAbove\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"Displays the border above\"\n },\n \"attribute\": \"border-above\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"stackedStyle\": {\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\": \"Stylize the button for the gxg-tab-bar \\\"stacked\\\" version.\"\n },\n \"attribute\": \"stacked-style\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"reduced\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute will hide the icon, and reduce the font size a little bit.\"\n },\n \"attribute\": \"reduced\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n }\n };\n }\n static get events() {\n return [{\n \"method\": \"tabActivated\",\n \"name\": \"tabActivated\",\n \"bubbles\": true,\n \"cancelable\": true,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"\"\n },\n \"complexType\": {\n \"original\": \"any\",\n \"resolved\": \"any\",\n \"references\": {}\n }\n }, {\n \"method\": \"PrevOrNextTab\",\n \"name\": \"PrevOrNextTab\",\n \"bubbles\": true,\n \"cancelable\": true,\n \"composed\": true,\n \"docs\": {\n \"tags\": [],\n \"text\": \"\"\n },\n \"complexType\": {\n \"original\": \"any\",\n \"resolved\": \"any\",\n \"references\": {}\n }\n }];\n }\n static get methods() {\n return {\n \"tabButtonClick\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"\",\n \"tags\": []\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"isSelected\",\n \"methodName\": \"isSelectedHandler\"\n }, {\n \"propName\": \"hidden\",\n \"methodName\": \"hiddenHandler\"\n }];\n }\n}\n//# sourceMappingURL=tab-button.js.map\n",":root {\n --ui-animaton-speed: 0.2s;\n}\n\n/*ALIGNMENT*/\n/*Ellipsis*/\n/*****************************************************\nTYPOGRAPHY\n*****************************************************/\n/*Title 01 (Positive)*/\n.gxg-title-01 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n/*Title 01 (Negative)*/\n.gxg-title-01--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-01-font-weight);\n font-size: var(--ds-title-01-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 02 (Positive)*/\n.gxg-title-02 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-02--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-02-font-weight);\n font-size: var(--ds-title-02-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--color-on-primary);\n}\n\n/*Title 03*/\n.gxg-title-03 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-03--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-03-font-weight);\n font-size: var(--ds-title-03-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n text-transform: uppercase;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 04*/\n.gxg-title-04 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-04--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-04-font-weight);\n font-size: var(--ds-title-04-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--comfortable);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Title 05*/\n.gxg-title-05 {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-title-05--negative {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--ds-title-05-font-weight);\n font-size: var(--ds-title-05-font-size);\n letter-spacing: var(--ds-base-font-letter-spacing--regular);\n color: var(--ds-base-font-color);\n text-align: start;\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n/*Text*/\n.gxg-text {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n}\n\n.gxg-text--negative {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--negative);\n}\n\n.gxg-text--gray {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--dimmed);\n}\n\n/*Quote*/\n.gxg-quote {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n font-style: italic;\n}\n\n.gxg-quote--negative {\n color: var(--ds-base-font-color--negative);\n}\n\n/*Link*/\n.gxg-link {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.gxg-link:hover {\n color: var(--ds-base-font-color--link-hover);\n}\n.gxg-link:active {\n color: var(--ds-base-font-color--link-active);\n}\n\n.gxg-link-gray {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n}\n.gxg-link-gray:hover {\n line-height: unset;\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--link);\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n color: var(--ds-base-font-color--dimmed);\n filter: brightness(1.4);\n}\n\n/*Alerts*/\n.gxg-alert-error {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--error);\n display: inline-block;\n}\n\n.gxg-alert-warning {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--warning);\n display: inline-block;\n}\n\n.gxg-alert-success {\n font-family: var(--ds-base-font-family-primary);\n font-size: var(--ds-base-font-size);\n color: var(--ds-base-font-size-color);\n font-weight: var(--ds-base-font-size-weight);\n line-height: var(--ds-base-font-line-height--comfortable);\n color: var(--ds-base-font-color--success);\n display: inline-block;\n}\n\n/*Tab*/\n.gxg-tab--disabled {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n.gxg-tab--disabled[disabled] {\n color: var(--color-primary-disabled);\n pointer-events: none;\n}\n\n/*Label*/\n.gxg-label {\n font-family: var(--ds-base-font-family-primary);\n font-weight: var(--gxg-label-font-weight);\n font-size: var(--gxg-label-font-size);\n color: var(--gxg-label-color);\n text-align: center;\n line-height: 1.455em;\n display: flex;\n align-items: center;\n}\n.gxg-label:hover {\n color: var(--color-primary-hover);\n}\n.gxg-label:focus {\n color: var(--color-primary-active);\n}\n.gxg-label:active {\n color: var(--color-primary-active);\n}\n.gxg-label[disabled] {\n color: var(--color-primary-disabled);\n}\n\n.gxg-label--negative {\n color: var(--color-on-primary);\n}\n.gxg-label--negative[disabled] {\n color: var(--color-on-disabled);\n}\n\n/*****************************************************\nGXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES\n*****************************************************/\n/*****************************************************\nFORM ELEMENTS\n*****************************************************/\n.gxg-scrollbar {\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n.gxg-scrollbar::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n.gxg-scrollbar::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n.gxg-scrollbar::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n.gxg-scrollbar::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n\n:host {\n display: block;\n height: auto;\n background: var(--color-background);\n border-radius: var(--border-width-md);\n box-shadow: var(--box-shadow-01);\n position: relative;\n font-family: var(--ds-base-font-family-primary);\n}\n\n.main-container {\n height: 100%;\n max-height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n border-width: var(--gxg-tabs-border-width);\n border-style: solid;\n border-color: var(--gxg-tabs-border-color);\n border-radius: var(--gxg-tabs-border-radius);\n overflow: hidden;\n}\n.main-container--no-border {\n border: none;\n}\n\n.tabs-container {\n height: 100%;\n overflow-y: auto;\n}\n\n:host([position=left-rotated]) .main-container,\n:host([position=right-rotated]) .main-container {\n flex-direction: row;\n}\n:host([position=left-rotated]) .tab-bar-container,\n:host([position=right-rotated]) .tab-bar-container {\n height: 100%;\n overflow: auto;\n width: 40px;\n position: relative;\n /* Track */\n /* Handle */\n /* Handle on hover */\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar {\n width: var(--gxg-scrollbar-width);\n height: var(--gxg-scrollbar-width);\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-track,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-track {\n background-color: var(--gxg-scrollbar-track-background);\n border-radius: var(--gxg-scrollbar-track-border-radius);\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb {\n background-color: var(--gxg-scrollbar-track-thumb-background);\n border-radius: var(--gxg-scrollbar-track-thumb-radius);\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover {\n background-color: var(--gxg-scrollbar-track-thumb-hover-background);\n}\n:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-corner,\n:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n:host([position=left-rotated]) ::slotted(gxg-tab-bar),\n:host([position=right-rotated]) ::slotted(gxg-tab-bar) {\n transform: rotate(-90deg) translate(-100%, 0);\n transform-origin: left top;\n position: absolute;\n z-index: 10;\n}\n:host([position=left-rotated]) ::slotted(gxg-tab),\n:host([position=right-rotated]) ::slotted(gxg-tab) {\n border-left-width: var(--gxg-tabs-border-width);\n border-left-style: solid;\n border-left-color: var(--gxg-tabs-border-color);\n}\n:host([position=left-rotated]) .tabs-container,\n:host([position=right-rotated]) .tabs-container {\n width: calc(100% - 32px);\n}\n:host([position=left-rotated]) .main-container {\n flex-direction: row;\n}\n\n:host([position=right-rotated]) .main-container {\n flex-direction: row-reverse;\n}\n\n:host([position=left-stacked]) .main-container,\n:host([position=right-stacked]) .main-container {\n flex-direction: row;\n}\n\n:host([position=left-stacked]) .main-container {\n flex-direction: row;\n}\n\n:host([position=right-stacked]) .main-container {\n flex-direction: row-reverse;\n}","import { Host, h } from \"@stencil/core\";\nexport class GxgTabs {\n constructor() {\n this.position = \"top\";\n this.height = \"100%\";\n this.maxHeight = \"100%\";\n this.minWidth = \"200px\";\n this.tabBarBorder = false;\n this.noBorder = false;\n this.buttonsBorderAbove = false;\n this.noBackground = false;\n this.noPadding = false;\n this.reduced = false;\n this.activeTab = undefined;\n }\n el;\n watchActiveTabHandler(activeTab) {\n if (activeTab?.length > 0) {\n this.activateTab();\n }\n }\n tabActivatedHandler(event) {\n event.stopPropagation();\n this.updateActiveChildren(event.target.tab, \"gxg-tab-button\");\n this.updateActiveChildren(event.target.tab, \"gxg-tab\");\n }\n componentWillLoad() {\n this.configureTabs();\n this.evaluateReduced();\n if (this.activeTab) {\n this.activateTab();\n }\n this.evaluateStacked();\n }\n evaluateStacked = () => {\n if (this.position === \"left-stacked\" || this.position === \"right-stacked\") {\n //stacked tabBar\n const tabBar = this.el.querySelector(\"gxg-tab-bar\");\n if (tabBar) {\n tabBar.stacked = this.position;\n }\n const tabButtons = this.el.querySelectorAll(\"gxg-tab-button\");\n if (tabButtons) {\n tabButtons.forEach(tabButton => {\n tabButton.stackedStyle = true;\n });\n }\n //stacked buttons\n }\n };\n evaluateReduced = () => {\n if (this.reduced) {\n //tab buttons\n const gxgTabButtons = Array.from(this.el.querySelectorAll(\"gxg-tab-button\"));\n gxgTabButtons.forEach(tabButton => {\n tabButton.reduced = true;\n });\n //tabs\n const gxgTabs = Array.from(this.el.querySelectorAll(\"gxg-tab\"));\n gxgTabs.forEach(tab => {\n tab.reduced = true;\n });\n }\n };\n updateActiveChildren(activeTab, tagName) {\n let children;\n if (tagName === \"gxg-tab\") {\n children = this.el.querySelectorAll(\":scope > gxg-tab\");\n }\n else if (tagName === \"gxg-tab-button\") {\n const tabBar = this.el.querySelector(\":scope > gxg-tab-bar\");\n children = tabBar.querySelectorAll(\":scope > gxg-tab-button\");\n }\n for (const child of children) {\n child.isSelected = activeTab === child.tab;\n }\n }\n configureTabs() {\n const tabs = this.el.querySelectorAll(\"gxg-tab\");\n if (this.noPadding) {\n tabs.forEach(tab => {\n tab.noPadding = true;\n });\n }\n if (this.buttonsBorderAbove) {\n const tabButtons = this.el.querySelectorAll(\"gxg-tab-button\");\n tabButtons.forEach(tabButton => (tabButton.borderAbove = true));\n }\n }\n async setActiveTab(tab) {\n if (tab) {\n const tabEl = this.getTab(tab);\n if (!tabEl?.disabled) {\n this.updateActiveChildren(tab, \"gxg-tab-button\");\n this.updateActiveChildren(tab, \"gxg-tab\");\n }\n }\n }\n /**\n * Sets the first tab that is not disabled and hidden as the active tab\n */\n async setFirstActiveTab() {\n const allTabs = Array.from(this.el.querySelectorAll(\"gxg-tab-button\"));\n const firstEnabledTab = allTabs.find(tab => !tab.hidden && !tab.disabled);\n if (firstEnabledTab && firstEnabledTab.tab) {\n this.updateActiveChildren(firstEnabledTab.tab, \"gxg-tab-button\");\n this.updateActiveChildren(firstEnabledTab.tab, \"gxg-tab\");\n }\n }\n getTab = (tab) => {\n return this.el.querySelector(`gxg-tab-button[key=${tab}]`);\n };\n activateTab = () => {\n //buttons\n const tabButtons = Array.from(this.el.querySelectorAll(\"gxg-tab-button\"));\n tabButtons.forEach(tabButton => {\n if (tabButton.tab !== this.activeTab) {\n tabButton.isSelected = false;\n }\n else {\n tabButton.isSelected = true;\n }\n });\n //tabs\n const tabs = Array.from(this.el.querySelectorAll(\"gxg-tab\"));\n tabs.forEach(tab => {\n if (tab.tab !== this.activeTab) {\n tab.isSelected = false;\n }\n else {\n tab.isSelected = true;\n }\n });\n };\n render() {\n return (h(Host, { style: {\n height: this.height,\n maxHeight: this.maxHeight,\n minWidth: this.minWidth\n } }, h(\"div\", { class: {\n \"main-container\": true,\n \"main-container--no-border\": this.noBorder\n } }, this.position === \"bottom\"\n ? [\n h(\"div\", { class: \"tabs-container\" }, h(\"slot\", null)),\n h(\"div\", { class: \"tab-bar-container\" }, h(\"slot\", { name: \"tab-bar-container\" }))\n ]\n : [\n h(\"div\", { class: \"tab-bar-container\" }, h(\"slot\", { name: \"tab-bar-container\" })),\n h(\"div\", { class: \"tabs-container\" }, h(\"slot\", null))\n ])));\n }\n static get is() { return \"gxg-tabs\"; }\n static get encapsulation() { return \"shadow\"; }\n static get originalStyleUrls() {\n return {\n \"$\": [\"tabs.scss\"]\n };\n }\n static get styleUrls() {\n return {\n \"$\": [\"tabs.css\"]\n };\n }\n static get properties() {\n return {\n \"position\": {\n \"type\": \"string\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"TabsPosition\",\n \"resolved\": \"\\\"bottom\\\" | \\\"left-rotated\\\" | \\\"left-stacked\\\" | \\\"right-rotated\\\" | \\\"right-stacked\\\" | \\\"top\\\"\",\n \"references\": {\n \"TabsPosition\": {\n \"location\": \"local\",\n \"path\": \"/home/circleci/repo/src/components/tabs/tabs.tsx\",\n \"id\": \"src/components/tabs/tabs.tsx::TabsPosition\"\n }\n }\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"\"\n },\n \"attribute\": \"position\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"top\\\"\"\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\": \"\"\n },\n \"attribute\": \"height\",\n \"reflect\": true,\n \"defaultValue\": \"\\\"100%\\\"\"\n },\n \"maxHeight\": {\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\": \"\"\n },\n \"attribute\": \"max-height\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"100%\\\"\"\n },\n \"minWidth\": {\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\": \"\"\n },\n \"attribute\": \"min-width\",\n \"reflect\": false,\n \"defaultValue\": \"\\\"200px\\\"\"\n },\n \"tabBarBorder\": {\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\": \"\"\n },\n \"attribute\": \"tab-bar-border\",\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\": \"\"\n },\n \"attribute\": \"no-border\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"buttonsBorderAbove\": {\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\": \"\"\n },\n \"attribute\": \"buttons-border-above\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"noBackground\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute removes the background color (only for mercury)\"\n },\n \"attribute\": \"no-background\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"noPadding\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute removes each tab .container padding\"\n },\n \"attribute\": \"no-padding\",\n \"reflect\": false,\n \"defaultValue\": \"false\"\n },\n \"reduced\": {\n \"type\": \"boolean\",\n \"mutable\": false,\n \"complexType\": {\n \"original\": \"boolean\",\n \"resolved\": \"boolean\",\n \"references\": {}\n },\n \"required\": false,\n \"optional\": false,\n \"docs\": {\n \"tags\": [],\n \"text\": \"The presence of this attribute will make buttons and tabs reduced, meaning that the font size and padding, will be smaller. Also, the icons in the buttons will not be displayed.\"\n },\n \"attribute\": \"reduced\",\n \"reflect\": true,\n \"defaultValue\": \"false\"\n },\n \"activeTab\": {\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 actual active tab, and tab-button\"\n },\n \"attribute\": \"active-tab\",\n \"reflect\": false\n }\n };\n }\n static get methods() {\n return {\n \"setActiveTab\": {\n \"complexType\": {\n \"signature\": \"(tab: string) => Promise<void>\",\n \"parameters\": [{\n \"name\": \"tab\",\n \"type\": \"string\",\n \"docs\": \"\"\n }],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"\",\n \"tags\": []\n }\n },\n \"setFirstActiveTab\": {\n \"complexType\": {\n \"signature\": \"() => Promise<void>\",\n \"parameters\": [],\n \"references\": {\n \"Promise\": {\n \"location\": \"global\",\n \"id\": \"global::Promise\"\n }\n },\n \"return\": \"Promise<void>\"\n },\n \"docs\": {\n \"text\": \"Sets the first tab that is not disabled and hidden as the active tab\",\n \"tags\": []\n }\n }\n };\n }\n static get elementRef() { return \"el\"; }\n static get watchers() {\n return [{\n \"propName\": \"activeTab\",\n \"methodName\": \"watchActiveTabHandler\"\n }];\n }\n static get listeners() {\n return [{\n \"name\": \"tabActivated\",\n \"method\": \"tabActivatedHandler\",\n \"target\": undefined,\n \"capture\": false,\n \"passive\": false\n }];\n }\n}\n//# sourceMappingURL=tabs.js.map\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-30365c44.entry.js → p-a3e07b86.entry.js} RENAMED Viewed

@@ -4,7 +4,7 @@ import { L as o } from "./p-74d59062.js";
 import { f as s } from "./p-04f3d630.js";
-const n = '.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;height:100%;overflow:auto}:host,.gx-ide-main-wrapper,.grid--basic,.project,.recent-objects{height:100%;overflow:auto}.kb{grid-area:kb;align-self:center}.kb .version-pill{white-space:nowrap;text-overflow:ellipsis}.kb .kb-detail{flex-wrap:wrap;margin-block-start:var(--mer-spacing--md);gap:var(--mer-spacing--md)}.kb .kb-detail .display-inline{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.environment{grid-area:environment}.environment gxg-title-editable{margin-block-end:var(--gx-ide-cards-vertical-spacing)}.environment .grid--environments{flex-grow:1;grid-template-columns:1fr 1fr 1fr;gap:var(--gx-ide-grid-column-gap)}.environment .grid--environments .align-center{gap:var(--mer-spacing--xxs)}.environment .grid--environments .front-end{display:flex;flex-direction:column;gap:var(--gx-ide-cards-vertical-spacing)}.project{grid-area:project}.project .project-buttons{margin-block-start:var(--mer-spacing--md);gap:var(--mer-spacing--md)}.project gxg-form-textarea::part(textarea){width:100%;background-color:transparent;line-height:var(--line-height-default);font-size:var(--mer-font__size--xs)}.recent-objects{grid-area:recent-objects}.recent-objects .recent-objects-card{margin-block-end:var(--gx-ide-cards-vertical-spacing)}.recent-objects .recent-objects-card:last-child{margin-block-end:0}.recent-objects .recent-objects-card .grid--recent-objects{flex-grow:1;grid-template-columns:1fr 10fr 12fr 1fr;gap:var(--gx-ide-cards-horizontal-spacing);height:100%}.recent-objects .recent-objects-card .grid--recent-objects .obj-name{color:var(--gray-06)}.grid--basic{flex-grow:1;grid-template-columns:1.12fr 1fr;gap:var(--mer-spacing--xl);grid-template-areas:"kb environment" "project recent-objects";grid-template-rows:auto 1fr}gxg-title-editable{width:100%}gx-ide-card{height:100%}';
+const n = '.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;height:100%;overflow:auto}:host,.gx-ide-main-wrapper,.grid--basic,.project,.recent-objects{height:100%;overflow:auto}.kb{grid-area:kb;align-self:center}.kb .version-pill{white-space:nowrap;text-overflow:ellipsis}.kb .kb-detail{display:flex;flex-direction:column;align-items:start;flex-wrap:wrap;margin-block-start:var(--mer-spacing--md);gap:var(--mer-spacing--md)}.kb .kb-detail .display-inline{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-style:italic;opacity:0.5}.environment{grid-area:environment}.environment gxg-title-editable{margin-block-end:var(--gx-ide-cards-vertical-spacing)}.environment .grid--environments{flex-grow:1;grid-template-columns:1fr 1fr 1fr;gap:var(--gx-ide-grid-column-gap)}.environment .grid--environments .align-center{gap:var(--mer-spacing--xxs)}.environment .grid--environments .front-end{display:flex;flex-direction:column;gap:var(--gx-ide-cards-vertical-spacing)}.project{grid-area:project}.project .project-buttons{margin-block-start:var(--mer-spacing--md);gap:var(--mer-spacing--md)}.project gxg-form-textarea::part(textarea){width:100%;background-color:transparent;line-height:var(--line-height-default);font-size:var(--mer-font__size--xs)}.recent-objects{grid-area:recent-objects}.recent-objects .recent-objects-card{margin-block-end:var(--gx-ide-cards-vertical-spacing)}.recent-objects .recent-objects-card:last-child{margin-block-end:0}.recent-objects .recent-objects-card .grid--recent-objects{flex-grow:1;grid-template-columns:1fr 10fr 12fr 1fr;gap:var(--gx-ide-cards-horizontal-spacing);height:100%}.recent-objects .recent-objects-card .grid--recent-objects .obj-name{color:var(--gray-06)}.grid--basic{flex-grow:1;grid-template-columns:1.12fr 1fr;gap:var(--mer-spacing--xl);grid-template-areas:"kb environment" "project recent-objects";grid-template-rows:auto 1fr}gxg-title-editable{width:100%}gx-ide-card{height:100%}';
 const d = {
   new: "gx-server/new",
@@ -130,14 +130,12 @@ const l = class {
       class: "align-center kb-detail"
     }, t("gxg-pill", {
       id: "pill",
-      class: "version-pill",
       type: "static",
       icon: "objects/procedure"
     }, this._componentLocale.version, ": ", this.kb.currentVersion), t("gxg-text", {
       class: "display-inline",
-      type: "text-regular",
-      padding: "s",
-      italic: true
+      type: "text-gray",
+      padding: "s"
     }, this._componentLocale.created, ":", " ", s(this.kb.created, "date-time-short"), " -", " ", this._componentLocale.lastBuild, ":", " ", s(this.kb.lastBuild, "date-time-short")))), t("div", {
       class: "environment"
     }, t("gxg-title-editable", {
@@ -148,7 +146,8 @@ const l = class {
       ref: e => this.envNameEl = e,
       onValueChanged: this.handleEnvNameChange,
       focusType: "text",
-      debounce: true
+      debounce: true,
+      disableEdition: true
     }), t("div", {
       class: "grid grid--environments"
     }, t("gxg-card", {
@@ -238,4 +237,4 @@ const l = class {
 l.style = n;
 export { l as gx_ide_dashboard_home };
-//# sourceMappingURL=p-30365c44.entry.js.map
+//# sourceMappingURL=p-a3e07b86.entry.js.map

package/dist/genexus-ide-ui/p-a3e07b86.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["dashboardHomeCss","mapStatusToIcons","new","modified","conflicted","unmodified","GxIdeDashboardHome","this","renderedFirstTime","handleKbNameChange","async","renameKBCallback","response","kbNameEl","value","then","result","success","kb","name","editValidation","handleEnvNameChange","renameEnvironmentCallback","envNameEl","environment","toggleEditDescription","editingProjectDescription","handleDescriptionChange","editDescriptionCallback","openObject","id","openObjectCallback","el","validationStatus","validationMessage","errorMessage","renderProjectContent","h","rows","projectDescription","class","type","onClick","_componentLocale","save","discard","innerHTML","icon","edit","componentWillLoad","Locale","getComponentStrings","componentDidRender","componentDidRenderFirstTime","emit","componentName","renderFrontEndTitle","frontEnd","length","frontEndLang","frontEndLangs","render","Host","editingKbName","fluid","ref","onValueChanged","focusType","debounce","version","currentVersion","padding","created","formatDate","lastBuild","editingEnvName","disableEdition","background","cardType","cardTitle","map","obj","color","style","backEnd","dataStore","editableTitle","project","title","recent","recentObjects","index","actionable","typeIcon","italic","modificationDate","status"],"sources":["src/components/dashboard-home/dashboard-home.scss?tag=gx-ide-dashboard-home&encapsulation=shadow","src/components/dashboard-home/dashboard-home.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n height: 100%;\n overflow: auto;\n}\n\n// Manage height and overflow\n:host,\n.gx-ide-main-wrapper,\n.grid--basic,\n.project,\n.recent-objects {\n height: 100%;\n overflow: auto;\n}\n\n.kb {\n grid-area: kb;\n align-self: center;\n .version-pill {\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n .kb-detail {\n display: flex;\n flex-direction: column;\n align-items: start;\n flex-wrap: wrap;\n margin-block-start: var(--mer-spacing--md);\n gap: var(--mer-spacing--md);\n .display-inline {\n @include line-clamp;\n font-style: italic;\n opacity: 0.5;\n }\n }\n}\n\n.environment {\n grid-area: environment;\n gxg-title-editable {\n margin-block-end: var(--gx-ide-cards-vertical-spacing);\n }\n .grid--environments {\n flex-grow: 1;\n grid-template-columns: 1fr 1fr 1fr;\n gap: var(--gx-ide-grid-column-gap);\n .align-center {\n gap: var(--mer-spacing--xxs);\n }\n .front-end {\n display: flex;\n flex-direction: column;\n gap: var(--gx-ide-cards-vertical-spacing);\n }\n }\n}\n\n.project {\n grid-area: project;\n .project-buttons {\n margin-block-start: var(--mer-spacing--md);\n gap: var(--mer-spacing--md);\n }\n gxg-form-textarea::part(textarea) {\n width: 100%;\n background-color: transparent;\n line-height: var(--line-height-default);\n font-size: var(--mer-font__size--xs);\n }\n}\n\n.recent-objects {\n grid-area: recent-objects;\n\n .recent-objects-card {\n margin-block-end: var(--gx-ide-cards-vertical-spacing);\n &:last-child {\n margin-block-end: 0;\n }\n .grid--recent-objects {\n flex-grow: 1;\n grid-template-columns: 1fr 10fr 12fr 1fr;\n gap: var(--gx-ide-cards-horizontal-spacing);\n height: 100%;\n .obj-name {\n color: var(--gray-06);\n }\n }\n }\n}\n\n.grid--basic {\n flex-grow: 1;\n grid-template-columns: 1.12fr 1fr;\n gap: var(--mer-spacing--xl);\n grid-template-areas:\n \"kb environment\"\n \"project recent-objects\";\n grid-template-rows: auto 1fr;\n}\n\ngxg-title-editable {\n width: 100%;\n}\n\ngx-ide-card {\n height: 100%;\n}\n","/* STENCIL IMPORTS */\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\nconst mapStatusToIcons: {\n [key in RecentObjectStatus]: StatusIcons;\n} = {\n new: \"gx-server/new\",\n modified: \"patterns-default-associated/modified\",\n conflicted: \"patterns-default-associated/synchronized\",\n unmodified: \"gx-server/delete\"\n};\n\n@Component({\n tag: \"gx-ide-dashboard-home\",\n styleUrl: \"dashboard-home.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/dashboard-home\"]\n})\nexport class GxIdeDashboardHome {\n /*\n INDEX:\n 1.OWN PROPERTIES \n 2.REFERENCE TO ELEMENTS\n 3.STATE() VARIABLES\n 4.PUBLIC PROPERTY API | WATCH'S\n 5.EVENTS (EMIT)\n 6.COMPONENT LIFECYCLE METHODS\n 7.LISTENERS\n 8.PUBLIC METHODS API\n 9.LOCAL METHODS\n 10.RENDER() FUNCTIONS\n 11.RENDER() MAIN FUNCTION\n */\n\n // 1.OWN PROPERTIES //\n\n /**\n * The component hard-coded strings translations.\n */\n private _componentLocale: any;\n private renderedFirstTime = false;\n\n // 2. REFERENCE TO ELEMENTS //\n\n @Element() el: HTMLGxIdeDashboardHomeElement;\n\n private kbNameEl!: HTMLGxgTitleEditableElement;\n private envNameEl!: HTMLGxgTitleEditableElement;\n /* private projectDescriptionEl!: HTMLGxgFormTextareaElement;*/\n\n // 3.STATE() VARIABLES //\n\n /**\n * The editing state for the title.\n */\n @State() editingKbName = false;\n\n /**\n * The editing state for the environment name.\n */\n @State() editingEnvName = false;\n\n /**\n * The editing state for the project details.\n */\n @State() editingProjectDescription = false;\n\n // 4.PUBLIC PROPERTY API | WATCH'S //\n\n /**\n * The KB basic properties.\n */\n @Prop() readonly kb: KBData;\n\n /**\n * Information of the current environment.\n */\n @Prop() readonly environment: EnvironmentData;\n\n /**\n * Project Detail description.\n */\n @Prop() readonly projectDescription: string;\n\n /**\n * Recently edited objects.\n */\n @Prop() readonly recentObjects: recentObjectData[];\n\n /**\n * Callback invoked when user tries to rename the KB.\n * Receives the new name as a parameter\n * and returns a promise with the result of the operation.\n */\n @Prop() readonly renameKBCallback: (name: string) => Promise<EditResult>;\n\n /**\n * Callback invoked when user tries to rename the KB environment.\n * Receives the new name as a parameter\n * and returns a promise with the result of the operation.\n */\n @Prop() readonly renameEnvironmentCallback: (\n name: string\n ) => Promise<EditResult>;\n\n /**\n * Callback invoked when user tries to edit the Project Description.\n * The edition is resolved by the host.\n */\n @Prop() readonly editDescriptionCallback: () => Promise<void>;\n\n /**\n * Callback invoked when user tries to open one of the listed Recent Objects\n * Receives the internal ID of the object\n */\n @Prop() readonly openObjectCallback: (id: number) => Promise<void>;\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 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 // Kb Name\n\n private handleKbNameChange = async () => {\n if (this.renameKBCallback) {\n const response = this.renameKBCallback(this.kbNameEl.value);\n response.then((result: EditResult) => {\n if (result.success) {\n this.kb.name = this.kbNameEl.value;\n }\n this.editValidation(result, this.kbNameEl);\n });\n }\n };\n\n // Environment Name\n private handleEnvNameChange = async () => {\n if (this.renameEnvironmentCallback) {\n const response = this.renameEnvironmentCallback(this.envNameEl.value);\n response.then((result: EditResult) => {\n if (result.success) {\n this.environment.name = this.envNameEl.value;\n }\n this.editValidation(result, this.envNameEl);\n });\n }\n };\n\n // Project Description\n private toggleEditDescription = async () => {\n this.editingProjectDescription = !this.editingProjectDescription;\n };\n\n private handleDescriptionChange = async () => {\n if (this.editDescriptionCallback) {\n await this.editDescriptionCallback();\n }\n };\n\n // Recent Objects\n\n private openObject = (id: number) => {\n this.openObjectCallback(id);\n };\n\n // Validation\n\n private editValidation = (result: EditResult, el: any) => {\n if (!result.success) {\n el.validationStatus = \"error\";\n el.validationMessage = result.errorMessage;\n }\n };\n\n // 10.RENDER() FUNCTIONS //\n\n private renderProjectContent = (): Element => {\n return this.editingProjectDescription ? (\n <div>\n <gxg-form-textarea\n rows={12}\n value={this.projectDescription}\n /* ref={(el: HTMLGxgFormTextareaElement) =>\n (this.projectDescriptionEl = el as HTMLGxgFormTextareaElement)\n }*/\n ></gxg-form-textarea>\n <div class=\"project-buttons align-center\">\n <gxg-text type=\"text-link\" onClick={this.handleDescriptionChange}>\n {this._componentLocale.save}\n </gxg-text>\n <gxg-text type=\"text-link\" onClick={this.toggleEditDescription}>\n {this._componentLocale.discard}\n </gxg-text>\n </div>\n </div>\n ) : (\n <div>\n <div innerHTML={this.projectDescription}></div>\n <gxg-text\n icon=\"gemini-tools/edit\"\n type=\"text-link\"\n onClick={this.toggleEditDescription}\n >\n {this._componentLocale.edit}\n </gxg-text>\n </div>\n );\n };\n\n private renderFrontEndTitle() {\n return this.environment.frontEnd.length <= 1\n ? this._componentLocale.environment.frontEndLang\n : this._componentLocale.environment.frontEndLangs;\n }\n\n // 11.RENDER() MAIN FUNCTION //\n\n render() {\n return (\n <Host>\n <div class=\"gx-ide-main-wrapper\">\n <div class=\"grid grid--basic\">\n <div class=\"kb gxi-overflow-auto\">\n <gxg-title-editable\n value={this.kb.name}\n disable-edition={this.editingKbName}\n click-to-edit={true}\n fluid\n ref={el => (this.kbNameEl = el as HTMLGxgTitleEditableElement)}\n onValueChanged={this.handleKbNameChange}\n focusType=\"text\"\n debounce\n ></gxg-title-editable>\n <div class=\"align-center kb-detail\">\n <gxg-pill id=\"pill\" type=\"static\" icon=\"objects/procedure\">\n {this._componentLocale.version}: {this.kb.currentVersion}\n </gxg-pill>\n <gxg-text class=\"display-inline\" type=\"text-gray\" padding=\"s\">\n {this._componentLocale.created}:{\" \"}\n {formatDate(this.kb.created, \"date-time-short\")} -{\" \"}\n {this._componentLocale.lastBuild}:{\" \"}\n {formatDate(this.kb.lastBuild, \"date-time-short\")}\n </gxg-text>\n </div>\n </div>\n\n <div class=\"environment\">\n <gxg-title-editable\n value={this.environment.name}\n disable-edition={this.editingEnvName}\n click-to-edit={true}\n title-type=\"h3\"\n ref={el => (this.envNameEl = el as HTMLGxgTitleEditableElement)}\n onValueChanged={this.handleEnvNameChange}\n focusType=\"text\"\n debounce\n disableEdition\n ></gxg-title-editable>\n <div class=\"grid grid--environments\">\n <gxg-card\n background=\"gray-01\"\n cardType=\"mini\"\n padding=\"s\"\n cardTitle={this.renderFrontEndTitle()}\n >\n <div class=\"front-end\">\n {this.environment.frontEnd.map(\n (obj: EnvironmentItemData) => (\n <div class=\"align-center\">\n <gxg-icon\n type={obj.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {obj.name}\n </div>\n )\n )}\n </div>\n </gxg-card>\n\n <gxg-card\n background=\"gray-01\"\n cardType=\"mini\"\n padding=\"s\"\n cardTitle={this._componentLocale.environment.backEnd}\n >\n <div class=\"align-center\">\n <gxg-icon\n type={this.environment.backEnd.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {this.environment.backEnd.name}\n </div>\n </gxg-card>\n\n <gxg-card\n background=\"gray-01\"\n cardType=\"mini\"\n padding=\"s\"\n cardTitle={this._componentLocale.environment.dataStore}\n >\n <div class=\"align-center\">\n <gxg-icon\n type={this.environment.dataStore.icon}\n color=\"onbackground\"\n style={{\n \"--mer-text__on-surface\": \"var(--gray-05);\"\n }}\n ></gxg-icon>\n {this.environment.dataStore.name}\n </div>\n </gxg-card>\n </div>\n </div>\n\n <gxg-card\n editableTitle={false}\n cardTitle={this._componentLocale.project.title}\n class=\"project\"\n >\n {/* <gxg-tabs height=\"auto\" minWidth=\"100%\">\n <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.description}\n tab=\"description\"\n is-selected\n ></gxg-tab-button>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.lookFeel}\n tab=\"lookFeel\"\n ></gxg-tab-button>\n <gxg-tab-button\n slot=\"tab-bar\"\n tab-label={this._componentLocale.project.tabs.architecture}\n tab=\"architecture\"\n ></gxg-tab-button>\n </gxg-tab-bar>\n <gxg-tab noPadding tab=\"description\" flexContainer>\n {this.renderProjectContent()}\n </gxg-tab>\n <gxg-tab noPadding tab=\"lookFeel\" flexContainer></gxg-tab>\n <gxg-tab noPadding tab=\"architecture\" flexContainer></gxg-tab>\n </gxg-tabs> */}\n {this.renderProjectContent()}\n </gxg-card>\n\n <gxg-card\n editableTitle={false}\n cardTitle={this._componentLocale.recent.title}\n class=\"recent-objects\"\n cardType=\"section\"\n no-padding-top\n >\n {this.recentObjects.map((obj: recentObjectData, index) => (\n <gxg-card\n background=\"gray-01\"\n padding=\"m\"\n cardType=\"article\"\n class=\"recent-objects-card\"\n actionable\n onClick={() => this.openObject(index)}\n >\n <div class=\"grid grid--recent-objects\">\n <gxg-icon type={obj.typeIcon} color=\"auto\"></gxg-icon>\n <gxg-text type=\"text-regular\" class=\"obj-name\">\n {obj.name}\n </gxg-text>\n <gxg-text italic class=\"justify-end\">\n {this._componentLocale.recent.modified}:{\" \"}\n {`${formatDate(obj.modificationDate, \"date\")}`}\n </gxg-text>\n <div class=\" justify-end\">\n <gxg-icon\n type={mapStatusToIcons[obj.status]}\n color=\"auto\"\n ></gxg-icon>\n </div>\n </div>\n </gxg-card>\n ))}\n </gxg-card>\n </div>\n </div>\n </Host>\n );\n }\n}\n\nexport type KBData = {\n name: string;\n currentVersion: string;\n created: Date;\n lastBuild?: Date;\n};\n\nexport type EnvironmentData = {\n name: string;\n frontEnd: EnvironmentItemData[];\n backEnd: EnvironmentItemData;\n dataStore: EnvironmentItemData;\n};\n\nexport type EnvironmentItemData = {\n icon: string;\n name: string;\n};\n\nexport type recentObjectData = {\n id: string;\n typeIcon: string;\n name: string;\n modificationDate: Date;\n status: RecentObjectStatus;\n};\n\nexport type RecentObjectStatus =\n | \"new\"\n | \"modified\"\n | \"conflicted\"\n | \"unmodified\";\n\nexport type StatusIcons =\n // toDo: Add proper icons!!\n | \"gx-server/new\"\n | \"patterns-default-associated/modified\"\n | \"patterns-default-associated/synchronized\"\n | \"gx-server/delete\";\n\nexport type EditResult = {\n success: boolean;\n errorMessage: string;\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-9c6c5a61.entry.js → p-a592930e.entry.js} RENAMED Viewed

@@ -1,32 +1,32 @@
-import { r as i, c as e, h as r, H as t, g as o } from "./p-2776d2f9.js";
+import { r as e, c as i, h as t, H as r, g as o } from "./p-2776d2f9.js";
 import { L as a } from "./p-74d59062.js";
 import { f as n } from "./p-04f3d630.js";
-const s = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;box-shadow:none;height:100%;overflow:auto;opacity:0;transition:var(--gx-ide-show-component-delay) opacity}:host(.rendered){opacity:1}gxg-tabs{background-color:transparent;box-shadow:none;height:100% !important;overflow:auto}.layout{height:100%;overflow:auto}.layout gxg-card{height:100%;overflow:auto}.kbs-container,.news-container{display:flex;flex-direction:column;gap:var(--gx-ide-articles-gap)}.news-container p:first-child{margin-top:0}.news-container p:last-child{margin-bottom:0}gxg-card.section{border-bottom:2px solid var(--gray-00)}";
+const s = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;box-shadow:none;height:100%;overflow:auto;opacity:0;transition:var(--gx-ide-show-component-delay) opacity}:host(.rendered){opacity:1}gxg-tabs{background-color:transparent;box-shadow:none;height:100% !important;overflow:auto}.kbs-empty-state{height:100%}.layout{height:100%;overflow:auto}.layout gxg-card{height:100%;overflow:auto}.kbs-container,.news-container{display:flex;flex-direction:column;gap:var(--gx-ide-articles-gap)}.news-container p:first-child{margin-top:0}.news-container p:last-child{margin-bottom:0}gxg-card.section{border-bottom:2px solid var(--gray-00)}";
 const l = class {
-  constructor(t) {
-    i(this, t);
-    this.componentDidRenderFirstTime = e(this, "componentDidRenderFirstTime", 7);
-    this.getNewsCallbackRecentNews = async () => new Promise((async i => {
+  constructor(r) {
+    e(this, r);
+    this.componentDidRenderFirstTime = i(this, "componentDidRenderFirstTime", 7);
+    this.getNewsCallbackRecentNews = async () => new Promise((async e => {
       if (this.getNewsCallback) {
-        const e = await this.getNewsCallback();
-        i(e);
+        const i = await this.getNewsCallback();
+        e(i);
       }
     }));
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
-        this.kbClickHandler = async i => {
-      const e = i.target.id;
+        this.kbClickHandler = async e => {
+      const i = e.target.id;
       if (this.openKbCallback) {
-        await this.openKbCallback(e);
+        await this.openKbCallback(i);
       }
     };
-    this.searchKbsInputHandler = i => {
-      this.kbsFilterValue = i.detail.toLowerCase();
+    this.searchKbsInputHandler = e => {
+      this.kbsFilterValue = e.detail.toLowerCase();
     };
     // private NewsClickHandler = async (e: MouseEvent) => {
     //   const newsId = (e.target as HTMLElement).id;
@@ -56,40 +56,45 @@ const l = class {
     //   }
     //   return null;
     // };
-        this.renderKb = i => {
-      if (i.id && i.name && i.name.toLowerCase().includes(this.kbsFilterValue)) {
-        const e = n(i.lastOpenedDate, "pretty");
-        const t = e ? `${this._componentLocale.recentKbs.lastOpened} ${e}` : null;
-        return r("gxg-card", {
-          id: i.id,
-          key: i.id,
+    // 9.LOCAL METHODS -> RENDERS //
+        this.renderKb = e => {
+      if (e.id && e.name && e.name.toLowerCase().includes(this.kbsFilterValue)) {
+        const i = n(e.lastOpenedDate, "pretty");
+        const r = i ? `${this._componentLocale.recentKbs.lastOpened} ${i}` : null;
+        return t("gxg-card", {
+          id: e.id,
+          key: e.id,
           cardType: "article",
-          cardTitle: i.name,
+          cardTitle: e.name,
           icon: "general/knowledge-base",
           iconColor: "auto",
-          cardSubtitle: t,
+          cardSubtitle: r,
           actionable: true,
           filterValue: this.kbsFilterValue,
-          onClick: this.kbClickHandler,
-          hiChar: true
+          onClick: this.kbClickHandler
         });
       }
       return null;
     };
     this.renderHomeTabContent = () => {
-      var i;
-      return r("div", {
+      var e;
+      return t("div", {
         class: "layout layout--two-cols layout--space-above"
-      }, r("gxg-card", {
+      }, t("gxg-card", {
         class: "section",
         cardTitle: this._componentLocale.recentKbs.title
-      }, r("div", {
+      }, this.kbs.length > 0 ? [ t("div", {
         class: "kbs-container"
-      }, (i = this.kbs) === null || i === void 0 ? void 0 : i.map((i => this.renderKb(i)))), r("gxg-form-text", {
+      }, (e = this.kbs) === null || e === void 0 ? void 0 : e.map((e => this.renderKb(e)))), t("gxg-form-text", {
         slot: "header",
         placeholder: "Search KBs by name",
         onInput: this.searchKbsInputHandler
-      })), r("gx-ide-recent-news", {
+      }) ] : t("gx-ide-empty-state", {
+        class: "kbs-empty-state",
+        stateIcon: "mercury/folder",
+        stateTitle: " You haven't created any Knowledge Base",
+        stateDescription: "Once you have created your first knowledge base it will appear on this \n          window."
+      })), t("gx-ide-recent-news", {
         class: "section",
         getNewsCallback: this.getNewsCallbackRecentNews,
         openNewsCallback: this.openNewsCallback
@@ -158,7 +163,7 @@ const l = class {
   // };
   // 10.RENDER() FUNCTION //
   render() {
-    return r(t, {
+    return t(r, {
       class: {
         rendered: this.renderedFirstTime
       }
@@ -175,4 +180,4 @@ const l = class {
 l.style = s;
 export { l as gx_ide_start_page };
-//# sourceMappingURL=p-9c6c5a61.entry.js.map
+//# sourceMappingURL=p-a592930e.entry.js.map

package/dist/genexus-ide-ui/p-a592930e.entry.js.map ADDED Viewed

@@ -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"}