@angular-wave/angular.ts 0.0.66 → 0.0.67

package/src/directive/select/select.js

@@ -23,10 +23,6 @@ function setOptionSelectedStatus(optionEl, value) {
 }
 
 /**
- * @ngdoc type
- * @name  select.SelectController
- *
- * @description
  * The controller for the {@link ng.select select} directive. The controller exposes
  * a few utility methods that can be used to augment the behavior of a regular or an
  * {@link ng.ngOptions ngOptions} select element.
@@ -371,80 +367,9 @@ function SelectController($element, $scope) {
 }
 
 /**
- * @ngdoc directive
- * @name select
- * @restrict E
- *
- * @description
- * HTML `select` element with AngularJS data-binding.
- *
- * The `select` directive is used together with {@link ngModel `ngModel`} to provide data-binding
- * between the scope and the `<select>` control (including setting default values).
- * It also handles dynamic `<option>` elements, which can be added using the {@link ngRepeat `ngRepeat}` or
- * {@link ngOptions `ngOptions`} directives.
- *
- * When an item in the `<select>` menu is selected, the value of the selected option will be bound
- * to the model identified by the `ngModel` directive. With static or repeated options, this is
- * the content of the `value` attribute or the textContent of the `<option>`, if the value attribute is missing.
- * Value and textContent can be interpolated.
- *
- * The {@link select.SelectController select controller} exposes utility functions that can be used
- * to manipulate the select's behavior.
- *
- * ## Matching model and option values
- *
- * In general, the match between the model and an option is evaluated by strictly comparing the model
- * value against the value of the available options.
- *
- * If you are setting the option value with the option's `value` attribute, or textContent, the
- * value will always be a `string` which means that the model value must also be a string.
- * Otherwise the `select` directive cannot match them correctly.
- *
- * To bind the model to a non-string value, you can use one of the following strategies:
- * - the {@link ng.ngOptions `ngOptions`} directive
- *   ({@link ng.select#using-select-with-ngoptions-and-setting-a-default-value})
- * - the {@link ng.ngValue `ngValue`} directive, which allows arbitrary expressions to be
- *   option values ({@link ng.select#using-ngvalue-to-bind-the-model-to-an-array-of-objects Example})
- * - model $parsers / $formatters to convert the string value
- *   ({@link ng.select#binding-select-to-a-non-string-value-via-ngmodel-parsing-formatting Example})
- *
- * If the viewValue of `ngModel` does not match any of the options, then the control
- * will automatically add an "unknown" option, which it then removes when the mismatch is resolved.
- *
- * 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.
- *
- * ## Choosing between `ngRepeat` and `ngOptions`
- *
- * In many cases, `ngRepeat` can be used on `<option>` elements instead of {@link ng.directive:ngOptions
- * 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
- *
- * Specifically, select with repeated options slows down significantly starting at 2000 options in
- * Chrome and Internet Explorer / Edge.
- *
- *
- * @param {string} ngModel Assignable AngularJS expression to data-bind to.
- * @param {string=} name Property name of the form under which the control is published.
- * @param {string=} multiple Allows multiple options to be selected. The selected values will be
- *     bound to the model as an array.
- * @param {string=} required Sets `required` validation error key if the value is not 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=} ngChange AngularJS expression to be executed when selected option(s) changes due to user
- *    interaction with the select element.
- * @param {string=} ngOptions sets the options that the select is populated with and defines what is
- * set on the model on selection. See {@link ngOptions `ngOptions`}.
- * @param {string=} ngAttrSize sets the size of the select element dynamically. Uses the
- * {@link guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes ngAttr} directive.
- *
+ * @returns {import('../../types').Directive}
  */
-export const selectDirective = function () {
+export function selectDirective() {
   return {
     restrict: "E",
     require: ["select", "?ngModel"],
@@ -567,54 +492,55 @@ export const selectDirective = function () {
       selectCtrl.writeValue(ngModelCtrl.$viewValue);
     };
   }
-};
+}
 
 // The option directive is purely designed to communicate the existence (or lack of)
 // of dynamically created (and destroyed) option elements to their containing select
 // directive via its controller.
-export const optionDirective = [
-  "$interpolate",
-  function ($interpolate) {
-    return {
-      restrict: "E",
-      priority: 100,
-      compile(element, attr) {
-        let interpolateValueFn;
-        let interpolateTextFn;
-
-        if (isDefined(attr.ngValue)) {
-          // Will be handled by registerOption
-        } else if (isDefined(attr.value)) {
-          // If the value attribute is defined, check if it contains an interpolation
-          interpolateValueFn = $interpolate(attr.value, true);
-        } else {
-          // If the value attribute is not defined then we fall back to the
-          // text content of the option element, which may be interpolated
-          interpolateTextFn = $interpolate(element.text(), true);
-          if (!interpolateTextFn) {
-            attr.$set("value", element.text());
-          }
+/**
+ * @returns {import('../../types').Directive}
+ */
+optionDirective.$inject = ["$interpolate"];
+export function optionDirective($interpolate) {
+  return {
+    restrict: "E",
+    priority: 100,
+    compile(element, attr) {
+      let interpolateValueFn;
+      let interpolateTextFn;
+
+      if (isDefined(attr.ngValue)) {
+        // Will be handled by registerOption
+      } else if (isDefined(attr.value)) {
+        // If the value attribute is defined, check if it contains an interpolation
+        interpolateValueFn = $interpolate(attr.value, true);
+      } else {
+        // If the value attribute is not defined then we fall back to the
+        // text content of the option element, which may be interpolated
+        interpolateTextFn = $interpolate(element.text(), true);
+        if (!interpolateTextFn) {
+          attr.$set("value", element.text());
         }
+      }
 
-        return function (scope, element, attr) {
-          // This is an optimization over using ^^ since we don't want to have to search
-          // all the way to the root of the DOM for every single option element
-          const selectCtrlName = "$selectController";
-          const parent = element.parent();
-          const selectCtrl =
-            parent.data(selectCtrlName) || parent.parent().data(selectCtrlName); // in case we are in optgroup
-
-          if (selectCtrl) {
-            selectCtrl.registerOption(
-              scope,
-              element,
-              attr,
-              interpolateValueFn,
-              interpolateTextFn,
-            );
-          }
-        };
-      },
-    };
-  },
-];
+      return function (scope, element, attr) {
+        // This is an optimization over using ^^ since we don't want to have to search
+        // all the way to the root of the DOM for every single option element
+        const selectCtrlName = "$selectController";
+        const parent = element.parent();
+        const selectCtrl =
+          parent.data(selectCtrlName) || parent.parent().data(selectCtrlName); // in case we are in optgroup
+
+        if (selectCtrl) {
+          selectCtrl.registerOption(
+            scope,
+            element,
+            attr,
+            interpolateValueFn,
+            interpolateTextFn,
+          );
+        }
+      };
+    },
+  };
+}

package/src/directive/select/select.md

@@ -0,0 +1,74 @@
+/\*\*
+
+- @ngdoc directive
+- @name select
+- @restrict E
+-
+- @description
+- HTML `select` element with AngularJS data-binding.
+-
+- The `select` directive is used together with {@link ngModel `ngModel`} to provide data-binding
+- between the scope and the `<select>` control (including setting default values).
+- It also handles dynamic `<option>` elements, which can be added using the {@link ngRepeat `ngRepeat}` or
+- {@link ngOptions `ngOptions`} directives.
+-
+- When an item in the `<select>` menu is selected, the value of the selected option will be bound
+- to the model identified by the `ngModel` directive. With static or repeated options, this is
+- the content of the `value` attribute or the textContent of the `<option>`, if the value attribute is missing.
+- Value and textContent can be interpolated.
+-
+- The {@link select.SelectController select controller} exposes utility functions that can be used
+- to manipulate the select's behavior.
+-
+- ## Matching model and option values
+-
+- In general, the match between the model and an option is evaluated by strictly comparing the model
+- value against the value of the available options.
+-
+- If you are setting the option value with the option's `value` attribute, or textContent, the
+- value will always be a `string` which means that the model value must also be a string.
+- Otherwise the `select` directive cannot match them correctly.
+-
+- To bind the model to a non-string value, you can use one of the following strategies:
+- - the {@link ng.ngOptions `ngOptions`} directive
+- ({@link ng.select#using-select-with-ngoptions-and-setting-a-default-value})
+- - the {@link ng.ngValue `ngValue`} directive, which allows arbitrary expressions to be
+- option values ({@link ng.select#using-ngvalue-to-bind-the-model-to-an-array-of-objects Example})
+- - model $parsers / $formatters to convert the string value
+- ({@link ng.select#binding-select-to-a-non-string-value-via-ngmodel-parsing-formatting Example})
+-
+- If the viewValue of `ngModel` does not match any of the options, then the control
+- will automatically add an "unknown" option, which it then removes when the mismatch is resolved.
+-
+- 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.
+-
+- ## Choosing between `ngRepeat` and `ngOptions`
+-
+- In many cases, `ngRepeat` can be used on `<option>` elements instead of {@link ng.directive:ngOptions
+- 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
+-
+- Specifically, select with repeated options slows down significantly starting at 2000 options in
+- Chrome and Internet Explorer / Edge.
+-
+-
+- @param {string} ngModel Assignable AngularJS expression to data-bind to.
+- @param {string=} name Property name of the form under which the control is published.
+- @param {string=} multiple Allows multiple options to be selected. The selected values will be
+-     bound to the model as an array.
+- @param {string=} required Sets `required` validation error key if the value is not 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=} ngChange AngularJS expression to be executed when selected option(s) changes due to user
+- interaction with the select element.
+- @param {string=} ngOptions sets the options that the select is populated with and defines what is
+- set on the model on selection. See {@link ngOptions `ngOptions`}.
+- @param {string=} ngAttrSize sets the size of the select element dynamically. Uses the
+- {@link guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes ngAttr} directive.
+- \*/

package/src/directive/show-hide/show-hide.js

@@ -1,119 +1,12 @@
 const NG_HIDE_CLASS = "ng-hide";
 const NG_HIDE_IN_PROGRESS_CLASS = "ng-hide-animate";
-/**
- * @ngdoc directive
- * @name ngShow
- * @multiElement
- *
- * @description
- * The `ngShow` directive shows or hides the given HTML element based on the expression provided to
- * the `ngShow` attribute.
- *
- * The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
- * The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
- * `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
- * {@link ng.directive:ngCsp ngCsp}).
- *
- * ```html
- * <!-- when $scope.myValue is truthy (element is visible) -->
- * <div ng-show="myValue"></div>
- *
- * <!-- when $scope.myValue is falsy (element is hidden) -->
- * <div ng-show="myValue" class="ng-hide"></div>
- * ```
- *
- * When the `ngShow` expression evaluates to a falsy value then the `.ng-hide` CSS class is added
- * to the class attribute on the element causing it to become hidden. When truthy, the `.ng-hide`
- * CSS class is removed from the element causing the element not to appear hidden.
- *
- * ## Why is `!important` used?
- *
- * You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
- * `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
- * simple as changing the display style on a HTML list item would make hidden elements appear
- * visible. This also becomes a bigger issue when dealing with CSS frameworks.
- *
- * By using `!important`, the show and hide behavior will work as expected despite any clash between
- * CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
- * developer chooses to override the styling to change how to hide an element then it is just a
- * matter of using `!important` in their own CSS code.
- *
- * ### Overriding `.ng-hide`
- *
- * By default, the `.ng-hide` class will style the element with `display: none !important`. If you
- * wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
- * the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
- * `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
- *
- * ```css
- * .ng-hide:not(.ng-hide-animate) {
- *   /&#42; These are just alternative ways of hiding an element &#42;/
- *   display: block!important;
- *   position: absolute;
- *   top: -9999px;
- *   left: -9999px;
- * }
- * ```
- *
- * By default you don't need to override anything in CSS and the animations will work around the
- * display style.
- *
- * @animations
- * | Animation                                           | Occurs                                                                                                        |
- * |-----------------------------------------------------|---------------------------------------------------------------------------------------------------------------|
- * | {@link $animate#addClass addClass} `.ng-hide`       | After the `ngShow` expression evaluates to a non truthy value and just before the contents are set to hidden. |
- * | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngShow` expression evaluates to a truthy value and just before contents are set to visible.        |
- *
- * Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
- * directive expression is true and false. This system works like the animation system present with
- * `ngClass` except that you must also include the `!important` flag to override the display
- * property so that the elements are not actually hidden during the animation.
- *
- * ```css
- * /&#42; A working example can be found at the bottom of this page. &#42;/
- * .my-element.ng-hide-add, .my-element.ng-hide-remove {
- *   transition: all 0.5s linear;
- * }
- *
- * .my-element.ng-hide-add { ... }
- * .my-element.ng-hide-add.ng-hide-add-active { ... }
- * .my-element.ng-hide-remove { ... }
- * .my-element.ng-hide-remove.ng-hide-remove-active { ... }
- * ```
- *
- * Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
- * to block during animation states - ngAnimate will automatically handle the style toggling for you.
- *
- * @element ANY
- * @param {string} ngShow If the {@link guide/expression expression} is truthy/falsy then the
- *                            element is shown/hidden respectively.
- *
- * @example
- * A simple example, animating the element's opacity:
 
-* <hr />
- *
- * @knownIssue
- *
- * ### Flickering when using ngShow to toggle between elements
- *
- * When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
- * happen that both the element to show and the element to hide are visible for a very short time.
- *
- * This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
- * are defined for {@link ngShow} / {@link ngHide}.
- * 
- * There are several way to mitigate this problem:
- *
- * - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
- * - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
- * - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
- * - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
- * - Define an animation on the affected elements.
+ngShowDirective.$inject = ["$animate"];
+/**
+ * @returns {import('../../types').Directive}
  */
-export const ngShowDirective = [
-  "$animate",
-  ($animate) => ({
+export function ngShowDirective($animate) {
+  return {
     restrict: "A",
     multiElement: true,
     link(scope, element, attr) {
@@ -127,119 +20,15 @@ export const ngShowDirective = [
         });
       });
     },
-  }),
-];
+  };
+}
 
+ngHideDirective.$inject = ["$animate"];
 /**
- * @ngdoc directive
- * @name ngHide
- * @multiElement
- *
- * @description
- * The `ngHide` directive shows or hides the given HTML element based on the expression provided to
- * the `ngHide` attribute.
- *
- * The element is shown or hidden by removing or adding the `.ng-hide` CSS class onto the element.
- * The `.ng-hide` CSS class is predefined in AngularJS and sets the display style to none (using an
- * `!important` flag). For CSP mode please add `angular-csp.css` to your HTML file (see
- * {@link ng.directive:ngCsp ngCsp}).
- *
- * ```html
- * <!-- when $scope.myValue is truthy (element is hidden) -->
- * <div ng-hide="myValue" class="ng-hide"></div>
- *
- * <!-- when $scope.myValue is falsy (element is visible) -->
- * <div ng-hide="myValue"></div>
- * ```
- *
- * When the `ngHide` expression evaluates to a truthy value then the `.ng-hide` CSS class is added
- * to the class attribute on the element causing it to become hidden. When falsy, the `.ng-hide`
- * CSS class is removed from the element causing the element not to appear hidden.
- *
- * ## Why is `!important` used?
- *
- * You may be wondering why `!important` is used for the `.ng-hide` CSS class. This is because the
- * `.ng-hide` selector can be easily overridden by heavier selectors. For example, something as
- * simple as changing the display style on a HTML list item would make hidden elements appear
- * visible. This also becomes a bigger issue when dealing with CSS frameworks.
- *
- * By using `!important`, the show and hide behavior will work as expected despite any clash between
- * CSS selector specificity (when `!important` isn't used with any conflicting styles). If a
- * developer chooses to override the styling to change how to hide an element then it is just a
- * matter of using `!important` in their own CSS code.
- *
- * ### Overriding `.ng-hide`
- *
- * By default, the `.ng-hide` class will style the element with `display: none !important`. If you
- * wish to change the hide behavior with `ngShow`/`ngHide`, you can simply overwrite the styles for
- * the `.ng-hide` CSS class. Note that the selector that needs to be used is actually
- * `.ng-hide:not(.ng-hide-animate)` to cope with extra animation classes that can be added.
- *
- * ```css
- * .ng-hide:not(.ng-hide-animate) {
- *   /&#42; These are just alternative ways of hiding an element &#42;/
- *   display: block!important;
- *   position: absolute;
- *   top: -9999px;
- *   left: -9999px;
- * }
- * ```
- *
- * By default you don't need to override in CSS anything and the animations will work around the
- * display style.
- *
- * @animations
- * | Animation                                           | Occurs                                                                                                     |
- * |-----------------------------------------------------|------------------------------------------------------------------------------------------------------------|
- * | {@link $animate#addClass addClass} `.ng-hide`       | After the `ngHide` expression evaluates to a truthy value and just before the contents are set to hidden.  |
- * | {@link $animate#removeClass removeClass} `.ng-hide` | After the `ngHide` expression evaluates to a non truthy value and just before contents are set to visible. |
- *
- * Animations in `ngShow`/`ngHide` work with the show and hide events that are triggered when the
- * directive expression is true and false. This system works like the animation system present with
- * `ngClass` except that you must also include the `!important` flag to override the display
- * property so that the elements are not actually hidden during the animation.
- *
- * ```css
- * /&#42; A working example can be found at the bottom of this page. &#42;/
- * .my-element.ng-hide-add, .my-element.ng-hide-remove {
- *   transition: all 0.5s linear;
- * }
- *
- * .my-element.ng-hide-add { ... }
- * .my-element.ng-hide-add.ng-hide-add-active { ... }
- * .my-element.ng-hide-remove { ... }
- * .my-element.ng-hide-remove.ng-hide-remove-active { ... }
- * ```
- *
- * Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property
- * to block during animation states - ngAnimate will automatically handle the style toggling for you.
- *
- * @element ANY
- * @param {string} ngHide If the {@link guide/expression expression} is truthy/falsy then the
- *                            element is hidden/shown respectively.
- *
- * @knownIssue
- *
- * ### Flickering when using ngHide to toggle between elements
- *
- * When using {@link ngShow} and / or {@link ngHide} to toggle between elements, it can
- * happen that both the element to show and the element to hide are visible for a very short time.
- *
- * This usually happens when the {@link ngAnimate ngAnimate module} is included, but no actual animations
- * are defined for {@link ngShow} / {@link ngHide}. Internet Explorer is affected more often than
- * other browsers.
- *
- * There are several way to mitigate this problem:
- *
- * - {@link guide/animations#how-to-selectively-enable-disable-and-skip-animations Disable animations on the affected elements}.
- * - Use {@link ngIf} or {@link ngSwitch} instead of {@link ngShow} / {@link ngHide}.
- * - Use the special CSS selector `ng-hide.ng-hide-animate` to set `{display: none}` or similar on the affected elements.
- * - Use `ng-class="{'ng-hide': expression}` instead of instead of {@link ngShow} / {@link ngHide}.
- * - Define an animation on the affected elements.
+ * @returns {import('../../types').Directive}
  */
-export const ngHideDirective = [
-  "$animate",
-  ($animate) => ({
+export function ngHideDirective($animate) {
+  return {
     restrict: "A",
     multiElement: true,
     link(scope, element, attr) {
@@ -251,5 +40,5 @@ export const ngHideDirective = [
         });
       });
     },
-  }),
-];
+  };
+}