@sparkle-learning/core 0.0.33 → 0.0.36

package/dist/esm/ion-reorder-group.entry.js

@@ -1,7 +1,9 @@
-import { r as registerInstance, i as createEvent, h, e as getElement, H as Host } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { c as componentOnReady } from './helpers-9d0930de.js';
-import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic-99c9e346.js';
+import { r as registerInstance, i as createEvent, h, e as getElement, H as Host } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { f as findClosestIonContent, g as getScrollElement } from './index-5e8971ae.js';
+import { a as hapticSelectionStart, b as hapticSelectionChanged, c as hapticSelectionEnd } from './haptic-522f76f2.js';
+import './helpers-bf0e23d6.js';
+import './index-dad75b83.js';
 
 const reorderGroupCss = ".reorder-list-active>*{transition:transform 300ms;will-change:transform}.reorder-enabled{user-select:none}.reorder-enabled ion-reorder{display:block;cursor:grab;pointer-events:all;touch-action:none}.reorder-selected,.reorder-selected ion-reorder{cursor:grabbing}.reorder-selected{position:relative;transition:none !important;box-shadow:0 0 10px rgba(0, 0, 0, 0.4);opacity:0.8;z-index:100}.reorder-visible ion-reorder .reorder-icon{transform:translate3d(0,  0,  0)}";
 
@@ -28,21 +30,20 @@ const ReorderGroup = class {
     }
   }
   async connectedCallback() {
-    const contentEl = this.el.closest('ion-content');
+    const contentEl = findClosestIonContent(this.el);
     if (contentEl) {
-      await new Promise(resolve => componentOnReady(contentEl, resolve));
-      this.scrollEl = await contentEl.getScrollElement();
+      this.scrollEl = await getScrollElement(contentEl);
     }
-    this.gesture = (await import('./index-a12c14bd.js')).createGesture({
+    this.gesture = (await import('./index-21661af2.js')).createGesture({
       el: this.el,
       gestureName: 'reorder',
       gesturePriority: 110,
       threshold: 0,
       direction: 'y',
       passive: false,
-      canStart: detail => this.canStart(detail),
-      onStart: ev => this.onStart(ev),
-      onMove: ev => this.onMove(ev),
+      canStart: (detail) => this.canStart(detail),
+      onStart: (ev) => this.onStart(ev),
+      onMove: (ev) => this.onMove(ev),
       onEnd: () => this.onEnd(),
     });
     this.disabledChanged();
@@ -88,7 +89,7 @@ const ReorderGroup = class {
   }
   onStart(ev) {
     ev.event.preventDefault();
-    const item = this.selectedItemEl = ev.data;
+    const item = (this.selectedItemEl = ev.data);
     const heights = this.cachedHeights;
     heights.length = 0;
     const el = this.el;
@@ -162,7 +163,7 @@ const ReorderGroup = class {
       this.ionItemReorder.emit({
         from: fromIndex,
         to: toIndex,
-        complete: this.completeSync.bind(this)
+        complete: this.completeSync.bind(this),
       });
     }
     hapticSelectionEnd();
@@ -175,9 +176,7 @@ const ReorderGroup = class {
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
       if (toIndex !== fromIndex && (listOrReorder === undefined || listOrReorder === true)) {
-        const ref = (fromIndex < toIndex)
-          ? children[toIndex + 1]
-          : children[toIndex];
+        const ref = fromIndex < toIndex ? children[toIndex + 1] : children[toIndex];
         this.el.insertBefore(selectedItemEl, ref);
       }
       if (Array.isArray(listOrReorder)) {

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { r as reorderThreeOutline, l as reorderTwoSharp } from './index-ea26196a.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 { r as reorderThreeOutline, l as reorderTwoSharp } from './index-4044fde9.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
 
 const reorderIosCss = ":host([slot]){display:none;line-height:0;z-index:100}.reorder-icon{display:block;font-size:22px}.reorder-icon{font-size:34px;opacity:0.4}";
 

package/dist/esm/ion-route-redirect.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, i as createEvent } from './index-5568e3fa.js';
+import { r as registerInstance, i as createEvent } from './index-c04b9ed5.js';
 
 const RouteRedirect = class {
   constructor(hostRef) {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, i as createEvent } from './index-5568e3fa.js';
+import { r as registerInstance, i as createEvent } from './index-c04b9ed5.js';
 
 const Route = class {
   constructor(hostRef) {

package/dist/esm/ion-router-link.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { o as openURL, c as createColorClasses } from './theme-c336c9d9.js';
+import { r as registerInstance, h, H as Host } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { o as openURL, c as createColorClasses } from './theme-7ef00c83.js';
 
 const routerLinkCss = ":host{--background:transparent;--color:var(--ion-color-primary, #3880ff);background:var(--background);color:var(--color)}:host(.ion-color){color:var(--ion-color-base)}a{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}";
 
@@ -21,11 +21,11 @@ const RouterLink = class {
     const attrs = {
       href: this.href,
       rel: this.rel,
-      target: this.target
+      target: this.target,
     };
     return (h(Host, { onClick: this.onClick, class: createColorClasses(this.color, {
         [mode]: true,
-        'ion-activatable': true
+        'ion-activatable': true,
       }) }, h("a", Object.assign({}, attrs), h("slot", null))));
   }
 };

package/dist/esm/ion-router-outlet.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, h, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode, c as config } from './ionic-global-0939c477.js';
-import { g as getTimeGivenProgression } from './cubic-bezier-a7ad9c8e.js';
-import { a as attachComponent, d as detachComponent } from './framework-delegate-518bd233.js';
-import { s as shallowEqualStringMap } from './helpers-9d0930de.js';
-import { t as transition } from './index-8de9446b.js';
+import { r as registerInstance, i as createEvent, h, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode, c as config } from './ionic-global-4903e23e.js';
+import { g as getTimeGivenProgression } from './cubic-bezier-4c0db14f.js';
+import { a as attachComponent, d as detachComponent } from './framework-delegate-3e634a5c.js';
+import { s as shallowEqualStringMap } from './helpers-bf0e23d6.js';
+import { t as transition } from './index-2b84cad2.js';
 
 const routeOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
 
@@ -35,7 +35,7 @@ const RouterOutlet = class {
         this.swipeHandler.onStart();
       }
     };
-    this.gesture = (await import('./swipe-back-9a3b2cdd.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), step => this.ani && this.ani.progressStep(step), (shouldComplete, step, dur) => {
+    this.gesture = (await import('./swipe-back-7847a0c1.js')).createSwipeBackGesture(this.el, () => !this.gestureOrAnimationInProgress && !!this.swipeHandler && this.swipeHandler.canStart(), () => onStart(), (step) => { var _a; return (_a = this.ani) === null || _a === void 0 ? void 0 : _a.progressStep(step); }, (shouldComplete, step, dur) => {
       if (this.ani) {
         this.ani.onFinish(() => {
           this.gestureOrAnimationInProgress = false;
@@ -44,7 +44,7 @@ const RouterOutlet = class {
           }
         }, { oneTimeCallback: true });
         // Account for rounding errors in JS
-        let newStepValue = (shouldComplete) ? -0.001 : 0.001;
+        let newStepValue = shouldComplete ? -0.001 : 0.001;
         /**
          * Animation will be reversed here, so need to
          * reverse the easing curve as well
@@ -95,21 +95,23 @@ const RouterOutlet = class {
     const changed = await this.setRoot(id, params, {
       duration: direction === 'root' ? 0 : undefined,
       direction: direction === 'back' ? 'back' : 'forward',
-      animationBuilder: animation
+      animationBuilder: animation,
     });
     return {
       changed,
-      element: this.activeEl
+      element: this.activeEl,
     };
   }
   /** @internal */
   async getRouteId() {
     const active = this.activeEl;
-    return active ? {
-      id: active.tagName,
-      element: active,
-      params: this.activeParams,
-    } : undefined;
+    return active
+      ? {
+        id: active.tagName,
+        element: active,
+        params: this.activeParams,
+      }
+      : undefined;
   }
   async setRoot(component, params, opts) {
     if (this.activeComponent === component && shallowEqualStringMap(params, this.activeParams)) {
@@ -138,8 +140,8 @@ const RouterOutlet = class {
     await transition(Object.assign(Object.assign({ mode,
       animated,
       enteringEl,
-      leavingEl, baseEl: el, progressCallback: (opts.progressAnimation
-        ? ani => {
+      leavingEl, baseEl: el, progressCallback: opts.progressAnimation
+        ? (ani) => {
           /**
            * Because this progress callback is called asynchronously
            * it is possible for the gesture to start and end before
@@ -167,7 +169,7 @@ const RouterOutlet = class {
             this.ani = ani;
           }
         }
-        : undefined) }, opts), { animationBuilder }));
+        : undefined }, opts), { animationBuilder }));
     // emit nav changed event
     this.ionNavDidChange.emit();
     return true;
@@ -175,14 +177,14 @@ const RouterOutlet = class {
   async lock() {
     const p = this.waitPromise;
     let resolve;
-    this.waitPromise = new Promise(r => resolve = r);
+    this.waitPromise = new Promise((r) => (resolve = r));
     if (p !== undefined) {
       await p;
     }
     return resolve;
   }
   render() {
-    return (h("slot", null));
+    return h("slot", null);
   }
   get el() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, i as createEvent, e as getElement } from './index-5568e3fa.js';
-import { c as componentOnReady, k as debounce } from './helpers-9d0930de.js';
+import { r as registerInstance, i as createEvent, e as getElement } from './index-c04b9ed5.js';
+import { c as componentOnReady, p as debounce } from './helpers-bf0e23d6.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -13,9 +13,7 @@ const ROUTER_INTENT_BACK = 'back';
  */
 /** Join the non empty segments with "/". */
 const generatePath = (segments) => {
-  const path = segments
-    .filter(s => s.length > 0)
-    .join('/');
+  const path = segments.filter((s) => s.length > 0).join('/');
   return '/' + path;
 };
 const generateUrl = (segments, useHash, queryString) => {
@@ -106,9 +104,10 @@ const parsePath = (path) => {
       queryString = path.substring(qsStart + 1);
       path = path.substring(0, qsStart);
     }
-    segments = path.split('/')
-      .map(s => s.trim())
-      .filter(s => s.length > 0);
+    segments = path
+      .split('/')
+      .map((s) => s.trim())
+      .filter((s) => s.length > 0);
     if (segments.length === 0) {
       segments = [''];
     }
@@ -123,8 +122,8 @@ const printRoutes = (routes) => {
   console.group(`[ion-core] ROUTES[${routes.length}]`);
   for (const chain of routes) {
     const segments = [];
-    chain.forEach(r => segments.push(...r.segments));
-    const ids = chain.map(r => r.id);
+    chain.forEach((r) => segments.push(...r.segments));
+    const ids = chain.map((r) => r.id);
     console.debug(`%c ${generatePath(segments)}`, 'font-weight: bold; padding-left: 20px', '=>\t', `(${ids.join(', ')})`);
   }
   console.groupEnd();
@@ -158,7 +157,7 @@ const writeNavState = async (root, chain, direction, index, changed = false, ani
     if (index >= chain.length || !outlet) {
       return changed;
     }
-    await new Promise(resolve => componentOnReady(outlet, resolve));
+    await new Promise((resolve) => componentOnReady(outlet, resolve));
     const route = chain[index];
     const result = await outlet.setRouteId(route.id, route.params, direction, animation);
     // if the outlet changed the page, reset navigation to neutral (no direction)
@@ -190,7 +189,8 @@ const readNavState = async (root) => {
   const ids = [];
   let outlet;
   let node = root;
-  while (outlet = searchNavNode(node)) {
+  // eslint-disable-next-line no-cond-assign
+  while ((outlet = searchNavNode(node))) {
     const id = await outlet.getRouteId();
     if (id) {
       node = id.element;
@@ -207,7 +207,7 @@ const waitUntilNavNode = () => {
   if (searchNavNode(document.body)) {
     return Promise.resolve();
   }
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     window.addEventListener('ionNavWillLoad', () => resolve(), { once: true });
   });
 };
@@ -255,7 +255,7 @@ const matchesRedirect = (segments, redirect) => {
 };
 /** Returns the first redirect matching the path segments or undefined when no match found. */
 const findRouteRedirect = (segments, redirects) => {
-  return redirects.find(redirect => matchesRedirect(segments, redirect));
+  return redirects.find((redirect) => matchesRedirect(segments, redirect));
 };
 const matchesIDs = (ids, chain) => {
   const len = Math.min(ids.length, chain.length);
@@ -289,7 +289,7 @@ const matchesIDs = (ids, chain) => {
         // [':s1',':s2']
         // ```
         //
-        const pathWithParams = routeIdParams.map(key => `:${key}`);
+        const pathWithParams = routeIdParams.map((key) => `:${key}`);
         for (let j = 0; j < pathWithParams.length; j++) {
           // Skip results where the path variable is not a match
           if (pathWithParams[j].toLowerCase() !== routeChain.segments[j]) {
@@ -340,9 +340,7 @@ const matchesSegments = (segments, chain) => {
       matchesDefault = false;
     }
   }
-  const matches = (matchesDefault)
-    ? matchesDefault === (inputSegments.next() === '')
-    : true;
+  const matches = matchesDefault ? matchesDefault === (inputSegments.next() === '') : true;
   if (!matches) {
     return null;
   }
@@ -352,7 +350,7 @@ const matchesSegments = (segments, chain) => {
       segments: route.segments,
       params: mergeParams(route.params, allparams[i]),
       beforeEnter: route.beforeEnter,
-      beforeLeave: route.beforeLeave
+      beforeLeave: route.beforeLeave,
     }));
   }
   return chain;
@@ -387,7 +385,7 @@ const findChainForIDs = (ids, chains) => {
       return ({
         id: route.id,
         segments: route.segments,
-        params: mergeParams(route.params, (_a = ids[i]) === null || _a === void 0 ? void 0 : _a.params)
+        params: mergeParams(route.params, (_a = ids[i]) === null || _a === void 0 ? void 0 : _a.params),
       });
     });
   }
@@ -473,8 +471,8 @@ const readProp = (el, prop) => {
  */
 const readRedirects = (root) => {
   return Array.from(root.children)
-    .filter(el => el.tagName === 'ION-ROUTE-REDIRECT')
-    .map(el => {
+    .filter((el) => el.tagName === 'ION-ROUTE-REDIRECT')
+    .map((el) => {
     const to = readProp(el, 'to');
     return {
       from: parsePath(readProp(el, 'from')).segments,
@@ -497,8 +495,8 @@ const readRoutes = (root) => {
  */
 const readRouteNodes = (node) => {
   return Array.from(node.children)
-    .filter(el => el.tagName === 'ION-ROUTE' && el.component)
-    .map(el => {
+    .filter((el) => el.tagName === 'ION-ROUTE' && el.component)
+    .map((el) => {
     const component = readProp(el, 'component');
     return {
       segments: parsePath(readProp(el, 'url')).segments,
@@ -506,7 +504,7 @@ const readRouteNodes = (node) => {
       params: el.componentProps,
       beforeLeave: el.beforeLeave,
       beforeEnter: el.beforeEnter,
-      children: readRouteNodes(el)
+      children: readRouteNodes(el),
     };
   });
 };
@@ -524,13 +522,16 @@ const flattenRouterTree = (nodes) => {
 };
 /** Flattens a route node recursively and push each branch to the chains list. */
 const flattenNode = (chain, chains, node) => {
-  chain = [...chain, {
+  chain = [
+    ...chain,
+    {
       id: node.id,
       segments: node.segments,
       params: node.params,
       beforeLeave: node.beforeLeave,
-      beforeEnter: node.beforeEnter
-    }];
+      beforeEnter: node.beforeEnter,
+    },
+  ];
   if (node.children.length === 0) {
     chains.push(chain);
     return;
@@ -604,7 +605,7 @@ const Router = class {
     return this.writeNavStateRoot(segments, direction);
   }
   onBackButton(ev) {
-    ev.detail.register(0, processNextHandler => {
+    ev.detail.register(0, (processNextHandler) => {
       this.back();
       processNextHandler();
     });
@@ -669,7 +670,7 @@ const Router = class {
     const routes = readRoutes(this.el);
     const chain = findChainForIDs(ids, routes);
     if (!chain) {
-      console.warn('[ion-router] no matching URL for ', ids.map(i => i.id));
+      console.warn('[ion-router] no matching URL for ', ids.map((i) => i.id));
       return false;
     }
     const segments = chainToSegments(chain);
@@ -750,7 +751,7 @@ const Router = class {
   async lock() {
     const p = this.waitPromise;
     let resolve;
-    this.waitPromise = new Promise(r => resolve = r);
+    this.waitPromise = new Promise((r) => (resolve = r));
     if (p !== undefined) {
       await p;
     }

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, i as createEvent, f as forceUpdate, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { n as arrowBackSharp, o as closeCircle, p as closeSharp, s as searchOutline, q as searchSharp } from './index-ea26196a.js';
-import { c as config, g as getIonMode } from './ionic-global-0939c477.js';
-import { l as debounceEvent, b as raf } from './helpers-9d0930de.js';
+import { r as registerInstance, i as createEvent, f as forceUpdate, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { n as arrowBackSharp, o as closeCircle, p as closeSharp, s as searchOutline, q as searchSharp } from './index-4044fde9.js';
+import { c as config, g as getIonMode } from './ionic-global-4903e23e.js';
+import { e as debounceEvent, l as raf } from './helpers-bf0e23d6.js';
 import { i as isRTL } from './dir-03012648.js';
-import { c as createColorClasses } from './theme-c336c9d9.js';
+import { c as createColorClasses } from './theme-7ef00c83.js';
 
 const searchbarIosCss = ".sc-ion-searchbar-ios-h{--placeholder-color:initial;--placeholder-font-style:initial;--placeholder-font-weight:initial;--placeholder-opacity:.5;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:center;width:100%;color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}.ion-color.sc-ion-searchbar-ios-h{color:var(--ion-color-contrast)}.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{background:var(--ion-color-base)}.ion-color.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:inherit}.searchbar-search-icon.sc-ion-searchbar-ios{color:var(--icon-color);pointer-events:none}.searchbar-input-container.sc-ion-searchbar-ios{display:block;position:relative;flex-shrink:1;width:100%}.searchbar-input.sc-ion-searchbar-ios{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;border-radius:var(--border-radius);display:block;width:100%;border:0;outline:none;background:var(--background);font-family:inherit;box-shadow:var(--box-shadow);box-sizing:border-box;appearance:none}.searchbar-input.sc-ion-searchbar-ios::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity)}.searchbar-input.sc-ion-searchbar-ios::-webkit-search-cancel-button,.searchbar-input.sc-ion-searchbar-ios::-ms-clear{display:none}.searchbar-cancel-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:none;height:100%;border:0;outline:none;color:var(--cancel-button-color);cursor:pointer;appearance:none}.searchbar-cancel-button.sc-ion-searchbar-ios>div.sc-ion-searchbar-ios{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.searchbar-clear-button.sc-ion-searchbar-ios{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:none;min-height:0;outline:none;color:var(--clear-button-color);appearance:none}.searchbar-has-value.searchbar-should-show-clear.sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{display:block}.searchbar-disabled.sc-ion-searchbar-ios-h{cursor:default;opacity:0.4;pointer-events:none}.sc-ion-searchbar-ios-h{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);--border-radius:10px;--box-shadow:none;--cancel-button-color:var(--ion-color-primary, #3880ff);--clear-button-color:var(--ion-color-step-600, #666666);--color:var(--ion-text-color, #000);--icon-color:var(--ion-color-step-600, #666666);padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px;height:60px;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.sc-ion-searchbar-ios-h{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}.searchbar-input-container.sc-ion-searchbar-ios{height:36px}.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:calc(50% - 60px);left:5px;top:0;position:absolute;width:22px;height:100%;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:calc(50% - 60px);margin-inline-start:calc(50% - 60px)}}[dir=rtl].sc-ion-searchbar-ios .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{left:unset;right:unset;right:5px}.searchbar-input.sc-ion-searchbar-ios{padding-left:28px;padding-right:28px;padding-top:0;padding-bottom:0;height:100%;font-size:17px;font-weight:400;contain:strict}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-input.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:28px;padding-inline-start:28px;-webkit-padding-end:28px;padding-inline-end:28px}}.searchbar-clear-button.sc-ion-searchbar-ios{right:0;top:0;background-position:center;position:absolute;width:30px;height:100%;border:0;background-color:transparent}[dir=rtl].sc-ion-searchbar-ios .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl].sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios,[dir=rtl] .sc-ion-searchbar-ios-h .searchbar-clear-button.sc-ion-searchbar-ios{left:unset;right:unset;left:0}.searchbar-clear-icon.sc-ion-searchbar-ios{width:18px;height:100%}.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:8px;padding-right:0;padding-top:0;padding-bottom:0;flex-shrink:0;background-color:transparent;font-size:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-cancel-button.sc-ion-searchbar-ios{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:0;padding-inline-end:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:30px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{padding-left:unset;-webkit-padding-start:30px;padding-inline-start:30px}}.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{display:block}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios{transition:all 300ms ease}.searchbar-animated.searchbar-has-focus.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios,.searchbar-animated.searchbar-should-show-cancel.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{opacity:1;pointer-events:auto}.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:-100%;transform:translate3d(0,  0,  0);transition:all 300ms ease;opacity:0;pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.searchbar-animated.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{margin-right:unset;-webkit-margin-end:-100%;margin-inline-end:-100%}}.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios,.searchbar-no-animate.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{transition-duration:0ms}.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios{color:var(--ion-color-base)}@media (any-hover: hover){.ion-color.sc-ion-searchbar-ios-h .searchbar-cancel-button.sc-ion-searchbar-ios:hover{color:var(--ion-color-tint)}}ion-toolbar.sc-ion-searchbar-ios-h,ion-toolbar .sc-ion-searchbar-ios-h{padding-top:1px;padding-bottom:15px;height:52px}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color),ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color){color:inherit}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-cancel-button.sc-ion-searchbar-ios{color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-input.sc-ion-searchbar-ios{background:rgba(var(--ion-color-contrast-rgb), 0.07);color:currentColor}ion-toolbar.ion-color.sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios,ion-toolbar.ion-color .sc-ion-searchbar-ios-h:not(.ion-color) .searchbar-clear-button.sc-ion-searchbar-ios{color:currentColor;opacity:0.5}";
 
@@ -192,7 +192,7 @@ const Searchbar = class {
   }
   emitStyle() {
     this.ionStyle.emit({
-      'searchbar': true
+      searchbar: true,
     });
   }
   /**
@@ -218,7 +218,7 @@ const Searchbar = class {
     const value = this.getValue();
     const prevAlignLeft = this.shouldAlignLeft;
     const mode = getIonMode(this);
-    const shouldAlignLeft = (!this.animated || value.trim() !== '' || !!this.focused);
+    const shouldAlignLeft = !this.animated || value.trim() !== '' || !!this.focused;
     this.shouldAlignLeft = shouldAlignLeft;
     if (mode !== 'ios') {
       return;
@@ -255,9 +255,9 @@ const Searchbar = class {
         const textWidth = tempSpan.offsetWidth;
         tempSpan.remove();
         // Calculate the input padding
-        const inputLeft = 'calc(50% - ' + (textWidth / 2) + 'px)';
+        const inputLeft = 'calc(50% - ' + textWidth / 2 + 'px)';
         // Calculate the icon margin
-        const iconLeft = 'calc(50% - ' + ((textWidth / 2) + 30) + 'px)';
+        const iconLeft = 'calc(50% - ' + (textWidth / 2 + 30) + 'px)';
         // Set the input padding start and icon margin start
         if (rtl) {
           inputEl.style.paddingRight = inputLeft;
@@ -314,7 +314,7 @@ const Searchbar = class {
    * 2. `showCancelButton` is set to `focus`, and the searchbar has been focused.
    */
   shouldShowCancelButton() {
-    if ((this.showCancelButton === 'never') || (this.showCancelButton === 'focus' && !this.focused)) {
+    if (this.showCancelButton === 'never' || (this.showCancelButton === 'focus' && !this.focused)) {
       return false;
     }
     return true;
@@ -326,7 +326,7 @@ const Searchbar = class {
    * 2. `showClearButton` is set to `focus`, and the searchbar has been focused.
    */
   shouldShowClearButton() {
-    if ((this.showClearButton === 'never') || (this.showClearButton === 'focus' && !this.focused)) {
+    if (this.showClearButton === 'never' || (this.showClearButton === 'focus' && !this.focused)) {
       return false;
     }
     return true;
@@ -338,9 +338,7 @@ const Searchbar = class {
     const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
     const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
     const shouldShowCancelButton = this.shouldShowCancelButton();
-    const cancelButton = (this.showCancelButton !== 'never') && (h("button", { "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { "aria-hidden": "true" }, mode === 'md'
-      ? h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })
-      : cancelButtonText)));
+    const cancelButton = this.showCancelButton !== 'never' && (h("button", { "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
     return (h(Host, { role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
         [mode]: true,
         'searchbar-animated': animated,
@@ -350,8 +348,8 @@ const Searchbar = class {
         'searchbar-left-aligned': this.shouldAlignLeft,
         'searchbar-has-focus': this.focused,
         'searchbar-should-show-clear': this.shouldShowClearButton(),
-        'searchbar-should-show-cancel': this.shouldShowCancelButton()
-      }) }, h("div", { class: "searchbar-input-container" }, h("input", { "aria-label": "search text", disabled: this.disabled, ref: el => this.nativeInput = el, class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onMouseDown: ev => this.onClearInput(ev, true), onTouchStart: ev => this.onClearInput(ev, true) }, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+        'searchbar-should-show-cancel': this.shouldShowCancelButton(),
+      }) }, h("div", { class: "searchbar-input-container" }, h("input", { "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onMouseDown: (ev) => this.onClearInput(ev, true), onTouchStart: (ev) => this.onClearInput(ev, true) }, h("ion-icon", { "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, e as getElement } from './index-5568e3fa.js';
-import { g as getIonMode } from './ionic-global-0939c477.js';
-import { a as addEventListener, r as removeEventListener } from './helpers-9d0930de.js';
-import { h as hostContext } from './theme-c336c9d9.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { a as addEventListener, r as removeEventListener } from './helpers-bf0e23d6.js';
+import { h as hostContext } from './theme-7ef00c83.js';
 
 const segmentButtonIosCss = ":host{--color:initial;--color-hover:var(--color);--color-checked:var(--color);--color-disabled:var(--color);--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;border-radius:var(--border-radius);display:flex;position:relative;flex:1 1 auto;flex-direction:column;height:auto;background:var(--background);color:var(--color);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;font-kerning:none;cursor:pointer}.button-native{border-radius:0;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;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);transform:translate3d(0,  0,  0);display:flex;position:relative;flex-direction:inherit;flex-grow:1;align-items:center;justify-content:center;width:100%;min-width:inherit;max-width:inherit;height:auto;min-height:inherit;max-height:inherit;transition:var(--transition);border:none;outline:none;background:transparent;contain:content;pointer-events:none;overflow:hidden;z-index:2}@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-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{display:flex;position:relative;flex-flow:inherit;align-items:center;justify-content:center;width:100%;height:100%;z-index:1}:host(.segment-button-checked){background:var(--background-checked);color:var(--color-checked)}:host(.segment-button-disabled){cursor:default;pointer-events:none}: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(:focus){outline: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(.segment-button-checked:hover) .button-native{color:var(--color-checked)}}::slotted(ion-icon){flex-shrink:0;order:-1;pointer-events:none}::slotted(ion-label){display:block;align-self:center;line-height:22px;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;pointer-events:none}:host(.segment-button-layout-icon-top) .button-native{flex-direction:column}:host(.segment-button-layout-icon-start) .button-native{flex-direction:row}:host(.segment-button-layout-icon-end) .button-native{flex-direction:row-reverse}:host(.segment-button-layout-icon-bottom) .button-native{flex-direction:column-reverse}:host(.segment-button-layout-icon-hide) ::slotted(ion-icon){display:none}:host(.segment-button-layout-label-hide) ::slotted(ion-label){display:none}ion-ripple-effect{color:var(--ripple-color, var(--color-checked))}.segment-button-indicator{transform-origin:left;position:absolute;opacity:0;box-sizing:border-box;will-change:transform, opacity;pointer-events:none}.segment-button-indicator-background{width:100%;height:var(--indicator-height);transform:var(--indicator-transform);box-shadow:var(--indicator-box-shadow);pointer-events:none}.segment-button-indicator-animated{transition:var(--indicator-transition)}:host(.segment-button-checked) .segment-button-indicator{opacity:1}@media (prefers-reduced-motion: reduce){.segment-button-indicator-background{transform:none}.segment-button-indicator-animated{transition:none}}:host{--background:none;--background-checked:none;--background-hover:none;--background-hover-opacity:0;--background-focused:none;--background-focused-opacity:0;--border-radius:7px;--border-width:1px;--border-color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);--border-style:solid;--indicator-box-shadow:0 0 5px rgba(0, 0, 0, 0.16);--indicator-color:var(--ion-color-step-350, var(--ion-background-color, #fff));--indicator-height:100%;--indicator-transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);--indicator-transform:none;--transition:100ms all linear;--padding-top:0;--padding-end:13px;--padding-bottom:0;--padding-start:13px;margin-top:2px;margin-bottom:2px;position:relative;flex-basis:0;flex-direction:row;min-width:70px;min-height:28px;transform:translate3d(0, 0, 0);font-size:13px;font-weight:450;line-height:37px}:host::before{margin-left:0;margin-right:0;margin-top:5px;margin-bottom:5px;transition:160ms opacity ease-in-out;transition-delay:100ms;border-left:var(--border-width) var(--border-style) var(--border-color);content:\"\";opacity:1;will-change:opacity}:host(:first-of-type)::before{border-left-color:transparent}:host(.segment-button-disabled){opacity:0.3}::slotted(ion-icon){font-size:24px}:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:2px;margin-right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-start) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:0;margin-inline-end:0}}:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:0;margin-right:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.segment-button-layout-icon-end) ::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:2px;margin-inline-end:2px}}.segment-button-indicator{padding-left:2px;padding-right:2px;left:0;right:0;top:0;bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.segment-button-indicator{padding-left:unset;padding-right:unset;-webkit-padding-start:2px;padding-inline-start:2px;-webkit-padding-end:2px;padding-inline-end:2px}}.segment-button-indicator-background{border-radius:var(--border-radius);background:var(--indicator-color)}.segment-button-indicator-background{transition:var(--indicator-transition)}:host(.segment-button-checked)::before,:host(.segment-button-after-checked)::before{opacity:0}:host(.segment-button-checked){z-index:-1}:host(.segment-button-activated){--indicator-transform:scale(0.95)}:host(.ion-focused) .button-native{opacity:0.7}@media (any-hover: hover){:host(:hover) .button-native{opacity:0.5}:host(.segment-button-checked:hover) .button-native{opacity:1}}:host(.in-segment-color){background:none;color:var(--ion-text-color, #000)}:host(.in-segment-color) .segment-button-indicator-background{background:var(--ion-color-step-350, var(--ion-background-color, #fff))}@media (any-hover: hover){:host(.in-segment-color:hover) .button-native,:host(.in-segment-color.segment-button-checked:hover) .button-native{color:var(--ion-text-color, #000)}}:host(.in-toolbar:not(.in-segment-color)){--background-checked:var(--ion-toolbar-segment-background-checked, none);--color:var(--ion-toolbar-segment-color, var(--ion-toolbar-color), initial);--color-checked:var(--ion-toolbar-segment-color-checked, var(--ion-toolbar-color), initial);--indicator-color:var(--ion-toolbar-segment-indicator-color, var(--ion-color-step-350, var(--ion-background-color, #fff)))}:host(.in-toolbar-color) .segment-button-indicator-background{background:#fff}:host(.in-toolbar-color:not(.in-segment-color)) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color)) .button-native{color:var(--ion-color-base)}@media (any-hover: hover){:host(.in-toolbar-color:not(.in-segment-color):hover) .button-native{color:var(--ion-color-contrast)}:host(.in-toolbar-color.segment-button-checked:not(.in-segment-color):hover) .button-native{color:var(--ion-color-base)}}";
 
@@ -28,7 +28,7 @@ const SegmentButton = class {
     /**
      * The value of the segment button.
      */
-    this.value = 'ion-sb-' + (ids++);
+    this.value = 'ion-sb-' + ids++;
     this.updateStyle = () => {
       forceUpdate(this);
     };
@@ -39,7 +39,7 @@ const SegmentButton = class {
     };
   }
   connectedCallback() {
-    const segmentEl = this.segmentEl = this.el.closest('ion-segment');
+    const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
     if (segmentEl) {
       this.updateState();
       addEventListener(segmentEl, 'ionSelect', this.updateState);
@@ -66,7 +66,7 @@ const SegmentButton = class {
   render() {
     const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl, tabIndex } = this;
     const mode = getIonMode(this);
-    const hasSegmentColor = () => segmentEl !== null && segmentEl.color !== undefined;
+    const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
     return (h(Host, { role: "tab", "aria-selected": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabIndex: tabIndex, class: {
         [mode]: true,
         'in-toolbar': hostContext('ion-toolbar', this.el),
@@ -85,7 +85,7 @@ const SegmentButton = class {
         'ion-focusable': true,
       } }, h("button", { type: type, tabIndex: -1, class: "button-native", part: "native", disabled: disabled }, h("span", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", null)), h("div", { part: "indicator", class: {
         'segment-button-indicator': true,
-        'segment-button-indicator-animated': true
+        'segment-button-indicator-animated': true,
       } }, h("div", { part: "indicator-background", class: "segment-button-indicator-background" }))));
   }
   get el() { return getElement(this); }