/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
import { C as ConstructibleStyle } from './constructible-style.js';
import { h } from './renderer.js';

const gridCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--grid-col-gap:var(--nano-spacing-md);--grid-row-gap:var(--nano-spacing-md);--grid-align-items:start;--grid-justify-items:normal;--current-grid-size:\"grid size: s\";container-type:inline-size;display:block}:host .grid{display:grid;gap:var(--grid-row-gap) var(--grid-col-gap);block-size:inherit;min-block-size:inherit;place-items:var(--grid-align-items) var(--grid-justify-items)}:host([show-helper]:not([show-helper=false])){position:relative}:host([show-helper]:not([show-helper=false])) .grid--helper{position:absolute;inset:0;pointer-events:none;display:grid !important;overflow:hidden}:host([show-helper]:not([show-helper=false])) .grid--helper::before{content:var(--current-grid-size);font-size:30px;position:absolute;inline-size:100%;inset-inline-start:0;text-align:center;inset-block-start:50%;transform:translateY(-50%);color:rgba(0, 0, 0, 0.2);text-transform:uppercase;z-index:99;pointer-events:none}:host([show-helper]:not([show-helper=false])) .grid__helper-item{background:hsla(204, 80%, 72%, 0.25);block-size:100vh;inline-size:100%}";

var __decorate = (undefined && undefined.__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 = (undefined && undefined.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
        return Reflect.metadata(k, v);
};
const Grid = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
    }
    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 watchers() { return {
        "sTpl": ["constructSizeArray"],
        "mTpl": ["constructSizeArray"],
        "lTpl": ["constructSizeArray"],
        "xlTpl": ["constructSizeArray"],
        "xxlTpl": ["constructSizeArray"],
        "sSize": ["constructSizeArray"],
        "mSize": ["constructSizeArray"],
        "lSize": ["constructSizeArray"],
        "xlSize": ["constructSizeArray"],
        "sCols": ["constructSizeArray"],
        "mCols": ["constructSizeArray"],
        "lCols": ["constructSizeArray"],
        "xlCols": ["constructSizeArray"],
        "xxlCols": ["constructSizeArray"],
        "showHelper": ["constructSizeArray"]
    }; }
    static get style() { return gridCss; }
}, [257, "nano-grid", {
        "sSize": [520, "s-size"],
        "mSize": [520, "m-size"],
        "lSize": [520, "l-size"],
        "xlSize": [520, "xl-size"],
        "sCols": [514, "s-cols"],
        "mCols": [514, "m-cols"],
        "lCols": [514, "l-cols"],
        "xlCols": [514, "xl-cols"],
        "xxlCols": [514, "xxl-cols"],
        "sTpl": [1, "s-tpl"],
        "mTpl": [1, "m-tpl"],
        "lTpl": [1, "l-tpl"],
        "xlTpl": [1, "xl-tpl"],
        "xxlTpl": [1, "xxl-tpl"],
        "showHelper": [516, "show-helper"],
        "cacheKey": [32]
    }, undefined, {
        "sTpl": ["constructSizeArray"],
        "mTpl": ["constructSizeArray"],
        "lTpl": ["constructSizeArray"],
        "xlTpl": ["constructSizeArray"],
        "xxlTpl": ["constructSizeArray"],
        "sSize": ["constructSizeArray"],
        "mSize": ["constructSizeArray"],
        "lSize": ["constructSizeArray"],
        "xlSize": ["constructSizeArray"],
        "sCols": ["constructSizeArray"],
        "mCols": ["constructSizeArray"],
        "lCols": ["constructSizeArray"],
        "xlCols": ["constructSizeArray"],
        "xxlCols": ["constructSizeArray"],
        "showHelper": ["constructSizeArray"]
    }]);
__decorate([
    ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
    __metadata("design:type", Object)
], Grid.prototype, "styles", void 0);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-grid"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-grid":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Grid);
            }
            break;
    } });
}

export { Grid as G, defineCustomElement as d };
