@sparkle-learning/core 0.0.34 → 0.0.37

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

@@ -1,7 +1,8 @@
-import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { h as close } from './index-ea26196a.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { h as hostContext, o as openURL, c as createColorClasses } from './theme-c336c9d9.js';
+import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { h as close } from './index-4044fde9.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { i as inheritAriaAttributes } from './helpers-03073fe4.js';
+import { h as hostContext, o as openURL, c as createColorClasses } from './theme-7ef00c83.js';
 
 const fabButtonIosCss = ":host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;font-kerning:none}.button-native{border-radius:var(--border-radius);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%;transform:var(--transform);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;appearance:none;box-sizing:border-box}@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)}}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{left:0;right:0;top:0;display:flex;position:absolute;flex-flow:row nowrap;flex-shrink:0;align-items:center;justify-content:center;height:100%;transition:all ease-in-out 300ms;transition-property:transform, opacity;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@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-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){margin-left:8px;margin-right:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-button-small){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px}}.close-icon{margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;left:0;right:0;top:0;position:absolute;height:100%;transform:scale(0.4) rotateZ(-45deg);transition:all ease-in-out 300ms;transition-property:transform, opacity;font-size:var(--close-icon-font-size);opacity:0;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.close-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.fab-button-close-active) .close-icon{transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent) .button-native{backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transition:0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59);--close-icon-font-size:28px}:host(.ion-activated){--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transform:scale(1.1);--transition:0.2s transform ease-out}::slotted(ion-icon){font-size:28px}:host(.fab-button-in-list){--background:var(--ion-color-light, #f4f5f8);--background-activated:var(--ion-color-light-shade, #d7d8da);--background-focused:var(--background-activated);--background-hover:var(--ion-color-light-tint, #f5f6f9);--color:var(--ion-color-light-contrast, #000);--color-activated:var(--ion-color-light-contrast, #000);--color-focused:var(--color-activated);--transition:transform 200ms ease 10ms, opacity 200ms ease 10ms}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}:host(.ion-color.ion-focused) .button-native,:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after,:host(.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}}@supports (backdrop-filter: blur(0)){:host(.fab-button-translucent){--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);--background-hover:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);--background-focused:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);--backdrop-filter:saturate(180%) blur(20px)}:host(.fab-button-translucent-in-list){--background:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);--background-hover:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);--background-focused:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82)}}@supports (backdrop-filter: blur(0)){@media (any-hover: hover){:host(.fab-button-translucent.ion-color:hover) .button-native{background:rgba(var(--ion-color-base-rgb), 0.8)}}:host(.ion-color.fab-button-translucent) .button-native{background:rgba(var(--ion-color-base-rgb), 0.9)}:host(.ion-color.ion-focused.fab-button-translucent) .button-native,:host(.ion-color.ion-activated.fab-button-translucent) .button-native{background:var(--ion-color-base)}}";
 
@@ -12,6 +13,8 @@ const FabButton = class {
     registerInstance(this, hostRef);
     this.ionFocus = createEvent(this, "ionFocus", 7);
     this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.fab = null;
+    this.inheritedAttributes = {};
     /**
      * If `true`, the fab button will be show a close icon.
      */
@@ -51,21 +54,34 @@ const FabButton = class {
     this.onBlur = () => {
       this.ionBlur.emit();
     };
+    this.onClick = () => {
+      const { fab } = this;
+      if (!fab) {
+        return;
+      }
+      fab.toggle();
+    };
+  }
+  connectedCallback() {
+    this.fab = this.el.closest('ion-fab');
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   render() {
-    const { el, disabled, color, href, activated, show, translucent, size } = this;
+    const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
     const inList = hostContext('ion-fab-list', el);
     const mode = getIonMode(this);
     const TagType = href === undefined ? 'button' : 'a';
-    const attrs = (TagType === 'button')
+    const attrs = TagType === 'button'
       ? { type: this.type }
       : {
         download: this.download,
         href,
         rel: this.rel,
-        target: this.target
+        target: this.target,
       };
-    return (h(Host, { "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+    return (h(Host, { onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
         [mode]: true,
         'fab-button-in-list': inList,
         'fab-button-translucent-in-list': inList && translucent,
@@ -76,7 +92,7 @@ const FabButton = class {
         'ion-activatable': true,
         'ion-focusable': true,
         [`fab-button-${size}`]: size !== undefined,
-      }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }), h("ion-icon", { icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", null))));
+      }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection, this.routerAnimation) }, inheritedAttributes), h("ion-icon", { icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", null))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/ion-fab-list.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
+import { r as registerInstance, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
 
 const fabListCss = ":host{margin-left:0;margin-right:0;margin-top:66px;margin-bottom:66px;display:none;position:absolute;top:0;flex-direction:column;align-items:center;min-width:56px;min-height:56px}:host(.fab-list-active){display:flex}::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:8px;margin-bottom:8px;width:40px;height:40px;transform:scale(0);opacity:0;visibility:hidden}:host(.fab-list-side-top) ::slotted(.fab-button-in-list),:host(.fab-list-side-bottom) ::slotted(.fab-button-in-list){margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px}:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){margin-left:5px;margin-right:5px;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-list-side-start) ::slotted(.fab-button-in-list),:host(.fab-list-side-end) ::slotted(.fab-button-in-list){margin-left:unset;margin-right:unset;-webkit-margin-start:5px;margin-inline-start:5px;-webkit-margin-end:5px;margin-inline-end:5px}}::slotted(.fab-button-in-list.fab-button-show){transform:scale(1);opacity:1;visibility:visible}:host(.fab-list-side-top){top:auto;bottom:0;flex-direction:column-reverse}:host(.fab-list-side-start){margin-left:66px;margin-right:66px;margin-top:0;margin-bottom:0;right:0;flex-direction:row-reverse}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-list-side-start){margin-left:unset;margin-right:unset;-webkit-margin-start:66px;margin-inline-start:66px;-webkit-margin-end:66px;margin-inline-end:66px}}:host-context([dir=rtl]):host(.fab-list-side-start),:host-context([dir=rtl]).fab-list-side-start{left:unset;right:unset;left:0}:host(.fab-list-side-end){margin-left:66px;margin-right:66px;margin-top:0;margin-bottom:0;left:0;flex-direction:row}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-list-side-end){margin-left:unset;margin-right:unset;-webkit-margin-start:66px;margin-inline-start:66px;-webkit-margin-end:66px;margin-inline-end:66px}}:host-context([dir=rtl]):host(.fab-list-side-end),:host-context([dir=rtl]).fab-list-side-end{left:unset;right:unset;right:0}";
 
@@ -20,7 +20,7 @@ const FabList = class {
     // if showing the fabs add a timeout, else show immediately
     const timeout = activated ? 30 : 0;
     fabs.forEach((fab, i) => {
-      setTimeout(() => fab.show = activated, i * timeout);
+      setTimeout(() => (fab.show = activated), i * timeout);
     });
   }
   render() {
@@ -28,7 +28,7 @@ const FabList = class {
     return (h(Host, { class: {
         [mode]: true,
         'fab-list-active': this.activated,
-        [`fab-list-side-${this.side}`]: true
+        [`fab-list-side-${this.side}`]: true,
       } }, h("slot", null)));
   }
   get el() { return getElement(this); }

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
+import { r as registerInstance, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
 
 const fabCss = ":host{position:absolute;z-index:999}:host(.fab-horizontal-center){left:50%;margin-left:-28px}:host-context([dir=rtl]):host(.fab-horizontal-center),:host-context([dir=rtl]).fab-horizontal-center{left:unset;right:unset;right:50%}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.fab-horizontal-center){margin-left:unset;-webkit-margin-start:-28px;margin-inline-start:-28px}}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{left:unset;right:unset;right:calc(10px + var(--ion-safe-area-left, 0px))}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:unset;right:unset;left:calc(10px + var(--ion-safe-area-right, 0px))}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:-28px}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:-28px}:host(.fab-vertical-center){margin-top:-28px;top:50%}";
 
@@ -17,14 +17,6 @@ const Fab = class {
      * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
      */
     this.activated = false;
-    this.onClick = () => {
-      const hasList = !!this.el.querySelector('ion-fab-list');
-      const getButton = this.getFab();
-      const isButtonDisabled = getButton && getButton.disabled;
-      if (hasList && !isButtonDisabled) {
-        this.activated = !this.activated;
-      }
-    };
   }
   activatedChanged() {
     const activated = this.activated;
@@ -32,7 +24,7 @@ const Fab = class {
     if (fab) {
       fab.activated = activated;
     }
-    Array.from(this.el.querySelectorAll('ion-fab-list')).forEach(list => {
+    Array.from(this.el.querySelectorAll('ion-fab-list')).forEach((list) => {
       list.activated = activated;
     });
   }
@@ -50,14 +42,24 @@ const Fab = class {
   getFab() {
     return this.el.querySelector('ion-fab-button');
   }
+  /**
+   * Opens/Closes the FAB list container.
+   * @internal
+   */
+  async toggle() {
+    const hasList = !!this.el.querySelector('ion-fab-list');
+    if (hasList) {
+      this.activated = !this.activated;
+    }
+  }
   render() {
     const { horizontal, vertical, edge } = this;
     const mode = getIonMode(this);
-    return (h(Host, { onClick: this.onClick, class: {
+    return (h(Host, { class: {
         [mode]: true,
         [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
         [`fab-vertical-${vertical}`]: vertical !== undefined,
-        'fab-edge': edge
+        'fab-edge': edge,
       } }, h("slot", null)));
   }
   get el() { return getElement(this); }

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

@@ -1,6 +1,8 @@
-import { j as readTask, w as writeTask, r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { e as clamp, c as componentOnReady } from './helpers-9d0930de.js';
+import { j as readTask, w as writeTask, r as registerInstance, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { a as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-37004831.js';
+import { d as clamp } from './helpers-03073fe4.js';
+import './index-dad75b83.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -27,7 +29,7 @@ const handleFooterFade = (scrollEl, baseEl) => {
      */
     const fadeStart = maxScroll - fadeDuration;
     const distanceToStart = scrollTop - fadeStart;
-    const scale = clamp(0, 1 - (distanceToStart / fadeDuration), 1);
+    const scale = clamp(0, 1 - distanceToStart / fadeDuration, 1);
     writeTask(() => {
       baseEl.style.setProperty('--opacity-scale', scale.toString());
     });
@@ -60,21 +62,22 @@ const Footer = class {
       this.destroyCollapsibleFooter();
       if (hasFade) {
         const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-        const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null;
+        const contentEl = pageEl ? findIonContent(pageEl) : null;
+        if (!contentEl) {
+          printIonContentErrorMsg(this.el);
+          return;
+        }
         this.setupFadeFooter(contentEl);
       }
     };
     this.setupFadeFooter = async (contentEl) => {
-      if (!contentEl) {
-        console.error('ion-footer requires a content to collapse. Make sure there is an ion-content.');
-        return;
-      }
-      await new Promise(resolve => componentOnReady(contentEl, resolve));
-      const scrollEl = this.scrollEl = await contentEl.getScrollElement();
+      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
       /**
        * Handle fading of toolbars on scroll
        */
-      this.contentScrollCallback = () => { handleFooterFade(scrollEl, this.el); };
+      this.contentScrollCallback = () => {
+        handleFooterFade(scrollEl, this.el);
+      };
       scrollEl.addEventListener('scroll', this.contentScrollCallback);
       handleFooterFade(scrollEl, this.el);
     };
@@ -101,8 +104,7 @@ const Footer = class {
         [`footer-translucent`]: translucent,
         [`footer-translucent-${mode}`]: translucent,
         [`footer-collapse-${collapse}`]: collapse !== undefined,
-      } }, mode === 'ios' && translucent &&
-      h("div", { class: "footer-background" }), h("slot", null)));
+      } }, mode === 'ios' && translucent && h("div", { class: "footer-background" }), h("slot", null)));
   }
   get el() { return getElement(this); }
 };