@ionic/core 8.5.5-dev.11746028401.1b2f6b8c → 8.5.5-dev.11747137265.184b7749
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/button.js +4 -8
- 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/cjs/ion-button_2.cjs.entry.js +4 -8
- package/dist/collection/components/badge/badge.ionic.css +12 -76
- package/dist/collection/components/badge/badge.js +5 -5
- package/dist/collection/components/button/button.ionic.css +23 -45
- package/dist/collection/components/button/button.js +5 -9
- 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 +8 -28
- package/dist/esm/ion-app_8.entry.js +131 -6
- package/dist/esm/ion-avatar_3.entry.js +3 -3
- package/dist/esm/ion-button_2.entry.js +4 -8
- package/dist/esm-es5/ion-app_8.entry.js +1 -1
- package/dist/esm-es5/ion-avatar_3.entry.js +1 -1
- package/dist/esm-es5/ion-button_2.entry.js +1 -1
- package/dist/html.html-data.json +1 -16
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/p-16fd70b2.entry.js +4 -0
- package/dist/ionic/p-67cded2a.system.entry.js +4 -0
- package/dist/ionic/{p-f3deab52.system.entry.js → p-ad3f30b4.system.entry.js} +1 -1
- package/dist/ionic/p-d6662277.entry.js +4 -0
- 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/button/button.d.ts +2 -2
- package/dist/types/components/toolbar/toolbar.d.ts +16 -0
- package/dist/types/components.d.ts +6 -6
- package/hydrate/index.js +138 -17
- package/hydrate/index.mjs +138 -17
- package/package.json +1 -1
- package/dist/ionic/p-246e6dc5.entry.js +0 -4
- package/dist/ionic/p-350e4850.system.entry.js +0 -4
- package/dist/ionic/p-f10dba92.entry.js +0 -4
|
@@ -1162,7 +1162,7 @@ const RouterOutlet = class {
|
|
|
1162
1162
|
};
|
|
1163
1163
|
RouterOutlet.style = IonRouterOutletStyle0;
|
|
1164
1164
|
|
|
1165
|
-
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
|
|
1165
|
+
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}";
|
|
1166
1166
|
const IonTitleIonicStyle0 = titleIonicCss;
|
|
1167
1167
|
|
|
1168
1168
|
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)}}";
|
|
@@ -1213,7 +1213,7 @@ ToolbarTitle.style = {
|
|
|
1213
1213
|
md: IonTitleMdStyle0
|
|
1214
1214
|
};
|
|
1215
1215
|
|
|
1216
|
-
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:
|
|
1216
|
+
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)}";
|
|
1217
1217
|
const IonToolbarIonicStyle0 = toolbarIonicCss;
|
|
1218
1218
|
|
|
1219
1219
|
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%}";
|
|
@@ -1243,6 +1243,131 @@ const Toolbar = class {
|
|
|
1243
1243
|
if (lastButtons) {
|
|
1244
1244
|
lastButtons.classList.add('buttons-last-slot');
|
|
1245
1245
|
}
|
|
1246
|
+
this.updateSlotClasses();
|
|
1247
|
+
}
|
|
1248
|
+
componentDidLoad() {
|
|
1249
|
+
this.updateSlotClasses();
|
|
1250
|
+
this.updateSlotWidths();
|
|
1251
|
+
}
|
|
1252
|
+
/**
|
|
1253
|
+
* Updates the CSS custom properties for slot widths
|
|
1254
|
+
* This ensures that slots shown by their met conditions
|
|
1255
|
+
* have a minimum width matching their required slot
|
|
1256
|
+
*/
|
|
1257
|
+
updateSlotWidths(tries = 0) {
|
|
1258
|
+
// Set timeout to try to execute after everything is rendered
|
|
1259
|
+
setTimeout(() => {
|
|
1260
|
+
// Attempt to measure and update
|
|
1261
|
+
const success = this.measureAndUpdateSlots();
|
|
1262
|
+
// If not all measurements were successful, try again in 100 ms
|
|
1263
|
+
// cap recursion at 5 tries for safety
|
|
1264
|
+
if (!success && tries < 5) {
|
|
1265
|
+
setTimeout(() => {
|
|
1266
|
+
this.updateSlotWidths(tries + 1);
|
|
1267
|
+
}, 100);
|
|
1268
|
+
}
|
|
1269
|
+
});
|
|
1270
|
+
}
|
|
1271
|
+
/**
|
|
1272
|
+
* Measure the widths of the slots and update the CSS custom properties
|
|
1273
|
+
* for the minimum width of each pair of slots based on the largest width in each pair.
|
|
1274
|
+
* Returns whether we successfully measured all of the slots we expect to have content.
|
|
1275
|
+
* If not, the content probably hasn't rendered yet and we need to try again.
|
|
1276
|
+
*/
|
|
1277
|
+
measureAndUpdateSlots() {
|
|
1278
|
+
// Define the relationship between slots based on the conditions array
|
|
1279
|
+
// Group slots that should have the same width
|
|
1280
|
+
const slotPairs = [
|
|
1281
|
+
{ name: 'start-end', slots: ['start', 'end'] },
|
|
1282
|
+
{ name: 'primary-secondary', slots: ['primary', 'secondary'] },
|
|
1283
|
+
];
|
|
1284
|
+
// First, measure all slot widths
|
|
1285
|
+
const slotWidths = new Map();
|
|
1286
|
+
let allMeasurementsSuccessful = true;
|
|
1287
|
+
// Measure all slots with content
|
|
1288
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
1289
|
+
slots.forEach((slot) => {
|
|
1290
|
+
var _a;
|
|
1291
|
+
if (this.el.classList.contains(`has-${slot}-content`)) {
|
|
1292
|
+
const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
|
|
1293
|
+
if (slotElement) {
|
|
1294
|
+
const width = slotElement.offsetWidth;
|
|
1295
|
+
if (width > 0) {
|
|
1296
|
+
slotWidths.set(slot, width);
|
|
1297
|
+
}
|
|
1298
|
+
else {
|
|
1299
|
+
allMeasurementsSuccessful = false;
|
|
1300
|
+
}
|
|
1301
|
+
}
|
|
1302
|
+
}
|
|
1303
|
+
});
|
|
1304
|
+
// Then set the CSS custom properties based on the largest width in each pair
|
|
1305
|
+
slotPairs.forEach(({ name, slots }) => {
|
|
1306
|
+
// Find the maximum width among the slots in this pair
|
|
1307
|
+
let maxWidth = 0;
|
|
1308
|
+
let hasAnyContent = false;
|
|
1309
|
+
slots.forEach((slot) => {
|
|
1310
|
+
var _a;
|
|
1311
|
+
if (slotWidths.has(slot)) {
|
|
1312
|
+
hasAnyContent = true;
|
|
1313
|
+
maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
|
|
1314
|
+
}
|
|
1315
|
+
});
|
|
1316
|
+
// If at least one slot in the pair has content, set the min-width for the pair
|
|
1317
|
+
if (hasAnyContent && maxWidth > 0) {
|
|
1318
|
+
// Set a single CSS variable for the pair
|
|
1319
|
+
this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
|
|
1320
|
+
}
|
|
1321
|
+
});
|
|
1322
|
+
return allMeasurementsSuccessful;
|
|
1323
|
+
}
|
|
1324
|
+
updateSlotClasses() {
|
|
1325
|
+
// Check if slots have content
|
|
1326
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
1327
|
+
const classesToAdd = [];
|
|
1328
|
+
const classesToRemove = [];
|
|
1329
|
+
slots.forEach((slot) => {
|
|
1330
|
+
const slotHasContent = this.hasSlotContent(slot);
|
|
1331
|
+
const slotClass = `has-${slot}-content`;
|
|
1332
|
+
if (slotHasContent) {
|
|
1333
|
+
classesToAdd.push(slotClass);
|
|
1334
|
+
}
|
|
1335
|
+
else {
|
|
1336
|
+
classesToRemove.push(slotClass);
|
|
1337
|
+
}
|
|
1338
|
+
});
|
|
1339
|
+
// Force visibilities in certain conditions. This works by adding a class to the toolbar
|
|
1340
|
+
// named `show-{slot}`. This class will be added if the toolbar has the required slots
|
|
1341
|
+
// and does not have any of the excluded slots, otherwise it will be removed.
|
|
1342
|
+
// This is useful to enforce centering of the toolbar content when there are different amounts
|
|
1343
|
+
// of slots on either side of the toolbar.
|
|
1344
|
+
const conditions = [
|
|
1345
|
+
{ name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
|
|
1346
|
+
{ name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
|
|
1347
|
+
{ name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
|
|
1348
|
+
{ name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
|
|
1349
|
+
];
|
|
1350
|
+
conditions.forEach((condition) => {
|
|
1351
|
+
const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
1352
|
+
const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
1353
|
+
const className = `show-${condition.name}`;
|
|
1354
|
+
if (hasRequiredSlots && !hasExcludedSlots) {
|
|
1355
|
+
classesToAdd.push(className);
|
|
1356
|
+
}
|
|
1357
|
+
else {
|
|
1358
|
+
classesToRemove.push(className);
|
|
1359
|
+
}
|
|
1360
|
+
});
|
|
1361
|
+
// Add classes to the toolbar element
|
|
1362
|
+
this.el.classList.add(...classesToAdd);
|
|
1363
|
+
this.el.classList.remove(...classesToRemove);
|
|
1364
|
+
// Update slot widths after classes have been updated
|
|
1365
|
+
this.updateSlotWidths();
|
|
1366
|
+
}
|
|
1367
|
+
hasSlotContent(slotName) {
|
|
1368
|
+
var _a;
|
|
1369
|
+
const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
|
|
1370
|
+
return !!slotNode && slotNode.assignedNodes().length > 0;
|
|
1246
1371
|
}
|
|
1247
1372
|
childrenStyle(ev) {
|
|
1248
1373
|
ev.stopPropagation();
|
|
@@ -1269,13 +1394,13 @@ const Toolbar = class {
|
|
|
1269
1394
|
render() {
|
|
1270
1395
|
const theme$1 = ionicGlobal.getIonTheme(this);
|
|
1271
1396
|
const childStyles = {};
|
|
1272
|
-
this.childrenStyles.forEach((
|
|
1273
|
-
Object.assign(childStyles,
|
|
1397
|
+
this.childrenStyles.forEach((style) => {
|
|
1398
|
+
Object.assign(childStyles, style);
|
|
1274
1399
|
});
|
|
1275
|
-
return (index.h(index.Host, { key: '
|
|
1400
|
+
return (index.h(index.Host, { key: '9cf12f7133f19ef24ec4818e5334850b7315b602', class: Object.assign(Object.assign({}, theme.createColorClasses(this.color, {
|
|
1276
1401
|
[theme$1]: true,
|
|
1277
1402
|
'in-toolbar': theme.hostContext('ion-toolbar', this.el),
|
|
1278
|
-
})) }, index.h("div", { key: '
|
|
1403
|
+
})), childStyles) }, index.h("div", { key: 'ba137a3b6cc68902ec93b469968885de6746a7e6', class: "toolbar-background", part: "background" }), index.h("div", { key: 'd3a278f4d7e50a1b3c93a8e9412df81e6e6387bc', class: "toolbar-container", part: "container" }, index.h("slot", { key: '7ac00536a8fe5ecbf695d21a51f62079ff0262e0', name: "start", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: 'f641e8b71125023f7dd71f4080c6b37ef33f9639', name: "secondary", onSlotchange: () => this.updateSlotClasses }), index.h("div", { key: 'a785319051166ac161069df114387ccc3e499822', class: "toolbar-content", part: "content" }, index.h("slot", { key: '4930bfc6a5425f923f4f23c27f9312d506463b0c' })), index.h("slot", { key: 'd0e78019181ff220bfb54110bdbe0d12be330374', name: "primary", onSlotchange: () => this.updateSlotClasses }), index.h("slot", { key: '5c4a39a0764001ca90e96ccb9a9b7eba158fe5e6', name: "end", onSlotchange: () => this.updateSlotClasses }))));
|
|
1279
1404
|
}
|
|
1280
1405
|
get el() { return index.getElement(this); }
|
|
1281
1406
|
};
|
|
@@ -78,7 +78,7 @@ Avatar.style = {
|
|
|
78
78
|
md: IonAvatarMdStyle0
|
|
79
79
|
};
|
|
80
80
|
|
|
81
|
-
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-
|
|
81
|
+
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)}";
|
|
82
82
|
const IonBadgeIonicStyle0 = badgeIonicCss;
|
|
83
83
|
|
|
84
84
|
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%}";
|
|
@@ -146,7 +146,7 @@ const Badge = class {
|
|
|
146
146
|
const shape = this.getShape();
|
|
147
147
|
const size = this.getSize();
|
|
148
148
|
const theme$1 = ionicGlobal.getIonTheme(this);
|
|
149
|
-
return (index.h(index.Host, { key: '
|
|
149
|
+
return (index.h(index.Host, { key: 'f723ed2998c9933299c4bf65b27b20f4a337ae1c', class: theme.createColorClasses(this.color, {
|
|
150
150
|
[theme$1]: true,
|
|
151
151
|
[`badge-${hue}`]: hue !== undefined,
|
|
152
152
|
[`badge-${shape}`]: shape !== undefined,
|
|
@@ -154,7 +154,7 @@ const Badge = class {
|
|
|
154
154
|
[`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
|
|
155
155
|
'in-button': theme.hostContext('ion-button', this.el),
|
|
156
156
|
'in-tab-button': theme.hostContext('ion-tab-button', this.el),
|
|
157
|
-
}) }, index.h("slot", { key: '
|
|
157
|
+
}) }, index.h("slot", { key: '25b75adc30d75ab73523976019fa8a9db3c97972' })));
|
|
158
158
|
}
|
|
159
159
|
get el() { return index.getElement(this); }
|
|
160
160
|
};
|
|
@@ -144,7 +144,7 @@ const isRTL = (hostEl) => {
|
|
|
144
144
|
return (document === null || document === void 0 ? void 0 : document.dir.toLowerCase()) === 'rtl';
|
|
145
145
|
};
|
|
146
146
|
|
|
147
|
-
const buttonIonicCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-outline){--background:transparent}:host(.button-clear){--border-width:0;--background:transparent}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon),::slotted(ion-spinner){pointer-events:none}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-foreground)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}.button-native ion-ripple-effect,.button-native::after{border-radius:inherit}:has(ion-badge) .button-native{--overflow:visible}:host(:has(ion-badge)) .button-native{--overflow:visible}:host ::slotted(ion-badge[vertical]:not(:empty)){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host{--padding-bottom:var(--padding-top);--padding-end:var(--ion-space-500, 20px);--padding-start:var(--padding-end);--padding-top:var(--ion-space-0, 0px);--focus-ring-color:var(--ion-border-focus-default, #b5c0f7);--focus-ring-width:var(--ion-border-size-050, 2px);position:relative;min-height:var(--ion-scale-1000, 40px);font-family:var(--ion-font-family, \"Inter\", sans-serif);font-size:var(--ion-font-size-350, 0.875rem)}:host::after{right:0;left:0;top:50%;position:absolute;height:100%;min-height:var(--ion-scale-1200, 48px);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:\"\";cursor:pointer;z-index:1}:host(.button-clear){--color:var(--ion-color-primary-foreground, var(--ion-text-primary, #0d4bc3))}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, #0d4bc3));--background-hover:var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, #0d4bc3));--background-focused:transparent;--background-hover-opacity:1;--background:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--color:var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff));--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-outline){--border-width:var(--ion-border-size-025, 1px);--border-style:var(--ion-border-style-solid, solid);--background-activated:var(--ion-bg-neutral-subtlest-press, #efefef);--background-focused:transparent;--background-hover:var(--ion-bg-neutral-subtlest-press, #efefef);--background-hover-opacity:1;--border-color:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--color:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-clear){--background-activated:var(--ion-bg-neutral-subtlest-press, #efefef);--background-focused:transparent;--background-hover:var(--ion-bg-neutral-subtlest-press, #efefef);--background-hover-opacity:1;--color:var(--ion-color-primary-foreground, var(--ion-text-primary, #0d4bc3));--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-solid.ion-color) ion-ripple-effect{color:var(--ion-color-shade)}:host(.button-outline.ion-color) ion-ripple-effect,:host(.button-clear.ion-color) ion-ripple-effect{color:var(--ion-primitives-neutral-200, #efefef)}:host(.button-xsmall){--padding-top:var(--ion-space-100, 4px);--padding-end:var(--ion-space-300, 12px);min-height:var(--ion-space-600, 24px);font-size:var(--ion-font-size-300, 0.75rem)}:host(.button-small){--padding-top:var(--ion-space-200, 8px);--padding-end:var(--ion-space-400, 16px);min-height:var(--ion-scale-800, 32px);font-size:var(--ion-font-size-300, 0.75rem)}:host(.button-large){--padding-top:var(--ion-space-400, 16px);--padding-end:var(--ion-space-600, 24px);min-height:var(--ion-scale-1200, 48px);font-size:var(--ion-font-size-400, 1rem)}:host(.button-xlarge){--padding-top:var(--ion-space-400, 16px);--padding-end:var(--ion-space-800, 32px);min-height:var(--ion-scale-1400, 56px);font-size:var(--ion-font-size-500, 1.25rem)}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]),::slotted(ion-icon[slot=icon-only]){font-size:var(--ion-font-size-400, 1rem)}:host(.button-xsmall) ::slotted(ion-icon[slot=start]),:host(.button-xsmall) ::slotted(ion-icon[slot=end]),:host(.button-xsmall) ::slotted(ion-icon[slot=icon-only]),:host(.button-small) ::slotted(ion-icon[slot=start]),:host(.button-small) ::slotted(ion-icon[slot=end]),:host(.button-small) ::slotted(ion-icon[slot=icon-only]),:host(.button-large) ::slotted(ion-icon[slot=start]),:host(.button-large) ::slotted(ion-icon[slot=end]),:host(.button-large) ::slotted(ion-icon[slot=icon-only]),:host(.button-xlarge) ::slotted(ion-icon[slot=start]),:host(.button-xlarge) ::slotted(ion-icon[slot=end]),:host(.button-xlarge) ::slotted(ion-icon[slot=icon-only]){font-size:inherit}:host(.button-has-icon-only){--padding-end:var(--padding-top);aspect-ratio:1/1}::slotted(ion-spinner){--color:currentColor}::slotted(ion-spinner[slot=start]),::slotted(ion-spinner[slot=end]),::slotted(ion-spinner[slot=icon-only]){width:var(--ion-space-500, 20px);height:var(--ion-space-500, 20px)}:host(.button-xlarge) ::slotted(ion-spinner){width:var(--ion-space-600, 24px);height:var(--ion-space-600, 24px)}:host(.button-soft){--border-radius:var(--ion-border-radius-200, 8px)}:host(.button-soft.button-xsmall),:host(.button-soft.button-small){--border-radius:var(--ion-border-radius-100, 4px)}:host(.button-round){--border-radius:var(--ion-border-radius-full, 999px)}:host(.button-rectangular){--border-radius:var(--ion-border-radius-0, 0px)}:host(.ion-focused) .button-native{outline:var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--ion-border-size-050, 2px)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.ion-activated) .button-native:has(ion-ripple-effect)::after,:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after{background:transparent}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-shade)}}:host(.button-disabled) .button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none;width:inherit;height:inherit}::slotted(ion-icon){font-size:var(--ion-font-size-500, 1.25rem)}:host(.button-xsmall) ::slotted(ion-icon[slot=start]),:host(.button-xsmall) ::slotted(ion-spinner[slot=start]),:host(.button-small) ::slotted(ion-icon[slot=start]),:host(.button-small) ::slotted(ion-spinner[slot=start]){-webkit-margin-end:var(--ion-space-200, 8px);margin-inline-end:var(--ion-space-200, 8px)}::slotted(ion-icon[slot=start]),::slotted(ion-spinner[slot=start]){-webkit-margin-end:var(--ion-space-250, 10px);margin-inline-end:var(--ion-space-250, 10px)}:host(.button-large) ::slotted(ion-icon[slot=start]),:host(.button-large) ::slotted(ion-spinner[slot=start]),:host(.button-xlarge) ::slotted(ion-icon[slot=start]),:host(.button-xlarge) ::slotted(ion-spinner[slot=start]){-webkit-margin-end:var(--ion-space-300, 12px);margin-inline-end:var(--ion-space-300, 12px)}:host(.button-xsmall) ::slotted(ion-icon[slot=end]),:host(.button-xsmall) ::slotted(ion-spinner[slot=end]),:host(.button-small) ::slotted(ion-icon[slot=end]),:host(.button-small) ::slotted(ion-spinner[slot=end]){-webkit-margin-start:var(--ion-space-200, 8px);margin-inline-start:var(--ion-space-200, 8px)}::slotted(ion-icon[slot=end]),::slotted(ion-spinner[slot=end]){-webkit-margin-start:var(--ion-space-250, 10px);margin-inline-start:var(--ion-space-250, 10px)}:host(.button-large) ::slotted(ion-icon[slot=end]),:host(.button-large) ::slotted(ion-spinner[slot=end]),:host(.button-xlarge) ::slotted(ion-icon[slot=end]),:host(.button-xlarge) ::slotted(ion-spinner[slot=end]){-webkit-margin-start:var(--ion-space-300, 12px);margin-inline-start:var(--ion-space-300, 12px)}:host ::slotted(ion-badge[vertical]:not(:empty)){-webkit-padding-start:var(--ion-space-050, 2px);padding-inline-start:var(--ion-space-050, 2px);-webkit-padding-end:var(--ion-space-050, 2px);padding-inline-end:var(--ion-space-050, 2px);padding-top:var(--ion-space-050, 2px);padding-bottom:var(--ion-space-050, 2px)}";
|
|
147
|
+
const buttonIonicCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-outline){--background:transparent}:host(.button-clear){--border-width:0;--background:transparent}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon),::slotted(ion-spinner){pointer-events:none}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-foreground)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}.button-native ion-ripple-effect,.button-native::after{border-radius:inherit}:has(ion-badge) .button-native{--overflow:visible}:host(:has(ion-badge)) .button-native{--overflow:visible}:host ::slotted(ion-badge[vertical]:not(:empty)){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host{--padding-bottom:var(--padding-top);--padding-end:var(--ion-space-500, 20px);--padding-start:var(--padding-end);--padding-top:var(--ion-space-0, 0px);--focus-ring-color:var(--ion-border-focus-default, #b5c0f7);--focus-ring-width:var(--ion-border-size-050, 2px);font-size:var(--ion-font-size-400, 1rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-1, 1%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none;position:relative;min-height:var(--ion-scale-1200, 48px)}:host::after{right:0;left:0;top:50%;position:absolute;height:100%;min-height:var(--ion-scale-1200, 48px);-webkit-transform:translateY(-50%);transform:translateY(-50%);content:\"\";cursor:pointer;z-index:1}:host(.button-clear){--color:var(--ion-color-primary-foreground, var(--ion-text-primary, #0d4bc3))}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, #0d4bc3));--background-hover:var(--ion-color-primary-shade, var(--ion-bg-primary-base-press, #0d4bc3));--background-focused:transparent;--background-hover-opacity:1;--background:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--color:var(--ion-color-primary-contrast, var(--ion-text-inverse, #ffffff));--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-outline){--border-width:var(--ion-border-size-025, 1px);--border-style:var(--ion-border-style-solid, solid);--background-activated:var(--ion-bg-neutral-subtlest-press, #efefef);--background-focused:transparent;--background-hover:var(--ion-bg-neutral-subtlest-press, #efefef);--background-hover-opacity:1;--border-color:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--color:var(--ion-color-primary, var(--ion-bg-primary-base-default, #105cef));--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-clear){--background-activated:var(--ion-bg-neutral-subtlest-press, #efefef);--background-focused:transparent;--background-hover:var(--ion-bg-neutral-subtlest-press, #efefef);--background-hover-opacity:1;--color:var(--ion-color-primary-foreground, var(--ion-text-primary, #0d4bc3));--ripple-opacity:var(--background-activated-opacity, 1);--ripple-color:var(--background-activated)}:host(.button-solid.ion-color) ion-ripple-effect{color:var(--ion-color-shade)}:host(.button-outline.ion-color) ion-ripple-effect,:host(.button-clear.ion-color) ion-ripple-effect{color:var(--ion-primitives-neutral-200, #efefef)}:host(.button-small){--padding-top:var(--ion-space-200, 8px);--padding-end:var(--ion-space-400, 16px);font-size:var(--ion-font-size-350, 0.875rem);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-height:var(--ion-scale-1000, 40px)}:host(.button-large){--padding-top:var(--ion-space-400, 16px);--padding-end:var(--ion-space-600, 24px);font-size:var(--ion-font-size-500, 1.25rem);font-weight:var(--ion-font-weight-medium, 500);letter-spacing:var(--ion-font-letter-spacing-1, 1%);line-height:var(--ion-font-line-height-600, 24px);text-decoration:none;text-transform:none;min-height:var(--ion-scale-1400, 56px)}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]),::slotted(ion-icon[slot=icon-only]){font-size:var(--ion-font-size-400, 1rem)}:host(.button-small) ::slotted(ion-icon[slot=start]),:host(.button-small) ::slotted(ion-icon[slot=end]),:host(.button-small) ::slotted(ion-icon[slot=icon-only]),:host(.button-large) ::slotted(ion-icon[slot=start]),:host(.button-large) ::slotted(ion-icon[slot=end]),:host(.button-large) ::slotted(ion-icon[slot=icon-only]){font-size:inherit}:host(.button-has-icon-only){--padding-end:var(--padding-top);aspect-ratio:1/1}::slotted(ion-spinner){--color:currentColor}::slotted(ion-spinner[slot=start]),::slotted(ion-spinner[slot=end]),::slotted(ion-spinner[slot=icon-only]){width:var(--ion-space-500, 20px);height:var(--ion-space-500, 20px)}:host(.button-soft){--border-radius:var(--ion-border-radius-200, 8px)}:host(.button-soft.button-small){--border-radius:var(--ion-border-radius-100, 4px)}:host(.button-round){--border-radius:var(--ion-border-radius-full, 999px)}:host(.button-rectangular){--border-radius:var(--ion-border-radius-0, 0px)}:host(.ion-focused) .button-native{outline:var(--focus-ring-width) var(--ion-border-style-solid, solid) var(--focus-ring-color);outline-offset:var(--ion-border-size-050, 2px)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.ion-activated) .button-native:has(ion-ripple-effect)::after,:host(.button-solid.ion-color.ion-activated) .button-native:has(ion-ripple-effect)::after{background:transparent}@media (any-hover: hover){:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-shade)}}:host(.button-disabled) .button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--ion-state-disabled, rgba(255, 255, 255, 0.6));content:\"\";pointer-events:none;width:inherit;height:inherit}::slotted(ion-icon){font-size:var(--ion-font-size-500, 1.25rem)}:host(.button-small) ::slotted(ion-icon[slot=start]),:host(.button-small) ::slotted(ion-spinner[slot=start]){-webkit-margin-end:var(--ion-space-200, 8px);margin-inline-end:var(--ion-space-200, 8px)}::slotted(ion-icon[slot=start]),::slotted(ion-spinner[slot=start]){-webkit-margin-end:var(--ion-space-250, 10px);margin-inline-end:var(--ion-space-250, 10px)}:host(.button-large) ::slotted(ion-icon[slot=start]),:host(.button-large) ::slotted(ion-spinner[slot=start]){-webkit-margin-end:var(--ion-space-300, 12px);margin-inline-end:var(--ion-space-300, 12px)}:host(.button-small) ::slotted(ion-icon[slot=end]),:host(.button-small) ::slotted(ion-spinner[slot=end]){-webkit-margin-start:var(--ion-space-200, 8px);margin-inline-start:var(--ion-space-200, 8px)}::slotted(ion-icon[slot=end]),::slotted(ion-spinner[slot=end]){-webkit-margin-start:var(--ion-space-250, 10px);margin-inline-start:var(--ion-space-250, 10px)}:host(.button-large) ::slotted(ion-icon[slot=end]),:host(.button-large) ::slotted(ion-spinner[slot=end]){-webkit-margin-start:var(--ion-space-300, 12px);margin-inline-start:var(--ion-space-300, 12px)}:host ::slotted(ion-badge[vertical]:not(:empty)){-webkit-padding-start:var(--ion-space-050, 2px);padding-inline-start:var(--ion-space-050, 2px);-webkit-padding-end:var(--ion-space-050, 2px);padding-inline-end:var(--ion-space-050, 2px);padding-top:var(--ion-space-050, 2px);padding-bottom:var(--ion-space-050, 2px)}";
|
|
148
148
|
const IonButtonIonicStyle0 = buttonIonicCss;
|
|
149
149
|
|
|
150
150
|
const buttonIosCss = ":host{--overflow:hidden;--ripple-color:currentColor;--border-width:initial;--border-color:initial;--border-style:initial;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--box-shadow:none;display:inline-block;width:auto;color:var(--color);text-align:center;text-decoration:none;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;vertical-align:-webkit-baseline-middle;-webkit-font-kerning:none;font-kerning:none}:host(.button-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.button-outline){--background:transparent}:host(.button-clear){--border-width:0;--background:transparent}:host(.button-block){display:block}:host(.button-block) .button-native{margin-left:0;margin-right:0;width:100%;clear:both;contain:content}:host(.button-block) .button-native::after{clear:both}:host(.button-full){display:block}:host(.button-full) .button-native{margin-left:0;margin-right:0;width:100%;contain:content}:host(.button-full:not(.button-round)) .button-native{border-radius:0;border-right-width:0;border-left-width:0}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;-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);color:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-align:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;white-space:inherit;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%;height:100%;min-height:inherit;-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);line-height:1;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:layout style;cursor:pointer;opacity:var(--opacity);overflow:var(--overflow);z-index:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-native::-moz-focus-inner{border:0}.button-inner{display:-ms-flexbox;display:flex;position:relative;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;height:100%;z-index:1}::slotted([slot=start]),::slotted([slot=end]){-ms-flex-negative:0;flex-shrink:0}::slotted(ion-icon),::slotted(ion-spinner){pointer-events:none}ion-ripple-effect{color:var(--ripple-color)}.button-native::after{right:0;left:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}@media (any-hover: hover){:host(:hover){color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-activated){color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.button-solid.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.button-outline.ion-color) .button-native{border-color:var(--ion-color-base);background:transparent;color:var(--ion-color-base)}:host(.button-clear.ion-color) .button-native{background:transparent;color:var(--ion-color-foreground)}:host(.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{color:var(--ion-toolbar-color, var(--color))}:host(.button-outline.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{border-color:var(--ion-toolbar-color, var(--color, var(--border-color)))}:host(.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--background));color:var(--ion-toolbar-background, var(--color))}.button-native ion-ripple-effect,.button-native::after{border-radius:inherit}:has(ion-badge) .button-native{--overflow:visible}:host(:has(ion-badge)) .button-native{--overflow:visible}:host ::slotted(ion-badge[vertical]:not(:empty)){display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}:host{font-family:var(--ion-font-family, inherit)}:host(.button-solid){--background:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary-contrast, #fff)}:host(.button-outline){--border-color:var(--ion-color-primary, #0054e9);--color:var(--ion-color-primary, #0054e9)}:host(.button-clear){--color:var(--ion-color-primary, #0054e9)}::slotted(ion-icon){font-size:1.35em}::slotted(ion-icon[slot=start]){-webkit-margin-start:-0.3em;margin-inline-start:-0.3em;-webkit-margin-end:0.3em;margin-inline-end:0.3em;margin-top:0;margin-bottom:0}::slotted(ion-icon[slot=end]){-webkit-margin-start:0.3em;margin-inline-start:0.3em;-webkit-margin-end:-0.2em;margin-inline-end:-0.2em;margin-top:0;margin-bottom:0}.button-native ::slotted(ion-badge){position:fixed}:host ::slotted(ion-badge[vertical]:not(:empty)){-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px;padding-top:2px;padding-bottom:2px}:host{--padding-top:13px;--padding-bottom:13px;--padding-start:1em;--padding-end:1em;--transition:background-color, opacity 100ms linear;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px;margin-top:4px;margin-bottom:4px;min-height:3.1em;font-size:min(1rem, 48px);font-weight:500;letter-spacing:0}:host(.button-solid){--background-activated:var(--ion-color-primary-shade, #004acd);--background-focused:var(--ion-color-primary-shade, #004acd);--background-hover:var(--ion-color-primary-tint, #1a65eb);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1}:host(.button-outline){--border-width:1px;--border-style:solid;--background-activated:var(--ion-color-primary, #0054e9);--background-focused:var(--ion-color-primary, #0054e9);--background-hover:transparent;--background-focused-opacity:0.1;--color-activated:var(--ion-color-primary-contrast, #fff)}:host(.button-clear){--background-activated:transparent;--background-activated-opacity:0;--background-focused:var(--ion-color-primary, #0054e9);--background-hover:transparent;--background-focused-opacity:0.1;font-size:min(1.0625rem, 51px);font-weight:normal}:host(.in-buttons){font-size:clamp(17px, 1.0625rem, 21.08px);font-weight:400}:host(.button-large){--padding-top:17px;--padding-start:1em;--padding-end:1em;--padding-bottom:17px;min-height:3.1em;font-size:min(1.25rem, 60px)}:host(.button-small){--padding-top:4px;--padding-start:0.9em;--padding-end:0.9em;--padding-bottom:4px;min-height:2.1em;font-size:min(0.8125rem, 39px)}:host(.button-soft){--border-radius:6px}:host(.button-soft.button-large){--border-radius:8px}:host(.button-soft.button-small){--border-radius:4px}:host(.button-round){--border-radius:999px}:host(.button-rectangular){--border-radius:0px}:host(.button-strong){font-weight:600}:host(.button-has-icon-only){--padding-top:0;--padding-bottom:var(--padding-top);--padding-end:var(--padding-top);--padding-start:var(--padding-end);min-width:clamp(30px, 2.125em, 60px);min-height:clamp(30px, 2.125em, 60px)}::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.12px, 1.125em, 43.02px)}:host(.button-small.button-has-icon-only){min-width:clamp(23px, 2.16em, 54px);min-height:clamp(23px, 2.16em, 54px)}:host(.button-small) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(12.1394px, 1.308125em, 40.1856px)}:host(.button-large.button-has-icon-only){min-width:clamp(46px, 2.5em, 78px);min-height:clamp(46px, 2.5em, 78px)}:host(.button-large) ::slotted(ion-icon[slot=icon-only]){font-size:clamp(15.12px, 0.9em, 43.056px)}:host(.button-outline.ion-focused.ion-color) .button-native,:host(.button-clear.ion-focused.ion-color) .button-native{color:var(--ion-color-base)}:host(.button-outline.ion-focused.ion-color) .button-native::after,:host(.button-clear.ion-focused.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.button-clear:not(.ion-activated):hover),:host(.button-outline:not(.ion-activated):hover){opacity:0.6}:host(.button-clear.ion-color:hover) .button-native,:host(.button-outline.ion-color:hover) .button-native{color:var(--ion-color-base)}:host(.button-clear.ion-color:hover) .button-native::after,:host(.button-outline.ion-color:hover) .button-native::after{background:transparent}:host(.button-solid.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}:host(:hover.button-solid.in-toolbar:not(.ion-color):not(.in-toolbar-color):not(.ion-activated)) .button-native::after{background:#fff;opacity:0.1}}:host(.button-clear.ion-activated){opacity:0.4}:host(.button-outline.ion-activated.ion-color) .button-native{color:var(--ion-color-contrast)}:host(.button-outline.ion-activated.ion-color) .button-native::after{background:var(--ion-color-base)}:host(.button-solid.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native{background:var(--ion-toolbar-color, var(--color));color:var(--ion-toolbar-background, var(--background), var(--ion-color-primary-contrast, #fff))}";
|
|
@@ -273,17 +273,13 @@ const Button = class {
|
|
|
273
273
|
return shape;
|
|
274
274
|
}
|
|
275
275
|
/**
|
|
276
|
-
*
|
|
276
|
+
* Set the size based if the button is inside of an item, the default size is "small"
|
|
277
277
|
*/
|
|
278
278
|
getSize() {
|
|
279
|
-
const theme = ionicGlobal.getIonTheme(this);
|
|
280
279
|
const { size } = this;
|
|
281
280
|
if (size === undefined && this.inItem) {
|
|
282
281
|
return 'small';
|
|
283
282
|
}
|
|
284
|
-
if ((theme === 'ios' || theme === 'md') && (size === 'xsmall' || size === 'xlarge')) {
|
|
285
|
-
return undefined;
|
|
286
|
-
}
|
|
287
283
|
return size;
|
|
288
284
|
}
|
|
289
285
|
/**
|
|
@@ -378,7 +374,7 @@ const Button = class {
|
|
|
378
374
|
{
|
|
379
375
|
type !== 'button' && this.renderHiddenButton();
|
|
380
376
|
}
|
|
381
|
-
return (index.h(index.Host, { key: '
|
|
377
|
+
return (index.h(index.Host, { key: '0bf1e71eaa0c83463f8e3fff957e2c0075118682', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: theme.createColorClasses(color, {
|
|
382
378
|
[theme$1]: true,
|
|
383
379
|
[buttonType]: true,
|
|
384
380
|
[`${buttonType}-${expand}`]: expand !== undefined,
|
|
@@ -393,7 +389,7 @@ const Button = class {
|
|
|
393
389
|
'button-disabled': disabled,
|
|
394
390
|
'ion-activatable': true,
|
|
395
391
|
'ion-focusable': true,
|
|
396
|
-
}) }, index.h(TagType, Object.assign({ key: '
|
|
392
|
+
}) }, index.h(TagType, Object.assign({ key: 'e1604d905028ce0f27d4e6f85561f584571a56c8' }, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), index.h("span", { key: '8b214709be527a06060466bc975f2d9a86ca41a4', class: "button-inner" }, index.h("slot", { key: '5da7b52ab234de43493c0bcda7631681368a30b8', name: "icon-only", onSlotchange: this.slotChanged }), index.h("slot", { key: 'ef9edc0381cf2255f99437678d350e178f516850', name: "start" }), index.h("slot", { key: '1b45c07d88aa1a91af63570bf533e607c61edb00' }), index.h("slot", { key: '1c3bcba3c81ee9a97d5ee5c888b19e9bdcd4ba75', name: "end" })), mode === 'md' && index.h("ion-ripple-effect", { key: 'c225e2919d973775d1e1c2434a3660cb01fce42c', type: this.rippleType }))));
|
|
397
393
|
}
|
|
398
394
|
get el() { return index.getElement(this); }
|
|
399
395
|
static get watchers() { return {
|
|
@@ -167,8 +167,6 @@ Do not edit directly, this file was auto-generated.
|
|
|
167
167
|
border-radius: var(--ion-border-radius-200, 8px);
|
|
168
168
|
}
|
|
169
169
|
|
|
170
|
-
:host(.badge-xxsmall.badge-soft),
|
|
171
|
-
:host(.badge-xsmall.badge-soft),
|
|
172
170
|
:host(.badge-small.badge-soft) {
|
|
173
171
|
border-radius: var(--ion-border-radius-100, 4px);
|
|
174
172
|
}
|
|
@@ -183,98 +181,39 @@ Do not edit directly, this file was auto-generated.
|
|
|
183
181
|
border-radius: var(--ion-border-radius-0, 0px);
|
|
184
182
|
}
|
|
185
183
|
|
|
186
|
-
/*
|
|
187
|
-
:host(.badge-
|
|
184
|
+
/* Small Badge */
|
|
185
|
+
:host(.badge-small) {
|
|
188
186
|
--padding-start: var(--ion-space-050, 2px);
|
|
189
187
|
--padding-end: var(--ion-space-050, 2px);
|
|
190
188
|
min-width: var(--ion-scale-400, 16px);
|
|
191
189
|
height: var(--ion-scale-400, 16px);
|
|
192
|
-
font-size: var(--ion-font-size-300, 0.75rem);
|
|
193
|
-
line-height: var(--ion-font-line-height-400, 16px);
|
|
194
190
|
}
|
|
195
191
|
|
|
196
|
-
:host(.badge-
|
|
192
|
+
:host(.badge-small) ::slotted(ion-icon) {
|
|
197
193
|
width: var(--ion-scale-300, 12px);
|
|
198
194
|
height: var(--ion-scale-300, 12px);
|
|
199
195
|
}
|
|
200
196
|
|
|
201
|
-
/*
|
|
202
|
-
|
|
197
|
+
/* Medium Badge */
|
|
198
|
+
/* Large size defaults to the medium size to avoid styles breakage */
|
|
199
|
+
:host(.badge-medium),
|
|
200
|
+
:host(.badge-large) {
|
|
203
201
|
--padding-start: var(--ion-space-100, 4px);
|
|
204
202
|
--padding-end: var(--ion-space-100, 4px);
|
|
205
|
-
min-width: var(--ion-scale-600, 24px);
|
|
206
|
-
height: var(--ion-scale-600, 24px);
|
|
207
|
-
font-size: var(--ion-font-size-350, 0.875rem);
|
|
208
|
-
line-height: var(--ion-font-line-height-600, 24px);
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
:host(.badge-xsmall) ::slotted(ion-icon) {
|
|
212
|
-
width: var(--ion-scale-400, 16px);
|
|
213
|
-
height: var(--ion-scale-400, 16px);
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
/* Small Badge */
|
|
217
|
-
:host(.badge-small) {
|
|
218
|
-
--padding-start: var(--ion-space-100, 4px);
|
|
219
|
-
--padding-end: var(--ion-space-100, 4px);
|
|
220
|
-
min-width: var(--ion-scale-800, 32px);
|
|
221
|
-
height: var(--ion-scale-800, 32px);
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
:host(.badge-small) ::slotted(ion-icon) {
|
|
225
|
-
width: var(--ion-scale-500, 20px);
|
|
226
|
-
height: var(--ion-scale-500, 20px);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
/* Medium Badge */
|
|
230
|
-
:host(.badge-medium) {
|
|
231
203
|
font-size: var(--ion-font-size-350, 0.875rem);
|
|
232
204
|
font-weight: var(--ion-font-weight-medium, 500);
|
|
233
205
|
letter-spacing: var(--ion-font-letter-spacing-0, 0%);
|
|
234
206
|
line-height: var(--ion-font-line-height-600, 24px);
|
|
235
207
|
text-decoration: none;
|
|
236
208
|
text-transform: none;
|
|
237
|
-
min-width: var(--ion-scale-
|
|
238
|
-
height: var(--ion-scale-1000, 40px);
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
:host(.badge-medium) ::slotted(ion-icon) {
|
|
242
|
-
width: var(--ion-scale-600, 24px);
|
|
209
|
+
min-width: var(--ion-scale-600, 24px);
|
|
243
210
|
height: var(--ion-scale-600, 24px);
|
|
244
211
|
}
|
|
245
212
|
|
|
246
|
-
|
|
247
|
-
:host(.badge-large) {
|
|
248
|
-
font-size: var(--ion-font-size-400, 1rem);
|
|
249
|
-
font-weight: var(--ion-font-weight-medium, 500);
|
|
250
|
-
letter-spacing: var(--ion-font-letter-spacing-0, 0%);
|
|
251
|
-
line-height: var(--ion-font-line-height-600, 24px);
|
|
252
|
-
text-decoration: none;
|
|
253
|
-
text-transform: none;
|
|
254
|
-
min-width: var(--ion-scale-1200, 48px);
|
|
255
|
-
height: var(--ion-scale-1200, 48px);
|
|
256
|
-
}
|
|
257
|
-
|
|
213
|
+
:host(.badge-medium) ::slotted(ion-icon),
|
|
258
214
|
:host(.badge-large) ::slotted(ion-icon) {
|
|
259
|
-
width: var(--ion-scale-
|
|
260
|
-
height: var(--ion-scale-
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
/* Extra Large Badge */
|
|
264
|
-
:host(.badge-xlarge) {
|
|
265
|
-
font-size: var(--ion-font-size-550, 1.375rem);
|
|
266
|
-
font-weight: var(--ion-font-weight-medium, 500);
|
|
267
|
-
letter-spacing: var(--ion-font-letter-spacing-0, 0%);
|
|
268
|
-
line-height: var(--ion-font-line-height-700, 28px);
|
|
269
|
-
text-decoration: none;
|
|
270
|
-
text-transform: none;
|
|
271
|
-
min-width: var(--ion-scale-1400, 56px);
|
|
272
|
-
height: var(--ion-scale-1400, 56px);
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
:host(.badge-xlarge) ::slotted(ion-icon) {
|
|
276
|
-
width: var(--ion-scale-1000, 40px);
|
|
277
|
-
height: var(--ion-scale-1000, 40px);
|
|
215
|
+
width: var(--ion-scale-400, 16px);
|
|
216
|
+
height: var(--ion-scale-400, 16px);
|
|
278
217
|
}
|
|
279
218
|
|
|
280
219
|
:host(:empty) {
|
|
@@ -320,15 +259,12 @@ Do not edit directly, this file was auto-generated.
|
|
|
320
259
|
inset-inline-start: 50%;
|
|
321
260
|
}
|
|
322
261
|
|
|
323
|
-
:host([vertical]:not(.in-tab-button).in-button.badge-xxsmall),
|
|
324
|
-
:host([vertical]:not(.in-tab-button).in-button.badge-xsmall),
|
|
325
262
|
:host([vertical]:not(.in-tab-button).in-button.badge-small) {
|
|
326
263
|
inset-inline-end: calc(-1 * var(var(--ion-space-050, 2px)));
|
|
327
264
|
}
|
|
328
265
|
|
|
329
266
|
:host([vertical]:not(.in-tab-button).in-button.badge-medium),
|
|
330
|
-
:host([vertical]:not(.in-tab-button).in-button.badge-large)
|
|
331
|
-
:host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
|
|
267
|
+
:host([vertical]:not(.in-tab-button).in-button.badge-large) {
|
|
332
268
|
inset-inline-end: var(--ion-space-050, 2px);
|
|
333
269
|
}
|
|
334
270
|
|
|
@@ -66,7 +66,7 @@ export class Badge {
|
|
|
66
66
|
const shape = this.getShape();
|
|
67
67
|
const size = this.getSize();
|
|
68
68
|
const theme = getIonTheme(this);
|
|
69
|
-
return (h(Host, { key: '
|
|
69
|
+
return (h(Host, { key: 'f723ed2998c9933299c4bf65b27b20f4a337ae1c', class: createColorClasses(this.color, {
|
|
70
70
|
[theme]: true,
|
|
71
71
|
[`badge-${hue}`]: hue !== undefined,
|
|
72
72
|
[`badge-${shape}`]: shape !== undefined,
|
|
@@ -74,7 +74,7 @@ export class Badge {
|
|
|
74
74
|
[`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
|
|
75
75
|
'in-button': hostContext('ion-button', this.el),
|
|
76
76
|
'in-tab-button': hostContext('ion-tab-button', this.el),
|
|
77
|
-
}) }, h("slot", { key: '
|
|
77
|
+
}) }, h("slot", { key: '25b75adc30d75ab73523976019fa8a9db3c97972' })));
|
|
78
78
|
}
|
|
79
79
|
static get is() { return "ion-badge"; }
|
|
80
80
|
static get encapsulation() { return "shadow"; }
|
|
@@ -155,15 +155,15 @@ export class Badge {
|
|
|
155
155
|
"type": "string",
|
|
156
156
|
"mutable": false,
|
|
157
157
|
"complexType": {
|
|
158
|
-
"original": "'
|
|
159
|
-
"resolved": "\"large\" | \"medium\" | \"small\" |
|
|
158
|
+
"original": "'small' | 'medium' | 'large'",
|
|
159
|
+
"resolved": "\"large\" | \"medium\" | \"small\" | undefined",
|
|
160
160
|
"references": {}
|
|
161
161
|
},
|
|
162
162
|
"required": false,
|
|
163
163
|
"optional": true,
|
|
164
164
|
"docs": {
|
|
165
165
|
"tags": [],
|
|
166
|
-
"text": "Set to `\"
|
|
166
|
+
"text": "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."
|
|
167
167
|
},
|
|
168
168
|
"attribute": "size",
|
|
169
169
|
"reflect": false
|