@ionic/core 8.7.4-dev.11757000835.106af570 → 8.7.4-dev.11757003456.1d9738d5
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 +3 -2
- package/components/ion-col.js +47 -48
- package/components/ion-datetime.js +22 -4
- package/components/ion-input-otp.js +5 -4
- package/components/ion-input.js +5 -4
- package/components/ion-row.js +1 -1
- package/components/ion-textarea.js +5 -4
- package/dist/cjs/ion-card_5.cjs.entry.js +1 -1
- package/dist/cjs/ion-col_3.cjs.entry.js +48 -42
- package/dist/cjs/ion-datetime_3.cjs.entry.js +22 -4
- 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 +2 -1
- package/dist/collection/components/col/col.css +0 -168
- package/dist/collection/components/col/col.js +58 -203
- package/dist/collection/components/datetime/datetime.js +22 -4
- 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 +0 -2
- package/dist/collection/components/textarea/textarea.js +1 -1
- package/dist/docs.json +17 -250
- package/dist/esm/ion-card_5.entry.js +1 -1
- package/dist/esm/ion-col_3.entry.js +49 -43
- package/dist/esm/ion-datetime_3.entry.js +22 -4
- 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 +0 -24
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-b8c602ec.entry.js → p-19bda0d1.entry.js} +1 -1
- package/dist/ionic/p-3f780ab8.entry.js +4 -0
- package/dist/ionic/p-6935c9f1.entry.js +4 -0
- package/dist/ionic/p-7a2392c9.entry.js +4 -0
- package/dist/ionic/p-d38b7cdc.entry.js +4 -0
- package/dist/ionic/p-dc66e8cc.entry.js +4 -0
- package/dist/types/components/col/col.d.ts +5 -48
- package/dist/types/components/datetime/datetime.d.ts +2 -0
- package/dist/types/components.d.ts +0 -72
- package/hydrate/index.js +124 -106
- package/hydrate/index.mjs +124 -106
- package/package.json +1 -1
- package/dist/ionic/p-0edc2fcf.entry.js +0 -4
- package/dist/ionic/p-417569b5.entry.js +0 -4
- package/dist/ionic/p-5a3ba1f6.entry.js +0 -4
- package/dist/ionic/p-80faabb9.entry.js +0 -4
- package/dist/ionic/p-9af1c2e0.entry.js +0 -4
|
@@ -14,10 +14,11 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
|
|
|
14
14
|
constructor() {
|
|
15
15
|
super();
|
|
16
16
|
this.__registerHost();
|
|
17
|
+
this.__attachShadow();
|
|
17
18
|
}
|
|
18
19
|
render() {
|
|
19
20
|
const theme = getIonTheme(this);
|
|
20
|
-
return (h(Host, { key: '
|
|
21
|
+
return (h(Host, { key: '02e1dcb024098b03783235cdcf0311ece428a9a6', class: {
|
|
21
22
|
[theme]: true,
|
|
22
23
|
// Used internally for styling
|
|
23
24
|
[`card-content-${theme}`]: true,
|
|
@@ -28,7 +29,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
|
|
|
28
29
|
ios: cardContentIosCss,
|
|
29
30
|
md: cardContentMdCss
|
|
30
31
|
}; }
|
|
31
|
-
}, [
|
|
32
|
+
}, [289, "ion-card-content"]);
|
|
32
33
|
function defineCustomElement$1() {
|
|
33
34
|
if (typeof customElements === "undefined") {
|
|
34
35
|
return;
|
package/components/ion-col.js
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
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';
|
|
6
5
|
import { b as getIonTheme } from './ionic-global.js';
|
|
7
6
|
|
|
8
7
|
const SIZE_TO_MEDIA = {
|
|
@@ -26,9 +25,11 @@ const matchBreakpoint = (breakpoint) => {
|
|
|
26
25
|
return false;
|
|
27
26
|
};
|
|
28
27
|
|
|
29
|
-
const colCss = ":host{
|
|
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-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;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))}}";
|
|
30
29
|
|
|
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'));
|
|
32
33
|
const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
|
|
33
34
|
const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
|
|
34
35
|
constructor() {
|
|
@@ -56,62 +57,66 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
|
|
|
56
57
|
// increase in size and we want to return the largest match
|
|
57
58
|
return matched;
|
|
58
59
|
}
|
|
59
|
-
|
|
60
|
-
const
|
|
60
|
+
calculateSize() {
|
|
61
|
+
const columns = this.getColumns('size');
|
|
61
62
|
// If size wasn't set for any breakpoint
|
|
62
63
|
// or if the user set the size without a value
|
|
63
64
|
// it means we need to stick with the default and return
|
|
64
65
|
// e.g. <ion-col size-md>
|
|
65
|
-
if (!
|
|
66
|
+
if (!columns || columns === '') {
|
|
66
67
|
return;
|
|
67
68
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
69
|
+
// If the size is set to auto then don't calculate a size
|
|
70
|
+
const colSize = columns === 'auto'
|
|
71
|
+
? 'auto'
|
|
72
|
+
: // If CSS supports variables we should use the grid columns var
|
|
73
|
+
SUPPORTS_VARS
|
|
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) {
|
|
73
88
|
return;
|
|
74
89
|
}
|
|
75
|
-
|
|
90
|
+
// If the number of columns passed are greater than 0 and less than
|
|
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
|
+
};
|
|
76
103
|
}
|
|
77
|
-
|
|
78
|
-
return this.
|
|
104
|
+
calculateOffset(isRTL) {
|
|
105
|
+
return this.calculatePosition('offset', isRTL ? 'margin-right' : 'margin-left');
|
|
79
106
|
}
|
|
80
|
-
|
|
81
|
-
return this.
|
|
107
|
+
calculatePull(isRTL) {
|
|
108
|
+
return this.calculatePosition('pull', isRTL ? 'left' : 'right');
|
|
82
109
|
}
|
|
83
|
-
|
|
84
|
-
return this.
|
|
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
|
-
}
|
|
110
|
+
calculatePush(isRTL) {
|
|
111
|
+
return this.calculatePosition('push', isRTL ? 'right' : 'left');
|
|
101
112
|
}
|
|
102
113
|
render() {
|
|
114
|
+
const isRTL = document.dir === 'rtl';
|
|
103
115
|
const theme = getIonTheme(this);
|
|
104
|
-
|
|
105
|
-
const colOrder = this.getOrderClass();
|
|
106
|
-
const colOffset = this.getOffsetClass();
|
|
107
|
-
return (h(Host, { key: '13acd2681e3e16bbf196eb3ca8ad01230fbb0df8', class: {
|
|
116
|
+
return (h(Host, { key: '18eb6aff60f43b28b7e157b7d6ce787635f25fa1', class: {
|
|
108
117
|
[theme]: true,
|
|
109
|
-
|
|
110
|
-
[`${colOrder}`]: colOrder !== undefined,
|
|
111
|
-
[`${colOffset}`]: colOffset !== undefined,
|
|
112
|
-
} }, h("slot", { key: '525e1f5b3102009f16ae985a838f68f440eea7e4' })));
|
|
118
|
+
}, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '3848d5cb525b42a550aa36a486f97b2e20240def' })));
|
|
113
119
|
}
|
|
114
|
-
get el() { return this; }
|
|
115
120
|
static get style() { return colCss; }
|
|
116
121
|
}, [257, "ion-col", {
|
|
117
122
|
"offset": [1],
|
|
@@ -120,12 +125,6 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
|
|
|
120
125
|
"offsetMd": [1, "offset-md"],
|
|
121
126
|
"offsetLg": [1, "offset-lg"],
|
|
122
127
|
"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"],
|
|
129
128
|
"pull": [1],
|
|
130
129
|
"pullXs": [1, "pull-xs"],
|
|
131
130
|
"pullSm": [1, "pull-sm"],
|
|
@@ -947,6 +947,9 @@ 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" });
|
|
950
953
|
}
|
|
951
954
|
formatOptionsChanged() {
|
|
952
955
|
const { el, formatOptions, presentation } = this;
|
|
@@ -1538,6 +1541,22 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1538
1541
|
[`wheel-order-${columnOrder}`]: true,
|
|
1539
1542
|
} }, this.renderWheelPicker(forcePresentation)));
|
|
1540
1543
|
}
|
|
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
|
+
}
|
|
1541
1560
|
/**
|
|
1542
1561
|
* Grid Render Methods
|
|
1543
1562
|
*/
|
|
@@ -1546,12 +1565,11 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1546
1565
|
const prevMonthDisabled = disabled || isPrevMonthDisabled(this.workingParts, this.minParts, this.maxParts);
|
|
1547
1566
|
const nextMonthDisabled = disabled || isNextMonthDisabled(this.workingParts, this.maxParts);
|
|
1548
1567
|
// don't use the inheritAttributes util because it removes dir from the host, and we still need that
|
|
1549
|
-
const hostDir = this.el.getAttribute('dir') || undefined;
|
|
1550
1568
|
return (h("div", { class: "calendar-header" }, h("div", { class: "calendar-action-buttons" }, h("div", { class: "calendar-month-year" }, h("button", { class: {
|
|
1551
1569
|
'calendar-month-year-toggle': true,
|
|
1552
1570
|
'ion-activatable': true,
|
|
1553
1571
|
'ion-focusable': true,
|
|
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", {
|
|
1572
|
+
}, 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", Object.assign({ "aria-hidden": "true", slot: "icon-only", lazy: false, flipRtl: true }, this.getIconProps(datetimePreviousIcon)))), h("ion-button", { "aria-label": "Next month", disabled: nextMonthDisabled, onClick: () => this.nextMonth() }, h("ion-icon", Object.assign({ "aria-hidden": "true", slot: "icon-only", lazy: false, flipRtl: true }, this.getIconProps(datetimeNextIcon))))))), h("div", { class: "calendar-days-of-week", "aria-hidden": "true" }, getDaysOfWeek(this.locale, theme, this.firstDayOfWeek % 7).map((d) => {
|
|
1555
1573
|
return h("div", { class: "day-of-week" }, d);
|
|
1556
1574
|
}))));
|
|
1557
1575
|
}
|
|
@@ -1935,7 +1953,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1935
1953
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1936
1954
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1937
1955
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1938
|
-
return (h(Host, { key: '
|
|
1956
|
+
return (h(Host, { key: '1cab6e719cb32cd1cb8082f228ce26346ede22f1', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1939
1957
|
[theme]: true,
|
|
1940
1958
|
['datetime-readonly']: readonly,
|
|
1941
1959
|
['datetime-disabled']: disabled,
|
|
@@ -1945,7 +1963,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1945
1963
|
[`datetime-size-${size}`]: true,
|
|
1946
1964
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1947
1965
|
[`datetime-grid`]: isGridStyle,
|
|
1948
|
-
})) }, h("div", { key: '
|
|
1966
|
+
})) }, h("div", { key: '53e49d7bb6b8a99b7e485bf4c75acda59f45c8b1', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(theme)));
|
|
1949
1967
|
}
|
|
1950
1968
|
get el() { return this; }
|
|
1951
1969
|
static get watchers() { return {
|
|
@@ -8,16 +8,17 @@ 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 = ":host{--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{-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{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{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}:host(.has-focus) .native-input{caret-color:var(--highlight-color)}.input-otp-description{text-align:center}.input-otp-description-hidden{display:none}.input-otp-separator{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)}:host(.input-otp-fill-outline){--background:none}:host(.input-otp-disabled),:host(.input-otp-disabled) .native-input:disabled{cursor:not-allowed}:host(.has-focus) .native-input:focus{--border-color:var(--highlight-color);outline:none}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host{--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}:host(.has-focus) .native-input:focus{--border-width:var(--ion-border-size-050, var(--ion-scale-050, 2px))}.input-otp-description{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))}:host(.input-otp-size-small){--width:var(--ion-scale-1000, 40px);--height:var(--ion-scale-1000, 40px)}:host(.input-otp-size-small) .input-otp-group{gap:var(--ion-space-200, var(--ion-scale-200, 8px))}:host(.input-otp-size-medium){--width:var(--ion-scale-1200, 48px);--height:var(--ion-scale-1200, 48px)}:host(.input-otp-size-large){--width:var(--ion-scale-1400, 56px);--height:var(--ion-scale-1400, 56px)}:host(.input-otp-size-medium) .input-otp-group,:host(.input-otp-size-large) .input-otp-group{gap:var(--ion-space-300, var(--ion-scale-300, 12px))}:host(.input-otp-shape-round){--border-radius:var(--ion-border-radius-400, var(--ion-scale-400, 16px))}:host(.input-otp-shape-soft){--border-radius:var(--ion-border-radius-200, var(--ion-scale-200, 8px))}:host(.input-otp-shape-rectangular){--border-radius:var(--ion-border-radius-0, var(--ion-scale-0, 0px))}:host(.input-otp-fill-solid){--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))}:host(.input-otp-disabled){--color:var(--ion-text-disabled, var(--ion-primitives-neutral-500, #a2a2a2))}:host(.input-otp-fill-outline.input-otp-disabled){--background:var(--ion-bg-input-disabled, var(--ion-primitives-neutral-100, #f5f5f5));--border-color:var(--ion-border-disabled, var(--ion-primitives-neutral-300, #e0e0e0))}:host(.input-otp-fill-outline.input-otp-readonly){--background:var(--ion-bg-input-read-only, var(--ion-primitives-neutral-100, #f5f5f5))}:host(.input-otp-fill-solid.input-otp-disabled){--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))}:host(.input-otp-fill-solid.input-otp-readonly){--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))}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.input-otp-fill-outline.ion-color) .native-input,:host(.input-otp-fill-solid.ion-color) .native-input:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input{border-color:var(--ion-color-danger, var(--ion-bg-danger-base-default, var(--ion-semantics-danger-800, var(--ion-primitives-red-800, #bf2222))))}:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input{border-color:var(--ion-color-success, var(--ion-bg-success-base-default, var(--ion-semantics-success-900, var(--ion-primitives-green-900, #126f23))))}:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input{border-color:rgba(var(--ion-color-base-rgb), 0.3)}";
|
|
12
12
|
|
|
13
|
-
const inputOtpIosCss = "
|
|
13
|
+
const inputOtpIosCss = ":host{--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{-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{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{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}:host(.has-focus) .native-input{caret-color:var(--highlight-color)}.input-otp-description{text-align:center}.input-otp-description-hidden{display:none}.input-otp-separator{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)}:host(.input-otp-fill-outline){--background:none}:host(.input-otp-disabled),:host(.input-otp-disabled) .native-input:disabled{cursor:not-allowed}:host(.has-focus) .native-input:focus{--border-color:var(--highlight-color);outline:none}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host{--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{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem}:host(.input-otp-size-small){--width:40px;--height:40px}:host(.input-otp-size-small) .input-otp-group{gap:8px}:host(.input-otp-size-medium){--width:48px;--height:48px}:host(.input-otp-size-large){--width:56px;--height:56px}:host(.input-otp-size-medium) .input-otp-group,:host(.input-otp-size-large) .input-otp-group{gap:12px}:host(.input-otp-shape-round){--border-radius:16px}:host(.input-otp-shape-soft){--border-radius:8px}:host(.input-otp-shape-rectangular){--border-radius:0}:host(.input-otp-fill-outline){--background:none}:host(.input-otp-fill-solid){--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))}:host(.input-otp-disabled){--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}:host(.input-otp-fill-outline.input-otp-disabled){--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))}:host(.input-otp-fill-outline.input-otp-readonly){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}:host(.input-otp-fill-solid.input-otp-disabled),:host(.input-otp-fill-solid.input-otp-readonly){--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))}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.input-otp-fill-outline.ion-color) .native-input,:host(.input-otp-fill-solid.ion-color) .native-input:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input{border-color:var(--ion-color-danger, #c5000f)}:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input{border-color:var(--ion-color-success, #2dd55b)}:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input{border-color:rgba(var(--ion-color-base-rgb), 0.3)}:host{--border-width:0.55px}:host(.has-focus) .native-input:focus{--border-width:1px}:host(.input-otp-fill-outline){--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 = ":host{--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{-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{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{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}:host(.has-focus) .native-input{caret-color:var(--highlight-color)}.input-otp-description{text-align:center}.input-otp-description-hidden{display:none}.input-otp-separator{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)}:host(.input-otp-fill-outline){--background:none}:host(.input-otp-disabled),:host(.input-otp-disabled) .native-input:disabled{cursor:not-allowed}:host(.has-focus) .native-input:focus{--border-color:var(--highlight-color);outline:none}:host(.ion-touched.ion-invalid){--highlight-color:var(--highlight-color-invalid)}:host(.ion-valid){--highlight-color:var(--highlight-color-valid)}:host(.has-focus.ion-valid),:host(.ion-touched.ion-invalid){--border-color:var(--highlight-color)}:host{--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{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));font-size:0.75rem;line-height:1.25rem}:host(.input-otp-size-small){--width:40px;--height:40px}:host(.input-otp-size-small) .input-otp-group{gap:8px}:host(.input-otp-size-medium){--width:48px;--height:48px}:host(.input-otp-size-large){--width:56px;--height:56px}:host(.input-otp-size-medium) .input-otp-group,:host(.input-otp-size-large) .input-otp-group{gap:12px}:host(.input-otp-shape-round){--border-radius:16px}:host(.input-otp-shape-soft){--border-radius:8px}:host(.input-otp-shape-rectangular){--border-radius:0}:host(.input-otp-fill-outline){--background:none}:host(.input-otp-fill-solid){--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))}:host(.input-otp-disabled){--color:var(--ion-color-step-350, var(--ion-text-color-step-650, #a6a6a6))}:host(.input-otp-fill-outline.input-otp-disabled){--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))}:host(.input-otp-fill-outline.input-otp-readonly){--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2))}:host(.input-otp-fill-solid.input-otp-disabled),:host(.input-otp-fill-solid.input-otp-readonly){--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))}:host(.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.input-otp-fill-outline.ion-color) .native-input,:host(.input-otp-fill-solid.ion-color) .native-input:focus{border-color:rgba(var(--ion-color-base-rgb), 0.6)}:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input{border-color:var(--ion-color-danger, #c5000f)}:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input{border-color:var(--ion-color-success, #2dd55b)}:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input{border-color:rgba(var(--ion-color-base-rgb), 0.3)}:host{--border-width:1px}:host(.has-focus) .native-input:focus{--border-width:2px}:host(.input-otp-fill-outline){--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();
|
|
21
22
|
this.ionInput = createEvent(this, "ionInput", 7);
|
|
22
23
|
this.ionChange = createEvent(this, "ionChange", 7);
|
|
23
24
|
this.ionComplete = createEvent(this, "ionComplete", 7);
|
|
@@ -643,7 +644,7 @@ const InputOTP = /*@__PURE__*/ proxyCustomElement(class InputOTP extends HTMLEle
|
|
|
643
644
|
ios: inputOtpIosCss,
|
|
644
645
|
md: inputOtpMdCss
|
|
645
646
|
}; }
|
|
646
|
-
}, [
|
|
647
|
+
}, [289, "ion-input-otp", {
|
|
647
648
|
"autocapitalize": [1],
|
|
648
649
|
"color": [513],
|
|
649
650
|
"disabled": [516],
|