@sparkle-learning/core 0.0.33 → 0.0.36

package/dist/esm/{theme-c336c9d9.js → theme-7ef00c83.js}

@@ -8,21 +8,22 @@ const hostContext = (selector, el) => {
  * Create the mode and color classes for the component based on the classes passed in
  */
 const createColorClasses = (color, cssClassMap) => {
-  return (typeof color === 'string' && color.length > 0) ? Object.assign({ 'ion-color': true, [`ion-color-${color}`]: true }, cssClassMap) : cssClassMap;
+  return typeof color === 'string' && color.length > 0
+    ? Object.assign({ 'ion-color': true, [`ion-color-${color}`]: true }, cssClassMap) : cssClassMap;
 };
 const getClassList = (classes) => {
   if (classes !== undefined) {
     const array = Array.isArray(classes) ? classes : classes.split(' ');
     return array
-      .filter(c => c != null)
-      .map(c => c.trim())
-      .filter(c => c !== '');
+      .filter((c) => c != null)
+      .map((c) => c.trim())
+      .filter((c) => c !== '');
   }
   return [];
 };
 const getClassMap = (classes) => {
   const map = {};
-  getClassList(classes).forEach(c => map[c] = true);
+  getClassList(classes).forEach((c) => (map[c] = true));
   return map;
 };
 const SCHEME = /^[a-z][a-z0-9+\-.]*:/;

package/dist/esm/{util-a831d09d.js → util-6ef753e9.js}

@@ -2448,4 +2448,4 @@ function date(date) {
   return format(new Date(date), 'DD MMM YYYY');
 }
 
-export { GetGoalAppData as G, MyGoalTemplate as M, SparkleGlobal as S, MyGoalTemplateJSON as a, MyHealthTemplate as b, MyHealthTemplateJSON as c, MyMoodTemplate as d, MyMoodTemplateJSON as e, date as f, sample as s };
+export { GetGoalAppData as G, MyHealthTemplate as M, SparkleGlobal as S, MyHealthTemplateJSON as a, MyMoodTemplate as b, MyMoodTemplateJSON as c, date as d, MyGoalTemplate as e, MyGoalTemplateJSON as f, sample as s };

package/dist/node_modules/@ionic/core/dist/collection/components/content/content.css

@@ -68,7 +68,14 @@
   color: var(--color);
   box-sizing: border-box;
   overflow: hidden;
-  touch-action: manipulation;
+  /**
+   * touch-action: manipulation is an alias
+   * for this, but WebKit has an issue
+   * where pointercancel events are not fired
+   * when scrolling: https://bugs.webkit.org/show_bug.cgi?id=240917
+   * Using the long form below avoids the issue.
+   */
+  touch-action: pan-x pan-y pinch-zoom;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   .inner-scroll {

package/dist/node_modules/@ionic/core/dist/collection/components/datetime/datetime.ios.css

@@ -10,12 +10,37 @@
   overflow: hidden;
 }
 
+/**
+ * When using the wheel picker to switch
+ * between months, sometimes the allowed
+ * dates may be filtered. As a result, it
+ * is possible to get a layout shift as
+ * the picker column will shrink to fit the
+ * widest item in the column. Setting a minimum
+ * width avoids this layout shifting.
+ */
+ion-picker-column-internal {
+  min-width: 26px;
+}
+
 :host(.datetime-size-fixed) {
   width: auto;
-  max-width: 350px;
   height: auto;
 }
 
+:host(.datetime-size-fixed:not(.datetime-prefer-wheel)) {
+  max-width: 350px;
+}
+
+/**
+ * This ensures that the picker is apppropriately
+ * sized and never truncates the text.
+ */
+:host(.datetime-size-fixed.datetime-prefer-wheel) {
+  min-width: 350px;
+  max-width: max-content;
+}
+
 :host(.datetime-size-cover) {
   width: 100%;
 }
@@ -49,20 +74,17 @@
  * the order we need to manually switch
  * the text alignment too.
  */
-:host .datetime-year .order-month-first .month-column {
-  order: 1;
-}
-
-:host .datetime-year .order-month-first .year-column {
-  order: 2;
+:host .wheel-order-year-first .day-column {
+  order: 3;
+  text-align: end;
 }
 
-:host .datetime-year .order-year-first .month-column {
+:host .wheel-order-year-first .month-column {
   order: 2;
   text-align: end;
 }
 
-:host .datetime-year .order-year-first .year-column {
+:host .wheel-order-year-first .year-column {
   order: 1;
   text-align: start;
 }
@@ -87,9 +109,8 @@
 }
 
 /**
- * Safari 14 has an issue where Intersection
- * Observer is incorrectly fired when
- * unhiding the calendar content.
+ * Safari 14 has an issue where a scroll event
+ * is incorrectly fired when unhiding the calendar content.
  * To workaround this, we set the opacity
  * of the content to 0 and hide it offscreen.
  *
@@ -138,6 +159,10 @@
     display: none;
   }
 }
+:host(.month-year-picker-open) .datetime-footer {
+  display: none;
+}
+
 :host(.datetime-readonly),
 :host(.datetime-disabled) {
   pointer-events: none;
@@ -327,14 +352,18 @@
   padding-right: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
+  position: absolute;
   /**
    * Explicit position values are required here
    * as pseudo element positioning is incorrect
    * in older implementations of css grid.
+   *
+   * TODO: FW-1720: Remove top/left styles when deprecating iOS 13 support
    */
-  left: 50%;
+  /* stylelint-disable-next-line property-disallowed-list */
   top: 50%;
-  position: absolute;
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: 50%;
   width: 32px;
   height: 32px;
   transform: translate(-50%, -50%);
@@ -351,11 +380,6 @@
     padding-inline-end: 4px;
   }
 }
-:host-context([dir=rtl]) {
-  left: unset;
-  right: unset;
-  right: 50%;
-}
 
 :host .datetime-time {
   display: flex;
@@ -422,9 +446,9 @@
   --title-color: var(--ion-color-step-600, #666666);
 }
 
-:host(.datetime-presentation-date-time),
-:host(.datetime-presentation-time-date),
-:host(.datetime-presentation-date) {
+:host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
+:host(.datetime-presentation-time-date:not(.datetime-prefer-wheel)),
+:host(.datetime-presentation-date:not(.datetime-prefer-wheel)) {
   min-height: 350px;
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/datetime/datetime.md.css

@@ -10,12 +10,37 @@
   overflow: hidden;
 }
 
+/**
+ * When using the wheel picker to switch
+ * between months, sometimes the allowed
+ * dates may be filtered. As a result, it
+ * is possible to get a layout shift as
+ * the picker column will shrink to fit the
+ * widest item in the column. Setting a minimum
+ * width avoids this layout shifting.
+ */
+ion-picker-column-internal {
+  min-width: 26px;
+}
+
 :host(.datetime-size-fixed) {
   width: auto;
-  max-width: 350px;
   height: auto;
 }
 
+:host(.datetime-size-fixed:not(.datetime-prefer-wheel)) {
+  max-width: 350px;
+}
+
+/**
+ * This ensures that the picker is apppropriately
+ * sized and never truncates the text.
+ */
+:host(.datetime-size-fixed.datetime-prefer-wheel) {
+  min-width: 350px;
+  max-width: max-content;
+}
+
 :host(.datetime-size-cover) {
   width: 100%;
 }
@@ -49,20 +74,17 @@
  * the order we need to manually switch
  * the text alignment too.
  */
-:host .datetime-year .order-month-first .month-column {
-  order: 1;
-}
-
-:host .datetime-year .order-month-first .year-column {
-  order: 2;
+:host .wheel-order-year-first .day-column {
+  order: 3;
+  text-align: end;
 }
 
-:host .datetime-year .order-year-first .month-column {
+:host .wheel-order-year-first .month-column {
   order: 2;
   text-align: end;
 }
 
-:host .datetime-year .order-year-first .year-column {
+:host .wheel-order-year-first .year-column {
   order: 1;
   text-align: start;
 }
@@ -87,9 +109,8 @@
 }
 
 /**
- * Safari 14 has an issue where Intersection
- * Observer is incorrectly fired when
- * unhiding the calendar content.
+ * Safari 14 has an issue where a scroll event
+ * is incorrectly fired when unhiding the calendar content.
  * To workaround this, we set the opacity
  * of the content to 0 and hide it offscreen.
  *
@@ -138,6 +159,10 @@
     display: none;
   }
 }
+:host(.month-year-picker-open) .datetime-footer {
+  display: none;
+}
+
 :host(.datetime-readonly),
 :host(.datetime-disabled) {
   pointer-events: none;
@@ -327,14 +352,18 @@
   padding-right: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
+  position: absolute;
   /**
    * Explicit position values are required here
    * as pseudo element positioning is incorrect
    * in older implementations of css grid.
+   *
+   * TODO: FW-1720: Remove top/left styles when deprecating iOS 13 support
    */
-  left: 50%;
+  /* stylelint-disable-next-line property-disallowed-list */
   top: 50%;
-  position: absolute;
+  /* stylelint-disable-next-line property-disallowed-list */
+  left: 50%;
   width: 32px;
   height: 32px;
   transform: translate(-50%, -50%);
@@ -351,11 +380,6 @@
     padding-inline-end: 4px;
   }
 }
-:host-context([dir=rtl]) {
-  left: unset;
-  right: unset;
-  right: 50%;
-}
 
 :host .datetime-time {
   display: flex;

package/dist/node_modules/@ionic/core/dist/collection/components/datetime-button/datetime-button.css

@@ -0,0 +1,60 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:host button {
+  border-radius: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  margin-left: 2px;
+  margin-right: 2px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  position: relative;
+  transition: 150ms color ease-in-out;
+  border: none;
+  background: var(--ion-color-step-300, #edeef0);
+  color: var(--ion-text-color, #000);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  appearance: none;
+  overflow: hidden;
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host button {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: 12px;
+    padding-inline-start: 12px;
+    -webkit-padding-end: 12px;
+    padding-inline-end: 12px;
+  }
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  :host button {
+    margin-left: unset;
+    margin-right: unset;
+    -webkit-margin-start: 2px;
+    margin-inline-start: 2px;
+    -webkit-margin-end: 2px;
+    margin-inline-end: 2px;
+  }
+}
+
+:host(.time-active) #time-button,
+:host(.date-active) #date-button {
+  color: var(--ion-color-base);
+}
+
+:host(.datetime-button-disabled) {
+  pointer-events: none;
+}
+
+:host(.datetime-button-disabled) button {
+  opacity: 0.4;
+}

package/dist/node_modules/@ionic/core/dist/collection/components/item/item.ios.css

@@ -437,8 +437,9 @@ ion-ripple-effect {
 
 .item-counter {
   margin-left: auto;
-  padding-inline-start: 16px;
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
+  padding-inline-start: 16px;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   .item-counter {

package/dist/node_modules/@ionic/core/dist/collection/components/item/item.md.css

@@ -437,8 +437,9 @@ ion-ripple-effect {
 
 .item-counter {
   margin-left: auto;
-  padding-inline-start: 16px;
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
+  padding-inline-start: 16px;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   .item-counter {
@@ -923,6 +924,5 @@ ion-ripple-effect {
   }
 }
 .item-counter {
-  color: rgba(0, 0, 0, 0.6);
   letter-spacing: 0.0333333333em;
 }

package/dist/node_modules/@ionic/core/dist/collection/components/item-option/item-option.ios.css

@@ -11,24 +11,24 @@
 }
 
 :host(.in-list.item-options-end:last-child) {
-  padding-right: calc(.7em + var(--ion-safe-area-right));
+  padding-right: calc(0.7em + var(--ion-safe-area-right));
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   :host(.in-list.item-options-end:last-child) {
     padding-right: unset;
-    -webkit-padding-end: calc(.7em + var(--ion-safe-area-right));
-    padding-inline-end: calc(.7em + var(--ion-safe-area-right));
+    -webkit-padding-end: calc(0.7em + var(--ion-safe-area-right));
+    padding-inline-end: calc(0.7em + var(--ion-safe-area-right));
   }
 }
 
 :host(.in-list.item-options-start:first-child) {
-  padding-left: calc(.7em + var(--ion-safe-area-left));
+  padding-left: calc(0.7em + var(--ion-safe-area-left));
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   :host(.in-list.item-options-start:first-child) {
     padding-left: unset;
-    -webkit-padding-start: calc(.7em + var(--ion-safe-area-left));
-    padding-inline-start: calc(.7em + var(--ion-safe-area-left));
+    -webkit-padding-start: calc(0.7em + var(--ion-safe-area-left));
+    padding-inline-start: calc(0.7em + var(--ion-safe-area-left));
   }
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/item-option/item-option.md.css

@@ -11,24 +11,24 @@
 }
 
 :host(.in-list.item-options-end:last-child) {
-  padding-right: calc(.7em + var(--ion-safe-area-right));
+  padding-right: calc(0.7em + var(--ion-safe-area-right));
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   :host(.in-list.item-options-end:last-child) {
     padding-right: unset;
-    -webkit-padding-end: calc(.7em + var(--ion-safe-area-right));
-    padding-inline-end: calc(.7em + var(--ion-safe-area-right));
+    -webkit-padding-end: calc(0.7em + var(--ion-safe-area-right));
+    padding-inline-end: calc(0.7em + var(--ion-safe-area-right));
   }
 }
 
 :host(.in-list.item-options-start:first-child) {
-  padding-left: calc(.7em + var(--ion-safe-area-left));
+  padding-left: calc(0.7em + var(--ion-safe-area-left));
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
   :host(.in-list.item-options-start:first-child) {
     padding-left: unset;
-    -webkit-padding-start: calc(.7em + var(--ion-safe-area-left));
-    padding-inline-start: calc(.7em + var(--ion-safe-area-left));
+    -webkit-padding-start: calc(0.7em + var(--ion-safe-area-left));
+    padding-inline-start: calc(0.7em + var(--ion-safe-area-left));
   }
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/label/label.ios.css

@@ -78,7 +78,7 @@
 }
 :host(.label-floating) {
   margin-bottom: 0;
-  transform: translate3d(0,  29px,  0);
+  transform: translate(0, 29px);
   transform-origin: left top;
   transition: transform 150ms ease-in-out;
 }
@@ -87,13 +87,13 @@
 }
 
 :host-context(.item-textarea).label-floating {
-  transform: translate3d(0,  28px,  0);
+  transform: translate(0, 28px);
 }
 
 :host-context(.item-has-focus).label-floating,
 :host-context(.item-has-placeholder:not(.item-input)).label-floating,
 :host-context(.item-has-value).label-floating {
-  transform: translate3d(0,  0,  0) scale(0.82);
+  transform: scale(0.82);
 }
 
 ::slotted(*) h1 {

package/dist/node_modules/@ionic/core/dist/collection/components/loading/loading.ios.css

@@ -55,12 +55,7 @@
   z-index: 10;
 }
 
-.spinner-lines,
-.spinner-lines-small,
-.spinner-bubbles,
-.spinner-circles,
-.spinner-crescent,
-.spinner-dots {
+ion-spinner {
   color: var(--spinner-color);
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/loading/loading.md.css

@@ -55,12 +55,7 @@
   z-index: 10;
 }
 
-.spinner-lines,
-.spinner-lines-small,
-.spinner-bubbles,
-.spinner-circles,
-.spinner-crescent,
-.spinner-dots {
+ion-spinner {
   color: var(--spinner-color);
 }
 

package/dist/node_modules/@ionic/core/dist/collection/components/menu/menu.ios.css

@@ -35,7 +35,7 @@
   right: auto;
   top: 0;
   bottom: 0;
-  transform: translate3d(-9999px,  0,  0);
+  transform: translateX(-9999px);
   display: flex;
   position: absolute;
   flex-direction: column;
@@ -56,10 +56,6 @@
   right: 0;
 }
 
-[dir=rtl] .menu-inner, :host-context([dir=rtl]) .menu-inner {
-  transform: translate3d(calc(-1 * -9999px),  0,  0);
-}
-
 :host(.menu-side-start) .menu-inner {
   --ion-safe-area-right: 0px;
   /* stylelint-disable property-disallowed-list */

package/dist/node_modules/@ionic/core/dist/collection/components/menu/menu.md.css

@@ -35,7 +35,7 @@
   right: auto;
   top: 0;
   bottom: 0;
-  transform: translate3d(-9999px,  0,  0);
+  transform: translateX(-9999px);
   display: flex;
   position: absolute;
   flex-direction: column;
@@ -56,10 +56,6 @@
   right: 0;
 }
 
-[dir=rtl] .menu-inner, :host-context([dir=rtl]) .menu-inner {
-  transform: translate3d(calc(-1 * -9999px),  0,  0);
-}
-
 :host(.menu-side-start) .menu-inner {
   --ion-safe-area-right: 0px;
   /* stylelint-disable property-disallowed-list */

package/dist/node_modules/@ionic/core/dist/collection/components/modal/modal.ios.css

@@ -43,7 +43,8 @@
   contain: strict;
 }
 
-.modal-wrapper, ion-backdrop {
+.modal-wrapper,
+ion-backdrop {
   pointer-events: auto;
 }
 
@@ -105,7 +106,9 @@
    * on top of user content in WebKit.
    */
   transform: translateZ(0);
+  border: 0;
   background: var(--ion-color-step-350, #c0c0be);
+  cursor: pointer;
   z-index: 11;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
@@ -118,6 +121,31 @@
     margin-inline-end: auto;
   }
 }
+.modal-handle::before {
+  /**
+   * Adds a 4px tap area to the perimeter
+   * of the handle.
+   */
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  position: absolute;
+  width: 36px;
+  height: 5px;
+  transform: translate(-50%, -50%);
+  content: "";
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .modal-handle::before {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
+    -webkit-padding-end: 4px;
+    padding-inline-end: 4px;
+  }
+}
 
 /**
  * Ensure that the sheet modal does not
@@ -152,12 +180,12 @@
 }
 
 @media screen and (max-width: 767px) {
-  @supports (width: max(0px, 1px)) {
+  @supports (width: 1px) {
     :host(.modal-card) {
       --height: calc(100% - max(30px, var(--ion-safe-area-top)) - 10px);
     }
   }
-  @supports not (width: max(0px, 1px)) {
+  @supports not (width: 1px) {
     :host(.modal-card) {
       --height: calc(100% - 40px);
     }

package/dist/node_modules/@ionic/core/dist/collection/components/modal/modal.md.css

@@ -43,7 +43,8 @@
   contain: strict;
 }
 
-.modal-wrapper, ion-backdrop {
+.modal-wrapper,
+ion-backdrop {
   pointer-events: auto;
 }
 
@@ -105,7 +106,9 @@
    * on top of user content in WebKit.
    */
   transform: translateZ(0);
+  border: 0;
   background: var(--ion-color-step-350, #c0c0be);
+  cursor: pointer;
   z-index: 11;
 }
 @supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
@@ -118,6 +121,31 @@
     margin-inline-end: auto;
   }
 }
+.modal-handle::before {
+  /**
+   * Adds a 4px tap area to the perimeter
+   * of the handle.
+   */
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  position: absolute;
+  width: 36px;
+  height: 5px;
+  transform: translate(-50%, -50%);
+  content: "";
+}
+@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
+  .modal-handle::before {
+    padding-left: unset;
+    padding-right: unset;
+    -webkit-padding-start: 4px;
+    padding-inline-start: 4px;
+    -webkit-padding-end: 4px;
+    padding-inline-end: 4px;
+  }
+}
 
 /**
  * Ensure that the sheet modal does not