@vonage/vivid 3.48.0 → 3.49.0-preview.0

package/shared/definition38.cjs

@@ -0,0 +1,92 @@
+'use strict';
+
+const index = require('./index.cjs');
+const baseProgress = require('./base-progress.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;background-color:var(--_connotation-color-primary);block-size:100%;border-radius:inherit;inline-size:100%}.determinate{background-color:var(--_connotation-color-primary);block-size:100%;border-radius:inherit;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}\n";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Progress extends baseProgress.BaseProgress {
+  constructor() {
+    super(...arguments);
+    this.ariaLabel = null;
+    this.reverse = false;
+  }
+}
+__decorateClass([
+  index.attr({ attribute: "aria-label" })
+], Progress.prototype, "ariaLabel", 2);
+__decorateClass([
+  index.attr()
+], Progress.prototype, "shape", 2);
+__decorateClass([
+  index.attr()
+], Progress.prototype, "connotation", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], Progress.prototype, "reverse", 2);
+
+const getClasses = ({
+  connotation,
+  shape,
+  reverse,
+  paused
+}) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["reverse", Boolean(reverse)],
+  ["paused", Boolean(paused)]
+);
+function determinate() {
+  return index.html`
+		<span class="determinate" style="width: ${(x) => x.percentComplete}%"></span>`;
+}
+function indeterminate() {
+  return index.html`
+		<span class="indeterminate" name="indeterminate">
+			<span class="indicator-1"></span>
+			<span class="indicator-2"></span>
+		 </span>`;
+}
+const ProgressTemplate = (_) => {
+  return index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
+    <div
+		role="progressbar"
+		aria-label="${(x) => x.ariaLabel}"
+		aria-valuenow="${(x) => x.value}"
+		aria-valuemin="${(x) => x.min}"
+		aria-valuemax="${(x) => x.max}"
+		class="${getClasses}"
+    >
+		<div class="progress">
+		  ${when.when((x) => typeof x.value === "number", determinate())}
+		  ${when.when((x) => typeof x.value !== "number", indeterminate())}
+    	</div>
+	</div>
+  </template>`;
+};
+
+const progressDefinition = Progress.compose({
+  baseName: "progress",
+  template: ProgressTemplate,
+  styles
+});
+const progressRegistries = [progressDefinition()];
+const registerProgress = index.registerFactory(progressRegistries);
+
+exports.progressDefinition = progressDefinition;
+exports.progressRegistries = progressRegistries;
+exports.registerProgress = registerProgress;

package/shared/definition39.cjs

@@ -0,0 +1,448 @@
+'use strict';
+
+const index = require('./index.cjs');
+const direction = require('./direction.cjs');
+const keyCodes = require('./key-codes.cjs');
+const aria = require('./aria.cjs');
+const radio = require('./radio.cjs');
+const slotted = require('./slotted.cjs');
+const when = require('./when.cjs');
+const aria$1 = require('./aria2.cjs');
+
+/**
+ * An Radio Group Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radiogroup | ARIA radiogroup }.
+ *
+ * @slot label - The slot for the label
+ * @slot - The default slot for radio buttons
+ * @csspart positioning-region - The positioning region for laying out the radios
+ * @fires change - Fires a custom 'change' event when the value changes
+ *
+ * @public
+ */
+let RadioGroup$1 = class RadioGroup extends index.FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The orientation of the group
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = aria.Orientation.horizontal;
+        this.radioChangeHandler = (e) => {
+            const changedRadio = e.target;
+            if (changedRadio.checked) {
+                this.slottedRadioButtons.forEach((radio) => {
+                    if (radio !== changedRadio) {
+                        radio.checked = false;
+                        if (!this.isInsideFoundationToolbar) {
+                            radio.setAttribute("tabindex", "-1");
+                        }
+                    }
+                });
+                this.selectedRadio = changedRadio;
+                this.value = changedRadio.value;
+                changedRadio.setAttribute("tabindex", "0");
+                this.focusedRadio = changedRadio;
+            }
+            e.stopPropagation();
+        };
+        this.moveToRadioByIndex = (group, index) => {
+            const radio = group[index];
+            if (!this.isInsideToolbar) {
+                radio.setAttribute("tabindex", "0");
+                if (radio.readOnly) {
+                    this.slottedRadioButtons.forEach((nextRadio) => {
+                        if (nextRadio !== radio) {
+                            nextRadio.setAttribute("tabindex", "-1");
+                        }
+                    });
+                }
+                else {
+                    radio.checked = true;
+                    this.selectedRadio = radio;
+                }
+            }
+            this.focusedRadio = radio;
+            radio.focus();
+        };
+        this.moveRightOffGroup = () => {
+            var _a;
+            (_a = this.nextElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.moveLeftOffGroup = () => {
+            var _a;
+            (_a = this.previousElementSibling) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        /**
+         * @internal
+         */
+        this.focusOutHandler = (e) => {
+            const group = this.slottedRadioButtons;
+            const radio = e.target;
+            const index = radio !== null ? group.indexOf(radio) : 0;
+            const focusedIndex = this.focusedRadio
+                ? group.indexOf(this.focusedRadio)
+                : -1;
+            if ((focusedIndex === 0 && index === focusedIndex) ||
+                (focusedIndex === group.length - 1 && focusedIndex === index)) {
+                if (!this.selectedRadio) {
+                    this.focusedRadio = group[0];
+                    this.focusedRadio.setAttribute("tabindex", "0");
+                    group.forEach((nextRadio) => {
+                        if (nextRadio !== this.focusedRadio) {
+                            nextRadio.setAttribute("tabindex", "-1");
+                        }
+                    });
+                }
+                else {
+                    this.focusedRadio = this.selectedRadio;
+                    if (!this.isInsideFoundationToolbar) {
+                        this.selectedRadio.setAttribute("tabindex", "0");
+                        group.forEach((nextRadio) => {
+                            if (nextRadio !== this.selectedRadio) {
+                                nextRadio.setAttribute("tabindex", "-1");
+                            }
+                        });
+                    }
+                }
+            }
+            return true;
+        };
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            const radio = e.target;
+            if (radio) {
+                const group = this.slottedRadioButtons;
+                if (radio.checked || group.indexOf(radio) === 0) {
+                    radio.setAttribute("tabindex", "0");
+                    this.selectedRadio = radio;
+                }
+                else {
+                    radio.setAttribute("tabindex", "-1");
+                    this.selectedRadio = null;
+                }
+                this.focusedRadio = radio;
+            }
+            e.preventDefault();
+        };
+        this.shouldMoveOffGroupToTheRight = (index, group, key) => {
+            return index === group.length && this.isInsideToolbar && key === keyCodes.keyArrowRight;
+        };
+        this.shouldMoveOffGroupToTheLeft = (group, key) => {
+            const index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
+            return index < 0 && this.isInsideToolbar && key === keyCodes.keyArrowLeft;
+        };
+        this.checkFocusedRadio = () => {
+            if (this.focusedRadio !== null &&
+                !this.focusedRadio.readOnly &&
+                !this.focusedRadio.checked) {
+                this.focusedRadio.checked = true;
+                this.focusedRadio.setAttribute("tabindex", "0");
+                this.focusedRadio.focus();
+                this.selectedRadio = this.focusedRadio;
+            }
+        };
+        this.moveRight = (e) => {
+            const group = this.slottedRadioButtons;
+            let index = 0;
+            index = this.focusedRadio ? group.indexOf(this.focusedRadio) + 1 : 1;
+            if (this.shouldMoveOffGroupToTheRight(index, group, e.key)) {
+                this.moveRightOffGroup();
+                return;
+            }
+            else if (index === group.length) {
+                index = 0;
+            }
+            /* looping to get to next radio that is not disabled */
+            /* matching native radio/radiogroup which does not select an item if there is only 1 in the group */
+            while (index < group.length && group.length > 1) {
+                if (!group[index].disabled) {
+                    this.moveToRadioByIndex(group, index);
+                    break;
+                }
+                else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
+                    break;
+                }
+                else if (index + 1 >= group.length) {
+                    if (this.isInsideToolbar) {
+                        break;
+                    }
+                    else {
+                        index = 0;
+                    }
+                }
+                else {
+                    index += 1;
+                }
+            }
+        };
+        this.moveLeft = (e) => {
+            const group = this.slottedRadioButtons;
+            let index = 0;
+            index = this.focusedRadio ? group.indexOf(this.focusedRadio) - 1 : 0;
+            index = index < 0 ? group.length - 1 : index;
+            if (this.shouldMoveOffGroupToTheLeft(group, e.key)) {
+                this.moveLeftOffGroup();
+                return;
+            }
+            /* looping to get to next radio that is not disabled */
+            while (index >= 0 && group.length > 1) {
+                if (!group[index].disabled) {
+                    this.moveToRadioByIndex(group, index);
+                    break;
+                }
+                else if (this.focusedRadio && index === group.indexOf(this.focusedRadio)) {
+                    break;
+                }
+                else if (index - 1 < 0) {
+                    index = group.length - 1;
+                }
+                else {
+                    index -= 1;
+                }
+            }
+        };
+        /**
+         * keyboard handling per https://w3c.github.io/aria-practices/#for-radio-groups-not-contained-in-a-toolbar
+         * navigation is different when there is an ancestor with role='toolbar'
+         *
+         * @internal
+         */
+        this.keydownHandler = (e) => {
+            const key = e.key;
+            if (key in keyCodes.ArrowKeys && this.isInsideFoundationToolbar) {
+                return true;
+            }
+            switch (key) {
+                case keyCodes.keyEnter: {
+                    this.checkFocusedRadio();
+                    break;
+                }
+                case keyCodes.keyArrowRight:
+                case keyCodes.keyArrowDown: {
+                    if (this.direction === direction.Direction.ltr) {
+                        this.moveRight(e);
+                    }
+                    else {
+                        this.moveLeft(e);
+                    }
+                    break;
+                }
+                case keyCodes.keyArrowLeft:
+                case keyCodes.keyArrowUp: {
+                    if (this.direction === direction.Direction.ltr) {
+                        this.moveLeft(e);
+                    }
+                    else {
+                        this.moveRight(e);
+                    }
+                    break;
+                }
+                default: {
+                    return true;
+                }
+            }
+        };
+    }
+    readOnlyChanged() {
+        if (this.slottedRadioButtons !== undefined) {
+            this.slottedRadioButtons.forEach((radio) => {
+                if (this.readOnly) {
+                    radio.readOnly = true;
+                }
+                else {
+                    radio.readOnly = false;
+                }
+            });
+        }
+    }
+    disabledChanged() {
+        if (this.slottedRadioButtons !== undefined) {
+            this.slottedRadioButtons.forEach((radio) => {
+                if (this.disabled) {
+                    radio.disabled = true;
+                }
+                else {
+                    radio.disabled = false;
+                }
+            });
+        }
+    }
+    nameChanged() {
+        if (this.slottedRadioButtons) {
+            this.slottedRadioButtons.forEach((radio) => {
+                radio.setAttribute("name", this.name);
+            });
+        }
+    }
+    valueChanged() {
+        if (this.slottedRadioButtons) {
+            this.slottedRadioButtons.forEach((radio) => {
+                if (radio.value === this.value) {
+                    radio.checked = true;
+                    this.selectedRadio = radio;
+                }
+            });
+        }
+        this.$emit("change");
+    }
+    slottedRadioButtonsChanged(oldValue, newValue) {
+        if (this.slottedRadioButtons && this.slottedRadioButtons.length > 0) {
+            this.setupRadioButtons();
+        }
+    }
+    get parentToolbar() {
+        return this.closest('[role="toolbar"]');
+    }
+    get isInsideToolbar() {
+        var _a;
+        return ((_a = this.parentToolbar) !== null && _a !== void 0 ? _a : false);
+    }
+    get isInsideFoundationToolbar() {
+        var _a;
+        return !!((_a = this.parentToolbar) === null || _a === void 0 ? void 0 : _a["$fastController"]);
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.direction = direction.getDirection(this);
+        this.setupRadioButtons();
+    }
+    disconnectedCallback() {
+        this.slottedRadioButtons.forEach((radio) => {
+            radio.removeEventListener("change", this.radioChangeHandler);
+        });
+    }
+    setupRadioButtons() {
+        const checkedRadios = this.slottedRadioButtons.filter((radio) => {
+            return radio.hasAttribute("checked");
+        });
+        const numberOfCheckedRadios = checkedRadios ? checkedRadios.length : 0;
+        if (numberOfCheckedRadios > 1) {
+            const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
+            lastCheckedRadio.checked = true;
+        }
+        let foundMatchingVal = false;
+        this.slottedRadioButtons.forEach((radio) => {
+            if (this.name !== undefined) {
+                radio.setAttribute("name", this.name);
+            }
+            if (this.disabled) {
+                radio.disabled = true;
+            }
+            if (this.readOnly) {
+                radio.readOnly = true;
+            }
+            if (this.value && this.value === radio.value) {
+                this.selectedRadio = radio;
+                this.focusedRadio = radio;
+                radio.checked = true;
+                radio.setAttribute("tabindex", "0");
+                foundMatchingVal = true;
+            }
+            else {
+                if (!this.isInsideFoundationToolbar) {
+                    radio.setAttribute("tabindex", "-1");
+                }
+                radio.checked = false;
+            }
+            radio.addEventListener("change", this.radioChangeHandler);
+        });
+        if (this.value === undefined && this.slottedRadioButtons.length > 0) {
+            const checkedRadios = this.slottedRadioButtons.filter((radio) => {
+                return radio.hasAttribute("checked");
+            });
+            const numberOfCheckedRadios = checkedRadios !== null ? checkedRadios.length : 0;
+            if (numberOfCheckedRadios > 0 && !foundMatchingVal) {
+                const lastCheckedRadio = checkedRadios[numberOfCheckedRadios - 1];
+                lastCheckedRadio.checked = true;
+                this.focusedRadio = lastCheckedRadio;
+                lastCheckedRadio.setAttribute("tabindex", "0");
+            }
+            else {
+                this.slottedRadioButtons[0].setAttribute("tabindex", "0");
+                this.focusedRadio = this.slottedRadioButtons[0];
+            }
+        }
+    }
+};
+index.__decorate([
+    index.attr({ attribute: "readonly", mode: "boolean" })
+], RadioGroup$1.prototype, "readOnly", void 0);
+index.__decorate([
+    index.attr({ attribute: "disabled", mode: "boolean" })
+], RadioGroup$1.prototype, "disabled", void 0);
+index.__decorate([
+    index.attr
+], RadioGroup$1.prototype, "name", void 0);
+index.__decorate([
+    index.attr
+], RadioGroup$1.prototype, "value", void 0);
+index.__decorate([
+    index.attr
+], RadioGroup$1.prototype, "orientation", void 0);
+index.__decorate([
+    index.observable
+], RadioGroup$1.prototype, "childItems", void 0);
+index.__decorate([
+    index.observable
+], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
+
+const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}\n";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class RadioGroup extends RadioGroup$1 {
+}
+__decorateClass([
+  index.attr
+], RadioGroup.prototype, "label", 2);
+
+const RadioGroupTemplate = (context) => {
+  return index.html`
+		<template
+			role="radiogroup"
+			aria-disabled="${(x) => x.disabled}"
+			aria-readonly="${(x) => x.readOnly}"
+			aria-orientation="${(x) => x.orientation}"
+			@click="${(x, c) => x.clickHandler(c.event)}"
+			@keydown="${(x, c) => x.keydownHandler(c.event)}"
+			@focusout="${(x, c) => x.focusOutHandler(c.event)}"
+		>
+
+			${when.when((x) => x.label, index.html`<label>${(x) => x.label}</label>`)}
+
+			<div class="positioning-region ${(x) => x.orientation === aria$1.Orientation.horizontal ? "horizontal" : "vertical"}">
+				<slot ${slotted.slotted({ property: "slottedRadioButtons", filter: slotted.elements(context.tagFor(radio.Radio)) })}></slot>
+			</div>
+		</template>
+	`;
+};
+
+const radioGroupDefinition = RadioGroup.compose({
+  baseName: "radio-group",
+  template: RadioGroupTemplate,
+  styles
+});
+const radioGroupRegistries = [radioGroupDefinition()];
+const registerRadioGroup = index.registerFactory(radioGroupRegistries);
+
+exports.radioGroupDefinition = radioGroupDefinition;
+exports.radioGroupRegistries = radioGroupRegistries;
+exports.registerRadioGroup = registerRadioGroup;