@ionic/core 8.1.1-dev.11714676345.1df5b5f8 → 8.1.1-dev.11714760012.1eab947e
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-select.js +5 -8
- package/components/radio.js +6 -3
- package/dist/cjs/ion-radio_2.cjs.entry.js +6 -3
- package/dist/cjs/ion-select_3.cjs.entry.js +5 -8
- package/dist/collection/components/radio/radio.js +6 -3
- package/dist/collection/components/select/select.js +5 -8
- package/dist/collection/components/toast/test/basic/toast.e2e.js +1 -0
- package/dist/docs.json +1 -1
- package/dist/esm/ion-radio_2.entry.js +6 -3
- package/dist/esm/ion-select_3.entry.js +5 -8
- package/dist/esm-es5/ion-radio_2.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-a2e94ade.system.entry.js → p-0fc7647d.system.entry.js} +1 -1
- package/dist/ionic/p-30baae57.system.js +1 -1
- package/dist/ionic/{p-23fa696f.system.entry.js → p-6df12af0.system.entry.js} +1 -1
- package/dist/ionic/p-88c2439a.entry.js +4 -0
- package/dist/ionic/p-fa8f2e62.entry.js +4 -0
- package/dist/types/components/radio/radio.d.ts +1 -0
- package/dist/types/components/select/select.d.ts +1 -2
- package/hydrate/index.js +11 -11
- package/package.json +1 -1
- package/dist/ionic/p-b04c27d8.entry.js +0 -4
- package/dist/ionic/p-ffbf54f0.entry.js +0 -4
package/components/ion-select.js
CHANGED
|
@@ -115,6 +115,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
115
115
|
this.value = value;
|
|
116
116
|
this.ionChange.emit({ value });
|
|
117
117
|
}
|
|
118
|
+
componentWillLoad() {
|
|
119
|
+
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
120
|
+
}
|
|
118
121
|
async connectedCallback() {
|
|
119
122
|
const { el } = this;
|
|
120
123
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -131,12 +134,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
131
134
|
forceUpdate(this);
|
|
132
135
|
});
|
|
133
136
|
}
|
|
134
|
-
componentWillLoad() {
|
|
135
|
-
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
136
|
-
}
|
|
137
|
-
componentDidLoad() {
|
|
138
|
-
this.emitStyle();
|
|
139
|
-
}
|
|
140
137
|
disconnectedCallback() {
|
|
141
138
|
if (this.mutationO) {
|
|
142
139
|
this.mutationO.disconnect();
|
|
@@ -595,7 +592,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
595
592
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
596
593
|
*/
|
|
597
594
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
598
|
-
return (h(Host, { key: '
|
|
595
|
+
return (h(Host, { key: '6e282b0b0bc7202c4a1601e5997933c62a7598fd', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
599
596
|
[mode]: true,
|
|
600
597
|
'in-item': inItem,
|
|
601
598
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -611,7 +608,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
611
608
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
612
609
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
613
610
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
614
|
-
}) }, h("label", { key: '
|
|
611
|
+
}) }, h("label", { key: 'f2624d200a6f185b4ecdb0df3ffabc4d258adec9', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '71cdbfd064bd5f3c49ae390c09b05c0e1b9937ea', class: "select-wrapper-inner" }, h("slot", { key: 'a85d652a91c09b71ea7c4ccf0c4ff9dea4000c8f', name: "start" }), h("div", { key: 'd101e38fa9fb55612f98e8d82ac637647673abda', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '3d005f2281bef9e51311f76b845c8a6da8a71803', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '87a7fe0f38b718cbd0b36d971e1eee7013e660a9', class: "select-highlight" }))));
|
|
615
612
|
}
|
|
616
613
|
get el() { return this; }
|
|
617
614
|
static get watchers() { return {
|
package/components/radio.js
CHANGED
|
@@ -109,6 +109,9 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
|
|
|
109
109
|
*/
|
|
110
110
|
this.updateState();
|
|
111
111
|
}
|
|
112
|
+
componentDidLoad() {
|
|
113
|
+
this.updateState();
|
|
114
|
+
}
|
|
112
115
|
/** @internal */
|
|
113
116
|
async setFocus(ev) {
|
|
114
117
|
ev.stopPropagation();
|
|
@@ -146,7 +149,7 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
|
|
|
146
149
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
147
150
|
const mode = getIonMode(this);
|
|
148
151
|
const inItem = hostContext('ion-item', el);
|
|
149
|
-
return (h(Host, { key: '
|
|
152
|
+
return (h(Host, { key: '174cb05b2eee6cd648b2ad857a57d67e70ccf8ef', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
150
153
|
[mode]: true,
|
|
151
154
|
'in-item': inItem,
|
|
152
155
|
'radio-checked': checked,
|
|
@@ -157,10 +160,10 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
|
|
|
157
160
|
// Focus and active styling should not apply when the radio is in an item
|
|
158
161
|
'ion-activatable': !inItem,
|
|
159
162
|
'ion-focusable': !inItem,
|
|
160
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '
|
|
163
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '426c86b3b7d3f7c36cf602cba7cb2a9738d42080', class: "radio-wrapper" }, h("div", { key: '6268726bbefd7a1fed408ad3b584c14cef802639', class: {
|
|
161
164
|
'label-text-wrapper': true,
|
|
162
165
|
'label-text-wrapper-hidden': !hasLabel,
|
|
163
|
-
}, part: "label" }, h("slot", { key: '
|
|
166
|
+
}, part: "label" }, h("slot", { key: '8980f021b0316179b1010531d8d8053d88ef1ecf' })), h("div", { key: '7d15cfd8e937ca7b2d8e7df56cb565900c9061aa', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
164
167
|
}
|
|
165
168
|
get el() { return this; }
|
|
166
169
|
static get watchers() { return {
|
|
@@ -75,6 +75,9 @@ const Radio = class {
|
|
|
75
75
|
*/
|
|
76
76
|
this.updateState();
|
|
77
77
|
}
|
|
78
|
+
componentDidLoad() {
|
|
79
|
+
this.updateState();
|
|
80
|
+
}
|
|
78
81
|
/** @internal */
|
|
79
82
|
async setFocus(ev) {
|
|
80
83
|
ev.stopPropagation();
|
|
@@ -112,7 +115,7 @@ const Radio = class {
|
|
|
112
115
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
113
116
|
const mode = ionicGlobal.getIonMode(this);
|
|
114
117
|
const inItem = theme.hostContext('ion-item', el);
|
|
115
|
-
return (index.h(index.Host, { key: '
|
|
118
|
+
return (index.h(index.Host, { key: '174cb05b2eee6cd648b2ad857a57d67e70ccf8ef', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: theme.createColorClasses(color, {
|
|
116
119
|
[mode]: true,
|
|
117
120
|
'in-item': inItem,
|
|
118
121
|
'radio-checked': checked,
|
|
@@ -123,10 +126,10 @@ const Radio = class {
|
|
|
123
126
|
// Focus and active styling should not apply when the radio is in an item
|
|
124
127
|
'ion-activatable': !inItem,
|
|
125
128
|
'ion-focusable': !inItem,
|
|
126
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, index.h("label", { key: '
|
|
129
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, index.h("label", { key: '426c86b3b7d3f7c36cf602cba7cb2a9738d42080', class: "radio-wrapper" }, index.h("div", { key: '6268726bbefd7a1fed408ad3b584c14cef802639', class: {
|
|
127
130
|
'label-text-wrapper': true,
|
|
128
131
|
'label-text-wrapper-hidden': !hasLabel,
|
|
129
|
-
}, part: "label" }, index.h("slot", { key: '
|
|
132
|
+
}, part: "label" }, index.h("slot", { key: '8980f021b0316179b1010531d8d8053d88ef1ecf' })), index.h("div", { key: '7d15cfd8e937ca7b2d8e7df56cb565900c9061aa', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
130
133
|
}
|
|
131
134
|
get el() { return index.getElement(this); }
|
|
132
135
|
static get watchers() { return {
|
|
@@ -109,6 +109,9 @@ const Select = class {
|
|
|
109
109
|
this.value = value;
|
|
110
110
|
this.ionChange.emit({ value });
|
|
111
111
|
}
|
|
112
|
+
componentWillLoad() {
|
|
113
|
+
this.inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
|
|
114
|
+
}
|
|
112
115
|
async connectedCallback() {
|
|
113
116
|
const { el } = this;
|
|
114
117
|
this.notchController = notchController.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -125,12 +128,6 @@ const Select = class {
|
|
|
125
128
|
index.forceUpdate(this);
|
|
126
129
|
});
|
|
127
130
|
}
|
|
128
|
-
componentWillLoad() {
|
|
129
|
-
this.inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
|
|
130
|
-
}
|
|
131
|
-
componentDidLoad() {
|
|
132
|
-
this.emitStyle();
|
|
133
|
-
}
|
|
134
131
|
disconnectedCallback() {
|
|
135
132
|
if (this.mutationO) {
|
|
136
133
|
this.mutationO.disconnect();
|
|
@@ -589,7 +586,7 @@ const Select = class {
|
|
|
589
586
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
590
587
|
*/
|
|
591
588
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
592
|
-
return (index.h(index.Host, { key: '
|
|
589
|
+
return (index.h(index.Host, { key: '6e282b0b0bc7202c4a1601e5997933c62a7598fd', onClick: this.onClick, class: theme.createColorClasses(this.color, {
|
|
593
590
|
[mode]: true,
|
|
594
591
|
'in-item': inItem,
|
|
595
592
|
'in-item-color': theme.hostContext('ion-item.ion-color', el),
|
|
@@ -605,7 +602,7 @@ const Select = class {
|
|
|
605
602
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
606
603
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
607
604
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
608
|
-
}) }, index.h("label", { key: '
|
|
605
|
+
}) }, index.h("label", { key: 'f2624d200a6f185b4ecdb0df3ffabc4d258adec9', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), index.h("div", { key: '71cdbfd064bd5f3c49ae390c09b05c0e1b9937ea', class: "select-wrapper-inner" }, index.h("slot", { key: 'a85d652a91c09b71ea7c4ccf0c4ff9dea4000c8f', name: "start" }), index.h("div", { key: 'd101e38fa9fb55612f98e8d82ac637647673abda', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: '3d005f2281bef9e51311f76b845c8a6da8a71803', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: '87a7fe0f38b718cbd0b36d971e1eee7013e660a9', class: "select-highlight" }))));
|
|
609
606
|
}
|
|
610
607
|
get el() { return index.getElement(this); }
|
|
611
608
|
static get watchers() { return {
|
|
@@ -70,6 +70,9 @@ export class Radio {
|
|
|
70
70
|
*/
|
|
71
71
|
this.updateState();
|
|
72
72
|
}
|
|
73
|
+
componentDidLoad() {
|
|
74
|
+
this.updateState();
|
|
75
|
+
}
|
|
73
76
|
/** @internal */
|
|
74
77
|
async setFocus(ev) {
|
|
75
78
|
ev.stopPropagation();
|
|
@@ -107,7 +110,7 @@ export class Radio {
|
|
|
107
110
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
108
111
|
const mode = getIonMode(this);
|
|
109
112
|
const inItem = hostContext('ion-item', el);
|
|
110
|
-
return (h(Host, { key: '
|
|
113
|
+
return (h(Host, { key: '174cb05b2eee6cd648b2ad857a57d67e70ccf8ef', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
111
114
|
[mode]: true,
|
|
112
115
|
'in-item': inItem,
|
|
113
116
|
'radio-checked': checked,
|
|
@@ -118,10 +121,10 @@ export class Radio {
|
|
|
118
121
|
// Focus and active styling should not apply when the radio is in an item
|
|
119
122
|
'ion-activatable': !inItem,
|
|
120
123
|
'ion-focusable': !inItem,
|
|
121
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '
|
|
124
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '426c86b3b7d3f7c36cf602cba7cb2a9738d42080', class: "radio-wrapper" }, h("div", { key: '6268726bbefd7a1fed408ad3b584c14cef802639', class: {
|
|
122
125
|
'label-text-wrapper': true,
|
|
123
126
|
'label-text-wrapper-hidden': !hasLabel,
|
|
124
|
-
}, part: "label" }, h("slot", { key: '
|
|
127
|
+
}, part: "label" }, h("slot", { key: '8980f021b0316179b1010531d8d8053d88ef1ecf' })), h("div", { key: '7d15cfd8e937ca7b2d8e7df56cb565900c9061aa', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
125
128
|
}
|
|
126
129
|
static get is() { return "ion-radio"; }
|
|
127
130
|
static get encapsulation() { return "shadow"; }
|
|
@@ -99,6 +99,9 @@ export class Select {
|
|
|
99
99
|
this.value = value;
|
|
100
100
|
this.ionChange.emit({ value });
|
|
101
101
|
}
|
|
102
|
+
componentWillLoad() {
|
|
103
|
+
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
104
|
+
}
|
|
102
105
|
async connectedCallback() {
|
|
103
106
|
const { el } = this;
|
|
104
107
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -115,12 +118,6 @@ export class Select {
|
|
|
115
118
|
forceUpdate(this);
|
|
116
119
|
});
|
|
117
120
|
}
|
|
118
|
-
componentWillLoad() {
|
|
119
|
-
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
120
|
-
}
|
|
121
|
-
componentDidLoad() {
|
|
122
|
-
this.emitStyle();
|
|
123
|
-
}
|
|
124
121
|
disconnectedCallback() {
|
|
125
122
|
if (this.mutationO) {
|
|
126
123
|
this.mutationO.disconnect();
|
|
@@ -613,7 +610,7 @@ export class Select {
|
|
|
613
610
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
614
611
|
*/
|
|
615
612
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
616
|
-
return (h(Host, { key: '
|
|
613
|
+
return (h(Host, { key: '6e282b0b0bc7202c4a1601e5997933c62a7598fd', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
617
614
|
[mode]: true,
|
|
618
615
|
'in-item': inItem,
|
|
619
616
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -629,7 +626,7 @@ export class Select {
|
|
|
629
626
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
630
627
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
631
628
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
632
|
-
}) }, h("label", { key: '
|
|
629
|
+
}) }, h("label", { key: 'f2624d200a6f185b4ecdb0df3ffabc4d258adec9', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '71cdbfd064bd5f3c49ae390c09b05c0e1b9937ea', class: "select-wrapper-inner" }, h("slot", { key: 'a85d652a91c09b71ea7c4ccf0c4ff9dea4000c8f', name: "start" }), h("div", { key: 'd101e38fa9fb55612f98e8d82ac637647673abda', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '3d005f2281bef9e51311f76b845c8a6da8a71803', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '87a7fe0f38b718cbd0b36d971e1eee7013e660a9', class: "select-highlight" }))));
|
|
633
630
|
}
|
|
634
631
|
static get is() { return "ion-select"; }
|
|
635
632
|
static get encapsulation() { return "shadow"; }
|
|
@@ -81,6 +81,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
|
|
|
81
81
|
const { container } = await toastFixture.openToast('#translucent-toast');
|
|
82
82
|
await toastFixture.screenshot('translucent', screenshot, container);
|
|
83
83
|
});
|
|
84
|
+
// TODO(FW-6220): investigate why backdrop filter is not being captured in screenshot
|
|
84
85
|
test('should set translucency correctly when color is provided', async ({ page }) => {
|
|
85
86
|
const toastFixture = new ToastFixture(page);
|
|
86
87
|
await toastFixture.goto(config);
|
package/dist/docs.json
CHANGED
|
@@ -71,6 +71,9 @@ const Radio = class {
|
|
|
71
71
|
*/
|
|
72
72
|
this.updateState();
|
|
73
73
|
}
|
|
74
|
+
componentDidLoad() {
|
|
75
|
+
this.updateState();
|
|
76
|
+
}
|
|
74
77
|
/** @internal */
|
|
75
78
|
async setFocus(ev) {
|
|
76
79
|
ev.stopPropagation();
|
|
@@ -108,7 +111,7 @@ const Radio = class {
|
|
|
108
111
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
109
112
|
const mode = getIonMode(this);
|
|
110
113
|
const inItem = hostContext('ion-item', el);
|
|
111
|
-
return (h(Host, { key: '
|
|
114
|
+
return (h(Host, { key: '174cb05b2eee6cd648b2ad857a57d67e70ccf8ef', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
112
115
|
[mode]: true,
|
|
113
116
|
'in-item': inItem,
|
|
114
117
|
'radio-checked': checked,
|
|
@@ -119,10 +122,10 @@ const Radio = class {
|
|
|
119
122
|
// Focus and active styling should not apply when the radio is in an item
|
|
120
123
|
'ion-activatable': !inItem,
|
|
121
124
|
'ion-focusable': !inItem,
|
|
122
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '
|
|
125
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '426c86b3b7d3f7c36cf602cba7cb2a9738d42080', class: "radio-wrapper" }, h("div", { key: '6268726bbefd7a1fed408ad3b584c14cef802639', class: {
|
|
123
126
|
'label-text-wrapper': true,
|
|
124
127
|
'label-text-wrapper-hidden': !hasLabel,
|
|
125
|
-
}, part: "label" }, h("slot", { key: '
|
|
128
|
+
}, part: "label" }, h("slot", { key: '8980f021b0316179b1010531d8d8053d88ef1ecf' })), h("div", { key: '7d15cfd8e937ca7b2d8e7df56cb565900c9061aa', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
126
129
|
}
|
|
127
130
|
get el() { return getElement(this); }
|
|
128
131
|
static get watchers() { return {
|
|
@@ -105,6 +105,9 @@ const Select = class {
|
|
|
105
105
|
this.value = value;
|
|
106
106
|
this.ionChange.emit({ value });
|
|
107
107
|
}
|
|
108
|
+
componentWillLoad() {
|
|
109
|
+
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
110
|
+
}
|
|
108
111
|
async connectedCallback() {
|
|
109
112
|
const { el } = this;
|
|
110
113
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -121,12 +124,6 @@ const Select = class {
|
|
|
121
124
|
forceUpdate(this);
|
|
122
125
|
});
|
|
123
126
|
}
|
|
124
|
-
componentWillLoad() {
|
|
125
|
-
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
126
|
-
}
|
|
127
|
-
componentDidLoad() {
|
|
128
|
-
this.emitStyle();
|
|
129
|
-
}
|
|
130
127
|
disconnectedCallback() {
|
|
131
128
|
if (this.mutationO) {
|
|
132
129
|
this.mutationO.disconnect();
|
|
@@ -585,7 +582,7 @@ const Select = class {
|
|
|
585
582
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
586
583
|
*/
|
|
587
584
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
588
|
-
return (h(Host, { key: '
|
|
585
|
+
return (h(Host, { key: '6e282b0b0bc7202c4a1601e5997933c62a7598fd', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
589
586
|
[mode]: true,
|
|
590
587
|
'in-item': inItem,
|
|
591
588
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -601,7 +598,7 @@ const Select = class {
|
|
|
601
598
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
602
599
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
603
600
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
604
|
-
}) }, h("label", { key: '
|
|
601
|
+
}) }, h("label", { key: 'f2624d200a6f185b4ecdb0df3ffabc4d258adec9', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '71cdbfd064bd5f3c49ae390c09b05c0e1b9937ea', class: "select-wrapper-inner" }, h("slot", { key: 'a85d652a91c09b71ea7c4ccf0c4ff9dea4000c8f', name: "start" }), h("div", { key: 'd101e38fa9fb55612f98e8d82ac637647673abda', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '3d005f2281bef9e51311f76b845c8a6da8a71803', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: '87a7fe0f38b718cbd0b36d971e1eee7013e660a9', class: "select-highlight" }))));
|
|
605
602
|
}
|
|
606
603
|
get el() { return getElement(this); }
|
|
607
604
|
static get watchers() { return {
|
|
@@ -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}from"./index-9aab3bcf.js";import{a as addEventListener,b as removeEventListener,d as renderHiddenInput}from"./helpers-da915de8.js";import{i as isOptionSelected}from"./compare-with-utils-a96ff2ea.js";import{h as hostContext,c as createColorClasses}from"./theme-01f3f29c.js";import{b as getIonMode}from"./ionic-global-4528d288.js";var radioIosCss=':host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-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(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}';var IonRadioIosStyle0=radioIosCss;var radioMdCss=':host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-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(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}';var IonRadioMdStyle0=radioMdCss;var Radio=function(){function e(e){var t=this;registerInstance(this,e);this.ionFocus=createEvent(this,"ionFocus",7);this.ionBlur=createEvent(this,"ionBlur",7);this.inputId="ion-rb-".concat(radioButtonIds++);this.radioGroup=null;this.updateState=function(){if(t.radioGroup){var e=t.radioGroup,r=e.compareWith,i=e.value;t.checked=isOptionSelected(i,t.value,r)}};this.onClick=function(){var e=t,r=e.radioGroup,i=e.checked,a=e.disabled;if(a){return}if(i&&(r===null||r===void 0?void 0:r.allowEmptySelection)){t.checked=false}else{t.checked=true}};this.onFocus=function(){t.ionFocus.emit()};this.onBlur=function(){t.ionBlur.emit()};this.checked=false;this.buttonTabindex=-1;this.color=undefined;this.name=this.inputId;this.disabled=false;this.value=undefined;this.labelPlacement="start";this.justify="space-between";this.alignment="center"}e.prototype.valueChanged=function(){this.updateState()};e.prototype.setFocus=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){e.stopPropagation();e.preventDefault();this.el.focus();return[2]}))}))};e.prototype.setButtonTabindex=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.buttonTabindex=e;return[2]}))}))};e.prototype.connectedCallback=function(){if(this.value===undefined){this.value=this.inputId}var e=this.radioGroup=this.el.closest("ion-radio-group");if(e){this.updateState();addEventListener(e,"ionValueChange",this.updateState)}};e.prototype.disconnectedCallback=function(){var e=this.radioGroup;if(e){removeEventListener(e,"ionValueChange",this.updateState);this.radioGroup=null}};Object.defineProperty(e.prototype,"hasLabel",{get:function(){return this.el.textContent!==""},enumerable:false,configurable:true});e.prototype.renderRadioControl=function(){return h("div",{class:"radio-icon",part:"container"},h("div",{class:"radio-inner",part:"mark"}),h("div",{class:"radio-ripple"}))};e.prototype.render=function(){var e;var t=this,r=t.checked,i=t.disabled,a=t.color,o=t.el,n=t.justify,s=t.labelPlacement,l=t.hasLabel,d=t.buttonTabindex,c=t.alignment;var p=getIonMode(this);var m=hostContext("ion-item",o);return h(Host,{key:"e44cade8aa8415bdc825f9d17fc8562487cf5d35",onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,class:createColorClasses(a,(e={},e[p]=true,e["in-item"]=m,e["radio-checked"]=r,e["radio-disabled"]=i,e["radio-justify-".concat(n)]=true,e["radio-alignment-".concat(c)]=true,e["radio-label-placement-".concat(s)]=true,e["ion-activatable"]=!m,e["ion-focusable"]=!m,e)),role:"radio","aria-checked":r?"true":"false","aria-disabled":i?"true":null,tabindex:d},h("label",{key:"48a99aa80a7d7b4085ef26faf3167903c975517c",class:"radio-wrapper"},h("div",{key:"a8d74e0603b41215ea3e867356a9be0dcf3722d8",class:{"label-text-wrapper":true,"label-text-wrapper-hidden":!l},part:"label"},h("slot",{key:"9e3cce6254e70b02d50381537438a70435b031cc"})),h("div",{key:"bfa3ee188d911e056a3e60178eac41362efb94b3",class:"native-wrapper"},this.renderRadioControl())))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return e}();var radioButtonIds=0;Radio.style={ios:IonRadioIosStyle0,md:IonRadioMdStyle0};var RadioGroup=function(){function e(e){var t=this;registerInstance(this,e);this.ionChange=createEvent(this,"ionChange",7);this.ionValueChange=createEvent(this,"ionValueChange",7);this.inputId="ion-rg-".concat(radioGroupIds++);this.labelId="".concat(this.inputId,"-lbl");this.setRadioTabindex=function(e){var r=t.getRadios();var i=r.find((function(e){return!e.disabled}));var a=r.find((function(t){return t.value===e&&!t.disabled}));if(!i&&!a){return}var o=a||i;for(var n=0,s=r;n<s.length;n++){var l=s[n];var d=l===o?0:-1;l.setButtonTabindex(d)}};this.onClick=function(e){e.preventDefault();var r=e.target&&e.target.closest("ion-radio");if(r&&!r.disabled){var i=t.value;var a=r.value;if(a!==i){t.value=a;t.emitValueChange(e)}else if(t.allowEmptySelection){t.value=undefined;t.emitValueChange(e)}}};this.allowEmptySelection=false;this.compareWith=undefined;this.name=this.inputId;this.value=undefined}e.prototype.valueChanged=function(e){this.setRadioTabindex(e);this.ionValueChange.emit({value:e})};e.prototype.componentDidLoad=function(){this.valueChanged(this.value)};e.prototype.connectedCallback=function(){return __awaiter(this,void 0,void 0,(function(){var e,t;return __generator(this,(function(r){e=this.el.querySelector("ion-list-header")||this.el.querySelector("ion-item-divider");if(e){t=this.label=e.querySelector("ion-label");if(t){this.labelId=t.id=this.name+"-lbl"}}return[2]}))}))};e.prototype.getRadios=function(){return Array.from(this.el.querySelectorAll("ion-radio"))};e.prototype.emitValueChange=function(e){var t=this.value;this.ionChange.emit({value:t,event:e})};e.prototype.onKeydown=function(e){var t=!!this.el.closest("ion-select-popover");if(e.target&&!this.el.contains(e.target)){return}var r=this.getRadios().filter((function(e){return!e.disabled}));if(e.target&&r.includes(e.target)){var i=r.findIndex((function(t){return t===e.target}));var a=r[i];var o=void 0;if(["ArrowDown","ArrowRight"].includes(e.key)){o=i===r.length-1?r[0]:r[i+1]}if(["ArrowUp","ArrowLeft"].includes(e.key)){o=i===0?r[r.length-1]:r[i-1]}if(o&&r.includes(o)){o.setFocus(e);if(!t){this.value=o.value;this.emitValueChange(e)}}if([" "].includes(e.key)){var n=this.value;this.value=this.allowEmptySelection&&this.value!==undefined?undefined:a.value;if(n!==this.value||this.allowEmptySelection){this.emitValueChange(e)}e.preventDefault()}}};e.prototype.render=function(){var e=this,t=e.label,r=e.labelId,i=e.el,a=e.name,o=e.value;var n=getIonMode(this);renderHiddenInput(true,i,a,o,false);return h(Host,{key:"7a8ad7eb6a05c6f96a348dcf30fd0c610a95688c",role:"radiogroup","aria-labelledby":t?r:null,onClick:this.onClick,class:n})};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return e}();var radioGroupIds=0;export{Radio as ion_radio,RadioGroup as ion_radio_group};
|
|
4
|
+
*/import{r as registerInstance,d as createEvent,h,f as Host,i as getElement}from"./index-9aab3bcf.js";import{a as addEventListener,b as removeEventListener,d as renderHiddenInput}from"./helpers-da915de8.js";import{i as isOptionSelected}from"./compare-with-utils-a96ff2ea.js";import{h as hostContext,c as createColorClasses}from"./theme-01f3f29c.js";import{b as getIonMode}from"./ionic-global-4528d288.js";var radioIosCss=':host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-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(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color-checked:var(--ion-color-primary, #0054e9)}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{-webkit-margin-start:0;margin-inline-start:0}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{-webkit-transform:rotate(45deg);transform:rotate(45deg);border-width:0.125rem;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}:host(.ion-focused) .radio-icon::after{inset-inline-start:-9px}.native-wrapper .radio-icon{width:0.9375rem;height:1.5rem}';var IonRadioIosStyle0=radioIosCss;var radioMdCss=':host{--inner-border-radius:50%;display:inline-block;position:relative;max-width:100%;min-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:2;-webkit-box-sizing:border-box;box-sizing:border-box}:host(.radio-disabled){pointer-events:none}.radio-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{-webkit-box-sizing:border-box;box-sizing:border-box}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host(.in-item){-ms-flex:1 1 0px;flex:1 1 0;width:100%;height:100%}:host([slot=start]),:host([slot=end]){width:auto}.radio-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;height:inherit;min-height:inherit;cursor:inherit}.label-text-wrapper{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.in-item) .label-text-wrapper{margin-top:10px;margin-bottom:10px}:host(.in-item.radio-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.radio-label-placement-stacked) .native-wrapper{margin-bottom:10px}.label-text-wrapper-hidden{display:none}.native-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host(.radio-justify-space-between) .radio-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.radio-justify-start) .radio-wrapper{-ms-flex-pack:start;justify-content:start}:host(.radio-justify-end) .radio-wrapper{-ms-flex-pack:end;justify-content:end}:host(.radio-alignment-start) .radio-wrapper{-ms-flex-align:start;align-items:start}:host(.radio-alignment-center) .radio-wrapper{-ms-flex-align:center;align-items:center}:host(.radio-label-placement-start) .radio-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.radio-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-end) .radio-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.radio-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.radio-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.radio-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px}:host(.radio-label-placement-stacked) .radio-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.radio-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(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.radio-label-placement-stacked.radio-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).radio-label-placement-stacked.radio-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.radio-label-placement-stacked.radio-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}:host{--color:rgb(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--border-width:0.125rem;--border-style:solid;--border-radius:50%}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0);-webkit-transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:-webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{-webkit-transform:scale3d(1, 1, 1);transform:scale3d(1, 1, 1)}:host(.radio-disabled) .label-text-wrapper{opacity:0.38}:host(.radio-disabled) .native-wrapper{opacity:0.63}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #1a65eb);content:"";opacity:0.2}.native-wrapper .radio-icon{width:1.25rem;height:1.25rem}';var IonRadioMdStyle0=radioMdCss;var Radio=function(){function e(e){var t=this;registerInstance(this,e);this.ionFocus=createEvent(this,"ionFocus",7);this.ionBlur=createEvent(this,"ionBlur",7);this.inputId="ion-rb-".concat(radioButtonIds++);this.radioGroup=null;this.updateState=function(){if(t.radioGroup){var e=t.radioGroup,r=e.compareWith,i=e.value;t.checked=isOptionSelected(i,t.value,r)}};this.onClick=function(){var e=t,r=e.radioGroup,i=e.checked,a=e.disabled;if(a){return}if(i&&(r===null||r===void 0?void 0:r.allowEmptySelection)){t.checked=false}else{t.checked=true}};this.onFocus=function(){t.ionFocus.emit()};this.onBlur=function(){t.ionBlur.emit()};this.checked=false;this.buttonTabindex=-1;this.color=undefined;this.name=this.inputId;this.disabled=false;this.value=undefined;this.labelPlacement="start";this.justify="space-between";this.alignment="center"}e.prototype.valueChanged=function(){this.updateState()};e.prototype.componentDidLoad=function(){this.updateState()};e.prototype.setFocus=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){e.stopPropagation();e.preventDefault();this.el.focus();return[2]}))}))};e.prototype.setButtonTabindex=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.buttonTabindex=e;return[2]}))}))};e.prototype.connectedCallback=function(){if(this.value===undefined){this.value=this.inputId}var e=this.radioGroup=this.el.closest("ion-radio-group");if(e){this.updateState();addEventListener(e,"ionValueChange",this.updateState)}};e.prototype.disconnectedCallback=function(){var e=this.radioGroup;if(e){removeEventListener(e,"ionValueChange",this.updateState);this.radioGroup=null}};Object.defineProperty(e.prototype,"hasLabel",{get:function(){return this.el.textContent!==""},enumerable:false,configurable:true});e.prototype.renderRadioControl=function(){return h("div",{class:"radio-icon",part:"container"},h("div",{class:"radio-inner",part:"mark"}),h("div",{class:"radio-ripple"}))};e.prototype.render=function(){var e;var t=this,r=t.checked,i=t.disabled,a=t.color,o=t.el,n=t.justify,s=t.labelPlacement,l=t.hasLabel,d=t.buttonTabindex,c=t.alignment;var p=getIonMode(this);var m=hostContext("ion-item",o);return h(Host,{key:"174cb05b2eee6cd648b2ad857a57d67e70ccf8ef",onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,class:createColorClasses(a,(e={},e[p]=true,e["in-item"]=m,e["radio-checked"]=r,e["radio-disabled"]=i,e["radio-justify-".concat(n)]=true,e["radio-alignment-".concat(c)]=true,e["radio-label-placement-".concat(s)]=true,e["ion-activatable"]=!m,e["ion-focusable"]=!m,e)),role:"radio","aria-checked":r?"true":"false","aria-disabled":i?"true":null,tabindex:d},h("label",{key:"426c86b3b7d3f7c36cf602cba7cb2a9738d42080",class:"radio-wrapper"},h("div",{key:"6268726bbefd7a1fed408ad3b584c14cef802639",class:{"label-text-wrapper":true,"label-text-wrapper-hidden":!l},part:"label"},h("slot",{key:"8980f021b0316179b1010531d8d8053d88ef1ecf"})),h("div",{key:"7d15cfd8e937ca7b2d8e7df56cb565900c9061aa",class:"native-wrapper"},this.renderRadioControl())))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return e}();var radioButtonIds=0;Radio.style={ios:IonRadioIosStyle0,md:IonRadioMdStyle0};var RadioGroup=function(){function e(e){var t=this;registerInstance(this,e);this.ionChange=createEvent(this,"ionChange",7);this.ionValueChange=createEvent(this,"ionValueChange",7);this.inputId="ion-rg-".concat(radioGroupIds++);this.labelId="".concat(this.inputId,"-lbl");this.setRadioTabindex=function(e){var r=t.getRadios();var i=r.find((function(e){return!e.disabled}));var a=r.find((function(t){return t.value===e&&!t.disabled}));if(!i&&!a){return}var o=a||i;for(var n=0,s=r;n<s.length;n++){var l=s[n];var d=l===o?0:-1;l.setButtonTabindex(d)}};this.onClick=function(e){e.preventDefault();var r=e.target&&e.target.closest("ion-radio");if(r&&!r.disabled){var i=t.value;var a=r.value;if(a!==i){t.value=a;t.emitValueChange(e)}else if(t.allowEmptySelection){t.value=undefined;t.emitValueChange(e)}}};this.allowEmptySelection=false;this.compareWith=undefined;this.name=this.inputId;this.value=undefined}e.prototype.valueChanged=function(e){this.setRadioTabindex(e);this.ionValueChange.emit({value:e})};e.prototype.componentDidLoad=function(){this.valueChanged(this.value)};e.prototype.connectedCallback=function(){return __awaiter(this,void 0,void 0,(function(){var e,t;return __generator(this,(function(r){e=this.el.querySelector("ion-list-header")||this.el.querySelector("ion-item-divider");if(e){t=this.label=e.querySelector("ion-label");if(t){this.labelId=t.id=this.name+"-lbl"}}return[2]}))}))};e.prototype.getRadios=function(){return Array.from(this.el.querySelectorAll("ion-radio"))};e.prototype.emitValueChange=function(e){var t=this.value;this.ionChange.emit({value:t,event:e})};e.prototype.onKeydown=function(e){var t=!!this.el.closest("ion-select-popover");if(e.target&&!this.el.contains(e.target)){return}var r=this.getRadios().filter((function(e){return!e.disabled}));if(e.target&&r.includes(e.target)){var i=r.findIndex((function(t){return t===e.target}));var a=r[i];var o=void 0;if(["ArrowDown","ArrowRight"].includes(e.key)){o=i===r.length-1?r[0]:r[i+1]}if(["ArrowUp","ArrowLeft"].includes(e.key)){o=i===0?r[r.length-1]:r[i-1]}if(o&&r.includes(o)){o.setFocus(e);if(!t){this.value=o.value;this.emitValueChange(e)}}if([" "].includes(e.key)){var n=this.value;this.value=this.allowEmptySelection&&this.value!==undefined?undefined:a.value;if(n!==this.value||this.allowEmptySelection){this.emitValueChange(e)}e.preventDefault()}}};e.prototype.render=function(){var e=this,t=e.label,r=e.labelId,i=e.el,a=e.name,o=e.value;var n=getIonMode(this);renderHiddenInput(true,i,a,o,false);return h(Host,{key:"7a8ad7eb6a05c6f96a348dcf30fd0c610a95688c",role:"radiogroup","aria-labelledby":t?r:null,onClick:this.onClick,class:n})};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return e}();var radioGroupIds=0;export{Radio as ion_radio,RadioGroup as ion_radio_group};
|