@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/components/ion-badge.js
CHANGED
|
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
|
|
|
5
5
|
import { h as hostContext, c as createColorClasses } from './theme.js';
|
|
6
6
|
import { c as getIonTheme } from './ionic-global.js';
|
|
7
7
|
|
|
8
|
-
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-
|
|
8
|
+
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)}";
|
|
9
9
|
const IonBadgeIonicStyle0 = badgeIonicCss;
|
|
10
10
|
|
|
11
11
|
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%}";
|
|
@@ -75,7 +75,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
|
|
|
75
75
|
const shape = this.getShape();
|
|
76
76
|
const size = this.getSize();
|
|
77
77
|
const theme = getIonTheme(this);
|
|
78
|
-
return (h(Host, { key: '
|
|
78
|
+
return (h(Host, { key: 'f723ed2998c9933299c4bf65b27b20f4a337ae1c', class: createColorClasses(this.color, {
|
|
79
79
|
[theme]: true,
|
|
80
80
|
[`badge-${hue}`]: hue !== undefined,
|
|
81
81
|
[`badge-${shape}`]: shape !== undefined,
|
|
@@ -83,7 +83,7 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
|
|
|
83
83
|
[`badge-vertical-${this.vertical}`]: this.vertical !== undefined,
|
|
84
84
|
'in-button': hostContext('ion-button', this.el),
|
|
85
85
|
'in-tab-button': hostContext('ion-tab-button', this.el),
|
|
86
|
-
}) }, h("slot", { key: '
|
|
86
|
+
}) }, h("slot", { key: '25b75adc30d75ab73523976019fa8a9db3c97972' })));
|
|
87
87
|
}
|
|
88
88
|
get el() { return this; }
|
|
89
89
|
static get style() { return {
|
package/components/title.js
CHANGED
|
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
|
|
|
5
5
|
import { c as createColorClasses } from './theme.js';
|
|
6
6
|
import { c as getIonTheme } from './ionic-global.js';
|
|
7
7
|
|
|
8
|
-
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
|
|
8
|
+
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}";
|
|
9
9
|
const IonTitleIonicStyle0 = titleIonicCss;
|
|
10
10
|
|
|
11
11
|
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/components/toolbar.js
CHANGED
|
@@ -5,7 +5,7 @@ import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/
|
|
|
5
5
|
import { c as createColorClasses, h as hostContext } from './theme.js';
|
|
6
6
|
import { c as getIonTheme } from './ionic-global.js';
|
|
7
7
|
|
|
8
|
-
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:
|
|
8
|
+
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)}";
|
|
9
9
|
const IonToolbarIonicStyle0 = toolbarIonicCss;
|
|
10
10
|
|
|
11
11
|
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%}";
|
|
@@ -37,6 +37,131 @@ const Toolbar = /*@__PURE__*/ proxyCustomElement(class Toolbar extends HTMLEleme
|
|
|
37
37
|
if (lastButtons) {
|
|
38
38
|
lastButtons.classList.add('buttons-last-slot');
|
|
39
39
|
}
|
|
40
|
+
this.updateSlotClasses();
|
|
41
|
+
}
|
|
42
|
+
componentDidLoad() {
|
|
43
|
+
this.updateSlotClasses();
|
|
44
|
+
this.updateSlotWidths();
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Updates the CSS custom properties for slot widths
|
|
48
|
+
* This ensures that slots shown by their met conditions
|
|
49
|
+
* have a minimum width matching their required slot
|
|
50
|
+
*/
|
|
51
|
+
updateSlotWidths(tries = 0) {
|
|
52
|
+
// Set timeout to try to execute after everything is rendered
|
|
53
|
+
setTimeout(() => {
|
|
54
|
+
// Attempt to measure and update
|
|
55
|
+
const success = this.measureAndUpdateSlots();
|
|
56
|
+
// If not all measurements were successful, try again in 100 ms
|
|
57
|
+
// cap recursion at 5 tries for safety
|
|
58
|
+
if (!success && tries < 5) {
|
|
59
|
+
setTimeout(() => {
|
|
60
|
+
this.updateSlotWidths(tries + 1);
|
|
61
|
+
}, 100);
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Measure the widths of the slots and update the CSS custom properties
|
|
67
|
+
* for the minimum width of each pair of slots based on the largest width in each pair.
|
|
68
|
+
* Returns whether we successfully measured all of the slots we expect to have content.
|
|
69
|
+
* If not, the content probably hasn't rendered yet and we need to try again.
|
|
70
|
+
*/
|
|
71
|
+
measureAndUpdateSlots() {
|
|
72
|
+
// Define the relationship between slots based on the conditions array
|
|
73
|
+
// Group slots that should have the same width
|
|
74
|
+
const slotPairs = [
|
|
75
|
+
{ name: 'start-end', slots: ['start', 'end'] },
|
|
76
|
+
{ name: 'primary-secondary', slots: ['primary', 'secondary'] },
|
|
77
|
+
];
|
|
78
|
+
// First, measure all slot widths
|
|
79
|
+
const slotWidths = new Map();
|
|
80
|
+
let allMeasurementsSuccessful = true;
|
|
81
|
+
// Measure all slots with content
|
|
82
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
83
|
+
slots.forEach((slot) => {
|
|
84
|
+
var _a;
|
|
85
|
+
if (this.el.classList.contains(`has-${slot}-content`)) {
|
|
86
|
+
const slotElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slot}"]`);
|
|
87
|
+
if (slotElement) {
|
|
88
|
+
const width = slotElement.offsetWidth;
|
|
89
|
+
if (width > 0) {
|
|
90
|
+
slotWidths.set(slot, width);
|
|
91
|
+
}
|
|
92
|
+
else {
|
|
93
|
+
allMeasurementsSuccessful = false;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
// Then set the CSS custom properties based on the largest width in each pair
|
|
99
|
+
slotPairs.forEach(({ name, slots }) => {
|
|
100
|
+
// Find the maximum width among the slots in this pair
|
|
101
|
+
let maxWidth = 0;
|
|
102
|
+
let hasAnyContent = false;
|
|
103
|
+
slots.forEach((slot) => {
|
|
104
|
+
var _a;
|
|
105
|
+
if (slotWidths.has(slot)) {
|
|
106
|
+
hasAnyContent = true;
|
|
107
|
+
maxWidth = Math.max(maxWidth, (_a = slotWidths.get(slot)) !== null && _a !== void 0 ? _a : 0);
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
// If at least one slot in the pair has content, set the min-width for the pair
|
|
111
|
+
if (hasAnyContent && maxWidth > 0) {
|
|
112
|
+
// Set a single CSS variable for the pair
|
|
113
|
+
this.el.style.setProperty(`--${name}-size`, `${maxWidth}px`);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
return allMeasurementsSuccessful;
|
|
117
|
+
}
|
|
118
|
+
updateSlotClasses() {
|
|
119
|
+
// Check if slots have content
|
|
120
|
+
const slots = ['start', 'end', 'primary', 'secondary'];
|
|
121
|
+
const classesToAdd = [];
|
|
122
|
+
const classesToRemove = [];
|
|
123
|
+
slots.forEach((slot) => {
|
|
124
|
+
const slotHasContent = this.hasSlotContent(slot);
|
|
125
|
+
const slotClass = `has-${slot}-content`;
|
|
126
|
+
if (slotHasContent) {
|
|
127
|
+
classesToAdd.push(slotClass);
|
|
128
|
+
}
|
|
129
|
+
else {
|
|
130
|
+
classesToRemove.push(slotClass);
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
// Force visibilities in certain conditions. This works by adding a class to the toolbar
|
|
134
|
+
// named `show-{slot}`. This class will be added if the toolbar has the required slots
|
|
135
|
+
// and does not have any of the excluded slots, otherwise it will be removed.
|
|
136
|
+
// This is useful to enforce centering of the toolbar content when there are different amounts
|
|
137
|
+
// of slots on either side of the toolbar.
|
|
138
|
+
const conditions = [
|
|
139
|
+
{ name: 'end', requiredSlots: ['start'], excludeSlots: ['end', 'primary'] },
|
|
140
|
+
{ name: 'start', requiredSlots: ['end'], excludeSlots: ['start', 'secondary'] },
|
|
141
|
+
{ name: 'secondary', requiredSlots: ['primary'], excludeSlots: ['secondary', 'start'] },
|
|
142
|
+
{ name: 'primary', requiredSlots: ['secondary'], excludeSlots: ['primary', 'end'] },
|
|
143
|
+
];
|
|
144
|
+
conditions.forEach((condition) => {
|
|
145
|
+
const hasRequiredSlots = condition.requiredSlots.every((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
146
|
+
const hasExcludedSlots = condition.excludeSlots.some((slot) => classesToAdd.includes(`has-${slot}-content`));
|
|
147
|
+
const className = `show-${condition.name}`;
|
|
148
|
+
if (hasRequiredSlots && !hasExcludedSlots) {
|
|
149
|
+
classesToAdd.push(className);
|
|
150
|
+
}
|
|
151
|
+
else {
|
|
152
|
+
classesToRemove.push(className);
|
|
153
|
+
}
|
|
154
|
+
});
|
|
155
|
+
// Add classes to the toolbar element
|
|
156
|
+
this.el.classList.add(...classesToAdd);
|
|
157
|
+
this.el.classList.remove(...classesToRemove);
|
|
158
|
+
// Update slot widths after classes have been updated
|
|
159
|
+
this.updateSlotWidths();
|
|
160
|
+
}
|
|
161
|
+
hasSlotContent(slotName) {
|
|
162
|
+
var _a;
|
|
163
|
+
const slotNode = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
|
|
164
|
+
return !!slotNode && slotNode.assignedNodes().length > 0;
|
|
40
165
|
}
|
|
41
166
|
childrenStyle(ev) {
|
|
42
167
|
ev.stopPropagation();
|
|
@@ -63,13 +188,13 @@ const Toolbar = /*@__PURE__*/ proxyCustomElement(class Toolbar extends HTMLEleme
|
|
|
63
188
|
render() {
|
|
64
189
|
const theme = getIonTheme(this);
|
|
65
190
|
const childStyles = {};
|
|
66
|
-
this.childrenStyles.forEach((
|
|
67
|
-
Object.assign(childStyles,
|
|
191
|
+
this.childrenStyles.forEach((style) => {
|
|
192
|
+
Object.assign(childStyles, style);
|
|
68
193
|
});
|
|
69
|
-
return (h(Host, { key: '
|
|
194
|
+
return (h(Host, { key: '9cf12f7133f19ef24ec4818e5334850b7315b602', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
|
|
70
195
|
[theme]: true,
|
|
71
196
|
'in-toolbar': hostContext('ion-toolbar', this.el),
|
|
72
|
-
})) }, h("div", { key: '
|
|
197
|
+
})), childStyles) }, h("div", { key: 'ba137a3b6cc68902ec93b469968885de6746a7e6', class: "toolbar-background", part: "background" }), h("div", { key: 'd3a278f4d7e50a1b3c93a8e9412df81e6e6387bc', class: "toolbar-container", part: "container" }, h("slot", { key: '7ac00536a8fe5ecbf695d21a51f62079ff0262e0', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'f641e8b71125023f7dd71f4080c6b37ef33f9639', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'a785319051166ac161069df114387ccc3e499822', class: "toolbar-content", part: "content" }, h("slot", { key: '4930bfc6a5425f923f4f23c27f9312d506463b0c' })), h("slot", { key: 'd0e78019181ff220bfb54110bdbe0d12be330374', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '5c4a39a0764001ca90e96ccb9a9b7eba158fe5e6', name: "end", onSlotchange: () => this.updateSlotClasses }))));
|
|
73
198
|
}
|
|
74
199
|
get el() { return this; }
|
|
75
200
|
static get style() { return {
|