@vonage/vivid 3.0.0-next.4 → 3.0.0-next.5

package/lib/progress-ring/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividProgressRing: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/progress-ring/progress-ring.d.ts

@@ -0,0 +1,6 @@
+import { BaseProgress } from '@microsoft/fast-foundation';
+import type { Connotation } from '../enums';
+export declare type ProgressRingConnotation = Connotation.Primary | Connotation.Success | Connotation.Alert | Connotation.CTA;
+export declare class ProgressRing extends BaseProgress {
+    connotation?: ProgressRingConnotation;
+}

package/lib/progress-ring/progress-ring.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { ProgressRing } from './progress-ring';
+export declare const ProgressRingTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<ProgressRing>;

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.4",
+  "version": "3.0.0-next.5",
+  "exports": {
+    "import": "./index.js"
+  },
   "main": "./index.umd.js",
   "module": "./index.esm.js",
   "typings": "./index.d.ts",

package/progress/index.js

@@ -1,71 +1,10 @@
-import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { h as classofRaw, _ as _export, f as functionUncurryThis } from '../shared/web.dom-collections.iterator.js';
+import { B as BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-/**
- * An Progress HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
- *
- * @public
- */
-class BaseProgress extends FoundationElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Indicates progress in %
-         * @internal
-         */
-        this.percentComplete = 0;
-    }
-    valueChanged() {
-        if (this.$fastController.isConnected) {
-            this.updatePercentComplete();
-        }
-    }
-    minChanged() {
-        if (this.$fastController.isConnected) {
-            this.updatePercentComplete();
-        }
-    }
-    maxChanged() {
-        if (this.$fastController.isConnected) {
-            this.updatePercentComplete();
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.updatePercentComplete();
-    }
-    updatePercentComplete() {
-        const min = typeof this.min === "number" ? this.min : 0;
-        const max = typeof this.max === "number" ? this.max : 100;
-        const value = typeof this.value === "number" ? this.value : 0;
-        const range = max - min;
-        this.percentComplete =
-            range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
-    }
-}
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], BaseProgress.prototype, "value", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], BaseProgress.prototype, "min", void 0);
-__decorate([
-    attr({ converter: nullableNumberConverter })
-], BaseProgress.prototype, "max", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], BaseProgress.prototype, "paused", void 0);
-__decorate([
-    observable
-], BaseProgress.prototype, "percentComplete", void 0);
-
 var css_248z = ".base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-pacific):not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.connotation-pacific {\n  --connotation: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  border-radius: 3px;\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 100%;\n}\n.progress .indeterminate {\n  background-color: var(--connotation);\n}\n\n.determinate {\n  background-color: var(--connotation);\n  block-size: 100%;\n  border-radius: 3px;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--connotation);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n  position: absolute;\n  animation: indeterminate-1 2s infinite;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-20);\n  block-size: 100%;\n  inline-size: 30%;\n  opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n  background-image: var(--connotation);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n  animation-direction: reverse;\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n  border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--connotation);\n}\n\n.base.paused .determinate {\n  background-color: var(--vvd-color-neutral-40);\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
 styleInject(css_248z);
 

package/progress-ring/index.js

@@ -0,0 +1,76 @@
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import { B as BaseProgress } from '../shared/base-progress.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+
+var css_248z = ".base {\n  width: 36px;\n  height: 36px;\n  align-items: center;\n  outline: none;\n}\n.base.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.base:not(.connotation-cta):not(.connotation-alert):not(.connotation-success) {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.base.base-large {\n  width: 48px;\n  height: 48px;\n}\n\n.base.base-small {\n  width: 24px;\n  height: 24px;\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: var(--connotation);\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n  stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n  stroke: var(--vvd-color-neutral);\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
+styleInject(css_248z);
+
+class ProgressRing extends BaseProgress {}
+
+__decorate([attr(), __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
+
+let _2 = t => t,
+    _t,
+    _t2,
+    _t3;
+
+const getClasses = _ => classNames('base', [`connotation-${_.connotation}`, !!_.connotation]);
+
+const progressSegments = 44;
+const ProgressRingTemplate = _ => html(_t || (_t = _2`
+<div
+        role="progressbar"
+        aria-valuenow="${0}"
+        aria-valuemin="${0}"
+        aria-valuemax="${0}"
+        class="${0} ${0}"
+    >
+        ${0}
+        ${0}
+    </div>
+`), x => x.value, x => x.min, x => x.max, x => x.paused ? 'paused' : '', getClasses, when(x => typeof x.value === 'number', html(_t2 || (_t2 = _2`
+                <svg
+                    class="progress"
+                    viewBox="0 0 16 16"
+                >
+                    <circle
+                        class="background"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                    <circle
+                        class="determinate"
+                        style="stroke-dasharray: ${0}px ${0}px"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                </svg>
+            `), x => progressSegments * x.percentComplete / 100, progressSegments)), when(x => typeof x.value !== 'number', html(_t3 || (_t3 = _2`
+            <svg class="progress" viewBox="0 0 16 16">
+              <circle
+                class="background"
+                cx="8px"
+                cy="8px"
+                r="7px"
+              ></circle>
+              <circle
+                class="indeterminate-indicator-1"
+                cx="8px"
+                cy="8px"
+                r="7px"
+              ></circle>
+            </svg>
+            `))));
+
+const vividProgressRing = ProgressRing.compose({
+  baseName: 'progress-ring',
+  template: ProgressRingTemplate,
+  styles: css_248z
+});
+designSystem.register(vividProgressRing());
+
+export { vividProgressRing };

package/shared/base-progress.js

@@ -0,0 +1,65 @@
+import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable } from './index.js';
+
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @public
+ */
+class BaseProgress extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates progress in %
+         * @internal
+         */
+        this.percentComplete = 0;
+    }
+    valueChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    minChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    maxChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updatePercentComplete();
+    }
+    updatePercentComplete() {
+        const min = typeof this.min === "number" ? this.min : 0;
+        const max = typeof this.max === "number" ? this.max : 100;
+        const value = typeof this.value === "number" ? this.value : 0;
+        const range = max - min;
+        this.percentComplete =
+            range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "value", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "max", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], BaseProgress.prototype, "paused", void 0);
+__decorate([
+    observable
+], BaseProgress.prototype, "percentComplete", void 0);
+
+export { BaseProgress as B };