/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import { Host, forceUpdate, h } from "@stencil/core";
import { printIonWarning } from "../../utils/logging/index";
import { matchBreakpoint } from "../../utils/media";
import { getIonTheme } from "../../global/ionic-global";
// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
/**
 * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
 * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
 */
export class Col {
    onResize() {
        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) {
            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 = getIonTheme(this);
        const colSize = this.getSizeClass();
        const colOrder = this.getOrderClass();
        const colOffset = this.getOffsetClass();
        return (h(Host, { key: '4620a4eb3c94f744d6169ae9d4cc43e86a271a52', class: {
                [theme]: true,
                [`${colSize}`]: colSize !== undefined,
                [`${colOrder}`]: colOrder !== undefined,
                [`${colOffset}`]: colOffset !== undefined,
            } }, h("slot", { key: '5c3be98deed2050634396339b7787f2770a05d35' })));
    }
    static get is() { return "ion-col"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["col.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["col.css"]
        };
    }
    static get properties() {
        return {
            "offset": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "offset"
            },
            "offsetXs": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "offset-xs"
            },
            "offsetSm": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "offset-sm"
            },
            "offsetMd": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "offset-md"
            },
            "offsetLg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "offset-lg"
            },
            "offsetXl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "offset-xl"
            },
            "order": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The order of the column, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "order"
            },
            "orderXs": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The order of the column for xs screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "order-xs"
            },
            "orderSm": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The order of the column for sm screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "order-sm"
            },
            "orderMd": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The order of the column for md screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "order-md"
            },
            "orderLg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The order of the column for lg screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "order-lg"
            },
            "orderXl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The order of the column for xl screens, in terms of where the column should position itself in the columns renderer.\nIf no value is passed, the column order implicit value will be the order in the html structure."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "order-xl"
            },
            "pull": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pull"
            },
            "pullXs": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pull-xs"
            },
            "pullSm": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pull-sm"
            },
            "pullMd": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pull-md"
            },
            "pullLg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pull-lg"
            },
            "pullXl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "pull-xl"
            },
            "push": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "push"
            },
            "pushXs": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "push-xs"
            },
            "pushSm": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "push-sm"
            },
            "pushMd": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "push-md"
            },
            "pushLg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "push-lg"
            },
            "pushXl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "Use the combination of `size` and `order` properties to achieve the same effect."
                        }],
                    "text": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "push-xl"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size"
            },
            "sizeXs": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size-xs"
            },
            "sizeSm": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size-sm"
            },
            "sizeMd": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size-md"
            },
            "sizeLg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size-lg"
            },
            "sizeXl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size-xl"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "resize",
                "method": "onResize",
                "target": "window",
                "capture": false,
                "passive": true
            }];
    }
}
