@genexus/genexus-ide-ui 1.1.57 → 1.1.58

package/dist/collection/components/launchpad/native-apps/launchpad-native-apps.css

@@ -0,0 +1,185 @@
+/*common card styles applied on "web apps" and "native apps" */
+.object-card {
+  background: var(--mer-surface__elevation--02);
+  border: var(--mer-border__width--sm) solid transparent;
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm);
+  display: flex;
+  gap: var(--mer-spacing--sm);
+  flex-direction: column;
+  flex-shrink: 0;
+  text-align: left;
+}
+.object-card:focus-visible {
+  outline: none;
+  border-color: var(--focus__outline-color);
+}
+.object-card:hover {
+  cursor: pointer;
+  border-color: var(--mer-border-color__primary--hover);
+}
+.object-card:active {
+  border-color: var(--mer-border-color__primary--active);
+}
+
+.platform-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--card-min-inline-size, 300px), var(--card-max-inline-size, 1fr)));
+  gap: var(--mer-spacing--sm);
+  align-items: stretch;
+}
+
+:host {
+  display: block;
+  block-size: 100%;
+  overflow: auto;
+}
+
+.main {
+  overflow: auto;
+  display: block;
+}
+
+ch-accordion-render {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.accordion-content {
+  padding: var(--mer-spacing--md);
+  inline-size: 100%;
+}
+
+.native-apps-accordion {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+/* WA: Platform Section */
+.platform-section {
+  display: flex;
+  align-items: center;
+  gap: var(--mer-spacing--sm);
+}
+
+.app__apple-store {
+  height: 32px;
+  cursor: pointer;
+  transition: opacity var(--mer-timing--fast) ease;
+}
+.app__apple-store:hover {
+  opacity: 0.8;
+}
+
+.platform-grid {
+  --card-min-inline-size: 360px;
+}
+
+.card-content {
+  display: flex;
+  gap: var(--mer-spacing--md);
+  flex: 1;
+  width: 100%;
+}
+.card-content:focus {
+  outline: none;
+}
+
+.info-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.app-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mer-spacing--2xs);
+  flex: 1;
+}
+
+.name {
+  color: var(--mer-text__bright);
+}
+
+.description {
+  color: var(--mer-text__dim);
+  margin: 0;
+  line-height: 1.4;
+}
+
+/* Copy button styles handled by Mercury components/button bundle */
+/* QR Dialog Styles */
+.dialog {
+  --ch-dialog-block-size: 400px;
+  --ch-dialog-inline-size: 350px;
+  --ch-dialog-min-block-size: 400px;
+  --ch-dialog-min-inline-size: 350px;
+}
+
+.qr-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: var(--mer-spacing--sm);
+  border-top: var(--mer-border__width--sm) solid var(--mer-border-color__dim);
+}
+
+/* No Data States */
+.no-data,
+.no-results {
+  color: var(--mer-color__neutral-gray--400);
+  font-style: italic;
+  text-align: center;
+  padding: var(--mer-spacing--md);
+}
+.no-data p,
+.no-results p {
+  font-size: var(--mer-font-size--lg);
+  font-weight: var(--mer-font-weight--medium);
+  line-height: var(--mer-line-height--relaxed);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .platform-grid {
+    justify-content: center;
+  }
+
+  .card-content {
+    flex-direction: column;
+    gap: var(--mer-spacing--sm);
+  }
+
+  .card-actions {
+    flex-direction: column;
+    gap: var(--mer-spacing--sm);
+    align-items: stretch;
+  }
+}
+@media (max-width: 480px) {
+  .main {
+    padding: var(--mer-spacing--sm);
+  }
+
+  .object-card {
+    padding: var(--mer-spacing--sm);
+  }
+
+  .platform-grid {
+    gap: var(--mer-spacing--sm);
+    padding: var(--mer-spacing--sm);
+  }
+}
+.android:after {
+  content: "";
+  display: block;
+}

package/dist/collection/components/launchpad/native-apps/launchpad-native-apps.js

@@ -0,0 +1,274 @@
+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 __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 _GxIdeLaunchpadNativeApps_instances, _GxIdeLaunchpadNativeApps_componentLocale, _GxIdeLaunchpadNativeApps_ACCORDION_MODEL, _GxIdeLaunchpadNativeApps_timeoutIds, _GxIdeLaunchpadNativeApps_getQRFillColor, _GxIdeLaunchpadNativeApps_getQRBackgroundColor, _GxIdeLaunchpadNativeApps_getCopyIcon, _GxIdeLaunchpadNativeApps_getQRIcon, _GxIdeLaunchpadNativeApps_copyToClipboardFunc, _GxIdeLaunchpadNativeApps_openAppStoreFunc, _GxIdeLaunchpadNativeApps_handleQRClick, _GxIdeLaunchpadNativeApps_handleCloseQRDialog, _GxIdeLaunchpadNativeApps_handleObjectClick, _GxIdeLaunchpadNativeApps_renderPlatformSection;
+import { h, getAssetPath } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+import { Locale } from "../../../common/locale";
+const IOS_ID = "ios";
+const ANDROID_ID = "android";
+const APP_STORE_BADGE = getAssetPath("./gx-ide-assets/launchpad-native-apps/images/app-store-badge.svg");
+const ANDROID_LOGO = getAssetPath("./gx-ide-assets/launchpad-native-apps/images/android-logo.svg");
+const MAC_LOGO = getAssetPath("./gx-ide-assets/launchpad-native-apps/images/mac-logo.svg");
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/accordion",
+    "components/button",
+    "components/dialog",
+    "components/icon",
+    "utils/elevation",
+    "utils/layout",
+    "utils/spacing",
+    "utils/typography"
+];
+export class GxIdeLaunchpadNativeApps {
+    constructor() {
+        _GxIdeLaunchpadNativeApps_instances.add(this);
+        _GxIdeLaunchpadNativeApps_componentLocale.set(this, void 0);
+        _GxIdeLaunchpadNativeApps_ACCORDION_MODEL.set(this, []);
+        _GxIdeLaunchpadNativeApps_timeoutIds.set(this, new Set());
+        this.objects = [];
+        this.filterValue = "";
+        this.order = {
+            orderCriteria: null,
+            ascending: null
+        };
+        this.page = 1;
+        this.perPage = 10;
+        this.onObjectSelected = undefined;
+        this.showCopiedMessage = {};
+        this.showQRDialog = false;
+        this.selectedObjectForQR = null;
+    }
+    async componentWillLoad() {
+        try {
+            __classPrivateFieldSet(this, _GxIdeLaunchpadNativeApps_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        }
+        catch (error) {
+            console.error("Error loading locale:", error);
+            __classPrivateFieldSet(this, _GxIdeLaunchpadNativeApps_componentLocale, {}, "f");
+        }
+        __classPrivateFieldSet(this, _GxIdeLaunchpadNativeApps_ACCORDION_MODEL, [
+            {
+                id: IOS_ID,
+                caption: "iOS",
+                expanded: true
+            },
+            {
+                id: ANDROID_ID,
+                caption: "Android",
+                expanded: true
+            }
+        ], "f");
+    }
+    /**
+     * Cleanup method to prevent memory leaks
+     */
+    disconnectedCallback() {
+        if (__classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_timeoutIds, "f")) {
+            __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_timeoutIds, "f").forEach(timeoutId => {
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+            });
+            __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_timeoutIds, "f").clear();
+        }
+    }
+    render() {
+        var _a;
+        if (!this.objects || this.objects.length === 0) {
+            return (h("div", { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "no-data" }, h("p", { class: "body-regular-s" }, ((_a = __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_componentLocale, "f")) === null || _a === void 0 ? void 0 : _a.noData) ||
+                "No native applications data available"))));
+        }
+        return (h("div", { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "main" }, h("ch-accordion-render", { class: "accordion-filled-header elevation-2 native-apps-accordion", model: __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_ACCORDION_MODEL, "f") }, h("div", { slot: IOS_ID, class: "accordion-content spacing-body" }, __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_renderPlatformSection).call(this, IOS_ID)), h("div", { slot: ANDROID_ID, class: "accordion-content spacing-body" }, __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_renderPlatformSection).call(this, ANDROID_ID)))), h("ch-dialog", { class: "dialog", show: this.showQRDialog, "show-header": true, closable: true, "close-button-accessible-name": "Close QR code", onDialogClosed: () => __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_handleCloseQRDialog).call(this) }, this.selectedObjectForQR && (h("div", { class: "qr-container" }, h("ch-qr", { value: this.selectedObjectForQR.url || "", size: 200, "error-correction-level": "Low", class: "qr-code", fill: __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_getQRFillColor).call(this), background: __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_getQRBackgroundColor).call(this) }))))));
+    }
+    static get is() { return "gx-ide-launchpad-native-apps"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["launchpad-native-apps.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["launchpad-native-apps.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/launchpad-native-apps"]; }
+    static get properties() {
+        return {
+            "objects": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PlatformSection[]",
+                    "resolved": "PlatformSection[]",
+                    "references": {
+                        "PlatformSection": {
+                            "location": "global",
+                            "id": "global::PlatformSection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of platform sections (ios, android)"
+                },
+                "defaultValue": "[]"
+            },
+            "onObjectSelected": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: any) => void",
+                    "resolved": "(event: any) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback function for object selection (passed from parent)"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filterValue": {},
+            "order": {},
+            "page": {},
+            "perPage": {},
+            "showCopiedMessage": {},
+            "showQRDialog": {},
+            "selectedObjectForQR": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "copyToClipboard",
+                "name": "copyToClipboard",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when copying to clipboard - like the original version"
+                },
+                "complexType": {
+                    "original": "{ url: string }",
+                    "resolved": "{ url: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "openOnTheAppStore",
+                "name": "openOnTheAppStore",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when opening app store - like the original version"
+                },
+                "complexType": {
+                    "original": "{ url: string }",
+                    "resolved": "{ url: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+_GxIdeLaunchpadNativeApps_componentLocale = new WeakMap(), _GxIdeLaunchpadNativeApps_ACCORDION_MODEL = new WeakMap(), _GxIdeLaunchpadNativeApps_timeoutIds = new WeakMap(), _GxIdeLaunchpadNativeApps_instances = new WeakSet(), _GxIdeLaunchpadNativeApps_getQRFillColor = function _GxIdeLaunchpadNativeApps_getQRFillColor() {
+    const computedStyle = getComputedStyle(document.documentElement);
+    return (computedStyle.getPropertyValue("--mer-text__on-surface").trim() ||
+        computedStyle.getPropertyValue("--mer-color__neutral-gray--200").trim() ||
+        "#49566d");
+}, _GxIdeLaunchpadNativeApps_getQRBackgroundColor = function _GxIdeLaunchpadNativeApps_getQRBackgroundColor() {
+    const computedStyle = getComputedStyle(document.documentElement);
+    return (computedStyle
+        .getPropertyValue("--mer-color__neutral-gray--1000")
+        .trim() || "#ffffff");
+}, _GxIdeLaunchpadNativeApps_getCopyIcon = function _GxIdeLaunchpadNativeApps_getCopyIcon() {
+    return getIconPath({
+        category: "system",
+        name: "copy",
+        colorType: "primary"
+    });
+}, _GxIdeLaunchpadNativeApps_getQRIcon = function _GxIdeLaunchpadNativeApps_getQRIcon() {
+    return getIconPath({
+        category: "system",
+        name: "qr-code",
+        colorType: "neutral"
+    });
+}, _GxIdeLaunchpadNativeApps_copyToClipboardFunc = function _GxIdeLaunchpadNativeApps_copyToClipboardFunc(object) {
+    this.copyToClipboard.emit({
+        url: object.url
+    });
+    if (object.url) {
+        navigator.clipboard
+            .writeText(object.url)
+            .then(() => {
+            const objectKey = `${object.name}-${object.url}`;
+            this.showCopiedMessage = Object.assign(Object.assign({}, this.showCopiedMessage), { [objectKey]: true });
+            const timeoutId = window.setTimeout(() => {
+                this.showCopiedMessage = Object.assign(Object.assign({}, this.showCopiedMessage), { [objectKey]: false });
+                __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_timeoutIds, "f").delete(timeoutId);
+            }, 2000);
+            __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_timeoutIds, "f").add(timeoutId);
+        })
+            .catch(err => {
+            console.error("Failed to copy text: ", err);
+        });
+    }
+}, _GxIdeLaunchpadNativeApps_openAppStoreFunc = function _GxIdeLaunchpadNativeApps_openAppStoreFunc(object) {
+    this.openOnTheAppStore.emit({
+        url: object.url
+    });
+    if (object.url) {
+        window.open(object.url, "_blank");
+    }
+}, _GxIdeLaunchpadNativeApps_handleQRClick = function _GxIdeLaunchpadNativeApps_handleQRClick(object) {
+    this.selectedObjectForQR = object;
+    this.showQRDialog = true;
+}, _GxIdeLaunchpadNativeApps_handleCloseQRDialog = function _GxIdeLaunchpadNativeApps_handleCloseQRDialog() {
+    this.showQRDialog = false;
+    this.selectedObjectForQR = null;
+}, _GxIdeLaunchpadNativeApps_handleObjectClick = function _GxIdeLaunchpadNativeApps_handleObjectClick(object) {
+    if (object.key && this.onObjectSelected) {
+        // Send the full key object as string in format "type|id"
+        const keyString = `${object.key.type}|${object.key.id}`;
+        this.onObjectSelected({ detail: { key: keyString } });
+    }
+}, _GxIdeLaunchpadNativeApps_renderPlatformSection = function _GxIdeLaunchpadNativeApps_renderPlatformSection(platformType) {
+    var _a, _b;
+    const platformIcon = platformType === IOS_ID ? (h("img", { src: MAC_LOGO, alt: "Apple iOS Logo" })) : (h("img", { src: ANDROID_LOGO, alt: "Android Logo" }));
+    const platformSection = this.objects.find(obj => obj.type === platformType);
+    if (!platformSection || platformSection.objects.length === 0) {
+        return (h("div", { class: "no-results" }, h("p", { class: "body-regular-s" }, ((_b = (_a = __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_componentLocale, "f")) === null || _a === void 0 ? void 0 : _a.noPlatformApps) === null || _b === void 0 ? void 0 : _b.replace("{platformType}", platformType)) || `No ${platformType} applications available`)));
+    }
+    return (h("div", { class: "platform-grid" }, platformSection.objects.map((object, index) => {
+        var _a, _b, _c;
+        return (h("div", { key: index, class: "object-card elevation-2", tabindex: "0", onClick: () => __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_handleObjectClick).call(this, object) }, h("div", { class: "card-content" }, h("div", { class: "info-section" }, h("div", { class: "app-info" }, h("h1", { class: "name body-semi-bold-s" }, object.name), object.description && (h("p", { class: "description body-regular-xs" }, object.description))))), h("div", { class: "card-actions" }, object.url && (h("div", { class: "platform-section" }, object["app-store-badge"] ? (h("img", { src: APP_STORE_BADGE, alt: "Download on the App Store", class: "app__apple-store", onClick: () => __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_openAppStoreFunc).call(this, object) })) : (platformIcon), h("button", { class: "button-secondary button-icon-and-text", onClick: () => __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_handleQRClick).call(this, object), "aria-label": "Show QR Code" }, h("ch-image", { class: "icon-md", src: __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_getQRIcon).call(this), type: "mask" }), ((_a = __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_componentLocale, "f")) === null || _a === void 0 ? void 0 : _a.showQR) || "Show QR"))), h("button", { class: "button-tertiary button-icon-and-text copy-button", onClick: () => __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_copyToClipboardFunc).call(this, object), "aria-label": "Copy to clipboard" }, h("ch-image", { class: "icon-md", src: __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_instances, "m", _GxIdeLaunchpadNativeApps_getCopyIcon).call(this) }), this.showCopiedMessage[`${object.name}-${object.url}`]
+            ? ((_b = __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_componentLocale, "f")) === null || _b === void 0 ? void 0 : _b.copied) || "Copied!"
+            : ((_c = __classPrivateFieldGet(this, _GxIdeLaunchpadNativeApps_componentLocale, "f")) === null || _c === void 0 ? void 0 : _c.copy) || "Copy"))));
+    }), 
+    // WA: Prevent card take full width if there is only one card
+    platformSection.objects.length === 1 && h("div", null)));
+};
+//# sourceMappingURL=launchpad-native-apps.js.map

package/dist/collection/components/launchpad/native-apps/launchpad-native-apps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"launchpad-native-apps.js","sourceRoot":"","sources":["../../../../src/components/launchpad/native-apps/launchpad-native-apps.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  getAssetPath\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { AccordionModel } from \"@genexus/chameleon-controls-library\";\n\nimport { Locale } from \"../../../common/locale\";\n\nconst IOS_ID = \"ios\";\nconst ANDROID_ID = \"android\";\n\nconst APP_STORE_BADGE = getAssetPath(\n  \"./gx-ide-assets/launchpad-native-apps/images/app-store-badge.svg\"\n);\nconst ANDROID_LOGO = getAssetPath(\n  \"./gx-ide-assets/launchpad-native-apps/images/android-logo.svg\"\n);\nconst MAC_LOGO = getAssetPath(\n  \"./gx-ide-assets/launchpad-native-apps/images/mac-logo.svg\"\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/accordion\",\n  \"components/button\",\n  \"components/dialog\",\n  \"components/icon\",\n  \"utils/elevation\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"utils/typography\"\n];\n\n@Component({\n  tag: \"gx-ide-launchpad-native-apps\",\n  styleUrl: \"launchpad-native-apps.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/launchpad-native-apps\"]\n})\nexport class GxIdeLaunchpadNativeApps {\n  #componentLocale: any;\n  #ACCORDION_MODEL: AccordionModel = [];\n  #timeoutIds: Set<number> = new Set();\n\n  @Element() el: HTMLGxIdeLaunchpadNativeAppsElement;\n\n  /**\n   * Array of platform sections (ios, android)\n   */\n  @Prop() readonly objects: PlatformSection[] = [];\n\n  /**\n   * Filter value for searching objects\n   */\n  @State() filterValue: string = \"\";\n\n  /**\n   * Sorting order for recent objects table\n   */\n  @State() order: { orderCriteria: string | null; ascending: boolean | null } =\n    {\n      orderCriteria: null,\n      ascending: null\n    };\n\n  /**\n   * Current page for pagination\n   */\n  @State() page: number = 1;\n\n  /**\n   * Items per page for pagination\n   */\n  @State() perPage: number = 10;\n\n  /**\n   * Event emitted when copying to clipboard - like the original version\n   */\n  @Event() copyToClipboard: EventEmitter<{ url: string }>;\n\n  /**\n   * Event emitted when opening app store - like the original version\n   */\n  @Event() openOnTheAppStore: EventEmitter<{ url: string }>;\n\n  /**\n   * Callback function for object selection (passed from parent)\n   */\n  @Prop() onObjectSelected?: (event: any) => void;\n\n  /**\n   * State to track copied messages for each object\n   */\n  @State() showCopiedMessage: { [key: string]: boolean } = {};\n\n  /**\n   * State to control QR dialog visibility\n   */\n  @State() showQRDialog: boolean = false;\n\n  /**\n   * State to store the selected object for QR display\n   */\n  @State() selectedObjectForQR: NativeAppObject | null = null;\n\n  async componentWillLoad() {\n    try {\n      this.#componentLocale = await Locale.getComponentStrings(this.el);\n    } catch (error) {\n      console.error(\"Error loading locale:\", error);\n      this.#componentLocale = {};\n    }\n\n    this.#ACCORDION_MODEL = [\n      {\n        id: IOS_ID,\n        caption: \"iOS\",\n        expanded: true\n      },\n      {\n        id: ANDROID_ID,\n        caption: \"Android\",\n        expanded: true\n      }\n    ];\n  }\n\n  #getQRFillColor(): string {\n    const computedStyle = getComputedStyle(document.documentElement);\n    return (\n      computedStyle.getPropertyValue(\"--mer-text__on-surface\").trim() ||\n      computedStyle.getPropertyValue(\"--mer-color__neutral-gray--200\").trim() ||\n      \"#49566d\"\n    );\n  }\n\n  #getQRBackgroundColor(): string {\n    const computedStyle = getComputedStyle(document.documentElement);\n    return (\n      computedStyle\n        .getPropertyValue(\"--mer-color__neutral-gray--1000\")\n        .trim() || \"#ffffff\"\n    );\n  }\n\n  #getCopyIcon(): string {\n    return getIconPath({\n      category: \"system\",\n      name: \"copy\",\n      colorType: \"primary\"\n    });\n  }\n\n  /**\n   * Gets the QR icon\n   */\n  #getQRIcon(): string {\n    return getIconPath({\n      category: \"system\",\n      name: \"qr-code\",\n      colorType: \"neutral\"\n    });\n  }\n\n  /**\n   * Copies text to clipboard and emits event - like the original version\n   */\n  #copyToClipboardFunc(object: NativeAppObject) {\n    this.copyToClipboard.emit({\n      url: object.url\n    });\n\n    if (object.url) {\n      navigator.clipboard\n        .writeText(object.url)\n        .then(() => {\n          const objectKey = `${object.name}-${object.url}`;\n\n          this.showCopiedMessage = {\n            ...this.showCopiedMessage,\n            [objectKey]: true\n          };\n\n          const timeoutId = window.setTimeout(() => {\n            this.showCopiedMessage = {\n              ...this.showCopiedMessage,\n              [objectKey]: false\n            };\n            this.#timeoutIds.delete(timeoutId);\n          }, 2000);\n\n          this.#timeoutIds.add(timeoutId);\n        })\n        .catch(err => {\n          console.error(\"Failed to copy text: \", err);\n        });\n    }\n  }\n\n  /**\n   * Opens app store and emits event - like the original version\n   */\n  #openAppStoreFunc(object: NativeAppObject) {\n    this.openOnTheAppStore.emit({\n      url: object.url\n    });\n\n    if (object.url) {\n      window.open(object.url, \"_blank\");\n    }\n  }\n\n  /**\n   * Handles QR button click\n   */\n  #handleQRClick(object: NativeAppObject) {\n    this.selectedObjectForQR = object;\n    this.showQRDialog = true;\n  }\n\n  /**\n   * Handles closing QR dialog\n   */\n  #handleCloseQRDialog() {\n    this.showQRDialog = false;\n    this.selectedObjectForQR = null;\n  }\n\n  /**\n   * Handles object click and calls parent callback\n   */\n  #handleObjectClick(object: NativeAppObject) {\n    if (object.key && this.onObjectSelected) {\n      // Send the full key object as string in format \"type|id\"\n      const keyString = `${object.key.type}|${object.key.id}`;\n      this.onObjectSelected({ detail: { key: keyString } });\n    }\n  }\n\n  /**\n   * Cleanup method to prevent memory leaks\n   */\n  disconnectedCallback() {\n    if (this.#timeoutIds) {\n      this.#timeoutIds.forEach(timeoutId => {\n        if (timeoutId) {\n          clearTimeout(timeoutId);\n        }\n      });\n      this.#timeoutIds.clear();\n    }\n  }\n\n  /**\n   * Renders platform section (iOS or Android) with grid layout like the original version\n   */\n  #renderPlatformSection(platformType: string) {\n    const platformIcon =\n      platformType === IOS_ID ? (\n        <img src={MAC_LOGO} alt=\"Apple iOS Logo\"></img>\n      ) : (\n        <img src={ANDROID_LOGO} alt=\"Android Logo\"></img>\n      );\n\n    const platformSection = this.objects.find(obj => obj.type === platformType);\n\n    if (!platformSection || platformSection.objects.length === 0) {\n      return (\n        <div class=\"no-results\">\n          <p class=\"body-regular-s\">\n            {this.#componentLocale?.noPlatformApps?.replace(\n              \"{platformType}\",\n              platformType\n            ) || `No ${platformType} applications available`}\n          </p>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"platform-grid\">\n        {platformSection.objects.map((object, index) => (\n          <div\n            key={index}\n            class=\"object-card elevation-2\"\n            tabindex=\"0\"\n            onClick={() => this.#handleObjectClick(object)}\n          >\n            <div class=\"card-content\">\n              <div class=\"info-section\">\n                <div class=\"app-info\">\n                  <h1 class=\"name body-semi-bold-s\">{object.name}</h1>\n                  {object.description && (\n                    <p class=\"description body-regular-xs\">\n                      {object.description}\n                    </p>\n                  )}\n                </div>\n              </div>\n            </div>\n            <div class=\"card-actions\">\n              {object.url && (\n                <div class=\"platform-section\">\n                  {object[\"app-store-badge\"] ? (\n                    <img\n                      src={APP_STORE_BADGE}\n                      alt=\"Download on the App Store\"\n                      class=\"app__apple-store\"\n                      onClick={() => this.#openAppStoreFunc(object)}\n                    />\n                  ) : (\n                    platformIcon\n                  )}\n                  <button\n                    class=\"button-secondary button-icon-and-text\"\n                    onClick={() => this.#handleQRClick(object)}\n                    aria-label=\"Show QR Code\"\n                  >\n                    <ch-image\n                      class=\"icon-md\"\n                      src={this.#getQRIcon()}\n                      type=\"mask\"\n                    />\n                    {this.#componentLocale?.showQR || \"Show QR\"}\n                  </button>\n                </div>\n              )}\n              <button\n                class=\"button-tertiary button-icon-and-text copy-button\"\n                onClick={() => this.#copyToClipboardFunc(object)}\n                aria-label=\"Copy to clipboard\"\n              >\n                <ch-image class=\"icon-md\" src={this.#getCopyIcon()} />\n                {this.showCopiedMessage[`${object.name}-${object.url}`]\n                  ? this.#componentLocale?.copied || \"Copied!\"\n                  : this.#componentLocale?.copy || \"Copy\"}\n              </button>\n            </div>\n          </div>\n        ))}\n        {\n          // WA: Prevent card take full width if there is only one card\n          platformSection.objects.length === 1 && <div></div>\n        }\n      </div>\n    );\n  }\n\n  render() {\n    if (!this.objects || this.objects.length === 0) {\n      return (\n        <div class=\"widget\">\n          <ch-theme model={CSS_BUNDLES}></ch-theme>\n          <div class=\"no-data\">\n            <p class=\"body-regular-s\">\n              {this.#componentLocale?.noData ||\n                \"No native applications data available\"}\n            </p>\n          </div>\n        </div>\n      );\n    }\n\n    return (\n      <div class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"main\">\n          <ch-accordion-render\n            class=\"accordion-filled-header elevation-2 native-apps-accordion\"\n            model={this.#ACCORDION_MODEL}\n          >\n            <div slot={IOS_ID} class=\"accordion-content spacing-body\">\n              {this.#renderPlatformSection(IOS_ID)}\n            </div>\n            <div slot={ANDROID_ID} class=\"accordion-content spacing-body\">\n              {this.#renderPlatformSection(ANDROID_ID)}\n            </div>\n          </ch-accordion-render>\n        </div>\n\n        <ch-dialog\n          class=\"dialog\"\n          show={this.showQRDialog}\n          show-header={true}\n          closable={true}\n          close-button-accessible-name=\"Close QR code\"\n          onDialogClosed={() => this.#handleCloseQRDialog()}\n        >\n          {this.selectedObjectForQR && (\n            <div class=\"qr-container\">\n              <ch-qr\n                value={this.selectedObjectForQR.url || \"\"}\n                size={200}\n                error-correction-level=\"Low\"\n                class=\"qr-code\"\n                fill={this.#getQRFillColor()}\n                background={this.#getQRBackgroundColor()}\n              ></ch-qr>\n            </div>\n          )}\n        </ch-dialog>\n      </div>\n    );\n  }\n}\n\ninterface NativeAppObject {\n  \"name\": string;\n  \"module\"?: string;\n  \"type\"?: string;\n  \"description\"?: string;\n  \"platform\"?: string;\n  \"url\"?: string;\n  \"generator\"?: string;\n  \"app-store-badge\"?: boolean;\n  \"key\"?: {\n    type: string;\n    id: string;\n  };\n}\n\ninterface PlatformSection {\n  type: string;\n  objects: NativeAppObject[];\n}\n"]}

package/dist/collection/components/launchpad/root/gx-ide-assets/launchpad/langs/launchpad.lang.en.json

@@ -0,0 +1,7 @@
+{
+  "tabs": {
+    "webApps": "Web Apps",
+    "nativeApps": "Native Apps",
+    "apis": "APIS"
+  }
+}

package/dist/collection/components/launchpad/root/gx-ide-assets/launchpad/langs/launchpad.lang.ja.json

@@ -0,0 +1,7 @@
+{
+  "tabs": {
+    "webApps": "WEB APPS",
+    "nativeApps": "NATIVE APPS",
+    "apis": "APIS"
+  }
+}

package/dist/collection/components/launchpad/root/gx-ide-assets/launchpad/langs/launchpad.lang.zh.json

@@ -0,0 +1,7 @@
+{
+  "tabs": {
+    "webApps": "WEB APPS",
+    "nativeApps": "NATIVE APPS",
+    "apis": "APIS"
+  }
+}

package/dist/collection/components/launchpad/root/gx-ide-assets/launchpad/shortcuts.json

@@ -0,0 +1,26 @@
+[
+  {
+    "selector": "[part~='tab-web-apps']",
+    "keyShortcuts": "1",
+    "action": "click",
+    "conditions": {
+      "focusExclude": "[part~='tab-native-apps'], [part~='tab-apis']"
+    }
+  },
+  {
+    "selector": "[part~='tab-native-apps']",
+    "keyShortcuts": "2",
+    "action": "click",
+    "conditions": {
+      "focusExclude": "[part~='tab-web-apps'], [part~='tab-apis']"
+    }
+  },
+  {
+    "selector": "[part~='tab-apis']",
+    "keyShortcuts": "3",
+    "action": "click",
+    "conditions": {
+      "focusExclude": "[part~='tab-web-apps'], [part~='tab-native-apps']"
+    }
+  }
+]

package/dist/collection/components/launchpad/root/launchpad.css

@@ -0,0 +1,22 @@
+:host {
+  display: grid;
+  block-size: 100%;
+  overflow: auto;
+  grid-template-rows: 1fr;
+}
+
+.section {
+  display: contents;
+}
+
+.web-apps,
+.native-apps,
+.apis {
+  padding-block-start: var(--mer-spacing--m);
+  overflow: auto;
+  block-size: 100%;
+}
+
+.tab::part(page) {
+  scrollbar-width: thin;
+}