@ionic/core 9.0.3-dev.11788456135.1ab1d6cd → 9.0.3-dev.11790016799.1e269b7a
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-accordion.js +1 -1
- package/components/ion-alert.js +1 -1
- package/components/ion-back-button.js +1 -1
- package/components/ion-breadcrumb.js +1 -1
- package/components/ion-checkbox.js +1 -1
- package/components/ion-datetime.js +1 -1
- package/components/ion-fab-button.js +1 -1
- package/components/ion-input-password-toggle.js +1 -1
- package/components/ion-input.js +1 -1
- package/components/ion-item.js +1 -1
- package/components/ion-menu-button.js +1 -1
- package/components/ion-refresher-content.js +1 -1
- package/components/ion-reorder.js +1 -1
- package/components/ion-searchbar.js +1 -1
- package/components/ion-select-modal.js +1 -1
- package/components/ion-select-popover.js +1 -1
- package/components/ion-select.js +1 -1
- package/components/ion-textarea.js +1 -1
- package/components/ion-toggle.js +1 -1
- package/components/{p-Cc3oC60a.js → p-0rXxxCTt.js} +1 -1
- package/components/p-B9ibhQu1.js +4 -0
- package/components/p-BzxHcuQH.js +4 -0
- package/components/p-C6wm_AQQ.js +4 -0
- package/components/p-CaxVJjmc.js +4 -0
- package/components/{p-Cm78Kk79.js → p-D2X-Hime.js} +1 -1
- package/css/ionic/bundle.ionic.css.map +1 -1
- package/css/ionic/core.ionic.css.map +1 -1
- package/css/ionic/global.bundle.ionic.css.map +1 -1
- package/css/ionic/ionic-swiper.ionic.css.map +1 -1
- package/css/ionic/link.ionic.css.map +1 -1
- package/css/ionic/typography.ionic.css.map +1 -1
- package/dist/cjs/ion-accordion_2.cjs.entry.js +9 -14
- package/dist/cjs/ion-alert.cjs.entry.js +4 -4
- package/dist/cjs/ion-back-button.cjs.entry.js +11 -13
- package/dist/cjs/ion-breadcrumb_2.cjs.entry.js +16 -29
- package/dist/cjs/ion-checkbox.cjs.entry.js +23 -15
- package/dist/cjs/ion-datetime.cjs.entry.js +14 -50
- package/dist/cjs/ion-fab_3.cjs.entry.js +9 -14
- package/dist/cjs/ion-input-password-toggle.cjs.entry.js +17 -29
- package/dist/cjs/ion-input.cjs.entry.js +12 -28
- package/dist/cjs/ion-item_8.cjs.entry.js +10 -15
- package/dist/cjs/ion-menu_3.cjs.entry.js +9 -12
- package/dist/cjs/ion-refresher_2.cjs.entry.js +10 -5
- package/dist/cjs/ion-reorder_2.cjs.entry.js +5 -13
- package/dist/cjs/ion-searchbar.cjs.entry.js +8 -37
- package/dist/cjs/ion-select-modal.cjs.entry.js +11 -10
- package/dist/cjs/ion-select_3.cjs.entry.js +13 -37
- package/dist/cjs/ion-textarea.cjs.entry.js +13 -21
- package/dist/cjs/ion-toggle.cjs.entry.js +12 -28
- package/dist/collection/components/accordion/accordion.js +9 -14
- package/dist/collection/components/alert/alert.ionic.css +7 -9
- package/dist/collection/components/alert/alert.js +3 -3
- package/dist/collection/components/back-button/back-button.js +11 -13
- package/dist/collection/components/breadcrumb/breadcrumb.js +16 -28
- package/dist/collection/components/checkbox/checkbox.ionic.css +35 -42
- package/dist/collection/components/checkbox/checkbox.ios.css +33 -29
- package/dist/collection/components/checkbox/checkbox.js +23 -13
- package/dist/collection/components/checkbox/checkbox.md.css +33 -29
- package/dist/collection/components/datetime/datetime.ios.css +5 -10
- package/dist/collection/components/datetime/datetime.js +12 -48
- package/dist/collection/components/datetime/datetime.md.css +5 -10
- package/dist/collection/components/fab-button/fab-button.js +9 -14
- package/dist/collection/components/input/input.ionic.css +102 -79
- package/dist/collection/components/input/input.js +11 -27
- package/dist/collection/components/input-password-toggle/input-password-toggle.js +18 -28
- package/dist/collection/components/item/item.js +10 -15
- package/dist/collection/components/menu-button/menu-button.js +9 -12
- package/dist/collection/components/refresher-content/refresher-content.js +10 -4
- package/dist/collection/components/reorder/reorder.js +5 -13
- package/dist/collection/components/searchbar/searchbar.js +8 -35
- package/dist/collection/components/select/select.ionic.css +187 -76
- package/dist/collection/components/select/select.js +14 -39
- package/dist/collection/components/select-modal/select-modal.js +12 -10
- package/dist/collection/components/textarea/textarea.ionic.css +133 -85
- package/dist/collection/components/textarea/textarea.ios.css +0 -4
- package/dist/collection/components/textarea/textarea.js +13 -18
- package/dist/collection/components/textarea/textarea.md.css +0 -4
- package/dist/collection/components/toggle/toggle.js +12 -26
- package/dist/collection/utils/test/playwright/field-geometry.js +34 -0
- package/dist/collection/utils/test/playwright/index.js +1 -0
- package/dist/docs.json +60 -25
- package/dist/esm/{index-BqQ15K9a.js → index-BkJpfpXI.js} +1 -1
- package/dist/esm/ion-accordion_2.entry.js +10 -15
- package/dist/esm/ion-alert.entry.js +4 -4
- package/dist/esm/ion-back-button.entry.js +12 -14
- package/dist/esm/ion-breadcrumb_2.entry.js +17 -30
- package/dist/esm/ion-checkbox.entry.js +24 -16
- package/dist/esm/ion-datetime.entry.js +15 -51
- package/dist/esm/ion-fab_3.entry.js +10 -15
- package/dist/esm/ion-input-password-toggle.entry.js +19 -31
- package/dist/esm/ion-input.entry.js +13 -29
- package/dist/esm/ion-item_8.entry.js +11 -16
- package/dist/esm/ion-menu_3.entry.js +10 -13
- package/dist/esm/ion-refresher_2.entry.js +11 -6
- package/dist/esm/ion-reorder_2.entry.js +6 -14
- package/dist/esm/ion-searchbar.entry.js +9 -38
- package/dist/esm/ion-select-modal.entry.js +13 -12
- package/dist/esm/ion-select_3.entry.js +14 -38
- package/dist/esm/ion-textarea.entry.js +13 -21
- package/dist/esm/ion-toggle.entry.js +13 -29
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-016f2ee0.entry.js +4 -0
- package/dist/ionic/p-07b95001.entry.js +4 -0
- package/dist/ionic/p-14dfe86e.entry.js +4 -0
- package/dist/ionic/p-167af5d6.entry.js +4 -0
- package/dist/ionic/p-18285aab.entry.js +4 -0
- package/dist/ionic/{p-2e3acd77.entry.js → p-1e0f0eb9.entry.js} +1 -1
- package/dist/ionic/p-368935f5.entry.js +4 -0
- package/dist/ionic/p-38da0794.entry.js +4 -0
- package/dist/ionic/p-80f71456.entry.js +4 -0
- package/dist/ionic/p-83aa4043.entry.js +4 -0
- package/dist/ionic/p-944ce631.entry.js +4 -0
- package/dist/ionic/{p-BqQ15K9a.js → p-BkJpfpXI.js} +1 -1
- package/dist/ionic/p-aecef1d7.entry.js +4 -0
- package/dist/ionic/p-bb83b861.entry.js +4 -0
- package/dist/ionic/p-c1c90068.entry.js +4 -0
- package/dist/ionic/p-ccc7487b.entry.js +4 -0
- package/dist/ionic/p-cfd5dc50.entry.js +4 -0
- package/dist/ionic/p-d5c9bf12.entry.js +4 -0
- package/dist/ionic/p-f252ab8a.entry.js +4 -0
- package/dist/types/components/accordion/accordion.d.ts +7 -1
- package/dist/types/components/back-button/back-button.d.ts +8 -2
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +12 -2
- package/dist/types/components/checkbox/checkbox.d.ts +12 -1
- package/dist/types/components/datetime/datetime.d.ts +4 -4
- package/dist/types/components/fab-button/fab-button.d.ts +7 -1
- package/dist/types/components/input/input.d.ts +7 -10
- package/dist/types/components/input-password-toggle/input-password-toggle.d.ts +14 -2
- package/dist/types/components/item/item.d.ts +7 -1
- package/dist/types/components/menu-button/menu-button.d.ts +6 -1
- package/dist/types/components/refresher-content/refresher-content.d.ts +6 -0
- package/dist/types/components/reorder/reorder.d.ts +1 -1
- package/dist/types/components/select/select.d.ts +7 -12
- package/dist/types/components/select-modal/select-modal.d.ts +6 -1
- package/dist/types/components/textarea/textarea.d.ts +8 -8
- package/dist/types/components/toggle/toggle.d.ts +5 -2
- package/dist/types/utils/config.d.ts +22 -2
- package/dist/types/utils/test/playwright/field-geometry.d.ts +13 -0
- package/dist/types/utils/test/playwright/index.d.ts +1 -0
- package/hydrate/index.js +213 -375
- package/hydrate/index.mjs +213 -375
- package/package.json +1 -2
- package/components/p-B1AK6oR-.js +0 -4
- package/components/p-BDqjX7Z_.js +0 -4
- package/components/p-BYSs-jZz.js +0 -4
- package/components/p-CPdOdJa7.js +0 -4
- package/components/p-D1t981Ih.js +0 -4
- package/components/p-Dhi5xtNS.js +0 -4
- package/components/p-DzaPYdjZ.js +0 -4
- package/components/p-e73ca-aN.js +0 -4
- package/components/p-fIOYmaqA.js +0 -4
- package/dist/cjs/caret-down-vtVgfXIs.js +0 -8
- package/dist/cjs/caret-left-CxZXLRv5.js +0 -8
- package/dist/cjs/caret-right-CRCgv98E.js +0 -8
- package/dist/cjs/list-a-7GSA6K.js +0 -8
- package/dist/cjs/x-BTF99yFH.js +0 -8
- package/dist/esm/caret-down-D1t981Ih.js +0 -6
- package/dist/esm/caret-left-fIOYmaqA.js +0 -6
- package/dist/esm/caret-right-BYSs-jZz.js +0 -6
- package/dist/esm/list-Dhi5xtNS.js +0 -6
- package/dist/esm/x-BDqjX7Z_.js +0 -6
- package/dist/ionic/p-04d96dad.entry.js +0 -4
- package/dist/ionic/p-0a924e6a.entry.js +0 -4
- package/dist/ionic/p-2da21af7.entry.js +0 -4
- package/dist/ionic/p-2fc1521f.entry.js +0 -4
- package/dist/ionic/p-73309d35.entry.js +0 -4
- package/dist/ionic/p-74ab5f49.entry.js +0 -4
- package/dist/ionic/p-83d13d56.entry.js +0 -4
- package/dist/ionic/p-8dcd18cf.entry.js +0 -4
- package/dist/ionic/p-9ca59419.entry.js +0 -4
- package/dist/ionic/p-BDqjX7Z_.js +0 -4
- package/dist/ionic/p-BYSs-jZz.js +0 -4
- package/dist/ionic/p-D1t981Ih.js +0 -4
- package/dist/ionic/p-Dhi5xtNS.js +0 -4
- package/dist/ionic/p-b10dc124.entry.js +0 -4
- package/dist/ionic/p-b7ce4a50.entry.js +0 -4
- package/dist/ionic/p-c7035f3f.entry.js +0 -4
- package/dist/ionic/p-c91fc9d4.entry.js +0 -4
- package/dist/ionic/p-cd4791d5.entry.js +0 -4
- package/dist/ionic/p-e9480e7f.entry.js +0 -4
- package/dist/ionic/p-e9fdff49.entry.js +0 -4
- package/dist/ionic/p-f82b13a6.entry.js +0 -4
- package/dist/ionic/p-fIOYmaqA.js +0 -4
|
@@ -3,10 +3,9 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, h, d as Host, g as getElement, c as createEvent, f as printIonWarning, e as config } from './index-jsOqXOKf.js';
|
|
5
5
|
import { c as getIonTheme } from './ionic-global-oK2heABF.js';
|
|
6
|
-
import { x as xSvg } from './x-BDqjX7Z_.js';
|
|
7
6
|
import { k as hasShadowDom, i as inheritAriaAttributes } from './helpers-DTqW6MzS.js';
|
|
8
7
|
import { h as hostContext, o as openURL, c as createColorClasses } from './theme-BUF_V-Kg.js';
|
|
9
|
-
import { t as close } from './index-
|
|
8
|
+
import { t as close } from './index-BkJpfpXI.js';
|
|
10
9
|
import './focus-visible-vXpMhGrs.js';
|
|
11
10
|
import './dir-Dojwmvde.js';
|
|
12
11
|
|
|
@@ -206,22 +205,18 @@ const FabButton = class {
|
|
|
206
205
|
componentWillLoad() {
|
|
207
206
|
this.inheritedAttributes = inheritAriaAttributes(this.el);
|
|
208
207
|
}
|
|
208
|
+
/**
|
|
209
|
+
* Get the icon to use for the close icon.
|
|
210
|
+
* If an icon is set on the component, use that.
|
|
211
|
+
* Otherwise, use the icon set in the config.
|
|
212
|
+
* If no icon is set in the config, use the default icon.
|
|
213
|
+
*/
|
|
209
214
|
get fabButtonCloseIcon() {
|
|
210
215
|
// Return the icon if it is explicitly set
|
|
211
216
|
if (this.closeIcon != null) {
|
|
212
217
|
return this.closeIcon;
|
|
213
218
|
}
|
|
214
|
-
|
|
215
|
-
const theme = getIonTheme(this);
|
|
216
|
-
const defaultIcons = {
|
|
217
|
-
ios: close,
|
|
218
|
-
ionic: xSvg,
|
|
219
|
-
md: close,
|
|
220
|
-
};
|
|
221
|
-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
222
|
-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
|
|
223
|
-
// Return the configured fab button close icon or the default icon
|
|
224
|
-
return config.get('fabButtonCloseIcon', defaultIcon);
|
|
219
|
+
return config.get('fabButtonCloseIcon', close);
|
|
225
220
|
}
|
|
226
221
|
render() {
|
|
227
222
|
const { el, disabled, fabButtonCloseIcon, color, href, activated, show, translucent, size, inheritedAttributes, type, } = this;
|
|
@@ -243,7 +238,7 @@ const FabButton = class {
|
|
|
243
238
|
if (type !== 'button') {
|
|
244
239
|
this.renderHiddenButton();
|
|
245
240
|
}
|
|
246
|
-
return (h(Host, { key: '
|
|
241
|
+
return (h(Host, { key: 'fc2e7284b76590aa65e45b8251f7c7776e11f0dc', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
|
|
247
242
|
[theme]: true,
|
|
248
243
|
'fab-button-in-list': inList,
|
|
249
244
|
'fab-button-translucent-in-list': inList && translucent,
|
|
@@ -254,7 +249,7 @@ const FabButton = class {
|
|
|
254
249
|
'ion-activatable': true,
|
|
255
250
|
'ion-focusable': true,
|
|
256
251
|
[`fab-button-${size}`]: size !== undefined,
|
|
257
|
-
}) }, h(TagType, { key: '
|
|
252
|
+
}) }, h(TagType, { key: '21598ba114ac64d8f98bc0f16934678166def17e', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation), ...inheritedAttributes }, h("ion-icon", { key: '673609441ffe18d6e8f4b2dc2de37eda7efdda75', "aria-hidden": "true", icon: fabButtonCloseIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { key: '13b3dac62a91549431d227676bbe8a0a0fc93665', class: "button-inner" }, h("slot", { key: 'aefbe96ef9790dd85002432d7bb5a70f17e52a15' })), theme === 'md' && h("ion-ripple-effect", { key: '6888c7374b87c08a9a04009549026ae7365f4b92' }))));
|
|
258
253
|
}
|
|
259
254
|
get el() { return getElement(this); }
|
|
260
255
|
static get watchers() { return {
|
|
@@ -3,12 +3,8 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, f as printIonWarning, e as config, h, d as Host, g as getElement } from './index-jsOqXOKf.js';
|
|
5
5
|
import { c as createColorClasses } from './theme-BUF_V-Kg.js';
|
|
6
|
-
import { x as eyeOff, y as eye } from './index-
|
|
7
|
-
import {
|
|
8
|
-
|
|
9
|
-
const eyeSlashSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik01My45MiwzNC42MkE4LDgsMCwxLDAsNDIuMDgsNDUuMzhMNjEuMzIsNjYuNTVDMjUsODguODQsOS4zOCwxMjMuMiw4LjY5LDEyNC43NmE4LDgsMCwwLDAsMCw2LjVjLjM1Ljc5LDguODIsMTkuNTcsMjcuNjUsMzguNEM2MS40MywxOTQuNzQsOTMuMTIsMjA4LDEyOCwyMDhhMTI3LjExLDEyNy4xMSwwLDAsMCw1Mi4wNy0xMC44M2wyMiwyNC4yMWE4LDgsMCwxLDAsMTEuODQtMTAuNzZabTQ3LjMzLDc1Ljg0LDQxLjY3LDQ1Ljg1YTMyLDMyLDAsMCwxLTQxLjY3LTQ1Ljg1Wk0xMjgsMTkyYy0zMC43OCwwLTU3LjY3LTExLjE5LTc5LjkzLTMzLjI1QTEzMy4xNiwxMzMuMTYsMCwwLDEsMjUsMTI4YzQuNjktOC43OSwxOS42Ni0zMy4zOSw0Ny4zNS00OS4zOGwxOCwxOS43NWE0OCw0OCwwLDAsMCw2My42Niw3MGwxNC43MywxNi4yQTExMiwxMTIsMCwwLDEsMTI4LDE5MlptNi05NS40M2E4LDgsMCwwLDEsMy0xNS43Miw0OC4xNiw0OC4xNiwwLDAsMSwzOC43Nyw0Mi42NCw4LDgsMCwwLDEtNy4yMiw4LjcxLDYuMzksNi4zOSwwLDAsMS0uNzUsMCw4LDgsMCwwLDEtOC03LjI2QTMyLjA5LDMyLjA5LDAsMCwwLDEzNCw5Ni41N1ptMTEzLjI4LDM0LjY5Yy0uNDIuOTQtMTAuNTUsMjMuMzctMzMuMzYsNDMuOGE4LDgsMCwxLDEtMTAuNjctMTEuOTJBMTMyLjc3LDEzMi43NywwLDAsMCwyMzEuMDUsMTI4YTEzMy4xNSwxMzMuMTUsMCwwLDAtMjMuMTItMzAuNzdDMTg1LjY3LDc1LjE5LDE1OC43OCw2NCwxMjgsNjRhMTE4LjM3LDExOC4zNywwLDAsMC0xOS4zNiwxLjU3QTgsOCwwLDEsMSwxMDYsNDkuNzksMTM0LDEzNCwwLDAsMSwxMjgsNDhjMzQuODgsMCw2Ni41NywxMy4yNiw5MS42NiwzOC4zNSwxOC44MywxOC44MywyNy4zLDM3LjYyLDI3LjY1LDM4LjQxQTgsOCwwLDAsMSwyNDcuMzEsMTMxLjI2WiIvPjwvc3ZnPg==';
|
|
10
|
-
|
|
11
|
-
const eyeSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0yNDcuMzEsMTI0Ljc2Yy0uMzUtLjc5LTguODItMTkuNTgtMjcuNjUtMzguNDFDMTk0LjU3LDYxLjI2LDE2Mi44OCw0OCwxMjgsNDhTNjEuNDMsNjEuMjYsMzYuMzQsODYuMzVDMTcuNTEsMTA1LjE4LDksMTI0LDguNjksMTI0Ljc2YTgsOCwwLDAsMCwwLDYuNWMuMzUuNzksOC44MiwxOS41NywyNy42NSwzOC40QzYxLjQzLDE5NC43NCw5My4xMiwyMDgsMTI4LDIwOHM2Ni41Ny0xMy4yNiw5MS42Ni0zOC4zNGMxOC44My0xOC44MywyNy4zLTM3LjYxLDI3LjY1LTM4LjRBOCw4LDAsMCwwLDI0Ny4zMSwxMjQuNzZaTTEyOCwxOTJjLTMwLjc4LDAtNTcuNjctMTEuMTktNzkuOTMtMzMuMjVBMTMzLjQ3LDEzMy40NywwLDAsMSwyNSwxMjgsMTMzLjMzLDEzMy4zMywwLDAsMSw0OC4wNyw5Ny4yNUM3MC4zMyw3NS4xOSw5Ny4yMiw2NCwxMjgsNjRzNTcuNjcsMTEuMTksNzkuOTMsMzMuMjVBMTMzLjQ2LDEzMy40NiwwLDAsMSwyMzEuMDUsMTI4QzIyMy44NCwxNDEuNDYsMTkyLjQzLDE5MiwxMjgsMTkyWm0wLTExMmE0OCw0OCwwLDEsMCw0OCw0OEE0OC4wNSw0OC4wNSwwLDAsMCwxMjgsODBabTAsODBhMzIsMzIsMCwxLDEsMzItMzJBMzIsMzIsMCwwLDEsMTI4LDE2MFoiLz48L3N2Zz4=';
|
|
6
|
+
import { x as eyeOff, y as eye } from './index-BkJpfpXI.js';
|
|
7
|
+
import { b as getIonMode } from './ionic-global-oK2heABF.js';
|
|
12
8
|
|
|
13
9
|
const inputPasswordToggleIonicCss = () => `:host ion-button{--color:var(--token-primitives-neutral-800, #626262);--margin-end:calc(-1 * var(--padding-end));--padding-end:inherit;--icon-size:var(--token-font-size-400, 1rem);-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:0;margin-bottom:0;width:var(--size);height:var(--size)}:host ion-button ion-icon{font-size:var(--icon-size)}`;
|
|
14
10
|
|
|
@@ -61,54 +57,46 @@ const InputPasswordToggle = class {
|
|
|
61
57
|
disconnectedCallback() {
|
|
62
58
|
this.inputElRef = null;
|
|
63
59
|
}
|
|
60
|
+
/**
|
|
61
|
+
* Get the icon to use for the hide icon.
|
|
62
|
+
* If an icon is set on the component, use that.
|
|
63
|
+
* Otherwise, use the icon set in the config.
|
|
64
|
+
* If no icon is set in the config, use the default icon.
|
|
65
|
+
*/
|
|
64
66
|
get inputPasswordHideIcon() {
|
|
65
67
|
// Return the icon if it is explicitly set
|
|
66
68
|
if (this.hideIcon != null) {
|
|
67
69
|
return this.hideIcon;
|
|
68
70
|
}
|
|
69
|
-
|
|
70
|
-
const theme = getIonTheme(this);
|
|
71
|
-
const defaultIcons = {
|
|
72
|
-
ios: eyeOff,
|
|
73
|
-
ionic: eyeSlashSvg,
|
|
74
|
-
md: eyeOff,
|
|
75
|
-
};
|
|
76
|
-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
77
|
-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
|
|
78
|
-
// Return the configured input password hide icon or the default icon
|
|
79
|
-
return config.get('inputPasswordHideIcon', defaultIcon);
|
|
71
|
+
return config.get('inputPasswordHideIcon', eyeOff);
|
|
80
72
|
}
|
|
73
|
+
/**
|
|
74
|
+
* Get the icon to use for the show icon.
|
|
75
|
+
* If an icon is set on the component, use that.
|
|
76
|
+
* Otherwise, use the icon set in the config.
|
|
77
|
+
* If no icon is set in the config, use the default icon.
|
|
78
|
+
*/
|
|
81
79
|
get inputPasswordShowIcon() {
|
|
82
80
|
// Return the icon if it is explicitly set
|
|
83
81
|
if (this.showIcon != null) {
|
|
84
82
|
return this.showIcon;
|
|
85
83
|
}
|
|
86
|
-
|
|
87
|
-
const theme = getIonTheme(this);
|
|
88
|
-
const defaultIcons = {
|
|
89
|
-
ios: eye,
|
|
90
|
-
ionic: eyeSvg,
|
|
91
|
-
md: eye,
|
|
92
|
-
};
|
|
93
|
-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
94
|
-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
|
|
95
|
-
// Return the configured input password show icon or the default icon
|
|
96
|
-
return config.get('inputPasswordShowIcon', defaultIcon);
|
|
84
|
+
return config.get('inputPasswordShowIcon', eye);
|
|
97
85
|
}
|
|
98
86
|
render() {
|
|
99
87
|
const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
|
|
100
88
|
const mode = getIonMode(this);
|
|
101
89
|
const isPasswordVisible = type === 'text';
|
|
102
|
-
return (h(Host, { key: '
|
|
90
|
+
return (h(Host, { key: '84bc48922e1757b815cc8cfb57120479736c3c60', class: createColorClasses(color, {
|
|
103
91
|
[mode]: true,
|
|
104
|
-
}) }, h("ion-button", { key: '
|
|
92
|
+
}) }, h("ion-button", { key: '1ffddcd50039cc044a0ad36e5c8e0465d135518c', mode: mode, color: color, fill: "clear", shape: "round", "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', "aria-pressed": isPasswordVisible ? 'true' : 'false', type: "button", onPointerDown: (ev) => {
|
|
105
93
|
/**
|
|
106
94
|
* This prevents mobile browsers from
|
|
107
95
|
* blurring the input when the password toggle
|
|
108
96
|
* button is activated.
|
|
109
97
|
*/
|
|
110
98
|
ev.preventDefault();
|
|
111
|
-
}, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '
|
|
99
|
+
}, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '6ee118c5044c11b6db743f3ce6be6ef7ba255292', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
|
|
112
100
|
}
|
|
113
101
|
get el() { return getElement(this); }
|
|
114
102
|
static get watchers() { return {
|
|
@@ -2,19 +2,18 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, c as createEvent, i as forceUpdate, f as printIonWarning, h, e as config, d as Host, g as getElement } from './index-jsOqXOKf.js';
|
|
5
|
-
import { x as xSvg } from './x-BDqjX7Z_.js';
|
|
6
5
|
import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-C5Vj7Od7.js';
|
|
7
6
|
import { c as checkInvalidState } from './validity-NcQUGze-.js';
|
|
8
7
|
import { c as createClearButtonPressController } from './clear-button-press-controller-CWOPHFBc.js';
|
|
9
8
|
import { d as debounceEvent, b as inheritAttributes, i as inheritAriaAttributes, c as componentOnReady } from './helpers-DTqW6MzS.js';
|
|
10
9
|
import { h as hostContext, c as createColorClasses } from './theme-BUF_V-Kg.js';
|
|
11
|
-
import { g as
|
|
10
|
+
import { g as closeCircle, h as closeSharp } from './index-BkJpfpXI.js';
|
|
12
11
|
import { c as getIonTheme } from './ionic-global-oK2heABF.js';
|
|
13
12
|
import { g as getCounterText } from './input.utils-BV974hyf.js';
|
|
14
13
|
import './dir-Dojwmvde.js';
|
|
15
14
|
import './focus-visible-vXpMhGrs.js';
|
|
16
15
|
|
|
17
|
-
const inputIonicCss = () => `.sc-ion-input-ionic-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;padding:0 !important;color:var(--color)}ion-item[slot=start].sc-ion-input-ionic-h,ion-item [slot=start].sc-ion-input-ionic-h,ion-item[slot=end].sc-ion-input-ionic-h,ion-item [slot=end].sc-ion-input-ionic-h{width:auto}.ion-color.sc-ion-input-ionic-h{--highlight-color-focused:current-color(base)}.native-input.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ionic::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ionic:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ionic::-ms-clear{display:none}.cloned-input.sc-ion-input-ionic{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input.sc-ion-input-ionic:disabled{opacity:1}.input-clear-icon.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ionic-h .input-clear-icon.sc-ion-input-ionic{color:inherit}.has-value.sc-ion-input-ionic-h .input-clear-icon.sc-ion-input-ionic{visibility:visible}.input-wrapper.sc-ion-input-ionic{-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);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.input-control.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;width:100%;min-width:0}.native-wrapper.sc-ion-input-ionic{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;width:100%}.input-start.sc-ion-input-ionic,.input-end.sc-ion-input-ionic{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}.ion-touched.ion-invalid.sc-ion-input-ionic-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ionic-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}.has-focus.ion-valid.sc-ion-input-ionic-h,.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic{display:block}.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{display:block}.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic{display:none}.input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.has-focus.sc-ion-input-ionic-h input.sc-ion-input-ionic{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.skip-label-transition.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transition:none;transition:none}.label-text.sc-ion-input-ionic,.sc-ion-input-ionic-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ionic,.input-outline-notch-hidden.sc-ion-input-ionic{display:none}.input-wrapper.sc-ion-input-ionic input.sc-ion-input-ionic{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:row;flex-direction:row}.input-label-placement-end.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-fixed.sc-ion-input-ionic-h .label-text.sc-ion-input-ionic{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic,.has-value.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{opacity:1}.sc-ion-input-ionic-h[disabled].sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[disabled] .sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[readonly].sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[readonly] .sc-ion-input-ionic-s>ion-input-password-toggle{visibility:hidden}.input-fill-outline.sc-ion-input-ionic-h{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--border-color:var(--token-primitives-neutral-500, #a2a2a2)}.input-fill-solid.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));--border-color:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9))}.input-fill-solid.has-focus.ion-valid.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic{--border-color:var(--highlight-color)}@media (any-hover: hover){.sc-ion-input-ionic-h:hover{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}}.input-fill-solid.input-disabled.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));--placeholder-color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}.input-fill-solid.input-readonly.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));--border-color:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0))}.input-fill-solid.has-focus.sc-ion-input-ionic-h{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}.sc-ion-input-ionic-h{--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--border-width:var(--token-border-size-025, var(--token-scale-025, 1px));--highlight-color-valid:var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));--highlight-color-invalid:var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));--placeholder-color:var(--token-primitives-neutral-800, #626262);--placeholder-opacity:1;font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none}.input-outline.sc-ion-input-ionic{right:0;left:0;top:0;bottom:0;border-radius:var(--border-radius);position:absolute;width:100%;height:100%;pointer-events:none;border:var(--border-width) var(--border-style) var(--border-color)}.input-label-placement-start.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic{-ms-flex-direction:row;flex-direction:row}.input-label-placement-end.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-stacked.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ionic-h input.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.label-floating.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}.input-wrapper.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;border-bottom:none;background:transparent}.label-text-wrapper.sc-ion-input-ionic{position:relative}.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:left top;transform-origin:left top;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.input-bottom.sc-ion-input-ionic{border-top:none}.input-wrapper-inner.sc-ion-input-ionic{border-radius:inherit;-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;position:relative;-ms-flex-align:center;align-items:center;width:100%;min-height:var(--token-scale-1000, 40px);-webkit-box-sizing:border-box;box-sizing:border-box;background:var(--background)}.input-size-medium.sc-ion-input-ionic-h{--padding-start:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-300, var(--token-scale-300, 12px))}.input-size-large.sc-ion-input-ionic-h{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}.input-size-xlarge.sc-ion-input-ionic-h{--padding-start:var(--token-space-500, var(--token-scale-500, 20px));--padding-end:var(--token-space-500, var(--token-scale-500, 20px))}.input-size-medium.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic{min-height:var(--token-scale-1000, 40px)}.input-size-large.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic{min-height:var(--token-scale-1200, 48px)}.input-size-xlarge.sc-ion-input-ionic-h .input-wrapper-inner.sc-ion-input-ionic{min-height:var(--token-scale-1400, 56px)}.input-shape-soft.sc-ion-input-ionic-h{--border-radius:var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)))}.input-shape-round.sc-ion-input-ionic-h{--border-radius:var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)))}.input-shape-rectangular.sc-ion-input-ionic-h{--border-radius:var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)))}.input-size-medium.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1000, 40px)}.input-size-large.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1200, 48px)}.input-size-xlarge.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1400, 56px)}.input-wrapper-inner.sc-ion-input-ionic::after{right:0;left:0;top:50%;position:absolute;height:100%;min-height:var(--token-scale-1200, 48px);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:"";cursor:text}.sc-ion-input-ionic-s>[slot=start],.sc-ion-input-ionic-s>[slot=end],.input-clear-icon.sc-ion-input-ionic{z-index:2}.sc-ion-input-ionic-s>[slot=start]:last-of-type{-webkit-margin-end:var(--token-space-200, var(--token-scale-200, 8px));margin-inline-end:var(--token-space-200, var(--token-scale-200, 8px))}.sc-ion-input-ionic-s>[slot=end]:first-of-type{-webkit-margin-start:var(--token-space-200, var(--token-scale-200, 8px));margin-inline-start:var(--token-space-200, var(--token-scale-200, 8px))}.input-clear-icon.sc-ion-input-ionic{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px);color:var(--token-primitives-neutral-1000, #3b3b3b)}.input-clear-icon.sc-ion-input-ionic:focus-visible{border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));outline:var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));opacity:1}.input-clear-icon.sc-ion-input-ionic ion-icon.sc-ion-input-ionic{font-size:var(--token-font-size-400, 1rem)}.sc-ion-input-ionic-h:not(:focus-within) .input-clear-icon.sc-ion-input-ionic:not(.input-clear-button-pressed){display:none}.label-text-wrapper.sc-ion-input-ionic{font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;color:var(--token-primitives-neutral-1000, #3b3b3b)}.label-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform:none;transform:none}.input-bottom.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:0;font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none}.input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{color:var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)))}.input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}.has-focus.ion-valid.sc-ion-input-ionic-h .helper-text.sc-ion-input-ionic{color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-ionic-h,.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-width:var(--token-border-size-025, var(--token-scale-025, 1px))}@media (any-hover: hover){.sc-ion-input-ionic-h:hover{--border-color:var(--token-primitives-neutral-600, #8c8c8c)}}.input-disabled.sc-ion-input-ionic-h{--color:var(--token-primitives-neutral-500, #a2a2a2);--background:var(--token-primitives-neutral-100, #f3f3f3);--border-color:var(--token-primitives-neutral-300, #e0e0e0);--placeholder-color:var(--token-primitives-neutral-500, #a2a2a2);pointer-events:none}.input-disabled.sc-ion-input-ionic-h:not(.ion-valid) .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-disabled.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic,.input-disabled.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}.input-disabled.has-focus.ion-valid.sc-ion-input-ionic-h{--border-color:rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6)}.input-disabled.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-color:rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6)}.input-disabled.ion-color.sc-ion-input-ionic-h{--border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-disabled.has-focus.ion-valid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-disabled.ion-touched.ion-invalid.sc-ion-input-ionic-h .error-text.sc-ion-input-ionic{opacity:0.6}.input-readonly.sc-ion-input-ionic-h{--background:var(--token-primitives-neutral-100, #f3f3f3)}.has-focus.sc-ion-input-ionic-h{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--border-width:var(--token-border-size-050, var(--token-scale-050, 2px))}.has-focus.sc-ion-input-ionic-h .input-highlight.sc-ion-input-ionic{-webkit-transform:scale(1);transform:scale(1)}`;
|
|
16
|
+
const inputIonicCss = () => `.sc-ion-input-ionic-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;padding:0 !important;color:var(--color)}ion-item[slot=start].sc-ion-input-ionic-h,ion-item [slot=start].sc-ion-input-ionic-h,ion-item[slot=end].sc-ion-input-ionic-h,ion-item [slot=end].sc-ion-input-ionic-h{width:auto}.ion-color.sc-ion-input-ionic-h{--highlight-color-focused:current-color(base)}.native-input.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ionic::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ionic:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ionic:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ionic::-ms-clear{display:none}.cloned-input.sc-ion-input-ionic{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input.sc-ion-input-ionic:disabled{opacity:1}.input-clear-icon.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ionic-h .input-clear-icon.sc-ion-input-ionic{color:inherit}.has-value.sc-ion-input-ionic-h .input-clear-icon.sc-ion-input-ionic{visibility:visible}.input-wrapper.sc-ion-input-ionic{-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);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.input-control.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;width:100%;min-width:0}.native-wrapper.sc-ion-input-ionic{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;width:100%}.input-start.sc-ion-input-ionic,.input-end.sc-ion-input-ionic{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}.ion-touched.ion-invalid.sc-ion-input-ionic-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ionic-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}.has-focus.ion-valid.sc-ion-input-ionic-h,.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic{display:block}.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{display:block}.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic{display:none}.input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.has-focus.sc-ion-input-ionic-h input.sc-ion-input-ionic{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ionic{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.skip-label-transition.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transition:none;transition:none}.label-text.sc-ion-input-ionic,.sc-ion-input-ionic-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ionic,.input-outline-notch-hidden.sc-ion-input-ionic{display:none}.input-wrapper.sc-ion-input-ionic input.sc-ion-input-ionic{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:row;flex-direction:row}.input-label-placement-end.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-fixed.sc-ion-input-ionic-h .label-text.sc-ion-input-ionic{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .input-control.sc-ion-input-ionic{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic,.has-value.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{opacity:1}.sc-ion-input-ionic-h[disabled].sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[disabled] .sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[readonly].sc-ion-input-ionic-s>ion-input-password-toggle,.sc-ion-input-ionic-h[readonly] .sc-ion-input-ionic-s>ion-input-password-toggle{visibility:hidden}.input-fill-outline.sc-ion-input-ionic-h{--background:var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));--border-color:var(--token-primitives-neutral-500, #a2a2a2)}.input-fill-solid.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9));--border-color:var(--token-bg-input-bold-default, var(--token-primitives-neutral-200, #eae9e9))}.input-fill-solid.has-focus.ion-valid.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic{--border-color:var(--highlight-color)}@media (any-hover: hover){.sc-ion-input-ionic-h:hover{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}}.input-fill-solid.input-disabled.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-disabled, var(--token-primitives-neutral-300, #e0e0e0));--placeholder-color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}.input-fill-solid.input-readonly.sc-ion-input-ionic-h{--background:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0));--border-color:var(--token-bg-input-bold-read-only, var(--token-primitives-neutral-300, #e0e0e0))}.input-fill-solid.has-focus.sc-ion-input-ionic-h{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7))}.sc-ion-input-ionic-h{--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242424));--border-width:var(--token-border-size-025, var(--token-scale-025, 1px));--highlight-color-valid:var(--token-semantics-success-900, var(--token-primitives-green-900, #126f23));--highlight-color-invalid:var(--token-border-danger-default, var(--token-semantics-danger-800, var(--token-primitives-red-800, #bf2222)));--placeholder-color:var(--token-primitives-neutral-800, #626262);--placeholder-opacity:1;font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-600, var(--token-scale-600, 24px));text-decoration:none;text-transform:none}.input-label-placement-stacked.sc-ion-input-ionic-h input.sc-ion-input-ionic,.input-label-placement-floating.sc-ion-input-ionic-h input.sc-ion-input-ionic{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.label-floating.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:var(--token-space-100, var(--token-scale-100, 4px))}.input-wrapper.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:grid;grid-template-columns:[field-start slot-start] auto [native] minmax(0, 1fr) [slot-end] auto [field-end];grid-template-rows:[label] auto [field] auto;-ms-flex-line-pack:center;align-content:center;-ms-flex-align:center;align-items:center;background:transparent}.input-control.sc-ion-input-ionic{display:contents}.input-wrapper.sc-ion-input-ionic::before{border-radius:var(--border-radius, 0);-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;content:"";pointer-events:none;min-height:var(--token-scale-1000, 40px);border:var(--border-width) var(--border-style) var(--border-color);background:var(--background)}.input-wrapper.sc-ion-input-ionic::before{grid-row:field;grid-column:field-start/field-end}.label-text-wrapper.sc-ion-input-ionic{grid-row:label;grid-column:field-start/field-end}.input-start.sc-ion-input-ionic{grid-row:field;grid-column:slot-start}.native-wrapper.sc-ion-input-ionic{grid-row:field;grid-column:native}.input-end.sc-ion-input-ionic{grid-row:field;grid-column:slot-end}.input-start.sc-ion-input-ionic,.native-wrapper.sc-ion-input-ionic,.input-end.sc-ion-input-ionic{padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}.input-start.sc-ion-input-ionic{-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start)}.input-end.sc-ion-input-ionic{-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:left top;transform-origin:left top;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .sc-ion-input-ionic-h -no-combinator.input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl].input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ionic-h:dir(rtl) .label-text-wrapper.sc-ion-input-ionic{-webkit-transform-origin:right top;transform-origin:right top}}.input-bottom.sc-ion-input-ionic{border-top:none}.input-size-medium.sc-ion-input-ionic-h{--padding-start:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-300, var(--token-scale-300, 12px))}.input-size-large.sc-ion-input-ionic-h{--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px))}.input-size-xlarge.sc-ion-input-ionic-h{--padding-start:var(--token-space-500, var(--token-scale-500, 20px));--padding-end:var(--token-space-500, var(--token-scale-500, 20px))}.input-size-medium.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic::before{min-height:var(--token-scale-1000, 40px)}.input-size-large.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic::before{min-height:var(--token-scale-1200, 48px)}.input-size-xlarge.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic::before{min-height:var(--token-scale-1400, 56px)}.input-shape-soft.sc-ion-input-ionic-h{--border-radius:var(--token-soft-xl, var(--token-border-radius-200, var(--token-scale-200, 8px)))}.input-shape-round.sc-ion-input-ionic-h{--border-radius:var(--token-round-xl, var(--token-border-radius-400, var(--token-scale-400, 16px)))}.input-shape-rectangular.sc-ion-input-ionic-h{--border-radius:var(--token-rectangular-xl, var(--token-border-radius-0, var(--token-scale-0, 0px)))}.input-size-medium.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1000, 40px)}.input-size-large.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1200, 48px)}.input-size-xlarge.sc-ion-input-ionic-h ion-input-password-toggle.sc-ion-input-ionic{--size:var(--token-scale-1400, 56px)}.input-wrapper.sc-ion-input-ionic::after{grid-row:field;grid-column:field-start/field-end;align-self:stretch;content:"";cursor:text}.input-size-medium.sc-ion-input-ionic-h .input-wrapper.sc-ion-input-ionic::after{margin-top:calc((var(--token-scale-1000, 40px) - var(--token-scale-1200, 48px)) / 2);margin-bottom:calc((var(--token-scale-1000, 40px) - var(--token-scale-1200, 48px)) / 2);min-height:var(--token-scale-1200, 48px)}.sc-ion-input-ionic-s>[slot=start],.sc-ion-input-ionic-s>[slot=end],.input-clear-icon.sc-ion-input-ionic{z-index:2}.sc-ion-input-ionic-s>[slot=start]:last-of-type{-webkit-margin-end:var(--token-space-200, var(--token-scale-200, 8px));margin-inline-end:var(--token-space-200, var(--token-scale-200, 8px))}.sc-ion-input-ionic-s>[slot=end]:first-of-type{-webkit-margin-start:var(--token-space-200, var(--token-scale-200, 8px));margin-inline-start:var(--token-space-200, var(--token-scale-200, 8px))}.input-clear-icon.sc-ion-input-ionic{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;width:var(--token-scale-400, 16px);height:var(--token-scale-400, 16px);color:var(--token-primitives-neutral-1000, #3b3b3b)}.input-clear-icon.sc-ion-input-ionic:focus-visible{border-radius:var(--token-border-radius-100, var(--token-scale-100, 4px));outline:var(--token-border-size-050, var(--token-scale-050, 2px)) var(--token-border-style-solid, solid) var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));opacity:1}.input-clear-icon.sc-ion-input-ionic ion-icon.sc-ion-input-ionic{font-size:var(--token-font-size-400, 1rem)}.sc-ion-input-ionic-h:not(:focus-within) .input-clear-icon.sc-ion-input-ionic:not(.input-clear-button-pressed){display:none}.label-text-wrapper.sc-ion-input-ionic{font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none;color:var(--token-primitives-neutral-1000, #3b3b3b)}.label-floating.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{-webkit-transform:none;transform:none}.input-bottom.sc-ion-input-ionic{padding-left:0;padding-right:0;padding-top:var(--token-space-100, var(--token-scale-100, 4px));padding-bottom:0;font-size:var(--token-font-size-300, 0.75rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0%);line-height:var(--token-font-line-height-500, var(--token-scale-500, 20px));text-decoration:none;text-transform:none}.input-bottom.sc-ion-input-ionic .error-text.sc-ion-input-ionic{color:var(--token-text-danger, var(--token-semantics-danger-900, var(--token-primitives-red-900, #991b1b)))}.input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic{color:var(--token-text-subtlest, var(--token-primitives-neutral-800, #626262))}.has-focus.ion-valid.sc-ion-input-ionic-h .helper-text.sc-ion-input-ionic{color:var(--highlight-color-valid)}.has-focus.ion-valid.sc-ion-input-ionic-h,.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-width:var(--token-border-size-025, var(--token-scale-025, 1px))}@media (any-hover: hover){.sc-ion-input-ionic-h:hover{--border-color:var(--token-primitives-neutral-600, #8c8c8c)}}.input-disabled.sc-ion-input-ionic-h{--color:var(--token-primitives-neutral-500, #a2a2a2);--background:var(--token-primitives-neutral-100, #f3f3f3);--border-color:var(--token-primitives-neutral-300, #e0e0e0);--placeholder-color:var(--token-primitives-neutral-500, #a2a2a2);pointer-events:none}.input-disabled.sc-ion-input-ionic-h:not(.ion-valid) .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-disabled.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .counter.sc-ion-input-ionic,.input-disabled.sc-ion-input-ionic-h .label-text-wrapper.sc-ion-input-ionic{color:var(--token-text-disabled, var(--token-primitives-neutral-500, #a2a2a2))}.input-disabled.has-focus.ion-valid.sc-ion-input-ionic-h{--border-color:rgba(var(--token-semantics-success-base-rgb, 27, 164, 51), 0.6)}.input-disabled.ion-touched.ion-invalid.sc-ion-input-ionic-h{--border-color:rgba(var(--token-semantics-danger-base-rgb, 229, 41, 41), 0.6)}.input-disabled.ion-color.sc-ion-input-ionic-h{--border-color:rgba(var(--ion-color-base-rgb), 0.6)}.input-disabled.has-focus.ion-valid.sc-ion-input-ionic-h .input-bottom.sc-ion-input-ionic .helper-text.sc-ion-input-ionic,.input-disabled.ion-touched.ion-invalid.sc-ion-input-ionic-h .error-text.sc-ion-input-ionic{opacity:0.6}.input-readonly.sc-ion-input-ionic-h{--background:var(--token-primitives-neutral-100, #f3f3f3)}.has-focus.sc-ion-input-ionic-h{--border-color:var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));--border-width:var(--token-border-size-050, var(--token-scale-050, 2px))}.has-focus.sc-ion-input-ionic-h .input-highlight.sc-ion-input-ionic{-webkit-transform:scale(1);transform:scale(1)}`;
|
|
18
17
|
|
|
19
18
|
const inputIosCss = () => `.sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--border-style:solid;--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;padding:0 !important;color:var(--color)}ion-item[slot=start].sc-ion-input-ios-h,ion-item [slot=start].sc-ion-input-ios-h,ion-item[slot=end].sc-ion-input-ios-h,ion-item [slot=end].sc-ion-input-ios-h{width:auto}.ion-color.sc-ion-input-ios-h{--highlight-color-focused:current-color(base)}.native-input.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width:100%;height:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;z-index:1}.native-input.sc-ion-input-ios::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.native-input.sc-ion-input-ios:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-ios:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-ios::-ms-clear{display:none}.cloned-input.sc-ion-input-ios{position:absolute;top:0;bottom:0;height:auto;max-height:none;pointer-events:none}.cloned-input.sc-ion-input-ios:disabled{opacity:1}.input-clear-icon.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;background-position:center;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{color:inherit}.has-value.sc-ion-input-ios-h .input-clear-icon.sc-ion-input-ios{visibility:visible}.input-wrapper.sc-ion-input-ios{-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);border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:stretch;align-items:stretch;height:inherit;min-height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;background:var(--background);line-height:normal}.input-control.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;width:100%;min-width:0}.native-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;width:100%}.input-start.sc-ion-input-ios,.input-end.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center}.ion-touched.ion-invalid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);white-space:normal}.has-focus.ion-valid.sc-ion-input-ios-h,.ion-touched.ion-invalid.sc-ion-input-ios-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:block}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .error-text.sc-ion-input-ios{display:block}.ion-touched.ion-invalid.sc-ion-input-ios-h .input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{display:none}.input-bottom.sc-ion-input-ios .counter.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;white-space:nowrap}.has-focus.sc-ion-input-ios-h input.sc-ion-input-ios{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;max-width:200px;-webkit-transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1);pointer-events:none}.skip-label-transition.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transition:none;transition:none}.label-text.sc-ion-input-ios,.sc-ion-input-ios-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-ios,.input-outline-notch-hidden.sc-ion-input-ios{display:none}.input-wrapper.sc-ion-input-ios input.sc-ion-input-ios{-webkit-transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 150ms cubic-bezier(0.4, 0, 0.2, 1)}.input-label-placement-start.sc-ion-input-ios-h .input-control.sc-ion-input-ios{-ms-flex-direction:row;flex-direction:row}.input-label-placement-end.sc-ion-input-ios-h .input-control.sc-ion-input-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-fixed.sc-ion-input-ios-h .label-text.sc-ion-input-ios{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-ios-h .input-control.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .input-control.sc-ion-input-ios{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-stacked.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .sc-ion-input-ios-h -no-combinator.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl].input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios,[dir=rtl] .input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h:dir(rtl) .label-text-wrapper.sc-ion-input-ios{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios,.has-value.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{opacity:1}.sc-ion-input-ios-h[disabled].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[disabled] .sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly].sc-ion-input-ios-s>ion-input-password-toggle,.sc-ion-input-ios-h[readonly] .sc-ion-input-ios-s>ion-input-password-toggle{visibility:hidden}.sc-ion-input-ios-h{--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--background:transparent;--color:initial;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);min-height:44px;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}.ion-color.sc-ion-input-ios-h{--highlight-color-focused:var(--ion-color-base)}.cloned-input.sc-ion-input-ios{top:0;bottom:0}.cloned-input.sc-ion-input-ios{inset-inline-start:0}.input-label-placement-floating.sc-ion-input-ios-h,.input-label-placement-stacked.sc-ion-input-ios-h{min-height:56px}.input-clear-icon.sc-ion-input-ios{width:30px;height:30px;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666))}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.ion-touched.ion-invalid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-ios-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-ios{-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:5px;padding-bottom:0;font-size:0.75rem}.input-bottom.sc-ion-input-ios .helper-text.sc-ion-input-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}.input-bottom.sc-ion-input-ios .counter.sc-ion-input-ios{color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));-webkit-padding-start:16px;padding-inline-start:16px}.input-label-placement-start.sc-ion-input-ios-h .native-wrapper.sc-ion-input-ios,.input-label-placement-end.sc-ion-input-ios-h .native-wrapper.sc-ion-input-ios,.input-label-placement-fixed.sc-ion-input-ios-h .native-wrapper.sc-ion-input-ios{-ms-flex:1 1 0px;flex:1 1 0}.input-label-placement-start.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.input-label-placement-end.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0;margin-top:0;margin-bottom:0}.input-label-placement-fixed.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:0;margin-bottom:0}.label-floating.sc-ion-input-ios-h .label-text-wrapper.sc-ion-input-ios{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.label-text-wrapper.sc-ion-input-ios{min-width:0}.sc-ion-input-ios-s>[slot=start]:last-of-type{-webkit-margin-end:16px;margin-inline-end:16px;-webkit-margin-start:0;margin-inline-start:0}.sc-ion-input-ios-s>[slot=end]:first-of-type{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}.sc-ion-input-ios-h{--border-width:0.55px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));--highlight-height:0px;font-size:inherit}.input-clear-icon.sc-ion-input-ios ion-icon.sc-ion-input-ios{font-size:18px}.input-disabled.sc-ion-input-ios-h{opacity:0.3}.sc-ion-input-ios-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-ios-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;aspect-ratio:1}`;
|
|
20
19
|
|
|
@@ -584,27 +583,19 @@ const Input = class {
|
|
|
584
583
|
'input-clear-button-pressed': this.isClearButtonPressed,
|
|
585
584
|
}, onPointerDown: this.clearButtonPressController.onPointerDown, onPointerCancel: this.clearButtonPressController.release, onClick: this.clearTextInput }, h("ion-icon", { "aria-hidden": "true", icon: this.inputClearIcon })));
|
|
586
585
|
}
|
|
587
|
-
/**
|
|
588
|
-
* The ionic theme keeps the label above a field box that wraps the slots and
|
|
589
|
-
* the input, so the label can size independently of the slotted content.
|
|
590
|
-
*/
|
|
591
|
-
renderIonicField() {
|
|
592
|
-
return [
|
|
593
|
-
this.renderLabel(),
|
|
594
|
-
h("div", { key: "inner", class: "input-wrapper-inner" }, h("div", { key: "outline", class: "input-outline" }), this.renderStartContainer(), h("div", { key: "control", class: "input-control" }, h("div", { class: "native-wrapper", onClick: this.onLabelClick }, this.renderNativeInput())), this.renderEndContainer()),
|
|
595
|
-
];
|
|
596
|
-
}
|
|
597
|
-
/**
|
|
598
|
-
* The ios and md themes nest the label alongside the input so a floating
|
|
599
|
-
* label can escape the control and clear the start and end slots.
|
|
600
|
-
*/
|
|
601
586
|
renderStartContainer() {
|
|
602
587
|
return (h("div", { key: "start", class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { name: "start" })));
|
|
603
588
|
}
|
|
604
589
|
renderEndContainer() {
|
|
605
590
|
return (h("div", { key: "end", class: "input-end" }, this.renderClearButton(), h("slot", { name: "end" })));
|
|
606
591
|
}
|
|
607
|
-
|
|
592
|
+
/**
|
|
593
|
+
* Every theme renders the same label and control structure, aside from the md
|
|
594
|
+
* outline container below. The label is nested alongside the input so the ios
|
|
595
|
+
* and md floating label can escape the control and clear the start and end
|
|
596
|
+
* slots. The ionic theme lifts it above the field with grid instead.
|
|
597
|
+
*/
|
|
598
|
+
renderField() {
|
|
608
599
|
const hasOutlineFill = getIonTheme(this) === 'md' && this.getFill() === 'outline';
|
|
609
600
|
return [
|
|
610
601
|
hasOutlineFill && this.renderOutlineContainer(),
|
|
@@ -626,16 +617,9 @@ const Input = class {
|
|
|
626
617
|
if (this.clearInputIcon != null) {
|
|
627
618
|
return this.clearInputIcon;
|
|
628
619
|
}
|
|
629
|
-
// Determine the theme and map to default
|
|
620
|
+
// Determine the theme and map to the default icon
|
|
630
621
|
const theme = getIonTheme(this);
|
|
631
|
-
const
|
|
632
|
-
ios: closeCircle,
|
|
633
|
-
ionic: xSvg,
|
|
634
|
-
md: closeSharp,
|
|
635
|
-
};
|
|
636
|
-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
637
|
-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
|
|
638
|
-
// Return the configured input clear icon or the default icon
|
|
622
|
+
const defaultIcon = theme === 'ios' ? closeCircle : closeSharp;
|
|
639
623
|
return config.get('inputClearIcon', defaultIcon);
|
|
640
624
|
}
|
|
641
625
|
render() {
|
|
@@ -654,7 +638,7 @@ const Input = class {
|
|
|
654
638
|
* the input has a value or is focused.
|
|
655
639
|
*/
|
|
656
640
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
|
|
657
|
-
return (h(Host, { key: '
|
|
641
|
+
return (h(Host, { key: '82d13bcc33e5817aa3afcc0c752cdca87301b1c7', class: createColorClasses(this.color, {
|
|
658
642
|
[theme]: true,
|
|
659
643
|
'has-value': hasValue,
|
|
660
644
|
'has-focus': hasFocus,
|
|
@@ -667,7 +651,7 @@ const Input = class {
|
|
|
667
651
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
668
652
|
'input-disabled': disabled,
|
|
669
653
|
'input-readonly': readonly,
|
|
670
|
-
}) }, h("label", { key: '
|
|
654
|
+
}) }, h("label", { key: '53d8b948776361505a9bc47a4a2e8544d05f6856', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderField(), shouldRenderHighlight && h("div", { key: 'f4c81c4927a685d1474bb4510ad25eb51f77cd99', class: "input-highlight" })), this.renderBottomContent()));
|
|
671
655
|
}
|
|
672
656
|
get el() { return getElement(this); }
|
|
673
657
|
static get watchers() { return {
|
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, i as forceUpdate, e as config, h, d as Host, g as getElement, c as createEvent } from './index-jsOqXOKf.js';
|
|
5
|
-
import { c as caretRightSvg } from './caret-right-BYSs-jZz.js';
|
|
6
5
|
import { b as inheritAttributes, r as raf } from './helpers-DTqW6MzS.js';
|
|
7
6
|
import { h as hostContext, c as createColorClasses, o as openURL } from './theme-BUF_V-Kg.js';
|
|
8
|
-
import { b as chevronForward } from './index-
|
|
7
|
+
import { b as chevronForward } from './index-BkJpfpXI.js';
|
|
9
8
|
import { c as getIonTheme, b as getIonMode } from './ionic-global-oK2heABF.js';
|
|
10
9
|
import './focus-visible-vXpMhGrs.js';
|
|
11
10
|
import './dir-Dojwmvde.js';
|
|
@@ -235,29 +234,25 @@ const Item = class {
|
|
|
235
234
|
const controls = this.el.querySelectorAll('ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled]), ion-input:not([disabled]), ion-textarea:not([disabled])');
|
|
236
235
|
return controls[0];
|
|
237
236
|
}
|
|
237
|
+
/**
|
|
238
|
+
* Get the icon to use for the detail icon.
|
|
239
|
+
* If an icon is set on the component, use that.
|
|
240
|
+
* Otherwise, use the icon set in the config.
|
|
241
|
+
* If no icon is set in the config, use the default icon.
|
|
242
|
+
*/
|
|
238
243
|
get itemDetailIcon() {
|
|
239
244
|
// Return the icon if it is explicitly set
|
|
240
245
|
if (this.detailIcon != null) {
|
|
241
246
|
return this.detailIcon;
|
|
242
247
|
}
|
|
243
|
-
|
|
244
|
-
const theme = getIonTheme(this);
|
|
245
|
-
const defaultIcons = {
|
|
246
|
-
ios: chevronForward,
|
|
247
|
-
ionic: caretRightSvg,
|
|
248
|
-
md: chevronForward,
|
|
249
|
-
};
|
|
250
|
-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
251
|
-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
|
|
252
|
-
// Return the configured item detail icon or the default icon
|
|
253
|
-
return config.get('itemDetailIcon', defaultIcon);
|
|
248
|
+
return config.get('itemDetailIcon', chevronForward);
|
|
254
249
|
}
|
|
255
250
|
/**
|
|
256
251
|
* The icon should be flipped when the app is RTL and
|
|
257
252
|
* the icon is a variation of chevron.
|
|
258
253
|
*/
|
|
259
254
|
get shouldFlipIcon() {
|
|
260
|
-
return this.itemDetailIcon === chevronForward
|
|
255
|
+
return this.itemDetailIcon === chevronForward;
|
|
261
256
|
}
|
|
262
257
|
render() {
|
|
263
258
|
const { detail, download, labelColorStyles, lines, disabled, href, itemDetailIcon, shouldFlipIcon, rel, target, routerAnimation, routerDirection, inheritedAriaAttributes, multipleInputs, } = this;
|
|
@@ -336,7 +331,7 @@ const Item = class {
|
|
|
336
331
|
* multi-input item, and in a clickable item, which is a second tab stop.
|
|
337
332
|
*/
|
|
338
333
|
const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
|
|
339
|
-
return (h(Host, { key: '
|
|
334
|
+
return (h(Host, { key: '94668203071ec29cbcd4a435cded154d9a6f44e1', "aria-disabled": ariaDisabled, class: {
|
|
340
335
|
...childStyles,
|
|
341
336
|
...labelColorStyles,
|
|
342
337
|
...createColorClasses(this.color, {
|
|
@@ -353,7 +348,7 @@ const Item = class {
|
|
|
353
348
|
'ion-focusable': this.focusable,
|
|
354
349
|
'item-rtl': document.dir === 'rtl',
|
|
355
350
|
}),
|
|
356
|
-
}, role: inList ? 'listitem' : null }, h(TagType, { key: '
|
|
351
|
+
}, role: inList ? 'listitem' : null }, h(TagType, { key: '5d806a372a58368735fa9ec5d7a91fb9fb0177a1', ...attrs, ...inheritedAriaAttributes, class: "item-native", part: "native", disabled: disabled, ...clickFn }, h("slot", { key: 'f51ab92aa48af5e6061e4ce6054ce758913849e9', name: "start", onSlotchange: this.updateInteractivityOnSlotChange }), h("div", { key: '7f843e3fc8446f137c2ab8e3b9ec761816537f88', class: "item-inner", part: "inner" }, h("div", { key: '7427ac82b29335459ec3b9c8f07d8b92faee675e', class: "input-wrapper", part: "container" }, h("slot", { key: '99306e28323143b5e4b83f548fcbbe693684128b', onSlotchange: this.updateInteractivityOnSlotChange })), h("slot", { key: 'c0da503cade4c5be74c1a06cbda6d381569b0819', name: "end", onSlotchange: this.updateInteractivityOnSlotChange }), showDetail && (h("ion-icon", { key: 'a4422494c8715cf258655ccc1e1dd7ffd9cc13eb', icon: itemDetailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": shouldFlipIcon }))), canActivate && theme === 'md' && h("ion-ripple-effect", { key: '16aa4720ebfbdc1669cec2769780b4cfc8f775ed' }))));
|
|
357
352
|
}
|
|
358
353
|
get el() { return getElement(this); }
|
|
359
354
|
static get watchers() { return {
|
|
@@ -9,8 +9,7 @@ import { b as getIonMode, a as isPlatform, c as getIonTheme, s as shouldUseClose
|
|
|
9
9
|
import { p as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-DTqW6MzS.js';
|
|
10
10
|
import { m as menuController } from './index-C2QkTAgc.js';
|
|
11
11
|
import { h as hostContext, c as createColorClasses } from './theme-BUF_V-Kg.js';
|
|
12
|
-
import {
|
|
13
|
-
import { u as menuSharp, v as menuOutline } from './index-BqQ15K9a.js';
|
|
12
|
+
import { u as menuOutline, v as menuSharp } from './index-BkJpfpXI.js';
|
|
14
13
|
import './framework-delegate-DUQ69ajj.js';
|
|
15
14
|
import './focus-visible-vXpMhGrs.js';
|
|
16
15
|
import './dir-Dojwmvde.js';
|
|
@@ -750,17 +749,15 @@ const MenuButton = class {
|
|
|
750
749
|
async visibilityChanged() {
|
|
751
750
|
this.visible = await updateVisibility(this.menu);
|
|
752
751
|
}
|
|
752
|
+
/**
|
|
753
|
+
* Get the icon to use for the menu icon.
|
|
754
|
+
* Use the icon set in the config.
|
|
755
|
+
* If no icon is set in the config, use the default icon.
|
|
756
|
+
*/
|
|
753
757
|
get menuIcon() {
|
|
754
|
-
// Determine the theme and map to default
|
|
758
|
+
// Determine the theme and map to the default icon
|
|
755
759
|
const theme = getIonTheme(this);
|
|
756
|
-
const
|
|
757
|
-
ios: menuOutline,
|
|
758
|
-
ionic: listSvg,
|
|
759
|
-
md: menuSharp,
|
|
760
|
-
};
|
|
761
|
-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
762
|
-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
|
|
763
|
-
// Return the configured menu icon or the default icon
|
|
760
|
+
const defaultIcon = theme === 'ios' ? menuOutline : menuSharp;
|
|
764
761
|
return config.get('menuIcon', defaultIcon);
|
|
765
762
|
}
|
|
766
763
|
render() {
|
|
@@ -771,7 +768,7 @@ const MenuButton = class {
|
|
|
771
768
|
type: this.type,
|
|
772
769
|
};
|
|
773
770
|
const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
|
|
774
|
-
return (h(Host, { key: '
|
|
771
|
+
return (h(Host, { key: '0593ed9f0867e28fbb9d79e381282eef93343df8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
|
|
775
772
|
[theme]: true,
|
|
776
773
|
button: true, // ion-buttons target .button
|
|
777
774
|
'menu-button-hidden': hidden,
|
|
@@ -780,7 +777,7 @@ const MenuButton = class {
|
|
|
780
777
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
781
778
|
'ion-activatable': true,
|
|
782
779
|
'ion-focusable': true,
|
|
783
|
-
}) }, h("button", { key: '
|
|
780
|
+
}) }, h("button", { key: 'e61f71642db9b719eaf9b71e813fc271ea3b7343', ...attrs, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { key: '8e5bb04a8e56dd02c7c8b2d10166f095ac40e461', class: "button-inner" }, h("slot", { key: '23d1bce767d0d389380fe30b3cd94e6f7c5c98f6' }, h("ion-icon", { key: 'abc88761fa11b5cfa853b58411e1ee8a4f632859', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '77e328074a65be3b951cf7352aa7f9e82b7f1256', type: "unbounded" }))));
|
|
784
781
|
}
|
|
785
782
|
get el() { return getElement(this); }
|
|
786
783
|
};
|
|
@@ -10,7 +10,7 @@ import { b as getIonMode, c as getIonTheme } from './ionic-global-oK2heABF.js';
|
|
|
10
10
|
import { c as createAnimation } from './animation-DXpoXT3G.js';
|
|
11
11
|
import { E as ENABLE_HTML_CONTENT_DEFAULT } from './config-DWCzVL3Y.js';
|
|
12
12
|
import { s as sanitizeDOMString } from './index-B6qBfx1b.js';
|
|
13
|
-
import { l as arrowDown, m as caretBackSharp } from './index-
|
|
13
|
+
import { l as arrowDown, m as caretBackSharp } from './index-BkJpfpXI.js';
|
|
14
14
|
import { S as SPINNERS } from './spinner-configs-D4RIp70E.js';
|
|
15
15
|
import './focus-visible-vXpMhGrs.js';
|
|
16
16
|
import './dir-Dojwmvde.js';
|
|
@@ -979,8 +979,6 @@ Refresher.style = {
|
|
|
979
979
|
md: refresherMdCss()
|
|
980
980
|
};
|
|
981
981
|
|
|
982
|
-
const caretLeftFillSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJjdXJyZW50Q29sb3IiPjxwYXRoIGQ9Ik0xNjgsNDhWMjA4YTgsOCwwLDAsMS0xMy42Niw1LjY2bC04MC04MGE4LDgsMCwwLDEsMC0xMS4zMmw4MC04MEE4LDgsMCwwLDEsMTY4LDQ4WiIvPjwvc3ZnPg==';
|
|
983
|
-
|
|
984
982
|
const ionicRefresherContentCss = () => ``;
|
|
985
983
|
|
|
986
984
|
const iosRefresherContentCss = () => ``;
|
|
@@ -1008,6 +1006,14 @@ const RefresherContent = class {
|
|
|
1008
1006
|
this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', theme === 'ios' ? 'lines' : 'circular'));
|
|
1009
1007
|
}
|
|
1010
1008
|
}
|
|
1009
|
+
/**
|
|
1010
|
+
* Get the icon to use for the arrow icon.
|
|
1011
|
+
* Use the icon set in the config.
|
|
1012
|
+
* If no icon is set in the config, use the default icon.
|
|
1013
|
+
*/
|
|
1014
|
+
get refresherArrowIcon() {
|
|
1015
|
+
return config.get('refresherArrowIcon', caretBackSharp);
|
|
1016
|
+
}
|
|
1011
1017
|
renderPullingText() {
|
|
1012
1018
|
const { customHTMLEnabled, pullingText } = this;
|
|
1013
1019
|
if (customHTMLEnabled) {
|
|
@@ -1026,10 +1032,9 @@ const RefresherContent = class {
|
|
|
1026
1032
|
const pullingIcon = this.pullingIcon;
|
|
1027
1033
|
const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
|
|
1028
1034
|
const theme = getIonTheme(this);
|
|
1029
|
-
|
|
1030
|
-
return (h(Host, { key: '264b9869eb2357cc2acb3d2abde9538f2486bc60', class: {
|
|
1035
|
+
return (h(Host, { key: '79641f5cfcbae77afd812b4758984ecb191dda29', class: {
|
|
1031
1036
|
[theme]: true,
|
|
1032
|
-
} }, h("div", { key: '
|
|
1037
|
+
} }, h("div", { key: '3d6dedbcd0ad04d0a1cc2563a130ac8c53a34891', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (h("div", { key: '4dad78f16e6ee175bd55bd88e40ac33bbd492fc0', class: "refresher-pulling-icon" }, h("div", { key: '9d9b9a6c8f371e92aee43eca9d25768fe80aff8f', class: "spinner-arrow-container" }, h("ion-spinner", { key: '56c31feada2e1558f30b472a624e66cada7dd971', name: this.pullingIcon, paused: true }), (theme === 'md' || theme === 'ionic') && this.pullingIcon === 'circular' && (h("div", { key: 'ddb580acffb25ed3cf1c3e793594e4a7c93323bf', class: "arrow-container" }, h("ion-icon", { key: '2ef17431b18d0475e645062b3b98435a1adc2d01', icon: this.refresherArrowIcon, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (h("div", { key: 'd400ef684a1a3783709b1842f096b657950d7700', class: "refresher-pulling-icon" }, h("ion-icon", { key: '82e1c30d5c7e94c4420518722a1ddca406739e69', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), h("div", { key: '27a6e09db376a00d704d3880d4075580d8ea4fba', class: "refresher-refreshing" }, this.refreshingSpinner && (h("div", { key: '712b68c41b714fb3cf3f6403db4250a16df570cd', class: "refresher-refreshing-icon" }, h("ion-spinner", { key: '051829b30e40c8eed2a121f2b11cae2fa240a147', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
|
|
1033
1038
|
}
|
|
1034
1039
|
get el() { return getElement(this); }
|
|
1035
1040
|
};
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, e as config, h, d as Host, g as getElement, c as createEvent } from './index-jsOqXOKf.js';
|
|
5
|
-
import {
|
|
6
|
-
import { n as reorderTwoSharp, o as reorderThreeOutline } from './index-BqQ15K9a.js';
|
|
5
|
+
import { n as reorderThreeOutline, o as reorderTwoSharp } from './index-BkJpfpXI.js';
|
|
7
6
|
import { c as getIonTheme } from './ionic-global-oK2heABF.js';
|
|
8
7
|
import { a as findClosestIonContent, g as getScrollElement } from './index-CpKLzrYn.js';
|
|
9
8
|
import { r as raf } from './helpers-DTqW6MzS.js';
|
|
@@ -33,28 +32,21 @@ const Reorder = class {
|
|
|
33
32
|
}
|
|
34
33
|
/**
|
|
35
34
|
* Get the icon to use for the handle icon.
|
|
36
|
-
*
|
|
35
|
+
* Use the icon set in the config.
|
|
37
36
|
* If no icon is set in the config, use the default icon.
|
|
38
37
|
*/
|
|
39
38
|
get reorderHandleIcon() {
|
|
40
|
-
// Determine the theme and map to default
|
|
39
|
+
// Determine the theme and map to the default icon
|
|
41
40
|
const theme = getIonTheme(this);
|
|
42
|
-
const
|
|
43
|
-
ios: reorderThreeOutline,
|
|
44
|
-
ionic: listSvg,
|
|
45
|
-
md: reorderTwoSharp,
|
|
46
|
-
};
|
|
47
|
-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
|
|
48
|
-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
|
|
49
|
-
// Return the configured reorder handle icon or the default icon
|
|
41
|
+
const defaultIcon = theme === 'ios' ? reorderThreeOutline : reorderTwoSharp;
|
|
50
42
|
return config.get('reorderHandleIcon', defaultIcon);
|
|
51
43
|
}
|
|
52
44
|
render() {
|
|
53
45
|
const { reorderHandleIcon } = this;
|
|
54
46
|
const theme = getIonTheme(this);
|
|
55
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: 'ba25a7b0b5ece6693f2431f562d63738efe1f831', class: {
|
|
56
48
|
[theme]: true,
|
|
57
|
-
} }, h("slot", { key: '
|
|
49
|
+
} }, h("slot", { key: 'b5afb5131bfb9bfce01a01d6b36e0a7408e14ec5' }, h("ion-icon", { key: '7e0d35640277a07b139d122939b0253a81dc785d', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
|
|
58
50
|
}
|
|
59
51
|
get el() { return getElement(this); }
|
|
60
52
|
};
|