@ionic/core 8.8.7-dev.11778599050.191a48e3 → 8.8.7-dev.11778680417.1f9234bd

package/dist/collection/collection-manifest.json

@@ -32,6 +32,7 @@
     "components/fab-button/fab-button.js",
     "components/fab-list/fab-list.js",
     "components/footer/footer.js",
+    "components/gallery/gallery.js",
     "components/grid/grid.js",
     "components/header/header.js",
     "components/img/img.js",
@@ -143,6 +144,11 @@
         "ion-chip"
       ]
     },
+    {
+      "components": [
+        "ion-gallery"
+      ]
+    },
     {
       "components": [
         "ion-input"

package/dist/collection/components/col/col.js

@@ -5,6 +5,7 @@ import { Host, forceUpdate, h } from "@stencil/core";
 import { printIonWarning } from "../../utils/logging/index";
 import { matchBreakpoint } from "../../utils/media";
 import { getIonTheme } from "../../global/ionic-global";
+// TODO(FW-7285): Replace with global breakpoints
 // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 /**
@@ -80,12 +81,12 @@ export class Col {
         const colSize = this.getSizeClass();
         const colOrder = this.getOrderClass();
         const colOffset = this.getOffsetClass();
-        return (h(Host, { key: '4620a4eb3c94f744d6169ae9d4cc43e86a271a52', class: {
+        return (h(Host, { key: '7fc98e15bd75e9c22fe7eaf71f2f49f5d987613a', class: {
                 [theme]: true,
                 [`${colSize}`]: colSize !== undefined,
                 [`${colOrder}`]: colOrder !== undefined,
                 [`${colOffset}`]: colOffset !== undefined,
-            } }, h("slot", { key: '5c3be98deed2050634396339b7787f2770a05d35' })));
+            } }, h("slot", { key: '6ed04a2c2bcdb0400354368c568e58414a60fc39' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,12 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+export const DEFAULT_COLUMNS = {
+    xs: 2,
+    sm: 3,
+    md: 4,
+    lg: 6,
+    xl: 8,
+    xxl: 10,
+};
+export const DEFAULT_GAP = '16px';

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/gallery/gallery.css

@@ -0,0 +1,100 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+: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) {
+  align-items: start;
+  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;
+  object-fit: cover;
+  object-position: center;
+}