{"version":3,"names":["actionGroupCss","CalciteActionGroupStyle0","ActionGroup","this","setMenuOpen","event","menuOpen","target","open","handleMenuActionsSlotChange","hasMenuActions","slotChangeHasAssignedElement","expandedHandler","onMessagesChange","effectiveLocaleChange","updateMessages","effectiveLocale","setFocus","componentFocusable","el","focus","connectedCallback","connectLocalized","connectMessages","connectConditionalSlotComponent","disconnectedCallback","disconnectLocalized","disconnectMessages","disconnectConditionalSlotComponent","componentWillLoad","setUpLoadableComponent","setUpMessages","componentDidLoad","setComponentLoaded","renderMenu","expanded","scale","layout","messages","overlayPositioning","menuFlipPlacements","menuPlacement","h","flipPlacements","hidden","label","more","onCalciteActionMenuOpen","placement","icon","ICONS","menu","slot","ACTION_MENU_SLOTS","trigger","text","textEnabled","name","SLOTS","menuActions","onSlotchange","menuTooltip","tooltip","render","key","class","CSS","container","role"],"sources":["src/components/action-group/action-group.scss?tag=calcite-action-group&encapsulation=shadow","src/components/action-group/action-group.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-action-background-color: Specifies the component's background color.\n * @prop --calcite-action-group-border-color: Specifies the component's border color when used in a `calcite-action-bar` or `calcite-action-menu`.\n * @prop --calcite-action-group-columns: When `layout` is `\"grid\"`, specifies the component's grid-template-columns.\n * @prop --calcite-action-group-gap: When `layout` is `\"grid\"`, specifies the component's gap.\n * @prop --calcite-action-group-padding: [Deprecated] Use `--calcite-action-group-gap`. Specifies the component's padding.\n *\n */\n\n:host {\n  @extend %component-host;\n\n  @apply flex\n  flex-col\n  p-0;\n\n  background-color: transparent;\n  border-color: var(--calcite-action-group-border-color, var(--calcite-color-border-3));\n  border-style: solid;\n  border-width: 0;\n}\n\n.container {\n  @apply flex flex-col flex-grow;\n}\n\n:host([columns=\"1\"]) {\n  --calcite-internal-action-group-columns: 1;\n}\n:host([columns=\"2\"]) {\n  --calcite-internal-action-group-columns: 2;\n}\n:host([columns=\"3\"]) {\n  --calcite-internal-action-group-columns: 3;\n}\n:host([columns=\"4\"]) {\n  --calcite-internal-action-group-columns: 4;\n}\n:host([columns=\"5\"]) {\n  --calcite-internal-action-group-columns: 5;\n}\n:host([columns=\"6\"]) {\n  --calcite-internal-action-group-columns: 6;\n}\n\n:host(:first-child) {\n  @apply pt-0;\n}\n\n:host([layout=\"horizontal\"]),\n:host([layout=\"horizontal\"]) .container {\n  @apply flex-row;\n}\n\n:host([layout=\"grid\"]) {\n  @apply grid;\n\n  .container {\n    @apply grid\n    place-content-stretch;\n    background-color: transparent;\n    grid-template-columns: repeat(\n      var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),\n      auto\n    );\n    gap: var(--calcite-action-group-gap, 1px);\n    padding: var(--calcite-action-group-gap, 1px);\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Method, Prop, State, VNode, Watch } from \"@stencil/core\";\nimport { CalciteActionMenuCustomEvent } from \"../../components\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { SLOTS as ACTION_MENU_SLOTS } from \"../action-menu/resources\";\nimport { Layout, Scale } from \"../interfaces\";\nimport { FlipPlacement, LogicalPlacement, OverlayPositioning } from \"../../utils/floating-ui\";\nimport { slotChangeHasAssignedElement } from \"../../utils/dom\";\nimport { Columns } from \"./interfaces\";\nimport { ActionGroupMessages } from \"./assets/action-group/t9n\";\nimport { ICONS, SLOTS, CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a group of `calcite-action`s.\n * @slot menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.\n * @slot menu-tooltip - A slot for adding a `calcite-tooltip` for the menu.\n */\n@Component({\n  tag: \"calcite-action-group\",\n  styleUrl: \"action-group.scss\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  assetsDirs: [\"assets\"],\n})\nexport class ActionGroup\n  implements ConditionalSlotComponent, LoadableComponent, LocalizedComponent, T9nComponent\n{\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  // --------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component is expanded.\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  @Watch(\"expanded\")\n  expandedHandler(): void {\n    this.menuOpen = false;\n  }\n\n  /**\n   *  Accessible name for the component.\n   */\n  @Prop() label: string;\n\n  /**\n   * Indicates the layout of the component.\n   *\n   * @deprecated Use the `layout` property on the component's parent instead.\n   */\n  @Prop({ reflect: true }) layout: Extract<\"horizontal\" | \"vertical\" | \"grid\", Layout> = \"vertical\";\n\n  /**\n   * Indicates number of columns.\n   */\n  @Prop({ reflect: true }) columns: Columns;\n\n  /**\n   * When `true`, the `calcite-action-menu` is open.\n   */\n  @Prop({ reflect: true, mutable: true }) menuOpen = false;\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   * `\"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   * Specifies the size of the `calcite-action-menu`.\n   */\n  @Prop({ reflect: true }) scale: Scale;\n\n  /**\n   * Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available.\n   */\n  @Prop() menuFlipPlacements: FlipPlacement[];\n\n  /**\n   * Determines where the action menu will be positioned.\n   */\n  @Prop({ reflect: true }) menuPlacement: LogicalPlacement;\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: ActionGroupMessages;\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<ActionGroupMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  // --------------------------------------------------------------------------\n  @Element() el: HTMLCalciteActionGroupElement;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ActionGroupMessages;\n\n  @State() hasMenuActions = false;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component's first focusable element. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n    this.el.focus();\n  }\n  // --------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  // --------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectLocalized(this);\n    connectMessages(this);\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    disconnectConditionalSlotComponent(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Component Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderMenu(): VNode {\n    const {\n      expanded,\n      menuOpen,\n      scale,\n      layout,\n      messages,\n      overlayPositioning,\n      hasMenuActions,\n      menuFlipPlacements,\n      menuPlacement,\n    } = this;\n\n    return (\n      <calcite-action-menu\n        expanded={expanded}\n        flipPlacements={\n          menuFlipPlacements ?? (layout === \"horizontal\" ? [\"top\", \"bottom\"] : [\"left\", \"right\"])\n        }\n        hidden={!hasMenuActions}\n        label={messages.more}\n        onCalciteActionMenuOpen={this.setMenuOpen}\n        open={menuOpen}\n        overlayPositioning={overlayPositioning}\n        placement={menuPlacement ?? (layout === \"horizontal\" ? \"bottom-start\" : \"leading-start\")}\n        scale={scale}\n      >\n        <calcite-action\n          icon={ICONS.menu}\n          scale={scale}\n          slot={ACTION_MENU_SLOTS.trigger}\n          text={messages.more}\n          textEnabled={expanded}\n        />\n        <slot name={SLOTS.menuActions} onSlotchange={this.handleMenuActionsSlotChange} />\n        <slot name={SLOTS.menuTooltip} slot={ACTION_MENU_SLOTS.tooltip} />\n      </calcite-action-menu>\n    );\n  }\n\n  render(): VNode {\n    return (\n      <div aria-label={this.label} class={CSS.container} role=\"group\">\n        <slot />\n        {this.renderMenu()}\n      </div>\n    );\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  // --------------------------------------------------------------------------\n\n  setMenuOpen = (event: CalciteActionMenuCustomEvent<void>): void => {\n    this.menuOpen = !!event.target.open;\n  };\n\n  handleMenuActionsSlotChange = (event: Event): void => {\n    this.hasMenuActions = slotChangeHasAssignedElement(event);\n  };\n}\n"],"mappings":";;;;;qeAAA,MAAMA,EAAiB,yzCACvB,MAAAC,EAAeD,E,MCyCFE,EAAW,M,yBA0MtBC,KAAAC,YAAeC,IACbF,KAAKG,WAAaD,EAAME,OAAOC,IAAI,EAGrCL,KAAAM,4BAA+BJ,IAC7BF,KAAKO,eAAiBC,EAA6BN,EAAM,E,cAnMvB,M,iCAiBmD,W,qCAUpC,M,wBASe,W,iKA2CvC,G,mDASD,K,CArF1B,eAAAO,GACET,KAAKG,SAAW,K,CAgElB,gBAAAO,G,CAcA,qBAAAC,GACEC,EAAeZ,KAAMA,KAAKa,gB,CAe5B,cAAMC,SACEC,EAAmBf,MACzBA,KAAKgB,GAAGC,O,CAQV,iBAAAC,GACEC,EAAiBnB,MACjBoB,EAAgBpB,MAChBqB,EAAgCrB,K,CAGlC,oBAAAsB,GACEC,EAAoBvB,MACpBwB,EAAmBxB,MACnByB,EAAmCzB,K,CAGrC,uBAAM0B,GACJC,EAAuB3B,YACjB4B,EAAc5B,K,CAGtB,gBAAA6B,GACEC,EAAmB9B,K,CASrB,UAAA+B,GACE,MAAMC,SACJA,EAAQ7B,SACRA,EAAQ8B,MACRA,EAAKC,OACLA,EAAMC,SACNA,EAAQC,mBACRA,EAAkB7B,eAClBA,EAAc8B,mBACdA,EAAkBC,cAClBA,GACEtC,KAEJ,OACEuC,EAAA,uBACEP,SAAUA,EACVQ,eACEH,IAAuBH,IAAW,aAAe,CAAC,MAAO,UAAY,CAAC,OAAQ,UAEhFO,QAASlC,EACTmC,MAAOP,EAASQ,KAChBC,wBAAyB5C,KAAKC,YAC9BI,KAAMF,EACNiC,mBAAoBA,EACpBS,UAAWP,IAAkBJ,IAAW,aAAe,eAAiB,iBACxED,MAAOA,GAEPM,EAAA,kBACEO,KAAMC,EAAMC,KACZf,MAAOA,EACPgB,KAAMC,EAAkBC,QACxBC,KAAMjB,EAASQ,KACfU,YAAarB,IAEfO,EAAA,QAAMe,KAAMC,EAAMC,YAAaC,aAAczD,KAAKM,8BAClDiC,EAAA,QAAMe,KAAMC,EAAMG,YAAaT,KAAMC,EAAkBS,U,CAK7D,MAAAC,GACE,OACErB,EAAA,OAAAsB,IAAA,wDAAiB7D,KAAK0C,MAAOoB,MAAOC,EAAIC,UAAWC,KAAK,SACtD1B,EAAA,QAAAsB,IAAA,6CACC7D,KAAK+B,a","ignoreList":[]}