{"version":3,"names":["CSS","actionGroupEnd","SLOTS","actionsEnd","bottomActions","expandTooltip","actionBarCss","CalciteActionBarStyle0","ActionBar","this","mutationObserver","createObserver","el","expanded","toggleChildActionText","overflowActions","resizeObserver","entries","resizeHandlerEntries","actionMenuOpenHandler","event","target","menuOpen","composedPath","Array","from","querySelectorAll","forEach","group","includes","resizeHandler","entry","width","height","contentRect","resize","debounce","expandDisabled","layout","overflowActionsDisabled","actions","queryActions","actionCount","length","actionGroups","setGroupLayout","groupCount","hasActionsEnd","hasBottomActions","actionHeight","actionWidth","geActionDimensions","overflowCount","getOverflowCount","DEBOUNCE","toggleExpand","calciteActionBarToggle","emit","handleDefaultSlotChange","groups","slotChangeGetAssignedElements","filter","matches","handleActionsEndSlotChange","slotChangeHasAssignedElement","handleBottomActionsSlotChange","handleTooltipSlotChange","tooltips","expandHandler","expandedHandler","layoutHandler","updateGroups","overflowDisabledHandler","disconnect","observe","onMessagesChange","effectiveLocaleChange","updateMessages","effectiveLocale","componentDidLoad","setComponentLoaded","connectedCallback","connectLocalized","connectMessages","childList","subtree","connectConditionalSlotComponent","componentWillLoad","setUpLoadableComponent","setUpMessages","disconnectedCallback","disconnectConditionalSlotComponent","disconnectLocalized","disconnectMessages","clientWidth","clientHeight","setFocus","componentFocusable","focusFirstTabbable","renderBottomActionGroup","position","scale","messages","actionsEndGroupLabel","overlayPositioning","expandToggleNode","h","ExpandToggle","collapseLabel","collapseText","collapse","expandLabel","expandText","expand","toggle","tooltip","class","hidden","label","name","onSlotchange","render","Host","key","onCalciteActionMenuOpen"],"sources":["src/components/action-bar/resources.ts","src/components/action-bar/action-bar.scss?tag=calcite-action-bar&encapsulation=shadow","src/components/action-bar/action-bar.tsx"],"sourcesContent":["export const CSS = {\n actionGroupEnd: \"action-group--end\",\n};\n\nexport const SLOTS = {\n actionsEnd: \"actions-end\",\n bottomActions: \"bottom-actions\",\n expandTooltip: \"expand-tooltip\",\n};\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-bar-expanded-max-width: When `layout` is `\"vertical\"`, specifies the component's maximum width.\n * @prop --calcite-action-bar-items-space: Specifies the space between slotted components in the component.\n */\n\n:host {\n @extend %component-host;\n @apply pointer-events-auto\n inline-flex\n self-stretch;\n\n gap: var(--calcite-action-bar-items-space, 0);\n}\n\n:host([layout=\"vertical\"]) {\n @apply flex-col;\n\n &:host([overflow-actions-disabled]) {\n overflow-y: auto;\n }\n\n &:host([expanded]) {\n max-inline-size: var(--calcite-action-bar-expanded-max-width, auto);\n }\n\n .action-group--end {\n margin-block-start: auto;\n }\n\n ::slotted(calcite-action-group:not(:last-of-type)) {\n border-block-end-width: var(--calcite-border-width-sm);\n }\n}\n\n:host([layout=\"horizontal\"]) {\n @apply flex-row;\n\n &:host([overflow-actions-disabled]) {\n overflow-x: auto;\n }\n\n .action-group--end {\n @apply ms-auto;\n }\n\n ::slotted(calcite-action-group:not(:last-of-type)) {\n border-inline-end-width: var(--calcite-border-width-sm);\n }\n}\n\n.action-group--end {\n @apply justify-end;\n}\n\n@include base-component();\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n VNode,\n Watch,\n} from \"@stencil/core\";\nimport { debounce } from \"lodash-es\";\nimport {\n ConditionalSlotComponent,\n connectConditionalSlotComponent,\n disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n focusFirstTabbable,\n slotChangeGetAssignedElements,\n slotChangeHasAssignedElement,\n} from \"../../utils/dom\";\nimport {\n componentFocusable,\n LoadableComponent,\n setComponentLoaded,\n setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n connectMessages,\n disconnectMessages,\n setUpMessages,\n T9nComponent,\n updateMessages,\n} from \"../../utils/t9n\";\nimport { ExpandToggle, toggleChildActionText } from \"../functional/ExpandToggle\";\nimport { Layout, Position, Scale } from \"../interfaces\";\nimport { OverlayPositioning } from \"../../utils/floating-ui\";\nimport { DEBOUNCE } from \"../../utils/resources\";\nimport { ActionBarMessages } from \"./assets/action-bar/t9n\";\nimport { CSS, SLOTS } from \"./resources\";\nimport { geActionDimensions, getOverflowCount, overflowActions, queryActions } from \"./utils\";\n\n/**\n * @slot - A slot for adding `calcite-action`s that will appear at the top of the component.\n * @slot bottom-actions - [Deprecated] Use the `\"actions-end\"` slot instead. A slot for adding `calcite-action`s that will appear at the bottom of the component, above the collapse/expand button.\n * @slot actions-end - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.\n * @slot expand-tooltip - A slot to set the `calcite-tooltip` for the expand toggle.\n */\n@Component({\n tag: \"calcite-action-bar\",\n styleUrl: \"action-bar.scss\",\n shadow: true,\n assetsDirs: [\"assets\"],\n})\nexport class ActionBar\n implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n // --------------------------------------------------------------------------\n //\n // Properties\n //\n // --------------------------------------------------------------------------\n\n /**\n * Specifies the accessible label for the last `calcite-action-group`.\n */\n @Prop() actionsEndGroupLabel: string;\n\n /**\n * When `true`, the expand-toggling behavior is disabled.\n */\n @Prop({ reflect: true }) expandDisabled = false;\n\n @Watch(\"expandDisabled\")\n expandHandler(): void {\n this.overflowActions();\n }\n\n /**\n * When `true`, the component is expanded.\n */\n @Prop({ reflect: true, mutable: true }) expanded = false;\n\n @Watch(\"expanded\")\n expandedHandler(): void {\n const { el, expanded } = this;\n toggleChildActionText({ el, expanded });\n this.overflowActions();\n }\n\n /**\n * Specifies the layout direction of the actions.\n */\n @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\", Layout> = \"vertical\";\n\n @Watch(\"layout\")\n layoutHandler(): void {\n this.updateGroups();\n }\n\n /**\n * Disables automatically overflowing `calcite-action`s that won't fit into menus.\n */\n @Prop({ reflect: true }) overflowActionsDisabled = false;\n\n @Watch(\"overflowActionsDisabled\")\n overflowDisabledHandler(overflowActionsDisabled: boolean): void {\n if (overflowActionsDisabled) {\n this.resizeObserver?.disconnect();\n return;\n }\n\n this.resizeObserver?.observe(this.el);\n this.overflowActions();\n }\n\n /**\n * Determines the type of positioning to use for the overlaid content.\n *\n * Using `\"absolute\"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.\n *\n * `\"fixed\"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `\"fixed\"`.\n *\n */\n @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = \"absolute\";\n\n /**\n * Arranges the component depending on the element's `dir` property.\n */\n @Prop({ reflect: true }) position: Extract<\"start\" | \"end\", Position>;\n\n /**\n * Specifies the size of the expand `calcite-action`.\n */\n @Prop({ reflect: true }) scale: Scale;\n\n /**\n * Made into a prop for testing purposes only\n *\n * @internal\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messages: ActionBarMessages;\n\n /**\n * Use this property to override individual strings used by the component.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messageOverrides: Partial;\n\n @Watch(\"messageOverrides\")\n onMessagesChange(): void {\n /* wired up by t9n util */\n }\n\n // --------------------------------------------------------------------------\n //\n // Events\n //\n // --------------------------------------------------------------------------\n\n /**\n * Fires when the `expanded` property is toggled.\n */\n @Event({ cancelable: false }) calciteActionBarToggle: EventEmitter;\n\n // --------------------------------------------------------------------------\n //\n // Private Properties\n //\n // --------------------------------------------------------------------------\n\n @Element() el: HTMLCalciteActionBarElement;\n\n mutationObserver = createObserver(\"mutation\", () => {\n const { el, expanded } = this;\n toggleChildActionText({ el, expanded });\n this.overflowActions();\n });\n\n resizeObserver = createObserver(\"resize\", (entries) => this.resizeHandlerEntries(entries));\n\n @State() effectiveLocale: string;\n\n @State() hasActionsEnd = false;\n\n @State() hasBottomActions = false;\n\n @State() expandTooltip: HTMLCalciteTooltipElement;\n\n @Watch(\"effectiveLocale\")\n effectiveLocaleChange(): void {\n updateMessages(this, this.effectiveLocale);\n }\n\n @State() defaultMessages: ActionBarMessages;\n\n // --------------------------------------------------------------------------\n //\n // Lifecycle\n //\n // --------------------------------------------------------------------------\n\n componentDidLoad(): void {\n const { el, expanded } = this;\n\n setComponentLoaded(this);\n toggleChildActionText({ el, expanded });\n this.overflowActions();\n }\n\n connectedCallback(): void {\n const { el, expanded } = this;\n\n connectLocalized(this);\n connectMessages(this);\n toggleChildActionText({ el, expanded });\n\n this.mutationObserver?.observe(el, { childList: true, subtree: true });\n\n if (!this.overflowActionsDisabled) {\n this.resizeObserver?.observe(el);\n }\n\n this.overflowActions();\n connectConditionalSlotComponent(this);\n }\n\n async componentWillLoad(): Promise {\n setUpLoadableComponent(this);\n await setUpMessages(this);\n }\n\n disconnectedCallback(): void {\n this.mutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n disconnectConditionalSlotComponent(this);\n disconnectLocalized(this);\n disconnectMessages(this);\n }\n\n // --------------------------------------------------------------------------\n //\n // Methods\n //\n // --------------------------------------------------------------------------\n\n /**\n * Overflows actions that won't fit into menus.\n *\n * @internal\n */\n @Method()\n async overflowActions(): Promise {\n this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });\n }\n\n /**\n * Sets focus on the component's first focusable element.\n */\n @Method()\n async setFocus(): Promise {\n await componentFocusable(this);\n\n focusFirstTabbable(this.el);\n }\n\n // --------------------------------------------------------------------------\n //\n // Private Methods\n //\n // --------------------------------------------------------------------------\n\n actionMenuOpenHandler = (event: CustomEvent): void => {\n if ((event.target as HTMLCalciteActionGroupElement).menuOpen) {\n const composedPath = event.composedPath();\n Array.from(this.el.querySelectorAll(\"calcite-action-group\")).forEach((group) => {\n if (!composedPath.includes(group)) {\n group.menuOpen = false;\n }\n });\n }\n };\n\n resizeHandlerEntries = (entries: ResizeObserverEntry[]): void => {\n entries.forEach(this.resizeHandler);\n };\n\n resizeHandler = (entry: ResizeObserverEntry): void => {\n const { width, height } = entry.contentRect;\n this.resize({ width, height });\n };\n\n private resize = debounce(({ width, height }: { width: number; height: number }): void => {\n const { el, expanded, expandDisabled, layout, overflowActionsDisabled } = this;\n\n if (\n overflowActionsDisabled ||\n (layout === \"vertical\" && !height) ||\n (layout === \"horizontal\" && !width)\n ) {\n return;\n }\n\n const actions = queryActions(el);\n const actionCount = expandDisabled ? actions.length : actions.length + 1;\n const actionGroups = Array.from(el.querySelectorAll(\"calcite-action-group\"));\n\n this.setGroupLayout(actionGroups);\n\n const groupCount =\n this.hasActionsEnd || this.hasBottomActions || !expandDisabled\n ? actionGroups.length + 1\n : actionGroups.length;\n\n const { actionHeight, actionWidth } = geActionDimensions(actions);\n\n const overflowCount = getOverflowCount({\n layout,\n actionCount,\n actionHeight,\n actionWidth,\n height,\n width,\n groupCount,\n });\n\n overflowActions({\n actionGroups,\n expanded,\n overflowCount,\n });\n }, DEBOUNCE.resize);\n\n toggleExpand = (): void => {\n this.expanded = !this.expanded;\n this.calciteActionBarToggle.emit();\n };\n\n updateGroups(): void {\n this.setGroupLayout(Array.from(this.el.querySelectorAll(\"calcite-action-group\")));\n }\n\n setGroupLayout(groups: HTMLCalciteActionGroupElement[]): void {\n groups.forEach((group) => (group.layout = this.layout));\n }\n\n handleDefaultSlotChange = (event: Event): void => {\n const groups = slotChangeGetAssignedElements(event).filter(\n (el): el is HTMLCalciteActionGroupElement => el.matches(\"calcite-action-group\"),\n );\n\n this.setGroupLayout(groups);\n };\n\n handleActionsEndSlotChange = (event: Event): void => {\n this.hasActionsEnd = slotChangeHasAssignedElement(event);\n };\n\n handleBottomActionsSlotChange = (event: Event): void => {\n this.hasBottomActions = slotChangeHasAssignedElement(event);\n };\n\n handleTooltipSlotChange = (event: Event): void => {\n const tooltips = slotChangeGetAssignedElements(event).filter(\n (el): el is HTMLCalciteTooltipElement => el?.matches(\"calcite-tooltip\"),\n );\n\n this.expandTooltip = tooltips[0];\n };\n\n // --------------------------------------------------------------------------\n //\n // Render Methods\n //\n // --------------------------------------------------------------------------\n\n renderBottomActionGroup(): VNode {\n const {\n expanded,\n expandDisabled,\n el,\n position,\n toggleExpand,\n scale,\n layout,\n messages,\n actionsEndGroupLabel,\n overlayPositioning,\n } = this;\n\n const expandToggleNode = !expandDisabled ? (\n \n ) : null;\n\n return (\n