@venite/components 0.16.7 → 0.16.13

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

@@ -0,0 +1,363 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const frameworkDelegate = require('./framework-delegate-84d33ff0.js');
+const overlays = require('./overlays-eb464d6d.js');
+const theme = require('./theme-81caa5b0.js');
+const index$1 = require('./index-1a73a70c.js');
+const animation = require('./animation-34a434a2.js');
+require('./hardware-back-button-8c2f48d2.js');
+require('./helpers-41dfb43a.js');
+
+/**
+ * iOS Popover Enter Animation
+ */
+const iosEnterAnimation = (baseEl, ev) => {
+    let originY = 'top';
+    let originX = 'left';
+    const contentEl = baseEl.querySelector('.popover-content');
+    const contentDimentions = contentEl.getBoundingClientRect();
+    const contentWidth = contentDimentions.width;
+    const contentHeight = contentDimentions.height;
+    const bodyWidth = baseEl.ownerDocument.defaultView.innerWidth;
+    const bodyHeight = baseEl.ownerDocument.defaultView.innerHeight;
+    // If ev was passed, use that for target element
+    const targetDim = ev && ev.target && ev.target.getBoundingClientRect();
+    const targetTop = targetDim != null && 'top' in targetDim ? targetDim.top : bodyHeight / 2 - contentHeight / 2;
+    const targetLeft = targetDim != null && 'left' in targetDim ? targetDim.left : bodyWidth / 2;
+    const targetWidth = (targetDim && targetDim.width) || 0;
+    const targetHeight = (targetDim && targetDim.height) || 0;
+    const arrowEl = baseEl.querySelector('.popover-arrow');
+    const arrowDim = arrowEl.getBoundingClientRect();
+    const arrowWidth = arrowDim.width;
+    const arrowHeight = arrowDim.height;
+    if (targetDim == null) {
+        arrowEl.style.display = 'none';
+    }
+    const arrowCSS = {
+        top: targetTop + targetHeight,
+        left: targetLeft + targetWidth / 2 - arrowWidth / 2
+    };
+    const popoverCSS = {
+        top: targetTop + targetHeight + (arrowHeight - 1),
+        left: targetLeft + targetWidth / 2 - contentWidth / 2
+    };
+    // If the popover left is less than the padding it is off screen
+    // to the left so adjust it, else if the width of the popover
+    // exceeds the body width it is off screen to the right so adjust
+    //
+    let checkSafeAreaLeft = false;
+    let checkSafeAreaRight = false;
+    // If the popover left is less than the padding it is off screen
+    // to the left so adjust it, else if the width of the popover
+    // exceeds the body width it is off screen to the right so adjust
+    // 25 is a random/arbitrary number. It seems to work fine for ios11
+    // and iPhoneX. Is it perfect? No. Does it work? Yes.
+    if (popoverCSS.left < POPOVER_IOS_BODY_PADDING + 25) {
+        checkSafeAreaLeft = true;
+        popoverCSS.left = POPOVER_IOS_BODY_PADDING;
+    }
+    else if (contentWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left + 25 > bodyWidth) {
+        // Ok, so we're on the right side of the screen,
+        // but now we need to make sure we're still a bit further right
+        // cus....notchurally... Again, 25 is random. It works tho
+        checkSafeAreaRight = true;
+        popoverCSS.left = bodyWidth - contentWidth - POPOVER_IOS_BODY_PADDING;
+        originX = 'right';
+    }
+    // make it pop up if there's room above
+    if (targetTop + targetHeight + contentHeight > bodyHeight && targetTop - contentHeight > 0) {
+        arrowCSS.top = targetTop - (arrowHeight + 1);
+        popoverCSS.top = targetTop - contentHeight - (arrowHeight - 1);
+        baseEl.className = baseEl.className + ' popover-bottom';
+        originY = 'bottom';
+        // If there isn't room for it to pop up above the target cut it off
+    }
+    else if (targetTop + targetHeight + contentHeight > bodyHeight) {
+        contentEl.style.bottom = POPOVER_IOS_BODY_PADDING + '%';
+    }
+    arrowEl.style.top = arrowCSS.top + 'px';
+    arrowEl.style.left = arrowCSS.left + 'px';
+    contentEl.style.top = popoverCSS.top + 'px';
+    contentEl.style.left = popoverCSS.left + 'px';
+    if (checkSafeAreaLeft) {
+        contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-left, 0px))`;
+    }
+    if (checkSafeAreaRight) {
+        contentEl.style.left = `calc(${popoverCSS.left}px - var(--ion-safe-area-right, 0px))`;
+    }
+    contentEl.style.transformOrigin = originY + ' ' + originX;
+    const baseAnimation = animation.createAnimation();
+    const backdropAnimation = animation.createAnimation();
+    const wrapperAnimation = animation.createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none'
+    })
+        .afterClearStyles(['pointer-events']);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.popover-wrapper'))
+        .fromTo('opacity', 0.01, 1);
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('ease')
+        .duration(100)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+const POPOVER_IOS_BODY_PADDING = 5;
+
+/**
+ * iOS Popover Leave Animation
+ */
+const iosLeaveAnimation = (baseEl) => {
+    const baseAnimation = animation.createAnimation();
+    const backdropAnimation = animation.createAnimation();
+    const wrapperAnimation = animation.createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.popover-wrapper'))
+        .fromTo('opacity', 0.99, 0);
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('ease')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+/**
+ * Md Popover Enter Animation
+ */
+const mdEnterAnimation = (baseEl, ev) => {
+    const POPOVER_MD_BODY_PADDING = 12;
+    const doc = baseEl.ownerDocument;
+    const isRTL = doc.dir === 'rtl';
+    let originY = 'top';
+    let originX = isRTL ? 'right' : 'left';
+    const contentEl = baseEl.querySelector('.popover-content');
+    const contentDimentions = contentEl.getBoundingClientRect();
+    const contentWidth = contentDimentions.width;
+    const contentHeight = contentDimentions.height;
+    const bodyWidth = doc.defaultView.innerWidth;
+    const bodyHeight = doc.defaultView.innerHeight;
+    // If ev was passed, use that for target element
+    const targetDim = ev && ev.target && ev.target.getBoundingClientRect();
+    // As per MD spec, by default position the popover below the target (trigger) element
+    const targetTop = targetDim != null && 'bottom' in targetDim
+        ? targetDim.bottom
+        : bodyHeight / 2 - contentHeight / 2;
+    const targetLeft = targetDim != null && 'left' in targetDim
+        ? isRTL
+            ? targetDim.left - contentWidth + targetDim.width
+            : targetDim.left
+        : bodyWidth / 2 - contentWidth / 2;
+    const targetHeight = (targetDim && targetDim.height) || 0;
+    const popoverCSS = {
+        top: targetTop,
+        left: targetLeft
+    };
+    // If the popover left is less than the padding it is off screen
+    // to the left so adjust it, else if the width of the popover
+    // exceeds the body width it is off screen to the right so adjust
+    if (popoverCSS.left < POPOVER_MD_BODY_PADDING) {
+        popoverCSS.left = POPOVER_MD_BODY_PADDING;
+        // Same origin in this case for both LTR & RTL
+        // Note: in LTR, originX is already 'left'
+        originX = 'left';
+    }
+    else if (contentWidth + POPOVER_MD_BODY_PADDING + popoverCSS.left >
+        bodyWidth) {
+        popoverCSS.left = bodyWidth - contentWidth - POPOVER_MD_BODY_PADDING;
+        // Same origin in this case for both LTR & RTL
+        // Note: in RTL, originX is already 'right'
+        originX = 'right';
+    }
+    // If the popover when popped down stretches past bottom of screen,
+    // make it pop up if there's room above
+    if (targetTop + targetHeight + contentHeight > bodyHeight &&
+        targetTop - contentHeight > 0) {
+        popoverCSS.top = targetTop - contentHeight - targetHeight;
+        baseEl.className = baseEl.className + ' popover-bottom';
+        originY = 'bottom';
+        // If there isn't room for it to pop up above the target cut it off
+    }
+    else if (targetTop + targetHeight + contentHeight > bodyHeight) {
+        contentEl.style.bottom = POPOVER_MD_BODY_PADDING + 'px';
+    }
+    const baseAnimation = animation.createAnimation();
+    const backdropAnimation = animation.createAnimation();
+    const wrapperAnimation = animation.createAnimation();
+    const contentAnimation = animation.createAnimation();
+    const viewportAnimation = animation.createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none'
+    })
+        .afterClearStyles(['pointer-events']);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.popover-wrapper'))
+        .fromTo('opacity', 0.01, 1);
+    contentAnimation
+        .addElement(contentEl)
+        .beforeStyles({
+        'top': `${popoverCSS.top}px`,
+        'left': `${popoverCSS.left}px`,
+        'transform-origin': `${originY} ${originX}`
+    })
+        .fromTo('transform', 'scale(0.001)', 'scale(1)');
+    viewportAnimation
+        .addElement(baseEl.querySelector('.popover-viewport'))
+        .fromTo('opacity', 0.01, 1);
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(0.36,0.66,0.04,1)')
+        .duration(300)
+        .addAnimation([backdropAnimation, wrapperAnimation, contentAnimation, viewportAnimation]);
+};
+
+/**
+ * Md Popover Leave Animation
+ */
+const mdLeaveAnimation = (baseEl) => {
+    const baseAnimation = animation.createAnimation();
+    const backdropAnimation = animation.createAnimation();
+    const wrapperAnimation = animation.createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 'var(--backdrop-opacity)', 0);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.popover-wrapper'))
+        .fromTo('opacity', 0.99, 0);
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('ease')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};
+
+const popoverIosCss = ".sc-ion-popover-ios-h{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;left:0;right:0;top:0;bottom:0;display:flex;position:fixed;align-items:center;justify-content:center;color:var(--ion-text-color, #000);z-index:1001}.overlay-hidden.sc-ion-popover-ios-h{display:none}.popover-wrapper.sc-ion-popover-ios{opacity:0;z-index:10}.popover-content.sc-ion-popover-ios{display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport.sc-ion-popover-ios{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px}.sc-ion-popover-ios-h{--width:200px;--max-height:90%;--box-shadow:none;--backdrop-opacity:var(--ion-backdrop-opacity, 0.08)}.popover-content.sc-ion-popover-ios{border-radius:10px}.popover-arrow.sc-ion-popover-ios{display:block;position:absolute;width:20px;height:10px;overflow:hidden}.popover-arrow.sc-ion-popover-ios::after{left:3px;top:3px;border-radius:3px;position:absolute;width:14px;height:14px;transform:rotate(45deg);background:var(--background);content:\"\";z-index:10}[dir=rtl].sc-ion-popover-ios .popover-arrow.sc-ion-popover-ios::after,[dir=rtl].sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after,[dir=rtl] .sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{left:unset;right:unset;right:3px}.popover-bottom.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios{top:auto;bottom:-10px}.popover-bottom.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{top:-6px}@supports (backdrop-filter: blur(0)){.popover-translucent.sc-ion-popover-ios-h .popover-content.sc-ion-popover-ios,.popover-translucent.sc-ion-popover-ios-h .popover-arrow.sc-ion-popover-ios::after{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}}";
+
+const popoverMdCss = ".sc-ion-popover-md-h{--background:var(--ion-background-color, #fff);--min-width:0;--min-height:0;--max-width:auto;--height:auto;left:0;right:0;top:0;bottom:0;display:flex;position:fixed;align-items:center;justify-content:center;color:var(--ion-text-color, #000);z-index:1001}.overlay-hidden.sc-ion-popover-md-h{display:none}.popover-wrapper.sc-ion-popover-md{opacity:0;z-index:10}.popover-content.sc-ion-popover-md{display:flex;position:absolute;flex-direction:column;width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);background:var(--background);box-shadow:var(--box-shadow);overflow:auto;z-index:10}.popover-viewport.sc-ion-popover-md{--ion-safe-area-top:0px;--ion-safe-area-right:0px;--ion-safe-area-bottom:0px;--ion-safe-area-left:0px}.sc-ion-popover-md-h{--width:250px;--max-height:90%;--box-shadow:0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}.popover-content.sc-ion-popover-md{border-radius:4px;transform-origin:left top}[dir=rtl].sc-ion-popover-md .popover-content.sc-ion-popover-md,[dir=rtl].sc-ion-popover-md-h .popover-content.sc-ion-popover-md,[dir=rtl] .sc-ion-popover-md-h .popover-content.sc-ion-popover-md{transform-origin:right top}.popover-viewport.sc-ion-popover-md{transition-delay:100ms}";
+
+const Popover = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.didPresent = index.createEvent(this, "ionPopoverDidPresent", 7);
+    this.willPresent = index.createEvent(this, "ionPopoverWillPresent", 7);
+    this.willDismiss = index.createEvent(this, "ionPopoverWillDismiss", 7);
+    this.didDismiss = index.createEvent(this, "ionPopoverDidDismiss", 7);
+    this.presented = false;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    this.keyboardClose = true;
+    /**
+     * If `true`, the popover will be dismissed when the backdrop is clicked.
+     */
+    this.backdropDismiss = true;
+    /**
+     * If `true`, a backdrop will be displayed behind the popover.
+     */
+    this.showBackdrop = true;
+    /**
+     * If `true`, the popover will be translucent.
+     * Only applies when the mode is `"ios"` and the device supports
+     * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
+     */
+    this.translucent = false;
+    /**
+     * If `true`, the popover will animate.
+     */
+    this.animated = true;
+    this.onDismiss = (ev) => {
+      ev.stopPropagation();
+      ev.preventDefault();
+      this.dismiss();
+    };
+    this.onBackdropTap = () => {
+      this.dismiss(undefined, overlays.BACKDROP);
+    };
+    this.onLifecycle = (modalEvent) => {
+      const el = this.usersElement;
+      const name = LIFECYCLE_MAP[modalEvent.type];
+      if (el && name) {
+        const event = new CustomEvent(name, {
+          bubbles: false,
+          cancelable: false,
+          detail: modalEvent.detail
+        });
+        el.dispatchEvent(event);
+      }
+    };
+    overlays.prepareOverlay(this.el);
+  }
+  /**
+   * Present the popover overlay after it has been created.
+   */
+  async present() {
+    if (this.presented) {
+      return;
+    }
+    const container = this.el.querySelector('.popover-content');
+    if (!container) {
+      throw new Error('container is undefined');
+    }
+    const data = Object.assign(Object.assign({}, this.componentProps), { popover: this.el });
+    this.usersElement = await frameworkDelegate.attachComponent(this.delegate, container, this.component, ['popover-viewport', this.el['s-sc']], data);
+    await index$1.deepReady(this.usersElement);
+    return overlays.present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.event);
+  }
+  /**
+   * Dismiss the popover overlay after it has been presented.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
+   */
+  async dismiss(data, role) {
+    const shouldDismiss = await overlays.dismiss(this, data, role, 'popoverLeave', iosLeaveAnimation, mdLeaveAnimation, this.event);
+    if (shouldDismiss) {
+      await frameworkDelegate.detachComponent(this.delegate, this.usersElement);
+    }
+    return shouldDismiss;
+  }
+  /**
+   * Returns a promise that resolves when the popover did dismiss.
+   */
+  onDidDismiss() {
+    return overlays.eventMethod(this.el, 'ionPopoverDidDismiss');
+  }
+  /**
+   * Returns a promise that resolves when the popover will dismiss.
+   */
+  onWillDismiss() {
+    return overlays.eventMethod(this.el, 'ionPopoverWillDismiss');
+  }
+  render() {
+    const mode = ionicGlobal.getIonMode(this);
+    const { onLifecycle } = this;
+    return (index.h(index.Host, { "aria-modal": "true", "no-router": true, tabindex: "-1", style: {
+        zIndex: `${20000 + this.overlayIndex}`,
+      }, class: Object.assign(Object.assign({}, theme.getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonDismiss: this.onDismiss, onIonBackdropTap: this.onBackdropTap }, index.h("ion-backdrop", { tappable: this.backdropDismiss, visible: this.showBackdrop }), index.h("div", { class: "popover-wrapper" }, index.h("div", { class: "popover-arrow" }), index.h("div", { class: "popover-content" }))));
+  }
+  get el() { return index.getElement(this); }
+};
+const LIFECYCLE_MAP = {
+  'ionPopoverDidPresent': 'ionViewDidEnter',
+  'ionPopoverWillPresent': 'ionViewWillEnter',
+  'ionPopoverWillDismiss': 'ionViewWillLeave',
+  'ionPopoverDidDismiss': 'ionViewDidLeave',
+};
+Popover.style = {
+  ios: popoverIosCss,
+  md: popoverMdCss
+};
+
+exports.ion_popover = Popover;

package/dist/cjs/ion-progress-bar.cjs.entry.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const helpers = require('./helpers-41dfb43a.js');
+const theme = require('./theme-81caa5b0.js');
+
+const progressBarIosCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.2);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}:host(.ion-color){--progress-background:var(--ion-color-base);--buffer-background:rgba(var(--ion-color-base-rgb), 0.2)}:host(.progress-bar-indeterminate){background:var(--buffer-background)}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar,.progress-buffer-bar:before,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.progress,.progress-buffer-bar{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:#fff;z-index:1}.progress-buffer-bar:before{background:var(--buffer-background);content:\"\"}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed) .progress,:host(.progress-bar-reversed) .progress-buffer-bar{transform-origin:right top}:host(.progress-bar-reversed) .buffer-circles,:host(.progress-bar-reversed) .indeterminate-bar-primary,:host(.progress-bar-reversed) .indeterminate-bar-secondary,:host(.progress-bar-reversed) .progress-indeterminate{animation-direction:reverse}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:3px}";
+
+const progressBarMdCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.2);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}:host(.ion-color){--progress-background:var(--ion-color-base);--buffer-background:rgba(var(--ion-color-base-rgb), 0.2)}:host(.progress-bar-indeterminate){background:var(--buffer-background)}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar,.progress-buffer-bar:before,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.progress,.progress-buffer-bar{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:#fff;z-index:1}.progress-buffer-bar:before{background:var(--buffer-background);content:\"\"}.indeterminate-bar-primary{top:0;right:0;bottom:0;left:-145.166611%;animation:primary-indeterminate-translate 2s infinite linear}.indeterminate-bar-primary .progress-indeterminate{animation:primary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.indeterminate-bar-secondary{top:0;right:0;bottom:0;left:-54.888891%;animation:secondary-indeterminate-translate 2s infinite linear}.indeterminate-bar-secondary .progress-indeterminate{animation:secondary-indeterminate-scale 2s infinite linear;animation-play-state:inherit}.buffer-circles{background:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%) repeat-x 5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed) .progress,:host(.progress-bar-reversed) .progress-buffer-bar{transform-origin:right top}:host(.progress-bar-reversed) .buffer-circles,:host(.progress-bar-reversed) .indeterminate-bar-primary,:host(.progress-bar-reversed) .indeterminate-bar-secondary,:host(.progress-bar-reversed) .progress-indeterminate{animation-direction:reverse}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}@keyframes primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{to{transform:translateX(-10px)}}:host{height:4px}";
+
+const ProgressBar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The state of the progress bar, based on if the time the process takes is known or not.
+     * Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right).
+     */
+    this.type = 'determinate';
+    /**
+     * If true, reverse the progress bar direction.
+     */
+    this.reversed = false;
+    /**
+     * The value determines how much of the active bar should display when the
+     * `type` is `"determinate"`.
+     * The value should be between [0, 1].
+     */
+    this.value = 0;
+    /**
+     * If the buffer and value are smaller than 1, the buffer circles will show.
+     * The buffer should be between [0, 1].
+     */
+    this.buffer = 1;
+  }
+  render() {
+    const { color, type, reversed, value, buffer } = this;
+    const paused = ionicGlobal.config.getBoolean('_testing');
+    const mode = ionicGlobal.getIonMode(this);
+    return (index.h(index.Host, { role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: Object.assign(Object.assign({}, theme.createColorClasses(color)), { [mode]: true, [`progress-bar-${type}`]: true, 'progress-paused': paused, 'progress-bar-reversed': document.dir === 'rtl' ? !reversed : reversed }) }, type === 'indeterminate'
+      ? renderIndeterminate()
+      : renderProgress(value, buffer)));
+  }
+};
+const renderIndeterminate = () => {
+  return [
+    index.h("div", { class: "indeterminate-bar-primary" }, index.h("span", { class: "progress-indeterminate" })),
+    index.h("div", { class: "indeterminate-bar-secondary" }, index.h("span", { class: "progress-indeterminate" }))
+  ];
+};
+const renderProgress = (value, buffer) => {
+  const finalValue = helpers.clamp(0, value, 1);
+  const finalBuffer = helpers.clamp(0, buffer, 1);
+  return [
+    index.h("div", { class: "progress", style: { transform: `scaleX(${finalValue})` } }),
+    finalBuffer !== 1 && index.h("div", { class: "buffer-circles" }),
+    index.h("div", { class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
+  ];
+};
+ProgressBar.style = {
+  ios: progressBarIosCss,
+  md: progressBarMdCss
+};
+
+exports.ion_progress_bar = ProgressBar;

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

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8fe0df8d.js');
+const ionicGlobal = require('./ionic-global-581fb4f8.js');
+const helpers = require('./helpers-41dfb43a.js');
+const theme = require('./theme-81caa5b0.js');
+
+const radioIosCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;user-select:none;z-index:2}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.radio-icon,.radio-inner{box-sizing:border-box}:host{--color-checked:var(--ion-color-primary, #3880ff);width:15px;height:24px}:host(.ion-color.radio-checked) .radio-inner{border-color:var(--ion-color-base)}.item-radio.item-ios ion-label{margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-radio.item-ios ion-label{margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}.radio-inner{width:33%;height:50%}:host(.radio-checked) .radio-inner{transform:rotate(45deg);border-width:2px;border-top-width:0;border-left-width:0;border-style:solid;border-color:var(--color-checked)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);left:-9px;top:-8px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:\"\";opacity:0.2}:host-context([dir=rtl]):host(.ion-focused) .radio-icon::after,:host-context([dir=rtl]).ion-focused .radio-icon::after{left:unset;right:unset;right:-9px}:host(.in-item){margin-left:10px;margin-right:11px;margin-top:8px;margin-bottom:8px;display:block;position:static}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item){margin-left:unset;margin-right:unset;-webkit-margin-start:10px;margin-inline-start:10px;-webkit-margin-end:11px;margin-inline-end:11px}}:host(.in-item[slot=start]){margin-left:3px;margin-right:21px;margin-top:8px;margin-bottom:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:21px;margin-inline-end:21px}}";
+
+const radioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;user-select:none;z-index:2}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none}[dir=rtl] button,:host-context([dir=rtl]) button{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}.radio-icon,.radio-inner{box-sizing:border-box}:host{--color:var(--ion-color-step-400, #999999);--color-checked:var(--ion-color-primary, #3880ff);--border-width:2px;--border-style:solid;--border-radius:50%;width:20px;height:20px}:host(.ion-color) .radio-inner{background:var(--ion-color-base)}:host(.ion-color.radio-checked) .radio-icon{border-color:var(--ion-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));transform:scale3d(0, 0, 0);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{transform:scale3d(1, 1, 1)}:host(.radio-disabled){opacity:0.3}:host(.ion-focused) .radio-icon::after{border-radius:var(--inner-border-radius);left:-12px;top:-12px;display:block;position:absolute;width:36px;height:36px;background:var(--ion-color-primary-tint, #4c8dff);content:\"\";opacity:0.2}:host-context([dir=rtl]):host(.ion-focused) .radio-icon::after,:host-context([dir=rtl]).ion-focused .radio-icon::after{left:unset;right:unset;right:-12px}:host(.in-item){margin-left:0;margin-right:0;margin-top:9px;margin-bottom:9px;display:block;position:static}:host(.in-item[slot=start]){margin-left:4px;margin-right:36px;margin-top:11px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px}}";
+
+const Radio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionStyle = index.createEvent(this, "ionStyle", 7);
+    this.ionFocus = index.createEvent(this, "ionFocus", 7);
+    this.ionBlur = index.createEvent(this, "ionBlur", 7);
+    this.inputId = `ion-rb-${radioButtonIds++}`;
+    this.radioGroup = null;
+    /**
+     * If `true`, the radio is selected.
+     */
+    this.checked = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.inputId;
+    /**
+     * If `true`, the user cannot interact with the radio.
+     */
+    this.disabled = false;
+    this.updateState = () => {
+      if (this.radioGroup) {
+        this.checked = this.radioGroup.value === this.value;
+      }
+    };
+    this.onFocus = () => {
+      this.ionFocus.emit();
+    };
+    this.onBlur = () => {
+      this.ionBlur.emit();
+    };
+  }
+  connectedCallback() {
+    if (this.value === undefined) {
+      this.value = this.inputId;
+    }
+    const radioGroup = this.radioGroup = this.el.closest('ion-radio-group');
+    if (radioGroup) {
+      this.updateState();
+      radioGroup.addEventListener('ionChange', this.updateState);
+    }
+  }
+  disconnectedCallback() {
+    const radioGroup = this.radioGroup;
+    if (radioGroup) {
+      radioGroup.removeEventListener('ionChange', this.updateState);
+      this.radioGroup = null;
+    }
+  }
+  componentWillLoad() {
+    this.emitStyle();
+  }
+  emitStyle() {
+    this.ionStyle.emit({
+      'radio-checked': this.checked,
+      'interactive-disabled': this.disabled,
+    });
+  }
+  render() {
+    const { inputId, disabled, checked, color, el } = this;
+    const mode = ionicGlobal.getIonMode(this);
+    const labelId = inputId + '-lbl';
+    const label = helpers.findItemLabel(el);
+    if (label) {
+      label.id = labelId;
+    }
+    return (index.h(index.Host, { role: "radio", "aria-disabled": disabled ? 'true' : null, "aria-checked": `${checked}`, "aria-labelledby": labelId, class: Object.assign(Object.assign({}, theme.createColorClasses(color)), { [mode]: true, 'in-item': theme.hostContext('ion-item', el), 'interactive': true, 'radio-checked': checked, 'radio-disabled': disabled }) }, index.h("div", { class: "radio-icon", part: "container" }, index.h("div", { class: "radio-inner", part: "mark" })), index.h("button", { type: "button", onFocus: this.onFocus, onBlur: this.onBlur, disabled: disabled })));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "color": ["emitStyle"],
+    "checked": ["emitStyle"],
+    "disabled": ["emitStyle"]
+  }; }
+};
+let radioButtonIds = 0;
+Radio.style = {
+  ios: radioIosCss,
+  md: radioMdCss
+};
+
+const RadioGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ionChange = index.createEvent(this, "ionChange", 7);
+    this.inputId = `ion-rg-${radioGroupIds++}`;
+    this.labelId = `${this.inputId}-lbl`;
+    /**
+     * If `true`, the radios can be deselected.
+     */
+    this.allowEmptySelection = false;
+    /**
+     * The name of the control, which is submitted with the form data.
+     */
+    this.name = this.inputId;
+    this.onClick = (ev) => {
+      const selectedRadio = ev.target && ev.target.closest('ion-radio');
+      if (selectedRadio) {
+        const currentValue = this.value;
+        const newValue = selectedRadio.value;
+        if (newValue !== currentValue) {
+          this.value = newValue;
+        }
+        else if (this.allowEmptySelection) {
+          this.value = undefined;
+        }
+      }
+    };
+  }
+  valueChanged(value) {
+    this.ionChange.emit({ value });
+  }
+  async connectedCallback() {
+    // Get the list header if it exists and set the id
+    // this is used to set aria-labelledby
+    const el = this.el;
+    const header = el.querySelector('ion-list-header') || el.querySelector('ion-item-divider');
+    if (header) {
+      const label = header.querySelector('ion-label');
+      if (label) {
+        this.labelId = label.id = this.name + '-lbl';
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, { role: "radiogroup", "aria-labelledby": this.labelId, onClick: this.onClick, class: ionicGlobal.getIonMode(this) }));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+let radioGroupIds = 0;
+
+exports.ion_radio = Radio;
+exports.ion_radio_group = RadioGroup;