@ionic/core 8.7.4-dev.11757059097.1bf52e75 → 8.7.4-dev.11757091109.1d47c1bd
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ion-card-content.js +2 -3
- package/components/ion-col.js +48 -47
- package/components/ion-datetime.js +3 -22
- package/components/ion-input-otp.js +4 -5
- package/components/ion-input.js +4 -5
- package/components/ion-row.js +1 -1
- package/components/ion-textarea.js +4 -5
- package/dist/cjs/ion-card_5.cjs.entry.js +1 -1
- package/dist/cjs/ion-col_3.cjs.entry.js +42 -48
- package/dist/cjs/ion-datetime_3.cjs.entry.js +3 -22
- package/dist/cjs/ion-input-otp.cjs.entry.js +3 -3
- package/dist/cjs/ion-input.cjs.entry.js +3 -3
- package/dist/cjs/ion-textarea.cjs.entry.js +3 -3
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/card-content/card-content.js +1 -2
- package/dist/collection/components/col/col.css +171 -4
- package/dist/collection/components/col/col.js +203 -58
- package/dist/collection/components/datetime/datetime.js +3 -22
- package/dist/collection/components/input/input.js +1 -1
- package/dist/collection/components/input-otp/input-otp.js +1 -1
- package/dist/collection/components/row/row.css +2 -0
- package/dist/collection/components/textarea/textarea.js +1 -1
- package/dist/docs.json +250 -17
- package/dist/esm/ion-card_5.entry.js +1 -1
- package/dist/esm/ion-col_3.entry.js +43 -49
- package/dist/esm/ion-datetime_3.entry.js +3 -22
- package/dist/esm/ion-input-otp.entry.js +3 -3
- package/dist/esm/ion-input.entry.js +3 -3
- package/dist/esm/ion-textarea.entry.js +3 -3
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/html.html-data.json +24 -0
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-0edc2fcf.entry.js +4 -0
- package/dist/ionic/p-417569b5.entry.js +4 -0
- package/dist/ionic/p-80faabb9.entry.js +4 -0
- package/dist/ionic/p-9af1c2e0.entry.js +4 -0
- package/dist/ionic/{p-19bda0d1.entry.js → p-b8c602ec.entry.js} +1 -1
- package/dist/ionic/p-dc2f441a.entry.js +4 -0
- package/dist/types/components/col/col.d.ts +48 -5
- package/dist/types/components/datetime/datetime.d.ts +0 -2
- package/dist/types/components.d.ts +72 -0
- package/hydrate/index.js +105 -124
- package/hydrate/index.mjs +105 -124
- package/package.json +1 -1
- package/dist/ionic/p-1224cc8f.entry.js +0 -4
- package/dist/ionic/p-3f780ab8.entry.js +0 -4
- package/dist/ionic/p-6935c9f1.entry.js +0 -4
- package/dist/ionic/p-d38b7cdc.entry.js +0 -4
- package/dist/ionic/p-dc66e8cc.entry.js +0 -4
|
@@ -14,11 +14,10 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
|
|
|
14
14
|
constructor() {
|
|
15
15
|
super();
|
|
16
16
|
this.__registerHost();
|
|
17
|
-
this.__attachShadow();
|
|
18
17
|
}
|
|
19
18
|
render() {
|
|
20
19
|
const theme = getIonTheme(this);
|
|
21
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: '9e0a23306b43bafffd82900a4da7e020fe45c04f', class: {
|
|
22
21
|
[theme]: true,
|
|
23
22
|
// Used internally for styling
|
|
24
23
|
[`card-content-${theme}`]: true,
|
|
@@ -29,7 +28,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
|
|
|
29
28
|
ios: cardContentIosCss,
|
|
30
29
|
md: cardContentMdCss
|
|
31
30
|
}; }
|
|
32
|
-
}, [
|
|
31
|
+
}, [288, "ion-card-content"]);
|
|
33
32
|
function defineCustomElement$1() {
|
|
34
33
|
if (typeof customElements === "undefined") {
|
|
35
34
|
return;
|
package/components/ion-col.js
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
|
|
5
|
+
import { p as printIonWarning } from './index4.js';
|
|
5
6
|
import { b as getIonTheme } from './ionic-global.js';
|
|
6
7
|
|
|
7
8
|
const SIZE_TO_MEDIA = {
|
|
@@ -25,11 +26,9 @@ const matchBreakpoint = (breakpoint) => {
|
|
|
25
26
|
return false;
|
|
26
27
|
};
|
|
27
28
|
|
|
28
|
-
const colCss = ":host{-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex
|
|
29
|
+
const colCss = ":host{--col-unit-size:calc(\n (100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap, 0px)) / var(--ion-grid-columns, 12)\n );-webkit-padding-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-ms-flex:1;flex:1;min-height:1px}@media (min-width: 576px){:host{-webkit-padding-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px))}}@media (min-width: 768px){:host{-webkit-padding-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px))}}@media (min-width: 992px){:host{-webkit-padding-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px))}}@media (min-width: 1200px){:host{-webkit-padding-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-start:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));-webkit-padding-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-inline-end:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-top:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));padding-bottom:var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px))}}:host(.ion-grid-col-auto){-ms-flex:0 0 auto;flex:0 0 auto}:host([class^=ion-grid-col--]),:host([class*=\" ion-grid-col--\"]){-ms-flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px));flex:0 0 calc(var(--ion-grid-col-span) * var(--col-unit-size) + (var(--ion-grid-col-span) - 1) * var(--ion-grid-gap, 0px))}:host([class^=ion-grid-offset-col--]),:host([class*=\" ion-grid-offset-col--\"]){--margin-calc:calc(\n var(--col-unit-size) * var(--ion-grid-col-margin) + (var(--ion-grid-gap, 0px) * var(--ion-grid-col-margin))\n );-webkit-margin-start:var(--margin-calc);margin-inline-start:var(--margin-calc);-webkit-margin-end:0;margin-inline-end:0}:host(.ion-grid-col--1){--ion-grid-col-span:1}:host(.ion-grid-order-col--1){-ms-flex-order:1;order:1}:host(.ion-grid-offset-col--1){--ion-grid-col-margin:1}:host(.ion-grid-col--2){--ion-grid-col-span:2}:host(.ion-grid-order-col--2){-ms-flex-order:2;order:2}:host(.ion-grid-offset-col--2){--ion-grid-col-margin:2}:host(.ion-grid-col--3){--ion-grid-col-span:3}:host(.ion-grid-order-col--3){-ms-flex-order:3;order:3}:host(.ion-grid-offset-col--3){--ion-grid-col-margin:3}:host(.ion-grid-col--4){--ion-grid-col-span:4}:host(.ion-grid-order-col--4){-ms-flex-order:4;order:4}:host(.ion-grid-offset-col--4){--ion-grid-col-margin:4}:host(.ion-grid-col--5){--ion-grid-col-span:5}:host(.ion-grid-order-col--5){-ms-flex-order:5;order:5}:host(.ion-grid-offset-col--5){--ion-grid-col-margin:5}:host(.ion-grid-col--6){--ion-grid-col-span:6}:host(.ion-grid-order-col--6){-ms-flex-order:6;order:6}:host(.ion-grid-offset-col--6){--ion-grid-col-margin:6}:host(.ion-grid-col--7){--ion-grid-col-span:7}:host(.ion-grid-order-col--7){-ms-flex-order:7;order:7}:host(.ion-grid-offset-col--7){--ion-grid-col-margin:7}:host(.ion-grid-col--8){--ion-grid-col-span:8}:host(.ion-grid-order-col--8){-ms-flex-order:8;order:8}:host(.ion-grid-offset-col--8){--ion-grid-col-margin:8}:host(.ion-grid-col--9){--ion-grid-col-span:9}:host(.ion-grid-order-col--9){-ms-flex-order:9;order:9}:host(.ion-grid-offset-col--9){--ion-grid-col-margin:9}:host(.ion-grid-col--10){--ion-grid-col-span:10}:host(.ion-grid-order-col--10){-ms-flex-order:10;order:10}:host(.ion-grid-offset-col--10){--ion-grid-col-margin:10}:host(.ion-grid-col--11){--ion-grid-col-span:11}:host(.ion-grid-order-col--11){-ms-flex-order:11;order:11}:host(.ion-grid-offset-col--11){--ion-grid-col-margin:11}:host(.ion-grid-col--12){--ion-grid-col-span:12}:host(.ion-grid-order-col--12){-ms-flex-order:12;order:12}:host(.ion-grid-offset-col--12){--ion-grid-col-margin:12}";
|
|
29
30
|
|
|
30
|
-
const win = typeof window !== 'undefined' ? window : undefined;
|
|
31
31
|
// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
|
|
32
|
-
const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
|
|
33
32
|
const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
|
|
34
33
|
const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
|
|
35
34
|
constructor() {
|
|
@@ -57,66 +56,62 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
|
|
|
57
56
|
// increase in size and we want to return the largest match
|
|
58
57
|
return matched;
|
|
59
58
|
}
|
|
60
|
-
|
|
61
|
-
const
|
|
59
|
+
getStyleClass(property, className, acceptsAuto = false) {
|
|
60
|
+
const colPropertyValue = this.getColumns(property);
|
|
62
61
|
// If size wasn't set for any breakpoint
|
|
63
62
|
// or if the user set the size without a value
|
|
64
63
|
// it means we need to stick with the default and return
|
|
65
64
|
// e.g. <ion-col size-md>
|
|
66
|
-
if (!
|
|
65
|
+
if (!colPropertyValue || colPropertyValue === '') {
|
|
67
66
|
return;
|
|
68
67
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
? `calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
|
|
75
|
-
: // Convert the columns to a percentage by dividing by the total number
|
|
76
|
-
// of columns (12) and then multiplying by 100
|
|
77
|
-
(columns / 12) * 100 + '%';
|
|
78
|
-
return {
|
|
79
|
-
flex: `0 0 ${colSize}`,
|
|
80
|
-
width: `${colSize}`,
|
|
81
|
-
'max-width': `${colSize}`,
|
|
82
|
-
};
|
|
83
|
-
}
|
|
84
|
-
// Called by push, pull, and offset since they use the same calculations
|
|
85
|
-
calculatePosition(property, modifier) {
|
|
86
|
-
const columns = this.getColumns(property);
|
|
87
|
-
if (!columns) {
|
|
68
|
+
if (acceptsAuto && colPropertyValue === 'auto') {
|
|
69
|
+
return 'ion-grid-col-auto';
|
|
70
|
+
}
|
|
71
|
+
const valueNumber = parseInt(colPropertyValue);
|
|
72
|
+
if (isNaN(valueNumber)) {
|
|
88
73
|
return;
|
|
89
74
|
}
|
|
90
|
-
|
|
91
|
-
// 12 we can position the column, else default to auto
|
|
92
|
-
const amount = SUPPORTS_VARS
|
|
93
|
-
? // If CSS supports variables we should use the grid columns var
|
|
94
|
-
`calc(calc(${columns} / var(--ion-grid-columns, 12)) * 100%)`
|
|
95
|
-
: // Convert the columns to a percentage by dividing by the total number
|
|
96
|
-
// of columns (12) and then multiplying by 100
|
|
97
|
-
columns > 0 && columns < 12
|
|
98
|
-
? (columns / 12) * 100 + '%'
|
|
99
|
-
: 'auto';
|
|
100
|
-
return {
|
|
101
|
-
[modifier]: amount,
|
|
102
|
-
};
|
|
75
|
+
return `${className}-col--${valueNumber}`;
|
|
103
76
|
}
|
|
104
|
-
|
|
105
|
-
return this.
|
|
77
|
+
getSizeClass() {
|
|
78
|
+
return this.getStyleClass('size', 'ion-grid', true);
|
|
106
79
|
}
|
|
107
|
-
|
|
108
|
-
return this.
|
|
80
|
+
getOrderClass() {
|
|
81
|
+
return this.getStyleClass('order', 'ion-grid-order');
|
|
109
82
|
}
|
|
110
|
-
|
|
111
|
-
return this.
|
|
83
|
+
getOffsetClass() {
|
|
84
|
+
return this.getStyleClass('offset', 'ion-grid-offset');
|
|
85
|
+
}
|
|
86
|
+
componentDidLoad() {
|
|
87
|
+
if (this.pull ||
|
|
88
|
+
this.pullLg ||
|
|
89
|
+
this.pullMd ||
|
|
90
|
+
this.pullSm ||
|
|
91
|
+
this.pullXl ||
|
|
92
|
+
this.pullXs ||
|
|
93
|
+
this.push ||
|
|
94
|
+
this.pushLg ||
|
|
95
|
+
this.pushMd ||
|
|
96
|
+
this.pushSm ||
|
|
97
|
+
this.pushXl ||
|
|
98
|
+
this.pushXs) {
|
|
99
|
+
printIonWarning('[ion-col] - The pull and push properties are deprecated and no longer work, in favor of the order and size properties.', this.el);
|
|
100
|
+
}
|
|
112
101
|
}
|
|
113
102
|
render() {
|
|
114
|
-
const isRTL = document.dir === 'rtl';
|
|
115
103
|
const theme = getIonTheme(this);
|
|
116
|
-
|
|
104
|
+
const colSize = this.getSizeClass();
|
|
105
|
+
const colOrder = this.getOrderClass();
|
|
106
|
+
const colOffset = this.getOffsetClass();
|
|
107
|
+
return (h(Host, { key: 'e4a5e41ee5cd7ef62aa32a1f4f290a3be2fae212', class: {
|
|
117
108
|
[theme]: true,
|
|
118
|
-
|
|
109
|
+
[`${colSize}`]: colSize !== undefined,
|
|
110
|
+
[`${colOrder}`]: colOrder !== undefined,
|
|
111
|
+
[`${colOffset}`]: colOffset !== undefined,
|
|
112
|
+
} }, h("slot", { key: '7058c34c183cdad24630314ec0bedffef40a32af' })));
|
|
119
113
|
}
|
|
114
|
+
get el() { return this; }
|
|
120
115
|
static get style() { return colCss; }
|
|
121
116
|
}, [257, "ion-col", {
|
|
122
117
|
"offset": [1],
|
|
@@ -125,6 +120,12 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
|
|
|
125
120
|
"offsetMd": [1, "offset-md"],
|
|
126
121
|
"offsetLg": [1, "offset-lg"],
|
|
127
122
|
"offsetXl": [1, "offset-xl"],
|
|
123
|
+
"order": [1],
|
|
124
|
+
"orderXs": [1, "order-xs"],
|
|
125
|
+
"orderSm": [1, "order-sm"],
|
|
126
|
+
"orderMd": [1, "order-md"],
|
|
127
|
+
"orderLg": [1, "order-lg"],
|
|
128
|
+
"orderXl": [1, "order-xl"],
|
|
128
129
|
"pull": [1],
|
|
129
130
|
"pullXs": [1, "pull-xs"],
|
|
130
131
|
"pullSm": [1, "pull-sm"],
|
|
@@ -947,9 +947,6 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
947
947
|
this.toggleMonthAndYearView = () => {
|
|
948
948
|
this.showMonthAndYear = !this.showMonthAndYear;
|
|
949
949
|
};
|
|
950
|
-
this.asBlob = (icon) => new Blob([Uint8Array.from(icon.split("").map(function (c) {
|
|
951
|
-
return c.charCodeAt(0);
|
|
952
|
-
}))], { type: "image/svg+xml" });
|
|
953
950
|
}
|
|
954
951
|
formatOptionsChanged() {
|
|
955
952
|
const { el, formatOptions, presentation } = this;
|
|
@@ -1541,22 +1538,6 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1541
1538
|
[`wheel-order-${columnOrder}`]: true,
|
|
1542
1539
|
} }, this.renderWheelPicker(forcePresentation)));
|
|
1543
1540
|
}
|
|
1544
|
-
getIconProps(icon) {
|
|
1545
|
-
if (typeof icon === 'string' && icon.trim().startsWith('data:image/svg+xml')) {
|
|
1546
|
-
// Extract and decode the SVG string from the data URL
|
|
1547
|
-
const svgString = decodeURIComponent(atob(icon.split(',')[1])
|
|
1548
|
-
.split('')
|
|
1549
|
-
.map(function (c) {
|
|
1550
|
-
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
|
|
1551
|
-
})
|
|
1552
|
-
.join(''));
|
|
1553
|
-
const url = URL.createObjectURL(this.asBlob(svgString));
|
|
1554
|
-
console.log(url);
|
|
1555
|
-
return { src: url };
|
|
1556
|
-
}
|
|
1557
|
-
// Ionicons icon name/object or undefined
|
|
1558
|
-
return { icon };
|
|
1559
|
-
}
|
|
1560
1541
|
/**
|
|
1561
1542
|
* Grid Render Methods
|
|
1562
1543
|
*/
|
|
@@ -1570,7 +1551,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1570
1551
|
'calendar-month-year-toggle': true,
|
|
1571
1552
|
'ion-activatable': true,
|
|
1572
1553
|
'ion-focusable': true,
|
|
1573
|
-
}, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), theme !== 'ionic' && (h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? datetimeExpandedIcon : datetimeCollapsedIcon, lazy: false, flipRtl: true }))), theme === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon",
|
|
1554
|
+
}, part: "month-year-button", disabled: disabled, "aria-label": this.showMonthAndYear ? 'Hide year picker' : 'Show year picker', onClick: () => this.toggleMonthAndYearView() }, h("span", { id: "toggle-wrapper" }, getMonthAndYear(this.locale, this.workingParts), theme !== 'ionic' && (h("ion-icon", { "aria-hidden": "true", icon: this.showMonthAndYear ? datetimeExpandedIcon : datetimeCollapsedIcon, lazy: false, flipRtl: true }))), theme === 'md' && h("ion-ripple-effect", null))), h("div", { class: "calendar-next-prev" }, h("ion-buttons", null, h("ion-button", { "aria-label": "Previous month", disabled: prevMonthDisabled, onClick: () => this.prevMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimePreviousIcon, lazy: false, flipRtl: true })), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", { dir: hostDir, "aria-hidden": "true", slot: "icon-only", icon: datetimeNextIcon, lazy: false, flipRtl: true }))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
|
|
1574
1555
|
return h("div", { class: "day-of-week" }, d);
|
|
1575
1556
|
}))));
|
|
1576
1557
|
}
|
|
@@ -1954,7 +1935,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1954
1935
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1955
1936
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1956
1937
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1957
|
-
return (h(Host, { key: '
|
|
1938
|
+
return (h(Host, { key: '40f8732998d123ef5c700080cc423bb8310654d5', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1958
1939
|
[theme]: true,
|
|
1959
1940
|
['datetime-readonly']: readonly,
|
|
1960
1941
|
['datetime-disabled']: disabled,
|
|
@@ -1964,7 +1945,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1964
1945
|
[`datetime-size-${size}`]: true,
|
|
1965
1946
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1966
1947
|
[`datetime-grid`]: isGridStyle,
|
|
1967
|
-
})) }, h("div", { key: '
|
|
1948
|
+
})) }, h("div", { key: '0a323aa4e3cd9c96495d0dc3bf7985c8723f5e8c', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
|
|
1968
1949
|
}
|
|
1969
1950
|
get el() { return this; }
|
|
1970
1951
|
static get watchers() { return {
|
|
@@ -8,17 +8,16 @@ import { i as isRTL } from './dir.js';
|
|
|
8
8
|
import { c as createColorClasses } from './theme.js';
|
|
9
9
|
import { c as getIonMode } from './ionic-global.js';
|
|
10
10
|
|
|
11
|
-
const inputOtpIonicCss = "
|
|
11
|
+
const inputOtpIonicCss = ".sc-ion-input-otp-ionic-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--separator-height:var(--separator-width);--highlight-color:var(--highlight-color-focused);display:block;position:relative}.input-otp-group.sc-ion-input-otp-ionic{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-ionic{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-ionic{text-align:center}.input-otp-description-hidden.sc-ion-input-otp-ionic{display:none}.input-otp-separator.sc-ion-input-otp-ionic{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-fill-outline.sc-ion-input-otp-ionic-h{--background:none}.input-otp-disabled.sc-ion-input-otp-ionic-h,.input-otp-disabled.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic:focus{--border-color:var(--highlight-color);outline:none}.ion-touched.ion-invalid.sc-ion-input-otp-ionic-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-ionic-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-ionic-h,.ion-touched.ion-invalid.sc-ion-input-otp-ionic-h{--border-color:var(--highlight-color)}.sc-ion-input-otp-ionic-h{--padding-top:var(--ion-space-400, var(--ion-scale-400, 16px));--padding-end:var(--ion-space-0, var(--ion-scale-0, 0px));--padding-bottom:var(--ion-space-400, var(--ion-scale-400, 16px));--padding-start:var(--ion-space-0, var(--ion-scale-0, 0px));--color:var(--ion-text-default, var(--ion-primitives-neutral-1200, #242424));--min-width:var(--ion-scale-1000, 40px);--border-width:var(--ion-border-size-025, var(--ion-scale-025, 1px));--border-style:var(--ion-border-style-solid, solid);--border-color:var(--ion-border-input-default, var(--ion-primitives-neutral-500, #a2a2a2));--separator-width:var(--ion-scale-200, 8px);--separator-border-radius:var(--ion-border-radius-full, 999px);--separator-color:var(--ion-bg-neutral-subtle-press, var(--ion-primitives-neutral-400, #d5d5d5));--highlight-color-focused:var(--ion-border-focus-default, var(--ion-primitives-blue-400, #b5c0f7));--highlight-color-valid:var(--ion-border-success, var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23)));--highlight-color-invalid:var(--ion-border-danger-default, var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222)));font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-regular, 400);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, var(--ion-scale-600, 24px));text-decoration:none;text-transform:none}.has-focus.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic:focus{--border-width:var(--ion-border-size-050, var(--ion-scale-050, 2px))}.input-otp-description.sc-ion-input-otp-ionic{font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-500, var(--ion-scale-500, 20px));text-decoration:none;text-transform:none;color:var(--ion-text-subtlest, var(--ion-primitives-neutral-800, #626262))}.input-otp-size-small.sc-ion-input-otp-ionic-h{--width:var(--ion-scale-1000, 40px);--height:var(--ion-scale-1000, 40px)}.input-otp-size-small.sc-ion-input-otp-ionic-h .input-otp-group.sc-ion-input-otp-ionic{gap:var(--ion-space-200, var(--ion-scale-200, 8px))}.input-otp-size-medium.sc-ion-input-otp-ionic-h{--width:var(--ion-scale-1200, 48px);--height:var(--ion-scale-1200, 48px)}.input-otp-size-large.sc-ion-input-otp-ionic-h{--width:var(--ion-scale-1400, 56px);--height:var(--ion-scale-1400, 56px)}.input-otp-size-medium.sc-ion-input-otp-ionic-h .input-otp-group.sc-ion-input-otp-ionic,.input-otp-size-large.sc-ion-input-otp-ionic-h .input-otp-group.sc-ion-input-otp-ionic{gap:var(--ion-space-300, var(--ion-scale-300, 12px))}.input-otp-shape-round.sc-ion-input-otp-ionic-h{--border-radius:var(--ion-border-radius-400, var(--ion-scale-400, 16px))}.input-otp-shape-soft.sc-ion-input-otp-ionic-h{--border-radius:var(--ion-border-radius-200, var(--ion-scale-200, 8px))}.input-otp-shape-rectangular.sc-ion-input-otp-ionic-h{--border-radius:var(--ion-border-radius-0, var(--ion-scale-0, 0px))}.input-otp-fill-solid.sc-ion-input-otp-ionic-h{--border-color:var(--ion-bg-input-bold-default, var(--ion-primitives-neutral-200, #efefef));--background:var(--ion-bg-input-bold-default, var(--ion-primitives-neutral-200, #efefef))}.input-otp-disabled.sc-ion-input-otp-ionic-h{--color:var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-ionic-h{--background:var(--ion-bg-input-disabled, var(--ion-primitives-neutral-100, #f5f5f5));--border-color:var(--ion-border-disabled, var(--ion-primitives-neutral-300, #e0e0e0))}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-ionic-h{--background:var(--ion-bg-input-read-only, var(--ion-primitives-neutral-100, #f5f5f5))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-ionic-h{--border-color:var(--ion-bg-input-bold-disabled, var(--ion-primitives-neutral-300, #e0e0e0));--background:var(--ion-bg-input-bold-disabled, var(--ion-primitives-neutral-300, #e0e0e0))}.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-ionic-h{--border-color:var(--ion-bg-input-bold-read-only, var(--ion-primitives-neutral-300, #e0e0e0));--background:var(--ion-bg-input-bold-read-only, var(--ion-primitives-neutral-300, #e0e0e0))}.ion-color.sc-ion-input-otp-ionic-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic,.input-otp-fill-solid.ion-color.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic{border-color:var(--ion-color-danger, var(--ion-bg-danger-base-default, var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222))))}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic{border-color:var(--ion-color-success, var(--ion-bg-success-base-default, var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23))))}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-ionic-h .native-input.sc-ion-input-otp-ionic{border-color:rgba(var(--ion-color-base-rgb), 0.3)}";
|
|
12
12
|
|
|
13
|
-
const inputOtpIosCss = "
|
|
13
|
+
const inputOtpIosCss = ".sc-ion-input-otp-ios-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--separator-height:var(--separator-width);--highlight-color:var(--highlight-color-focused);display:block;position:relative}.input-otp-group.sc-ion-input-otp-ios{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-ios{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-ios{text-align:center}.input-otp-description-hidden.sc-ion-input-otp-ios{display:none}.input-otp-separator.sc-ion-input-otp-ios{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--background:none}.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-disabled.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-color:var(--highlight-color);outline:none}.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-ios-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-ios-h,.ion-touched.ion-invalid.sc-ion-input-otp-ios-h{--border-color:var(--highlight-color)}.sc-ion-input-otp-ios-h{--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--border-style:solid;--separator-width:8px;--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);font-size:0.875rem}.input-otp-description.sc-ion-input-otp-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem}.input-otp-size-small.sc-ion-input-otp-ios-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:8px}.input-otp-size-medium.sc-ion-input-otp-ios-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-ios-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios,.input-otp-size-large.sc-ion-input-otp-ios-h .input-otp-group.sc-ion-input-otp-ios{gap:12px}.input-otp-shape-round.sc-ion-input-otp-ios-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-ios-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-ios-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-disabled.sc-ion-input-otp-ios-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-ios-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-ios-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-ios-h{--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.ion-color.sc-ion-input-otp-ios-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-ios-h{--border-width:0.55px}.has-focus.sc-ion-input-otp-ios-h .native-input.sc-ion-input-otp-ios:focus{--border-width:1px}.input-otp-fill-outline.sc-ion-input-otp-ios-h{--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))))}";
|
|
14
14
|
|
|
15
|
-
const inputOtpMdCss = "
|
|
15
|
+
const inputOtpMdCss = ".sc-ion-input-otp-md-h{--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--separator-height:var(--separator-width);--highlight-color:var(--highlight-color-focused);display:block;position:relative}.input-otp-group.sc-ion-input-otp-md{-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.native-wrapper.sc-ion-input-otp-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--min-width)}.native-input.sc-ion-input-otp-md{border-radius:var(--border-radius);width:var(--width);min-width:inherit;height:var(--height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);font-size:inherit;text-align:center;-webkit-appearance:none;-moz-appearance:none;appearance:none}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{caret-color:var(--highlight-color)}.input-otp-description.sc-ion-input-otp-md{text-align:center}.input-otp-description-hidden.sc-ion-input-otp-md{display:none}.input-otp-separator.sc-ion-input-otp-md{border-radius:var(--separator-border-radius);-ms-flex-negative:0;flex-shrink:0;width:var(--separator-width);height:var(--separator-height);background:var(--separator-color)}.input-otp-fill-outline.sc-ion-input-otp-md-h{--background:none}.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-disabled.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:disabled{cursor:not-allowed}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-color:var(--highlight-color);outline:none}.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-otp-md-h{--highlight-color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-otp-md-h,.ion-touched.ion-invalid.sc-ion-input-otp-md-h{--border-color:var(--highlight-color)}.sc-ion-input-otp-md-h{--padding-top:16px;--padding-end:0;--padding-bottom:16px;--padding-start:0;--color:initial;--min-width:40px;--border-style:solid;--separator-width:8px;--separator-border-radius:999px;--separator-color:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);font-size:0.875rem}.input-otp-description.sc-ion-input-otp-md{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem}.input-otp-size-small.sc-ion-input-otp-md-h{--width:40px;--height:40px}.input-otp-size-small.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:8px}.input-otp-size-medium.sc-ion-input-otp-md-h{--width:48px;--height:48px}.input-otp-size-large.sc-ion-input-otp-md-h{--width:56px;--height:56px}.input-otp-size-medium.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md,.input-otp-size-large.sc-ion-input-otp-md-h .input-otp-group.sc-ion-input-otp-md{gap:12px}.input-otp-shape-round.sc-ion-input-otp-md-h{--border-radius:16px}.input-otp-shape-soft.sc-ion-input-otp-md-h{--border-radius:8px}.input-otp-shape-rectangular.sc-ion-input-otp-md-h{--border-radius:0}.input-otp-fill-outline.sc-ion-input-otp-md-h{--background:none}.input-otp-fill-solid.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-disabled.sc-ion-input-otp-md-h{--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}.input-otp-fill-outline.input-otp-disabled.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.input-otp-fill-outline.input-otp-readonly.sc-ion-input-otp-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}.input-otp-fill-solid.input-otp-disabled.sc-ion-input-otp-md-h,.input-otp-fill-solid.input-otp-readonly.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6))}.ion-color.sc-ion-input-otp-md-h{--highlight-color-focused:var(--ion-color-base)}.input-otp-fill-outline.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-otp-fill-outline.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-invalid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-danger, #c5000f)}.input-otp-fill-outline.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-outline.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md,.input-otp-fill-solid.ion-color.has-focus.ion-valid.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:var(--ion-color-success, #2dd55b)}.input-otp-fill-outline.input-otp-disabled.ion-color.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md{border-color:rgba(var(--ion-color-base-rgb), 0.3)}.sc-ion-input-otp-md-h{--border-width:1px}.has-focus.sc-ion-input-otp-md-h .native-input.sc-ion-input-otp-md:focus{--border-width:2px}.input-otp-fill-outline.sc-ion-input-otp-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3))}";
|
|
16
16
|
|
|
17
17
|
const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLElement {
|
|
18
18
|
constructor() {
|
|
19
19
|
super();
|
|
20
20
|
this.__registerHost();
|
|
21
|
-
this.__attachShadow();
|
|
22
21
|
this.ionInput = createEvent(this, "ionInput", 7);
|
|
23
22
|
this.ionChange = createEvent(this, "ionChange", 7);
|
|
24
23
|
this.ionComplete = createEvent(this, "ionComplete", 7);
|
|
@@ -644,7 +643,7 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
|
|
|
644
643
|
ios: inputOtpIosCss,
|
|
645
644
|
md: inputOtpMdCss
|
|
646
645
|
}; }
|
|
647
|
-
}, [
|
|
646
|
+
}, [294, "ion-input-otp", {
|
|
648
647
|
"autocapitalize": [1],
|
|
649
648
|
"color": [513],
|
|
650
649
|
"disabled": [516],
|