npm - @angular-wave/angular.ts - Versions diffs - 0.0.67 → 0.0.69 - Mend

@angular-wave/angular.ts 0.0.67 → 0.0.69

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 (87) hide show

package/dist/angular-ts.esm.js +2 -2
package/dist/angular-ts.umd.js +2 -2
package/package.json +1 -1
package/src/animations/animate-swap.js +1 -1
package/src/core/animate/animate.js +5 -5
package/src/core/compile/compile.spec.js +2 -2
package/src/core/controller/controller.js +5 -1
package/src/core/cookie-reader.spec.js +1 -1
package/src/core/di/injector.js +1 -1
package/src/core/di/injector.spec.js +35 -35
package/src/core/di/internal-injector.js +1 -1
package/src/core/filter/filter.spec.js +15 -15
package/src/core/interpolate/interpolate.spec.js +29 -29
package/src/core/interval/interval-factory.js +8 -1
package/src/core/interval/interval.js +30 -16
package/src/core/interval/interval.spec.js +1 -1
package/src/core/location/location.js +473 -626
package/src/core/location/location.md +114 -0
package/src/core/location/location.spec.js +2 -77
package/src/core/parser/lexer.spec.js +1 -1
package/src/core/parser/parse.spec.js +1 -1
package/src/core/q/q.js +64 -65
package/src/core/q/q.spec.js +1 -1
package/src/core/sce/sce.js +1 -3
package/src/core/scope/scope.js +3 -6
package/src/core/timeout/timeout.js +5 -21
package/src/core/url-utils/url-utils.js +5 -0
package/src/directive/attrs/boolean.spec.js +1 -1
package/src/directive/bind/bind.js +2 -2
package/src/directive/class/class.js +1 -1
package/src/directive/form/form.js +1 -18
package/src/directive/form/form.spec.js +2 -2
package/src/directive/include/include.js +7 -0
package/src/directive/input/input.js +1 -1
package/src/{exts → directive}/messages/messages.html +4 -1
package/src/directive/messages/messages.js +346 -0
package/src/{exts → directive}/messages/messages.spec.js +7 -11
package/src/{exts → directive}/messages/messages.test.js +1 -1
package/src/directive/model-options/model-options.spec.js +1 -1
package/src/directive/options/options.js +2 -156
package/src/directive/options/options.md +179 -0
package/src/directive/select/select.js +7 -4
package/src/directive/switch/switch.spec.js +1 -1
package/src/exts/aria/aria.spec.js +1 -1
package/src/filters/filter.js +2 -3
package/src/filters/filter.spec.js +1 -1
package/src/filters/filters.spec.js +1 -1
package/src/filters/limit-to.spec.js +2 -2
package/src/loader.js +1 -1
package/src/loader.spec.js +1 -1
package/src/public.js +12 -2
package/src/router/common/glob.spec.js +1 -1
package/src/router/params/param-factory.js +1 -1
package/src/router/params/param.js +54 -54
package/src/router/path/path-utils.js +1 -0
package/src/router/state/state-builder.spec.js +1 -1
package/src/router/template-factory.js +6 -4
package/src/router/url/url-service.js +7 -0
package/src/router/view/view.spec.js +8 -11
package/src/router/view-scroll.js +6 -1
package/src/services/anchor-scroll.html +83 -0
package/src/services/anchor-scroll.js +25 -10
package/src/services/browser.js +1 -1
package/src/services/http/http.spec.js +40 -40
package/src/shared/jqlite/jqlite.js +4 -4
package/src/shared/jqlite/jqlite.spec.js +4 -4
package/src/shared/utils.js +1 -1
package/types/core/interval/interval-factory.d.ts +1 -1
package/types/core/interval/interval.d.ts +4 -0
package/types/core/location/location.d.ts +235 -166
package/types/core/q/q.d.ts +66 -40
package/types/core/scope/scope.d.ts +5 -8
package/types/core/timeout/timeout.d.ts +3 -7
package/types/core/url-utils/url-utils.d.ts +4 -0
package/types/directive/form/form.d.ts +3 -20
package/types/directive/include/include.d.ts +1 -1
package/types/router/params/param-factory.d.ts +1 -1
package/types/router/params/param.d.ts +11 -0
package/types/router/template-factory.d.ts +4 -4
package/types/router/url/url-service.d.ts +9 -9
package/types/router/view-scroll.d.ts +1 -1
package/types/services/anchor-scroll.d.ts +16 -1
package/types/services/browser.d.ts +2 -2
package/types/shared/jqlite/jqlite.d.ts +2 -2
package/src/exts/messages/messages.js +0 -359
package/types/exts/messages/messages.d.ts +0 -1
/package/src/{exts → directive}/messages/messages.md +0 -0

package/src/{exts → directive}/messages/messages.html RENAMED Viewed

@@ -10,7 +10,10 @@
     <script src="/jasmine/jasmine-5.1.2/jasmine-html.js"></script>
     <script src="/jasmine/jasmine-5.1.2/boot0.js"></script>
     <script src="/jasmine/jasmine-5.1.2/boot1.js"></script>
-    <script type="module" src="/src/exts/messages/messages.spec.js"></script>
+    <script
+      type="module"
+      src="/src/directive/messages/messages.spec.js"
+    ></script>
   </head>
   <body>
     <div id="dummy"></div>

package/src/directive/messages/messages.js ADDED Viewed

@@ -0,0 +1,346 @@
+import { forEach, isString } from "../../shared/utils";
+ngMessagesDirective.$inject = ["$animate"];
+export function ngMessagesDirective($animate) {
+  const ACTIVE_CLASS = "ng-active";
+  const INACTIVE_CLASS = "ng-inactive";
+  return {
+    require: "ngMessages",
+    restrict: "AE",
+    controller: [
+      "$element",
+      "$scope",
+      "$attrs",
+      function ($element, $scope, $attrs) {
+        const ctrl = this;
+        let latestKey = 0;
+        let nextAttachId = 0;
+        this.head = undefined;
+        this.default = undefined;
+        this.getAttachId = function getAttachId() {
+          return nextAttachId++;
+        };
+        const messages = (this.messages = {});
+        let renderLater;
+        let cachedCollection;
+        this.render = function (collection) {
+          collection = collection || {};
+          renderLater = false;
+          cachedCollection = collection;
+          // this is true if the attribute is empty or if the attribute value is truthy
+          const multiple =
+            isAttrTruthy($scope, $attrs.ngMessagesMultiple) ||
+            isAttrTruthy($scope, $attrs.multiple);
+          const unmatchedMessages = [];
+          const matchedKeys = {};
+          let truthyKeys = 0;
+          let messageItem = ctrl.head;
+          let messageFound = false;
+          let totalMessages = 0;
+          // we use != instead of !== to allow for both undefined and null values
+          while (messageItem != null) {
+            totalMessages++;
+            const messageCtrl = messageItem.message;
+            let messageUsed = false;
+            if (!messageFound) {
+              forEach(collection, (value, key) => {
+                if (truthy(value) && !messageUsed) {
+                  truthyKeys++;
+                  if (messageCtrl.test(key)) {
+                    // this is to prevent the same error name from showing up twice
+                    if (matchedKeys[key]) return;
+                    matchedKeys[key] = true;
+                    messageUsed = true;
+                    messageCtrl.attach();
+                  }
+                }
+              });
+            }
+            if (messageUsed) {
+              // unless we want to display multiple messages then we should
+              // set a flag here to avoid displaying the next message in the list
+              messageFound = !multiple;
+            } else {
+              unmatchedMessages.push(messageCtrl);
+            }
+            messageItem = messageItem.next;
+          }
+          forEach(unmatchedMessages, (messageCtrl) => {
+            messageCtrl.detach();
+          });
+          const messageMatched = unmatchedMessages.length !== totalMessages;
+          const attachDefault =
+            ctrl.default && !messageMatched && truthyKeys > 0;
+          if (attachDefault) {
+            ctrl.default.attach();
+          } else if (ctrl.default) {
+            ctrl.default.detach();
+          }
+          if (messageMatched || attachDefault) {
+            $animate.setClass($element, ACTIVE_CLASS, INACTIVE_CLASS);
+          } else {
+            $animate.setClass($element, INACTIVE_CLASS, ACTIVE_CLASS);
+          }
+        };
+        $scope.$watchCollection($attrs.ngMessages || $attrs.for, ctrl.render);
+        this.reRender = function () {
+          if (!renderLater) {
+            renderLater = true;
+            $scope.$evalAsync(() => {
+              if (renderLater && cachedCollection) {
+                ctrl.render(cachedCollection);
+              }
+            });
+          }
+        };
+        this.register = function (comment, messageCtrl, isDefault) {
+          if (isDefault) {
+            ctrl.default = messageCtrl;
+          } else {
+            const nextKey = latestKey.toString();
+            messages[nextKey] = {
+              message: messageCtrl,
+            };
+            insertMessageNode($element[0], comment, nextKey);
+            comment.$$ngMessageNode = nextKey;
+            latestKey++;
+          }
+          ctrl.reRender();
+        };
+        this.deregister = function (comment, isDefault) {
+          if (isDefault) {
+            delete ctrl.default;
+          } else {
+            const key = comment.$$ngMessageNode;
+            delete comment.$$ngMessageNode;
+            removeMessageNode($element[0], comment, key);
+            delete messages[key];
+          }
+          ctrl.reRender();
+        };
+        function findPreviousMessage(parent, comment) {
+          let prevNode = comment;
+          const parentLookup = [];
+          while (prevNode && prevNode !== parent) {
+            const prevKey = prevNode.$$ngMessageNode;
+            if (prevKey && prevKey.length) {
+              return messages[prevKey];
+            }
+            // dive deeper into the DOM and examine its children for any ngMessage
+            // comments that may be in an element that appears deeper in the list
+            if (
+              prevNode.childNodes.length &&
+              parentLookup.indexOf(prevNode) === -1
+            ) {
+              parentLookup.push(prevNode);
+              prevNode = prevNode.childNodes[prevNode.childNodes.length - 1];
+            } else if (prevNode.previousSibling) {
+              prevNode = prevNode.previousSibling;
+            } else {
+              prevNode = prevNode.parentNode;
+              parentLookup.push(prevNode);
+            }
+          }
+        }
+        function insertMessageNode(parent, comment, key) {
+          const messageNode = messages[key];
+          if (!ctrl.head) {
+            ctrl.head = messageNode;
+          } else {
+            const match = findPreviousMessage(parent, comment);
+            if (match) {
+              messageNode.next = match.next;
+              match.next = messageNode;
+            } else {
+              messageNode.next = ctrl.head;
+              ctrl.head = messageNode;
+            }
+          }
+        }
+        function removeMessageNode(parent, comment, key) {
+          const messageNode = messages[key];
+          // This message node may have already been removed by a call to deregister()
+          if (!messageNode) return;
+          const match = findPreviousMessage(parent, comment);
+          if (match) {
+            match.next = messageNode.next;
+          } else {
+            ctrl.head = messageNode.next;
+          }
+        }
+      },
+    ],
+  };
+  function isAttrTruthy(scope, attr) {
+    return (
+      (isString(attr) && attr.length === 0) || // empty attribute
+      truthy(scope.$eval(attr))
+    );
+  }
+  function truthy(val) {
+    return isString(val) ? val.length : !!val;
+  }
+}
+ngMessagesIncludeDirective.$inject = ["$templateRequest", "$compile"];
+export function ngMessagesIncludeDirective($templateRequest, $compile) {
+  return {
+    restrict: "AE",
+    require: "^^ngMessages", // we only require this for validation sake
+    link($scope, element, attrs) {
+      const src = attrs.ngMessagesInclude || attrs.src;
+      $templateRequest(src).then((html) => {
+        if ($scope.$$destroyed) return;
+        if (isString(html) && !html.trim()) {
+          // Empty template - nothing to compile
+        } else {
+          // Non-empty template - compile and link
+          $compile(html)($scope, (contents) => {
+            element.after(contents);
+          });
+        }
+      });
+    },
+  };
+}
+export const ngMessageDirective = ngMessageDirectiveFactory(false);
+export const ngMessageExpDirective = ngMessageDirectiveFactory(false);
+export const ngMessageDefaultDirective = ngMessageDirectiveFactory(true);
+function ngMessageDirectiveFactory(isDefault) {
+  return [
+    "$animate",
+    function ($animate) {
+      return {
+        restrict: "AE",
+        transclude: "element",
+        priority: 1, // must run before ngBind, otherwise the text is set on the comment
+        terminal: true,
+        require: "^^ngMessages",
+        link(scope, element, attrs, ngMessagesCtrl, $transclude) {
+          let commentNode;
+          let records;
+          let staticExp;
+          let dynamicExp;
+          if (!isDefault) {
+            commentNode = element[0];
+            staticExp = attrs.ngMessage || attrs.when;
+            dynamicExp = attrs.ngMessageExp || attrs.whenExp;
+            const assignRecords = function (items) {
+              records = items
+                ? Array.isArray(items)
+                  ? items
+                  : items.split(/[\s,]+/)
+                : null;
+              ngMessagesCtrl.reRender();
+            };
+            if (dynamicExp) {
+              assignRecords(scope.$eval(dynamicExp));
+              scope.$watchCollection(dynamicExp, assignRecords);
+            } else {
+              assignRecords(staticExp);
+            }
+          }
+          let currentElement;
+          let messageCtrl;
+          ngMessagesCtrl.register(
+            commentNode,
+            (messageCtrl = {
+              test(name) {
+                return contains(records, name);
+              },
+              attach() {
+                if (!currentElement) {
+                  $transclude((elm, newScope) => {
+                    $animate.enter(elm, null, element);
+                    currentElement = elm;
+                    // Each time we attach this node to a message we get a new id that we can match
+                    // when we are destroying the node later.
+                    const $$attachId = (currentElement.$$attachId =
+                      ngMessagesCtrl.getAttachId());
+                    // in the event that the element or a parent element is destroyed
+                    // by another structural directive then it's time
+                    // to deregister the message from the controller
+                    currentElement.on("$destroy", () => {
+                      // If the message element was removed via a call to `detach` then `currentElement` will be null
+                      // So this handler only handles cases where something else removed the message element.
+                      if (
+                        currentElement &&
+                        currentElement.$$attachId === $$attachId
+                      ) {
+                        ngMessagesCtrl.deregister(commentNode, isDefault);
+                        messageCtrl.detach();
+                      }
+                      newScope.$destroy();
+                    });
+                  });
+                }
+              },
+              detach() {
+                if (currentElement) {
+                  const elm = currentElement;
+                  currentElement = null;
+                  $animate.leave(elm);
+                }
+              },
+            }),
+            isDefault,
+          );
+          // We need to ensure that this directive deregisters itself when it no longer exists
+          // Normally this is done when the attached element is destroyed; but if this directive
+          // gets removed before we attach the message to the DOM there is nothing to watch
+          // in which case we must deregister when the containing scope is destroyed.
+          scope.$on("$destroy", () => {
+            ngMessagesCtrl.deregister(commentNode, isDefault);
+          });
+        },
+      };
+    },
+  ];
+  function contains(collection, key) {
+    if (collection) {
+      return Array.isArray(collection)
+        ? collection.indexOf(key) >= 0
+        : Object.prototype.hasOwnProperty.call(collection, key);
+    }
+  }
+}

package/src/{exts → directive}/messages/messages.spec.js RENAMED Viewed

@@ -9,16 +9,13 @@ describe("ngMessages", () => {
   beforeEach(() => {
     window.angular = new Angular();
-    window.angular
-      .module("app", ["ng", "ngMessages"])
-      .directive("messageWrap", () => ({
-        transclude: true,
-        scope: {
-          col: "=col",
-        },
-        template:
-          '<div ng-messages="col"><ng-transclude></ng-transclude></div>',
-      }));
+    window.angular.module("app", ["ng"]).directive("messageWrap", () => ({
+      transclude: true,
+      scope: {
+        col: "=col",
+      },
+      template: '<div ng-messages="col"><ng-transclude></ng-transclude></div>',
+    }));
     createInjector(["app"]).invoke(
       (_$rootScope_, _$compile_, _$templateCache_) => {
@@ -932,7 +929,6 @@ describe("ngMessages", () => {
           '  <div ng-message="failed">Your value is that of failure</div>' +
           "</div>",
       )($rootScope);
       $rootScope.data = {
         required: true,
         failed: true,

package/src/{exts → directive}/messages/messages.test.js RENAMED Viewed

@@ -1,6 +1,6 @@
 import { test, expect } from "@playwright/test";
-const TEST_URL = "src/exts/messages/messages.html";
+const TEST_URL = "src/directive/messages/messages.html";
 test("unit tests contain no errors", async ({ page }) => {
   await page.goto(TEST_URL);

package/src/directive/model-options/model-options.spec.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { defaultModelOptions } from "../../directive/model-options/model-options";
+import { defaultModelOptions } from "./model-options";
 import { dealoc, JQLite } from "../../shared/jqlite/jqlite";
 import { Angular } from "../../loader";
 import { createInjector } from "../../core/di/injector";

package/src/directive/options/options.js CHANGED Viewed

@@ -11,161 +11,6 @@ import {
 const ngOptionsMinErr = minErr("ngOptions");
-/**
- * @ngdoc directive
- * @name ngOptions
- * @restrict A
- *
- * @description
- *
- * The `ngOptions` attribute can be used to dynamically generate a list of `<option>`
- * elements for the `<select>` element using the array or object obtained by evaluating the
- * `ngOptions` comprehension expression.
- *
- * In many cases, {@link ng.directive:ngRepeat ngRepeat} can be used on `<option>` elements instead of
- * `ngOptions` to achieve a similar result. However, `ngOptions` provides some benefits:
- * - more flexibility in how the `<select>`'s model is assigned via the `select` **`as`** part of the
- * comprehension expression
- * - reduced memory consumption by not creating a new scope for each repeated instance
- * - increased render speed by creating the options in a documentFragment instead of individually
- *
- * When an item in the `<select>` menu is selected, the array element or object property
- * represented by the selected option will be bound to the model identified by the `ngModel`
- * directive.
- *
- * Optionally, a single hard-coded `<option>` element, with the value set to an empty string, can
- * be nested into the `<select>` element. This element will then represent the `null` or "not selected"
- * option. See example below for demonstration.
- *
- * ## Complex Models (objects or collections)
- *
- * By default, `ngModel` watches the model by reference, not value. This is important to know when
- * binding the select to a model that is an object or a collection.
- *
- * One issue occurs if you want to preselect an option. For example, if you set
- * the model to an object that is equal to an object in your collection, `ngOptions` won't be able to set the selection,
- * because the objects are not identical. So by default, you should always reference the item in your collection
- * for preselections, e.g.: `$scope.selected = $scope.collection[3]`.
- *
- * Another solution is to use a `track by` clause, because then `ngOptions` will track the identity
- * of the item not by reference, but by the result of the `track by` expression. For example, if your
- * collection items have an id property, you would `track by item.id`.
- *
- * A different issue with objects or collections is that ngModel won't detect if an object property or
- * a collection item changes. For that reason, `ngOptions` additionally watches the model using
- * `$watchCollection`, when the expression contains a `track by` clause or the the select has the `multiple` attribute.
- * This allows ngOptions to trigger a re-rendering of the options even if the actual object/collection
- * has not changed identity, but only a property on the object or an item in the collection changes.
- *
- * Note that `$watchCollection` does a shallow comparison of the properties of the object (or the items in the collection
- * if the model is an array). This means that changing a property deeper than the first level inside the
- * object/collection will not trigger a re-rendering.
- *
- * ## `select` **`as`**
- *
- * Using `select` **`as`** will bind the result of the `select` expression to the model, but
- * the value of the `<select>` and `<option>` html elements will be either the index (for array data sources)
- * or property name (for object data sources) of the value within the collection. If a **`track by`** expression
- * is used, the result of that expression will be set as the value of the `option` and `select` elements.
- *
- *
- * ### `select` **`as`** and **`track by`**
- *
- * <div class="alert alert-warning">
- * Be careful when using `select` **`as`** and **`track by`** in the same expression.
- * </div>
- *
- * Given this array of items on the $scope:
- *
- * ```js
- * $scope.items = [{
- *   id: 1,
- *   label: 'aLabel',
- *   subItem: { name: 'aSubItem' }
- * }, {
- *   id: 2,
- *   label: 'bLabel',
- *   subItem: { name: 'bSubItem' }
- * }];
- * ```
- *
- * This will work:
- *
- * ```html
- * <select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
- * ```
- * ```js
- * $scope.selected = $scope.items[0];
- * ```
- *
- * but this will not work:
- *
- * ```html
- * <select ng-options="item.subItem as item.label for item in items track by item.id" ng-model="selected"></select>
- * ```
- * ```js
- * $scope.selected = $scope.items[0].subItem;
- * ```
- *
- * In both examples, the **`track by`** expression is applied successfully to each `item` in the
- * `items` array. Because the selected option has been set programmatically in the controller, the
- * **`track by`** expression is also applied to the `ngModel` value. In the first example, the
- * `ngModel` value is `items[0]` and the **`track by`** expression evaluates to `items[0].id` with
- * no issue. In the second example, the `ngModel` value is `items[0].subItem` and the **`track by`**
- * expression evaluates to `items[0].subItem.id` (which is undefined). As a result, the model value
- * is not matched against any `<option>` and the `<select>` appears as having no selected value.
- *
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {comprehension_expression} ngOptions in one of the following forms:
- *
- *   * for array data sources:
- *     * `label` **`for`** `value` **`in`** `array`
- *     * `select` **`as`** `label` **`for`** `value` **`in`** `array`
- *     * `label` **`group by`** `group` **`for`** `value` **`in`** `array`
- *     * `label` **`disable when`** `disable` **`for`** `value` **`in`** `array`
- *     * `label` **`group by`** `group` **`for`** `value` **`in`** `array` **`track by`** `trackexpr`
- *     * `label` **`disable when`** `disable` **`for`** `value` **`in`** `array` **`track by`** `trackexpr`
- *     * `label` **`for`** `value` **`in`** `array` | orderBy:`orderexpr` **`track by`** `trackexpr`
- *        (for including a filter with `track by`)
- *   * for object data sources:
- *     * `label` **`for (`**`key` **`,`** `value`**`) in`** `object`
- *     * `select` **`as`** `label` **`for (`**`key` **`,`** `value`**`) in`** `object`
- *     * `label` **`group by`** `group` **`for (`**`key`**`,`** `value`**`) in`** `object`
- *     * `label` **`disable when`** `disable` **`for (`**`key`**`,`** `value`**`) in`** `object`
- *     * `select` **`as`** `label` **`group by`** `group`
- *         **`for` `(`**`key`**`,`** `value`**`) in`** `object`
- *     * `select` **`as`** `label` **`disable when`** `disable`
- *         **`for` `(`**`key`**`,`** `value`**`) in`** `object`
- *
- * Where:
- *
- *   * `array` / `object`: an expression which evaluates to an array / object to iterate over.
- *   * `value`: local variable which will refer to each item in the `array` or each property value
- *      of `object` during iteration.
- *   * `key`: local variable which will refer to a property name in `object` during iteration.
- *   * `label`: The result of this expression will be the label for `<option>` element. The
- *     `expression` will most likely refer to the `value` variable (e.g. `value.propertyName`).
- *   * `select`: The result of this expression will be bound to the model of the parent `<select>`
- *      element. If not specified, `select` expression will default to `value`.
- *   * `group`: The result of this expression will be used to group options using the `<optgroup>`
- *      DOM element.
- *   * `disable`: The result of this expression will be used to disable the rendered `<option>`
- *      element. Return `true` to disable.
- *   * `trackexpr`: Used when working with an array of objects. The result of this expression will be
- *      used to identify the objects in the array. The `trackexpr` will most likely refer to the
- *     `value` variable (e.g. `value.propertyName`). With this the selection is preserved
- *      even when the options are recreated (e.g. reloaded from the server).
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} required The control is considered valid only if value is entered.
- * @param {string=} ngRequired Adds `required` attribute and `required` validation constraint to
- *    the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of
- *    `required` when you want to data-bind to the `required` attribute.
- * @param {string=} ngAttrSize sets the size of the select element dynamically. Uses the
- * {@link guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes ngAttr} directive.
- *
- */
 const NG_OPTIONS_REGEXP =
   /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?(?:\s+disable\s+when\s+([\s\S]+?))?\s+for\s+(?:([$\w][$\w]*)|(?:\(\s*([$\w][$\w]*)\s*,\s*([$\w][$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/;
 // 1: value expression (valueFn)
@@ -618,7 +463,8 @@ export const ngOptionsDirective = [
               // Update the label on the group element
               // "null" is special cased because of Safari
-              groupElement.label =
+              /** @type {HTMLOptGroupElement} */
+              (groupElement).label =
                 option.group === null ? "null" : option.group;
               // Store it for use later