@ionic/core 7.5.7-dev.11701270755.14f050ad → 7.5.7-dev.11701273756.1eb73d4c

package/dist/collection/components/picker-column/picker-column.md.css

@@ -53,89 +53,97 @@
  *   }
  * }
  */
-:host {
-  -webkit-padding-start: 16px;
-  padding-inline-start: 16px;
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  height: 200px;
-  outline: none;
-  font-size: 22px;
-  scroll-snap-type: y mandatory;
-  /**
-   * Need to explicitly set overflow-x: hidden
-   * for older implementations of scroll snapping.
-   */
-  overflow-x: hidden;
-  overflow-y: scroll;
-  scrollbar-width: none;
-  text-align: center;
+.picker-col {
+  display: flex;
+  position: relative;
+  flex: 1;
+  justify-content: center;
+  height: 100%;
+  box-sizing: content-box;
+  contain: content;
 }
 
-/**
- * Hide scrollbars on Chrome and Safari
- */
-:host::-webkit-scrollbar {
-  display: none;
+.picker-opts {
+  position: relative;
+  flex: 1;
+  max-width: 100%;
 }
 
-:host .picker-item {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
+.picker-opt {
+  top: 0;
   display: block;
+  position: absolute;
   width: 100%;
-  height: 34px;
-  border: 0px;
-  outline: none;
-  background: transparent;
-  color: inherit;
-  font-family: var(--ion-font-family, inherit);
-  font-size: inherit;
-  line-height: 34px;
-  text-align: inherit;
+  border: 0;
+  text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
-  cursor: pointer;
+  contain: strict;
   overflow: hidden;
-  scroll-snap-align: center;
+  will-change: transform;
+}
+@supports (inset-inline-start: 0) {
+  .picker-opt {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .picker-opt {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .picker-opt {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .picker-opt {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .picker-opt:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
-:host .picker-item-empty,
-:host .picker-item[disabled] {
-  cursor: default;
+.picker-opt.picker-opt-disabled {
+  pointer-events: none;
 }
 
-:host .picker-item-empty,
-:host(:not([disabled])) .picker-item[disabled] {
-  scroll-snap-align: none;
+.picker-opt-disabled {
+  opacity: 0;
 }
 
-:host([disabled]) {
-  overflow-y: hidden;
+.picker-opts-left {
+  justify-content: flex-start;
 }
 
-:host .picker-item[disabled] {
-  opacity: 0.4;
+.picker-opts-right {
+  justify-content: flex-end;
 }
 
-:host(.picker-column-active) .picker-item.picker-item-active {
-  color: var(--ion-color-base);
+.picker-opt:active, .picker-opt:focus {
+  outline: none;
 }
 
-@media (any-hover: hover) {
-  :host(:focus) {
-    outline: none;
-    background: rgba(var(--ion-color-base-rgb), 0.2);
-  }
+.picker-prefix {
+  position: relative;
+  flex: 1;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.picker-suffix {
+  position: relative;
+  flex: 1;
+  text-align: start;
+  white-space: nowrap;
 }
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -191,6 +199,48 @@
  *   }
  * }
  */
-:host .picker-item-active {
-  color: var(--ion-color-base);
+.picker-col {
+  -webkit-padding-start: 8px;
+  padding-inline-start: 8px;
+  -webkit-padding-end: 8px;
+  padding-inline-end: 8px;
+  padding-top: 0;
+  padding-bottom: 0;
+  transform-style: preserve-3d;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opts {
+  top: 77px;
+  transform-style: preserve-3d;
+  color: inherit;
+  font-size: 22px;
+  line-height: 42px;
+  pointer-events: none;
+}
+
+.picker-opt {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 43px;
+  transition-timing-function: ease-out;
+  background: transparent;
+  color: inherit;
+  font-size: 22px;
+  line-height: 42px;
+  backface-visibility: hidden;
+  pointer-events: auto;
+}
+
+.picker-prefix,
+.picker-suffix,
+.picker-opt.picker-opt-selected {
+  color: var(--ion-color-primary, #3880ff);
 }

package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column-aria.spec.js

@@ -25,10 +25,10 @@ describe('picker-column', () => {
     };
     const page = await newSpecPage({
       components: [PickerColumnCmp],
-      template: () => h("ion-picker-legacy-column", { col: col }),
+      template: () => h("ion-picker-column", { col: col }),
     });
-    const firstOption = page.body.querySelector('ion-picker-legacy-column .picker-opt:nth-child(1)');
-    const secondOption = page.body.querySelector('ion-picker-legacy-column .picker-opt:nth-child(2)');
+    const firstOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(1)');
+    const secondOption = page.body.querySelector('ion-picker-column .picker-opt:nth-child(2)');
     expect(firstOption.getAttribute('aria-label')).toBe('C Sharp');
     expect(secondOption.getAttribute('aria-label')).toBe(null);
   });

package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column-dynamic.spec.js

@@ -15,9 +15,9 @@ describe('picker-column: dynamic options', () => {
     ];
     const page = await newSpecPage({
       components: [PickerColumnCmp],
-      template: () => (h("ion-picker-legacy-column", { col: { options: defaultOptions, name: 'animals' } })),
+      template: () => h("ion-picker-column", { col: { options: defaultOptions, name: 'animals' } }),
     });
-    const pickerCol = page.body.querySelector('ion-picker-legacy-column');
+    const pickerCol = page.body.querySelector('ion-picker-column');
     pickerCol.col = {
       options: [...defaultOptions, { text: 'Carrot', value: 'carrot' }],
       name: 'vegetables',

package/dist/collection/components/{picker-legacy-column → picker-column}/test/picker-column.spec.js

@@ -9,9 +9,9 @@ describe('picker-column', () => {
     const col = { cssClass: 'test-class', options: [], name: 'col' };
     const page = await newSpecPage({
       components: [PickerColumnCmp],
-      template: () => h("ion-picker-legacy-column", { col: col }),
+      template: () => h("ion-picker-column", { col: col }),
     });
-    const pickerCol = page.body.querySelector('ion-picker-legacy-column');
+    const pickerCol = page.body.querySelector('ion-picker-column');
     expect(pickerCol.classList.contains('test-class')).toBe(true);
   });
 });

package/dist/collection/components/{picker-legacy-column → picker-column}/test/standalone/picker-column.e2e.js

@@ -6,11 +6,11 @@ import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('picker-column'), () => {
     test.beforeEach(async ({ page }) => {
-      await page.goto(`/src/components/picker-legacy-column/test/standalone`, config);
+      await page.goto(`/src/components/picker-column/test/standalone`, config);
     });
     test('should present picker without ion-app', async ({ page }) => {
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
-      const picker = page.locator('ion-picker-legacy');
+      const picker = page.locator('ion-picker');
       await page.click('#single-column-button');
       await ionPickerDidPresent.next();
       await expect(picker).toBeVisible();
@@ -22,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
       const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
       const ionPickerColChangeEvent = await page.spyOnEvent('ionPickerColChange');
-      const column = page.locator('ion-picker-legacy-column');
+      const column = page.locator('ion-picker-column');
       const secondOption = column.locator('.picker-opt').nth(1);
       await page.click('#single-column-button');
       await ionPickerDidPresent.next();

package/dist/collection/components/picker-column-internal/picker-column-internal.ios.css

@@ -0,0 +1,138 @@
+/**
+ * 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 {
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: 200px;
+  outline: none;
+  font-size: 22px;
+  scroll-snap-type: y mandatory;
+  /**
+   * Need to explicitly set overflow-x: hidden
+   * for older implementations of scroll snapping.
+   */
+  overflow-x: hidden;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  text-align: center;
+}
+
+/**
+ * Hide scrollbars on Chrome and Safari
+ */
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+:host .picker-item {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  display: block;
+  width: 100%;
+  height: 34px;
+  border: 0px;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: var(--ion-font-family, inherit);
+  font-size: inherit;
+  line-height: 34px;
+  text-align: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  overflow: hidden;
+  scroll-snap-align: center;
+}
+
+:host .picker-item-empty,
+:host .picker-item[disabled] {
+  cursor: default;
+}
+
+:host .picker-item-empty,
+:host(:not([disabled])) .picker-item[disabled] {
+  scroll-snap-align: none;
+}
+
+:host([disabled]) {
+  overflow-y: hidden;
+}
+
+:host .picker-item[disabled] {
+  opacity: 0.4;
+}
+
+:host(.picker-column-active) .picker-item.picker-item-active {
+  color: var(--ion-color-base);
+}
+
+@media (any-hover: hover) {
+  :host(:focus) {
+    outline: none;
+    background: rgba(var(--ion-color-base-rgb), 0.2);
+  }
+}