@sparkle-learning/core 0.0.36 → 0.0.39

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

@@ -0,0 +1,1489 @@
+import { c as getAssetPath, r as registerInstance, h, H as Host, e as getElement, f as forceUpdate, i as createEvent, j as readTask, w as writeTask } from './index-c04b9ed5.js';
+import { c as chevronForward } from './index-4044fde9.js';
+import { g as getIonMode$1 } from './ionic-global-4903e23e.js';
+import { b as raf, d as clamp, e as debounceEvent, i as inheritAriaAttributes, h as getAriaLabel, j as renderHiddenInput } from './helpers-03073fe4.js';
+import { p as printIonError, a as printIonWarning } from './index-dad75b83.js';
+import { h as hostContext, c as createColorClasses$1, o as openURL } from './theme-7ef00c83.js';
+import { f as findClosestIonContent, d as disableContentScrollY, r as resetContentScrollY } from './index-37004831.js';
+import { i as isRTL } from './dir-03012648.js';
+import { m as matchPath } from './match-path-36fdf5c7.js';
+import { i as isModifiedEvent } from './dom-utils-109a7d75.js';
+import { A as ActiveRouter } from './active-router-fc9e4e06.js';
+
+let CACHED_MAP;
+const getIconMap = () => {
+  if (typeof window === 'undefined') {
+    return new Map();
+  }
+  else {
+    if (!CACHED_MAP) {
+      const win = window;
+      win.Ionicons = win.Ionicons || {};
+      CACHED_MAP = win.Ionicons.map = win.Ionicons.map || new Map();
+    }
+    return CACHED_MAP;
+  }
+};
+const getUrl$1 = (i) => {
+  let url = getSrc(i.src);
+  if (url) {
+    return url;
+  }
+  url = getName(i.name, i.icon, i.mode, i.ios, i.md);
+  if (url) {
+    return getNamedUrl(url);
+  }
+  if (i.icon) {
+    url = getSrc(i.icon);
+    if (url) {
+      return url;
+    }
+    url = getSrc(i.icon[i.mode]);
+    if (url) {
+      return url;
+    }
+  }
+  return null;
+};
+const getNamedUrl = (iconName) => {
+  const url = getIconMap().get(iconName);
+  if (url) {
+    return url;
+  }
+  return getAssetPath(`svg/${iconName}.svg`);
+};
+const getName = (iconName, icon, mode, ios, md) => {
+  // default to "md" if somehow the mode wasn't set
+  mode = (mode && toLower(mode)) === 'ios' ? 'ios' : 'md';
+  // if an icon was passed in using the ios or md attributes
+  // set the iconName to whatever was passed in
+  if (ios && mode === 'ios') {
+    iconName = toLower(ios);
+  }
+  else if (md && mode === 'md') {
+    iconName = toLower(md);
+  }
+  else {
+    if (!iconName && icon && !isSrc(icon)) {
+      iconName = icon;
+    }
+    if (isStr(iconName)) {
+      iconName = toLower(iconName);
+    }
+  }
+  if (!isStr(iconName) || iconName.trim() === '') {
+    return null;
+  }
+  // only allow alpha characters and dash
+  const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
+  if (invalidChars !== '') {
+    return null;
+  }
+  return iconName;
+};
+const getSrc = (src) => {
+  if (isStr(src)) {
+    src = src.trim();
+    if (isSrc(src)) {
+      return src;
+    }
+  }
+  return null;
+};
+const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+const isStr = (val) => typeof val === 'string';
+const toLower = (val) => val.toLowerCase();
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (el, attributes = []) => {
+  const attributeObject = {};
+  attributes.forEach(attr => {
+    if (el.hasAttribute(attr)) {
+      const value = el.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = el.getAttribute(attr);
+      }
+      el.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+
+const validateContent = (svgContent) => {
+  const div = document.createElement('div');
+  div.innerHTML = svgContent;
+  // setup this way to ensure it works on our buddy IE
+  for (let i = div.childNodes.length - 1; i >= 0; i--) {
+    if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+      div.removeChild(div.childNodes[i]);
+    }
+  }
+  // must only have 1 root element
+  const svgElm = div.firstElementChild;
+  if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
+    const svgClass = svgElm.getAttribute('class') || '';
+    svgElm.setAttribute('class', (svgClass + ' s-ion-icon').trim());
+    // root element must be an svg
+    // lets double check we've got valid elements
+    // do not allow scripts
+    if (isValid(svgElm)) {
+      return div.innerHTML;
+    }
+  }
+  return '';
+};
+const isValid = (elm) => {
+  if (elm.nodeType === 1) {
+    if (elm.nodeName.toLowerCase() === 'script') {
+      return false;
+    }
+    for (let i = 0; i < elm.attributes.length; i++) {
+      const val = elm.attributes[i].value;
+      if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {
+        return false;
+      }
+    }
+    for (let i = 0; i < elm.childNodes.length; i++) {
+      if (!isValid(elm.childNodes[i])) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+const ioniconContent = new Map();
+const requests = new Map();
+const getSvgContent = (url, sanitize) => {
+  // see if we already have a request for this url
+  let req = requests.get(url);
+  if (!req) {
+    if (typeof fetch !== 'undefined' && typeof document !== 'undefined') {
+      // we don't already have a request
+      req = fetch(url).then((rsp) => {
+        if (rsp.ok) {
+          return rsp.text().then((svgContent) => {
+            if (svgContent && sanitize !== false) {
+              svgContent = validateContent(svgContent);
+            }
+            ioniconContent.set(url, svgContent || '');
+          });
+        }
+        ioniconContent.set(url, '');
+      });
+      // cache for the same requests
+      requests.set(url, req);
+    }
+    else {
+      // set to empty for ssr scenarios and resolve promise
+      ioniconContent.set(url, '');
+      return Promise.resolve();
+    }
+  }
+  return req;
+};
+
+const iconCss = ":host{display:inline-block;width:1em;height:1em;contain:strict;fill:currentColor;box-sizing:content-box !important}:host .ionicon{stroke:currentColor}.ionicon-fill-none{fill:none}.ionicon-stroke-width{stroke-width:32px;stroke-width:var(--ionicon-stroke-width, 32px)}.icon-inner,.ionicon,svg{display:block;height:100%;width:100%}:host(.flip-rtl) .icon-inner{transform:scaleX(-1)}:host(.icon-small){font-size:18px !important}:host(.icon-large){font-size:32px !important}:host(.ion-color){color:var(--ion-color-base) !important}:host(.ion-color-primary){--ion-color-base:var(--ion-color-primary, #3880ff)}:host(.ion-color-secondary){--ion-color-base:var(--ion-color-secondary, #0cd1e8)}:host(.ion-color-tertiary){--ion-color-base:var(--ion-color-tertiary, #f4a942)}:host(.ion-color-success){--ion-color-base:var(--ion-color-success, #10dc60)}:host(.ion-color-warning){--ion-color-base:var(--ion-color-warning, #ffce00)}:host(.ion-color-danger){--ion-color-base:var(--ion-color-danger, #f14141)}:host(.ion-color-light){--ion-color-base:var(--ion-color-light, #f4f5f8)}:host(.ion-color-medium){--ion-color-base:var(--ion-color-medium, #989aa2)}:host(.ion-color-dark){--ion-color-base:var(--ion-color-dark, #222428)}";
+
+const Icon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.iconName = null;
+    this.inheritedAttributes = {};
+    this.isVisible = false;
+    /**
+     * The mode determines which platform styles to use.
+     */
+    this.mode = getIonMode();
+    /**
+     * If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
+     * Default, `false`.
+     */
+    this.lazy = false;
+    /**
+     * When set to `false`, SVG content that is HTTP fetched will not be checked
+     * if the response SVG content has any `<script>` elements, or any attributes
+     * that start with `on`, such as `onclick`.
+     * @default true
+     */
+    this.sanitize = true;
+    this.hasAriaHidden = () => {
+      const { el } = this;
+      return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
+    };
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+  }
+  connectedCallback() {
+    // purposely do not return the promise here because loading
+    // the svg file should not hold up loading the app
+    // only load the svg if it's visible
+    this.waitUntilVisible(this.el, '50px', () => {
+      this.isVisible = true;
+      this.loadIcon();
+    });
+  }
+  disconnectedCallback() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  waitUntilVisible(el, rootMargin, cb) {
+    if (this.lazy && typeof window !== 'undefined' && window.IntersectionObserver) {
+      const io = (this.io = new window.IntersectionObserver((data) => {
+        if (data[0].isIntersecting) {
+          io.disconnect();
+          this.io = undefined;
+          cb();
+        }
+      }, { rootMargin }));
+      io.observe(el);
+    }
+    else {
+      // browser doesn't support IntersectionObserver
+      // so just fallback to always show it
+      cb();
+    }
+  }
+  loadIcon() {
+    if (this.isVisible) {
+      const url = getUrl$1(this);
+      if (url) {
+        if (ioniconContent.has(url)) {
+          // sync if it's already loaded
+          this.svgContent = ioniconContent.get(url);
+        }
+        else {
+          // async if it hasn't been loaded
+          getSvgContent(url, this.sanitize).then(() => (this.svgContent = ioniconContent.get(url)));
+        }
+      }
+    }
+    const label = this.iconName = getName(this.name, this.icon, this.mode, this.ios, this.md);
+    /**
+     * Come up with a default label
+     * in case user does not provide their own.
+     */
+    if (label) {
+      this.ariaLabel = label.replace(/\-/g, ' ');
+    }
+  }
+  render() {
+    const { iconName, ariaLabel, inheritedAttributes } = this;
+    const mode = this.mode || 'md';
+    const flipRtl = this.flipRtl ||
+      (iconName &&
+        (iconName.indexOf('arrow') > -1 || iconName.indexOf('chevron') > -1) &&
+        this.flipRtl !== false);
+    /**
+     * Only set the aria-label if a) we have generated
+     * one for the icon and if aria-hidden is not set to "true".
+     * If developer wants to set their own aria-label, then
+     * inheritedAttributes down below will override whatever
+     * default label we have set.
+     */
+    return (h(Host, Object.assign({ "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, role: "img", class: Object.assign(Object.assign({ [mode]: true }, createColorClasses(this.color)), { [`icon-${this.size}`]: !!this.size, 'flip-rtl': !!flipRtl && this.el.ownerDocument.dir === 'rtl' }) }, inheritedAttributes), this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+  }
+  static get assetsDirs() { return ["svg"]; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "name": ["loadIcon"],
+    "src": ["loadIcon"],
+    "icon": ["loadIcon"]
+  }; }
+};
+const getIonMode = () => (typeof document !== 'undefined' && document.documentElement.getAttribute('mode')) || 'md';
+const createColorClasses = (color) => {
+  return color
+    ? {
+      'ion-color': true,
+      [`ion-color-${color}`]: true,
+    }
+    : null;
+};
+Icon.style = iconCss;
+
+const itemIosCss = ":host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-bottom{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--inner-padding-end);padding-inline-end:var(--inner-padding-end)}}.item-detail-icon{color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.item-has-focus) .item-native{caret-color:var(--highlight-background)}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus),:host(.item-interactive.ion-touched.ion-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.ion-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.ion-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(ion-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(ion-datetime){--padding-start:0}:host(.item-label-stacked) ::slotted(ion-datetime),:host(.item-label-floating) ::slotted(ion-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio),:host(.item-multiple-inputs) ::slotted(ion-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;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{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}:host{--min-height:44px;--transition:background-color 200ms linear, opacity 200ms linear;--padding-start:20px;--inner-padding-end:10px;--inner-border-width:0px 0px 0.55px 0px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:#000;--background-focused:#000;--background-hover:currentColor;--background-activated-opacity:.12;--background-focused-opacity:.15;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--color:var(--ion-item-color, var(--ion-text-color, #000));--highlight-height:0px;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);--bottom-padding-start:0px;font-size:17px}:host(.ion-activated){--transition:none}:host(.ion-color.ion-focused) .item-native::after{background:#000;opacity:0.15}:host(.ion-color.ion-activated) .item-native::after{background:#000;opacity:0.12}:host(.item-interactive){--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-full){--border-width:0px 0px 0.55px 0px;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:0px 0px 0.55px 0px;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0px;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0px;--show-inset-highlight:0}.item-highlight,.item-inner-highlight{transition:none}:host(.item-has-focus) .item-inner-highlight,:host(.item-has-focus) .item-highlight{border-top:none;border-right:none;border-left:none}::slotted([slot=start]){margin-left:0;margin-right:20px;margin-top:2px;margin-bottom:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:20px;margin-inline-end:20px}}::slotted([slot=end]){margin-left:10px;margin-right:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}::slotted(ion-icon[slot=start]),::slotted(ion-icon[slot=end]){margin-top:7px;margin-bottom:7px}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}::slotted(.button-small){--padding-top:0px;--padding-bottom:0px;--padding-start:.5em;--padding-end:.5em;height:24px;font-size:13px}::slotted(ion-avatar){width:36px;height:36px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:10px;margin-inline-end:10px}}:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){margin-left:0px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-radio) ::slotted(ion-label),:host(.item-toggle) ::slotted(ion-label){margin-left:unset;-webkit-margin-start:0px;margin-inline-start:0px}}::slotted(ion-label){margin-left:0;margin-right:8px;margin-top:10px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-label){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:8px;margin-inline-end:8px}}:host(.item-label-floating),:host(.item-label-stacked){--min-height:68px}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0px}:host(.item-label-fixed) ::slotted(ion-select),:host(.item-label-fixed) ::slotted(ion-datetime){--padding-start:0}";
+
+const itemMdCss = ":host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) .item-inner{border-color:var(--ion-color-shade)}:host(.ion-activated) .item-native{color:var(--color-activated)}:host(.ion-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.ion-color.ion-activated) .item-native{color:var(--ion-color-contrast)}:host(.ion-focused) .item-native{color:var(--color-focused)}:host(.ion-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-color.ion-focused) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .item-native::after{background:var(--ion-color-contrast)}@media (any-hover: hover){:host(.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--color-hover)}:host(.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activatable:not(.ion-focused):hover) .item-native::after{background:var(--ion-color-contrast)}}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:flex;position:relative;align-items:inherit;justify-content:inherit;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);overflow:inherit;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end))}}.item-bottom{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-right:var(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--ion-safe-area-left, 0px));-webkit-padding-end:var(--inner-padding-end);padding-inline-end:var(--inner-padding-end)}}.item-detail-icon{color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(ion-icon){font-size:1.6em}::slotted(ion-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(ion-label:not([slot=end])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.item-has-focus) .item-native{caret-color:var(--highlight-background)}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus),:host(.item-interactive.ion-touched.ion-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.item-interactive.ion-focused),:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.ion-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.ion-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.ion-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(ion-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(ion-datetime){--padding-start:0}:host(.item-label-stacked) ::slotted(ion-datetime),:host(.item-label-floating) ::slotted(ion-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(ion-checkbox),:host(.item-multiple-inputs) ::slotted(ion-datetime),:host(.item-multiple-inputs) ::slotted(ion-radio),:host(.item-multiple-inputs) ::slotted(ion-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(ion-reorder[slot]){margin-top:0;margin-bottom:0}ion-ripple-effect{color:var(--ripple-color)}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;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{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}:host{--min-height:48px;--background:var(--ion-item-background, var(--ion-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--color:var(--ion-item-color, var(--ion-text-color, #000));--transition:opacity 15ms linear, background-color 15ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:0 0 1px 0;--highlight-height:1px;--highlight-color-focused:var(--ion-color-primary, #3880ff);--highlight-color-valid:var(--ion-color-success, #2dd36f);--highlight-color-invalid:var(--ion-color-danger, #eb445a);font-size:16px;font-weight:normal;text-transform:none}:host(.item-fill-outline){--highlight-height:2px}:host(.item-fill-none.item-interactive.ion-focus) .item-highlight,:host(.item-fill-none.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-none.item-interactive.ion-focus) .item-native,:host(.item-fill-none.item-interactive.item-has-focus) .item-native,:host(.item-fill-none.item-interactive.ion-touched.ion-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight{transform:scaleX(1)}:host(.item-fill-outline.item-interactive.ion-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-highlight{border-width:var(--full-highlight-height);border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.ion-touched.ion-invalid) .item-native{border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.ion-focus) .item-highlight,:host(.item-fill-solid.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.ion-focus) .item-native,:host(.item-fill-solid.item-interactive.item-has-focus) .item-native,:host(.item-fill-solid.item-interactive.ion-touched.ion-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.ion-color.ion-activated) .item-native::after{background:transparent}:host(.item-has-focus) .item-native{caret-color:var(--highlight-color-focused)}:host(.item-interactive){--border-width:0 0 1px 0;--inner-border-width:0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-full){--border-width:0 0 1px 0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:0 0 1px 0;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0;--show-inset-highlight:0}:host(.item-fill-outline) .item-highlight{--position-offset:calc(-1 * var(--border-width));left:var(--position-offset);top:var(--position-offset);width:calc(100% + 2 * var(--border-width));height:calc(100% + 2 * var(--border-width));transition:none}:host-context([dir=rtl]):host(.item-fill-outline) .item-highlight,:host-context([dir=rtl]).item-fill-outline .item-highlight{left:unset;right:unset;right:var(--position-offset)}:host(.item-fill-outline.ion-focused) .item-native,:host(.item-fill-outline.item-has-focus) .item-native{border-color:transparent}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;align-self:flex-start}::slotted([slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted([slot=end]){margin-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;-webkit-margin-start:32px;margin-inline-start:32px}}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted(ion-icon){color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);font-size:24px}:host(.ion-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(ion-icon){color:var(--ion-color-contrast)}::slotted(ion-icon[slot]){margin-top:12px;margin-bottom:12px}::slotted(ion-icon[slot=start]){margin-right:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:32px;margin-inline-end:32px}}::slotted(ion-icon[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-icon[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),:host(.item-fill-outline) ::slotted(ion-icon[slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-solid) ::slotted(ion-icon[slot=start]),:host(.item-fill-outline) ::slotted(ion-icon[slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(ion-toggle[slot=start]),::slotted(ion-toggle[slot=end]){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}::slotted(ion-note){margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;align-self:flex-start;font-size:11px}::slotted(ion-note[slot]:not([slot=helper]):not([slot=error])){padding-left:0;padding-right:0;padding-top:18px;padding-bottom:10px}::slotted(ion-note[slot=start]){padding-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=start]){padding-right:unset;-webkit-padding-end:16px;padding-inline-end:16px}}::slotted(ion-note[slot=end]){padding-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-note[slot=end]){padding-left:unset;-webkit-padding-start:16px;padding-inline-start:16px}}::slotted(ion-avatar){width:40px;height:40px}::slotted(ion-thumbnail){width:56px;height:56px}::slotted(ion-avatar),::slotted(ion-thumbnail){margin-top:8px;margin-bottom:8px}::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=start]),::slotted(ion-thumbnail[slot=start]){margin-right:unset;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted(ion-avatar[slot=end]),::slotted(ion-thumbnail[slot=end]){margin-left:unset;-webkit-margin-start:16px;margin-inline-start:16px}}::slotted(ion-label){margin-left:0;margin-right:0;margin-top:10px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-label-fixed) ::slotted(ion-select),:host(.item-label-fixed) ::slotted(ion-datetime){--padding-start:8px}:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-toggle) ::slotted(ion-label),:host(.item-radio) ::slotted(ion-label){margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}::slotted(.button-small){--padding-top:0;--padding-bottom:0;--padding-start:.6em;--padding-end:.6em;height:25px;font-size:12px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.item-label-stacked) ::slotted(ion-select),:host(.item-label-floating) ::slotted(ion-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0}:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.ion-color)) ::slotted(.label-floating){color:var(--ion-color-primary, #3880ff)}:host(.ion-color){--highlight-color-focused:var(--ion-color-contrast)}:host(.item-label-color){--highlight-color-focused:var(--ion-color-base)}:host(.item-fill-solid.ion-color),:host(.item-fill-outline.ion-color){--highlight-color-focused:var(--ion-color-base)}:host(.item-fill-solid){--background:var(--ion-color-step-50, #f2f2f2);--background-hover:var(--ion-color-step-100, #e6e6e6);--background-focused:var(--ion-color-step-150, #d9d9d9);--border-width:0 0 1px 0;--inner-border-width:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid),:host-context([dir=rtl]).item-fill-solid{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host(.item-fill-solid) .item-native{--border-color:var(--ion-color-step-500, gray)}:host(.item-fill-solid.ion-focused) .item-native,:host(.item-fill-solid.item-has-focus) .item-native{--background:var(--background-focused)}:host(.item-fill-solid.item-shape-round){border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid.item-shape-round),:host-context([dir=rtl]).item-fill-solid.item-shape-round{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}@media (any-hover: hover){:host(.item-fill-solid:hover) .item-native{--background:var(--background-hover);--border-color:var(--ion-color-step-750, #404040)}}:host(.item-fill-outline){--ripple-color:transparent;--background-focused:transparent;--background-hover:transparent;--border-color:var(--ion-color-step-500, gray);--border-width:1px;border:none;overflow:visible}:host(.item-fill-outline) .item-native{--native-padding-left:16px;border-radius:4px}:host(.item-fill-outline.item-shape-round) .item-native{--inner-padding-start:16px;border-radius:28px}:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:unset;-webkit-padding-start:32px;padding-inline-start:32px}}:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.ion-focused) .item-native ::slotted(ion-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(ion-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(ion-textarea:not(:first-child)){transform:translateY(-14px)}@media (any-hover: hover){:host(.item-fill-outline:hover) .item-native{--border-color:var(--ion-color-step-750, #404040)}}.item-counter{letter-spacing:0.0333333333em}";
+
+const Item = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.labelColorStyles = {};
+    this.itemStyles = new Map();
+    this.multipleInputs = false;
+    this.focusable = true;
+    /**
+     * If `true`, a button tag will be rendered and the item will be tappable.
+     */
+    this.button = false;
+    /**
+     * The icon to use when `detail` is set to `true`.
+     */
+    this.detailIcon = chevronForward;
+    /**
+     * If `true`, the user cannot interact with the item.
+     */
+    this.disabled = false;
+    /**
+     * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`.
+     */
+    this.counter = false;
+    /**
+     * When using a router, it specifies the transition direction when navigating to
+     * another page using `href`.
+     */
+    this.routerDirection = 'forward';
+    /**
+     * The type of the button. Only used when an `onclick` or `button` property is present.
+     */
+    this.type = 'button';
+  }
+  counterFormatterChanged() {
+    this.updateCounterOutput(this.getFirstInput());
+  }
+  handleIonChange(ev) {
+    if (this.counter && ev.target === this.getFirstInput()) {
+      this.updateCounterOutput(ev.target);
+    }
+  }
+  labelColorChanged(ev) {
+    const { color } = this;
+    // There will be a conflict with item color if
+    // we apply the label color to item, so we ignore
+    // the label color if the user sets a color on item
+    if (color === undefined) {
+      this.labelColorStyles = ev.detail;
+    }
+  }
+  itemStyle(ev) {
+    ev.stopPropagation();
+    const tagName = ev.target.tagName;
+    const updatedStyles = ev.detail;
+    const newStyles = {};
+    const childStyles = this.itemStyles.get(tagName) || {};
+    let hasStyleChange = false;
+    Object.keys(updatedStyles).forEach((key) => {
+      if (updatedStyles[key]) {
+        const itemKey = `item-${key}`;
+        if (!childStyles[itemKey]) {
+          hasStyleChange = true;
+        }
+        newStyles[itemKey] = true;
+      }
+    });
+    if (!hasStyleChange && Object.keys(newStyles).length !== Object.keys(childStyles).length) {
+      hasStyleChange = true;
+    }
+    if (hasStyleChange) {
+      this.itemStyles.set(tagName, newStyles);
+      forceUpdate(this);
+    }
+  }
+  connectedCallback() {
+    if (this.counter) {
+      this.updateCounterOutput(this.getFirstInput());
+    }
+    this.hasStartEl();
+  }
+  componentDidUpdate() {
+    // Do not use @Listen here to avoid making all items
+    // appear as clickable to screen readers
+    // https://github.com/ionic-team/ionic-framework/issues/22011
+    const input = this.getFirstInput();
+    if (input && !this.clickListener) {
+      this.clickListener = (ev) => this.delegateFocus(ev, input);
+      this.el.addEventListener('click', this.clickListener);
+    }
+  }
+  disconnectedCallback() {
+    const input = this.getFirstInput();
+    if (input && this.clickListener) {
+      this.el.removeEventListener('click', this.clickListener);
+      this.clickListener = undefined;
+    }
+  }
+  componentDidLoad() {
+    raf(() => {
+      this.setMultipleInputs();
+      this.focusable = this.isFocusable();
+    });
+  }
+  // If the item contains multiple clickable elements and/or inputs, then the item
+  // should not have a clickable input cover over the entire item to prevent
+  // interfering with their individual click events
+  setMultipleInputs() {
+    // The following elements have a clickable cover that is relative to the entire item
+    const covers = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
+    // The following elements can accept focus alongside the previous elements
+    // therefore if these elements are also a child of item, we don't want the
+    // input cover on top of those interfering with their clicks
+    const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
+    // The following elements should also stay clickable when an input with cover is present
+    const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
+    // Check for multiple inputs to change the position of the input cover to relative
+    // for all of the covered inputs above
+    this.multipleInputs =
+      covers.length + inputs.length > 1 ||
+        covers.length + clickables.length > 1 ||
+        (covers.length > 0 && this.isClickable());
+  }
+  // If the item contains an input including a checkbox, datetime, select, or radio
+  // then the item will have a clickable input cover that covers the item
+  // that should get the hover, focused and activated states UNLESS it has multiple
+  // inputs, then those need to individually get each click
+  hasCover() {
+    const inputs = this.el.querySelectorAll('ion-checkbox, ion-datetime, ion-select, ion-radio');
+    return inputs.length === 1 && !this.multipleInputs;
+  }
+  // If the item has an href or button property it will render a native
+  // anchor or button that is clickable
+  isClickable() {
+    return this.href !== undefined || this.button;
+  }
+  canActivate() {
+    return this.isClickable() || this.hasCover();
+  }
+  isFocusable() {
+    const focusableChild = this.el.querySelector('.ion-focusable');
+    return this.canActivate() || focusableChild !== null;
+  }
+  getFirstInput() {
+    const inputs = this.el.querySelectorAll('ion-input, ion-textarea');
+    return inputs[0];
+  }
+  // This is needed for WebKit due to a delegatesFocus bug where
+  // clicking on the left padding of an item is not focusing the input
+  // but is opening the keyboard. It will no longer be needed with
+  // iOS 14.
+  delegateFocus(ev, input) {
+    const clickedItem = ev.target.tagName === 'ION-ITEM';
+    let firstActive = false;
+    // If the first input is the same as the active element we need
+    // to focus the first input again, but if the active element
+    // is another input inside of the item we shouldn't switch focus
+    if (document.activeElement) {
+      firstActive = input.querySelector('input, textarea') === document.activeElement;
+    }
+    // Only focus the first input if we clicked on an ion-item
+    // and the first input exists
+    if (clickedItem && (firstActive || !this.multipleInputs)) {
+      input.fireFocusEvents = false;
+      input.setBlur();
+      input.setFocus();
+      raf(() => {
+        input.fireFocusEvents = true;
+      });
+    }
+  }
+  updateCounterOutput(inputEl) {
+    var _a, _b;
+    const { counter, counterFormatter, defaultCounterFormatter } = this;
+    if (counter && !this.multipleInputs && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.maxlength) !== undefined) {
+      const length = (_b = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
+      if (counterFormatter === undefined) {
+        this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
+      }
+      else {
+        try {
+          this.counterString = counterFormatter(length, inputEl.maxlength);
+        }
+        catch (e) {
+          printIonError('Exception in provided `counterFormatter`.', e);
+          // Fallback to the default counter formatter when an exception happens
+          this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
+        }
+      }
+    }
+  }
+  defaultCounterFormatter(length, maxlength) {
+    return `${length} / ${maxlength}`;
+  }
+  hasStartEl() {
+    const startEl = this.el.querySelector('[slot="start"]');
+    if (startEl !== null) {
+      this.el.classList.add('item-has-start-slot');
+    }
+  }
+  render() {
+    const { counterString, detail, detailIcon, download, fill, labelColorStyles, lines, disabled, href, rel, shape, target, routerAnimation, routerDirection, } = this;
+    const childStyles = {};
+    const mode = getIonMode$1(this);
+    const clickable = this.isClickable();
+    const canActivate = this.canActivate();
+    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
+    const attrs = TagType === 'button'
+      ? { type: this.type }
+      : {
+        download,
+        href,
+        rel,
+        target,
+      };
+    // Only set onClick if the item is clickable to prevent screen
+    // readers from reading all items as clickable
+    const clickFn = clickable
+      ? {
+        onClick: (ev) => {
+          openURL(href, ev, routerDirection, routerAnimation);
+        },
+      }
+      : {};
+    const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
+    this.itemStyles.forEach((value) => {
+      Object.assign(childStyles, value);
+    });
+    const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
+    const fillValue = fill || 'none';
+    const inList = hostContext('ion-list', this.el);
+    return (h(Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), createColorClasses$1(this.color, {
+        item: true,
+        [mode]: true,
+        [`item-lines-${lines}`]: lines !== undefined,
+        [`item-fill-${fillValue}`]: true,
+        [`item-shape-${shape}`]: shape !== undefined,
+        'item-disabled': disabled,
+        'in-list': inList,
+        'item-multiple-inputs': this.multipleInputs,
+        'ion-activatable': canActivate,
+        'ion-focusable': this.focusable,
+        'item-rtl': document.dir === 'rtl',
+      })), role: inList ? 'listitem' : null }, h(TagType, Object.assign({}, attrs, { class: "item-native", part: "native", disabled: disabled }, clickFn), h("slot", { name: "start" }), h("div", { class: "item-inner" }, h("div", { class: "input-wrapper" }, h("slot", null)), h("slot", { name: "end" }), showDetail && (h("ion-icon", { icon: detailIcon, lazy: false, class: "item-detail-icon", part: "detail-icon", "aria-hidden": "true", "flip-rtl": detailIcon === chevronForward })), h("div", { class: "item-inner-highlight" })), canActivate && mode === 'md' && h("ion-ripple-effect", null), h("div", { class: "item-highlight" })), h("div", { class: "item-bottom" }, h("slot", { name: "error" }), h("slot", { name: "helper" }), counterString && h("ion-note", { class: "item-counter" }, counterString))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "counterFormatter": ["counterFormatterChanged"]
+  }; }
+};
+Item.style = {
+  ios: itemIosCss,
+  md: itemMdCss
+};
+
+const noteIosCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-350, #a6a6a6)}";
+
+const noteMdCss = ":host{color:var(--color);font-family:var(--ion-font-family, inherit);box-sizing:border-box}:host(.ion-color){color:var(--ion-color-base)}:host{--color:var(--ion-color-step-600, #666666);font-size:14px}";
+
+const Note = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    return (h(Host, { class: createColorClasses$1(this.color, {
+        [mode]: true,
+      }) }, h("slot", null)));
+  }
+};
+Note.style = {
+  ios: noteIosCss,
+  md: noteMdCss
+};
+
+const rangeIosCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:flex;position:relative;flex:3;align-items:center;font-family:var(--ion-font-family, inherit);user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;box-sizing:border-box}.range-knob-handle{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset;right:unset;right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-knob-handle{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset;right:unset;right:0}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset}.range-knob{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host(.in-item) ::slotted(ion-label){align-self:center}:host{--knob-border-radius:50%;--knob-background:#ffffff;--knob-box-shadow:0 3px 1px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(0, 0, 0, 0.02);--knob-size:28px;--bar-height:2px;--bar-background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:0;--height:42px;padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-tick-active{background:var(--ion-color-base)}::slotted([slot=start]){margin-left:0;margin-right:16px;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:16px;margin-inline-end:16px}}::slotted([slot=end]){margin-left:16px;margin-right:0;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:0;margin-inline-end:0}}:host(.range-has-pin){padding-top:20px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-tick{margin-left:-1px;border-radius:0;position:absolute;top:18px;width:2px;height:8px;background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);pointer-events:none}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-tick{margin-left:unset;-webkit-margin-start:-1px;margin-inline-start:-1px}}.range-tick-active{background:var(--bar-background-active)}.range-pin{transform:translate3d(0,  28px,  0) scale(0.01);padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px;display:inline-block;position:relative;top:-20px;min-width:28px;transition:transform 120ms ease;background:transparent;color:var(--ion-text-color, #000);font-size:12px;text-align:center}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-pin{padding-left:unset;padding-right:unset;-webkit-padding-start:8px;padding-inline-start:8px;-webkit-padding-end:8px;padding-inline-end:8px}}.range-knob-pressed .range-pin{transform:translate3d(0,  0,  0) scale(1)}:host(.range-disabled){opacity:0.5}";
+
+const rangeMdCss = ":host{--knob-handle-size:calc(var(--knob-size) * 2);display:flex;position:relative;flex:3;align-items:center;font-family:var(--ion-font-family, inherit);user-select:none;z-index:2}:host(.range-disabled){pointer-events:none}::slotted(ion-label){flex:initial}::slotted(ion-icon[slot]){font-size:24px}.range-slider{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}:host(.range-pressed) .range-slider{cursor:grabbing}.range-pin{position:absolute;background:var(--ion-color-base);color:var(--ion-color-contrast);text-align:center;box-sizing:border-box}.range-knob-handle{left:0;top:calc((var(--height) - var(--knob-handle-size)) / 2);margin-left:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:var(--knob-handle-size);height:var(--knob-handle-size);text-align:center}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset;right:unset;right:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-knob-handle{margin-left:unset;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2)}}[dir=rtl] .range-knob-handle,:host-context([dir=rtl]) .range-knob-handle{left:unset}.range-knob-handle:active,.range-knob-handle:focus{outline:none}.range-bar{border-radius:var(--bar-border-radius);left:0;top:calc((var(--height) - var(--bar-height)) / 2);position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset;right:unset;right:0}[dir=rtl] .range-bar,:host-context([dir=rtl]) .range-bar{left:unset}.range-knob{border-radius:var(--knob-border-radius);left:calc(50% - var(--knob-size) / 2);top:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset;right:unset;right:calc(50% - var(--knob-size) / 2)}[dir=rtl] .range-knob,:host-context([dir=rtl]) .range-knob{left:unset}:host(.range-pressed) .range-bar-active{will-change:left, right}:host(.in-item){width:100%}:host(.in-item) ::slotted(ion-label){align-self:center}:host{--knob-border-radius:50%;--knob-background:var(--bar-background-active);--knob-box-shadow:none;--knob-size:18px;--bar-height:2px;--bar-background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.26);--bar-background-active:var(--ion-color-primary, #3880ff);--bar-border-radius:0;--height:42px;--pin-background:var(--ion-color-primary, #3880ff);--pin-color:var(--ion-color-primary-contrast, #fff);padding-left:14px;padding-right:14px;padding-top:8px;padding-bottom:8px;font-size:12px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;padding-right:unset;-webkit-padding-start:14px;padding-inline-start:14px;-webkit-padding-end:14px;padding-inline-end:14px}}:host(.ion-color) .range-bar{background:rgba(var(--ion-color-base-rgb), 0.26)}:host(.ion-color) .range-bar-active,:host(.ion-color) .range-knob,:host(.ion-color) .range-pin,:host(.ion-color) .range-pin::before,:host(.ion-color) .range-tick{background:var(--ion-color-base);color:var(--ion-color-contrast)}::slotted([slot=start]){margin-left:0;margin-right:14px;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:14px;margin-inline-end:14px}}::slotted([slot=end]){margin-left:14px;margin-right:0;margin-top:0;margin-bottom:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;margin-right:unset;-webkit-margin-start:14px;margin-inline-start:14px;-webkit-margin-end:0;margin-inline-end:0}}:host(.range-has-pin){padding-top:28px}.range-bar-active{bottom:0;width:auto;background:var(--bar-background-active)}.range-knob{transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease;z-index:2}.range-tick{position:absolute;top:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick-active{background:transparent}.range-pin{padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;border-radius:50%;transform:translate3d(0,  0,  0) scale(0.01);display:inline-block;position:relative;min-width:28px;height:28px;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);text-align:center}.range-pin::before{left:50%;top:3px;margin-left:-13px;border-radius:50% 50% 50% 0;position:absolute;width:26px;height:26px;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}[dir=rtl] .range-pin::before,:host-context([dir=rtl]) .range-pin::before{left:unset;right:unset;right:50%}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.range-pin::before{margin-left:unset;-webkit-margin-start:-13px;margin-inline-start:-13px}}[dir=rtl] .range-pin::before,:host-context([dir=rtl]) .range-pin::before{left:unset}.range-knob-pressed .range-pin{transform:translate3d(0,  -24px,  0) scale(1)}:host(:not(.range-has-pin)) .range-knob-pressed .range-knob{transform:scale(1)}:host(.range-disabled) .range-bar-active,:host(.range-disabled) .range-bar,:host(.range-disabled) .range-tick{background-color:var(--ion-color-step-250, #bfbfbf)}:host(.range-disabled) .range-knob{transform:scale(0.55);outline:5px solid #fff;background-color:var(--ion-color-step-250, #bfbfbf)}";
+
+const Range = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionChange = createEvent(this, "ionChange", 7);
+    this.ionStyle = createEvent(this, "ionStyle", 7);
+    this.ionFocus = createEvent(this, "ionFocus", 7);
+    this.ionBlur = createEvent(this, "ionBlur", 7);
+    this.ionKnobMoveStart = createEvent(this, "ionKnobMoveStart", 7);
+    this.ionKnobMoveEnd = createEvent(this, "ionKnobMoveEnd", 7);
+    this.didLoad = false;
+    this.noUpdate = false;
+    this.hasFocus = false;
+    this.inheritedAttributes = {};
+    this.contentEl = null;
+    this.initialContentScrollY = true;
+    this.ratioA = 0;
+    this.ratioB = 0;
+    /**
+     * How long, in milliseconds, to wait to trigger the
+     * `ionChange` event after each change in the range value.
+     * This also impacts form bindings such as `ngModel` or `v-model`.
+     */
+    this.debounce = 0;
+    // TODO: In Ionic Framework v6 this should initialize to this.rangeId like the other form components do.
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = '';
+    /**
+     * Show two knobs.
+     */
+    this.dualKnobs = false;
+    /**
+     * Minimum integer value of the range.
+     */
+    this.min = 0;
+    /**
+     * Maximum integer value of the range.
+     */
+    this.max = 100;
+    /**
+     * If `true`, a pin with integer value is shown when the knob
+     * is pressed.
+     */
+    this.pin = false;
+    /**
+     * A callback used to format the pin text.
+     * By default the pin text is set to `Math.round(value)`.
+     */
+    this.pinFormatter = (value) => Math.round(value);
+    /**
+     * If `true`, the knob snaps to tick marks evenly spaced based
+     * on the step property value.
+     */
+    this.snaps = false;
+    /**
+     * Specifies the value granularity.
+     */
+    this.step = 1;
+    /**
+     * If `true`, tick marks are displayed based on the step value.
+     * Only applies when `snaps` is `true`.
+     */
+    this.ticks = true;
+    /**
+     * If `true`, the user cannot interact with the range.
+     */
+    this.disabled = false;
+    /**
+     * the value of the range.
+     */
+    this.value = 0;
+    this.clampBounds = (value) => {
+      return clamp(this.min, value, this.max);
+    };
+    this.ensureValueInBounds = (value) => {
+      if (this.dualKnobs) {
+        return {
+          lower: this.clampBounds(value.lower),
+          upper: this.clampBounds(value.upper),
+        };
+      }
+      else {
+        return this.clampBounds(value);
+      }
+    };
+    this.setupGesture = async () => {
+      const rangeSlider = this.rangeSlider;
+      if (rangeSlider) {
+        this.gesture = (await import('./index-21661af2.js')).createGesture({
+          el: rangeSlider,
+          gestureName: 'range',
+          gesturePriority: 100,
+          threshold: 0,
+          onStart: (ev) => this.onStart(ev),
+          onMove: (ev) => this.onMove(ev),
+          onEnd: (ev) => this.onEnd(ev),
+        });
+        this.gesture.enable(!this.disabled);
+      }
+    };
+    this.handleKeyboard = (knob, isIncrease) => {
+      const { ensureValueInBounds } = this;
+      let step = this.step;
+      step = step > 0 ? step : 1;
+      step = step / (this.max - this.min);
+      if (!isIncrease) {
+        step *= -1;
+      }
+      if (knob === 'A') {
+        this.ratioA = clamp(0, this.ratioA + step, 1);
+      }
+      else {
+        this.ratioB = clamp(0, this.ratioB + step, 1);
+      }
+      this.ionKnobMoveStart.emit({ value: ensureValueInBounds(this.value) });
+      this.updateValue();
+      this.ionKnobMoveEnd.emit({ value: ensureValueInBounds(this.value) });
+    };
+    this.onBlur = () => {
+      if (this.hasFocus) {
+        this.hasFocus = false;
+        this.ionBlur.emit();
+        this.emitStyle();
+      }
+    };
+    this.onFocus = () => {
+      if (!this.hasFocus) {
+        this.hasFocus = true;
+        this.ionFocus.emit();
+        this.emitStyle();
+      }
+    };
+  }
+  debounceChanged() {
+    this.ionChange = debounceEvent(this.ionChange, this.debounce);
+  }
+  minChanged() {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+  }
+  maxChanged() {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+  }
+  activeBarStartChanged() {
+    const { activeBarStart } = this;
+    if (activeBarStart !== undefined) {
+      if (activeBarStart > this.max) {
+        printIonWarning(`Range: The value of activeBarStart (${activeBarStart}) is greater than the max (${this.max}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
+        this.activeBarStart = this.max;
+      }
+      else if (activeBarStart < this.min) {
+        printIonWarning(`Range: The value of activeBarStart (${activeBarStart}) is less than the min (${this.min}). Valid values are greater than or equal to the min value and less than or equal to the max value.`, this.el);
+        this.activeBarStart = this.min;
+      }
+    }
+  }
+  disabledChanged() {
+    if (this.gesture) {
+      this.gesture.enable(!this.disabled);
+    }
+    this.emitStyle();
+  }
+  valueChanged(value) {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+    value = this.ensureValueInBounds(value);
+    this.ionChange.emit({ value });
+  }
+  componentWillLoad() {
+    /**
+     * If user has custom ID set then we should
+     * not assign the default incrementing ID.
+     */
+    this.rangeId = this.el.hasAttribute('id') ? this.el.getAttribute('id') : `ion-r-${rangeIds++}`;
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+  componentDidLoad() {
+    this.setupGesture();
+    this.didLoad = true;
+  }
+  connectedCallback() {
+    this.updateRatio();
+    this.debounceChanged();
+    this.disabledChanged();
+    this.activeBarStartChanged();
+    /**
+     * If we have not yet rendered
+     * ion-range, then rangeSlider is not defined.
+     * But if we are moving ion-range via appendChild,
+     * then rangeSlider will be defined.
+     */
+    if (this.didLoad) {
+      this.setupGesture();
+    }
+    this.contentEl = findClosestIonContent(this.el);
+  }
+  disconnectedCallback() {
+    if (this.gesture) {
+      this.gesture.destroy();
+      this.gesture = undefined;
+    }
+  }
+  getValue() {
+    const value = this.value || 0;
+    if (this.dualKnobs) {
+      if (typeof value === 'object') {
+        return value;
+      }
+      return {
+        lower: 0,
+        upper: value,
+      };
+    }
+    else {
+      if (typeof value === 'object') {
+        return value.upper;
+      }
+      return value;
+    }
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      interactive: true,
+      'interactive-disabled': this.disabled,
+    });
+  }
+  onStart(detail) {
+    const { contentEl } = this;
+    if (contentEl) {
+      this.initialContentScrollY = disableContentScrollY(contentEl);
+    }
+    const rect = (this.rect = this.rangeSlider.getBoundingClientRect());
+    const currentX = detail.currentX;
+    // figure out which knob they started closer to
+    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
+    if (isRTL(this.el)) {
+      ratio = 1 - ratio;
+    }
+    this.pressedKnob = !this.dualKnobs || Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio) ? 'A' : 'B';
+    this.setFocus(this.pressedKnob);
+    // update the active knob's position
+    this.update(currentX);
+    this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
+  }
+  onMove(detail) {
+    this.update(detail.currentX);
+  }
+  onEnd(detail) {
+    const { contentEl, initialContentScrollY } = this;
+    if (contentEl) {
+      resetContentScrollY(contentEl, initialContentScrollY);
+    }
+    this.update(detail.currentX);
+    this.pressedKnob = undefined;
+    this.ionKnobMoveEnd.emit({ value: this.ensureValueInBounds(this.value) });
+  }
+  update(currentX) {
+    // figure out where the pointer is currently at
+    // update the knob being interacted with
+    const rect = this.rect;
+    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
+    if (isRTL(this.el)) {
+      ratio = 1 - ratio;
+    }
+    if (this.snaps) {
+      // snaps the ratio to the current value
+      ratio = valueToRatio(ratioToValue(ratio, this.min, this.max, this.step), this.min, this.max);
+    }
+    // update which knob is pressed
+    if (this.pressedKnob === 'A') {
+      this.ratioA = ratio;
+    }
+    else {
+      this.ratioB = ratio;
+    }
+    // Update input value
+    this.updateValue();
+  }
+  get valA() {
+    return ratioToValue(this.ratioA, this.min, this.max, this.step);
+  }
+  get valB() {
+    return ratioToValue(this.ratioB, this.min, this.max, this.step);
+  }
+  get ratioLower() {
+    if (this.dualKnobs) {
+      return Math.min(this.ratioA, this.ratioB);
+    }
+    const { activeBarStart } = this;
+    if (activeBarStart == null) {
+      return 0;
+    }
+    return valueToRatio(activeBarStart, this.min, this.max);
+  }
+  get ratioUpper() {
+    if (this.dualKnobs) {
+      return Math.max(this.ratioA, this.ratioB);
+    }
+    return this.ratioA;
+  }
+  updateRatio() {
+    const value = this.getValue();
+    const { min, max } = this;
+    if (this.dualKnobs) {
+      this.ratioA = valueToRatio(value.lower, min, max);
+      this.ratioB = valueToRatio(value.upper, min, max);
+    }
+    else {
+      this.ratioA = valueToRatio(value, min, max);
+    }
+  }
+  updateValue() {
+    this.noUpdate = true;
+    const { valA, valB } = this;
+    this.value = !this.dualKnobs
+      ? valA
+      : {
+        lower: Math.min(valA, valB),
+        upper: Math.max(valA, valB),
+      };
+    this.noUpdate = false;
+  }
+  setFocus(knob) {
+    if (this.el.shadowRoot) {
+      const knobEl = this.el.shadowRoot.querySelector(knob === 'A' ? '.range-knob-a' : '.range-knob-b');
+      if (knobEl) {
+        knobEl.focus();
+      }
+    }
+  }
+  render() {
+    var _a;
+    const { min, max, step, el, handleKeyboard, pressedKnob, disabled, pin, ratioLower, ratioUpper, inheritedAttributes, rangeId, pinFormatter, } = this;
+    /**
+     * Look for external label, ion-label, or aria-labelledby.
+     * If none, see if user placed an aria-label on the host
+     * and use that instead.
+     */
+    let { labelText } = getAriaLabel(el, rangeId);
+    if (labelText === undefined || labelText === null) {
+      labelText = inheritedAttributes['aria-label'];
+    }
+    const mode = getIonMode$1(this);
+    let barStart = `${ratioLower * 100}%`;
+    let barEnd = `${100 - ratioUpper * 100}%`;
+    const rtl = isRTL(this.el);
+    const start = rtl ? 'right' : 'left';
+    const end = rtl ? 'left' : 'right';
+    const tickStyle = (tick) => {
+      return {
+        [start]: tick[start],
+      };
+    };
+    if (this.dualKnobs === false) {
+      /**
+       * When the value is less than the activeBarStart or the min value,
+       * the knob will display at the start of the active bar.
+       */
+      if (this.valA < ((_a = this.activeBarStart) !== null && _a !== void 0 ? _a : this.min)) {
+        /**
+         * Sets the bar positions relative to the upper and lower limits.
+         * Converts the ratio values into percentages, used as offsets for left/right styles.
+         *
+         * The ratioUpper refers to the knob position on the bar.
+         * The ratioLower refers to the end position of the active bar (the value).
+         */
+        barStart = `${ratioUpper * 100}%`;
+        barEnd = `${100 - ratioLower * 100}%`;
+      }
+      else {
+        /**
+         * Otherwise, the knob will display at the end of the active bar.
+         *
+         * The ratioLower refers to the start position of the active bar (the value).
+         * The ratioUpper refers to the knob position on the bar.
+         */
+        barStart = `${ratioLower * 100}%`;
+        barEnd = `${100 - ratioUpper * 100}%`;
+      }
+    }
+    const barStyle = {
+      [start]: barStart,
+      [end]: barEnd,
+    };
+    const ticks = [];
+    if (this.snaps && this.ticks) {
+      for (let value = min; value <= max; value += step) {
+        const ratio = valueToRatio(value, min, max);
+        const ratioMin = Math.min(ratioLower, ratioUpper);
+        const ratioMax = Math.max(ratioLower, ratioUpper);
+        const tick = {
+          ratio,
+          /**
+           * Sets the tick mark as active when the tick is between the min bounds and the knob.
+           * When using activeBarStart, the tick mark will be active between the knob and activeBarStart.
+           */
+          active: ratio >= ratioMin && ratio <= ratioMax,
+        };
+        tick[start] = `${ratio * 100}%`;
+        ticks.push(tick);
+      }
+    }
+    renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
+    return (h(Host, { onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses$1(this.color, {
+        [mode]: true,
+        'in-item': hostContext('ion-item', el),
+        'range-disabled': disabled,
+        'range-pressed': pressedKnob !== undefined,
+        'range-has-pin': pin,
+      }) }, h("slot", { name: "start" }), h("div", { class: "range-slider", ref: (rangeEl) => (this.rangeSlider = rangeEl) }, ticks.map((tick) => (h("div", { style: tickStyle(tick), role: "presentation", class: {
+        'range-tick': true,
+        'range-tick-active': tick.active,
+      }, part: tick.active ? 'tick-active' : 'tick' }))), h("div", { class: "range-bar", role: "presentation", part: "bar" }), h("div", { class: "range-bar range-bar-active", role: "presentation", style: barStyle, part: "bar-active" }), renderKnob(rtl, {
+      knob: 'A',
+      pressed: pressedKnob === 'A',
+      value: this.valA,
+      ratio: this.ratioA,
+      pin,
+      pinFormatter,
+      disabled,
+      handleKeyboard,
+      min,
+      max,
+      labelText,
+    }), this.dualKnobs &&
+      renderKnob(rtl, {
+        knob: 'B',
+        pressed: pressedKnob === 'B',
+        value: this.valB,
+        ratio: this.ratioB,
+        pin,
+        pinFormatter,
+        disabled,
+        handleKeyboard,
+        min,
+        max,
+        labelText,
+      })), h("slot", { name: "end" })));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "debounce": ["debounceChanged"],
+    "min": ["minChanged"],
+    "max": ["maxChanged"],
+    "activeBarStart": ["activeBarStartChanged"],
+    "disabled": ["disabledChanged"],
+    "value": ["valueChanged"]
+  }; }
+};
+const renderKnob = (rtl, { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, labelText, pinFormatter }) => {
+  const start = rtl ? 'right' : 'left';
+  const knobStyle = () => {
+    const style = {};
+    style[start] = `${ratio * 100}%`;
+    return style;
+  };
+  return (h("div", { onKeyDown: (ev) => {
+      const key = ev.key;
+      if (key === 'ArrowLeft' || key === 'ArrowDown') {
+        handleKeyboard(knob, false);
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+      else if (key === 'ArrowRight' || key === 'ArrowUp') {
+        handleKeyboard(knob, true);
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    }, class: {
+      'range-knob-handle': true,
+      'range-knob-a': knob === 'A',
+      'range-knob-b': knob === 'B',
+      'range-knob-pressed': pressed,
+      'range-knob-min': value === min,
+      'range-knob-max': value === max,
+    }, style: knobStyle(), role: "slider", tabindex: disabled ? -1 : 0, "aria-label": labelText, "aria-valuemin": min, "aria-valuemax": max, "aria-disabled": disabled ? 'true' : null, "aria-valuenow": value }, pin && (h("div", { class: "range-pin", role: "presentation", part: "pin" }, pinFormatter(value))), h("div", { class: "range-knob", role: "presentation", part: "knob" })));
+};
+const ratioToValue = (ratio, min, max, step) => {
+  let value = (max - min) * ratio;
+  if (step > 0) {
+    value = Math.round(value / step) * step + min;
+  }
+  return clamp(min, value, max);
+};
+const valueToRatio = (value, min, max) => {
+  return clamp(0, (value - min) / (max - min), 1);
+};
+let rangeIds = 0;
+Range.style = {
+  ios: rangeIosCss,
+  md: rangeMdCss
+};
+
+const rippleEffectCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{transform:translate(var(--translate-end)) scale(var(--final-scale, 1));animation:150ms fadeOutAnimation forwards}@keyframes rippleAnimation{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(1)}to{transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes fadeInAnimation{from{animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeOutAnimation{from{animation-timing-function:linear;opacity:0.16}to{opacity:0}}";
+
+const RippleEffect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Sets the type of ripple-effect:
+     *
+     * - `bounded`: the ripple effect expands from the user's click position
+     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+     *
+     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+     * while surfaces for unbounded ripples should have it set to visible.
+     */
+    this.type = 'bounded';
+  }
+  /**
+   * Adds the ripple effect to the parent element.
+   *
+   * @param x The horizontal coordinate of where the ripple should start.
+   * @param y The vertical coordinate of where the ripple should start.
+   */
+  async addRipple(x, y) {
+    return new Promise((resolve) => {
+      readTask(() => {
+        const rect = this.el.getBoundingClientRect();
+        const width = rect.width;
+        const height = rect.height;
+        const hypotenuse = Math.sqrt(width * width + height * height);
+        const maxDim = Math.max(height, width);
+        const maxRadius = this.unbounded ? maxDim : hypotenuse + PADDING;
+        const initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE);
+        const finalScale = maxRadius / initialSize;
+        let posX = x - rect.left;
+        let posY = y - rect.top;
+        if (this.unbounded) {
+          posX = width * 0.5;
+          posY = height * 0.5;
+        }
+        const styleX = posX - initialSize * 0.5;
+        const styleY = posY - initialSize * 0.5;
+        const moveX = width * 0.5 - posX;
+        const moveY = height * 0.5 - posY;
+        writeTask(() => {
+          const div = document.createElement('div');
+          div.classList.add('ripple-effect');
+          const style = div.style;
+          style.top = styleY + 'px';
+          style.left = styleX + 'px';
+          style.width = style.height = initialSize + 'px';
+          style.setProperty('--final-scale', `${finalScale}`);
+          style.setProperty('--translate-end', `${moveX}px, ${moveY}px`);
+          const container = this.el.shadowRoot || this.el;
+          container.appendChild(div);
+          setTimeout(() => {
+            resolve(() => {
+              removeRipple(div);
+            });
+          }, 225 + 100);
+        });
+      });
+    });
+  }
+  get unbounded() {
+    return this.type === 'unbounded';
+  }
+  render() {
+    const mode = getIonMode$1(this);
+    return (h(Host, { role: "presentation", class: {
+        [mode]: true,
+        unbounded: this.unbounded,
+      } }));
+  }
+  get el() { return getElement(this); }
+};
+const removeRipple = (ripple) => {
+  ripple.classList.add('fade-out');
+  setTimeout(() => {
+    ripple.remove();
+  }, 200);
+};
+const PADDING = 10;
+const INITIAL_ORIGIN_SCALE = 0.5;
+RippleEffect.style = rippleEffectCss;
+
+const buttonCss = "sparkle-button{background-color:rgba(var(--ion-color-sparkle-rgb), var(--bg-alpha, 0.06));border-radius:6px;color:var(--accent-color);display:inline-block;font-weight:600;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.1)}sparkle-button a,sparkle-button button{color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;padding:0.75em 1.5em}sparkle-button button{appearance:none;background:none;border:none;line-height:inherit}sparkle-button svg{fill:currentColor;height:1em;margin-bottom:-0.125em;width:1em}sparkle-button[round]{border-radius:2em}sparkle-button[primary]{background-color:rgba(var(--ion-color-sparkle-rgb));color:var(--ion-color-sparkle-contrast)}@media (hover: hover){sparkle-button:hover{--bg-alpha:0.08}sparkle-button:active{--bg-alpha:0.1}}";
+
+const SparkleButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.round = false;
+    this.primary = false;
+  }
+  render() {
+    if (this.href !== undefined) {
+      const isInternal = /^\/course/.test(this.href);
+      if (isInternal) {
+        return (h("stencil-route-link", { url: this.href }, h("slot", null)));
+      }
+      return (h("a", { href: this.href }, h("slot", null)));
+    }
+    return (h("button", null, h("slot", null)));
+  }
+};
+SparkleButton.style = buttonCss;
+
+const sparkleQuizCss = "sparkle-quiz{display:block;font-family:var(--font-family);--sparkle-quiz-question-container-padding:10px 0px;--sparkle-quiz-question-container-margin:0px;--sparkle-quiz-question-text-padding:10px 0px;--sparkle-quiz-option-border:2px solid var(--line-rule-color);--sparkle-quiz-selected-option-border:2px solid var(--text-color--dark);--sparkle-quiz-option-border-radius:4px;--sparkle-quiz-option-padding:5px 10px;--sparkle-quiz-option-width:100%;--sparkle-quiz-error-bg-color:#fbaeae;--sparkle-quiz-success-bg-color:#fbaeae;padding:var(--sparkle-quiz-question-container-padding);margin:var(--sparkle-quiz-question-container-margin)}.question-text{padding:var(--sparkle-quiz-question-text-padding)}.option{padding:5px 0px}.number{padding:0px 14px;border:1px solid #ebebeb;border-radius:4px;margin-right:10px;font-size:14px;width:14px;display:inline-flex;justify-content:center}.feedback-container{padding:10px;border-radius:4px}.incorrect .feedback-container{background-color:var(--sparkle-quiz-error-bg-color, #fbaeae)}.correct .feedback-container{background-color:var(--sparkle-quiz-success-bg-color, #fbaeae)}";
+
+const SparkleQuiz = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizAnswerChanged = createEvent(this, "quizAnswerChanged", 7);
+    this.type = 'TEXT';
+    this.scale = 'FIVE-POINTS';
+    this.options = [];
+  }
+  //   private pageInfo: any;
+  //   @Watch('questionId')
+  //   async loadQuestion() {
+  //     if (this.quizData) {
+  //       this.question = this.quizData[+this.questionId];
+  //     }
+  //   }
+  //@State() question: SparkleQuizQuestion;
+  //@State() quizData: { [key: string]: SparkleQuizQuestion };
+  async componentWillLoad() { }
+  async componentDidLoad() {
+    this.options = [];
+    if (this.el.querySelector("[slot='options']")) {
+      Array.from(this.el.querySelector("[slot='options']").querySelectorAll('option')).forEach(el => {
+        this.options = [...this.options, { option: el.innerText }];
+      });
+      console.log(this.questionText, this.options);
+    }
+    this.quizAnswerChanged.emit({
+      question: null,
+      answer: '1',
+    });
+  }
+  quizInputChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizFeedbackChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizSelectChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  quizOpinionChangeHandler(event) {
+    this.quizAnswerChanged.emit({
+      question: event.detail.question,
+      answer: event.detail.value,
+    });
+  }
+  getQuestionFeedback() {
+    if (this.type == 'MULTIPLE-CHOICE') {
+      //   const feedbacks = this.question.options.filter(x => x.correct == true).map(x => x.feedback);
+      //   return feedbacks.length > 0 && feedbacks.map(feedback => <small>{feedback}</small>);
+      return h("small", null);
+    }
+    else if (this.type == 'FEEDBACK' || this.type == 'TEXT') {
+      return this.feedback && h("small", null, " ", this.feedback);
+    }
+  }
+  showAnswerStatus() {
+    return h("div", null, this.correct ? h("strong", null, "Good job!") : h("strong", null, "Incorrect answer, please try again."));
+  }
+  renderQuestion() {
+    var question = {
+      questionId: this.questionId,
+      questionText: this.questionText,
+      questionType: this.type,
+      scale: this.scale,
+      showOptionNumber: this.showOptionNumber,
+      options: this.options,
+      //options: Array<SparkleQuizQuestionOption>;
+      feedback: this.feedback,
+    };
+    if (this.type == 'MULTIPLE-CHOICE') {
+      return h("sparkle-quiz-select", { question: question, allowMultiple: true });
+    }
+    else if (this.type == 'FEEDBACK') {
+      return h("sparkle-quiz-feedback", { question: question });
+    }
+    else if (this.type == 'TEXT') {
+      return h("sparkle-quiz-input", { question: question });
+    }
+    else if (this.type == 'OPINION') {
+      return h("sparkle-quiz-opinion", { question: question });
+    }
+    else if (this.type == 'POLL') {
+      return h("sparkle-quiz-poll", { question: question });
+    }
+  }
+  render() {
+    if (this.questionText) {
+      let classes = {
+        correct: this.submitted && this.correct,
+        incorrect: this.submitted && !this.correct,
+      };
+      return (h("div", { class: classes, ref: el => (this.containerRef = el) }, h("div", { hidden: true }, h("slot", null)), this.renderQuestion(), this.submitted && this.showInstantResult && h("div", { class: "feedback-container" }, [this.showAnswerStatus(), this.getQuestionFeedback()])));
+    }
+    else {
+      return h("p", null, "No question found.");
+    }
+  }
+  get el() { return getElement(this); }
+};
+SparkleQuiz.style = sparkleQuizCss;
+
+function GetSelectOptionId(questionId, index) {
+  return "question-" + questionId + "-option-" + index;
+}
+
+const sparkleQuizFeedbackCss = ":host{display:block}";
+
+const SparkleQuizFeedback = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizFeedbackChange = createEvent(this, "quizFeedbackChange", 7);
+    this.displayOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+  }
+  render() {
+    return (h(Host, { class: "quiz__feedback" }, h("div", { class: "question-container" }, h("div", { class: "question-text" }, this.question.questionText), h("div", null, this.displayOptions.map((option, index) => h("div", { class: "option" }, h("input", { type: "radio", id: GetSelectOptionId(this.question.questionId, index), name: "question-" + this.question.questionId, value: option, onChange: (e) => this.quizFeedbackChange.emit({ value: e.target.value, question: this.question }) }), h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) }, h("span", { class: "number" }, this.displayOptions[index]), " ", option), h("br", null)))))));
+  }
+};
+SparkleQuizFeedback.style = sparkleQuizFeedbackCss;
+
+const sparkleQuizInputCss = ":host{display:block}";
+
+const SparkleQuizInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizInputChange = createEvent(this, "quizInputChange", 7);
+  }
+  render() {
+    return (h(Host, { class: "quiz__input" }, h("div", { class: "question-container" }, h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText), h("input", { type: "text", class: "form-control", id: "question-" + this.question.questionId, name: "question-" + this.question.questionId, onInput: (e) => this.quizInputChange.emit({ value: e.target.value, question: this.question }) }))));
+  }
+};
+SparkleQuizInput.style = sparkleQuizInputCss;
+
+const sparkleQuizOpinionCss = "sparkle-quiz-opinion .scale{display:flex;justify-content:space-between}sparkle-quiz-opinion .scale>p{margin:0}sparkle-quiz-opinion .scale>p.selected{color:var(--ion-color-primary)}sparkle-quiz-opinion ion-icon{font-size:30px}sparkle-quiz-opinion .icon-group{min-width:70px;text-align:right;padding-right:10px}";
+
+const SparkleQuizOpinion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizOpinionChange = createEvent(this, "quizOpinionChange", 7);
+    this.fivePointsDisplayOptions = ['Strongly agree', 'Agree', 'Not sure', 'Disagree', 'Strongly disagree'];
+    this.tenPointsDisplayOptions = ["Never",
+      "Never",
+      "Sometimes",
+      "Sometimes",
+      "Half of the time",
+      "Half of the time",
+      "Most of the time",
+      "Most of the time",
+      "Always",
+      "Always",
+      "Always"];
+    this.tenPointsDefaultValue = 5;
+  }
+  optionChanged(index, answer) {
+    this.selectedIndex = index;
+    this.quizOpinionChange.emit({ value: answer, question: this.question });
+  }
+  renderFivePointScale() {
+    return (this.fivePointsDisplayOptions.map((option, index) => h("div", { class: "option" }, h("input", { id: GetSelectOptionId(this.question.questionId, index), type: "radio", name: "question-" + this.question.questionId, value: option, onChange: (e) => this.optionChanged(index, this.fivePointsDisplayOptions[index]) }), h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) }, h("span", { class: "number" }, index + 1), option), h("br", null))));
+  }
+  renderTenPointScale() {
+    return (h("div", null, h("ion-item", null, h("ion-range", { class: "opinion-range", onIonChange: (e) => this.optionChanged(+e.detail.value, this.tenPointsDisplayOptions[+e.detail.value]), min: 0, max: 10, value: this.tenPointsDefaultValue, step: 1, pin: true, snaps: true }, h("ion-icon", { size: "small", slot: "start", name: "star-outline" }), h("ion-icon", { slot: "end", name: "star" }))), h("div", { class: "scale" }, h("p", null, "Never"), h("p", { class: "selected" }, this.tenPointsDisplayOptions[this.selectedIndex] || this.tenPointsDisplayOptions[this.tenPointsDefaultValue]), h("p", null, "Always")), h("br", null), h("hr", null)));
+  }
+  render() {
+    return (h(Host, { class: "quiz__opinion" }, h("div", { class: "opinion-container" }, h("div", { class: "question-text" }, this.question.questionText), h("div", null, this.question.scale == "FIVE-POINTS" && this.renderFivePointScale(), this.question.scale == "TEN-POINTS" && this.renderTenPointScale()))));
+  }
+  get el() { return getElement(this); }
+};
+SparkleQuizOpinion.style = sparkleQuizOpinionCss;
+
+const sparkleQuizPollCss = ":host{display:block}";
+
+const SparkleQuizPoll = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizInputChange = createEvent(this, "quizInputChange", 7);
+  }
+  render() {
+    return (h(Host, { class: "quiz__input" }, h("div", { class: "question-container" }, h("label", { htmlFor: "question-" + this.question.questionId, class: "form-label" }, this.question.questionText), h("input", { type: "text", class: "form-control", id: "question-" + this.question.questionId, name: "question-" + this.question.questionId, onInput: (e) => this.quizInputChange.emit({ value: e.target.value, question: this.question }) }))));
+  }
+};
+SparkleQuizPoll.style = sparkleQuizPollCss;
+
+const sparkleQuizSelectCss = ":host{display:block}";
+
+const SparkleQuizSelect = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.quizSelectChange = createEvent(this, "quizSelectChange", 7);
+    this.allowMultiple = false;
+    this.values = [];
+    this.displayOptions = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+  }
+  optionChanged(e) {
+    if (e.target.checked) {
+      this.values = [...this.values, e.target.value];
+    }
+    else {
+      this.values = this.values.filter(x => x !== e.target.value);
+    }
+    this.quizSelectChange.emit({ value: this.values, question: this.question });
+  }
+  render() {
+    return (h(Host, { class: "quiz__select" }, h("div", { class: "question-container" }, h("div", { class: "question-text" }, this.question.questionText), h("div", null, this.question.options.map((option, index) => h("div", { class: "option" }, h("input", { type: this.allowMultiple ? "checkbox" : "radio", id: GetSelectOptionId(this.question.questionId, index), name: "question-" + this.question.questionId, value: option.option, onChange: (e) => this.optionChanged(e) }), h("label", { htmlFor: GetSelectOptionId(this.question.questionId, index) }, h("span", { class: "number" }, this.displayOptions[index]), option.option), h("br", null)))))));
+  }
+};
+SparkleQuizSelect.style = sparkleQuizSelectCss;
+
+const getUrl = (url, root) => {
+  // Don't allow double slashes
+  if (url.charAt(0) == '/' && root.charAt(root.length - 1) == '/') {
+    return root.slice(0, root.length - 1) + url;
+  }
+  return root + url;
+};
+const RouteLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.unsubscribe = () => { return; };
+    this.activeClass = 'link-active';
+    this.exact = false;
+    this.strict = true;
+    /**
+      *  Custom tag to use instead of an anchor
+      */
+    this.custom = 'a';
+    this.match = null;
+  }
+  componentWillLoad() {
+    this.computeMatch();
+  }
+  // Identify if the current route is a match.
+  computeMatch() {
+    if (this.location) {
+      this.match = matchPath(this.location.pathname, {
+        path: this.urlMatch || this.url,
+        exact: this.exact,
+        strict: this.strict
+      });
+    }
+  }
+  handleClick(e) {
+    if (isModifiedEvent(e) || !this.history || !this.url || !this.root) {
+      return;
+    }
+    e.preventDefault();
+    return this.history.push(getUrl(this.url, this.root));
+  }
+  // Get the URL for this route link without the root from the router
+  render() {
+    let anchorAttributes = {
+      class: {
+        [this.activeClass]: this.match !== null,
+      },
+      onClick: this.handleClick.bind(this)
+    };
+    if (this.anchorClass) {
+      anchorAttributes.class[this.anchorClass] = true;
+    }
+    if (this.custom === 'a') {
+      anchorAttributes = Object.assign({}, anchorAttributes, { href: this.url, title: this.anchorTitle, role: this.anchorRole, tabindex: this.anchorTabIndex, 'aria-haspopup': this.ariaHaspopup, id: this.anchorId, 'aria-posinset': this.ariaPosinset, 'aria-setsize': this.ariaSetsize, 'aria-label': this.ariaLabel });
+    }
+    return (h(this.custom, Object.assign({}, anchorAttributes), h("slot", null)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "location": ["computeMatch"]
+  }; }
+};
+ActiveRouter.injectProps(RouteLink, [
+  'history',
+  'location',
+  'root'
+]);
+
+export { Icon as ion_icon, Item as ion_item, Note as ion_note, Range as ion_range, RippleEffect as ion_ripple_effect, SparkleButton as sparkle_button, SparkleQuiz as sparkle_quiz, SparkleQuizFeedback as sparkle_quiz_feedback, SparkleQuizInput as sparkle_quiz_input, SparkleQuizOpinion as sparkle_quiz_opinion, SparkleQuizPoll as sparkle_quiz_poll, SparkleQuizSelect as sparkle_quiz_select, RouteLink as stencil_route_link };