@brandsync/wc 1.17.0 → 1.19.0

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

@@ -0,0 +1,720 @@
+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 initialsOf = (name) => name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(w => w[0].toUpperCase())
+    .join('');
+const digits = (s) => s.replace(/\s+/g, '');
+/**
+ * A company (tenant) switcher: a trigger showing the current company, and a panel to find and switch to
+ * another one. The panel has a search field, the current / recent / all groups, a filtered "matches" view,
+ * a no-results state and a footer with "Manage Companies" and "Add companies" actions.
+ *
+ * Built from `bs-popover` (open/close, Escape, outside click, flipping), `bs-card` (panel surface),
+ * `bs-input` (search), `bs-list-item` (rows), `bs-avatar` (initials), `bs-spinner` (switching),
+ * `bs-empty-state` (no results), `bs-divider` and `bs-button` (footer). The trigger is a native `<button>`:
+ * no `bs-*` component is a composite "avatar + two lines + chevron" button.
+ *
+ * ## When to use
+ * - An app header or side navigation where a user belongs to several companies and works in one at a time.
+ *
+ * ## When not to use
+ * - Picking a value in a form -- use `bs-input type="dropdown"`.
+ * - Switching between a handful of fixed views -- use `bs-tab`.
+ *
+ * `companies` is an array and must be set as a JS property. You own the data and the switch itself: listen to
+ * `bsCompanySwitch`, do the work, then update `currentId`. To show the switching state set `switchingId`
+ * (from the `bsCompanySwitch` handler, or later) and the panel stays open until you clear it and set `open`
+ * to `false`. If `switchingId` is not set by the time the handler returns, the panel closes immediately.
+ *
+ * @part trigger - The trigger button.
+ * @part avatar - The trigger's `bs-avatar`.
+ * @part name - The company name in the trigger.
+ * @part subtitle - The org. number (or "Switching…") line in the trigger.
+ * @part panel - The panel surface (`bs-card`).
+ * @part search - The search field wrapper (combobox).
+ * @part list - The listbox.
+ * @part group - One group (header and rows).
+ * @part group-header - A group header.
+ * @part row - A company row (`bs-list-item`).
+ * @part empty - The no-results state (`bs-empty-state`).
+ * @part footer - The footer actions.
+ * @prop --bs-company-switcher-width - Trigger width. Defaults to `260px` (Figma); capped at 100%.
+ * @prop --bs-company-switcher-panel-width - Panel width. Defaults to `360px` (Figma); capped at the viewport.
+ * @prop --bs-company-switcher-radius - Trigger and panel corner radius. Aliased to `--bs-border-radius-100`.
+ * @prop --bs-company-switcher-trigger-bg - Trigger resting background. `transparent`.
+ * @prop --bs-company-switcher-trigger-bg-hover - Aliased to `--bs-surface-hover`.
+ * @prop --bs-company-switcher-trigger-bg-pressed - Aliased to `--bs-surface-pressed`.
+ * @prop --bs-company-switcher-trigger-bg-open - Aliased to `--bs-surface-selected`.
+ * @prop --bs-company-switcher-focus-ring - Trigger focus outline. Aliased to `--bs-border-neutral-focus`.
+ * @prop --bs-company-switcher-panel-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-company-switcher-panel-border-color - Panel border. Aliased to `--bs-border-default`.
+ * @prop --bs-company-switcher-shadow - Panel shadow. Aliased to `--bs-shadow-md`.
+ * @prop --bs-company-switcher-max-height - Maximum height of the scrolling list. Defaults to `320px`.
+ * @prop --bs-company-switcher-text-color - Names. Aliased to `--bs-text-default`.
+ * @prop --bs-company-switcher-muted-color - Org. numbers. Aliased to `--bs-text-secondary`.
+ * @prop --bs-company-switcher-header-color - Group headers. Aliased to `--bs-text-muted`.
+ * @prop --bs-company-switcher-z-index - Panel stacking. Aliased to `--bs-z-index-popover`.
+ */
+export class BsCompanySwitcher {
+    el;
+    id = `bs-cs-${++uid}`;
+    inputEl;
+    focusSearch = false;
+    /** The companies the user can switch between. JS property only (an array cannot be an attribute). */
+    companies = [];
+    /** `id` of the current company. */
+    currentId;
+    /** `id`s of recently used companies, most recent first. The current company is not repeated in the Recent group. */
+    recentIds = [];
+    /** `id` of the company being switched to. Shows the switching state: a spinner in the trigger and on that row. */
+    switchingId;
+    /** Whether the panel is open. */
+    open = false;
+    /** Text of the trigger when there is no current company. */
+    placeholderLabel = 'Select a company';
+    /** Placeholder (and accessible name) of the search field. */
+    searchPlaceholder = 'Find a company or org. number';
+    /** Accessible name of the company listbox. */
+    listLabel = 'Companies';
+    /** Header of the current company group. */
+    currentLabel = 'Current';
+    /** Header of the recent companies group. */
+    recentLabel = 'Recent';
+    /** Header of the all companies group (the count is appended). */
+    allLabel = 'All companies';
+    /** Header of the search view when there are several matches ("3 matches"). */
+    matchesLabel = 'matches';
+    /** Header of the search view when there is one match ("1 match"). */
+    matchLabel = 'match';
+    /** Prefix of the org. number, e.g. "Org. no.". */
+    orgNumberLabel = 'Org. no.';
+    /** Trigger subtitle while switching. */
+    switchingLabel = 'Switching…';
+    /** No-results heading. `{query}` is replaced by the query. */
+    emptyHeading = 'No companies match “{query}”';
+    /** No-results description. */
+    emptyDescription = 'Check the spelling, or search by org. number.';
+    /** Text of the "Manage Companies" footer button. */
+    manageLabel = 'Manage Companies';
+    /** Text of the "Add companies" footer button. */
+    addLabel = 'Add companies';
+    query = '';
+    activeId = null;
+    /** Fires when a company other than the current one is chosen (click or Enter), with the company. */
+    bsCompanySwitch;
+    /** Fires when "Manage Companies" is pressed. */
+    bsManageCompanies;
+    /** Fires when "Add companies" is pressed. */
+    bsAddCompanies;
+    /** Fires when the panel opens or closes through user interaction, with the new state. */
+    bsOpenChange;
+    onOpen(next) {
+        this.query = '';
+        this.activeId = null;
+        this.focusSearch = next;
+    }
+    componentDidRender() {
+        if (this.open && this.focusSearch) {
+            this.focusSearch = false;
+            this.inputEl?.focus();
+        }
+    }
+    byId(id) {
+        return id ? this.companies.find(c => c.id === id) : undefined;
+    }
+    get q() {
+        return this.query.trim().toLowerCase();
+    }
+    matches() {
+        const q = this.q;
+        const qd = digits(q);
+        return this.companies.filter(c => c.name.toLowerCase().includes(q) || digits(c.orgNumber).includes(qd));
+    }
+    groups() {
+        if (this.q) {
+            const items = this.matches();
+            if (!items.length)
+                return [];
+            return [{ key: 'matches', header: `${items.length} ${items.length === 1 ? this.matchLabel : this.matchesLabel}`, items }];
+        }
+        const current = this.byId(this.currentId);
+        const recent = this.recentIds.map(i => this.byId(i)).filter((c) => !!c && c.id !== this.currentId);
+        const shown = new Set([current?.id, ...recent.map(c => c.id)]);
+        const rest = this.companies.filter(c => !shown.has(c.id));
+        const out = [];
+        if (current)
+            out.push({ key: 'current', header: this.currentLabel, items: [current] });
+        if (recent.length)
+            out.push({ key: 'recent', header: this.recentLabel, items: recent });
+        if (rest.length)
+            out.push({ key: 'all', header: `${this.allLabel} · ${rest.length}`, items: rest });
+        return out;
+    }
+    rowId(c) {
+        return `${this.id}-opt-${c.id}`;
+    }
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    choose(c) {
+        if (c.id === this.currentId || c.id === this.switchingId) {
+            this.setOpen(false);
+            return;
+        }
+        this.bsCompanySwitch.emit(c);
+        // The consumer asks for the switching state from its handler; otherwise there is nothing to wait for.
+        if (!this.switchingId)
+            this.setOpen(false);
+    }
+    onPopoverOpenChange = (ev) => {
+        // bs-popover's own event would bubble out of this host too; ours replaces it.
+        ev.stopPropagation();
+        this.setOpen(ev.detail);
+    };
+    onInput = (ev) => {
+        ev.stopPropagation();
+        this.query = ev.detail;
+        this.activeId = null;
+    };
+    onKeyDown = (ev) => {
+        if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp' && ev.key !== 'Enter')
+            return;
+        const rows = this.groups().flatMap(g => g.items);
+        if (ev.key === 'Enter') {
+            const active = rows.find(c => this.rowId(c) === this.activeId);
+            if (active) {
+                ev.preventDefault();
+                this.choose(active);
+            }
+            return;
+        }
+        ev.preventDefault();
+        if (!rows.length)
+            return;
+        const idx = rows.findIndex(c => this.rowId(c) === this.activeId);
+        const next = ev.key === 'ArrowDown' ? (idx + 1) % rows.length : idx <= 0 ? rows.length - 1 : idx - 1;
+        this.activeId = this.rowId(rows[next]);
+        // Wait for the re-render so the row exists with its new state before scrolling to it.
+        requestAnimationFrame(() => this.el.shadowRoot?.getElementById(this.activeId ?? '')?.scrollIntoView?.({ block: 'nearest' }));
+    };
+    subtitle(c) {
+        return `${c.country} · ${this.orgNumberLabel} ${c.orgNumber}`;
+    }
+    renderTrigger() {
+        const switching = this.byId(this.switchingId);
+        const shown = switching ?? this.byId(this.currentId);
+        return (h("button", { slot: "trigger", part: "trigger", type: "button", class: "bs-company-switcher__trigger", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-busy": switching ? 'true' : undefined }, h("span", { "aria-hidden": "true", class: "bs-company-switcher__avatar" }, shown ? h("bs-avatar", { part: "avatar", type: "initials", size: "sm", initials: initialsOf(shown.name) }) : h("bs-avatar", { part: "avatar", type: "icon", size: "sm" })), h("span", { class: "bs-company-switcher__text" }, h("span", { part: "name", class: "bs-company-switcher__name" }, shown ? shown.name : this.placeholderLabel), shown && (h("span", { part: "subtitle", class: "bs-company-switcher__subtitle" }, switching ? this.switchingLabel : `${this.orgNumberLabel} ${shown.orgNumber}`))), switching ? (h("bs-spinner", { class: "bs-company-switcher__trail", size: "sm", label: this.switchingLabel })) : (h("svg", { class: "bs-company-switcher__trail bs-company-switcher__chevron", ...svgProps }, h("path", { d: "m6 9 6 6 6-6" })))));
+    }
+    renderRow(c) {
+        const id = this.rowId(c);
+        const isCurrent = c.id === this.currentId;
+        const isSwitching = c.id === this.switchingId;
+        return (h("bs-list-item", { part: "row", id: id, class: { 'bs-company-switcher__row': true, 'bs-company-switcher__row--active': this.activeId === id }, selectionRole: "option", value: c.id, selected: isCurrent, "aria-busy": isSwitching ? 'true' : undefined, onMouseEnter: () => (this.activeId = id), onBsItemClick: (ev) => {
+                ev.stopPropagation();
+                this.choose(c);
+            } }, h("span", { slot: "leading", "aria-hidden": "true" }, h("bs-avatar", { type: "initials", size: "sm", initials: initialsOf(c.name) })), h("span", { class: "bs-company-switcher__row-name" }, c.name), h("span", { class: "bs-company-switcher__row-sub" }, this.subtitle(c)), isSwitching ? (h("bs-spinner", { slot: "trailing", size: "sm", label: this.switchingLabel })) : isCurrent ? (h("svg", { slot: "trailing", class: "bs-company-switcher__check", ...svgProps }, h("path", { d: "m5 12.5 4.5 4.5L19 7.5" }))) : null));
+    }
+    render() {
+        const groups = this.groups();
+        const empty = !!this.q && groups.length === 0;
+        const listId = `${this.id}-listbox`;
+        const total = groups.reduce((n, g) => n + g.items.length, 0);
+        return (h("bs-popover", { key: '9ce15612a22c2401bdeb75f5dbae869d76d9310c', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: '848ef0a3498aa67b55b4c1885c88b6e7b9e4534d', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: '9ec54e9e78fb33c4e8049691ca8fb391ad05fa42', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: '222550548c6bdd41584a1a7c55c6e0bf23d07b8b', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": "true", "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd0dd2042031a45ab83b1cb857268df097f2dff5f', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: '28343988f512c3515cd69a6b766d9990cd63d23a', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
+            const hid = `${this.id}-h-${g.key}`;
+            return (h("div", { part: "group", class: "bs-company-switcher__group", role: "group", "aria-labelledby": hid }, h("div", { part: "group-header", id: hid, class: "bs-company-switcher__group-header" }, g.header), g.items.map(c => this.renderRow(c))));
+        }))), empty && (h("bs-empty-state", { key: 'd4918f499f405f08d1874646442b9a529ae9fd3f', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: 'da86a364c21c7b3dbb3121750b022d348f2ecdab', slot: "icon", ...svgProps }, h("circle", { key: 'f81525086c48f928325c2532089b69ede5528e33', cx: "11", cy: "11", r: "7" }), h("path", { key: '490f2df2b35e29cdff08a60c1d63fb2fdd9ef1a7', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '9a1997a336530026eab0743cbe7cca26f5c4da23', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: '361ca8743c2c50fcaadc0541b9a3ceac1289f471', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '0dc207fc2719f926fba2859be9130bb28bee652a', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '5ba9707f09ab325c7f7edff7fbec22196656ad8c', slot: "icon", ...svgProps }, h("circle", { key: '5f99a660c029225dbceb38347c5a6a4141ecbaaf', cx: "12", cy: "12", r: "3" }), h("path", { key: '7f3aec8c463210e81e079051d3a13f0550e6d27c', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: 'f6204900c1e1f21b59d02a770339c0471efdc379', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: '2381e1068dbd3785995f6946c6215b743feeb323', slot: "icon", ...svgProps }, h("path", { key: '7decd85389ffd646e48d501126b99bc4498604be', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '36cb6c11fa0a3f51985a5272dce01441f8127fb0', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
+    }
+    static get is() { return "bs-company-switcher"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-company-switcher.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-company-switcher.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "companies": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsCompany[]",
+                    "resolved": "BsCompany[]",
+                    "references": {
+                        "BsCompany": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-company-switcher/bs-company-switcher.tsx",
+                            "id": "src/components/bs-company-switcher/bs-company-switcher.tsx::BsCompany"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The companies the user can switch between. JS property only (an array cannot be an attribute)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "currentId": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the current company."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-id"
+            },
+            "recentIds": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`id`s of recently used companies, most recent first. The current company is not repeated in the Recent group."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "switchingId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "`id` of the company being switched to. Shows the switching state: a spinner in the trigger and on that row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "switching-id"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is open."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placeholderLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the trigger when there is no current company."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder-label",
+                "defaultValue": "'Select a company'"
+            },
+            "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 a company or org. number'"
+            },
+            "listLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the company listbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "list-label",
+                "defaultValue": "'Companies'"
+            },
+            "currentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the current company group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "current-label",
+                "defaultValue": "'Current'"
+            },
+            "recentLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the recent companies group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recent-label",
+                "defaultValue": "'Recent'"
+            },
+            "allLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the all companies group (the count is appended)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "all-label",
+                "defaultValue": "'All companies'"
+            },
+            "matchesLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the search view when there are several matches (\"3 matches\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "matches-label",
+                "defaultValue": "'matches'"
+            },
+            "matchLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Header of the search view when there is one match (\"1 match\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "match-label",
+                "defaultValue": "'match'"
+            },
+            "orgNumberLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Prefix of the org. number, e.g. \"Org. no.\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "org-number-label",
+                "defaultValue": "'Org. no.'"
+            },
+            "switchingLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Trigger subtitle while switching."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "switching-label",
+                "defaultValue": "'Switching\u2026'"
+            },
+            "emptyHeading": {
+                "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": "empty-heading",
+                "defaultValue": "'No companies match \u201C{query}\u201D'"
+            },
+            "emptyDescription": {
+                "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": "empty-description",
+                "defaultValue": "'Check the spelling, or search by org. number.'"
+            },
+            "manageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the \"Manage Companies\" footer button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "manage-label",
+                "defaultValue": "'Manage Companies'"
+            },
+            "addLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text of the \"Add companies\" footer button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "add-label",
+                "defaultValue": "'Add companies'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "activeId": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsCompanySwitch",
+                "name": "bsCompanySwitch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when a company other than the current one is chosen (click or Enter), with the company."
+                },
+                "complexType": {
+                    "original": "BsCompany",
+                    "resolved": "BsCompany",
+                    "references": {
+                        "BsCompany": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-company-switcher/bs-company-switcher.tsx",
+                            "id": "src/components/bs-company-switcher/bs-company-switcher.tsx::BsCompany"
+                        }
+                    }
+                }
+            }, {
+                "method": "bsManageCompanies",
+                "name": "bsManageCompanies",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when \"Manage Companies\" is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsAddCompanies",
+                "name": "bsAddCompanies",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when \"Add companies\" is pressed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsOpenChange",
+                "name": "bsOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the panel opens or closes through user interaction, with the new state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpen"
+            }];
+    }
+}