@ionic/core 8.8.6-dev.11777668103.132817bd → 8.8.6-dev.11777928681.1e4919af

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

@@ -1,439 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { Host, h } from "@stencil/core";
-import { printIonWarning } from "../../utils/logging/index";
-import { getIonTheme } from "../../global/ionic-global";
-// TODO(FW-7285): Replace with global breakpoints
-const BREAKPOINTS = {
-    xs: 0,
-    sm: 576,
-    md: 768,
-    lg: 992,
-    xl: 1200,
-    xxl: 1400,
-};
-const DEFAULT_COLUMNS = {
-    xs: 2,
-    sm: 3,
-    md: 4,
-    lg: 6,
-    xl: 8,
-    xxl: 10,
-};
-const BREAKPOINT_ORDER = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
-/**
- * @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 - Content is placed in a responsive gallery layout.
- */
-export class Gallery {
-    constructor() {
-        // Keep track of whether we've warned about invalid columns to avoid
-        // duplicate warnings on screen resize.
-        this.hasWarnedInvalidColumns = 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 order in which items are positioned. Only applies when layout is
-         * `masonry`. When `sequential`, items are positioned in the order they are
-         * placed in the DOM. When `best-fit`, items are positioned under the column
-         * with the most available space.
-         */
-        this.order = 'sequential';
-        /**
-         * 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;
-        /**
-         * Listen for the slotchange event on the slot.
-         * When the layout is `masonry`, this listener is used to schedule a resize
-         * of the masonry grid when the slot changes. This is useful for when items
-         * are added or removed from the gallery.
-         */
-        this.onSlotChange = () => {
-            this.scheduleMasonryResize();
-        };
-        /**
-         * Measure the host and children, then compute masonry placement.
-         */
-        this.resizeMasonryGrid = () => {
-            this.masonryRaf = undefined;
-            if (this.layout !== 'masonry') {
-                this.clearMasonryStyles();
-                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 columnsStr = styles.getPropertyValue('--internal-gallery-columns');
-            // Fallback to 2 columns for masonry calculations when the resolved
-            // --internal-gallery-columns CSS value is missing or unparsable.
-            const columns = parseInt(columnsStr, 10) || 2;
-            const items = this.getItems();
-            this.layoutMasonry(items, rowHeight, rowGap, columns);
-        };
-    }
-    layoutChanged() {
-        this.updateResponsiveColumns(true);
-        this.scheduleMasonryResize();
-    }
-    componentDidLoad() {
-        this.updateResponsiveColumns(true);
-        this.resizeObserver = new ResizeObserver(() => {
-            this.updateResponsiveColumns();
-            this.scheduleMasonryResize();
-        });
-        this.resizeObserver.observe(this.el);
-        this.scheduleMasonryResize();
-    }
-    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;
-    }
-    /**
-     * 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 !== null && this.el.contains(target)) {
-            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 columns value 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;
-    }
-    /**
-     * Check if the value is a breakpoint columns object.
-     */
-    isBreakpointColumns(value) {
-        return typeof value === 'object' && value !== null && !Array.isArray(value);
-    }
-    /**
-     * Check if the breakpoint columns object has any invalid values.
-     * Returns true if any value is undefined or not a positive integer.
-     */
-    hasInvalidBreakpointColumns(breakpointColumns) {
-        for (const breakpoint of BREAKPOINT_ORDER) {
-            const value = breakpointColumns[breakpoint];
-            if (value !== undefined && this.sanitizeColumns(value) === undefined) {
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * Get the columns from a responsive breakpoint map.
-     * Returns the columns for the last matching breakpoint.
-     */
-    getColumnsFromBreakpointColumns(width, breakpointColumns) {
-        let columns;
-        for (const bp of BREAKPOINT_ORDER) {
-            const customValue = breakpointColumns[bp];
-            const parsedCustom = this.sanitizeColumns(customValue);
-            const parsedDefault = this.sanitizeColumns(DEFAULT_COLUMNS[bp]);
-            // Use valid custom values when present; otherwise fall back to defaults per breakpoint.
-            const resolved = customValue === undefined || parsedCustom === undefined ? parsedDefault : parsedCustom;
-            if (resolved !== undefined && width >= BREAKPOINTS[bp]) {
-                columns = resolved;
-            }
-        }
-        return columns;
-    }
-    /**
-     * Warn about an invalid columns value when it is set to a non-positive
-     * integer or a breakpoint map object with invalid values.
-     */
-    warnInvalidColumns(columns) {
-        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;
-    }
-    /**
-     * 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, hasWarnedInvalidColumns } = this;
-        const isBreakpointColumns = this.isBreakpointColumns(columns);
-        const hasInvalidBreakpointColumns = isBreakpointColumns && this.hasInvalidBreakpointColumns(columns);
-        const sanitizedColumns = isBreakpointColumns
-            ? this.getColumnsFromBreakpointColumns(width, columns)
-            : this.sanitizeColumns(columns);
-        if (!hasWarnedInvalidColumns &&
-            (hasInvalidBreakpointColumns || (!isBreakpointColumns && sanitizedColumns === undefined))) {
-            this.warnInvalidColumns(columns);
-        }
-        if (sanitizedColumns !== undefined) {
-            return sanitizedColumns;
-        }
-        return this.getColumnsFromBreakpointColumns(width, DEFAULT_COLUMNS);
-    }
-    /**
-     * Update the responsive columns for the gallery.
-     * This is used to update the columns when the component width changes.
-     */
-    updateResponsiveColumns(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}`);
-    }
-    /**
-     * Return all directly slotted HTMLElement children of the gallery.
-     */
-    getItems() {
-        return Array.from(this.el.children).filter((child) => child instanceof HTMLElement);
-    }
-    /**
-     * 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));
-    }
-    /**
-     * Convert a rendered item height to the number of grid rows it should span.
-     * Returns undefined for images that are not fully loaded yet.
-     */
-    calculateRowSpan(itemEl, rowHeight, rowGap) {
-        if (itemEl instanceof HTMLImageElement && (!itemEl.complete || itemEl.naturalHeight === 0)) {
-            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;
-        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}`;
-        });
-    }
-    render() {
-        const { layout, order } = this;
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '77cd21eada2c24092cc551d4e647582c820f05d9', class: {
-                [theme]: true,
-                [`gallery-layout-${layout}`]: true,
-                [`gallery-order-${order}`]: layout === 'masonry',
-            } }, h("slot", { key: 'fa311652848a526a7629476afb963bf3e68455c4', 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": true,
-                "attribute": "layout",
-                "defaultValue": "'uniform'"
-            },
-            "order": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'sequential' | 'best-fit'",
-                    "resolved": "\"best-fit\" | \"sequential\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "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."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "order",
-                "defaultValue": "'sequential'"
-            },
-            "columns": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "GalleryColumns",
-                    "resolved": "GalleryBreakpointColumns | 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": "DEFAULT_COLUMNS"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "layout",
-                "methodName": "layoutChanged"
-            }, {
-                "propName": "order",
-                "methodName": "layoutChanged"
-            }, {
-                "propName": "columns",
-                "methodName": "layoutChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "load",
-                "method": "onChildLoad",
-                "target": undefined,
-                "capture": true,
-                "passive": false
-            }];
-    }
-}

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

@@ -1,100 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-export const sharedStyles = `
-  ion-gallery {
-    width: 343px;
-  }
-
-  div {
-    color: #fff;
-    height: 150px;
-  }
-
-  div:nth-child(1) {
-    background: #ff6b6b;
-  }
-
-  div:nth-child(2) {
-    background: #4ecdc4;
-  }
-
-  div:nth-child(3) {
-    background: #ffe66d;
-    color: #333;
-  }
-
-  div:nth-child(4) {
-    background: #5f27cd;
-  }
-
-  div:nth-child(5) {
-    background: #7f8c8d;
-  }
-
-  div:nth-child(6) {
-    background: #ff9f43;
-  }
-
-  div:nth-child(7) {
-    background: #ff3f34;
-  }
-
-  div:nth-child(8) {
-    background: #2ecc71;
-  }
-
-  div:nth-child(9) {
-    background: #34495e;
-  }
-
-  div:nth-child(10) {
-    background: #1abc9c;
-  }
-
-  div:nth-child(11) {
-    background: #e67e22;
-  }
-
-  div:nth-child(12) {
-    background: #9b59b6;
-  }
-`;
-export const numberToWords = (value) => {
-    const ones = [
-        'zero',
-        'one',
-        'two',
-        'three',
-        'four',
-        'five',
-        'six',
-        'seven',
-        'eight',
-        'nine',
-        'ten',
-        'eleven',
-        'twelve',
-        'thirteen',
-        'fourteen',
-        'fifteen',
-        'sixteen',
-        'seventeen',
-        'eighteen',
-        'nineteen',
-    ];
-    const tens = ['', '', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];
-    if (!Number.isInteger(value) || value < 0 || value >= 100) {
-        return `${value}`;
-    }
-    let word = '';
-    if (value < 20) {
-        word = ones[value];
-    }
-    else {
-        const tensValue = Math.floor(value / 10);
-        const onesValue = value % 10;
-        word = onesValue === 0 ? tens[tensValue] : `${tens[tensValue]}-${ones[onesValue]}`;
-    }
-    return word.charAt(0).toUpperCase() + word.slice(1);
-};