@ionic/core 8.8.11 → 8.8.12-dev.11781793379.156d3260

package/dist/collection/components/gallery/gallery.js

@@ -0,0 +1,679 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Host, h } from "@stencil/core";
+import { isCssVariable, isValidLengthPercentage } from "../../utils/css-value-validation";
+import { raf } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
+import { getIonTheme } from "../../global/ionic-global";
+import { DEFAULT_COLUMNS, DEFAULT_GAP } from "./gallery-constants";
+// 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';
+/**
+ * @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.
+ *
+ * @slot - One or more `ion-gallery-item` components, placed in a responsive
+ * gallery layout.
+ */
+export class Gallery {
+    constructor() {
+        // 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.
+        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;
+        }
+        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;
+        }
+        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;
+        }
+        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;
+        }
+        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 = getIonTheme(this);
+        return (h(Host, { key: '4a0a9cdd0da106ac0bd2c188a4c6612edab43b33', class: {
+                [theme]: true,
+                [`gallery-layout-${layout}`]: true,
+                [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
+            } }, h("slot", { key: 'dc6414ce9762ad7daaedc1583db35e0613a76e11', onSlotchange: this.onSlotChange })));
+    }
+    static get is() { return "ion-gallery"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gallery.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gallery.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'uniform' | 'masonry'",
+                    "resolved": "\"masonry\" | \"uniform\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual layout of the gallery. When `uniform`, rows take up the height\nof the tallest item and are spaced evenly across the gallery. Additionally,\nitems will have an aspect ratio of 1/1, forcing them to be square unless a\nheight is explicitly set. When `masonry`, items will be positioned under each\nother with only the specified gap between them."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'uniform'"
+            },
+            "order": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sequential' | 'best-fit'",
+                    "resolved": "\"best-fit\" | \"sequential\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The order in which items are positioned. Only applies when layout is\n`masonry`. When `sequential`, items are positioned in the order they are\nplaced in the DOM. When `best-fit`, items are positioned under the column\nwith the most available space. Defaults to `sequential` when layout is\n`masonry` and `order` is not explicitly set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "order"
+            },
+            "columns": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "GalleryColumns",
+                    "resolved": "GalleryBreakpoints<string | number> | number | string",
+                    "references": {
+                        "GalleryColumns": {
+                            "location": "import",
+                            "path": "./gallery-interface",
+                            "id": "src/components/gallery/gallery-interface.ts::GalleryColumns",
+                            "referenceLocation": "GalleryColumns"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of columns to display. Can be set as a number or an object of\nbreakpoint values (e.g. `{ xs: 2, sm: 3, md: 4 }`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "columns",
+                "defaultValue": "{\n  xs: 2,\n  sm: 3,\n  md: 4,\n  lg: 6,\n  xl: 8,\n  xxl: 10,\n}"
+            },
+            "gap": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "GalleryGap",
+                    "resolved": "GalleryBreakpoints<string | number> | number | string",
+                    "references": {
+                        "GalleryGap": {
+                            "location": "import",
+                            "path": "./gallery-interface",
+                            "id": "src/components/gallery/gallery-interface.ts::GalleryGap",
+                            "referenceLocation": "GalleryGap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The space between gallery items. Accepts valid CSS [length-percentage](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length-percentage)\nvalues like `16px`, `1rem`, `20%`, math functions like `calc(10px + 20%)`,\nCSS variables like `var(--app-gallery-gap)`, or numbers (treated as pixel\nvalues). Can also be set as a breakpoint map\n(e.g. `{ xs: '8px', sm: '1rem', md: '24px' }`). Does not accept\nspace-separated values or CSS keyword values like `inherit`, `auto`, etc."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'16px'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "columns",
+                "methodName": "onColumnsOrGapChanged"
+            }, {
+                "propName": "gap",
+                "methodName": "onColumnsOrGapChanged"
+            }, {
+                "propName": "layout",
+                "methodName": "onLayoutOrOrderChanged"
+            }, {
+                "propName": "order",
+                "methodName": "onLayoutOrOrderChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "load",
+                "method": "onChildLoad",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}