Update to 3.10, binding fixes for inputs#64
Merged
Merged
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates Angular Awesome to align with Web Awesome 3.10.x, adds a new wa-random-content Angular directive wrapper, and broadens several directive/component numeric inputs to accept string values (to support standard template bindings) with corresponding test coverage updates.
Changes:
- Added
WaRandomContentDirective(+ docs/rules/examples/tests) and exported it from the public API. - Updated multiple wrappers to accept
number | stringfor numeric inputs (e.g., sliders, charts, progress, textarea) and added/extended coercion tests. - Added Web Awesome 3.10 inputs/docs for
wa-icon(canvas) andwa-option(currentTextColor), and substantially enhancedwa-number-inputbindings (CVA/validation/event forwarding).
Reviewed changes
Copilot reviewed 55 out of 55 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/public-api.ts | Exports the new random-content directive from the main package surface. |
| src/directives/text-area/textarea.spec.ts | Updates textarea host typings + adds tests for numeric-string bindings. |
| src/directives/text-area/textarea.component.ts | Expands numeric inputs to accept `number |
| src/directives/split-panel/split-panel.directive.ts | Expands numeric inputs to accept `number |
| src/directives/split-panel/split-panel.directive.spec.ts | Adds coercion tests for split-panel numeric attributes. |
| src/directives/slider/slider.directive.ts | Expands numeric inputs to accept `number |
| src/directives/slider/slider.directive.spec.ts | Adds tests for numeric-string bindings and non-numeric rejection. |
| src/directives/scatter-chart/scatter-chart.directive.ts | Expands min/max to accept `number |
| src/directives/scatter-chart/scatter-chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/random-content/random-content.rules.md | Adds rules documentation for wa-random-content. |
| src/directives/random-content/random-content.example.md | Adds usage examples for wa-random-content. |
| src/directives/random-content/random-content.directive.ts | Introduces WaRandomContentDirective wrapper (inputs, outputs, method). |
| src/directives/random-content/random-content.directive.spec.ts | Adds unit tests for random-content bindings/events/method exposure. |
| src/directives/random-content/index.ts | Adds subpath barrel export for random-content. |
| src/directives/radar-chart/radar-chart.directive.ts | Expands min/max to accept `number |
| src/directives/radar-chart/radar-chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/progress-ring/progress-ring.directive.ts | Expands value to accept `number |
| src/directives/progress-ring/progress-ring.directive.spec.ts | Adds tests for string value binding affecting attributes/CSS vars. |
| src/directives/progress-bar/progress-bar.directive.ts | Expands value to accept `number |
| src/directives/progress-bar/progress-bar.directive.spec.ts | Adds tests for string value binding affecting attributes/CSS vars. |
| src/directives/polar-area-chart/polar-area-chart.directive.ts | Expands min/max to accept `number |
| src/directives/polar-area-chart/polar-area-chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/pie-chart/pie-chart.directive.ts | Expands min/max to accept `number |
| src/directives/pie-chart/pie-chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/option/option.rules.md | Documents new currentTextColor CSS var binding for Web Awesome 3.10. |
| src/directives/option/option.directive.ts | Adds currentTextColor input mapped to --current-text-color. |
| src/directives/option/option.directive.spec.ts | Adds tests for setting/clearing --current-text-color. |
| src/directives/number-input/number-input.directive.ts | Major rewrite: CVA/Validator + event forwarding + numeric/string input handling. |
| src/directives/number-input/number-input.directive.spec.ts | Adds extensive tests for bindings, events, ngModel, validation, and APIs. |
| src/directives/line-chart/line-chart.directive.ts | Expands min/max to accept `number |
| src/directives/line-chart/line-chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/icon/icon.rules.md | Documents new canvas input + new 3.10 animation CSS properties. |
| src/directives/icon/icon.directive.ts | Adds canvas input mapped to the canvas attribute. |
| src/directives/icon/icon.directive.spec.ts | Adds tests for setting/clearing canvas. |
| src/directives/format-number/format-number.directive.ts | Expands value to accept `number |
| src/directives/format-number/format-number.directive.spec.ts | Adds tests for string value attribute binding. |
| src/directives/format-bytes/format-bytes.directive.ts | Expands value to accept `number |
| src/directives/format-bytes/format-bytes.directive.spec.ts | Adds tests for string value binding and non-numeric rejection. |
| src/directives/doughnut-chart/doughnut-chart.directive.ts | Expands min/max to accept `number |
| src/directives/doughnut-chart/doughnut-chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/chart/chart.directive.ts | Expands min/max to accept `number |
| src/directives/chart/chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/bubble-chart/bubble-chart.directive.ts | Expands min/max to accept `number |
| src/directives/bubble-chart/bubble-chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/bar-chart/bar-chart.directive.ts | Expands min/max to accept `number |
| src/directives/bar-chart/bar-chart.directive.spec.ts | Adds tests for numeric-string min/max bindings. |
| src/directives/animation/animation.directive.ts | Expands numeric timing inputs to accept `number |
| src/directives/animation/animation.directive.spec.ts | Adds tests for numeric-string coercion on timing attributes. |
| skills/angular-awesome/SKILL.md | Updates skill docs to reference Web Awesome 3.10.x. |
| skills/angular-awesome/references/component-catalog.md | Adds Random Content to the exported component catalog. |
| README.md | Updates advertised supported Web Awesome version to 3.10.x. |
| package.json | Bumps package version/description to 3.10.0 / 3.10.x. |
| docs/components/random-content.html | Adds generated docs page for Random Content. |
| docs/components.html | Adds Random Content to the components index page. |
| CHANGELOG.md | Adds 3.10.0 release notes for new/updated directives and fixes. |
Comments suppressed due to low confidence (1)
src/directives/chart/chart.directive.ts:107
- setNumericAttr() only ever sets attributes, but never removes them when the input becomes null/undefined. This means clearing min/max in Angular won’t clear the corresponding DOM attributes, leaving stale values on the underlying web component.
private setNumericAttr(name: string, value: number | string | null | undefined) {
if (value != null) {
this.renderer.setAttribute(this.el.nativeElement, name, String(value));
}
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+90
to
+91
| <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> |
| </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> |
Comment on lines
+82
to
89
| private setNumericAttr(name: string, value: number | string | null | undefined) { | ||
| if (value != null) { | ||
| this.renderer.setAttribute(this.el.nativeElement, name, value.toString()); | ||
| const numericValue = typeof value === 'string' ? parseFloat(value) : value; | ||
| if (!isNaN(numericValue)) { | ||
| this.renderer.setAttribute(this.el.nativeElement, name, numericValue.toString()); | ||
| } | ||
| } | ||
| } |
Comment on lines
231
to
240
| private setNumericAttr(name: string, value: number | string | null | undefined) { | ||
| if (value !== undefined && value !== null && value !== '') { | ||
| const n = typeof value === 'string' ? parseFloat(value) : value; | ||
| if (!isNaN(n as number)) { | ||
| this.renderer.setAttribute(this.host.nativeElement, name, String(n)); | ||
| } | ||
| } else { | ||
| this.renderer.removeAttribute(this.host.nativeElement, name); | ||
| } | ||
| } |
Comment on lines
+78
to
80
| private setNumericAttr(name: string, value: number | string | null | undefined) { | ||
| if (value != null) { this.renderer.setAttribute(this.el.nativeElement, name, String(value)); } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.