// #region Imports
import { html } from '../../../../Dom/Html';
import { ifDefined, when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
import { FlowDirection } from '../../../Types/FlowDirection';
import { Orientation } from '../../../Types/Orientation';
// #endregion
/**
 * The template of the {@link SplitElement}.
 *
 * @public
 */
export function splitElementTemplate(e) {
    const gridTemplate = e.orientation === Orientation.Vertical ? 'gridTemplateRows' : 'gridTemplateColumns';
    const gridTemplateAlt = e.orientation === Orientation.Vertical ? 'gridTemplateColumns' : 'gridTemplateRows';
    const isRtl = e.dir === FlowDirection.RightToLeft;
    const primary = `clamp(0%, clamp(var(--split-min), ${e.position}% - var(--split-divider-width) / 2, var(--split-max)), calc(100% - var(--split-divider-width)))`;
    const secondary = 'auto';
    if (e.lock === 'end') {
        if (isRtl && e.orientation === Orientation.Horizontal) {
            e.style[gridTemplate] = `${primary} var(--split-divider-width) ${secondary}`;
        }
        else {
            e.style[gridTemplate] = `${secondary} var(--split-divider-width) ${primary}`;
        }
    }
    else if (isRtl && e.orientation === Orientation.Horizontal) {
        e.style[gridTemplate] = `${secondary} var(--split-divider-width) ${primary}`;
    }
    else {
        e.style[gridTemplate] = `${primary} var(--split-divider-width) ${secondary}`;
    }
    // Unset the alt grid template property
    e.style[gridTemplateAlt] = '';
    return html `
        <slot name="${e.reverse ? 'end' : 'start'}"
              part="panel start"
              class="start"></slot>
        ${when(e.hasPanels, () => html `
        <div part="divider"
             class="divider"
             tabindex=${ifDefined(e.disabled ? undefined : '0')}
             role="separator"
             aria-valuenow=${e.position}
             aria-valuemin="0"
             aria-valuemax="100"
             aria-label="resize"
             @keydown=${e.handleKeyDown}
             @mousedown=${e.handleDrag}
             @touchstart=${e.handleDrag}>
            <slot name="thumb">
                <mosaik-icon part="thumb"
                             .appearance="${Appearance.Soft}"
                             .angel="${e.orientation === Orientation.Horizontal ? 0 : 90}"
                             .data="${'M12 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM12 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4ZM10 18a2 2 0 1 0 4 0 2 2 0 0 0-4 0Z'}"
                             ?disabled="${e.disabled}"></mosaik-icon>
            </slot>
        </div>
        `)}
        <slot name="${e.reverse ? 'start' : 'end'}"
              part="panel end"
              class="end"></slot>
    `;
}
//# sourceMappingURL=SplitElementTemplate.js.map