@microsoft/fast-element 2.9.1 → 2.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.json +15 -0
  2. package/CHANGELOG.md +9 -1
  3. package/dist/context/context.api.json +7 -7
  4. package/dist/di/di.api.json +12 -12
  5. package/dist/dts/binding/two-way.d.ts +1 -1
  6. package/dist/dts/components/attributes.d.ts +3 -3
  7. package/dist/dts/components/fast-definitions.d.ts +1 -1
  8. package/dist/dts/context.d.ts +7 -7
  9. package/dist/dts/di/di.d.ts +13 -13
  10. package/dist/dts/dom-policy.d.ts +5 -5
  11. package/dist/dts/dom.d.ts +2 -2
  12. package/dist/dts/interfaces.d.ts +7 -7
  13. package/dist/dts/observation/arrays.d.ts +1 -1
  14. package/dist/dts/observation/observable.d.ts +2 -2
  15. package/dist/dts/state/state.d.ts +9 -9
  16. package/dist/dts/styles/css-binding-directive.d.ts +1 -1
  17. package/dist/dts/styles/css-directive.d.ts +1 -1
  18. package/dist/dts/styles/css.d.ts +2 -2
  19. package/dist/dts/styles/element-styles.d.ts +2 -2
  20. package/dist/dts/templating/children.d.ts +1 -1
  21. package/dist/dts/templating/compiler.d.ts +1 -1
  22. package/dist/dts/templating/html-directive.d.ts +3 -3
  23. package/dist/dts/templating/node-observation.d.ts +1 -1
  24. package/dist/dts/templating/render.d.ts +6 -6
  25. package/dist/dts/templating/template.d.ts +2 -2
  26. package/dist/esm/components/element-controller.js +84 -84
  27. package/dist/esm/components/fast-definitions.js +15 -15
  28. package/dist/esm/di/di.js +12 -12
  29. package/dist/esm/observation/arrays.js +12 -12
  30. package/dist/esm/styles/element-styles.js +9 -9
  31. package/dist/esm/templating/repeat.js +7 -7
  32. package/dist/esm/templating/view.js +9 -9
  33. package/dist/fast-element.api.json +26 -26
  34. package/dist/fast-element.d.ts +4 -4
  35. package/dist/fast-element.debug.js +141 -139
  36. package/dist/fast-element.debug.min.js +2 -2
  37. package/dist/fast-element.js +141 -139
  38. package/dist/fast-element.min.js +2 -2
  39. package/docs/di/api-report.api.md +4 -4
  40. package/karma.conf.cjs +13 -7
  41. package/package.json +3 -44
@@ -1691,18 +1691,6 @@ function setNonEnumerable(target, property, value, writable = true) {
1691
1691
  });
1692
1692
  }
1693
1693
  class DefaultArrayObserver extends SubscriberSet {
1694
- constructor(subject) {
1695
- super(subject);
1696
- this.oldCollection = void 0;
1697
- this.splices = void 0;
1698
- this.sorts = void 0;
1699
- this.needsQueue = true;
1700
- this._strategy = null;
1701
- this._lengthObserver = void 0;
1702
- this._sortObserver = void 0;
1703
- this.call = this.flush;
1704
- setNonEnumerable(subject, "$fastController", this);
1705
- }
1706
1694
  get strategy() {
1707
1695
  return this._strategy;
1708
1696
  }
@@ -1743,6 +1731,18 @@ class DefaultArrayObserver extends SubscriberSet {
1743
1731
  }
1744
1732
  return observer;
1745
1733
  }
1734
+ constructor(subject) {
1735
+ super(subject);
1736
+ this.oldCollection = void 0;
1737
+ this.splices = void 0;
1738
+ this.sorts = void 0;
1739
+ this.needsQueue = true;
1740
+ this._strategy = null;
1741
+ this._lengthObserver = void 0;
1742
+ this._sortObserver = void 0;
1743
+ this.call = this.flush;
1744
+ setNonEnumerable(subject, "$fastController", this);
1745
+ }
1746
1746
  subscribe(subscriber) {
1747
1747
  this.flush();
1748
1748
  super.subscribe(subscriber);
@@ -1966,6 +1966,15 @@ function reduceStyles(styles) {
1966
1966
  * @public
1967
1967
  */
1968
1968
  class ElementStyles {
1969
+ /**
1970
+ * Gets the StyleStrategy associated with these element styles.
1971
+ */
1972
+ get strategy() {
1973
+ if (this._strategy === null) {
1974
+ this.withStrategy(DefaultStyleStrategy);
1975
+ }
1976
+ return this._strategy;
1977
+ }
1969
1978
  /**
1970
1979
  * Creates an instance of ElementStyles.
1971
1980
  * @param styles - The styles that will be associated with elements.
@@ -1978,15 +1987,6 @@ class ElementStyles {
1978
1987
  .map((x) => x instanceof ElementStyles ? x.behaviors : null)
1979
1988
  .reduce((prev, curr) => (curr === null ? prev : prev === null ? curr : prev.concat(curr)), null);
1980
1989
  }
1981
- /**
1982
- * Gets the StyleStrategy associated with these element styles.
1983
- */
1984
- get strategy() {
1985
- if (this._strategy === null) {
1986
- this.withStrategy(DefaultStyleStrategy);
1987
- }
1988
- return this._strategy;
1989
- }
1990
1990
  /** @internal */
1991
1991
  addStylesTo(target) {
1992
1992
  this.strategy.addStylesTo(target);
@@ -2795,7 +2795,7 @@ function targetFactory(factory, node, targets) {
2795
2795
  targets[factory.targetNodeId] = node;
2796
2796
  }
2797
2797
 
2798
- var _a;
2798
+ var _a$1;
2799
2799
  function removeNodeSequence(firstNode, lastNode) {
2800
2800
  const parent = firstNode.parentNode;
2801
2801
  let current = firstNode;
@@ -3071,13 +3071,22 @@ class HydrationBindingError extends Error {
3071
3071
  }
3072
3072
  }
3073
3073
  class HydrationView extends DefaultExecutionContext {
3074
+ get hydrationStage() {
3075
+ return this._hydrationStage;
3076
+ }
3077
+ get targets() {
3078
+ return this._targets;
3079
+ }
3080
+ get bindingViewBoundaries() {
3081
+ return this._bindingViewBoundaries;
3082
+ }
3074
3083
  constructor(firstChild, lastChild, sourceTemplate, hostBindingTarget) {
3075
3084
  super();
3076
3085
  this.firstChild = firstChild;
3077
3086
  this.lastChild = lastChild;
3078
3087
  this.sourceTemplate = sourceTemplate;
3079
3088
  this.hostBindingTarget = hostBindingTarget;
3080
- this[_a] = Hydratable;
3089
+ this[_a$1] = Hydratable;
3081
3090
  this.context = this;
3082
3091
  this.source = null;
3083
3092
  this.isBound = false;
@@ -3090,15 +3099,6 @@ class HydrationView extends DefaultExecutionContext {
3090
3099
  this._targets = {};
3091
3100
  this.factories = sourceTemplate.compile().factories;
3092
3101
  }
3093
- get hydrationStage() {
3094
- return this._hydrationStage;
3095
- }
3096
- get targets() {
3097
- return this._targets;
3098
- }
3099
- get bindingViewBoundaries() {
3100
- return this._bindingViewBoundaries;
3101
- }
3102
3102
  /**
3103
3103
  * no-op. Hydrated views are don't need to be moved from a documentFragment
3104
3104
  * to the target node.
@@ -3264,7 +3264,7 @@ class HydrationView extends DefaultExecutionContext {
3264
3264
  unbindables.length = 0;
3265
3265
  }
3266
3266
  }
3267
- _a = Hydratable;
3267
+ _a$1 = Hydratable;
3268
3268
  makeSerializationNoop(HydrationView);
3269
3269
 
3270
3270
  function isContentTemplate(value) {
@@ -4316,6 +4316,13 @@ class RepeatBehavior {
4316
4316
  * @public
4317
4317
  */
4318
4318
  class RepeatDirective {
4319
+ /**
4320
+ * Creates a placeholder string based on the directive's index within the template.
4321
+ * @param index - The index of the directive within the template.
4322
+ */
4323
+ createHTML(add) {
4324
+ return Markup.comment(add(this));
4325
+ }
4319
4326
  /**
4320
4327
  * Creates an instance of RepeatDirective.
4321
4328
  * @param dataBinding - The binding that provides the array to render.
@@ -4328,13 +4335,6 @@ class RepeatDirective {
4328
4335
  this.options = options;
4329
4336
  ArrayObserver.enable();
4330
4337
  }
4331
- /**
4332
- * Creates a placeholder string based on the directive's index within the template.
4333
- * @param index - The index of the directive within the template.
4334
- */
4335
- createHTML(add) {
4336
- return Markup.comment(add(this));
4337
- }
4338
4338
  /**
4339
4339
  * Creates a behavior for the provided target node.
4340
4340
  * @param target - The node instance to create the behavior for.
@@ -4794,6 +4794,7 @@ function attr(configOrTarget, prop) {
4794
4794
  return decorator;
4795
4795
  }
4796
4796
 
4797
+ var _a;
4797
4798
  const defaultShadowOptions = { mode: "open" };
4798
4799
  const defaultElementOptions = {};
4799
4800
  const fastElementBaseTypes = new Set();
@@ -4814,6 +4815,12 @@ const TemplateOptions = {
4814
4815
  * @public
4815
4816
  */
4816
4817
  class FASTElementDefinition {
4818
+ /**
4819
+ * Indicates if this element has been defined in at least one registry.
4820
+ */
4821
+ get isDefined() {
4822
+ return this.platformDefined;
4823
+ }
4817
4824
  constructor(type, nameOrConfig = type.definition) {
4818
4825
  var _b;
4819
4826
  this.platformDefined = false;
@@ -4856,14 +4863,8 @@ class FASTElementDefinition {
4856
4863
  : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
4857
4864
  this.styles = ElementStyles.normalize(nameOrConfig.styles);
4858
4865
  fastElementRegistry.register(this);
4859
- Observable.defineProperty(FASTElementDefinition.isRegistered, this.name);
4860
- FASTElementDefinition.isRegistered[this.name] = this.type;
4861
- }
4862
- /**
4863
- * Indicates if this element has been defined in at least one registry.
4864
- */
4865
- get isDefined() {
4866
- return this.platformDefined;
4866
+ Observable.defineProperty(_a.isRegistered, this.name);
4867
+ _a.isRegistered[this.name] = this.type;
4867
4868
  }
4868
4869
  /**
4869
4870
  * Defines a custom element based on this definition.
@@ -4889,10 +4890,10 @@ class FASTElementDefinition {
4889
4890
  */
4890
4891
  static compose(type, nameOrDef) {
4891
4892
  if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
4892
- return new FASTElementDefinition(class extends type {
4893
+ return new _a(class extends type {
4893
4894
  }, nameOrDef);
4894
4895
  }
4895
- return new FASTElementDefinition(type, nameOrDef);
4896
+ return new _a(type, nameOrDef);
4896
4897
  }
4897
4898
  /**
4898
4899
  * Registers a FASTElement base type.
@@ -4914,10 +4915,10 @@ class FASTElementDefinition {
4914
4915
  static composeAsync(type, nameOrDef) {
4915
4916
  return new Promise(resolve => {
4916
4917
  if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
4917
- resolve(new FASTElementDefinition(class extends type {
4918
+ resolve(new _a(class extends type {
4918
4919
  }, nameOrDef));
4919
4920
  }
4920
- const definition = new FASTElementDefinition(type, nameOrDef);
4921
+ const definition = new _a(type, nameOrDef);
4921
4922
  Observable.getNotifier(definition).subscribe({
4922
4923
  handleChange: () => {
4923
4924
  var _b, _c;
@@ -4928,6 +4929,7 @@ class FASTElementDefinition {
4928
4929
  });
4929
4930
  }
4930
4931
  }
4932
+ _a = FASTElementDefinition;
4931
4933
  /**
4932
4934
  * The definition has been registered to the FAST element registry.
4933
4935
  */
@@ -4949,10 +4951,10 @@ FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
4949
4951
  */
4950
4952
  FASTElementDefinition.registerAsync = (name) => __awaiter(void 0, void 0, void 0, function* () {
4951
4953
  return new Promise(resolve => {
4952
- if (FASTElementDefinition.isRegistered[name]) {
4953
- resolve(FASTElementDefinition.isRegistered[name]);
4954
+ if (_a.isRegistered[name]) {
4955
+ resolve(_a.isRegistered[name]);
4954
4956
  }
4955
- Observable.getNotifier(FASTElementDefinition.isRegistered).subscribe({ handleChange: () => resolve(FASTElementDefinition.isRegistered[name]) }, name);
4957
+ Observable.getNotifier(_a.isRegistered).subscribe({ handleChange: () => resolve(_a.isRegistered[name]) }, name);
4956
4958
  });
4957
4959
  });
4958
4960
  Observable.defineProperty(FASTElementDefinition.prototype, "template");
@@ -5480,90 +5482,6 @@ let elementControllerStrategy;
5480
5482
  * @public
5481
5483
  */
5482
5484
  class ElementController extends PropertyChangeNotifier {
5483
- /**
5484
- * Creates a Controller to control the specified element.
5485
- * @param element - The element to be controlled by this controller.
5486
- * @param definition - The element definition metadata that instructs this
5487
- * controller in how to handle rendering and other platform integrations.
5488
- * @internal
5489
- */
5490
- constructor(element, definition) {
5491
- super(element);
5492
- /**
5493
- * A map of observable properties that were set on the element before upgrade.
5494
- */
5495
- this.boundObservables = null;
5496
- /**
5497
- * Indicates whether the controller needs to perform initial rendering.
5498
- */
5499
- this.needsInitialization = true;
5500
- /**
5501
- * Indicates whether the element has an existing shadow root (e.g. from declarative shadow DOM).
5502
- */
5503
- this.hasExistingShadowRoot = false;
5504
- /**
5505
- * The template used to render the component.
5506
- */
5507
- this._template = null;
5508
- /**
5509
- * The current lifecycle stage of the controller.
5510
- */
5511
- this.stage = 3 /* Stages.disconnected */;
5512
- /**
5513
- * A guard against connecting behaviors multiple times
5514
- * during connect in scenarios where a behavior adds
5515
- * another behavior during it's connectedCallback
5516
- */
5517
- this.guardBehaviorConnection = false;
5518
- /**
5519
- * The behaviors associated with the component.
5520
- */
5521
- this.behaviors = null;
5522
- /**
5523
- * Tracks whether behaviors are connected so that
5524
- * behaviors cant be connected multiple times
5525
- */
5526
- this.behaviorsConnected = false;
5527
- /**
5528
- * The main set of styles used for the component, independent of any
5529
- * dynamically added styles.
5530
- */
5531
- this._mainStyles = null;
5532
- /**
5533
- * This allows Observable.getNotifier(...) to return the Controller
5534
- * when the notifier for the Controller itself is being requested. The
5535
- * result is that the Observable system does not need to create a separate
5536
- * instance of Notifier for observables on the Controller. The component and
5537
- * the controller will now share the same notifier, removing one-object construct
5538
- * per web component instance.
5539
- */
5540
- this.$fastController = this;
5541
- /**
5542
- * The view associated with the custom element.
5543
- * @remarks
5544
- * If `null` then the element is managing its own rendering.
5545
- */
5546
- this.view = null;
5547
- this.source = element;
5548
- this.definition = definition;
5549
- this.shadowOptions = definition.shadowOptions;
5550
- // Capture any observable values that were set by the binding engine before
5551
- // the browser upgraded the element. Then delete the property since it will
5552
- // shadow the getter/setter that is required to make the observable operate.
5553
- // Later, in the connect callback, we'll re-apply the values.
5554
- const accessors = Observable.getAccessors(element);
5555
- if (accessors.length > 0) {
5556
- const boundObservables = (this.boundObservables = Object.create(null));
5557
- for (let i = 0, ii = accessors.length; i < ii; ++i) {
5558
- const propertyName = accessors[i].name;
5559
- const value = element[propertyName];
5560
- if (value !== void 0) {
5561
- delete element[propertyName];
5562
- boundObservables[propertyName] = value;
5563
- }
5564
- }
5565
- }
5566
- }
5567
5485
  /**
5568
5486
  * Indicates whether or not the custom element has been
5569
5487
  * connected to the document.
@@ -5677,6 +5595,90 @@ class ElementController extends PropertyChangeNotifier {
5677
5595
  this.addStyles(value);
5678
5596
  }
5679
5597
  }
5598
+ /**
5599
+ * Creates a Controller to control the specified element.
5600
+ * @param element - The element to be controlled by this controller.
5601
+ * @param definition - The element definition metadata that instructs this
5602
+ * controller in how to handle rendering and other platform integrations.
5603
+ * @internal
5604
+ */
5605
+ constructor(element, definition) {
5606
+ super(element);
5607
+ /**
5608
+ * A map of observable properties that were set on the element before upgrade.
5609
+ */
5610
+ this.boundObservables = null;
5611
+ /**
5612
+ * Indicates whether the controller needs to perform initial rendering.
5613
+ */
5614
+ this.needsInitialization = true;
5615
+ /**
5616
+ * Indicates whether the element has an existing shadow root (e.g. from declarative shadow DOM).
5617
+ */
5618
+ this.hasExistingShadowRoot = false;
5619
+ /**
5620
+ * The template used to render the component.
5621
+ */
5622
+ this._template = null;
5623
+ /**
5624
+ * The current lifecycle stage of the controller.
5625
+ */
5626
+ this.stage = 3 /* Stages.disconnected */;
5627
+ /**
5628
+ * A guard against connecting behaviors multiple times
5629
+ * during connect in scenarios where a behavior adds
5630
+ * another behavior during it's connectedCallback
5631
+ */
5632
+ this.guardBehaviorConnection = false;
5633
+ /**
5634
+ * The behaviors associated with the component.
5635
+ */
5636
+ this.behaviors = null;
5637
+ /**
5638
+ * Tracks whether behaviors are connected so that
5639
+ * behaviors cant be connected multiple times
5640
+ */
5641
+ this.behaviorsConnected = false;
5642
+ /**
5643
+ * The main set of styles used for the component, independent of any
5644
+ * dynamically added styles.
5645
+ */
5646
+ this._mainStyles = null;
5647
+ /**
5648
+ * This allows Observable.getNotifier(...) to return the Controller
5649
+ * when the notifier for the Controller itself is being requested. The
5650
+ * result is that the Observable system does not need to create a separate
5651
+ * instance of Notifier for observables on the Controller. The component and
5652
+ * the controller will now share the same notifier, removing one-object construct
5653
+ * per web component instance.
5654
+ */
5655
+ this.$fastController = this;
5656
+ /**
5657
+ * The view associated with the custom element.
5658
+ * @remarks
5659
+ * If `null` then the element is managing its own rendering.
5660
+ */
5661
+ this.view = null;
5662
+ this.source = element;
5663
+ this.definition = definition;
5664
+ this.shadowOptions = definition.shadowOptions;
5665
+ // Capture any observable values that were set by the binding engine before
5666
+ // the browser upgraded the element. Then delete the property since it will
5667
+ // shadow the getter/setter that is required to make the observable operate.
5668
+ // Later, in the connect callback, we'll re-apply the values.
5669
+ const accessors = Observable.getAccessors(element);
5670
+ if (accessors.length > 0) {
5671
+ const boundObservables = (this.boundObservables = Object.create(null));
5672
+ for (let i = 0, ii = accessors.length; i < ii; ++i) {
5673
+ const propertyName = accessors[i].name;
5674
+ const value = element[propertyName];
5675
+ if (value !== void 0) {
5676
+ delete element[propertyName];
5677
+ boundObservables[propertyName] = value;
5678
+ }
5679
+ }
5680
+ }
5681
+ }
5680
5682
  /**
5681
5683
  * Registers an unbind handler with the controller.
5682
5684
  * @param behavior - An object to call when the controller unbinds.