@ionic/core 8.7.3-dev.11755622775.1fc05815 → 8.7.3-dev.11755697669.1be2024b
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ion-datetime.js +4 -3
- package/components/ion-input.js +5 -36
- package/components/ion-textarea.js +4 -35
- package/components/overlays.js +15 -6
- package/components/picker-column-option.js +3 -3
- package/components/picker-column.js +3 -39
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/ion-alert.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +4 -4
- package/dist/cjs/ion-input.cjs.entry.js +5 -35
- package/dist/cjs/ion-loading.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-picker-column-option.cjs.entry.js +3 -3
- package/dist/cjs/ion-picker-column.cjs.entry.js +3 -39
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-textarea.cjs.entry.js +4 -34
- package/dist/cjs/ion-toast.cjs.entry.js +1 -1
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{overlays-CglR7j-u.js → overlays-Ca4z9krz.js} +15 -6
- package/dist/collection/components/datetime/datetime.js +4 -3
- package/dist/collection/components/input/input.js +6 -37
- package/dist/collection/components/picker-column/picker-column.js +3 -39
- package/dist/collection/components/picker-column-option/picker-column-option.ios.css +2 -2
- package/dist/collection/components/picker-column-option/picker-column-option.js +1 -1
- package/dist/collection/components/picker-column-option/picker-column-option.md.css +2 -2
- package/dist/collection/components/textarea/textarea.js +5 -36
- package/dist/collection/utils/overlays.js +15 -6
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +1 -1
- package/dist/esm/ion-alert.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +4 -4
- package/dist/esm/ion-input.entry.js +5 -35
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +1 -1
- package/dist/esm/ion-picker-column-option.entry.js +3 -3
- package/dist/esm/ion-picker-column.entry.js +3 -39
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-textarea.entry.js +4 -34
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{overlays-ZX_4-t_r.js → overlays-C14Rvrme.js} +15 -6
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-91d6ccb0.entry.js → p-05baca9e.entry.js} +1 -1
- package/dist/ionic/p-1488b7cc.entry.js +4 -0
- package/dist/ionic/{p-7bac2c5f.entry.js → p-1be8ffce.entry.js} +1 -1
- package/dist/ionic/p-2e296f4a.entry.js +4 -0
- package/dist/ionic/{p-ac434970.entry.js → p-31393988.entry.js} +1 -1
- package/dist/ionic/{p-982fe1c4.entry.js → p-3c51f2cd.entry.js} +1 -1
- package/dist/ionic/{p-92e8f208.entry.js → p-5b64a786.entry.js} +1 -1
- package/dist/ionic/{p-8d96a0cd.entry.js → p-6d655180.entry.js} +1 -1
- package/dist/ionic/p-8888efe4.entry.js +4 -0
- package/dist/ionic/p-DMk_cMN9.js +4 -0
- package/dist/ionic/{p-c575e7ce.entry.js → p-a67512ba.entry.js} +1 -1
- package/dist/ionic/{p-ab33ef20.entry.js → p-b1c70f1c.entry.js} +1 -1
- package/dist/ionic/p-b292804d.entry.js +4 -0
- package/dist/ionic/{p-f2884bc2.entry.js → p-b6432111.entry.js} +1 -1
- package/dist/ionic/p-c5210d3e.entry.js +4 -0
- package/dist/types/components/input/input.d.ts +0 -9
- package/dist/types/components/picker-column/picker-column.d.ts +0 -7
- package/dist/types/components/textarea/textarea.d.ts +0 -9
- package/hydrate/index.js +33 -96
- package/hydrate/index.mjs +33 -96
- package/package.json +1 -1
- package/dist/ionic/p-187aaf4a.entry.js +0 -4
- package/dist/ionic/p-1d5b934a.entry.js +0 -4
- package/dist/ionic/p-1e34d434.entry.js +0 -4
- package/dist/ionic/p-29032e49.entry.js +0 -4
- package/dist/ionic/p-CSwZyt05.js +0 -4
- package/dist/ionic/p-f456d176.entry.js +0 -4
|
@@ -5,6 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from
|
|
|
5
5
|
import { startFocusVisible } from './focus-visible.js';
|
|
6
6
|
import { r as raf, g as getElementRoot, e as renderHiddenInput } from './helpers.js';
|
|
7
7
|
import { a as printIonError, p as printIonWarning } from './index4.js';
|
|
8
|
+
import { F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
|
|
8
9
|
import { i as isRTL } from './dir.js';
|
|
9
10
|
import { c as createColorClasses } from './theme.js';
|
|
10
11
|
import { c as chevronDown, f as caretUpSharp, g as chevronForward, h as caretDownSharp, a as chevronBack } from './index6.js';
|
|
@@ -1302,7 +1303,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1302
1303
|
const renderArray = forcePresentation === 'time-date'
|
|
1303
1304
|
? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
|
|
1304
1305
|
: [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
|
|
1305
|
-
return h("ion-picker",
|
|
1306
|
+
return h("ion-picker", { class: FOCUS_TRAP_DISABLE_CLASS }, renderArray);
|
|
1306
1307
|
}
|
|
1307
1308
|
renderDatePickerColumns(forcePresentation) {
|
|
1308
1309
|
return forcePresentation === 'date-time' || forcePresentation === 'time-date'
|
|
@@ -1859,7 +1860,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1859
1860
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1860
1861
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1861
1862
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
1862
|
-
return (h(Host, { key: '
|
|
1863
|
+
return (h(Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses(color, {
|
|
1863
1864
|
[mode]: true,
|
|
1864
1865
|
['datetime-readonly']: readonly,
|
|
1865
1866
|
['datetime-disabled']: disabled,
|
|
@@ -1869,7 +1870,7 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
|
|
|
1869
1870
|
[`datetime-size-${size}`]: true,
|
|
1870
1871
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1871
1872
|
[`datetime-grid`]: isGridStyle,
|
|
1872
|
-
})) }, h("div", { key: '
|
|
1873
|
+
})) }, h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1873
1874
|
}
|
|
1874
1875
|
get el() { return this; }
|
|
1875
1876
|
static get watchers() { return {
|
package/components/ion-input.js
CHANGED
|
@@ -43,10 +43,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
|
|
|
43
43
|
* is applied in both cases.
|
|
44
44
|
*/
|
|
45
45
|
this.hasFocus = false;
|
|
46
|
-
/**
|
|
47
|
-
* Track validation state for proper aria-live announcements
|
|
48
|
-
*/
|
|
49
|
-
this.isInvalid = false;
|
|
50
46
|
/**
|
|
51
47
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
52
48
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -231,31 +227,10 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
|
|
|
231
227
|
componentWillLoad() {
|
|
232
228
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
233
229
|
}
|
|
234
|
-
/**
|
|
235
|
-
* Checks if the input is in an invalid state based on validation classes
|
|
236
|
-
*/
|
|
237
|
-
checkValidationState() {
|
|
238
|
-
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
239
|
-
}
|
|
240
230
|
connectedCallback() {
|
|
241
231
|
const { el } = this;
|
|
242
232
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
|
|
243
233
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
244
|
-
// Watch for class changes to update validation state
|
|
245
|
-
if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
|
|
246
|
-
this.validationObserver = new MutationObserver(() => {
|
|
247
|
-
const newIsInvalid = this.checkValidationState();
|
|
248
|
-
if (this.isInvalid !== newIsInvalid) {
|
|
249
|
-
this.isInvalid = newIsInvalid;
|
|
250
|
-
}
|
|
251
|
-
});
|
|
252
|
-
this.validationObserver.observe(el, {
|
|
253
|
-
attributes: true,
|
|
254
|
-
attributeFilter: ['class'],
|
|
255
|
-
});
|
|
256
|
-
}
|
|
257
|
-
// Always set initial state
|
|
258
|
-
this.isInvalid = this.checkValidationState();
|
|
259
234
|
this.debounceChanged();
|
|
260
235
|
if (Build.isBrowser) {
|
|
261
236
|
document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
|
|
@@ -292,11 +267,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
|
|
|
292
267
|
this.notchController.destroy();
|
|
293
268
|
this.notchController = undefined;
|
|
294
269
|
}
|
|
295
|
-
// Clean up validation observer to prevent memory leaks
|
|
296
|
-
if (this.validationObserver) {
|
|
297
|
-
this.validationObserver.disconnect();
|
|
298
|
-
this.validationObserver = undefined;
|
|
299
|
-
}
|
|
300
270
|
}
|
|
301
271
|
/**
|
|
302
272
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -405,8 +375,8 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
|
|
|
405
375
|
];
|
|
406
376
|
}
|
|
407
377
|
getHintTextID() {
|
|
408
|
-
const {
|
|
409
|
-
if (
|
|
378
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
379
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
410
380
|
return errorTextId;
|
|
411
381
|
}
|
|
412
382
|
if (helperText) {
|
|
@@ -519,7 +489,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
|
|
|
519
489
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
520
490
|
*/
|
|
521
491
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
522
|
-
return (h(Host, { key: '
|
|
492
|
+
return (h(Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: createColorClasses(this.color, {
|
|
523
493
|
[mode]: true,
|
|
524
494
|
'has-value': hasValue,
|
|
525
495
|
'has-focus': hasFocus,
|
|
@@ -530,14 +500,14 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
|
|
|
530
500
|
'in-item': inItem,
|
|
531
501
|
'in-item-color': hostContext('ion-item.ion-color', this.el),
|
|
532
502
|
'input-disabled': disabled,
|
|
533
|
-
}) }, h("label", { key: '
|
|
503
|
+
}) }, h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (h("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
534
504
|
/**
|
|
535
505
|
* This prevents mobile browsers from
|
|
536
506
|
* blurring the input when the clear
|
|
537
507
|
* button is activated.
|
|
538
508
|
*/
|
|
539
509
|
ev.preventDefault();
|
|
540
|
-
}, onClick: this.clearTextInput }, h("ion-icon", { key: '
|
|
510
|
+
}, onClick: this.clearTextInput }, h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
|
|
541
511
|
}
|
|
542
512
|
get el() { return this; }
|
|
543
513
|
static get watchers() { return {
|
|
@@ -586,7 +556,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
|
|
|
586
556
|
"type": [1],
|
|
587
557
|
"value": [1032],
|
|
588
558
|
"hasFocus": [32],
|
|
589
|
-
"isInvalid": [32],
|
|
590
559
|
"setFocus": [64],
|
|
591
560
|
"getInputElement": [64]
|
|
592
561
|
}, [[2, "click", "onClickCapture"]], {
|
|
@@ -40,10 +40,6 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
|
|
|
40
40
|
* is applied in both cases.
|
|
41
41
|
*/
|
|
42
42
|
this.hasFocus = false;
|
|
43
|
-
/**
|
|
44
|
-
* Track validation state for proper aria-live announcements
|
|
45
|
-
*/
|
|
46
|
-
this.isInvalid = false;
|
|
47
43
|
/**
|
|
48
44
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
49
45
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -190,31 +186,10 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
|
|
|
190
186
|
this.el.click();
|
|
191
187
|
}
|
|
192
188
|
}
|
|
193
|
-
/**
|
|
194
|
-
* Checks if the textarea is in an invalid state based on validation classes
|
|
195
|
-
*/
|
|
196
|
-
checkValidationState() {
|
|
197
|
-
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
198
|
-
}
|
|
199
189
|
connectedCallback() {
|
|
200
190
|
const { el } = this;
|
|
201
191
|
this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
|
|
202
192
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
203
|
-
// Watch for class changes to update validation state
|
|
204
|
-
if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
|
|
205
|
-
this.validationObserver = new MutationObserver(() => {
|
|
206
|
-
const newIsInvalid = this.checkValidationState();
|
|
207
|
-
if (this.isInvalid !== newIsInvalid) {
|
|
208
|
-
this.isInvalid = newIsInvalid;
|
|
209
|
-
}
|
|
210
|
-
});
|
|
211
|
-
this.validationObserver.observe(el, {
|
|
212
|
-
attributes: true,
|
|
213
|
-
attributeFilter: ['class'],
|
|
214
|
-
});
|
|
215
|
-
}
|
|
216
|
-
// Always set initial state
|
|
217
|
-
this.isInvalid = this.checkValidationState();
|
|
218
193
|
this.debounceChanged();
|
|
219
194
|
if (Build.isBrowser) {
|
|
220
195
|
document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
|
|
@@ -236,11 +211,6 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
|
|
|
236
211
|
this.notchController.destroy();
|
|
237
212
|
this.notchController = undefined;
|
|
238
213
|
}
|
|
239
|
-
// Clean up validation observer to prevent memory leaks
|
|
240
|
-
if (this.validationObserver) {
|
|
241
|
-
this.validationObserver.disconnect();
|
|
242
|
-
this.validationObserver = undefined;
|
|
243
|
-
}
|
|
244
214
|
}
|
|
245
215
|
componentWillLoad() {
|
|
246
216
|
this.inheritedAttributes = Object.assign(Object.assign({}, inheritAriaAttributes(this.el)), inheritAttributes(this.el, ['data-form-type', 'title', 'tabindex', 'dir']));
|
|
@@ -418,8 +388,8 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
|
|
|
418
388
|
];
|
|
419
389
|
}
|
|
420
390
|
getHintTextID() {
|
|
421
|
-
const {
|
|
422
|
-
if (
|
|
391
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
392
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
423
393
|
return errorTextId;
|
|
424
394
|
}
|
|
425
395
|
if (helperText) {
|
|
@@ -478,7 +448,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
|
|
|
478
448
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
479
449
|
*/
|
|
480
450
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
481
|
-
return (h(Host, { key: '
|
|
451
|
+
return (h(Host, { key: 'd9f2ede0107987fc42c99e310cd2336bad5a5755', class: createColorClasses(this.color, {
|
|
482
452
|
[mode]: true,
|
|
483
453
|
'has-value': hasValue,
|
|
484
454
|
'has-focus': hasFocus,
|
|
@@ -487,7 +457,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
|
|
|
487
457
|
[`textarea-shape-${shape}`]: shape !== undefined,
|
|
488
458
|
[`textarea-label-placement-${labelPlacement}`]: true,
|
|
489
459
|
'textarea-disabled': disabled,
|
|
490
|
-
}) }, h("label", { key: '
|
|
460
|
+
}) }, h("label", { key: '9de598b95237462bb3bccffaefe83afbb43554b8', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), h("div", { key: 'e33c426c6541d723ccc246bb404c03687726ff83', class: "textarea-wrapper-inner" }, h("div", { key: '521e11af9d54d281b0a2b1c25bcfc6f742c18296', class: "start-slot-wrapper" }, h("slot", { key: '515523f6ca3ce0e5dd08f3275c21a190fb1ca177', name: "start" })), h("div", { key: '916e01e00de8400ae00ef06bc1fb62d8be2eee08', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: '810271e6532d90e27dab1fcb26546113c1ce9cb0', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes), value)), h("div", { key: '80aca9ea9546dca9d38efd291a6b0be384bb6978', class: "end-slot-wrapper" }, h("slot", { key: '407fab16c66a9f4a542369bfecc0d9afa0065977', name: "end" }))), shouldRenderHighlight && h("div", { key: 'f00523a6698fac8a1996e04303487bef01d10f25', class: "textarea-highlight" })), this.renderBottomContent()));
|
|
491
461
|
}
|
|
492
462
|
get el() { return this; }
|
|
493
463
|
static get watchers() { return {
|
|
@@ -529,7 +499,6 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
|
|
|
529
499
|
"labelPlacement": [1, "label-placement"],
|
|
530
500
|
"shape": [1],
|
|
531
501
|
"hasFocus": [32],
|
|
532
|
-
"isInvalid": [32],
|
|
533
502
|
"setFocus": [64],
|
|
534
503
|
"getInputElement": [64]
|
|
535
504
|
}, [[2, "click", "onClickCapture"]], {
|
package/components/overlays.js
CHANGED
|
@@ -496,16 +496,20 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
496
496
|
}
|
|
497
497
|
if (hidden) {
|
|
498
498
|
viewContainer.setAttribute('aria-hidden', 'true');
|
|
499
|
+
viewContainer.setAttribute('inert', '');
|
|
499
500
|
}
|
|
500
501
|
else {
|
|
501
502
|
viewContainer.removeAttribute('aria-hidden');
|
|
503
|
+
viewContainer.removeAttribute('inert');
|
|
502
504
|
}
|
|
503
505
|
};
|
|
504
506
|
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
505
|
-
var _a, _b;
|
|
507
|
+
var _a, _b, _c;
|
|
506
508
|
if (overlay.presented) {
|
|
507
509
|
return;
|
|
508
510
|
}
|
|
511
|
+
console.log("presenting overlay...");
|
|
512
|
+
(_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
|
|
509
513
|
/**
|
|
510
514
|
* Due to accessibility guidelines, toasts do not have
|
|
511
515
|
* focus traps.
|
|
@@ -521,7 +525,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
521
525
|
hideAnimatingOverlayFromScreenReaders(overlay.el);
|
|
522
526
|
overlay.presented = true;
|
|
523
527
|
overlay.willPresent.emit();
|
|
524
|
-
(
|
|
528
|
+
(_b = overlay.willPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
|
|
525
529
|
const mode = getIonMode(overlay);
|
|
526
530
|
// get the user's animation fn if one was provided
|
|
527
531
|
const animationBuilder = overlay.enterAnimation
|
|
@@ -530,7 +534,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
530
534
|
const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
|
|
531
535
|
if (completed) {
|
|
532
536
|
overlay.didPresent.emit();
|
|
533
|
-
(
|
|
537
|
+
(_c = overlay.didPresentShorthand) === null || _c === void 0 ? void 0 : _c.emit();
|
|
534
538
|
}
|
|
535
539
|
/**
|
|
536
540
|
* When an overlay that steals focus
|
|
@@ -565,6 +569,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
565
569
|
* screen readers.
|
|
566
570
|
*/
|
|
567
571
|
overlay.el.removeAttribute('aria-hidden');
|
|
572
|
+
overlay.el.removeAttribute('inert');
|
|
568
573
|
};
|
|
569
574
|
/**
|
|
570
575
|
* When an overlay component is dismissed,
|
|
@@ -616,10 +621,11 @@ const restoreElementFocus = async (overlayEl) => {
|
|
|
616
621
|
}
|
|
617
622
|
};
|
|
618
623
|
const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
|
|
619
|
-
var _a, _b;
|
|
624
|
+
var _a, _b, _c;
|
|
620
625
|
if (!overlay.presented) {
|
|
621
626
|
return false;
|
|
622
627
|
}
|
|
628
|
+
(_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
|
|
623
629
|
const presentedOverlays = doc !== undefined ? getPresentedOverlays(doc) : [];
|
|
624
630
|
/**
|
|
625
631
|
* For accessibility, toasts lack focus traps and don't receive
|
|
@@ -653,7 +659,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
653
659
|
// Overlay contents should not be clickable during dismiss
|
|
654
660
|
overlay.el.style.setProperty('pointer-events', 'none');
|
|
655
661
|
overlay.willDismiss.emit({ data, role });
|
|
656
|
-
(
|
|
662
|
+
(_b = overlay.willDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
|
|
657
663
|
const mode = getIonMode(overlay);
|
|
658
664
|
const animationBuilder = overlay.leaveAnimation
|
|
659
665
|
? overlay.leaveAnimation
|
|
@@ -663,7 +669,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
663
669
|
await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
|
|
664
670
|
}
|
|
665
671
|
overlay.didDismiss.emit({ data, role });
|
|
666
|
-
(
|
|
672
|
+
(_c = overlay.didDismissShorthand) === null || _c === void 0 ? void 0 : _c.emit({ data, role });
|
|
667
673
|
// Get a reference to all animations currently assigned to this overlay
|
|
668
674
|
// Then tear them down to return the overlay to its initial visual state
|
|
669
675
|
const animations = activeAnimations.get(overlay) || [];
|
|
@@ -913,6 +919,7 @@ const hideAnimatingOverlayFromScreenReaders = (overlay) => {
|
|
|
913
919
|
* This is done at the end of the `present` method.
|
|
914
920
|
*/
|
|
915
921
|
overlay.setAttribute('aria-hidden', 'true');
|
|
922
|
+
overlay.setAttribute('inert', '');
|
|
916
923
|
}
|
|
917
924
|
};
|
|
918
925
|
/**
|
|
@@ -940,6 +947,7 @@ const hideUnderlyingOverlaysFromScreenReaders = (newTopMostOverlay) => {
|
|
|
940
947
|
*/
|
|
941
948
|
if (nextPresentedOverlay.hasAttribute('aria-hidden') || nextPresentedOverlay.tagName !== 'ION-TOAST') {
|
|
942
949
|
presentedOverlay.setAttribute('aria-hidden', 'true');
|
|
950
|
+
presentedOverlay.setAttribute('inert', '');
|
|
943
951
|
}
|
|
944
952
|
}
|
|
945
953
|
};
|
|
@@ -961,6 +969,7 @@ const revealOverlaysToScreenReaders = () => {
|
|
|
961
969
|
* overlay too so focus can move there since focus is never automatically moved to the Toast.
|
|
962
970
|
*/
|
|
963
971
|
currentOverlay.removeAttribute('aria-hidden');
|
|
972
|
+
currentOverlay.removeAttribute('inert');
|
|
964
973
|
/**
|
|
965
974
|
* If we found a non-Toast element then we can just remove aria-hidden and stop searching entirely
|
|
966
975
|
* since this overlay should always receive focus. As a result, all underlying overlays should still
|
|
@@ -6,9 +6,9 @@ import { d as inheritAttributes } from './helpers.js';
|
|
|
6
6
|
import { c as createColorClasses } from './theme.js';
|
|
7
7
|
import { b as getIonMode } from './ionic-global.js';
|
|
8
8
|
|
|
9
|
-
const pickerColumnOptionIosCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}";
|
|
9
|
+
const pickerColumnOptionIosCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}";
|
|
10
10
|
|
|
11
|
-
const pickerColumnOptionMdCss = "button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
|
|
11
|
+
const pickerColumnOptionMdCss = ".picker-column-option-button{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;width:100%;height:34px;border:0px;outline:none;background:transparent;color:inherit;font-family:var(--ion-font-family, inherit);font-size:inherit;line-height:34px;text-align:inherit;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;overflow:hidden}:host(.option-disabled){opacity:0.4}:host(.option-disabled) .picker-column-option-button{cursor:default}:host(.option-active){color:var(--ion-color-base)}";
|
|
12
12
|
|
|
13
13
|
const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOption extends HTMLElement {
|
|
14
14
|
constructor() {
|
|
@@ -102,7 +102,7 @@ const PickerColumnOption = /*@__PURE__*/ proxyCustomElement(class PickerColumnOp
|
|
|
102
102
|
return (h(Host, { key: 'f816729941aabcb31ddfdce3ffe2e2139030d715', class: createColorClasses(color, {
|
|
103
103
|
[mode]: true,
|
|
104
104
|
['option-disabled']: disabled,
|
|
105
|
-
}) }, h("
|
|
105
|
+
}) }, h("div", { key: 'd942de84fd14d7dc06b1e5cf4f7920d1dc3c6371', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: 'b0df5717b42209e649097209a01476e1a66f5c5c' }))));
|
|
106
106
|
}
|
|
107
107
|
get el() { return this; }
|
|
108
108
|
static get watchers() { return {
|
|
@@ -409,23 +409,6 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
|
|
|
409
409
|
var _a;
|
|
410
410
|
return el ? (_a = el.getAttribute('aria-label')) !== null && _a !== void 0 ? _a : el.innerText : '';
|
|
411
411
|
};
|
|
412
|
-
/**
|
|
413
|
-
* Render an element that overlays the column. This element is for assistive
|
|
414
|
-
* tech to allow users to navigate the column up/down. This element should receive
|
|
415
|
-
* focus as it listens for synthesized keyboard events as required by the
|
|
416
|
-
* slider role: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
|
|
417
|
-
*/
|
|
418
|
-
this.renderAssistiveFocusable = () => {
|
|
419
|
-
const { activeItem } = this;
|
|
420
|
-
const valueText = this.getOptionValueText(activeItem);
|
|
421
|
-
/**
|
|
422
|
-
* When using the picker, the valuetext provides important context that valuenow
|
|
423
|
-
* does not. Additionally, using non-zero valuemin/valuemax values can cause
|
|
424
|
-
* WebKit to incorrectly announce numeric valuetext values (such as a year
|
|
425
|
-
* like "2024") as percentages: https://bugs.webkit.org/show_bug.cgi?id=273126
|
|
426
|
-
*/
|
|
427
|
-
return (h("div", { ref: (el) => (this.assistiveFocusable = el), class: "assistive-focusable", role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": valueText, "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }));
|
|
428
|
-
};
|
|
429
412
|
}
|
|
430
413
|
ariaLabelChanged(newValue) {
|
|
431
414
|
this.ariaLabel = newValue;
|
|
@@ -566,33 +549,14 @@ const PickerColumn = /*@__PURE__*/ proxyCustomElement(class PickerColumn extends
|
|
|
566
549
|
render() {
|
|
567
550
|
const { color, disabled, isActive, numericInput } = this;
|
|
568
551
|
const mode = getIonMode(this);
|
|
569
|
-
return (h(Host, { key: '
|
|
552
|
+
return (h(Host, { key: 'db903fd415f8a2d91994dececca481c1af8ba6a9', class: createColorClasses(color, {
|
|
570
553
|
[mode]: true,
|
|
571
554
|
['picker-column-active']: isActive,
|
|
572
555
|
['picker-column-numeric-input']: numericInput,
|
|
573
556
|
['picker-column-disabled']: disabled,
|
|
574
|
-
}) },
|
|
557
|
+
}) }, h("slot", { key: '02ce9e1dd7df91afcd50b06416552bcffb5dec98', name: "prefix" }), h("div", { key: '6dfd7d2429bec19244a6b1afb4448121963a031b', class: "picker-opts", ref: (el) => {
|
|
575
558
|
this.scrollEl = el;
|
|
576
|
-
},
|
|
577
|
-
/**
|
|
578
|
-
* When an element has an overlay scroll style and
|
|
579
|
-
* a fixed height, Firefox will focus the scrollable
|
|
580
|
-
* container if the content exceeds the container's
|
|
581
|
-
* dimensions.
|
|
582
|
-
*
|
|
583
|
-
* This causes keyboard navigation to focus to this
|
|
584
|
-
* element instead of going to the next element in
|
|
585
|
-
* the tab order.
|
|
586
|
-
*
|
|
587
|
-
* The desired behavior is for the user to be able to
|
|
588
|
-
* focus the assistive focusable element and tab to
|
|
589
|
-
* the next element in the tab order. Instead of tabbing
|
|
590
|
-
* to this element.
|
|
591
|
-
*
|
|
592
|
-
* To prevent this, we set the tabIndex to -1. This
|
|
593
|
-
* will match the behavior of the other browsers.
|
|
594
|
-
*/
|
|
595
|
-
tabIndex: -1 }, h("div", { key: '13a9ee686132af32240710730765de4c0003a9e8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'dbccba4920833cfcebe9b0fc763458ec3053705a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '682b43f83a5ea2e46067457f3af118535e111edb', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: 'd27e1e1dc0504b2f4627a29912a05bb91e8e413a' }), h("div", { key: '61c948dbb9cf7469aed3018542bc0954211585ba', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'cf46c277fbee65e35ff44ce0d53ce12aa9cbf9db', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bbc0e2d491d3f836ab849493ade2f7fa6ad9244e', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd25cbbe14b2914fe7b878d43b4e3f4a8c8177d24', name: "suffix" })));
|
|
559
|
+
}, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e30ce0b9cefbfe4d4441fa33acf595da31855c3f', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8be2bd293c12c6ba720d9b31d0d561a96f42e97d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '8afdcddddabbf646fbb55cb0ba4448309a2c1dd9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6aa0dacc34d6848575ad5b122b9046982308ca43' }), h("div", { key: '92ec8a357414c1b779b11d1dd18fb87a7ee63982', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'b89457cb74b5907c25594ff6720ac54ca537e933', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '5bbc92e6bc24de08e39873bf08c5b668373ac0f8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: 'd7bf2b519214f0f3576a4ca79844ad97827dd97f', name: "suffix" })));
|
|
596
560
|
}
|
|
597
561
|
get el() { return this; }
|
|
598
562
|
static get watchers() { return {
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -15,7 +15,7 @@ var index$2 = require('./index-DNh170BW.js');
|
|
|
15
15
|
var config = require('./config-CKhELRRu.js');
|
|
16
16
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
17
17
|
var index$3 = require('./index-D24wggHR.js');
|
|
18
|
-
var overlays = require('./overlays-
|
|
18
|
+
var overlays = require('./overlays-Ca4z9krz.js');
|
|
19
19
|
require('./index-DkNv4J_i.js');
|
|
20
20
|
require('./gesture-controller-dtqlP_q4.js');
|
|
21
21
|
require('./hardware-back-button-BxdNu76F.js');
|
|
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
|
|
|
7
7
|
var buttonActive = require('./button-active-BzZenWWH.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-Ca4z9krz.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
13
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -8,7 +8,7 @@ var config = require('./config-CKhELRRu.js');
|
|
|
8
8
|
var buttonActive = require('./button-active-BzZenWWH.js');
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
11
|
-
var overlays = require('./overlays-
|
|
11
|
+
var overlays = require('./overlays-Ca4z9krz.js');
|
|
12
12
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
13
13
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
14
14
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
7
|
var focusVisible = require('./focus-visible-CCvKiLh3.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
|
+
var overlays = require('./overlays-Ca4z9krz.js');
|
|
9
10
|
var dir = require('./dir-Cn0z1rJH.js');
|
|
10
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
11
12
|
var index$1 = require('./index-DqmRDbxg.js');
|
|
12
13
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
14
|
var data = require('./data-DW6ofvJ8.js');
|
|
14
15
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
15
|
-
var overlays = require('./overlays-CglR7j-u.js');
|
|
16
16
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
17
17
|
var haptic = require('./haptic-ClPPQ_PS.js');
|
|
18
18
|
require('./index-DkNv4J_i.js');
|
|
@@ -1301,7 +1301,7 @@ const Datetime = class {
|
|
|
1301
1301
|
const renderArray = forcePresentation === 'time-date'
|
|
1302
1302
|
? [this.renderTimePickerColumns(forcePresentation), this.renderDatePickerColumns(forcePresentation)]
|
|
1303
1303
|
: [this.renderDatePickerColumns(forcePresentation), this.renderTimePickerColumns(forcePresentation)];
|
|
1304
|
-
return index.h("ion-picker",
|
|
1304
|
+
return index.h("ion-picker", { class: overlays.FOCUS_TRAP_DISABLE_CLASS }, renderArray);
|
|
1305
1305
|
}
|
|
1306
1306
|
renderDatePickerColumns(forcePresentation) {
|
|
1307
1307
|
return forcePresentation === 'date-time' || forcePresentation === 'time-date'
|
|
@@ -1858,7 +1858,7 @@ const Datetime = class {
|
|
|
1858
1858
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
1859
1859
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
1860
1860
|
helpers.renderHiddenInput(true, el, name, data.formatValue(value), disabled);
|
|
1861
|
-
return (index.h(index.Host, { key: '
|
|
1861
|
+
return (index.h(index.Host, { key: '57492534800ea059a7c2bbd9f0059cc0b75ae8d2', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, theme.createColorClasses(color, {
|
|
1862
1862
|
[mode]: true,
|
|
1863
1863
|
['datetime-readonly']: readonly,
|
|
1864
1864
|
['datetime-disabled']: disabled,
|
|
@@ -1868,7 +1868,7 @@ const Datetime = class {
|
|
|
1868
1868
|
[`datetime-size-${size}`]: true,
|
|
1869
1869
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
1870
1870
|
[`datetime-grid`]: isGridStyle,
|
|
1871
|
-
})) }, index.h("div", { key: '
|
|
1871
|
+
})) }, index.h("div", { key: '97dac5e5195635ac0bc5fb472b9d09e5c3c6bbc3', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
1872
1872
|
}
|
|
1873
1873
|
get el() { return index.getElement(this); }
|
|
1874
1874
|
static get watchers() { return {
|
|
@@ -44,10 +44,6 @@ const Input = class {
|
|
|
44
44
|
* is applied in both cases.
|
|
45
45
|
*/
|
|
46
46
|
this.hasFocus = false;
|
|
47
|
-
/**
|
|
48
|
-
* Track validation state for proper aria-live announcements
|
|
49
|
-
*/
|
|
50
|
-
this.isInvalid = false;
|
|
51
47
|
/**
|
|
52
48
|
* Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
|
|
53
49
|
* Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
|
|
@@ -232,31 +228,10 @@ const Input = class {
|
|
|
232
228
|
componentWillLoad() {
|
|
233
229
|
this.inheritedAttributes = Object.assign(Object.assign({}, helpers.inheritAriaAttributes(this.el)), helpers.inheritAttributes(this.el, ['tabindex', 'title', 'data-form-type', 'dir']));
|
|
234
230
|
}
|
|
235
|
-
/**
|
|
236
|
-
* Checks if the input is in an invalid state based on validation classes
|
|
237
|
-
*/
|
|
238
|
-
checkValidationState() {
|
|
239
|
-
return this.el.classList.contains('ion-touched') && this.el.classList.contains('ion-invalid');
|
|
240
|
-
}
|
|
241
231
|
connectedCallback() {
|
|
242
232
|
const { el } = this;
|
|
243
233
|
this.slotMutationController = input_utils.createSlotMutationController(el, ['label', 'start', 'end'], () => index.forceUpdate(this));
|
|
244
234
|
this.notchController = notchController.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
245
|
-
// Watch for class changes to update validation state
|
|
246
|
-
if (typeof MutationObserver !== 'undefined') {
|
|
247
|
-
this.validationObserver = new MutationObserver(() => {
|
|
248
|
-
const newIsInvalid = this.checkValidationState();
|
|
249
|
-
if (this.isInvalid !== newIsInvalid) {
|
|
250
|
-
this.isInvalid = newIsInvalid;
|
|
251
|
-
}
|
|
252
|
-
});
|
|
253
|
-
this.validationObserver.observe(el, {
|
|
254
|
-
attributes: true,
|
|
255
|
-
attributeFilter: ['class'],
|
|
256
|
-
});
|
|
257
|
-
}
|
|
258
|
-
// Always set initial state
|
|
259
|
-
this.isInvalid = this.checkValidationState();
|
|
260
235
|
this.debounceChanged();
|
|
261
236
|
{
|
|
262
237
|
document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
|
|
@@ -293,11 +268,6 @@ const Input = class {
|
|
|
293
268
|
this.notchController.destroy();
|
|
294
269
|
this.notchController = undefined;
|
|
295
270
|
}
|
|
296
|
-
// Clean up validation observer to prevent memory leaks
|
|
297
|
-
if (this.validationObserver) {
|
|
298
|
-
this.validationObserver.disconnect();
|
|
299
|
-
this.validationObserver = undefined;
|
|
300
|
-
}
|
|
301
271
|
}
|
|
302
272
|
/**
|
|
303
273
|
* Sets focus on the native `input` in `ion-input`. Use this method instead of the global
|
|
@@ -406,8 +376,8 @@ const Input = class {
|
|
|
406
376
|
];
|
|
407
377
|
}
|
|
408
378
|
getHintTextID() {
|
|
409
|
-
const {
|
|
410
|
-
if (
|
|
379
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
380
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
411
381
|
return errorTextId;
|
|
412
382
|
}
|
|
413
383
|
if (helperText) {
|
|
@@ -520,7 +490,7 @@ const Input = class {
|
|
|
520
490
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
521
491
|
*/
|
|
522
492
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
|
|
523
|
-
return (index.h(index.Host, { key: '
|
|
493
|
+
return (index.h(index.Host, { key: '41b2526627e7d2773a80f011b123284203a71ca0', class: theme.createColorClasses(this.color, {
|
|
524
494
|
[mode]: true,
|
|
525
495
|
'has-value': hasValue,
|
|
526
496
|
'has-focus': hasFocus,
|
|
@@ -531,14 +501,14 @@ const Input = class {
|
|
|
531
501
|
'in-item': inItem,
|
|
532
502
|
'in-item-color': theme.hostContext('ion-item.ion-color', this.el),
|
|
533
503
|
'input-disabled': disabled,
|
|
534
|
-
}) }, index.h("label", { key: '
|
|
504
|
+
}) }, index.h("label", { key: '9ab078363e32528102b441ad1791d83f86fdcbdc', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, this.renderLabelContainer(), index.h("div", { key: 'e34b594980ec62e4c618e827fadf7669a39ad0d8', class: "native-wrapper", onClick: this.onLabelClick }, index.h("slot", { key: '12dc04ead5502e9e5736240e918bf9331bf7b5d9', name: "start" }), index.h("input", Object.assign({ key: 'df356eb4ced23109b2c0242f36dc043aba8782d6', 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, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId }, this.inheritedAttributes)), this.clearInput && !readonly && !disabled && (index.h("button", { key: 'f79f68cabcd4ea99419331174a377827db0c0741', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
|
|
535
505
|
/**
|
|
536
506
|
* This prevents mobile browsers from
|
|
537
507
|
* blurring the input when the clear
|
|
538
508
|
* button is activated.
|
|
539
509
|
*/
|
|
540
510
|
ev.preventDefault();
|
|
541
|
-
}, onClick: this.clearTextInput }, index.h("ion-icon", { key: '
|
|
511
|
+
}, onClick: this.clearTextInput }, index.h("ion-icon", { key: '237ec07ec2e10f08818a332bb596578c2c49f770', "aria-hidden": "true", icon: clearIconData }))), index.h("slot", { key: '1f0a3624aa3e8dc3c307a6762230ab698768a5e5', name: "end" })), shouldRenderHighlight && index.h("div", { key: '8a8cbb82695a722a0010b53dd0b1f1f97534a20b', class: "input-highlight" })), this.renderBottomContent()));
|
|
542
512
|
}
|
|
543
513
|
get el() { return index.getElement(this); }
|
|
544
514
|
static get watchers() { return {
|
|
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
|
|
|
7
7
|
var config = require('./config-CKhELRRu.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-Ca4z9krz.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
13
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
7
|
var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
|
|
8
|
-
var overlays = require('./overlays-
|
|
8
|
+
var overlays = require('./overlays-Ca4z9krz.js');
|
|
9
9
|
var gestureController = require('./gesture-controller-dtqlP_q4.js');
|
|
10
10
|
var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
|
|
11
11
|
var helpers = require('./helpers-DgwmcYAu.js');
|