@ds-mo/ui 15.4.1 → 15.5.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/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +53 -6
- package/dist/angular/ds-select.d.ts +1 -1
- package/dist/angular/ds-select.js +3 -3
- package/dist/angular/ds-table.d.ts +7 -1
- package/dist/angular/ds-table.js +11 -5
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-page-title.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-calendar.js +1 -1
- package/dist/components/ds-card-action-center.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-data-customize.js +1 -1
- package/dist/components/ds-data-filter.js +1 -1
- package/dist/components/ds-data-group.js +1 -1
- package/dist/components/ds-data-preferences.js +1 -1
- package/dist/components/ds-data-saved-views.js +1 -1
- package/dist/components/ds-data-search.js +1 -1
- package/dist/components/ds-data-sort.js +1 -1
- package/dist/components/ds-data-toolbar.js +1 -1
- package/dist/components/ds-divider.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input-date.js +1 -1
- package/dist/components/ds-input-date.js.map +1 -1
- package/dist/components/ds-input-time.js +1 -1
- package/dist/components/ds-input-time.js.map +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-map-entity-marker.js +1 -1
- package/dist/components/ds-map-entity-marker.js.map +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-message-actions.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-scroller.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-sub-nav.js +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-radio-tile.js +1 -1
- package/dist/components/ds-radio.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-scroll-overlay.js.map +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-textarea.js +1 -1
- package/dist/components/ds-textarea.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/{p-YYiDYQhS.js → p--VQc5GDy.js} +2 -2
- package/dist/components/{p-LENgfPDe.js → p-7MwoWtTJ.js} +2 -2
- package/dist/components/p-B95UP66y.js +2 -0
- package/dist/components/p-B95UP66y.js.map +1 -0
- package/dist/components/{p-D-J7GgjY.js → p-BLeHHoVb.js} +2 -2
- package/dist/components/{p-D-J7GgjY.js.map → p-BLeHHoVb.js.map} +1 -1
- package/dist/components/{p-CXGjCWSh.js → p-BfVMaZZE.js} +2 -2
- package/dist/components/{p-wRhYxngW.js → p-BlbfbYg6.js} +2 -2
- package/dist/components/{p-PtxCwf5S.js → p-BuDxlhnQ.js} +2 -2
- package/dist/components/p-BuGlC5r8.js +2 -0
- package/dist/components/p-BuGlC5r8.js.map +1 -0
- package/dist/components/{p-BkvAqrXg.js → p-C1ZfBbJ_.js} +2 -2
- package/dist/components/{p-BcpIK9S6.js → p-C35Tki38.js} +2 -2
- package/dist/components/{p-jwVzQaTZ.js → p-C378wwRj.js} +2 -2
- package/dist/components/{p-B6TX55c5.js → p-C9H-3JOA.js} +2 -2
- package/dist/components/{p-COD1C3Gj.js → p-CNeDJTGX.js} +2 -2
- package/dist/components/p-CXlklL-0.js +2 -0
- package/dist/components/{p-dUti7zhW.js.map → p-CXlklL-0.js.map} +1 -1
- package/dist/components/{p-D7wLvTHz.js → p-CcwxySms.js} +2 -2
- package/dist/components/p-CzdE3M3g.js +2 -0
- package/dist/components/p-CzdE3M3g.js.map +1 -0
- package/dist/components/{p-DQfKS7dz.js → p-D9_iDlkT.js} +2 -2
- package/dist/components/{p-DkxhNqT-.js → p-DPwptvZl.js} +2 -2
- package/dist/components/{p-Dg6hnCc2.js → p-DVsGfz7J.js} +2 -2
- package/dist/components/{p-Dg6hnCc2.js.map → p-DVsGfz7J.js.map} +1 -1
- package/dist/components/{p--STJbKuN.js → p-DYsRXun3.js} +2 -2
- package/dist/components/{p-BYeG0b5N.js → p-DZLtFn-r.js} +2 -2
- package/dist/components/{p-B0BQCVkq.js → p-D_iZPukF.js} +2 -2
- package/dist/components/p-Da3aFRk2.js +2 -0
- package/dist/components/p-Da3aFRk2.js.map +1 -0
- package/dist/components/{p-BK_4OHJO.js → p-Df9S0aWi.js} +2 -2
- package/dist/components/{p-YDMY8T0d.js → p-a-cIN_BX.js} +2 -2
- package/dist/components/{p-YDMY8T0d.js.map → p-a-cIN_BX.js.map} +1 -1
- package/dist/components/{p-C_9VGgPf.js → p-bQE1NZVe.js} +2 -2
- package/dist/components/{p-CcZSzCfs.js → p-sDm8BEMy.js} +2 -2
- package/dist/docs/components.json +417 -74
- package/dist/lint/index.js +1 -1
- package/dist/mcp-data/registry/button-filled.json +1 -1
- package/dist/mcp-data/registry/map-entity-marker.json +5 -5
- package/dist/mcp-data/registry/registry.json +52 -5
- package/dist/mcp-data/registry/select.json +54 -3
- package/dist/mcp-data/registry/table.json +138 -12
- package/dist/react/ds-table.d.ts +3 -1
- package/dist/react/ds-table.js +2 -0
- package/dist/styles/table.css +399 -8
- package/dist/types/components/MapEntityMarker/MapEntityMarker.d.ts +1 -1
- package/dist/types/components/Select/Select.d.ts +6 -0
- package/dist/types/components/Table/Table.d.ts +35 -0
- package/dist/types/components/Table/index.d.ts +1 -1
- package/dist/types/components/Table/table-body-renderer.d.ts +1 -0
- package/dist/types/components/Table/table-cell-editor.d.ts +4 -0
- package/dist/types/components/Table/table-grid-model.d.ts +23 -0
- package/dist/types/components/Table/table-layout-controller.d.ts +1 -0
- package/dist/types/components/Table/table-review-fixtures.d.ts +10 -0
- package/dist/types/components/Table/table-row-view.d.ts +11 -2
- package/dist/types/components/Table/table-skeleton-view.d.ts +3 -1
- package/dist/types/components/Table/table-structure.d.ts +38 -0
- package/dist/types/components/Table/table-types.d.ts +71 -1
- package/dist/types/components/Table/table-virtual-controller.d.ts +1 -0
- package/dist/types/components.d.ts +80 -4
- package/dist/types/utils/select-controller.d.ts +1 -0
- package/dist/vue/ds-select.js +3 -0
- package/dist/vue/ds-table.js +8 -0
- package/package.json +1 -1
- package/dist/components/p-buM-T4vF.js +0 -2
- package/dist/components/p-buM-T4vF.js.map +0 -1
- package/dist/components/p-dUti7zhW.js +0 -2
- /package/dist/components/{p-YYiDYQhS.js.map → p--VQc5GDy.js.map} +0 -0
- /package/dist/components/{p-LENgfPDe.js.map → p-7MwoWtTJ.js.map} +0 -0
- /package/dist/components/{p-CXGjCWSh.js.map → p-BfVMaZZE.js.map} +0 -0
- /package/dist/components/{p-wRhYxngW.js.map → p-BlbfbYg6.js.map} +0 -0
- /package/dist/components/{p-PtxCwf5S.js.map → p-BuDxlhnQ.js.map} +0 -0
- /package/dist/components/{p-BkvAqrXg.js.map → p-C1ZfBbJ_.js.map} +0 -0
- /package/dist/components/{p-BcpIK9S6.js.map → p-C35Tki38.js.map} +0 -0
- /package/dist/components/{p-jwVzQaTZ.js.map → p-C378wwRj.js.map} +0 -0
- /package/dist/components/{p-B6TX55c5.js.map → p-C9H-3JOA.js.map} +0 -0
- /package/dist/components/{p-COD1C3Gj.js.map → p-CNeDJTGX.js.map} +0 -0
- /package/dist/components/{p-D7wLvTHz.js.map → p-CcwxySms.js.map} +0 -0
- /package/dist/components/{p-DQfKS7dz.js.map → p-D9_iDlkT.js.map} +0 -0
- /package/dist/components/{p-DkxhNqT-.js.map → p-DPwptvZl.js.map} +0 -0
- /package/dist/components/{p--STJbKuN.js.map → p-DYsRXun3.js.map} +0 -0
- /package/dist/components/{p-BYeG0b5N.js.map → p-DZLtFn-r.js.map} +0 -0
- /package/dist/components/{p-B0BQCVkq.js.map → p-D_iZPukF.js.map} +0 -0
- /package/dist/components/{p-BK_4OHJO.js.map → p-Df9S0aWi.js.map} +0 -0
- /package/dist/components/{p-C_9VGgPf.js.map → p-bQE1NZVe.js.map} +0 -0
- /package/dist/components/{p-CcZSzCfs.js.map → p-sDm8BEMy.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["dataGroupCss","DEFAULT_ORDER_OPTIONS","label","direction","tableGroupSeq","DataGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","vertical","embedded","options","grouping","ariaLabel","open","emptyMessage","clearLabel","shouldRender","closing","positionReady","pos","x","y","focusRingVisible","componentId","triggerId","popupId","triggerElement","pendingInitialFocusVisible","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","position","AnchoredPositionController","getAnchor","getPopup","querySelector","getOwnerDocument","ownerDocument","measure","anchor","popup","sectionInsetPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","anchorRect","getBoundingClientRect","popupWidth","offsetWidth","popupFallbackWidth","popupHeight","offsetHeight","popupFallbackHeight","side","align","sideOffsetPx","TOKEN_CSS_LENGTHS","alignOffsetPx","resolveChoicePopupAlignOffset","viewportPadPx","viewportWidth","window","innerWidth","viewportHeight","innerHeight","collisionRect","resolveAnchoredOverlayBoundaryRect","apply","onReady","liveUpdate","observeResize","topLayer","interaction","AnchoredOverlayInteractionController","onOutsideActivation","close","componentDidLoad","onOpenChange","connectedCallback","disconnectedCallback","teardown","isOpen","connect","observe","schedule","focusInitialDataPoint","cancel","disconnect","unobserve","duration","resolveMotionTimeMs","motionShort2","animationDurationShort3","finishClose","setTimeout","handleKeyDown","event","key","preventDefault","tabLeavesPopup","moveFocusAfterTab","shiftKey","menuWidthLg","menuFallbackHeight","clearTimeout","toggle","fromKeyboard","dsOpenChange","emit","restoreFocus","focusAnchor","matches","hidePopover","frame","selected","CSS","escape","fieldId","initial","focus","selectData","option","value","dsClear","isInactive","dsGroupChange","initialOrder","orderOptions","orderBy","activeOrderOptions","configured","find","length","selectedOrderIndex","exact","findIndex","undefined","selectOrder","index","moveFocus","selector","currentIndex","oppositeSelector","includes","items","Array","from","querySelectorAll","filter","item","getAttribute","next","renderDataOption","h","ChoiceOptionRow","id","active","usesSubtext","Boolean","description","tabIndex","onHover","onSelect","onKeyDown","candidate","renderOrder","String","render","name","trim","popupStyle","left","top","transform","Math","round","zIndex","visibility","Host","class","hidden","ref","element","variant","size","icon","labelEmphasis","pressScale","haspopup","collapseLabel","expanded","surfaceOpen","controls","onDsClick","detail","popover","style","role","ChoiceListSection","heading","className","map","type","onClick","as","color","body"],"sources":["src/wc/components/DataGroup/DataGroup.css?tag=ds-data-group&encapsulation=scoped","src/wc/components/DataGroup/DataGroup.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n display: inline-flex;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.data-group__body {\n display: grid;\n grid-template-columns: var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);\n min-height: calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));\n max-height: calc(100vh - var(--dimension-size-800) - var(--dimension-size-600));\n}\n\n.data-group__data-pane,\n.data-group__order-pane {\n display: flex;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n}\n\n.data-group__data-pane {\n border-inline-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.data-group__list {\n flex: 1 1 auto;\n}\n\n.data-group__empty {\n flex: 1 1 auto;\n}\n\n.data-group__footer {\n flex: 0 0 auto;\n}\n\n.data-group__footer .ds-choice-footer__content {\n justify-content: flex-start;\n}\n\n.data-group__footer[aria-hidden='true']::before {\n visibility: hidden;\n}\n\n.data-group__footer[aria-hidden='true'] .ds-choice-footer__content {\n visibility: hidden;\n}\n\n@media (forced-colors: active) {\n .data-group__data-pane {\n border-inline-end-color: var(--ds-forced-color-content);\n }\n}\n\n.data-preferences-embedded {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n color: var(--color-foreground-secondary);\n}\n\n:host:has(.data-preferences-embedded) {\n display: block;\n max-inline-size: none;\n}\n.data-preferences-embedded .data-group__body {\n grid-template-columns: min(var(--dimension-menu-width-xs), 40%) minmax(0, 1fr);\n}\n\n:host(.data-group-vertical) .data-group__body {\n grid-template-columns: minmax(0, 1fr);\n}\n:host(.data-group-vertical) .data-group__data-pane {\n border-inline-end: 0;\n}\n\n:host(.data-group-vertical) .data-group__footer {\n display: none;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceListSection, ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport type { DataGroupingState, DataSortDirection } from '../Table/table-types';\n\nexport interface TableGroupOrderOption {\n label: string;\n direction: DataSortDirection;\n /** Optional application-owned data point used to order the group sections. */\n orderBy?: string;\n}\n\nexport interface DataGroupOption {\n label: string;\n value: string;\n description?: string;\n isInactive?: boolean;\n /** Product-owned order choices for this grouping data point. */\n orderOptions?: TableGroupOrderOption[];\n}\n\nconst DEFAULT_ORDER_OPTIONS: TableGroupOrderOption[] = [\n { label: 'Ascending', direction: 'asc' },\n { label: 'Descending', direction: 'desc' },\n];\n\nlet tableGroupSeq = 0;\n\n@Component({\n tag: 'ds-data-group',\n styleUrl: 'DataGroup.css',\n scoped: true,\n})\nexport class DataGroup {\n @Element() private el!: HTMLElement;\n\n /** Product-owned data points that may group the table. */\n /** Render content inside a parent-owned surface; the parent owns dismissal and positioning. */\n /** Show the trigger border. */\n @Prop() hasBorder: boolean = true;\n @Prop() vertical: boolean = false;\n @Prop() embedded: boolean = false;\n @Prop() options: DataGroupOption[] = [];\n /** Controlled grouping field and the order of its group sections. */\n @Prop() grouping: DataGroupingState | null = null;\n /** Accessible name for the trigger and non-modal dialog. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Controlled popup visibility. */\n @Prop({ mutable: true }) open = false;\n /** Empty message kept in the order pane until a grouping data point is selected. */\n @Prop() emptyMessage = 'Select a group to choose its order.';\n /** Clear action label. */\n @Prop() clearLabel = 'Clear';\n\n /** Requests replacement of the complete controlled grouping state. */\n @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n /** Requests removal of the controlled grouping state. */\n @Event() dsClear!: EventEmitter<void>;\n /** Reports controlled popup visibility changes. */\n @Event() dsOpenChange!: EventEmitter<boolean>;\n\n @State() private shouldRender = false;\n @State() private closing = false;\n @State() private positionReady = false;\n @State() private pos = { x: 0, y: 0 };\n @State() private focusRingVisible = false;\n\n private readonly componentId = `ds-data-group-${++tableGroupSeq}`;\n private readonly triggerId = `${this.componentId}-trigger`;\n private readonly popupId = `${this.componentId}-popup`;\n private triggerElement: HTMLElement | null = null;\n private pendingInitialFocusVisible = false;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private loaded = false;\n private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.triggerElement,\n getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n if (!this.open) return null;\n const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_CSS_LENGTHS.space050, TOKEN_DEFAULTS.space050),\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: 'end',\n alignOffsetPx: 0,\n sectionInsetPx,\n }),\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n observeResize: true,\n topLayer: true,\n });\n\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.triggerElement,\n getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.close(),\n });\n\n componentDidLoad() {\n this.loaded = true;\n if (this.open) this.onOpenChange(true);\n }\n\n connectedCallback() {\n if (this.loaded && this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.teardown();\n this.shouldRender = false;\n this.closing = false;\n this.positionReady = false;\n this.pendingInitialFocusVisible = false;\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (this.embedded || !this.loaded || !this.el.isConnected) return;\n if (isOpen) {\n this.teardown();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.focusRingVisible = this.pendingInitialFocusVisible;\n this.interaction.connect();\n this.position.observe();\n this.position.schedule(() => this.focusInitialDataPoint());\n return;\n }\n if (!this.shouldRender || this.closing) return;\n this.tasks.cancel();\n this.position.cancel();\n this.closing = true;\n this.interaction.disconnect();\n this.position.unobserve();\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (duration <= 0) this.finishClose();\n else this.closeTimer = setTimeout(() => this.finishClose(), duration);\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (this.embedded && (event.key === 'Escape' || event.key === 'Tab')) return;\n if ((!this.shouldRender && !this.embedded) || this.closing) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n return;\n }\n if (event.key !== 'Tab' || !this.interaction.tabLeavesPopup(event)) return;\n event.preventDefault();\n this.close(false);\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n\n private get popupFallbackWidth(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n }\n\n private get popupFallbackHeight(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private teardown() {\n this.tasks.cancel();\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private toggle(fromKeyboard = false) {\n if (this.open) {\n this.close();\n return;\n }\n this.pendingInitialFocusVisible = fromKeyboard;\n this.open = true;\n this.dsOpenChange.emit(true);\n this.onOpenChange(true);\n }\n\n private close(restoreFocus = true) {\n if (restoreFocus) this.interaction.focusAnchor();\n this.open = false;\n this.dsOpenChange.emit(false);\n this.onOpenChange(false);\n }\n\n private finishClose() {\n if (this.open || !this.closing || !this.el.isConnected) return;\n const popup = this.el.querySelector<HTMLElement>('.data-group-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }\n\n private focusInitialDataPoint() {\n this.tasks.frame(() => {\n if (!this.open || this.closing) return;\n const selected = this.grouping\n ? this.el.querySelector<HTMLElement>(\n `[data-group-value=\"${CSS.escape(this.grouping.fieldId)}\"] [role=\"option\"]`\n )\n : null;\n const initial =\n selected ??\n this.el.querySelector<HTMLElement>(\n '[data-group-value] [role=\"option\"]:not([aria-disabled=\"true\"])'\n );\n initial?.focus();\n this.pendingInitialFocusVisible = false;\n });\n }\n\n private selectData(option: DataGroupOption) {\n if (option.value === '__none__') {\n this.dsClear.emit();\n return;\n }\n if (option.isInactive) return;\n if (this.grouping?.fieldId === option.value) {\n this.dsGroupChange.emit({ ...this.grouping });\n return;\n }\n const initialOrder = option.orderOptions?.[0];\n this.dsGroupChange.emit({\n fieldId: option.value,\n direction: initialOrder?.direction ?? 'asc',\n ...(initialOrder?.orderBy ? { orderBy: initialOrder.orderBy } : {}),\n });\n }\n\n private get activeOrderOptions(): TableGroupOrderOption[] {\n const configured = this.options.find(\n option => option.value === this.grouping?.fieldId\n )?.orderOptions;\n return configured?.length ? configured : DEFAULT_ORDER_OPTIONS;\n }\n\n private get selectedOrderIndex(): number {\n if (!this.grouping) return -1;\n const exact = this.activeOrderOptions.findIndex(\n option =>\n option.direction === this.grouping?.direction && option.orderBy === this.grouping?.orderBy\n );\n if (exact >= 0) return exact;\n if (this.grouping.orderBy === undefined) {\n return this.activeOrderOptions.findIndex(\n option => option.direction === this.grouping?.direction\n );\n }\n return -1;\n }\n\n private selectOrder(option: TableGroupOrderOption, index: number) {\n if (!this.grouping || this.selectedOrderIndex === index) return;\n const grouping: DataGroupingState = {\n fieldId: this.grouping.fieldId,\n direction: option.direction,\n };\n if (option.orderBy) grouping.orderBy = option.orderBy;\n this.dsGroupChange.emit(grouping);\n }\n\n private moveFocus(\n event: KeyboardEvent,\n selector: string,\n currentIndex: number,\n oppositeSelector?: string\n ) {\n if (oppositeSelector && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\n event.preventDefault();\n this.focusRingVisible = true;\n this.el.querySelector<HTMLElement>(oppositeSelector)?.focus();\n return;\n }\n if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n event.preventDefault();\n const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector)).filter(\n item => item.getAttribute('aria-disabled') !== 'true'\n );\n if (!items.length) return;\n let next: number;\n if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = items.length - 1;\n else next = (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;\n this.focusRingVisible = true;\n items[next]?.focus();\n }\n\n private renderDataOption(option: DataGroupOption, index: number) {\n const selected =\n option.value === '__none__' ? !this.grouping : option.value === this.grouping?.fieldId;\n return (\n <ChoiceOptionRow\n id={`${this.componentId}-data-${index}`}\n option={{ ...option }}\n selected={selected}\n active={selected}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={Boolean(option.description)}\n tabIndex={selected || (!this.grouping && index === 0) ? 0 : -1}\n onHover={() => {\n this.focusRingVisible = false;\n }}\n onSelect={() => this.selectData(option)}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.selectData(option);\n return;\n }\n this.moveFocus(\n event,\n '[data-group-value] [role=\"option\"]',\n this.options\n .filter(candidate => !candidate.isInactive)\n .findIndex(candidate => candidate.value === option.value),\n this.grouping\n ? `[data-group-order-index=\"${this.selectedOrderIndex}\"] [role=\"option\"]`\n : undefined\n );\n }}\n />\n );\n }\n\n private renderOrder(option: TableGroupOrderOption, index: number) {\n const selected = index === this.selectedOrderIndex;\n return (\n <ChoiceOptionRow\n id={`${this.componentId}-order-${index}`}\n option={{ label: option.label, value: String(index) }}\n selected={selected}\n active={selected}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={false}\n tabIndex={selected ? 0 : -1}\n onHover={() => {\n this.focusRingVisible = false;\n }}\n onSelect={() => this.selectOrder(option, index)}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.selectOrder(option, index);\n return;\n }\n this.moveFocus(\n event,\n '[data-group-order-index] [role=\"option\"]',\n index,\n `[data-group-value=\"${CSS.escape(this.grouping?.fieldId ?? '')}\"] [role=\"option\"]`\n );\n }}\n />\n );\n }\n\n render() {\n const name = this.ariaLabel?.trim() || 'Group table';\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n return (\n <Host\n class={{ 'data-group-vertical': this.vertical }}\n hidden={this.options.length === 0 ? true : undefined}\n >\n {this.options.length && !this.embedded ? (\n <ds-button-unfilled\n hasBorder={this.hasBorder}\n ref={element => {\n this.triggerElement = (element as HTMLElement) ?? null;\n }}\n id={this.triggerId}\n variant=\"icon-label\"\n size=\"md\"\n icon=\"SectionList\"\n label=\"Group\"\n labelEmphasis={false}\n pressScale={false}\n aria-label={name}\n haspopup=\"dialog\"\n collapseLabel={true}\n expanded={this.open}\n surfaceOpen={this.open || this.closing}\n controls={this.popupId}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.toggle(event.detail.detail === 0)}\n />\n ) : null}\n\n {this.shouldRender || this.embedded ? (\n <div\n id={this.popupId}\n popover={this.embedded ? undefined : 'manual'}\n class={{\n 'data-group-popup': true,\n 'ds-choice-popup': !this.embedded,\n 'data-preferences-embedded': this.embedded,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={this.embedded ? undefined : popupStyle}\n role=\"dialog\"\n aria-label={name}\n >\n <div class=\"data-group__body\">\n <div class=\"data-group__data-pane\">\n <ChoiceListSection\n heading=\"Data\"\n ariaLabel=\"Group data\"\n className=\"data-group__list\"\n >\n {this.vertical &&\n this.renderDataOption({ label: 'No grouping', value: '__none__' }, -1)}\n {this.options.map((option, index) => (\n <div data-group-value={option.value}>\n {this.renderDataOption(option, index)}\n </div>\n ))}\n </ChoiceListSection>\n <div\n hidden={this.vertical}\n class=\"data-group__footer ds-choice-footer\"\n aria-hidden={!this.grouping ? 'true' : undefined}\n >\n <div class=\"ds-choice-footer__content ds-control--md\">\n {this.grouping ? (\n <button\n class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\n type=\"button\"\n onClick={() => this.dsClear.emit()}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {this.clearLabel}\n </ds-text>\n </button>\n ) : null}\n </div>\n </div>\n </div>\n\n <div class=\"data-group__order-pane\">\n {this.grouping ? (\n <ChoiceListSection\n heading=\"Order\"\n ariaLabel=\"Group order\"\n className=\"data-group__list\"\n >\n {this.activeOrderOptions.map((option, index) => (\n <div data-group-order-index={index}>{this.renderOrder(option, index)}</div>\n ))}\n </ChoiceListSection>\n ) : (\n <div class=\"data-group__empty ds-choice-empty ds-empty-region\">\n <ds-empty-state body={this.emptyMessage} />\n </div>\n )}\n </div>\n </div>\n </div>\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["dataGroupCss","DEFAULT_ORDER_OPTIONS","label","direction","tableGroupSeq","DataGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","hasBorder","vertical","embedded","options","grouping","ariaLabel","open","emptyMessage","clearLabel","shouldRender","closing","positionReady","pos","x","y","focusRingVisible","componentId","triggerId","popupId","triggerElement","pendingInitialFocusVisible","closeTimer","loaded","tasks","ConnectionTasks","el","isConnected","position","AnchoredPositionController","getAnchor","getPopup","querySelector","getOwnerDocument","ownerDocument","measure","anchor","popup","sectionInsetPx","resolveCssLengthPx","TOKEN_DEFAULTS","space050","anchorRect","getBoundingClientRect","popupWidth","offsetWidth","popupFallbackWidth","popupHeight","offsetHeight","popupFallbackHeight","side","align","sideOffsetPx","TOKEN_CSS_LENGTHS","alignOffsetPx","resolveChoicePopupAlignOffset","viewportPadPx","viewportWidth","window","innerWidth","viewportHeight","innerHeight","collisionRect","resolveAnchoredOverlayBoundaryRect","apply","onReady","liveUpdate","observeResize","topLayer","interaction","AnchoredOverlayInteractionController","onOutsideActivation","close","componentDidLoad","onOpenChange","connectedCallback","disconnectedCallback","teardown","isOpen","connect","observe","schedule","focusInitialDataPoint","cancel","disconnect","unobserve","duration","resolveMotionTimeMs","motionShort2","animationDurationShort3","finishClose","setTimeout","handleKeyDown","event","key","preventDefault","tabLeavesPopup","moveFocusAfterTab","shiftKey","menuWidthLg","menuFallbackHeight","clearTimeout","toggle","fromKeyboard","dsOpenChange","emit","restoreFocus","focusAnchor","matches","hidePopover","frame","selected","CSS","escape","fieldId","initial","focus","selectData","option","value","dsClear","isInactive","dsGroupChange","initialOrder","orderOptions","orderBy","activeOrderOptions","configured","find","length","selectedOrderIndex","exact","findIndex","undefined","selectOrder","index","moveFocus","selector","currentIndex","oppositeSelector","includes","items","Array","from","querySelectorAll","filter","item","getAttribute","next","renderDataOption","h","ChoiceOptionRow","id","active","usesSubtext","Boolean","description","tabIndex","onHover","onSelect","onKeyDown","candidate","renderOrder","String","render","name","trim","popupStyle","left","top","transform","Math","round","zIndex","visibility","Host","class","hidden","ref","element","variant","size","icon","labelEmphasis","pressScale","haspopup","collapseLabel","expanded","surfaceOpen","controls","onDsClick","detail","popover","style","role","ChoiceListSection","heading","className","map","type","onClick","as","color","body"],"sources":["src/wc/components/DataGroup/DataGroup.css?tag=ds-data-group&encapsulation=scoped","src/wc/components/DataGroup/DataGroup.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/choice-list.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/table-caption-control.css';\n\n:host {\n display: inline-flex;\n min-inline-size: 0;\n max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.data-group__body {\n display: grid;\n grid-template-columns: var(--dimension-menu-width-xs) var(--dimension-menu-width-sm);\n min-height: calc(var(--dimension-size-800) * 4 + var(--dimension-space-150));\n max-height: calc(100vh - var(--dimension-size-800) - var(--dimension-size-600));\n}\n\n.data-group__data-pane,\n.data-group__order-pane {\n display: flex;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n}\n\n.data-group__data-pane {\n border-inline-end: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.data-group__list {\n flex: 1 1 auto;\n}\n\n.data-group__empty {\n flex: 1 1 auto;\n}\n\n.data-group__footer {\n flex: 0 0 auto;\n}\n\n.data-group__footer .ds-choice-footer__content {\n justify-content: flex-start;\n}\n\n.data-group__footer[aria-hidden='true']::before {\n visibility: hidden;\n}\n\n.data-group__footer[aria-hidden='true'] .ds-choice-footer__content {\n visibility: hidden;\n}\n\n@media (forced-colors: active) {\n .data-group__data-pane {\n border-inline-end-color: var(--ds-forced-color-content);\n }\n}\n\n.data-preferences-embedded {\n display: flex;\n flex-direction: column;\n min-width: 0;\n min-height: 0;\n color: var(--color-foreground-secondary);\n}\n\n:host:has(.data-preferences-embedded) {\n display: block;\n max-inline-size: none;\n}\n.data-preferences-embedded .data-group__body {\n grid-template-columns: min(var(--dimension-menu-width-xs), 40%) minmax(0, 1fr);\n}\n\n:host(.data-group-vertical) .data-group__body {\n grid-template-columns: minmax(0, 1fr);\n}\n:host(.data-group-vertical) .data-group__data-pane {\n border-inline-end: 0;\n}\n\n:host(.data-group-vertical) .data-group__footer {\n display: none;\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport {\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { ConnectionTasks } from '../../utils/connection-tasks';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { ChoiceListSection, ChoiceOptionRow } from '../../utils/choice-list-parts';\nimport type { DataGroupingState, DataSortDirection } from '../Table/table-types';\n\nexport interface TableGroupOrderOption {\n label: string;\n direction: DataSortDirection;\n /** Optional application-owned data point used to order the group sections. */\n orderBy?: string;\n}\n\nexport interface DataGroupOption {\n label: string;\n value: string;\n description?: string;\n isInactive?: boolean;\n /** Product-owned order choices for this grouping data point. */\n orderOptions?: TableGroupOrderOption[];\n}\n\nconst DEFAULT_ORDER_OPTIONS: TableGroupOrderOption[] = [\n { label: 'Ascending', direction: 'asc' },\n { label: 'Descending', direction: 'desc' },\n];\n\nlet tableGroupSeq = 0;\n\n@Component({\n tag: 'ds-data-group',\n styleUrl: 'DataGroup.css',\n scoped: true,\n})\nexport class DataGroup {\n @Element() private el!: HTMLElement;\n\n /** Product-owned data points that may group the table. */\n /** Render content inside a parent-owned surface; the parent owns dismissal and positioning. */\n /** Show the trigger border. */\n @Prop() hasBorder: boolean = true;\n @Prop() vertical: boolean = false;\n @Prop() embedded: boolean = false;\n @Prop() options: DataGroupOption[] = [];\n /** Controlled grouping field and the order of its group sections. */\n @Prop() grouping: DataGroupingState | null = null;\n /** Accessible name for the trigger and non-modal dialog. */\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n /** Controlled popup visibility. */\n @Prop({ mutable: true }) open = false;\n /** Empty message kept in the order pane until a grouping data point is selected. */\n @Prop() emptyMessage = 'Select a group to choose its order.';\n /** Clear action label. */\n @Prop() clearLabel = 'Clear';\n\n /** Requests replacement of the complete controlled grouping state. */\n @Event() dsGroupChange!: EventEmitter<DataGroupingState>;\n /** Requests removal of the controlled grouping state. */\n @Event() dsClear!: EventEmitter<void>;\n /** Reports controlled popup visibility changes. */\n @Event() dsOpenChange!: EventEmitter<boolean>;\n\n @State() private shouldRender = false;\n @State() private closing = false;\n @State() private positionReady = false;\n @State() private pos = { x: 0, y: 0 };\n @State() private focusRingVisible = false;\n\n private readonly componentId = `ds-data-group-${++tableGroupSeq}`;\n private readonly triggerId = `${this.componentId}-trigger`;\n private readonly popupId = `${this.componentId}-popup`;\n private triggerElement: HTMLElement | null = null;\n private pendingInitialFocusVisible = false;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private loaded = false;\n private readonly tasks = new ConnectionTasks(() => this.el.isConnected);\n\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.triggerElement,\n getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n if (!this.open) return null;\n const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_CSS_LENGTHS.space050, TOKEN_DEFAULTS.space050),\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: 'end',\n alignOffsetPx: 0,\n sectionInsetPx,\n }),\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n observeResize: true,\n topLayer: true,\n });\n\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.triggerElement,\n getPopup: () => this.el.querySelector<HTMLElement>('.data-group-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.close(),\n });\n\n componentDidLoad() {\n this.loaded = true;\n if (this.open) this.onOpenChange(true);\n }\n\n connectedCallback() {\n if (this.loaded && this.open) this.onOpenChange(true);\n }\n\n disconnectedCallback() {\n this.teardown();\n this.shouldRender = false;\n this.closing = false;\n this.positionReady = false;\n this.pendingInitialFocusVisible = false;\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (this.embedded || !this.loaded || !this.el.isConnected) return;\n if (isOpen) {\n this.teardown();\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.focusRingVisible = this.pendingInitialFocusVisible;\n this.interaction.connect();\n this.position.observe();\n this.position.schedule(() => this.focusInitialDataPoint());\n return;\n }\n if (!this.shouldRender || this.closing) return;\n this.tasks.cancel();\n this.position.cancel();\n this.closing = true;\n this.interaction.disconnect();\n this.position.unobserve();\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (duration <= 0) this.finishClose();\n else this.closeTimer = setTimeout(() => this.finishClose(), duration);\n }\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n if (this.embedded && (event.key === 'Escape' || event.key === 'Tab')) return;\n if ((!this.shouldRender && !this.embedded) || this.closing) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n return;\n }\n if (event.key !== 'Tab' || !this.interaction.tabLeavesPopup(event)) return;\n event.preventDefault();\n this.close(false);\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n\n private get popupFallbackWidth(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthLg, TOKEN_DEFAULTS.menuWidthLg);\n }\n\n private get popupFallbackHeight(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private teardown() {\n this.tasks.cancel();\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private toggle(fromKeyboard = false) {\n if (this.open) {\n this.close();\n return;\n }\n this.pendingInitialFocusVisible = fromKeyboard;\n this.open = true;\n this.dsOpenChange.emit(true);\n this.onOpenChange(true);\n }\n\n private close(restoreFocus = true) {\n if (restoreFocus) this.interaction.focusAnchor();\n this.open = false;\n this.dsOpenChange.emit(false);\n this.onOpenChange(false);\n }\n\n private finishClose() {\n if (this.open || !this.closing || !this.el.isConnected) return;\n const popup = this.el.querySelector<HTMLElement>('.data-group-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }\n\n private focusInitialDataPoint() {\n this.tasks.frame(() => {\n if (!this.open || this.closing) return;\n const selected = this.grouping\n ? this.el.querySelector<HTMLElement>(\n `[data-group-value=\"${CSS.escape(this.grouping.fieldId)}\"] [role=\"option\"]`\n )\n : null;\n const initial =\n selected ??\n this.el.querySelector<HTMLElement>(\n '[data-group-value] [role=\"option\"]:not([aria-disabled=\"true\"])'\n );\n initial?.focus();\n this.pendingInitialFocusVisible = false;\n });\n }\n\n private selectData(option: DataGroupOption) {\n if (option.value === '__none__') {\n this.dsClear.emit();\n return;\n }\n if (option.isInactive) return;\n if (this.grouping?.fieldId === option.value) {\n this.dsGroupChange.emit({ ...this.grouping });\n return;\n }\n const initialOrder = option.orderOptions?.[0];\n this.dsGroupChange.emit({\n fieldId: option.value,\n direction: initialOrder?.direction ?? 'asc',\n ...(initialOrder?.orderBy ? { orderBy: initialOrder.orderBy } : {}),\n });\n }\n\n private get activeOrderOptions(): TableGroupOrderOption[] {\n const configured = this.options.find(\n option => option.value === this.grouping?.fieldId\n )?.orderOptions;\n return configured?.length ? configured : DEFAULT_ORDER_OPTIONS;\n }\n\n private get selectedOrderIndex(): number {\n if (!this.grouping) return -1;\n const exact = this.activeOrderOptions.findIndex(\n option =>\n option.direction === this.grouping?.direction && option.orderBy === this.grouping?.orderBy\n );\n if (exact >= 0) return exact;\n if (this.grouping.orderBy === undefined) {\n return this.activeOrderOptions.findIndex(\n option => option.direction === this.grouping?.direction\n );\n }\n return -1;\n }\n\n private selectOrder(option: TableGroupOrderOption, index: number) {\n if (!this.grouping || this.selectedOrderIndex === index) return;\n const grouping: DataGroupingState = {\n fieldId: this.grouping.fieldId,\n direction: option.direction,\n };\n if (option.orderBy) grouping.orderBy = option.orderBy;\n this.dsGroupChange.emit(grouping);\n }\n\n private moveFocus(\n event: KeyboardEvent,\n selector: string,\n currentIndex: number,\n oppositeSelector?: string\n ) {\n if (oppositeSelector && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {\n event.preventDefault();\n this.focusRingVisible = true;\n this.el.querySelector<HTMLElement>(oppositeSelector)?.focus();\n return;\n }\n if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n event.preventDefault();\n const items = Array.from(this.el.querySelectorAll<HTMLElement>(selector)).filter(\n item => item.getAttribute('aria-disabled') !== 'true'\n );\n if (!items.length) return;\n let next: number;\n if (event.key === 'Home') next = 0;\n else if (event.key === 'End') next = items.length - 1;\n else next = (currentIndex + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;\n this.focusRingVisible = true;\n items[next]?.focus();\n }\n\n private renderDataOption(option: DataGroupOption, index: number) {\n const selected =\n option.value === '__none__' ? !this.grouping : option.value === this.grouping?.fieldId;\n return (\n <ChoiceOptionRow\n id={`${this.componentId}-data-${index}`}\n option={{ ...option }}\n selected={selected}\n active={selected}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={Boolean(option.description)}\n tabIndex={selected || (!this.grouping && index === 0) ? 0 : -1}\n onHover={() => {\n this.focusRingVisible = false;\n }}\n onSelect={() => this.selectData(option)}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.selectData(option);\n return;\n }\n this.moveFocus(\n event,\n '[data-group-value] [role=\"option\"]',\n this.options\n .filter(candidate => !candidate.isInactive)\n .findIndex(candidate => candidate.value === option.value),\n this.grouping\n ? `[data-group-order-index=\"${this.selectedOrderIndex}\"] [role=\"option\"]`\n : undefined\n );\n }}\n />\n );\n }\n\n private renderOrder(option: TableGroupOrderOption, index: number) {\n const selected = index === this.selectedOrderIndex;\n return (\n <ChoiceOptionRow\n id={`${this.componentId}-order-${index}`}\n option={{ label: option.label, value: String(index) }}\n selected={selected}\n active={selected}\n focusRingVisible={this.focusRingVisible}\n usesSubtext={false}\n tabIndex={selected ? 0 : -1}\n onHover={() => {\n this.focusRingVisible = false;\n }}\n onSelect={() => this.selectOrder(option, index)}\n onKeyDown={(event: KeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.selectOrder(option, index);\n return;\n }\n this.moveFocus(\n event,\n '[data-group-order-index] [role=\"option\"]',\n index,\n `[data-group-value=\"${CSS.escape(this.grouping?.fieldId ?? '')}\"] [role=\"option\"]`\n );\n }}\n />\n );\n }\n\n render() {\n const name = this.ariaLabel?.trim() || 'Group table';\n const popupStyle: Record<string, string> = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: '9998',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n return (\n <Host\n class={{ 'data-group-vertical': this.vertical }}\n hidden={this.options.length === 0 ? true : undefined}\n >\n {this.options.length && !this.embedded ? (\n <ds-button-unfilled\n hasBorder={this.hasBorder}\n ref={element => {\n this.triggerElement = (element as HTMLElement) ?? null;\n }}\n id={this.triggerId}\n variant=\"icon-label\"\n size=\"md\"\n icon=\"SectionList\"\n label=\"Group\"\n labelEmphasis={false}\n pressScale={false}\n aria-label={name}\n haspopup=\"dialog\"\n collapseLabel={true}\n expanded={this.open}\n surfaceOpen={this.open || this.closing}\n controls={this.popupId}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.toggle(event.detail.detail === 0)}\n />\n ) : null}\n\n {this.shouldRender || this.embedded ? (\n <div\n id={this.popupId}\n popover={this.embedded ? undefined : 'manual'}\n class={{\n 'data-group-popup': true,\n 'ds-choice-popup': !this.embedded,\n 'data-preferences-embedded': this.embedded,\n 'ds-choice-popup--closing': this.closing,\n }}\n style={this.embedded ? undefined : popupStyle}\n role=\"dialog\"\n aria-label={name}\n >\n <div class=\"data-group__body\">\n <div class=\"data-group__data-pane\">\n <ChoiceListSection\n heading=\"Data\"\n ariaLabel=\"Group data\"\n className=\"data-group__list\"\n >\n {this.vertical &&\n this.renderDataOption({ label: 'No grouping', value: '__none__' }, -1)}\n {this.options.map((option, index) => (\n <div data-group-value={option.value}>\n {this.renderDataOption(option, index)}\n </div>\n ))}\n </ChoiceListSection>\n <div\n hidden={this.vertical}\n class=\"data-group__footer ds-choice-footer\"\n aria-hidden={!this.grouping ? 'true' : undefined}\n >\n <div class=\"ds-choice-footer__content ds-control--md\">\n {this.grouping ? (\n <button\n class=\"ds-choice-footer__clear ds-text-action ds-focus-ring\"\n type=\"button\"\n onClick={() => this.dsClear.emit()}\n >\n <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n {this.clearLabel}\n </ds-text>\n </button>\n ) : null}\n </div>\n </div>\n </div>\n\n <div class=\"data-group__order-pane\">\n {this.grouping ? (\n <ChoiceListSection\n heading=\"Order\"\n ariaLabel=\"Group order\"\n className=\"data-group__list\"\n >\n {this.activeOrderOptions.map((option, index) => (\n <div data-group-order-index={index}>{this.renderOrder(option, index)}</div>\n ))}\n </ChoiceListSection>\n ) : (\n <div class=\"data-group__empty ds-choice-empty ds-empty-region\">\n <ds-empty-state body={this.emptyMessage} />\n </div>\n )}\n </div>\n </div>\n </div>\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"qqBAAA,MAAMA,EAAe,IAAM,wu4BC0C3B,MAAMC,EAAiD,CACrD,CAAEC,MAAO,YAAaC,UAAW,OACjC,CAAED,MAAO,aAAcC,UAAW,SAGpC,IAAIC,EAAgB,E,MAOPC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,qKAWUC,KAAAC,UAAqB,KACrBD,KAAAE,SAAoB,MACpBF,KAAAG,SAAoB,MACpBH,KAAAI,QAA6B,GAE7BJ,KAAAK,SAAqC,KAEVL,KAAAM,UAA2B,KAErCN,KAAAO,KAAO,MAExBP,KAAAQ,aAAe,sCAEfR,KAAAS,WAAa,QASJT,KAAAU,aAAe,MACfV,KAAAW,QAAU,MACVX,KAAAY,cAAgB,MAChBZ,KAAAa,IAAM,CAAEC,EAAG,EAAGC,EAAG,GACjBf,KAAAgB,iBAAmB,MAEnBhB,KAAAiB,YAAc,mBAAmBvB,IACjCM,KAAAkB,UAAY,GAAGlB,KAAKiB,sBACpBjB,KAAAmB,QAAU,GAAGnB,KAAKiB,oBAC3BjB,KAAAoB,eAAqC,KACrCpB,KAAAqB,2BAA6B,MAC7BrB,KAAAsB,WAAmD,KACnDtB,KAAAuB,OAAS,MACAvB,KAAAwB,MAAQ,IAAIC,GAAgB,IAAMzB,KAAK0B,GAAGC,cAE1C3B,KAAA4B,SAAW,IAAIC,EAA2B,CACzDC,UAAW,IAAM9B,KAAKoB,eACtBW,SAAU,IAAM/B,KAAK0B,GAAGM,cAA2B,qBACnDC,iBAAkB,IAAMjC,KAAK0B,GAAGQ,cAChCC,QAAS,CAACC,EAAQC,KAChB,IAAKrC,KAAKO,KAAM,OAAO,KACvB,MAAM+B,EAAiBC,EAAmBC,EAAeC,SAAUD,EAAeC,UAClF,MAAO,CACLC,WAAYN,EAAOO,wBACnBC,WAAYP,EAAMQ,aAAe7C,KAAK8C,mBACtCC,YAAaV,EAAMW,cAAgBhD,KAAKiD,oBACxCC,KAAM,SACNC,MAAO,MACPC,aAAcb,EAAmBc,EAAkBZ,SAAUD,EAAeC,UAC5Ea,cAAeC,EAA8B,CAC3CJ,MAAO,MACPG,cAAe,EACfhB,mBAEFkB,cAAejB,EAAmBC,EAAeC,SAAUD,EAAeC,UAC1EgB,cAAeC,OAAOC,WACtBC,eAAgBF,OAAOG,YACvBC,cAAeC,EAAmC3B,GACnD,EAEH4B,MAAO,EAAGlD,IAAGC,QACXf,KAAKa,IAAM,CAAEC,IAAGC,IAAG,EAErBkD,QAAS,KACPjE,KAAKY,cAAgB,IAAI,EAE3BsD,WAAY,eACZC,cAAe,KACfC,SAAU,OAGKpE,KAAAqE,YAAc,IAAIC,EAAqC,CACtExC,UAAW,IAAM9B,KAAKoB,eACtBW,SAAU,IAAM/B,KAAK0B,GAAGM,cAA2B,qBACnDC,iBAAkB,IAAMjC,KAAK0B,GAAGQ,cAChCqC,oBAAqB,IAAMvE,KAAKwE,SA+XnC,CA5XC,gBAAAC,GACEzE,KAAKuB,OAAS,KACd,GAAIvB,KAAKO,KAAMP,KAAK0E,aAAa,K,CAGnC,iBAAAC,GACE,GAAI3E,KAAKuB,QAAUvB,KAAKO,KAAMP,KAAK0E,aAAa,K,CAGlD,oBAAAE,GACE5E,KAAK6E,WACL7E,KAAKU,aAAe,MACpBV,KAAKW,QAAU,MACfX,KAAKY,cAAgB,MACrBZ,KAAKqB,2BAA6B,K,CAIpC,YAAAqD,CAAaI,GACX,GAAI9E,KAAKG,WAAaH,KAAKuB,SAAWvB,KAAK0B,GAAGC,YAAa,OAC3D,GAAImD,EAAQ,CACV9E,KAAK6E,WACL7E,KAAKU,aAAe,KACpBV,KAAKW,QAAU,MACfX,KAAKY,cAAgB,MACrBZ,KAAKgB,iBAAmBhB,KAAKqB,2BAC7BrB,KAAKqE,YAAYU,UACjB/E,KAAK4B,SAASoD,UACdhF,KAAK4B,SAASqD,UAAS,IAAMjF,KAAKkF,0BAClC,M,CAEF,IAAKlF,KAAKU,cAAgBV,KAAKW,QAAS,OACxCX,KAAKwB,MAAM2D,SACXnF,KAAK4B,SAASuD,SACdnF,KAAKW,QAAU,KACfX,KAAKqE,YAAYe,aACjBpF,KAAK4B,SAASyD,YACd,MAAMC,EAAWC,EACf/C,EAAegD,aACfhD,EAAeiD,yBAEjB,GAAIH,GAAY,EAAGtF,KAAK0F,mBACnB1F,KAAKsB,WAAaqE,YAAW,IAAM3F,KAAK0F,eAAeJ,E,CAI9D,aAAAM,CAAcC,GACZ,GAAI7F,KAAKG,WAAa0F,EAAMC,MAAQ,UAAYD,EAAMC,MAAQ,OAAQ,OACtE,IAAM9F,KAAKU,eAAiBV,KAAKG,UAAaH,KAAKW,QAAS,OAC5D,GAAIkF,EAAMC,MAAQ,SAAU,CAC1BD,EAAME,iBACN/F,KAAKwE,QACL,M,CAEF,GAAIqB,EAAMC,MAAQ,QAAU9F,KAAKqE,YAAY2B,eAAeH,GAAQ,OACpEA,EAAME,iBACN/F,KAAKwE,MAAM,OACXxE,KAAKqE,YAAY4B,kBAAkBJ,EAAMK,S,CAG3C,sBAAYpD,GACV,OAAOP,EAAmBC,EAAe2D,YAAa3D,EAAe2D,Y,CAGvE,uBAAYlD,GACV,OAAOV,EAAmBC,EAAe4D,mBAAoB5D,EAAe4D,mB,CAGtE,QAAAvB,GACN7E,KAAKwB,MAAM2D,SACXnF,KAAK4B,SAASyD,YACdrF,KAAKqE,YAAYe,aACjB,GAAIpF,KAAKsB,WAAY,CACnB+E,aAAarG,KAAKsB,YAClBtB,KAAKsB,WAAa,I,EAId,MAAAgF,CAAOC,EAAe,OAC5B,GAAIvG,KAAKO,KAAM,CACbP,KAAKwE,QACL,M,CAEFxE,KAAKqB,2BAA6BkF,EAClCvG,KAAKO,KAAO,KACZP,KAAKwG,aAAaC,KAAK,MACvBzG,KAAK0E,aAAa,K,CAGZ,KAAAF,CAAMkC,EAAe,MAC3B,GAAIA,EAAc1G,KAAKqE,YAAYsC,cACnC3G,KAAKO,KAAO,MACZP,KAAKwG,aAAaC,KAAK,OACvBzG,KAAK0E,aAAa,M,CAGZ,WAAAgB,GACN,GAAI1F,KAAKO,OAASP,KAAKW,UAAYX,KAAK0B,GAAGC,YAAa,OACxD,MAAMU,EAAQrC,KAAK0B,GAAGM,cAA2B,qBACjD,GAAIK,GAAOuE,QAAQ,iBAAkBvE,EAAMwE,cAC3C7G,KAAKU,aAAe,MACpBV,KAAKW,QAAU,MACfX,KAAKsB,WAAa,I,CAGZ,qBAAA4D,GACNlF,KAAKwB,MAAMsF,OAAM,KACf,IAAK9G,KAAKO,MAAQP,KAAKW,QAAS,OAChC,MAAMoG,EAAW/G,KAAKK,SAClBL,KAAK0B,GAAGM,cACN,sBAAsBgF,IAAIC,OAAOjH,KAAKK,SAAS6G,8BAEjD,KACJ,MAAMC,EACJJ,GACA/G,KAAK0B,GAAGM,cACN,kEAEJmF,GAASC,QACTpH,KAAKqB,2BAA6B,KAAK,G,CAInC,UAAAgG,CAAWC,GACjB,GAAIA,EAAOC,QAAU,WAAY,CAC/BvH,KAAKwH,QAAQf,OACb,M,CAEF,GAAIa,EAAOG,WAAY,OACvB,GAAIzH,KAAKK,UAAU6G,UAAYI,EAAOC,MAAO,CAC3CvH,KAAK0H,cAAcjB,KAAK,IAAKzG,KAAKK,WAClC,M,CAEF,MAAMsH,EAAeL,EAAOM,eAAe,GAC3C5H,KAAK0H,cAAcjB,KAAK,CACtBS,QAASI,EAAOC,MAChB9H,UAAWkI,GAAclI,WAAa,SAClCkI,GAAcE,QAAU,CAAEA,QAASF,EAAaE,SAAY,I,CAIpE,sBAAYC,GACV,MAAMC,EAAa/H,KAAKI,QAAQ4H,MAC9BV,GAAUA,EAAOC,QAAUvH,KAAKK,UAAU6G,WACzCU,aACH,OAAOG,GAAYE,OAASF,EAAaxI,C,CAG3C,sBAAY2I,GACV,IAAKlI,KAAKK,SAAU,OAAO,EAC3B,MAAM8H,EAAQnI,KAAK8H,mBAAmBM,WACpCd,GACEA,EAAO7H,YAAcO,KAAKK,UAAUZ,WAAa6H,EAAOO,UAAY7H,KAAKK,UAAUwH,UAEvF,GAAIM,GAAS,EAAG,OAAOA,EACvB,GAAInI,KAAKK,SAASwH,UAAYQ,UAAW,CACvC,OAAOrI,KAAK8H,mBAAmBM,WAC7Bd,GAAUA,EAAO7H,YAAcO,KAAKK,UAAUZ,W,CAGlD,OAAO,C,CAGD,WAAA6I,CAAYhB,EAA+BiB,GACjD,IAAKvI,KAAKK,UAAYL,KAAKkI,qBAAuBK,EAAO,OACzD,MAAMlI,EAA8B,CAClC6G,QAASlH,KAAKK,SAAS6G,QACvBzH,UAAW6H,EAAO7H,WAEpB,GAAI6H,EAAOO,QAASxH,EAASwH,QAAUP,EAAOO,QAC9C7H,KAAK0H,cAAcjB,KAAKpG,E,CAGlB,SAAAmI,CACN3C,EACA4C,EACAC,EACAC,GAEA,GAAIA,IAAqB9C,EAAMC,MAAQ,aAAeD,EAAMC,MAAQ,cAAe,CACjFD,EAAME,iBACN/F,KAAKgB,iBAAmB,KACxBhB,KAAK0B,GAAGM,cAA2B2G,IAAmBvB,QACtD,M,CAEF,IAAK,CAAC,YAAa,UAAW,OAAQ,OAAOwB,SAAS/C,EAAMC,KAAM,OAClED,EAAME,iBACN,MAAM8C,EAAQC,MAAMC,KAAK/I,KAAK0B,GAAGsH,iBAA8BP,IAAWQ,QACxEC,GAAQA,EAAKC,aAAa,mBAAqB,SAEjD,IAAKN,EAAMZ,OAAQ,OACnB,IAAImB,EACJ,GAAIvD,EAAMC,MAAQ,OAAQsD,EAAO,OAC5B,GAAIvD,EAAMC,MAAQ,MAAOsD,EAAOP,EAAMZ,OAAS,OAC/CmB,GAAQV,GAAgB7C,EAAMC,MAAQ,YAAc,GAAI,GAAM+C,EAAMZ,QAAUY,EAAMZ,OACzFjI,KAAKgB,iBAAmB,KACxB6H,EAAMO,IAAOhC,O,CAGP,gBAAAiC,CAAiB/B,EAAyBiB,GAChD,MAAMxB,EACJO,EAAOC,QAAU,YAAcvH,KAAKK,SAAWiH,EAAOC,QAAUvH,KAAKK,UAAU6G,QACjF,OACEoC,EAACC,EAAe,CACdC,GAAI,GAAGxJ,KAAKiB,oBAAoBsH,IAChCjB,OAAQ,IAAKA,GACbP,SAAUA,EACV0C,OAAQ1C,EACR/F,iBAAkBhB,KAAKgB,iBACvB0I,YAAaC,QAAQrC,EAAOsC,aAC5BC,SAAU9C,IAAc/G,KAAKK,UAAYkI,IAAU,EAAK,GAAI,EAC5DuB,QAAS,KACP9J,KAAKgB,iBAAmB,KAAK,EAE/B+I,SAAU,IAAM/J,KAAKqH,WAAWC,GAChC0C,UAAYnE,IACV,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACN/F,KAAKqH,WAAWC,GAChB,M,CAEFtH,KAAKwI,UACH3C,EACA,qCACA7F,KAAKI,QACF6I,QAAOgB,IAAcA,EAAUxC,aAC/BW,WAAU6B,GAAaA,EAAU1C,QAAUD,EAAOC,QACrDvH,KAAKK,SACD,4BAA4BL,KAAKkI,uCACjCG,UACL,G,CAMD,WAAA6B,CAAY5C,EAA+BiB,GACjD,MAAMxB,EAAWwB,IAAUvI,KAAKkI,mBAChC,OACEoB,EAACC,EAAe,CACdC,GAAI,GAAGxJ,KAAKiB,qBAAqBsH,IACjCjB,OAAQ,CAAE9H,MAAO8H,EAAO9H,MAAO+H,MAAO4C,OAAO5B,IAC7CxB,SAAUA,EACV0C,OAAQ1C,EACR/F,iBAAkBhB,KAAKgB,iBACvB0I,YAAa,MACbG,SAAU9C,EAAW,GAAI,EACzB+C,QAAS,KACP9J,KAAKgB,iBAAmB,KAAK,EAE/B+I,SAAU,IAAM/J,KAAKsI,YAAYhB,EAAQiB,GACzCyB,UAAYnE,IACV,GAAIA,EAAMC,MAAQ,SAAWD,EAAMC,MAAQ,IAAK,CAC9CD,EAAME,iBACN/F,KAAKsI,YAAYhB,EAAQiB,GACzB,M,CAEFvI,KAAKwI,UACH3C,EACA,2CACA0C,EACA,sBAAsBvB,IAAIC,OAAOjH,KAAKK,UAAU6G,SAAW,wBAC5D,G,CAMT,MAAAkD,GACE,MAAMC,EAAOrK,KAAKM,WAAWgK,QAAU,cACvC,MAAMC,EAAqC,CACzC3I,SAAU,QACV4I,KAAM,IACNC,IAAK,IACLC,UAAW,aAAaC,KAAKC,MAAM5K,KAAKa,IAAIC,SAAS6J,KAAKC,MAAM5K,KAAKa,IAAIE,QACzE8J,OAAQ,OACRC,WAAY9K,KAAKY,cAAgB,UAAY,UAG/C,OACE0I,EAACyB,EAAI,CAAAjF,IAAA,2CACHkF,MAAO,CAAE,sBAAuBhL,KAAKE,UACrC+K,OAAQjL,KAAKI,QAAQ6H,SAAW,EAAI,KAAOI,WAE1CrI,KAAKI,QAAQ6H,SAAWjI,KAAKG,SAC5BmJ,EAAA,sBACErJ,UAAWD,KAAKC,UAChBiL,IAAKC,IACHnL,KAAKoB,eAAkB+J,GAA2B,IAAI,EAExD3B,GAAIxJ,KAAKkB,UACTkK,QAAQ,aACRC,KAAK,KACLC,KAAK,cACL9L,MAAM,QACN+L,cAAe,MACfC,WAAY,MAAK,aACLnB,EACZoB,SAAS,SACTC,cAAe,KACfC,SAAU3L,KAAKO,KACfqL,YAAa5L,KAAKO,MAAQP,KAAKW,QAC/BkL,SAAU7L,KAAKmB,QACf2K,UAAYjG,GAAmC7F,KAAKsG,OAAOT,EAAMkG,OAAOA,SAAW,KAEnF,KAEH/L,KAAKU,cAAgBV,KAAKG,SACzBmJ,EAAA,OACEE,GAAIxJ,KAAKmB,QACT6K,QAAShM,KAAKG,SAAWkI,UAAY,SACrC2C,MAAO,CACL,mBAAoB,KACpB,mBAAoBhL,KAAKG,SACzB,4BAA6BH,KAAKG,SAClC,2BAA4BH,KAAKW,SAEnCsL,MAAOjM,KAAKG,SAAWkI,UAAYkC,EACnC2B,KAAK,SAAQ,aACD7B,GAEZf,EAAA,OAAK0B,MAAM,oBACT1B,EAAA,OAAK0B,MAAM,yBACT1B,EAAC6C,EAAiB,CAChBC,QAAQ,OACR9L,UAAU,aACV+L,UAAU,oBAETrM,KAAKE,UACJF,KAAKqJ,iBAAiB,CAAE7J,MAAO,cAAe+H,MAAO,aAAc,GACpEvH,KAAKI,QAAQkM,KAAI,CAAChF,EAAQiB,IACzBe,EAAA,0BAAuBhC,EAAOC,OAC3BvH,KAAKqJ,iBAAiB/B,EAAQiB,OAIrCe,EAAA,OACE2B,OAAQjL,KAAKE,SACb8K,MAAM,sCAAqC,eAC7BhL,KAAKK,SAAW,OAASgI,WAEvCiB,EAAA,OAAK0B,MAAM,4CACRhL,KAAKK,SACJiJ,EAAA,UACE0B,MAAM,uDACNuB,KAAK,SACLC,QAAS,IAAMxM,KAAKwH,QAAQf,QAE5B6C,EAAA,WAASmD,GAAG,OAAOrB,QAAQ,mBAAmBsB,MAAM,WACjD1M,KAAKS,aAGR,QAKV6I,EAAA,OAAK0B,MAAM,0BACRhL,KAAKK,SACJiJ,EAAC6C,EAAiB,CAChBC,QAAQ,QACR9L,UAAU,cACV+L,UAAU,oBAETrM,KAAK8H,mBAAmBwE,KAAI,CAAChF,EAAQiB,IACpCe,EAAA,gCAA6Bf,GAAQvI,KAAKkK,YAAY5C,EAAQiB,OAIlEe,EAAA,OAAK0B,MAAM,qDACT1B,EAAA,kBAAgBqD,KAAM3M,KAAKQ,mBAMnC,K","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as o,c as s,h as a,a as d,t as n}from"./index.js";import{d as r}from"./p-CwdRaJER.js";import{d as i}from"./p-D-J7GgjY.js";import{d as l}from"./p-pPtjNRqC.js";import{d as t}from"./p-0XTyQNRG.js";import{d as c}from"./p-D8OWhnID.js";import{d as h}from"./p-DvGrsLgt.js";const p=()=>`.sc-ds-panel-tool-header-h,.sc-ds-panel-tool-header:where(.ds-table),.sc-ds-panel-tool-header:where(.tooltip-popup),.sc-ds-panel-tool-header:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-panel-tool-header,.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header,.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header,.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--lg.sc-ds-panel-tool-header{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header{--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--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header{--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--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--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--lg.sc-ds-panel-tool-header,.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header,.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header,.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--lg.sc-ds-panel-tool-header{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header{--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--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header{--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--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--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-chrome-header.sc-ds-panel-tool-header{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-panel-tool-header{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-panel-tool-header{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-panel-tool-header,.ds-chrome-header__trailing.sc-ds-panel-tool-header{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-panel-tool-header{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-panel-tool-header{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-panel-tool-header{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-panel-tool-header{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-panel-tool-header,.ds-chrome-header__description.sc-ds-panel-tool-header{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-panel-tool-header{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-panel-tool-header .ds-chrome-header__description.sc-ds-panel-tool-header{flex:1 1 var(--dimension-card-width-xs)}.sc-ds-panel-tool-header-h{display:block;flex:0 0 auto;box-sizing:border-box;--_panel-tool-header-fg-primary:var(--_shell-tools-fg-primary, var(--color-foreground-primary));--_panel-tool-header-divider:var(--_shell-tools-divider, var(--color-border-tertiary))}.panel-tool-header.sc-ds-panel-tool-header{height:var(--dimension-size-600);color:var(--_panel-tool-header-fg-primary);border-block-end-color:var(--_panel-tool-header-divider);-webkit-user-select:none;user-select:none}.panel-tool-header__leading.sc-ds-panel-tool-header:empty,.panel-tool-header__trailing.sc-ds-panel-tool-header:empty{display:none}.panel-tool-header__trailing.sc-ds-panel-tool-header{gap:var(--dimension-space-050);justify-content:flex-end}ds-text.panel-tool-header__heading.sc-ds-panel-tool-header{display:inline-flex;flex:1 1 0;align-items:center;width:auto;min-width:0;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;text-align:left;-webkit-user-select:none;user-select:none}`;const m=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.dsBack=s(this,"dsBack",7);this.dsMenuToggle=s(this,"dsMenuToggle",7);this.dsAction=s(this,"dsAction",7);this.heading="";this.showBack=false;this.backIcon="ChevronLeft";this.backAriaLabel="Back";this.showMenu=true;this.menuAriaLabel="More options";this.menuTriggerId="";this.menuExpanded=false;this.actions=[]}async focusMenuTrigger(){const e=this.el.querySelector('ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id="menu"]');await(e?.setFocus?.())}render(){const e=this.actions.length>0;const o=e?this.actions:this.showMenu?[{id:"menu",icon:"Ellipses",ariaLabel:this.menuAriaLabel,triggerId:this.menuTriggerId,controls:this.menuControls,expanded:this.menuExpanded,surfaceOpen:this.menuSurfaceOpen,haspopup:"menu"}]:[];return a(d,{key:"36e0849b683317a67451148492b3b088440d34e7"},a("header",{key:"70e7876494c95e421b6807d08f7f5ec13caea94b",class:"panel-tool-header ds-chrome-header ds-chrome-header--bounded"},a("div",{key:"7de753cf669a2cafe7add12bb8799008f9871e7a",class:"panel-tool-header__leading ds-chrome-header__leading"},this.showBack?a("ds-tooltip",{label:this.backAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{class:"panel-tool-header__back",variant:"icon",icon:this.backIcon,size:"md",background:"chrome","aria-label":this.backAriaLabel,activeFill:false,hasBorder:false,onDsClick:e=>this.dsBack.emit(e.detail)})):null),a("ds-text",{key:"7639b3fef0697a63865a3583107696ea0504d51a",class:"panel-tool-header__heading ds-chrome-header__heading ds-control--md",as:"h2",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},this.heading),a("div",{key:"55e4c90c936cb535d72480ae08f8cd74cc9cf6d9",class:"panel-tool-header__trailing ds-chrome-header__trailing"},o.map((o=>a("ds-tooltip",{key:o.id,label:o.ariaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:o.triggerId||undefined,"data-header-action-id":o.id,class:{"panel-tool-header__action":true,"panel-tool-header__menu":o.id==="menu"},variant:"icon",icon:o.icon,size:"md",background:"chrome","aria-label":o.ariaLabel,haspopup:o.haspopup,controls:o.controls,expanded:o.expanded,surfaceOpen:o.surfaceOpen,pressed:o.pressed,isInactive:o.isInactive,activeFill:false,hasBorder:false,onDsClick:s=>{if(!e&&o.id==="menu")this.dsMenuToggle.emit(s.detail);this.dsAction.emit({id:o.id,originalEvent:s.detail,anchor:s.currentTarget})}})))))))}get el(){return this}static get style(){return p()}},[2,"ds-panel-tool-header",{heading:[1],showBack:[4,"show-back"],backIcon:[1,"back-icon"],backAriaLabel:[1,"back-aria-label"],showMenu:[4,"show-menu"],menuAriaLabel:[1,"menu-aria-label"],menuTriggerId:[1,"menu-trigger-id"],menuControls:[1,"menu-controls"],menuExpanded:[4,"menu-expanded"],menuSurfaceOpen:[4,"menu-surface-open"],actions:[16],focusMenuTrigger:[64]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-header","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-header":if(!customElements.get(n(e))){customElements.define(n(e),m)}break;case"ds-badge":if(!customElements.get(n(e))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){i()}break;case"ds-icon":if(!customElements.get(n(e))){l()}break;case"ds-loader":if(!customElements.get(n(e))){t()}break;case"ds-text":if(!customElements.get(n(e))){c()}break;case"ds-tooltip":if(!customElements.get(n(e))){h()}break}}))}g();export{m as P,g as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as o,c as s,h as a,a as d,t as n}from"./index.js";import{d as r}from"./p-CwdRaJER.js";import{d as i}from"./p-BLeHHoVb.js";import{d as l}from"./p-pPtjNRqC.js";import{d as t}from"./p-0XTyQNRG.js";import{d as c}from"./p-D8OWhnID.js";import{d as h}from"./p-DvGrsLgt.js";const p=()=>`.sc-ds-panel-tool-header-h,.sc-ds-panel-tool-header:where(.ds-table),.sc-ds-panel-tool-header:where(.tooltip-popup),.sc-ds-panel-tool-header:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-panel-tool-header,.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header,.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header,.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--lg.sc-ds-panel-tool-header{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header{--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--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header{--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--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--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--lg.sc-ds-panel-tool-header,.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header,.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header,.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--lg.sc-ds-panel-tool-header{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header{--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--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header{--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--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--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-chrome-header.sc-ds-panel-tool-header{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-panel-tool-header{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-panel-tool-header{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-panel-tool-header,.ds-chrome-header__trailing.sc-ds-panel-tool-header{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-panel-tool-header{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-panel-tool-header{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-panel-tool-header{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-panel-tool-header{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-panel-tool-header,.ds-chrome-header__description.sc-ds-panel-tool-header{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-panel-tool-header{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-panel-tool-header .ds-chrome-header__description.sc-ds-panel-tool-header{flex:1 1 var(--dimension-card-width-xs)}.sc-ds-panel-tool-header-h{display:block;flex:0 0 auto;box-sizing:border-box;--_panel-tool-header-fg-primary:var(--_shell-tools-fg-primary, var(--color-foreground-primary));--_panel-tool-header-divider:var(--_shell-tools-divider, var(--color-border-tertiary))}.panel-tool-header.sc-ds-panel-tool-header{height:var(--dimension-size-600);color:var(--_panel-tool-header-fg-primary);border-block-end-color:var(--_panel-tool-header-divider);-webkit-user-select:none;user-select:none}.panel-tool-header__leading.sc-ds-panel-tool-header:empty,.panel-tool-header__trailing.sc-ds-panel-tool-header:empty{display:none}.panel-tool-header__trailing.sc-ds-panel-tool-header{gap:var(--dimension-space-050);justify-content:flex-end}ds-text.panel-tool-header__heading.sc-ds-panel-tool-header{display:inline-flex;flex:1 1 0;align-items:center;width:auto;min-width:0;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;text-align:left;-webkit-user-select:none;user-select:none}`;const m=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.dsBack=s(this,"dsBack",7);this.dsMenuToggle=s(this,"dsMenuToggle",7);this.dsAction=s(this,"dsAction",7);this.heading="";this.showBack=false;this.backIcon="ChevronLeft";this.backAriaLabel="Back";this.showMenu=true;this.menuAriaLabel="More options";this.menuTriggerId="";this.menuExpanded=false;this.actions=[]}async focusMenuTrigger(){const e=this.el.querySelector('ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id="menu"]');await(e?.setFocus?.())}render(){const e=this.actions.length>0;const o=e?this.actions:this.showMenu?[{id:"menu",icon:"Ellipses",ariaLabel:this.menuAriaLabel,triggerId:this.menuTriggerId,controls:this.menuControls,expanded:this.menuExpanded,surfaceOpen:this.menuSurfaceOpen,haspopup:"menu"}]:[];return a(d,{key:"36e0849b683317a67451148492b3b088440d34e7"},a("header",{key:"70e7876494c95e421b6807d08f7f5ec13caea94b",class:"panel-tool-header ds-chrome-header ds-chrome-header--bounded"},a("div",{key:"7de753cf669a2cafe7add12bb8799008f9871e7a",class:"panel-tool-header__leading ds-chrome-header__leading"},this.showBack?a("ds-tooltip",{label:this.backAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{class:"panel-tool-header__back",variant:"icon",icon:this.backIcon,size:"md",background:"chrome","aria-label":this.backAriaLabel,activeFill:false,hasBorder:false,onDsClick:e=>this.dsBack.emit(e.detail)})):null),a("ds-text",{key:"7639b3fef0697a63865a3583107696ea0504d51a",class:"panel-tool-header__heading ds-chrome-header__heading ds-control--md",as:"h2",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},this.heading),a("div",{key:"55e4c90c936cb535d72480ae08f8cd74cc9cf6d9",class:"panel-tool-header__trailing ds-chrome-header__trailing"},o.map((o=>a("ds-tooltip",{key:o.id,label:o.ariaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:o.triggerId||undefined,"data-header-action-id":o.id,class:{"panel-tool-header__action":true,"panel-tool-header__menu":o.id==="menu"},variant:"icon",icon:o.icon,size:"md",background:"chrome","aria-label":o.ariaLabel,haspopup:o.haspopup,controls:o.controls,expanded:o.expanded,surfaceOpen:o.surfaceOpen,pressed:o.pressed,isInactive:o.isInactive,activeFill:false,hasBorder:false,onDsClick:s=>{if(!e&&o.id==="menu")this.dsMenuToggle.emit(s.detail);this.dsAction.emit({id:o.id,originalEvent:s.detail,anchor:s.currentTarget})}})))))))}get el(){return this}static get style(){return p()}},[2,"ds-panel-tool-header",{heading:[1],showBack:[4,"show-back"],backIcon:[1,"back-icon"],backAriaLabel:[1,"back-aria-label"],showMenu:[4,"show-menu"],menuAriaLabel:[1,"menu-aria-label"],menuTriggerId:[1,"menu-trigger-id"],menuControls:[1,"menu-controls"],menuExpanded:[4,"menu-expanded"],menuSurfaceOpen:[4,"menu-surface-open"],actions:[16],focusMenuTrigger:[64]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-header","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-header":if(!customElements.get(n(e))){customElements.define(n(e),m)}break;case"ds-badge":if(!customElements.get(n(e))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){i()}break;case"ds-icon":if(!customElements.get(n(e))){l()}break;case"ds-loader":if(!customElements.get(n(e))){t()}break;case"ds-text":if(!customElements.get(n(e))){c()}break;case"ds-tooltip":if(!customElements.get(n(e))){h()}break}}))}g();export{m as P,g as d};
|
|
2
|
+
//# sourceMappingURL=p-bQE1NZVe.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as t,c as i,h as s,a as n,t as a}from"./index.js";import{d as r}from"./p-CwdRaJER.js";import{d as o}from"./p-Dg6hnCc2.js";import{d}from"./p-D-J7GgjY.js";import{d as u}from"./p--pJyciTI.js";import{d as c}from"./p-pPtjNRqC.js";import{d as l}from"./p-0XTyQNRG.js";import{d as h}from"./p-BkvAqrXg.js";import{d as g}from"./p-D8OWhnID.js";import{d as q}from"./p-DvGrsLgt.js";function p(e,t){return e.find((e=>e.questionId===t))}function m(e,t){return Object.fromEntries(e.map((e=>{const i=p(t,e.id);const s=new Set(e.choices?.map((e=>e.value))??[]);if(e.type==="multiple"){const t=Array.isArray(i?.value)?i.value:[];const n=t.filter((e=>s.has(e)));const a=t.find((e=>!s.has(e)))??"";return[e.id,{value:n,otherSelected:Boolean(e.allowOther&&a),otherText:e.allowOther?a:"",skipped:i?.value===null}]}const n=typeof i?.value==="string"?i.value:"";const a=e.type==="single"&&s.has(n);return[e.id,{value:e.type==="single"&&!a?"":n,otherSelected:Boolean(e.type==="single"&&e.allowOther&&n&&!a),otherText:e.type==="single"&&e.allowOther&&n&&!a?n:"",skipped:i?.value===null}]})))}function f(e,t){if(t.skipped)return{questionId:e.id,value:null};if(e.type==="multiple"){const i=Array.isArray(t.value)?[...t.value]:[];if(t.otherSelected&&t.otherText.trim())i.push(t.otherText.trim());return{questionId:e.id,value:i.length||e.required?i:null}}if(t.otherSelected){const i=t.otherText.trim();return{questionId:e.id,value:i||null}}const i=typeof t.value==="string"?t.value.trim():"";return{questionId:e.id,value:i||null}}function b(e,t){if((e.type==="single"||e.type==="multiple")&&!e.choices?.length){return"This question has no available choices."}if(t.otherSelected&&!t.otherText.trim()){return"Enter a response for Other."}if(!e.required||t.skipped)return undefined;const i=f(e,t).value;const s=i===null||Array.isArray(i)&&i.length===0;if(!s)return undefined;return e.type==="text"?"Enter an answer before continuing.":"Choose an answer before continuing."}function _(e,t){if(!t||t.value===null)return"Skipped";const i=Array.isArray(t.value)?t.value:[t.value];const s=new Map(e.choices?.map((e=>[e.value,e.label]))??[]);return i.map((e=>s.get(e)??e)).join(", ")}const v=()=>`@media (forced-colors: active){.sc-ds-agent-questionnaire:root,.sc-ds-agent-questionnaire-h,.ds-forced-colors-scope.sc-ds-agent-questionnaire{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-visually-hidden.sc-ds-agent-questionnaire-h,.ds-visually-hidden.sc-ds-agent-questionnaire{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-agent-questionnaire-h{display:block;width:100%;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.questionnaire.sc-ds-agent-questionnaire{display:grid;gap:var(--dimension-space-150);width:100%;padding:var(--dimension-space-200);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);box-sizing:border-box}.questionnaire--answered.sc-ds-agent-questionnaire{gap:var(--dimension-space-100);padding:var(--dimension-space-150);background:var(--color-background-secondary);box-shadow:none}.questionnaire--preparing.sc-ds-agent-questionnaire{align-items:center;grid-template-columns:auto minmax(0, 1fr)}.questionnaire__header.sc-ds-agent-questionnaire,.questionnaire__actions.sc-ds-agent-questionnaire,.questionnaire__actions-leading.sc-ds-agent-questionnaire,.questionnaire__error.sc-ds-agent-questionnaire,.questionnaire__submission-error.sc-ds-agent-questionnaire{display:flex;align-items:center}.questionnaire__header.sc-ds-agent-questionnaire,.questionnaire__actions.sc-ds-agent-questionnaire{justify-content:space-between;gap:var(--dimension-space-100)}.questionnaire__body.sc-ds-agent-questionnaire,.questionnaire__prompt.sc-ds-agent-questionnaire,.questionnaire__choices.sc-ds-agent-questionnaire,.questionnaire__single-choice.sc-ds-agent-questionnaire,.questionnaire__multiple-choice.sc-ds-agent-questionnaire,.questionnaire__other-choice.sc-ds-agent-questionnaire,.questionnaire__summary.sc-ds-agent-questionnaire,.questionnaire__summary.sc-ds-agent-questionnaire li.sc-ds-agent-questionnaire{display:grid}.questionnaire__body.sc-ds-agent-questionnaire,.questionnaire__prompt.sc-ds-agent-questionnaire,.questionnaire__choices.sc-ds-agent-questionnaire,.questionnaire__single-choice.sc-ds-agent-questionnaire,.questionnaire__multiple-choice.sc-ds-agent-questionnaire,.questionnaire__other-choice.sc-ds-agent-questionnaire{gap:var(--dimension-space-100)}.questionnaire__choices.sc-ds-agent-questionnaire{min-width:0;margin:0;padding:0;border:0}ds-radio.sc-ds-agent-questionnaire,ds-checkbox.sc-ds-agent-questionnaire{width:100%;min-width:0}.questionnaire__other-input.sc-ds-agent-questionnaire,.questionnaire__text-input.sc-ds-agent-questionnaire{width:100%;padding:var(--dimension-space-100);border:var(--dimension-stroke-width-012) solid var(--color-border-secondary);border-radius:var(--dimension-radius-050);outline:none;background:var(--color-background-primary);color:var(--color-foreground-primary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-md);letter-spacing:var(--typography-letterspacing-negative-half);box-sizing:border-box;-webkit-user-select:text;user-select:text}.questionnaire__other-input.sc-ds-agent-questionnaire{width:calc(100% - var(--dimension-size-500));margin-inline-start:var(--dimension-size-500)}.questionnaire__text-input.sc-ds-agent-questionnaire{min-height:calc(var(--typography-lineheight-md) * 4 + var(--dimension-space-200));resize:vertical}.questionnaire__other-input.sc-ds-agent-questionnaire:focus,.questionnaire__text-input.sc-ds-agent-questionnaire:focus{border-color:var(--color-border-bold-brand);box-shadow:inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.questionnaire__other-input[aria-invalid='true'].sc-ds-agent-questionnaire,.questionnaire__text-input[aria-invalid='true'].sc-ds-agent-questionnaire{border-color:var(--color-border-bold-negative)}.questionnaire__error.sc-ds-agent-questionnaire,.questionnaire__submission-error.sc-ds-agent-questionnaire{gap:var(--dimension-space-050);color:var(--color-foreground-bold-negative)}.questionnaire__submission-error.sc-ds-agent-questionnaire{padding:var(--dimension-space-075);border-radius:var(--dimension-radius-050);background:var(--color-background-faint-negative)}.questionnaire__actions-leading.sc-ds-agent-questionnaire{flex-wrap:wrap;gap:var(--dimension-space-075)}.questionnaire__action-item.sc-ds-agent-questionnaire{width:fit-content;max-width:100%}.questionnaire.sc-ds-agent-questionnaire textarea.sc-ds-agent-questionnaire:disabled{color:var(--color-foreground-tertiary);cursor:default;opacity:1}.questionnaire__summary.sc-ds-agent-questionnaire{gap:var(--dimension-space-100);margin:0;padding:0;list-style:none}.questionnaire__summary.sc-ds-agent-questionnaire li.sc-ds-agent-questionnaire{gap:var(--dimension-space-025)}@media (max-width: 480px){.questionnaire.sc-ds-agent-questionnaire{padding:var(--dimension-space-150)}.questionnaire__actions.sc-ds-agent-questionnaire{align-items:stretch;flex-direction:column}.questionnaire__actions-leading.sc-ds-agent-questionnaire{display:grid;grid-template-columns:minmax(0, 1fr);width:100%}.questionnaire__action-item.sc-ds-agent-questionnaire,.questionnaire__action-item--primary.sc-ds-agent-questionnaire{width:100%}}@media (forced-colors: active){.questionnaire.sc-ds-agent-questionnaire{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);box-shadow:none}.questionnaire__other-input[aria-invalid='true'].sc-ds-agent-questionnaire,.questionnaire__text-input[aria-invalid='true'].sc-ds-agent-questionnaire{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-content)}.questionnaire__submission-error.sc-ds-agent-questionnaire{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface)}.questionnaire.sc-ds-agent-questionnaire input.sc-ds-agent-questionnaire:disabled,.questionnaire.sc-ds-agent-questionnaire textarea.sc-ds-agent-questionnaire:disabled{color:var(--ds-forced-color-disabled)}}`;const x={progress:"Question {current} of {total}",previous:"Previous",next:"Next",answer:"Answer",skip:"Skip",cancel:"Cancel",other:"Other",otherPlaceholder:"Enter another answer",preparing:"Preparing questions…"};let y=0;const w=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAnswer=i(this,"dsAnswer",7);this.dsCancel=i(this,"dsCancel",7);this.answers=[];this.status="ready";this.allowCancel=false;this.currentStep=0;this.drafts={};this.validation={};this.instanceId=++y;this.otherValue=`__ds-agent-questionnaire-other-${this.instanceId}`;this.answerPending=false;this.resetScheduled=false;this.answersSnapshot=[];this.waitingForRequestAnswers=false}componentWillLoad(){this.draftRequestId=this.requestId;this.answersSnapshot=this.answers;this.resetDraft()}handleQuestionnaireInputChange(){this.scheduleDraftReset()}handleStatusChange(e){if(e!=="submitting")this.answerPending=false}async setFocus(){this.focusCurrentControl()}get copy(){return{...x,...this.labels}}get disabled(){return this.status==="submitting"}resetDraft(e=this.answers){this.currentStep=0;this.drafts=m(this.questions??[],e??[]);this.validation={};this.answerPending=false}scheduleDraftReset(){if(this.resetScheduled)return;this.resetScheduled=true;queueMicrotask((()=>{this.resetScheduled=false;const e=this.requestId!==this.draftRequestId;const t=this.answers!==this.answersSnapshot;if(e&&!t){this.waitingForRequestAnswers=true}else if(t){this.waitingForRequestAnswers=false}this.resetDraft(this.waitingForRequestAnswers?[]:this.answers);this.draftRequestId=this.requestId;this.answersSnapshot=this.answers}))}focusCurrentControl(e=false){const t=()=>{const t=e?this.el.querySelector('[data-question-control][aria-invalid="true"]:not([disabled])'):null;const i=t??this.el.querySelector("[data-question-control]:not([disabled]):not([is-inactive])");const s=this.el.querySelector("[data-question-action]:not([is-inactive]):not([is-loading])");const n=i??s;if(n?.setFocus)void n.setFocus();else n?.focus()};t();requestAnimationFrame(t);setTimeout(t,0)}updateDraft(e,t){const i=this.drafts[e]??{value:"",otherSelected:false,otherText:"",skipped:false};this.drafts={...this.drafts,[e]:{...i,...t,skipped:false}};if(this.validation[e]){const{[e]:t,...i}=this.validation;this.validation=i}}validate(e){const t=b(e,this.drafts[e.id]);if(!t)return true;this.validation={...this.validation,[e.id]:t};this.focusCurrentControl(true);return false}move(e){this.currentStep=Math.min(Math.max(e,0),this.questions.length-1);this.focusCurrentControl()}next(e){if(!this.validate(e))return;this.move(this.currentStep+1)}skip(e){if(e.required)return;this.drafts={...this.drafts,[e.id]:{...this.drafts[e.id]??{value:"",otherSelected:false,otherText:""},skipped:true}};if(this.currentStep<this.questions.length-1)this.move(this.currentStep+1);else this.submit()}submit(){if(this.disabled||this.answerPending)return;const e=this.questions.findIndex((e=>!this.validateWithoutFocus(e)));if(e>=0){this.currentStep=e;this.focusCurrentControl(true);return}this.answerPending=true;this.dsAnswer.emit({requestId:this.requestId,answers:this.questions.map((e=>f(e,this.drafts[e.id])))})}validateWithoutFocus(e){const t=b(e,this.drafts[e.id]);if(!t)return true;this.validation={...this.validation,[e.id]:t};return false}progressLabel(){return this.copy.progress.split("{current}").join(String(this.currentStep+1)).split("{total}").join(String(this.questions.length))}selectSingle(e,t){const i=t===this.otherValue;this.updateDraft(e.id,{value:i?"":t,otherSelected:i});if(i){requestAnimationFrame((()=>this.el.querySelector("[data-question-other-input]")?.focus()))}}renderSingleChoice(e,t,i){const n=this.drafts[e.id];const a=n.otherSelected?this.otherValue:typeof n.value==="string"?n.value:"";const r=[...e.choices??[],...e.allowOther?[{value:this.otherValue,label:this.copy.other}]:[]];return s("div",{class:"questionnaire__single-choice"},s("ds-radio",{"data-question-control":true,size:"lg",options:r,value:a,disabled:this.disabled,form:`ds-agent-questionnaire-detached-${this.instanceId}`,ariaLabelledby:t,"aria-describedby":this.validation[e.id]?i:undefined,onDsChange:t=>this.selectSingle(e,t.detail)}),n.otherSelected?this.renderOtherInput(e,i):null)}renderMultipleChoice(e,t){const i=this.drafts[e.id];const n=Array.isArray(i.value)?i.value:[];const a=`ds-agent-questionnaire-detached-${this.instanceId}`;return s("div",{class:"questionnaire__multiple-choice"},e.choices?.map((t=>s("ds-checkbox",{key:t.value,"data-question-control":true,size:"lg",label:t.label,description:t.description,value:t.value,checked:n.includes(t.value),disabled:this.disabled,form:a,onDsChange:i=>{this.updateDraft(e.id,{value:i.detail?[...n,t.value]:n.filter((e=>e!==t.value))})}}))),e.allowOther?s("div",{class:"questionnaire__other-choice"},s("ds-checkbox",{"data-question-control":true,size:"lg",label:this.copy.other,checked:i.otherSelected,disabled:this.disabled,form:a,onDsChange:t=>{this.updateDraft(e.id,{otherSelected:t.detail});if(t.detail){requestAnimationFrame((()=>this.el.querySelector("[data-question-other-input]")?.focus()))}}}),i.otherSelected?this.renderOtherInput(e,t):null):null)}renderOtherInput(e,t){const i=this.drafts[e.id];return s("input",{class:"questionnaire__other-input","data-question-control":true,"data-question-other-input":true,type:"text",form:`ds-agent-questionnaire-detached-${this.instanceId}`,value:i.otherText,placeholder:this.copy.otherPlaceholder,"aria-label":this.copy.other,"aria-invalid":this.validation[e.id]?"true":undefined,"aria-describedby":this.validation[e.id]?t:undefined,disabled:this.disabled,onInput:t=>this.updateDraft(e.id,{otherText:t.target.value})})}renderQuestion(e){const t=this.drafts[e.id];const i=`ds-agent-questionnaire-${this.instanceId}-${this.currentStep}-error`;const n=`ds-agent-questionnaire-${this.instanceId}-${this.currentStep}-prompt`;return s("div",{class:"questionnaire__body"},s("div",{class:"questionnaire__prompt"},s("ds-text",{as:"h2",variant:"text-title-small",textId:n},e.question),e.description?s("ds-text",{variant:"text-body-small",color:"secondary"},e.description):null),e.type==="text"?s("textarea",{class:"questionnaire__text-input","data-question-control":true,value:typeof t.value==="string"?t.value:"",form:`ds-agent-questionnaire-detached-${this.instanceId}`,placeholder:e.placeholder,"aria-label":e.question,"aria-invalid":this.validation[e.id]?"true":undefined,"aria-describedby":this.validation[e.id]?i:undefined,disabled:this.disabled,rows:4,onInput:t=>this.updateDraft(e.id,{value:t.target.value})}):s("fieldset",{class:"questionnaire__choices","aria-describedby":this.validation[e.id]?i:undefined},s("legend",{class:"ds-visually-hidden"},e.question),e.type==="single"?this.renderSingleChoice(e,n,i):this.renderMultipleChoice(e,i)),this.validation[e.id]?s("div",{id:i,class:"questionnaire__error",role:"alert"},s("ds-icon",{name:"ExclamationTriangle",size:"xs",color:"inherit"}),s("ds-text",{variant:"text-body-small",color:"negative"},this.validation[e.id])):null)}renderAnswered(){return s("div",{class:"questionnaire questionnaire--answered"},s("ol",{class:"questionnaire__summary"},this.questions.map((e=>s("li",null,s("ds-text",{variant:"text-body-small",emphasis:true},e.question),s("ds-text",{variant:"text-body-small",color:"secondary"},_(e,this.answers.find((t=>t.questionId===e.id)))))))))}render(){if(this.status==="preparing"){return s(n,null,s("div",{class:"questionnaire questionnaire--preparing",role:"status"},s("ds-loader",{size:"sm"}),s("ds-text",{variant:"text-body-medium"},this.copy.preparing)))}if(!this.questions?.length)return null;if(this.status==="answered")return s(n,null,this.renderAnswered());const e=this.questions[this.currentStep];const t=this.currentStep===this.questions.length-1;const i=Boolean(e.skippable&&!e.required);return s(n,null,s("section",{class:{questionnaire:true,"questionnaire--submitting":this.disabled,"questionnaire--error":this.status==="error"},"aria-busy":this.disabled?"true":undefined,"aria-label":e.question},s("header",{class:"questionnaire__header"},s("ds-text",{variant:"text-caption",color:"secondary"},this.progressLabel()),this.allowCancel?s("ds-tooltip",{label:this.copy.cancel,side:"top",size:"sm"},s("ds-button-unfilled",{"data-question-action":true,variant:"icon",icon:"Cross",size:"sm","aria-label":this.copy.cancel,hasBorder:false,isInactive:this.disabled,onDsClick:()=>this.dsCancel.emit({requestId:this.requestId})})):null),this.renderQuestion(e),this.status==="error"&&this.errorMessage?s("div",{class:"questionnaire__submission-error",role:"alert"},s("ds-icon",{name:"ExclamationTriangle",size:"xs",color:"inherit"}),s("ds-text",{variant:"text-body-small",color:"negative"},this.errorMessage)):null,s("footer",{class:"questionnaire__actions"},s("div",{class:"questionnaire__actions-leading"},this.currentStep>0?s("div",{class:"questionnaire__action-item"},s("ds-button-unfilled",{"data-question-action":true,label:this.copy.previous,size:"sm",width:"fill",isInactive:this.disabled,onDsClick:()=>this.move(this.currentStep-1)})):null,i?s("div",{class:"questionnaire__action-item"},s("ds-button-unfilled",{"data-question-action":true,label:this.copy.skip,size:"sm",width:"fill",hasBorder:false,isInactive:this.disabled,onDsClick:()=>this.skip(e)})):null),s("div",{class:"questionnaire__action-item questionnaire__action-item--primary"},s("ds-button-filled",{"data-question-action":true,label:t?this.copy.answer:this.copy.next,size:"sm",width:"fill",isLoading:this.disabled,onDsClick:()=>t?this.submit():this.next(e)})))))}get el(){return this}static get watchers(){return{requestId:[{handleQuestionnaireInputChange:0}],questions:[{handleQuestionnaireInputChange:0}],answers:[{handleQuestionnaireInputChange:0}],status:[{handleStatusChange:0}]}}static get style(){return v()}},[2,"ds-agent-questionnaire",{requestId:[1,"request-id"],questions:[16],answers:[16],status:[1],errorMessage:[1,"error-message"],allowCancel:[4,"allow-cancel"],labels:[16],currentStep:[32],drafts:[32],validation:[32],setFocus:[64]},undefined,{requestId:[{handleQuestionnaireInputChange:0}],questions:[{handleQuestionnaireInputChange:0}],answers:[{handleQuestionnaireInputChange:0}],status:[{handleStatusChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const e=["ds-agent-questionnaire","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-icon","ds-loader","ds-radio","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-agent-questionnaire":if(!customElements.get(a(e))){customElements.define(a(e),w)}break;case"ds-badge":if(!customElements.get(a(e))){r()}break;case"ds-button-filled":if(!customElements.get(a(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){d()}break;case"ds-checkbox":if(!customElements.get(a(e))){u()}break;case"ds-icon":if(!customElements.get(a(e))){c()}break;case"ds-loader":if(!customElements.get(a(e))){l()}break;case"ds-radio":if(!customElements.get(a(e))){h()}break;case"ds-text":if(!customElements.get(a(e))){g()}break;case"ds-tooltip":if(!customElements.get(a(e))){q()}break}}))}k();export{w as A,k as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as t,c as i,h as s,a as n,t as a}from"./index.js";import{d as r}from"./p-CwdRaJER.js";import{d as o}from"./p-DVsGfz7J.js";import{d}from"./p-BLeHHoVb.js";import{d as u}from"./p--pJyciTI.js";import{d as c}from"./p-pPtjNRqC.js";import{d as l}from"./p-0XTyQNRG.js";import{d as h}from"./p-C1ZfBbJ_.js";import{d as g}from"./p-D8OWhnID.js";import{d as q}from"./p-DvGrsLgt.js";function p(e,t){return e.find((e=>e.questionId===t))}function m(e,t){return Object.fromEntries(e.map((e=>{const i=p(t,e.id);const s=new Set(e.choices?.map((e=>e.value))??[]);if(e.type==="multiple"){const t=Array.isArray(i?.value)?i.value:[];const n=t.filter((e=>s.has(e)));const a=t.find((e=>!s.has(e)))??"";return[e.id,{value:n,otherSelected:Boolean(e.allowOther&&a),otherText:e.allowOther?a:"",skipped:i?.value===null}]}const n=typeof i?.value==="string"?i.value:"";const a=e.type==="single"&&s.has(n);return[e.id,{value:e.type==="single"&&!a?"":n,otherSelected:Boolean(e.type==="single"&&e.allowOther&&n&&!a),otherText:e.type==="single"&&e.allowOther&&n&&!a?n:"",skipped:i?.value===null}]})))}function f(e,t){if(t.skipped)return{questionId:e.id,value:null};if(e.type==="multiple"){const i=Array.isArray(t.value)?[...t.value]:[];if(t.otherSelected&&t.otherText.trim())i.push(t.otherText.trim());return{questionId:e.id,value:i.length||e.required?i:null}}if(t.otherSelected){const i=t.otherText.trim();return{questionId:e.id,value:i||null}}const i=typeof t.value==="string"?t.value.trim():"";return{questionId:e.id,value:i||null}}function b(e,t){if((e.type==="single"||e.type==="multiple")&&!e.choices?.length){return"This question has no available choices."}if(t.otherSelected&&!t.otherText.trim()){return"Enter a response for Other."}if(!e.required||t.skipped)return undefined;const i=f(e,t).value;const s=i===null||Array.isArray(i)&&i.length===0;if(!s)return undefined;return e.type==="text"?"Enter an answer before continuing.":"Choose an answer before continuing."}function _(e,t){if(!t||t.value===null)return"Skipped";const i=Array.isArray(t.value)?t.value:[t.value];const s=new Map(e.choices?.map((e=>[e.value,e.label]))??[]);return i.map((e=>s.get(e)??e)).join(", ")}const v=()=>`@media (forced-colors: active){.sc-ds-agent-questionnaire:root,.sc-ds-agent-questionnaire-h,.ds-forced-colors-scope.sc-ds-agent-questionnaire{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-visually-hidden.sc-ds-agent-questionnaire-h,.ds-visually-hidden.sc-ds-agent-questionnaire{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-agent-questionnaire-h{display:block;width:100%;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.questionnaire.sc-ds-agent-questionnaire{display:grid;gap:var(--dimension-space-150);width:100%;padding:var(--dimension-space-200);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);box-sizing:border-box}.questionnaire--answered.sc-ds-agent-questionnaire{gap:var(--dimension-space-100);padding:var(--dimension-space-150);background:var(--color-background-secondary);box-shadow:none}.questionnaire--preparing.sc-ds-agent-questionnaire{align-items:center;grid-template-columns:auto minmax(0, 1fr)}.questionnaire__header.sc-ds-agent-questionnaire,.questionnaire__actions.sc-ds-agent-questionnaire,.questionnaire__actions-leading.sc-ds-agent-questionnaire,.questionnaire__error.sc-ds-agent-questionnaire,.questionnaire__submission-error.sc-ds-agent-questionnaire{display:flex;align-items:center}.questionnaire__header.sc-ds-agent-questionnaire,.questionnaire__actions.sc-ds-agent-questionnaire{justify-content:space-between;gap:var(--dimension-space-100)}.questionnaire__body.sc-ds-agent-questionnaire,.questionnaire__prompt.sc-ds-agent-questionnaire,.questionnaire__choices.sc-ds-agent-questionnaire,.questionnaire__single-choice.sc-ds-agent-questionnaire,.questionnaire__multiple-choice.sc-ds-agent-questionnaire,.questionnaire__other-choice.sc-ds-agent-questionnaire,.questionnaire__summary.sc-ds-agent-questionnaire,.questionnaire__summary.sc-ds-agent-questionnaire li.sc-ds-agent-questionnaire{display:grid}.questionnaire__body.sc-ds-agent-questionnaire,.questionnaire__prompt.sc-ds-agent-questionnaire,.questionnaire__choices.sc-ds-agent-questionnaire,.questionnaire__single-choice.sc-ds-agent-questionnaire,.questionnaire__multiple-choice.sc-ds-agent-questionnaire,.questionnaire__other-choice.sc-ds-agent-questionnaire{gap:var(--dimension-space-100)}.questionnaire__choices.sc-ds-agent-questionnaire{min-width:0;margin:0;padding:0;border:0}ds-radio.sc-ds-agent-questionnaire,ds-checkbox.sc-ds-agent-questionnaire{width:100%;min-width:0}.questionnaire__other-input.sc-ds-agent-questionnaire,.questionnaire__text-input.sc-ds-agent-questionnaire{width:100%;padding:var(--dimension-space-100);border:var(--dimension-stroke-width-012) solid var(--color-border-secondary);border-radius:var(--dimension-radius-050);outline:none;background:var(--color-background-primary);color:var(--color-foreground-primary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-md);letter-spacing:var(--typography-letterspacing-negative-half);box-sizing:border-box;-webkit-user-select:text;user-select:text}.questionnaire__other-input.sc-ds-agent-questionnaire{width:calc(100% - var(--dimension-size-500));margin-inline-start:var(--dimension-size-500)}.questionnaire__text-input.sc-ds-agent-questionnaire{min-height:calc(var(--typography-lineheight-md) * 4 + var(--dimension-space-200));resize:vertical}.questionnaire__other-input.sc-ds-agent-questionnaire:focus,.questionnaire__text-input.sc-ds-agent-questionnaire:focus{border-color:var(--color-border-bold-brand);box-shadow:inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.questionnaire__other-input[aria-invalid='true'].sc-ds-agent-questionnaire,.questionnaire__text-input[aria-invalid='true'].sc-ds-agent-questionnaire{border-color:var(--color-border-bold-negative)}.questionnaire__error.sc-ds-agent-questionnaire,.questionnaire__submission-error.sc-ds-agent-questionnaire{gap:var(--dimension-space-050);color:var(--color-foreground-bold-negative)}.questionnaire__submission-error.sc-ds-agent-questionnaire{padding:var(--dimension-space-075);border-radius:var(--dimension-radius-050);background:var(--color-background-faint-negative)}.questionnaire__actions-leading.sc-ds-agent-questionnaire{flex-wrap:wrap;gap:var(--dimension-space-075)}.questionnaire__action-item.sc-ds-agent-questionnaire{width:fit-content;max-width:100%}.questionnaire.sc-ds-agent-questionnaire textarea.sc-ds-agent-questionnaire:disabled{color:var(--color-foreground-tertiary);cursor:default;opacity:1}.questionnaire__summary.sc-ds-agent-questionnaire{gap:var(--dimension-space-100);margin:0;padding:0;list-style:none}.questionnaire__summary.sc-ds-agent-questionnaire li.sc-ds-agent-questionnaire{gap:var(--dimension-space-025)}@media (max-width: 480px){.questionnaire.sc-ds-agent-questionnaire{padding:var(--dimension-space-150)}.questionnaire__actions.sc-ds-agent-questionnaire{align-items:stretch;flex-direction:column}.questionnaire__actions-leading.sc-ds-agent-questionnaire{display:grid;grid-template-columns:minmax(0, 1fr);width:100%}.questionnaire__action-item.sc-ds-agent-questionnaire,.questionnaire__action-item--primary.sc-ds-agent-questionnaire{width:100%}}@media (forced-colors: active){.questionnaire.sc-ds-agent-questionnaire{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);box-shadow:none}.questionnaire__other-input[aria-invalid='true'].sc-ds-agent-questionnaire,.questionnaire__text-input[aria-invalid='true'].sc-ds-agent-questionnaire{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-content)}.questionnaire__submission-error.sc-ds-agent-questionnaire{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface)}.questionnaire.sc-ds-agent-questionnaire input.sc-ds-agent-questionnaire:disabled,.questionnaire.sc-ds-agent-questionnaire textarea.sc-ds-agent-questionnaire:disabled{color:var(--ds-forced-color-disabled)}}`;const x={progress:"Question {current} of {total}",previous:"Previous",next:"Next",answer:"Answer",skip:"Skip",cancel:"Cancel",other:"Other",otherPlaceholder:"Enter another answer",preparing:"Preparing questions…"};let y=0;const w=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAnswer=i(this,"dsAnswer",7);this.dsCancel=i(this,"dsCancel",7);this.answers=[];this.status="ready";this.allowCancel=false;this.currentStep=0;this.drafts={};this.validation={};this.instanceId=++y;this.otherValue=`__ds-agent-questionnaire-other-${this.instanceId}`;this.answerPending=false;this.resetScheduled=false;this.answersSnapshot=[];this.waitingForRequestAnswers=false}componentWillLoad(){this.draftRequestId=this.requestId;this.answersSnapshot=this.answers;this.resetDraft()}handleQuestionnaireInputChange(){this.scheduleDraftReset()}handleStatusChange(e){if(e!=="submitting")this.answerPending=false}async setFocus(){this.focusCurrentControl()}get copy(){return{...x,...this.labels}}get disabled(){return this.status==="submitting"}resetDraft(e=this.answers){this.currentStep=0;this.drafts=m(this.questions??[],e??[]);this.validation={};this.answerPending=false}scheduleDraftReset(){if(this.resetScheduled)return;this.resetScheduled=true;queueMicrotask((()=>{this.resetScheduled=false;const e=this.requestId!==this.draftRequestId;const t=this.answers!==this.answersSnapshot;if(e&&!t){this.waitingForRequestAnswers=true}else if(t){this.waitingForRequestAnswers=false}this.resetDraft(this.waitingForRequestAnswers?[]:this.answers);this.draftRequestId=this.requestId;this.answersSnapshot=this.answers}))}focusCurrentControl(e=false){const t=()=>{const t=e?this.el.querySelector('[data-question-control][aria-invalid="true"]:not([disabled])'):null;const i=t??this.el.querySelector("[data-question-control]:not([disabled]):not([is-inactive])");const s=this.el.querySelector("[data-question-action]:not([is-inactive]):not([is-loading])");const n=i??s;if(n?.setFocus)void n.setFocus();else n?.focus()};t();requestAnimationFrame(t);setTimeout(t,0)}updateDraft(e,t){const i=this.drafts[e]??{value:"",otherSelected:false,otherText:"",skipped:false};this.drafts={...this.drafts,[e]:{...i,...t,skipped:false}};if(this.validation[e]){const{[e]:t,...i}=this.validation;this.validation=i}}validate(e){const t=b(e,this.drafts[e.id]);if(!t)return true;this.validation={...this.validation,[e.id]:t};this.focusCurrentControl(true);return false}move(e){this.currentStep=Math.min(Math.max(e,0),this.questions.length-1);this.focusCurrentControl()}next(e){if(!this.validate(e))return;this.move(this.currentStep+1)}skip(e){if(e.required)return;this.drafts={...this.drafts,[e.id]:{...this.drafts[e.id]??{value:"",otherSelected:false,otherText:""},skipped:true}};if(this.currentStep<this.questions.length-1)this.move(this.currentStep+1);else this.submit()}submit(){if(this.disabled||this.answerPending)return;const e=this.questions.findIndex((e=>!this.validateWithoutFocus(e)));if(e>=0){this.currentStep=e;this.focusCurrentControl(true);return}this.answerPending=true;this.dsAnswer.emit({requestId:this.requestId,answers:this.questions.map((e=>f(e,this.drafts[e.id])))})}validateWithoutFocus(e){const t=b(e,this.drafts[e.id]);if(!t)return true;this.validation={...this.validation,[e.id]:t};return false}progressLabel(){return this.copy.progress.split("{current}").join(String(this.currentStep+1)).split("{total}").join(String(this.questions.length))}selectSingle(e,t){const i=t===this.otherValue;this.updateDraft(e.id,{value:i?"":t,otherSelected:i});if(i){requestAnimationFrame((()=>this.el.querySelector("[data-question-other-input]")?.focus()))}}renderSingleChoice(e,t,i){const n=this.drafts[e.id];const a=n.otherSelected?this.otherValue:typeof n.value==="string"?n.value:"";const r=[...e.choices??[],...e.allowOther?[{value:this.otherValue,label:this.copy.other}]:[]];return s("div",{class:"questionnaire__single-choice"},s("ds-radio",{"data-question-control":true,size:"lg",options:r,value:a,disabled:this.disabled,form:`ds-agent-questionnaire-detached-${this.instanceId}`,ariaLabelledby:t,"aria-describedby":this.validation[e.id]?i:undefined,onDsChange:t=>this.selectSingle(e,t.detail)}),n.otherSelected?this.renderOtherInput(e,i):null)}renderMultipleChoice(e,t){const i=this.drafts[e.id];const n=Array.isArray(i.value)?i.value:[];const a=`ds-agent-questionnaire-detached-${this.instanceId}`;return s("div",{class:"questionnaire__multiple-choice"},e.choices?.map((t=>s("ds-checkbox",{key:t.value,"data-question-control":true,size:"lg",label:t.label,description:t.description,value:t.value,checked:n.includes(t.value),disabled:this.disabled,form:a,onDsChange:i=>{this.updateDraft(e.id,{value:i.detail?[...n,t.value]:n.filter((e=>e!==t.value))})}}))),e.allowOther?s("div",{class:"questionnaire__other-choice"},s("ds-checkbox",{"data-question-control":true,size:"lg",label:this.copy.other,checked:i.otherSelected,disabled:this.disabled,form:a,onDsChange:t=>{this.updateDraft(e.id,{otherSelected:t.detail});if(t.detail){requestAnimationFrame((()=>this.el.querySelector("[data-question-other-input]")?.focus()))}}}),i.otherSelected?this.renderOtherInput(e,t):null):null)}renderOtherInput(e,t){const i=this.drafts[e.id];return s("input",{class:"questionnaire__other-input","data-question-control":true,"data-question-other-input":true,type:"text",form:`ds-agent-questionnaire-detached-${this.instanceId}`,value:i.otherText,placeholder:this.copy.otherPlaceholder,"aria-label":this.copy.other,"aria-invalid":this.validation[e.id]?"true":undefined,"aria-describedby":this.validation[e.id]?t:undefined,disabled:this.disabled,onInput:t=>this.updateDraft(e.id,{otherText:t.target.value})})}renderQuestion(e){const t=this.drafts[e.id];const i=`ds-agent-questionnaire-${this.instanceId}-${this.currentStep}-error`;const n=`ds-agent-questionnaire-${this.instanceId}-${this.currentStep}-prompt`;return s("div",{class:"questionnaire__body"},s("div",{class:"questionnaire__prompt"},s("ds-text",{as:"h2",variant:"text-title-small",textId:n},e.question),e.description?s("ds-text",{variant:"text-body-small",color:"secondary"},e.description):null),e.type==="text"?s("textarea",{class:"questionnaire__text-input","data-question-control":true,value:typeof t.value==="string"?t.value:"",form:`ds-agent-questionnaire-detached-${this.instanceId}`,placeholder:e.placeholder,"aria-label":e.question,"aria-invalid":this.validation[e.id]?"true":undefined,"aria-describedby":this.validation[e.id]?i:undefined,disabled:this.disabled,rows:4,onInput:t=>this.updateDraft(e.id,{value:t.target.value})}):s("fieldset",{class:"questionnaire__choices","aria-describedby":this.validation[e.id]?i:undefined},s("legend",{class:"ds-visually-hidden"},e.question),e.type==="single"?this.renderSingleChoice(e,n,i):this.renderMultipleChoice(e,i)),this.validation[e.id]?s("div",{id:i,class:"questionnaire__error",role:"alert"},s("ds-icon",{name:"ExclamationTriangle",size:"xs",color:"inherit"}),s("ds-text",{variant:"text-body-small",color:"negative"},this.validation[e.id])):null)}renderAnswered(){return s("div",{class:"questionnaire questionnaire--answered"},s("ol",{class:"questionnaire__summary"},this.questions.map((e=>s("li",null,s("ds-text",{variant:"text-body-small",emphasis:true},e.question),s("ds-text",{variant:"text-body-small",color:"secondary"},_(e,this.answers.find((t=>t.questionId===e.id)))))))))}render(){if(this.status==="preparing"){return s(n,null,s("div",{class:"questionnaire questionnaire--preparing",role:"status"},s("ds-loader",{size:"sm"}),s("ds-text",{variant:"text-body-medium"},this.copy.preparing)))}if(!this.questions?.length)return null;if(this.status==="answered")return s(n,null,this.renderAnswered());const e=this.questions[this.currentStep];const t=this.currentStep===this.questions.length-1;const i=Boolean(e.skippable&&!e.required);return s(n,null,s("section",{class:{questionnaire:true,"questionnaire--submitting":this.disabled,"questionnaire--error":this.status==="error"},"aria-busy":this.disabled?"true":undefined,"aria-label":e.question},s("header",{class:"questionnaire__header"},s("ds-text",{variant:"text-caption",color:"secondary"},this.progressLabel()),this.allowCancel?s("ds-tooltip",{label:this.copy.cancel,side:"top",size:"sm"},s("ds-button-unfilled",{"data-question-action":true,variant:"icon",icon:"Cross",size:"sm","aria-label":this.copy.cancel,hasBorder:false,isInactive:this.disabled,onDsClick:()=>this.dsCancel.emit({requestId:this.requestId})})):null),this.renderQuestion(e),this.status==="error"&&this.errorMessage?s("div",{class:"questionnaire__submission-error",role:"alert"},s("ds-icon",{name:"ExclamationTriangle",size:"xs",color:"inherit"}),s("ds-text",{variant:"text-body-small",color:"negative"},this.errorMessage)):null,s("footer",{class:"questionnaire__actions"},s("div",{class:"questionnaire__actions-leading"},this.currentStep>0?s("div",{class:"questionnaire__action-item"},s("ds-button-unfilled",{"data-question-action":true,label:this.copy.previous,size:"sm",width:"fill",isInactive:this.disabled,onDsClick:()=>this.move(this.currentStep-1)})):null,i?s("div",{class:"questionnaire__action-item"},s("ds-button-unfilled",{"data-question-action":true,label:this.copy.skip,size:"sm",width:"fill",hasBorder:false,isInactive:this.disabled,onDsClick:()=>this.skip(e)})):null),s("div",{class:"questionnaire__action-item questionnaire__action-item--primary"},s("ds-button-filled",{"data-question-action":true,label:t?this.copy.answer:this.copy.next,size:"sm",width:"fill",isLoading:this.disabled,onDsClick:()=>t?this.submit():this.next(e)})))))}get el(){return this}static get watchers(){return{requestId:[{handleQuestionnaireInputChange:0}],questions:[{handleQuestionnaireInputChange:0}],answers:[{handleQuestionnaireInputChange:0}],status:[{handleStatusChange:0}]}}static get style(){return v()}},[2,"ds-agent-questionnaire",{requestId:[1,"request-id"],questions:[16],answers:[16],status:[1],errorMessage:[1,"error-message"],allowCancel:[4,"allow-cancel"],labels:[16],currentStep:[32],drafts:[32],validation:[32],setFocus:[64]},undefined,{requestId:[{handleQuestionnaireInputChange:0}],questions:[{handleQuestionnaireInputChange:0}],answers:[{handleQuestionnaireInputChange:0}],status:[{handleStatusChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const e=["ds-agent-questionnaire","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-icon","ds-loader","ds-radio","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-agent-questionnaire":if(!customElements.get(a(e))){customElements.define(a(e),w)}break;case"ds-badge":if(!customElements.get(a(e))){r()}break;case"ds-button-filled":if(!customElements.get(a(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){d()}break;case"ds-checkbox":if(!customElements.get(a(e))){u()}break;case"ds-icon":if(!customElements.get(a(e))){c()}break;case"ds-loader":if(!customElements.get(a(e))){l()}break;case"ds-radio":if(!customElements.get(a(e))){h()}break;case"ds-text":if(!customElements.get(a(e))){g()}break;case"ds-tooltip":if(!customElements.get(a(e))){q()}break}}))}k();export{w as A,k as d};
|
|
2
|
+
//# sourceMappingURL=p-sDm8BEMy.js.map
|