@ionic/core 8.8.16-dev.11784841344.1aa1a41c → 8.8.16-dev.11784913436.1a334b43

package/dist/cjs/ion-gallery.cjs.entry.js

@@ -1,607 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-'use strict';
-
-var index = require('./index-GZU9YrFc.js');
-var helpers = require('./helpers-DiOgV5hw.js');
-var ionicGlobal = require('./ionic-global-QoUqobrQ.js');
-require('./focus-visible-BIj-I3-C.js');
-
-/**
- * Helpers for validating user-supplied CSS values using regular expressions, without
- * relying on browser CSS APIs.
- */
-// Matches `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
-const LENGTH_PERCENTAGE_PATTERN = /^[-+]?(?:\d+\.?\d*|\.\d+)(?:%|[a-z]+)$/i;
-// Matches simple `calc` / `min` / `max` / `clamp(...)` functions.
-const MATH_FUNCTION_PATTERN = /^(calc|min|max|clamp)\s*\(.+\)$/i;
-// Matches a `var(--name)` reference with an optional fallback, e.g.
-// `var(--my-gap)` or `var(--my-gap, 16px)`.
-const VAR_FUNCTION_PATTERN = /^var\(\s*--[^\s,)]+\s*(?:,[\s\S]*)?\)$/i;
-/**
- * Returns whether `value` matches the [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
- * syntax. Accepts `<length>` (`<number>` + unit identifier) or `<percentage>` (`<number>%`).
- * Also supports simple `calc` / `min` / `max` / `clamp(...)` functions.
- *
- * @param value String value to validate.
- */
-function isValidLengthPercentage(value) {
-    const v = value.trim();
-    if (!v) {
-        return false;
-    }
-    return MATH_FUNCTION_PATTERN.test(v) || LENGTH_PERCENTAGE_PATTERN.test(v);
-}
-/**
- * Returns whether `value` is a single [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/var)
- * reference, e.g. `var(--my-token)` or `var(--my-token, 16px)`. The referenced
- * custom property is resolved by the browser, so the resolved value is not
- * validated here.
- *
- * @param value String value to validate.
- */
-function isCssVariable(value) {
-    return VAR_FUNCTION_PATTERN.test(value.trim());
-}
-
-const DEFAULT_COLUMNS = {
-    xs: 2,
-    sm: 3,
-    md: 4,
-    lg: 6,
-    xl: 8,
-    xxl: 10,
-};
-const DEFAULT_GAP = '16px';
-
-const galleryCss = () => `:host{display:grid;grid-template-columns:repeat(var(--internal-gallery-columns, 2), minmax(0, 1fr))}:host(.gallery-layout-uniform){gap:var(--internal-gallery-gap, 16px)}:host(.gallery-layout-masonry){-ms-flex-align:start;align-items:start;-webkit-column-gap:var(--internal-gallery-gap, 16px);-moz-column-gap:var(--internal-gallery-gap, 16px);column-gap:var(--internal-gallery-gap, 16px);row-gap:0;grid-auto-rows:1px}`;
-
-// TODO(FW-7285): Replace with global breakpoints
-const BREAKPOINTS = {
-    xs: 0,
-    sm: 576,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-    xxl: 1400,
-};
-const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-/**
- * The tag of the component used to wrap each gallery item.
- */
-const GALLERY_ITEM_SELECTOR = 'ion-gallery-item';
-const Gallery = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        // Keep track of whether we've warned about invalid columns, invalid gap,
-        // and unused order properties to avoid duplicate warnings on screen resize.
-        this.hasWarnedInvalidColumns = false;
-        this.hasWarnedInvalidGap = false;
-        this.hasWarnedUnusedOrder = false;
-        this.hasWarnedInvalidItems = false;
-        /**
-         * The visual layout of the gallery. When `uniform`, rows take up the height
-         * of the tallest item and are spaced evenly across the gallery. Additionally,
-         * items will have an aspect ratio of 1/1, forcing them to be square unless a
-         * height is explicitly set. When `masonry`, items will be positioned under each
-         * other with only the specified gap between them.
-         */
-        this.layout = 'uniform';
-        /**
-         * The number of columns to display. Can be set as a number or an object of
-         * breakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`).
-         */
-        this.columns = DEFAULT_COLUMNS;
-        /**
-         * The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)
-         * values like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,
-         * CSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel
-         * values). Can also be set as a breakpoint map
-         * (e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept
-         * space-separated values or CSS keyword values like `inherit`, `auto`, etc.
-         */
-        this.gap = DEFAULT_GAP;
-        /**
-         * Listen for the slotchange event on the slot. When the gallery's items are
-         * added or removed, re-collapse wrappers, re-observe items for size changes,
-         * and recompute the masonry grid.
-         */
-        this.onSlotChange = () => {
-            this.collapseWrappers();
-            this.observeResizes();
-            this.scheduleMasonryResize();
-        };
-        /**
-         * Measure the host and children, then compute masonry placement.
-         */
-        this.resizeMasonryGrid = () => {
-            this.masonryRaf = undefined;
-            if (this.layout !== 'masonry') {
-                this.clearMasonryStyles();
-                return;
-            }
-            const width = this.el.getBoundingClientRect().width;
-            const columns = this.getColumnsForWidth(width);
-            // Skip masonry placement when width/columns does not resolve
-            // to a valid breakpoint column count.
-            if (columns === undefined) {
-                return;
-            }
-            const styles = getComputedStyle(this.el);
-            const rowHeight = parseFloat(styles.getPropertyValue('grid-auto-rows')) || 0;
-            const rowGap = parseFloat(styles.getPropertyValue('row-gap')) || parseFloat(styles.getPropertyValue('gap')) || 0;
-            const items = this.getItems();
-            this.layoutMasonry(items, rowHeight, rowGap, columns);
-        };
-    }
-    onColumnsOrGapChanged() {
-        this.syncResponsiveLayout();
-    }
-    onLayoutOrOrderChanged() {
-        this.syncResponsiveLayout();
-        this.syncItemLayout();
-        // Wait until the next animation frame to warn about unused order
-        // to avoid erroneous warnings when the layout and order are updated
-        // in the same frame.
-        helpers.raf(() => {
-            this.warnUnusedOrder();
-        });
-    }
-    /**
-     * Sync the current layout with each item when the gallery's `layout`
-     * changes.
-     */
-    syncItemLayout() {
-        this.getItems().forEach((item) => {
-            item.syncGalleryLayout();
-        });
-    }
-    componentDidLoad() {
-        this.collapseWrappers();
-        this.updateResponsiveStyles(true);
-        this.resizeObserver = new ResizeObserver(() => {
-            this.updateResponsiveStyles();
-            this.scheduleMasonryResize();
-        });
-        this.observeResizes();
-        this.scheduleMasonryResize();
-        this.warnUnusedOrder();
-    }
-    disconnectedCallback() {
-        var _a;
-        if (this.masonryRaf !== undefined) {
-            cancelAnimationFrame(this.masonryRaf);
-            this.masonryRaf = undefined;
-        }
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.resizeObserver = undefined;
-    }
-    /**
-     * Observe the host and each item for size changes. Items are observed in
-     * addition to the host so masonry placement is recomputed when an item's
-     * rendered height changes — most importantly when a dynamically added
-     * `ion-gallery-item` finishes hydrating, which (unlike an `<img>`) emits no
-     * `load` event and does not change the host's measured size while collapsed.
-     */
-    observeResizes() {
-        const observer = this.resizeObserver;
-        if (observer === undefined) {
-            return;
-        }
-        observer.disconnect();
-        observer.observe(this.el);
-        this.getItems().forEach((item) => observer.observe(item));
-    }
-    /**
-     * Listen for the load event on child elements.
-     * When the layout is `masonry`, this listener is used to schedule a resize
-     * of the masonry grid when the child elements load. This is useful for when
-     * images take time to load.
-     */
-    onChildLoad(ev) {
-        if (this.layout !== 'masonry') {
-            return;
-        }
-        const target = ev.target;
-        if (target instanceof Node && this.el.contains(target)) {
-            this.scheduleMasonryResize();
-        }
-    }
-    /**
-     * Recompute the gallery column and gap variables and masonry placement when
-     * columns, gap, layout, or order change.
-     */
-    syncResponsiveLayout() {
-        this.updateResponsiveStyles(true);
-        this.scheduleMasonryResize();
-    }
-    /**
-     * Batch masonry measurements to a single animation frame.
-     * This avoids repeated sync layouts during rapid resize/load/slot changes.
-     */
-    scheduleMasonryResize() {
-        if (this.layout !== 'masonry') {
-            this.clearMasonryStyles();
-            return;
-        }
-        if (this.masonryRaf !== undefined) {
-            cancelAnimationFrame(this.masonryRaf);
-        }
-        this.masonryRaf = requestAnimationFrame(this.resizeMasonryGrid);
-    }
-    /**
-     * Normalize a single column value (`columns` as a number, string, or one entry from
-     * a `columns` breakpoint map) to a positive integer. Returns `undefined` when
-     * the input cannot be interpreted as a finite number.
-     */
-    sanitizeColumns(columns) {
-        if (columns === undefined) {
-            return undefined;
-        }
-        const numericColumns = typeof columns === 'number' ? columns : Number(columns);
-        if (!Number.isFinite(numericColumns) || !Number.isInteger(numericColumns) || numericColumns <= 0) {
-            return undefined;
-        }
-        return numericColumns;
-    }
-    /**
-     * Normalize a single gap value (`gap` as a number, a string such as a CSS
-     * length-percentage or `var()` reference, or one entry from a `gap`
-     * breakpoint map) to a CSS length string. Returns `undefined` when the
-     * input cannot be interpreted as a valid CSS length or `var()` reference.
-     */
-    sanitizeGap(gap) {
-        if (gap === undefined) {
-            return undefined;
-        }
-        const normalizedGap = typeof gap === 'string' ? gap.trim() : gap;
-        if (normalizedGap === '' || typeof normalizedGap === 'object') {
-            return undefined;
-        }
-        const numericGap = Number(normalizedGap);
-        if (Number.isFinite(numericGap)) {
-            return numericGap < 0 ? undefined : `${numericGap}px`;
-        }
-        if (typeof normalizedGap !== 'string') {
-            return undefined;
-        }
-        if (isCssVariable(normalizedGap)) {
-            return normalizedGap;
-        }
-        const isValidCssLength = isValidLengthPercentage(normalizedGap);
-        return isValidCssLength ? normalizedGap : undefined;
-    }
-    /**
-     * Check if the value is a breakpoint map object.
-     */
-    isBreakpointMap(value) {
-        return typeof value === 'object' && value !== null && !Array.isArray(value);
-    }
-    /**
-     * Check if the breakpoint map has any invalid values for the provided
-     * sanitizer. A breakpoint map is invalid when there are no valid breakpoint
-     * keys set (e.g. `{}` or `{ colums: 3 }`), or when a value under a
-     * breakpoint key fails the sanitizer (e.g. `{ xs: -3 }`, `{ sm: 'foo' }`).
-     */
-    hasInvalidBreakpointMap(breakpointMap, sanitizeValue) {
-        let hasBreakpointEntry = false;
-        for (const breakpoint of BREAKPOINT_ORDER) {
-            const value = breakpointMap[breakpoint];
-            if (value !== undefined) {
-                hasBreakpointEntry = true;
-                if (sanitizeValue(value) === undefined) {
-                    return true;
-                }
-            }
-        }
-        return !hasBreakpointEntry;
-    }
-    /**
-     * Resolve a responsive value from a breakpoint map.
-     * Uses a breakpoint-specific default when custom values are missing/invalid.
-     */
-    resolveFromBreakpoints(width, breakpointMap, sanitizeProvided, getSanitizedDefault) {
-        let resolvedValue;
-        for (const bp of BREAKPOINT_ORDER) {
-            const providedValue = breakpointMap[bp];
-            const sanitizedProvided = sanitizeProvided(providedValue);
-            const sanitizedDefault = getSanitizedDefault(bp);
-            const resolved = providedValue === undefined || sanitizedProvided === undefined ? sanitizedDefault : sanitizedProvided;
-            if (resolved !== undefined && width >= BREAKPOINTS[bp]) {
-                resolvedValue = resolved;
-            }
-        }
-        return resolvedValue;
-    }
-    /**
-     * Get the columns from a responsive breakpoint map.
-     * Returns the columns for the last matching breakpoint.
-     */
-    getColumnsFromBreakpointMap(width, breakpointMap) {
-        return this.resolveFromBreakpoints(width, breakpointMap, (value) => this.sanitizeColumns(value), (bp) => this.sanitizeColumns(DEFAULT_COLUMNS[bp]));
-    }
-    /**
-     * Get the gap from a responsive breakpoint map.
-     * Returns the gap for the last matching breakpoint.
-     */
-    getGapFromBreakpointMap(width, breakpointMap) {
-        return this.resolveFromBreakpoints(width, breakpointMap, (value) => this.sanitizeGap(value), () => this.sanitizeGap(DEFAULT_GAP));
-    }
-    /**
-     * Warn about an invalid columns value when it is set to a negative number,
-     * an empty breakpoint map, a map with no supported breakpoint keys,
-     * or a map with invalid breakpoint values.
-     */
-    warnInvalidColumns(columns) {
-        if (this.hasWarnedInvalidColumns) {
-            return;
-        }
-        index.printIonWarning(`[ion-gallery] - Invalid "columns" value (${JSON.stringify(columns)}). Expected a positive integer or breakpoint map object (e.g. { xs: 2, md: 4 }). Falling back to default responsive columns.`, this.el);
-        this.hasWarnedInvalidColumns = true;
-    }
-    /**
-     * Warn about an invalid gap value when it is set to a negative number,
-     * an empty breakpoint map, a map with no supported breakpoint keys,
-     * or a map with invalid breakpoint values.
-     */
-    warnInvalidGap(gap) {
-        if (this.hasWarnedInvalidGap) {
-            return;
-        }
-        index.printIonWarning(`[ion-gallery] - Invalid "gap" value (${JSON.stringify(gap)}). Expected a non-negative number, CSS length string, CSS variable (e.g. var(--app-gap)), or breakpoint map object (e.g. { xs: 8, md: "1rem" }).`, this.el);
-        this.hasWarnedInvalidGap = true;
-    }
-    /**
-     * Warn when `order` is explicitly set while layout is `uniform`.
-     */
-    warnUnusedOrder() {
-        const { layout } = this;
-        const order = this.order == null ? undefined : this.order;
-        if (this.hasWarnedUnusedOrder || layout !== 'uniform' || order === undefined) {
-            return;
-        }
-        index.printIonWarning(`[ion-gallery] - "order" has no effect when "layout" is "uniform". Set "layout" to "masonry" for "order" to apply.`, this.el);
-        this.hasWarnedUnusedOrder = true;
-    }
-    /**
-     * Resolve the active columns value for the current width. Falls back to
-     * the default responsive columns when the provided prop is invalid.
-     */
-    getColumnsForWidth(width) {
-        const { columns } = this;
-        const isBreakpointColumns = this.isBreakpointMap(columns);
-        const hasInvalidBreakpointColumns = isBreakpointColumns && this.hasInvalidBreakpointMap(columns, (value) => this.sanitizeColumns(value));
-        const sanitizedColumns = isBreakpointColumns
-            ? this.getColumnsFromBreakpointMap(width, columns)
-            : this.sanitizeColumns(columns);
-        if (hasInvalidBreakpointColumns || (!isBreakpointColumns && sanitizedColumns === undefined)) {
-            this.warnInvalidColumns(columns);
-        }
-        if (sanitizedColumns !== undefined) {
-            return sanitizedColumns;
-        }
-        return this.getColumnsFromBreakpointMap(width, DEFAULT_COLUMNS);
-    }
-    /**
-     * Resolve the active gap value for the current width.
-     */
-    getGapForWidth(width) {
-        const { gap } = this;
-        const providedGap = gap !== null && gap !== void 0 ? gap : DEFAULT_GAP;
-        const isBreakpointGap = this.isBreakpointMap(providedGap);
-        const hasInvalidBreakpointGap = isBreakpointGap && this.hasInvalidBreakpointMap(providedGap, (value) => this.sanitizeGap(value));
-        const sanitizedGap = isBreakpointGap
-            ? this.getGapFromBreakpointMap(width, providedGap)
-            : this.sanitizeGap(providedGap);
-        if (hasInvalidBreakpointGap || (!isBreakpointGap && sanitizedGap === undefined)) {
-            this.warnInvalidGap(providedGap);
-        }
-        if (sanitizedGap !== undefined) {
-            return sanitizedGap;
-        }
-        return this.sanitizeGap(DEFAULT_GAP);
-    }
-    /**
-     * Update the responsive styles for the gallery. This is used to update
-     * the columns and gap when the component width changes.
-     */
-    updateResponsiveStyles(force = false) {
-        const width = this.el.getBoundingClientRect().width;
-        // Only update the columns if the component width has changed by more than
-        // 1px or if the force flag is true. This prevents unnecessary re-renders
-        // when the component width has not changed.
-        if (!width || (!force && this.lastWidth !== undefined && Math.abs(this.lastWidth - width) < 1)) {
-            return;
-        }
-        this.lastWidth = width;
-        const columns = this.getColumnsForWidth(width);
-        this.el.style.setProperty('--internal-gallery-columns', `${columns}`);
-        const gap = this.getGapForWidth(width);
-        this.el.style.setProperty('--internal-gallery-gap', `${gap}`);
-    }
-    /**
-     * Return the `ion-gallery-item` elements to place in the grid. Each item is a
-     * direct grid cell, whether a direct child or nested inside a pass-through
-     * wrapper (e.g. a layout `<div>`). Items belonging to a nested `ion-gallery`
-     * are excluded.
-     */
-    getItems() {
-        return Array.from(this.el.querySelectorAll(GALLERY_ITEM_SELECTOR)).filter((item) => item.closest('ion-gallery') === this.el);
-    }
-    /**
-     * Collapse each pass-through wrapper's box with `display: contents` so its
-     * items participate in the gallery grid. Restore the box of a wrapper that
-     * no longer contains items, and warn about children that contain none.
-     */
-    collapseWrappers() {
-        const items = this.getItems();
-        Array.from(this.el.children).forEach((child) => {
-            if (child.matches(GALLERY_ITEM_SELECTOR)) {
-                return;
-            }
-            if (!items.some((item) => child.contains(item))) {
-                // If the wrapper was previously collapsed with `display: contents`
-                // but now contains no items, clear the display style.
-                if (child.style.display === 'contents') {
-                    child.style.display = '';
-                }
-                this.warnInvalidItems();
-                return;
-            }
-            // Collapse the wrapper's box so its items sit directly in the grid.
-            child.style.display = 'contents';
-        });
-    }
-    /**
-     * Warn when the gallery has content that is not wrapped in an
-     * `ion-gallery-item` component. Items belonging to a nested
-     * gallery are considered invalid content for the parent gallery.
-     */
-    warnInvalidItems() {
-        if (this.hasWarnedInvalidItems) {
-            return;
-        }
-        index.printIonWarning(`[ion-gallery] - Gallery items must be wrapped in "ion-gallery-item" components. Direct children that are not "ion-gallery-item" (and do not contain one) are ignored.`, this.el);
-        this.hasWarnedInvalidItems = true;
-    }
-    /**
-     * Clear the item styles for the given item element.
-     * This is used to switch between uniform and masonry layouts.
-     */
-    clearItemStyles(itemEl) {
-        itemEl.style.gridRowStart = '';
-        itemEl.style.gridRowEnd = '';
-        itemEl.style.gridColumn = '';
-        itemEl.style.marginBottom = '';
-    }
-    /**
-     * Clear placement styles for all items when leaving masonry mode.
-     */
-    clearMasonryStyles() {
-        this.getItems().forEach((itemEl) => this.clearItemStyles(itemEl));
-    }
-    /**
-     * Whether the item contains any images that have not finished loading.
-     * Used to defer masonry placement until the rendered height is final.
-     */
-    hasUnloadedImages(itemEl) {
-        return Array.from(itemEl.querySelectorAll('img')).some((img) => !img.complete || img.naturalHeight === 0);
-    }
-    /**
-     * Convert a rendered item height to the number of grid rows it should span.
-     * Returns undefined when the item has images that are not fully loaded yet.
-     */
-    calculateRowSpan(itemEl, rowHeight, rowGap) {
-        if (this.hasUnloadedImages(itemEl)) {
-            return undefined;
-        }
-        const height = itemEl.getBoundingClientRect().height;
-        const itemStyles = getComputedStyle(itemEl);
-        const marginBottom = parseFloat(itemStyles.getPropertyValue('margin-bottom')) || 0;
-        const denominator = rowHeight + rowGap;
-        if (!denominator || !Number.isFinite(denominator)) {
-            return 1;
-        }
-        return Math.ceil((height + marginBottom + rowGap) / denominator) || 1;
-    }
-    /**
-     * Get the index of the column to position the item in.
-     * When the order is `best-fit`, the column with the shortest height is
-     * returned. Otherwise, items are placed in the column that matches their
-     * natural DOM order.
-     */
-    getColumnIndex(index, columnHeights, columns) {
-        const order = this.getOrder();
-        if (order === 'best-fit') {
-            let columnIndex = 0;
-            for (let i = 1; i < columns; i++) {
-                if (columnHeights[i] < columnHeights[columnIndex]) {
-                    columnIndex = i;
-                }
-            }
-            return columnIndex;
-        }
-        return index % columns;
-    }
-    /**
-     * Apply masonry placement by assigning each item a column and row span.
-     */
-    layoutMasonry(items, rowHeight, rowGap, columns) {
-        const columnHeights = new Array(columns).fill(0);
-        const lastItemsByColumn = new Array(columns).fill(undefined);
-        items.forEach((itemEl, i) => {
-            itemEl.style.marginBottom = '';
-            const span = this.calculateRowSpan(itemEl, rowHeight, rowGap);
-            if (span === undefined) {
-                this.clearItemStyles(itemEl);
-                return;
-            }
-            const columnIndex = this.getColumnIndex(i, columnHeights, columns);
-            const start = columnHeights[columnIndex] + 1;
-            itemEl.style.gridColumn = `${columnIndex + 1}`;
-            itemEl.style.gridRowStart = `${start}`;
-            itemEl.style.gridRowEnd = `span ${span}`;
-            columnHeights[columnIndex] = start + span - 1;
-            lastItemsByColumn[columnIndex] = itemEl;
-        });
-        // Remove trailing space from the final item in each column while preserving
-        // spacing between all non-final items.
-        lastItemsByColumn.forEach((itemEl) => {
-            if (itemEl === undefined) {
-                return;
-            }
-            itemEl.style.marginBottom = '0px';
-            const spanWithoutTrailingGap = this.calculateRowSpan(itemEl, rowHeight, rowGap);
-            if (spanWithoutTrailingGap === undefined) {
-                this.clearItemStyles(itemEl);
-                return;
-            }
-            itemEl.style.gridRowEnd = `span ${spanWithoutTrailingGap}`;
-        });
-    }
-    /**
-     * Resolved order for layout and CSS. Order should be `undefined` for
-     * the uniform layout. When order is not set, it should be `"sequential"`
-     * for the masonry layout.
-     */
-    getOrder() {
-        const { layout } = this;
-        const order = this.order == null ? undefined : this.order;
-        if (layout === 'uniform') {
-            return undefined;
-        }
-        if (layout === 'masonry' && order === undefined) {
-            return 'sequential';
-        }
-        return order;
-    }
-    render() {
-        const { layout } = this;
-        const order = this.getOrder();
-        const theme = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '4a0a9cdd0da106ac0bd2c188a4c6612edab43b33', class: {
-                [theme]: true,
-                [`gallery-layout-${layout}`]: true,
-                [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
-            } }, index.h("slot", { key: 'dc6414ce9762ad7daaedc1583db35e0613a76e11', onSlotchange: this.onSlotChange })));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "columns": [{
-                "onColumnsOrGapChanged": 0
-            }],
-        "gap": [{
-                "onColumnsOrGapChanged": 0
-            }],
-        "layout": [{
-                "onLayoutOrOrderChanged": 0
-            }],
-        "order": [{
-                "onLayoutOrOrderChanged": 0
-            }]
-    }; }
-};
-Gallery.style = galleryCss();
-
-exports.ion_gallery = Gallery;