@microsoft/fast-element 2.0.0-beta.22 → 2.0.0-beta.24

package/dist/fast-element.api.json

@@ -4183,7 +4183,7 @@
             },
             {
               "kind": "Content",
-              "text": "typeof "
+              "text": "(typeof "
             },
             {
               "kind": "Reference",
@@ -4192,7 +4192,7 @@
             },
             {
               "kind": "Content",
-              "text": "["
+              "text": ")["
             },
             {
               "kind": "Reference",
@@ -12645,6 +12645,128 @@
           },
           "implementsTokenRanges": []
         },
+        {
+          "kind": "Function",
+          "canonicalReference": "@microsoft/fast-element!normalizeBinding:function(1)",
+          "docComment": "/**\n * Normalizes the input value into a binding.\n *\n * @param value - The value to create the default binding for.\n *\n * @returns A binding configuration for the provided value.\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare function normalizeBinding<TSource = "
+            },
+            {
+              "kind": "Content",
+              "text": "any"
+            },
+            {
+              "kind": "Content",
+              "text": ", TReturn = "
+            },
+            {
+              "kind": "Content",
+              "text": "any"
+            },
+            {
+              "kind": "Content",
+              "text": ", TParent = "
+            },
+            {
+              "kind": "Content",
+              "text": "any"
+            },
+            {
+              "kind": "Content",
+              "text": ">(value: "
+            },
+            {
+              "kind": "Reference",
+              "text": "Expression",
+              "canonicalReference": "@microsoft/fast-element!Expression:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, TReturn, TParent> | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Binding",
+              "canonicalReference": "@microsoft/fast-element!Binding:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, TReturn, TParent> | {}"
+            },
+            {
+              "kind": "Content",
+              "text": "): "
+            },
+            {
+              "kind": "Reference",
+              "text": "Binding",
+              "canonicalReference": "@microsoft/fast-element!Binding:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, TReturn, TParent>"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "returnTypeTokenRange": {
+            "startIndex": 12,
+            "endIndex": 14
+          },
+          "releaseTag": "Public",
+          "overloadIndex": 1,
+          "parameters": [
+            {
+              "parameterName": "value",
+              "parameterTypeTokenRange": {
+                "startIndex": 7,
+                "endIndex": 11
+              },
+              "isOptional": false
+            }
+          ],
+          "typeParameters": [
+            {
+              "typeParameterName": "TSource",
+              "constraintTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              }
+            },
+            {
+              "typeParameterName": "TReturn",
+              "constraintTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 3,
+                "endIndex": 4
+              }
+            },
+            {
+              "typeParameterName": "TParent",
+              "constraintTokenRange": {
+                "startIndex": 0,
+                "endIndex": 0
+              },
+              "defaultTypeTokenRange": {
+                "startIndex": 5,
+                "endIndex": 6
+              }
+            }
+          ],
+          "name": "normalizeBinding"
+        },
         {
           "kind": "Interface",
           "canonicalReference": "@microsoft/fast-element!Notifier:interface",
@@ -15387,7 +15509,7 @@
             },
             {
               "kind": "Content",
-              "text": "typeof "
+              "text": "(typeof "
             },
             {
               "kind": "Reference",
@@ -15396,7 +15518,7 @@
             },
             {
               "kind": "Content",
-              "text": "[keyof typeof "
+              "text": ")[keyof typeof "
             },
             {
               "kind": "Reference",
@@ -16560,7 +16682,7 @@
             },
             {
               "kind": "Content",
-              "text": "typeof "
+              "text": "(typeof "
             },
             {
               "kind": "Reference",
@@ -16569,7 +16691,7 @@
             },
             {
               "kind": "Content",
-              "text": "[keyof typeof "
+              "text": ")[keyof typeof "
             },
             {
               "kind": "Reference",
@@ -19766,7 +19888,7 @@
         {
           "kind": "Function",
           "canonicalReference": "@microsoft/fast-element!when:function(1)",
-          "docComment": "/**\n * A directive that enables basic conditional rendering in a template.\n *\n * @param condition - The condition to test for rendering.\n *\n * @param templateOrTemplateBinding - The template or a binding that gets the template to render when the condition is true.\n *\n * @public\n */\n",
+          "docComment": "/**\n * A directive that enables basic conditional rendering in a template.\n *\n * @param condition - The condition to test for rendering.\n *\n * @param templateOrTemplateBinding - The template or a binding that gets the template to render when the condition is true.\n *\n * @param elseTemplateOrTemplateBinding - Optional template or binding that that gets the template to render when the conditional is false.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -19836,6 +19958,37 @@
               "kind": "Content",
               "text": "<TSource, TParent>, TParent>"
             },
+            {
+              "kind": "Content",
+              "text": ", elseTemplateOrTemplateBinding?: "
+            },
+            {
+              "kind": "Reference",
+              "text": "SyntheticViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!SyntheticViewTemplate:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, TParent> | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Expression",
+              "canonicalReference": "@microsoft/fast-element!Expression:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, "
+            },
+            {
+              "kind": "Reference",
+              "text": "SyntheticViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!SyntheticViewTemplate:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<TSource, TParent>, TParent>"
+            },
             {
               "kind": "Content",
               "text": "): "
@@ -19855,8 +20008,8 @@
             }
           ],
           "returnTypeTokenRange": {
-            "startIndex": 17,
-            "endIndex": 19
+            "startIndex": 24,
+            "endIndex": 26
           },
           "releaseTag": "Public",
           "overloadIndex": 1,
@@ -19876,6 +20029,14 @@
                 "endIndex": 16
               },
               "isOptional": false
+            },
+            {
+              "parameterName": "elseTemplateOrTemplateBinding",
+              "parameterTypeTokenRange": {
+                "startIndex": 17,
+                "endIndex": 23
+              },
+              "isOptional": true
             }
           ],
           "typeParameters": [

package/dist/fast-element.d.ts

@@ -713,7 +713,7 @@ export declare const DOMAspect: Readonly<{
  * The type of HTML aspect to target.
  * @public
  */
-export declare type DOMAspect = typeof DOMAspect[Exclude<keyof typeof DOMAspect, "none">];
+export declare type DOMAspect = (typeof DOMAspect)[Exclude<keyof typeof DOMAspect, "none">];
 
 /**
  * A security policy that FAST can use to interact with the DOM.
@@ -1875,6 +1875,14 @@ export declare abstract class NodeObservationDirective<T extends NodeBehaviorOpt
     protected abstract getNodes(target: any): Node[];
 }
 
+/**
+ * Normalizes the input value into a binding.
+ * @param value - The value to create the default binding for.
+ * @returns A binding configuration for the provided value.
+ * @public
+ */
+export declare function normalizeBinding<TSource = any, TReturn = any, TParent = any>(value: Expression<TSource, TReturn, TParent> | Binding<TSource, TReturn, TParent> | {}): Binding<TSource, TReturn, TParent>;
+
 /**
  * Provides change notifications for an observed subject.
  * @public
@@ -2326,7 +2334,7 @@ export declare const SourceLifetime: Readonly<{
  * Describes how the source's lifetime relates to its controller's lifetime.
  * @public
  */
-export declare type SourceLifetime = typeof SourceLifetime[keyof typeof SourceLifetime];
+export declare type SourceLifetime = (typeof SourceLifetime)[keyof typeof SourceLifetime];
 
 /**
  * A splice map is a representation of how a previous array of items
@@ -2478,7 +2486,7 @@ export declare const SpliceStrategySupport: Readonly<{
  * The available values for SpliceStrategySupport.
  * @public
  */
-export declare type SpliceStrategySupport = typeof SpliceStrategySupport[keyof typeof SpliceStrategySupport];
+export declare type SpliceStrategySupport = (typeof SpliceStrategySupport)[keyof typeof SpliceStrategySupport];
 
 /**
  * A base class used for attribute directives that don't need internal state.
@@ -2913,8 +2921,10 @@ export declare function volatile(target: {}, name: string | Accessor, descriptor
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;
+export declare function when<TSource = any, TReturn = any, TParent = any>(condition: Expression<TSource, TReturn, TParent> | boolean, templateOrTemplateBinding: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>, elseTemplateOrTemplateBinding?: SyntheticViewTemplate<TSource, TParent> | Expression<TSource, SyntheticViewTemplate<TSource, TParent>, TParent>): CaptureType<TSource, TParent>;
 
 export { }

package/dist/fast-element.debug.js

@@ -1890,6 +1890,20 @@ function oneTime(expression, policy) {
     return new OneTimeBinding(expression, policy);
 }
 
+/**
+ * Normalizes the input value into a binding.
+ * @param value - The value to create the default binding for.
+ * @returns A binding configuration for the provided value.
+ * @public
+ */
+function normalizeBinding$1(value) {
+    return isFunction(value)
+        ? oneWay(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
+}
+
 let DefaultStyleStrategy;
 function reduceStyles(styles) {
     return styles
@@ -3000,6 +3014,9 @@ const Compiler = {
         else {
             template = html;
         }
+        if (!template.content.firstChild && !template.content.lastChild) {
+            template.content.appendChild(document.createComment(""));
+        }
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
         const fragment = document.adoptNode(template.content);
         const context = new CompilationContext(fragment, factories, policy);
@@ -3261,33 +3278,26 @@ HTMLDirective.define(RefDirective);
  */
 const ref = (propertyName) => new RefDirective(propertyName);
 
+const noTemplate = () => null;
+function normalizeBinding(value) {
+    return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
+}
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-function when(condition, templateOrTemplateBinding) {
+function when(condition, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
     const dataBinding = isFunction(condition) ? condition : () => condition;
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
-}
-
-/**
- * Normalizes the input value into a binding.
- * @param value - The value to create the default binding for.
- * @returns A binding configuration for the provided value.
- * @public
- */
-function normalizeBinding(value) {
-    return isFunction(value)
-        ? oneWay(value)
-        : value instanceof Binding
-            ? value
-            : oneTime(() => value);
+    const templateBinding = normalizeBinding(templateOrTemplateBinding);
+    const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
+    return (source, context) => dataBinding(source, context)
+        ? templateBinding(source, context)
+        : elseBinding(source, context);
 }
 
 const defaultRepeatOptions = Object.freeze({
@@ -3545,8 +3555,8 @@ HTMLDirective.define(RepeatDirective);
  * @public
  */
 function repeat(items, template, options = defaultRepeatOptions) {
-    const dataBinding = normalizeBinding(items);
-    const templateBinding = normalizeBinding(template);
+    const dataBinding = normalizeBinding$1(items);
+    const templateBinding = normalizeBinding$1(template);
     return new RepeatDirective(dataBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }
 
@@ -3691,7 +3701,7 @@ class ChildrenDirective extends NodeObservationDirective {
      */
     constructor(options) {
         super(options);
-        this.observerProperty = `${this.id}-o`;
+        this.observerProperty = Symbol();
         this.handleEvent = (mutations, observer) => {
             const target = observer.target;
             this.updateTarget(this.getSource(target), this.computeNodes(target));
@@ -3707,9 +3717,9 @@ class ChildrenDirective extends NodeObservationDirective {
         if (!observer) {
             observer = new MutationObserver(this.handleEvent);
             observer.toJSON = noop;
-            observer.target = target;
             target[this.observerProperty] = observer;
         }
+        observer.target = target;
         observer.observe(target, this.options);
     }
     /**
@@ -4335,7 +4345,7 @@ class ElementController extends PropertyChangeNotifier {
             styles.removeStylesFrom(source);
             if (sourceBehaviors !== null) {
                 for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
-                    this.addBehavior(sourceBehaviors[i]);
+                    this.removeBehavior(sourceBehaviors[i]);
                 }
             }
         }
@@ -4523,13 +4533,10 @@ class AdoptedStyleSheetsStrategy {
         });
     }
     addStylesTo(target) {
-        const t = normalizeStyleTarget(target);
-        t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+        addAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
     }
     removeStylesFrom(target) {
-        const t = normalizeStyleTarget(target);
-        const sheets = this.sheets;
-        t.adoptedStyleSheets = t.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+        removeAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
     }
 }
 AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
@@ -4565,9 +4572,42 @@ class StyleElementStrategy {
         }
     }
 }
-ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets
-    ? AdoptedStyleSheetsStrategy
-    : StyleElementStrategy);
+let addAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];
+};
+let removeAdoptedStyleSheets = (target, sheets) => {
+    target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+};
+if (ElementStyles.supportsAdoptedStyleSheets) {
+    try {
+        // Test if browser implementation uses FrozenArray.
+        // If not, use push / splice to alter the stylesheets
+        // in place. This circumvents a bug in Safari 16.4 where
+        // periodically, assigning the array would previously
+        // cause sheets to be removed.
+        document.adoptedStyleSheets.push();
+        document.adoptedStyleSheets.splice();
+        addAdoptedStyleSheets = (target, sheets) => {
+            target.adoptedStyleSheets.push(...sheets);
+        };
+        removeAdoptedStyleSheets = (target, sheets) => {
+            for (const sheet of sheets) {
+                const index = target.adoptedStyleSheets.indexOf(sheet);
+                if (index !== -1) {
+                    target.adoptedStyleSheets.splice(index, 1);
+                }
+            }
+        };
+    }
+    catch (e) {
+        // Do nothing if an error is thrown, the default
+        // case handles FrozenArray.
+    }
+    ElementStyles.setDefaultStrategy(AdoptedStyleSheetsStrategy);
+}
+else {
+    ElementStyles.setDefaultStrategy(StyleElementStrategy);
+}
 
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
@@ -4648,4 +4688,4 @@ function customElement(nameOrDef) {
 
 DOM.setPolicy(DOMPolicy.create());
 
-export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSBindingDirective, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, booleanConverter, children, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, oneWay, ref, repeat, slotted, volatile, when };
+export { ArrayObserver, AttributeConfiguration, AttributeDefinition, Binding, CSSBindingDirective, CSSDirective, ChildrenDirective, Compiler, DOM, DOMAspect, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, InlineTemplateDirective, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, booleanConverter, children, css, cssDirective, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding$1 as normalizeBinding, nullableBooleanConverter, nullableNumberConverter, observable, oneTime, oneWay, ref, repeat, slotted, volatile, when };