@genexus/genexus-ide-ui 0.0.96 → 0.0.97

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 (18) hide show
  1. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  2. package/dist/cjs/gx-ide-start-page.cjs.entry.js +44 -4
  3. package/dist/cjs/gx-ide-start-page.cjs.entry.js.map +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/collection/components/start-page/start-page.js +44 -4
  6. package/dist/collection/components/start-page/start-page.js.map +1 -1
  7. package/dist/components/gx-ide-start-page.js +66 -50
  8. package/dist/components/gx-ide-start-page.js.map +1 -1
  9. package/dist/esm/genexus-ide-ui.js +1 -1
  10. package/dist/esm/gx-ide-start-page.entry.js +44 -4
  11. package/dist/esm/gx-ide-start-page.entry.js.map +1 -1
  12. package/dist/esm/loader.js +1 -1
  13. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  14. package/dist/genexus-ide-ui/{p-f18b01c1.entry.js → p-9c6c5a61.entry.js} +79 -79
  15. package/dist/genexus-ide-ui/p-9c6c5a61.entry.js.map +1 -0
  16. package/dist/types/components/start-page/start-page.d.ts +0 -1
  17. package/package.json +1 -1
  18. package/dist/genexus-ide-ui/p-f18b01c1.entry.js.map +0 -1
package/dist/components/gx-ide-start-page.js CHANGED
@@ -1,21 +1,17 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
2
2
  import { L as Locale } from './locale.js';
3
3
  import { f as formatDate } from './helpers2.js';
4
- import { d as defineCustomElement$k } from './icon.js';
5
- import { d as defineCustomElement$j } from './ch-window2.js';
6
- import { d as defineCustomElement$i } from './ch-window-close2.js';
7
- import { d as defineCustomElement$h } from './recent-news.js';
8
- import { d as defineCustomElement$g } from './title2.js';
9
- import { d as defineCustomElement$f } from './button.js';
10
- import { d as defineCustomElement$e } from './card.js';
11
- import { d as defineCustomElement$d } from './form-text.js';
12
- import { d as defineCustomElement$c } from './icon2.js';
13
- import { d as defineCustomElement$b } from './ide-loader.js';
14
- import { d as defineCustomElement$a } from './gxg-label2.js';
15
- import { d as defineCustomElement$9 } from './tab.js';
16
- import { d as defineCustomElement$8 } from './tab-bar.js';
17
- import { d as defineCustomElement$7 } from './tab-button.js';
18
- import { d as defineCustomElement$6 } from './tabs.js';
4
+ import { d as defineCustomElement$g } from './icon.js';
5
+ import { d as defineCustomElement$f } from './ch-window2.js';
6
+ import { d as defineCustomElement$e } from './ch-window-close2.js';
7
+ import { d as defineCustomElement$d } from './recent-news.js';
8
+ import { d as defineCustomElement$c } from './title2.js';
9
+ import { d as defineCustomElement$b } from './button.js';
10
+ import { d as defineCustomElement$a } from './card.js';
11
+ import { d as defineCustomElement$9 } from './form-text.js';
12
+ import { d as defineCustomElement$8 } from './icon2.js';
13
+ import { d as defineCustomElement$7 } from './ide-loader.js';
14
+ import { d as defineCustomElement$6 } from './gxg-label2.js';
19
15
  import { d as defineCustomElement$5 } from './text.js';
20
16
  import { d as defineCustomElement$4 } from './title.js';
21
17
  import { d as defineCustomElement$3 } from './title-editable.js';
@@ -95,9 +91,6 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
95
91
  return this.renderKb(kb);
96
92
  })), h("gxg-form-text", { slot: "header", placeholder: "Search KBs by name", onInput: this.searchKbsInputHandler })), h("gx-ide-recent-news", { class: "section", getNewsCallback: this.getNewsCallbackRecentNews, openNewsCallback: this.openNewsCallback })));
97
93
  };
98
- this.renderTabs = () => {
99
- return (h("gxg-tabs", { height: "auto", minWidth: "100%", noPadding: true }, h("gxg-tab-bar", { slot: "tab-bar-container", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabs.home, tab: "home", "is-selected": true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabs.learn, tab: "learn", disabled: true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabs.samples, tab: "samples", disabled: true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabs.marketplace, tab: "marketplace", disabled: true }), h("gxg-tab-button", { slot: "tab-bar", "tab-label": this._componentLocale.tabs.updates, tab: "updates", disabled: true })), h("gxg-tab", { tab: "home" }, this.renderHomeTabContent()), h("gxg-tab", { tab: "learn" }), h("gxg-tab", { tab: "samples" }), h("gxg-tab", { tab: "marketplace" }), h("gxg-tab", { tab: "updates" })));
100
- };
101
94
  this.kbsFilterValue = "";
102
95
  this.renderedFirstTime = false;
103
96
  this.news = undefined;
@@ -116,9 +109,52 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
116
109
  this.renderedFirstTime = true;
117
110
  }
118
111
  }
112
+ // private renderTabs = (): HTMLGxgTabsElement => {
113
+ // return (
114
+ // <gxg-tabs height="auto" minWidth="100%" no-border>
115
+ // <gxg-tab-bar slot="tab-bar-container" displayBorder>
116
+ // <gxg-tab-button
117
+ // slot="tab-bar"
118
+ // tab-label={this._componentLocale.tabs.home}
119
+ // tab="home"
120
+ // is-selected
121
+ // ></gxg-tab-button>
122
+ // <gxg-tab-button
123
+ // slot="tab-bar"
124
+ // tab-label={this._componentLocale.tabs.learn}
125
+ // tab="learn"
126
+ // disabled
127
+ // ></gxg-tab-button>
128
+ // <gxg-tab-button
129
+ // slot="tab-bar"
130
+ // tab-label={this._componentLocale.tabs.samples}
131
+ // tab="samples"
132
+ // disabled
133
+ // ></gxg-tab-button>
134
+ // <gxg-tab-button
135
+ // slot="tab-bar"
136
+ // tab-label={this._componentLocale.tabs.marketplace}
137
+ // tab="marketplace"
138
+ // disabled
139
+ // ></gxg-tab-button>
140
+ // <gxg-tab-button
141
+ // slot="tab-bar"
142
+ // tab-label={this._componentLocale.tabs.updates}
143
+ // tab="updates"
144
+ // disabled
145
+ // ></gxg-tab-button>
146
+ // </gxg-tab-bar>
147
+ // <gxg-tab tab="home">{this.renderHomeTabContent()}</gxg-tab>
148
+ // <gxg-tab tab="learn"></gxg-tab>
149
+ // <gxg-tab tab="samples"></gxg-tab>
150
+ // <gxg-tab tab="marketplace"></gxg-tab>
151
+ // <gxg-tab tab="updates"></gxg-tab>
152
+ // </gxg-tabs>
153
+ // );
154
+ // };
119
155
  // 10.RENDER() FUNCTION //
120
156
  render() {
121
- return (h(Host, { class: { rendered: this.renderedFirstTime } }, this.renderTabs()));
157
+ return (h(Host, { class: { rendered: this.renderedFirstTime } }, this.renderHomeTabContent()));
122
158
  }
123
159
  static get assetsDirs() { return ["gx-ide-assets/start-page"]; }
124
160
  get el() { return this; }
@@ -136,7 +172,7 @@ function defineCustomElement$1() {
136
172
  if (typeof customElements === "undefined") {
137
173
  return;
138
174
  }
139
- const components = ["gx-ide-start-page", "ch-icon", "ch-window", "ch-window-close", "gx-ide-recent-news", "gx-ide-title", "gxg-button", "gxg-card", "gxg-form-text", "gxg-icon", "gxg-ide-loader", "gxg-label", "gxg-tab", "gxg-tab-bar", "gxg-tab-button", "gxg-tabs", "gxg-text", "gxg-title", "gxg-title-editable", "gxg-tooltip"];
175
+ const components = ["gx-ide-start-page", "ch-icon", "ch-window", "ch-window-close", "gx-ide-recent-news", "gx-ide-title", "gxg-button", "gxg-card", "gxg-form-text", "gxg-icon", "gxg-ide-loader", "gxg-label", "gxg-text", "gxg-title", "gxg-title-editable", "gxg-tooltip"];
140
176
  components.forEach(tagName => { switch (tagName) {
141
177
  case "gx-ide-start-page":
142
178
  if (!customElements.get(tagName)) {
@@ -144,76 +180,56 @@ function defineCustomElement$1() {
144
180
  }
145
181
  break;
146
182
  case "ch-icon":
147
- if (!customElements.get(tagName)) {
148
- defineCustomElement$k();
149
- }
150
- break;
151
- case "ch-window":
152
- if (!customElements.get(tagName)) {
153
- defineCustomElement$j();
154
- }
155
- break;
156
- case "ch-window-close":
157
- if (!customElements.get(tagName)) {
158
- defineCustomElement$i();
159
- }
160
- break;
161
- case "gx-ide-recent-news":
162
- if (!customElements.get(tagName)) {
163
- defineCustomElement$h();
164
- }
165
- break;
166
- case "gx-ide-title":
167
183
  if (!customElements.get(tagName)) {
168
184
  defineCustomElement$g();
169
185
  }
170
186
  break;
171
- case "gxg-button":
187
+ case "ch-window":
172
188
  if (!customElements.get(tagName)) {
173
189
  defineCustomElement$f();
174
190
  }
175
191
  break;
176
- case "gxg-card":
192
+ case "ch-window-close":
177
193
  if (!customElements.get(tagName)) {
178
194
  defineCustomElement$e();
179
195
  }
180
196
  break;
181
- case "gxg-form-text":
197
+ case "gx-ide-recent-news":
182
198
  if (!customElements.get(tagName)) {
183
199
  defineCustomElement$d();
184
200
  }
185
201
  break;
186
- case "gxg-icon":
202
+ case "gx-ide-title":
187
203
  if (!customElements.get(tagName)) {
188
204
  defineCustomElement$c();
189
205
  }
190
206
  break;
191
- case "gxg-ide-loader":
207
+ case "gxg-button":
192
208
  if (!customElements.get(tagName)) {
193
209
  defineCustomElement$b();
194
210
  }
195
211
  break;
196
- case "gxg-label":
212
+ case "gxg-card":
197
213
  if (!customElements.get(tagName)) {
198
214
  defineCustomElement$a();
199
215
  }
200
216
  break;
201
- case "gxg-tab":
217
+ case "gxg-form-text":
202
218
  if (!customElements.get(tagName)) {
203
219
  defineCustomElement$9();
204
220
  }
205
221
  break;
206
- case "gxg-tab-bar":
222
+ case "gxg-icon":
207
223
  if (!customElements.get(tagName)) {
208
224
  defineCustomElement$8();
209
225
  }
210
226
  break;
211
- case "gxg-tab-button":
227
+ case "gxg-ide-loader":
212
228
  if (!customElements.get(tagName)) {
213
229
  defineCustomElement$7();
214
230
  }
215
231
  break;
216
- case "gxg-tabs":
232
+ case "gxg-label":
217
233
  if (!customElements.get(tagName)) {
218
234
  defineCustomElement$6();
219
235
  }
package/dist/components/gx-ide-start-page.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"gx-ide-start-page.js","mappings":"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","names":["GxIdeStartPage"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n box-shadow: none;\n height: 100%;\n overflow: auto;\n opacity: 0;\n transition: var(--gx-ide-show-component-delay) opacity;\n}\n:host(.rendered) {\n opacity: 1;\n}\ngxg-tabs {\n background-color: transparent;\n box-shadow: none;\n height: 100% !important;\n overflow: auto;\n}\n.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 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 hiChar\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 <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 </gxg-card>\n {/* <gxg-card\n class=\"section\"\n cardTitle={this._componentLocale.recentNews.title}\n ref={el => (this.recentNewsEl = el as HTMLGxgCardElement)}\n >\n <div class=\"news-container\">\n {this.news?.map(singleNews => {\n return this.renderNews(singleNews);\n })}\n </div>\n </gxg-card> */}\n {\n <gx-ide-recent-news\n class=\"section\"\n getNewsCallback={this.getNewsCallbackRecentNews}\n openNewsCallback={this.openNewsCallback}\n ></gx-ide-recent-news>\n }\n </div>\n );\n };\n\n private renderTabs = (): HTMLGxgTabsElement => {\n return (\n <gxg-tabs height=\"auto\" minWidth=\"100%\" noPadding>\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 </Host>\n );\n }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n id: string;\n name: string;\n lastOpenedDate?: Date;\n};\nexport type NewsData = {\n id: string;\n title: string;\n body: string;\n};\n"],"version":3}
1
+ {"file":"gx-ide-start-page.js","mappings":"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","names":["GxIdeStartPage"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n display: block;\n box-shadow: none;\n height: 100%;\n overflow: auto;\n opacity: 0;\n transition: var(--gx-ide-show-component-delay) opacity;\n}\n:host(.rendered) {\n opacity: 1;\n}\ngxg-tabs {\n background-color: transparent;\n box-shadow: none;\n height: 100% !important;\n overflow: auto;\n}\n.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 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 hiChar\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 <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 </gxg-card>\n {/* <gxg-card\n class=\"section\"\n cardTitle={this._componentLocale.recentNews.title}\n ref={el => (this.recentNewsEl = el as HTMLGxgCardElement)}\n >\n <div class=\"news-container\">\n {this.news?.map(singleNews => {\n return this.renderNews(singleNews);\n })}\n </div>\n </gxg-card> */}\n {\n <gx-ide-recent-news\n class=\"section\"\n getNewsCallback={this.getNewsCallbackRecentNews}\n openNewsCallback={this.openNewsCallback}\n ></gx-ide-recent-news>\n }\n </div>\n );\n };\n\n // private renderTabs = (): HTMLGxgTabsElement => {\n // return (\n // <gxg-tabs height=\"auto\" minWidth=\"100%\" no-border>\n // <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n // <gxg-tab-button\n // slot=\"tab-bar\"\n // tab-label={this._componentLocale.tabs.home}\n // tab=\"home\"\n // is-selected\n // ></gxg-tab-button>\n // <gxg-tab-button\n // slot=\"tab-bar\"\n // tab-label={this._componentLocale.tabs.learn}\n // tab=\"learn\"\n // disabled\n // ></gxg-tab-button>\n // <gxg-tab-button\n // slot=\"tab-bar\"\n // tab-label={this._componentLocale.tabs.samples}\n // tab=\"samples\"\n // disabled\n // ></gxg-tab-button>\n // <gxg-tab-button\n // slot=\"tab-bar\"\n // tab-label={this._componentLocale.tabs.marketplace}\n // tab=\"marketplace\"\n // disabled\n // ></gxg-tab-button>\n // <gxg-tab-button\n // slot=\"tab-bar\"\n // tab-label={this._componentLocale.tabs.updates}\n // tab=\"updates\"\n // disabled\n // ></gxg-tab-button>\n // </gxg-tab-bar>\n // <gxg-tab tab=\"home\">{this.renderHomeTabContent()}</gxg-tab>\n // <gxg-tab tab=\"learn\"></gxg-tab>\n // <gxg-tab tab=\"samples\"></gxg-tab>\n // <gxg-tab tab=\"marketplace\"></gxg-tab>\n // <gxg-tab tab=\"updates\"></gxg-tab>\n // </gxg-tabs>\n // );\n // };\n\n // 10.RENDER() FUNCTION //\n\n render() {\n return (\n <Host class={{ rendered: this.renderedFirstTime }}>\n {/* this.renderTabs()*/}\n {this.renderHomeTabContent()}\n </Host>\n );\n }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n id: string;\n name: string;\n lastOpenedDate?: Date;\n};\nexport type NewsData = {\n id: string;\n title: string;\n body: string;\n};\n"],"version":3}