@angular-wave/angular.ts 0.7.3 → 0.7.4

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,60 @@
-<!-- ---
+---
 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/) of 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 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/channel.md

@@ -0,0 +1,39 @@
+---
+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`.
+
+### Example
+
+{{< 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

@@ -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>
+  ```
+
+---
+
+### Example
+
+{{< 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

@@ -0,0 +1,48 @@
+---
+title: ng-class-odd
+description: >
+  Apply CSS classes to odd-indexed elements inside `ngRepeat`.
+---
+
+### 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>
+  ```
+
+---
+
+### Example
+
+{{< 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

@@ -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:
+
+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.
+
+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>
+  ```
+
+### Example
+
+{{< showhtml src="examples/ng-class/ng-class.html" >}}
+
+### Demo
+
+{{< showraw src="examples/ng-class/ng-class.html" >}}

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

@@ -0,0 +1,78 @@
+---
+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"
+/>
+```
+
+or using `style` tag:
+
+```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>
+```
+
+### Example
+
+```html
+<section ng-app ng-clock>These tags are invisible {{ hello }}</section>
+```
+
+### Demo
+
+<section ng-app ng-clock> These tags are invisible {{ hello }} </section>
+
+---

package/docs/content/docs/directive/include.md

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

package/docs/content/docs/filter/_index.md

@@ -0,0 +1,4 @@
+---
+title: Filters
+weight: 60
+---

package/docs/content/docs/provider/_index.md

@@ -0,0 +1,4 @@
+---
+title: Providers
+weight: 30
+---

package/docs/content/docs/provider/eventBusProvider.md

@@ -0,0 +1,35 @@
+---
+title: $eventBusProvider
+description: >
+  Configuration provider for `$eventBus` service.
+---
+
+### Description
+
+Instance of [PubSubProvider](../../../typedoc/classes/PubSubProvider.html) for
+configuring the `$eventBus` service. The default implementation returns the
+global `angular.EventBus` instance, which is an async instance of
+[PubSub](../../../typedoc/classes/PubSub.html) class.
+
+### Properties
+
+---
+
+#### $eventBusProvider.eventBus
+
+Customize event bus instance.
+
+- **Type:** [PubSub](../../../typedoc/classes/PubSub.html)
+- **Default:** `angular.EventBus`
+
+- **Example:**
+
+  ```js
+  angular.module('demo', []).config(($eventBusProvider) => {
+    eventBusProvider.eventBus = new MyCustomPubsub();
+  });
+  ```
+
+---
+
+For service description, see [$eventBus](../../../docs/service/eventbus).

package/docs/content/docs/provider/logProvider.md

@@ -0,0 +1,59 @@
+---
+title: $logProvider
+description: >
+  Configuration provider for `$log` service.
+---
+
+### Description
+
+Instance of [LogProvider](../../../typedoc/classes/LogProvider.html) for
+configuring how the application logs messages.
+
+### Properties
+
+---
+
+#### $logProvider.debug
+
+Enable or disable debug-level logging. Also see
+[debug property](../../../typedoc/classes/LogProvider.html#debug).
+
+- **Type:** boolean
+- **Default:** `false`
+- **Example:**
+
+  ```js
+  angular.module('demo', []).config(($logProvider) => {
+    $logProvider.debug = true;
+  });
+  ```
+
+### Methods
+
+---
+
+#### $logProvider.setLogger()
+
+Override the default logger with a custom implementation of the
+[LogService](../../../typedoc/interfaces/LogService.html) interface.
+
+- **Parameter:**
+  [LogServiceFactory](../../../typedoc/types/LogServiceFactory.html)
+
+- **Example:**
+
+  ```js
+  angular.module('demo', []).config(($logProvider) => {
+    $logProvider.setLogger(() => ({
+      log: () => {},
+      info: () => {},
+      warn: () => {},
+      error: () => {},
+      debug: () => {},
+    }));
+  });
+  ```
+
+---
+
+For service description, see [$log](../../../docs/service/log).

package/docs/content/docs/provider/templateCacheProvider.md

@@ -0,0 +1,35 @@
+---
+title: $templateCacheProvider
+description: >
+  Cache provider for `$templateCache` service.
+---
+
+### Description
+
+Initializes cache instancce for `$templateCache` service as an empty
+[Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)
+object.
+
+### Properties
+
+---
+
+#### $templateCacheProvider.cache
+
+Customize cache instance.
+
+- **Type:** [TemplateCache](../../../typedoc/types/TemplateCache.html)
+- **Default:** `Map`
+
+- **Example:**
+
+  ```js
+  angular.module('demo', []).config(($templateCacheProvider) => {
+    templateCacheProvider.cache.set('test.html', 'hello');
+  });
+  ```
+
+---
+
+For service description, see
+[$templateCache](../../../docs/service/templatecache).

package/docs/content/docs/service/_index.md

@@ -0,0 +1,4 @@
+---
+title: Services
+weight: 40
+---

package/docs/content/docs/service/eventBus.md

@@ -0,0 +1,56 @@
+---
+title: $eventBus
+description: >
+  Pubsub messaging service
+---
+
+### Description
+
+A messaging service, backed by an instance of
+[PubSub](../../../typedoc/classes/PubSub.html). This implementation is based on
+the original
+[Google Closure PubSub](https://google.github.io/closure-library/api/goog.pubsub.PubSub.html)
+but uses
+[`Promise.resolve()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve)
+instead of
+[`Window.setTimeout()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout)
+for its async implementation. `$eventBus` allows communication between an
+Angular application instance and the outside context, which can be a different
+module, a non-Angular application, a third-party party library, or even a WASM
+application. Additionally, `$eventBus` can be used to communicate directly with
+a template, using [`ng-channel`](../../../docs/directive/channel) directive.
+
+`$eventBus` should not be used for communicating between Angular's own
+primitives.
+
+- **For sharing application state**: use custom Services and Factories that
+  encapsulate your business logic and manage your model.
+- **For intercomponent communication**: use `$scope.$on()`, `$scope.$emit()`,
+  and `$scope.$broadcast()` methods.
+
+The example below demonstrates communication between the global `window` context
+and a controller. **Note**: Ensure topic clean-up after the `$scope` is
+destroyed
+
+#### Example
+
+{{< showhtml src="examples/eventbus/eventbus.html" >}}
+
+{{< showjs src="examples/eventbus/eventbus.js" >}}
+
+---
+
+#### Demo
+
+{{< showraw src="examples/eventbus/eventbus.html" >}}
+
+<script>
+{{< showraw src="examples/eventbus/eventbus.js" >}}
+</script>
+
+---
+
+For detailed method description, see
+[PubSub](../../../typedoc/classes/PubSub.html)
+
+---