@ionic/core 8.1.0 → 8.1.1-dev.11714676345.1df5b5f8
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 +10 -9
- package/components/ion-select.js +8 -5
- package/dist/cjs/ion-segment_2.cjs.entry.js +10 -9
- package/dist/cjs/ion-select_3.cjs.entry.js +8 -5
- package/dist/collection/components/segment/segment.js +10 -9
- package/dist/collection/components/select/select.js +8 -5
- package/dist/docs.json +1 -1
- package/dist/esm/ion-segment_2.entry.js +10 -9
- package/dist/esm/ion-select_3.entry.js +8 -5
- package/dist/esm-es5/ion-segment_2.entry.js +1 -1
- package/dist/esm-es5/ion-select_3.entry.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-0978924b.system.entry.js +4 -0
- package/dist/ionic/{p-6df12af0.system.entry.js → p-23fa696f.system.entry.js} +1 -1
- package/dist/ionic/p-30baae57.system.js +1 -1
- package/dist/ionic/p-bd1173d3.entry.js +4 -0
- package/dist/ionic/p-ffbf54f0.entry.js +4 -0
- package/dist/types/components/segment/segment.d.ts +1 -0
- package/dist/types/components/select/select.d.ts +2 -1
- package/hydrate/index.js +18 -14
- package/package.json +1 -1
- package/dist/ionic/p-7eb47906.entry.js +0 -4
- package/dist/ionic/p-a76ab3ea.system.entry.js +0 -4
- package/dist/ionic/p-fa8f2e62.entry.js +0 -4
|
@@ -44,6 +44,14 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
|
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
|
+
this.onSlottedItemsChange = () => {
|
|
48
|
+
/**
|
|
49
|
+
* When the slotted segment buttons change we need to
|
|
50
|
+
* ensure that the new segment buttons are checked if
|
|
51
|
+
* the value matches the segment button value.
|
|
52
|
+
*/
|
|
53
|
+
this.valueChanged(this.value);
|
|
54
|
+
};
|
|
47
55
|
this.getSegmentButton = (selector) => {
|
|
48
56
|
var _a, _b;
|
|
49
57
|
const buttons = this.getButtons().filter((button) => !button.disabled);
|
|
@@ -111,13 +119,6 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
|
|
|
111
119
|
}
|
|
112
120
|
async componentDidLoad() {
|
|
113
121
|
this.setCheckedClasses();
|
|
114
|
-
/**
|
|
115
|
-
* If the value changes before watchers
|
|
116
|
-
* are setup, then the ionSelect watch callback
|
|
117
|
-
* will not fire. As a result, we manually
|
|
118
|
-
* fire this event when Select is loaded.
|
|
119
|
-
*/
|
|
120
|
-
this.ionSelect.emit({ value: this.value });
|
|
121
122
|
/**
|
|
122
123
|
* We need to wait for the buttons to all be rendered
|
|
123
124
|
* before we can scroll.
|
|
@@ -428,14 +429,14 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
|
|
|
428
429
|
}
|
|
429
430
|
render() {
|
|
430
431
|
const mode = getIonMode(this);
|
|
431
|
-
return (h(Host, { key: '
|
|
432
|
+
return (h(Host, { key: 'ad0946134c8d465b760ad792655f1cb9922db520', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
|
|
432
433
|
[mode]: true,
|
|
433
434
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
434
435
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
435
436
|
'segment-activated': this.activated,
|
|
436
437
|
'segment-disabled': this.disabled,
|
|
437
438
|
'segment-scrollable': this.scrollable,
|
|
438
|
-
}) }, h("slot", { key: '
|
|
439
|
+
}) }, h("slot", { key: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
|
|
439
440
|
}
|
|
440
441
|
get el() { return this; }
|
|
441
442
|
static get watchers() { return {
|
package/components/ion-select.js
CHANGED
|
@@ -115,9 +115,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
115
115
|
this.value = value;
|
|
116
116
|
this.ionChange.emit({ value });
|
|
117
117
|
}
|
|
118
|
-
componentWillLoad() {
|
|
119
|
-
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
120
|
-
}
|
|
121
118
|
async connectedCallback() {
|
|
122
119
|
const { el } = this;
|
|
123
120
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -134,6 +131,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
134
131
|
forceUpdate(this);
|
|
135
132
|
});
|
|
136
133
|
}
|
|
134
|
+
componentWillLoad() {
|
|
135
|
+
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
136
|
+
}
|
|
137
|
+
componentDidLoad() {
|
|
138
|
+
this.emitStyle();
|
|
139
|
+
}
|
|
137
140
|
disconnectedCallback() {
|
|
138
141
|
if (this.mutationO) {
|
|
139
142
|
this.mutationO.disconnect();
|
|
@@ -592,7 +595,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
592
595
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
593
596
|
*/
|
|
594
597
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
595
|
-
return (h(Host, { key: '
|
|
598
|
+
return (h(Host, { key: '57fa52484e644c5c021921fef7131ac832034feb', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
596
599
|
[mode]: true,
|
|
597
600
|
'in-item': inItem,
|
|
598
601
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -608,7 +611,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
608
611
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
609
612
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
610
613
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
611
|
-
}) }, h("label", { key: '
|
|
614
|
+
}) }, h("label", { key: '34cb142fa7fec6946e7eb39e30d639e534fa30f8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '3243dcc4698ebd53adaa59ae470a6e90061feb57', class: "select-wrapper-inner" }, h("slot", { key: '1e0aa1e18a79397fd551c0c87bb00053a29e428c', name: "start" }), h("div", { key: 'e21995dd161859aaeade1063d0f27acf38941260', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '4cb0e709df3974acb3f3a9fa82fb6f02cc666fcf', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'bcf9062e00e10576b399eeee886ec48595b1e7a7', class: "select-highlight" }))));
|
|
612
615
|
}
|
|
613
616
|
get el() { return this; }
|
|
614
617
|
static get watchers() { return {
|
|
@@ -46,6 +46,14 @@ const Segment = class {
|
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
};
|
|
49
|
+
this.onSlottedItemsChange = () => {
|
|
50
|
+
/**
|
|
51
|
+
* When the slotted segment buttons change we need to
|
|
52
|
+
* ensure that the new segment buttons are checked if
|
|
53
|
+
* the value matches the segment button value.
|
|
54
|
+
*/
|
|
55
|
+
this.valueChanged(this.value);
|
|
56
|
+
};
|
|
49
57
|
this.getSegmentButton = (selector) => {
|
|
50
58
|
var _a, _b;
|
|
51
59
|
const buttons = this.getButtons().filter((button) => !button.disabled);
|
|
@@ -113,13 +121,6 @@ const Segment = class {
|
|
|
113
121
|
}
|
|
114
122
|
async componentDidLoad() {
|
|
115
123
|
this.setCheckedClasses();
|
|
116
|
-
/**
|
|
117
|
-
* If the value changes before watchers
|
|
118
|
-
* are setup, then the ionSelect watch callback
|
|
119
|
-
* will not fire. As a result, we manually
|
|
120
|
-
* fire this event when Select is loaded.
|
|
121
|
-
*/
|
|
122
|
-
this.ionSelect.emit({ value: this.value });
|
|
123
124
|
/**
|
|
124
125
|
* We need to wait for the buttons to all be rendered
|
|
125
126
|
* before we can scroll.
|
|
@@ -430,14 +431,14 @@ const Segment = class {
|
|
|
430
431
|
}
|
|
431
432
|
render() {
|
|
432
433
|
const mode = ionicGlobal.getIonMode(this);
|
|
433
|
-
return (index.h(index.Host, { key: '
|
|
434
|
+
return (index.h(index.Host, { key: 'ad0946134c8d465b760ad792655f1cb9922db520', role: "tablist", onClick: this.onClick, class: theme.createColorClasses(this.color, {
|
|
434
435
|
[mode]: true,
|
|
435
436
|
'in-toolbar': theme.hostContext('ion-toolbar', this.el),
|
|
436
437
|
'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
|
|
437
438
|
'segment-activated': this.activated,
|
|
438
439
|
'segment-disabled': this.disabled,
|
|
439
440
|
'segment-scrollable': this.scrollable,
|
|
440
|
-
}) }, index.h("slot", { key: '
|
|
441
|
+
}) }, index.h("slot", { key: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
|
|
441
442
|
}
|
|
442
443
|
get el() { return index.getElement(this); }
|
|
443
444
|
static get watchers() { return {
|
|
@@ -109,9 +109,6 @@ const Select = class {
|
|
|
109
109
|
this.value = value;
|
|
110
110
|
this.ionChange.emit({ value });
|
|
111
111
|
}
|
|
112
|
-
componentWillLoad() {
|
|
113
|
-
this.inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
|
|
114
|
-
}
|
|
115
112
|
async connectedCallback() {
|
|
116
113
|
const { el } = this;
|
|
117
114
|
this.notchController = notchController.createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -128,6 +125,12 @@ const Select = class {
|
|
|
128
125
|
index.forceUpdate(this);
|
|
129
126
|
});
|
|
130
127
|
}
|
|
128
|
+
componentWillLoad() {
|
|
129
|
+
this.inheritedAttributes = helpers.inheritAttributes(this.el, ['aria-label']);
|
|
130
|
+
}
|
|
131
|
+
componentDidLoad() {
|
|
132
|
+
this.emitStyle();
|
|
133
|
+
}
|
|
131
134
|
disconnectedCallback() {
|
|
132
135
|
if (this.mutationO) {
|
|
133
136
|
this.mutationO.disconnect();
|
|
@@ -586,7 +589,7 @@ const Select = class {
|
|
|
586
589
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
587
590
|
*/
|
|
588
591
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
589
|
-
return (index.h(index.Host, { key: '
|
|
592
|
+
return (index.h(index.Host, { key: '57fa52484e644c5c021921fef7131ac832034feb', onClick: this.onClick, class: theme.createColorClasses(this.color, {
|
|
590
593
|
[mode]: true,
|
|
591
594
|
'in-item': inItem,
|
|
592
595
|
'in-item-color': theme.hostContext('ion-item.ion-color', el),
|
|
@@ -602,7 +605,7 @@ const Select = class {
|
|
|
602
605
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
603
606
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
604
607
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
605
|
-
}) }, index.h("label", { key: '
|
|
608
|
+
}) }, index.h("label", { key: '34cb142fa7fec6946e7eb39e30d639e534fa30f8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), index.h("div", { key: '3243dcc4698ebd53adaa59ae470a6e90061feb57', class: "select-wrapper-inner" }, index.h("slot", { key: '1e0aa1e18a79397fd551c0c87bb00053a29e428c', name: "start" }), index.h("div", { key: 'e21995dd161859aaeade1063d0f27acf38941260', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), index.h("slot", { key: '4cb0e709df3974acb3f3a9fa82fb6f02cc666fcf', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && index.h("div", { key: 'bcf9062e00e10576b399eeee886ec48595b1e7a7', class: "select-highlight" }))));
|
|
606
609
|
}
|
|
607
610
|
get el() { return index.getElement(this); }
|
|
608
611
|
static get watchers() { return {
|
|
@@ -34,6 +34,14 @@ export class Segment {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
+
this.onSlottedItemsChange = () => {
|
|
38
|
+
/**
|
|
39
|
+
* When the slotted segment buttons change we need to
|
|
40
|
+
* ensure that the new segment buttons are checked if
|
|
41
|
+
* the value matches the segment button value.
|
|
42
|
+
*/
|
|
43
|
+
this.valueChanged(this.value);
|
|
44
|
+
};
|
|
37
45
|
this.getSegmentButton = (selector) => {
|
|
38
46
|
var _a, _b;
|
|
39
47
|
const buttons = this.getButtons().filter((button) => !button.disabled);
|
|
@@ -101,13 +109,6 @@ export class Segment {
|
|
|
101
109
|
}
|
|
102
110
|
async componentDidLoad() {
|
|
103
111
|
this.setCheckedClasses();
|
|
104
|
-
/**
|
|
105
|
-
* If the value changes before watchers
|
|
106
|
-
* are setup, then the ionSelect watch callback
|
|
107
|
-
* will not fire. As a result, we manually
|
|
108
|
-
* fire this event when Select is loaded.
|
|
109
|
-
*/
|
|
110
|
-
this.ionSelect.emit({ value: this.value });
|
|
111
112
|
/**
|
|
112
113
|
* We need to wait for the buttons to all be rendered
|
|
113
114
|
* before we can scroll.
|
|
@@ -420,14 +421,14 @@ export class Segment {
|
|
|
420
421
|
}
|
|
421
422
|
render() {
|
|
422
423
|
const mode = getIonMode(this);
|
|
423
|
-
return (h(Host, { key: '
|
|
424
|
+
return (h(Host, { key: 'ad0946134c8d465b760ad792655f1cb9922db520', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
|
|
424
425
|
[mode]: true,
|
|
425
426
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
426
427
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
427
428
|
'segment-activated': this.activated,
|
|
428
429
|
'segment-disabled': this.disabled,
|
|
429
430
|
'segment-scrollable': this.scrollable,
|
|
430
|
-
}) }, h("slot", { key: '
|
|
431
|
+
}) }, h("slot", { key: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
|
|
431
432
|
}
|
|
432
433
|
static get is() { return "ion-segment"; }
|
|
433
434
|
static get encapsulation() { return "shadow"; }
|
|
@@ -99,9 +99,6 @@ export class Select {
|
|
|
99
99
|
this.value = value;
|
|
100
100
|
this.ionChange.emit({ value });
|
|
101
101
|
}
|
|
102
|
-
componentWillLoad() {
|
|
103
|
-
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
104
|
-
}
|
|
105
102
|
async connectedCallback() {
|
|
106
103
|
const { el } = this;
|
|
107
104
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -118,6 +115,12 @@ export class Select {
|
|
|
118
115
|
forceUpdate(this);
|
|
119
116
|
});
|
|
120
117
|
}
|
|
118
|
+
componentWillLoad() {
|
|
119
|
+
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
120
|
+
}
|
|
121
|
+
componentDidLoad() {
|
|
122
|
+
this.emitStyle();
|
|
123
|
+
}
|
|
121
124
|
disconnectedCallback() {
|
|
122
125
|
if (this.mutationO) {
|
|
123
126
|
this.mutationO.disconnect();
|
|
@@ -610,7 +613,7 @@ export class Select {
|
|
|
610
613
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
611
614
|
*/
|
|
612
615
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
613
|
-
return (h(Host, { key: '
|
|
616
|
+
return (h(Host, { key: '57fa52484e644c5c021921fef7131ac832034feb', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
614
617
|
[mode]: true,
|
|
615
618
|
'in-item': inItem,
|
|
616
619
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -626,7 +629,7 @@ export class Select {
|
|
|
626
629
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
627
630
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
628
631
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
629
|
-
}) }, h("label", { key: '
|
|
632
|
+
}) }, h("label", { key: '34cb142fa7fec6946e7eb39e30d639e534fa30f8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '3243dcc4698ebd53adaa59ae470a6e90061feb57', class: "select-wrapper-inner" }, h("slot", { key: '1e0aa1e18a79397fd551c0c87bb00053a29e428c', name: "start" }), h("div", { key: 'e21995dd161859aaeade1063d0f27acf38941260', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '4cb0e709df3974acb3f3a9fa82fb6f02cc666fcf', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'bcf9062e00e10576b399eeee886ec48595b1e7a7', class: "select-highlight" }))));
|
|
630
633
|
}
|
|
631
634
|
static get is() { return "ion-select"; }
|
|
632
635
|
static get encapsulation() { return "shadow"; }
|
package/dist/docs.json
CHANGED
|
@@ -42,6 +42,14 @@ const Segment = class {
|
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
+
this.onSlottedItemsChange = () => {
|
|
46
|
+
/**
|
|
47
|
+
* When the slotted segment buttons change we need to
|
|
48
|
+
* ensure that the new segment buttons are checked if
|
|
49
|
+
* the value matches the segment button value.
|
|
50
|
+
*/
|
|
51
|
+
this.valueChanged(this.value);
|
|
52
|
+
};
|
|
45
53
|
this.getSegmentButton = (selector) => {
|
|
46
54
|
var _a, _b;
|
|
47
55
|
const buttons = this.getButtons().filter((button) => !button.disabled);
|
|
@@ -109,13 +117,6 @@ const Segment = class {
|
|
|
109
117
|
}
|
|
110
118
|
async componentDidLoad() {
|
|
111
119
|
this.setCheckedClasses();
|
|
112
|
-
/**
|
|
113
|
-
* If the value changes before watchers
|
|
114
|
-
* are setup, then the ionSelect watch callback
|
|
115
|
-
* will not fire. As a result, we manually
|
|
116
|
-
* fire this event when Select is loaded.
|
|
117
|
-
*/
|
|
118
|
-
this.ionSelect.emit({ value: this.value });
|
|
119
120
|
/**
|
|
120
121
|
* We need to wait for the buttons to all be rendered
|
|
121
122
|
* before we can scroll.
|
|
@@ -426,14 +427,14 @@ const Segment = class {
|
|
|
426
427
|
}
|
|
427
428
|
render() {
|
|
428
429
|
const mode = getIonMode(this);
|
|
429
|
-
return (h(Host, { key: '
|
|
430
|
+
return (h(Host, { key: 'ad0946134c8d465b760ad792655f1cb9922db520', role: "tablist", onClick: this.onClick, class: createColorClasses(this.color, {
|
|
430
431
|
[mode]: true,
|
|
431
432
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
432
433
|
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
|
|
433
434
|
'segment-activated': this.activated,
|
|
434
435
|
'segment-disabled': this.disabled,
|
|
435
436
|
'segment-scrollable': this.scrollable,
|
|
436
|
-
}) }, h("slot", { key: '
|
|
437
|
+
}) }, h("slot", { key: 'dcdb425bcda0d60acb7c317e5e671ed462715b4a', onSlotchange: this.onSlottedItemsChange })));
|
|
437
438
|
}
|
|
438
439
|
get el() { return getElement(this); }
|
|
439
440
|
static get watchers() { return {
|
|
@@ -105,9 +105,6 @@ const Select = class {
|
|
|
105
105
|
this.value = value;
|
|
106
106
|
this.ionChange.emit({ value });
|
|
107
107
|
}
|
|
108
|
-
componentWillLoad() {
|
|
109
|
-
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
110
|
-
}
|
|
111
108
|
async connectedCallback() {
|
|
112
109
|
const { el } = this;
|
|
113
110
|
this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
|
|
@@ -124,6 +121,12 @@ const Select = class {
|
|
|
124
121
|
forceUpdate(this);
|
|
125
122
|
});
|
|
126
123
|
}
|
|
124
|
+
componentWillLoad() {
|
|
125
|
+
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
|
|
126
|
+
}
|
|
127
|
+
componentDidLoad() {
|
|
128
|
+
this.emitStyle();
|
|
129
|
+
}
|
|
127
130
|
disconnectedCallback() {
|
|
128
131
|
if (this.mutationO) {
|
|
129
132
|
this.mutationO.disconnect();
|
|
@@ -582,7 +585,7 @@ const Select = class {
|
|
|
582
585
|
* TODO(FW-5592): Remove hasStartEndSlots condition
|
|
583
586
|
*/
|
|
584
587
|
const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
|
|
585
|
-
return (h(Host, { key: '
|
|
588
|
+
return (h(Host, { key: '57fa52484e644c5c021921fef7131ac832034feb', onClick: this.onClick, class: createColorClasses(this.color, {
|
|
586
589
|
[mode]: true,
|
|
587
590
|
'in-item': inItem,
|
|
588
591
|
'in-item-color': hostContext('ion-item.ion-color', el),
|
|
@@ -598,7 +601,7 @@ const Select = class {
|
|
|
598
601
|
[`select-justify-${justify}`]: justifyEnabled,
|
|
599
602
|
[`select-shape-${shape}`]: shape !== undefined,
|
|
600
603
|
[`select-label-placement-${labelPlacement}`]: true,
|
|
601
|
-
}) }, h("label", { key: '
|
|
604
|
+
}) }, h("label", { key: '34cb142fa7fec6946e7eb39e30d639e534fa30f8', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '3243dcc4698ebd53adaa59ae470a6e90061feb57', class: "select-wrapper-inner" }, h("slot", { key: '1e0aa1e18a79397fd551c0c87bb00053a29e428c', name: "start" }), h("div", { key: 'e21995dd161859aaeade1063d0f27acf38941260', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '4cb0e709df3974acb3f3a9fa82fb6f02cc666fcf', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'bcf9062e00e10576b399eeee886ec48595b1e7a7', class: "select-highlight" }))));
|
|
602
605
|
}
|
|
603
606
|
get el() { return getElement(this); }
|
|
604
607
|
static get watchers() { return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import{__awaiter,__generator}from"tslib";
|
|
2
2
|
/*!
|
|
3
3
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
4
|
-
*/import{r as registerInstance,d as createEvent,w as writeTask,h,f as Host,i as getElement,j as forceUpdate}from"./index-9aab3bcf.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-4528d288.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.onClick=function(t){var e=t.target;var n=o.checked;if(e.tagName==="ION-SEGMENT"){return}o.value=e.value;if(e!==n){o.emitValueChange()}if(o.scrollable||!o.swipeGesture){if(n){o.checkButton(n,e)}else{o.setCheckedClasses()}}};this.getSegmentButton=function(t){var e,n;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(e=i[r+1])!==null&&e!==void 0?e:i[0];case"previous":return(n=i[r-1])!==null&&n!==void 0?n: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){this.ionSelect.emit({value:t});this.scrollActiveButtonIntoView()};t.prototype.disabledChanged=function(){this.gestureChanged();var t=this.getButtons();for(var o=0,e=t;o<e.length;o++){var n=e[o];n.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()};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(e){switch(e.label){case 0:this.setCheckedClasses();this.ionSelect.emit({value:this.value});raf((function(){o.scrollActiveButtonIntoView(false)}));t=this;return[4,import("./index-39782642.js")];case 1:t.gesture=e.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()}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.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){if(t){o.classList.add("segment-button-activated")}else{o.classList.remove("segment-button-activated")}}));this.activated=t};t.prototype.activate=function(t){var o=this;var e=t.event.target;var n=this.getButtons();var i=n.find((function(t){return t.value===o.value}));if(e.tagName!=="ION-SEGMENT-BUTTON"){return}if(!i){this.value=e.value;this.setCheckedClasses()}if(this.value===e.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 e=this.getIndicator(t);var n=this.getIndicator(o);if(e===null||n===null){return}var i=e.getBoundingClientRect();var r=n.getBoundingClientRect();var a=i.width/r.width;var s=i.left-r.left;var c="translate3d(".concat(s,"px, 0, 0) scaleX(").concat(a,")");writeTask((function(){n.classList.remove("segment-button-indicator-animated");n.style.setProperty("transform",c);n.getBoundingClientRect();n.classList.add("segment-button-indicator-animated");n.style.setProperty("transform","")}));this.value=o.value;this.setCheckedClasses()};t.prototype.setCheckedClasses=function(){var t=this;var o=this.getButtons();var e=o.findIndex((function(o){return o.value===t.value}));var n=e+1;for(var i=0,r=o;i<r.length;i++){var a=r[i];a.classList.remove("segment-button-after-checked")}if(n<o.length){o[n].classList.add("segment-button-after-checked")}};t.prototype.scrollActiveButtonIntoView=function(t){if(t===void 0){t=true}var o=this,e=o.scrollable,n=o.value,i=o.el;if(e){var r=this.getButtons();var a=r.find((function(t){return t.value===n}));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;i.scrollBy({top:0,left:l,behavior:t?"smooth":"instant"})}}};t.prototype.setNextIndex=function(t,o){var e=this;if(o===void 0){o=false}var n=isRTL(this.el);var i=this.activated;var r=this.getButtons();var a=r.findIndex((function(t){return t.value===e.value}));var s=r[a];var c;var d;if(a===-1){return}var l=s.getBoundingClientRect();var b=l.left;var u=l.width;var h=t.currentX;var g=l.top+l.height/2;var m=this.el.getRootNode();var f=m.elementFromPoint(h,g);var v=n?h>b+u:h<b;var p=n?h<b:h>b+u;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 e=this.selectOnFocus;var n;switch(t.key){case"ArrowRight":t.preventDefault();n=o?this.getSegmentButton("previous"):this.getSegmentButton("next");break;case"ArrowLeft":t.preventDefault();n=o?this.getSegmentButton("next"):this.getSegmentButton("previous");break;case"Home":t.preventDefault();n=this.getSegmentButton("first");break;case"End":t.preventDefault();n=this.getSegmentButton("last");break;case" ":case"Enter":t.preventDefault();n=document.activeElement;e=true}if(!n){return}if(e){var i=this.checked;this.checkButton(i||n,n);if(n!==i){this.emitValueChange()}}n.setFocus()};t.prototype.render=function(){var t;var o=getIonMode(this);return h(Host,{key:"7b0aeabf078ca075d0ea1d5e92d84b9e7f1cefef",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:"ddecf3510bbc3cd37b2bbd7818b19f9919c767b5"}))};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.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)}};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 e=this,n=e.checked,i=e.type,r=e.disabled,a=e.hasIcon,s=e.hasLabel,c=e.layout,d=e.segmentEl;var l=getIonMode(this);var b=function(){return(d===null||d===void 0?void 0:d.color)!==undefined};return h(Host,{key:"70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e",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"]=b(),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"]=n,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:"a53c9f1e360934e8d2e90476642ba4507fc38ebd","aria-selected":n?"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:"7d8feda840d389941cc693f500b5eba0b39b41da",class:"button-inner"},h("slot",{key:"d9ae1eec45db253cbf573d29cd545658dd595d87"})),l==="md"&&h("ion-ripple-effect",{key:"49e6a16968709dc9b3fc77bc9fb99acb42fda88c"})),h("div",{key:"4e3ea0989ed5205dbb03586e4facb439b05a92de",part:"indicator",class:{"segment-button-indicator":true,"segment-button-indicator-animated":true}},h("div",{key:"65c72a151080998c1e548c87d4d4ebd5c7dda72f",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-9aab3bcf.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-4528d288.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.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.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){this.ionSelect.emit({value:t});this.scrollActiveButtonIntoView()};t.prototype.disabledChanged=function(){this.gestureChanged();var t=this.getButtons();for(var o=0,n=t;o<n.length;o++){var e=n[o];e.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()};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()}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.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){if(t){o.classList.add("segment-button-activated")}else{o.classList.remove("segment-button-activated")}}));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.getIndicator(t);var e=this.getIndicator(o);if(n===null||e===null){return}var i=n.getBoundingClientRect();var r=e.getBoundingClientRect();var a=i.width/r.width;var s=i.left-r.left;var c="translate3d(".concat(s,"px, 0, 0) scaleX(").concat(a,")");writeTask((function(){e.classList.remove("segment-button-indicator-animated");e.style.setProperty("transform",c);e.getBoundingClientRect();e.classList.add("segment-button-indicator-animated");e.style.setProperty("transform","")}));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.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;i.scrollBy({top:0,left:l,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 b=l.width;var h=t.currentX;var g=l.top+l.height/2;var m=this.el.getRootNode();var f=m.elementFromPoint(h,g);var v=e?h>u+b:h<u;var p=e?h<u:h>u+b;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:"ad0946134c8d465b760ad792655f1cb9922db520",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:"dcdb425bcda0d60acb7c317e5e671ed462715b4a",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.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)}};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:"70cf5c7a3ae2620222c5250c644faf3cfc3b3e4e",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:"a53c9f1e360934e8d2e90476642ba4507fc38ebd","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:"7d8feda840d389941cc693f500b5eba0b39b41da",class:"button-inner"},h("slot",{key:"d9ae1eec45db253cbf573d29cd545658dd595d87"})),l==="md"&&h("ion-ripple-effect",{key:"49e6a16968709dc9b3fc77bc9fb99acb42fda88c"})),h("div",{key:"4e3ea0989ed5205dbb03586e4facb439b05a92de",part:"indicator",class:{"segment-button-indicator":true,"segment-button-indicator-animated":true}},h("div",{key:"65c72a151080998c1e548c87d4d4ebd5c7dda72f",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};
|