@sparkle-learning/core 0.0.32 → 0.0.35

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bae2a754.js');
-const helpers = require('./helpers-7e28976c.js');
+const index = require('./index-51e8292e.js');
+const helpers = require('./helpers-c2496722.js');
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -17,9 +17,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) => {
@@ -110,9 +108,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 = [''];
     }
@@ -127,8 +126,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();
@@ -162,7 +161,7 @@ const writeNavState = async (root, chain, direction, index, changed = false, ani
     if (index >= chain.length || !outlet) {
       return changed;
     }
-    await new Promise(resolve => helpers.componentOnReady(outlet, resolve));
+    await new Promise((resolve) => helpers.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)
@@ -194,7 +193,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;
@@ -211,7 +211,7 @@ const waitUntilNavNode = () => {
   if (searchNavNode(document.body)) {
     return Promise.resolve();
   }
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     window.addEventListener('ionNavWillLoad', () => resolve(), { once: true });
   });
 };
@@ -259,7 +259,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);
@@ -293,7 +293,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]) {
@@ -344,9 +344,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;
   }
@@ -356,7 +354,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;
@@ -391,7 +389,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),
       });
     });
   }
@@ -477,8 +475,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,
@@ -501,8 +499,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,
@@ -510,7 +508,7 @@ const readRouteNodes = (node) => {
       params: el.componentProps,
       beforeLeave: el.beforeLeave,
       beforeEnter: el.beforeEnter,
-      children: readRouteNodes(el)
+      children: readRouteNodes(el),
     };
   });
 };
@@ -528,13 +526,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;
@@ -608,7 +609,7 @@ const Router = class {
     return this.writeNavStateRoot(segments, direction);
   }
   onBackButton(ev) {
-    ev.detail.register(0, processNextHandler => {
+    ev.detail.register(0, (processNextHandler) => {
       this.back();
       processNextHandler();
     });
@@ -673,7 +674,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);
@@ -754,7 +755,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/cjs/ion-searchbar.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bae2a754.js');
-const index$1 = require('./index-8540d72e.js');
-const ionicGlobal = require('./ionic-global-878073d1.js');
-const helpers = require('./helpers-7e28976c.js');
+const index = require('./index-51e8292e.js');
+const index$1 = require('./index-975586fd.js');
+const ionicGlobal = require('./ionic-global-2cde9d3a.js');
+const helpers = require('./helpers-c2496722.js');
 const dir = require('./dir-5af5259a.js');
-const theme = require('./theme-4252ac15.js');
+const theme = require('./theme-b0b295c1.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}";
 
@@ -196,7 +196,7 @@ const Searchbar = class {
   }
   emitStyle() {
     this.ionStyle.emit({
-      'searchbar': true
+      searchbar: true,
     });
   }
   /**
@@ -222,7 +222,7 @@ const Searchbar = class {
     const value = this.getValue();
     const prevAlignLeft = this.shouldAlignLeft;
     const mode = ionicGlobal.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;
@@ -259,9 +259,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;
@@ -318,7 +318,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;
@@ -330,7 +330,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;
@@ -342,9 +342,7 @@ const Searchbar = class {
     const clearIcon = this.clearIcon || (mode === 'ios' ? index$1.closeCircle : index$1.closeSharp);
     const searchIcon = this.searchIcon || (mode === 'ios' ? index$1.searchOutline : index$1.searchSharp);
     const shouldShowCancelButton = this.shouldShowCancelButton();
-    const cancelButton = (this.showCancelButton !== 'never') && (index.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" }, index.h("div", { "aria-hidden": "true" }, mode === 'md'
-      ? index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })
-      : cancelButtonText)));
+    const cancelButton = this.showCancelButton !== 'never' && (index.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" }, index.h("div", { "aria-hidden": "true" }, mode === 'md' ? (index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
     return (index.h(index.Host, { role: "search", "aria-disabled": this.disabled ? 'true' : null, class: theme.createColorClasses(this.color, {
         [mode]: true,
         'searchbar-animated': animated,
@@ -354,8 +352,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()
-      }) }, index.h("div", { class: "searchbar-input-container" }, index.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, index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.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) }, index.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(),
+      }) }, index.h("div", { class: "searchbar-input-container" }, index.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, index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), index.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) }, index.h("ion-icon", { "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bae2a754.js');
-const ionicGlobal = require('./ionic-global-878073d1.js');
-const helpers = require('./helpers-7e28976c.js');
-const theme = require('./theme-4252ac15.js');
+const index = require('./index-51e8292e.js');
+const ionicGlobal = require('./ionic-global-2cde9d3a.js');
+const helpers = require('./helpers-c2496722.js');
+const theme = require('./theme-b0b295c1.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)}}";
 
@@ -32,7 +32,7 @@ const SegmentButton = class {
     /**
      * The value of the segment button.
      */
-    this.value = 'ion-sb-' + (ids++);
+    this.value = 'ion-sb-' + ids++;
     this.updateStyle = () => {
       index.forceUpdate(this);
     };
@@ -43,7 +43,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();
       helpers.addEventListener(segmentEl, 'ionSelect', this.updateState);
@@ -70,7 +70,7 @@ const SegmentButton = class {
   render() {
     const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl, tabIndex } = this;
     const mode = ionicGlobal.getIonMode(this);
-    const hasSegmentColor = () => segmentEl !== null && segmentEl.color !== undefined;
+    const hasSegmentColor = () => (segmentEl === null || segmentEl === void 0 ? void 0 : segmentEl.color) !== undefined;
     return (index.h(index.Host, { role: "tab", "aria-selected": checked ? 'true' : 'false', "aria-disabled": disabled ? 'true' : null, tabIndex: tabIndex, class: {
         [mode]: true,
         'in-toolbar': theme.hostContext('ion-toolbar', this.el),
@@ -89,7 +89,7 @@ const SegmentButton = class {
         'ion-focusable': true,
       } }, index.h("button", { type: type, tabIndex: -1, class: "button-native", part: "native", disabled: disabled }, index.h("span", { class: "button-inner" }, index.h("slot", null)), mode === 'md' && index.h("ion-ripple-effect", null)), index.h("div", { part: "indicator", class: {
         'segment-button-indicator': true,
-        'segment-button-indicator-animated': true
+        'segment-button-indicator-animated': true,
       } }, index.h("div", { part: "indicator-background", class: "segment-button-indicator-background" }))));
   }
   get el() { return index.getElement(this); }

package/dist/cjs/ion-segment.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bae2a754.js');
-const ionicGlobal = require('./ionic-global-878073d1.js');
-const helpers = require('./helpers-7e28976c.js');
+const index = require('./index-51e8292e.js');
+const ionicGlobal = require('./ionic-global-2cde9d3a.js');
+const helpers = require('./helpers-c2496722.js');
 const dir = require('./dir-5af5259a.js');
-const theme = require('./theme-4252ac15.js');
+const theme = require('./theme-b0b295c1.js');
 
 const segmentIosCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:flex;position:relative;align-items:stretch;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;user-select:none}:host(.segment-scrollable){justify-content:start;width:auto;overflow-x:auto}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;width:auto}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-toolbar){margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
 
@@ -61,8 +61,8 @@ const Segment = class {
       this.checked = current;
     };
     this.getSegmentButton = (selector) => {
-      const buttons = this.getButtons().filter(button => !button.disabled);
-      const currIndex = buttons.findIndex(button => button === document.activeElement);
+      const buttons = this.getButtons().filter((button) => !button.disabled);
+      const currIndex = buttons.findIndex((button) => button === document.activeElement);
       switch (selector) {
         case 'first':
           return buttons[0];
@@ -84,8 +84,7 @@ const Segment = class {
      * we need to emit style so the segment-buttons
      * can apply their color classes properly.
      */
-    if ((oldValue === undefined && value !== undefined) ||
-      (oldValue !== undefined && value === undefined)) {
+    if ((oldValue === undefined && value !== undefined) || (oldValue !== undefined && value === undefined)) {
       this.emitStyle();
     }
   }
@@ -124,15 +123,15 @@ const Segment = class {
   async componentDidLoad() {
     this.setCheckedClasses();
     this.ensureFocusable();
-    this.gesture = (await Promise.resolve().then(function () { return require('./index-43642662.js'); })).createGesture({
+    this.gesture = (await Promise.resolve().then(function () { return require('./index-12082cba.js'); })).createGesture({
       el: this.el,
       gestureName: 'segment',
       gesturePriority: 100,
       threshold: 0,
       passive: false,
-      onStart: ev => this.onStart(ev),
-      onMove: ev => this.onMove(ev),
-      onEnd: ev => this.onEnd(ev),
+      onStart: (ev) => this.onStart(ev),
+      onMove: (ev) => this.onMove(ev),
+      onEnd: (ev) => this.onEnd(ev),
     });
     this.gestureChanged();
     if (this.disabled) {
@@ -173,14 +172,14 @@ const Segment = class {
       return;
     }
     const buttons = this.getButtons();
-    const checked = buttons.find(button => button.value === this.value);
+    const checked = buttons.find((button) => button.value === this.value);
     const root = checked.shadowRoot || checked;
     const ripple = root.querySelector('ion-ripple-effect');
     if (!ripple) {
       return;
     }
     const { x, y } = helpers.pointerCoord(detail.event);
-    ripple.addRipple(x, y).then(remove => remove());
+    ripple.addRipple(x, y).then((remove) => remove());
   }
   /*
    * Activate both the segment and the buttons
@@ -188,7 +187,7 @@ const Segment = class {
    */
   setActivated(activated) {
     const buttons = this.getButtons();
-    buttons.forEach(button => {
+    buttons.forEach((button) => {
       if (activated) {
         button.classList.add('segment-button-activated');
       }
@@ -201,7 +200,7 @@ const Segment = class {
   activate(detail) {
     const clicked = detail.event.target;
     const buttons = this.getButtons();
-    const checked = buttons.find(button => button.value === this.value);
+    const checked = buttons.find((button) => button.value === this.value);
     // Make sure we are only checking for activation on a segment button
     // since disabled buttons will get the click on the segment
     if (clicked.tagName !== 'ION-SEGMENT-BUTTON') {
@@ -251,10 +250,10 @@ const Segment = class {
   }
   setCheckedClasses() {
     const buttons = this.getButtons();
-    const index = buttons.findIndex(button => button.value === this.value);
+    const index = buttons.findIndex((button) => button.value === this.value);
     const next = index + 1;
     // Keep track of the currently checked button
-    this.checked = buttons.find(button => button.value === this.value);
+    this.checked = buttons.find((button) => button.value === this.value);
     for (const button of buttons) {
       button.classList.remove('segment-button-after-checked');
     }
@@ -266,7 +265,7 @@ const Segment = class {
     const rtl = dir.isRTL(this.el);
     const activated = this.activated;
     const buttons = this.getButtons();
-    const index = buttons.findIndex(button => button.value === this.value);
+    const index = buttons.findIndex((button) => button.value === this.value);
     const previous = buttons[index];
     let current;
     let nextIndex;
@@ -282,7 +281,7 @@ const Segment = class {
     // gesture event and the Y coordinate of the starting element, since the gesture
     // can move up and down off of the segment
     const currentX = detail.currentX;
-    const previousY = rect.top + (rect.height / 2);
+    const previousY = rect.top + rect.height / 2;
     /**
      * Segment can be used inside the shadow dom
      * so doing document.elementFromPoint would never
@@ -293,8 +292,8 @@ const Segment = class {
      */
     const root = this.el.getRootNode();
     const nextEl = root.elementFromPoint(currentX, previousY);
-    const decreaseIndex = rtl ? currentX > (left + width) : currentX < left;
-    const increaseIndex = rtl ? currentX < left : currentX > (left + width);
+    const decreaseIndex = rtl ? currentX > left + width : currentX < left;
+    const increaseIndex = rtl ? currentX < left : currentX > left + width;
     // If the indicator is currently activated then we have started the gesture
     // on top of the checked button so we need to slide the indicator
     // by checking the button next to it as we move
@@ -324,7 +323,6 @@ const Segment = class {
     if (!activated && isEnd) {
       current = nextEl;
     }
-    /* tslint:disable-next-line */
     if (current != null) {
       /**
        * If current element is ion-segment then that means
@@ -342,7 +340,7 @@ const Segment = class {
   }
   emitStyle() {
     this.ionStyle.emit({
-      'segment': true
+      segment: true,
     });
   }
   onKeyDown(ev) {
@@ -383,7 +381,7 @@ const Segment = class {
   }
   /* By default, focus is delegated to the selected `ion-segment-button`.
    * If there is no selected button, focus will instead pass to the first child button.
-  **/
+   **/
   ensureFocusable() {
     var _a;
     if (this.value !== undefined) {
@@ -400,7 +398,7 @@ const Segment = class {
         'in-toolbar-color': theme.hostContext('ion-toolbar[color]', this.el),
         'segment-activated': this.activated,
         'segment-disabled': this.disabled,
-        'segment-scrollable': this.scrollable
+        'segment-scrollable': this.scrollable,
       }) }, index.h("slot", null)));
   }
   get el() { return index.getElement(this); }