@vonage/vivid 3.0.0 → 3.1.0

package/shared/numbers.js

@@ -0,0 +1,34 @@
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+function wrapInBounds(min, max, value) {
+    if (value < min) {
+        return max;
+    }
+    else if (value > max) {
+        return min;
+    }
+    return value;
+}
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Determines if a number value is within a specified range.
+ *
+ * @param value - the value to check
+ * @param min - the range start
+ * @param max - the range end
+ */
+function inRange(value, min, max = 0) {
+    [min, max] = [min, max].sort((a, b) => a - b);
+    return min <= value && value < max;
+}
+
+export { inRange as i, limit as l, wrapInBounds as w };

package/shared/patterns/affix.d.ts

@@ -6,4 +6,4 @@ export declare class AffixIcon {
 export declare class AffixIconWithTrailing extends AffixIcon {
     iconTrailing: boolean;
 }
-export declare const affixIconTemplateFactory: (context: ElementDefinitionContext) => (icon?: string) => ViewTemplate<AffixIcon> | null;
+export declare const affixIconTemplateFactory: (context: ElementDefinitionContext) => (icon?: string, className?: string) => ViewTemplate<AffixIcon> | null;

package/shared/patterns/focus.d.ts

@@ -0,0 +1,3 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+export declare const focusTemplateFactory: (context: ElementDefinitionContext) => ViewTemplate;

package/shared/patterns/form-elements/form-elements.d.ts

@@ -0,0 +1,43 @@
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+export interface FormElement {
+    errorValidationMessage: boolean;
+    label: string;
+    userValid: boolean;
+    dirtyValue: boolean;
+}
+export interface FormElementHelperText {
+    helperText?: string;
+}
+export interface FormElementSuccessText {
+    successText?: string;
+}
+export interface FormElementCharCount {
+    charCount: boolean;
+}
+export declare class FormElementHelperText {
+    helperText?: string;
+}
+export declare class FormElementSuccessText {
+    successText?: string;
+}
+export declare class FormElementCharCount {
+    charCount: boolean;
+}
+export declare function formElements<T extends {
+    new (...args: any[]): Record<string, any>;
+}>(constructor: T): {
+    new (...args: any[]): {
+        [x: string]: any;
+        label?: string | undefined;
+        userValid: boolean;
+        "__#8335@#blurred": boolean;
+        readonly errorValidationMessage: any;
+        connectedCallback(): void;
+        "__#8335@#handleInvalidEvent": () => void;
+        disconnectedCallback(): void;
+        validate: () => void;
+    };
+} & T;
+declare type FeedbackType = 'error' | 'helper' | 'success';
+export declare function getFeedbackTemplate(messageType: FeedbackType, context: ElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<FormElement, any>;
+export {};

package/shared/patterns/form-elements/index.d.ts

@@ -0,0 +1 @@
+export * from './form-elements';

package/shared/patterns/index.d.ts

@@ -1 +1,3 @@
 export * from './affix';
+export * from './focus';
+export * from './form-elements';

package/shared/radio.js

@@ -0,0 +1,127 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata } from './index.js';
+import { C as CheckableFormAssociated } from './form-associated.js';
+import { e as keySpace } from './key-codes.js';
+
+class _Radio extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+class Radio$1 extends FormAssociatedRadio {
+    constructor() {
+        super();
+        /**
+         * The element's value to be included in form submission when checked.
+         * Default to "on" to reach parity with input[type="radio"]
+         *
+         * @internal
+         */
+        this.initialValue = "on";
+        /**
+         * @internal
+         */
+        this.keypressHandler = (e) => {
+            switch (e.key) {
+                case keySpace:
+                    if (!this.checked && !this.readOnly) {
+                        this.checked = true;
+                    }
+                    return;
+            }
+            return true;
+        };
+        this.proxy.setAttribute("type", "radio");
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+    }
+    /**
+     * @internal
+     */
+    defaultCheckedChanged() {
+        var _a;
+        if (this.$fastController.isConnected && !this.dirtyChecked) {
+            // Setting this.checked will cause us to enter a dirty state,
+            // but if we are clean when defaultChecked is changed, we want to stay
+            // in a clean state, so reset this.dirtyChecked
+            if (!this.isInsideRadioGroup()) {
+                this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+                this.dirtyChecked = false;
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a, _b;
+        super.connectedCallback();
+        this.validate();
+        if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
+            this.getAttribute("tabindex") === null) {
+            if (!this.disabled) {
+                this.setAttribute("tabindex", "0");
+            }
+        }
+        if (this.checkedAttribute) {
+            if (!this.dirtyChecked) {
+                // Setting this.checked will cause us to enter a dirty state,
+                // but if we are clean when defaultChecked is changed, we want to stay
+                // in a clean state, so reset this.dirtyChecked
+                if (!this.isInsideRadioGroup()) {
+                    this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
+                    this.dirtyChecked = false;
+                }
+            }
+        }
+    }
+    isInsideRadioGroup() {
+        const parent = this.closest("[role=radiogroup]");
+        return parent !== null;
+    }
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        if (!this.disabled && !this.readOnly && !this.checked) {
+            this.checked = true;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Radio$1.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Radio$1.prototype, "name", void 0);
+__decorate([
+    observable
+], Radio$1.prototype, "defaultSlottedNodes", void 0);
+
+class Radio extends Radio$1 {}
+__decorate([attr, __metadata("design:type", String)], Radio.prototype, "label", void 0);
+
+export { Radio as R };

package/shared/ref.js

@@ -0,0 +1,41 @@
+import { A as AttachedBehaviorHTMLDirective } from './index.js';
+
+/**
+ * The runtime behavior for template references.
+ * @public
+ */
+class RefBehavior {
+    /**
+     * Creates an instance of RefBehavior.
+     * @param target - The element to reference.
+     * @param propertyName - The name of the property to assign the reference to.
+     */
+    constructor(target, propertyName) {
+        this.target = target;
+        this.propertyName = propertyName;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     */
+    bind(source) {
+        source[this.propertyName] = this.target;
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
+    unbind() { }
+}
+/**
+ * A directive that observes the updates a property with a reference to the element.
+ * @param propertyName - The name of the property to assign the reference to.
+ * @public
+ */
+function ref(propertyName) {
+    return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
+}
+
+export { ref as r };