/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
import { c as createColorClasses, h as hostContext } from './theme.js';
import { b as getIonTheme } from './ionic-global.js';

const toolbarIonicCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--border-color:currentColor;--padding-top:var(--token-space-200, var(--token-scale-200, 8px));--padding-bottom:var(--token-space-200, var(--token-scale-200, 8px));--padding-start:var(--token-space-200, var(--token-scale-200, 8px));--padding-end:var(--token-space-200, var(--token-scale-200, 8px));--min-height:var(--token-scale-1400, 56px)}.toolbar-container{gap:var(--token-space-400, var(--token-scale-400, 16px));z-index:10}.toolbar-background{z-index:-1}.toolbar-content{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0}:host(.toolbar-searchbar) ::slotted(ion-searchbar){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}::slotted(ion-buttons){gap:var(--token-space-200, var(--token-scale-200, 8px))}::slotted(ion-title){-webkit-padding-start:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-start:var(--token-space-200, var(--token-scale-200, 8px));-webkit-padding-end:var(--token-space-200, var(--token-scale-200, 8px));padding-inline-end:var(--token-space-200, var(--token-scale-200, 8px))}:host(.toolbar-title-default) ::slotted(ion-title){text-align:center}:host(.toolbar-title-large) ::slotted(ion-title){-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px))}:host(.has-end-content) slot[name=end],:host(.show-end) slot[name=end]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-start-content) slot[name=start],:host(.show-start) slot[name=start]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0)}:host(.has-primary-content) slot[name=primary],:host(.show-primary) slot[name=primary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-secondary-content) slot[name=secondary],:host(.show-secondary) slot[name=secondary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0)}";

const toolbarIosCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:4;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:-ms-inline-flexbox;display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){-ms-flex-item-align:start;align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:3;order:3}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{-ms-flex:1;flex:1;-ms-flex-order:8;order:8;min-width:100%}";

const toolbarMdCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-background-color, #fff));--color:var(--ion-toolbar-color, var(--ion-text-color, #424242));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));--padding-top:0;--padding-bottom:0;--padding-start:0;--padding-end:0;--min-height:56px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:3;order:3;min-width:0;max-width:100%}::slotted(.buttons-first-slot){-webkit-margin-start:4px;margin-inline-start:4px}::slotted(.buttons-last-slot){-webkit-margin-end:4px;margin-inline-end:4px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:4;order:4}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}";

const Toolbar = /*@__PURE__*/ proxyCustomElement(class Toolbar extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.__attachShadow();
        this.childrenStyles = new Map();
    }
    componentWillLoad() {
        const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
        const firstButtons = buttons.find((button) => {
            return button.slot === 'start';
        });
        if (firstButtons) {
            firstButtons.classList.add('buttons-first-slot');
        }
        const buttonsReversed = buttons.reverse();
        const lastButtons = buttonsReversed.find((button) => button.slot === 'end') ||
            buttonsReversed.find((button) => button.slot === 'primary') ||
            buttonsReversed.find((button) => button.slot === 'secondary');
        if (lastButtons) {
            lastButtons.classList.add('buttons-last-slot');
        }
        this.updateSlotClasses();
    }
    componentDidLoad() {
        this.updateSlotClasses();
        this.updateSlotWidths();
    }
    /**
     * Updates the CSS custom properties for slot widths
     * This ensures that slots shown by their met conditions
     * have a minimum width matching their required slot
     */
    updateSlotWidths(tries = 0) {
        // Set timeout to try to execute after everything is rendered
        setTimeout(() => {
            // Attempt to measure and update
            const success = this.measureAndUpdateSlots();
            // If not all measurements were successful, try again in 100 ms
            // cap recursion at 5 tries for safety
            if (!success && tries < 5) {
                setTimeout(() => {
                    this.updateSlotWidths(tries + 1);
                }, 100);
            }
        });
    }
    /**
     * Measure the widths of the slots and update the CSS custom properties
     * for the minimum width of each pair of slots based on the largest width in each pair.
     * Returns whether we successfully measured all of the slots we expect to have content.
     * If not, the content probably hasn't rendered yet and we need to try again.
     */
    measureAndUpdateSlots() {
        // Define the relationship between slots based on the conditions array
        // Group slots that should have the same width
        const slotPairs = [
            { name: 'start-end', slots: ['start', 'end'] },
            { name: 'primary-secondary', slots: ['primary', 'secondary'] },
        ];
        // First, measure all slot widths
        const slotWidths = new Map();
        let allMeasurementsSuccessful = true;
        // Measure all slots with content
        const slots = ['start', 'end', 'primary', 'secondary'];
        slots.forEach((slot) => {
            var _a;
            if (this.el.classList.contains(`has-${slot}-content`)) {
                const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
                if (slotElement) {
                    // Check if the slot contains an img or ion-img
                    const assignedElements = slotElement.assignedElements({ flatten: true });
                    const hasImg = assignedElements.some((el) => {
                        if (el.tagName === 'IMG' || el.tagName === 'ION-IMG') {
                            return true;
                        }
                        // Check for nested images
                        return el.querySelector('img, ion-img');
                    });
                    // Temporarily allow slot to size to content by setting flex-basis
                    // to 'auto'. This ensures that slotted images can render at their
                    // intrinsic width for measurement.
                    if (hasImg) {
                        const { name } = slotPairs.find((pair) => pair.slots.includes(slot));
                        this.el.style.setProperty(`--${name}-size`, 'auto');
                    }
                    const width = slotElement.offsetWidth;
                    if (width > 0) {
                        slotWidths.set(slot, width);
                    }
                    else {
                        allMeasurementsSuccessful = false;
                    }
                }
            }
        });
        // Then set the CSS custom properties based on the largest width in each pair
        slotPairs.forEach(({ name, slots }) => {
            // Find the maximum width among the slots in this pair
            let maxWidth = 0;
            let hasAnyContent = false;
            slots.forEach((slot) => {
                var _a;
                if (slotWidths.has(slot)) {
                    hasAnyContent = true;
                    maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
                }
            });
            // If at least one slot in the pair has content, set the min-width for the pair
            if (hasAnyContent && maxWidth > 0) {
                // Set a single CSS variable for the pair
                this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
            }
        });
        return allMeasurementsSuccessful;
    }
    updateSlotClasses() {
        // Check if slots have content
        const slots = ['start', 'end', 'primary', 'secondary'];
        const classesToAdd = [];
        const classesToRemove = [];
        slots.forEach((slot) => {
            const slotHasContent = this.hasSlotContent(slot);
            const slotClass = `has-${slot}-content`;
            if (slotHasContent) {
                classesToAdd.push(slotClass);
            }
            else {
                classesToRemove.push(slotClass);
            }
        });
        // Force visibilities in certain conditions. This works by adding a class to the toolbar
        // named `show-{slot}`. This class will be added if the toolbar has the required slots
        // and does not have any of the excluded slots, otherwise it will be removed.
        // This is useful to enforce centering of the toolbar content when there are different amounts
        // of slots on either side of the toolbar.
        const conditions = [
            { name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
            { name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
            { name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
            { name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
        ];
        conditions.forEach((condition) => {
            const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
            const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
            const className = `show-${condition.name}`;
            if (hasRequiredSlots && !hasExcludedSlots) {
                classesToAdd.push(className);
            }
            else {
                classesToRemove.push(className);
            }
        });
        // Add classes to the toolbar element
        this.el.classList.add(...classesToAdd);
        this.el.classList.remove(...classesToRemove);
        // Update slot widths after classes have been updated
        this.updateSlotWidths();
    }
    hasSlotContent(slotName) {
        var _a;
        const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
        return !!slotNode && slotNode.assignedNodes().length > 0;
    }
    childrenStyle(ev) {
        ev.stopPropagation();
        const tagName = ev.target.tagName;
        const updatedStyles = ev.detail;
        const newStyles = {};
        const childStyles = this.childrenStyles.get(tagName) || {};
        let hasStyleChange = false;
        Object.keys(updatedStyles).forEach((key) => {
            const childKey = `toolbar-${key}`;
            const newValue = updatedStyles[key];
            if (newValue !== childStyles[childKey]) {
                hasStyleChange = true;
            }
            if (newValue) {
                newStyles[childKey] = true;
            }
        });
        if (hasStyleChange) {
            this.childrenStyles.set(tagName, newStyles);
            forceUpdate(this);
        }
    }
    render() {
        const theme = getIonTheme(this);
        const childStyles = {};
        this.childrenStyles.forEach((style) => {
            Object.assign(childStyles, style);
        });
        return (h(Host, { key: '2c88dcfd26c7d24aaf479d1d993b5562d3619f6b', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
                [theme]: true,
                'in-toolbar': hostContext('ion-toolbar', this.el),
            })), childStyles) }, h("div", { key: 'b0ee3cb68417c5013d7dd61b5d57bce29f575bad', class: "toolbar-background", part: "background" }), h("div", { key: '0626d61b71f5d0ba1ee37508cffbd63034f7b292', class: "toolbar-container", part: "container" }, h("slot", { key: 'e7a540e310d55ec6a1b61bee70bb285a75a3f019', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '0f9e4d832691123209abca302532825efe5f7c98', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'ff8fa2ab1ed25ed95dc2a889e07d9f2e85b7245d', class: "toolbar-content", part: "content" }, h("slot", { key: '78cc3ba30a35a71f464f7256343e2a523740a8e9' })), h("slot", { key: 'db88e674acc2befc1d4e5f2c2b03b48dde54d12e', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd8fd9de870c5d77a139442d38565686121c68887', name: "end", onSlotchange: () => this.updateSlotClasses }))));
    }
    get el() { return this; }
    static get style() { return {
        ionic: toolbarIonicCss,
        ios: toolbarIosCss,
        md: toolbarMdCss
    }; }
}, [289, "ion-toolbar", {
        "color": [513]
    }, [[0, "ionStyle", "childrenStyle"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ion-toolbar"];
    components.forEach(tagName => { switch (tagName) {
        case "ion-toolbar":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Toolbar);
            }
            break;
    } });
}

export { Toolbar as T, defineCustomElement as d };
