@ionic/core 8.5.5-dev.11746028401.1b2f6b8c → 8.5.5-dev.11746635887.17fec492
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-badge.js +3 -3
- package/components/title.js +1 -1
- package/components/toolbar.js +130 -5
- package/css/ionic/bundle.ionic.css +1 -1
- package/css/ionic/bundle.ionic.css.map +1 -1
- package/css/ionic/core.ionic.css +1 -1
- package/css/ionic/core.ionic.css.map +1 -1
- package/dist/cjs/ion-app_8.cjs.entry.js +131 -6
- package/dist/cjs/ion-avatar_3.cjs.entry.js +3 -3
- package/dist/collection/components/badge/badge.ionic.css +12 -76
- package/dist/collection/components/badge/badge.js +5 -5
- package/dist/collection/components/title/title.ionic.css +0 -16
- package/dist/collection/components/toolbar/toolbar.ionic.css +27 -22
- package/dist/collection/components/toolbar/toolbar.js +130 -5
- package/dist/docs.json +5 -17
- package/dist/esm/ion-app_8.entry.js +131 -6
- package/dist/esm/ion-avatar_3.entry.js +3 -3
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-avatar_3.entry.js +1 -1
- package/dist/html.html-data.json +1 -10
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-16fd70b2.entry.js +4 -0
- package/dist/ionic/{p-f3deab52.system.entry.js → p-ad3f30b4.system.entry.js} +1 -1
- package/dist/ionic/p-db8ffacb.system.js +1 -1
- package/dist/ionic/{p-2d8cc8b4.entry.js → p-dbbfcd15.entry.js} +1 -1
- package/dist/ionic/{p-a569fc14.system.entry.js → p-ed4cf0aa.system.entry.js} +1 -1
- package/dist/types/components/badge/badge.d.ts +3 -6
- package/dist/types/components/toolbar/toolbar.d.ts +16 -0
- package/dist/types/components.d.ts +4 -4
- package/hydrate/index.js +134 -9
- package/hydrate/index.mjs +134 -9
- package/package.json +1 -1
- package/dist/ionic/p-f10dba92.entry.js +0 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import { forceUpdate, h, Host } from "@stencil/core";
|
|
5
5
|
import { createColorClasses, hostContext } from "../../utils/theme";
|
|
6
6
|
import { getIonTheme } from "../../global/ionic-global";
|
|
7
7
|
/**
|
|
@@ -38,6 +38,131 @@ export class Toolbar {
|
|
|
38
38
|
if (lastButtons) {
|
|
39
39
|
lastButtons.classList.add('buttons-last-slot');
|
|
40
40
|
}
|
|
41
|
+
this.updateSlotClasses();
|
|
42
|
+
}
|
|
43
|
+
componentDidLoad() {
|
|
44
|
+
this.updateSlotClasses();
|
|
45
|
+
this.updateSlotWidths();
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Updates the CSS custom properties for slot widths
|
|
49
|
+
* This ensures that slots shown by their met conditions
|
|
50
|
+
* have a minimum width matching their required slot
|
|
51
|
+
*/
|
|
52
|
+
updateSlotWidths(tries = 0) {
|
|
53
|
+
// Set timeout to try to execute after everything is rendered
|
|
54
|
+
setTimeout(() => {
|
|
55
|
+
// Attempt to measure and update
|
|
56
|
+
const success = this.measureAndUpdateSlots();
|
|
57
|
+
// If not all measurements were successful, try again in 100 ms
|
|
58
|
+
// cap recursion at 5 tries for safety
|
|
59
|
+
if (!success && tries < 5) {
|
|
60
|
+
setTimeout(() => {
|
|
61
|
+
this.updateSlotWidths(tries + 1);
|
|
62
|
+
}, 100);
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
/**
|
|
67
|
+
* Measure the widths of the slots and update the CSS custom properties
|
|
68
|
+
* for the minimum width of each pair of slots based on the largest width in each pair.
|
|
69
|
+
* Returns whether we successfully measured all of the slots we expect to have content.
|
|
70
|
+
* If not, the content probably hasn't rendered yet and we need to try again.
|
|
71
|
+
*/
|
|
72
|
+
measureAndUpdateSlots() {
|
|
73
|
+
// Define the relationship between slots based on the conditions array
|
|
74
|
+
// Group slots that should have the same width
|
|
75
|
+
const slotPairs = [
|
|
76
|
+
{ name: 'start-end', slots: ['start', 'end'] },
|
|
77
|
+
{ name: 'primary-secondary', slots: ['primary', 'secondary'] },
|
|
78
|
+
];
|
|
79
|
+
// First, measure all slot widths
|
|
80
|
+
const slotWidths = new Map();
|
|
81
|
+
let allMeasurementsSuccessful = true;
|
|
82
|
+
// Measure all slots with content
|
|
83
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
84
|
+
slots.forEach((slot) => {
|
|
85
|
+
var _a;
|
|
86
|
+
if (this.el.classList.contains(`has-${slot}-content`)) {
|
|
87
|
+
const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
|
|
88
|
+
if (slotElement) {
|
|
89
|
+
const width = slotElement.offsetWidth;
|
|
90
|
+
if (width > 0) {
|
|
91
|
+
slotWidths.set(slot, width);
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
allMeasurementsSuccessful = false;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
// Then set the CSS custom properties based on the largest width in each pair
|
|
100
|
+
slotPairs.forEach(({ name, slots }) => {
|
|
101
|
+
// Find the maximum width among the slots in this pair
|
|
102
|
+
let maxWidth = 0;
|
|
103
|
+
let hasAnyContent = false;
|
|
104
|
+
slots.forEach((slot) => {
|
|
105
|
+
var _a;
|
|
106
|
+
if (slotWidths.has(slot)) {
|
|
107
|
+
hasAnyContent = true;
|
|
108
|
+
maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
// If at least one slot in the pair has content, set the min-width for the pair
|
|
112
|
+
if (hasAnyContent && maxWidth > 0) {
|
|
113
|
+
// Set a single CSS variable for the pair
|
|
114
|
+
this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
return allMeasurementsSuccessful;
|
|
118
|
+
}
|
|
119
|
+
updateSlotClasses() {
|
|
120
|
+
// Check if slots have content
|
|
121
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
122
|
+
const classesToAdd = [];
|
|
123
|
+
const classesToRemove = [];
|
|
124
|
+
slots.forEach((slot) => {
|
|
125
|
+
const slotHasContent = this.hasSlotContent(slot);
|
|
126
|
+
const slotClass = `has-${slot}-content`;
|
|
127
|
+
if (slotHasContent) {
|
|
128
|
+
classesToAdd.push(slotClass);
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
classesToRemove.push(slotClass);
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
// Force visibilities in certain conditions. This works by adding a class to the toolbar
|
|
135
|
+
// named `show-{slot}`. This class will be added if the toolbar has the required slots
|
|
136
|
+
// and does not have any of the excluded slots, otherwise it will be removed.
|
|
137
|
+
// This is useful to enforce centering of the toolbar content when there are different amounts
|
|
138
|
+
// of slots on either side of the toolbar.
|
|
139
|
+
const conditions = [
|
|
140
|
+
{ name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
|
|
141
|
+
{ name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
|
|
142
|
+
{ name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
|
|
143
|
+
{ name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
|
|
144
|
+
];
|
|
145
|
+
conditions.forEach((condition) => {
|
|
146
|
+
const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
147
|
+
const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
148
|
+
const className = `show-${condition.name}`;
|
|
149
|
+
if (hasRequiredSlots && !hasExcludedSlots) {
|
|
150
|
+
classesToAdd.push(className);
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
classesToRemove.push(className);
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
// Add classes to the toolbar element
|
|
157
|
+
this.el.classList.add(...classesToAdd);
|
|
158
|
+
this.el.classList.remove(...classesToRemove);
|
|
159
|
+
// Update slot widths after classes have been updated
|
|
160
|
+
this.updateSlotWidths();
|
|
161
|
+
}
|
|
162
|
+
hasSlotContent(slotName) {
|
|
163
|
+
var _a;
|
|
164
|
+
const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
|
|
165
|
+
return !!slotNode && slotNode.assignedNodes().length > 0;
|
|
41
166
|
}
|
|
42
167
|
childrenStyle(ev) {
|
|
43
168
|
ev.stopPropagation();
|
|
@@ -64,13 +189,13 @@ export class Toolbar {
|
|
|
64
189
|
render() {
|
|
65
190
|
const theme = getIonTheme(this);
|
|
66
191
|
const childStyles = {};
|
|
67
|
-
this.childrenStyles.forEach((
|
|
68
|
-
Object.assign(childStyles,
|
|
192
|
+
this.childrenStyles.forEach((style) => {
|
|
193
|
+
Object.assign(childStyles, style);
|
|
69
194
|
});
|
|
70
|
-
return (h(Host, { key: '
|
|
195
|
+
return (h(Host, { key: '9cf12f7133f19ef24ec4818e5334850b7315b602', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
|
|
71
196
|
[theme]: true,
|
|
72
197
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
73
|
-
})) }, h("div", { key: '
|
|
198
|
+
})), childStyles) }, h("div", { key: 'ba137a3b6cc68902ec93b469968885de6746a7e6', class: "toolbar-background", part: "background" }), h("div", { key: 'd3a278f4d7e50a1b3c93a8e9412df81e6e6387bc', class: "toolbar-container", part: "container" }, h("slot", { key: '7ac00536a8fe5ecbf695d21a51f62079ff0262e0', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'f641e8b71125023f7dd71f4080c6b37ef33f9639', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'a785319051166ac161069df114387ccc3e499822', class: "toolbar-content", part: "content" }, h("slot", { key: '4930bfc6a5425f923f4f23c27f9312d506463b0c' })), h("slot", { key: 'd0e78019181ff220bfb54110bdbe0d12be330374', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '5c4a39a0764001ca90e96ccb9a9b7eba158fe5e6', name: "end", onSlotchange: () => this.updateSlotClasses }))));
|
|
74
199
|
}
|
|
75
200
|
static get is() { return "ion-toolbar"; }
|
|
76
201
|
static get encapsulation() { return "shadow"; }
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-
|
|
2
|
+
"timestamp": "2025-05-07T16:40:31",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.20.0",
|
|
@@ -4119,16 +4119,16 @@
|
|
|
4119
4119
|
},
|
|
4120
4120
|
{
|
|
4121
4121
|
"name": "size",
|
|
4122
|
-
"type": "\"large\" | \"medium\" | \"small\" |
|
|
4122
|
+
"type": "\"large\" | \"medium\" | \"small\" | undefined",
|
|
4123
4123
|
"complexType": {
|
|
4124
|
-
"original": "'
|
|
4125
|
-
"resolved": "\"large\" | \"medium\" | \"small\" |
|
|
4124
|
+
"original": "'small' | 'medium' | 'large'",
|
|
4125
|
+
"resolved": "\"large\" | \"medium\" | \"small\" | undefined",
|
|
4126
4126
|
"references": {}
|
|
4127
4127
|
},
|
|
4128
4128
|
"mutable": false,
|
|
4129
4129
|
"attr": "size",
|
|
4130
4130
|
"reflectToAttr": false,
|
|
4131
|
-
"docs": "Set to `\"
|
|
4131
|
+
"docs": "Set to `\"small\"` for a small badge.\nSet to `\"medium\"` for a medium badge.\nSet to `\"large\"` for a large badge, when it is empty (no text or icon).\n\nDefaults to `\"small\"` for the `ionic` theme, undefined for all other themes.",
|
|
4132
4132
|
"docsTags": [],
|
|
4133
4133
|
"values": [
|
|
4134
4134
|
{
|
|
@@ -4143,18 +4143,6 @@
|
|
|
4143
4143
|
"value": "small",
|
|
4144
4144
|
"type": "string"
|
|
4145
4145
|
},
|
|
4146
|
-
{
|
|
4147
|
-
"value": "xlarge",
|
|
4148
|
-
"type": "string"
|
|
4149
|
-
},
|
|
4150
|
-
{
|
|
4151
|
-
"value": "xsmall",
|
|
4152
|
-
"type": "string"
|
|
4153
|
-
},
|
|
4154
|
-
{
|
|
4155
|
-
"value": "xxsmall",
|
|
4156
|
-
"type": "string"
|
|
4157
|
-
},
|
|
4158
4146
|
{
|
|
4159
4147
|
"type": "undefined"
|
|
4160
4148
|
}
|
|
@@ -1158,7 +1158,7 @@ const RouterOutlet = class {
|
|
|
1158
1158
|
};
|
|
1159
1159
|
RouterOutlet.style = IonRouterOutletStyle0;
|
|
1160
1160
|
|
|
1161
|
-
const titleIonicCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{font-size:var(--ion-font-size-450, 1.125rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-700, 28px);text-decoration:none;text-transform:none
|
|
1161
|
+
const titleIonicCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host{font-size:var(--ion-font-size-450, 1.125rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-700, 28px);text-decoration:none;text-transform:none;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host(.title-large){font-size:var(--ion-font-size-700, 1.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-900, 36px);text-decoration:none;text-transform:none}";
|
|
1162
1162
|
const IonTitleIonicStyle0 = titleIonicCss;
|
|
1163
1163
|
|
|
1164
1164
|
const titleIosCss = ":host{--color:initial;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;-webkit-transform:translateZ(0);transform:translateZ(0);color:var(--color)}.toolbar-title{display:block;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;pointer-events:auto}:host(.title-small) .toolbar-title{white-space:normal}:host(.ion-color){color:var(--ion-color-base)}:host{top:0;-webkit-padding-start:90px;padding-inline-start:90px;-webkit-padding-end:90px;padding-inline-end:90px;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);position:absolute;width:100%;height:100%;-webkit-transform:translateZ(0);transform:translateZ(0);font-size:min(1.0625rem, 20.4px);font-weight:600;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none}:host{inset-inline-start:0}:host(.title-small){-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:6px;padding-bottom:16px;position:relative;font-size:min(0.8125rem, 23.4px);font-weight:normal}:host(.title-large){-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px;padding-top:2px;padding-bottom:4px;-webkit-transform-origin:left center;transform-origin:left center;position:static;-ms-flex-align:end;align-items:flex-end;min-width:100%;font-size:min(2.125rem, 61.2px);font-weight:700;text-align:start}:host(.title-large.title-rtl){-webkit-transform-origin:right center;transform-origin:right center}:host(.title-large.ion-cloned-element){--color:var(--ion-text-color, #000);font-family:var(--ion-font-family)}:host(.title-large) .toolbar-title{-webkit-transform-origin:inherit;transform-origin:inherit;width:auto}:host-context([dir=rtl]):host(.title-large) .toolbar-title,:host-context([dir=rtl]).title-large .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}@supports selector(:dir(rtl)){:host(.title-large:dir(rtl)) .toolbar-title{-webkit-transform-origin:calc(100% - inherit);transform-origin:calc(100% - inherit)}}";
|
|
@@ -1209,7 +1209,7 @@ ToolbarTitle.style = {
|
|
|
1209
1209
|
md: IonTitleMdStyle0
|
|
1210
1210
|
};
|
|
1211
1211
|
|
|
1212
|
-
const toolbarIonicCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-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);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{--background:var(--ion-primitives-base-white, #ffffff);--color:var(--ion-primitives-neutral-1200, #242424);--border-color:currentColor;--padding-top:var(--ion-space-200, 8px);--padding-bottom:var(--ion-space-200, 8px);--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--min-height:var(--ion-scale-1400, 56px)}.toolbar-container{gap:var(--ion-space-400, 16px)}.toolbar-content{-ms-flex:
|
|
1212
|
+
const toolbarIonicCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-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);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{--background:var(--ion-primitives-base-white, #ffffff);--color:var(--ion-primitives-neutral-1200, #242424);--border-color:currentColor;--padding-top:var(--ion-space-200, 8px);--padding-bottom:var(--ion-space-200, 8px);--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--min-height:var(--ion-scale-1400, 56px)}.toolbar-container{gap:var(--ion-space-400, 16px)}.toolbar-content{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0}:host(.toolbar-searchbar) ::slotted(ion-searchbar){padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}::slotted(ion-buttons){gap:var(--ion-space-200, 8px)}::slotted(ion-title){-webkit-padding-start:var(--ion-space-200, 8px);padding-inline-start:var(--ion-space-200, 8px);-webkit-padding-end:var(--ion-space-200, 8px);padding-inline-end:var(--ion-space-200, 8px)}:host(.toolbar-title-default) ::slotted(ion-title){text-align:center}:host(.toolbar-title-large) ::slotted(ion-title){-webkit-padding-start:var(--ion-space-400, 16px);padding-inline-start:var(--ion-space-400, 16px);-webkit-padding-end:var(--ion-space-400, 16px);padding-inline-end:var(--ion-space-400, 16px)}:host(.has-end-content) slot[name=end],:host(.show-end) slot[name=end]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-start-content) slot[name=start],:host(.show-start) slot[name=start]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--start-end-size, 0);flex:0 0 var(--start-end-size, 0)}:host(.has-primary-content) slot[name=primary],:host(.show-primary) slot[name=primary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0);-ms-flex-pack:end;justify-content:flex-end;text-align:end}:host(.has-secondary-content) slot[name=secondary],:host(.show-secondary) slot[name=secondary]{display:-ms-flexbox;display:flex;-ms-flex:0 0 var(--primary-secondary-size, 0);flex:0 0 var(--primary-secondary-size, 0)}";
|
|
1213
1213
|
const IonToolbarIonicStyle0 = toolbarIonicCss;
|
|
1214
1214
|
|
|
1215
1215
|
const toolbarIosCss = ":host{--border-width:0;--border-style:solid;--opacity:1;--opacity-scale:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;width:100%;padding-right:var(--ion-safe-area-right);padding-left:var(--ion-safe-area-left);color:var(--color);contain:content;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-container{-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);display:-ms-flexbox;display:flex;position:relative;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;width:100%;min-height:var(--min-height);contain:content;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.toolbar-background{right:0;left:0;top:0;bottom:0;position:absolute;-webkit-transform:translateZ(0);transform:translateZ(0);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);contain:strict;opacity:calc(var(--opacity) * var(--opacity-scale));pointer-events:none}::slotted(ion-progress-bar){right:0;left:0;bottom:0;position:absolute}:host{font-family:var(--ion-font-family, inherit);z-index:10}:host(.ion-color){color:var(--ion-color-contrast)}:host(.ion-color) .toolbar-background{background:var(--ion-color-base)}.toolbar-container{z-index:10}.toolbar-background{z-index:-1}:host{--background:var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));--color:var(--ion-toolbar-color, var(--ion-text-color, #000));--border-color:var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));--padding-top:3px;--padding-bottom:3px;--padding-start:4px;--padding-end:4px;--min-height:44px}.toolbar-content{-ms-flex:1;flex:1;-ms-flex-order:4;order:4;min-width:0}:host(.toolbar-segment) .toolbar-content{display:-ms-inline-flexbox;display:inline-flex}:host(.toolbar-searchbar) .toolbar-container{padding-top:0;padding-bottom:0}:host(.toolbar-searchbar) ::slotted(*){-ms-flex-item-align:start;align-self:start}:host(.toolbar-searchbar) ::slotted(ion-chip){margin-top:3px}::slotted(ion-buttons){min-height:38px}::slotted([slot=start]){-ms-flex-order:2;order:2}::slotted([slot=secondary]){-ms-flex-order:3;order:3}::slotted([slot=primary]){-ms-flex-order:5;order:5;text-align:end}::slotted([slot=end]){-ms-flex-order:6;order:6;text-align:end}:host(.toolbar-title-large) .toolbar-container{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start}:host(.toolbar-title-large) .toolbar-content ion-title{-ms-flex:1;flex:1;-ms-flex-order:8;order:8;min-width:100%}";
|
|
@@ -1239,6 +1239,131 @@ const Toolbar = class {
|
|
|
1239
1239
|
if (lastButtons) {
|
|
1240
1240
|
lastButtons.classList.add('buttons-last-slot');
|
|
1241
1241
|
}
|
|
1242
|
+
this.updateSlotClasses();
|
|
1243
|
+
}
|
|
1244
|
+
componentDidLoad() {
|
|
1245
|
+
this.updateSlotClasses();
|
|
1246
|
+
this.updateSlotWidths();
|
|
1247
|
+
}
|
|
1248
|
+
/**
|
|
1249
|
+
* Updates the CSS custom properties for slot widths
|
|
1250
|
+
* This ensures that slots shown by their met conditions
|
|
1251
|
+
* have a minimum width matching their required slot
|
|
1252
|
+
*/
|
|
1253
|
+
updateSlotWidths(tries = 0) {
|
|
1254
|
+
// Set timeout to try to execute after everything is rendered
|
|
1255
|
+
setTimeout(() => {
|
|
1256
|
+
// Attempt to measure and update
|
|
1257
|
+
const success = this.measureAndUpdateSlots();
|
|
1258
|
+
// If not all measurements were successful, try again in 100 ms
|
|
1259
|
+
// cap recursion at 5 tries for safety
|
|
1260
|
+
if (!success && tries < 5) {
|
|
1261
|
+
setTimeout(() => {
|
|
1262
|
+
this.updateSlotWidths(tries + 1);
|
|
1263
|
+
}, 100);
|
|
1264
|
+
}
|
|
1265
|
+
});
|
|
1266
|
+
}
|
|
1267
|
+
/**
|
|
1268
|
+
* Measure the widths of the slots and update the CSS custom properties
|
|
1269
|
+
* for the minimum width of each pair of slots based on the largest width in each pair.
|
|
1270
|
+
* Returns whether we successfully measured all of the slots we expect to have content.
|
|
1271
|
+
* If not, the content probably hasn't rendered yet and we need to try again.
|
|
1272
|
+
*/
|
|
1273
|
+
measureAndUpdateSlots() {
|
|
1274
|
+
// Define the relationship between slots based on the conditions array
|
|
1275
|
+
// Group slots that should have the same width
|
|
1276
|
+
const slotPairs = [
|
|
1277
|
+
{ name: 'start-end', slots: ['start', 'end'] },
|
|
1278
|
+
{ name: 'primary-secondary', slots: ['primary', 'secondary'] },
|
|
1279
|
+
];
|
|
1280
|
+
// First, measure all slot widths
|
|
1281
|
+
const slotWidths = new Map();
|
|
1282
|
+
let allMeasurementsSuccessful = true;
|
|
1283
|
+
// Measure all slots with content
|
|
1284
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
1285
|
+
slots.forEach((slot) => {
|
|
1286
|
+
var _a;
|
|
1287
|
+
if (this.el.classList.contains(`has-${slot}-content`)) {
|
|
1288
|
+
const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
|
|
1289
|
+
if (slotElement) {
|
|
1290
|
+
const width = slotElement.offsetWidth;
|
|
1291
|
+
if (width > 0) {
|
|
1292
|
+
slotWidths.set(slot, width);
|
|
1293
|
+
}
|
|
1294
|
+
else {
|
|
1295
|
+
allMeasurementsSuccessful = false;
|
|
1296
|
+
}
|
|
1297
|
+
}
|
|
1298
|
+
}
|
|
1299
|
+
});
|
|
1300
|
+
// Then set the CSS custom properties based on the largest width in each pair
|
|
1301
|
+
slotPairs.forEach(({ name, slots }) => {
|
|
1302
|
+
// Find the maximum width among the slots in this pair
|
|
1303
|
+
let maxWidth = 0;
|
|
1304
|
+
let hasAnyContent = false;
|
|
1305
|
+
slots.forEach((slot) => {
|
|
1306
|
+
var _a;
|
|
1307
|
+
if (slotWidths.has(slot)) {
|
|
1308
|
+
hasAnyContent = true;
|
|
1309
|
+
maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
|
|
1310
|
+
}
|
|
1311
|
+
});
|
|
1312
|
+
// If at least one slot in the pair has content, set the min-width for the pair
|
|
1313
|
+
if (hasAnyContent && maxWidth > 0) {
|
|
1314
|
+
// Set a single CSS variable for the pair
|
|
1315
|
+
this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
|
|
1316
|
+
}
|
|
1317
|
+
});
|
|
1318
|
+
return allMeasurementsSuccessful;
|
|
1319
|
+
}
|
|
1320
|
+
updateSlotClasses() {
|
|
1321
|
+
// Check if slots have content
|
|
1322
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
1323
|
+
const classesToAdd = [];
|
|
1324
|
+
const classesToRemove = [];
|
|
1325
|
+
slots.forEach((slot) => {
|
|
1326
|
+
const slotHasContent = this.hasSlotContent(slot);
|
|
1327
|
+
const slotClass = `has-${slot}-content`;
|
|
1328
|
+
if (slotHasContent) {
|
|
1329
|
+
classesToAdd.push(slotClass);
|
|
1330
|
+
}
|
|
1331
|
+
else {
|
|
1332
|
+
classesToRemove.push(slotClass);
|
|
1333
|
+
}
|
|
1334
|
+
});
|
|
1335
|
+
// Force visibilities in certain conditions. This works by adding a class to the toolbar
|
|
1336
|
+
// named `show-{slot}`. This class will be added if the toolbar has the required slots
|
|
1337
|
+
// and does not have any of the excluded slots, otherwise it will be removed.
|
|
1338
|
+
// This is useful to enforce centering of the toolbar content when there are different amounts
|
|
1339
|
+
// of slots on either side of the toolbar.
|
|
1340
|
+
const conditions = [
|
|
1341
|
+
{ name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
|
|
1342
|
+
{ name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
|
|
1343
|
+
{ name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
|
|
1344
|
+
{ name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
|
|
1345
|
+
];
|
|
1346
|
+
conditions.forEach((condition) => {
|
|
1347
|
+
const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
1348
|
+
const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
1349
|
+
const className = `show-${condition.name}`;
|
|
1350
|
+
if (hasRequiredSlots && !hasExcludedSlots) {
|
|
1351
|
+
classesToAdd.push(className);
|
|
1352
|
+
}
|
|
1353
|
+
else {
|
|
1354
|
+
classesToRemove.push(className);
|
|
1355
|
+
}
|
|
1356
|
+
});
|
|
1357
|
+
// Add classes to the toolbar element
|
|
1358
|
+
this.el.classList.add(...classesToAdd);
|
|
1359
|
+
this.el.classList.remove(...classesToRemove);
|
|
1360
|
+
// Update slot widths after classes have been updated
|
|
1361
|
+
this.updateSlotWidths();
|
|
1362
|
+
}
|
|
1363
|
+
hasSlotContent(slotName) {
|
|
1364
|
+
var _a;
|
|
1365
|
+
const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
|
|
1366
|
+
return !!slotNode && slotNode.assignedNodes().length > 0;
|
|
1242
1367
|
}
|
|
1243
1368
|
childrenStyle(ev) {
|
|
1244
1369
|
ev.stopPropagation();
|
|
@@ -1265,13 +1390,13 @@ const Toolbar = class {
|
|
|
1265
1390
|
render() {
|
|
1266
1391
|
const theme = getIonTheme(this);
|
|
1267
1392
|
const childStyles = {};
|
|
1268
|
-
this.childrenStyles.forEach((
|
|
1269
|
-
Object.assign(childStyles,
|
|
1393
|
+
this.childrenStyles.forEach((style) => {
|
|
1394
|
+
Object.assign(childStyles, style);
|
|
1270
1395
|
});
|
|
1271
|
-
return (h(Host, { key: '
|
|
1396
|
+
return (h(Host, { key: '9cf12f7133f19ef24ec4818e5334850b7315b602', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
|
|
1272
1397
|
[theme]: true,
|
|
1273
1398
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
1274
|
-
})) }, h("div", { key: '
|
|
1399
|
+
})), childStyles) }, h("div", { key: 'ba137a3b6cc68902ec93b469968885de6746a7e6', class: "toolbar-background", part: "background" }), h("div", { key: 'd3a278f4d7e50a1b3c93a8e9412df81e6e6387bc', class: "toolbar-container", part: "container" }, h("slot", { key: '7ac00536a8fe5ecbf695d21a51f62079ff0262e0', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'f641e8b71125023f7dd71f4080c6b37ef33f9639', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'a785319051166ac161069df114387ccc3e499822', class: "toolbar-content", part: "content" }, h("slot", { key: '4930bfc6a5425f923f4f23c27f9312d506463b0c' })), h("slot", { key: 'd0e78019181ff220bfb54110bdbe0d12be330374', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '5c4a39a0764001ca90e96ccb9a9b7eba158fe5e6', name: "end", onSlotchange: () => this.updateSlotClasses }))));
|
|
1275
1400
|
}
|
|
1276
1401
|
get el() { return getElement(this); }
|
|
1277
1402
|
};
|
|
@@ -74,7 +74,7 @@ Avatar.style = {
|
|
|
74
74
|
md: IonAvatarMdStyle0
|
|
75
75
|
};
|
|
76
76
|
|
|
77
|
-
const badgeIonicCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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);display:inline-block;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--padding-top:var(--ion-space-0, 0px);--padding-bottom:var(--ion-space-0, 0px);font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-500, 20px);text-decoration:none;text-transform:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--ion-scale-250, 10px)}:host(.badge-bold){--background:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--color:var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff))}:host(.badge-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.badge-subtle){--background:var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, #f2f4fd));--color:var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, #0d4bc3))}:host(.badge-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.badge-soft){border-radius:var(--ion-border-radius-200, 8px)}:host(.badge-
|
|
77
|
+
const badgeIonicCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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);display:inline-block;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-start:var(--ion-space-200, 8px);--padding-end:var(--ion-space-200, 8px);--padding-top:var(--ion-space-0, 0px);--padding-bottom:var(--ion-space-0, 0px);font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-500, 20px);text-decoration:none;text-transform:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:var(--ion-scale-250, 10px)}:host(.badge-bold){--background:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--color:var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff))}:host(.badge-bold.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.badge-subtle){--background:var(--ion-color-primary-subtle, var(--ion-bg-primary-subtle-default, #f2f4fd));--color:var(--ion-color-primary-subtle-contrast, var(--ion-text-primary, #0d4bc3))}:host(.badge-subtle.ion-color){background:var(--ion-color-subtle-base);color:var(--ion-color-subtle-contrast)}:host(.badge-soft){border-radius:var(--ion-border-radius-200, 8px)}:host(.badge-small.badge-soft){border-radius:var(--ion-border-radius-100, 4px)}:host(.badge-round){border-radius:var(--ion-border-radius-full, 999px)}:host(.badge-rectangular){border-radius:var(--ion-border-radius-0, 0px)}:host(.badge-small){--padding-start:var(--ion-space-050, 2px);--padding-end:var(--ion-space-050, 2px);min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(.badge-small) ::slotted(ion-icon){width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}:host(.badge-medium),:host(.badge-large){--padding-start:var(--ion-space-100, 4px);--padding-end:var(--ion-space-100, 4px);font-size:var(--ion-font-size-350, 0.875rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-0, 0%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none;min-width:var(--ion-scale-600, 24px);height:var(--ion-scale-600, 24px)}:host(.badge-medium) ::slotted(ion-icon),:host(.badge-large) ::slotted(ion-icon){width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(:empty){--padding-start:0;--padding-end:0}:host([vertical]:not(:empty)){--padding-start:var(--ion-scale-100, 4px);--padding-end:var(--ion-scale-100, 4px);--padding-top:var(--ion-scale-100, 4px);--padding-bottom:var(--ion-scale-100, 4px)}:host(.badge-small:empty){min-width:var(--ion-scale-200, 8px);height:var(--ion-scale-200, 8px)}:host(.badge-medium:empty){min-width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}:host(.badge-large:empty){min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host([vertical].in-tab-button){position:relative}:host([vertical]) ::slotted(ion-icon){top:50%;position:absolute;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host([vertical]) ::slotted(ion-icon){inset-inline-start:50%}:host([vertical]:not(.in-tab-button).in-button.badge-small){inset-inline-end:calc(-1 * var(var(--ion-space-050, 2px)))}:host([vertical]:not(.in-tab-button).in-button.badge-medium),:host([vertical]:not(.in-tab-button).in-button.badge-large){inset-inline-end:var(--ion-space-050, 2px)}:host(:not(:empty).in-button){font-size:var(--ion-font-size-300, 0.75rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-1, 1%);line-height:var(--ion-font-line-height-500, 20px);text-decoration:none;text-transform:none;min-width:var(--ion-scale-400, 16px);height:var(--ion-scale-400, 16px)}:host(:not(:empty).in-button) ::slotted(ion-icon){width:var(--ion-scale-300, 12px);height:var(--ion-scale-300, 12px)}";
|
|
78
78
|
const IonBadgeIonicStyle0 = badgeIonicCss;
|
|
79
79
|
|
|
80
80
|
const badgeIosCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-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);display:inline-block;background:var(--background);color:var(--color);text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}:host([vertical]:not(.in-tab-button)){position:absolute}:host([vertical]:not(.in-tab-button)){inset-inline-end:0}:host(:not(.in-tab-button)[vertical].badge-vertical-top){top:0}:host(:not(.in-tab-button)[vertical].badge-vertical-bottom){bottom:0}:host{--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff);min-width:10px;font-family:var(--ion-font-family, inherit);font-size:0.8125rem;font-weight:bold;line-height:1}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host([vertical]:not(.in-button):not(.in-tab-button)),:host(:empty){--padding-start:0;--padding-end:0;--padding-bottom:0;--padding-top:0;border-radius:999px;width:10px;height:10px;font-size:0.5rem;line-height:10px}:host(:not(:empty).in-button){min-width:16px;height:16px;font-size:0.75rem;line-height:20px}:host(:not(:empty).in-button) ::slotted(ion-icon){width:12px;height:12px}:host{border-radius:10px;font-size:max(13px, 0.8125rem)}:host([vertical].in-tab-button){position:relative;min-width:8px}:host([vertical].in-tab-button) ::slotted(ion-icon){top:50%;position:absolute;width:12px;height:12px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}:host([vertical].in-tab-button) ::slotted(ion-icon){inset-inline-start:50%}";
|
|
@@ -142,7 +142,7 @@ const Badge = class {
|
|
|
142
142
|
const shape = this.getShape();
|
|
143
143
|
const size = this.getSize();
|
|
144
144
|
const theme = getIonTheme(this);
|
|
145
|
-
return (h(Host, { key: '
|
|
145
|
+
return (h(Host, { key: 'f723ed2998c9933299c4bf65b27b20f4a337ae1c', class: createColorClasses(this.color, {
|
|
146
146
|
[theme]: true,
|
|
147
147
|
[`badge-${hue}`]: hue !== undefined,
|
|
148
148
|
[`badge-${shape}`]: shape !== undefined,
|
|
@@ -150,7 +150,7 @@ const Badge = class {
|
|
|
150
150
|
[`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
|
|
151
151
|
'in-button': hostContext('ion-button', this.el),
|
|
152
152
|
'in-tab-button': hostContext('ion-tab-button', this.el),
|
|
153
|
-
}) }, h("slot", { key: '
|
|
153
|
+
}) }, h("slot", { key: '25b75adc30d75ab73523976019fa8a9db3c97972' })));
|
|
154
154
|
}
|
|
155
155
|
get el() { return getElement(this); }
|
|
156
156
|
};
|