@pod-os/elements 0.7.1-92705ee.0 → 0.7.1-a71f01c.0

package/dist/components/pos-subjects.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PosSubjects extends Components.PosSubjects, HTMLElement {}
+export const PosSubjects: {
+  prototype: PosSubjects;
+  new (): PosSubjects;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pos-subjects.js

@@ -0,0 +1,6 @@
+import { P as PosSubjects$1, d as defineCustomElement$1 } from './pos-subjects2.js';
+
+const PosSubjects = PosSubjects$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PosSubjects, defineCustomElement };

package/dist/components/pos-subjects2.js

@@ -0,0 +1,125 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { R as RdfDocument } from './index8.js';
+import { s as subscribeResource } from './ResourceAware.js';
+import { d as defineCustomElement$e } from './card.js';
+import { d as defineCustomElement$d } from './card-content.js';
+import { d as defineCustomElement$c } from './card-header.js';
+import { d as defineCustomElement$b } from './icon.js';
+import { d as defineCustomElement$a } from './item.js';
+import { d as defineCustomElement$9 } from './label.js';
+import { d as defineCustomElement$8 } from './list.js';
+import { d as defineCustomElement$7 } from './note.js';
+import { d as defineCustomElement$6 } from './progress-bar.js';
+import { d as defineCustomElement$5 } from './ripple-effect.js';
+import { d as defineCustomElement$4 } from './pos-description2.js';
+import { d as defineCustomElement$3 } from './pos-label2.js';
+import { d as defineCustomElement$2 } from './pos-resource2.js';
+import { d as defineCustomElement$1 } from './pos-rich-link2.js';
+
+const PosSubjects = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      const doc = resource.assume(RdfDocument);
+      this.data = doc.subjects();
+    };
+    this.data = [];
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  render() {
+    const items = this.data.map(it => h("pos-rich-link", { uri: it.uri }));
+    return this.data.length > 0 ? h("ion-list", null, items) : null;
+  }
+}, [1, "pos-subjects", {
+    "data": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-subjects", "ion-card", "ion-card-content", "ion-card-header", "ion-icon", "ion-item", "ion-label", "ion-list", "ion-note", "ion-progress-bar", "ion-ripple-effect", "pos-description", "pos-label", "pos-resource", "pos-rich-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-subjects":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosSubjects);
+      }
+      break;
+    case "ion-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "ion-card-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "ion-card-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "ion-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "ion-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "ion-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "ion-note":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "ion-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ion-ripple-effect":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "pos-description":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pos-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pos-resource":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pos-rich-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosSubjects as P, defineCustomElement as d };

package/dist/components/pos-type-badges.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PosTypeBadges extends Components.PosTypeBadges, HTMLElement {}
+export const PosTypeBadges: {
+  prototype: PosTypeBadges;
+  new (): PosTypeBadges;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pos-type-badges.js

@@ -0,0 +1,6 @@
+import { P as PosTypeBadges$1, d as defineCustomElement$1 } from './pos-type-badges2.js';
+
+const PosTypeBadges = PosTypeBadges$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PosTypeBadges, defineCustomElement };

package/dist/components/pos-type-badges2.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { s as subscribeResource } from './ResourceAware.js';
+import { d as defineCustomElement$2 } from './badge.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const posTypeBadgesCss = ".types{display:flex;gap:0.25rem;margin:0.5rem 0}.expanded{flex-direction:column;justify-content:flex-start;align-items:flex-start}ion-badge{color:#333;background:#eee}ion-badge.toggle{cursor:pointer}ion-badge.toggle:hover{background:#ddd}";
+
+const PosTypeBadges = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      this.data = resource.types();
+      this.typeLabels = [...new Set(resource.types().map(it => it.label))];
+    };
+    this.data = [];
+    this.typeLabels = [];
+    this.isExpanded = false;
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  toggleDetails() {
+    this.isExpanded = !this.isExpanded;
+  }
+  render() {
+    if (this.data.length == 0) {
+      return null;
+    }
+    if (this.isExpanded) {
+      return (h("div", { class: "types expanded" }, h("ion-badge", { class: "toggle", onClick: () => this.toggleDetails() }, h("ion-icon", { name: "contract-outline" })), this.data.map(it => (h("ion-badge", null, it.uri)))));
+    }
+    else {
+      return (h(Host, null, h("div", { class: "types" }, this.typeLabels.map(it => (h("ion-badge", null, it))), h("ion-badge", { class: "toggle", onClick: () => this.toggleDetails() }, h("ion-icon", { name: "expand-outline" })))));
+    }
+  }
+  static get style() { return posTypeBadgesCss; }
+}, [1, "pos-type-badges", {
+    "data": [32],
+    "typeLabels": [32],
+    "isExpanded": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-type-badges", "ion-badge", "ion-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-type-badges":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosTypeBadges);
+      }
+      break;
+    case "ion-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosTypeBadges as P, defineCustomElement as d };

package/dist/components/pos-type-router.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PosTypeRouter extends Components.PosTypeRouter, HTMLElement {}
+export const PosTypeRouter: {
+  prototype: PosTypeRouter;
+  new (): PosTypeRouter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/pos-type-router.js

@@ -0,0 +1,6 @@
+import { P as PosTypeRouter$1, d as defineCustomElement$1 } from './pos-type-router2.js';
+
+const PosTypeRouter = PosTypeRouter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PosTypeRouter, defineCustomElement };

package/dist/components/pos-type-router2.js

@@ -0,0 +1,241 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as subscribeResource } from './ResourceAware.js';
+import { d as defineCustomElement$w } from './badge.js';
+import { d as defineCustomElement$v } from './card.js';
+import { d as defineCustomElement$u } from './card-content.js';
+import { d as defineCustomElement$t } from './card-header.js';
+import { d as defineCustomElement$s } from './card-title.js';
+import { d as defineCustomElement$r } from './col.js';
+import { d as defineCustomElement$q } from './grid.js';
+import { d as defineCustomElement$p } from './icon.js';
+import { d as defineCustomElement$o } from './item.js';
+import { d as defineCustomElement$n } from './item-divider.js';
+import { d as defineCustomElement$m } from './item-group.js';
+import { d as defineCustomElement$l } from './label.js';
+import { d as defineCustomElement$k } from './list.js';
+import { d as defineCustomElement$j } from './note.js';
+import { d as defineCustomElement$i } from './progress-bar.js';
+import { d as defineCustomElement$h } from './ripple-effect.js';
+import { d as defineCustomElement$g } from './row.js';
+import { d as defineCustomElement$f } from './skeleton-text.js';
+import { d as defineCustomElement$e } from './pos-app-generic2.js';
+import { d as defineCustomElement$d } from './pos-app-image-viewer2.js';
+import { d as defineCustomElement$c } from './pos-app-rdf-document2.js';
+import { d as defineCustomElement$b } from './pos-description2.js';
+import { d as defineCustomElement$a } from './pos-image2.js';
+import { d as defineCustomElement$9 } from './pos-label2.js';
+import { d as defineCustomElement$8 } from './pos-literals2.js';
+import { d as defineCustomElement$7 } from './pos-picture2.js';
+import { d as defineCustomElement$6 } from './pos-relations2.js';
+import { d as defineCustomElement$5 } from './pos-resource2.js';
+import { d as defineCustomElement$4 } from './pos-reverse-relations2.js';
+import { d as defineCustomElement$3 } from './pos-rich-link2.js';
+import { d as defineCustomElement$2 } from './pos-subjects2.js';
+import { d as defineCustomElement$1 } from './pos-type-badges2.js';
+
+const PosTypeRouter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.subscribeResource = createEvent(this, "pod-os:resource", 7);
+    this.receiveResource = (resource) => {
+      this.types = resource.types();
+    };
+    this.types = undefined;
+  }
+  componentWillLoad() {
+    subscribeResource(this);
+  }
+  render() {
+    return this.types ? this.renderApp() : null;
+  }
+  renderApp() {
+    if (this.types.some(type => type.uri === 'http://www.w3.org/2007/ont/link#RDFDocument')) {
+      return h("pos-app-rdf-document", null);
+    }
+    else if (this.types.some(type => type.uri === 'http://purl.org/dc/terms/Image')) {
+      return h("pos-app-image-viewer", null);
+    }
+    else {
+      return h("pos-app-generic", null);
+    }
+  }
+}, [1, "pos-type-router", {
+    "types": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pos-type-router", "ion-badge", "ion-card", "ion-card-content", "ion-card-header", "ion-card-title", "ion-col", "ion-grid", "ion-icon", "ion-item", "ion-item-divider", "ion-item-group", "ion-label", "ion-list", "ion-note", "ion-progress-bar", "ion-ripple-effect", "ion-row", "ion-skeleton-text", "pos-app-generic", "pos-app-image-viewer", "pos-app-rdf-document", "pos-description", "pos-image", "pos-label", "pos-literals", "pos-picture", "pos-relations", "pos-resource", "pos-reverse-relations", "pos-rich-link", "pos-subjects", "pos-type-badges"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pos-type-router":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PosTypeRouter);
+      }
+      break;
+    case "ion-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$w();
+      }
+      break;
+    case "ion-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$v();
+      }
+      break;
+    case "ion-card-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$u();
+      }
+      break;
+    case "ion-card-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$t();
+      }
+      break;
+    case "ion-card-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$s();
+      }
+      break;
+    case "ion-col":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$r();
+      }
+      break;
+    case "ion-grid":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$q();
+      }
+      break;
+    case "ion-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$p();
+      }
+      break;
+    case "ion-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$o();
+      }
+      break;
+    case "ion-item-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "ion-item-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "ion-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "ion-list":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "ion-note":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "ion-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "ion-ripple-effect":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "ion-row":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "ion-skeleton-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "pos-app-generic":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "pos-app-image-viewer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "pos-app-rdf-document":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "pos-description":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "pos-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "pos-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "pos-literals":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "pos-picture":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "pos-relations":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "pos-resource":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "pos-reverse-relations":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pos-rich-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pos-subjects":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pos-type-badges":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PosTypeRouter as P, defineCustomElement as d };

package/dist/components/progress-bar.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as config, g as getIonMode } from './ionic-global.js';
+import { l as clamp } from './helpers.js';
+import { c as createColorClasses } from './theme.js';
+
+const progressBarIosCss = ":host{--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.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-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@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.3);--progress-background:var(--ion-color-primary, #3880ff);--buffer-background:var(--background);display:block;position:relative;width:100%;contain:strict;direction:ltr;overflow:hidden}.progress,.progress-indeterminate,.indeterminate-bar-primary,.indeterminate-bar-secondary,.progress-buffer-bar{left:0;right:0;top:0;bottom:0;position:absolute;width:100%;height:100%}.buffer-circles-container,.buffer-circles{left:0;right:0;top:0;bottom:0;position:absolute}.buffer-circles{right:-10px;left:-10px;}.progress,.progress-buffer-bar,.buffer-circles-container{transform-origin:left top;transition:transform 150ms linear}.progress,.progress-indeterminate{background:var(--progress-background);z-index:2}.progress-buffer-bar{background:var(--buffer-background);z-index:1}.buffer-circles-container{overflow:hidden}.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-image:radial-gradient(ellipse at center, var(--buffer-background) 0%, var(--buffer-background) 30%, transparent 30%);background-repeat:repeat-x;background-position:5px center;background-size:10px 10px;z-index:0;animation:buffering 450ms infinite linear}:host(.progress-bar-reversed){transform:scaleX(-1)}:host(.progress-paused) .indeterminate-bar-secondary,:host(.progress-paused) .indeterminate-bar-primary,:host(.progress-paused) .buffer-circles{animation-play-state:paused}:host(.ion-color) .progress-buffer-bar{background:rgba(var(--ion-color-base-rgb), 0.3)}:host(.ion-color) .buffer-circles{background-image:radial-gradient(ellipse at center, rgba(var(--ion-color-base-rgb), 0.3) 0%, rgba(var(--ion-color-base-rgb), 0.3) 30%, transparent 30%)}:host(.ion-color) .progress,:host(.ion-color) .progress-indeterminate{background:var(--ion-color-base)}@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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * 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 = config.getBoolean('_testing');
+    const mode = getIonMode(this);
+    return (h(Host, { role: "progressbar", "aria-valuenow": type === 'determinate' ? value : null, "aria-valuemin": "0", "aria-valuemax": "1", class: 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)));
+  }
+  static get style() { return {
+    ios: progressBarIosCss,
+    md: progressBarMdCss
+  }; }
+}, [33, "ion-progress-bar", {
+    "type": [1],
+    "reversed": [4],
+    "value": [2],
+    "buffer": [2],
+    "color": [513]
+  }]);
+const renderIndeterminate = () => {
+  return (h("div", { part: "track", class: "progress-buffer-bar" }, h("div", { class: "indeterminate-bar-primary" }, h("span", { part: "progress", class: "progress-indeterminate" })), h("div", { class: "indeterminate-bar-secondary" }, h("span", { part: "progress", class: "progress-indeterminate" }))));
+};
+const renderProgress = (value, buffer) => {
+  const finalValue = clamp(0, value, 1);
+  const finalBuffer = clamp(0, buffer, 1);
+  return [
+    h("div", { part: "progress", class: "progress", style: { transform: `scaleX(${finalValue})` } }),
+    /**
+     * Buffer circles with two container to move
+     * the circles behind the buffer progress
+     * with respecting the animation.
+     * When finalBuffer === 1, we use display: none
+     * instead of removing the element to avoid flickering.
+     */
+    h("div", { class: { 'buffer-circles-container': true, 'ion-hide': finalBuffer === 1 }, style: { transform: `translateX(${finalBuffer * 100}%)` } }, h("div", { class: "buffer-circles-container", style: { transform: `translateX(-${finalBuffer * 100}%)` } }, h("div", { part: "stream", class: "buffer-circles" }))),
+    h("div", { part: "track", class: "progress-buffer-bar", style: { transform: `scaleX(${finalBuffer})` } }),
+  ];
+};
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-progress-bar"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-progress-bar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ProgressBar);
+      }
+      break;
+  } });
+}
+
+export { ProgressBar as P, defineCustomElement as d };