@angular-wave/angular.ts 0.7.4 → 0.7.5

package/docs/content/docs/_index.md

@@ -16,7 +16,7 @@ in the meantime.
 
 AngularTS is buildless, type-safe and reactive JS framework for building
 stuctured web applications at any scale. It continues the legacy of
-[AngularJS](https://angularjs.org/) of providing the best developer experience
+[AngularJS](https://angularjs.org/) by providing the best developer experience
 via immediate productivity without the burden of JS ecosystem tooling. Getting
 started with AngularTS does not even require JavaScript. All you need is a
 little bit of HTML. Below is a canonical example of a counter:
@@ -38,6 +38,7 @@ This code demonstrates the following key AngularTS features:
   attributes--called _directives_. Here, we are using `ng-init` directive to
   initialize our application state and `ng-click` directive to add an event
   handler that changes our state.
+
 - **Template-driven:** AngularTS’s built-in template engine automatically keeps
   the UI in sync with your application state, eliminating the need for manual
   DOM tracking and updates. The `{{count}}` expression above is an example of
@@ -45,11 +46,11 @@ This code demonstrates the following key AngularTS features:
   our UI is updated with the new state.
 
 - **Island-first and zero-cost:** AngularTS creates an application on any HTML
-  tag with `ng-app` attribute, allowing multiple independent applications to
-  live on a single page. The enables AngularTS to work alongside your existing
-  tech stack where the majority of your page is rendered on the server, while
-  AngularTS is isolated to small “islands” (regions of your page) where custom
-  interactivity or personalization is required.
+  tag with `ng-app` attribute, allowing multiple independent applications
+  (modules) to live on a single page. The enables AngularTS to work alongside
+  your existing tech stack where the majority of your page is rendered on the
+  server, while AngularTS is isolated to small “islands” (regions of your page)
+  where custom interactivity or personalization is required.
 
 - **Micro-framework appearance:** With its minimal setup, AngularTS is
   well-suited for quick experiments, LLM-generated code, and learning web

package/docs/content/docs/directive/blur.md

@@ -0,0 +1,38 @@
+---
+title: ng-blur
+description: >
+  Handler for blur event
+---
+
+### Description
+
+The `ng-blur` directive allows you to specify custom behavior when an element
+loses focus.
+
+### Directive parameters
+
+---
+
+#### `ng-blur`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [blur](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event)
+  event.
+  [FocusEvent](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-blur="$ctrl.handleBlur($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-blur/ng-blur.html" >}}
+
+{{< showraw src="examples/ng-blur/ng-blur.html" >}}
+
+---

package/docs/content/docs/directive/channel.md

@@ -28,12 +28,10 @@ is destroyed.
 - **Type:** `string`
 - **Description:** The name of the channel to subscribe to using `$eventBus`.
 
-### Example
+### Demo
 
 {{< showhtml src="examples/ng-channel/ng-channel.html" >}}
 
-### Demo
-
 {{< showraw src="examples/ng-channel/ng-channel.html" >}}
 
 ---

package/docs/content/docs/directive/class-even.md

@@ -38,10 +38,10 @@ to the element:
 
 ---
 
-### Example
+### Demo
 
 {{< showhtml src="examples/ng-class-even/ng-class-even.html" >}}
 
-### Demo
-
 {{< showraw src="examples/ng-class-even/ng-class-even.html" >}}
+
+---

package/docs/content/docs/directive/class-odd.md

@@ -1,7 +1,7 @@
 ---
 title: ng-class-odd
 description: >
-  Apply CSS classes to odd-indexed elements inside `ngRepeat`.
+  Apply CSS classes to odd-indexed elements inside `ng-repeat`.
 ---
 
 ### Description
@@ -39,10 +39,10 @@ to the element:
 
 ---
 
-### Example
+### Demo
 
 {{< showhtml src="examples/ng-class-odd/ng-class-odd.html" >}}
 
-### Demo
-
 {{< showraw src="examples/ng-class-odd/ng-class-odd.html" >}}
+
+---

package/docs/content/docs/directive/class.md

@@ -10,10 +10,10 @@ The `ng-class` directive allows dynamically setting CSS classes on an HTML
 element by binding to an expression. The directive supports the following
 expression types:
 
-1. **String** — space-delimited class names.
-2. **Object** — keys as class names and values as booleans. Truthy values add
-   the class.
-3. **Array** — containing strings and/or objects as described above.
+- **String** — space-delimited class names.
+- **Object** — keys as class names and values as booleans. Truthy values add the
+  class.
+- **Array** — containing strings and/or objects as described above.
 
 When the expression changes:
 
@@ -55,10 +55,10 @@ to the element:
   <div ng-class="{ active: isActive, disabled: isDisabled }"></div>
   ```
 
-### Example
+### Demo
 
 {{< showhtml src="examples/ng-class/ng-class.html" >}}
 
-### Demo
-
 {{< showraw src="examples/ng-class/ng-class.html" >}}
+
+---

package/docs/content/docs/directive/click.md

@@ -0,0 +1,38 @@
+---
+title: ng-click
+description: >
+  Handler for click event
+---
+
+### Description
+
+The `ng-click` directive allows you to specify custom behavior when an element
+is clicked.
+
+### Directive parameters
+
+---
+
+#### `ng-click`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
+  event.
+  [PointerEvent](https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-click="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-click/ng-click.html" >}}
+
+{{< showraw src="examples/ng-click/ng-click.html" >}}
+
+---

package/docs/content/docs/directive/cloak.md

@@ -45,7 +45,7 @@ CSS styles are available in npm distribution:
 />
 ```
 
-or using `style` tag:
+### Example
 
 ```html
 <style>
@@ -63,16 +63,12 @@ or using `style` tag:
     position: absolute;
   }
 </style>
-```
-
-### Example
-
-```html
-<section ng-app ng-clock>These tags are invisible {{ hello }}</section>
+<section ng-app ng-cloak>These tags are invisible {{ hello }}</section>
 ```
 
 ### Demo
 
-<section ng-app ng-clock> These tags are invisible {{ hello }} </section>
+<style>@charset "UTF-8";.ng-cloak,.ng-hide:not(.ng-hide-animate),[data-ng-cloak],[ng-cloak]{display:none!important}.ng-animate-shim{visibility:hidden}.ng-anchor{position:absolute}</style>
+<section ng-app ng-cloak> These tags are invisible {{ hello }} </section>
 
 ---

package/docs/content/docs/directive/copy.md

@@ -0,0 +1,38 @@
+---
+title: ng-copy
+description: >
+  Handler for copy event
+---
+
+### Description
+
+The `ng-copy` directive allows you to specify custom behavior when an element is
+copied.
+
+### Directive parameters
+
+---
+
+#### `ng-copy`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [copy](https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event)
+  event.
+  [ClipboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div contenteditable="true" ng-copy="$ctrl.greet($event)">Content</div>
+  ```
+
+---
+
+### Demo
+
+{{< showhtml src="examples/ng-copy/ng-copy.html" >}}
+
+{{< showraw src="examples/ng-copy/ng-copy.html" >}}
+
+---

package/docs/content/docs/directive/cut.md

@@ -0,0 +1,40 @@
+---
+title: ng-cut
+description: >
+  Handler for cut event
+---
+
+### Description
+
+The `ng-cut` directive allows you to specify custom behavior when an element is
+cut.
+
+### Directive parameters
+
+---
+
+#### `ng-cut`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [cut](https://developer.mozilla.org/en-US/docs/Web/API/Element/cut_event)
+  event.
+  [ClipboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent)
+  object is available as `$event`.
+
+- **Example:**
+
+  ```html
+  <div contenteditable="true" ng-cut="$ctrl.onCut($event)">
+    Cuttable content
+  </div>
+  ```
+
+---
+
+### Demo
+
+{{< showhtml src="examples/ng-cut/ng-cut.html" >}}
+{{< showraw src="examples/ng-cut/ng-cut.html" >}}
+
+---

package/docs/content/docs/directive/dblclick.md

@@ -0,0 +1,38 @@
+---
+title: ng-dblclick
+description: >
+  Handler for dblclick event
+---
+
+### Description
+
+The `ng-dblclick` directive allows you to specify custom behavior when an
+element is double clicked.
+
+### Directive parameters
+
+---
+
+#### `ng-dblclick`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [dblclick](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)
+  event.
+  [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-dblclick="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-dblclick/ng-dblclick.html" >}}
+
+{{< showraw src="examples/ng-dblclick/ng-dblclick.html" >}}
+
+---

package/docs/content/docs/directive/focus.md

@@ -0,0 +1,38 @@
+---
+title: ng-focus
+description: >
+  Handler for focus event
+---
+
+### Description
+
+The `ng-focus` directive allows you to specify custom behavior when an element
+is focused.
+
+### Directive parameters
+
+---
+
+#### `ng-focus`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [focus](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event)
+  event.
+  [FocusEvent](https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-focus="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-focus/ng-focus.html" >}}
+
+{{< showraw src="examples/ng-focus/ng-focus.html" >}}
+
+---

package/docs/content/docs/directive/mousedown.md

@@ -0,0 +1,38 @@
+---
+title: ng-mousedown
+description: >
+  Handler for mousedown event
+---
+
+### Description
+
+The `ng-mousedown` directive allows you to specify custom behavior when a mouse
+is pressed over an element.
+
+### Directive parameters
+
+---
+
+#### `ng-mousedown`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [mousedown](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousedown_event)
+  event.
+  [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-mousedown="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-mousedown/ng-mousedown.html" >}}
+
+{{< showraw src="examples/ng-mousedown/ng-mousedown.html" >}}
+
+---

package/docs/content/docs/directive/mouseenter.md

@@ -0,0 +1,38 @@
+---
+title: ng-mouseenter
+description: >
+  Handler for mouseenter event
+---
+
+### Description
+
+The `ng-mouseenter` directive allows you to specify custom behavior when a mouse
+enters an element.
+
+### Directive parameters
+
+---
+
+#### `ng-mouseenter`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [mouseenter](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event)
+  event.
+  [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-mouseenter="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-mouseenter/ng-mouseenter.html" >}}
+
+{{< showraw src="examples/ng-mouseenter/ng-mouseenter.html" >}}
+
+---

package/docs/content/docs/directive/mouseleave.md

@@ -0,0 +1,38 @@
+---
+title: ng-mouseleave
+description: >
+  Handler for mouseleave event
+---
+
+### Description
+
+The `ng-mouseleave` directive allows you to specify custom behavior when an
+element a mouse leaves entire element.
+
+### Directive parameters
+
+---
+
+#### `ng-mouseleave`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [mouseleave](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event)
+  event.
+  [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-mouseleave="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-mouseleave/ng-mouseleave.html" >}}
+
+{{< showraw src="examples/ng-mouseleave/ng-mouseleave.html" >}}
+
+---

package/docs/content/docs/directive/mousemove.md

@@ -0,0 +1,38 @@
+---
+title: ng-mousemove
+description: >
+  Handler for mousemove event
+---
+
+### Description
+
+The `ng-mousemove` directive allows you to specify custom custom behavior when a
+mouse is moved over an element.
+
+### Directive parameters
+
+---
+
+#### `ng-mousemove`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [mousemove](https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event)
+  event.
+  [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-mousemove="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-mousemove/ng-mousemove.html" >}}
+
+{{< showraw src="examples/ng-mousemove/ng-mousemove.html" >}}
+
+---

package/docs/content/docs/directive/mouseout.md

@@ -0,0 +1,38 @@
+---
+title: ng-mouseout
+description: >
+  Handler for mouseout event
+---
+
+### Description
+
+The `ng-mouseout` directive allows you to specify custom behavior when a mouse
+leaves any part of the element or its children.
+
+### Directive parameters
+
+---
+
+#### `ng-mouseout`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [mouseout](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseout_event)
+  event.
+  [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-mouseout="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-mouseout/ng-mouseout.html" >}}
+
+{{< showraw src="examples/ng-mouseout/ng-mouseout.html" >}}
+
+---

package/docs/content/docs/directive/mouseover.md

@@ -0,0 +1,38 @@
+---
+title: ng-mouseover
+description: >
+  Handler for mouseover event
+---
+
+### Description
+
+The `ng-mouseover` directive allows you to specify custom behavior when a mouse
+is placed over an element.
+
+### Directive parameters
+
+---
+
+#### `ng-mouseover`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [mouseover](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event)
+  event.
+  [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-mouseover="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-mouseover/ng-mouseover.html" >}}
+
+{{< showraw src="examples/ng-mouseover/ng-mouseover.html" >}}
+
+---

package/docs/content/docs/directive/mouseup.md

@@ -0,0 +1,38 @@
+---
+title: ng-mouseup
+description: >
+  Handler for mouseup event
+---
+
+### Description
+
+The `ng-mouseup` directive allows you to specify custom behavior when a pressed
+mouse is released over an element.
+
+### Directive parameters
+
+---
+
+#### `ng-mouseup`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [mouseup](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseup_event)
+  event.
+  [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-mouseup="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-mouseup/ng-mouseup.html" >}}
+
+{{< showraw src="examples/ng-mouseup/ng-mouseup.html" >}}
+
+---

package/docs/layouts/404.html

@@ -6,7 +6,7 @@
     <a href='{{ "" | relURL }}'>home page</a>.
   </p>
   <p>
-    You can learn how to make a 404 page like this in
+    You can learn how to make a 404-page like this in
     <a href="https://gohugo.io/templates/404/">Custom 404 Pages</a>.
   </p>
 </div>

package/docs/static/examples/eventbus/eventbus.js

@@ -1,4 +1,4 @@
-angular.module('demo', []).controller(
+window.angular.module('demo', []).controller(
   'DemoCtrl',
   class {
     static $inject = ['$eventBus', '$scope'];

package/docs/static/examples/ng-blur/ng-blur.html

@@ -0,0 +1,9 @@
+<section ng-app>
+  <input
+    type="text"
+    ng-blur="count = count + 1"
+    ng-init="count = 0"
+    placeholder="Click or tab away from me"
+  />
+  Lost focus {{ count }} times
+</section>