// #region Imports
import { html } from '../../../../Dom/Html';
import { styleMap } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the `FloatingActionButtonGroupElement`.
 *
 * @public
 */
export function floatingActionButtonGroupElementTemplate(e) {
    return html `
        <slot name="trigger">
            <mosaik-fab part="fab"
                        .label="${e.label}"
                        .icon="${e.icon}"
                        .iconSize="${e.iconSize}"
                        .iconPosition="${e.iconPosition}"
                        .dir="${e.dir}"
                        .appearance="${e.appearance}"
                        .variant="${e.variant}"
                        ?disabled="${e.disabled}"
                        @click=${() => e.toggle()}>
                <slot name="overlay"></slot>
            </mosaik-fab>
        </slot>
        <div part="menu">
            <div style="${styleMap({
        display: 'flex',
        flexDirection: 'column-reverse',
        alignItems: 'end',
        gap: '8px'
    })}">
                <slot></slot>
            </div>
        </div>
    `;
}
//# sourceMappingURL=FloatingActionButtonGroupElementTemplate.js.map