@sparkle-learning/core 0.0.55 → 0.0.57

package/dist/esm/ion-app.entry.js

@@ -1,75 +0,0 @@
-import { r as registerInstance, h, H as Host, e as getElement } from './index-c04b9ed5.js';
-import { g as getIonMode, c as config, a as isPlatform } from './ionic-global-4903e23e.js';
-
-const appCss = "html.plt-mobile ion-app{user-select:none}html.plt-mobile ion-app [contenteditable]{user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
-
-const App = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentDidLoad() {
-    {
-      rIC(async () => {
-        const isHybrid = isPlatform(window, 'hybrid');
-        if (!config.getBoolean('_testing')) {
-          import('./index-45fec1e7.js').then((module) => module.startTapClick(config));
-        }
-        if (config.getBoolean('statusTap', isHybrid)) {
-          import('./status-tap-dde52787.js').then((module) => module.startStatusTap());
-        }
-        if (config.getBoolean('inputShims', needInputShims())) {
-          import('./input-shims-671d8d9f.js').then((module) => module.startInputShims(config));
-        }
-        const hardwareBackButtonModule = await import('./hardware-back-button-fa04d6e9.js');
-        if (config.getBoolean('hardwareBackButton', isHybrid)) {
-          hardwareBackButtonModule.startHardwareBackButton();
-        }
-        else {
-          hardwareBackButtonModule.blockHardwareBackButton();
-        }
-        if (typeof window !== 'undefined') {
-          import('./keyboard-7e8329b3.js').then((module) => module.startKeyboardAssist(window));
-        }
-        import('./focus-visible-4e9a0764.js').then((module) => (this.focusVisible = module.startFocusVisible()));
-      });
-    }
-  }
-  /**
-   * @internal
-   * Used to set focus on an element that uses `ion-focusable`.
-   * Do not use this if focusing the element as a result of a keyboard
-   * event as the focus utility should handle this for us. This method
-   * should be used when we want to programmatically focus an element as
-   * a result of another user action. (Ex: We focus the first element
-   * inside of a popover when the user presents it, but the popover is not always
-   * presented as a result of keyboard action.)
-   */
-  async setFocus(elements) {
-    if (this.focusVisible) {
-      this.focusVisible.setFocus(elements);
-    }
-  }
-  render() {
-    const mode = getIonMode(this);
-    return (h(Host, { class: {
-        [mode]: true,
-        'ion-page': true,
-        'force-statusbar-padding': config.getBoolean('_forceStatusbarPadding'),
-      } }));
-  }
-  get el() { return getElement(this); }
-};
-const needInputShims = () => {
-  return isPlatform(window, 'ios') && isPlatform(window, 'mobile');
-};
-const rIC = (callback) => {
-  if ('requestIdleCallback' in window) {
-    window.requestIdleCallback(callback);
-  }
-  else {
-    setTimeout(callback, 32);
-  }
-};
-App.style = appCss;
-
-export { App as ion_app };

package/dist/esm/ion-back-button.entry.js

@@ -1,90 +0,0 @@
-import { r as registerInstance, h, H as Host, e as getElement } from './index-c04b9ed5.js';
-import { d as chevronBack, n as arrowBackSharp } from './index-4044fde9.js';
-import { c as config, g as getIonMode } from './ionic-global-4903e23e.js';
-import { i as inheritAriaAttributes } from './helpers-bf0e23d6.js';
-import { o as openURL, c as createColorClasses, h as hostContext } from './theme-7ef00c83.js';
-
-const backButtonIosCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;user-select:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;user-select:none;z-index:0;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{padding-left:var(--icon-padding-start);padding-right:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--background-hover:transparent;--background-hover-opacity:1;--background-focused:currentColor;--background-focused-opacity:.1;--border-radius:4px;--color:var(--ion-color-primary, #3880ff);--icon-margin-end:-5px;--icon-margin-start:-4px;--icon-font-size:1.85em;--min-height:32px;font-size:17px}.button-native{transform:translateZ(0);overflow:visible;z-index:99}:host(.ion-activated) .button-native{opacity:0.4}@media (any-hover: hover){:host(:hover){opacity:0.6}}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}";
-
-const backButtonMdCss = ":host{--background:transparent;--color-focused:currentColor;--color-hover:currentColor;--icon-margin-top:0;--icon-margin-bottom:0;--icon-padding-top:0;--icon-padding-end:0;--icon-padding-bottom:0;--icon-padding-start:0;--margin-top:0;--margin-end:0;--margin-bottom:0;--margin-start:0;--min-width:auto;--min-height:auto;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;--opacity:1;--ripple-color:currentColor;--transition:background-color, opacity 100ms linear;display:none;min-width:var(--min-width);min-height:var(--min-height);color:var(--color);font-family:var(--ion-font-family, inherit);text-align:center;text-decoration:none;text-overflow:ellipsis;text-transform:none;white-space:nowrap;user-select:none;font-kerning:none}ion-ripple-effect{color:var(--ripple-color)}:host(.ion-color) .button-native{color:var(--ion-color-base)}:host(.show-back-button){display:block}:host(.back-button-disabled){cursor:default;opacity:0.5;pointer-events:none}.button-native{border-radius:var(--border-radius);-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:var(--margin-start);margin-right:var(--margin-end);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;min-height:inherit;transition:var(--transition);border:0;outline:none;background:var(--background);line-height:1;cursor:pointer;opacity:var(--opacity);overflow:hidden;user-select:none;z-index:0;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--margin-start);margin-inline-start:var(--margin-start);-webkit-margin-end:var(--margin-end);margin-inline-end:var(--margin-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.button-inner{display:flex;position:relative;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}ion-icon{padding-left:var(--icon-padding-start);padding-right:var(--icon-padding-end);padding-top:var(--icon-padding-top);padding-bottom:var(--icon-padding-bottom);margin-left:var(--icon-margin-start);margin-right:var(--icon-margin-end);margin-top:var(--icon-margin-top);margin-bottom:var(--icon-margin-bottom);display:inherit;font-size:var(--icon-font-size);font-weight:var(--icon-font-weight);pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-icon{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--icon-padding-start);padding-inline-start:var(--icon-padding-start);-webkit-padding-end:var(--icon-padding-end);padding-inline-end:var(--icon-padding-end)}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){ion-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--icon-margin-start);margin-inline-start:var(--icon-margin-start);-webkit-margin-end:var(--icon-margin-end);margin-inline-end:var(--icon-margin-end)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-base)}}:host(.in-toolbar:not(.in-toolbar-color)){color:var(--ion-toolbar-color, var(--color))}:host{--border-radius:4px;--background-focused:currentColor;--background-focused-opacity:.12;--background-hover:currentColor;--background-hover-opacity:0.04;--color:currentColor;--icon-margin-end:0;--icon-margin-start:0;--icon-font-size:24px;--icon-font-weight:normal;--min-height:32px;--min-width:44px;--padding-start:12px;--padding-end:12px;font-size:14px;font-weight:500;text-transform:uppercase}:host(.back-button-has-icon-only){--border-radius:50%;min-width:48px;height:48px}.button-native{box-shadow:none}.button-text{padding-left:4px;padding-right:4px;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.button-text{padding-left:unset;padding-right:unset;-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px}}ion-icon{line-height:0.67;text-align:start}@media (any-hover: hover){:host(.ion-color:hover) .button-native::after{background:var(--ion-color-base)}}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-base)}";
-
-const BackButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.inheritedAttributes = {};
-    /**
-     * If `true`, the user cannot interact with the button.
-     */
-    this.disabled = false;
-    /**
-     * The type of the button.
-     */
-    this.type = 'button';
-    this.onClick = async (ev) => {
-      const nav = this.el.closest('ion-nav');
-      ev.preventDefault();
-      if (nav && (await nav.canGoBack())) {
-        return nav.pop({ animationBuilder: this.routerAnimation, skipIfBusy: true });
-      }
-      return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
-    };
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAriaAttributes(this.el);
-    if (this.defaultHref === undefined) {
-      this.defaultHref = config.get('backButtonDefaultHref');
-    }
-  }
-  get backButtonIcon() {
-    const icon = this.icon;
-    if (icon != null) {
-      // icon is set on the component or by the config
-      return icon;
-    }
-    if (getIonMode(this) === 'ios') {
-      // default ios back button icon
-      return config.get('backButtonIcon', chevronBack);
-    }
-    // default md back button icon
-    return config.get('backButtonIcon', arrowBackSharp);
-  }
-  get backButtonText() {
-    const defaultBackButtonText = getIonMode(this) === 'ios' ? 'Back' : null;
-    return this.text != null ? this.text : config.get('backButtonText', defaultBackButtonText);
-  }
-  get hasIconOnly() {
-    return this.backButtonIcon && !this.backButtonText;
-  }
-  get rippleType() {
-    // If the button only has an icon we use the unbounded
-    // "circular" ripple effect
-    if (this.hasIconOnly) {
-      return 'unbounded';
-    }
-    return 'bounded';
-  }
-  render() {
-    const { color, defaultHref, disabled, type, hasIconOnly, backButtonIcon, backButtonText, icon, inheritedAttributes, } = this;
-    const showBackButton = defaultHref !== undefined;
-    const mode = getIonMode(this);
-    const ariaLabel = inheritedAttributes['aria-label'] || backButtonText || 'back';
-    return (h(Host, { onClick: this.onClick, class: createColorClasses(color, {
-        [mode]: true,
-        button: true,
-        'back-button-disabled': disabled,
-        'back-button-has-icon-only': hasIconOnly,
-        'in-toolbar': hostContext('ion-toolbar', this.el),
-        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-        'ion-activatable': true,
-        'ion-focusable': true,
-        'show-back-button': showBackButton,
-      }) }, h("button", { type: type, disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }, h("span", { class: "button-inner" }, backButtonIcon && (h("ion-icon", { part: "icon", icon: backButtonIcon, "aria-hidden": "true", lazy: false, "flip-rtl": icon === undefined })), backButtonText && (h("span", { part: "text", "aria-hidden": "true", class: "button-text" }, backButtonText))), mode === 'md' && h("ion-ripple-effect", { type: this.rippleType }))));
-  }
-  get el() { return getElement(this); }
-};
-BackButton.style = {
-  ios: backButtonIosCss,
-  md: backButtonMdCss
-};
-
-export { BackButton as ion_back_button };

package/dist/esm/ion-backdrop.entry.js

@@ -1,63 +0,0 @@
-import { r as registerInstance, i as createEvent, h, H as Host } from './index-c04b9ed5.js';
-import { g as getIonMode } from './ionic-global-4903e23e.js';
-import { G as GESTURE_CONTROLLER } from './gesture-controller-7be18351.js';
-
-const backdropIosCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
-
-const backdropMdCss = ":host{left:0;right:0;top:0;bottom:0;display:block;position:absolute;transform:translateZ(0);contain:strict;cursor:pointer;opacity:0.01;touch-action:none;z-index:2}:host(.backdrop-hide){background:transparent}:host(.backdrop-no-tappable){cursor:auto}:host{background-color:var(--ion-backdrop-color, #000)}";
-
-const Backdrop = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
-    this.blocker = GESTURE_CONTROLLER.createBlocker({
-      disableScroll: true,
-    });
-    /**
-     * If `true`, the backdrop will be visible.
-     */
-    this.visible = true;
-    /**
-     * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
-     */
-    this.tappable = true;
-    /**
-     * If `true`, the backdrop will stop propagation on tap.
-     */
-    this.stopPropagation = true;
-  }
-  connectedCallback() {
-    if (this.stopPropagation) {
-      this.blocker.block();
-    }
-  }
-  disconnectedCallback() {
-    this.blocker.unblock();
-  }
-  onMouseDown(ev) {
-    this.emitTap(ev);
-  }
-  emitTap(ev) {
-    if (this.stopPropagation) {
-      ev.preventDefault();
-      ev.stopPropagation();
-    }
-    if (this.tappable) {
-      this.ionBackdropTap.emit();
-    }
-  }
-  render() {
-    const mode = getIonMode(this);
-    return (h(Host, { tabindex: "-1", "aria-hidden": "true", class: {
-        [mode]: true,
-        'backdrop-hide': !this.visible,
-        'backdrop-no-tappable': !this.tappable,
-      } }));
-  }
-};
-Backdrop.style = {
-  ios: backdropIosCss,
-  md: backdropMdCss
-};
-
-export { Backdrop as ion_backdrop };

package/dist/esm/ion-badge.entry.js

@@ -1,25 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-c04b9ed5.js';
-import { g as getIonMode } from './ionic-global-4903e23e.js';
-import { c as createColorClasses } from './theme-7ef00c83.js';
-
-const badgeIosCss = ":host{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff);--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:13px;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{border-radius:10px}";
-
-const badgeMdCss = ":host{--background:var(--ion-color-primary, #3880ff);--color:var(--ion-color-primary-contrast, #fff);--padding-top:3px;--padding-end:8px;--padding-bottom:3px;--padding-start:8px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:inline-block;min-width:10px;background:var(--background);color:var(--color);font-family:var(--ion-font-family, inherit);font-size:13px;font-weight:bold;line-height:1;text-align:center;white-space:nowrap;contain:content;vertical-align:baseline}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.ion-color){background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(:empty){display:none}:host{--padding-top:3px;--padding-end:4px;--padding-bottom:4px;--padding-start:4px;border-radius:4px}";
-
-const Badge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    const mode = getIonMode(this);
-    return (h(Host, { class: createColorClasses(this.color, {
-        [mode]: true,
-      }) }, h("slot", null)));
-  }
-};
-Badge.style = {
-  ios: badgeIosCss,
-  md: badgeMdCss
-};
-
-export { Badge as ion_badge };

package/dist/esm/ion-breadcrumb.entry.js

@@ -1,91 +0,0 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
-import { b as chevronForwardOutline, e as ellipsisHorizontal } from './index-4044fde9.js';
-import { g as getIonMode } from './ionic-global-4903e23e.js';
-import { i as inheritAriaAttributes } from './helpers-bf0e23d6.js';
-import { o as openURL, c as createColorClasses, h as hostContext } from './theme-7ef00c83.js';
-
-const breadcrumbIosCss = ":host{display:flex;flex:0 0 auto;align-items:center;color:var(--color);font-size:16px;font-weight:400;line-height:1.5}.breadcrumb-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:flex;align-items:center;width:100%;outline:none;background:inherit}:host(.breadcrumb-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.breadcrumb-active){color:var(--color-active)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .breadcrumb-native{background:var(--background-focused)}@media (any-hover: hover){:host(.ion-activatable:hover){color:var(--color-hover)}:host(.ion-activatable.in-breadcrumbs-color:hover),:host(.ion-activatable.ion-color:hover){color:var(--ion-color-shade)}}.breadcrumb-separator{display:inline-flex}:host(.breadcrumb-collapsed) .breadcrumb-native{display:none}:host(.in-breadcrumbs-color),:host(.in-breadcrumbs-color.breadcrumb-active){color:var(--ion-color-base)}:host(.in-breadcrumbs-color) .breadcrumb-separator{color:var(--ion-color-base)}:host(.ion-color){color:var(--ion-color-base)}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumb-separator{color:rgba(var(--ion-color-contrast-rgb), 0.8)}:host(.in-toolbar-color.breadcrumb-active){color:var(--ion-color-contrast)}.breadcrumbs-collapsed-indicator{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:14px;margin-right:14px;margin-top:0;margin-bottom:0;display:flex;flex:1 1 100%;align-items:center;justify-content:center;width:32px;height:18px;border:0;outline:none;cursor:pointer;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumbs-collapsed-indicator{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px}}.breadcrumbs-collapsed-indicator ion-icon{margin-top:1px;font-size:22px}:host{--color:var(--ion-color-step-850, #2d4665);--color-active:var(--ion-text-color, #03060b);--color-hover:var(--ion-text-color, #03060b);--color-focused:var(--color-active);--background-focused:var(--ion-color-step-50, rgba(233, 237, 243, 0.7))}:host(.breadcrumb-active){font-weight:600}.breadcrumb-native{border-radius:4px;padding-left:12px;padding-right:12px;padding-top:5px;padding-bottom:5px;border:1px solid transparent}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumb-native{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.ion-focused) .breadcrumb-native{border-radius:8px}:host(.in-breadcrumbs-color.ion-focused) .breadcrumb-native,:host(.ion-color.ion-focused) .breadcrumb-native{background:rgba(var(--ion-color-base-rgb), 0.1);color:var(--ion-color-base)}:host(.ion-focused) ::slotted(ion-icon),:host(.in-breadcrumbs-color.ion-focused) ::slotted(ion-icon),:host(.ion-color.ion-focused) ::slotted(ion-icon){color:var(--ion-color-step-750, #445b78)}.breadcrumb-separator{color:var(--ion-color-step-550, #73849a)}::slotted(ion-icon){color:var(--ion-color-step-400, #92a0b3);font-size:18px}::slotted(ion-icon[slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(ion-icon[slot=end]){margin-left:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:8px;margin-inline-start:8px}}:host(.breadcrumb-active) ::slotted(ion-icon){color:var(--ion-color-step-850, #242d39)}.breadcrumbs-collapsed-indicator{border-radius:4px;background:var(--ion-color-step-100, #e9edf3);color:var(--ion-color-step-550, #73849a)}.breadcrumbs-collapsed-indicator:hover{opacity:0.45}.breadcrumbs-collapsed-indicator:focus{background:var(--ion-color-step-150, #d9e0ea)}";
-
-const breadcrumbMdCss = ":host{display:flex;flex:0 0 auto;align-items:center;color:var(--color);font-size:16px;font-weight:400;line-height:1.5}.breadcrumb-native{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:flex;align-items:center;width:100%;outline:none;background:inherit}:host(.breadcrumb-disabled){cursor:default;opacity:0.5;pointer-events:none}:host(.breadcrumb-active){color:var(--color-active)}:host(.ion-focused){color:var(--color-focused)}:host(.ion-focused) .breadcrumb-native{background:var(--background-focused)}@media (any-hover: hover){:host(.ion-activatable:hover){color:var(--color-hover)}:host(.ion-activatable.in-breadcrumbs-color:hover),:host(.ion-activatable.ion-color:hover){color:var(--ion-color-shade)}}.breadcrumb-separator{display:inline-flex}:host(.breadcrumb-collapsed) .breadcrumb-native{display:none}:host(.in-breadcrumbs-color),:host(.in-breadcrumbs-color.breadcrumb-active){color:var(--ion-color-base)}:host(.in-breadcrumbs-color) .breadcrumb-separator{color:var(--ion-color-base)}:host(.ion-color){color:var(--ion-color-base)}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumb-separator{color:rgba(var(--ion-color-contrast-rgb), 0.8)}:host(.in-toolbar-color.breadcrumb-active){color:var(--ion-color-contrast)}.breadcrumbs-collapsed-indicator{padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;margin-left:14px;margin-right:14px;margin-top:0;margin-bottom:0;display:flex;flex:1 1 100%;align-items:center;justify-content:center;width:32px;height:18px;border:0;outline:none;cursor:pointer;appearance:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumbs-collapsed-indicator{margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:14px;margin-inline-end:14px}}.breadcrumbs-collapsed-indicator ion-icon{margin-top:1px;font-size:22px}:host{--color:var(--ion-color-step-600, #677483);--color-active:var(--ion-text-color, #03060b);--color-hover:var(--ion-text-color, #03060b);--color-focused:var(--ion-color-step-800, #35404e);--background-focused:$breadcrumb-md-background-focused}:host(.breadcrumb-active){font-weight:500}.breadcrumb-native{padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumb-native{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.breadcrumb-separator{margin-left:10px;margin-right:10px;margin-top:-1px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.breadcrumb-separator{margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}:host(.ion-focused) .breadcrumb-native{border-radius:4px;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.12)}.breadcrumb-separator{color:var(--ion-color-step-550, #73849a)}::slotted(ion-icon){color:var(--ion-color-step-550, #7d8894);font-size:18px}::slotted(ion-icon[slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(ion-icon[slot=end]){margin-left:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:8px;margin-inline-start:8px}}:host(.breadcrumb-active) ::slotted(ion-icon){color:var(--ion-color-step-850, #222d3a)}.breadcrumbs-collapsed-indicator{border-radius:2px;background:var(--ion-color-step-100, #eef1f3);color:var(--ion-color-step-550, #73849a)}.breadcrumbs-collapsed-indicator:hover{opacity:0.7}.breadcrumbs-collapsed-indicator:focus{background:var(--ion-color-step-150, #dfe5e8)}";
-
-const Breadcrumb = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionFocus = createEvent(this, "ionFocus", 7);
-    this.ionBlur = createEvent(this, "ionBlur", 7);
-    this.collapsedClick = createEvent(this, "collapsedClick", 7);
-    this.inheritedAttributes = {};
-    /** @internal */
-    this.collapsed = false;
-    /**
-     * If `true`, the breadcrumb will take on a different look to show that
-     * it is the currently active breadcrumb. Defaults to `true` for the
-     * last breadcrumb if it is not set on any.
-     */
-    this.active = false;
-    /**
-     * If `true`, the user cannot interact with the breadcrumb.
-     */
-    this.disabled = false;
-    /**
-     * When using a router, it specifies the transition direction when navigating to
-     * another page using `href`.
-     */
-    this.routerDirection = 'forward';
-    this.onFocus = () => {
-      this.ionFocus.emit();
-    };
-    this.onBlur = () => {
-      this.ionBlur.emit();
-    };
-    this.collapsedIndicatorClick = () => {
-      this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
-    };
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAriaAttributes(this.el);
-  }
-  isClickable() {
-    return this.href !== undefined;
-  }
-  render() {
-    const { color, active, collapsed, disabled, download, el, inheritedAttributes, last, routerAnimation, routerDirection, separator, showCollapsedIndicator, target, } = this;
-    const clickable = this.isClickable();
-    const TagType = this.href === undefined ? 'span' : 'a';
-    // Links can still be tabbed to when set to disabled if they have an href
-    // in order to truly disable them we can keep it as an anchor but remove the href
-    const href = disabled ? undefined : this.href;
-    const mode = getIonMode(this);
-    const attrs = TagType === 'span'
-      ? {}
-      : {
-        download,
-        href,
-        target,
-      };
-    // If the breadcrumb is collapsed, check if it contains the collapsed indicator
-    // to show the separator as long as it isn't also the last breadcrumb
-    // otherwise if not collapsed use the value in separator
-    const showSeparator = last ? false : collapsed ? (showCollapsedIndicator && !last ? true : false) : separator;
-    return (h(Host, { onClick: (ev) => openURL(href, ev, routerDirection, routerAnimation), "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
-        [mode]: true,
-        'breadcrumb-active': active,
-        'breadcrumb-collapsed': collapsed,
-        'breadcrumb-disabled': disabled,
-        'in-breadcrumbs-color': hostContext('ion-breadcrumbs[color]', el),
-        'in-toolbar': hostContext('ion-toolbar', this.el),
-        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-        'ion-activatable': clickable,
-        'ion-focusable': clickable,
-      }) }, h(TagType, Object.assign({}, attrs, { class: "breadcrumb-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, inheritedAttributes), h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), showCollapsedIndicator && (h("button", { part: "collapsed-indicator", onClick: () => this.collapsedIndicatorClick(), ref: (collapsedEl) => (this.collapsedRef = collapsedEl), class: {
-        'breadcrumbs-collapsed-indicator': true,
-      } }, h("ion-icon", { icon: ellipsisHorizontal, lazy: false }))), showSeparator && (h("span", { class: "breadcrumb-separator", part: "separator" }, h("slot", { name: "separator" }, mode === 'ios' ? (h("ion-icon", { icon: chevronForwardOutline, lazy: false, "flip-rtl": true })) : (h("span", null, "/")))))));
-  }
-  get el() { return getElement(this); }
-};
-Breadcrumb.style = {
-  ios: breadcrumbIosCss,
-  md: breadcrumbMdCss
-};
-
-export { Breadcrumb as ion_breadcrumb };

package/dist/esm/ion-breadcrumbs.entry.js

@@ -1,129 +0,0 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
-import { g as getIonMode } from './ionic-global-4903e23e.js';
-import { c as createColorClasses, h as hostContext } from './theme-7ef00c83.js';
-
-const breadcrumbsIosCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;flex-wrap:wrap;align-items:center}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator ion-icon{color:var(--ion-color-contrast)}:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator{background:rgba(var(--ion-color-contrast-rgb), 0.11)}:host(.in-toolbar){padding-left:20px;padding-right:20px;padding-top:0;padding-bottom:0;justify-content:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-toolbar){padding-left:unset;padding-right:unset;-webkit-padding-start:20px;padding-inline-start:20px;-webkit-padding-end:20px;padding-inline-end:20px}}";
-
-const breadcrumbsMdCss = ":host{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;flex-wrap:wrap;align-items:center}:host(.in-toolbar-color),:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator ion-icon{color:var(--ion-color-contrast)}:host(.in-toolbar-color) .breadcrumbs-collapsed-indicator{background:rgba(var(--ion-color-contrast-rgb), 0.11)}:host(.in-toolbar){padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-toolbar){padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}";
-
-const Breadcrumbs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.ionCollapsedClick = createEvent(this, "ionCollapsedClick", 7);
-    /**
-     * The number of breadcrumbs to show before the collapsed indicator.
-     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-     * the breadcrumbs will not be collapsed.
-     */
-    this.itemsBeforeCollapse = 1;
-    /**
-     * The number of breadcrumbs to show after the collapsed indicator.
-     * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
-     * the breadcrumbs will not be collapsed.
-     */
-    this.itemsAfterCollapse = 1;
-    this.breadcrumbsInit = () => {
-      this.setBreadcrumbSeparator();
-      this.setMaxItems();
-    };
-    this.resetActiveBreadcrumb = () => {
-      const breadcrumbs = this.getBreadcrumbs();
-      // Only reset the active breadcrumb if we were the ones to change it
-      // otherwise use the one set on the component
-      const activeBreadcrumb = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-      if (activeBreadcrumb && this.activeChanged) {
-        activeBreadcrumb.active = false;
-      }
-    };
-    this.setMaxItems = () => {
-      const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-      const breadcrumbs = this.getBreadcrumbs();
-      for (const breadcrumb of breadcrumbs) {
-        breadcrumb.showCollapsedIndicator = false;
-        breadcrumb.collapsed = false;
-      }
-      // If the number of breadcrumbs exceeds the maximum number of items
-      // that should show and the items before / after collapse do not
-      // exceed the maximum items then we need to collapse the breadcrumbs
-      const shouldCollapse = maxItems !== undefined && breadcrumbs.length > maxItems && itemsBeforeCollapse + itemsAfterCollapse <= maxItems;
-      if (shouldCollapse) {
-        // Show the collapsed indicator in the first breadcrumb that collapses
-        breadcrumbs.forEach((breadcrumb, index) => {
-          if (index === itemsBeforeCollapse) {
-            breadcrumb.showCollapsedIndicator = true;
-          }
-          // Collapse all breadcrumbs that have an index greater than or equal to
-          // the number before collapse and an index less than the total number
-          // of breadcrumbs minus the items that should show after the collapse
-          if (index >= itemsBeforeCollapse && index < breadcrumbs.length - itemsAfterCollapse) {
-            breadcrumb.collapsed = true;
-          }
-        });
-      }
-    };
-    this.setBreadcrumbSeparator = () => {
-      const { itemsAfterCollapse, itemsBeforeCollapse, maxItems } = this;
-      const breadcrumbs = this.getBreadcrumbs();
-      // Check if an active breadcrumb exists already
-      const active = breadcrumbs.find((breadcrumb) => breadcrumb.active);
-      // Set the separator on all but the last breadcrumb
-      for (const breadcrumb of breadcrumbs) {
-        // The only time the last breadcrumb changes is when
-        // itemsAfterCollapse is set to 0, in this case the
-        // last breadcrumb will be the collapsed indicator
-        const last = maxItems !== undefined && itemsAfterCollapse === 0
-          ? breadcrumb === breadcrumbs[itemsBeforeCollapse]
-          : breadcrumb === breadcrumbs[breadcrumbs.length - 1];
-        breadcrumb.last = last;
-        // If the breadcrumb has defined whether or not to show the
-        // separator then use that value, otherwise check if it's the
-        // last breadcrumb
-        const separator = breadcrumb.separator !== undefined ? breadcrumb.separator : last ? undefined : true;
-        breadcrumb.separator = separator;
-        // If there is not an active breadcrumb already
-        // set the last one to active
-        if (!active && last) {
-          breadcrumb.active = true;
-          this.activeChanged = true;
-        }
-      }
-    };
-    this.getBreadcrumbs = () => {
-      return Array.from(this.el.querySelectorAll('ion-breadcrumb'));
-    };
-  }
-  onCollapsedClick(ev) {
-    const breadcrumbs = this.getBreadcrumbs();
-    const collapsedBreadcrumbs = breadcrumbs.filter((breadcrumb) => breadcrumb.collapsed);
-    this.ionCollapsedClick.emit(Object.assign(Object.assign({}, ev.detail), { collapsedBreadcrumbs }));
-  }
-  maxItemsChanged() {
-    this.resetActiveBreadcrumb();
-    this.breadcrumbsInit();
-  }
-  componentWillLoad() {
-    this.breadcrumbsInit();
-  }
-  render() {
-    const { color, collapsed } = this;
-    const mode = getIonMode(this);
-    return (h(Host, { class: createColorClasses(color, {
-        [mode]: true,
-        'in-toolbar': hostContext('ion-toolbar', this.el),
-        'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
-        'breadcrumbs-collapsed': collapsed,
-      }) }, h("slot", null)));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "maxItems": ["maxItemsChanged"],
-    "itemsBeforeCollapse": ["maxItemsChanged"],
-    "itemsAfterCollapse": ["maxItemsChanged"]
-  }; }
-};
-Breadcrumbs.style = {
-  ios: breadcrumbsIosCss,
-  md: breadcrumbsMdCss
-};
-
-export { Breadcrumbs as ion_breadcrumbs };