/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { r as registerInstance, a as Host, c as createEvent, g as getElement } from './index-BM3Om9WE.js';
import { C as ConstructibleStyle } from './constructible-style-B2_GfhhS.js';
import { h } from './renderer-DpNDfhNy.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 = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    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"]
    }; }
};
__decorate([
    ConstructibleStyle({ cacheKeyProperty: 'cacheKey' }),
    __metadata("design:type", Object)
], Grid.prototype, "styles", void 0);
Grid.style = gridCss;

const imgCss = ":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{--padding:0;display:inline-block;object-fit:cover;object-position:center;background-size:cover;background-position:center}:host *{border-radius:inherit}:host([background]:not([background=false])){display:block}.img{position:relative;object-fit:inherit;object-position:inherit;background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;flex:1 1 100%;display:flex;flex-direction:column;min-block-size:inherit;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size:inherit;aspect-ratio:inherit}.img__loader,.img__observer{position:absolute;inset:0;block-size:100%;inline-size:100%;z-index:-1}.img__image,.img__bg{border-radius:inherit;display:block;opacity:0;transition:0.5s ease opacity, 0.3s ease filter 0.4s;filter:blur(5px);flex:1}.img__image.loaded,.img__bg.loaded{opacity:1;filter:blur(0)}@media not all and (resolution >= 0.001dpcm){@supports (-webkit-appearance: none){.img__image.loaded,.img__bg.loaded{filter:blur(0)}}}.img__image{object-fit:inherit;object-position:inherit;min-block-size:inherit;min-inline-size:inherit;block-size:inherit;inline-size:inherit;max-block-size:inherit;max-inline-size:inherit;aspect-ratio:inherit}.img__image.hide{visibility:hidden}.img__image.hide.no-height{block-size:1px;position:absolute;z-index:-1}.img__bg{background-color:inherit;background-position:inherit;background-size:inherit;background-origin:inherit;background-attachment:inherit;background-repeat:inherit;overflow:auto;padding:var(--padding)}.img__bg.no-height{position:absolute;inset:0}";

const Img = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.nanoImgWillLoad = createEvent(this, "nanoImgWillLoad", 7);
        this.nanoImgDidLoad = createEvent(this, "nanoImgDidLoad", 7);
        this.nanoImgError = createEvent(this, "nanoImgError", 7);
    }
    io;
    _srcSet = {};
    get host() { return getElement(this); }
    loadSrc;
    loadError;
    hasLoaded = false;
    imgStates = null;
    _src;
    _srcChanged() {
        this.hasLoaded = false;
        this.addIO();
    }
    /** This attribute defines the alternative text describing the image.
     * Users will see this text displayed if the image URL is wrong, or if the image is not yet downloaded. */
    alt;
    /** The image URL. This attribute is mandatory for the `<img>` element. */
    src;
    srcChanged() {
        this._src = this.src;
    }
    /** Optional list string providing media sizes with corresponding image srcs.
     * i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"` */
    srcSet;
    srcSetChanged() {
        if (!this.srcSet)
            return;
        delete this._srcSet;
        this._srcSet = {};
        this.imgStates = this.srcSet
            .split(',')
            .map((bpSrc) => {
            const [bp, src] = bpSrc.split(' ').filter((bp) => bp.length);
            this._srcSet[bp] = { src: src, active: false };
            return bp;
        })
            .join(', ');
    }
    /** Render image lazily, when it comes into the browser viewport **/
    lazy = true;
    lazyChanged() {
        if (!this.lazy)
            this.load();
    }
    /** Render the image as a background image **/
    background;
    /** When the image is rendered as a background, and there is no preset dimensions of the component,
     * you can set how the component height will be set. Via image size or via the content **/
    autoHeight = 'content';
    /** Emitted when the img src has been set */
    nanoImgWillLoad;
    /** Emitted when the image has finished loading */
    nanoImgDidLoad;
    /** Emitted when the img fails to load */
    nanoImgError;
    addIO() {
        if (!this._src || this.hasLoaded)
            return;
        if (!this.lazy) {
            this.load();
            return;
        }
        if (typeof window !== 'undefined' &&
            'IntersectionObserver' in window) {
            this.removeIO();
            this.io = new IntersectionObserver((data) => {
                if (data[0].isIntersecting) {
                    this.load();
                    this.removeIO();
                }
            });
            this.io.observe(this.host);
        }
        else
            setTimeout(() => this.load(), 200);
    }
    load() {
        this.loadError = this.onError;
        this.loadSrc = this._src;
        this.nanoImgWillLoad.emit();
    }
    onLoad = () => {
        this.nanoImgDidLoad.emit();
        setTimeout(() => (this.hasLoaded = true), 50);
    };
    onError = () => {
        this.nanoImgError.emit();
    };
    onResize = (e) => {
        Object.entries(e.detail).forEach(([bp, active]) => {
            this._srcSet[bp].active = !!active;
        });
        // sort and find the highest sized matching image.
        const srcOpts = [];
        Object.keys(this._srcSet)
            .sort()
            .forEach((bp) => {
            if (this._srcSet[bp].active)
                srcOpts.push(this._srcSet[bp].src);
        });
        if (srcOpts.length)
            this._src = srcOpts.slice(-1)[0];
        // no matching image? Set back to default
        else
            this._src = this.src;
    };
    removeIO() {
        if (this.io) {
            this.io.disconnect();
            this.io = undefined;
        }
    }
    connectedCallback() {
        this.srcChanged();
        this.srcSetChanged();
        this.lazyChanged();
    }
    componentDidLoad() {
        this.addIO();
    }
    disconnectedCallback() {
        this.removeIO();
    }
    render() {
        const bgStyle = this.loadSrc
            ? { 'background-image': `url(${this.loadSrc})` }
            : {};
        return (h(Host, { key: 'f8774fc9ad6e94727378337c2f405a068a7c88fb', class: "nano-img" }, h("div", { key: '15ae3c8ea944c8f0eab8616194f44fc1033e8fe2', class: "img" }, h("div", { key: 'ec3f433ded23dcb7fc57e53b0ecaba789ba492e0', class: "img__loader n-loader-skeleton" }, "Loading"), !!this.background && (h("div", { key: '8f4e8c9d595a31b477b0ae3f9e135f6b5c3f0e69', class: {
                loaded: this.hasLoaded,
                img__bg: true,
                'no-height': this.autoHeight === 'image',
            }, style: bgStyle }, h("slot", { key: '29bab2a5c86b3dfe18db8936af77674c44d743d0' }))), h("img", { key: 'e6731b48ed137d97aa98e64dc55488d56724f672', class: {
                img__image: true,
                loaded: this.hasLoaded,
                hide: this.background,
                'no-height': this.autoHeight === 'content',
            }, decoding: "async", src: this.loadSrc, loading: undefined, alt: this.alt, onLoad: this.onLoad, onError: this.loadError }), h("nano-resize-observe", { key: '0f1ce7d8b82adc19bfa459ff2adae708a4263c6e', class: "img__observer", onNanoResizeStateChange: this.onResize, states: this.imgStates }))));
    }
    static get watchers() { return {
        "_src": ["_srcChanged"],
        "src": ["srcChanged"],
        "srcSet": ["srcSetChanged"],
        "lazy": ["lazyChanged"]
    }; }
};
Img.style = imgCss;

export { Grid as nano_grid, Img as nano_img };
