@vonage/vivid 5.2.0 → 5.4.0

package/unbundled/definition6.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+const vividElement = require('./vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Elevation extends vividElement.VividElement {
+}
+__decorateClass([
+  fastElement.attr
+], Elevation.prototype, "dp");
+__decorateClass([
+  fastElement.attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow");
+__decorateClass([
+  fastElement.attr({ attribute: "not-relative", mode: "boolean" })
+], Elevation.prototype, "notRelative");
+
+const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
+
+const getClasses = ({ dp, noShadow, notRelative }) => fastWebUtilities.classNames(
+  "control",
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)],
+  ["not-relative", Boolean(notRelative)]
+);
+const elevationTemplate = fastElement.html` <div
+	class="${getClasses}"
+	part="base"
+>
+	<slot></slot>
+</div>`;
+
+const elevationDefinition = vividElement.defineVividComponent(
+  "elevation",
+  Elevation,
+  elevationTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerElevation = vividElement.createRegisterFunction(elevationDefinition);
+
+exports.Elevation = Elevation;
+exports.elevationDefinition = elevationDefinition;
+exports.registerElevation = registerElevation;

package/unbundled/definition6.js

@@ -0,0 +1,52 @@
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
+import { attr, html } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Elevation extends VividElement {
+}
+__decorateClass([
+  attr
+], Elevation.prototype, "dp");
+__decorateClass([
+  attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow");
+__decorateClass([
+  attr({ attribute: "not-relative", mode: "boolean" })
+], Elevation.prototype, "notRelative");
+
+const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
+
+const getClasses = ({ dp, noShadow, notRelative }) => classNames(
+  "control",
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)],
+  ["not-relative", Boolean(notRelative)]
+);
+const elevationTemplate = html` <div
+	class="${getClasses}"
+	part="base"
+>
+	<slot></slot>
+</div>`;
+
+const elevationDefinition = defineVividComponent(
+  "elevation",
+  Elevation,
+  elevationTemplate,
+  [],
+  {
+    styles
+  }
+);
+const registerElevation = createRegisterFunction(elevationDefinition);
+
+export { Elevation as E, elevationDefinition as e, registerElevation as r };

package/unbundled/delegates-aria.cjs

@@ -6,20 +6,35 @@ const vividElement = require('./vivid-element.cjs');
 
 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,
@@ -27,63 +42,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 attributeBindingBehaviour.AttributeBindingBehavior(
           target,
-          bindingFn,
+          fastElement.oneWay(bindingFn),
           fastElement.Observable.isVolatileBinding(bindingFn),
           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: 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]);
+      }
     }
-    vividElement.subscribeToAriaPropertyChanges(source, this.onSourceAriaPropertyChanged);
-  }
-  stopForwardingPropertiesToTarget(source) {
-    vividElement.unsubscribeFromAriaPropertyChanges(
+    vividElement.subscribeToAriaPropertyChanges(
       source,
       this.onSourceAriaPropertyChanged
     );
   }
   forwardPropertyToTarget(target, property, value) {
-    fastElement.DOM.setAttribute(target, vividElement.ariaAttributeName(property), value);
+    if (value === null || value === void 0 || value === false) {
+      target.removeAttribute(vividElement.ariaAttributeName(property));
+    } else {
+      target.setAttribute(vividElement.ariaAttributeName(property), String(value));
+    }
   }
 }
 
+class DelegateAriaDirective extends fastElement.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);
+  }
+}
+fastElement.HTMLDirective.define(DelegateAriaDirective);
 function delegateAria(boundProperties = {}, options = {}) {
   const forwardedProperties = new Set(
     (options.onlySpecified ? [] : vividElement.ariaMixinProperties).filter(
       (p) => !(p in boundProperties)
     )
   );
-  return new fastElement.AttachedBehaviorHTMLDirective(
-    "vvd-delegate-aria",
-    DelegateAriaBehavior,
-    {
-      boundProperties,
-      forwardedProperties
-    }
-  );
+  return new DelegateAriaDirective(boundProperties, forwardedProperties);
 }
 const DelegatesAria = (Base) => {
   class DelegatesAriaElement extends Base {

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 {