@genexus/genexus-ide-ui 1.0.0 → 1.0.2

package/dist/collection/components/start-page/recent-news.js

@@ -1,99 +1,143 @@
-/* STENCIL IMPORTS */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeRecentNews_NEWS_ITEM_CLASS_SELECTOR, _GxIdeRecentNews_newsRendered, _GxIdeRecentNews_setTimeOutNewsDelay, _GxIdeRecentNews_newsContainerEl, _GxIdeRecentNews_displayNews, _GxIdeRecentNews_evaluateNewsDisplay, _GxIdeRecentNews_evaluateNewsRender, _GxIdeRecentNews_getNews, _GxIdeRecentNews_openNewsHandler, _GxIdeRecentNews_refreshFilteredNews, _GxIdeRecentNews_renderNewsItem, _GxIdeRecentNews_renderNewsList;
 import { Host, h } from "@stencil/core";
-/* OTHER LIBRARIES IMPORTS */
-/* CUSTOM IMPORTS */
+import { getIconPath } from "@genexus/mercury";
 import { Locale } from "../../common/locale";
+import { config } from "../../common/config";
+import { hiChar } from "../../common/helpers";
+const NEWS_ICON = getIconPath({
+    category: "system",
+    name: "news",
+    colorType: "on-surface"
+});
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/button",
+    "components/icon",
+    "utils/typography",
+    "utils/layout"
+];
 export class GxIdeRecentNews {
     constructor() {
-        this.newsRendered = false;
-        this.setTimeOutNewsDelay = 75;
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.evaluateNewsDisplay = () => {
-            if (!this.newsRendered &&
-                this.news.length > 0 &&
-                this.newsContainerEl !== undefined) {
-                this.displayNews();
-                this.newsRendered = true;
-            }
-        };
-        this.displayNews = () => {
-            if (this.newsContainerEl !== undefined) {
-                const news = Array.from(this.newsContainerEl.querySelectorAll("gxg-card"));
+        _GxIdeRecentNews_NEWS_ITEM_CLASS_SELECTOR.set(this, "news-item");
+        _GxIdeRecentNews_newsRendered.set(this, false);
+        _GxIdeRecentNews_setTimeOutNewsDelay.set(this, 75);
+        _GxIdeRecentNews_newsContainerEl.set(this, void 0);
+        _GxIdeRecentNews_displayNews.set(this, () => {
+            if (__classPrivateFieldGet(this, _GxIdeRecentNews_newsContainerEl, "f") !== undefined) {
+                const news = Array.from(__classPrivateFieldGet(this, _GxIdeRecentNews_newsContainerEl, "f").querySelectorAll(`.${__classPrivateFieldGet(this, _GxIdeRecentNews_NEWS_ITEM_CLASS_SELECTOR, "f")}`));
                 news.forEach(news => {
+                    // display news with a cascade effect
                     setTimeout(() => {
                         news.classList.add("visible");
-                    }, this.setTimeOutNewsDelay);
-                    this.setTimeOutNewsDelay += 75;
+                    }, __classPrivateFieldGet(this, _GxIdeRecentNews_setTimeOutNewsDelay, "f"));
+                    __classPrivateFieldSet(this, _GxIdeRecentNews_setTimeOutNewsDelay, __classPrivateFieldGet(this, _GxIdeRecentNews_setTimeOutNewsDelay, "f") + 45, "f");
                 });
             }
-        };
-        this.attachLoaderEvents = () => {
-            this.loaderEl.addEventListener("loaderFinished", () => {
-                if (this.news.length === 0) {
-                    this.newsLoadFailed = true;
-                }
-                else {
-                    this.newsLoadFailed = false;
-                }
-            });
-        };
-        this.getNews = async () => {
-            this.loaderEl.show = true;
-            if (this.getNewsCallback) {
-                const newsResult = await this.getNewsCallback();
-                this.loaderEl.show = false;
-                if (newsResult && newsResult.length > 0) {
-                    this.news = newsResult;
-                    this.newsLoadFailed = false;
-                }
-                else {
-                    this.newsLoadFailed = true;
-                }
+        });
+        _GxIdeRecentNews_evaluateNewsDisplay.set(this, () => {
+            if (!__classPrivateFieldGet(this, _GxIdeRecentNews_newsRendered, "f") &&
+                this.news.length > 0 &&
+                __classPrivateFieldGet(this, _GxIdeRecentNews_newsContainerEl, "f") !== undefined) {
+                __classPrivateFieldGet(this, _GxIdeRecentNews_displayNews, "f").call(this);
+                __classPrivateFieldSet(this, _GxIdeRecentNews_newsRendered, true, "f");
             }
-        };
-        this.openNewsHandler = (newsId) => async () => {
-            if (this.openNewsCallback) {
-                await this.openNewsCallback(newsId);
+        });
+        _GxIdeRecentNews_evaluateNewsRender.set(this, () => {
+            var _a;
+            if (this.newsLoadFailed) {
+                return (h("gx-ide-empty-state", { stateIconSrc: NEWS_ICON, stateTitle: this._componentLocale.recentNews.newsNotFetched.title }, h("button", { class: "empty-state__button button-primary", onClick: __classPrivateFieldGet(this, _GxIdeRecentNews_getNews, "f") }, this._componentLocale.recentNews.newsNotFetched
+                    .tryAgainButtonLabel), h("a", { class: "text-link text-body-regular-s", href: this._componentLocale.recentNews.newsNotFetched.onlineNewsURL, target: "_blank" }, this._componentLocale.recentNews.newsNotFetched.readThemOnline)));
             }
-        };
-        // 9.LOCAL METHODS -> RENDERS //
-        this.renderNews = (news) => {
+            if (this.news.length === 0) {
+                return (h("gx-ide-empty-state", { stateIconSrc: NEWS_ICON, stateTitle: this._componentLocale.recentNews.noNewsToDisplay.title }, h("a", { class: "empty-state__link text-body-regular-s", href: this._componentLocale.recentNews.onlineNewsURL, target: "_blank" }, this._componentLocale.recentNews.readThemOnline)));
+            }
+            if (((_a = this.filteredNews) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+                return (h("gx-ide-empty-state", { class: "news-empty-state", stateIconSrc: NEWS_ICON, stateTitle: this._componentLocale.recentNews.noNewsFiltered.title }));
+            }
+            return __classPrivateFieldGet(this, _GxIdeRecentNews_renderNewsList, "f").call(this);
+        });
+        _GxIdeRecentNews_getNews.set(this, async () => {
+            this.loadingNews = true;
+            const newsResult = await this.getNewsCallback();
+            this.loadingNews = false;
+            if (newsResult && newsResult.length > 0) {
+                this.news = newsResult;
+                this.newsLoadFailed = false;
+            }
+            else {
+                this.newsLoadFailed = true;
+            }
+        });
+        _GxIdeRecentNews_openNewsHandler.set(this, (newsId) => async () => {
+            await this.openNewsCallback(newsId);
+        });
+        _GxIdeRecentNews_refreshFilteredNews.set(this, (filterValue, news) => {
+            this.filteredNews = news.filter(singleNews => {
+                var _a, _b;
+                return ((_a = singleNews.title) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(filterValue)) ||
+                    ((_b = singleNews.body) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(filterValue));
+            });
+        });
+        _GxIdeRecentNews_renderNewsItem.set(this, (news) => {
             if (news.id && news.title) {
-                return (h("gxg-card", { id: news.id, key: news.id, cardType: "article", cardTitle: news.title, icon: "gx-test/test-results", iconColor: "auto", actionable: true, onClick: this.openNewsHandler(news.id), titleSemibold: true, noHeaderBorder: true, class: "news-article" }, news.body ? h("p", null, news.body) : null));
+                return (h("article", null, h("button", { class: {
+                        "card-small": true,
+                        "card-small--actionable": true,
+                        "card-news": true,
+                        [__classPrivateFieldGet(this, _GxIdeRecentNews_NEWS_ITEM_CLASS_SELECTOR, "f")]: true,
+                        "visible": __classPrivateFieldGet(this, _GxIdeRecentNews_newsRendered, "f")
+                    }, id: news.id, key: news.id, type: "button", onClick: __classPrivateFieldGet(this, _GxIdeRecentNews_openNewsHandler, "f").call(this, news.id) }, h("header", { class: "card-news__header" }, h("ch-image", { src: NEWS_ICON, class: "icon-md" }), h("h2", { class: config.headingsClasses.cardSmall }, hiChar(news.title, this.filterValue))), news.body && (h("p", { class: "text-body-regular-s" }, hiChar(news.body, this.filterValue))))));
             }
             return null;
-        };
+        });
+        _GxIdeRecentNews_renderNewsList.set(this, () => {
+            var _a;
+            return (h("div", { class: "news-container", ref: el => (__classPrivateFieldSet(this, _GxIdeRecentNews_newsContainerEl, el, "f")) }, (_a = this.filteredNews) === null || _a === void 0 ? void 0 : _a.map(__classPrivateFieldGet(this, _GxIdeRecentNews_renderNewsItem, "f"))));
+        });
+        this.filteredNews = [];
+        this.loadingNews = true;
         this.news = [];
         this.newsLoadFailed = false;
         this.getNewsCallback = undefined;
         this.openNewsCallback = undefined;
+        this.filterValue = "";
+    }
+    newsChanged(news) {
+        __classPrivateFieldGet(this, _GxIdeRecentNews_refreshFilteredNews, "f").call(this, this.filterValue, news);
+        __classPrivateFieldGet(this, _GxIdeRecentNews_displayNews, "f").call(this);
     }
-    watchNewsHandler() {
-        this.displayNews();
+    watchNews(newFilterValue) {
+        __classPrivateFieldGet(this, _GxIdeRecentNews_refreshFilteredNews, "f").call(this, newFilterValue, this.news);
     }
-    // 5.EVENTS (EMIT) //
-    // 6.COMPONENT LIFECYCLE METHODS //
     async componentWillLoad() {
         this._componentLocale = await Locale.getComponentStrings(this.el);
     }
-    componentDidLoad() {
-        this.getNews();
-        this.attachLoaderEvents();
-    }
     componentDidRender() {
-        this.evaluateNewsDisplay();
+        __classPrivateFieldGet(this, _GxIdeRecentNews_evaluateNewsDisplay, "f").call(this);
+    }
+    componentDidLoad() {
+        __classPrivateFieldGet(this, _GxIdeRecentNews_getNews, "f").call(this);
     }
-    // 10.RENDER() FUNCTION //
     render() {
-        var _a;
-        return (h(Host, null, h("gxg-card", { class: "section", cardType: "section", cardTitle: this._componentLocale.recentNews.title }, this.news.length > 0 ? (h("div", { class: "news-container", ref: el => (this.newsContainerEl = el) }, (_a = this.news) === null || _a === void 0 ? void 0 : _a.map(singleNews => {
-            return this.renderNews(singleNews);
-        }))) : (h("div", { class: {
-                "gx-ide-message": true,
-                "gx-ide-message--hidden": !this.newsLoadFailed
-            } }, h("gx-ide-title", { alignment: "center" }, this._componentLocale.recentNews.newsNotFetched), h("gxg-button", { onClick: this.getNews }, this._componentLocale.recentNews.tryAgainButtonLabel), h("gxg-text", { type: "text-link", href: "https://www.genexus.com/en/news", target: "_blank" }, this._componentLocale.recentNews.readThemOnline)))), h("gxg-ide-loader", { abortTime: 8000, container: this.el, loaderTitle: this._componentLocale.loader.title, description: "Hang on please", ref: el => (this.loaderEl = el) })));
+        return (h(Host
+        // Improve accessibility by announcing live changes
+        , { "aria-live": "polite", "aria-busy": this.loadingNews ? "true" : "false", class: { empty: this.filteredNews.length === 0 } }, h("ch-theme", { model: CSS_BUNDLES }), this.loadingNews ? (h("gx-ide-loader", { abortTime: 8000, loaderTitle: this._componentLocale.loader.title, description: this._componentLocale.loader.description, show: true })) : (__classPrivateFieldGet(this, _GxIdeRecentNews_evaluateNewsRender, "f").call(this))));
     }
     static get is() { return "gx-ide-recent-news"; }
     static get encapsulation() { return "shadow"; }
@@ -124,7 +168,7 @@ export class GxIdeRecentNews {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -145,17 +189,37 @@ export class GxIdeRecentNews {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Callback invoked to open a news article."
                 }
+            },
+            "filterValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The news filter value inserted by the user on the news input filter"
+                },
+                "attribute": "filter-value",
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }
     static get states() {
         return {
+            "filteredNews": {},
+            "loadingNews": {},
             "news": {},
             "newsLoadFailed": {}
         };
@@ -164,8 +228,12 @@ export class GxIdeRecentNews {
     static get watchers() {
         return [{
                 "propName": "news",
-                "methodName": "watchNewsHandler"
+                "methodName": "newsChanged"
+            }, {
+                "propName": "filterValue",
+                "methodName": "watchNews"
             }];
     }
 }
+_GxIdeRecentNews_NEWS_ITEM_CLASS_SELECTOR = new WeakMap(), _GxIdeRecentNews_newsRendered = new WeakMap(), _GxIdeRecentNews_setTimeOutNewsDelay = new WeakMap(), _GxIdeRecentNews_newsContainerEl = new WeakMap(), _GxIdeRecentNews_displayNews = new WeakMap(), _GxIdeRecentNews_evaluateNewsDisplay = new WeakMap(), _GxIdeRecentNews_evaluateNewsRender = new WeakMap(), _GxIdeRecentNews_getNews = new WeakMap(), _GxIdeRecentNews_openNewsHandler = new WeakMap(), _GxIdeRecentNews_refreshFilteredNews = new WeakMap(), _GxIdeRecentNews_renderNewsItem = new WeakMap(), _GxIdeRecentNews_renderNewsList = new WeakMap();
 //# sourceMappingURL=recent-news.js.map

package/dist/collection/components/start-page/recent-news.js.map

@@ -1 +1 @@
-{"version":3,"file":"recent-news.js","sourceRoot":"","sources":["../../../src/components/start-page/recent-news.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { NewsData, GetNewsCallback, OpenNewsCallback } from \"./start-page\";\n\n@Component({\n  tag: \"gx-ide-recent-news\",\n  styleUrl: \"recent-news.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/recent-news\"]\n})\nexport class GxIdeRecentNews {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeRecentNewsElement;\n  private loaderEl!: HTMLGxgIdeLoaderElement;\n  private newsContainerEl: HTMLDivElement;\n  private newsRendered = false;\n  private setTimeOutNewsDelay = 75;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * The list of news\n   */\n  @State() news: NewsData[] = [];\n  @Watch(\"news\")\n  watchNewsHandler() {\n    this.displayNews();\n  }\n\n  /**\n   * True if news couldn't be loaded\n   */\n  @State() newsLoadFailed = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * Callback invoked to load the news feed (right panel \"Recent News\").\n   */\n  @Prop() readonly getNewsCallback: GetNewsCallback;\n\n  /**\n   * Callback invoked to open a news article.\n   */\n  @Prop() readonly openNewsCallback: OpenNewsCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.getNews();\n    this.attachLoaderEvents();\n  }\n\n  componentDidRender() {\n    this.evaluateNewsDisplay();\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateNewsDisplay = () => {\n    if (\n      !this.newsRendered &&\n      this.news.length > 0 &&\n      this.newsContainerEl !== undefined\n    ) {\n      this.displayNews();\n      this.newsRendered = true;\n    }\n  };\n\n  private displayNews = () => {\n    if (this.newsContainerEl !== undefined) {\n      const news = Array.from(\n        this.newsContainerEl.querySelectorAll(\"gxg-card\")\n      );\n      news.forEach(news => {\n        setTimeout(() => {\n          news.classList.add(\"visible\");\n        }, this.setTimeOutNewsDelay);\n        this.setTimeOutNewsDelay += 75;\n      });\n    }\n  };\n\n  private attachLoaderEvents = () => {\n    this.loaderEl.addEventListener(\"loaderFinished\", () => {\n      if (this.news.length === 0) {\n        this.newsLoadFailed = true;\n      } else {\n        this.newsLoadFailed = false;\n      }\n    });\n  };\n\n  private getNews = async () => {\n    this.loaderEl.show = true;\n    if (this.getNewsCallback) {\n      const newsResult = await this.getNewsCallback();\n      this.loaderEl.show = false;\n      if (newsResult && newsResult.length > 0) {\n        this.news = newsResult;\n        this.newsLoadFailed = false;\n      } else {\n        this.newsLoadFailed = true;\n      }\n    }\n  };\n\n  private openNewsHandler = (newsId: string) => async () => {\n    if (this.openNewsCallback) {\n      await this.openNewsCallback(newsId);\n    }\n  };\n\n  // 9.LOCAL METHODS -> RENDERS //\n\n  private renderNews = (news: NewsData): HTMLGxgCardElement | null => {\n    if (news.id && news.title) {\n      return (\n        <gxg-card\n          id={news.id}\n          key={news.id}\n          cardType=\"article\"\n          cardTitle={news.title}\n          icon=\"gx-test/test-results\"\n          iconColor=\"auto\"\n          actionable\n          onClick={this.openNewsHandler(news.id)}\n          titleSemibold\n          noHeaderBorder\n          class=\"news-article\"\n        >\n          {news.body ? <p>{news.body}</p> : null}\n        </gxg-card>\n      );\n    }\n    return null;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <gxg-card\n          class=\"section\"\n          cardType=\"section\"\n          cardTitle={this._componentLocale.recentNews.title}\n        >\n          {this.news.length > 0 ? (\n            <div\n              class=\"news-container\"\n              ref={el => (this.newsContainerEl = el as HTMLDivElement)}\n            >\n              {this.news?.map(singleNews => {\n                return this.renderNews(singleNews);\n              })}\n            </div>\n          ) : (\n            <div\n              class={{\n                \"gx-ide-message\": true,\n                \"gx-ide-message--hidden\": !this.newsLoadFailed\n              }}\n            >\n              <gx-ide-title alignment=\"center\">\n                {this._componentLocale.recentNews.newsNotFetched}\n              </gx-ide-title>\n              <gxg-button onClick={this.getNews}>\n                {this._componentLocale.recentNews.tryAgainButtonLabel}\n              </gxg-button>\n              <gxg-text\n                type=\"text-link\"\n                href=\"https://www.genexus.com/en/news\"\n                target=\"_blank\"\n              >\n                {this._componentLocale.recentNews.readThemOnline}\n              </gxg-text>\n            </div>\n          )}\n        </gxg-card>\n        <gxg-ide-loader\n          abortTime={8000}\n          container={this.el}\n          loaderTitle={this._componentLocale.loader.title}\n          description=\"Hang on please\"\n          ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n        ></gxg-ide-loader>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"recent-news.js","sourceRoot":"","sources":["../../../src/components/start-page/recent-news.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { hiChar } from \"../../common/helpers\";\nimport { NewsData, GetNewsCallback, OpenNewsCallback } from \"./start-page\";\n\nconst NEWS_ICON = getIconPath({\n  category: \"system\",\n  name: \"news\",\n  colorType: \"on-surface\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/icon\",\n  \"utils/typography\",\n  \"utils/layout\"\n];\n@Component({\n  tag: \"gx-ide-recent-news\",\n  styleUrl: \"recent-news.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/recent-news\"]\n})\nexport class GxIdeRecentNews {\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  #NEWS_ITEM_CLASS_SELECTOR = \"news-item\";\n  #newsRendered = false;\n  #setTimeOutNewsDelay = 75;\n\n  @Element() el: HTMLGxIdeRecentNewsElement;\n\n  #newsContainerEl: HTMLDivElement;\n\n  /**\n   * The list of news after the filter\n   */\n  @State() filteredNews: NewsData[] = [];\n\n  /**\n   * True if news are being requested\n   */\n  @State() loadingNews = true;\n\n  /**\n   * The list of news\n   */\n  @State() news: NewsData[] = [];\n  @Watch(\"news\")\n  newsChanged(news: NewsData[]) {\n    this.#refreshFilteredNews(this.filterValue, news);\n    this.#displayNews();\n  }\n\n  /**\n   * True if news couldn't be loaded\n   */\n  @State() newsLoadFailed = false;\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  /**\n   * The news filter value inserted by the user on the news input filter\n   */\n  @Prop() readonly filterValue: string = \"\";\n  @Watch(\"filterValue\")\n  watchNews(newFilterValue: string) {\n    this.#refreshFilteredNews(newFilterValue, this.news);\n  }\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidRender() {\n    this.#evaluateNewsDisplay();\n  }\n\n  componentDidLoad() {\n    this.#getNews();\n  }\n\n  #displayNews = () => {\n    if (this.#newsContainerEl !== undefined) {\n      const news = Array.from(\n        this.#newsContainerEl.querySelectorAll(\n          `.${this.#NEWS_ITEM_CLASS_SELECTOR}`\n        )\n      );\n      news.forEach(news => {\n        // display news with a cascade effect\n        setTimeout(() => {\n          news.classList.add(\"visible\");\n        }, this.#setTimeOutNewsDelay);\n        this.#setTimeOutNewsDelay += 45;\n      });\n    }\n  };\n\n  #evaluateNewsDisplay = () => {\n    if (\n      !this.#newsRendered &&\n      this.news.length > 0 &&\n      this.#newsContainerEl !== undefined\n    ) {\n      this.#displayNews();\n      this.#newsRendered = true;\n    }\n  };\n\n  #evaluateNewsRender = (): HTMLElement => {\n    if (this.newsLoadFailed) {\n      return (\n        <gx-ide-empty-state\n          stateIconSrc={NEWS_ICON}\n          stateTitle={this._componentLocale.recentNews.newsNotFetched.title}\n        >\n          <button\n            class=\"empty-state__button button-primary\"\n            onClick={this.#getNews}\n          >\n            {\n              this._componentLocale.recentNews.newsNotFetched\n                .tryAgainButtonLabel\n            }\n          </button>\n          <a\n            class=\"text-link text-body-regular-s\"\n            href={this._componentLocale.recentNews.newsNotFetched.onlineNewsURL}\n            target=\"_blank\"\n          >\n            {this._componentLocale.recentNews.newsNotFetched.readThemOnline}\n          </a>\n        </gx-ide-empty-state>\n      );\n    }\n    if (this.news.length === 0) {\n      return (\n        <gx-ide-empty-state\n          stateIconSrc={NEWS_ICON}\n          stateTitle={this._componentLocale.recentNews.noNewsToDisplay.title}\n        >\n          <a\n            class=\"empty-state__link text-body-regular-s\"\n            href={this._componentLocale.recentNews.onlineNewsURL}\n            target=\"_blank\"\n          >\n            {this._componentLocale.recentNews.readThemOnline}\n          </a>\n        </gx-ide-empty-state>\n      );\n    }\n    if (this.filteredNews?.length === 0) {\n      return (\n        <gx-ide-empty-state\n          class=\"news-empty-state\"\n          stateIconSrc={NEWS_ICON}\n          stateTitle={this._componentLocale.recentNews.noNewsFiltered.title}\n        ></gx-ide-empty-state>\n      );\n    }\n    return this.#renderNewsList();\n  };\n\n  #getNews = async () => {\n    this.loadingNews = true;\n    const newsResult = await this.getNewsCallback();\n    this.loadingNews = false;\n    if (newsResult && newsResult.length > 0) {\n      this.news = newsResult;\n      this.newsLoadFailed = false;\n    } else {\n      this.newsLoadFailed = true;\n    }\n  };\n\n  #openNewsHandler = (newsId: string) => async () => {\n    await this.openNewsCallback(newsId);\n  };\n\n  #refreshFilteredNews = (filterValue: string, news: NewsData[]) => {\n    this.filteredNews = news.filter(\n      singleNews =>\n        singleNews.title?.toLowerCase().includes(filterValue) ||\n        singleNews.body?.toLowerCase().includes(filterValue)\n    );\n  };\n\n  #renderNewsItem = (news: NewsData): HTMLGxgCardElement | null => {\n    if (news.id && news.title) {\n      return (\n        <article>\n          <button\n            class={{\n              \"card-small\": true,\n              \"card-small--actionable\": true,\n              \"card-news\": true,\n              [this.#NEWS_ITEM_CLASS_SELECTOR]: true,\n              \"visible\": this.#newsRendered\n            }}\n            id={news.id}\n            key={news.id}\n            type=\"button\"\n            onClick={this.#openNewsHandler(news.id)}\n          >\n            <header class=\"card-news__header\">\n              <ch-image src={NEWS_ICON} class=\"icon-md\"></ch-image>\n              <h2 class={config.headingsClasses.cardSmall}>\n                {hiChar(news.title, this.filterValue)}\n              </h2>\n            </header>\n            {news.body && (\n              <p class=\"text-body-regular-s\">\n                {hiChar(news.body, this.filterValue)}\n              </p>\n            )}\n          </button>\n        </article>\n      );\n    }\n    return null;\n  };\n\n  #renderNewsList = (): HTMLElement => (\n    <div\n      class=\"news-container\"\n      ref={el => (this.#newsContainerEl = el as HTMLDivElement)}\n    >\n      {this.filteredNews?.map(this.#renderNewsItem)}\n    </div>\n  );\n\n  render() {\n    return (\n      <Host\n        // Improve accessibility by announcing live changes\n        aria-live=\"polite\"\n        // Wait until all changes are made to prevents assistive\n        // technologies from announcing changes before updates are done\n        aria-busy={this.loadingNews ? \"true\" : \"false\"}\n        class={{ empty: this.filteredNews.length === 0 }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        {this.loadingNews ? (\n          <gx-ide-loader\n            abortTime={8000}\n            loaderTitle={this._componentLocale.loader.title}\n            description={this._componentLocale.loader.description}\n            show={true}\n          ></gx-ide-loader>\n        ) : (\n          this.#evaluateNewsRender()\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/start-page/start-page.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,58 +609,115 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
-:host {
-  display: block;
-  box-shadow: none;
-  height: 100%;
-  overflow: auto;
-  opacity: 0;
-  transition: var(--gx-ide-show-component-delay) opacity;
+.hiChar {
+  color: var(--mer-color__primary-blue--200);
+  filter: brightness(1.3);
 }
 
-:host(.rendered) {
-  opacity: 1;
+:host {
+  overflow: auto;
+  container-type: inline-size;
+  container-name: host;
 }
 
-gxg-tabs {
-  background-color: transparent;
-  box-shadow: none;
-  height: 100% !important;
+.layout-main,
+.layout__panel {
+  block-size: 100%;
   overflow: auto;
 }
 
-.kbs-empty-state {
-  height: 100%;
+@container host (max-width: 768px) {
+  .layout.layout-main {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+}
+.panel-recent-kbs {
+  position: relative;
 }
 
-.layout {
-  height: 100%;
+.recent-kbs,
+.recent-news {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: var(--mer-spacing--md);
   overflow: auto;
 }
-.layout gxg-card {
-  height: 100%;
+.recent-kbs__header,
+.recent-news__header {
+  display: grid;
+  gap: var(--mer-spacing--md);
+}
+
+.kbs-container {
+  display: grid;
+  gap: var(--mer-spacing--xs);
   overflow: auto;
+  grid-auto-rows: max-content;
+  container-type: inline-size;
+  container-name: kb-container;
+  animation: fadeIn var(--mer-timing--super-fast) forwards linear;
 }
 
-.kbs-container,
-.news-container {
+.card-kb {
   display: flex;
-  flex-direction: column;
-  gap: var(--gx-ide-articles-gap);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mer-spacing--lg);
+  container-type: inline-size;
+  container-name: card-kb;
+}
+.card-kb__left-col {
+  display: flex;
+  align-items: center;
+  gap: var(--mer-spacing--sm);
 }
 
-.news-container p:first-child {
-  margin-top: 0;
+@container kb-container (max-width: 360px) {
+  .card-kb {
+    align-items: center;
+    flex-direction: column;
+    gap: var(--mer-spacing--xs);
+    justify-content: start;
+  }
 }
-.news-container p:last-child {
-  margin-bottom: 0;
+gx-ide-recent-news {
+  overflow: auto;
+}
+
+.panel-recent-news {
+  position: relative;
+}
+
+@keyframes exactMatchBright {
+  100% {
+    filter: brightness(1.25);
+  }
+}
+.exact-match-bright {
+  animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4 alternate;
+}
+
+gx-ide-loader::part(loader-wrapper) {
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
 }
 
-gxg-card.section {
-  border-bottom: 2px solid var(--gray-00);
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
 }