@angular-wave/angular.ts 0.0.69 → 0.0.71

package/package.json

@@ -2,7 +2,7 @@
   "name": "@angular-wave/angular.ts",
   "description": "A modern, optimized and typesafe version of AngularJS",
   "license": "MIT",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "browser": "dist/angular-ts.umd.js",

package/src/animations/shared.js

@@ -119,18 +119,23 @@ export function removeFromArray(arr, val) {
   }
 }
 
+/**
+ *
+ * @param {JQLite|Node} element
+ * @returns {JQLite}
+ */
 export function stripCommentsFromElement(element) {
   if (element instanceof JQLite) {
     switch (element.length) {
       case 0:
-        return element;
+        return /** @type {JQLite} */ (element);
 
       case 1:
         // there is no point of stripping anything if the element
         // is the only element within the JQLite wrapper.
         // (it's important that we retain the element instance.)
         if (element[0].nodeType === Node.ELEMENT_NODE) {
-          return element;
+          return /** @type {JQLite} */ (element);
         }
         break;
 
@@ -139,14 +144,18 @@ export function stripCommentsFromElement(element) {
     }
   }
 
-  if (element.nodeType === Node.ELEMENT_NODE) {
+  if (/** @type {Node} */ (element).nodeType === Node.ELEMENT_NODE) {
     return JQLite(element);
   }
 }
 
+/**
+ * @param {JQLite|Node} element
+ * @returns {Node}
+ */
 export function extractElementNode(element) {
-  if (!element[0]) return element;
-  for (let i = 0; i < element.length; i++) {
+  if (!element[0]) return /** @type {Node} */ (element);
+  for (let i = 0; i < /** @type {JQLite} */ (element).length; i++) {
     const elm = element[i];
     if (elm.nodeType === Node.ELEMENT_NODE) {
       return elm;

package/src/core/compile/attributes.js

@@ -0,0 +1,326 @@
+import { getBooleanAttrName } from "../../shared/jqlite/jqlite";
+import {
+  forEach,
+  isString,
+  snakeCase,
+  isUndefined,
+  arrayRemove,
+  minErr,
+  trim,
+  directiveNormalize,
+} from "../../shared/utils";
+import { ALIASED_ATTR } from "../../shared/constants";
+
+const $compileMinErr = minErr("$compile");
+const SIMPLE_ATTR_NAME = /^\w/;
+const specialAttrHolder = window.document.createElement("div");
+
+export class Attributes {
+  /**
+   *
+   * @param {import('../scope/scope').Scope} $rootScope
+   * @param {*} $animate
+   * @param {import("../exception-handler").ExceptionHandlerProvider} $exceptionHandler
+   * @param {*} $sce
+   * @param {import('../../shared/jqlite/jqlite').JQLite} [element]
+   * @param {*} [attributesToCopy]
+   */
+  constructor(
+    $rootScope,
+    $animate,
+    $exceptionHandler,
+    $sce,
+    element,
+    attributesToCopy,
+  ) {
+    this.$rootScope = $rootScope;
+    this.$animate = $animate;
+    this.$exceptionHandler = $exceptionHandler;
+    this.$sce = $sce;
+    if (attributesToCopy) {
+      const keys = Object.keys(attributesToCopy);
+      for (let i = 0, l = keys.length; i < l; i++) {
+        const key = keys[i];
+        this[key] = attributesToCopy[key];
+      }
+    } else {
+      this.$attr = {};
+    }
+    this.$$element = element;
+  }
+
+  /**
+   * @ngdoc method
+   * @name $compile.directive.Attributes#$normalize
+   * @kind function
+   *
+   * @description
+   * Converts an attribute name (e.g. dash/colon/underscore-delimited string, optionally prefixed with `x-` or
+   * `data-`) to its normalized, camelCase form.
+   *
+   * Also there is special case for Moz prefix starting with upper case letter.
+   *
+   * For further information check out the guide on {@link guide/directive#matching-directives Matching Directives}
+   *
+   * @param {string} name Name to normalize
+   */
+  $normalize = directiveNormalize;
+
+  /**
+   * @ngdoc method
+   * @name $compile.directive.Attributes#$addClass
+   * @kind function
+   *
+   * @description
+   * Adds the CSS class value specified by the classVal parameter to the element. If animations
+   * are enabled then an animation will be triggered for the class addition.
+   *
+   * @param {string} classVal The className value that will be added to the element
+   */
+  $addClass(classVal) {
+    if (classVal && classVal.length > 0) {
+      this.$animate.addClass(this.$$element, classVal);
+    }
+  }
+
+  /**
+   * @ngdoc method
+   * @name $compile.directive.Attributes#$removeClass
+   * @kind function
+   *
+   * @description
+   * Removes the CSS class value specified by the classVal parameter from the element. If
+   * animations are enabled then an animation will be triggered for the class removal.
+   *
+   * @param {string} classVal The className value that will be removed from the element
+   */
+  $removeClass(classVal) {
+    if (classVal && classVal.length > 0) {
+      this.$animate.removeClass(this.$$element, classVal);
+    }
+  }
+
+  /**
+   * @ngdoc method
+   * @name $compile.directive.Attributes#$updateClass
+   * @kind function
+   *
+   * @description
+   * Adds and removes the appropriate CSS class values to the element based on the difference
+   * between the new and old CSS class values (specified as newClasses and oldClasses).
+   *
+   * @param {string} newClasses The current CSS className value
+   * @param {string} oldClasses The former CSS className value
+   */
+  $updateClass(newClasses, oldClasses) {
+    const toAdd = tokenDifference(newClasses, oldClasses);
+    if (toAdd && toAdd.length) {
+      this.$animate.addClass(this.$$element, toAdd);
+    }
+
+    const toRemove = tokenDifference(oldClasses, newClasses);
+    if (toRemove && toRemove.length) {
+      this.$animate.removeClass(this.$$element, toRemove);
+    }
+  }
+
+  /**
+   * Set a normalized attribute on the element in a way such that all directives
+   * can share the attribute. This function properly handles boolean attributes.
+   * @param {string} key Normalized key. (ie ngAttribute)
+   * @param {string|boolean} value The value to set. If `null` attribute will be deleted.
+   * @param {boolean=} writeAttr If false, does not write the value to DOM element attribute.
+   *     Defaults to true.
+   * @param {string=} attrName Optional none normalized name. Defaults to key.
+   */
+  $set(key, value, writeAttr, attrName) {
+    // TODO: decide whether or not to throw an error if "class"
+    // is set through this function since it may cause $updateClass to
+    // become unstable.
+
+    const node = this.$$element[0];
+    const booleanKey = getBooleanAttrName(node, key);
+    const aliasedKey = ALIASED_ATTR[key];
+    let observer = key;
+
+    if (booleanKey) {
+      this.$$element[0][key] = value;
+      attrName = booleanKey;
+    } else if (aliasedKey) {
+      this[aliasedKey] = value;
+      observer = aliasedKey;
+    }
+
+    this[key] = value;
+
+    // translate normalized key to actual key
+    if (attrName) {
+      this.$attr[key] = attrName;
+    } else {
+      attrName = this.$attr[key];
+      if (!attrName) {
+        this.$attr[key] = attrName = snakeCase(key, "-");
+      }
+    }
+
+    let nodeName = this.$$element[0].nodeName.toLowerCase();
+
+    // Sanitize img[srcset] values.
+    if (nodeName === "img" && key === "srcset") {
+      this[key] = value = this.sanitizeSrcset(value, "$set('srcset', value)");
+    }
+
+    if (writeAttr !== false) {
+      if (value === null || isUndefined(value)) {
+        this.$$element[0].removeAttribute(attrName);
+        //
+      } else if (SIMPLE_ATTR_NAME.test(attrName)) {
+        // jQuery skips special boolean attrs treatment in XML nodes for
+        // historical reasons and hence AngularJS cannot freely call
+        // `.attr(attrName, false) with such attributes. To avoid issues
+        // in XHTML, call `removeAttr` in such cases instead.
+        // See https://github.com/jquery/jquery/issues/4249
+        if (booleanKey && value === false) {
+          this.$$element[0].removeAttribute(attrName);
+        } else {
+          this.$$element.attr(attrName, value);
+        }
+      } else {
+        this.setSpecialAttr(this.$$element[0], attrName, value);
+      }
+    }
+
+    // fire observers
+    const { $$observers } = this;
+    if ($$observers) {
+      forEach($$observers[observer], (fn) => {
+        try {
+          fn(value);
+        } catch (e) {
+          this.$exceptionHandler(e);
+        }
+      });
+    }
+  }
+
+  /**
+ * Observes an interpolated attribute.
+ *
+ * The observer function will be invoked once during the next `$digest` following
+ * compilation. The observer is then invoked whenever the interpolated value
+ * changes.
+ *
+ * @param {string} key Normalized key. (ie ngAttribute) .
+ * @param {any} fn Function that will be called whenever
+          the interpolated value of the attribute changes.
+ *        See the {@link guide/interpolation#how-text-and-attribute-bindings-work Interpolation
+ *        guide} for more info.
+ * @returns {function()} Returns a deregistration function for this observer.
+ */
+  $observe(key, fn) {
+    const $$observers =
+      this.$$observers || (this.$$observers = Object.create(null));
+    const listeners = $$observers[key] || ($$observers[key] = []);
+
+    listeners.push(fn);
+    this.$rootScope.$evalAsync(() => {
+      if (
+        !listeners.$$inter &&
+        Object.prototype.hasOwnProperty.call(this, key) &&
+        !isUndefined(this[key])
+      ) {
+        // no one registered attribute interpolation function, so lets call it manually
+        fn(this[key]);
+      }
+    });
+
+    return function () {
+      arrayRemove(listeners, fn);
+    };
+  }
+
+  setSpecialAttr(element, attrName, value) {
+    // Attributes names that do not start with letters (such as `(click)`) cannot be set using `setAttribute`
+    // so we have to jump through some hoops to get such an attribute
+    // https://github.com/angular/angular.js/pull/13318
+    specialAttrHolder.innerHTML = `<span ${attrName}>`;
+    const { attributes } = /** @type {Element} */ (
+      specialAttrHolder.firstChild
+    );
+    const attribute = attributes[0];
+    // We have to remove the attribute from its container element before we can add it to the destination element
+    attributes.removeNamedItem(attribute.name);
+    attribute.value = value;
+    element.attributes.setNamedItem(attribute);
+  }
+
+  sanitizeSrcset(value, invokeType) {
+    if (!value) {
+      return value;
+    }
+    if (!isString(value)) {
+      throw $compileMinErr(
+        "srcset",
+        'Can\'t pass trusted values to `{0}`: "{1}"',
+        invokeType,
+        value.toString(),
+      );
+    }
+
+    // Such values are a bit too complex to handle automatically inside $sce.
+    // Instead, we sanitize each of the URIs individually, which works, even dynamically.
+
+    // It's not possible to work around this using `$sce.trustAsMediaUrl`.
+    // If you want to programmatically set explicitly trusted unsafe URLs, you should use
+    // `$sce.trustAsHtml` on the whole `img` tag and inject it into the DOM using the
+    // `ng-bind-html` directive.
+
+    var result = "";
+
+    // first check if there are spaces because it's not the same pattern
+    var trimmedSrcset = trim(value);
+    //                (   999x   ,|   999w   ,|   ,|,   )
+    var srcPattern = /(\s+\d+x\s*,|\s+\d+w\s*,|\s+,|,\s+)/;
+    var pattern = /\s/.test(trimmedSrcset) ? srcPattern : /(,)/;
+
+    // split srcset into tuple of uri and descriptor except for the last item
+    var rawUris = trimmedSrcset.split(pattern);
+
+    // for each tuples
+    var nbrUrisWith2parts = Math.floor(rawUris.length / 2);
+    for (var i = 0; i < nbrUrisWith2parts; i++) {
+      var innerIdx = i * 2;
+      // sanitize the uri
+      result += this.$sce.getTrustedMediaUrl(trim(rawUris[innerIdx]));
+      // add the descriptor
+      result += " " + trim(rawUris[innerIdx + 1]);
+    }
+
+    // split the last item into uri and descriptor
+    var lastTuple = trim(rawUris[i * 2]).split(/\s/);
+
+    // sanitize the last uri
+    result += this.$sce.getTrustedMediaUrl(trim(lastTuple[0]));
+
+    // and add the last descriptor if any
+    if (lastTuple.length === 2) {
+      result += " " + trim(lastTuple[1]);
+    }
+    return result;
+  }
+}
+
+function tokenDifference(str1, str2) {
+  let values = "";
+  const tokens1 = str1.split(/\s+/);
+  const tokens2 = str2.split(/\s+/);
+
+  outer: for (let i = 0; i < tokens1.length; i++) {
+    const token = tokens1[i];
+    for (let j = 0; j < tokens2.length; j++) {
+      if (token === tokens2[j]) continue outer;
+    }
+    values += (values.length > 0 ? " " : "") + token;
+  }
+  return values;
+}