Skip to content

Update to 3.10, binding fixes for inputs #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
GedMarc merged 1 commit into from
Jul 2, 2026
Merged

Update to 3.10, binding fixes for inputs #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,37 @@ All notable changes to this project will be documented in this file.
The format is based on Keep a Changelog and this project adheres to Semantic Versioning.


## [3.10.0] - 2026-07-01
### Added
- **wa-random-content:** New `WaRandomContentDirective` wrapping the new `<wa-random-content>` web component:
- Inputs: `items` (`number`), `mode` (`'random' | 'unique' | 'sequence'`), `autoplay` (`boolean`), `autoplayInterval` (`autoplay-interval`, `number`), `animation` (`'none' | 'fade' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right'`)
- Style inputs: `animationDuration` → `--animation-duration`, `animationEasing` → `--animation-easing`, `animationTranslate` → `--animation-translate`
- Method: `randomize()` — selects a new set of children using the current mode and returns the elements now shown
- Event output: `waContentChange` / `wa-content-change` — emitted whenever the displayed selection changes
- Slot: `(default)` for the pool of children to choose from
- Exposes `nativeElement` for direct DOM access
- Exported `WaRandomContentDirective` from the public API surface.
- Unit tests, rules, and example documentation for `wa-random-content`.
- **wa-icon:** New `canvas` input (`'fixed' | 'auto' | 'square' | 'roomy'`) mapping to the new `canvas` attribute that sets the box the icon is centered within.
- **wa-option:** New `currentTextColor` input mapping to the new `--current-text-color` CSS custom property (the text color of the current/highlighted option).

### Fixed
- **wa-number-input:** Fixed handling of string values on the number input. `WaNumberInputDirective` now:
- Accepts `value` as `string | number | null` and reflects string-typed values to the `value` attribute correctly (numeric-looking strings are no longer dropped or mangled).
- Implements `ControlValueAccessor` and `Validator`, so `[(ngModel)]` / reactive forms round-trip string values and expose `required` / `min` / `max` validation errors.
- Emits `waInput` / `waChange` (plus hyphenated `wa-input` / `wa-change` aliases), `waFocus`, `waBlur`, `waInvalid`, and `valueChange`, listening to both native and `wa-`prefixed events.
- Handles `step="any"` and removes numeric attributes when cleared, and adds `focus()`, `blur()`, `select()`, `stepUp()`, `stepDown()` methods plus `form` support and `nativeElement` access.
- Added unit tests covering `wa-number-input` string-value binding, validation, and event forwarding.

### Changed
- **wa-icon:** Documented the new animation CSS custom properties added in Web Awesome 3.10 (`--flip-anticipation-scale`, `--flip-overshoot`, `--bounce-anticipation`, `--buzz-distance`, `--wag-angle`, `--swing-angle`, `--jello-scale-x/y`, `--float-*`) and the updated `flip`/`flip-360` and `--beat-scale` behavior. These are upstream additions set via style bindings; no new Angular inputs are required.
- Updated `llms.txt` to Web Awesome 3.10.0.

### Notes
- This release aligns Angular Awesome with the **Web Awesome 3.10.0** component specification.
- 1 new component added (`wa-random-content`), 2 components updated (`wa-icon`, `wa-option`), and 1 bug fix (`wa-number-input` string-value handling). No breaking changes to the Angular API.


## [3.9.0] - 2026-06-18
### Added
- **wa-checkbox-group:** New `WaCheckboxGroupDirective` wrapping the new `<wa-checkbox-group>` web component:
Expand Down
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
|--------------|----------|
| Angular | `>=20.0` |
| Node.js | `20+` |
| Web Awesome* | `3.9.x` |
| Web Awesome* | `3.10.x` |

## Installation

Expand Down
8 changes: 8 additions & 0 deletions docs/components.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -627,6 +627,14 @@ <h3>Radio <span class="tag">Input</span></h3>
<a href="https://github.com/GedMarc/angular-awesome/tree/master/src/directives/radio" target="_blank">Source</a>
</div>
</div>
<div class="component-card" data-category="utility">
<h3>RandomContent <span class="tag">Utility</span></h3>
<p>Selects one or more child elements at random and displays them, hiding the rest. Use it for rotating banners, testimonials, tips, or featured content where the exact item shown does not matter.</p>
<div class="links">
<a href="components/random-content.html">Documentation</a>
<a href="https://github.com/GedMarc/angular-awesome/tree/master/src/directives/random-content" target="_blank">Source</a>
</div>
</div>
<div class="component-card" data-category="utility">
<h3>Rating <span class="tag">Utility</span></h3>
<p><wa-rating> provides rating functionality for Angular applications.</p>
Expand Down
234 changes: 234 additions & 0 deletions docs/components/random-content.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Awesome - RandomContent Component</title>
<link rel="stylesheet" href="../includes/styles.css">
<!-- Syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/css.min.js"></script>
<style>
/* Copy button styles */
pre {
position: relative;
}
.copy-button {
position: absolute;
top: 5px;
right: 5px;
padding: 5px 8px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
}
pre:hover .copy-button {
opacity: 1;
}
.copy-button:hover {
background-color: #e0e0e0;
}
.copy-button.copied {
background-color: #4CAF50;
color: white;
border-color: #4CAF50;
}

/* Version badge */
.version-badge {
display: inline-block;
padding: 3px 8px;
background-color: #0066cc;
color: white;
border-radius: 12px;
font-size: 0.8rem;
margin-left: 10px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content-wrapper">
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-header">
<h3>Angular Awesome</h3>
</div>
<button class="sidebar-toggle">Show Navigation</button>
<div class="sidebar-content">
<ul class="sidebar-nav">
<li><a href="../index.html">Home</a></li>
<li><a href="../getting-started.html">Getting Started</a></li>
<li>
<span class="sidebar-section">Components</span>
<ul>
<li><a href="button.html">Button</a></li>
<li><a href="tree.html">Tree</a></li>
<li><a href="textarea.html">Text Area</a></li>
<li><a href="tooltip.html">Tooltip</a></li>
</ul>
</li>
<li><a href="../components.html">All Components</a></li>
<li><a href="../rules.html">Rules & Guidelines</a></li>
</ul>
</div>
<div class="sidebar-footer">
<a href="https://github.com/GedMarc/angular-awesome" target="_blank">GitHub Repository</a>
</div>
</div>

<!-- Main Content -->
<div class="main-content">
<header>
<h1>RandomContent Component <span class="version-badge">synced with Web Awesome 3.7.0</span></h1>
<p class="subtitle">Selects one or more child elements at random and displays them, hiding the rest. Use it for rotating banners, testimonials, tips, or featured content where the exact item shown does not matter.</p>
Comment on lines +90 to +91
</header>

<main>
<!-- Page content goes here -->

<section>
<h2>Overview</h2>
<p></p>
</section>

<section>
<h2>Import</h2>
<p>Import the randomContent directive from the angular-awesome package:</p>
<pre>// Import the randomContent directive
import { WaRandomContentDirective } from 'angular-awesome/random-content';</pre>
</section>

<section>
<h2>Examples</h2>
<h1>WaRandomContentDirective Usage Examples</h1>
<h2>Basic Usage</h2>
<p>Shows one randomly selected child at a time and hides the rest.</p>
<pre><code class="language-html">&lt;wa-random-content&gt;
&lt;p&gt;“Design is not just what it looks like and feels like. Design is how it works.”&lt;/p&gt;
&lt;p&gt;“Simplicity is the ultimate sophistication.”&lt;/p&gt;
&lt;p&gt;“Good design is obvious. Great design is transparent.”&lt;/p&gt;
&lt;/wa-random-content&gt;
</code></pre>
<h2>Showing Multiple Items</h2>
<p>Use <code>items</code> to display more than one child simultaneously.</p>
<pre><code class="language-html">&lt;wa-random-content [items]=&quot;2&quot;&gt;
&lt;wa-card&gt;Featured A&lt;/wa-card&gt;
&lt;wa-card&gt;Featured B&lt;/wa-card&gt;
&lt;wa-card&gt;Featured C&lt;/wa-card&gt;
&lt;wa-card&gt;Featured D&lt;/wa-card&gt;
&lt;/wa-random-content&gt;
</code></pre>
<h2>Selection Modes</h2>
<p><code>unique</code> (default) avoids repeats until the pool is exhausted, <code>random</code> allows repeats, and <code>sequence</code> cycles in order.</p>
<pre><code class="language-html">&lt;wa-random-content mode=&quot;sequence&quot;&gt;
&lt;img src=&quot;/assets/slide-1.jpg&quot; alt=&quot;Slide 1&quot; /&gt;
&lt;img src=&quot;/assets/slide-2.jpg&quot; alt=&quot;Slide 2&quot; /&gt;
&lt;img src=&quot;/assets/slide-3.jpg&quot; alt=&quot;Slide 3&quot; /&gt;
&lt;/wa-random-content&gt;
</code></pre>
<h2>Autoplay with an Entrance Animation</h2>
<pre><code class="language-html">&lt;wa-random-content autoplay [autoplayInterval]=&quot;5000&quot; animation=&quot;fade-up&quot;&gt;
&lt;blockquote&gt;Tip #1&lt;/blockquote&gt;
&lt;blockquote&gt;Tip #2&lt;/blockquote&gt;
&lt;blockquote&gt;Tip #3&lt;/blockquote&gt;
&lt;/wa-random-content&gt;
</code></pre>
<h2>Reacting to Changes and Randomizing Programmatically</h2>
<pre><code class="language-html">&lt;wa-random-content #banner (waContentChange)=&quot;onBannerChange($event)&quot;&gt;
&lt;div&gt;Promo A&lt;/div&gt;
&lt;div&gt;Promo B&lt;/div&gt;
&lt;div&gt;Promo C&lt;/div&gt;
&lt;/wa-random-content&gt;

&lt;wa-button (click)=&quot;banner.randomize()&quot;&gt;Shuffle&lt;/wa-button&gt;
</code></pre>
<pre><code class="language-ts">onBannerChange(event: CustomEvent) {
console.log(&#39;Now showing&#39;, event.target);
}
</code></pre>
<h2>Styling the Entrance Animation</h2>
<pre><code class="language-html">&lt;wa-random-content
animation=&quot;fade-left&quot;
animationDuration=&quot;400ms&quot;
animationEasing=&quot;ease-in-out&quot;
animationTranslate=&quot;1em&quot;
&gt;
&lt;span&gt;Alpha&lt;/span&gt;
&lt;span&gt;Bravo&lt;/span&gt;
&lt;span&gt;Charlie&lt;/span&gt;
&lt;/wa-random-content&gt;
</code></pre>

</section>

<section>
<h2>API Reference</h2>

</section>

<section>
<h2>Styling</h2>

</section>

</main>

<footer>
<p>2025 GedMarc</p>
<p><a href="../index.html">Back to Home</a></p>
</footer>
</div>
</div>

<script src="includes/scripts.js"></script>
<script>
// Initialize syntax highlighting
document.addEventListener('DOMContentLoaded', function() {
// Apply syntax highlighting to all code blocks
document.querySelectorAll('pre code').forEach(block => {
hljs.highlightElement(block);

// Add copy button to each code block
const copyButton = document.createElement('button');
copyButton.className = 'copy-button';
copyButton.textContent = 'Copy';

// Insert the button into the pre element (parent of code)
block.parentElement.appendChild(copyButton);

// Add click event to copy code
copyButton.addEventListener('click', function() {
const code = block.textContent;
navigator.clipboard.writeText(code).then(() => {
// Visual feedback
copyButton.textContent = 'Copied!';
copyButton.classList.add('copied');

// Reset after 2 seconds
setTimeout(() => {
copyButton.textContent = 'Copy';
copyButton.classList.remove('copied');
}, 2000);
}).catch(err => {
console.error('Failed to copy: ', err);
copyButton.textContent = 'Error';

// Reset after 2 seconds
setTimeout(() => {
copyButton.textContent = 'Copy';
}, 2000);
});
});
});
});
</script>
</body>
</html>
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "angular-awesome",
"version": "3.9.0",
"version": "3.10.0",
"private": false,
"description": "Angular 20+ wrappers for the Web Awesome 3.9.x web components framework",
"description": "Angular 20+ wrappers for the Web Awesome 3.10.x web components framework",
"keywords": [
"angular",
"web-awesome",
Expand Down
2 changes: 1 addition & 1 deletion skills/angular-awesome/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ metadata:

# Angular Awesome

Angular 20+ standalone directives wrapping Web Awesome 3.9.x web components. Every `<wa-*>` tag has a corresponding `Wa*Directive` or `Wa*Component` that binds attributes as `@Input()` properties, emits custom events as `@Output()`, and exposes `nativeElement` for direct access.
Angular 20+ standalone directives wrapping Web Awesome 3.10.x web components. Every `<wa-*>` tag has a corresponding `Wa*Directive` or `Wa*Component` that binds attributes as `@Input()` properties, emits custom events as `@Output()`, and exposes `nativeElement` for direct access.

## Quick Start

Expand Down
1 change: 1 addition & 0 deletions skills/angular-awesome/references/component-catalog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ Quick reference for all exported directives/components, their selectors, and pri
| Animated Image | `wa-animated-image` | src, alt, play |
| Animation | `wa-animation` | name, duration, delay, iterations, easing, play |
| Zoomable Frame | `wa-zoomable-frame` | src |
| Random Content | `wa-random-content` | items, mode, autoplay, autoplayInterval, animation |

## Formatters
| Component | Selector | Key Inputs |
Expand Down
Loading
Loading