@ionic/core 8.4.4-dev.11741298262.12200f27 → 8.4.4-dev.11741357957.1558bd4c
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-toggle.js +5 -37
- package/components/radio.js +37 -5
- package/dist/cjs/ion-radio_2.cjs.entry.js +35 -5
- package/dist/cjs/ion-toggle.cjs.entry.js +5 -35
- package/dist/cjs/ionic.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/radio/radio.ios.css +52 -15
- package/dist/collection/components/radio/radio.js +70 -3
- package/dist/collection/components/radio/radio.md.css +52 -15
- package/dist/collection/components/toggle/toggle.ios.css +15 -52
- package/dist/collection/components/toggle/toggle.js +3 -70
- package/dist/collection/components/toggle/toggle.md.css +15 -52
- package/dist/docs.json +73 -73
- package/dist/esm/ion-radio_2.entry.js +35 -5
- package/dist/esm/ion-toggle.entry.js +5 -35
- package/dist/esm/ionic.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm-es5/ion-radio_2.entry.js +1 -1
- package/dist/esm-es5/ion-toggle.entry.js +1 -1
- package/dist/esm-es5/ionic.js +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/html.html-data.json +8 -8
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-0bfffa34.system.entry.js +4 -0
- package/dist/ionic/p-322c5fb4.system.js +1 -1
- package/dist/ionic/p-5375091b.system.entry.js +4 -0
- package/dist/ionic/p-8f51281f.entry.js +4 -0
- package/dist/ionic/p-a18470c6.entry.js +4 -0
- package/dist/types/components/radio/radio.d.ts +19 -0
- package/dist/types/components/toggle/toggle.d.ts +0 -19
- package/dist/types/components.d.ts +16 -16
- package/hydrate/index.js +45 -45
- package/hydrate/index.mjs +45 -45
- package/package.json +1 -1
- package/dist/ionic/p-0f5d878e.system.entry.js +0 -4
- package/dist/ionic/p-3990c92b.entry.js +0 -4
- package/dist/ionic/p-6190d0d6.entry.js +0 -4
- package/dist/ionic/p-70ccc275.system.entry.js +0 -4
|
@@ -8,9 +8,14 @@ import type { Color } from '../../interface';
|
|
|
8
8
|
* @part container - The container for the radio mark.
|
|
9
9
|
* @part label - The label text describing the radio.
|
|
10
10
|
* @part mark - The checkmark or dot used to indicate the checked state.
|
|
11
|
+
* @part supporting-text - Supporting text displayed beneath the radio label.
|
|
12
|
+
* @part helper-text - Supporting text displayed beneath the radio label when the radio is valid.
|
|
13
|
+
* @part error-text - Supporting text displayed beneath the radio label when the radio is invalid and touched.
|
|
11
14
|
*/
|
|
12
15
|
export declare class Radio implements ComponentInterface {
|
|
13
16
|
private inputId;
|
|
17
|
+
private helperTextId;
|
|
18
|
+
private errorTextId;
|
|
14
19
|
private radioGroup;
|
|
15
20
|
el: HTMLIonRadioElement;
|
|
16
21
|
/**
|
|
@@ -36,6 +41,14 @@ export declare class Radio implements ComponentInterface {
|
|
|
36
41
|
* If `true`, the user cannot interact with the radio.
|
|
37
42
|
*/
|
|
38
43
|
disabled: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Text that is placed under the radio label and displayed when an error is detected.
|
|
46
|
+
*/
|
|
47
|
+
errorText?: string;
|
|
48
|
+
/**
|
|
49
|
+
* Text that is placed under the radio label and displayed when no error is detected.
|
|
50
|
+
*/
|
|
51
|
+
helperText?: string;
|
|
39
52
|
/**
|
|
40
53
|
* the value of the radio.
|
|
41
54
|
*/
|
|
@@ -88,5 +101,11 @@ export declare class Radio implements ComponentInterface {
|
|
|
88
101
|
private onBlur;
|
|
89
102
|
private get hasLabel();
|
|
90
103
|
private renderRadioControl;
|
|
104
|
+
private getHintTextID;
|
|
105
|
+
/**
|
|
106
|
+
* Responsible for rendering helper text and error text.
|
|
107
|
+
* This element should only be rendered if hint text is set.
|
|
108
|
+
*/
|
|
109
|
+
private renderHintText;
|
|
91
110
|
render(): any;
|
|
92
111
|
}
|
|
@@ -9,14 +9,9 @@ import type { ToggleChangeEventDetail } from './toggle-interface';
|
|
|
9
9
|
* @part track - The background track of the toggle.
|
|
10
10
|
* @part handle - The toggle handle, or knob, used to change the checked state.
|
|
11
11
|
* @part label - The label text describing the toggle.
|
|
12
|
-
* @part supporting-text - Supporting text displayed beneath the toggle label.
|
|
13
|
-
* @part helper-text - Supporting text displayed beneath the toggle label when the toggle is valid.
|
|
14
|
-
* @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
|
|
15
12
|
*/
|
|
16
13
|
export declare class Toggle implements ComponentInterface {
|
|
17
14
|
private inputId;
|
|
18
|
-
private helperTextId;
|
|
19
|
-
private errorTextId;
|
|
20
15
|
private gesture?;
|
|
21
16
|
private focusEl?;
|
|
22
17
|
private lastDrag;
|
|
@@ -43,14 +38,6 @@ export declare class Toggle implements ComponentInterface {
|
|
|
43
38
|
* If `true`, the user cannot interact with the toggle.
|
|
44
39
|
*/
|
|
45
40
|
disabled: boolean;
|
|
46
|
-
/**
|
|
47
|
-
* Text that is placed under the toggle label and displayed when an error is detected.
|
|
48
|
-
*/
|
|
49
|
-
errorText?: string;
|
|
50
|
-
/**
|
|
51
|
-
* Text that is placed under the toggle label and displayed when no error is detected.
|
|
52
|
-
*/
|
|
53
|
-
helperText?: string;
|
|
54
41
|
/**
|
|
55
42
|
* The value of the toggle does not mean if it's checked or not, use the `checked`
|
|
56
43
|
* property for that.
|
|
@@ -128,11 +115,5 @@ export declare class Toggle implements ComponentInterface {
|
|
|
128
115
|
private renderOnOffSwitchLabels;
|
|
129
116
|
private renderToggleControl;
|
|
130
117
|
private get hasLabel();
|
|
131
|
-
private getHintTextID;
|
|
132
|
-
/**
|
|
133
|
-
* Responsible for rendering helper text and error text.
|
|
134
|
-
* This element should only be rendered if hint text is set.
|
|
135
|
-
*/
|
|
136
|
-
private renderHintText;
|
|
137
118
|
render(): any;
|
|
138
119
|
}
|
|
@@ -2275,6 +2275,14 @@ export namespace Components {
|
|
|
2275
2275
|
* If `true`, the user cannot interact with the radio.
|
|
2276
2276
|
*/
|
|
2277
2277
|
"disabled": boolean;
|
|
2278
|
+
/**
|
|
2279
|
+
* Text that is placed under the radio label and displayed when an error is detected.
|
|
2280
|
+
*/
|
|
2281
|
+
"errorText"?: string;
|
|
2282
|
+
/**
|
|
2283
|
+
* Text that is placed under the radio label and displayed when no error is detected.
|
|
2284
|
+
*/
|
|
2285
|
+
"helperText"?: string;
|
|
2278
2286
|
/**
|
|
2279
2287
|
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
|
|
2280
2288
|
*/
|
|
@@ -3276,14 +3284,6 @@ export namespace Components {
|
|
|
3276
3284
|
* Enables the on/off accessibility switch labels within the toggle.
|
|
3277
3285
|
*/
|
|
3278
3286
|
"enableOnOffLabels": boolean | undefined;
|
|
3279
|
-
/**
|
|
3280
|
-
* Text that is placed under the toggle label and displayed when an error is detected.
|
|
3281
|
-
*/
|
|
3282
|
-
"errorText"?: string;
|
|
3283
|
-
/**
|
|
3284
|
-
* Text that is placed under the toggle label and displayed when no error is detected.
|
|
3285
|
-
*/
|
|
3286
|
-
"helperText"?: string;
|
|
3287
3287
|
/**
|
|
3288
3288
|
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
|
|
3289
3289
|
*/
|
|
@@ -6956,6 +6956,14 @@ declare namespace LocalJSX {
|
|
|
6956
6956
|
* If `true`, the user cannot interact with the radio.
|
|
6957
6957
|
*/
|
|
6958
6958
|
"disabled"?: boolean;
|
|
6959
|
+
/**
|
|
6960
|
+
* Text that is placed under the radio label and displayed when an error is detected.
|
|
6961
|
+
*/
|
|
6962
|
+
"errorText"?: string;
|
|
6963
|
+
/**
|
|
6964
|
+
* Text that is placed under the radio label and displayed when no error is detected.
|
|
6965
|
+
*/
|
|
6966
|
+
"helperText"?: string;
|
|
6959
6967
|
/**
|
|
6960
6968
|
* How to pack the label and radio within a line. `"start"`: The label and radio will appear on the left in LTR and on the right in RTL. `"end"`: The label and radio will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and radio will appear on opposite ends of the line with space between the two elements. Setting this property will change the radio `display` to `block`.
|
|
6961
6969
|
*/
|
|
@@ -8021,14 +8029,6 @@ declare namespace LocalJSX {
|
|
|
8021
8029
|
* Enables the on/off accessibility switch labels within the toggle.
|
|
8022
8030
|
*/
|
|
8023
8031
|
"enableOnOffLabels"?: boolean | undefined;
|
|
8024
|
-
/**
|
|
8025
|
-
* Text that is placed under the toggle label and displayed when an error is detected.
|
|
8026
|
-
*/
|
|
8027
|
-
"errorText"?: string;
|
|
8028
|
-
/**
|
|
8029
|
-
* Text that is placed under the toggle label and displayed when no error is detected.
|
|
8030
|
-
*/
|
|
8031
|
-
"helperText"?: string;
|
|
8032
8032
|
/**
|
|
8033
8033
|
* How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
|
|
8034
8034
|
*/
|
package/hydrate/index.js
CHANGED
|
@@ -24804,10 +24804,10 @@ const renderProgress = (value, buffer) => {
|
|
|
24804
24804
|
];
|
|
24805
24805
|
};
|
|
24806
24806
|
|
|
24807
|
-
const 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]){-ms-flex:initial;flex:initial;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;-ms-flex-pack:justify;justify-content:space-between;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}
|
|
24807
|
+
const 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]){-ms-flex:initial;flex:initial;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;-ms-flex-pack:justify;justify-content:space-between;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}.radio-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(.radio-label-placement-stacked) .radio-bottom{font-size:1rem}.radio-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .radio-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-bottom .helper-text{display:none}: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;-ms-flex-pack:start;justify-content:start}: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;text-align:center}: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(.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-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}: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}";
|
|
24808
24808
|
var IonRadioIosStyle0 = radioIosCss;
|
|
24809
24809
|
|
|
24810
|
-
const 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]){-ms-flex:initial;flex:initial;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;-ms-flex-pack:justify;justify-content:space-between;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}
|
|
24810
|
+
const 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]){-ms-flex:initial;flex:initial;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;-ms-flex-pack:justify;justify-content:space-between;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}.radio-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(.radio-label-placement-stacked) .radio-bottom{font-size:1rem}.radio-bottom .error-text{display:none;color:var(--ion-color-danger, #c5000f)}.radio-bottom .helper-text{display:block;color:var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d))}:host(.ion-touched.ion-invalid) .radio-bottom .error-text{display:block}:host(.ion-touched.ion-invalid) .radio-bottom .helper-text{display:none}: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;-ms-flex-pack:start;justify-content:start}: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;text-align:center}: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(.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-justify-space-between),:host(.radio-justify-start),:host(.radio-justify-end),:host(.radio-alignment-start),:host(.radio-alignment-center){display:block}: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}";
|
|
24811
24811
|
var IonRadioMdStyle0 = radioMdCss;
|
|
24812
24812
|
|
|
24813
24813
|
/**
|
|
@@ -24818,6 +24818,9 @@ var IonRadioMdStyle0 = radioMdCss;
|
|
|
24818
24818
|
* @part container - The container for the radio mark.
|
|
24819
24819
|
* @part label - The label text describing the radio.
|
|
24820
24820
|
* @part mark - The checkmark or dot used to indicate the checked state.
|
|
24821
|
+
* @part supporting-text - Supporting text displayed beneath the radio label.
|
|
24822
|
+
* @part helper-text - Supporting text displayed beneath the radio label when the radio is valid.
|
|
24823
|
+
* @part error-text - Supporting text displayed beneath the radio label when the radio is invalid and touched.
|
|
24821
24824
|
*/
|
|
24822
24825
|
class Radio {
|
|
24823
24826
|
constructor(hostRef) {
|
|
@@ -24825,6 +24828,8 @@ class Radio {
|
|
|
24825
24828
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
24826
24829
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
24827
24830
|
this.inputId = `ion-rb-${radioButtonIds++}`;
|
|
24831
|
+
this.helperTextId = `${this.inputId}-helper-text`;
|
|
24832
|
+
this.errorTextId = `${this.inputId}-error-text`;
|
|
24828
24833
|
this.radioGroup = null;
|
|
24829
24834
|
this.updateState = () => {
|
|
24830
24835
|
if (this.radioGroup) {
|
|
@@ -24864,6 +24869,8 @@ class Radio {
|
|
|
24864
24869
|
this.color = undefined;
|
|
24865
24870
|
this.name = this.inputId;
|
|
24866
24871
|
this.disabled = false;
|
|
24872
|
+
this.errorText = undefined;
|
|
24873
|
+
this.helperText = undefined;
|
|
24867
24874
|
this.value = undefined;
|
|
24868
24875
|
this.labelPlacement = 'start';
|
|
24869
24876
|
this.justify = undefined;
|
|
@@ -24923,11 +24930,37 @@ class Radio {
|
|
|
24923
24930
|
renderRadioControl() {
|
|
24924
24931
|
return (hAsync("div", { class: "radio-icon", part: "container" }, hAsync("div", { class: "radio-inner", part: "mark" }), hAsync("div", { class: "radio-ripple" })));
|
|
24925
24932
|
}
|
|
24933
|
+
getHintTextID() {
|
|
24934
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
24935
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
24936
|
+
return errorTextId;
|
|
24937
|
+
}
|
|
24938
|
+
if (helperText) {
|
|
24939
|
+
return helperTextId;
|
|
24940
|
+
}
|
|
24941
|
+
return undefined;
|
|
24942
|
+
}
|
|
24943
|
+
/**
|
|
24944
|
+
* Responsible for rendering helper text and error text.
|
|
24945
|
+
* This element should only be rendered if hint text is set.
|
|
24946
|
+
*/
|
|
24947
|
+
renderHintText() {
|
|
24948
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
24949
|
+
/**
|
|
24950
|
+
* undefined and empty string values should
|
|
24951
|
+
* be treated as not having helper/error text.
|
|
24952
|
+
*/
|
|
24953
|
+
const hasHintText = !!helperText || !!errorText;
|
|
24954
|
+
if (!hasHintText) {
|
|
24955
|
+
return;
|
|
24956
|
+
}
|
|
24957
|
+
return (hAsync("div", { class: "radio-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
|
|
24958
|
+
}
|
|
24926
24959
|
render() {
|
|
24927
24960
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
24928
24961
|
const mode = getIonMode$1(this);
|
|
24929
24962
|
const inItem = hostContext('ion-item', el);
|
|
24930
|
-
return (hAsync(Host, { key: '
|
|
24963
|
+
return (hAsync(Host, { key: '4f01024a74c1846438372c40519df1044f5b12b9', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses$1(color, {
|
|
24931
24964
|
[mode]: true,
|
|
24932
24965
|
'in-item': inItem,
|
|
24933
24966
|
'radio-checked': checked,
|
|
@@ -24938,10 +24971,10 @@ class Radio {
|
|
|
24938
24971
|
// Focus and active styling should not apply when the radio is in an item
|
|
24939
24972
|
'ion-activatable': !inItem,
|
|
24940
24973
|
'ion-focusable': !inItem,
|
|
24941
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, hAsync("label", { key: '
|
|
24974
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, tabindex: buttonTabindex }, hAsync("label", { key: '59dc0343534e626692f3b71b32204c1b2b25d40a', class: "radio-wrapper" }, hAsync("div", { key: '26d7d3faf1b02bb138fb2c46f83e824962b6b92e', class: {
|
|
24942
24975
|
'label-text-wrapper': true,
|
|
24943
24976
|
'label-text-wrapper-hidden': !hasLabel,
|
|
24944
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
24977
|
+
}, part: "label" }, hAsync("slot", { key: '9c3d8bb0c5cd3ce94d1e661d89587cf67c522bc0' }), this.renderHintText()), hAsync("div", { key: '3183f79e2977ee001e69c23f73073555744281d8', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
24945
24978
|
}
|
|
24946
24979
|
get el() { return getElement(this); }
|
|
24947
24980
|
static get watchers() { return {
|
|
@@ -24958,6 +24991,8 @@ class Radio {
|
|
|
24958
24991
|
"color": [513],
|
|
24959
24992
|
"name": [1],
|
|
24960
24993
|
"disabled": [4],
|
|
24994
|
+
"errorText": [1, "error-text"],
|
|
24995
|
+
"helperText": [1, "helper-text"],
|
|
24961
24996
|
"value": [8],
|
|
24962
24997
|
"labelPlacement": [1, "label-placement"],
|
|
24963
24998
|
"justify": [1],
|
|
@@ -32855,10 +32890,10 @@ const buttonPart = (button) => {
|
|
|
32855
32890
|
return isCancel(button.role) ? 'button cancel' : 'button';
|
|
32856
32891
|
};
|
|
32857
32892
|
|
|
32858
|
-
const toggleIosCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;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-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}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}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;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.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-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}.toggle-
|
|
32893
|
+
const toggleIosCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;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-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}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}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;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.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-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(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);--track-background-checked:var(--ion-color-primary, #0054e9);--border-radius:15.5px;--handle-background:#ffffff;--handle-background-checked:#ffffff;--handle-border-radius:25.5px;--handle-box-shadow:0 3px 4px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.06);--handle-height:calc(31px - (2px * 2));--handle-max-height:calc(100% - var(--handle-spacing) * 2);--handle-width:calc(31px - (2px * 2));--handle-spacing:2px;--handle-transition:transform 300ms, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms}.native-wrapper .toggle-icon{width:51px;height:31px;overflow:hidden}:host(.ion-color.toggle-checked) .toggle-icon{background:var(--ion-color-base)}:host(.toggle-activated) .toggle-switch-icon{opacity:0}.toggle-icon{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-transition:background-color 300ms;transition:background-color 300ms}.toggle-inner{will-change:transform}.toggle-switch-icon{position:absolute;top:50%;width:11px;height:11px;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity 300ms, color 300ms;transition:opacity 300ms, color 300ms}.toggle-switch-icon{position:absolute;color:var(--ion-color-dark, #222428)}:host(.toggle-ltr) .toggle-switch-icon{right:6px}:host(.toggle-rtl) .toggle-switch-icon{right:initial;left:6px;}:host(.toggle-checked) .toggle-switch-icon.toggle-switch-icon-checked{color:var(--ion-color-contrast, #fff)}:host(.toggle-checked) .toggle-switch-icon:not(.toggle-switch-icon-checked){opacity:0}.toggle-switch-icon-checked{position:absolute;width:15px;height:15px;-webkit-transform:translateY(-50%) rotate(90deg);transform:translateY(-50%) rotate(90deg)}:host(.toggle-ltr) .toggle-switch-icon-checked{right:initial;left:4px;}:host(.toggle-rtl) .toggle-switch-icon-checked{right:4px}:host(.toggle-activated) .toggle-icon::before,:host(.toggle-checked) .toggle-icon::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated.toggle-checked) .toggle-inner::before{-webkit-transform:scale3d(0, 0, 0);transform:scale3d(0, 0, 0)}:host(.toggle-activated) .toggle-inner{width:calc(var(--handle-width) + 6px)}:host(.toggle-ltr.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0);transform:translate3d(calc(100% - var(--handle-width) - 6px), 0, 0)}:host(.toggle-rtl.toggle-activated.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0);transform:translate3d(calc(-100% + var(--handle-width) + 6px), 0, 0)}:host(.toggle-disabled){opacity:0.3}";
|
|
32859
32894
|
var IonToggleIosStyle0 = toggleIosCss;
|
|
32860
32895
|
|
|
32861
|
-
const toggleMdCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;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-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}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}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;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.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-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}.toggle-
|
|
32896
|
+
const toggleMdCss = ":host{-webkit-box-sizing:content-box !important;box-sizing:content-box !important;display:inline-block;position:relative;max-width:100%;outline:none;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-focused) input{border:2px solid #5e9ed6}:host(.toggle-disabled){pointer-events:none}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}.toggle-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;height:inherit;-webkit-transition:background-color 15ms linear;transition:background-color 15ms linear;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.toggle-label-placement-stacked) .label-text-wrapper{margin-top:10px;margin-bottom:16px}:host(.in-item.toggle-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(.toggle-justify-space-between) .toggle-wrapper{-ms-flex-pack:justify;justify-content:space-between}:host(.toggle-justify-start) .toggle-wrapper{-ms-flex-pack:start;justify-content:start}:host(.toggle-justify-end) .toggle-wrapper{-ms-flex-pack:end;justify-content:end}:host(.toggle-alignment-start) .toggle-wrapper{-ms-flex-align:start;align-items:start}:host(.toggle-alignment-center) .toggle-wrapper{-ms-flex-align:center;align-items:center}:host(.toggle-justify-space-between),:host(.toggle-justify-start),:host(.toggle-justify-end),:host(.toggle-alignment-start),:host(.toggle-alignment-center){display:block}:host(.toggle-label-placement-start) .toggle-wrapper{-ms-flex-direction:row;flex-direction:row}:host(.toggle-label-placement-start) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-end) .toggle-wrapper{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.toggle-label-placement-end) .label-text-wrapper{-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}:host(.toggle-label-placement-fixed) .label-text-wrapper{-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}:host(.toggle-label-placement-fixed) .label-text-wrapper{-ms-flex:0 0 100px;flex:0 0 100px;width:100px;min-width:100px;max-width:200px}:host(.toggle-label-placement-stacked) .toggle-wrapper{-ms-flex-direction:column;flex-direction:column}:host(.toggle-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(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper{-webkit-transform-origin:left top;transform-origin:left top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-start) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-start .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-start:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:right top;transform-origin:right top}}:host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper{-webkit-transform-origin:center top;transform-origin:center top}:host-context([dir=rtl]):host(.toggle-label-placement-stacked.toggle-alignment-center) .label-text-wrapper,:host-context([dir=rtl]).toggle-label-placement-stacked.toggle-alignment-center .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}@supports selector(:dir(rtl)){:host(.toggle-label-placement-stacked.toggle-alignment-center:dir(rtl)) .label-text-wrapper{-webkit-transform-origin:calc(100% - center) top;transform-origin:calc(100% - center) top}}.toggle-icon-wrapper{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;-webkit-transition:var(--handle-transition);transition:var(--handle-transition);will-change:transform}.toggle-icon{border-radius:var(--border-radius);display:block;position:relative;width:100%;height:100%;background:var(--track-background);overflow:inherit}:host(.toggle-checked) .toggle-icon{background:var(--track-background-checked)}.toggle-inner{border-radius:var(--handle-border-radius);position:absolute;left:var(--handle-spacing);width:var(--handle-width);height:var(--handle-height);max-height:var(--handle-max-height);-webkit-transition:var(--handle-transition);transition:var(--handle-transition);background:var(--handle-background);-webkit-box-shadow:var(--handle-box-shadow);box-shadow:var(--handle-box-shadow);contain:strict}:host(.toggle-ltr) .toggle-inner{left:var(--handle-spacing)}:host(.toggle-rtl) .toggle-inner{right:var(--handle-spacing)}:host(.toggle-ltr.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(100% - var(--handle-width)), 0, 0);transform:translate3d(calc(100% - var(--handle-width)), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-icon-wrapper{-webkit-transform:translate3d(calc(-100% + var(--handle-width)), 0, 0);transform:translate3d(calc(-100% + var(--handle-width)), 0, 0)}:host(.toggle-checked) .toggle-inner{background:var(--handle-background-checked)}:host(.toggle-ltr.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * -2), 0, 0)}:host(.toggle-rtl.toggle-checked) .toggle-inner{-webkit-transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0);transform:translate3d(calc(var(--handle-spacing) * 2), 0, 0)}:host{--track-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);--track-background-checked:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);--border-radius:14px;--handle-background:#ffffff;--handle-background-checked:var(--ion-color-primary, #0054e9);--handle-border-radius:50%;--handle-box-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);--handle-width:20px;--handle-height:20px;--handle-max-height:calc(100% + 6px);--handle-spacing:0;--handle-transition:transform 160ms cubic-bezier(0.4, 0, 0.2, 1), background-color 160ms cubic-bezier(0.4, 0, 0.2, 1)}.native-wrapper .toggle-icon{width:36px;height:14px}:host(.ion-color.toggle-checked) .toggle-icon{background:rgba(var(--ion-color-base-rgb), 0.5)}:host(.ion-color.toggle-checked) .toggle-inner{background:var(--ion-color-base)}:host(.toggle-checked) .toggle-inner{color:var(--ion-color-contrast, #fff)}.toggle-icon{-webkit-transition:background-color 160ms;transition:background-color 160ms}.toggle-inner{will-change:background-color, transform;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#000}.toggle-inner .toggle-switch-icon{-webkit-padding-start:1px;padding-inline-start:1px;-webkit-padding-end:1px;padding-inline-end:1px;padding-top:1px;padding-bottom:1px;width:100%;height:100%}:host(.toggle-disabled){opacity:0.38}";
|
|
32862
32897
|
var IonToggleMdStyle0 = toggleMdCss;
|
|
32863
32898
|
|
|
32864
32899
|
/**
|
|
@@ -32869,9 +32904,6 @@ var IonToggleMdStyle0 = toggleMdCss;
|
|
|
32869
32904
|
* @part track - The background track of the toggle.
|
|
32870
32905
|
* @part handle - The toggle handle, or knob, used to change the checked state.
|
|
32871
32906
|
* @part label - The label text describing the toggle.
|
|
32872
|
-
* @part supporting-text - Supporting text displayed beneath the toggle label.
|
|
32873
|
-
* @part helper-text - Supporting text displayed beneath the toggle label when the toggle is valid.
|
|
32874
|
-
* @part error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched.
|
|
32875
32907
|
*/
|
|
32876
32908
|
class Toggle {
|
|
32877
32909
|
constructor(hostRef) {
|
|
@@ -32880,8 +32912,6 @@ class Toggle {
|
|
|
32880
32912
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
32881
32913
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
32882
32914
|
this.inputId = `ion-tg-${toggleIds++}`;
|
|
32883
|
-
this.helperTextId = `${this.inputId}-helper-text`;
|
|
32884
|
-
this.errorTextId = `${this.inputId}-error-text`;
|
|
32885
32915
|
this.lastDrag = 0;
|
|
32886
32916
|
this.inheritedAttributes = {};
|
|
32887
32917
|
this.didLoad = false;
|
|
@@ -32927,8 +32957,6 @@ class Toggle {
|
|
|
32927
32957
|
this.name = this.inputId;
|
|
32928
32958
|
this.checked = false;
|
|
32929
32959
|
this.disabled = false;
|
|
32930
|
-
this.errorText = undefined;
|
|
32931
|
-
this.helperText = undefined;
|
|
32932
32960
|
this.value = 'on';
|
|
32933
32961
|
this.enableOnOffLabels = config.get('toggleOnOffLabels');
|
|
32934
32962
|
this.labelPlacement = 'start';
|
|
@@ -33015,39 +33043,13 @@ class Toggle {
|
|
|
33015
33043
|
get hasLabel() {
|
|
33016
33044
|
return this.el.textContent !== '';
|
|
33017
33045
|
}
|
|
33018
|
-
getHintTextID() {
|
|
33019
|
-
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
33020
|
-
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
33021
|
-
return errorTextId;
|
|
33022
|
-
}
|
|
33023
|
-
if (helperText) {
|
|
33024
|
-
return helperTextId;
|
|
33025
|
-
}
|
|
33026
|
-
return undefined;
|
|
33027
|
-
}
|
|
33028
|
-
/**
|
|
33029
|
-
* Responsible for rendering helper text and error text.
|
|
33030
|
-
* This element should only be rendered if hint text is set.
|
|
33031
|
-
*/
|
|
33032
|
-
renderHintText() {
|
|
33033
|
-
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
33034
|
-
/**
|
|
33035
|
-
* undefined and empty string values should
|
|
33036
|
-
* be treated as not having helper/error text.
|
|
33037
|
-
*/
|
|
33038
|
-
const hasHintText = !!helperText || !!errorText;
|
|
33039
|
-
if (!hasHintText) {
|
|
33040
|
-
return;
|
|
33041
|
-
}
|
|
33042
|
-
return (hAsync("div", { class: "toggle-bottom" }, hAsync("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), hAsync("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
|
|
33043
|
-
}
|
|
33044
33046
|
render() {
|
|
33045
33047
|
const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
|
|
33046
33048
|
const mode = getIonMode$1(this);
|
|
33047
33049
|
const value = this.getValue();
|
|
33048
33050
|
const rtl = isRTL$1(el) ? 'rtl' : 'ltr';
|
|
33049
33051
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
33050
|
-
return (hAsync(Host, { key: '
|
|
33052
|
+
return (hAsync(Host, { key: 'ed75573caa6e37011f1453dd7f723fb9bd8a3656', onClick: this.onClick, class: createColorClasses$1(color, {
|
|
33051
33053
|
[mode]: true,
|
|
33052
33054
|
'in-item': hostContext('ion-item', el),
|
|
33053
33055
|
'toggle-activated': activated,
|
|
@@ -33057,10 +33059,10 @@ class Toggle {
|
|
|
33057
33059
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
33058
33060
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
33059
33061
|
[`toggle-${rtl}`]: true,
|
|
33060
|
-
}) }, hAsync("label", { key: '
|
|
33062
|
+
}) }, hAsync("label", { key: '484860e2a33f4d123904edb96159f0e1972d3add', class: "toggle-wrapper" }, hAsync("input", Object.assign({ key: '360b53080aacfd99a9ff60ffb5219816bd4163ee', 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 }, this.inheritedAttributes)), hAsync("div", { key: 'f7239fa668fe11257239ea30cf0198e4f3274f6b', class: {
|
|
33061
33063
|
'label-text-wrapper': true,
|
|
33062
33064
|
'label-text-wrapper-hidden': !this.hasLabel,
|
|
33063
|
-
}, part: "label" }, hAsync("slot", { key: '
|
|
33065
|
+
}, part: "label" }, hAsync("slot", { key: '9495a4a39889822ee68e0d89dc5a2f863d1feb3c' })), hAsync("div", { key: '55f1eb08c4b705e94fbcf02220bbe1d292f06155', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
33064
33066
|
}
|
|
33065
33067
|
get el() { return getElement(this); }
|
|
33066
33068
|
static get watchers() { return {
|
|
@@ -33078,8 +33080,6 @@ class Toggle {
|
|
|
33078
33080
|
"name": [1],
|
|
33079
33081
|
"checked": [1028],
|
|
33080
33082
|
"disabled": [4],
|
|
33081
|
-
"errorText": [1, "error-text"],
|
|
33082
|
-
"helperText": [1, "helper-text"],
|
|
33083
33083
|
"value": [1],
|
|
33084
33084
|
"enableOnOffLabels": [4, "enable-on-off-labels"],
|
|
33085
33085
|
"labelPlacement": [1, "label-placement"],
|