@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-app-switcher/bs-app-switcher.js

@@ -0,0 +1,902 @@
+import { h } from "@stencil/core";
+let uid = 0;
+const svgProps = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '1.8',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+};
+const SKELETON_TILES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+/**
+ * The panel of an app launcher ("EG apps"): a header with a "Manage" action, a search field, your apps as a
+ * grid (or Recent plus All apps), search results, and a footer link to browse all products. It also has
+ * no-results, loading, error and empty states. Matches the Figma "App switcher" (states Default, With recent,
+ * Searching, No results, Loading, Error and Empty).
+ *
+ * This is the panel only. To open it from a button, wrap it in `bs-popover`.
+ *
+ * Built from `bs-card` (panel surface), `bs-input` (search), `bs-app-tile` and `bs-app-recent-item` (apps),
+ * `bs-empty-state` (no results, error, empty), `bs-skeleton` (loading), `bs-button` (Clear search, Try
+ * again, Request access) and `bs-divider`. "Manage" and "Browse all" are native links (or buttons when
+ * there is no URL): `bs-button` has no link mode and the library has no link component.
+ *
+ * ## When to use
+ * - Letting a user jump between the products they have access to, from an app header.
+ *
+ * ## When not to use
+ * - Navigation inside one app -- use `bs-menu` or the app shell navigation.
+ * - Switching company -- use `bs-company-switcher`.
+ *
+ * `apps` and `recent` are arrays and must be set as JS properties. Each app's `icon` is the URL of a
+ * monochrome SVG. You own the data: listen to `bsAppSelect` (cancelable: `preventDefault()` cancels the
+ * originating click), and drive `status` and `query` yourself. An empty `apps` list while `status` is
+ * `ready` shows the empty state.
+ *
+ * @part panel - The panel surface (`bs-card`).
+ * @part header - The header row.
+ * @part heading - The heading.
+ * @part manage - The Manage link or button.
+ * @part search - The search field wrapper.
+ * @part group - One group (header and its apps).
+ * @part group-header - A group header.
+ * @part grid - A list of tiles.
+ * @part list - A list of rows.
+ * @part tile - An app tile (`bs-app-tile`).
+ * @part row - A recent or result row (`bs-app-recent-item`).
+ * @part empty - The no-results, error or empty state (`bs-empty-state`).
+ * @part footer - The footer.
+ * @part browse - The "Browse all" link or button.
+ * @prop --bs-app-switcher-width - Panel width. Defaults to `360px` (Figma); capped at the viewport.
+ * @prop --bs-app-switcher-radius - Panel corner radius. Aliased to `--bs-border-radius-150`.
+ * @prop --bs-app-switcher-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-app-switcher-border-color - Panel border. Aliased to `--bs-border-default`.
+ * @prop --bs-app-switcher-shadow - Panel shadow (elevation level 4). Aliased to the `--bs-shadow-*` position and blur tokens and `--bs-elevation-higher`.
+ * @prop --bs-app-switcher-padding - Side padding of the content. Aliased to `--bs-spacing-150`.
+ * @prop --bs-app-switcher-text-color - Heading and links in the header. Aliased to `--bs-text-default`.
+ * @prop --bs-app-switcher-header-color - Group headers. Aliased to `--bs-text-secondary`.
+ * @prop --bs-app-switcher-link-color - Browse link. Aliased to `--bs-text-action`.
+ * @prop --bs-app-switcher-focus-ring - Link focus ring. Aliased to `--bs-border-neutral-focus`.
+ */
+export class BsAppSwitcher {
+    el;
+    id = `bs-as-${++uid}`;
+    inputEl;
+    /** The apps the user can open. JS property only (an array cannot be an attribute). */
+    apps = [];
+    /** Recently opened apps, most recent first. When there are any, the panel shows Recent and All apps. JS property only. */
+    recent = [];
+    /** `id` of the app you are in: selected background and `aria-current`. */
+    currentId;
+    /** The search text. Mutable: typing, Escape and "Clear search" update it. */
+    query = '';
+    /** `loading` shows skeleton tiles, `error` the failure state. */
+    status = 'ready';
+    /** URL of the Manage link. Without it Manage is a button that only fires `bsManage`. */
+    manageHref;
+    /** URL of the Browse all link. Without it it is a button that only fires `bsBrowseAll`. */
+    browseHref;
+    /** Panel heading. */
+    heading = 'EG apps';
+    /** Text of the Manage link. */
+    manageLabel = 'Manage';
+    /** Placeholder (and accessible name) of the search field. */
+    searchPlaceholder = 'Find an app';
+    /** Header of the default group when there are no recent apps. */
+    yourAppsLabel = 'Your apps';
+    /** Header of the recent group. */
+    recentLabel = 'Recent';
+    /** Header of the all apps group. */
+    allAppsLabel = 'All apps';
+    /** Search header with several results ("2 results"). */
+    resultsLabel = 'results';
+    /** Search header with one result ("1 result"). */
+    resultLabel = 'result';
+    /** Text of the footer link. */
+    browseLabel = 'Browse all EG products';
+    /** No-results heading. `{query}` is replaced by the query. */
+    noResultsHeading = 'No apps match “{query}”';
+    /** No-results description. */
+    noResultsDescription = 'Check the spelling, or browse all EG products to find more apps.';
+    /** Text of the Clear search button. */
+    clearLabel = 'Clear search';
+    /** Error heading. */
+    errorHeading = 'Couldn’t load your apps';
+    /** Error description. */
+    errorDescription = 'Check your connection and try again. Your work in the current app is not affected.';
+    /** Text of the Try again button. */
+    retryLabel = 'Try again';
+    /** Empty heading (no apps assigned). */
+    emptyHeading = 'No apps assigned yet';
+    /** Empty description. */
+    emptyDescription = 'Ask your administrator for access, or browse all EG products to see what’s available.';
+    /** Text of the Request access button. */
+    requestAccessLabel = 'Request access';
+    /** Announced while loading. */
+    loadingLabel = 'Loading apps…';
+    /** Fires when an app is chosen (click or Enter), with the app. Cancelable: `preventDefault()` cancels the originating click. */
+    bsAppSelect;
+    /** Fires when Manage is pressed. */
+    bsManage;
+    /** Fires when Browse all is pressed. */
+    bsBrowseAll;
+    /** Fires when the search is cleared with the Clear search button or Escape. */
+    bsClearSearch;
+    /** Fires when Try again is pressed. */
+    bsRetry;
+    /** Fires when Request access is pressed. */
+    bsRequestAccess;
+    /** Fires when the search text changes through user interaction, with the new text. */
+    bsQueryChange;
+    get q() {
+        return this.query.trim().toLowerCase();
+    }
+    matches() {
+        const q = this.q;
+        return this.apps.filter(a => a.name.toLowerCase().includes(q) || (a.description ?? '').toLowerCase().includes(q));
+    }
+    recentApps() {
+        return this.recent
+            .map(r => ({ app: this.apps.find(a => a.id === r.appId), recent: r }))
+            .filter((x) => !!x.app);
+    }
+    setQuery(next) {
+        this.query = next;
+        this.bsQueryChange.emit(next);
+    }
+    clear() {
+        if (!this.query)
+            return;
+        this.setQuery('');
+        this.bsClearSearch.emit();
+        this.inputEl?.focus();
+    }
+    onInput = (ev) => {
+        ev.stopPropagation();
+        this.setQuery(ev.detail);
+    };
+    onSearchKeyDown = (ev) => {
+        if (ev.key === 'Escape' && this.query) {
+            // Clear first; a second Escape (empty field) is left alone so a wrapping popover can close.
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.clear();
+        }
+    };
+    select(app, ev) {
+        if (app.disabled)
+            return;
+        const e = this.bsAppSelect.emit(app);
+        if (e.defaultPrevented)
+            ev.preventDefault();
+    }
+    desc(r) {
+        return [r.openedLabel, r.companyName].filter(Boolean).join(' · ');
+    }
+    renderLink(part, cls, href, label, onPress, trailing) {
+        const inner = [label, trailing];
+        return href ? (h("a", { part: part, class: cls, href: href, onClick: onPress }, inner)) : (h("button", { part: part, class: cls, type: "button", onClick: onPress }, inner));
+    }
+    renderTile(app, size) {
+        return (h("li", null, h("bs-app-tile", { part: "tile", size: size, name: app.name, icon: app.icon, disabled: !!app.disabled, current: app.id === this.currentId, onClick: (ev) => this.select(app, ev) })));
+    }
+    renderRow(app, description) {
+        return (h("li", null, h("bs-app-recent-item", { part: "row", name: app.name, description: description, icon: app.icon, disabled: !!app.disabled, current: app.id === this.currentId, onClick: (ev) => this.select(app, ev) })));
+    }
+    renderGroup(key, header, list, kind, size) {
+        const hid = `${this.id}-h-${key}`;
+        return (h("div", { part: "group", class: "bs-app-switcher__group", role: "group", "aria-labelledby": hid }, h("div", { part: "group-header", id: hid, class: "bs-app-switcher__group-header" }, header), h("ul", { part: kind, role: "list", class: { 'bs-app-switcher__grid': kind === 'grid', [`bs-app-switcher__grid--${size}`]: !!size, 'bs-app-switcher__list': kind === 'list' } }, list)));
+    }
+    renderState(heading, description, intent, icon, action) {
+        return (h("bs-empty-state", { part: "empty", class: "bs-app-switcher__empty", heading: heading, description: description, intent: intent }, icon, action));
+    }
+    renderBody() {
+        if (this.status === 'loading') {
+            return (h("div", { class: "bs-app-switcher__body", "aria-busy": "true" }, h("bs-skeleton", { class: "bs-app-switcher__skeleton-header" }), h("ul", { role: "list", class: "bs-app-switcher__grid bs-app-switcher__grid--grid" }, SKELETON_TILES.map(() => (h("li", { class: "bs-app-switcher__skeleton-tile" }, h("bs-skeleton", { variant: "rect", class: "bs-app-switcher__skeleton-icon" }), h("bs-skeleton", { class: "bs-app-switcher__skeleton-label" })))))));
+        }
+        if (this.status === 'error') {
+            return (h("div", { class: "bs-app-switcher__body", role: "alert" }, this.renderState(this.errorHeading, this.errorDescription, 'error', h("svg", { slot: "icon", ...svgProps }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 7.5v5.5M12 16.2v.1" })), h("bs-button", { slot: "action", variant: "outlined", size: "sm", onClick: () => this.bsRetry.emit() }, this.retryLabel))));
+        }
+        if (this.apps.length === 0) {
+            return (h("div", { class: "bs-app-switcher__body" }, this.renderState(this.emptyHeading, this.emptyDescription, 'default', h("svg", { slot: "icon", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, [6, 12, 18].flatMap(x => [6, 12, 18].map(y => h("circle", { cx: x, cy: y, r: "1.5" })))), h("bs-button", { slot: "action", variant: "outlined", size: "sm", onClick: () => this.bsRequestAccess.emit() }, this.requestAccessLabel))));
+        }
+        return [this.renderSearch(), h("div", { class: "bs-app-switcher__body" }, this.renderApps())];
+    }
+    renderSearch() {
+        return (h("div", { part: "search", class: "bs-app-switcher__search", onKeyDown: this.onSearchKeyDown }, h("bs-input", { ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput })));
+    }
+    renderApps() {
+        if (this.q) {
+            const found = this.matches();
+            if (!found.length) {
+                return this.renderState(this.noResultsHeading.replace('{query}', this.query.trim()), this.noResultsDescription, 'default', h("svg", { slot: "icon", ...svgProps }, h("circle", { cx: "11", cy: "11", r: "7" }), h("path", { d: "m20 20-3.5-3.5" })), h("bs-button", { slot: "action", variant: "outlined", size: "sm", onClick: () => this.clear() }, this.clearLabel));
+            }
+            return this.renderGroup('results', `${found.length} ${found.length === 1 ? this.resultLabel : this.resultsLabel}`, found.map(a => this.renderRow(a, a.description)), 'list');
+        }
+        const recent = this.recentApps();
+        if (recent.length) {
+            return [
+                this.renderGroup('recent', this.recentLabel, recent.map(({ app, recent: r }) => this.renderRow(app, this.desc(r))), 'list'),
+                h("bs-divider", { decorative: true, class: "bs-app-switcher__section-divider" }),
+                this.renderGroup('all', this.allAppsLabel, this.apps.map(a => this.renderTile(a, 'compact')), 'grid', 'compact'),
+            ];
+        }
+        return this.renderGroup('yours', this.yourAppsLabel, this.apps.map(a => this.renderTile(a, 'grid')), 'grid', 'grid');
+    }
+    liveText() {
+        if (this.status === 'loading')
+            return this.loadingLabel;
+        if (this.status !== 'ready' || !this.apps.length || !this.q)
+            return '';
+        const n = this.matches().length;
+        return n ? `${n} ${n === 1 ? this.resultLabel : this.resultsLabel}` : this.noResultsHeading.replace('{query}', this.query.trim());
+    }
+    render() {
+        const headingId = `${this.id}-heading`;
+        return (h("bs-card", { key: 'eca37058ac18a9a7faa40caa37aa2291503753c2', part: "panel", class: "bs-app-switcher", surface: "base", role: "region", "aria-labelledby": headingId }, h("div", { key: 'bd0ec6ec6d065d09a6854cd7f93314963d94fcb5', part: "header", class: "bs-app-switcher__header" }, h("h2", { key: '8aa69807c51467c75627e20cad79caad6b42505d', part: "heading", id: headingId, class: "bs-app-switcher__heading" }, this.heading), this.renderLink('manage', 'bs-app-switcher__manage', this.manageHref, this.manageLabel, () => this.bsManage.emit())), h("bs-divider", { key: '1cb1791cf9ab0eb09b772bcb53bb42cf8457c882', decorative: true }), this.renderBody(), h("bs-divider", { key: 'cf069a35387e0c5263f391278b962a464835414b', decorative: true }), h("div", { key: '16764053a5b74e6afb90bf29e27cc76e107c8e4a', part: "footer", class: "bs-app-switcher__footer" }, this.renderLink('browse', 'bs-app-switcher__browse', this.browseHref, this.browseLabel, () => this.bsBrowseAll.emit(), h("svg", { class: "bs-app-switcher__external", ...svgProps }, h("path", { d: "M7 17 17 7M8 7h9v9" })))), h("span", { key: '943b9d2acca5e67fa8ff481bcf381c3bf9842641', class: "bs-app-switcher__live", role: "status" }, this.liveText())));
+    }
+    static get is() { return "bs-app-switcher"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-app-switcher.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-app-switcher.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "apps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsApp[]",
+                    "resolved": "BsApp[]",
+                    "references": {
+                        "BsApp": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-app-switcher/bs-app-switcher.tsx",
+                            "id": "src/components/bs-app-switcher/bs-app-switcher.tsx::BsApp"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The apps the user can open. JS property only (an array cannot be an attribute)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "recent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsAppRecent[]",
+                    "resolved": "BsAppRecent[]",
+                    "references": {
+                        "BsAppRecent": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-app-switcher/bs-app-switcher.tsx",
+                            "id": "src/components/bs-app-switcher/bs-app-switcher.tsx::BsAppRecent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Recently opened apps, most recent first. When there are any, the panel shows Recent and All apps. JS property only."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "currentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the app you are in: selected background and `aria-current`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-id"
+            },
+            "query": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The search text. Mutable: typing, Escape and \"Clear search\" update it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "query",
+                "defaultValue": "''"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsAppSwitcherStatus",
+                    "resolved": "\"error\" | \"loading\" | \"ready\"",
+                    "references": {
+                        "BsAppSwitcherStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-app-switcher/bs-app-switcher.tsx",
+                            "id": "src/components/bs-app-switcher/bs-app-switcher.tsx::BsAppSwitcherStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`loading` shows skeleton tiles, `error` the failure state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'ready'"
+            },
+            "manageHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the Manage link. Without it Manage is a button that only fires `bsManage`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "manage-href"
+            },
+            "browseHref": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the Browse all link. Without it it is a button that only fires `bsBrowseAll`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "browse-href"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Panel heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'EG apps'"
+            },
+            "manageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the Manage link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "manage-label",
+                "defaultValue": "'Manage'"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder (and accessible name) of the search field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Find an app'"
+            },
+            "yourAppsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the default group when there are no recent apps."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "your-apps-label",
+                "defaultValue": "'Your apps'"
+            },
+            "recentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the recent group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recent-label",
+                "defaultValue": "'Recent'"
+            },
+            "allAppsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the all apps group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "all-apps-label",
+                "defaultValue": "'All apps'"
+            },
+            "resultsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search header with several results (\"2 results\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "results-label",
+                "defaultValue": "'results'"
+            },
+            "resultLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search header with one result (\"1 result\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "result-label",
+                "defaultValue": "'result'"
+            },
+            "browseLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the footer link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "browse-label",
+                "defaultValue": "'Browse all EG products'"
+            },
+            "noResultsHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "No-results heading. `{query}` is replaced by the query."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-results-heading",
+                "defaultValue": "'No apps match \u201C{query}\u201D'"
+            },
+            "noResultsDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "No-results description."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-results-description",
+                "defaultValue": "'Check the spelling, or browse all EG products to find more apps.'"
+            },
+            "clearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the Clear search button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-label",
+                "defaultValue": "'Clear search'"
+            },
+            "errorHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-heading",
+                "defaultValue": "'Couldn\u2019t load your apps'"
+            },
+            "errorDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error description."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-description",
+                "defaultValue": "'Check your connection and try again. Your work in the current app is not affected.'"
+            },
+            "retryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the Try again button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "retry-label",
+                "defaultValue": "'Try again'"
+            },
+            "emptyHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty heading (no apps assigned)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-heading",
+                "defaultValue": "'No apps assigned yet'"
+            },
+            "emptyDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty description."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-description",
+                "defaultValue": "'Ask your administrator for access, or browse all EG products to see what\u2019s available.'"
+            },
+            "requestAccessLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the Request access button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "request-access-label",
+                "defaultValue": "'Request access'"
+            },
+            "loadingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Announced while loading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading-label",
+                "defaultValue": "'Loading apps\u2026'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsAppSelect",
+                "name": "bsAppSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when an app is chosen (click or Enter), with the app. Cancelable: `preventDefault()` cancels the originating click."
+                },
+                "complexType": {
+                    "original": "BsApp",
+                    "resolved": "BsApp",
+                    "references": {
+                        "BsApp": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-app-switcher/bs-app-switcher.tsx",
+                            "id": "src/components/bs-app-switcher/bs-app-switcher.tsx::BsApp"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsManage",
+                "name": "bsManage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Manage is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsBrowseAll",
+                "name": "bsBrowseAll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Browse all is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsClearSearch",
+                "name": "bsClearSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the search is cleared with the Clear search button or Escape."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRetry",
+                "name": "bsRetry",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Try again is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRequestAccess",
+                "name": "bsRequestAccess",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when Request access is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsQueryChange",
+                "name": "bsQueryChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the search text changes through user interaction, with the new text."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}