/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
'use strict';

var index = require('./index-DjlJwy91.js');
var ionicGlobal = require('./ionic-global-Dq_E1GCa.js');

const SIZE_TO_MEDIA = {
    xs: '(min-width: 0px)',
    sm: '(min-width: 576px)',
    md: '(min-width: 768px)',
    lg: '(min-width: 992px)',
    xl: '(min-width: 1200px)',
};
// Check if the window matches the media query
// at the breakpoint passed
// e.g. matchBreakpoint('sm') => true if screen width exceeds 576px
const matchBreakpoint = (breakpoint) => {
    if (breakpoint === undefined || breakpoint === '') {
        return true;
    }
    if (window.matchMedia) {
        const mediaQuery = SIZE_TO_MEDIA[breakpoint];
        return window.matchMedia(mediaQuery).matches;
    }
    return false;
};

const colCss = ":host{--col-unit-size:calc(\n    (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap, 0px)) / var(--ion-grid-columns, 12)\n  );-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex:1;flex:1;min-height:1px;overflow:auto}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}:host(.ion-grid-col-auto){-ms-flex:0 0 auto;flex:0 0 auto}:host([class^=ion-grid-col--]),:host([class*=\" ion-grid-col--\"]){-ms-flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));max-width:calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px))}:host([class^=ion-grid-offset-col--]),:host([class*=\" ion-grid-offset-col--\"]){--margin-calc:calc(\n    var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap, 0px) * var(--ion-grid-col-margin))\n  );-webkit-margin-start:var(--margin-calc);margin-inline-start:var(--margin-calc);-webkit-margin-end:0;margin-inline-end:0}:host(.ion-grid-col--1){--ion-grid-col-span:1}:host(.ion-grid-order-col--1){-ms-flex-order:1;order:1}:host(.ion-grid-offset-col--1){--ion-grid-col-margin:1}:host(.ion-grid-col--2){--ion-grid-col-span:2}:host(.ion-grid-order-col--2){-ms-flex-order:2;order:2}:host(.ion-grid-offset-col--2){--ion-grid-col-margin:2}:host(.ion-grid-col--3){--ion-grid-col-span:3}:host(.ion-grid-order-col--3){-ms-flex-order:3;order:3}:host(.ion-grid-offset-col--3){--ion-grid-col-margin:3}:host(.ion-grid-col--4){--ion-grid-col-span:4}:host(.ion-grid-order-col--4){-ms-flex-order:4;order:4}:host(.ion-grid-offset-col--4){--ion-grid-col-margin:4}:host(.ion-grid-col--5){--ion-grid-col-span:5}:host(.ion-grid-order-col--5){-ms-flex-order:5;order:5}:host(.ion-grid-offset-col--5){--ion-grid-col-margin:5}:host(.ion-grid-col--6){--ion-grid-col-span:6}:host(.ion-grid-order-col--6){-ms-flex-order:6;order:6}:host(.ion-grid-offset-col--6){--ion-grid-col-margin:6}:host(.ion-grid-col--7){--ion-grid-col-span:7}:host(.ion-grid-order-col--7){-ms-flex-order:7;order:7}:host(.ion-grid-offset-col--7){--ion-grid-col-margin:7}:host(.ion-grid-col--8){--ion-grid-col-span:8}:host(.ion-grid-order-col--8){-ms-flex-order:8;order:8}:host(.ion-grid-offset-col--8){--ion-grid-col-margin:8}:host(.ion-grid-col--9){--ion-grid-col-span:9}:host(.ion-grid-order-col--9){-ms-flex-order:9;order:9}:host(.ion-grid-offset-col--9){--ion-grid-col-margin:9}:host(.ion-grid-col--10){--ion-grid-col-span:10}:host(.ion-grid-order-col--10){-ms-flex-order:10;order:10}:host(.ion-grid-offset-col--10){--ion-grid-col-margin:10}:host(.ion-grid-col--11){--ion-grid-col-span:11}:host(.ion-grid-order-col--11){-ms-flex-order:11;order:11}:host(.ion-grid-offset-col--11){--ion-grid-col-margin:11}:host(.ion-grid-col--12){--ion-grid-col-span:12}:host(.ion-grid-order-col--12){-ms-flex-order:12;order:12}:host(.ion-grid-offset-col--12){--ion-grid-col-margin:12}";

// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
const Col = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    onResize() {
        index.forceUpdate(this);
    }
    // Loop through all of the breakpoints to see if the media query
    // matches and grab the column value from the relevant prop if so
    getColumns(property) {
        let matched;
        for (const breakpoint of BREAKPOINTS) {
            const matches = matchBreakpoint(breakpoint);
            // Grab the value of the property, if it exists and our
            // media query matches we return the value
            const columns = this[property + breakpoint.charAt(0).toUpperCase() + breakpoint.slice(1)];
            if (matches && columns !== undefined) {
                matched = columns;
            }
        }
        // Return the last matched columns since the breakpoints
        // increase in size and we want to return the largest match
        return matched;
    }
    getStyleClass(property, className, acceptsAuto = false) {
        const colPropertyValue = this.getColumns(property);
        // If size wasn't set for any breakpoint
        // or if the user set the size without a value
        // it means we need to stick with the default and return
        // e.g. <ion-col size-md>
        if (!colPropertyValue || colPropertyValue === '') {
            return;
        }
        if (acceptsAuto && colPropertyValue === 'auto') {
            return 'ion-grid-col-auto';
        }
        const valueNumber = parseInt(colPropertyValue);
        if (isNaN(valueNumber)) {
            return;
        }
        return `${className}-col--${valueNumber}`;
    }
    getSizeClass() {
        return this.getStyleClass('size', 'ion-grid', true);
    }
    getOrderClass() {
        return this.getStyleClass('order', 'ion-grid-order');
    }
    getOffsetClass() {
        return this.getStyleClass('offset', 'ion-grid-offset');
    }
    componentDidLoad() {
        if (this.pull ||
            this.pullLg ||
            this.pullMd ||
            this.pullSm ||
            this.pullXl ||
            this.pullXs ||
            this.push ||
            this.pushLg ||
            this.pushMd ||
            this.pushSm ||
            this.pushXl ||
            this.pushXs) {
            index.printIonWarning('[ion-col] - The pull and push properties are deprecated and no longer work, in favor of the order and size properties.', this.el);
        }
    }
    render() {
        const theme = ionicGlobal.getIonTheme(this);
        const colSize = this.getSizeClass();
        const colOrder = this.getOrderClass();
        const colOffset = this.getOffsetClass();
        return (index.h(index.Host, { key: '4620a4eb3c94f744d6169ae9d4cc43e86a271a52', class: {
                [theme]: true,
                [`${colSize}`]: colSize !== undefined,
                [`${colOrder}`]: colOrder !== undefined,
                [`${colOffset}`]: colOffset !== undefined,
            } }, index.h("slot", { key: '5c3be98deed2050634396339b7787f2770a05d35' })));
    }
    get el() { return index.getElement(this); }
};
Col.style = colCss;

const gridCss = ":host{-webkit-padding-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xs, var(--ion-grid-padding, 5px));-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;display:block;-ms-flex:1;flex:1}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-sm, var(--ion-grid-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-md, var(--ion-grid-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-lg, var(--ion-grid-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-start:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));-webkit-padding-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-inline-end:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-top:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px));padding-bottom:var(--ion-grid-padding-xl, var(--ion-grid-padding, 5px))}}:host(.grid-fixed){width:var(--ion-grid-width-xs, var(--ion-grid-width, 100%));max-width:100%}@media (min-width: 576px){:host(.grid-fixed){width:var(--ion-grid-width-sm, var(--ion-grid-width, 540px))}}@media (min-width: 768px){:host(.grid-fixed){width:var(--ion-grid-width-md, var(--ion-grid-width, 720px))}}@media (min-width: 992px){:host(.grid-fixed){width:var(--ion-grid-width-lg, var(--ion-grid-width, 960px))}}@media (min-width: 1200px){:host(.grid-fixed){width:var(--ion-grid-width-xl, var(--ion-grid-width, 1140px))}}:host(.ion-no-padding){--ion-grid-column-padding:0;--ion-grid-column-padding-xs:0;--ion-grid-column-padding-sm:0;--ion-grid-column-padding-md:0;--ion-grid-column-padding-lg:0;--ion-grid-column-padding-xl:0}";

const Grid = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * If `true`, the grid will have a fixed width based on the screen size.
         */
        this.fixed = false;
    }
    render() {
        const theme = ionicGlobal.getIonTheme(this);
        return (index.h(index.Host, { key: 'cd55886cabaeab57e3b13193381b196bec2f07f8', class: {
                [theme]: true,
                'grid-fixed': this.fixed,
            } }, index.h("slot", { key: 'c9b95999e6a274a8a0c997451c0be45b1304d77b' })));
    }
};
Grid.style = gridCss;

const rowCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--ion-grid-gap, 0px)}";

const Row = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        const theme = ionicGlobal.getIonTheme(this);
        return (index.h(index.Host, { key: '6f5dd5032485a69ddf9510e2e539a7ba90afda47', class: {
                [theme]: true,
            } }, index.h("slot", { key: '994dcbbc871d606b61ff5993fb29aa1fa349c483' })));
    }
};
Row.style = rowCss;

exports.ion_col = Col;
exports.ion_grid = Grid;
exports.ion_row = Row;
