@ds-mo/ui 9.2.0 → 9.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -79
- package/dist/.build-stamp +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +17 -1
- package/dist/angular/ds-avatar.d.ts +1 -1
- package/dist/angular/ds-avatar.js +3 -3
- package/dist/angular/ds-conversation-list-item.d.ts +1 -1
- package/dist/angular/ds-conversation-list-item.js +3 -3
- package/dist/angular/ds-menu.d.ts +6 -1
- package/dist/angular/ds-menu.js +5 -2
- package/dist/angular/ds-panel-nav.d.ts +1 -1
- package/dist/angular/ds-panel-nav.js +3 -3
- package/dist/components/ds-agent-activity.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-agent-response.js.map +1 -1
- package/dist/components/ds-agent-source-list.js +1 -1
- package/dist/components/ds-agent-tool-call.js +1 -1
- package/dist/components/ds-attachment-list.js +1 -1
- package/dist/components/ds-avatar.js +1 -1
- package/dist/components/ds-avatar.js.map +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card-shell-data-viz.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list-item.js +1 -1
- package/dist/components/ds-conversation-list-item.js.map +1 -1
- package/dist/components/ds-conversation-list-section.js +1 -1
- package/dist/components/ds-conversation-list-section.js.map +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-conversation-list.js.map +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-icon.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-bubble.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-composer.js.map +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-message-scroller.js.map +1 -1
- package/dist/components/ds-message.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/ds-select-multi.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-slider.js.map +1 -1
- package/dist/components/ds-switch.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-tag.js.map +1 -1
- package/dist/components/{p-Di-ThR90.js → p-BHpWYKtP.js} +2 -2
- package/dist/components/p-BHpWYKtP.js.map +1 -0
- package/dist/components/p-BRfOCc_h.js +2 -0
- package/dist/components/p-BRfOCc_h.js.map +1 -0
- package/dist/components/{p-BEQB8EnB.js → p-CBYuvZKM.js} +2 -2
- package/dist/components/{p-BFWC17em.js → p-CJlgONwR.js} +2 -2
- package/dist/components/p-CWNdl52Y.js +2 -0
- package/dist/components/p-CWNdl52Y.js.map +1 -0
- package/dist/components/{p-BZAEZENv.js → p-CblAABEo.js} +2 -2
- package/dist/components/{p--KbMQblZ.js → p-CeFBA7Dx.js} +2 -2
- package/dist/components/p-CiKGqsA2.js +2 -0
- package/dist/components/{p-CnM9SW_8.js.map → p-CiKGqsA2.js.map} +1 -1
- package/dist/components/{p-2br9YDbG.js → p-Ci_nVk5P.js} +2 -2
- package/dist/components/p-Cijzn3YQ.js +2 -0
- package/dist/components/p-Cijzn3YQ.js.map +1 -0
- package/dist/components/p-DFxqk71w.js +2 -0
- package/dist/components/p-DFxqk71w.js.map +1 -0
- package/dist/components/{p-C0sq948W.js → p-DaQ0ZE_V.js} +2 -2
- package/dist/components/{p-t9Ei1kHP.js → p-DiooIO2B.js} +2 -2
- package/dist/components/{p-DIsDiGcp.js → p-Dj5MejHv.js} +2 -2
- package/dist/components/p-Dj5MejHv.js.map +1 -0
- package/dist/components/{p-Bo5wikia.js → p-DnMCRAwx.js} +2 -2
- package/dist/components/{p-CZMEhdlA.js → p-Dst-OliP.js} +2 -2
- package/dist/components/p-Dst-OliP.js.map +1 -0
- package/dist/components/p-T0Mzhv3-.js +2 -0
- package/dist/components/p-T0Mzhv3-.js.map +1 -0
- package/dist/components/{p-Bx1G7P6W.js → p-kezp2_Xu.js} +2 -2
- package/dist/components/{p-Di4HBckb.js → p-xB0GPG3-.js} +2 -2
- package/dist/docs/components.json +291 -11
- package/dist/mcp-data/registry/agent-response.json +1 -1
- package/dist/mcp-data/registry/avatar.json +19 -1
- package/dist/mcp-data/registry/bar-nav.json +1 -1
- package/dist/mcp-data/registry/button-unfilled.json +2 -2
- package/dist/mcp-data/registry/code-block.json +1 -1
- package/dist/mcp-data/registry/conversation-list-item.json +20 -2
- package/dist/mcp-data/registry/conversation-list-section.json +1 -1
- package/dist/mcp-data/registry/conversation-list.json +1 -1
- package/dist/mcp-data/registry/markdown.json +1 -1
- package/dist/mcp-data/registry/menu.json +17 -1
- package/dist/mcp-data/registry/message-bubble.json +1 -1
- package/dist/mcp-data/registry/message-composer.json +1 -1
- package/dist/mcp-data/registry/message-scroller.json +2 -2
- package/dist/mcp-data/registry/message.json +2 -2
- package/dist/mcp-data/registry/panel-nav.json +20 -2
- package/dist/mcp-data/registry/panel-tool-header.json +1 -1
- package/dist/mcp-data/registry/panel-tools.json +1 -1
- package/dist/mcp-data/registry/registry.json +16 -0
- package/dist/mcp-data/registry/slider.json +1 -1
- package/dist/mcp-data/registry/switch.json +1 -1
- package/dist/mcp-data/registry/tag.json +2 -2
- package/dist/react/ds-menu.d.ts +1 -0
- package/dist/react/ds-menu.js +1 -0
- package/dist/types/components/Avatar/Avatar.d.ts +3 -0
- package/dist/types/components/BarNav/BarNav.d.ts +2 -0
- package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts +2 -0
- package/dist/types/components/ConversationListItem/ConversationListItem.d.ts +2 -0
- package/dist/types/components/Menu/Menu.d.ts +6 -0
- package/dist/types/components/MessageScroller/MessageScroller.d.ts +4 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +2 -0
- package/dist/types/components.d.ts +44 -6
- package/package.json +8 -11
- package/dist/components/p-41UAx2eq.js +0 -2
- package/dist/components/p-41UAx2eq.js.map +0 -1
- package/dist/components/p-B7NbIYjS.js +0 -2
- package/dist/components/p-B7NbIYjS.js.map +0 -1
- package/dist/components/p-CC1C8s6m.js +0 -2
- package/dist/components/p-CC1C8s6m.js.map +0 -1
- package/dist/components/p-CZMEhdlA.js.map +0 -1
- package/dist/components/p-CnM9SW_8.js +0 -2
- package/dist/components/p-CuKn9I5f.js +0 -2
- package/dist/components/p-CuKn9I5f.js.map +0 -1
- package/dist/components/p-DFMM60My.js +0 -2
- package/dist/components/p-DFMM60My.js.map +0 -1
- package/dist/components/p-DIsDiGcp.js.map +0 -1
- package/dist/components/p-Di-ThR90.js.map +0 -1
- /package/dist/components/{p-BEQB8EnB.js.map → p-CBYuvZKM.js.map} +0 -0
- /package/dist/components/{p-BFWC17em.js.map → p-CJlgONwR.js.map} +0 -0
- /package/dist/components/{p-BZAEZENv.js.map → p-CblAABEo.js.map} +0 -0
- /package/dist/components/{p--KbMQblZ.js.map → p-CeFBA7Dx.js.map} +0 -0
- /package/dist/components/{p-2br9YDbG.js.map → p-Ci_nVk5P.js.map} +0 -0
- /package/dist/components/{p-C0sq948W.js.map → p-DaQ0ZE_V.js.map} +0 -0
- /package/dist/components/{p-t9Ei1kHP.js.map → p-DiooIO2B.js.map} +0 -0
- /package/dist/components/{p-Bo5wikia.js.map → p-DnMCRAwx.js.map} +0 -0
- /package/dist/components/{p-Bx1G7P6W.js.map → p-kezp2_Xu.js.map} +0 -0
- /package/dist/components/{p-Di4HBckb.js.map → p-xB0GPG3-.js.map} +0 -0
package/README.md
CHANGED
|
@@ -114,82 +114,3 @@ Components that accept icons use a named `icon` slot:
|
|
|
114
114
|
```
|
|
115
115
|
|
|
116
116
|
`icon` / `name` must be a canonical IcoMo export key (`ArrowRight`, `Bell`, …).
|
|
117
|
-
|
|
118
|
-
## Figma Code Connect
|
|
119
|
-
|
|
120
|
-
This repo includes [Figma Code Connect](https://developers.figma.com/docs/code-connect/) templates under `code-connect/` so Dev Mode can show curated snippets (e.g. React wrappers from `@ds-mo/ui/react`).
|
|
121
|
-
|
|
122
|
-
**Prerequisites**
|
|
123
|
-
|
|
124
|
-
- Node **20.19+** or **22.12+** (see `package.json` `engines` and `.nvmrc`).
|
|
125
|
-
- A Figma **personal access token** with **Code Connect (Write)** and **File content (Read)**. Set it locally only — never commit it:
|
|
126
|
-
- `export FIGMA_ACCESS_TOKEN='…'`, or
|
|
127
|
-
- pass `--token` / `-t` when publishing.
|
|
128
|
-
|
|
129
|
-
**CLI**
|
|
130
|
-
|
|
131
|
-
The [`@figma/code-connect`](https://www.npmjs.com/package/@figma/code-connect) package is a devDependency. Use `npx` from the repo root (or install `@figma/code-connect` globally and run `figma connect …`):
|
|
132
|
-
|
|
133
|
-
```bash
|
|
134
|
-
npx figma connect --help
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
You should see subcommands including `publish`, `unpublish`, `create`, and `preview`.
|
|
138
|
-
|
|
139
|
-
**Config**
|
|
140
|
-
|
|
141
|
-
- `figma.config.json` — include glob `code-connect/published/**/*.figma.ts`, snippet label `React`, language `jsx`.
|
|
142
|
-
- `tsconfig.figma.json` — optional; point your editor at it for `figma` template typings (`types: ["@figma/code-connect/figma-types"]`).
|
|
143
|
-
|
|
144
|
-
**Scripts**
|
|
145
|
-
|
|
146
|
-
```bash
|
|
147
|
-
npm run figma:connect:publish:dry-run # hits Figma API; needs FIGMA_ACCESS_TOKEN or --token
|
|
148
|
-
npm run figma:connect:publish # publish mappings (same token requirement)
|
|
149
|
-
npm run figma:connect:preview # local preview of snippets from templates
|
|
150
|
-
npm run typecheck:figma # typecheck template files only
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
**First publish**
|
|
154
|
-
|
|
155
|
-
1. Copy `code-connect/examples/ds-icon.figma.ts` to `code-connect/published/DsIcon.figma.ts`, then set the `// url=…` line from Figma → **Copy link to selection** (see `code-connect/README.md`).
|
|
156
|
-
2. Ensure Figma’s GitHub / Code Connect integration points at **this** `compomo` repo and branch.
|
|
157
|
-
3. Run `npm run figma:connect:publish:dry-run`, then `npm run figma:connect:publish`.
|
|
158
|
-
|
|
159
|
-
Each contributor can use their own `FIGMA_ACCESS_TOKEN` in a local shell or `.env.local` (gitignored); do not commit tokens.
|
|
160
|
-
|
|
161
|
-
### Dev Mode vs “the template” (why mapping exists)
|
|
162
|
-
|
|
163
|
-
- **The canvas** is whatever designers built (variant names like `Type = Main`, nested structure, etc.). Code Connect does **not** rewrite your Figma file.
|
|
164
|
-
- **Dev Mode** can show a **link to your repo file** (e.g. `src/wc/components/Icon/Icon.tsx`) when you connect the repo — that answers “where is this implemented?”
|
|
165
|
-
- The **Code Connect snippet** is the **copy-paste example** Figma shows in Inspect. That text comes from **your published templates** (or from other Figma features like MCP context), not from magically knowing your Stencil prop names.
|
|
166
|
-
|
|
167
|
-
So: if Figma props already match your API (`intent`, `appearance`), your template can be a thin wrapper and life is easy. If they **do not** match (legacy `Type` vs real `intent`), the template is where you **translate** so the snippet still shows **canonical** usage. You are not making Dev Mode “look like Figma internals” — you are choosing what **engineers should copy** when names diverge.
|
|
168
|
-
|
|
169
|
-
### GitHub Actions — auto-publish on `main` (optional)
|
|
170
|
-
|
|
171
|
-
This repo includes [`.github/workflows/figma-code-connect.yml`](.github/workflows/figma-code-connect.yml). It runs `npm run figma:connect:publish` when **`main`** changes under `code-connect/`, `figma.config.json`, or `tsconfig.figma.json`, and on **manual** “Run workflow”.
|
|
172
|
-
|
|
173
|
-
**1. Create a Figma personal access token**
|
|
174
|
-
|
|
175
|
-
1. Figma → **Settings** (avatar) → **Security** (or **Personal access tokens** depending on UI).
|
|
176
|
-
2. **Generate new token** with at least **File content (Read)** and **Code Connect (Write)** (same scopes as local publish).
|
|
177
|
-
3. Copy the token once; you will not see it again.
|
|
178
|
-
|
|
179
|
-
**2. Add it as a GitHub Actions secret**
|
|
180
|
-
|
|
181
|
-
1. Open the repo on GitHub: `https://github.com/zainadeel/compomo` (or your fork’s **Settings** if you only care about that fork).
|
|
182
|
-
2. **Settings** → **Secrets and variables** → **Actions**.
|
|
183
|
-
3. **New repository secret**
|
|
184
|
-
- **Name:** `FIGMA_ACCESS_TOKEN` (must match the workflow exactly).
|
|
185
|
-
- **Secret:** paste the token → **Add secret**.
|
|
186
|
-
|
|
187
|
-
**3. Confirm the workflow**
|
|
188
|
-
|
|
189
|
-
- **Actions** tab → **Figma Code Connect** → run **workflow_dispatch** once to verify green, then merge a small change under `code-connect/` to test the `push` path.
|
|
190
|
-
|
|
191
|
-
If the secret is missing, the publish step fails with Figma’s “no access token” style error until you add it.
|
|
192
|
-
|
|
193
|
-
### Icon batch files — CompoMo vs IcoMo
|
|
194
|
-
|
|
195
|
-
**Publish from CompoMo.** Code Connect templates live under `code-connect/published/` (see `code-connect/examples/` for starters). `figma connect publish` runs from this repo. Snippets should show **`@ds-mo/ui`** usage (e.g. `<ds-icon name="Bell" />` or `<DsIcon name="Bell" />` from `@ds-mo/ui/react`). **`name`** values must match **IcoMo** export keys.
|
package/dist/.build-stamp
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
1784517070546
|
package/dist/agent-patterns.json
CHANGED
package/dist/agent.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"package": "@ds-mo/ui",
|
|
4
|
-
"packageVersion": "9.2.
|
|
4
|
+
"packageVersion": "9.2.1",
|
|
5
5
|
"kind": "components",
|
|
6
6
|
"entries": [
|
|
7
7
|
{
|
|
@@ -564,6 +564,10 @@
|
|
|
564
564
|
"type": "string",
|
|
565
565
|
"required": false
|
|
566
566
|
},
|
|
567
|
+
"iconColor": {
|
|
568
|
+
"type": "IconColor",
|
|
569
|
+
"required": false
|
|
570
|
+
},
|
|
567
571
|
"label": {
|
|
568
572
|
"type": "string | undefined",
|
|
569
573
|
"required": false
|
|
@@ -2198,6 +2202,10 @@
|
|
|
2198
2202
|
},
|
|
2199
2203
|
"api": {
|
|
2200
2204
|
"props": {
|
|
2205
|
+
"actionsOpen": {
|
|
2206
|
+
"type": "boolean",
|
|
2207
|
+
"required": false
|
|
2208
|
+
},
|
|
2201
2209
|
"conversationId": {
|
|
2202
2210
|
"type": "string",
|
|
2203
2211
|
"required": false
|
|
@@ -3322,6 +3330,10 @@
|
|
|
3322
3330
|
}
|
|
3323
3331
|
},
|
|
3324
3332
|
"events": [
|
|
3333
|
+
{
|
|
3334
|
+
"name": "dsAfterClose",
|
|
3335
|
+
"detail": "void"
|
|
3336
|
+
},
|
|
3325
3337
|
{
|
|
3326
3338
|
"name": "dsClose",
|
|
3327
3339
|
"detail": "void"
|
|
@@ -3864,6 +3876,10 @@
|
|
|
3864
3876
|
"type": "string",
|
|
3865
3877
|
"required": false
|
|
3866
3878
|
},
|
|
3879
|
+
"accountMenuExpanded": {
|
|
3880
|
+
"type": "boolean",
|
|
3881
|
+
"required": false
|
|
3882
|
+
},
|
|
3867
3883
|
"activeId": {
|
|
3868
3884
|
"type": "string",
|
|
3869
3885
|
"required": false
|
|
@@ -6,7 +6,7 @@ export declare class DsAvatar {
|
|
|
6
6
|
protected el: HTMLDsAvatarElement;
|
|
7
7
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
8
8
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsAvatar, never>;
|
|
9
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsAvatar, "ds-avatar", never, { "icon": { "alias": "icon"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
9
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsAvatar, "ds-avatar", never, { "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "label": { "alias": "label"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
10
10
|
}
|
|
11
11
|
export declare interface DsAvatar extends Components.DsAvatar {
|
|
12
12
|
}
|
|
@@ -17,12 +17,12 @@ let DsAvatar = class DsAvatar {
|
|
|
17
17
|
this.el = r.nativeElement;
|
|
18
18
|
}
|
|
19
19
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsAvatar, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsAvatar, isStandalone: true, selector: "ds-avatar", inputs: { icon: "icon", label: "label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsAvatar, isStandalone: true, selector: "ds-avatar", inputs: { icon: "icon", iconColor: "iconColor", label: "label" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
};
|
|
22
22
|
DsAvatar = __decorate([
|
|
23
23
|
ProxyCmp({
|
|
24
24
|
defineCustomElementFn: defineDsAvatar,
|
|
25
|
-
inputs: ['icon', 'label']
|
|
25
|
+
inputs: ['icon', 'iconColor', 'label']
|
|
26
26
|
})
|
|
27
27
|
], DsAvatar);
|
|
28
28
|
export { DsAvatar };
|
|
@@ -33,6 +33,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
33
33
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
34
34
|
template: '<ng-content></ng-content>',
|
|
35
35
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
36
|
-
inputs: ['icon', 'label'],
|
|
36
|
+
inputs: ['icon', 'iconColor', 'label'],
|
|
37
37
|
}]
|
|
38
38
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });
|
|
@@ -10,7 +10,7 @@ export declare class DsConversationListItem {
|
|
|
10
10
|
}>>;
|
|
11
11
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
12
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsConversationListItem, never>;
|
|
13
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsConversationListItem, "ds-conversation-list-item", never, { "conversationId": { "alias": "conversationId"; "required": false; }; "conversationTitle": { "alias": "conversationTitle"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "state": { "alias": "state"; "required": false; }; "statusLabel": { "alias": "statusLabel"; "required": false; }; "unreadCount": { "alias": "unreadCount"; "required": false; }; "updatedAt": { "alias": "updatedAt"; "required": false; }; }, { "dsSelect": "dsSelect"; }, never, ["*"], true, never>;
|
|
13
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsConversationListItem, "ds-conversation-list-item", never, { "actionsOpen": { "alias": "actionsOpen"; "required": false; }; "conversationId": { "alias": "conversationId"; "required": false; }; "conversationTitle": { "alias": "conversationTitle"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "state": { "alias": "state"; "required": false; }; "statusLabel": { "alias": "statusLabel"; "required": false; }; "unreadCount": { "alias": "unreadCount"; "required": false; }; "updatedAt": { "alias": "updatedAt"; "required": false; }; }, { "dsSelect": "dsSelect"; }, never, ["*"], true, never>;
|
|
14
14
|
}
|
|
15
15
|
export declare interface DsConversationListItem extends Components.DsConversationListItem {
|
|
16
16
|
dsSelect: EventEmitter<DsConversationListItemCustomEvent<{
|
|
@@ -18,12 +18,12 @@ let DsConversationListItem = class DsConversationListItem {
|
|
|
18
18
|
this.el = r.nativeElement;
|
|
19
19
|
}
|
|
20
20
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsConversationListItem, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsConversationListItem, isStandalone: true, selector: "ds-conversation-list-item", inputs: { conversationId: "conversationId", conversationTitle: "conversationTitle", preview: "preview", selected: "selected", state: "state", statusLabel: "statusLabel", unreadCount: "unreadCount", updatedAt: "updatedAt" }, outputs: { dsSelect: "dsSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsConversationListItem, isStandalone: true, selector: "ds-conversation-list-item", inputs: { actionsOpen: "actionsOpen", conversationId: "conversationId", conversationTitle: "conversationTitle", preview: "preview", selected: "selected", state: "state", statusLabel: "statusLabel", unreadCount: "unreadCount", updatedAt: "updatedAt" }, outputs: { dsSelect: "dsSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
22
|
};
|
|
23
23
|
DsConversationListItem = __decorate([
|
|
24
24
|
ProxyCmp({
|
|
25
25
|
defineCustomElementFn: defineDsConversationListItem,
|
|
26
|
-
inputs: ['conversationId', 'conversationTitle', 'preview', 'selected', 'state', 'statusLabel', 'unreadCount', 'updatedAt']
|
|
26
|
+
inputs: ['actionsOpen', 'conversationId', 'conversationTitle', 'preview', 'selected', 'state', 'statusLabel', 'unreadCount', 'updatedAt']
|
|
27
27
|
})
|
|
28
28
|
], DsConversationListItem);
|
|
29
29
|
export { DsConversationListItem };
|
|
@@ -34,7 +34,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
34
34
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
35
35
|
template: '<ng-content></ng-content>',
|
|
36
36
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
37
|
-
inputs: ['conversationId', 'conversationTitle', 'preview', 'selected', 'state', 'statusLabel', 'unreadCount', 'updatedAt'],
|
|
37
|
+
inputs: ['actionsOpen', 'conversationId', 'conversationTitle', 'preview', 'selected', 'state', 'statusLabel', 'unreadCount', 'updatedAt'],
|
|
38
38
|
outputs: ['dsSelect'],
|
|
39
39
|
}]
|
|
40
40
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsSelect: [{
|
|
@@ -8,15 +8,20 @@ export declare class DsMenu {
|
|
|
8
8
|
protected z: NgZone;
|
|
9
9
|
protected el: HTMLDsMenuElement;
|
|
10
10
|
dsClose: EventEmitter<DsMenuCustomEvent<void>>;
|
|
11
|
+
dsAfterClose: EventEmitter<DsMenuCustomEvent<void>>;
|
|
11
12
|
dsSelect: EventEmitter<DsMenuCustomEvent<IDsMenuMenuItemData>>;
|
|
12
13
|
dsGradientSelect: EventEmitter<DsMenuCustomEvent<IDsMenuShellGradientPreset>>;
|
|
13
14
|
dsSwatchSelect: EventEmitter<DsMenuCustomEvent<string>>;
|
|
14
15
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
15
16
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsMenu, never>;
|
|
16
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "align": { "alias": "align"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlignment": { "alias": "anchorAlignment"; "required": false; }; "anchorId": { "alias": "anchorId"; "required": false; }; "initialFocusVisible": { "alias": "initialFocusVisible"; "required": false; }; "items": { "alias": "items"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "menuWidth": { "alias": "menuWidth"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "open": { "alias": "open"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "side": { "alias": "side"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; }, { "dsClose": "dsClose"; "dsSelect": "dsSelect"; "dsGradientSelect": "dsGradientSelect"; "dsSwatchSelect": "dsSwatchSelect"; }, never, ["*"], true, never>;
|
|
17
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsMenu, "ds-menu", never, { "align": { "alias": "align"; "required": false; }; "alignOffset": { "alias": "alignOffset"; "required": false; }; "anchor": { "alias": "anchor"; "required": false; }; "anchorAlignment": { "alias": "anchorAlignment"; "required": false; }; "anchorId": { "alias": "anchorId"; "required": false; }; "initialFocusVisible": { "alias": "initialFocusVisible"; "required": false; }; "items": { "alias": "items"; "required": false; }; "menuLabel": { "alias": "menuLabel"; "required": false; }; "menuWidth": { "alias": "menuWidth"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "open": { "alias": "open"; "required": false; }; "sections": { "alias": "sections"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "side": { "alias": "side"; "required": false; }; "sideOffset": { "alias": "sideOffset"; "required": false; }; }, { "dsClose": "dsClose"; "dsAfterClose": "dsAfterClose"; "dsSelect": "dsSelect"; "dsGradientSelect": "dsGradientSelect"; "dsSwatchSelect": "dsSwatchSelect"; }, never, ["*"], true, never>;
|
|
17
18
|
}
|
|
18
19
|
export declare interface DsMenu extends Components.DsMenu {
|
|
19
20
|
dsClose: EventEmitter<DsMenuCustomEvent<void>>;
|
|
21
|
+
/**
|
|
22
|
+
* Emitted after the popup's exit motion is complete and its rendered content is removed.
|
|
23
|
+
*/
|
|
24
|
+
dsAfterClose: EventEmitter<DsMenuCustomEvent<void>>;
|
|
20
25
|
dsSelect: EventEmitter<DsMenuCustomEvent<IDsMenuMenuItemData>>;
|
|
21
26
|
/**
|
|
22
27
|
* Emitted when a `gradient-picker` section swatch is chosen.
|
package/dist/angular/ds-menu.js
CHANGED
|
@@ -14,6 +14,7 @@ let DsMenu = class DsMenu {
|
|
|
14
14
|
constructor(c, r, z) {
|
|
15
15
|
this.z = z;
|
|
16
16
|
this.dsClose = new EventEmitter();
|
|
17
|
+
this.dsAfterClose = new EventEmitter();
|
|
17
18
|
this.dsSelect = new EventEmitter();
|
|
18
19
|
this.dsGradientSelect = new EventEmitter();
|
|
19
20
|
this.dsSwatchSelect = new EventEmitter();
|
|
@@ -21,7 +22,7 @@ let DsMenu = class DsMenu {
|
|
|
21
22
|
this.el = r.nativeElement;
|
|
22
23
|
}
|
|
23
24
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsMenu, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsMenu, isStandalone: true, selector: "ds-menu", inputs: { align: "align", alignOffset: "alignOffset", anchor: "anchor", anchorAlignment: "anchorAlignment", anchorId: "anchorId", initialFocusVisible: "initialFocusVisible", items: "items", menuLabel: "menuLabel", menuWidth: "menuWidth", minWidth: "minWidth", open: "open", sections: "sections", selectionMode: "selectionMode", side: "side", sideOffset: "sideOffset" }, outputs: { dsClose: "dsClose", dsSelect: "dsSelect", dsGradientSelect: "dsGradientSelect", dsSwatchSelect: "dsSwatchSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsMenu, isStandalone: true, selector: "ds-menu", inputs: { align: "align", alignOffset: "alignOffset", anchor: "anchor", anchorAlignment: "anchorAlignment", anchorId: "anchorId", initialFocusVisible: "initialFocusVisible", items: "items", menuLabel: "menuLabel", menuWidth: "menuWidth", minWidth: "minWidth", open: "open", sections: "sections", selectionMode: "selectionMode", side: "side", sideOffset: "sideOffset" }, outputs: { dsClose: "dsClose", dsAfterClose: "dsAfterClose", dsSelect: "dsSelect", dsGradientSelect: "dsGradientSelect", dsSwatchSelect: "dsSwatchSelect" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25
26
|
};
|
|
26
27
|
DsMenu = __decorate([
|
|
27
28
|
ProxyCmp({
|
|
@@ -38,10 +39,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
38
39
|
template: '<ng-content></ng-content>',
|
|
39
40
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
40
41
|
inputs: ['align', 'alignOffset', 'anchor', 'anchorAlignment', 'anchorId', 'initialFocusVisible', 'items', 'menuLabel', 'menuWidth', 'minWidth', 'open', 'sections', 'selectionMode', 'side', 'sideOffset'],
|
|
41
|
-
outputs: ['dsClose', 'dsSelect', 'dsGradientSelect', 'dsSwatchSelect'],
|
|
42
|
+
outputs: ['dsClose', 'dsAfterClose', 'dsSelect', 'dsGradientSelect', 'dsSwatchSelect'],
|
|
42
43
|
}]
|
|
43
44
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsClose: [{
|
|
44
45
|
type: Output
|
|
46
|
+
}], dsAfterClose: [{
|
|
47
|
+
type: Output
|
|
45
48
|
}], dsSelect: [{
|
|
46
49
|
type: Output
|
|
47
50
|
}], dsGradientSelect: [{
|
|
@@ -15,7 +15,7 @@ export declare class DsPanelNav {
|
|
|
15
15
|
dsNavUserAction: EventEmitter<DsPanelNavCustomEvent<IDsPanelNavPanelNavUserActionDetail>>;
|
|
16
16
|
constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
|
|
17
17
|
static ɵfac: i0.ɵɵFactoryDeclaration<DsPanelNav, never>;
|
|
18
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DsPanelNav, "ds-panel-nav", never, { "accountLabel": { "alias": "accountLabel"; "required": false; }; "activeId": { "alias": "activeId"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "collapseNavigationLabel": { "alias": "collapseNavigationLabel"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "currentUrl": { "alias": "currentUrl"; "required": false; }; "dashboardLabel": { "alias": "dashboardLabel"; "required": false; }; "dashboardNavigationLabel": { "alias": "dashboardNavigationLabel"; "required": false; }; "disableViewTransition": { "alias": "disableViewTransition"; "required": false; }; "expandNavigationLabel": { "alias": "expandNavigationLabel"; "required": false; }; "groups": { "alias": "groups"; "required": false; }; "navStyle": { "alias": "navStyle"; "required": false; }; "navigationItemsLabel": { "alias": "navigationItemsLabel"; "required": false; }; "routerMode": { "alias": "routerMode"; "required": false; }; "settingsLabel": { "alias": "settingsLabel"; "required": false; }; "settingsNavigationLabel": { "alias": "settingsNavigationLabel"; "required": false; }; "storageKey": { "alias": "storageKey"; "required": false; }; "userInitial": { "alias": "userInitial"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; }, { "dsNavSelect": "dsNavSelect"; "dsNavToggle": "dsNavToggle"; "dsChromeTransitionStart": "dsChromeTransitionStart"; "dsChromeTransitionEnd": "dsChromeTransitionEnd"; "dsNavFooterAction": "dsNavFooterAction"; "dsNavUserAction": "dsNavUserAction"; }, never, ["*"], true, never>;
|
|
18
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DsPanelNav, "ds-panel-nav", never, { "accountLabel": { "alias": "accountLabel"; "required": false; }; "accountMenuExpanded": { "alias": "accountMenuExpanded"; "required": false; }; "activeId": { "alias": "activeId"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "collapseNavigationLabel": { "alias": "collapseNavigationLabel"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "currentUrl": { "alias": "currentUrl"; "required": false; }; "dashboardLabel": { "alias": "dashboardLabel"; "required": false; }; "dashboardNavigationLabel": { "alias": "dashboardNavigationLabel"; "required": false; }; "disableViewTransition": { "alias": "disableViewTransition"; "required": false; }; "expandNavigationLabel": { "alias": "expandNavigationLabel"; "required": false; }; "groups": { "alias": "groups"; "required": false; }; "navStyle": { "alias": "navStyle"; "required": false; }; "navigationItemsLabel": { "alias": "navigationItemsLabel"; "required": false; }; "routerMode": { "alias": "routerMode"; "required": false; }; "settingsLabel": { "alias": "settingsLabel"; "required": false; }; "settingsNavigationLabel": { "alias": "settingsNavigationLabel"; "required": false; }; "storageKey": { "alias": "storageKey"; "required": false; }; "userInitial": { "alias": "userInitial"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; }, { "dsNavSelect": "dsNavSelect"; "dsNavToggle": "dsNavToggle"; "dsChromeTransitionStart": "dsChromeTransitionStart"; "dsChromeTransitionEnd": "dsChromeTransitionEnd"; "dsNavFooterAction": "dsNavFooterAction"; "dsNavUserAction": "dsNavUserAction"; }, never, ["*"], true, never>;
|
|
19
19
|
}
|
|
20
20
|
export declare interface DsPanelNav extends Components.DsPanelNav {
|
|
21
21
|
/**
|
|
@@ -23,12 +23,12 @@ let DsPanelNav = class DsPanelNav {
|
|
|
23
23
|
this.el = r.nativeElement;
|
|
24
24
|
}
|
|
25
25
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DsPanelNav, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsPanelNav, isStandalone: true, selector: "ds-panel-nav", inputs: { accountLabel: "accountLabel", activeId: "activeId", breakpoint: "breakpoint", collapseNavigationLabel: "collapseNavigationLabel", collapsed: "collapsed", currentUrl: "currentUrl", dashboardLabel: "dashboardLabel", dashboardNavigationLabel: "dashboardNavigationLabel", disableViewTransition: "disableViewTransition", expandNavigationLabel: "expandNavigationLabel", groups: "groups", navStyle: "navStyle", navigationItemsLabel: "navigationItemsLabel", routerMode: "routerMode", settingsLabel: "settingsLabel", settingsNavigationLabel: "settingsNavigationLabel", storageKey: "storageKey", userInitial: "userInitial", userName: "userName" }, outputs: { dsNavSelect: "dsNavSelect", dsNavToggle: "dsNavToggle", dsChromeTransitionStart: "dsChromeTransitionStart", dsChromeTransitionEnd: "dsChromeTransitionEnd", dsNavFooterAction: "dsNavFooterAction", dsNavUserAction: "dsNavUserAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: DsPanelNav, isStandalone: true, selector: "ds-panel-nav", inputs: { accountLabel: "accountLabel", accountMenuExpanded: "accountMenuExpanded", activeId: "activeId", breakpoint: "breakpoint", collapseNavigationLabel: "collapseNavigationLabel", collapsed: "collapsed", currentUrl: "currentUrl", dashboardLabel: "dashboardLabel", dashboardNavigationLabel: "dashboardNavigationLabel", disableViewTransition: "disableViewTransition", expandNavigationLabel: "expandNavigationLabel", groups: "groups", navStyle: "navStyle", navigationItemsLabel: "navigationItemsLabel", routerMode: "routerMode", settingsLabel: "settingsLabel", settingsNavigationLabel: "settingsNavigationLabel", storageKey: "storageKey", userInitial: "userInitial", userName: "userName" }, outputs: { dsNavSelect: "dsNavSelect", dsNavToggle: "dsNavToggle", dsChromeTransitionStart: "dsChromeTransitionStart", dsChromeTransitionEnd: "dsChromeTransitionEnd", dsNavFooterAction: "dsNavFooterAction", dsNavUserAction: "dsNavUserAction" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27
27
|
};
|
|
28
28
|
DsPanelNav = __decorate([
|
|
29
29
|
ProxyCmp({
|
|
30
30
|
defineCustomElementFn: defineDsPanelNav,
|
|
31
|
-
inputs: ['accountLabel', 'activeId', 'breakpoint', 'collapseNavigationLabel', 'collapsed', 'currentUrl', 'dashboardLabel', 'dashboardNavigationLabel', 'disableViewTransition', 'expandNavigationLabel', 'groups', 'navStyle', 'navigationItemsLabel', 'routerMode', 'settingsLabel', 'settingsNavigationLabel', 'storageKey', 'userInitial', 'userName'],
|
|
31
|
+
inputs: ['accountLabel', 'accountMenuExpanded', 'activeId', 'breakpoint', 'collapseNavigationLabel', 'collapsed', 'currentUrl', 'dashboardLabel', 'dashboardNavigationLabel', 'disableViewTransition', 'expandNavigationLabel', 'groups', 'navStyle', 'navigationItemsLabel', 'routerMode', 'settingsLabel', 'settingsNavigationLabel', 'storageKey', 'userInitial', 'userName'],
|
|
32
32
|
methods: ['toggleCollapsed']
|
|
33
33
|
})
|
|
34
34
|
], DsPanelNav);
|
|
@@ -40,7 +40,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
|
|
|
40
40
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
41
41
|
template: '<ng-content></ng-content>',
|
|
42
42
|
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
|
43
|
-
inputs: ['accountLabel', 'activeId', 'breakpoint', 'collapseNavigationLabel', 'collapsed', 'currentUrl', 'dashboardLabel', 'dashboardNavigationLabel', 'disableViewTransition', 'expandNavigationLabel', 'groups', 'navStyle', 'navigationItemsLabel', 'routerMode', 'settingsLabel', 'settingsNavigationLabel', 'storageKey', 'userInitial', 'userName'],
|
|
43
|
+
inputs: ['accountLabel', 'accountMenuExpanded', 'activeId', 'breakpoint', 'collapseNavigationLabel', 'collapsed', 'currentUrl', 'dashboardLabel', 'dashboardNavigationLabel', 'disableViewTransition', 'expandNavigationLabel', 'groups', 'navStyle', 'navigationItemsLabel', 'routerMode', 'settingsLabel', 'settingsNavigationLabel', 'storageKey', 'userInitial', 'userName'],
|
|
44
44
|
outputs: ['dsNavSelect', 'dsNavToggle', 'dsChromeTransitionStart', 'dsChromeTransitionEnd', 'dsNavFooterAction', 'dsNavUserAction'],
|
|
45
45
|
}]
|
|
46
46
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsNavSelect: [{
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-kezp2_Xu.js";const p=o;const t=s;export{p as DsAgentActivity,t as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-activity.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as r}from"./p-
|
|
1
|
+
import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as r}from"./p-kezp2_Xu.js";import{d as n}from"./p-CeFBA7Dx.js";import{d as i}from"./p-DaQ0ZE_V.js";import{d}from"./p-DiooIO2B.js";import{d as m}from"./p-CiwdnKKp.js";import{d as c}from"./p-Dst-OliP.js";import{d as l}from"./p-Cijzn3YQ.js";import{d as b}from"./p-CBYuvZKM.js";import{d as u}from"./p-Cpr3K41-.js";import{d as f}from"./p-T0Mzhv3-.js";import{d as p}from"./p-DFxqk71w.js";import{d as g}from"./p-CWNdl52Y.js";import{d as k}from"./p-BSOZXagj.js";const h=()=>`.sc-ds-agent-response-h{display:block;width:100%;-webkit-user-select:none;user-select:none}.agent-response.sc-ds-agent-response{display:grid;gap:var(--dimension-space-150);min-width:0;width:100%;-webkit-user-select:none;user-select:none}`;const y=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.author="";this.showAuthor=true;this.timestamp="";this.parts=[];this.streaming=false}renderPart(s){switch(s.type){case"markdown":return t("ds-markdown",{key:s.id,content:s.content,streaming:s.state==="streaming"});case"activity":return t("ds-agent-activity",{key:s.id,items:s.items});case"tool":return t("ds-agent-tool-call",{key:s.id,name:s.name,label:s.label,state:s.state,input:s.input,output:s.output,error:s.error});case"attachments":return t("ds-attachment-list",{key:s.id,items:s.items});case"sources":return t("ds-agent-source-list",{key:s.id,items:s.items})}}render(){return t(a,{key:"8d0e9d1b040497a2f8e125d29c32bad0a029b5fb"},t("ds-message",{key:"178855989076e1d64860559b8fe4f13d19d3b293",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming},t("slot",{key:"79646d88da16b811ccdb18185916f6be28fc6e96",name:"avatar",slot:"avatar"}),t("ds-message-bubble",{key:"42a4aa72db53ad68e854756a23bebc0e6fc2a900",variant:"ghost"},t("div",{key:"3579a74a88511765e46eb92b60b49cba48fae720",class:"agent-response"},this.parts.map((s=>this.renderPart(s))))),t("slot",{key:"b7200e12010832f1ee2b21f598ac98678c0ef5ba",name:"footer",slot:"footer"}),t("slot",{key:"574633026aac44aeeb88a762beb4b408291b23c8",name:"actions",slot:"actions"})))}static get style(){return h()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],streaming:[4]}]);function E(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-unfilled","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-message-bubble","ds-text"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),y)}break;case"ds-agent-activity":if(!customElements.get(o(s))){r()}break;case"ds-agent-source-list":if(!customElements.get(o(s))){n()}break;case"ds-agent-tool-call":if(!customElements.get(o(s))){i()}break;case"ds-attachment-list":if(!customElements.get(o(s))){d()}break;case"ds-badge":if(!customElements.get(o(s))){m()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){c()}break;case"ds-code-block":if(!customElements.get(o(s))){l()}break;case"ds-icon":if(!customElements.get(o(s))){b()}break;case"ds-loader":if(!customElements.get(o(s))){u()}break;case"ds-markdown":if(!customElements.get(o(s))){f()}break;case"ds-message":if(!customElements.get(o(s))){p()}break;case"ds-message-bubble":if(!customElements.get(o(s))){g()}break;case"ds-text":if(!customElements.get(o(s))){k()}break}}))}E();const j=y;const w=E;export{j as DsAgentResponse,w as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-response.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["agentResponseCss","AgentResponse","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","messageId","author","showAuthor","timestamp","parts","streaming","renderPart","part","type","h","key","id","content","state","items","name","label","input","output","error","render","Host","direction","slot","variant","class","map"],"sources":["src/wc/components/AgentResponse/AgentResponse.css?tag=ds-agent-response&encapsulation=scoped","src/wc/components/AgentResponse/AgentResponse.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n.agent-response {\n display: grid;\n gap: var(--dimension-space-150);\n min-width: 0;\n width: 100%;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { AgentResponsePart } from '../conversation-types';\n\n@Component({ tag: 'ds-agent-response', styleUrl: 'AgentResponse.css', scoped: true })\nexport class AgentResponse {\n @Prop() messageId: string = '';\n @Prop() author: string = '';\n @Prop() showAuthor: boolean = true;\n @Prop() timestamp: string = '';\n @Prop() parts: AgentResponsePart[] = [];\n @Prop() streaming: boolean = false;\n\n private renderPart(part: AgentResponsePart) {\n switch (part.type) {\n case 'markdown':\n return (\n <ds-markdown\n key={part.id}\n content={part.content}\n streaming={part.state === 'streaming'}\n />\n );\n case 'activity':\n return <ds-agent-activity key={part.id} items={part.items} />;\n case 'tool':\n return (\n <ds-agent-tool-call\n key={part.id}\n name={part.name}\n label={part.label}\n state={part.state}\n input={part.input}\n output={part.output}\n error={part.error}\n />\n );\n case 'attachments':\n return <ds-attachment-list key={part.id} items={part.items} />;\n case 'sources':\n return <ds-agent-source-list key={part.id} items={part.items} />;\n }\n }\n\n render() {\n return (\n <Host>\n <ds-message\n messageId={this.messageId}\n direction=\"incoming\"\n author={this.author}\n showAuthor={this.showAuthor}\n timestamp={this.timestamp}\n streaming={this.streaming}\n >\n <slot name=\"avatar\" slot=\"avatar\" />\n <ds-message-bubble variant=\"ghost\">\n <div class=\"agent-response\">{this.parts.map(part => this.renderPart(part))}</div>\n </ds-message-bubble>\n <slot name=\"footer\" slot=\"footer\" />\n <slot name=\"actions\" slot=\"actions\" />\n </ds-message>\n </Host>\n );\n }\n}\n"],"mappings":"qgBAAA,MAAMA,EAAmB,IAAM,
|
|
1
|
+
{"version":3,"names":["agentResponseCss","AgentResponse","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","messageId","author","showAuthor","timestamp","parts","streaming","renderPart","part","type","h","key","id","content","state","items","name","label","input","output","error","render","Host","direction","slot","variant","class","map"],"sources":["src/wc/components/AgentResponse/AgentResponse.css?tag=ds-agent-response&encapsulation=scoped","src/wc/components/AgentResponse/AgentResponse.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n -webkit-user-select: none;\n user-select: none;\n}\n.agent-response {\n display: grid;\n gap: var(--dimension-space-150);\n min-width: 0;\n width: 100%;\n -webkit-user-select: none;\n user-select: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { AgentResponsePart } from '../conversation-types';\n\n@Component({ tag: 'ds-agent-response', styleUrl: 'AgentResponse.css', scoped: true })\nexport class AgentResponse {\n @Prop() messageId: string = '';\n @Prop() author: string = '';\n @Prop() showAuthor: boolean = true;\n @Prop() timestamp: string = '';\n @Prop() parts: AgentResponsePart[] = [];\n @Prop() streaming: boolean = false;\n\n private renderPart(part: AgentResponsePart) {\n switch (part.type) {\n case 'markdown':\n return (\n <ds-markdown\n key={part.id}\n content={part.content}\n streaming={part.state === 'streaming'}\n />\n );\n case 'activity':\n return <ds-agent-activity key={part.id} items={part.items} />;\n case 'tool':\n return (\n <ds-agent-tool-call\n key={part.id}\n name={part.name}\n label={part.label}\n state={part.state}\n input={part.input}\n output={part.output}\n error={part.error}\n />\n );\n case 'attachments':\n return <ds-attachment-list key={part.id} items={part.items} />;\n case 'sources':\n return <ds-agent-source-list key={part.id} items={part.items} />;\n }\n }\n\n render() {\n return (\n <Host>\n <ds-message\n messageId={this.messageId}\n direction=\"incoming\"\n author={this.author}\n showAuthor={this.showAuthor}\n timestamp={this.timestamp}\n streaming={this.streaming}\n >\n <slot name=\"avatar\" slot=\"avatar\" />\n <ds-message-bubble variant=\"ghost\">\n <div class=\"agent-response\">{this.parts.map(part => this.renderPart(part))}</div>\n </ds-message-bubble>\n <slot name=\"footer\" slot=\"footer\" />\n <slot name=\"actions\" slot=\"actions\" />\n </ds-message>\n </Host>\n );\n }\n}\n"],"mappings":"qgBAAA,MAAMA,EAAmB,IAAM,gP,MCIlBC,EAAaC,EAAA,MAAAD,UAAAE,EAD1B,WAAAC,CAAAC,G,4CAEUC,KAAAC,UAAoB,GACpBD,KAAAE,OAAiB,GACjBF,KAAAG,WAAsB,KACtBH,KAAAI,UAAoB,GACpBJ,KAAAK,MAA6B,GAC7BL,KAAAM,UAAqB,KAsD9B,CApDS,UAAAC,CAAWC,GACjB,OAAQA,EAAKC,MACX,IAAK,WACH,OACEC,EAAA,eACEC,IAAKH,EAAKI,GACVC,QAASL,EAAKK,QACdP,UAAWE,EAAKM,QAAU,cAGhC,IAAK,WACH,OAAOJ,EAAA,qBAAmBC,IAAKH,EAAKI,GAAIG,MAAOP,EAAKO,QACtD,IAAK,OACH,OACEL,EAAA,sBACEC,IAAKH,EAAKI,GACVI,KAAMR,EAAKQ,KACXC,MAAOT,EAAKS,MACZH,MAAON,EAAKM,MACZI,MAAOV,EAAKU,MACZC,OAAQX,EAAKW,OACbC,MAAOZ,EAAKY,QAGlB,IAAK,cACH,OAAOV,EAAA,sBAAoBC,IAAKH,EAAKI,GAAIG,MAAOP,EAAKO,QACvD,IAAK,UACH,OAAOL,EAAA,wBAAsBC,IAAKH,EAAKI,GAAIG,MAAOP,EAAKO,Q,CAI7D,MAAAM,GACE,OACEX,EAACY,EAAI,CAAAX,IAAA,4CACHD,EAAA,cAAAC,IAAA,2CACEV,UAAWD,KAAKC,UAChBsB,UAAU,WACVrB,OAAQF,KAAKE,OACbC,WAAYH,KAAKG,WACjBC,UAAWJ,KAAKI,UAChBE,UAAWN,KAAKM,WAEhBI,EAAA,QAAAC,IAAA,2CAAMK,KAAK,SAASQ,KAAK,WACzBd,EAAA,qBAAAC,IAAA,2CAAmBc,QAAQ,SACzBf,EAAA,OAAAC,IAAA,2CAAKe,MAAM,kBAAkB1B,KAAKK,MAAMsB,KAAInB,GAAQR,KAAKO,WAAWC,OAEtEE,EAAA,QAAAC,IAAA,2CAAMK,KAAK,SAASQ,KAAK,WACzBd,EAAA,QAAAC,IAAA,2CAAMK,KAAK,UAAUQ,KAAK,a","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p
|
|
1
|
+
import{A as o,d as s}from"./p-CeFBA7Dx.js";const t=o;const p=s;export{t as DsAgentSourceList,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-source-list.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as
|
|
1
|
+
import{A as o,d as s}from"./p-DaQ0ZE_V.js";const t=o;const a=s;export{t as DsAgentToolCall,a as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-agent-tool-call.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{A as o,d as s}from"./p-
|
|
1
|
+
import{A as o,d as s}from"./p-DiooIO2B.js";const t=o;const p=s;export{t as DsAttachmentList,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-attachment-list.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as s,h as a,a as t,t as i}from"./index.js";import{d as r}from"./p-
|
|
1
|
+
import{p as e,H as s,h as a,a as t,t as i}from"./index.js";import{d as r}from"./p-CBYuvZKM.js";const n=()=>`.sc-ds-avatar-h{display:inline-flex;flex-shrink:0;width:var(--dimension-size-400);height:var(--dimension-size-400)}.avatar.sc-ds-avatar{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}`;const o=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.icon="";this.iconColor="secondary"}render(){return a(t,{key:"3c2a28dab1089a844598d20004a47a018483b03c"},a("span",{key:"3dbe6297d0d73b54bf182b0eddc8c887e35b8c8c",class:"avatar",role:this.label?"img":"presentation","aria-label":this.label,"aria-hidden":!this.label?"true":undefined},a("ds-icon",{key:"218c5df78abbe896e4da3089568d037713a2f0f4",name:this.icon,size:"md",color:this.iconColor})))}static get style(){return n()}},[2,"ds-avatar",{icon:[1],iconColor:[1,"icon-color"],label:[1]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-avatar","ds-icon"];e.forEach((e=>{switch(e){case"ds-avatar":if(!customElements.get(i(e))){customElements.define(i(e),o)}break;case"ds-icon":if(!customElements.get(i(e))){r()}break}}))}d();const c=o;const l=d;export{c as DsAvatar,l as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-avatar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["avatarCss","Avatar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","render","h","Host","key","class","role","label","undefined","name","size","color"],"sources":["src/wc/components/Avatar/Avatar.css?tag=ds-avatar&encapsulation=scoped","src/wc/components/Avatar/Avatar.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n flex-shrink: 0;\n width: var(--dimension-size-400);\n height: var(--dimension-size-400);\n}\n\n.avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border-radius: var(--dimension-radius-half);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ds-avatar',\n styleUrl: 'Avatar.css',\n scoped: true,\n})\nexport class Avatar {\n /** Canonical IcoMo icon name displayed inside the avatar. */\n @Prop() icon: string = '';\n\n /** Optional accessible label. Omit when the surrounding content already conveys the meaning. */\n @Prop() label: string | undefined;\n\n render() {\n return (\n <Host>\n <span\n class=\"avatar\"\n role={this.label ? 'img' : 'presentation'}\n aria-label={this.label}\n aria-hidden={!this.label ? 'true' : undefined}\n >\n <ds-icon name={this.icon} size=\"md\" color
|
|
1
|
+
{"version":3,"names":["avatarCss","Avatar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","iconColor","render","h","Host","key","class","role","label","undefined","name","size","color"],"sources":["src/wc/components/Avatar/Avatar.css?tag=ds-avatar&encapsulation=scoped","src/wc/components/Avatar/Avatar.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n flex-shrink: 0;\n width: var(--dimension-size-400);\n height: var(--dimension-size-400);\n}\n\n.avatar {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n border-radius: var(--dimension-radius-half);\n box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\nimport type { IconColor } from '../Icon/Icon';\n\n@Component({\n tag: 'ds-avatar',\n styleUrl: 'Avatar.css',\n scoped: true,\n})\nexport class Avatar {\n /** Canonical IcoMo icon name displayed inside the avatar. */\n @Prop() icon: string = '';\n\n /** Semantic color for the icon. Use primary to surface unread or current identity state. */\n @Prop() iconColor: IconColor = 'secondary';\n\n /** Optional accessible label. Omit when the surrounding content already conveys the meaning. */\n @Prop() label: string | undefined;\n\n render() {\n return (\n <Host>\n <span\n class=\"avatar\"\n role={this.label ? 'img' : 'presentation'}\n aria-label={this.label}\n aria-hidden={!this.label ? 'true' : undefined}\n >\n <ds-icon name={this.icon} size=\"md\" color={this.iconColor} />\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAY,IAAM,gX,MCQXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAe,GAGfD,KAAAE,UAAuB,WAmBhC,CAdC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,2CACEC,MAAM,SACNC,KAAMR,KAAKS,MAAQ,MAAQ,eAAc,aAC7BT,KAAKS,MAAK,eACRT,KAAKS,MAAQ,OAASC,WAEpCN,EAAA,WAAAE,IAAA,2CAASK,KAAMX,KAAKC,KAAMW,KAAK,KAAKC,MAAOb,KAAKE,a","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as t,c as i,h as e,a as n,t as r}from"./index.js";import{i as a,g as o}from"./p-BQq26pt9.js";import{s as d,p as h,d as c}from"./p-BOQnc-M4.js";import{C as l,c as b,a as f,b as u,r as v,d as p}from"./p-BKhG2xrW.js";import{d as g}from"./p-CiwdnKKp.js";import{d as m}from"./p-CZMEhdlA.js";import{d as _}from"./p-BEQB8EnB.js";import{d as y}from"./p-Cpr3K41-.js";import{d as w}from"./p-DIsDiGcp.js";import{d as k}from"./p-B1pWGQn1.js";import{d as C}from"./p-CuKn9I5f.js";import{d as x}from"./p-BSOZXagj.js";function T(s,t){const i=[];let e=[];for(const n of s){if(a(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,dot:n.dot,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function S(s,t){return T(O(s),t)}function E(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function F(s,t,i,e,n){if(s.length===0||t<=0)return 0;const r=P(s,s.length,e,n);if(r<=t)return s.length;const a=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=P(s,t,e,n);if(i>a)break;o=t}return o}function M(s){let t=s.length;while(t>0&&a(s[t-1])){t-=1}return s.slice(0,t)}function O(s){let t=0;while(t<s.length&&a(s[t])){t+=1}return s.slice(t)}function P(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const j=()=>`.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:pointer;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--ds-control-radius);background:transparent;pointer-events:none}.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset);white-space:nowrap}.bar-nav__tab-label--dot.sc-ds-bar-nav{padding-right:calc(var(--ds-control-label-inset) + var(--ds-control-gap))}.bar-nav__tab-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--ds-control-height);padding-block:var(--ds-control-padding-inline);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--ds-control-height);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const D=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new l;this.panelToolsTransition=new l;this.overflowCoalescer=b((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=p(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return o(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,t){if(t.some((t=>t.id===s&&!t.isInactive))){this.focusedTabId=s;return}const i=t.find((s=>!s.isInactive));this.focusedTabId=i?.id??""}digestTabsConfig(s){return s.map((s=>a(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,o(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(d(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const r=i.reduce(((s,t)=>s+t),0);const a=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-r-a);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false}}this.syncFocusedTabId(this.effectiveValue,o(i?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=E(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=F(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const r=M(this.resolvedTabs.slice(0,n));const a=this.resolvedTabs.slice(r.length);this.setOverflowTabLayout(r,a);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}incomingTabs(){return this.tabsJson?h(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=S(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=c(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const t=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);t?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,t){const i=this.renderedSelectableTabs;for(let e=s+t;e>=0&&e<i.length;e+=t){if(!i[e]?.isInactive)return e}return null}handleTabKeyDown(s){const t=this.renderedSelectableTabs;if(!t.length)return;const i=s.target?.getAttribute("data-tab-id");const e=i??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const i=t.find((s=>s.id===e));if(!i||i.isInactive)return;s.preventDefault();this.selectTab(i.id);return}const n=t.findIndex((s=>s.id===e));if(n<0)return;let r;if(s.key==="ArrowRight"){r=this.findEnabledVisibleTab(n,1);if(r===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){r=this.findEnabledVisibleTab(n,-1)}else if(s.key==="Home"){r=t.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...t].reverse().findIndex((s=>!s.isInactive));r=s<0?null:t.length-1-s}else{return}if(r===null||r<0||r===n)return;s.preventDefault();this.focusVisibleTab(t[r].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,t){return e("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(t){const t=s??null;if(t===this.probeTabListEl)return;this.probeTabListEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:t?undefined:s=>this.handleTabKeyDown(s),onFocusin:t?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,i)=>{if(a(s)){return e("div",{class:"bar-nav__tab-divider",key:`divider-${i}`,"aria-hidden":"true"},e("div",{class:"bar-nav__tab-divider-line"}))}const n=s.id===this.effectiveValue;return e("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":n,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":n?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!t&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!t&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!t)this.focusedTabId=s.id}},e("span",{class:{"bar-nav__tab-label":true,"bar-nav__tab-label--dot":!!s.dot}},e("ds-text",{as:"span",variant:"text-body-medium",emphasis:n,color:"inherit"},s.label),s.dot&&e("ds-badge",{class:"bar-nav__tab-dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const r=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"434166d6efafd105271d7dfff6b733ad29fb4ccf"},e("header",{key:"fd0f806668560ced4bdb61f48d8979e2ef57ebc1",class:{"bar-nav":true,"ds-control--md":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"c0df6b355ad08182e43e44e77d91d59aec2cecb6",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("div",{key:`probe-${i}`},this.renderTabList(this.resolvedTabs,true))),t&&this.tabLayoutCommitted&&r.length>0&&e("div",{key:"536bc75252c4b803435bc290d0e5ce39e18386a6",class:"bar-nav__left"},e("div",{key:`visible-${i}`,class:"bar-nav__tabs-visible"},this.renderTabList(r,false))),t&&!this.tabLayoutCommitted&&e("div",{key:"57e90791d4ee2f1af384a668ad53f9e041c5c92c",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"cbfa107b281d9d969535ceaa1bbe022a1a7b17c7",class:"bar-nav__heading",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"230dc2150958fd0c61f8d45b040bbdda1407812f",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",isActive:this.menuOpen,activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuOpen,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"45ae6b949e1a8186f66852e74656b703ae9a5b82",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:S(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return j()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);D.HOST_PROP_SYNC_BUDGET=8;D.INTRINSIC_WIDTH_RETRY_MAX=3;D.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;D.OVERFLOW_HYSTERESIS_PX=8;function H(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(r(s))){customElements.define(r(s),D)}break;case"ds-badge":if(!customElements.get(r(s))){g()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){m()}break;case"ds-icon":if(!customElements.get(r(s))){_()}break;case"ds-loader":if(!customElements.get(r(s))){y()}break;case"ds-menu":if(!customElements.get(r(s))){w()}break;case"ds-swatch-picker":if(!customElements.get(r(s))){k()}break;case"ds-switch":if(!customElements.get(r(s))){C()}break;case"ds-text":if(!customElements.get(r(s))){x()}break}}))}H();const L=D;const V=H;export{L as DsBarNav,V as defineCustomElement};
|
|
1
|
+
import{p as s,H as t,c as i,h as e,a as n,t as a}from"./index.js";import{i as r,g as o}from"./p-BQq26pt9.js";import{s as d,p as h,d as l}from"./p-BOQnc-M4.js";import{C as c,c as b,a as f,b as u,r as v,d as p}from"./p-BKhG2xrW.js";import{d as g}from"./p-CiwdnKKp.js";import{d as m}from"./p-Dst-OliP.js";import{d as _}from"./p-CBYuvZKM.js";import{d as y}from"./p-Cpr3K41-.js";import{d as w}from"./p-Dj5MejHv.js";import{d as k}from"./p-B1pWGQn1.js";import{d as C}from"./p-BRfOCc_h.js";import{d as x}from"./p-BSOZXagj.js";function T(s,t){const i=[];let e=[];for(const n of s){if(r(n)){if(e.length>0){i.push({items:e});e=[]}continue}e.push({label:n.label,value:n.id,dot:n.dot,isSelected:n.id===t,isInactive:n.isInactive})}if(e.length>0){i.push({items:e})}return i}function S(s,t){return T(j(s),t)}function M(s,t,i,e=2){const n=s-t;if(i){return n>-e}return n>e}function O(s,t,i,e,n){if(s.length===0||t<=0)return 0;const a=E(s,s.length,e,n);if(a<=t)return s.length;const r=Math.max(0,t-i);let o=0;for(let t=1;t<=s.length;t++){const i=E(s,t,e,n);if(i>r)break;o=t}return o}function F(s){let t=s.length;while(t>0&&r(s[t-1])){t-=1}return s.slice(0,t)}function j(s){let t=0;while(t<s.length&&r(s[t])){t+=1}return s.slice(t)}function E(s,t,i,e){if(t<=0)return 0;const n=s.slice(0,t).reduce(((s,t)=>s+t),0);return e+n+i*Math.max(0,t-1)}const P=()=>`.ds-control--md.sc-ds-bar-nav-h,.ds-control--md.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-bar-nav-h,.ds-control--sm.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-bar-nav-h,.ds-control--xs.sc-ds-bar-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0;--ds-control-radius:var(--dimension-radius-025)}.sc-ds-bar-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring.sc-ds-bar-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-bar-nav-h,.ds-control-inactive.sc-ds-bar-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;position:relative;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--_bar-nav-border);background-color:var(--_bar-nav-bg);color:var(--_bar-nav-fg-primary);-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-3), border-color var(--effect-motion-short-3), color var(--effect-motion-short-3);isolation:isolate;--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand);--ds-focus-ring-color:var(--_bar-nav-focus)}.bar-nav--dashboard.sc-ds-bar-nav,.bar-nav--settings.sc-ds-bar-nav{--_bar-nav-bg:var(--color-background-secondary);--_bar-nav-border:var(--color-border-tertiary);--_bar-nav-fg-primary:var(--color-foreground-primary);--_bar-nav-fg-secondary:var(--color-foreground-secondary);--_bar-nav-hover:var(--color-interaction-hover);--_bar-nav-pressed:var(--color-interaction-pressed);--_bar-nav-focus:var(--color-interaction-focus);--_bar-nav-dot:var(--color-foreground-bold-brand)}ds-app-shell.sc-ds-bar-nav-h:not([gradient-preset='none']) .bar-nav.sc-ds-bar-nav,ds-app-shell:not([gradient-preset='none']) .sc-ds-bar-nav-h .bar-nav.sc-ds-bar-nav{background-color:transparent}.bar-nav.sc-ds-bar-nav>.sc-ds-bar-nav:not(.bar-nav__tabs-probe){position:relative;z-index:3}.bar-nav--tabs-collapsed.sc-ds-bar-nav{display:flex;gap:var(--dimension-space-100);align-items:center}.bar-nav__left.sc-ds-bar-nav{position:relative;flex:1 1 0%;min-width:0;width:0;display:flex;align-items:center}.bar-nav__tabs-visible.sc-ds-bar-nav{flex:1;min-width:0;width:100%}.bar-nav__tabs-probe.sc-ds-bar-nav{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none;overflow:visible;width:max-content;max-width:none;z-index:-1}.bar-nav__tabs-probe.sc-ds-bar-nav>div.sc-ds-bar-nav{width:max-content}.bar-nav__tab-list.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:max-content}.bar-nav__tab.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background-color:transparent;color:var(--_bar-nav-fg-secondary);cursor:pointer;position:relative;flex-shrink:0;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.bar-nav__tab.sc-ds-bar-nav::after{content:'';position:absolute;inset:0;border-radius:var(--ds-control-radius);background:transparent;pointer-events:none}.bar-nav__tab.sc-ds-bar-nav:hover::after{background:var(--_bar-nav-hover)}.bar-nav__tab.sc-ds-bar-nav:active::after{background:var(--_bar-nav-pressed)}.bar-nav__tab--selected.sc-ds-bar-nav{color:var(--_bar-nav-fg-primary)}.bar-nav__tab-label.sc-ds-bar-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset);white-space:nowrap}.bar-nav__tab-label--dot.sc-ds-bar-nav{padding-right:calc(var(--ds-control-label-inset) + var(--ds-control-gap))}.bar-nav__tab-dot.sc-ds-bar-nav{position:absolute;top:0;right:0;pointer-events:none}.bar-nav__tab-divider.sc-ds-bar-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--ds-control-height);padding-block:var(--ds-control-padding-inline);flex-shrink:0;pointer-events:none}.bar-nav__tab-divider-line.sc-ds-bar-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--_bar-nav-border)}.bar-nav__tabs-pending.sc-ds-bar-nav{flex:1;min-width:0;height:var(--ds-control-height);visibility:hidden;pointer-events:none}.bar-nav__overflow-trigger.sc-ds-bar-nav{margin-left:auto;--ds-button-unfilled-fg:var(--_bar-nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_bar-nav-fg-primary);--ds-interaction-hover:var(--_bar-nav-hover);--ds-interaction-pressed:var(--_bar-nav-pressed);--ds-focus-ring-color:var(--_bar-nav-focus)}ds-text.bar-nav__heading.sc-ds-bar-nav{display:inline-flex;align-items:center;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-user-select:none;user-select:none}`;const D=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.dsTabChange=i(this,"dsTabChange");this.navStyle="dashboard";this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.moreTabsLabel="More tabs";this.resolvedTabs=[];this.urlDerivedValue="";this.hideTabsForDetailRoute=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.tabLayoutCommitted=false;this.visibleTabs=[];this.overflowTabs=[];this.menuInitialFocusVisible=false;this.overflowRovingFocused=false;this.focusedTabId="";this.headerEl=null;this.triggerEl=null;this.menuEl=null;this.visibleTabListEl=null;this.probeTabListEl=null;this.resizeObserver=null;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.panelNavTransition=new c;this.panelToolsTransition=new c;this.overflowCoalescer=b((()=>{this.updateTabsCollapsed()}));this.chromeTransitionShell=null;this.committedSection="";this.pendingSection="";this.onChromeTransitionStart=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.enter();return}if(t==="panel-tools"){const t=p(s)??"opening";if(t==="closing"){this.panelToolsTransition.enter()}}};this.onChromeTransitionEnd=s=>{const t=v(s);if(t==="panel-nav"){this.panelNavTransition.exit();if(!this.panelNavTransition.isActive){this.scheduleOverflowCheck()}return}if(t==="panel-tools"){this.panelToolsTransition.exit();this.scheduleOverflowCheck()}};this.handleOverflowFocus=()=>{this.overflowRovingFocused=true};this.handleOverflowBlur=()=>{this.overflowRovingFocused=false}}get effectiveValue(){if(this.currentUrl&&this.basePath){return this.urlDerivedValue}return this.value}get renderedSelectableTabs(){const s=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return o(s)}get hasOverflowTabs(){return this.tabLayoutCommitted&&this.tabsCollapsed&&this.overflowTabs.length>0}syncFocusedTabId(s,t){if(t.some((t=>t.id===s&&!t.isInactive))){this.focusedTabId=s;return}const i=t.find((s=>!s.isInactive));this.focusedTabId=i?.id??""}digestTabsConfig(s){return s.map((s=>r(s)?"|":s.id)).join(",")}resetTabOverflowLayout(){this.tabLayoutCommitted=false;this.tabsCollapsed=false;this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.visibleTabs=[];this.overflowTabs=[]}onHostPropsChange(){this.applyHostProps()}onSelectionChange(){this.syncFocusedTabId(this.effectiveValue,this.renderedSelectableTabs);this.syncMenuSections();this.scheduleOverflowCheck()}onMenuOpenChange(s){if(this.menuEl){this.menuEl.open=s}}onTabsCollapsedChange(s,t){if(!s){this.menuOpen=false;this.menuTriggerActive=false;this.menuInitialFocusVisible=false;this.menuEl=null}this.scheduleOverflowCheck();if(s){requestAnimationFrame((()=>{this.scheduleOverflowCheck()}))}if(s||t===undefined||t===s)return;requestAnimationFrame((()=>this.scheduleOverflowCheck()));queueMicrotask((()=>this.focusVisibleSelectedTab()))}componentWillLoad(){this.applyHostProps();this.syncFocusedTabId(this.effectiveValue,o(this.resolvedTabs))}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();this.setupOverflowObserver();this.bindChromeTransitionListeners();this.scheduleOverflowCheck()}componentDidRender(){if(this.chromeOverflowPaused()){this.syncMenuAnchor();return}this.scheduleOverflowCheck();this.syncMenuAnchor()}disconnectedCallback(){this.resizeObserver?.disconnect();this.resizeObserver=null;this.overflowCoalescer.cancel();this.unbindChromeTransitionListeners()}bindChromeTransitionListeners(){const s=this.el.closest("ds-app-shell");if(!s)return;this.chromeTransitionShell=s;s.addEventListener(f,this.onChromeTransitionStart);s.addEventListener(u,this.onChromeTransitionEnd)}unbindChromeTransitionListeners(){if(!this.chromeTransitionShell)return;this.chromeTransitionShell.removeEventListener(f,this.onChromeTransitionStart);this.chromeTransitionShell.removeEventListener(u,this.onChromeTransitionEnd);this.chromeTransitionShell=null}chromeOverflowPaused(){return this.panelNavTransition.isActive||this.panelToolsTransition.isActive}syncHostPropsIfNeeded(){if(d(this.resolvedTabs,this.tabs,this.tabsJson)){this.applyHostProps()}else if(this.currentUrl&&this.basePath){this.syncValueFromUrl()}}scheduleDeferredHostPropSync(){let t=s.HOST_PROP_SYNC_BUDGET;const i=()=>{this.syncHostPropsIfNeeded();if(--t>0){requestAnimationFrame(i)}};queueMicrotask(i)}setupOverflowObserver(){if(typeof ResizeObserver==="undefined"||!this.headerEl)return;this.resizeObserver?.disconnect();this.resizeObserver=new ResizeObserver((()=>{if(this.chromeOverflowPaused())return;this.scheduleOverflowCheck()}));this.resizeObserver.observe(this.headerEl)}scheduleOverflowCheck(){if(this.chromeOverflowPaused())return;this.overflowCoalescer.schedule()}getLeftZoneAvailableWidth(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);const t=(parseFloat(s.paddingLeft)||0)+(parseFloat(s.paddingRight)||0);return Math.max(0,this.headerEl.clientWidth-t)}getTabsIntrinsicWidth(){return this.probeTabListEl?.scrollWidth??0}getHeaderGap(){if(!this.headerEl)return 0;const s=getComputedStyle(this.headerEl);return parseFloat(s.columnGap||s.gap)||0}getOverflowTriggerReserveWidth(){if(!this.triggerEl){return 40}return this.triggerEl.getBoundingClientRect().width+this.getHeaderGap()}getProbeTabMetrics(){const s=this.probeTabListEl;if(!s)return null;const t=Array.from(s.children);const i=t.map((s=>s.getBoundingClientRect().width));if(i.length===0||i.some((s=>s===0)))return null;const e=getComputedStyle(s);const n=parseFloat(e.columnGap||e.gap)||0;const a=i.reduce(((s,t)=>s+t),0);const r=n*Math.max(0,i.length-1);const o=Math.max(0,s.scrollWidth-a-r);return{itemWidths:i,itemGap:n,listExtraWidth:o}}setOverflowTabLayout(s,t){const i=t.length>0;const e=this.digestTabsConfig(s)!==this.digestTabsConfig(this.visibleTabs);const n=this.digestTabsConfig(t)!==this.digestTabsConfig(this.overflowTabs);if(e){this.visibleTabs=s}if(n){this.overflowTabs=t}if(i!==this.tabsCollapsed){this.tabsCollapsed=i;if(!i){this.menuOpen=false;this.menuTriggerActive=false}}this.syncFocusedTabId(this.effectiveValue,o(i?s:this.resolvedTabs))}scheduleIntrinsicWidthRetry(){if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX)return;this.intrinsicWidthRetryCount++;requestAnimationFrame((()=>this.scheduleOverflowCheck()))}forceTabLayoutCommit(s){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.setOverflowTabLayout(s?[]:this.resolvedTabs,s?this.resolvedTabs:[]);this.tabLayoutCommitted=true}updateTabsCollapsed(){if(!this.headerEl||this.resolvedTabs.length===0||this.hideTabsForDetailRoute){if(this.tabsCollapsed){this.setOverflowTabLayout([],[])}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.tabLayoutCommitted=true;return}const t=this.getProbeTabMetrics();const i=this.getTabsIntrinsicWidth();if(!t||i===0){this.tabLayoutPendingFrames+=1;if(this.intrinsicWidthRetryCount>=s.INTRINSIC_WIDTH_RETRY_MAX){this.forceTabLayoutCommit(false)}else if(this.tabLayoutPendingFrames>=s.TAB_LAYOUT_COMMIT_MAX_FRAMES){this.forceTabLayoutCommit(false)}else{this.scheduleIntrinsicWidthRetry()}return}this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;const e=M(i,this.getLeftZoneAvailableWidth(),this.tabsCollapsed,s.OVERFLOW_HYSTERESIS_PX);if(!e){this.setOverflowTabLayout(this.resolvedTabs,[]);this.tabLayoutCommitted=true;return}const n=O(t.itemWidths,this.getLeftZoneAvailableWidth(),this.getOverflowTriggerReserveWidth(),t.itemGap,t.listExtraWidth);const a=F(this.resolvedTabs.slice(0,n));const r=this.resolvedTabs.slice(a.length);this.setOverflowTabLayout(a,r);this.tabLayoutCommitted=true}syncMenuAnchor(){if(!this.menuEl||!this.triggerEl||!this.hasOverflowTabs)return;this.menuEl.anchor=this.triggerEl;this.syncMenuSections()}handleMenuSelect(s){const t=s.detail;if(t?.value!==undefined){this.selectTab(String(t.value))}this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuClose(){this.menuOpen=false;this.menuInitialFocusVisible=false}handleMenuAfterClose(){if(!this.menuOpen)this.menuTriggerActive=false}incomingTabs(){return this.tabsJson?h(this.tabsJson,[]):this.tabs??[]}applyHostProps(){const s=this.basePath;const t=s!==""&&this.committedSection!==""&&s!==this.committedSection;if(t){this.urlDerivedValue="";this.committedSection="";this.pendingSection=s;this.resolvedTabs=[];this.resetTabOverflowLayout();return}if(this.pendingSection){if(!s||s!==this.pendingSection){return}if(!this.currentUrl.startsWith(this.pendingSection)){return}const t=this.incomingTabs();if(t.length===0){return}this.pendingSection=""}const i=this.incomingTabs();const e=this.digestTabsConfig(i)!==this.digestTabsConfig(this.resolvedTabs);this.resolvedTabs=i;this.syncValueFromUrl();this.committedSection=s;if(e){this.resetTabOverflowLayout()}this.scheduleOverflowCheck()}syncMenuSections(){if(!this.menuEl)return;this.menuEl.sections=S(this.overflowTabs,this.effectiveValue)}syncValueFromUrl(){const s=this.incomingTabs();if(!this.currentUrl||!this.basePath){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}if(!this.currentUrl.startsWith(this.basePath)){this.urlDerivedValue="";this.hideTabsForDetailRoute=false;return}const{value:t,hideTabs:i}=l(this.currentUrl,this.basePath,s);this.urlDerivedValue=t;this.hideTabsForDetailRoute=i}selectTab(s){this.value=s;this.dsTabChange.emit(s)}focusVisibleSelectedTab(){const s=this.visibleTabListEl?.querySelector(`[data-tab-id="${this.effectiveValue}"]`);s?.focus({preventScroll:true})}focusVisibleTab(s){this.focusedTabId=s;const t=this.visibleTabListEl?.querySelector(`[data-tab-id="${s}"]`);t?.focus({preventScroll:true})}focusLastVisibleTab(){const s=[...this.renderedSelectableTabs].reverse().find((s=>!s.isInactive));if(s)this.focusVisibleTab(s.id)}findEnabledVisibleTab(s,t){const i=this.renderedSelectableTabs;for(let e=s+t;e>=0&&e<i.length;e+=t){if(!i[e]?.isInactive)return e}return null}handleTabKeyDown(s){const t=this.renderedSelectableTabs;if(!t.length)return;const i=s.target?.getAttribute("data-tab-id");const e=i??this.focusedTabId;if(s.key==="Enter"||s.key===" "){const i=t.find((s=>s.id===e));if(!i||i.isInactive)return;s.preventDefault();this.selectTab(i.id);return}const n=t.findIndex((s=>s.id===e));if(n<0)return;let a;if(s.key==="ArrowRight"){a=this.findEnabledVisibleTab(n,1);if(a===null&&this.hasOverflowTabs){s.preventDefault();this.overflowRovingFocused=true;void this.triggerEl?.setFocus?.();return}}else if(s.key==="ArrowLeft"){a=this.findEnabledVisibleTab(n,-1)}else if(s.key==="Home"){a=t.findIndex((s=>!s.isInactive))}else if(s.key==="End"){const s=[...t].reverse().findIndex((s=>!s.isInactive));a=s<0?null:t.length-1-s}else{return}if(a===null||a<0||a===n)return;s.preventDefault();this.focusVisibleTab(t[a].id)}toggleTabMenu(s){if(this.menuOpen){this.menuOpen=false;this.menuInitialFocusVisible=false;return}if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl;this.menuEl.minWidth="";this.syncMenuSections()}this.menuInitialFocusVisible=s?.focusVisible??false;this.menuTriggerActive=true;this.menuOpen=true}handleTriggerKeyDown(s){if(!this.hasOverflowTabs)return;if(!this.menuOpen){if(s.key==="ArrowLeft"){s.preventDefault();this.overflowRovingFocused=false;this.focusLastVisibleTab();return}if(s.key==="Enter"||s.key===" "){s.preventDefault();this.toggleTabMenu({focusVisible:true})}return}if(s.key==="Escape"){s.preventDefault();this.menuOpen=false;this.menuInitialFocusVisible=false;void this.triggerEl?.setFocus?.()}}renderTabList(s,t){return e("div",{role:"tablist",class:"bar-nav__tab-list","aria-label":this.heading,ref:s=>{if(t){const t=s??null;if(t===this.probeTabListEl)return;this.probeTabListEl=t;if(t){this.intrinsicWidthRetryCount=0;this.tabLayoutPendingFrames=0;this.scheduleOverflowCheck()}}else{this.visibleTabListEl=s??null}},onKeyDown:t?undefined:s=>this.handleTabKeyDown(s),onFocusin:t?undefined:()=>{this.overflowRovingFocused=false}},s.map(((s,i)=>{if(r(s)){return e("div",{class:"bar-nav__tab-divider",key:`divider-${i}`,"aria-hidden":"true"},e("div",{class:"bar-nav__tab-divider-line"}))}const n=s.id===this.effectiveValue;return e("button",{key:s.id,type:"button",role:"tab","data-tab-id":s.id,class:{"bar-nav__tab":true,"bar-nav__tab--selected":n,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-control-inactive":!!s.isInactive},"aria-selected":n?"true":"false","aria-disabled":s.isInactive?"true":undefined,"aria-controls":s.panelId??undefined,disabled:s.isInactive,tabIndex:!t&&!this.overflowRovingFocused&&s.id===this.focusedTabId?0:-1,onClick:()=>!t&&!s.isInactive&&this.selectTab(s.id),onFocus:()=>{if(!t)this.focusedTabId=s.id}},e("span",{class:{"bar-nav__tab-label":true,"bar-nav__tab-label--dot":!!s.dot}},e("ds-text",{as:"span",variant:"text-body-medium",emphasis:n,color:"inherit"},s.label),s.dot&&e("ds-badge",{class:"bar-nav__tab-dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))})))}render(){const s=this.basePath===""||this.committedSection===this.basePath;const t=s&&this.resolvedTabs.length>0&&!this.hideTabsForDetailRoute;const i=this.basePath||"no-section";const a=this.hasOverflowTabs?this.visibleTabs:this.resolvedTabs;return e(n,{key:"f6cc55291daf42d207a61b544191428ba9cfd465"},e("header",{key:"73ce916b382ae8aee414d55d50ffd77a754accf7",class:{"bar-nav":true,"ds-control--md":true,"bar-nav--dashboard":this.navStyle==="dashboard","bar-nav--settings":this.navStyle==="settings","bar-nav--tabs-collapsed":t&&this.hasOverflowTabs},ref:s=>{this.headerEl=s;if(s&&!this.resizeObserver){this.setupOverflowObserver()}}},t&&e("div",{key:"e22021e8f3206813a102899ab20398048c49c7d5",class:"bar-nav__tabs-probe","aria-hidden":"true",inert:true},e("div",{key:`probe-${i}`},this.renderTabList(this.resolvedTabs,true))),t&&this.tabLayoutCommitted&&a.length>0&&e("div",{key:"d4bcd3e2b7cdcb65b050859cc94ab8ea3cc4389a",class:"bar-nav__left"},e("div",{key:`visible-${i}`,class:"bar-nav__tabs-visible"},this.renderTabList(a,false))),t&&!this.tabLayoutCommitted&&e("div",{key:"df0609dea70aba3aa3c90e57daa60016700eedf4",class:"bar-nav__tabs-pending","aria-hidden":"true"}),!t&&this.heading&&e("ds-text",{key:"590973cfad8d2a8a56589e7d816f8d2816ef5436",class:"bar-nav__heading",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",wrap:"nowrap"},this.heading),t&&this.hasOverflowTabs&&e("ds-button-unfilled",{key:"6df531b5f6edd58992a50655e34532675f6149f9",variant:"icon",class:{"bar-nav__overflow-trigger":true},icon:"Ellipses",activeFill:false,hasBorder:false,focusTabIndex:this.overflowRovingFocused?0:-1,ref:s=>{this.triggerEl=s??null},haspopup:"menu",expanded:this.menuTriggerActive,"aria-label":this.moreTabsLabel,onDsClick:()=>this.toggleTabMenu({focusVisible:false}),onFocusin:this.handleOverflowFocus,onFocusout:this.handleOverflowBlur,onKeyDown:s=>this.handleTriggerKeyDown(s)})),t&&this.hasOverflowTabs&&e("ds-menu",{key:"c42b33e2ba957d668c274712eedd03a2d7e373e1",ref:s=>{this.menuEl=s??null},open:this.menuOpen,sections:S(this.overflowTabs,this.effectiveValue),side:"bottom",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",initialFocusVisible:this.menuInitialFocusVisible,onDsSelect:s=>this.handleMenuSelect(s),onDsClose:()=>this.handleMenuClose(),onDsAfterClose:()=>this.handleMenuAfterClose()}))}get el(){return this}static get watchers(){return{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}}static get style(){return P()}},[2,"ds-bar-nav",{navStyle:[513,"nav-style"],tabs:[16],tabsJson:[1,"tabs-json"],value:[1025],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],moreTabsLabel:[1,"more-tabs-label"],resolvedTabs:[32],urlDerivedValue:[32],hideTabsForDetailRoute:[32],tabsCollapsed:[32],menuOpen:[32],menuTriggerActive:[32],tabLayoutCommitted:[32],visibleTabs:[32],overflowTabs:[32],menuInitialFocusVisible:[32],overflowRovingFocused:[32],focusedTabId:[32],committedSection:[32],pendingSection:[32]},undefined,{tabs:[{onHostPropsChange:0}],tabsJson:[{onHostPropsChange:0}],currentUrl:[{onHostPropsChange:0}],basePath:[{onHostPropsChange:0}],value:[{onSelectionChange:0}],urlDerivedValue:[{onSelectionChange:0}],menuOpen:[{onMenuOpenChange:0}],tabsCollapsed:[{onTabsCollapsedChange:0}]}]);D.HOST_PROP_SYNC_BUDGET=8;D.INTRINSIC_WIDTH_RETRY_MAX=3;D.TAB_LAYOUT_COMMIT_MAX_FRAMES=16;D.OVERFLOW_HYSTERESIS_PX=8;function H(){if(typeof customElements==="undefined"){return}const s=["ds-bar-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text"];s.forEach((s=>{switch(s){case"ds-bar-nav":if(!customElements.get(a(s))){customElements.define(a(s),D)}break;case"ds-badge":if(!customElements.get(a(s))){g()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){m()}break;case"ds-icon":if(!customElements.get(a(s))){_()}break;case"ds-loader":if(!customElements.get(a(s))){y()}break;case"ds-menu":if(!customElements.get(a(s))){w()}break;case"ds-swatch-picker":if(!customElements.get(a(s))){k()}break;case"ds-switch":if(!customElements.get(a(s))){C()}break;case"ds-text":if(!customElements.get(a(s))){x()}break}}))}H();const L=D;const A=H;export{L as DsBarNav,A as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-bar-nav.js.map
|