@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
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-03-
|
|
2
|
+
"timestamp": "2025-03-07T14:34:26",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.20.0",
|
|
@@ -22148,6 +22148,18 @@
|
|
|
22148
22148
|
{
|
|
22149
22149
|
"name": "part",
|
|
22150
22150
|
"text": "mark - The checkmark or dot used to indicate the checked state."
|
|
22151
|
+
},
|
|
22152
|
+
{
|
|
22153
|
+
"name": "part",
|
|
22154
|
+
"text": "supporting-text - Supporting text displayed beneath the radio label."
|
|
22155
|
+
},
|
|
22156
|
+
{
|
|
22157
|
+
"name": "part",
|
|
22158
|
+
"text": "helper-text - Supporting text displayed beneath the radio label when the radio is valid."
|
|
22159
|
+
},
|
|
22160
|
+
{
|
|
22161
|
+
"name": "part",
|
|
22162
|
+
"text": "error-text - Supporting text displayed beneath the radio label when the radio is invalid and touched."
|
|
22151
22163
|
}
|
|
22152
22164
|
],
|
|
22153
22165
|
"usage": {},
|
|
@@ -22269,6 +22281,54 @@
|
|
|
22269
22281
|
"optional": false,
|
|
22270
22282
|
"required": false
|
|
22271
22283
|
},
|
|
22284
|
+
{
|
|
22285
|
+
"name": "errorText",
|
|
22286
|
+
"type": "string | undefined",
|
|
22287
|
+
"complexType": {
|
|
22288
|
+
"original": "string",
|
|
22289
|
+
"resolved": "string | undefined",
|
|
22290
|
+
"references": {}
|
|
22291
|
+
},
|
|
22292
|
+
"mutable": false,
|
|
22293
|
+
"attr": "error-text",
|
|
22294
|
+
"reflectToAttr": false,
|
|
22295
|
+
"docs": "Text that is placed under the radio label and displayed when an error is detected.",
|
|
22296
|
+
"docsTags": [],
|
|
22297
|
+
"values": [
|
|
22298
|
+
{
|
|
22299
|
+
"type": "string"
|
|
22300
|
+
},
|
|
22301
|
+
{
|
|
22302
|
+
"type": "undefined"
|
|
22303
|
+
}
|
|
22304
|
+
],
|
|
22305
|
+
"optional": true,
|
|
22306
|
+
"required": false
|
|
22307
|
+
},
|
|
22308
|
+
{
|
|
22309
|
+
"name": "helperText",
|
|
22310
|
+
"type": "string | undefined",
|
|
22311
|
+
"complexType": {
|
|
22312
|
+
"original": "string",
|
|
22313
|
+
"resolved": "string | undefined",
|
|
22314
|
+
"references": {}
|
|
22315
|
+
},
|
|
22316
|
+
"mutable": false,
|
|
22317
|
+
"attr": "helper-text",
|
|
22318
|
+
"reflectToAttr": false,
|
|
22319
|
+
"docs": "Text that is placed under the radio label and displayed when no error is detected.",
|
|
22320
|
+
"docsTags": [],
|
|
22321
|
+
"values": [
|
|
22322
|
+
{
|
|
22323
|
+
"type": "string"
|
|
22324
|
+
},
|
|
22325
|
+
{
|
|
22326
|
+
"type": "undefined"
|
|
22327
|
+
}
|
|
22328
|
+
],
|
|
22329
|
+
"optional": true,
|
|
22330
|
+
"required": false
|
|
22331
|
+
},
|
|
22272
22332
|
{
|
|
22273
22333
|
"name": "justify",
|
|
22274
22334
|
"type": "\"end\" | \"space-between\" | \"start\" | undefined",
|
|
@@ -22495,6 +22555,14 @@
|
|
|
22495
22555
|
"name": "container",
|
|
22496
22556
|
"docs": "The container for the radio mark."
|
|
22497
22557
|
},
|
|
22558
|
+
{
|
|
22559
|
+
"name": "error-text",
|
|
22560
|
+
"docs": "Supporting text displayed beneath the radio label when the radio is invalid and touched."
|
|
22561
|
+
},
|
|
22562
|
+
{
|
|
22563
|
+
"name": "helper-text",
|
|
22564
|
+
"docs": "Supporting text displayed beneath the radio label when the radio is valid."
|
|
22565
|
+
},
|
|
22498
22566
|
{
|
|
22499
22567
|
"name": "label",
|
|
22500
22568
|
"docs": "The label text describing the radio."
|
|
@@ -22502,6 +22570,10 @@
|
|
|
22502
22570
|
{
|
|
22503
22571
|
"name": "mark",
|
|
22504
22572
|
"docs": "The checkmark or dot used to indicate the checked state."
|
|
22573
|
+
},
|
|
22574
|
+
{
|
|
22575
|
+
"name": "supporting-text",
|
|
22576
|
+
"docs": "Supporting text displayed beneath the radio label."
|
|
22505
22577
|
}
|
|
22506
22578
|
],
|
|
22507
22579
|
"dependents": [
|
|
@@ -32446,18 +32518,6 @@
|
|
|
32446
32518
|
{
|
|
32447
32519
|
"name": "part",
|
|
32448
32520
|
"text": "label - The label text describing the toggle."
|
|
32449
|
-
},
|
|
32450
|
-
{
|
|
32451
|
-
"name": "part",
|
|
32452
|
-
"text": "supporting-text - Supporting text displayed beneath the toggle label."
|
|
32453
|
-
},
|
|
32454
|
-
{
|
|
32455
|
-
"name": "part",
|
|
32456
|
-
"text": "helper-text - Supporting text displayed beneath the toggle label when the toggle is valid."
|
|
32457
|
-
},
|
|
32458
|
-
{
|
|
32459
|
-
"name": "part",
|
|
32460
|
-
"text": "error-text - Supporting text displayed beneath the toggle label when the toggle is invalid and touched."
|
|
32461
32521
|
}
|
|
32462
32522
|
],
|
|
32463
32523
|
"usage": {},
|
|
@@ -32626,54 +32686,6 @@
|
|
|
32626
32686
|
"optional": false,
|
|
32627
32687
|
"required": false
|
|
32628
32688
|
},
|
|
32629
|
-
{
|
|
32630
|
-
"name": "errorText",
|
|
32631
|
-
"type": "string | undefined",
|
|
32632
|
-
"complexType": {
|
|
32633
|
-
"original": "string",
|
|
32634
|
-
"resolved": "string | undefined",
|
|
32635
|
-
"references": {}
|
|
32636
|
-
},
|
|
32637
|
-
"mutable": false,
|
|
32638
|
-
"attr": "error-text",
|
|
32639
|
-
"reflectToAttr": false,
|
|
32640
|
-
"docs": "Text that is placed under the toggle label and displayed when an error is detected.",
|
|
32641
|
-
"docsTags": [],
|
|
32642
|
-
"values": [
|
|
32643
|
-
{
|
|
32644
|
-
"type": "string"
|
|
32645
|
-
},
|
|
32646
|
-
{
|
|
32647
|
-
"type": "undefined"
|
|
32648
|
-
}
|
|
32649
|
-
],
|
|
32650
|
-
"optional": true,
|
|
32651
|
-
"required": false
|
|
32652
|
-
},
|
|
32653
|
-
{
|
|
32654
|
-
"name": "helperText",
|
|
32655
|
-
"type": "string | undefined",
|
|
32656
|
-
"complexType": {
|
|
32657
|
-
"original": "string",
|
|
32658
|
-
"resolved": "string | undefined",
|
|
32659
|
-
"references": {}
|
|
32660
|
-
},
|
|
32661
|
-
"mutable": false,
|
|
32662
|
-
"attr": "helper-text",
|
|
32663
|
-
"reflectToAttr": false,
|
|
32664
|
-
"docs": "Text that is placed under the toggle label and displayed when no error is detected.",
|
|
32665
|
-
"docsTags": [],
|
|
32666
|
-
"values": [
|
|
32667
|
-
{
|
|
32668
|
-
"type": "string"
|
|
32669
|
-
},
|
|
32670
|
-
{
|
|
32671
|
-
"type": "undefined"
|
|
32672
|
-
}
|
|
32673
|
-
],
|
|
32674
|
-
"optional": true,
|
|
32675
|
-
"required": false
|
|
32676
|
-
},
|
|
32677
32689
|
{
|
|
32678
32690
|
"name": "justify",
|
|
32679
32691
|
"type": "\"end\" | \"space-between\" | \"start\" | undefined",
|
|
@@ -33041,26 +33053,14 @@
|
|
|
33041
33053
|
}
|
|
33042
33054
|
],
|
|
33043
33055
|
"parts": [
|
|
33044
|
-
{
|
|
33045
|
-
"name": "error-text",
|
|
33046
|
-
"docs": "Supporting text displayed beneath the toggle label when the toggle is invalid and touched."
|
|
33047
|
-
},
|
|
33048
33056
|
{
|
|
33049
33057
|
"name": "handle",
|
|
33050
33058
|
"docs": "The toggle handle, or knob, used to change the checked state."
|
|
33051
33059
|
},
|
|
33052
|
-
{
|
|
33053
|
-
"name": "helper-text",
|
|
33054
|
-
"docs": "Supporting text displayed beneath the toggle label when the toggle is valid."
|
|
33055
|
-
},
|
|
33056
33060
|
{
|
|
33057
33061
|
"name": "label",
|
|
33058
33062
|
"docs": "The label text describing the toggle."
|
|
33059
33063
|
},
|
|
33060
|
-
{
|
|
33061
|
-
"name": "supporting-text",
|
|
33062
|
-
"docs": "Supporting text displayed beneath the toggle label."
|
|
33063
|
-
},
|
|
33064
33064
|
{
|
|
33065
33065
|
"name": "track",
|
|
33066
33066
|
"docs": "The background track of the toggle."
|
|
@@ -7,10 +7,10 @@ import { i as isOptionSelected } from './compare-with-utils-a96ff2ea.js';
|
|
|
7
7
|
import { h as hostContext, c as createColorClasses } from './theme-01f3f29c.js';
|
|
8
8
|
import { b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
9
9
|
|
|
10
|
-
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}
|
|
10
|
+
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}";
|
|
11
11
|
const IonRadioIosStyle0 = radioIosCss;
|
|
12
12
|
|
|
13
|
-
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}
|
|
13
|
+
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}";
|
|
14
14
|
const IonRadioMdStyle0 = radioMdCss;
|
|
15
15
|
|
|
16
16
|
const Radio = class {
|
|
@@ -19,6 +19,8 @@ const Radio = class {
|
|
|
19
19
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
20
20
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
21
21
|
this.inputId = `ion-rb-${radioButtonIds++}`;
|
|
22
|
+
this.helperTextId = `${this.inputId}-helper-text`;
|
|
23
|
+
this.errorTextId = `${this.inputId}-error-text`;
|
|
22
24
|
this.radioGroup = null;
|
|
23
25
|
this.updateState = () => {
|
|
24
26
|
if (this.radioGroup) {
|
|
@@ -58,6 +60,8 @@ const Radio = class {
|
|
|
58
60
|
this.color = undefined;
|
|
59
61
|
this.name = this.inputId;
|
|
60
62
|
this.disabled = false;
|
|
63
|
+
this.errorText = undefined;
|
|
64
|
+
this.helperText = undefined;
|
|
61
65
|
this.value = undefined;
|
|
62
66
|
this.labelPlacement = 'start';
|
|
63
67
|
this.justify = undefined;
|
|
@@ -117,11 +121,37 @@ const Radio = class {
|
|
|
117
121
|
renderRadioControl() {
|
|
118
122
|
return (h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })));
|
|
119
123
|
}
|
|
124
|
+
getHintTextID() {
|
|
125
|
+
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
126
|
+
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
127
|
+
return errorTextId;
|
|
128
|
+
}
|
|
129
|
+
if (helperText) {
|
|
130
|
+
return helperTextId;
|
|
131
|
+
}
|
|
132
|
+
return undefined;
|
|
133
|
+
}
|
|
134
|
+
/**
|
|
135
|
+
* Responsible for rendering helper text and error text.
|
|
136
|
+
* This element should only be rendered if hint text is set.
|
|
137
|
+
*/
|
|
138
|
+
renderHintText() {
|
|
139
|
+
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
140
|
+
/**
|
|
141
|
+
* undefined and empty string values should
|
|
142
|
+
* be treated as not having helper/error text.
|
|
143
|
+
*/
|
|
144
|
+
const hasHintText = !!helperText || !!errorText;
|
|
145
|
+
if (!hasHintText) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
return (h("div", { class: "radio-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
|
|
149
|
+
}
|
|
120
150
|
render() {
|
|
121
151
|
const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
|
|
122
152
|
const mode = getIonMode(this);
|
|
123
153
|
const inItem = hostContext('ion-item', el);
|
|
124
|
-
return (h(Host, { key: '
|
|
154
|
+
return (h(Host, { key: '4f01024a74c1846438372c40519df1044f5b12b9', onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, class: createColorClasses(color, {
|
|
125
155
|
[mode]: true,
|
|
126
156
|
'in-item': inItem,
|
|
127
157
|
'radio-checked': checked,
|
|
@@ -132,10 +162,10 @@ const Radio = class {
|
|
|
132
162
|
// Focus and active styling should not apply when the radio is in an item
|
|
133
163
|
'ion-activatable': !inItem,
|
|
134
164
|
'ion-focusable': !inItem,
|
|
135
|
-
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabindex: buttonTabindex }, h("label", { key: '
|
|
165
|
+
}), role: "radio", "aria-checked": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, "aria-describedby": this.getHintTextID(), "aria-invalid": this.getHintTextID() === this.errorTextId, tabindex: buttonTabindex }, h("label", { key: '59dc0343534e626692f3b71b32204c1b2b25d40a', class: "radio-wrapper" }, h("div", { key: '26d7d3faf1b02bb138fb2c46f83e824962b6b92e', class: {
|
|
136
166
|
'label-text-wrapper': true,
|
|
137
167
|
'label-text-wrapper-hidden': !hasLabel,
|
|
138
|
-
}, part: "label" }, h("slot", { key: '
|
|
168
|
+
}, part: "label" }, h("slot", { key: '9c3d8bb0c5cd3ce94d1e661d89587cf67c522bc0' }), this.renderHintText()), h("div", { key: '3183f79e2977ee001e69c23f73073555744281d8', class: "native-wrapper" }, this.renderRadioControl()))));
|
|
139
169
|
}
|
|
140
170
|
get el() { return getElement(this); }
|
|
141
171
|
static get watchers() { return {
|
|
@@ -11,10 +11,10 @@ import { c as config, b as getIonMode } from './ionic-global-c81d82ab.js';
|
|
|
11
11
|
import './capacitor-59395cbd.js';
|
|
12
12
|
import './index-a5d50daf.js';
|
|
13
13
|
|
|
14
|
-
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-
|
|
14
|
+
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}";
|
|
15
15
|
const IonToggleIosStyle0 = toggleIosCss;
|
|
16
16
|
|
|
17
|
-
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-
|
|
17
|
+
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}";
|
|
18
18
|
const IonToggleMdStyle0 = toggleMdCss;
|
|
19
19
|
|
|
20
20
|
const Toggle = class {
|
|
@@ -24,8 +24,6 @@ const Toggle = class {
|
|
|
24
24
|
this.ionFocus = createEvent(this, "ionFocus", 7);
|
|
25
25
|
this.ionBlur = createEvent(this, "ionBlur", 7);
|
|
26
26
|
this.inputId = `ion-tg-${toggleIds++}`;
|
|
27
|
-
this.helperTextId = `${this.inputId}-helper-text`;
|
|
28
|
-
this.errorTextId = `${this.inputId}-error-text`;
|
|
29
27
|
this.lastDrag = 0;
|
|
30
28
|
this.inheritedAttributes = {};
|
|
31
29
|
this.didLoad = false;
|
|
@@ -71,8 +69,6 @@ const Toggle = class {
|
|
|
71
69
|
this.name = this.inputId;
|
|
72
70
|
this.checked = false;
|
|
73
71
|
this.disabled = false;
|
|
74
|
-
this.errorText = undefined;
|
|
75
|
-
this.helperText = undefined;
|
|
76
72
|
this.value = 'on';
|
|
77
73
|
this.enableOnOffLabels = config.get('toggleOnOffLabels');
|
|
78
74
|
this.labelPlacement = 'start';
|
|
@@ -159,39 +155,13 @@ const Toggle = class {
|
|
|
159
155
|
get hasLabel() {
|
|
160
156
|
return this.el.textContent !== '';
|
|
161
157
|
}
|
|
162
|
-
getHintTextID() {
|
|
163
|
-
const { el, helperText, errorText, helperTextId, errorTextId } = this;
|
|
164
|
-
if (el.classList.contains('ion-touched') && el.classList.contains('ion-invalid') && errorText) {
|
|
165
|
-
return errorTextId;
|
|
166
|
-
}
|
|
167
|
-
if (helperText) {
|
|
168
|
-
return helperTextId;
|
|
169
|
-
}
|
|
170
|
-
return undefined;
|
|
171
|
-
}
|
|
172
|
-
/**
|
|
173
|
-
* Responsible for rendering helper text and error text.
|
|
174
|
-
* This element should only be rendered if hint text is set.
|
|
175
|
-
*/
|
|
176
|
-
renderHintText() {
|
|
177
|
-
const { helperText, errorText, helperTextId, errorTextId } = this;
|
|
178
|
-
/**
|
|
179
|
-
* undefined and empty string values should
|
|
180
|
-
* be treated as not having helper/error text.
|
|
181
|
-
*/
|
|
182
|
-
const hasHintText = !!helperText || !!errorText;
|
|
183
|
-
if (!hasHintText) {
|
|
184
|
-
return;
|
|
185
|
-
}
|
|
186
|
-
return (h("div", { class: "toggle-bottom" }, h("div", { id: helperTextId, class: "helper-text", part: "supporting-text helper-text" }, helperText), h("div", { id: errorTextId, class: "error-text", part: "supporting-text error-text" }, errorText)));
|
|
187
|
-
}
|
|
188
158
|
render() {
|
|
189
159
|
const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this;
|
|
190
160
|
const mode = getIonMode(this);
|
|
191
161
|
const value = this.getValue();
|
|
192
162
|
const rtl = isRTL(el) ? 'rtl' : 'ltr';
|
|
193
163
|
renderHiddenInput(true, el, name, checked ? value : '', disabled);
|
|
194
|
-
return (h(Host, { key: '
|
|
164
|
+
return (h(Host, { key: 'ed75573caa6e37011f1453dd7f723fb9bd8a3656', onClick: this.onClick, class: createColorClasses(color, {
|
|
195
165
|
[mode]: true,
|
|
196
166
|
'in-item': hostContext('ion-item', el),
|
|
197
167
|
'toggle-activated': activated,
|
|
@@ -201,10 +171,10 @@ const Toggle = class {
|
|
|
201
171
|
[`toggle-alignment-${alignment}`]: alignment !== undefined,
|
|
202
172
|
[`toggle-label-placement-${labelPlacement}`]: true,
|
|
203
173
|
[`toggle-${rtl}`]: true,
|
|
204
|
-
}) }, h("label", { key: '
|
|
174
|
+
}) }, h("label", { key: '484860e2a33f4d123904edb96159f0e1972d3add', class: "toggle-wrapper" }, h("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)), h("div", { key: 'f7239fa668fe11257239ea30cf0198e4f3274f6b', class: {
|
|
205
175
|
'label-text-wrapper': true,
|
|
206
176
|
'label-text-wrapper-hidden': !this.hasLabel,
|
|
207
|
-
}, part: "label" }, h("slot", { key: '
|
|
177
|
+
}, part: "label" }, h("slot", { key: '9495a4a39889822ee68e0d89dc5a2f863d1feb3c' })), h("div", { key: '55f1eb08c4b705e94fbcf02220bbe1d292f06155', class: "native-wrapper" }, this.renderToggleControl()))));
|
|
208
178
|
}
|
|
209
179
|
get el() { return getElement(this); }
|
|
210
180
|
static get watchers() { return {
|