@vonage/vivid 5.1.0 → 5.3.0

package/unbundled/delegates-aria.js

@@ -1,23 +1,38 @@
-import { Observable, DOM, AttachedBehaviorHTMLDirective } from '@microsoft/fast-element';
+import { oneWay, Observable, StatelessAttachedAttributeDirective, HTMLDirective } from '@microsoft/fast-element';
 import { A as AttributeBindingBehavior } from './attribute-binding-behaviour.js';
-import { a as ariaAttributeName, s as subscribeToAriaPropertyChanges, u as unsubscribeFromAriaPropertyChanges, b as ariaMixinProperties } from './vivid-element.js';
+import { a as ariaAttributeName, s as subscribeToAriaPropertyChanges, b as ariaMixinProperties } from './vivid-element.js';
 
 class DelegateAriaBehavior {
   constructor(target, params) {
-    this.target = target;
-    this.source = null;
+    this.target = null;
+    // unbind() {
+    // 	if (this.source === null) {
+    // 		return;
+    // 	}
+    // 	this.releasePropertyBindings(this.source);
+    // 	this.stopForwardingPropertiesToTarget(this.source);
+    // 	this.source = null;
+    // }
     this.bindingBehaviours = [];
+    // private stopForwardingPropertiesToTarget(source: DelegatesAriaElement) {
+    // 	unsubscribeFromAriaPropertyChanges(
+    // 		source as AriaMixinElement,
+    // 		this.onSourceAriaPropertyChanged
+    // 	);
+    // }
     this.onSourceAriaPropertyChanged = (source, property) => {
-      if (!this.forwardedProperties.has(property)) {
+      if (!this.forwardedProperties.has(property) || property in this.boundProperties) {
         return;
       }
       this.forwardPropertyToTarget(this.target, property, source[property]);
     };
+    this.target = target;
     this.boundProperties = params.boundProperties;
     this.forwardedProperties = params.forwardedProperties;
   }
-  bind(source) {
-    this.source = source;
+  // private source: DelegatesAriaElement | null = null;
+  bind(controller) {
+    const source = controller.source;
     this.bindPropertiesToTarget(source, this.boundProperties, this.target);
     this.startForwardingPropertiesToTarget(
       source,
@@ -25,63 +40,82 @@ class DelegateAriaBehavior {
       this.target
     );
   }
-  unbind() {
-    if (this.source === null) {
-      return;
-    }
-    this.releasePropertyBindings(this.source);
-    this.stopForwardingPropertiesToTarget(this.source);
-    this.source = null;
-  }
   bindPropertiesToTarget(source, boundProperties, target) {
     for (const [property, binding] of Object.entries(boundProperties)) {
       const bindingFn = binding instanceof Function ? binding : () => binding;
       this.bindingBehaviours.push(
         new AttributeBindingBehavior(
           target,
-          bindingFn,
+          oneWay(bindingFn),
           Observable.isVolatileBinding(bindingFn),
           ariaAttributeName(property)
         )
       );
     }
-    source.$fastController.addBehaviors(this.bindingBehaviours);
-  }
-  releasePropertyBindings(source) {
-    source.$fastController.removeBehaviors(this.bindingBehaviours);
-    this.bindingBehaviours = [];
+    for (const behavior of this.bindingBehaviours) {
+      behavior.bind({
+        source,
+        context: source.$fastController.context
+      });
+    }
   }
+  // private releasePropertyBindings(source: DelegatesAriaElement) {
+  // 	for (const behavior of this.bindingBehaviours) {
+  // 		(behavior as any).unbind(); // TODO: fix type
+  // 	}
+  // 	this.bindingBehaviours = [];
+  // }
   startForwardingPropertiesToTarget(source, delegatedProperties, target) {
     for (const key of delegatedProperties) {
-      this.forwardPropertyToTarget(target, key, source[key]);
+      if (!(key in this.boundProperties)) {
+        this.forwardPropertyToTarget(target, key, source[key]);
+      }
     }
-    subscribeToAriaPropertyChanges(source, this.onSourceAriaPropertyChanged);
-  }
-  stopForwardingPropertiesToTarget(source) {
-    unsubscribeFromAriaPropertyChanges(
+    subscribeToAriaPropertyChanges(
       source,
       this.onSourceAriaPropertyChanged
     );
   }
   forwardPropertyToTarget(target, property, value) {
-    DOM.setAttribute(target, ariaAttributeName(property), value);
+    if (value === null || value === void 0 || value === false) {
+      target.removeAttribute(ariaAttributeName(property));
+    } else {
+      target.setAttribute(ariaAttributeName(property), String(value));
+    }
   }
 }
 
+class DelegateAriaDirective extends StatelessAttachedAttributeDirective {
+  constructor(boundProperties, forwardedProperties) {
+    super("vvd-delegate-aria");
+    this.boundProperties = boundProperties;
+    this.forwardedProperties = forwardedProperties;
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    this.targetNodeId = "";
+  }
+  bind(controller) {
+    const targetElement = controller.targets[this.targetNodeId];
+    const behavior = new DelegateAriaBehavior(
+      targetElement,
+      // Pass the target element as target
+      {
+        boundProperties: this.boundProperties,
+        forwardedProperties: this.forwardedProperties
+      }
+    );
+    behavior.bind(controller);
+  }
+}
+HTMLDirective.define(DelegateAriaDirective);
 function delegateAria(boundProperties = {}, options = {}) {
   const forwardedProperties = new Set(
     (options.onlySpecified ? [] : ariaMixinProperties).filter(
       (p) => !(p in boundProperties)
     )
   );
-  return new AttachedBehaviorHTMLDirective(
-    "vvd-delegate-aria",
-    DelegateAriaBehavior,
-    {
-      boundProperties,
-      forwardedProperties
-    }
-  );
+  return new DelegateAriaDirective(boundProperties, forwardedProperties);
 }
 const DelegatesAria = (Base) => {
   class DelegatesAriaElement extends Base {

package/unbundled/form-associated.cjs

@@ -133,7 +133,7 @@ const FormAssociated = (Base) => {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.disabled = this.disabled;
       }
-      fastElement.DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+      fastElement.Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
     }
     /**
      * @internal
@@ -150,7 +150,7 @@ const FormAssociated = (Base) => {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.required = this.required;
       }
-      fastElement.DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+      fastElement.Updates.enqueue(() => this.classList.toggle("required", this.required));
       this.validate();
     }
     /**

package/unbundled/form-associated.js

@@ -1,4 +1,4 @@
-import { attr, emptyArray, DOM } from '@microsoft/fast-element';
+import { attr, emptyArray, Updates } from '@microsoft/fast-element';
 import { keyEnter } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;
@@ -131,7 +131,7 @@ const FormAssociated = (Base) => {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.disabled = this.disabled;
       }
-      DOM.queueUpdate(() => this.classList.toggle("disabled", this.disabled));
+      Updates.enqueue(() => this.classList.toggle("disabled", this.disabled));
     }
     /**
      * @internal
@@ -148,7 +148,7 @@ const FormAssociated = (Base) => {
       if (this.proxy instanceof HTMLElement) {
         this.proxy.required = this.required;
       }
-      DOM.queueUpdate(() => this.classList.toggle("required", this.required));
+      Updates.enqueue(() => this.classList.toggle("required", this.required));
       this.validate();
     }
     /**

package/unbundled/host-semantics.cjs

@@ -6,51 +6,76 @@ const attributeBindingBehaviour = require('./attribute-binding-behaviour.cjs');
 
 class HostSemanticsBehavior {
   constructor(target, params) {
-    this.target = target;
+    this.target = null;
+    // unbind(controller: ViewController) {
+    // 	const source = controller.source as HostSemanticsElement;
+    // 	this.releasePropertyBindings(source);
+    // }
     this.bindingBehaviours = [];
+    this.target = target;
     this.boundProperties = params.boundProperties;
   }
-  bind(source) {
+  bind(controller) {
+    const source = controller.source;
     if (this.target !== source) {
       throw new Error("Target element must be the same as the source element");
     }
     this.bindPropertiesToTarget(source, this.boundProperties, this.target);
   }
-  unbind(source) {
-    this.releasePropertyBindings(source);
-  }
   bindPropertiesToTarget(source, boundProperties, target) {
     for (const [property, binding] of Object.entries(boundProperties)) {
       const bindingFn = binding instanceof Function ? binding : (x) => x[property] ?? binding;
       this.bindingBehaviours.push(
         new attributeBindingBehaviour.AttributeBindingBehavior(
           target,
-          bindingFn,
+          fastElement.oneWay(bindingFn),
           true,
           vividElement.ariaAttributeName(property)
         )
       );
     }
-    source.$fastController.addBehaviors(this.bindingBehaviours);
-  }
-  releasePropertyBindings(source) {
-    source.$fastController.removeBehaviors(this.bindingBehaviours);
-    this.bindingBehaviours = [];
+    for (const behavior of this.bindingBehaviours) {
+      behavior.bind({
+        source,
+        context: source.$fastController.context
+      });
+    }
   }
+  // private releasePropertyBindings(source: HostSemanticsElement) {
+  // 	for (const behavior of this.bindingBehaviours) {
+  // 		(behavior as any).unbind();
+  // 	}
+  // 	this.bindingBehaviours = [];
+  // }
 }
 
+class HostSemanticsDirective extends fastElement.StatelessAttachedAttributeDirective {
+  constructor(boundProperties) {
+    super("vvd-host-semantics");
+    this.boundProperties = boundProperties;
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    this.targetNodeId = "";
+  }
+  bind(controller) {
+    const targetElement = controller.targets[this.targetNodeId];
+    const behavior = new HostSemanticsBehavior(
+      targetElement,
+      // Pass the target element as target
+      {
+        boundProperties: this.boundProperties,
+        forwardedProperties: new Set(
+          vividElement.ariaMixinProperties.filter((p) => !(p in this.boundProperties))
+        )
+      }
+    );
+    behavior.bind(controller);
+  }
+}
+fastElement.HTMLDirective.define(HostSemanticsDirective);
 function applyHostSemantics(boundProperties = {}) {
-  const forwardedProperties = new Set(
-    vividElement.ariaMixinProperties.filter((p) => !(p in boundProperties))
-  );
-  return new fastElement.AttachedBehaviorHTMLDirective(
-    "vvd-host-semantics",
-    HostSemanticsBehavior,
-    {
-      boundProperties,
-      forwardedProperties
-    }
-  );
+  return new HostSemanticsDirective(boundProperties);
 }
 const HostSemantics = (Base) => {
   class HostSemanticsElement extends Base {

package/unbundled/host-semantics.js

@@ -1,54 +1,79 @@
-import { AttachedBehaviorHTMLDirective } from '@microsoft/fast-element';
+import { oneWay, StatelessAttachedAttributeDirective, HTMLDirective } from '@microsoft/fast-element';
 import { a as ariaAttributeName, b as ariaMixinProperties } from './vivid-element.js';
 import { A as AttributeBindingBehavior } from './attribute-binding-behaviour.js';
 
 class HostSemanticsBehavior {
   constructor(target, params) {
-    this.target = target;
+    this.target = null;
+    // unbind(controller: ViewController) {
+    // 	const source = controller.source as HostSemanticsElement;
+    // 	this.releasePropertyBindings(source);
+    // }
     this.bindingBehaviours = [];
+    this.target = target;
     this.boundProperties = params.boundProperties;
   }
-  bind(source) {
+  bind(controller) {
+    const source = controller.source;
     if (this.target !== source) {
       throw new Error("Target element must be the same as the source element");
     }
     this.bindPropertiesToTarget(source, this.boundProperties, this.target);
   }
-  unbind(source) {
-    this.releasePropertyBindings(source);
-  }
   bindPropertiesToTarget(source, boundProperties, target) {
     for (const [property, binding] of Object.entries(boundProperties)) {
       const bindingFn = binding instanceof Function ? binding : (x) => x[property] ?? binding;
       this.bindingBehaviours.push(
         new AttributeBindingBehavior(
           target,
-          bindingFn,
+          oneWay(bindingFn),
           true,
           ariaAttributeName(property)
         )
       );
     }
-    source.$fastController.addBehaviors(this.bindingBehaviours);
-  }
-  releasePropertyBindings(source) {
-    source.$fastController.removeBehaviors(this.bindingBehaviours);
-    this.bindingBehaviours = [];
+    for (const behavior of this.bindingBehaviours) {
+      behavior.bind({
+        source,
+        context: source.$fastController.context
+      });
+    }
   }
+  // private releasePropertyBindings(source: HostSemanticsElement) {
+  // 	for (const behavior of this.bindingBehaviours) {
+  // 		(behavior as any).unbind();
+  // 	}
+  // 	this.bindingBehaviours = [];
+  // }
 }
 
+class HostSemanticsDirective extends StatelessAttachedAttributeDirective {
+  constructor(boundProperties) {
+    super("vvd-host-semantics");
+    this.boundProperties = boundProperties;
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    this.targetNodeId = "";
+  }
+  bind(controller) {
+    const targetElement = controller.targets[this.targetNodeId];
+    const behavior = new HostSemanticsBehavior(
+      targetElement,
+      // Pass the target element as target
+      {
+        boundProperties: this.boundProperties,
+        forwardedProperties: new Set(
+          ariaMixinProperties.filter((p) => !(p in this.boundProperties))
+        )
+      }
+    );
+    behavior.bind(controller);
+  }
+}
+HTMLDirective.define(HostSemanticsDirective);
 function applyHostSemantics(boundProperties = {}) {
-  const forwardedProperties = new Set(
-    ariaMixinProperties.filter((p) => !(p in boundProperties))
-  );
-  return new AttachedBehaviorHTMLDirective(
-    "vvd-host-semantics",
-    HostSemanticsBehavior,
-    {
-      boundProperties,
-      forwardedProperties
-    }
-  );
+  return new HostSemanticsDirective(boundProperties);
 }
 const HostSemantics = (Base) => {
   class HostSemanticsElement extends Base {

package/unbundled/mixins.cjs

@@ -64,35 +64,39 @@ const feedbackMessageDefinition = vividElement.defineVividComponent(
 );
 
 class RenderInLightDomBehaviour {
-  constructor(templateBinding, isTemplateBindingVolatile) {
+  constructor(directive) {
     this.source = null;
-    this.templateBindingObserver = fastElement.Observable.binding(
-      templateBinding,
+    this.templateBindingObserver = directive.templateBinding.createObserver(
       this,
-      isTemplateBindingVolatile
+      directive
     );
   }
-  bind(source, context) {
-    this.source = source;
-    this.context = context;
+  bind(controller) {
+    this.source = controller.source;
+    this.context = controller.context;
+    this.controller = controller;
     if (!this.insertionPoint) {
       this.insertionPoint = document.createComment("");
-      source.appendChild(this.insertionPoint);
+      this.source.appendChild(this.insertionPoint);
     }
-    this.handleChange();
-  }
-  unbind() {
-    this.source = null;
-    this.view.unbind();
-    this.templateBindingObserver.disconnect();
+    this.templateBindingObserver.bind(controller);
+    this.handleChange(this.source, this.templateBindingObserver);
   }
+  // unbind(): void {
+  // 	this.source = null;
+  // 	if (this.view) {
+  // 		this.view.unbind();
+  // 	}
+  // 	// The observer will be automatically cleaned up when the behavior is destroyed
+  // }
   /**
    * Handles change of the template itself.
    */
-  handleChange() {
-    this.instantiateTemplate(
-      this.templateBindingObserver.observe(this.source, this.context)
-    );
+  handleChange(source, args) {
+    if (args === this.templateBindingObserver) {
+      const template = this.templateBindingObserver.bind(this.controller);
+      this.instantiateTemplate(template);
+    }
   }
   instantiateTemplate(template) {
     if (this.view) {
@@ -103,22 +107,25 @@ class RenderInLightDomBehaviour {
     this.view.insertBefore(this.insertionPoint);
   }
 }
-class RenderInLightDomDirective extends fastElement.HTMLDirective {
+class RenderInLightDomDirective {
   constructor(templateBinding) {
-    super();
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    this.targetNodeId = "";
     this.templateBinding = templateBinding;
-    this.createPlaceholder = fastElement.DOM.createBlockPlaceholder;
-    this.isTemplateBindingVolatile = fastElement.Observable.isVolatileBinding(templateBinding);
+    this.dataBinding = templateBinding;
+  }
+  createHTML(add) {
+    return fastElement.Markup.comment(add(this));
   }
   createBehavior() {
-    return new RenderInLightDomBehaviour(
-      this.templateBinding,
-      this.isTemplateBindingVolatile
-    );
+    return new RenderInLightDomBehaviour(this);
   }
 }
+fastElement.HTMLDirective.define(RenderInLightDomDirective);
 function renderInLightDOM(templateOrTemplateBinding) {
-  const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
+  const templateBinding = fastElement.normalizeBinding(templateOrTemplateBinding);
   return new RenderInLightDomDirective(templateBinding);
 }
 

package/unbundled/mixins.js

@@ -1,4 +1,4 @@
-import { html, when, attr, HTMLDirective, DOM, Observable, observable, slotted } from '@microsoft/fast-element';
+import { html, when, attr, normalizeBinding, Markup, HTMLDirective, observable, slotted } from '@microsoft/fast-element';
 import { v4 } from 'uuid';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { iconDefinition, VwcIconElement as Icon } from '../icon/definition.js';
@@ -62,35 +62,39 @@ const feedbackMessageDefinition = defineVividComponent(
 );
 
 class RenderInLightDomBehaviour {
-  constructor(templateBinding, isTemplateBindingVolatile) {
+  constructor(directive) {
     this.source = null;
-    this.templateBindingObserver = Observable.binding(
-      templateBinding,
+    this.templateBindingObserver = directive.templateBinding.createObserver(
       this,
-      isTemplateBindingVolatile
+      directive
     );
   }
-  bind(source, context) {
-    this.source = source;
-    this.context = context;
+  bind(controller) {
+    this.source = controller.source;
+    this.context = controller.context;
+    this.controller = controller;
     if (!this.insertionPoint) {
       this.insertionPoint = document.createComment("");
-      source.appendChild(this.insertionPoint);
+      this.source.appendChild(this.insertionPoint);
     }
-    this.handleChange();
-  }
-  unbind() {
-    this.source = null;
-    this.view.unbind();
-    this.templateBindingObserver.disconnect();
+    this.templateBindingObserver.bind(controller);
+    this.handleChange(this.source, this.templateBindingObserver);
   }
+  // unbind(): void {
+  // 	this.source = null;
+  // 	if (this.view) {
+  // 		this.view.unbind();
+  // 	}
+  // 	// The observer will be automatically cleaned up when the behavior is destroyed
+  // }
   /**
    * Handles change of the template itself.
    */
-  handleChange() {
-    this.instantiateTemplate(
-      this.templateBindingObserver.observe(this.source, this.context)
-    );
+  handleChange(source, args) {
+    if (args === this.templateBindingObserver) {
+      const template = this.templateBindingObserver.bind(this.controller);
+      this.instantiateTemplate(template);
+    }
   }
   instantiateTemplate(template) {
     if (this.view) {
@@ -101,22 +105,25 @@ class RenderInLightDomBehaviour {
     this.view.insertBefore(this.insertionPoint);
   }
 }
-class RenderInLightDomDirective extends HTMLDirective {
+class RenderInLightDomDirective {
   constructor(templateBinding) {
-    super();
+    /**
+     * The structural id of the DOM node to which the created behavior will apply.
+     */
+    this.targetNodeId = "";
     this.templateBinding = templateBinding;
-    this.createPlaceholder = DOM.createBlockPlaceholder;
-    this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
+    this.dataBinding = templateBinding;
+  }
+  createHTML(add) {
+    return Markup.comment(add(this));
   }
   createBehavior() {
-    return new RenderInLightDomBehaviour(
-      this.templateBinding,
-      this.isTemplateBindingVolatile
-    );
+    return new RenderInLightDomBehaviour(this);
   }
 }
+HTMLDirective.define(RenderInLightDomDirective);
 function renderInLightDOM(templateOrTemplateBinding) {
-  const templateBinding = typeof templateOrTemplateBinding === "function" ? templateOrTemplateBinding : () => templateOrTemplateBinding;
+  const templateBinding = normalizeBinding(templateOrTemplateBinding);
   return new RenderInLightDomDirective(templateBinding);
 }
 

package/unbundled/picker-field.template.cjs

@@ -5,6 +5,7 @@ const index = require('./index.cjs');
 const mixins = require('./mixins.cjs');
 const formAssociated = require('./form-associated.cjs');
 const vividElement = require('./vivid-element.cjs');
+const withContextualHelp = require('./with-contextual-help.cjs');
 const withErrorText = require('./with-error-text.cjs');
 const formElement = require('./form-element.cjs');
 const localized = require('./localized.cjs');
@@ -57,9 +58,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class PickerField extends mixins.WithFeedback(
-  withErrorText.WithErrorText(
-    formElement.FormElement(TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+class PickerField extends withContextualHelp.WithContextualHelp(
+  mixins.WithFeedback(
+    withErrorText.WithErrorText(
+      formElement.FormElement(TrappedFocus(localized.Localized(formAssociated.FormAssociated(vividElement.VividElement))))
+    )
   )
 ) {
   // --- Core ---
@@ -143,10 +146,10 @@ class PickerField extends mixins.WithFeedback(
       () => this.locale,
       this.#localeChangeHandler
     );
-    this.#localeChangeObserver.observe(this, fastElement.defaultExecutionContext);
+    this.#localeChangeObserver.observe(this, fastElement.ExecutionContext.default);
   }
   #stopObservingLocaleChanges() {
-    this.#localeChangeObserver.disconnect();
+    this.#localeChangeObserver.dispose();
   }
   #dismissOnClickOutside;
   #openPopupIfPossible() {
@@ -250,6 +253,11 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 					name='helper-text'
 					${fastElement.slotted("_helperTextSlottedContent")}
 				></slot>
+				<slot
+					slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
+					name='contextual-help'
+					${fastElement.slotted("_contextualHelpSlottedContent")}
+				></slot>
 				<${buttonTag}
 					id='picker-button'
 					${fastElement.ref("_pickerButtonEl")}