@angular-wave/angular.ts 0.7.3 → 0.7.5

package/docs/assets/scss/_variables_project.scss

@@ -9,4 +9,4 @@ $secondary: #005fc4;
 
 $td-enable-google-fonts: true;
 $td-google-font-name: 'Inter';
-$td-google-font-family: 'Inter:300,400,700,800,900';
+$td-google-font-family: 'Inter:300,400,700,800,900';

package/docs/assets/scss/_variables_project_after_bs.scss

@@ -1,8 +1,8 @@
 body {
-    font-family: 'Inter', sans-serif !important;
-    & .navbar-brand__name {
-        margin-left: -5px;
-    }
+  font-family: 'Inter', sans-serif !important;
+  & .navbar-brand__name {
+    margin-left: -5px;
+  }
 }
 
-@import "index.scss";
+@import 'index.scss';

package/docs/assets/scss/index.scss

@@ -1,5 +1,4 @@
 #td-cover-block-0 {
-  
   h1 {
     font-weight: 900;
 
@@ -7,8 +6,8 @@
       color: var(--bs-secondary);
     }
   }
-  
+
   &::after {
     background-color: white !important; // override dark overlay
   }
-}
+}

package/docs/content/_index.md

@@ -6,7 +6,7 @@ title: AngularTS
 
 <div class="text-center">
   <h1 class="display-1 mt-0 mt-md-5 pb-4">Angular<span>TS</span></h1>
-</div>     
+</div>
 
 <p class="lead mb-5">A modern, reactive and typesafe evolution of the classic JS framework from Google&copy;</p>
 <a class="btn btn-lg btn-secondary me-3 mb-4" href="https://github.com/Angular-Wave/angular.ts">

package/docs/content/docs/_index.md

@@ -1,27 +1,61 @@
-<!-- ---
+---
 title: Documentation
 linkTitle: Docs
-menu: {main: {weight: 20}}
---- -->
-
-{{% pageinfo %}} This is a placeholder page that shows you how to use this
-template site. {{% /pageinfo %}}
-
-This section is where the user documentation for your project lives - all the
-information your users need to understand and successfully use your project.
-
-For large documentation sets we recommend adding content under the headings in
-this section, though if some or all of them don’t apply to your project feel
-free to remove them or add your own. You can see an example of a smaller Docsy
-documentation site in the [Docsy User Guide](https://docsy.dev/docs/), which
-lives in the
-[Docsy theme repo](https://github.com/google/docsy/tree/master/userguide) if
-you'd like to copy its docs section.
-
-Other content such as marketing material, case studies, and community updates
-should live in the [About](/about/) and [Community](/community/) pages.
-
-Find out how to use the Docsy theme in the
-[Docsy User Guide](https://docsy.dev/docs/). You can learn more about how to
-organize your documentation (and how we organized this site) in
-[Organizing Your Content](https://docsy.dev/docs/best-practices/organizing-content/).
+menu: { main: { weight: 20 } }
+---
+
+Welcome to AngularTS documentation.
+
+This section is a work in progress. Its content will be updated regularly but
+feel free to rely on [AngularJS](https://docs.angularjs.org/guide) documentation
+in the meantime.
+
+---
+
+### What is AngularTS?
+
+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/) 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:
+
+#### Example
+
+{{< showhtml src="examples/counter/counter.html" >}}
+
+#### Result
+
+{{< showraw src="examples/counter/counter.html" >}}
+
+---
+
+This code demonstrates the following key AngularTS features:
+
+- **HTML-first:** AngularTS is designed for HTML-first approach, meaning your
+  application logic can be expressed declaratively in your markup using custom
+  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
+  Angular's interpolation syntax. As the value of `count` variable increases,
+  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
+  (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
+  development in general. But beneath its lightweight surface, it supports
+  structured enterprise design patterns, MVC architecture, and component-driven
+  design. With its rich directive library, state-based routing and support for
+  animations, AngularTS is a complete package for building large SPAs, server,
+  mobile, and desktop applications.

package/docs/content/docs/directive/_index.md

@@ -0,0 +1,4 @@
+---
+title: Directives
+weight: 10
+---

package/docs/content/docs/directive/app.md

@@ -0,0 +1,11 @@
+---
+title: ng-app
+description: >
+  Bootstrap AngularTS application
+---
+
+### Description
+
+Use this directive to auto-bootstrap an AngularTS application. The `ng-app`
+directive designates the root element of the application and is typically placed
+near the root element of the page - e.g. on the <body> or <html> tags.

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

@@ -0,0 +1,37 @@
+---
+title: ng-channel
+description: >
+  Subscribe a template to a messaging service topic
+---
+
+### Description
+
+Updates element’s content by subscribing to events published on a named channel
+using `$eventBus`.
+
+- If the element **does not** contain any child elements or templates, the
+  directive will **replace the element's inner HTML** with the published value.
+- If the element **does** contain a template and the published value is an
+  **object**, the directive will **merge the object’s key-value pairs into the
+  current scope**, allowing Angular expressions like `{{ user.firstName }}` to
+  be evaluated and rendered.
+
+The directive automatically unsubscribes from the event channel when the scope
+is destroyed.
+
+### Parameters
+
+---
+
+#### `ng-channel`
+
+- **Type:** `string`
+- **Description:** The name of the channel to subscribe to using `$eventBus`.
+
+### Demo
+
+{{< showhtml src="examples/ng-channel/ng-channel.html" >}}
+
+{{< showraw src="examples/ng-channel/ng-channel.html" >}}
+
+---

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

@@ -0,0 +1,47 @@
+---
+title: ng-class-even
+description: >
+  Apply CSS classes to even-indexed elements inside `ng-repeat`.
+---
+
+### Description
+
+The `ng-class-even` directive works just like [`ng-class`](./class), but it
+applies only to **even-indexed** elements in an [`ng-repeat`](../repeat) block.
+
+> Must be used inside `ng-repeat`.
+
+### Animations
+
+If `data-animate` attribute is present, the following animations will be applied
+to the element:
+
+| Animation                               | Occurs                                       |
+| --------------------------------------- | -------------------------------------------- |
+| [`add-class`](../../service/animate)    | Before the class is applied to the element   |
+| [`remove-class`](../../service/animate) | Before the class is removed from the element |
+
+### Directive parameters
+
+---
+
+#### `ng-class-even`
+
+- **Type:** `string | array`
+- **Description:** An expression evaluating to a space-delimited string or array
+  of class names.
+- **Example:**
+
+  ```html
+  <div ng-repeat="item in items" ng-class-even="'even-row'"></div>
+  ```
+
+---
+
+### Demo
+
+{{< showhtml src="examples/ng-class-even/ng-class-even.html" >}}
+
+{{< showraw src="examples/ng-class-even/ng-class-even.html" >}}
+
+---

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

@@ -0,0 +1,48 @@
+---
+title: ng-class-odd
+description: >
+  Apply CSS classes to odd-indexed elements inside `ng-repeat`.
+---
+
+### Description
+
+The `ng-class-odd` directive works just like [`ng-class`](../class), but it
+applies only to **odd-indexed** elements inside an [`ng-repeat`](../repeat)
+block.
+
+> Must be used inside `ng-repeat`.
+
+### Animations
+
+If `data-animate` attribute is present, the following animations will be applied
+to the element:
+
+| Animation                               | Occurs                                       |
+| --------------------------------------- | -------------------------------------------- |
+| [`add-class`](../../service/animate)    | Before the class is applied to the element   |
+| [`remove-class`](../../service/animate) | Before the class is removed from the element |
+
+### Directive parameters
+
+---
+
+#### `ng-class-odd`
+
+- **Type:** `string | array`
+- **Description:** An expression evaluating to a space-delimited string or array
+  of class names.
+- **Example:**
+
+  ```html
+  <div ng-repeat="item in items" ng-class-odd="'odd-row'"></div>
+  ```
+
+---
+
+### Demo
+
+{{< showhtml src="examples/ng-class-odd/ng-class-odd.html" >}}
+
+{{< showraw src="examples/ng-class-odd/ng-class-odd.html" >}}
+
+---

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

@@ -0,0 +1,64 @@
+---
+title: ng-class
+description: >
+  Dynamically bind one or more CSS classes using expressions.
+---
+
+### Description
+
+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:
+
+- **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:
+
+- Previously added classes are removed.
+- New classes are added.
+- Duplicate classes are avoided.
+
+**Important**: Avoid using interpolation (`{{ ... }}`) in the value of the
+`class` attribute together with `ng-class`. See
+[interpolation known issues](../../../docs/guide/interpolation#known-issues) for
+details.
+
+### Animations
+
+If `data-animate` attribute is present, the following animations will be applied
+to the element:
+
+| Animation                               | Occurs                                              |
+| --------------------------------------- | --------------------------------------------------- |
+| [`add-class`](../../service/animate)    | Before the class is applied to the element          |
+| [`remove-class`](../../service/animate) | Before the class is removed from the element        |
+| [`set-class`](../../service/animate)    | Before classes are simultaneously added and removed |
+
+> `ng-class` supports standard CSS3 transitions/animations even if they don’t
+> follow `$animate` service naming conventions.
+
+### Directive parameters
+
+---
+
+#### `ng-class`
+
+- **Type:** `string | object | array`
+- **Description:** An expression whose result determines the CSS classes to
+  apply.
+- **Example:**
+
+  ```html
+  <div ng-class="{ active: isActive, disabled: isDisabled }"></div>
+  ```
+
+### Demo
+
+{{< showhtml src="examples/ng-class/ng-class.html" >}}
+
+{{< 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

@@ -0,0 +1,74 @@
+---
+title: ng-cloak
+description: >
+  Hide interpolated templates
+---
+
+### Description
+
+The `ng-cloak` directive is used to prevent the HTML template from being briefly
+displayed by the browser in its raw (uncompiled) form while your application is
+loading. Use this directive to avoid the undesirable flicker effect caused by
+the HTML template display.
+
+The directive can be applied to the `<body>` element, but the preferred usage is
+to apply multiple `ng-cloak` directives to small portions of the page to permit
+progressive rendering of the browser view.
+
+`ng-cloak` works in cooperation with the following CSS rule:
+
+```css
+@charset "UTF-8";
+
+[ng-cloak],
+[data-ng-cloak],
+.ng-cloak,
+.ng-hide:not(.ng-hide-animate) {
+  display: none !important;
+}
+
+.ng-animate-shim {
+  visibility: hidden;
+}
+
+.ng-anchor {
+  position: absolute;
+}
+```
+
+CSS styles are available in npm distribution:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@angular-wave/angular.ts/css/angular.min.css"
+/>
+```
+
+### Example
+
+```html
+<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>
+```
+
+### Demo
+
+<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/include.md

@@ -0,0 +1,7 @@
+---
+title: ng-include
+description: >
+  Include a template
+---
+
+### Description