/*!
 * Custom elements for Nanopore-Digital Web applications
 */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
        r = Reflect.decorate(decorators, target, key, desc);
    else
        for (var i = decorators.length - 1; i >= 0; i--)
            if (d = decorators[i])
                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
        return Reflect.metadata(k, v);
};
import { Host } from "@stencil/core";
import { ConstructibleStyle } from "../../utils/constructible-style";
import { h } from "../../utils/renderer";
/**
 * A context-aware CSS grid implementation.
 *
 * @version 1.0.0
 * @status deprecated
 *
 * @part grid - the main grid element.
 * Use this to set css such as `justify-items|content` / `align-items|content` / `place-content`
 * @part helper - a replica grid showed when `show-helper` is true
 *
 * @slot - default slot. Use this to place grid items. Use `grid-states="..."` attribute to opt-out of auto / sequential placement.
 */
export class Grid {
    grids = [];
    cacheKey;
    /** the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.
     * Will default to `px` if no unit supplied e.g. `20rem` */
    sSize = 300;
    /** the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.
     * Will default to `px` if no unit supplied e.g. `20rem` */
    mSize = 550;
    /** the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.
     * Will default to `px` if no unit supplied e.g. `20rem` */
    lSize = 800;
    /** the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.
     * Will default to `px` if no unit supplied e.g. `20rem` */
    xlSize = 1000;
    /** the number of columns the grid has at the small breakpoint. */
    sCols;
    /** the number of columns the grid has at the medium breakpoint. */
    mCols;
    /** the number of columns the grid has at the large breakpoint. */
    lCols;
    /** the number of columns the grid has at the xl breakpoint. */
    xlCols;
    /** the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint) */
    xxlCols;
    /** Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect */
    sTpl;
    /** Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect */
    mTpl;
    /** Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect */
    lTpl;
    /** Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect */
    xlTpl;
    /** Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect */
    xxlTpl;
    /** shows a grid helper to visualise where columns are */
    showHelper = false;
    constructSizeArray() {
        this.grids = [];
        if (this.sCols)
            this.grids.push({
                cols: this.sCols,
                breakpoint: 0,
                name: 's',
                template: this.sTpl,
            });
        if (this.mCols)
            this.grids.push({
                cols: this.mCols,
                breakpoint: this.sSize,
                name: 'm',
                template: this.mTpl,
            });
        if (this.lCols)
            this.grids.push({
                cols: this.lCols,
                breakpoint: this.mSize,
                name: 'l',
                template: this.lTpl,
            });
        if (this.xlCols)
            this.grids.push({
                cols: this.xlCols,
                breakpoint: this.lSize,
                name: 'xl',
                template: this.xlTpl,
            });
        if (this.xxlCols)
            this.grids.push({
                cols: this.xxlCols,
                breakpoint: this.xlSize,
                name: 'xxl',
                template: this.xxlTpl,
            });
        this.cacheKey =
            this.grids
                .map((bp) => `${bp.cols}-${bp.breakpoint}-${bp.template || ''}`)
                .join('') +
                '-helper-' +
                this.showHelper;
    }
    styles = () => {
        const css = /* css */ `
      ${this.grids
            .map((bp) => /* css */ `
          @container (min-width: ${Number(bp.breakpoint + 1)
            ? Number(bp.breakpoint) + 1 + 'px'
            : bp.breakpoint}) {
            [cache-key="${this.cacheKey}"].grid {
              --current-grid-size: "grid size: ${bp.name}";
              ${bp.template
            ? `grid-template: ${bp.template};`
            : `grid-template-columns: repeat(${bp.cols}, minmax(calc((100% / ${bp.cols}) - var(--grid-col-gap)), 1fr));`}
            }
            ${[...Array(bp.cols)]
            .map((_, i) => {
            const gItm = i + 1;
            return /* css */ `
                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-col-start-${gItm}"],
                  ::slotted([grid-states~="${bp.name}-col-start-${gItm}"]) {
                    grid-column-start: ${gItm} !important;
                  }
                  [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-col-span-${gItm}"],
                  ::slotted([grid-states~="${bp.name}-col-span-${gItm}"]) {
                    grid-column-end: span ${gItm} !important;
                  }
              `;
        })
            .join('')}
              ${[...Array(24)]
            .map((_, i) => {
            const gItm = i + 1;
            return /* css */ `
                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-row-start-${gItm}"],
                    ::slotted([grid-states~="${bp.name}-row-start-${gItm}"]) {
                      grid-row-start: ${gItm} !important;
                    }
                    [cache-key="${this.cacheKey}"].grid > [grid-states~="${bp.name}-row-span-${gItm}"],
                    ::slotted([grid-states~="${bp.name}-row-span-${gItm}"]) {
                      grid-row-end: span ${gItm} !important;
                    }
                `;
        })
            .join('')}
            ${this.showHelper
            ? /* css */ `
                [cache-key="${this.cacheKey}"].grid--helper :nth-child(-n+${bp.cols}) {
                  display: block !important;
                }
              `
            : ''}
          }
        `)
            .join('')}
    `;
        return css
            .replace(/\/\*[\s\S]*?\*\//g, '') // Remove comments
            .replace(/\s{2,}/g, ' ') // Replace multiple spaces with a single space
            .replace(/\s*([{}:;,])\s*/g, '$1') // Remove spaces around CSS symbols
            .replace(/\n/g, ''); // Remove newlines;
    };
    componentWillLoad() {
        this.constructSizeArray();
    }
    render() {
        return (h(Host, { key: '56ae0bda8aedac96841dd8cf308117ef1aaa9824', class: "nano-grid" }, h("div", { key: '6fffc201e4261b8f6c458bd044b31fe12cd9045e', part: "grid", class: "grid", "cache-key": this.cacheKey }, h("slot", { key: 'a6d7473ba9a8ffd21c4df95c2028e67026ffd1a5' })), this.showHelper && (h("div", { key: '275145f83283b504171fdc973741a1398cca6317', class: "grid grid--helper", part: "helper", "cache-key": this.cacheKey }, [...Array(24)].map(() => (h("div", { class: "grid__helper-item" })))))));
    }
    static get is() { return "nano-grid"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["grid.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["grid.css"]
        };
    }
    static get properties() {
        return {
            "sSize": {
                "type": "any",
                "attribute": "s-size",
                "mutable": false,
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the component's small breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "300"
            },
            "mSize": {
                "type": "any",
                "attribute": "m-size",
                "mutable": false,
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the component's medium breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "550"
            },
            "lSize": {
                "type": "any",
                "attribute": "l-size",
                "mutable": false,
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the component's large breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "800"
            },
            "xlSize": {
                "type": "any",
                "attribute": "xl-size",
                "mutable": false,
                "complexType": {
                    "original": "number | string",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the component's xl breakpoint. Note - all breakpoints are based on component width, not screen width.\nWill default to `px` if no unit supplied e.g. `20rem`"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "1000"
            },
            "sCols": {
                "type": "number",
                "attribute": "s-cols",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the number of columns the grid has at the small breakpoint."
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "mCols": {
                "type": "number",
                "attribute": "m-cols",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the number of columns the grid has at the medium breakpoint."
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "lCols": {
                "type": "number",
                "attribute": "l-cols",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the number of columns the grid has at the large breakpoint."
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "xlCols": {
                "type": "number",
                "attribute": "xl-cols",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the number of columns the grid has at the xl breakpoint."
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "xxlCols": {
                "type": "number",
                "attribute": "xxl-cols",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "the number of columns the grid has at the xxl breakpoint (anything greater than the xl breakpoint)"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "sTpl": {
                "type": "string",
                "attribute": "s-tpl",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional small `grid-template`. *Note* - you must set `sCols` for this to take affect"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "mTpl": {
                "type": "string",
                "attribute": "m-tpl",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional medium `grid-template`. *Note* - you must set `mCols` for this to take affect"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "lTpl": {
                "type": "string",
                "attribute": "l-tpl",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional large `grid-template`. *Note* - you must set `lCols` for this to take affect"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "xlTpl": {
                "type": "string",
                "attribute": "xl-tpl",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional xl `grid-template`. *Note* - you must set `xlCols` for this to take affect"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "xxlTpl": {
                "type": "string",
                "attribute": "xxl-tpl",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional xxl `grid-template`. *Note* - you must set `xxlCols` for this to take affect"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "showHelper": {
                "type": "boolean",
                "attribute": "show-helper",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "shows a grid helper to visualise where columns are"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "cacheKey": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "sTpl",
                "methodName": "constructSizeArray"
            }, {
                "propName": "mTpl",
                "methodName": "constructSizeArray"
            }, {
                "propName": "lTpl",
                "methodName": "constructSizeArray"
            }, {
                "propName": "xlTpl",
                "methodName": "constructSizeArray"
            }, {
                "propName": "xxlTpl",
                "methodName": "constructSizeArray"
            }, {
                "propName": "sSize",
                "methodName": "constructSizeArray"
            }, {
                "propName": "mSize",
                "methodName": "constructSizeArray"
            }, {
                "propName": "lSize",
                "methodName": "constructSizeArray"
            }, {
                "propName": "xlSize",
                "methodName": "constructSizeArray"
            }, {
                "propName": "sCols",
                "methodName": "constructSizeArray"
            }, {
                "propName": "mCols",
                "methodName": "constructSizeArray"
            }, {
                "propName": "lCols",
                "methodName": "constructSizeArray"
            }, {
                "propName": "xlCols",
                "methodName": "constructSizeArray"
            }, {
                "propName": "xxlCols",
                "methodName": "constructSizeArray"
            }, {
                "propName": "showHelper",
                "methodName": "constructSizeArray"
            }];
    }
}
__decorate([
    ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
    __metadata("design:type", Object)
], Grid.prototype, "styles", void 0);
