@ionic/core 8.8.9-dev.11780414486.1df2bd72 → 8.8.9-dev.11780493937.17fe092d

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

@@ -0,0 +1,510 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+'use strict';
+
+var index = require('./index-CzcLEdQ5.js');
+var helpers = require('./helpers-DJYxKN5U.js');
+var ionicGlobal = require('./ionic-global-BW5tRzrz.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;
+/**
+ * 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);
+}
+
+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-uniform) ::slotted(*){aspect-ratio:1/1}: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:2px}:host(.gallery-layout-masonry) ::slotted(*){display:block;min-height:unset;margin-bottom:var(--internal-gallery-gap, 16px)}::slotted(*){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%}::slotted(img){display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}`;
+
+// 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'];
+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;
+        /**
+         * 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%)`,
+         * 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 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 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();
+        // 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();
+        });
+    }
+    componentDidLoad() {
+        this.updateResponsiveStyles(true);
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateResponsiveStyles();
+            this.scheduleMasonryResize();
+        });
+        this.resizeObserver.observe(this.el);
+        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;
+    }
+    /**
+     * 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, string, 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.
+     */
+    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;
+        }
+        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, 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 all directly slotted children of the gallery that can be grid items
+     * with inline placement styles (HTML elements and SVG elements).
+     */
+    getItems() {
+        return Array.from(this.el.children).filter((child) => { var _a; return typeof ((_a = child.style) === null || _a === void 0 ? void 0 : _a.setProperty) === 'function'; });
+    }
+    /**
+     * 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.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: '1bf2973d22835c0dbddf3214b602f8c08b95e421', class: {
+                [theme]: true,
+                [`gallery-layout-${layout}`]: true,
+                [`gallery-order-${order}`]: layout === 'masonry' && order !== undefined,
+            } }, index.h("slot", { key: '0dea31f609f6afdb1d73ecb2d873909ffe49203f', 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;

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

@@ -3,9 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-Ct7gcRif.js');
-var helpers = require('./helpers-Cv23MFHM.js');
-var ionicGlobal = require('./ionic-global-B-cA6LkY.js');
+var index = require('./index-CzcLEdQ5.js');
+var helpers = require('./helpers-DJYxKN5U.js');
+var ionicGlobal = require('./ionic-global-BW5tRzrz.js');
+require('./focus-visible-BIj-I3-C.js');
 
 const imgCss = () => `:host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}`;
 
@@ -82,7 +83,10 @@ const Img = class {
     render() {
         const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
         const { draggable } = inheritedAttributes;
-        return (index.h(index.Host, { key: '9bfaa659b0680189fd29f3acb2fdce7f70be6060', class: ionicGlobal.getIonMode(this) }, index.h("img", { key: 'd484beae0d5cbe0406958bfad40cdd6c05625340', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+        const theme = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: '91de170493b31d6260e975b440beceb6906b6d5a', class: {
+                [theme]: true,
+            } }, index.h("img", { key: 'ac1f41afbece34a3e38e656733f3e55cce385b4c', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {