@ionic/core 8.5.2-nightly.20250326 → 8.5.3-dev.11743446543.135a05ae
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/checkbox.js +18 -6
- package/components/ion-datetime.js +5 -5
- package/components/ion-toggle.js +2 -2
- package/components/picker.js +54 -77
- package/dist/cjs/ion-checkbox.cjs.entry.js +18 -6
- package/dist/cjs/ion-datetime_3.cjs.entry.js +5 -5
- package/dist/cjs/ion-picker.cjs.entry.js +54 -77
- package/dist/cjs/ion-toggle.cjs.entry.js +2 -2
- package/dist/collection/components/checkbox/checkbox.ios.css +5 -16
- package/dist/collection/components/checkbox/checkbox.js +16 -4
- package/dist/collection/components/checkbox/checkbox.md.css +5 -16
- package/dist/collection/components/datetime/datetime.js +5 -5
- package/dist/collection/components/picker/picker.js +54 -77
- package/dist/collection/components/toggle/toggle.js +2 -2
- package/dist/docs.json +1 -1
- package/dist/esm/ion-checkbox.entry.js +18 -6
- package/dist/esm/ion-datetime_3.entry.js +5 -5
- package/dist/esm/ion-picker.entry.js +54 -77
- package/dist/esm/ion-toggle.entry.js +2 -2
- package/dist/esm-es5/ion-checkbox.entry.js +1 -1
- package/dist/esm-es5/ion-datetime_3.entry.js +1 -1
- package/dist/esm-es5/ion-picker.entry.js +1 -1
- package/dist/esm-es5/ion-toggle.entry.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-2567237c.entry.js +4 -0
- package/dist/ionic/p-2720f98d.entry.js +4 -0
- package/dist/ionic/{p-df54ab6b.system.entry.js → p-2a445f16.system.entry.js} +1 -1
- package/dist/ionic/{p-e89451e8.system.entry.js → p-4ea4c73a.system.entry.js} +1 -1
- package/dist/ionic/p-96eec056.entry.js +4 -0
- package/dist/ionic/{p-e29c5aab.system.entry.js → p-b1339f3e.system.entry.js} +1 -1
- package/dist/ionic/p-bd52cead.entry.js +4 -0
- package/dist/ionic/p-bf64af90.system.js +1 -1
- package/dist/ionic/p-e3284879.system.entry.js +4 -0
- package/dist/types/components/checkbox/checkbox.d.ts +2 -0
- package/dist/types/components/picker/picker.d.ts +8 -0
- package/hydrate/index.js +79 -90
- package/hydrate/index.mjs +79 -90
- package/package.json +1 -1
- package/dist/ionic/p-056b4c2a.system.entry.js +0 -4
- package/dist/ionic/p-0904eb08.entry.js +0 -4
- package/dist/ionic/p-180b4f9a.entry.js +0 -4
- package/dist/ionic/p-7514f2f5.entry.js +0 -4
- package/dist/ionic/p-ff6be116.entry.js +0 -4
package/hydrate/index.js
CHANGED
|
@@ -8439,10 +8439,10 @@ class CardTitle {
|
|
|
8439
8439
|
}; }
|
|
8440
8440
|
}
|
|
8441
8441
|
|
|
8442
|
-
const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{
|
|
8442
|
+
const checkboxIosCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:50%;--border-width:0.125rem;--border-style:solid;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.23);--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--size:min(1.375rem, 55.836px);--checkmark-width:1.5px}:host(.checkbox-disabled){opacity:0.3}";
|
|
8443
8443
|
var IonCheckboxIosStyle0 = checkboxIosCss;
|
|
8444
8444
|
|
|
8445
|
-
const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{
|
|
8445
|
+
const checkboxMdCss = ":host{--checkbox-background-checked:var(--ion-color-primary, #0054e9);--border-color-checked:var(--ion-color-primary, #0054e9);--checkmark-color:var(--ion-color-primary-contrast, #fff);--transition:none;display:inline-block;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){-ms-flex:initial;flex:initial;width:auto}:host(.ion-color){--checkbox-background-checked:var(--ion-color-base);--border-color-checked:var(--ion-color-base);--checkmark-color:var(--ion-color-contrast)}.checkbox-wrapper{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper,:host(.in-item:not(.checkbox-label-placement-stacked):not([slot])) .native-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.checkbox-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.checkbox-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}input{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox-icon{border-radius:var(--border-radius);position:relative;width:var(--size);height:var(--size);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--checkbox-background);-webkit-box-sizing:border-box;box-sizing:border-box}.checkbox-icon path{fill:none;stroke:var(--checkmark-color);stroke-width:var(--checkmark-width);opacity:0}.checkbox-bottom{padding-top:4px;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75rem;white-space:normal}:host(.checkbox-label-placement-stacked) .checkbox-bottom{font-size:1rem}.checkbox-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.checkbox-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .checkbox-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .checkbox-bottom .helper-text{display:none}:host(.checkbox-label-placement-start) .checkbox-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.checkbox-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-end) .checkbox-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-pack:start;justify-content:start}:host(.checkbox-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.checkbox-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.checkbox-label-placement-stacked) .checkbox-wrapper{-ms-flex-direction:column;flex-direction:column;text-align:center}:host(.checkbox-label-placement-stacked) .label-text-wrapper{-webkit-transform:scale(0.75);transform:scale(0.75);margin-left:0;margin-right:0;margin-bottom:16px;max-width:calc(100% / 0.75)}:host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.checkbox-label-placement-stacked.checkbox-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).checkbox-label-placement-stacked.checkbox-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.checkbox-label-placement-stacked.checkbox-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host(.checkbox-justify-space-between) .checkbox-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.checkbox-justify-start) .checkbox-wrapper{-ms-flex-pack:start;justify-content:start}:host(.checkbox-justify-end) .checkbox-wrapper{-ms-flex-pack:end;justify-content:end}:host(.checkbox-alignment-start) .checkbox-wrapper{-ms-flex-align:start;align-items:start}:host(.checkbox-alignment-center) .checkbox-wrapper{-ms-flex-align:center;align-items:center}:host(.checkbox-justify-space-between),:host(.checkbox-justify-start),:host(.checkbox-justify-end),:host(.checkbox-alignment-start),:host(.checkbox-alignment-center){display:block}:host(.checkbox-checked) .checkbox-icon,:host(.checkbox-indeterminate) .checkbox-icon{border-color:var(--border-color-checked);background:var(--checkbox-background-checked)}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{opacity:1}:host(.checkbox-disabled){pointer-events:none}:host{--border-radius:calc(var(--size) * .125);--border-width:2px;--border-style:solid;--border-color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--checkmark-width:3;--checkbox-background:var(--ion-item-background, var(--ion-background-color, #fff));--transition:background 180ms cubic-bezier(0.4, 0, 0.2, 1);--size:18px}.checkbox-icon path{stroke-dasharray:30;stroke-dashoffset:30}:host(.checkbox-checked) .checkbox-icon path,:host(.checkbox-indeterminate) .checkbox-icon path{stroke-dashoffset:0;-webkit-transition:stroke-dashoffset 90ms linear 90ms;transition:stroke-dashoffset 90ms linear 90ms}:host(.checkbox-disabled) .label-text-wrapper{opacity:0.38}:host(.checkbox-disabled) .native-wrapper{opacity:0.63}";
|
|
8446
8446
|
var IonCheckboxMdStyle0 = checkboxMdCss;
|
|
8447
8447
|
|
|
8448
8448
|
/**
|
|
@@ -8464,6 +8464,7 @@ class Checkbox {
|
|
|
8464
8464
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
8465
8465
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
8466
8466
|
this.inputId = `ion-cb-${checkboxIds++}`;
|
|
8467
|
+
this.inputLabelId = `${this.inputId}-lbl`;
|
|
8467
8468
|
this.helperTextId = `${this.inputId}-helper-text`;
|
|
8468
8469
|
this.errorTextId = `${this.inputId}-error-text`;
|
|
8469
8470
|
this.inheritedAttributes = {};
|
|
@@ -8492,6 +8493,14 @@ class Checkbox {
|
|
|
8492
8493
|
this.onBlur = () => {
|
|
8493
8494
|
this.ionBlur.emit();
|
|
8494
8495
|
};
|
|
8496
|
+
this.onKeyDown = (ev) => {
|
|
8497
|
+
if (ev.key === ' ') {
|
|
8498
|
+
ev.preventDefault();
|
|
8499
|
+
if (!this.disabled) {
|
|
8500
|
+
this.toggleChecked(ev);
|
|
8501
|
+
}
|
|
8502
|
+
}
|
|
8503
|
+
};
|
|
8495
8504
|
this.onClick = (ev) => {
|
|
8496
8505
|
if (this.disabled) {
|
|
8497
8506
|
return;
|
|
@@ -8550,8 +8559,11 @@ class Checkbox {
|
|
|
8550
8559
|
const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
|
|
8551
8560
|
const mode = getIonMode$1(this);
|
|
8552
8561
|
const path = getSVGPath(mode, indeterminate);
|
|
8562
|
+
const hasLabelContent = el.textContent !== '';
|
|
8553
8563
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
8554
|
-
|
|
8564
|
+
// The host element must have a checkbox role to ensure proper VoiceOver
|
|
8565
|
+
// support in Safari for accessibility.
|
|
8566
|
+
return (hAsync(Host, { key: '90bb17a4fae17088524555968a002327400807cf', role: "checkbox", "aria-checked": indeterminate ? 'mixed' : `${checked}`, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, "aria-labelledby": hasLabelContent ? this.inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, class: createColorClasses$1(color, {
|
|
8555
8567
|
[mode]: true,
|
|
8556
8568
|
'in-item': hostContext('ion-item', el),
|
|
8557
8569
|
'checkbox-checked': checked,
|
|
@@ -8561,10 +8573,10 @@ class Checkbox {
|
|
|
8561
8573
|
[`checkbox-justify-${justify}`]: justify !== undefined,
|
|
8562
8574
|
[`checkbox-alignment-${alignment}`]: alignment !== undefined,
|
|
8563
8575
|
[`checkbox-label-placement-${labelPlacement}`]: true,
|
|
8564
|
-
}), onClick: this.onClick }, hAsync("label", { key: '
|
|
8576
|
+
}), onClick: this.onClick }, hAsync("label", { key: '58b5762aa358dff81910874631e06620a2ae1561', class: "checkbox-wrapper", htmlFor: inputId }, hAsync("input", Object.assign({ key: '6abe299d690c345d36d6fd76ab113fdccfbbac52', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), hAsync("div", { key: '2654168e45ccfdbcfe13af8c97e0e21d61ba0150', class: {
|
|
8565
8577
|
'label-text-wrapper': true,
|
|
8566
|
-
'label-text-wrapper-hidden':
|
|
8567
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
8578
|
+
'label-text-wrapper-hidden': !hasLabelContent,
|
|
8579
|
+
}, part: "label", id: this.inputLabelId }, hAsync("slot", { key: 'a91f3f67d9ddd6b616e48799aba11cae3564d1ab' }), this.renderHintText()), hAsync("div", { key: 'd5a9170b084d09df6b02f416e744085b5bcf0dde', class: "native-wrapper" }, hAsync("svg", { key: 'b1968ce4aa9d652a9f2bdc427ea3a65e6c04df51', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
|
|
8568
8580
|
}
|
|
8569
8581
|
getSVGPath(mode, indeterminate) {
|
|
8570
8582
|
let path = indeterminate ? (hAsync("path", { d: "M6 12L18 12", part: "mark" })) : (hAsync("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
|
|
@@ -12355,7 +12367,7 @@ class Datetime {
|
|
|
12355
12367
|
const activePart = this.getActivePartsWithFallback();
|
|
12356
12368
|
return (hAsync("ion-picker-column", { "aria-label": "Select an hour", color: this.color, disabled: disabled, value: activePart.hour, numericInput: true, onIonChange: (ev) => {
|
|
12357
12369
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { hour: ev.detail.value }));
|
|
12358
|
-
this.setActiveParts(Object.assign(Object.assign({},
|
|
12370
|
+
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { hour: ev.detail.value }));
|
|
12359
12371
|
ev.stopPropagation();
|
|
12360
12372
|
} }, hoursData.map((hour) => (hAsync("ion-picker-column-option", { part: hour.value === activePart.hour ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: hour.value, disabled: hour.disabled, value: hour.value }, hour.text)))));
|
|
12361
12373
|
}
|
|
@@ -12366,7 +12378,7 @@ class Datetime {
|
|
|
12366
12378
|
const activePart = this.getActivePartsWithFallback();
|
|
12367
12379
|
return (hAsync("ion-picker-column", { "aria-label": "Select a minute", color: this.color, disabled: disabled, value: activePart.minute, numericInput: true, onIonChange: (ev) => {
|
|
12368
12380
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { minute: ev.detail.value }));
|
|
12369
|
-
this.setActiveParts(Object.assign(Object.assign({},
|
|
12381
|
+
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { minute: ev.detail.value }));
|
|
12370
12382
|
ev.stopPropagation();
|
|
12371
12383
|
} }, minutesData.map((minute) => (hAsync("ion-picker-column-option", { part: minute.value === activePart.minute ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: minute.value, disabled: minute.disabled, value: minute.value }, minute.text)))));
|
|
12372
12384
|
}
|
|
@@ -12380,7 +12392,7 @@ class Datetime {
|
|
|
12380
12392
|
return (hAsync("ion-picker-column", { "aria-label": "Select a day period", style: isDayPeriodRTL ? { order: '-1' } : {}, color: this.color, disabled: disabled, value: activePart.ampm, onIonChange: (ev) => {
|
|
12381
12393
|
const hour = calculateHourFromAMPM(workingParts, ev.detail.value);
|
|
12382
12394
|
this.setWorkingParts(Object.assign(Object.assign({}, workingParts), { ampm: ev.detail.value, hour }));
|
|
12383
|
-
this.setActiveParts(Object.assign(Object.assign({},
|
|
12395
|
+
this.setActiveParts(Object.assign(Object.assign({}, this.getActivePartsWithFallback()), { ampm: ev.detail.value, hour }));
|
|
12384
12396
|
ev.stopPropagation();
|
|
12385
12397
|
} }, dayPeriodData.map((dayPeriod) => (hAsync("ion-picker-column-option", { part: dayPeriod.value === activePart.ampm ? `${WHEEL_ITEM_PART} ${WHEEL_ITEM_ACTIVE_PART}` : WHEEL_ITEM_PART, key: dayPeriod.value, disabled: dayPeriod.disabled, value: dayPeriod.value }, dayPeriod.text)))));
|
|
12386
12398
|
}
|
|
@@ -12687,7 +12699,7 @@ class Datetime {
|
|
|
12687
12699
|
const hasDatePresentation = presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
|
|
12688
12700
|
const hasWheelVariant = hasDatePresentation && preferWheel;
|
|
12689
12701
|
renderHiddenInput(true, el, name, formatValue(value), disabled);
|
|
12690
|
-
return (hAsync(Host, { key: '
|
|
12702
|
+
return (hAsync(Host, { key: '08d429533a09c600b936ad1e022658051c765595', "aria-disabled": disabled ? 'true' : null, onFocus: this.onFocus, onBlur: this.onBlur, class: Object.assign({}, createColorClasses$1(color, {
|
|
12691
12703
|
[mode]: true,
|
|
12692
12704
|
['datetime-readonly']: readonly,
|
|
12693
12705
|
['datetime-disabled']: disabled,
|
|
@@ -12697,7 +12709,7 @@ class Datetime {
|
|
|
12697
12709
|
[`datetime-size-${size}`]: true,
|
|
12698
12710
|
[`datetime-prefer-wheel`]: hasWheelVariant,
|
|
12699
12711
|
[`datetime-grid`]: isGridStyle,
|
|
12700
|
-
})) }, hAsync("div", { key: '
|
|
12712
|
+
})) }, hAsync("div", { key: 'f4ff0fcd1e059767a7ef14fcc76ebfd55d23a97b', class: "intersection-tracker", ref: (el) => (this.intersectionTrackerRef = el) }), this.renderDatetime(mode)));
|
|
12701
12713
|
}
|
|
12702
12714
|
get el() { return getElement(this); }
|
|
12703
12715
|
static get watchers() { return {
|
|
@@ -21900,13 +21912,59 @@ class Picker$1 {
|
|
|
21900
21912
|
* or trailing zeros when looking at the item text.
|
|
21901
21913
|
*/
|
|
21902
21914
|
this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
|
|
21915
|
+
if (!value) {
|
|
21916
|
+
return false;
|
|
21917
|
+
}
|
|
21903
21918
|
const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
|
|
21919
|
+
value = value.replace(behavior, '');
|
|
21904
21920
|
const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
|
|
21905
21921
|
return el.disabled !== true && el.textContent.replace(behavior, '') === value;
|
|
21906
21922
|
});
|
|
21907
21923
|
if (option) {
|
|
21908
21924
|
colEl.setValue(option.value);
|
|
21909
21925
|
}
|
|
21926
|
+
return !!option;
|
|
21927
|
+
};
|
|
21928
|
+
/**
|
|
21929
|
+
* Attempts to intelligently search the first and second
|
|
21930
|
+
* column as if they're number columns for the provided numbers
|
|
21931
|
+
* where the first two numbers are the first column
|
|
21932
|
+
* and the last 2 are the last column. Tries to allow for the first
|
|
21933
|
+
* number to be ignored for situations where typos occurred.
|
|
21934
|
+
*/
|
|
21935
|
+
this.multiColumnSearch = (firstColumn, secondColumn, input) => {
|
|
21936
|
+
if (input.length === 0) {
|
|
21937
|
+
return;
|
|
21938
|
+
}
|
|
21939
|
+
const inputArray = input.split('');
|
|
21940
|
+
const hourValue = inputArray.slice(0, 2).join('');
|
|
21941
|
+
// Try to find a match for the first two digits in the first column
|
|
21942
|
+
const foundHour = this.searchColumn(firstColumn, hourValue);
|
|
21943
|
+
// If we have more than 2 digits and found a match for hours,
|
|
21944
|
+
// use the remaining digits for the second column (minutes)
|
|
21945
|
+
if (inputArray.length > 2 && foundHour) {
|
|
21946
|
+
const minuteValue = inputArray.slice(2, 4).join('');
|
|
21947
|
+
this.searchColumn(secondColumn, minuteValue);
|
|
21948
|
+
}
|
|
21949
|
+
// If we couldn't find a match for the two-digit hour, try single digit approaches
|
|
21950
|
+
else if (!foundHour && inputArray.length >= 1) {
|
|
21951
|
+
// First try the first digit as a single-digit hour
|
|
21952
|
+
let singleDigitHour = inputArray[0];
|
|
21953
|
+
let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
|
|
21954
|
+
// If that didn't work, try the second digit as a single-digit hour
|
|
21955
|
+
// (handles case where user made a typo in the first digit, or they typed over themselves)
|
|
21956
|
+
if (!singleDigitFound) {
|
|
21957
|
+
inputArray.shift();
|
|
21958
|
+
singleDigitHour = inputArray[0];
|
|
21959
|
+
singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
|
|
21960
|
+
}
|
|
21961
|
+
// If we found a single-digit hour and have remaining digits,
|
|
21962
|
+
// use up to 2 of the remaining digits for the second column
|
|
21963
|
+
if (singleDigitFound && inputArray.length > 1) {
|
|
21964
|
+
const remainingDigits = inputArray.slice(1, 3).join('');
|
|
21965
|
+
this.searchColumn(secondColumn, remainingDigits);
|
|
21966
|
+
}
|
|
21967
|
+
}
|
|
21910
21968
|
};
|
|
21911
21969
|
this.selectMultiColumn = () => {
|
|
21912
21970
|
const { inputEl, el } = this;
|
|
@@ -21917,82 +21975,13 @@ class Picker$1 {
|
|
|
21917
21975
|
const firstColumn = numericPickers[0];
|
|
21918
21976
|
const lastColumn = numericPickers[1];
|
|
21919
21977
|
let value = inputEl.value;
|
|
21920
|
-
|
|
21921
|
-
|
|
21922
|
-
|
|
21923
|
-
|
|
21924
|
-
|
|
21925
|
-
case 2:
|
|
21926
|
-
/**
|
|
21927
|
-
* If the first character is `0` or `1` it is
|
|
21928
|
-
* possible that users are trying to type `09`
|
|
21929
|
-
* or `11` into the hour field, so we should look
|
|
21930
|
-
* at that first.
|
|
21931
|
-
*/
|
|
21932
|
-
const firstCharacter = inputEl.value.substring(0, 1);
|
|
21933
|
-
value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
|
|
21934
|
-
this.searchColumn(firstColumn, value);
|
|
21935
|
-
/**
|
|
21936
|
-
* If only checked the first value,
|
|
21937
|
-
* we can check the second value
|
|
21938
|
-
* for a match in the minutes column
|
|
21939
|
-
*/
|
|
21940
|
-
if (value.length === 1) {
|
|
21941
|
-
minuteValue = inputEl.value.substring(inputEl.value.length - 1);
|
|
21942
|
-
this.searchColumn(lastColumn, minuteValue, 'end');
|
|
21943
|
-
}
|
|
21944
|
-
break;
|
|
21945
|
-
case 3:
|
|
21946
|
-
/**
|
|
21947
|
-
* If the first character is `0` or `1` it is
|
|
21948
|
-
* possible that users are trying to type `09`
|
|
21949
|
-
* or `11` into the hour field, so we should look
|
|
21950
|
-
* at that first.
|
|
21951
|
-
*/
|
|
21952
|
-
const firstCharacterAgain = inputEl.value.substring(0, 1);
|
|
21953
|
-
value =
|
|
21954
|
-
firstCharacterAgain === '0' || firstCharacterAgain === '1'
|
|
21955
|
-
? inputEl.value.substring(0, 2)
|
|
21956
|
-
: firstCharacterAgain;
|
|
21957
|
-
this.searchColumn(firstColumn, value);
|
|
21958
|
-
/**
|
|
21959
|
-
* If only checked the first value,
|
|
21960
|
-
* we can check the second value
|
|
21961
|
-
* for a match in the minutes column
|
|
21962
|
-
*/
|
|
21963
|
-
minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
|
|
21964
|
-
this.searchColumn(lastColumn, minuteValue, 'end');
|
|
21965
|
-
break;
|
|
21966
|
-
case 4:
|
|
21967
|
-
/**
|
|
21968
|
-
* If the first character is `0` or `1` it is
|
|
21969
|
-
* possible that users are trying to type `09`
|
|
21970
|
-
* or `11` into the hour field, so we should look
|
|
21971
|
-
* at that first.
|
|
21972
|
-
*/
|
|
21973
|
-
const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
|
|
21974
|
-
value =
|
|
21975
|
-
firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
|
|
21976
|
-
? inputEl.value.substring(0, 2)
|
|
21977
|
-
: firstCharacterAgainAgain;
|
|
21978
|
-
this.searchColumn(firstColumn, value);
|
|
21979
|
-
/**
|
|
21980
|
-
* If only checked the first value,
|
|
21981
|
-
* we can check the second value
|
|
21982
|
-
* for a match in the minutes column
|
|
21983
|
-
*/
|
|
21984
|
-
const minuteValueAgain = value.length === 1
|
|
21985
|
-
? inputEl.value.substring(1, inputEl.value.length)
|
|
21986
|
-
: inputEl.value.substring(2, inputEl.value.length);
|
|
21987
|
-
this.searchColumn(lastColumn, minuteValueAgain, 'end');
|
|
21988
|
-
break;
|
|
21989
|
-
default:
|
|
21990
|
-
const startIndex = inputEl.value.length - 4;
|
|
21991
|
-
const newString = inputEl.value.substring(startIndex);
|
|
21992
|
-
inputEl.value = newString;
|
|
21993
|
-
this.selectMultiColumn();
|
|
21994
|
-
break;
|
|
21978
|
+
if (value.length > 4) {
|
|
21979
|
+
const startIndex = inputEl.value.length - 4;
|
|
21980
|
+
const newString = inputEl.value.substring(startIndex);
|
|
21981
|
+
inputEl.value = newString;
|
|
21982
|
+
value = newString;
|
|
21995
21983
|
}
|
|
21984
|
+
this.multiColumnSearch(firstColumn, lastColumn, value);
|
|
21996
21985
|
};
|
|
21997
21986
|
/**
|
|
21998
21987
|
* Searches the value of the active column
|
|
@@ -22061,7 +22050,7 @@ class Picker$1 {
|
|
|
22061
22050
|
this.emitInputModeChange();
|
|
22062
22051
|
}
|
|
22063
22052
|
render() {
|
|
22064
|
-
return (hAsync(Host, { key: '
|
|
22053
|
+
return (hAsync(Host, { key: '28f81e4ed44a633178561757c5199c2c98f94b74', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, hAsync("input", { key: 'abb3d1ad25ef63856af7804111175a4d50008bc0', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
|
|
22065
22054
|
var _a;
|
|
22066
22055
|
/**
|
|
22067
22056
|
* The "Enter" key represents
|
|
@@ -22076,7 +22065,7 @@ class Picker$1 {
|
|
|
22076
22065
|
if (ev.key === 'Enter') {
|
|
22077
22066
|
(_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
|
|
22078
22067
|
}
|
|
22079
|
-
}, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '
|
|
22068
|
+
}, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), hAsync("div", { key: '334a5abdc02e6b127c57177f626d7e4ff5526183', class: "picker-before" }), hAsync("div", { key: 'ffd6271931129e88fc7c820e919d684899e420c5', class: "picker-after" }), hAsync("div", { key: '78d1d95fd09e04f154ea59f24a1cece72c47ed7b', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), hAsync("slot", { key: '0bd5b9f875d3c71f6cbbde2054baeb1b0a2e8cd5' })));
|
|
22080
22069
|
}
|
|
22081
22070
|
get el() { return getElement(this); }
|
|
22082
22071
|
static get style() { return {
|
|
@@ -33225,10 +33214,10 @@ class Toggle {
|
|
|
33225
33214
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
33226
33215
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
33227
33216
|
[`toggle-${rtl}`]: true,
|
|
33228
|
-
}) }, hAsync("label", { key: 'f49531391f4513d084061c27ebc4c4eb1dcd02ab', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '
|
|
33217
|
+
}) }, hAsync("label", { key: 'f49531391f4513d084061c27ebc4c4eb1dcd02ab', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: 'cf2b9147f9fb408c446c16df596dc73695fab3b5', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, { switch: true }, this.inheritedAttributes)), hAsync("div", { key: '36639ea6755d2baf1fc8ce7542edf26cc5a1a484', class: {
|
|
33229
33218
|
'label-text-wrapper': true,
|
|
33230
33219
|
'label-text-wrapper-hidden': !this.hasLabel,
|
|
33231
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
33220
|
+
}, part: "label" }, hAsync("slot", { key: 'd9cde59b79670012f33745522248ba3e34822c0a' }), this.renderHintText()), hAsync("div", { key: 'b0c784a0fe0ce909d01f611210ccc0663e32dfd4', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
33232
33221
|
}
|
|
33233
33222
|
get el() { return getElement(this); }
|
|
33234
33223
|
static get watchers() { return {
|