voyager-ionic-core 8.4.1 → 8.4.3
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-segment.js +3 -2
- package/components/select-modal.js +3 -3
- package/dist/cjs/ion-segment_2.cjs.entry.js +3 -2
- package/dist/cjs/ion-select-modal.cjs.entry.js +3 -3
- package/dist/collection/components/segment/segment.js +3 -2
- package/dist/collection/components/select-modal/select-modal.ios.css +186 -0
- package/dist/collection/components/select-modal/select-modal.js +2 -2
- package/dist/docs.json +1 -1
- package/dist/esm/ion-segment_2.entry.js +3 -2
- package/dist/esm/ion-select-modal.entry.js +3 -3
- package/dist/esm-es5/ion-segment_2.entry.js +1 -1
- package/dist/esm-es5/ion-select-modal.entry.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-322c5fb4.system.js +1 -1
- package/dist/ionic/p-32d44024.system.entry.js +4 -0
- package/dist/ionic/p-61e3f887.entry.js +4 -0
- package/dist/ionic/p-c4b53b16.system.entry.js +4 -0
- package/dist/ionic/p-cdc83025.entry.js +4 -0
- package/hydrate/index.js +6 -5
- package/hydrate/index.mjs +6 -5
- package/package.json +4 -4
- package/dist/ionic/p-626fd66d.system.entry.js +0 -4
- package/dist/ionic/p-adbc4bdf.entry.js +0 -4
- package/dist/ionic/p-c2b74d92.system.entry.js +0 -4
- package/dist/ionic/p-fec61c32.entry.js +0 -4
|
@@ -159,6 +159,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
|
|
|
159
159
|
this.emitStyle();
|
|
160
160
|
}
|
|
161
161
|
async componentDidLoad() {
|
|
162
|
+
this.segmentViewEl = this.getSegmentView();
|
|
162
163
|
this.setCheckedClasses();
|
|
163
164
|
/**
|
|
164
165
|
* We need to wait for the buttons to all be rendered
|
|
@@ -537,14 +538,14 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
|
|
|
537
538
|
}
|
|
538
539
|
render() {
|
|
539
540
|
const mode = getIonMode(this);
|
|
540
|
-
return (h(Host, { key: '
|
|
541
|
+
return (h(Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
|
|
541
542
|
[mode]: true,
|
|
542
543
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
543
544
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
544
545
|
'segment-activated': this.activated,
|
|
545
546
|
'segment-disabled': this.disabled,
|
|
546
547
|
'segment-scrollable': this.scrollable,
|
|
547
|
-
}) }, h("slot", { key: '
|
|
548
|
+
}) }, h("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
|
|
548
549
|
}
|
|
549
550
|
get el() { return this; }
|
|
550
551
|
static get watchers() { return {
|
|
@@ -22,7 +22,7 @@ import { d as defineCustomElement$1 } from './toolbar.js';
|
|
|
22
22
|
const ionicSelectModalMdCss = ".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container){display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
|
|
23
23
|
const IonSelectModalIonicStyle0 = ionicSelectModalMdCss;
|
|
24
24
|
|
|
25
|
-
const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}";
|
|
25
|
+
const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:\"\"}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}";
|
|
26
26
|
const IonSelectModalIosStyle0 = selectModalIosCss;
|
|
27
27
|
|
|
28
28
|
const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container){display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
|
|
@@ -76,7 +76,7 @@ const SelectModal = /*@__PURE__*/ proxyCustomElement(class SelectModal extends H
|
|
|
76
76
|
}
|
|
77
77
|
renderRadioOptions() {
|
|
78
78
|
const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
|
|
79
|
-
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { class: Object.assign({
|
|
79
|
+
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
|
|
80
80
|
// TODO FW-4784
|
|
81
81
|
'item-radio-checked': option.value === checked
|
|
82
82
|
}, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
|
|
@@ -102,7 +102,7 @@ const SelectModal = /*@__PURE__*/ proxyCustomElement(class SelectModal extends H
|
|
|
102
102
|
} }, option.text))));
|
|
103
103
|
}
|
|
104
104
|
render() {
|
|
105
|
-
return (h(Host, { key: '
|
|
105
|
+
return (h(Host, { key: '4df42c447b4026d09d9231f09dc4bdae9a8cfe4a', class: getIonMode(this) }, h("ion-header", { key: '211c4e869b858867f3d60637e570aeb01de41de7' }, h("ion-toolbar", { key: 'dc4b151331aecbaaaafb460802ee9b689493601d' }, this.header !== undefined && h("ion-title", { key: 'ba1347a59ae0a5c6770c239b5ec02a536a445bd1' }, this.header), h("ion-buttons", { key: '43c98fd25d7e7f54b94b24e53535c6d5ba599892', slot: "end" }, h("ion-button", { key: '51b2b3f3eed42637b2cfc213c95d0bcf10e4b89d', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'fe721b09f80555856211f7e40dbfc31a533acae1' }, h("ion-list", { key: 'd0b932d137136958d896408fb2fa571023775b92' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
106
106
|
}
|
|
107
107
|
get el() { return this; }
|
|
108
108
|
static get style() { return {
|
|
@@ -161,6 +161,7 @@ const Segment = class {
|
|
|
161
161
|
this.emitStyle();
|
|
162
162
|
}
|
|
163
163
|
async componentDidLoad() {
|
|
164
|
+
this.segmentViewEl = this.getSegmentView();
|
|
164
165
|
this.setCheckedClasses();
|
|
165
166
|
/**
|
|
166
167
|
* We need to wait for the buttons to all be rendered
|
|
@@ -539,14 +540,14 @@ const Segment = class {
|
|
|
539
540
|
}
|
|
540
541
|
render() {
|
|
541
542
|
const mode = ionicGlobal.getIonMode(this);
|
|
542
|
-
return (index.h(index.Host, { key: '
|
|
543
|
+
return (index.h(index.Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', role: "tablist", onClick: this.onClick, class: theme.createColorClasses(this.color, {
|
|
543
544
|
[mode]: true,
|
|
544
545
|
'in-toolbar': theme.hostContext('ion-toolbar', this.el),
|
|
545
546
|
'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
|
|
546
547
|
'segment-activated': this.activated,
|
|
547
548
|
'segment-disabled': this.disabled,
|
|
548
549
|
'segment-scrollable': this.scrollable,
|
|
549
|
-
}) }, index.h("slot", { key: '
|
|
550
|
+
}) }, index.h("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
|
|
550
551
|
}
|
|
551
552
|
get el() { return index.getElement(this); }
|
|
552
553
|
static get watchers() { return {
|
|
@@ -19,7 +19,7 @@ require('./index-5915f9b3.js');
|
|
|
19
19
|
const ionicSelectModalMdCss = ".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container){display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
|
|
20
20
|
const IonSelectModalIonicStyle0 = ionicSelectModalMdCss;
|
|
21
21
|
|
|
22
|
-
const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}";
|
|
22
|
+
const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:\"\"}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}";
|
|
23
23
|
const IonSelectModalIosStyle0 = selectModalIosCss;
|
|
24
24
|
|
|
25
25
|
const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container){display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
|
|
@@ -72,7 +72,7 @@ const SelectModal = class {
|
|
|
72
72
|
}
|
|
73
73
|
renderRadioOptions() {
|
|
74
74
|
const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
|
|
75
|
-
return (index.h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (index.h("ion-item", { class: Object.assign({
|
|
75
|
+
return (index.h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (index.h("ion-item", { lines: "none", class: Object.assign({
|
|
76
76
|
// TODO FW-4784
|
|
77
77
|
'item-radio-checked': option.value === checked
|
|
78
78
|
}, theme.getClassMap(option.cssClass)) }, index.h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
|
|
@@ -98,7 +98,7 @@ const SelectModal = class {
|
|
|
98
98
|
} }, option.text))));
|
|
99
99
|
}
|
|
100
100
|
render() {
|
|
101
|
-
return (index.h(index.Host, { key: '
|
|
101
|
+
return (index.h(index.Host, { key: '4df42c447b4026d09d9231f09dc4bdae9a8cfe4a', class: ionicGlobal.getIonMode(this) }, index.h("ion-header", { key: '211c4e869b858867f3d60637e570aeb01de41de7' }, index.h("ion-toolbar", { key: 'dc4b151331aecbaaaafb460802ee9b689493601d' }, this.header !== undefined && index.h("ion-title", { key: 'ba1347a59ae0a5c6770c239b5ec02a536a445bd1' }, this.header), index.h("ion-buttons", { key: '43c98fd25d7e7f54b94b24e53535c6d5ba599892', slot: "end" }, index.h("ion-button", { key: '51b2b3f3eed42637b2cfc213c95d0bcf10e4b89d', onClick: () => this.closeModal() }, "Close")))), index.h("ion-content", { key: 'fe721b09f80555856211f7e40dbfc31a533acae1' }, index.h("ion-list", { key: 'd0b932d137136958d896408fb2fa571023775b92' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
102
102
|
}
|
|
103
103
|
get el() { return index.getElement(this); }
|
|
104
104
|
};
|
|
@@ -149,6 +149,7 @@ export class Segment {
|
|
|
149
149
|
this.emitStyle();
|
|
150
150
|
}
|
|
151
151
|
async componentDidLoad() {
|
|
152
|
+
this.segmentViewEl = this.getSegmentView();
|
|
152
153
|
this.setCheckedClasses();
|
|
153
154
|
/**
|
|
154
155
|
* We need to wait for the buttons to all be rendered
|
|
@@ -529,14 +530,14 @@ export class Segment {
|
|
|
529
530
|
}
|
|
530
531
|
render() {
|
|
531
532
|
const mode = getIonMode(this);
|
|
532
|
-
return (h(Host, { key: '
|
|
533
|
+
return (h(Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
|
|
533
534
|
[mode]: true,
|
|
534
535
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
535
536
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
536
537
|
'segment-activated': this.activated,
|
|
537
538
|
'segment-disabled': this.disabled,
|
|
538
539
|
'segment-scrollable': this.scrollable,
|
|
539
|
-
}) }, h("slot", { key: '
|
|
540
|
+
}) }, h("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
|
|
540
541
|
}
|
|
541
542
|
static get is() { return "ion-segment"; }
|
|
542
543
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1,3 +1,189 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
height: 100%;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Convert a font size to a dynamic font size.
|
|
7
|
+
* Fonts that participate in Dynamic Type should use
|
|
8
|
+
* dynamic font sizes.
|
|
9
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
10
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
11
|
+
* convert to a unit other than $baselineUnit.
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* Convert a font size to a dynamic font size but impose
|
|
15
|
+
* a maximum font size.
|
|
16
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
17
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
18
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
19
|
+
* convert to a unit other than $baselineUnit.
|
|
20
|
+
*/
|
|
21
|
+
/**
|
|
22
|
+
* Convert a font size to a dynamic font size but impose
|
|
23
|
+
* a minimum font size.
|
|
24
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
25
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
26
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
27
|
+
* convert to a unit other than $baselineUnit.
|
|
28
|
+
*/
|
|
29
|
+
/**
|
|
30
|
+
* Convert a font size to a dynamic font size but impose
|
|
31
|
+
* maximum and minimum font sizes.
|
|
32
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
33
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
34
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
35
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
36
|
+
* convert to a unit other than $baselineUnit.
|
|
37
|
+
*/
|
|
38
|
+
/**
|
|
39
|
+
* A heuristic that applies CSS to tablet
|
|
40
|
+
* viewports.
|
|
41
|
+
*
|
|
42
|
+
* Usage:
|
|
43
|
+
* @include tablet-viewport() {
|
|
44
|
+
* :host {
|
|
45
|
+
* background-color: green;
|
|
46
|
+
* }
|
|
47
|
+
* }
|
|
48
|
+
*/
|
|
49
|
+
/**
|
|
50
|
+
* A heuristic that applies CSS to mobile
|
|
51
|
+
* viewports (i.e. phones, not tablets).
|
|
52
|
+
*
|
|
53
|
+
* Usage:
|
|
54
|
+
* @include mobile-viewport() {
|
|
55
|
+
* :host {
|
|
56
|
+
* background-color: blue;
|
|
57
|
+
* }
|
|
58
|
+
* }
|
|
59
|
+
*/
|
|
60
|
+
/**
|
|
61
|
+
* Convert a font size to a dynamic font size.
|
|
62
|
+
* Fonts that participate in Dynamic Type should use
|
|
63
|
+
* dynamic font sizes.
|
|
64
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
65
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
66
|
+
* convert to a unit other than $baselineUnit.
|
|
67
|
+
*/
|
|
68
|
+
/**
|
|
69
|
+
* Convert a font size to a dynamic font size but impose
|
|
70
|
+
* a maximum font size.
|
|
71
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
72
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
73
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
74
|
+
* convert to a unit other than $baselineUnit.
|
|
75
|
+
*/
|
|
76
|
+
/**
|
|
77
|
+
* Convert a font size to a dynamic font size but impose
|
|
78
|
+
* a minimum font size.
|
|
79
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
80
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
81
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
82
|
+
* convert to a unit other than $baselineUnit.
|
|
83
|
+
*/
|
|
84
|
+
/**
|
|
85
|
+
* Convert a font size to a dynamic font size but impose
|
|
86
|
+
* maximum and minimum font sizes.
|
|
87
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
88
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
89
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
90
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
91
|
+
* convert to a unit other than $baselineUnit.
|
|
92
|
+
*/
|
|
93
|
+
/**
|
|
94
|
+
* A heuristic that applies CSS to tablet
|
|
95
|
+
* viewports.
|
|
96
|
+
*
|
|
97
|
+
* Usage:
|
|
98
|
+
* @include tablet-viewport() {
|
|
99
|
+
* :host {
|
|
100
|
+
* background-color: green;
|
|
101
|
+
* }
|
|
102
|
+
* }
|
|
103
|
+
*/
|
|
104
|
+
/**
|
|
105
|
+
* A heuristic that applies CSS to mobile
|
|
106
|
+
* viewports (i.e. phones, not tablets).
|
|
107
|
+
*
|
|
108
|
+
* Usage:
|
|
109
|
+
* @include mobile-viewport() {
|
|
110
|
+
* :host {
|
|
111
|
+
* background-color: blue;
|
|
112
|
+
* }
|
|
113
|
+
* }
|
|
114
|
+
*/
|
|
115
|
+
/**
|
|
116
|
+
* Convert a font size to a dynamic font size.
|
|
117
|
+
* Fonts that participate in Dynamic Type should use
|
|
118
|
+
* dynamic font sizes.
|
|
119
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
120
|
+
* @param unit (optional) - The unit to convert to. Use this if you want to
|
|
121
|
+
* convert to a unit other than $baselineUnit.
|
|
122
|
+
*/
|
|
123
|
+
/**
|
|
124
|
+
* Convert a font size to a dynamic font size but impose
|
|
125
|
+
* a maximum font size.
|
|
126
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
127
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
128
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
129
|
+
* convert to a unit other than $baselineUnit.
|
|
130
|
+
*/
|
|
131
|
+
/**
|
|
132
|
+
* Convert a font size to a dynamic font size but impose
|
|
133
|
+
* a minimum font size.
|
|
134
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
135
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
136
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
137
|
+
* convert to a unit other than $baselineUnit.
|
|
138
|
+
*/
|
|
139
|
+
/**
|
|
140
|
+
* Convert a font size to a dynamic font size but impose
|
|
141
|
+
* maximum and minimum font sizes.
|
|
142
|
+
* @param size - The initial font size including the unit (i.e. px or pt)
|
|
143
|
+
* @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
|
|
144
|
+
* @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
|
|
145
|
+
* @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
|
|
146
|
+
* convert to a unit other than $baselineUnit.
|
|
147
|
+
*/
|
|
148
|
+
/**
|
|
149
|
+
* A heuristic that applies CSS to tablet
|
|
150
|
+
* viewports.
|
|
151
|
+
*
|
|
152
|
+
* Usage:
|
|
153
|
+
* @include tablet-viewport() {
|
|
154
|
+
* :host {
|
|
155
|
+
* background-color: green;
|
|
156
|
+
* }
|
|
157
|
+
* }
|
|
158
|
+
*/
|
|
159
|
+
/**
|
|
160
|
+
* A heuristic that applies CSS to mobile
|
|
161
|
+
* viewports (i.e. phones, not tablets).
|
|
162
|
+
*
|
|
163
|
+
* Usage:
|
|
164
|
+
* @include mobile-viewport() {
|
|
165
|
+
* :host {
|
|
166
|
+
* background-color: blue;
|
|
167
|
+
* }
|
|
168
|
+
* }
|
|
169
|
+
*/
|
|
170
|
+
ion-item {
|
|
171
|
+
--inner-padding-end: 0;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* The bottom border of the item should only be displayed
|
|
176
|
+
* under the text and not the radio icon.
|
|
177
|
+
*/
|
|
178
|
+
ion-radio::after {
|
|
179
|
+
bottom: 0;
|
|
180
|
+
position: absolute;
|
|
181
|
+
width: calc(100% - 0.9375rem - 16px); /* Adjust width based on the shift */
|
|
182
|
+
border-width: 0px 0px 0.55px 0px;
|
|
183
|
+
border-style: solid;
|
|
184
|
+
border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
|
|
185
|
+
content: "";
|
|
186
|
+
}
|
|
187
|
+
ion-radio::after {
|
|
188
|
+
inset-inline-start: calc(0.9375rem + 16px);
|
|
3
189
|
}
|
|
@@ -51,7 +51,7 @@ export class SelectModal {
|
|
|
51
51
|
}
|
|
52
52
|
renderRadioOptions() {
|
|
53
53
|
const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
|
|
54
|
-
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { class: Object.assign({
|
|
54
|
+
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
|
|
55
55
|
// TODO FW-4784
|
|
56
56
|
'item-radio-checked': option.value === checked
|
|
57
57
|
}, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
|
|
@@ -77,7 +77,7 @@ export class SelectModal {
|
|
|
77
77
|
} }, option.text))));
|
|
78
78
|
}
|
|
79
79
|
render() {
|
|
80
|
-
return (h(Host, { key: '
|
|
80
|
+
return (h(Host, { key: '4df42c447b4026d09d9231f09dc4bdae9a8cfe4a', class: getIonMode(this) }, h("ion-header", { key: '211c4e869b858867f3d60637e570aeb01de41de7' }, h("ion-toolbar", { key: 'dc4b151331aecbaaaafb460802ee9b689493601d' }, this.header !== undefined && h("ion-title", { key: 'ba1347a59ae0a5c6770c239b5ec02a536a445bd1' }, this.header), h("ion-buttons", { key: '43c98fd25d7e7f54b94b24e53535c6d5ba599892', slot: "end" }, h("ion-button", { key: '51b2b3f3eed42637b2cfc213c95d0bcf10e4b89d', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'fe721b09f80555856211f7e40dbfc31a533acae1' }, h("ion-list", { key: 'd0b932d137136958d896408fb2fa571023775b92' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
81
81
|
}
|
|
82
82
|
static get is() { return "ion-select-modal"; }
|
|
83
83
|
static get encapsulation() { return "scoped"; }
|
package/dist/docs.json
CHANGED
|
@@ -157,6 +157,7 @@ const Segment = class {
|
|
|
157
157
|
this.emitStyle();
|
|
158
158
|
}
|
|
159
159
|
async componentDidLoad() {
|
|
160
|
+
this.segmentViewEl = this.getSegmentView();
|
|
160
161
|
this.setCheckedClasses();
|
|
161
162
|
/**
|
|
162
163
|
* We need to wait for the buttons to all be rendered
|
|
@@ -535,14 +536,14 @@ const Segment = class {
|
|
|
535
536
|
}
|
|
536
537
|
render() {
|
|
537
538
|
const mode = getIonMode(this);
|
|
538
|
-
return (h(Host, { key: '
|
|
539
|
+
return (h(Host, { key: 'b1eb4a6e4f953f6c4882395585799503735bbc6b', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
|
|
539
540
|
[mode]: true,
|
|
540
541
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
541
542
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
542
543
|
'segment-activated': this.activated,
|
|
543
544
|
'segment-disabled': this.disabled,
|
|
544
545
|
'segment-scrollable': this.scrollable,
|
|
545
|
-
}) }, h("slot", { key: '
|
|
546
|
+
}) }, h("slot", { key: 'e7df6b017d154f30eb8021bc965f2e6c8e6480bf', onSlotchange: this.onSlottedItemsChange })));
|
|
546
547
|
}
|
|
547
548
|
get el() { return getElement(this); }
|
|
548
549
|
static get watchers() { return {
|
|
@@ -15,7 +15,7 @@ import './index-9b0d46f4.js';
|
|
|
15
15
|
const ionicSelectModalMdCss = ".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container){display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
|
|
16
16
|
const IonSelectModalIonicStyle0 = ionicSelectModalMdCss;
|
|
17
17
|
|
|
18
|
-
const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}";
|
|
18
|
+
const selectModalIosCss = ".sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:\"\"}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}";
|
|
19
19
|
const IonSelectModalIosStyle0 = selectModalIosCss;
|
|
20
20
|
|
|
21
21
|
const selectModalMdCss = ".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container){display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";
|
|
@@ -68,7 +68,7 @@ const SelectModal = class {
|
|
|
68
68
|
}
|
|
69
69
|
renderRadioOptions() {
|
|
70
70
|
const checked = this.options.filter((o) => o.checked).map((o) => o.value)[0];
|
|
71
|
-
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { class: Object.assign({
|
|
71
|
+
return (h("ion-radio-group", { value: checked, onIonChange: (ev) => this.callOptionHandler(ev) }, this.options.map((option) => (h("ion-item", { lines: "none", class: Object.assign({
|
|
72
72
|
// TODO FW-4784
|
|
73
73
|
'item-radio-checked': option.value === checked
|
|
74
74
|
}, getClassMap(option.cssClass)) }, h("ion-radio", { value: option.value, disabled: option.disabled, justify: "start", labelPlacement: "end", onClick: () => this.closeModal(), onKeyUp: (ev) => {
|
|
@@ -94,7 +94,7 @@ const SelectModal = class {
|
|
|
94
94
|
} }, option.text))));
|
|
95
95
|
}
|
|
96
96
|
render() {
|
|
97
|
-
return (h(Host, { key: '
|
|
97
|
+
return (h(Host, { key: '4df42c447b4026d09d9231f09dc4bdae9a8cfe4a', class: getIonMode(this) }, h("ion-header", { key: '211c4e869b858867f3d60637e570aeb01de41de7' }, h("ion-toolbar", { key: 'dc4b151331aecbaaaafb460802ee9b689493601d' }, this.header !== undefined && h("ion-title", { key: 'ba1347a59ae0a5c6770c239b5ec02a536a445bd1' }, this.header), h("ion-buttons", { key: '43c98fd25d7e7f54b94b24e53535c6d5ba599892', slot: "end" }, h("ion-button", { key: '51b2b3f3eed42637b2cfc213c95d0bcf10e4b89d', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: 'fe721b09f80555856211f7e40dbfc31a533acae1' }, h("ion-list", { key: 'd0b932d137136958d896408fb2fa571023775b92' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
|
|
98
98
|
}
|
|
99
99
|
get el() { return getElement(this); }
|
|
100
100
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import{__awaiter,__generator}from"tslib";
|
|
2
2
|
/*!
|
|
3
3
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
4
|
-
*/import{r as registerInstance,d as createEvent,w as writeTask,h,f as Host,i as getElement,j as forceUpdate}from"./index-28849c61.js";import{r as raf,a as addEventListener,b as removeEventListener,h as inheritAttributes}from"./helpers-da915de8.js";import{i as isRTL}from"./dir-babeabeb.js";import{c as createColorClasses,h as hostContext}from"./theme-01f3f29c.js";import{b as getIonMode}from"./ionic-global-c81d82ab.js";var segmentIosCss=":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";var IonSegmentIosStyle0=segmentIosCss;var segmentMdCss=":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}";var IonSegmentMdStyle0=segmentMdCss;var Segment=function(){function t(t){var o=this;registerInstance(this,t);this.ionChange=createEvent(this,"ionChange",7);this.ionSelect=createEvent(this,"ionSelect",7);this.ionStyle=createEvent(this,"ionStyle",7);this.segmentViewEl=null;this.onClick=function(t){var n=t.target;var e=o.checked;if(n.tagName==="ION-SEGMENT"){return}o.value=n.value;if(n!==e){o.emitValueChange()}if(o.segmentViewEl){o.updateSegmentView();if(o.scrollable&&e){o.checkButton(e,n)}}else if(o.scrollable||!o.swipeGesture){if(e){o.checkButton(e,n)}else{o.setCheckedClasses()}}};this.onSlottedItemsChange=function(){o.valueChanged(o.value)};this.getSegmentButton=function(t){var n,e;var i=o.getButtons().filter((function(t){return!t.disabled}));var r=i.findIndex((function(t){return t===document.activeElement}));switch(t){case"first":return i[0];case"last":return i[i.length-1];case"next":return(n=i[r+1])!==null&&n!==void 0?n:i[0];case"previous":return(e=i[r-1])!==null&&e!==void 0?e:i[i.length-1];default:return null}};this.activated=false;this.color=undefined;this.disabled=false;this.scrollable=false;this.swipeGesture=true;this.value=undefined;this.selectOnFocus=false}t.prototype.colorChanged=function(t,o){if(o===undefined&&t!==undefined||o!==undefined&&t===undefined){this.emitStyle()}};t.prototype.swipeGestureChanged=function(){this.gestureChanged()};t.prototype.valueChanged=function(t,o){if(this.segmentViewEl&&t===undefined){this.value=this.getButtons()[0].value;return}if(o!==undefined&&t!==undefined){var n=this.getButtons();var e=n.find((function(t){return t.value===o}));var i=n.find((function(o){return o.value===t}));if(e&&i){if(!this.segmentViewEl){this.checkButton(e,i)}else if(this.triggerScrollOnValueChange!==false){this.updateSegmentView()}}}else if(t!==undefined&&o===undefined&&this.segmentViewEl){this.updateSegmentView()}this.ionSelect.emit({value:t});if(!this.segmentViewEl){this.scrollActiveButtonIntoView()}this.triggerScrollOnValueChange=undefined};t.prototype.disabledChanged=function(){this.gestureChanged();if(!this.segmentViewEl){var t=this.getButtons();for(var o=0,n=t;o<n.length;o++){var e=n[o];e.disabled=this.disabled}}else{this.segmentViewEl.disabled=this.disabled}};t.prototype.gestureChanged=function(){if(this.gesture){this.gesture.enable(!this.scrollable&&!this.disabled&&this.swipeGesture)}};t.prototype.connectedCallback=function(){this.emitStyle();this.segmentViewEl=this.getSegmentView()};t.prototype.disconnectedCallback=function(){this.segmentViewEl=null};t.prototype.componentWillLoad=function(){this.emitStyle()};t.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;var o=this;return __generator(this,(function(n){switch(n.label){case 0:this.setCheckedClasses();raf((function(){o.scrollActiveButtonIntoView(false)}));t=this;return[4,import("./index-39782642.js")];case 1:t.gesture=n.sent().createGesture({el:this.el,gestureName:"segment",gesturePriority:100,threshold:0,passive:false,onStart:function(t){return o.onStart(t)},onMove:function(t){return o.onMove(t)},onEnd:function(t){return o.onEnd(t)}});this.gestureChanged();if(this.disabled){this.disabledChanged()}this.updateSegmentView(false);return[2]}}))}))};t.prototype.onStart=function(t){this.valueBeforeGesture=this.value;this.activate(t)};t.prototype.onMove=function(t){this.setNextIndex(t)};t.prototype.onEnd=function(t){this.setActivated(false);this.setNextIndex(t,true);t.event.stopImmediatePropagation();var o=this.value;if(o!==undefined){if(this.valueBeforeGesture!==o){this.emitValueChange();this.updateSegmentView()}}this.valueBeforeGesture=undefined};t.prototype.emitValueChange=function(){var t=this.value;this.ionChange.emit({value:t})};t.prototype.getButtons=function(){return Array.from(this.el.querySelectorAll("ion-segment-button"))};Object.defineProperty(t.prototype,"checked",{get:function(){var t=this;return this.getButtons().find((function(o){return o.value===t.value}))},enumerable:false,configurable:true});t.prototype.setActivated=function(t){var o=this.getButtons();o.forEach((function(o){o.classList.toggle("segment-button-activated",t)}));this.activated=t};t.prototype.activate=function(t){var o=this;var n=t.event.target;var e=this.getButtons();var i=e.find((function(t){return t.value===o.value}));if(n.tagName!=="ION-SEGMENT-BUTTON"){return}if(!i){this.value=n.value;this.setCheckedClasses()}if(this.value===n.value){this.setActivated(true)}};t.prototype.getIndicator=function(t){var o=t.shadowRoot||t;return o.querySelector(".segment-button-indicator")};t.prototype.checkButton=function(t,o){var n=this;var e=this.getIndicator(t);var i=this.getIndicator(o);if(e===null||i===null){return}var r=e.getBoundingClientRect();var a=i.getBoundingClientRect();var s=r.width/a.width;var c=r.left-a.left;var d="translate3d(".concat(c,"px, 0, 0) scaleX(").concat(s,")");writeTask((function(){i.classList.remove("segment-button-indicator-animated");i.style.setProperty("transform",d);i.getBoundingClientRect();i.classList.add("segment-button-indicator-animated");i.style.setProperty("transform","");n.scrollActiveButtonIntoView(true)}));this.value=o.value;this.setCheckedClasses()};t.prototype.setCheckedClasses=function(){var t=this;var o=this.getButtons();var n=o.findIndex((function(o){return o.value===t.value}));var e=n+1;for(var i=0,r=o;i<r.length;i++){var a=r[i];a.classList.remove("segment-button-after-checked")}if(e<o.length){o[e].classList.add("segment-button-after-checked")}};t.prototype.getSegmentView=function(){var t=this.getButtons();var o=t.find((function(t){return t.contentId}));var n=document.querySelector('ion-segment-content[id="'.concat(o===null||o===void 0?void 0:o.contentId,'"]'));return n===null||n===void 0?void 0:n.closest("ion-segment-view")};t.prototype.handleSegmentViewScroll=function(t){var o=this;var n=t.detail,e=n.scrollRatio,i=n.isManualScroll;if(!i){return}var r=t.target;var a=this.segmentViewEl;var s=this.el;if(t.composedPath().includes(a)||(r===null||r===void 0?void 0:r.contains(s))){var c=this.getButtons();if(!c.length)return;var d=c.findIndex((function(t){return t.value===o.value}));var l=c[d];var u=Math.round(e*(c.length-1));if(this.lastNextIndex===undefined||this.lastNextIndex!==u){this.lastNextIndex=u;this.triggerScrollOnValueChange=false;this.checkButton(l,c[u]);this.emitValueChange()}}};t.prototype.updateSegmentView=function(t){var o=this;if(t===void 0){t=true}var n=this.getButtons();var e=n.find((function(t){return t.value===o.value}));if(!(e===null||e===void 0?void 0:e.contentId)){return}var i=this.segmentViewEl;if(i){i.setContent(e.contentId,t)}};t.prototype.scrollActiveButtonIntoView=function(t){if(t===void 0){t=true}var o=this,n=o.scrollable,e=o.value,i=o.el;if(n){var r=this.getButtons();var a=r.find((function(t){return t.value===e}));if(a!==undefined){var s=i.getBoundingClientRect();var c=a.getBoundingClientRect();var d=c.x-s.x;var l=d-s.width/2+c.width/2;var u=i.scrollLeft+l;i.scrollTo({top:0,left:u,behavior:t?"smooth":"instant"})}}};t.prototype.setNextIndex=function(t,o){var n=this;if(o===void 0){o=false}var e=isRTL(this.el);var i=this.activated;var r=this.getButtons();var a=r.findIndex((function(t){return t.value===n.value}));var s=r[a];var c;var d;if(a===-1){return}var l=s.getBoundingClientRect();var u=l.left;var h=l.width;var b=t.currentX;var g=l.top+l.height/2;var m=this.el.getRootNode();var f=m.elementFromPoint(b,g);var v=e?b>u+h:b<u;var p=e?b<u:b>u+h;if(i&&!o){if(v){var k=a-1;if(k>=0){d=k}}else if(p){if(i&&!o){var k=a+1;if(k<r.length){d=k}}}if(d!==undefined&&!r[d].disabled){c=r[d]}}if(!i&&o){c=f}if(c!=null){if(c.tagName==="ION-SEGMENT"){return false}if(s!==c){this.checkButton(s,c)}}return true};t.prototype.emitStyle=function(){this.ionStyle.emit({segment:true})};t.prototype.onKeyDown=function(t){var o=isRTL(this.el);var n=this.selectOnFocus;var e;switch(t.key){case"ArrowRight":t.preventDefault();e=o?this.getSegmentButton("previous"):this.getSegmentButton("next");break;case"ArrowLeft":t.preventDefault();e=o?this.getSegmentButton("next"):this.getSegmentButton("previous");break;case"Home":t.preventDefault();e=this.getSegmentButton("first");break;case"End":t.preventDefault();e=this.getSegmentButton("last");break;case" ":case"Enter":t.preventDefault();e=document.activeElement;n=true}if(!e){return}if(n){var i=this.checked;this.checkButton(i||e,e);if(e!==i){this.emitValueChange()}}e.setFocus()};t.prototype.render=function(){var t;var o=getIonMode(this);return h(Host,{key:"66bd7a565ba73540b3bbe56dd23b95e59bcef9bc",role:"tablist",onClick:this.onClick,class:createColorClasses(this.color,(t={},t[o]=true,t["in-toolbar"]=hostContext("ion-toolbar",this.el),t["in-toolbar-color"]=hostContext("ion-toolbar[color]",this.el),t["segment-activated"]=this.activated,t["segment-disabled"]=this.disabled,t["segment-scrollable"]=this.scrollable,t))},h("slot",{key:"782c521b1a33729b8eab1c4b879bc3f2ff48ae1b",onSlotchange:this.onSlottedItemsChange}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{color:["colorChanged"],swipeGesture:["swipeGestureChanged"],value:["valueChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return t}();Segment.style={ios:IonSegmentIosStyle0,md:IonSegmentMdStyle0};var segmentButtonIosCss=':host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(:focus){outline:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:-1;order:-1;pointer-events:none}::slotted(ion-label){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;line-height:22px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{-ms-flex-direction:column;flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{-ms-flex-direction:row;flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);-webkit-transform:var(--indicator-transform);transform:var(--indicator-transform);-webkit-box-shadow:var(--indicator-box-shadow);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{-webkit-transform:none;transform:none}.segment-button-indicator-animated{-webkit-transition:none;transition:none}}:host{--background:none;--background-checked:none;--background-hover:none;--background-hover-opacity:0;--background-focused:none;--background-focused-opacity:0;--border-radius:7px;--border-width:1px;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--border-style:solid;--indicator-box-shadow:0 0 5px rgba(0, 0, 0, 0.16);--indicator-color:var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));--indicator-height:100%;--indicator-transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--transition:100ms all linear;--padding-top:0;--padding-end:13px;--padding-bottom:0;--padding-start:13px;margin-top:2px;margin-bottom:2px;position:relative;-ms-flex-direction:row;flex-direction:row;min-width:70px;min-height:28px;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);font-size:13px;font-weight:450;line-height:37px}:host::before{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;-webkit-transition:160ms opacity ease-in-out;transition:160ms opacity ease-in-out;-webkit-transition-delay:100ms;transition-delay:100ms;border-left:var(--border-width) var(--border-style) var(--border-color);content:"";opacity:1;will-change:opacity}:host(:first-of-type)::before{border-left-color:transparent}:host(.segment-button-disabled){opacity:0.3}::slotted(ion-icon){font-size:24px}:host(.segment-button-layout-icon-start) ::slotted(ion-label){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:0;margin-inline-end:0}:host(.segment-button-layout-icon-end) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:2px;margin-inline-end:2px}.segment-button-indicator{-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px;left:0;right:0;top:0;bottom:0}.segment-button-indicator-background{border-radius:var(--border-radius);background:var(--indicator-color)}.segment-button-indicator-background{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked)::before,:host(.segment-button-after-checked)::before{opacity:0}:host(.segment-button-checked){z-index:-1}:host(.segment-button-activated){--indicator-transform:scale(0.95)}:host(.ion-focused) .button-native{opacity:0.7}@media (any-hover: hover){:host(:hover) .button-native{opacity:0.5}:host(.segment-button-checked:hover) .button-native{opacity:1}}:host(.in-segment-color){background:none;color:var(--ion-text-color, #000)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)))}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native,:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-text-color, #000)}}:host(.in-toolbar:not(.in-segment-color)){--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);--indicator-color:var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff))))}:host(.in-toolbar-color) .segment-button-indicator-background{background:var(--ion-color-contrast)}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color):hover) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native{color:var(--ion-color-base)}}';var IonSegmentButtonIosStyle0=segmentButtonIosCss;var segmentButtonMdCss=':host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(:focus){outline:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:-1;order:-1;pointer-events:none}::slotted(ion-label){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;line-height:22px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{-ms-flex-direction:column;flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{-ms-flex-direction:row;flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);-webkit-transform:var(--indicator-transform);transform:var(--indicator-transform);-webkit-box-shadow:var(--indicator-box-shadow);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{-webkit-transform:none;transform:none}.segment-button-indicator-animated{-webkit-transition:none;transition:none}}:host{--background:none;--background-checked:none;--background-hover:var(--color-checked);--background-focused:var(--color-checked);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--indicator-box-shadow:none;--indicator-color:var(--color-checked);--indicator-height:2px;--indicator-transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--padding-top:0;--padding-end:16px;--padding-bottom:0;--padding-start:16px;--transition:color 0.15s linear 0s, opacity 0.15s linear 0s;min-width:90px;min-height:48px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);font-size:14px;font-weight:500;letter-spacing:0.06em;line-height:40px;text-transform:uppercase}:host(.segment-button-disabled){opacity:0.3}:host(.in-segment-color){background:none;color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6)}:host(.in-segment-color) ion-ripple-effect{color:var(--ion-color-base)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-base)}:host(.in-segment-color.segment-button-checked) .button-native{color:var(--ion-color-base)}:host(.in-segment-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6)}:host(.in-segment-color:hover) .button-native::after{background:var(--ion-color-base)}:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-segment-color)){--background:var(--ion-toolbar-segment-background, none);--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6));--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-color-primary, #0054e9));--indicator-color:var(--ion-toolbar-segment-color-checked, var(--color-checked))}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:rgba(var(--ion-color-contrast-rgb), 0.6)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color)) .button-native::after{background:var(--ion-color-contrast)}}::slotted(ion-icon){margin-top:12px;margin-bottom:12px;font-size:24px}::slotted(ion-label){margin-top:12px;margin-bottom:12px}:host(.segment-button-layout-icon-top) ::slotted(ion-label),:host(.segment-button-layout-icon-bottom) ::slotted(ion-icon){margin-top:0}:host(.segment-button-layout-icon-top) ::slotted(ion-icon),:host(.segment-button-layout-icon-bottom) ::slotted(ion-label){margin-bottom:0}:host(.segment-button-layout-icon-start) ::slotted(ion-label){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:0;margin-inline-end:0}:host(.segment-button-layout-icon-end) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}:host(.segment-button-has-icon-only) ::slotted(ion-icon){margin-top:12px;margin-bottom:12px}:host(.segment-button-has-label-only) ::slotted(ion-label){margin-top:12px;margin-bottom:12px}.segment-button-indicator{left:0;right:0;bottom:0}.segment-button-indicator-background{background:var(--indicator-color)}:host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background{background:var(--ion-toolbar-segment-indicator-color, var(--indicator-color))}:host(.in-toolbar-color:not(.in-segment-color)) .segment-button-indicator-background{background:var(--ion-color-contrast)}';var IonSegmentButtonMdStyle0=segmentButtonMdCss;var ids=0;var SegmentButton=function(){function t(t){var o=this;registerInstance(this,t);this.segmentEl=null;this.inheritedAttributes={};this.updateStyle=function(){forceUpdate(o)};this.updateState=function(){var t=o.segmentEl;if(t){o.checked=t.value===o.value;if(t.disabled){o.disabled=true}}};this.checked=false;this.contentId=undefined;this.disabled=false;this.layout="icon-top";this.type="button";this.value="ion-sb-"+ids++}t.prototype.valueChanged=function(){this.updateState()};t.prototype.connectedCallback=function(){var t=this.segmentEl=this.el.closest("ion-segment");if(t){this.updateState();addEventListener(t,"ionSelect",this.updateState);addEventListener(t,"ionStyle",this.updateStyle)}if(!this.contentId)return;var o=document.getElementById(this.contentId);if(!o){console.error('Segment Button: Unable to find Segment Content with id="'.concat(this.contentId,'".'));return}if(o.tagName!=="ION-SEGMENT-CONTENT"){console.error('Segment Button: Element with id="'.concat(this.contentId,'" is not an <ion-segment-content> element.'));return}if(this.disabled){console.warn("Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.");this.disabled=false}};t.prototype.disconnectedCallback=function(){var t=this.segmentEl;if(t){removeEventListener(t,"ionSelect",this.updateState);removeEventListener(t,"ionStyle",this.updateStyle);this.segmentEl=null}};t.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign({},inheritAttributes(this.el,["aria-label"]))};Object.defineProperty(t.prototype,"hasLabel",{get:function(){return!!this.el.querySelector("ion-label")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"hasIcon",{get:function(){return!!this.el.querySelector("ion-icon")},enumerable:false,configurable:true});t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){t=this.nativeEl;if(t!==undefined){t.focus()}return[2]}))}))};t.prototype.render=function(){var t;var o=this;var n=this,e=n.checked,i=n.type,r=n.disabled,a=n.hasIcon,s=n.hasLabel,c=n.layout,d=n.segmentEl;var l=getIonMode(this);var u=function(){return(d===null||d===void 0?void 0:d.color)!==undefined};return h(Host,{key:"d50a5d5e2f6206e8523598f258d8217d2903f69b",class:(t={},t[l]=true,t["in-toolbar"]=hostContext("ion-toolbar",this.el),t["in-toolbar-color"]=hostContext("ion-toolbar[color]",this.el),t["in-segment"]=hostContext("ion-segment",this.el),t["in-segment-color"]=u(),t["segment-button-has-label"]=s,t["segment-button-has-icon"]=a,t["segment-button-has-label-only"]=s&&!a,t["segment-button-has-icon-only"]=a&&!s,t["segment-button-disabled"]=r,t["segment-button-checked"]=e,t["segment-button-layout-".concat(c)]=true,t["ion-activatable"]=true,t["ion-activatable-instant"]=true,t["ion-focusable"]=true,t)},h("button",Object.assign({key:"b4f6f145286ba8ab79669e11035b906daa85ae7e","aria-selected":e?"true":"false",role:"tab",ref:function(t){return o.nativeEl=t},type:i,class:"button-native",part:"native",disabled:r},this.inheritedAttributes),h("span",{key:"67965996c9ffe70553875e00d3da0ae5b2b1d814",class:"button-inner"},h("slot",{key:"5087988fe45a8fdf388ec44c395d0b745b207806"})),l==="md"&&h("ion-ripple-effect",{key:"b24858de0750bbc769b3183fac0077dfe817ba27"})),h("div",{key:"97b4359432acd1c9da0816360cd1df9472e183f7",part:"indicator",class:"segment-button-indicator segment-button-indicator-animated"},h("div",{key:"0561738ea15b0986f4ed3d8276d5e6f2d13f7e51",part:"indicator-background",class:"segment-button-indicator-background"})))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return t}();SegmentButton.style={ios:IonSegmentButtonIosStyle0,md:IonSegmentButtonMdStyle0};export{Segment as ion_segment,SegmentButton as ion_segment_button};
|
|
4
|
+
*/import{r as registerInstance,d as createEvent,w as writeTask,h,f as Host,i as getElement,j as forceUpdate}from"./index-28849c61.js";import{r as raf,a as addEventListener,b as removeEventListener,h as inheritAttributes}from"./helpers-da915de8.js";import{i as isRTL}from"./dir-babeabeb.js";import{c as createColorClasses,h as hostContext}from"./theme-01f3f29c.js";import{b as getIonMode}from"./ionic-global-c81d82ab.js";var segmentIosCss=":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";var IonSegmentIosStyle0=segmentIosCss;var segmentMdCss=":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:transparent;grid-auto-columns:minmax(auto, 360px)}:host(.in-toolbar){min-height:var(--min-height)}:host(.segment-scrollable) ::slotted(ion-segment-button){min-width:auto}";var IonSegmentMdStyle0=segmentMdCss;var Segment=function(){function t(t){var o=this;registerInstance(this,t);this.ionChange=createEvent(this,"ionChange",7);this.ionSelect=createEvent(this,"ionSelect",7);this.ionStyle=createEvent(this,"ionStyle",7);this.segmentViewEl=null;this.onClick=function(t){var n=t.target;var e=o.checked;if(n.tagName==="ION-SEGMENT"){return}o.value=n.value;if(n!==e){o.emitValueChange()}if(o.segmentViewEl){o.updateSegmentView();if(o.scrollable&&e){o.checkButton(e,n)}}else if(o.scrollable||!o.swipeGesture){if(e){o.checkButton(e,n)}else{o.setCheckedClasses()}}};this.onSlottedItemsChange=function(){o.valueChanged(o.value)};this.getSegmentButton=function(t){var n,e;var i=o.getButtons().filter((function(t){return!t.disabled}));var r=i.findIndex((function(t){return t===document.activeElement}));switch(t){case"first":return i[0];case"last":return i[i.length-1];case"next":return(n=i[r+1])!==null&&n!==void 0?n:i[0];case"previous":return(e=i[r-1])!==null&&e!==void 0?e:i[i.length-1];default:return null}};this.activated=false;this.color=undefined;this.disabled=false;this.scrollable=false;this.swipeGesture=true;this.value=undefined;this.selectOnFocus=false}t.prototype.colorChanged=function(t,o){if(o===undefined&&t!==undefined||o!==undefined&&t===undefined){this.emitStyle()}};t.prototype.swipeGestureChanged=function(){this.gestureChanged()};t.prototype.valueChanged=function(t,o){if(this.segmentViewEl&&t===undefined){this.value=this.getButtons()[0].value;return}if(o!==undefined&&t!==undefined){var n=this.getButtons();var e=n.find((function(t){return t.value===o}));var i=n.find((function(o){return o.value===t}));if(e&&i){if(!this.segmentViewEl){this.checkButton(e,i)}else if(this.triggerScrollOnValueChange!==false){this.updateSegmentView()}}}else if(t!==undefined&&o===undefined&&this.segmentViewEl){this.updateSegmentView()}this.ionSelect.emit({value:t});if(!this.segmentViewEl){this.scrollActiveButtonIntoView()}this.triggerScrollOnValueChange=undefined};t.prototype.disabledChanged=function(){this.gestureChanged();if(!this.segmentViewEl){var t=this.getButtons();for(var o=0,n=t;o<n.length;o++){var e=n[o];e.disabled=this.disabled}}else{this.segmentViewEl.disabled=this.disabled}};t.prototype.gestureChanged=function(){if(this.gesture){this.gesture.enable(!this.scrollable&&!this.disabled&&this.swipeGesture)}};t.prototype.connectedCallback=function(){this.emitStyle();this.segmentViewEl=this.getSegmentView()};t.prototype.disconnectedCallback=function(){this.segmentViewEl=null};t.prototype.componentWillLoad=function(){this.emitStyle()};t.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;var o=this;return __generator(this,(function(n){switch(n.label){case 0:this.segmentViewEl=this.getSegmentView();this.setCheckedClasses();raf((function(){o.scrollActiveButtonIntoView(false)}));t=this;return[4,import("./index-39782642.js")];case 1:t.gesture=n.sent().createGesture({el:this.el,gestureName:"segment",gesturePriority:100,threshold:0,passive:false,onStart:function(t){return o.onStart(t)},onMove:function(t){return o.onMove(t)},onEnd:function(t){return o.onEnd(t)}});this.gestureChanged();if(this.disabled){this.disabledChanged()}this.updateSegmentView(false);return[2]}}))}))};t.prototype.onStart=function(t){this.valueBeforeGesture=this.value;this.activate(t)};t.prototype.onMove=function(t){this.setNextIndex(t)};t.prototype.onEnd=function(t){this.setActivated(false);this.setNextIndex(t,true);t.event.stopImmediatePropagation();var o=this.value;if(o!==undefined){if(this.valueBeforeGesture!==o){this.emitValueChange();this.updateSegmentView()}}this.valueBeforeGesture=undefined};t.prototype.emitValueChange=function(){var t=this.value;this.ionChange.emit({value:t})};t.prototype.getButtons=function(){return Array.from(this.el.querySelectorAll("ion-segment-button"))};Object.defineProperty(t.prototype,"checked",{get:function(){var t=this;return this.getButtons().find((function(o){return o.value===t.value}))},enumerable:false,configurable:true});t.prototype.setActivated=function(t){var o=this.getButtons();o.forEach((function(o){o.classList.toggle("segment-button-activated",t)}));this.activated=t};t.prototype.activate=function(t){var o=this;var n=t.event.target;var e=this.getButtons();var i=e.find((function(t){return t.value===o.value}));if(n.tagName!=="ION-SEGMENT-BUTTON"){return}if(!i){this.value=n.value;this.setCheckedClasses()}if(this.value===n.value){this.setActivated(true)}};t.prototype.getIndicator=function(t){var o=t.shadowRoot||t;return o.querySelector(".segment-button-indicator")};t.prototype.checkButton=function(t,o){var n=this;var e=this.getIndicator(t);var i=this.getIndicator(o);if(e===null||i===null){return}var r=e.getBoundingClientRect();var a=i.getBoundingClientRect();var s=r.width/a.width;var c=r.left-a.left;var l="translate3d(".concat(c,"px, 0, 0) scaleX(").concat(s,")");writeTask((function(){i.classList.remove("segment-button-indicator-animated");i.style.setProperty("transform",l);i.getBoundingClientRect();i.classList.add("segment-button-indicator-animated");i.style.setProperty("transform","");n.scrollActiveButtonIntoView(true)}));this.value=o.value;this.setCheckedClasses()};t.prototype.setCheckedClasses=function(){var t=this;var o=this.getButtons();var n=o.findIndex((function(o){return o.value===t.value}));var e=n+1;for(var i=0,r=o;i<r.length;i++){var a=r[i];a.classList.remove("segment-button-after-checked")}if(e<o.length){o[e].classList.add("segment-button-after-checked")}};t.prototype.getSegmentView=function(){var t=this.getButtons();var o=t.find((function(t){return t.contentId}));var n=document.querySelector('ion-segment-content[id="'.concat(o===null||o===void 0?void 0:o.contentId,'"]'));return n===null||n===void 0?void 0:n.closest("ion-segment-view")};t.prototype.handleSegmentViewScroll=function(t){var o=this;var n=t.detail,e=n.scrollRatio,i=n.isManualScroll;if(!i){return}var r=t.target;var a=this.segmentViewEl;var s=this.el;if(t.composedPath().includes(a)||(r===null||r===void 0?void 0:r.contains(s))){var c=this.getButtons();if(!c.length)return;var l=c.findIndex((function(t){return t.value===o.value}));var d=c[l];var u=Math.round(e*(c.length-1));if(this.lastNextIndex===undefined||this.lastNextIndex!==u){this.lastNextIndex=u;this.triggerScrollOnValueChange=false;this.checkButton(d,c[u]);this.emitValueChange()}}};t.prototype.updateSegmentView=function(t){var o=this;if(t===void 0){t=true}var n=this.getButtons();var e=n.find((function(t){return t.value===o.value}));if(!(e===null||e===void 0?void 0:e.contentId)){return}var i=this.segmentViewEl;if(i){i.setContent(e.contentId,t)}};t.prototype.scrollActiveButtonIntoView=function(t){if(t===void 0){t=true}var o=this,n=o.scrollable,e=o.value,i=o.el;if(n){var r=this.getButtons();var a=r.find((function(t){return t.value===e}));if(a!==undefined){var s=i.getBoundingClientRect();var c=a.getBoundingClientRect();var l=c.x-s.x;var d=l-s.width/2+c.width/2;var u=i.scrollLeft+d;i.scrollTo({top:0,left:u,behavior:t?"smooth":"instant"})}}};t.prototype.setNextIndex=function(t,o){var n=this;if(o===void 0){o=false}var e=isRTL(this.el);var i=this.activated;var r=this.getButtons();var a=r.findIndex((function(t){return t.value===n.value}));var s=r[a];var c;var l;if(a===-1){return}var d=s.getBoundingClientRect();var u=d.left;var h=d.width;var b=t.currentX;var g=d.top+d.height/2;var f=this.el.getRootNode();var m=f.elementFromPoint(b,g);var v=e?b>u+h:b<u;var p=e?b<u:b>u+h;if(i&&!o){if(v){var k=a-1;if(k>=0){l=k}}else if(p){if(i&&!o){var k=a+1;if(k<r.length){l=k}}}if(l!==undefined&&!r[l].disabled){c=r[l]}}if(!i&&o){c=m}if(c!=null){if(c.tagName==="ION-SEGMENT"){return false}if(s!==c){this.checkButton(s,c)}}return true};t.prototype.emitStyle=function(){this.ionStyle.emit({segment:true})};t.prototype.onKeyDown=function(t){var o=isRTL(this.el);var n=this.selectOnFocus;var e;switch(t.key){case"ArrowRight":t.preventDefault();e=o?this.getSegmentButton("previous"):this.getSegmentButton("next");break;case"ArrowLeft":t.preventDefault();e=o?this.getSegmentButton("next"):this.getSegmentButton("previous");break;case"Home":t.preventDefault();e=this.getSegmentButton("first");break;case"End":t.preventDefault();e=this.getSegmentButton("last");break;case" ":case"Enter":t.preventDefault();e=document.activeElement;n=true}if(!e){return}if(n){var i=this.checked;this.checkButton(i||e,e);if(e!==i){this.emitValueChange()}}e.setFocus()};t.prototype.render=function(){var t;var o=getIonMode(this);return h(Host,{key:"b1eb4a6e4f953f6c4882395585799503735bbc6b",role:"tablist",onClick:this.onClick,class:createColorClasses(this.color,(t={},t[o]=true,t["in-toolbar"]=hostContext("ion-toolbar",this.el),t["in-toolbar-color"]=hostContext("ion-toolbar[color]",this.el),t["segment-activated"]=this.activated,t["segment-disabled"]=this.disabled,t["segment-scrollable"]=this.scrollable,t))},h("slot",{key:"e7df6b017d154f30eb8021bc965f2e6c8e6480bf",onSlotchange:this.onSlottedItemsChange}))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{color:["colorChanged"],swipeGesture:["swipeGestureChanged"],value:["valueChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return t}();Segment.style={ios:IonSegmentIosStyle0,md:IonSegmentMdStyle0};var segmentButtonIosCss=':host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(:focus){outline:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:-1;order:-1;pointer-events:none}::slotted(ion-label){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;line-height:22px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{-ms-flex-direction:column;flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{-ms-flex-direction:row;flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);-webkit-transform:var(--indicator-transform);transform:var(--indicator-transform);-webkit-box-shadow:var(--indicator-box-shadow);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{-webkit-transform:none;transform:none}.segment-button-indicator-animated{-webkit-transition:none;transition:none}}:host{--background:none;--background-checked:none;--background-hover:none;--background-hover-opacity:0;--background-focused:none;--background-focused-opacity:0;--border-radius:7px;--border-width:1px;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--border-style:solid;--indicator-box-shadow:0 0 5px rgba(0, 0, 0, 0.16);--indicator-color:var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)));--indicator-height:100%;--indicator-transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--transition:100ms all linear;--padding-top:0;--padding-end:13px;--padding-bottom:0;--padding-start:13px;margin-top:2px;margin-bottom:2px;position:relative;-ms-flex-direction:row;flex-direction:row;min-width:70px;min-height:28px;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);font-size:13px;font-weight:450;line-height:37px}:host::before{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;-webkit-transition:160ms opacity ease-in-out;transition:160ms opacity ease-in-out;-webkit-transition-delay:100ms;transition-delay:100ms;border-left:var(--border-width) var(--border-style) var(--border-color);content:"";opacity:1;will-change:opacity}:host(:first-of-type)::before{border-left-color:transparent}:host(.segment-button-disabled){opacity:0.3}::slotted(ion-icon){font-size:24px}:host(.segment-button-layout-icon-start) ::slotted(ion-label){-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:0;margin-inline-end:0}:host(.segment-button-layout-icon-end) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:2px;margin-inline-end:2px}.segment-button-indicator{-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px;left:0;right:0;top:0;bottom:0}.segment-button-indicator-background{border-radius:var(--border-radius);background:var(--indicator-color)}.segment-button-indicator-background{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked)::before,:host(.segment-button-after-checked)::before{opacity:0}:host(.segment-button-checked){z-index:-1}:host(.segment-button-activated){--indicator-transform:scale(0.95)}:host(.ion-focused) .button-native{opacity:0.7}@media (any-hover: hover){:host(:hover) .button-native{opacity:0.5}:host(.segment-button-checked:hover) .button-native{opacity:1}}:host(.in-segment-color){background:none;color:var(--ion-text-color, #000)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff)))}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native,:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-text-color, #000)}}:host(.in-toolbar:not(.in-segment-color)){--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);--indicator-color:var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color-step-350, var(--ion-background-color, #fff))))}:host(.in-toolbar-color) .segment-button-indicator-background{background:var(--ion-color-contrast)}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color):hover) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native{color:var(--ion-color-base)}}';var IonSegmentButtonIosStyle0=segmentButtonIosCss;var segmentButtonMdCss=':host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:column;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:inherit;flex-direction:inherit;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:"";opacity:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:inherit;flex-flow:inherit;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(:focus){outline:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){-ms-flex-negative:0;flex-shrink:0;-ms-flex-order:-1;order:-1;pointer-events:none}::slotted(ion-label){display:block;-ms-flex-item-align:center;align-self:center;max-width:100%;line-height:22px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{-ms-flex-direction:column;flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{-ms-flex-direction:row;flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);-webkit-transform:var(--indicator-transform);transform:var(--indicator-transform);-webkit-box-shadow:var(--indicator-box-shadow);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{-webkit-transition:var(--indicator-transition);transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{-webkit-transform:none;transform:none}.segment-button-indicator-animated{-webkit-transition:none;transition:none}}:host{--background:none;--background-checked:none;--background-hover:var(--color-checked);--background-focused:var(--color-checked);--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6);--color-checked:var(--ion-color-primary, #0054e9);--indicator-box-shadow:none;--indicator-color:var(--color-checked);--indicator-height:2px;--indicator-transition:transform 250ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--padding-top:0;--padding-end:16px;--padding-bottom:0;--padding-start:16px;--transition:color 0.15s linear 0s, opacity 0.15s linear 0s;min-width:90px;min-height:48px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);font-size:14px;font-weight:500;letter-spacing:0.06em;line-height:40px;text-transform:uppercase}:host(.segment-button-disabled){opacity:0.3}:host(.in-segment-color){background:none;color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6)}:host(.in-segment-color) ion-ripple-effect{color:var(--ion-color-base)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-base)}:host(.in-segment-color.segment-button-checked) .button-native{color:var(--ion-color-base)}:host(.in-segment-color.ion-focused) .button-native::after{background:var(--ion-color-base)}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native{color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6)}:host(.in-segment-color:hover) .button-native::after{background:var(--ion-color-base)}:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-segment-color)){--background:var(--ion-toolbar-segment-background, none);--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.6));--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-color-primary, #0054e9));--indicator-color:var(--ion-toolbar-segment-color-checked, var(--color-checked))}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:rgba(var(--ion-color-contrast-rgb), 0.6)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color)) .button-native::after{background:var(--ion-color-contrast)}}::slotted(ion-icon){margin-top:12px;margin-bottom:12px;font-size:24px}::slotted(ion-label){margin-top:12px;margin-bottom:12px}:host(.segment-button-layout-icon-top) ::slotted(ion-label),:host(.segment-button-layout-icon-bottom) ::slotted(ion-icon){margin-top:0}:host(.segment-button-layout-icon-top) ::slotted(ion-icon),:host(.segment-button-layout-icon-bottom) ::slotted(ion-label){margin-bottom:0}:host(.segment-button-layout-icon-start) ::slotted(ion-label){-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:0;margin-inline-end:0}:host(.segment-button-layout-icon-end) ::slotted(ion-label){-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}:host(.segment-button-has-icon-only) ::slotted(ion-icon){margin-top:12px;margin-bottom:12px}:host(.segment-button-has-label-only) ::slotted(ion-label){margin-top:12px;margin-bottom:12px}.segment-button-indicator{left:0;right:0;bottom:0}.segment-button-indicator-background{background:var(--indicator-color)}:host(.in-toolbar:not(.in-segment-color)) .segment-button-indicator-background{background:var(--ion-toolbar-segment-indicator-color, var(--indicator-color))}:host(.in-toolbar-color:not(.in-segment-color)) .segment-button-indicator-background{background:var(--ion-color-contrast)}';var IonSegmentButtonMdStyle0=segmentButtonMdCss;var ids=0;var SegmentButton=function(){function t(t){var o=this;registerInstance(this,t);this.segmentEl=null;this.inheritedAttributes={};this.updateStyle=function(){forceUpdate(o)};this.updateState=function(){var t=o.segmentEl;if(t){o.checked=t.value===o.value;if(t.disabled){o.disabled=true}}};this.checked=false;this.contentId=undefined;this.disabled=false;this.layout="icon-top";this.type="button";this.value="ion-sb-"+ids++}t.prototype.valueChanged=function(){this.updateState()};t.prototype.connectedCallback=function(){var t=this.segmentEl=this.el.closest("ion-segment");if(t){this.updateState();addEventListener(t,"ionSelect",this.updateState);addEventListener(t,"ionStyle",this.updateStyle)}if(!this.contentId)return;var o=document.getElementById(this.contentId);if(!o){console.error('Segment Button: Unable to find Segment Content with id="'.concat(this.contentId,'".'));return}if(o.tagName!=="ION-SEGMENT-CONTENT"){console.error('Segment Button: Element with id="'.concat(this.contentId,'" is not an <ion-segment-content> element.'));return}if(this.disabled){console.warn("Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.");this.disabled=false}};t.prototype.disconnectedCallback=function(){var t=this.segmentEl;if(t){removeEventListener(t,"ionSelect",this.updateState);removeEventListener(t,"ionStyle",this.updateStyle);this.segmentEl=null}};t.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign({},inheritAttributes(this.el,["aria-label"]))};Object.defineProperty(t.prototype,"hasLabel",{get:function(){return!!this.el.querySelector("ion-label")},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"hasIcon",{get:function(){return!!this.el.querySelector("ion-icon")},enumerable:false,configurable:true});t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(o){t=this.nativeEl;if(t!==undefined){t.focus()}return[2]}))}))};t.prototype.render=function(){var t;var o=this;var n=this,e=n.checked,i=n.type,r=n.disabled,a=n.hasIcon,s=n.hasLabel,c=n.layout,l=n.segmentEl;var d=getIonMode(this);var u=function(){return(l===null||l===void 0?void 0:l.color)!==undefined};return h(Host,{key:"d50a5d5e2f6206e8523598f258d8217d2903f69b",class:(t={},t[d]=true,t["in-toolbar"]=hostContext("ion-toolbar",this.el),t["in-toolbar-color"]=hostContext("ion-toolbar[color]",this.el),t["in-segment"]=hostContext("ion-segment",this.el),t["in-segment-color"]=u(),t["segment-button-has-label"]=s,t["segment-button-has-icon"]=a,t["segment-button-has-label-only"]=s&&!a,t["segment-button-has-icon-only"]=a&&!s,t["segment-button-disabled"]=r,t["segment-button-checked"]=e,t["segment-button-layout-".concat(c)]=true,t["ion-activatable"]=true,t["ion-activatable-instant"]=true,t["ion-focusable"]=true,t)},h("button",Object.assign({key:"b4f6f145286ba8ab79669e11035b906daa85ae7e","aria-selected":e?"true":"false",role:"tab",ref:function(t){return o.nativeEl=t},type:i,class:"button-native",part:"native",disabled:r},this.inheritedAttributes),h("span",{key:"67965996c9ffe70553875e00d3da0ae5b2b1d814",class:"button-inner"},h("slot",{key:"5087988fe45a8fdf388ec44c395d0b745b207806"})),d==="md"&&h("ion-ripple-effect",{key:"b24858de0750bbc769b3183fac0077dfe817ba27"})),h("div",{key:"97b4359432acd1c9da0816360cd1df9472e183f7",part:"indicator",class:"segment-button-indicator segment-button-indicator-animated"},h("div",{key:"0561738ea15b0986f4ed3d8276d5e6f2d13f7e51",part:"indicator-background",class:"segment-button-indicator-background"})))};Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return t}();SegmentButton.style={ios:IonSegmentButtonIosStyle0,md:IonSegmentButtonMdStyle0};export{Segment as ion_segment,SegmentButton as ion_segment_button};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
import{r as registerInstance,h,j as forceUpdate,f as Host,i as getElement}from"./index-28849c61.js";import{b as getIonMode}from"./ionic-global-c81d82ab.js";import{s as safeCall}from"./overlays-e7b9d6d9.js";import{g as getClassMap}from"./theme-01f3f29c.js";import"./index-a5d50daf.js";import"./helpers-da915de8.js";import"./hardware-back-button-06ef3c3e.js";import"./framework-delegate-63d1a679.js";import"./gesture-controller-314a54f6.js";import"./index-9b0d46f4.js";var ionicSelectModalMdCss=".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container){display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";var IonSelectModalIonicStyle0=ionicSelectModalMdCss;var selectModalIosCss=
|
|
4
|
+
import{r as registerInstance,h,j as forceUpdate,f as Host,i as getElement}from"./index-28849c61.js";import{b as getIonMode}from"./ionic-global-c81d82ab.js";import{s as safeCall}from"./overlays-e7b9d6d9.js";import{g as getClassMap}from"./theme-01f3f29c.js";import"./index-a5d50daf.js";import"./helpers-da915de8.js";import"./hardware-back-button-06ef3c3e.js";import"./framework-delegate-63d1a679.js";import"./gesture-controller-314a54f6.js";import"./index-9b0d46f4.js";var ionicSelectModalMdCss=".sc-ion-select-modal-ionic-h{height:100%}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(container){display:none}ion-list.sc-ion-select-modal-ionic ion-radio.sc-ion-select-modal-ionic::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-ionic{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-ionic{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-ionic{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";var IonSelectModalIonicStyle0=ionicSelectModalMdCss;var selectModalIosCss='.sc-ion-select-modal-ios-h{height:100%}ion-item.sc-ion-select-modal-ios{--inner-padding-end:0}ion-radio.sc-ion-select-modal-ios::after{bottom:0;position:absolute;width:calc(100% - 0.9375rem - 16px);border-width:0px 0px 0.55px 0px;border-style:solid;border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));content:""}ion-radio.sc-ion-select-modal-ios::after{inset-inline-start:calc(0.9375rem + 16px)}';var IonSelectModalIosStyle0=selectModalIosCss;var selectModalMdCss=".sc-ion-select-modal-md-h{height:100%}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(container){display:none}ion-list.sc-ion-select-modal-md ion-radio.sc-ion-select-modal-md::part(label){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}ion-item.sc-ion-select-modal-md{--inner-border-width:0}.item-radio-checked.sc-ion-select-modal-md{--background:rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);--background-focused:var(--ion-color-primary, #0054e9);--background-focused-opacity:0.2;--background-hover:var(--ion-color-primary, #0054e9);--background-hover-opacity:0.12}.item-checkbox-checked.sc-ion-select-modal-md{--background-activated:var(--ion-item-color, var(--ion-text-color, #000));--background-focused:var(--ion-item-color, var(--ion-text-color, #000));--background-hover:var(--ion-item-color, var(--ion-text-color, #000));--color:var(--ion-color-primary, #0054e9)}";var IonSelectModalMdStyle0=selectModalMdCss;var SelectModal=function(){function o(o){registerInstance(this,o);this.header=undefined;this.multiple=undefined;this.options=[]}o.prototype.closeModal=function(){var o=this.el.closest("ion-modal");if(o){o.dismiss()}};o.prototype.findOptionFromEvent=function(o){var e=this.options;return e.find((function(e){return e.value===o.target.value}))};o.prototype.getValues=function(o){var e=this,i=e.multiple,n=e.options;if(i){return n.filter((function(o){return o.checked})).map((function(o){return o.value}))}var t=o?this.findOptionFromEvent(o):null;return t?t.value:undefined};o.prototype.callOptionHandler=function(o){var e=this.findOptionFromEvent(o);var i=this.getValues(o);if(e===null||e===void 0?void 0:e.handler){safeCall(e.handler,i)}};o.prototype.setChecked=function(o){var e=this.multiple;var i=this.findOptionFromEvent(o);if(e&&i){i.checked=o.detail.checked}};o.prototype.renderRadioOptions=function(){var o=this;var e=this.options.filter((function(o){return o.checked})).map((function(o){return o.value}))[0];return h("ion-radio-group",{value:e,onIonChange:function(e){return o.callOptionHandler(e)}},this.options.map((function(i){return h("ion-item",{lines:"none",class:Object.assign({"item-radio-checked":i.value===e},getClassMap(i.cssClass))},h("ion-radio",{value:i.value,disabled:i.disabled,justify:"start",labelPlacement:"end",onClick:function(){return o.closeModal()},onKeyUp:function(e){if(e.key===" "){o.closeModal()}}},i.text))})))};o.prototype.renderCheckboxOptions=function(){var o=this;return this.options.map((function(e){return h("ion-item",{class:Object.assign({"item-checkbox-checked":e.checked},getClassMap(e.cssClass))},h("ion-checkbox",{value:e.value,disabled:e.disabled,checked:e.checked,justify:"start",labelPlacement:"end",onIonChange:function(e){o.setChecked(e);o.callOptionHandler(e);forceUpdate(o)}},e.text))}))};o.prototype.render=function(){var o=this;return h(Host,{key:"4df42c447b4026d09d9231f09dc4bdae9a8cfe4a",class:getIonMode(this)},h("ion-header",{key:"211c4e869b858867f3d60637e570aeb01de41de7"},h("ion-toolbar",{key:"dc4b151331aecbaaaafb460802ee9b689493601d"},this.header!==undefined&&h("ion-title",{key:"ba1347a59ae0a5c6770c239b5ec02a536a445bd1"},this.header),h("ion-buttons",{key:"43c98fd25d7e7f54b94b24e53535c6d5ba599892",slot:"end"},h("ion-button",{key:"51b2b3f3eed42637b2cfc213c95d0bcf10e4b89d",onClick:function(){return o.closeModal()}},"Close")))),h("ion-content",{key:"fe721b09f80555856211f7e40dbfc31a533acae1"},h("ion-list",{key:"d0b932d137136958d896408fb2fa571023775b92"},this.multiple===true?this.renderCheckboxOptions():this.renderRadioOptions())))};Object.defineProperty(o.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return o}();SelectModal.style={ionic:IonSelectModalIonicStyle0,ios:IonSelectModalIosStyle0,md:IonSelectModalMdStyle0};export{SelectModal as ion_select_modal};
|