@ionic/core 8.0.0-dev.11712072527.1dd97c66 → 8.0.0-dev.11712932867.11504809

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

@@ -7,7 +7,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-af6d0fbb.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
+const ionicGlobal = require('./ionic-global-2734c454.js');
+
+const chipIonicCss = ":host{--background:var(--ionic-color-neutral-10, #f5f5f5);--border-color:transparent;--border-radius:var(--ionic-border-radius-rounded-small, 4px);--color:var(--ionic-color-neutral-900, #05080f);--focus-ring-color:#9ec4fd;--focus-ring-width:var(--ionic-border-size-medium, 2px);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-padding-start:var(--ionic-space-xxs, 6px);padding-inline-start:var(--ionic-space-xxs, 6px);-webkit-padding-end:var(--ionic-space-xxs, 6px);padding-inline-end:var(--ionic-space-xxs, 6px);padding-top:var(--ionic-space-xs, 8px);padding-bottom:var(--ionic-space-xs, 8px);border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--ionic-space-xxxs, 4px);min-height:32px;border-width:var(--ionic-border-size-small, 1px);border-style:solid;border-color:var(--border-color);background:var(--background);color:var(--color);font-family:var(--ionic-font-family, \"Inter\", sans-serif);font-size:var(--ionic-font-size-m, 14px);font-weight:var(--ionic-font-weight-medium, 500);line-height:var(--ionic-font-line-height-full, 100%);cursor:pointer;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle}:host(.chip-outline){--background:transparent;border-color:var(--ionic-color-neutral-100, #dadada)}:host(.ion-focused){outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-width)}@media (any-hover: hover){:host(:hover){--background:rgba(5, 8, 15, 0.16)}}:host(.chip-disabled){opacity:0.6;pointer-events:none}:host(.chip-round){--border-radius:var(--ionic-border-radius-rounded-large, 16px)}:host(.chip-rectangular){--border-radius:var(--ionic-border-radius-square, 0)}::slotted(ion-icon){font-size:var(--ionic-font-size-l, 16px)}";
+const IonChipIonicStyle0 = chipIonicCss;
 
 const chipIosCss = ":host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);border-radius:16px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:4px;margin-inline-end:4px;margin-top:4px;margin-bottom:4px;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px;display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-align:center;align-items:center;min-height:32px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);cursor:pointer;overflow:hidden;vertical-align:middle;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.chip-disabled){cursor:default;opacity:0.4;pointer-events:none}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.08);color:var(--ion-color-shade)}:host(.ion-color:focus){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.ion-color.ion-activated){background:rgba(var(--ion-color-base-rgb), 0.16)}:host(.chip-outline){border-width:1px;border-style:solid}:host(.chip-outline){border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);background:transparent}:host(.chip-outline.ion-color){border-color:rgba(var(--ion-color-base-rgb), 0.32)}:host(.chip-outline:not(.ion-color):focus){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}:host(.chip-outline.ion-activated:not(.ion-color)){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08)}::slotted(ion-icon){font-size:1.4285714286em}:host(:not(.ion-color)) ::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54)}::slotted(ion-icon:first-child){-webkit-margin-start:-4px;margin-inline-start:-4px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-icon:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-4px;margin-inline-end:-4px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar){-ms-flex-negative:0;flex-shrink:0;width:1.7142857143em;height:1.7142857143em}::slotted(ion-avatar:first-child){-webkit-margin-start:-8px;margin-inline-start:-8px;-webkit-margin-end:8px;margin-inline-end:8px;margin-top:-4px;margin-bottom:-4px}::slotted(ion-avatar:last-child){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:-8px;margin-inline-end:-8px;margin-top:-4px;margin-bottom:-4px}:host(:focus){outline:none}:host(:focus){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-activated){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2)}@media (any-hover: hover){:host(:hover){--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16)}:host(.ion-color:hover){background:rgba(var(--ion-color-base-rgb), 0.12)}:host(.chip-outline:not(.ion-color):hover){background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04)}}:host{font-size:clamp(13px, 0.875rem, 22px)}";
 const IonChipIosStyle0 = chipIosCss;
@@ -21,18 +24,24 @@ const Chip = class {
         this.color = undefined;
         this.outline = false;
         this.disabled = false;
+        this.shape = undefined;
     }
     render() {
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '6c6497d9397407443784f1b79df0b58d6d24eed2', "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
-                [mode]: true,
+        const { shape } = this;
+        const theme$1 = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: '0bc44676ec03a18e21231b70f5f30bb27c6e54de', "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
+                [theme$1]: true,
+                // TODO(FW-6120): remove the theme==='ionic' when we add support for the `ios` and `md` modes.
+                [`chip-${shape}`]: theme$1 === 'ionic' && shape !== undefined,
                 'chip-outline': this.outline,
                 'chip-disabled': this.disabled,
                 'ion-activatable': true,
-            }) }, index.h("slot", { key: 'a4d431e3b066420890fcaa30bbc99f1240dff11c' }), mode === 'md' && index.h("ion-ripple-effect", null)));
+                'ion-focusable': !this.disabled,
+            }) }, index.h("slot", { key: 'f83ce18088eea6adcfd6641b9d9e4d12dee079d1' }), theme$1 === 'md' && index.h("ion-ripple-effect", null)));
     }
 };
 Chip.style = {
+    ionic: IonChipIonicStyle0,
     ios: IonChipIosStyle0,
     md: IonChipMdStyle0
 };

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

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-af6d0fbb.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
+const ionicGlobal = require('./ionic-global-2734c454.js');
 
 const SIZE_TO_MEDIA = {
     xs: '(min-width: 0px)',
@@ -139,10 +139,10 @@ const Col = class {
     }
     render() {
         const isRTL = document.dir === 'rtl';
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'af31133e071846ac6609a46eabe59cc481dafdb7', class: {
-                [mode]: true,
-            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: 'd11a95925819a0e2dc69966b7893f0d3efc62eb9' })));
+        const theme = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: '10ac8290295f8b717c4155b1bf4fa07fe11f090d', class: {
+                [theme]: true,
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, index.h("slot", { key: '6f86eafa8d585815f19abcf52678ab6e8cebb8f5' })));
     }
 };
 Col.style = IonColStyle0;
@@ -156,11 +156,11 @@ const Grid = class {
         this.fixed = false;
     }
     render() {
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: 'd240212314811650765ac22936da13b0a92680b8', class: {
-                [mode]: true,
+        const theme = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: '51f60a0f44ddff2e0338b14e7959bd21037db493', class: {
+                [theme]: true,
                 'grid-fixed': this.fixed,
-            } }, index.h("slot", { key: 'd0b55fd347db2b2f92805975c61da093c762c26d' })));
+            } }, index.h("slot", { key: '8ace683b1ca73f52bd1b9b3cd6f5a590cb2759fa' })));
     }
 };
 Grid.style = IonGridStyle0;
@@ -173,7 +173,10 @@ const Row = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e52c499804f7bebc1c4ab8fb69ef1b452eae58c1', class: ionicGlobal.getIonMode(this) }, index.h("slot", { key: '7808e8156601912e0192fe0b74bdedda2c359e1c' })));
+        const theme = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: 'c4de0aeb87e735a666ba6c0ae74a088a9ff15490', class: {
+                [theme]: true,
+            } }, index.h("slot", { key: '638950493658641031875f45c21ee0e66fe6fcb7' })));
     }
 };
 Row.style = IonRowStyle0;

package/dist/cjs/ion-datetime-button.cjs.entry.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-af6d0fbb.js');
 const helpers = require('./helpers-afaa9001.js');
-const index$1 = require('./index-5915f9b3.js');
+const ionicGlobal = require('./ionic-global-2734c454.js');
 const theme = require('./theme-d1c573d2.js');
-const ionicGlobal = require('./ionic-global-1adf9bc4.js');
-const data = require('./data-21dc0f81.js');
+const data = require('./data-99329b16.js');
+
+const ionicDatetimeButtonMdCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:6px;padding-bottom:6px}";
+const IonDatetimeButtonIonicStyle0 = ionicDatetimeButtonMdCss;
 
 const datetimeButtonIosCss = ":host{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host button{border-radius:8px;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:0px;margin-bottom:0px;position:relative;-webkit-transition:150ms color ease-in-out;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, var(--ion-background-color-step-300, #edeef0));color:var(--ion-text-color, #000);font-family:inherit;font-size:1rem;cursor:pointer;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}:host button{-webkit-padding-start:13px;padding-inline-start:13px;-webkit-padding-end:13px;padding-inline-end:13px;padding-top:7px;padding-bottom:7px}:host button.ion-activated{color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}";
 const IonDatetimeButtonIosStyle0 = datetimeButtonIosCss;
@@ -90,7 +92,7 @@ const DatetimeButton = class {
                                 headerText = titleSelectedDatesFormatter(parsedValues);
                             }
                             catch (e) {
-                                index$1.printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
+                                ionicGlobal.printIonError('Exception in provided `titleSelectedDatesFormatter`: ', e);
                             }
                         }
                         this.dateText = headerText;
@@ -250,12 +252,12 @@ const DatetimeButton = class {
     async componentWillLoad() {
         const { datetime } = this;
         if (!datetime) {
-            index$1.printIonError('An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.', this.el);
+            ionicGlobal.printIonError('An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.', this.el);
             return;
         }
         const datetimeEl = (this.datetimeEl = document.getElementById(datetime));
         if (!datetimeEl) {
-            index$1.printIonError(`No ion-datetime instance found for ID '${datetime}'.`, this.el);
+            ionicGlobal.printIonError(`No ion-datetime instance found for ID '${datetime}'.`, this.el);
             return;
         }
         /**
@@ -263,7 +265,7 @@ const DatetimeButton = class {
          * if a non-datetime element was provided.
          */
         if (datetimeEl.tagName !== 'ION-DATETIME') {
-            index$1.printIonError(`Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`, datetimeEl);
+            ionicGlobal.printIonError(`Expected an ion-datetime instance for ID '${datetime}' but received '${datetimeEl.tagName.toLowerCase()}' instead.`, datetimeEl);
             return;
         }
         /**
@@ -337,16 +339,17 @@ const DatetimeButton = class {
     }
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
-        const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '49854fc8a4b9875194c1537d0b3b59459e39606f', class: theme.createColorClasses(color, {
-                [mode]: true,
+        const theme$1 = ionicGlobal.getIonTheme(this);
+        return (index.h(index.Host, { key: '537be5fa301c4a9c9aab52d115531552430c8ce1', class: theme.createColorClasses(color, {
+                [theme$1]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (index.h("button", { class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, index.h("slot", { name: "date-target" }, dateText), mode === 'md' && index.h("ion-ripple-effect", null))), timeText && (index.h("button", { class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, index.h("slot", { name: "time-target" }, timeText), mode === 'md' && index.h("ion-ripple-effect", null)))));
+            }) }, dateText && (index.h("button", { class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, index.h("slot", { name: "date-target" }, dateText), theme$1 === 'md' && index.h("ion-ripple-effect", null))), timeText && (index.h("button", { class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, index.h("slot", { name: "time-target" }, timeText), theme$1 === 'md' && index.h("ion-ripple-effect", null)))));
     }
     get el() { return index.getElement(this); }
 };
 DatetimeButton.style = {
+    ionic: IonDatetimeButtonIonicStyle0,
     ios: IonDatetimeButtonIosStyle0,
     md: IonDatetimeButtonMdStyle0
 };