@covalent/components 6.0.1 → 6.0.2

package/circular-progress.mjs

@@ -1,16 +1,150 @@
-import { CircularProgressBase as a } from "@material/mwc-circular-progress/mwc-circular-progress-base";
-import { styles as f } from "@material/mwc-circular-progress/mwc-circular-progress.css?used";
-import { customElement as m } from "lit/decorators.js";
-var v = Object.defineProperty, i = Object.getOwnPropertyDescriptor, u = (c, e, o, s) => {
-  for (var r = s > 1 ? void 0 : s ? i(e, o) : e, t = c.length - 1, l; t >= 0; t--)
-    (l = c[t]) && (r = (s ? l(e, o, r) : l(r)) || r);
-  return s && r && v(e, o, r), r;
+import { b as o } from "./tslib.es6.mjs";
+import { a as g } from "./aria-property.mjs";
+import { s as u, y as d, i as h, e as f } from "./query-assigned-elements.mjs";
+import { e as n } from "./property.mjs";
+import { o as _ } from "./class-map.mjs";
+import { l as m } from "./if-defined.mjs";
+import { i as y } from "./style-map.mjs";
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+class a extends u {
+  constructor() {
+    super(...arguments), this.indeterminate = !1, this.progress = 0, this.density = 0, this.closed = !1;
+  }
+  open() {
+    this.closed = !1;
+  }
+  close() {
+    this.closed = !0;
+  }
+  /**
+   * @soyTemplate
+   */
+  render() {
+    const r = {
+      "mdc-circular-progress--closed": this.closed,
+      "mdc-circular-progress--indeterminate": this.indeterminate
+    }, e = 48 + this.density * 4, i = {
+      width: `${e}px`,
+      height: `${e}px`
+    };
+    return d`
+      <div
+        class="mdc-circular-progress ${_(r)}"
+        style="${y(i)}"
+        role="progressbar"
+        aria-label="${m(this.ariaLabel)}"
+        aria-valuemin="0"
+        aria-valuemax="1"
+        aria-valuenow="${m(this.indeterminate ? void 0 : this.progress)}">
+        ${this.renderDeterminateContainer()}
+        ${this.renderIndeterminateContainer()}
+      </div>`;
+  }
+  /**
+   * @soyTemplate
+   */
+  renderDeterminateContainer() {
+    const r = 48 + this.density * 4, e = r / 2, i = this.density >= -3 ? 18 + this.density * 11 / 6 : 12.5 + (this.density + 3) * 5 / 4, c = 2 * 3.1415926 * i, s = (1 - this.progress) * c, t = this.density >= -3 ? 4 + this.density * (1 / 3) : 3 + (this.density + 3) * (1 / 6);
+    return d`
+      <div class="mdc-circular-progress__determinate-container">
+        <svg class="mdc-circular-progress__determinate-circle-graphic"
+             viewBox="0 0 ${r} ${r}">
+          <circle class="mdc-circular-progress__determinate-track"
+                  cx="${e}" cy="${e}" r="${i}"
+                  stroke-width="${t}"></circle>
+          <circle class="mdc-circular-progress__determinate-circle"
+                  cx="${e}" cy="${e}" r="${i}"
+                  stroke-dasharray="${2 * 3.1415926 * i}"
+                  stroke-dashoffset="${s}"
+                  stroke-width="${t}"></circle>
+        </svg>
+      </div>`;
+  }
+  /**
+   * @soyTemplate
+   */
+  renderIndeterminateContainer() {
+    return d`
+      <div class="mdc-circular-progress__indeterminate-container">
+        <div class="mdc-circular-progress__spinner-layer">
+          ${this.renderIndeterminateSpinnerLayer()}
+        </div>
+      </div>`;
+  }
+  /**
+   * @soyTemplate
+   */
+  renderIndeterminateSpinnerLayer() {
+    const r = 48 + this.density * 4, e = r / 2, i = this.density >= -3 ? 18 + this.density * 11 / 6 : 12.5 + (this.density + 3) * 5 / 4, c = 2 * 3.1415926 * i, s = 0.5 * c, t = this.density >= -3 ? 4 + this.density * (1 / 3) : 3 + (this.density + 3) * (1 / 6);
+    return d`
+        <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
+          <svg class="mdc-circular-progress__indeterminate-circle-graphic"
+               viewBox="0 0 ${r} ${r}">
+            <circle cx="${e}" cy="${e}" r="${i}"
+                    stroke-dasharray="${c}"
+                    stroke-dashoffset="${s}"
+                    stroke-width="${t}"></circle>
+          </svg>
+        </div>
+        <div class="mdc-circular-progress__gap-patch">
+          <svg class="mdc-circular-progress__indeterminate-circle-graphic"
+               viewBox="0 0 ${r} ${r}">
+            <circle cx="${e}" cy="${e}" r="${i}"
+                    stroke-dasharray="${c}"
+                    stroke-dashoffset="${s}"
+                    stroke-width="${t * 0.8}"></circle>
+          </svg>
+        </div>
+        <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
+          <svg class="mdc-circular-progress__indeterminate-circle-graphic"
+               viewBox="0 0 ${r} ${r}">
+            <circle cx="${e}" cy="${e}" r="${i}"
+                    stroke-dasharray="${c}"
+                    stroke-dashoffset="${s}"
+                    stroke-width="${t}"></circle>
+          </svg>
+        </div>`;
+  }
+  update(r) {
+    super.update(r), r.has("progress") && (this.progress > 1 && (this.progress = 1), this.progress < 0 && (this.progress = 0));
+  }
+}
+o([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "indeterminate", void 0);
+o([
+  n({ type: Number, reflect: !0 })
+], a.prototype, "progress", void 0);
+o([
+  n({ type: Number, reflect: !0 })
+], a.prototype, "density", void 0);
+o([
+  n({ type: Boolean, reflect: !0 })
+], a.prototype, "closed", void 0);
+o([
+  g,
+  n({ type: String, attribute: "aria-label" })
+], a.prototype, "ariaLabel", void 0);
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-LIcense-Identifier: Apache-2.0
+ */
+const b = h`.mdc-circular-progress__determinate-circle,.mdc-circular-progress__indeterminate-circle-graphic{stroke:#6200ee;stroke:var(--mdc-theme-primary, #6200ee)}.mdc-circular-progress__determinate-track{stroke:transparent}@keyframes mdc-circular-progress-container-rotate{to{transform:rotate(360deg)}}@keyframes mdc-circular-progress-spinner-layer-rotate{12.5%{transform:rotate(135deg)}25%{transform:rotate(270deg)}37.5%{transform:rotate(405deg)}50%{transform:rotate(540deg)}62.5%{transform:rotate(675deg)}75%{transform:rotate(810deg)}87.5%{transform:rotate(945deg)}100%{transform:rotate(1080deg)}}@keyframes mdc-circular-progress-color-1-fade-in-out{from{opacity:.99}25%{opacity:.99}26%{opacity:0}89%{opacity:0}90%{opacity:.99}to{opacity:.99}}@keyframes mdc-circular-progress-color-2-fade-in-out{from{opacity:0}15%{opacity:0}25%{opacity:.99}50%{opacity:.99}51%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-3-fade-in-out{from{opacity:0}40%{opacity:0}50%{opacity:.99}75%{opacity:.99}76%{opacity:0}to{opacity:0}}@keyframes mdc-circular-progress-color-4-fade-in-out{from{opacity:0}65%{opacity:0}75%{opacity:.99}90%{opacity:.99}to{opacity:0}}@keyframes mdc-circular-progress-left-spin{from{transform:rotate(265deg)}50%{transform:rotate(130deg)}to{transform:rotate(265deg)}}@keyframes mdc-circular-progress-right-spin{from{transform:rotate(-265deg)}50%{transform:rotate(-130deg)}to{transform:rotate(-265deg)}}.mdc-circular-progress{display:inline-flex;position:relative;direction:ltr;line-height:0;transition:opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1)}.mdc-circular-progress__determinate-container,.mdc-circular-progress__indeterminate-circle-graphic,.mdc-circular-progress__indeterminate-container,.mdc-circular-progress__spinner-layer{position:absolute;width:100%;height:100%}.mdc-circular-progress__determinate-container{transform:rotate(-90deg)}.mdc-circular-progress__indeterminate-container{font-size:0;letter-spacing:0;white-space:nowrap;opacity:0}.mdc-circular-progress__determinate-circle-graphic,.mdc-circular-progress__indeterminate-circle-graphic{fill:transparent}.mdc-circular-progress__determinate-circle{transition:stroke-dashoffset 500ms 0ms cubic-bezier(0, 0, 0.2, 1)}.mdc-circular-progress__gap-patch{position:absolute;top:0;left:47.5%;box-sizing:border-box;width:5%;height:100%;overflow:hidden}.mdc-circular-progress__gap-patch .mdc-circular-progress__indeterminate-circle-graphic{left:-900%;width:2000%;transform:rotate(180deg)}.mdc-circular-progress__circle-clipper{display:inline-flex;position:relative;width:50%;height:100%;overflow:hidden}.mdc-circular-progress__circle-clipper .mdc-circular-progress__indeterminate-circle-graphic{width:200%}.mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{left:-100%}.mdc-circular-progress--indeterminate .mdc-circular-progress__determinate-container{opacity:0}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{opacity:1}.mdc-circular-progress--indeterminate .mdc-circular-progress__indeterminate-container{animation:mdc-circular-progress-container-rotate 1568.2352941176ms linear infinite}.mdc-circular-progress--indeterminate .mdc-circular-progress__spinner-layer{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-1{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,mdc-circular-progress-color-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-2{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,mdc-circular-progress-color-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-3{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,mdc-circular-progress-color-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__color-4{animation:mdc-circular-progress-spinner-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,mdc-circular-progress-color-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-left .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--indeterminate .mdc-circular-progress__circle-right .mdc-circular-progress__indeterminate-circle-graphic{animation:mdc-circular-progress-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both}.mdc-circular-progress--closed{opacity:0}:host{display:inline-flex}.mdc-circular-progress__determinate-track{stroke:transparent;stroke:var(--mdc-circular-progress-track-color, transparent)}`;
+var v = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, k = (l, r, e, i) => {
+  for (var c = i > 1 ? void 0 : i ? $(r, e) : r, s = l.length - 1, t; s >= 0; s--)
+    (t = l[s]) && (c = (i ? t(r, e, c) : t(c)) || c);
+  return i && c && v(r, e, c), c;
 };
 let p = class extends a {
 };
-p.styles = [f];
-p = u([
-  m("cv-circular-progress")
+p.styles = [b];
+p = k([
+  f("cv-circular-progress")
 ], p);
 export {
   p as CovalentCircularProgressBase

package/class-map.mjs

@@ -0,0 +1,62 @@
+import { x as h } from "./query-assigned-elements.mjs";
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const a = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, d = (s) => (...t) => ({ _$litDirective$: s, values: t });
+class l {
+  constructor(t) {
+  }
+  get _$AU() {
+    return this._$AM._$AU;
+  }
+  _$AT(t, i, n) {
+    this._$Ct = t, this._$AM = i, this._$Ci = n;
+  }
+  _$AS(t, i) {
+    return this.update(t, i);
+  }
+  update(t, i) {
+    return this.render(...i);
+  }
+}
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const u = d(class extends l {
+  constructor(s) {
+    var t;
+    if (super(s), s.type !== a.ATTRIBUTE || s.name !== "class" || ((t = s.strings) === null || t === void 0 ? void 0 : t.length) > 2)
+      throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  }
+  render(s) {
+    return " " + Object.keys(s).filter((t) => s[t]).join(" ") + " ";
+  }
+  update(s, [t]) {
+    var i, n;
+    if (this.nt === void 0) {
+      this.nt = /* @__PURE__ */ new Set(), s.strings !== void 0 && (this.st = new Set(s.strings.join(" ").split(/\s/).filter((e) => e !== "")));
+      for (const e in t)
+        t[e] && !(!((i = this.st) === null || i === void 0) && i.has(e)) && this.nt.add(e);
+      return this.render(t);
+    }
+    const r = s.element.classList;
+    this.nt.forEach((e) => {
+      e in t || (r.remove(e), this.nt.delete(e));
+    });
+    for (const e in t) {
+      const o = !!t[e];
+      o === this.nt.has(e) || !((n = this.st) === null || n === void 0) && n.has(e) || (o ? (r.add(e), this.nt.add(e)) : (r.remove(e), this.nt.delete(e)));
+    }
+    return h;
+  }
+});
+export {
+  d as e,
+  l as i,
+  u as o,
+  a as t
+};

package/code-snippet.mjs

@@ -1,6 +1,7 @@
-import { LitElement as Tt, html as Se, css as St, unsafeCSS as wt } from "lit";
-import { property as ve, queryAssignedNodes as Ot, customElement as Rt } from "lit/decorators.js";
-import { classMap as At } from "lit/directives/class-map.js";
+import { s as Tt, y as Se, i as St, r as wt, e as Ot } from "./query-assigned-elements.mjs";
+import { e as ve } from "./property.mjs";
+import { o as Rt } from "./query-assigned-nodes.mjs";
+import { o as At } from "./class-map.mjs";
 const Mt = `:host{background-color:var(--mdc-theme-surface-canvas);border-radius:var(--mdc-shape-medium);display:block;position:relative;overflow:hidden}:host pre{margin:0;padding:16px 0;overflow:auto}:host pre code.hljs.cv-code-snippet{padding:0 16px;display:block;overflow-x:auto}:host .hljs{color:var(--cov-theme-code-snippet-color, #abb2bf)}:host .hljs-comment,:host .hljs-quote{color:var(--cov-theme-code-snippet-comment, #5c6370);font-style:italic}:host .hljs-doctag,:host .hljs-formula,:host .hljs-keyword{color:var(--cov-theme-code-snippet-keyword, #c678dd)}:host .hljs-deletion,:host .hljs-name,:host .hljs-section,:host .hljs-selector-tag,:host .hljs-subst{color:var(--cov-theme-code-snippet-selector, #e06c75)}:host .hljs-literal{color:var(--cov-theme-code-snippet-literal, #56b6c2)}:host .hljs-addition,:host .hljs-attribute,:host .hljs-meta .hljs-string,:host .hljs-regexp,:host .hljs-string{color:var(--cov-theme-code-snippet-string, #98c379)}:host .hljs-attr,:host .hljs-number,:host .hljs-selector-attr,:host .hljs-selector-class,:host .hljs-selector-pseudo,:host .hljs-template-variable,:host .hljs-type,:host .hljs-variable{color:var(--cov-theme-code-snippet-variable, #d19a66)}:host .hljs-bullet,:host .hljs-link,:host .hljs-meta,:host .hljs-selector-id,:host .hljs-symbol,:host .hljs-title{color:var(--cov-theme-code-snippet-title, #61aeee)}:host .hljs-built_in,:host .hljs-class .hljs-title,:host .hljs-title.class_{color:var(--cov-theme-code-snippet-class, #e6c07b)}:host .hljs-emphasis{font-style:italic}:host .hljs-strong{font-weight:700}:host .hljs-link{text-decoration:underline}:host([inline]){border-radius:0}.header{border-bottom:1px solid var(--mdc-theme-border);position:sticky;top:-8px;background-color:var(--mdc-theme-surface-canvas);display:flex;justify-content:space-between;padding:4px 8px 4px 16px;align-items:center;border-radius:var(--mdc-shape-medium) var(--mdc-shape-medium) 0 0}.title{font-family:var(--mdc-typography-subtitle2-font-family);font-size:var(--mdc-typography-subtitle2-font-size);font-weight:var(--mdc-typography-subtitle2-font-weight);line-height:var(--mdc-typography-subtitle2-line-height);padding-right:16px}
 `;
 var _n = { exports: {} };
@@ -12129,13 +12130,13 @@ pe([
   ve({ type: Boolean, reflect: !0 })
 ], de.prototype, "hideHeader", 2);
 pe([
-  Ot({})
+  Rt({})
 ], de.prototype, "_codeItems", 2);
 pe([
   ve()
 ], de.prototype, "maxHeight", 2);
 de = pe([
-  Rt("cv-code-snippet")
+  Ot("cv-code-snippet")
 ], de);
 export {
   de as CovalentCodeSnippetBase

package/covalent.mjs

@@ -6,7 +6,7 @@ import("./checkbox.mjs");
 import("./card.mjs");
 import("./circular-progress.mjs");
 import("./code-snippet.mjs");
-import("./dialog.mjs");
+import("./dialog.mjs").then((t) => t.d);
 import("./drawer.mjs");
 import("./empty-state.mjs");
 import("./icon.mjs");
@@ -15,7 +15,7 @@ import("./icon-check-toggle.mjs");
 import("./icon-radio-toggle.mjs");
 import("./linear-progress.mjs");
 import("./check-list-item.mjs");
-import("./list.mjs");
+import("./list.mjs").then((t) => t.l);
 import("./list-expansion.mjs");
 import("./list-item.mjs").then((t) => t.l);
 import("./nav-list-item.mjs");