@vonage/vivid 3.0.0-next.9 → 3.0.0-next.91

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

@@ -1,4 +1,4 @@
-import { O as Observable, e as emptyArray, A as AttachedBehaviorHTMLDirective } from './index.js';
+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.

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/text-anchor.js

@@ -1,21 +1,10 @@
-import './web.dom-collections.iterator.js';
 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 {
-  constructor() {
-    super(...arguments);
-    this.text = '';
-  }
-
-}
-
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], TextAnchor.prototype, "text", void 0);
-
+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

@@ -1,18 +1,18 @@
 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 './aria-global.js';
+import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
 let _ = t => 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}"
@@ -47,8 +47,9 @@ const textAnchorTemplate = context => {
     >
       ${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'), x => affixIconTemplate(x.icon), x => x.text);
+`), 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 };