'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-1276587e.js');
const theme = require('./theme-b33a32a5.js');

const Toolbar = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        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');
        }
    }
    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);
            this.el.forceUpdate();
        }
    }
    render() {
        const mode = core.getIonMode(this);
        const childStyles = {};
        this.childrenStyles.forEach(value => {
            Object.assign(childStyles, value);
        });
        return (core.h(core.Host, { class: Object.assign(Object.assign({ 'in-toolbar': theme.hostContext('ion-toolbar', this.el), [mode]: true }, childStyles), theme.createColorClasses(this.color)) }, core.h("div", { class: "toolbar-background" }), core.h("div", { class: "toolbar-container" }, core.h("slot", { name: "start" }), core.h("slot", { name: "secondary" }), core.h("div", { class: "toolbar-content" }, core.h("slot", null)), core.h("slot", { name: "primary" }), core.h("slot", { name: "end" }))));
    }
    get el() { return core.getElement(this); }
    static get style() { return ":host {\n  /**\n   * \@prop --background: Background of the toolbar\n   *\n   * \@prop --border-color: Color of the toolbar border\n   * \@prop --border-style: Style of the toolbar border\n   * \@prop --border-width: Width of the toolbar border\n   *\n   * \@prop --color: Color of the toolbar text\n   *\n   * \@prop --min-height: Minimum height of the toolbar\n   *\n   * \@prop --opacity: Opacity of the toolbar background\n   *\n   * \@prop --padding-top: Top padding of the toolbar\n   * \@prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar\n   * \@prop --padding-bottom: Bottom padding of the toolbar\n   * \@prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar\n   */\n  --border-width: 0;\n  --border-style: solid;\n  --opacity: 1;\n  -moz-osx-font-smoothing: grayscale;\n  -webkit-font-smoothing: antialiased;\n  padding-left: var(--ion-safe-area-left);\n  padding-right: var(--ion-safe-area-right);\n  display: block;\n  position: relative;\n  width: 100%;\n  color: var(--color);\n  font-family: var(--ion-font-family, inherit);\n  contain: content;\n  z-index: 10;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {\n  :host {\n    padding-left: unset;\n    padding-right: unset;\n    -webkit-padding-start: var(--ion-safe-area-left);\n    padding-inline-start: var(--ion-safe-area-left);\n    -webkit-padding-end: var(--ion-safe-area-right);\n    padding-inline-end: var(--ion-safe-area-right);\n  }\n}\n\n:host(.ion-color) {\n  color: var(--ion-color-contrast);\n}\n\n:host(.ion-color) .toolbar-background {\n  background: var(--ion-color-base);\n}\n\n.toolbar-container {\n  padding-left: var(--padding-start);\n  padding-right: var(--padding-end);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -ms-flex-direction: row;\n  flex-direction: row;\n  -ms-flex-align: center;\n  align-items: center;\n  -ms-flex-pack: justify;\n  justify-content: space-between;\n  width: 100%;\n  min-height: var(--min-height);\n  contain: content;\n  overflow: hidden;\n  z-index: 10;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0) {\n  .toolbar-container {\n    padding-left: unset;\n    padding-right: unset;\n    -webkit-padding-start: var(--padding-start);\n    padding-inline-start: var(--padding-start);\n    -webkit-padding-end: var(--padding-end);\n    padding-inline-end: var(--padding-end);\n  }\n}\n\n.toolbar-background {\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  position: absolute;\n  -webkit-transform: translateZ(0);\n  transform: translateZ(0);\n  border-width: var(--border-width);\n  border-style: var(--border-style);\n  border-color: var(--border-color);\n  background: var(--background);\n  contain: strict;\n  opacity: var(--opacity);\n  z-index: -1;\n  pointer-events: none;\n}\n\n::slotted(ion-progress-bar) {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n}\n\n:host {\n  --background: var(--ion-toolbar-background, var(--ion-color-step-50, #fff));\n  --color: var(--ion-toolbar-color, var(--ion-text-color, #000));\n  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));\n  --padding-top: 3px;\n  --padding-bottom: 3px;\n  --padding-start: 4px;\n  --padding-end: 4px;\n  --min-height: 44px;\n}\n\n.toolbar-content {\n  -ms-flex: 1;\n  flex: 1;\n  -ms-flex-order: 4;\n  order: 4;\n  min-width: 0;\n}\n\n:host(.toolbar-segment) {\n  --min-height: auto;\n}\n\n:host(.toolbar-searchbar) .toolbar-container {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n:host(.toolbar-searchbar) ::slotted(*) {\n  -ms-flex-item-align: start;\n  align-self: start;\n}\n\n:host(.toolbar-searchbar) ::slotted(ion-chip) {\n  margin-top: 3px;\n}\n:host(.toolbar-searchbar) ::slotted(ion-back-button) {\n  height: 38px;\n}\n\n::slotted(ion-buttons) {\n  min-height: 38px;\n}\n\n::slotted([slot=start]) {\n  -ms-flex-order: 2;\n  order: 2;\n}\n\n::slotted([slot=secondary]) {\n  -ms-flex-order: 3;\n  order: 3;\n}\n\n::slotted([slot=primary]) {\n  -ms-flex-order: 5;\n  order: 5;\n  text-align: end;\n}\n\n::slotted([slot=end]) {\n  -ms-flex-order: 6;\n  order: 6;\n  text-align: end;\n}\n\n:host(.toolbar-title-large) .toolbar-container {\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  -ms-flex-align: start;\n  align-items: flex-start;\n}\n\n:host(.toolbar-title-large) .toolbar-content ion-title {\n  -ms-flex: 1;\n  flex: 1;\n  -ms-flex-order: 8;\n  order: 8;\n  min-width: 100%;\n}"; }
};

exports.ion_toolbar = Toolbar;
