@vonage/vivid 2.36.3 → 3.0.0-next.100

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 { a 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 { e 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 };

package/shared/slotted.js

@@ -0,0 +1,119 @@
+import { O as Observable, g as emptyArray, e as AttachedBehaviorHTMLDirective } from './index.js';
+
+/**
+ * Creates a function that can be used to filter a Node array, selecting only elements.
+ * @param selector - An optional selector to restrict the filter to.
+ * @public
+ */
+function elements(selector) {
+    if (selector) {
+        return function (value, index, array) {
+            return value.nodeType === 1 && value.matches(selector);
+        };
+    }
+    return function (value, index, array) {
+        return value.nodeType === 1;
+    };
+}
+/**
+ * A base class for node observation.
+ * @internal
+ */
+class NodeObservationBehavior {
+    /**
+     * Creates an instance of NodeObservationBehavior.
+     * @param target - The target to assign the nodes property on.
+     * @param options - The options to use in configuring node observation.
+     */
+    constructor(target, options) {
+        this.target = target;
+        this.options = options;
+        this.source = null;
+    }
+    /**
+     * 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) {
+        const name = this.options.property;
+        this.shouldUpdate = Observable.getAccessors(source).some((x) => x.name === name);
+        this.source = source;
+        this.updateTarget(this.computeNodes());
+        if (this.shouldUpdate) {
+            this.observe();
+        }
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    unbind() {
+        this.updateTarget(emptyArray);
+        this.source = null;
+        if (this.shouldUpdate) {
+            this.disconnect();
+        }
+    }
+    /** @internal */
+    handleEvent() {
+        this.updateTarget(this.computeNodes());
+    }
+    computeNodes() {
+        let nodes = this.getNodes();
+        if (this.options.filter !== void 0) {
+            nodes = nodes.filter(this.options.filter);
+        }
+        return nodes;
+    }
+    updateTarget(value) {
+        this.source[this.options.property] = value;
+    }
+}
+
+/**
+ * The runtime behavior for slotted node observation.
+ * @public
+ */
+class SlottedBehavior extends NodeObservationBehavior {
+    /**
+     * Creates an instance of SlottedBehavior.
+     * @param target - The slot element target to observe.
+     * @param options - The options to use when observing the slot.
+     */
+    constructor(target, options) {
+        super(target, options);
+    }
+    /**
+     * Begins observation of the nodes.
+     */
+    observe() {
+        this.target.addEventListener("slotchange", this);
+    }
+    /**
+     * Disconnects observation of the nodes.
+     */
+    disconnect() {
+        this.target.removeEventListener("slotchange", this);
+    }
+    /**
+     * Retrieves the nodes that should be assigned to the target.
+     */
+    getNodes() {
+        return this.target.assignedNodes(this.options);
+    }
+}
+/**
+ * A directive that observes the `assignedNodes()` of a slot and updates a property
+ * whenever they change.
+ * @param propertyOrOptions - The options used to configure slotted node observation.
+ * @public
+ */
+function slotted(propertyOrOptions) {
+    if (typeof propertyOrOptions === "string") {
+        propertyOrOptions = { property: propertyOrOptions };
+    }
+    return new AttachedBehaviorHTMLDirective("fast-slotted", SlottedBehavior, propertyOrOptions);
+}
+
+export { elements as e, slotted as s };

package/shared/start-end.js

@@ -0,0 +1,50 @@
+import { h as html } from './index.js';
+import { r as ref } from './ref.js';
+
+/**
+ * A mixin class implementing start and end elements.
+ * These are generally used to decorate text elements with icons or other visual indicators.
+ * @public
+ */
+class StartEnd {
+    handleStartContentChange() {
+        this.startContainer.classList.toggle("start", this.start.assignedNodes().length > 0);
+    }
+    handleEndContentChange() {
+        this.endContainer.classList.toggle("end", this.end.assignedNodes().length > 0);
+    }
+}
+/**
+ * The template for the end element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use endSlotTemplate
+ */
+html `
+    <span part="end" ${ref("endContainer")}>
+        <slot
+            name="end"
+            ${ref("end")}
+            @slotchange="${x => x.handleEndContentChange()}"
+        ></slot>
+    </span>
+`;
+/**
+ * The template for the start element.
+ * For use with {@link StartEnd}
+ *
+ * @public
+ * @deprecated - use startSlotTemplate
+ */
+html `
+    <span part="start" ${ref("startContainer")}>
+        <slot
+            name="start"
+            ${ref("start")}
+            @slotchange="${x => x.handleStartContentChange()}"
+        ></slot>
+    </span>
+`;
+
+export { StartEnd as S };

package/shared/string-trim.js

@@ -0,0 +1,40 @@
+import { f as functionUncurryThis, L as requireObjectCoercible$1 } from './export.js';
+import { t as toString$1 } from './to-string.js';
+
+// a string of all valid unicode whitespaces
+var whitespaces$1 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
+  '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
+
+var uncurryThis = functionUncurryThis;
+var requireObjectCoercible = requireObjectCoercible$1;
+var toString = toString$1;
+var whitespaces = whitespaces$1;
+
+var replace = uncurryThis(''.replace);
+var whitespace = '[' + whitespaces + ']';
+var ltrim = RegExp('^' + whitespace + whitespace + '*');
+var rtrim = RegExp(whitespace + whitespace + '*$');
+
+// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation
+var createMethod = function (TYPE) {
+  return function ($this) {
+    var string = toString(requireObjectCoercible($this));
+    if (TYPE & 1) string = replace(string, ltrim, '');
+    if (TYPE & 2) string = replace(string, rtrim, '');
+    return string;
+  };
+};
+
+var stringTrim = {
+  // `String.prototype.{ trimLeft, trimStart }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimstart
+  start: createMethod(1),
+  // `String.prototype.{ trimRight, trimEnd }` methods
+  // https://tc39.es/ecma262/#sec-string.prototype.trimend
+  end: createMethod(2),
+  // `String.prototype.trim` method
+  // https://tc39.es/ecma262/#sec-string.prototype.trim
+  trim: createMethod(3)
+};
+
+export { stringTrim as s, whitespaces$1 as w };

package/shared/text-anchor.js

@@ -0,0 +1,10 @@
+import { _ as __decorate, a as attr, b as __metadata } from './index.js';
+import { b as AffixIcon } from './affix.js';
+import { A as Anchor } from './anchor.js';
+import { a as applyMixins } from './apply-mixins.js';
+
+class TextAnchor extends Anchor {}
+__decorate([attr, __metadata("design:type", String)], TextAnchor.prototype, "text", void 0);
+applyMixins(TextAnchor, AffixIcon);
+
+export { TextAnchor as T };

package/shared/text-anchor.template.js

@@ -0,0 +1,55 @@
+import { a as affixIconTemplateFactory } from './affix.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { h as html } from './index.js';
+import { r as ref } from './ref.js';
+import { c as classNames } from './class-names.js';
+
+let _ = t => t,
+  _t;
+const getClasses = ({
+  text,
+  icon
+}) => classNames('control', ['icon-only', !text && !!icon]);
+const textAnchorTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`<a
+        class="${0}"
+        download="${0}"
+        href="${0}"
+        hreflang="${0}"
+        ping="${0}"
+        referrerpolicy="${0}"
+        rel="${0}"
+        target="${0}"
+        type="${0}"
+        aria-atomic="${0}"
+        aria-busy="${0}"
+        aria-controls="${0}"
+        aria-current="${0}"
+        aria-describedby="${0}"
+        aria-details="${0}"
+        aria-disabled="${0}"
+        aria-errormessage="${0}"
+        aria-expanded="${0}"
+        aria-flowto="${0}"
+        aria-haspopup="${0}"
+        aria-hidden="${0}"
+        aria-invalid="${0}"
+        aria-keyshortcuts="${0}"
+        aria-label="${0}"
+        aria-labelledby="${0}"
+        aria-live="${0}"
+        aria-owns="${0}"
+        aria-relevant="${0}"
+        aria-roledescription="${0}"
+        ${0}
+    >
+      ${0}
+      ${0}
+      ${0}
+    </a>
+`), getClasses, x => x.download, x => x.href, x => x.hreflang, x => x.ping, x => x.referrerpolicy, x => x.rel, x => x.target, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.text);
+};
+
+export { textAnchorTemplate as t };

package/shared/to-string.js

@@ -0,0 +1,51 @@
+import { w as wellKnownSymbol$2, c as classofRaw$1, i as isCallable$1 } from './export.js';
+
+var wellKnownSymbol$1 = wellKnownSymbol$2;
+
+var TO_STRING_TAG$1 = wellKnownSymbol$1('toStringTag');
+var test = {};
+
+test[TO_STRING_TAG$1] = 'z';
+
+var toStringTagSupport = String(test) === '[object z]';
+
+var TO_STRING_TAG_SUPPORT = toStringTagSupport;
+var isCallable = isCallable$1;
+var classofRaw = classofRaw$1;
+var wellKnownSymbol = wellKnownSymbol$2;
+
+var TO_STRING_TAG = wellKnownSymbol('toStringTag');
+var $Object = Object;
+
+// ES3 wrong here
+var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';
+
+// fallback for IE11 Script Access Denied error
+var tryGet = function (it, key) {
+  try {
+    return it[key];
+  } catch (error) { /* empty */ }
+};
+
+// getting tag from ES6+ `Object.prototype.toString`
+var classof$1 = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {
+  var O, tag, result;
+  return it === undefined ? 'Undefined' : it === null ? 'Null'
+    // @@toStringTag case
+    : typeof (tag = tryGet(O = $Object(it), TO_STRING_TAG)) == 'string' ? tag
+    // builtinTag case
+    : CORRECT_ARGUMENTS ? classofRaw(O)
+    // ES3 arguments fallback
+    : (result = classofRaw(O)) == 'Object' && isCallable(O.callee) ? 'Arguments' : result;
+};
+
+var classof = classof$1;
+
+var $String = String;
+
+var toString = function (argument) {
+  if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string');
+  return $String(argument);
+};
+
+export { classof$1 as c, toString as t };