@ionic/core 8.0.0 → 8.0.1-dev.11713879639.102f51a0

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.
Files changed (33) hide show
  1. package/components/ion-input.js +4 -3
  2. package/dist/cjs/ion-input.cjs.entry.js +4 -3
  3. package/dist/cjs/ionic.cjs.js +1 -1
  4. package/dist/collection/collection-manifest.json +2 -2
  5. package/dist/collection/components/datetime/test/color/datetime.e2e.js +14 -7
  6. package/dist/collection/components/input/input.js +4 -3
  7. package/dist/collection/components/toggle/test/enable-on-off-labels/toggle.e2e.js +51 -31
  8. package/dist/collection/utils/test/playwright/page/utils/goto.js +12 -3
  9. package/dist/docs.json +3 -3
  10. package/dist/esm/ion-input.entry.js +4 -3
  11. package/dist/esm/ionic.js +1 -1
  12. package/dist/esm-es5/ion-input.entry.js +1 -1
  13. package/dist/ionic/ionic.esm.js +1 -1
  14. package/dist/ionic/ionic.js +1 -1
  15. package/dist/ionic/{p-eda2459e.entry.js → p-34f26d8b.entry.js} +1 -1
  16. package/dist/ionic/{p-c4eafa12.system.entry.js → p-4761ae79.system.entry.js} +1 -1
  17. package/dist/ionic/p-5895b91d.entry.js +4 -0
  18. package/dist/ionic/p-5f15ee76.entry.js +4 -0
  19. package/dist/ionic/p-629da37e.entry.js +4 -0
  20. package/dist/ionic/p-703f62c1.entry.js +4 -0
  21. package/dist/ionic/p-70f6b982.entry.js +4 -0
  22. package/dist/ionic/{p-c4e495a3.system.js → p-d8d6ebc0.system.js} +1 -1
  23. package/dist/ionic/p-e62d4a6c.entry.js +4 -0
  24. package/dist/ionic/p-eac224fa.entry.js +4 -0
  25. package/hydrate/index.js +5 -4
  26. package/package.json +1 -1
  27. package/dist/ionic/p-13cc6ee6.entry.js +0 -4
  28. package/dist/ionic/p-1fa53d02.entry.js +0 -4
  29. package/dist/ionic/p-23fdee0e.entry.js +0 -4
  30. package/dist/ionic/p-495ed1c3.entry.js +0 -4
  31. package/dist/ionic/p-76971b4f.entry.js +0 -4
  32. package/dist/ionic/p-ae42c907.entry.js +0 -4
  33. package/dist/ionic/p-d73f49d0.entry.js +0 -4
@@ -175,6 +175,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
175
175
  * such as [type] in Angular.
176
176
  */
177
177
  this.onTypeChange();
178
+ this.debounceChanged();
178
179
  }
179
180
  componentDidRender() {
180
181
  var _a;
@@ -401,7 +402,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
401
402
  * TODO(FW-5592): Remove hasStartEndSlots condition
402
403
  */
403
404
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
404
- return (h(Host, { key: '51c797adf8a7a03e82e02d218addad81836e1e98', class: createColorClasses(this.color, {
405
+ return (h(Host, { key: '083568e68a2970485e93a84ad3b837c117e03fed', class: createColorClasses(this.color, {
405
406
  [mode]: true,
406
407
  'has-value': hasValue,
407
408
  'has-focus': hasFocus,
@@ -412,14 +413,14 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
412
413
  'in-item': inItem,
413
414
  'in-item-color': hostContext('ion-item.ion-color', this.el),
414
415
  'input-disabled': disabled,
415
- }) }, h("label", { key: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
416
+ }) }, h("label", { key: '5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '4af8df127e8194b4eeb8b16936a36489aee17009', class: "native-wrapper" }, h("slot", { key: '90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad', name: "start" }), h("input", Object.assign({ key: '0a5455e8c31beca48e08b97faa5e3e069822248f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '2f51b23231d9ca819d2af069f3d32df4e29d042d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
416
417
  /**
417
418
  * This prevents mobile browsers from
418
419
  * blurring the input when the clear
419
420
  * button is activated.
420
421
  */
421
422
  ev.preventDefault();
422
- }, onClick: this.clearTextInput }, h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
423
+ }, onClick: this.clearTextInput }, h("ion-icon", { key: '569290d2b83d2752cfda6b5d8a84c06945b5c943', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'c94a79a60d5d403941dd641202125367ad490e53', name: "end" })), shouldRenderHighlight && h("div", { key: 'b4f192ac376fdb1a2b0708797cac46f07818e962', class: "input-highlight" })), this.renderBottomContent()));
423
424
  }
424
425
  get el() { return this; }
425
426
  static get watchers() { return {
@@ -179,6 +179,7 @@ const Input = class {
179
179
  * such as [type] in Angular.
180
180
  */
181
181
  this.onTypeChange();
182
+ this.debounceChanged();
182
183
  }
183
184
  componentDidRender() {
184
185
  var _a;
@@ -405,7 +406,7 @@ const Input = class {
405
406
  * TODO(FW-5592): Remove hasStartEndSlots condition
406
407
  */
407
408
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
408
- return (index.h(index.Host, { key: '51c797adf8a7a03e82e02d218addad81836e1e98', class: theme.createColorClasses(this.color, {
409
+ return (index.h(index.Host, { key: '083568e68a2970485e93a84ad3b837c117e03fed', class: theme.createColorClasses(this.color, {
409
410
  [mode]: true,
410
411
  'has-value': hasValue,
411
412
  'has-focus': hasFocus,
@@ -416,14 +417,14 @@ const Input = class {
416
417
  'in-item': inItem,
417
418
  'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
418
419
  'input-disabled': disabled,
419
- }) }, index.h("label", { key: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, index.h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), index.h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
420
+ }) }, index.h("label", { key: '5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), index.h("div", { key: '4af8df127e8194b4eeb8b16936a36489aee17009', class: "native-wrapper" }, index.h("slot", { key: '90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad', name: "start" }), index.h("input", Object.assign({ key: '0a5455e8c31beca48e08b97faa5e3e069822248f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: '2f51b23231d9ca819d2af069f3d32df4e29d042d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
420
421
  /**
421
422
  * This prevents mobile browsers from
422
423
  * blurring the input when the clear
423
424
  * button is activated.
424
425
  */
425
426
  ev.preventDefault();
426
- }, onClick: this.clearTextInput }, index.h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? index$1.closeCircle : index$1.closeSharp }))), index.h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && index.h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
427
+ }, onClick: this.clearTextInput }, index.h("ion-icon", { key: '569290d2b83d2752cfda6b5d8a84c06945b5c943', "aria-hidden": "true", icon: mode === 'ios' ? index$1.closeCircle : index$1.closeSharp }))), index.h("slot", { key: 'c94a79a60d5d403941dd641202125367ad490e53', name: "end" })), shouldRenderHighlight && index.h("div", { key: 'b4f192ac376fdb1a2b0708797cac46f07818e962', class: "input-highlight" })), this.renderBottomContent()));
427
428
  }
428
429
  get el() { return index.getElement(this); }
429
430
  static get watchers() { return {
@@ -10,7 +10,7 @@ const appGlobals = require('./app-globals-5bfa2d7f.js');
10
10
  require('./ionic-global-62487d02.js');
11
11
 
12
12
  /*
13
- Stencil Client Patch Browser v4.15.0 | MIT Licensed | https://stenciljs.com
13
+ Stencil Client Patch Browser v4.16.0 | MIT Licensed | https://stenciljs.com
14
14
  */
15
15
  const patchBrowser = () => {
16
16
  {
@@ -96,8 +96,8 @@
96
96
  ],
97
97
  "compiler": {
98
98
  "name": "@stencil/core",
99
- "version": "4.15.0",
100
- "typescriptVersion": "5.4.4"
99
+ "version": "4.16.0",
100
+ "typescriptVersion": "5.4.5"
101
101
  },
102
102
  "collections": [
103
103
  {
@@ -6,15 +6,22 @@ import { configs, test } from "../../../../utils/test/playwright/index";
6
6
  /**
7
7
  * This behavior does not vary across directions
8
8
  */
9
- configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
9
+ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
10
10
  test.describe(title('datetime: color'), () => {
11
11
  test('should not have visual regressions', async ({ page }) => {
12
- await page.goto('/src/components/datetime/test/color', config);
13
- const datetime = page.locator('#color-datetime');
14
- await expect(datetime).toHaveScreenshot(screenshot(`datetime-color`));
15
- await page.evaluate(() => document.body.classList.toggle('dark'));
16
- await page.waitForChanges();
17
- await expect(datetime).toHaveScreenshot(screenshot(`datetime-color-dark`));
12
+ await page.setContent(`
13
+ <div id="container" style="width: 250px;">
14
+ <ion-datetime
15
+ color="danger"
16
+ value="2022-05-03"
17
+ show-default-title="true"
18
+ show-default-buttons="true"
19
+ ></ion-datetime>
20
+ </div>
21
+ `, config);
22
+ const container = page.locator('#container');
23
+ await page.locator('.datetime-ready').waitFor();
24
+ await expect(container).toHaveScreenshot(screenshot(`datetime-color`));
18
25
  });
19
26
  });
20
27
  });
@@ -169,6 +169,7 @@ export class Input {
169
169
  * such as [type] in Angular.
170
170
  */
171
171
  this.onTypeChange();
172
+ this.debounceChanged();
172
173
  }
173
174
  componentDidRender() {
174
175
  var _a;
@@ -395,7 +396,7 @@ export class Input {
395
396
  * TODO(FW-5592): Remove hasStartEndSlots condition
396
397
  */
397
398
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
398
- return (h(Host, { key: '51c797adf8a7a03e82e02d218addad81836e1e98', class: createColorClasses(this.color, {
399
+ return (h(Host, { key: '083568e68a2970485e93a84ad3b837c117e03fed', class: createColorClasses(this.color, {
399
400
  [mode]: true,
400
401
  'has-value': hasValue,
401
402
  'has-focus': hasFocus,
@@ -406,14 +407,14 @@ export class Input {
406
407
  'in-item': inItem,
407
408
  'in-item-color': hostContext('ion-item.ion-color', this.el),
408
409
  'input-disabled': disabled,
409
- }) }, h("label", { key: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
410
+ }) }, h("label", { key: '5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '4af8df127e8194b4eeb8b16936a36489aee17009', class: "native-wrapper" }, h("slot", { key: '90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad', name: "start" }), h("input", Object.assign({ key: '0a5455e8c31beca48e08b97faa5e3e069822248f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '2f51b23231d9ca819d2af069f3d32df4e29d042d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
410
411
  /**
411
412
  * This prevents mobile browsers from
412
413
  * blurring the input when the clear
413
414
  * button is activated.
414
415
  */
415
416
  ev.preventDefault();
416
- }, onClick: this.clearTextInput }, h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
417
+ }, onClick: this.clearTextInput }, h("ion-icon", { key: '569290d2b83d2752cfda6b5d8a84c06945b5c943', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'c94a79a60d5d403941dd641202125367ad490e53', name: "end" })), shouldRenderHighlight && h("div", { key: 'b4f192ac376fdb1a2b0708797cac46f07818e962', class: "input-highlight" })), this.renderBottomContent()));
417
418
  }
418
419
  static get is() { return "ion-input"; }
419
420
  static get encapsulation() { return "scoped"; }
@@ -3,39 +3,59 @@
3
3
  */
4
4
  import { expect } from "@playwright/test";
5
5
  import { configs, test } from "../../../../utils/test/playwright/index";
6
- configs().forEach(({ title, screenshot, config }) => {
7
- test.describe(title('toggle: enableOnOffLabels'), () => {
8
- test.beforeEach(async ({ page }) => {
9
- await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
10
- });
6
+ configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
7
+ test.describe(title('toggle: enable-on-off-labels'), () => {
11
8
  test('should not have visual regressions', async ({ page }) => {
12
- await page.setIonViewport();
13
- await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-diff`));
14
- });
15
- });
16
- });
17
- /**
18
- * This behavior does not vary across directions
19
- */
20
- configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
21
- test.describe(title('toggle: dark mode'), () => {
22
- test.beforeEach(async ({ page }) => {
23
- await page.goto(`/src/components/toggle/test/enable-on-off-labels`, config);
9
+ await page.setContent(`
10
+ <style>
11
+ #container {
12
+ display: grid;
13
+ grid-template-columns: repeat(2, auto);
14
+ justify-content: space-evenly;
15
+ gap: 8px;
16
+ padding: 16px 0;
17
+ }
18
+ </style>
19
+
20
+ <div id="container">
21
+ <ion-toggle enable-on-off-labels="true">Unchecked</ion-toggle>
22
+ <ion-toggle enable-on-off-labels="true" checked>Checked</ion-toggle>
23
+ </div>
24
+ `, config);
25
+ const container = page.locator('#container');
26
+ await expect(container).toHaveScreenshot(screenshot(`toggle-on-off-labels`));
24
27
  });
25
- test('should not have visual regressions', async ({ page }) => {
26
- const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
27
- const ionPopoverDidDismiss = await page.spyOnEvent('ionPopoverDidDismiss');
28
- await page.click('#popover-trigger');
29
- await ionPopoverDidPresent.next();
30
- await page.click('#dark-mode');
31
- await page.evaluate(() => {
32
- const popover = document.querySelector('ion-popover');
33
- return popover === null || popover === void 0 ? void 0 : popover.dismiss();
34
- });
35
- await ionPopoverDidDismiss.next();
36
- await page.waitForChanges();
37
- await page.setIonViewport();
38
- await expect(page).toHaveScreenshot(screenshot(`toggle-on-off-labels-dark-mode-diff`));
28
+ test('should not have visual regressions with color', async ({ page }) => {
29
+ await page.setContent(`
30
+ <style>
31
+ #container {
32
+ display: grid;
33
+ grid-template-columns: repeat(2, auto);
34
+ justify-content: space-evenly;
35
+ gap: 8px;
36
+ padding: 16px 0;
37
+ }
38
+ </style>
39
+
40
+ <div id="container">
41
+ <ion-toggle color="secondary" enable-on-off-labels="true">Unchecked</ion-toggle>
42
+ <ion-toggle color="secondary" enable-on-off-labels="true" checked>Checked</ion-toggle>
43
+ <ion-toggle color="success" enable-on-off-labels="true">Unchecked</ion-toggle>
44
+ <ion-toggle color="success" enable-on-off-labels="true" checked>Checked</ion-toggle>
45
+ <ion-toggle color="danger" enable-on-off-labels="true">Unchecked</ion-toggle>
46
+ <ion-toggle color="danger" enable-on-off-labels="true" checked>Checked</ion-toggle>
47
+ <ion-toggle color="tertiary" enable-on-off-labels="true">Unchecked</ion-toggle>
48
+ <ion-toggle color="tertiary" enable-on-off-labels="true" checked>Checked</ion-toggle>
49
+ <ion-toggle color="light" enable-on-off-labels="true">Unchecked</ion-toggle>
50
+ <ion-toggle color="light" enable-on-off-labels="true" checked>Checked</ion-toggle>
51
+ <ion-toggle color="medium" enable-on-off-labels="true">Unchecked</ion-toggle>
52
+ <ion-toggle color="medium" enable-on-off-labels="true" checked>Checked</ion-toggle>
53
+ <ion-toggle color="dark" enable-on-off-labels="true">Unchecked</ion-toggle>
54
+ <ion-toggle color="dark" enable-on-off-labels="true" checked>Checked</ion-toggle>
55
+ </div>
56
+ `, config);
57
+ const container = page.locator('#container');
58
+ await expect(container).toHaveScreenshot(screenshot(`toggle-on-off-labels-color`));
39
59
  });
40
60
  });
41
61
  });
@@ -9,7 +9,7 @@
9
9
  * to be hydrated before proceeding with the test.
10
10
  */
11
11
  export const goto = async (page, url, testInfo, originalFn, options) => {
12
- var _a, _b, _c;
12
+ var _a, _b, _c, _d;
13
13
  if (options === undefined && testInfo.project.metadata.mode === undefined) {
14
14
  throw new Error(`
15
15
  A config must be passed to page.goto to use a generator test:
@@ -22,13 +22,16 @@ configs().forEach(({ config, title }) => {
22
22
  }
23
23
  let mode;
24
24
  let direction;
25
+ let palette;
25
26
  if (options == undefined) {
26
27
  mode = testInfo.project.metadata.mode;
27
28
  direction = testInfo.project.metadata.rtl ? 'rtl' : 'ltr';
29
+ palette = testInfo.project.metadata.palette;
28
30
  }
29
31
  else {
30
32
  mode = options.mode;
31
33
  direction = options.direction;
34
+ palette = options.palette;
32
35
  }
33
36
  const rtlString = direction === 'rtl' ? 'true' : undefined;
34
37
  const splitUrl = url.split('?');
@@ -40,12 +43,14 @@ configs().forEach(({ config, title }) => {
40
43
  const urlToParams = new URLSearchParams(paramsString);
41
44
  const formattedMode = (_a = urlToParams.get('ionic:mode')) !== null && _a !== void 0 ? _a : mode;
42
45
  const formattedRtl = (_b = urlToParams.get('rtl')) !== null && _b !== void 0 ? _b : rtlString;
43
- const ionicTesting = (_c = urlToParams.get('ionic:_testing')) !== null && _c !== void 0 ? _c : true;
46
+ const formattedPalette = (_c = urlToParams.get('palette')) !== null && _c !== void 0 ? _c : palette;
47
+ const ionicTesting = (_d = urlToParams.get('ionic:_testing')) !== null && _d !== void 0 ? _d : true;
44
48
  /**
45
49
  * Pass through other custom query params
46
50
  */
47
51
  urlToParams.delete('ionic:mode');
48
52
  urlToParams.delete('rtl');
53
+ urlToParams.delete('palette');
49
54
  urlToParams.delete('ionic:_testing');
50
55
  /**
51
56
  * Convert remaining query params to a string.
@@ -54,7 +59,7 @@ configs().forEach(({ config, title }) => {
54
59
  */
55
60
  const remainingQueryParams = decodeURIComponent(urlToParams.toString());
56
61
  const remainingQueryParamsString = remainingQueryParams == '' ? '' : `&${remainingQueryParams}`;
57
- const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}${remainingQueryParamsString}`;
62
+ const formattedUrl = `${splitUrl[0]}?ionic:_testing=${ionicTesting}&ionic:mode=${formattedMode}&rtl=${formattedRtl}&palette=${formattedPalette}${remainingQueryParamsString}`;
58
63
  testInfo.annotations.push({
59
64
  type: 'mode',
60
65
  description: formattedMode,
@@ -63,6 +68,10 @@ configs().forEach(({ config, title }) => {
63
68
  type: 'direction',
64
69
  description: formattedRtl === 'true' ? 'rtl' : 'ltr',
65
70
  });
71
+ testInfo.annotations.push({
72
+ type: 'palette',
73
+ description: formattedPalette,
74
+ });
66
75
  const result = await Promise.all([
67
76
  page.waitForFunction(() => window.testAppLoaded === true, { timeout: 4750 }),
68
77
  originalFn(formattedUrl, options),
package/dist/docs.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
- "timestamp": "2024-04-17T13:46:21",
2
+ "timestamp": "2024-04-23T13:42:46",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
- "version": "4.15.0",
6
- "typescriptVersion": "5.4.4"
5
+ "version": "4.16.0",
6
+ "typescriptVersion": "5.4.5"
7
7
  },
8
8
  "components": [
9
9
  {
@@ -175,6 +175,7 @@ const Input = class {
175
175
  * such as [type] in Angular.
176
176
  */
177
177
  this.onTypeChange();
178
+ this.debounceChanged();
178
179
  }
179
180
  componentDidRender() {
180
181
  var _a;
@@ -401,7 +402,7 @@ const Input = class {
401
402
  * TODO(FW-5592): Remove hasStartEndSlots condition
402
403
  */
403
404
  const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
404
- return (h(Host, { key: '51c797adf8a7a03e82e02d218addad81836e1e98', class: createColorClasses(this.color, {
405
+ return (h(Host, { key: '083568e68a2970485e93a84ad3b837c117e03fed', class: createColorClasses(this.color, {
405
406
  [mode]: true,
406
407
  'has-value': hasValue,
407
408
  'has-focus': hasFocus,
@@ -412,14 +413,14 @@ const Input = class {
412
413
  'in-item': inItem,
413
414
  'in-item-color': hostContext('ion-item.ion-color', this.el),
414
415
  'input-disabled': disabled,
415
- }) }, h("label", { key: '6d00404de6673d9c650162a8fd23acc8981bff05', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: 'ebb124f7f8a0c885043be776242648681a79a47c', class: "native-wrapper" }, h("slot", { key: '9075ddd2b68afa3f1989d09ab5b88403eb20aa00', name: "start" }), h("input", Object.assign({ key: '8be4b3cd6b438742d62db98e00ee788a03673ca4', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f06624d084ac036981e499b6145bee957311fc74', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
416
+ }) }, h("label", { key: '5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf', class: "input-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '4af8df127e8194b4eeb8b16936a36489aee17009', class: "native-wrapper" }, h("slot", { key: '90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad', name: "start" }), h("input", Object.assign({ key: '0a5455e8c31beca48e08b97faa5e3e069822248f', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: '2f51b23231d9ca819d2af069f3d32df4e29d042d', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
416
417
  /**
417
418
  * This prevents mobile browsers from
418
419
  * blurring the input when the clear
419
420
  * button is activated.
420
421
  */
421
422
  ev.preventDefault();
422
- }, onClick: this.clearTextInput }, h("ion-icon", { key: 'aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: '67abecd72bf5a764e79504b59d9934dbeb66cff9', name: "end" })), shouldRenderHighlight && h("div", { key: '048a7aa3cc8fef97a34f2b25de10730a1de30c0e', class: "input-highlight" })), this.renderBottomContent()));
423
+ }, onClick: this.clearTextInput }, h("ion-icon", { key: '569290d2b83d2752cfda6b5d8a84c06945b5c943', "aria-hidden": "true", icon: mode === 'ios' ? closeCircle : closeSharp }))), h("slot", { key: 'c94a79a60d5d403941dd641202125367ad490e53', name: "end" })), shouldRenderHighlight && h("div", { key: 'b4f192ac376fdb1a2b0708797cac46f07818e962', class: "input-highlight" })), this.renderBottomContent()));
423
424
  }
424
425
  get el() { return getElement(this); }
425
426
  static get watchers() { return {
package/dist/esm/ionic.js CHANGED
@@ -7,7 +7,7 @@ import { g as globalScripts } from './app-globals-49873df1.js';
7
7
  import './ionic-global-e6c98cd0.js';
8
8
 
9
9
  /*
10
- Stencil Client Patch Browser v4.15.0 | MIT Licensed | https://stenciljs.com
10
+ Stencil Client Patch Browser v4.16.0 | MIT Licensed | https://stenciljs.com
11
11
  */
12
12
  const patchBrowser = () => {
13
13
  {
@@ -1,4 +1,4 @@
1
1
  import{__awaiter,__generator}from"tslib";
2
2
  /*!
3
3
  * (C) Ionic http://ionicframework.com - MIT License
4
- */import{r as registerInstance,d as createEvent,h,f as Host,i as getElement,j as forceUpdate}from"./index-bcd8859b.js";import{c as createNotchController}from"./notch-controller-55b09e11.js";import{e as debounceEvent,i as inheritAriaAttributes,h as inheritAttributes,c as componentOnReady}from"./helpers-da915de8.js";import{c as createSlotMutationController,g as getCounterText}from"./input.utils-09c71bc7.js";import{h as hostContext,c as createColorClasses}from"./theme-01f3f29c.js";import{b as closeCircle,d as closeSharp}from"./index-e2cf2ceb.js";import{b as getIonMode}from"./ionic-global-e6c98cd0.js";import"./index-a5d50daf.js";import"./index-9b0d46f4.js";var inputIosCss=".sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}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:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-ios-h,.input-label-placement-stacked.sc-ion-input-ios-h{min-height:56px}.native-input.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width: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{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-ios{inset-inline-start:0}.cloned-input.sc-ion-input-ios:disabled{opacity:1}.input-clear-icon.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;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;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));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}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.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}.native-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.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;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem}.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;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.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;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.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}.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-wrapper.sc-ion-input-ios{-ms-flex-direction:row;flex-direction:row}.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 .input-wrapper.sc-ion-input-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.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}.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-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .input-wrapper.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-stacked.sc-ion-input-ios-h input.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.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}.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)}.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[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{display:none}.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{width:18px;height: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}";var IonInputIosStyle0=inputIosCss;var inputMdCss=".sc-ion-input-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item[slot=start].sc-ion-input-md-h,ion-item [slot=start].sc-ion-input-md-h,ion-item[slot=end].sc-ion-input-md-h,ion-item [slot=end].sc-ion-input-md-h{width:auto}.ion-color.sc-ion-input-md-h{--highlight-color-focused:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-md-h,.input-label-placement-stacked.sc-ion-input-md-h{min-height:56px}.native-input.sc-ion-input-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width: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-md::-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-md::-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-md:-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-md::-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-md::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-md:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-md:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-md::-ms-clear{display:none}.cloned-input.sc-ion-input-md{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-md{inset-inline-start:0}.cloned-input.sc-ion-input-md:disabled{opacity:1}.input-clear-icon.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;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;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{color:inherit}.input-clear-icon.sc-ion-input-md:focus{opacity:0.5}.has-value.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{visibility:visible}.input-wrapper.sc-ion-input-md{-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}.native-wrapper.sc-ion-input-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.ion-touched.ion-invalid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-md{-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;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:block;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:block}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:none}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.has-focus.sc-ion-input-md-h input.sc-ion-input-md{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-md{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}.label-text.sc-ion-input-md,.sc-ion-input-md-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-md,.input-outline-notch-hidden.sc-ion-input-md{display:none}.input-wrapper.sc-ion-input-md input.sc-ion-input-md{-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-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row;flex-direction:row}.input-label-placement-start.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-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-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-end.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-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-md-h .label-text-wrapper.sc-ion-input-md{-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-fixed.sc-ion-input-md-h .label-text.sc-ion-input-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-md-h .input-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md,.has-value.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:1}.label-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.sc-ion-input-md-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-md-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-md-h[disabled].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[disabled] .sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly] .sc-ion-input-md-s>ion-input-password-toggle{display:none}.input-fill-solid.sc-ion-input-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.has-focus.input-fill-solid.ion-valid.sc-ion-input-md-h,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-fill-solid.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}@media (any-hover: hover){.input-fill-solid.sc-ion-input-md-h:hover{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-solid.has-focus.sc-ion-input-md-h{--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}.label-floating.input-fill-solid.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{max-width:calc(100% / 0.75)}.input-fill-outline.sc-ion-input-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-outline.input-shape-round.sc-ion-input-md-h{--border-radius:28px;--padding-start:32px;--padding-end:32px}.has-focus.input-fill-outline.ion-valid.sc-ion-input-md-h,.input-fill-outline.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}@media (any-hover: hover){.input-fill-outline.sc-ion-input-md-h:hover{--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-outline.has-focus.sc-ion-input-md-h{--border-width:var(--highlight-height);--border-color:var(--highlight-color)}.input-fill-outline.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}.input-fill-outline.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:none}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{position:relative}.label-floating.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}.input-fill-outline.sc-ion-input-md-h .input-outline-container.sc-ion-input-md{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{pointer-events:none}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color)}.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{max-width:calc(100% - var(--padding-start) - var(--padding-end))}.input-fill-outline.sc-ion-input-md-h .notch-spacer.sc-ion-input-md{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none;-webkit-box-sizing:content-box;box-sizing:content-box}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color);width:calc(var(--padding-start) - 4px)}.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}.label-floating.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{border-top:none}.sc-ion-input-md-h{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--highlight-height:2px;font-size:inherit}.input-clear-icon.sc-ion-input-md ion-icon.sc-ion-input-md{width:22px;height:22px}.input-disabled.sc-ion-input-md-h{opacity:0.38}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{letter-spacing:0.0333333333em}.input-label-placement-floating.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.has-focus.input-label-placement-floating.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.has-focus.input-label-placement-stacked.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.input-highlight.sc-ion-input-md{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.input-highlight.sc-ion-input-md{inset-inline-start:0}.has-focus.sc-ion-input-md-h .input-highlight.sc-ion-input-md{-webkit-transform:scale(1);transform:scale(1)}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{bottom:0}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{inset-inline-start:0}.input-shape-round.sc-ion-input-md-h{--border-radius:16px}.sc-ion-input-md-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-md-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}";var IonInputMdStyle0=inputMdCss;var Input=function(){function i(i){var t=this;registerInstance(this,i);this.ionInput=createEvent(this,"ionInput",7);this.ionChange=createEvent(this,"ionChange",7);this.ionBlur=createEvent(this,"ionBlur",7);this.ionFocus=createEvent(this,"ionFocus",7);this.inputId="ion-input-".concat(inputIds++);this.inheritedAttributes={};this.isComposing=false;this.didInputClearOnEdit=false;this.onInput=function(i){var n=i.target;if(n){t.value=n.value||""}t.emitInputChange(i)};this.onChange=function(i){t.emitValueChange(i)};this.onBlur=function(i){t.hasFocus=false;if(t.focusedValue!==t.value){t.emitValueChange(i)}t.didInputClearOnEdit=false;t.ionBlur.emit(i)};this.onFocus=function(i){t.hasFocus=true;t.focusedValue=t.value;t.ionFocus.emit(i)};this.onKeydown=function(i){t.checkClearOnEdit(i)};this.onCompositionStart=function(){t.isComposing=true};this.onCompositionEnd=function(){t.isComposing=false};this.clearTextInput=function(i){if(t.clearInput&&!t.readonly&&!t.disabled&&i){i.preventDefault();i.stopPropagation();t.setFocus()}t.value="";t.emitInputChange(i)};this.hasFocus=false;this.color=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.clearOnEdit=undefined;this.counter=false;this.counterFormatter=undefined;this.debounce=undefined;this.disabled=false;this.enterkeyhint=undefined;this.errorText=undefined;this.fill=undefined;this.inputmode=undefined;this.helperText=undefined;this.label=undefined;this.labelPlacement="start";this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.shape=undefined;this.spellcheck=false;this.step=undefined;this.type="text";this.value=""}i.prototype.debounceChanged=function(){var i=this,t=i.ionInput,n=i.debounce,o=i.originalIonInput;this.ionInput=n===undefined?o!==null&&o!==void 0?o:t:debounceEvent(t,n)};i.prototype.onTypeChange=function(){var i=this.el.querySelector("ion-input-password-toggle");if(i){i.type=this.type}};i.prototype.valueChanged=function(){var i=this.nativeInput;var t=this.getValue();if(i&&i.value!==t&&!this.isComposing){i.value=t}};i.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign(Object.assign({},inheritAriaAttributes(this.el)),inheritAttributes(this.el,["tabindex","title","data-form-type"]))};i.prototype.connectedCallback=function(){var i=this;var t=this.el;this.slotMutationController=createSlotMutationController(t,["label","start","end"],(function(){return forceUpdate(i)}));this.notchController=createNotchController(t,(function(){return i.notchSpacerEl}),(function(){return i.labelSlot}));this.debounceChanged();{document.dispatchEvent(new CustomEvent("ionInputDidLoad",{detail:this.el}))}};i.prototype.componentDidLoad=function(){this.originalIonInput=this.ionInput;this.onTypeChange()};i.prototype.componentDidRender=function(){var i;(i=this.notchController)===null||i===void 0?void 0:i.calculateNotchWidth()};i.prototype.disconnectedCallback=function(){{document.dispatchEvent(new CustomEvent("ionInputDidUnload",{detail:this.el}))}if(this.slotMutationController){this.slotMutationController.destroy();this.slotMutationController=undefined}if(this.notchController){this.notchController.destroy();this.notchController=undefined}};i.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};i.prototype.getInputElement=function(){return __awaiter(this,void 0,void 0,(function(){var i=this;return __generator(this,(function(t){switch(t.label){case 0:if(!!this.nativeInput)return[3,2];return[4,new Promise((function(t){return componentOnReady(i.el,t)}))];case 1:t.sent();t.label=2;case 2:return[2,Promise.resolve(this.nativeInput)]}}))}))};i.prototype.emitValueChange=function(i){var t=this.value;var n=t==null?t:t.toString();this.focusedValue=n;this.ionChange.emit({value:n,event:i})};i.prototype.emitInputChange=function(i){var t=this.value;var n=t==null?t:t.toString();this.ionInput.emit({value:n,event:i})};i.prototype.shouldClearOnEdit=function(){var i=this,t=i.type,n=i.clearOnEdit;return n===undefined?t==="password":n};i.prototype.getValue=function(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()};i.prototype.checkClearOnEdit=function(i){if(!this.shouldClearOnEdit()){return}var t=["Enter","Tab","Shift","Meta","Alt","Control"];var n=t.includes(i.key);if(!this.didInputClearOnEdit&&this.hasValue()&&!n){this.value="";this.emitInputChange(i)}if(!n){this.didInputClearOnEdit=true}};i.prototype.hasValue=function(){return this.getValue().length>0};i.prototype.renderHintText=function(){var i=this,t=i.helperText,n=i.errorText;return[h("div",{class:"helper-text"},t),h("div",{class:"error-text"},n)]};i.prototype.renderCounter=function(){var i=this,t=i.counter,n=i.maxlength,o=i.counterFormatter,e=i.value;if(t!==true||n===undefined){return}return h("div",{class:"counter"},getCounterText(e,n,o))};i.prototype.renderBottomContent=function(){var i=this,t=i.counter,n=i.helperText,o=i.errorText,e=i.maxlength;var r=!!n||!!o;var a=t===true&&e!==undefined;if(!r&&!a){return}return h("div",{class:"input-bottom"},this.renderHintText(),this.renderCounter())};i.prototype.renderLabel=function(){var i=this.label;return h("div",{class:{"label-text-wrapper":true,"label-text-wrapper-hidden":!this.hasLabel}},i===undefined?h("slot",{name:"label"}):h("div",{class:"label-text"},i))};Object.defineProperty(i.prototype,"labelSlot",{get:function(){return this.el.querySelector('[slot="label"]')},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"hasLabel",{get:function(){return this.label!==undefined||this.labelSlot!==null},enumerable:false,configurable:true});i.prototype.renderLabelContainer=function(){var i=this;var t=getIonMode(this);var n=t==="md"&&this.fill==="outline";if(n){return[h("div",{class:"input-outline-container"},h("div",{class:"input-outline-start"}),h("div",{class:{"input-outline-notch":true,"input-outline-notch-hidden":!this.hasLabel}},h("div",{class:"notch-spacer","aria-hidden":"true",ref:function(t){return i.notchSpacerEl=t}},this.label)),h("div",{class:"input-outline-end"})),this.renderLabel()]}return this.renderLabel()};i.prototype.render=function(){var i;var t=this;var n=this,o=n.disabled,e=n.fill,r=n.readonly,a=n.shape,l=n.inputId,s=n.labelPlacement,p=n.el,d=n.hasFocus;var c=getIonMode(this);var u=this.getValue();var m=hostContext("ion-item",this.el);var b=c==="md"&&e!=="outline"&&!m;var g=this.hasValue();var f=p.querySelector('[slot="start"], [slot="end"]')!==null;var v=s==="stacked"||s==="floating"&&(g||d||f);return h(Host,{key:"51c797adf8a7a03e82e02d218addad81836e1e98",class:createColorClasses(this.color,(i={},i[c]=true,i["has-value"]=g,i["has-focus"]=d,i["label-floating"]=v,i["input-fill-".concat(e)]=e!==undefined,i["input-shape-".concat(a)]=a!==undefined,i["input-label-placement-".concat(s)]=true,i["in-item"]=m,i["in-item-color"]=hostContext("ion-item.ion-color",this.el),i["input-disabled"]=o,i))},h("label",{key:"6d00404de6673d9c650162a8fd23acc8981bff05",class:"input-wrapper",htmlFor:l},this.renderLabelContainer(),h("div",{key:"ebb124f7f8a0c885043be776242648681a79a47c",class:"native-wrapper"},h("slot",{key:"9075ddd2b68afa3f1989d09ab5b88403eb20aa00",name:"start"}),h("input",Object.assign({key:"8be4b3cd6b438742d62db98e00ee788a03673ca4",class:"native-input",ref:function(i){return t.nativeInput=i},id:l,disabled:o,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:r,required:this.required,spellcheck:this.spellcheck,step:this.step,type:this.type,value:u,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeydown,onCompositionstart:this.onCompositionStart,onCompositionend:this.onCompositionEnd},this.inheritedAttributes)),this.clearInput&&!r&&!o&&h("button",{key:"f06624d084ac036981e499b6145bee957311fc74","aria-label":"reset",type:"button",class:"input-clear-icon",onPointerDown:function(i){i.preventDefault()},onClick:this.clearTextInput},h("ion-icon",{key:"aaa15a1ab70c008ee6b5e3c64abc1480e5732fc9","aria-hidden":"true",icon:c==="ios"?closeCircle:closeSharp})),h("slot",{key:"67abecd72bf5a764e79504b59d9934dbeb66cff9",name:"end"})),b&&h("div",{key:"048a7aa3cc8fef97a34f2b25de10730a1de30c0e",class:"input-highlight"})),this.renderBottomContent())};Object.defineProperty(i.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{debounce:["debounceChanged"],type:["onTypeChange"],value:["valueChanged"]}},enumerable:false,configurable:true});return i}();var inputIds=0;Input.style={ios:IonInputIosStyle0,md:IonInputMdStyle0};export{Input as ion_input};
4
+ */import{r as registerInstance,d as createEvent,h,f as Host,i as getElement,j as forceUpdate}from"./index-bcd8859b.js";import{c as createNotchController}from"./notch-controller-55b09e11.js";import{e as debounceEvent,i as inheritAriaAttributes,h as inheritAttributes,c as componentOnReady}from"./helpers-da915de8.js";import{c as createSlotMutationController,g as getCounterText}from"./input.utils-09c71bc7.js";import{h as hostContext,c as createColorClasses}from"./theme-01f3f29c.js";import{b as closeCircle,d as closeSharp}from"./index-e2cf2ceb.js";import{b as getIonMode}from"./ionic-global-e6c98cd0.js";import"./index-a5d50daf.js";import"./index-9b0d46f4.js";var inputIosCss=".sc-ion-input-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}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:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-ios-h,.input-label-placement-stacked.sc-ion-input-ios-h{min-height:56px}.native-input.sc-ion-input-ios{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width: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{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-ios{inset-inline-start:0}.cloned-input.sc-ion-input-ios:disabled{opacity:1}.input-clear-icon.sc-ion-input-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;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;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));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}.input-clear-icon.sc-ion-input-ios:focus{opacity:0.5}.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}.native-wrapper.sc-ion-input-ios{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.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;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem}.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;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.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;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.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}.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-wrapper.sc-ion-input-ios{-ms-flex-direction:row;flex-direction:row}.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 .input-wrapper.sc-ion-input-ios{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.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}.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-wrapper.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h .input-wrapper.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-stacked.sc-ion-input-ios-h input.sc-ion-input-ios,.input-label-placement-floating.sc-ion-input-ios-h input.sc-ion-input-ios{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.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}.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)}.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[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{display:none}.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{width:18px;height: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}";var IonInputIosStyle0=inputIosCss;var inputMdCss=".sc-ion-input-md-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:var(--ion-placeholder-opacity, 0.6);--padding-top:0px;--padding-end:0px;--padding-bottom:0px;--padding-start:0px;--background:transparent;--color:initial;--border-style:solid;--highlight-color-focused:var(--ion-color-primary, #0054e9);--highlight-color-valid:var(--ion-color-success, #2dd55b);--highlight-color-invalid:var(--ion-color-danger, #c5000f);--highlight-color:var(--highlight-color-focused);display:block;position:relative;width:100%;min-height:44px;padding:0 !important;color:var(--color);font-family:var(--ion-font-family, inherit);z-index:2}ion-item[slot=start].sc-ion-input-md-h,ion-item [slot=start].sc-ion-input-md-h,ion-item[slot=end].sc-ion-input-md-h,ion-item [slot=end].sc-ion-input-md-h{width:auto}.ion-color.sc-ion-input-md-h{--highlight-color-focused:var(--ion-color-base)}.input-label-placement-floating.sc-ion-input-md-h,.input-label-placement-stacked.sc-ion-input-md-h{min-height:56px}.native-input.sc-ion-input-md{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:inline-block;position:relative;-ms-flex:1;flex:1;width:100%;max-width: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-md::-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-md::-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-md:-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-md::-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-md::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-md:-webkit-autofill{background-color:transparent}.native-input.sc-ion-input-md:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-ion-input-md::-ms-clear{display:none}.cloned-input.sc-ion-input-md{top:0;bottom:0;position:absolute;pointer-events:none}.cloned-input.sc-ion-input-md{inset-inline-start:0}.cloned-input.sc-ion-input-md:disabled{opacity:1}.input-clear-icon.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;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;width:30px;height:30px;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;color:var(--ion-color-step-600, var(--ion-text-color-step-400, #666666));visibility:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.in-item-color.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{color:inherit}.input-clear-icon.sc-ion-input-md:focus{opacity:0.5}.has-value.sc-ion-input-md-h .input-clear-icon.sc-ion-input-md{visibility:visible}.input-wrapper.sc-ion-input-md{-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}.native-wrapper.sc-ion-input-md{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;width:100%}.ion-touched.ion-invalid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-invalid)}.ion-valid.sc-ion-input-md-h{--highlight-color:var(--highlight-color-valid)}.input-bottom.sc-ion-input-md{-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;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;border-top:var(--border-width) var(--border-style) var(--border-color);font-size:0.75rem}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:none;color:var(--highlight-color-invalid)}.input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:block;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373))}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .error-text.sc-ion-input-md{display:block}.ion-touched.ion-invalid.sc-ion-input-md-h .input-bottom.sc-ion-input-md .helper-text.sc-ion-input-md{display:none}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{-webkit-margin-start:auto;margin-inline-start:auto;color:var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));white-space:nowrap;-webkit-padding-start:16px;padding-inline-start:16px}.has-focus.sc-ion-input-md-h input.sc-ion-input-md{caret-color:var(--highlight-color)}.label-text-wrapper.sc-ion-input-md{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}.label-text.sc-ion-input-md,.sc-ion-input-md-s>[slot=label]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.label-text-wrapper-hidden.sc-ion-input-md,.input-outline-notch-hidden.sc-ion-input-md{display:none}.input-wrapper.sc-ion-input-md input.sc-ion-input-md{-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-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row;flex-direction:row}.input-label-placement-start.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-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-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.input-label-placement-end.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-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-md-h .label-text-wrapper.sc-ion-input-md{-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-fixed.sc-ion-input-md-h .label-text.sc-ion-input-md{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.input-label-placement-stacked.sc-ion-input-md-h .input-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:start}.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;max-width:100%;z-index:2}[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:1px;margin-bottom:0}.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(100%) scale(1);transform:translateY(100%) scale(1)}.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:0}.has-focus.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md,.has-value.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{opacity:1}.label-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(50%) scale(0.75);transform:translateY(50%) scale(0.75);max-width:calc(100% / 0.75)}.sc-ion-input-md-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-md-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-md-h[disabled].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[disabled] .sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly].sc-ion-input-md-s>ion-input-password-toggle,.sc-ion-input-md-h[readonly] .sc-ion-input-md-s>ion-input-password-toggle{display:none}.input-fill-solid.sc-ion-input-md-h{--background:var(--ion-color-step-50, var(--ion-background-color-step-50, #f2f2f2));--border-color:var(--ion-color-step-500, var(--ion-background-color-step-500, gray));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:var(--border-width) var(--border-style) var(--border-color)}.has-focus.input-fill-solid.ion-valid.sc-ion-input-md-h,.input-fill-solid.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-fill-solid.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}@media (any-hover: hover){.input-fill-solid.sc-ion-input-md-h:hover{--background:var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-solid.has-focus.sc-ion-input-md-h{--background:var(--ion-color-step-150, var(--ion-background-color-step-150, #d9d9d9));--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}.input-fill-solid.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0px;border-end-start-radius:0px}.label-floating.input-fill-solid.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{max-width:calc(100% / 0.75)}.input-fill-outline.sc-ion-input-md-h{--border-color:var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));--border-radius:4px;--padding-start:16px;--padding-end:16px;min-height:56px}.input-fill-outline.input-shape-round.sc-ion-input-md-h{--border-radius:28px;--padding-start:32px;--padding-end:32px}.has-focus.input-fill-outline.ion-valid.sc-ion-input-md-h,.input-fill-outline.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}@media (any-hover: hover){.input-fill-outline.sc-ion-input-md-h:hover{--border-color:var(--ion-color-step-750, var(--ion-background-color-step-750, #404040))}}.input-fill-outline.has-focus.sc-ion-input-md-h{--border-width:var(--highlight-height);--border-color:var(--highlight-color)}.input-fill-outline.sc-ion-input-md-h .input-bottom.sc-ion-input-md{border-top:none}.input-fill-outline.sc-ion-input-md-h .input-wrapper.sc-ion-input-md{border-bottom:none}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:left top;transform-origin:left top;position:absolute;max-width:calc(100% - var(--padding-start) - var(--padding-end))}[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .sc-ion-input-md-h -no-combinator.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl].input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,[dir=rtl] .input-fill-outline.input-label-placement-floating.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h:dir(rtl) .label-text-wrapper.sc-ion-input-md{-webkit-transform-origin:right top;transform-origin:right top}}.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{position:relative}.label-floating.input-fill-outline.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{-webkit-transform:translateY(-32%) scale(0.75);transform:translateY(-32%) scale(0.75);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;max-width:calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75)}.input-fill-outline.input-label-placement-stacked.sc-ion-input-md-h input.sc-ion-input-md,.input-fill-outline.input-label-placement-floating.sc-ion-input-md-h input.sc-ion-input-md{margin-left:0;margin-right:0;margin-top:6px;margin-bottom:6px}.input-fill-outline.sc-ion-input-md-h .input-outline-container.sc-ion-input-md{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:100%}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{pointer-events:none}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md,.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{border-top:var(--border-width) var(--border-style) var(--border-color);border-bottom:var(--border-width) var(--border-style) var(--border-color)}.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{max-width:calc(100% - var(--padding-start) - var(--padding-end))}.input-fill-outline.sc-ion-input-md-h .notch-spacer.sc-ion-input-md{-webkit-padding-end:8px;padding-inline-end:8px;font-size:calc(1em * 0.75);opacity:0;pointer-events:none;-webkit-box-sizing:content-box;box-sizing:content-box}.input-fill-outline.sc-ion-input-md-h .input-outline-start.sc-ion-input-md{border-start-start-radius:var(--border-radius);border-start-end-radius:0px;border-end-end-radius:0px;border-end-start-radius:var(--border-radius);-webkit-border-start:var(--border-width) var(--border-style) var(--border-color);border-inline-start:var(--border-width) var(--border-style) var(--border-color);width:calc(var(--padding-start) - 4px)}.input-fill-outline.sc-ion-input-md-h .input-outline-end.sc-ion-input-md{-webkit-border-end:var(--border-width) var(--border-style) var(--border-color);border-inline-end:var(--border-width) var(--border-style) var(--border-color);border-start-start-radius:0px;border-start-end-radius:var(--border-radius);border-end-end-radius:var(--border-radius);border-end-start-radius:0px;-ms-flex-positive:1;flex-grow:1}.label-floating.input-fill-outline.sc-ion-input-md-h .input-outline-notch.sc-ion-input-md{border-top:none}.sc-ion-input-md-h{--border-width:1px;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.13)))));--highlight-height:2px;font-size:inherit}.input-clear-icon.sc-ion-input-md ion-icon.sc-ion-input-md{width:22px;height:22px}.input-disabled.sc-ion-input-md-h{opacity:0.38}.has-focus.ion-valid.sc-ion-input-md-h,.ion-touched.ion-invalid.sc-ion-input-md-h{--border-color:var(--highlight-color)}.input-bottom.sc-ion-input-md .counter.sc-ion-input-md{letter-spacing:0.0333333333em}.input-label-placement-floating.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.has-focus.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.has-focus.input-label-placement-floating.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-floating.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.has-focus.input-label-placement-stacked.ion-valid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md,.input-label-placement-stacked.ion-touched.ion-invalid.sc-ion-input-md-h .label-text-wrapper.sc-ion-input-md{color:var(--highlight-color)}.input-highlight.sc-ion-input-md{bottom:-1px;position:absolute;width:100%;height:var(--highlight-height);-webkit-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 200ms;transition:-webkit-transform 200ms;transition:transform 200ms;transition:transform 200ms, -webkit-transform 200ms;background:var(--highlight-color)}.input-highlight.sc-ion-input-md{inset-inline-start:0}.has-focus.sc-ion-input-md-h .input-highlight.sc-ion-input-md{-webkit-transform:scale(1);transform:scale(1)}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{bottom:0}.in-item.sc-ion-input-md-h .input-highlight.sc-ion-input-md{inset-inline-start:0}.input-shape-round.sc-ion-input-md-h{--border-radius:16px}.sc-ion-input-md-s>ion-button[slot=start].button-has-icon-only,.sc-ion-input-md-s>ion-button[slot=end].button-has-icon-only{--border-radius:50%;--padding-start:8px;--padding-end:8px;--padding-top:8px;--padding-bottom:8px;aspect-ratio:1;min-height:40px}";var IonInputMdStyle0=inputMdCss;var Input=function(){function i(i){var t=this;registerInstance(this,i);this.ionInput=createEvent(this,"ionInput",7);this.ionChange=createEvent(this,"ionChange",7);this.ionBlur=createEvent(this,"ionBlur",7);this.ionFocus=createEvent(this,"ionFocus",7);this.inputId="ion-input-".concat(inputIds++);this.inheritedAttributes={};this.isComposing=false;this.didInputClearOnEdit=false;this.onInput=function(i){var n=i.target;if(n){t.value=n.value||""}t.emitInputChange(i)};this.onChange=function(i){t.emitValueChange(i)};this.onBlur=function(i){t.hasFocus=false;if(t.focusedValue!==t.value){t.emitValueChange(i)}t.didInputClearOnEdit=false;t.ionBlur.emit(i)};this.onFocus=function(i){t.hasFocus=true;t.focusedValue=t.value;t.ionFocus.emit(i)};this.onKeydown=function(i){t.checkClearOnEdit(i)};this.onCompositionStart=function(){t.isComposing=true};this.onCompositionEnd=function(){t.isComposing=false};this.clearTextInput=function(i){if(t.clearInput&&!t.readonly&&!t.disabled&&i){i.preventDefault();i.stopPropagation();t.setFocus()}t.value="";t.emitInputChange(i)};this.hasFocus=false;this.color=undefined;this.autocapitalize="off";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.clearOnEdit=undefined;this.counter=false;this.counterFormatter=undefined;this.debounce=undefined;this.disabled=false;this.enterkeyhint=undefined;this.errorText=undefined;this.fill=undefined;this.inputmode=undefined;this.helperText=undefined;this.label=undefined;this.labelPlacement="start";this.max=undefined;this.maxlength=undefined;this.min=undefined;this.minlength=undefined;this.multiple=undefined;this.name=this.inputId;this.pattern=undefined;this.placeholder=undefined;this.readonly=false;this.required=false;this.shape=undefined;this.spellcheck=false;this.step=undefined;this.type="text";this.value=""}i.prototype.debounceChanged=function(){var i=this,t=i.ionInput,n=i.debounce,o=i.originalIonInput;this.ionInput=n===undefined?o!==null&&o!==void 0?o:t:debounceEvent(t,n)};i.prototype.onTypeChange=function(){var i=this.el.querySelector("ion-input-password-toggle");if(i){i.type=this.type}};i.prototype.valueChanged=function(){var i=this.nativeInput;var t=this.getValue();if(i&&i.value!==t&&!this.isComposing){i.value=t}};i.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign(Object.assign({},inheritAriaAttributes(this.el)),inheritAttributes(this.el,["tabindex","title","data-form-type"]))};i.prototype.connectedCallback=function(){var i=this;var t=this.el;this.slotMutationController=createSlotMutationController(t,["label","start","end"],(function(){return forceUpdate(i)}));this.notchController=createNotchController(t,(function(){return i.notchSpacerEl}),(function(){return i.labelSlot}));this.debounceChanged();{document.dispatchEvent(new CustomEvent("ionInputDidLoad",{detail:this.el}))}};i.prototype.componentDidLoad=function(){this.originalIonInput=this.ionInput;this.onTypeChange();this.debounceChanged()};i.prototype.componentDidRender=function(){var i;(i=this.notchController)===null||i===void 0?void 0:i.calculateNotchWidth()};i.prototype.disconnectedCallback=function(){{document.dispatchEvent(new CustomEvent("ionInputDidUnload",{detail:this.el}))}if(this.slotMutationController){this.slotMutationController.destroy();this.slotMutationController=undefined}if(this.notchController){this.notchController.destroy();this.notchController=undefined}};i.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(i){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};i.prototype.getInputElement=function(){return __awaiter(this,void 0,void 0,(function(){var i=this;return __generator(this,(function(t){switch(t.label){case 0:if(!!this.nativeInput)return[3,2];return[4,new Promise((function(t){return componentOnReady(i.el,t)}))];case 1:t.sent();t.label=2;case 2:return[2,Promise.resolve(this.nativeInput)]}}))}))};i.prototype.emitValueChange=function(i){var t=this.value;var n=t==null?t:t.toString();this.focusedValue=n;this.ionChange.emit({value:n,event:i})};i.prototype.emitInputChange=function(i){var t=this.value;var n=t==null?t:t.toString();this.ionInput.emit({value:n,event:i})};i.prototype.shouldClearOnEdit=function(){var i=this,t=i.type,n=i.clearOnEdit;return n===undefined?t==="password":n};i.prototype.getValue=function(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()};i.prototype.checkClearOnEdit=function(i){if(!this.shouldClearOnEdit()){return}var t=["Enter","Tab","Shift","Meta","Alt","Control"];var n=t.includes(i.key);if(!this.didInputClearOnEdit&&this.hasValue()&&!n){this.value="";this.emitInputChange(i)}if(!n){this.didInputClearOnEdit=true}};i.prototype.hasValue=function(){return this.getValue().length>0};i.prototype.renderHintText=function(){var i=this,t=i.helperText,n=i.errorText;return[h("div",{class:"helper-text"},t),h("div",{class:"error-text"},n)]};i.prototype.renderCounter=function(){var i=this,t=i.counter,n=i.maxlength,o=i.counterFormatter,e=i.value;if(t!==true||n===undefined){return}return h("div",{class:"counter"},getCounterText(e,n,o))};i.prototype.renderBottomContent=function(){var i=this,t=i.counter,n=i.helperText,o=i.errorText,e=i.maxlength;var r=!!n||!!o;var a=t===true&&e!==undefined;if(!r&&!a){return}return h("div",{class:"input-bottom"},this.renderHintText(),this.renderCounter())};i.prototype.renderLabel=function(){var i=this.label;return h("div",{class:{"label-text-wrapper":true,"label-text-wrapper-hidden":!this.hasLabel}},i===undefined?h("slot",{name:"label"}):h("div",{class:"label-text"},i))};Object.defineProperty(i.prototype,"labelSlot",{get:function(){return this.el.querySelector('[slot="label"]')},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"hasLabel",{get:function(){return this.label!==undefined||this.labelSlot!==null},enumerable:false,configurable:true});i.prototype.renderLabelContainer=function(){var i=this;var t=getIonMode(this);var n=t==="md"&&this.fill==="outline";if(n){return[h("div",{class:"input-outline-container"},h("div",{class:"input-outline-start"}),h("div",{class:{"input-outline-notch":true,"input-outline-notch-hidden":!this.hasLabel}},h("div",{class:"notch-spacer","aria-hidden":"true",ref:function(t){return i.notchSpacerEl=t}},this.label)),h("div",{class:"input-outline-end"})),this.renderLabel()]}return this.renderLabel()};i.prototype.render=function(){var i;var t=this;var n=this,o=n.disabled,e=n.fill,r=n.readonly,a=n.shape,l=n.inputId,s=n.labelPlacement,p=n.el,d=n.hasFocus;var c=getIonMode(this);var u=this.getValue();var m=hostContext("ion-item",this.el);var b=c==="md"&&e!=="outline"&&!m;var g=this.hasValue();var f=p.querySelector('[slot="start"], [slot="end"]')!==null;var v=s==="stacked"||s==="floating"&&(g||d||f);return h(Host,{key:"083568e68a2970485e93a84ad3b837c117e03fed",class:createColorClasses(this.color,(i={},i[c]=true,i["has-value"]=g,i["has-focus"]=d,i["label-floating"]=v,i["input-fill-".concat(e)]=e!==undefined,i["input-shape-".concat(a)]=a!==undefined,i["input-label-placement-".concat(s)]=true,i["in-item"]=m,i["in-item-color"]=hostContext("ion-item.ion-color",this.el),i["input-disabled"]=o,i))},h("label",{key:"5e6767a20b8ac61d5df69106f4ce11ecc46ae5bf",class:"input-wrapper",htmlFor:l},this.renderLabelContainer(),h("div",{key:"4af8df127e8194b4eeb8b16936a36489aee17009",class:"native-wrapper"},h("slot",{key:"90e925fa36a5c057a4ca5e03d5fcaf8e12e711ad",name:"start"}),h("input",Object.assign({key:"0a5455e8c31beca48e08b97faa5e3e069822248f",class:"native-input",ref:function(i){return t.nativeInput=i},id:l,disabled:o,autoCapitalize:this.autocapitalize,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder||"",readOnly:r,required:this.required,spellcheck:this.spellcheck,step:this.step,type:this.type,value:u,onInput:this.onInput,onChange:this.onChange,onBlur:this.onBlur,onFocus:this.onFocus,onKeyDown:this.onKeydown,onCompositionstart:this.onCompositionStart,onCompositionend:this.onCompositionEnd},this.inheritedAttributes)),this.clearInput&&!r&&!o&&h("button",{key:"2f51b23231d9ca819d2af069f3d32df4e29d042d","aria-label":"reset",type:"button",class:"input-clear-icon",onPointerDown:function(i){i.preventDefault()},onClick:this.clearTextInput},h("ion-icon",{key:"569290d2b83d2752cfda6b5d8a84c06945b5c943","aria-hidden":"true",icon:c==="ios"?closeCircle:closeSharp})),h("slot",{key:"c94a79a60d5d403941dd641202125367ad490e53",name:"end"})),b&&h("div",{key:"b4f192ac376fdb1a2b0708797cac46f07818e962",class:"input-highlight"})),this.renderBottomContent())};Object.defineProperty(i.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(i,"watchers",{get:function(){return{debounce:["debounceChanged"],type:["onTypeChange"],value:["valueChanged"]}},enumerable:false,configurable:true});return i}();var inputIds=0;Input.style={ios:IonInputIosStyle0,md:IonInputMdStyle0};export{Input as ion_input};