@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
package/hydrate/index.js
CHANGED
|
@@ -7980,7 +7980,7 @@ class Backdrop {
|
|
|
7980
7980
|
}; }
|
|
7981
7981
|
}
|
|
7982
7982
|
|
|
7983
|
-
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-
|
|
7983
|
+
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)}";
|
|
7984
7984
|
var IonBadgeIonicStyle0 = badgeIonicCss;
|
|
7985
7985
|
|
|
7986
7986
|
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%}";
|
|
@@ -8052,7 +8052,7 @@ class Badge {
|
|
|
8052
8052
|
const shape = this.getShape();
|
|
8053
8053
|
const size = this.getSize();
|
|
8054
8054
|
const theme = getIonTheme(this);
|
|
8055
|
-
return (hAsync(Host, { key: '
|
|
8055
|
+
return (hAsync(Host, { key: 'f723ed2998c9933299c4bf65b27b20f4a337ae1c', class: createColorClasses$1(this.color, {
|
|
8056
8056
|
[theme]: true,
|
|
8057
8057
|
[`badge-${hue}`]: hue !== undefined,
|
|
8058
8058
|
[`badge-${shape}`]: shape !== undefined,
|
|
@@ -8060,7 +8060,7 @@ class Badge {
|
|
|
8060
8060
|
[`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
|
|
8061
8061
|
'in-button': hostContext('ion-button', this.el),
|
|
8062
8062
|
'in-tab-button': hostContext('ion-tab-button', this.el),
|
|
8063
|
-
}) }, hAsync("slot", { key: '
|
|
8063
|
+
}) }, hAsync("slot", { key: '25b75adc30d75ab73523976019fa8a9db3c97972' })));
|
|
8064
8064
|
}
|
|
8065
8065
|
get el() { return getElement(this); }
|
|
8066
8066
|
static get style() { return {
|
|
@@ -34954,7 +34954,7 @@ const shouldToggle = (rtl, checked, deltaX, margin) => {
|
|
|
34954
34954
|
};
|
|
34955
34955
|
let toggleIds = 0;
|
|
34956
34956
|
|
|
34957
|
-
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:
|
|
34957
|
+
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)}";
|
|
34958
34958
|
var IonToolbarIonicStyle0 = toolbarIonicCss;
|
|
34959
34959
|
|
|
34960
34960
|
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%}";
|
|
@@ -34998,6 +34998,131 @@ class Toolbar {
|
|
|
34998
34998
|
if (lastButtons) {
|
|
34999
34999
|
lastButtons.classList.add('buttons-last-slot');
|
|
35000
35000
|
}
|
|
35001
|
+
this.updateSlotClasses();
|
|
35002
|
+
}
|
|
35003
|
+
componentDidLoad() {
|
|
35004
|
+
this.updateSlotClasses();
|
|
35005
|
+
this.updateSlotWidths();
|
|
35006
|
+
}
|
|
35007
|
+
/**
|
|
35008
|
+
* Updates the CSS custom properties for slot widths
|
|
35009
|
+
* This ensures that slots shown by their met conditions
|
|
35010
|
+
* have a minimum width matching their required slot
|
|
35011
|
+
*/
|
|
35012
|
+
updateSlotWidths(tries = 0) {
|
|
35013
|
+
// Set timeout to try to execute after everything is rendered
|
|
35014
|
+
setTimeout(() => {
|
|
35015
|
+
// Attempt to measure and update
|
|
35016
|
+
const success = this.measureAndUpdateSlots();
|
|
35017
|
+
// If not all measurements were successful, try again in 100 ms
|
|
35018
|
+
// cap recursion at 5 tries for safety
|
|
35019
|
+
if (!success && tries < 5) {
|
|
35020
|
+
setTimeout(() => {
|
|
35021
|
+
this.updateSlotWidths(tries + 1);
|
|
35022
|
+
}, 100);
|
|
35023
|
+
}
|
|
35024
|
+
});
|
|
35025
|
+
}
|
|
35026
|
+
/**
|
|
35027
|
+
* Measure the widths of the slots and update the CSS custom properties
|
|
35028
|
+
* for the minimum width of each pair of slots based on the largest width in each pair.
|
|
35029
|
+
* Returns whether we successfully measured all of the slots we expect to have content.
|
|
35030
|
+
* If not, the content probably hasn't rendered yet and we need to try again.
|
|
35031
|
+
*/
|
|
35032
|
+
measureAndUpdateSlots() {
|
|
35033
|
+
// Define the relationship between slots based on the conditions array
|
|
35034
|
+
// Group slots that should have the same width
|
|
35035
|
+
const slotPairs = [
|
|
35036
|
+
{ name: 'start-end', slots: ['start', 'end'] },
|
|
35037
|
+
{ name: 'primary-secondary', slots: ['primary', 'secondary'] },
|
|
35038
|
+
];
|
|
35039
|
+
// First, measure all slot widths
|
|
35040
|
+
const slotWidths = new Map();
|
|
35041
|
+
let allMeasurementsSuccessful = true;
|
|
35042
|
+
// Measure all slots with content
|
|
35043
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
35044
|
+
slots.forEach((slot) => {
|
|
35045
|
+
var _a;
|
|
35046
|
+
if (this.el.classList.contains(`has-${slot}-content`)) {
|
|
35047
|
+
const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
|
|
35048
|
+
if (slotElement) {
|
|
35049
|
+
const width = slotElement.offsetWidth;
|
|
35050
|
+
if (width > 0) {
|
|
35051
|
+
slotWidths.set(slot, width);
|
|
35052
|
+
}
|
|
35053
|
+
else {
|
|
35054
|
+
allMeasurementsSuccessful = false;
|
|
35055
|
+
}
|
|
35056
|
+
}
|
|
35057
|
+
}
|
|
35058
|
+
});
|
|
35059
|
+
// Then set the CSS custom properties based on the largest width in each pair
|
|
35060
|
+
slotPairs.forEach(({ name, slots }) => {
|
|
35061
|
+
// Find the maximum width among the slots in this pair
|
|
35062
|
+
let maxWidth = 0;
|
|
35063
|
+
let hasAnyContent = false;
|
|
35064
|
+
slots.forEach((slot) => {
|
|
35065
|
+
var _a;
|
|
35066
|
+
if (slotWidths.has(slot)) {
|
|
35067
|
+
hasAnyContent = true;
|
|
35068
|
+
maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
|
|
35069
|
+
}
|
|
35070
|
+
});
|
|
35071
|
+
// If at least one slot in the pair has content, set the min-width for the pair
|
|
35072
|
+
if (hasAnyContent && maxWidth > 0) {
|
|
35073
|
+
// Set a single CSS variable for the pair
|
|
35074
|
+
this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
|
|
35075
|
+
}
|
|
35076
|
+
});
|
|
35077
|
+
return allMeasurementsSuccessful;
|
|
35078
|
+
}
|
|
35079
|
+
updateSlotClasses() {
|
|
35080
|
+
// Check if slots have content
|
|
35081
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
35082
|
+
const classesToAdd = [];
|
|
35083
|
+
const classesToRemove = [];
|
|
35084
|
+
slots.forEach((slot) => {
|
|
35085
|
+
const slotHasContent = this.hasSlotContent(slot);
|
|
35086
|
+
const slotClass = `has-${slot}-content`;
|
|
35087
|
+
if (slotHasContent) {
|
|
35088
|
+
classesToAdd.push(slotClass);
|
|
35089
|
+
}
|
|
35090
|
+
else {
|
|
35091
|
+
classesToRemove.push(slotClass);
|
|
35092
|
+
}
|
|
35093
|
+
});
|
|
35094
|
+
// Force visibilities in certain conditions. This works by adding a class to the toolbar
|
|
35095
|
+
// named `show-{slot}`. This class will be added if the toolbar has the required slots
|
|
35096
|
+
// and does not have any of the excluded slots, otherwise it will be removed.
|
|
35097
|
+
// This is useful to enforce centering of the toolbar content when there are different amounts
|
|
35098
|
+
// of slots on either side of the toolbar.
|
|
35099
|
+
const conditions = [
|
|
35100
|
+
{ name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
|
|
35101
|
+
{ name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
|
|
35102
|
+
{ name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
|
|
35103
|
+
{ name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
|
|
35104
|
+
];
|
|
35105
|
+
conditions.forEach((condition) => {
|
|
35106
|
+
const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
35107
|
+
const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
35108
|
+
const className = `show-${condition.name}`;
|
|
35109
|
+
if (hasRequiredSlots && !hasExcludedSlots) {
|
|
35110
|
+
classesToAdd.push(className);
|
|
35111
|
+
}
|
|
35112
|
+
else {
|
|
35113
|
+
classesToRemove.push(className);
|
|
35114
|
+
}
|
|
35115
|
+
});
|
|
35116
|
+
// Add classes to the toolbar element
|
|
35117
|
+
this.el.classList.add(...classesToAdd);
|
|
35118
|
+
this.el.classList.remove(...classesToRemove);
|
|
35119
|
+
// Update slot widths after classes have been updated
|
|
35120
|
+
this.updateSlotWidths();
|
|
35121
|
+
}
|
|
35122
|
+
hasSlotContent(slotName) {
|
|
35123
|
+
var _a;
|
|
35124
|
+
const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
|
|
35125
|
+
return !!slotNode && slotNode.assignedNodes().length > 0;
|
|
35001
35126
|
}
|
|
35002
35127
|
childrenStyle(ev) {
|
|
35003
35128
|
ev.stopPropagation();
|
|
@@ -35023,13 +35148,13 @@ class Toolbar {
|
|
|
35023
35148
|
render() {
|
|
35024
35149
|
const theme = getIonTheme(this);
|
|
35025
35150
|
const childStyles = {};
|
|
35026
|
-
this.childrenStyles.forEach((
|
|
35027
|
-
Object.assign(childStyles,
|
|
35151
|
+
this.childrenStyles.forEach((style) => {
|
|
35152
|
+
Object.assign(childStyles, style);
|
|
35028
35153
|
});
|
|
35029
|
-
return (hAsync(Host, { key: '
|
|
35154
|
+
return (hAsync(Host, { key: '9cf12f7133f19ef24ec4818e5334850b7315b602', class: Object.assign(Object.assign({}, createColorClasses$1(this.color, {
|
|
35030
35155
|
[theme]: true,
|
|
35031
35156
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
35032
|
-
})) }, hAsync("div", { key: '
|
|
35157
|
+
})), childStyles) }, hAsync("div", { key: 'ba137a3b6cc68902ec93b469968885de6746a7e6', class: "toolbar-background", part: "background" }), hAsync("div", { key: 'd3a278f4d7e50a1b3c93a8e9412df81e6e6387bc', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '7ac00536a8fe5ecbf695d21a51f62079ff0262e0', name: "start", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: 'f641e8b71125023f7dd71f4080c6b37ef33f9639', name: "secondary", onSlotchange: () => this.updateSlotClasses }), hAsync("div", { key: 'a785319051166ac161069df114387ccc3e499822', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '4930bfc6a5425f923f4f23c27f9312d506463b0c' })), hAsync("slot", { key: 'd0e78019181ff220bfb54110bdbe0d12be330374', name: "primary", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: '5c4a39a0764001ca90e96ccb9a9b7eba158fe5e6', name: "end", onSlotchange: () => this.updateSlotClasses }))));
|
|
35033
35158
|
}
|
|
35034
35159
|
get el() { return getElement(this); }
|
|
35035
35160
|
static get style() { return {
|
|
@@ -35049,7 +35174,7 @@ class Toolbar {
|
|
|
35049
35174
|
}; }
|
|
35050
35175
|
}
|
|
35051
35176
|
|
|
35052
|
-
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
|
|
35177
|
+
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}";
|
|
35053
35178
|
var IonTitleIonicStyle0 = titleIonicCss;
|
|
35054
35179
|
|
|
35055
35180
|
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)}}";
|
package/hydrate/index.mjs
CHANGED
|
@@ -7976,7 +7976,7 @@ class Backdrop {
|
|
|
7976
7976
|
}; }
|
|
7977
7977
|
}
|
|
7978
7978
|
|
|
7979
|
-
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-
|
|
7979
|
+
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)}";
|
|
7980
7980
|
var IonBadgeIonicStyle0 = badgeIonicCss;
|
|
7981
7981
|
|
|
7982
7982
|
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%}";
|
|
@@ -8048,7 +8048,7 @@ class Badge {
|
|
|
8048
8048
|
const shape = this.getShape();
|
|
8049
8049
|
const size = this.getSize();
|
|
8050
8050
|
const theme = getIonTheme(this);
|
|
8051
|
-
return (hAsync(Host, { key: '
|
|
8051
|
+
return (hAsync(Host, { key: 'f723ed2998c9933299c4bf65b27b20f4a337ae1c', class: createColorClasses$1(this.color, {
|
|
8052
8052
|
[theme]: true,
|
|
8053
8053
|
[`badge-${hue}`]: hue !== undefined,
|
|
8054
8054
|
[`badge-${shape}`]: shape !== undefined,
|
|
@@ -8056,7 +8056,7 @@ class Badge {
|
|
|
8056
8056
|
[`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
|
|
8057
8057
|
'in-button': hostContext('ion-button', this.el),
|
|
8058
8058
|
'in-tab-button': hostContext('ion-tab-button', this.el),
|
|
8059
|
-
}) }, hAsync("slot", { key: '
|
|
8059
|
+
}) }, hAsync("slot", { key: '25b75adc30d75ab73523976019fa8a9db3c97972' })));
|
|
8060
8060
|
}
|
|
8061
8061
|
get el() { return getElement(this); }
|
|
8062
8062
|
static get style() { return {
|
|
@@ -34950,7 +34950,7 @@ const shouldToggle = (rtl, checked, deltaX, margin) => {
|
|
|
34950
34950
|
};
|
|
34951
34951
|
let toggleIds = 0;
|
|
34952
34952
|
|
|
34953
|
-
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:
|
|
34953
|
+
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)}";
|
|
34954
34954
|
var IonToolbarIonicStyle0 = toolbarIonicCss;
|
|
34955
34955
|
|
|
34956
34956
|
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%}";
|
|
@@ -34994,6 +34994,131 @@ class Toolbar {
|
|
|
34994
34994
|
if (lastButtons) {
|
|
34995
34995
|
lastButtons.classList.add('buttons-last-slot');
|
|
34996
34996
|
}
|
|
34997
|
+
this.updateSlotClasses();
|
|
34998
|
+
}
|
|
34999
|
+
componentDidLoad() {
|
|
35000
|
+
this.updateSlotClasses();
|
|
35001
|
+
this.updateSlotWidths();
|
|
35002
|
+
}
|
|
35003
|
+
/**
|
|
35004
|
+
* Updates the CSS custom properties for slot widths
|
|
35005
|
+
* This ensures that slots shown by their met conditions
|
|
35006
|
+
* have a minimum width matching their required slot
|
|
35007
|
+
*/
|
|
35008
|
+
updateSlotWidths(tries = 0) {
|
|
35009
|
+
// Set timeout to try to execute after everything is rendered
|
|
35010
|
+
setTimeout(() => {
|
|
35011
|
+
// Attempt to measure and update
|
|
35012
|
+
const success = this.measureAndUpdateSlots();
|
|
35013
|
+
// If not all measurements were successful, try again in 100 ms
|
|
35014
|
+
// cap recursion at 5 tries for safety
|
|
35015
|
+
if (!success && tries < 5) {
|
|
35016
|
+
setTimeout(() => {
|
|
35017
|
+
this.updateSlotWidths(tries + 1);
|
|
35018
|
+
}, 100);
|
|
35019
|
+
}
|
|
35020
|
+
});
|
|
35021
|
+
}
|
|
35022
|
+
/**
|
|
35023
|
+
* Measure the widths of the slots and update the CSS custom properties
|
|
35024
|
+
* for the minimum width of each pair of slots based on the largest width in each pair.
|
|
35025
|
+
* Returns whether we successfully measured all of the slots we expect to have content.
|
|
35026
|
+
* If not, the content probably hasn't rendered yet and we need to try again.
|
|
35027
|
+
*/
|
|
35028
|
+
measureAndUpdateSlots() {
|
|
35029
|
+
// Define the relationship between slots based on the conditions array
|
|
35030
|
+
// Group slots that should have the same width
|
|
35031
|
+
const slotPairs = [
|
|
35032
|
+
{ name: 'start-end', slots: ['start', 'end'] },
|
|
35033
|
+
{ name: 'primary-secondary', slots: ['primary', 'secondary'] },
|
|
35034
|
+
];
|
|
35035
|
+
// First, measure all slot widths
|
|
35036
|
+
const slotWidths = new Map();
|
|
35037
|
+
let allMeasurementsSuccessful = true;
|
|
35038
|
+
// Measure all slots with content
|
|
35039
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
35040
|
+
slots.forEach((slot) => {
|
|
35041
|
+
var _a;
|
|
35042
|
+
if (this.el.classList.contains(`has-${slot}-content`)) {
|
|
35043
|
+
const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
|
|
35044
|
+
if (slotElement) {
|
|
35045
|
+
const width = slotElement.offsetWidth;
|
|
35046
|
+
if (width > 0) {
|
|
35047
|
+
slotWidths.set(slot, width);
|
|
35048
|
+
}
|
|
35049
|
+
else {
|
|
35050
|
+
allMeasurementsSuccessful = false;
|
|
35051
|
+
}
|
|
35052
|
+
}
|
|
35053
|
+
}
|
|
35054
|
+
});
|
|
35055
|
+
// Then set the CSS custom properties based on the largest width in each pair
|
|
35056
|
+
slotPairs.forEach(({ name, slots }) => {
|
|
35057
|
+
// Find the maximum width among the slots in this pair
|
|
35058
|
+
let maxWidth = 0;
|
|
35059
|
+
let hasAnyContent = false;
|
|
35060
|
+
slots.forEach((slot) => {
|
|
35061
|
+
var _a;
|
|
35062
|
+
if (slotWidths.has(slot)) {
|
|
35063
|
+
hasAnyContent = true;
|
|
35064
|
+
maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
|
|
35065
|
+
}
|
|
35066
|
+
});
|
|
35067
|
+
// If at least one slot in the pair has content, set the min-width for the pair
|
|
35068
|
+
if (hasAnyContent && maxWidth > 0) {
|
|
35069
|
+
// Set a single CSS variable for the pair
|
|
35070
|
+
this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
|
|
35071
|
+
}
|
|
35072
|
+
});
|
|
35073
|
+
return allMeasurementsSuccessful;
|
|
35074
|
+
}
|
|
35075
|
+
updateSlotClasses() {
|
|
35076
|
+
// Check if slots have content
|
|
35077
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
35078
|
+
const classesToAdd = [];
|
|
35079
|
+
const classesToRemove = [];
|
|
35080
|
+
slots.forEach((slot) => {
|
|
35081
|
+
const slotHasContent = this.hasSlotContent(slot);
|
|
35082
|
+
const slotClass = `has-${slot}-content`;
|
|
35083
|
+
if (slotHasContent) {
|
|
35084
|
+
classesToAdd.push(slotClass);
|
|
35085
|
+
}
|
|
35086
|
+
else {
|
|
35087
|
+
classesToRemove.push(slotClass);
|
|
35088
|
+
}
|
|
35089
|
+
});
|
|
35090
|
+
// Force visibilities in certain conditions. This works by adding a class to the toolbar
|
|
35091
|
+
// named `show-{slot}`. This class will be added if the toolbar has the required slots
|
|
35092
|
+
// and does not have any of the excluded slots, otherwise it will be removed.
|
|
35093
|
+
// This is useful to enforce centering of the toolbar content when there are different amounts
|
|
35094
|
+
// of slots on either side of the toolbar.
|
|
35095
|
+
const conditions = [
|
|
35096
|
+
{ name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
|
|
35097
|
+
{ name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
|
|
35098
|
+
{ name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
|
|
35099
|
+
{ name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
|
|
35100
|
+
];
|
|
35101
|
+
conditions.forEach((condition) => {
|
|
35102
|
+
const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
35103
|
+
const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
35104
|
+
const className = `show-${condition.name}`;
|
|
35105
|
+
if (hasRequiredSlots && !hasExcludedSlots) {
|
|
35106
|
+
classesToAdd.push(className);
|
|
35107
|
+
}
|
|
35108
|
+
else {
|
|
35109
|
+
classesToRemove.push(className);
|
|
35110
|
+
}
|
|
35111
|
+
});
|
|
35112
|
+
// Add classes to the toolbar element
|
|
35113
|
+
this.el.classList.add(...classesToAdd);
|
|
35114
|
+
this.el.classList.remove(...classesToRemove);
|
|
35115
|
+
// Update slot widths after classes have been updated
|
|
35116
|
+
this.updateSlotWidths();
|
|
35117
|
+
}
|
|
35118
|
+
hasSlotContent(slotName) {
|
|
35119
|
+
var _a;
|
|
35120
|
+
const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
|
|
35121
|
+
return !!slotNode && slotNode.assignedNodes().length > 0;
|
|
34997
35122
|
}
|
|
34998
35123
|
childrenStyle(ev) {
|
|
34999
35124
|
ev.stopPropagation();
|
|
@@ -35019,13 +35144,13 @@ class Toolbar {
|
|
|
35019
35144
|
render() {
|
|
35020
35145
|
const theme = getIonTheme(this);
|
|
35021
35146
|
const childStyles = {};
|
|
35022
|
-
this.childrenStyles.forEach((
|
|
35023
|
-
Object.assign(childStyles,
|
|
35147
|
+
this.childrenStyles.forEach((style) => {
|
|
35148
|
+
Object.assign(childStyles, style);
|
|
35024
35149
|
});
|
|
35025
|
-
return (hAsync(Host, { key: '
|
|
35150
|
+
return (hAsync(Host, { key: '9cf12f7133f19ef24ec4818e5334850b7315b602', class: Object.assign(Object.assign({}, createColorClasses$1(this.color, {
|
|
35026
35151
|
[theme]: true,
|
|
35027
35152
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
35028
|
-
})) }, hAsync("div", { key: '
|
|
35153
|
+
})), childStyles) }, hAsync("div", { key: 'ba137a3b6cc68902ec93b469968885de6746a7e6', class: "toolbar-background", part: "background" }), hAsync("div", { key: 'd3a278f4d7e50a1b3c93a8e9412df81e6e6387bc', class: "toolbar-container", part: "container" }, hAsync("slot", { key: '7ac00536a8fe5ecbf695d21a51f62079ff0262e0', name: "start", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: 'f641e8b71125023f7dd71f4080c6b37ef33f9639', name: "secondary", onSlotchange: () => this.updateSlotClasses }), hAsync("div", { key: 'a785319051166ac161069df114387ccc3e499822', class: "toolbar-content", part: "content" }, hAsync("slot", { key: '4930bfc6a5425f923f4f23c27f9312d506463b0c' })), hAsync("slot", { key: 'd0e78019181ff220bfb54110bdbe0d12be330374', name: "primary", onSlotchange: () => this.updateSlotClasses }), hAsync("slot", { key: '5c4a39a0764001ca90e96ccb9a9b7eba158fe5e6', name: "end", onSlotchange: () => this.updateSlotClasses }))));
|
|
35029
35154
|
}
|
|
35030
35155
|
get el() { return getElement(this); }
|
|
35031
35156
|
static get style() { return {
|
|
@@ -35045,7 +35170,7 @@ class Toolbar {
|
|
|
35045
35170
|
}; }
|
|
35046
35171
|
}
|
|
35047
35172
|
|
|
35048
|
-
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
|
|
35173
|
+
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}";
|
|
35049
35174
|
var IonTitleIonicStyle0 = titleIonicCss;
|
|
35050
35175
|
|
|
35051
35176
|
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)}}";
|