Skip to content

Update to 3.9 #63

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
Jun 18, 2026
Merged

Update to 3.9 #63

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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,4 @@ Thumbs.db
/examples/
/scripts/
/llms.txt
/llms*.txt
22 changes: 22 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,28 @@ 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.9.0] - 2026-06-18
### Added
- **wa-checkbox-group:** New `WaCheckboxGroupDirective` wrapping the new `<wa-checkbox-group>` web component:
- String inputs: `label`, `hint`, `orientation` (`'horizontal' | 'vertical'`), `size` (`'xs' | 's' | 'm' | 'l' | 'xl' | 'small' | 'medium' | 'large'`)
- Boolean inputs: `required`, `withLabel` (`with-label`), `withHint` (`with-hint`)
- Style input: `styleGap` → `--gap`
- Slots: `(default)` for `<wa-checkbox>` / `<wa-switch>` items, `label`, and `hint`
- Exposes `nativeElement` for direct DOM access
- The group is a labeling/grouping container only and does not own a value — bind `[(ngModel)]` / `formControlName` on the individual checkboxes/switches.
- Exported `WaCheckboxGroupDirective` from the public API surface.
- Unit tests, rules, and example documentation for `wa-checkbox-group`.

### Changed
- **wa-tree:** `selection` input now accepts `'leaf-multiple'` in addition to `'single' | 'multiple' | 'leaf'`. `leaf-multiple` allows multiple leaf nodes to be selected while parent nodes only expand and collapse.
- **wa-accordion-item / wa-popover / wa-popup:** Documented CSS animation defaults updated to match Web Awesome 3.9.0 — `--show-duration` / `--hide-duration` now default to `var(--wa-transition-normal)` (accordion) and `var(--wa-transition-fast)` (popover/popup), and the accordion `--easing` default is `var(--wa-transition-easing)`. These are upstream default value changes only; the Angular inputs are unchanged.
- Updated `llms.txt` to Web Awesome 3.9.0.
Comment on lines +21 to +22

### Notes
- This release aligns Angular Awesome with the **Web Awesome 3.9.0** component specification.
- 1 new component added (`wa-checkbox-group`), 1 component updated (`wa-tree`). No breaking changes to the Angular API.


## [3.7.0] - 2026-05-17
### Added
- **wa-video:** New `WaVideoDirective` wrapping the `<wa-video>` web component with full playback control:
Expand Down
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
- **Template form error-state management** — wrappers participate in Angular validation so template-driven errors and state flags are available without extra plumbing.
- **No custom schema required** — importing standalone wrappers avoids needing `CUSTOM_ELEMENTS_SCHEMA` just to use Web Awesome tags.
- **Lazy loading where it matters** — selected components support lazy-loading patterns to reduce initial bundle and render cost.
- **Full component coverage** — 78+ directives including layout primitives, form controls, navigation, overlays, charts, media, toasts, and more.
- **Full component coverage** — 79+ directives including layout primitives, form controls, navigation, overlays, charts, media, toasts, and more.
- **Type safety** — full TypeScript declarations with strict mode support.
- **Lightweight** — thin wrappers with zero extra runtime dependencies beyond Angular and Web Awesome.

Expand All @@ -26,7 +26,7 @@
|--------------|----------|
| Angular | `>=20.0` |
| Node.js | `20+` |
| Web Awesome* | `3.8.x` |
| Web Awesome* | `3.9.x` |

## Installation

Expand Down Expand Up @@ -58,14 +58,14 @@ export class MyComponent {
## Available Components

<details>
<summary>Expand full component list (78+)</summary>
<summary>Expand full component list (79+)</summary>

| Category | Components |
|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Layout** | `wa-layout-align`, `wa-layout-cluster`, `wa-layout-flank`, `wa-layout-frame`, `wa-layout-gap`, `wa-layout-grid`, `wa-layout-split`, `wa-layout-stack` |
| **Navigation** | `wa-breadcrumbs`, `wa-tab-group`, `wa-tree` |
| **Buttons** | `wa-button`, `wa-button-group`, `wa-copy-button` |
| **Form Controls** | `wa-checkbox`, `wa-color-picker`, `wa-combobox`, `wa-date-input`, `wa-date-picker`, `wa-file-input`, `wa-input`, `wa-known-date`, `wa-number-input`, `wa-radio`, `wa-rating`, `wa-select`, `wa-slider`, `wa-switch`, `wa-text-area`, `wa-time-input` |
| **Form Controls** | `wa-checkbox`, `wa-checkbox-group`, `wa-color-picker`, `wa-combobox`, `wa-date-input`, `wa-date-picker`, `wa-file-input`, `wa-input`, `wa-known-date`, `wa-number-input`, `wa-radio`, `wa-rating`, `wa-select`, `wa-slider`, `wa-switch`, `wa-text-area`, `wa-time-input` |
| **Data Display** | `wa-avatar`, `wa-badge`, `wa-card`, `wa-carousel`, `wa-comparison`, `wa-icon`, `wa-skeleton`, `wa-sparkline`, `wa-tag`, `wa-text`, `wa-qr-code` |
| **Charts** | `wa-chart`, `wa-bar-chart`, `wa-bubble-chart`, `wa-doughnut-chart`, `wa-line-chart`, `wa-pie-chart`, `wa-polar-area-chart`, `wa-radar-chart`, `wa-scatter-chart` |
| **Feedback** | `wa-callout`, `wa-dialog`, `wa-drawer`, `wa-popover`, `wa-popup`, `wa-toast`, `wa-toast-item`, `wa-tooltip` |
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 @@ -307,6 +307,14 @@ <h3>Checkbox <span class="tag">Input</span></h3>
<a href="https://github.com/GedMarc/angular-awesome/tree/master/src/directives/checkbox" target="_blank">Source</a>
</div>
</div>
<div class="component-card" data-category="input">
<h3>CheckboxGroup <span class="tag">Input</span></h3>
<p>Checkbox groups give a set of related <wa-checkbox> or <wa-switch> elements a shared label, hint, and</p>
<div class="links">
Comment on lines +310 to +313
<a href="components/checkbox-group.html">Documentation</a>
<a href="https://github.com/GedMarc/angular-awesome/tree/master/src/directives/checkbox-group" target="_blank">Source</a>
</div>
</div>
<div class="component-card" data-category="utility">
<h3>ColorPicker <span class="tag">Utility</span></h3>
<p><wa-color-picker> provides color picker functionality for Angular applications.</p>
Expand Down
234 changes: 234 additions & 0 deletions docs/components/checkbox-group.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 - CheckboxGroup 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>CheckboxGroup Component <span class="version-badge">synced with Web Awesome 3.7.0</span></h1>
<p class="subtitle">Checkbox groups give a set of related <wa-checkbox> or <wa-switch> elements a shared label, hint, and</p>
</header>
Comment on lines +90 to +92

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

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

<section>
<h2>Import</h2>
<p>Import the checkboxGroup directive from the angular-awesome package:</p>
<pre>// Import the checkboxGroup directive
import { WaCheckboxGroupDirective } from 'angular-awesome/checkbox-group';</pre>
</section>

<section>
<h2>Examples</h2>
<h1>Checkbox Group Examples</h1>
<h2>Basic Usage</h2>
<p>Group related checkboxes under a shared label and hint.</p>
<pre><code class="language-html">&lt;wa-checkbox-group label=&quot;Choose your toppings&quot; hint=&quot;Select all that apply&quot;&gt;
&lt;wa-checkbox value=&quot;cheese&quot;&gt;Cheese&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/wa-checkbox&gt;
&lt;/wa-checkbox-group&gt;
</code></pre>
<h2>Orientation</h2>
<p>The default orientation is vertical. Set <code>orientation=&quot;horizontal&quot;</code> to lay items out on a single row.</p>
<pre><code class="language-html">&lt;wa-checkbox-group label=&quot;Choose your toppings&quot; orientation=&quot;horizontal&quot;&gt;
&lt;wa-checkbox value=&quot;cheese&quot;&gt;Cheese&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/wa-checkbox&gt;
&lt;/wa-checkbox-group&gt;
</code></pre>
<h2>Sizing</h2>
<p>The group&#39;s <code>size</code> is applied to every <code>&lt;wa-checkbox&gt;</code> and <code>&lt;wa-switch&gt;</code> inside it.</p>
<pre><code class="language-html">&lt;wa-checkbox-group label=&quot;Choose your toppings&quot; size=&quot;large&quot;&gt;
&lt;wa-checkbox value=&quot;cheese&quot;&gt;Cheese&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/wa-checkbox&gt;
&lt;/wa-checkbox-group&gt;
</code></pre>
<h2>Grouping Switches</h2>
<p>Checkbox groups also work with <code>&lt;wa-switch&gt;</code> elements.</p>
<pre><code class="language-html">&lt;wa-checkbox-group label=&quot;Notifications&quot; hint=&quot;Pick the alerts you want to receive&quot;&gt;
&lt;wa-switch value=&quot;email&quot;&gt;Email&lt;/wa-switch&gt;
&lt;wa-switch value=&quot;sms&quot;&gt;SMS&lt;/wa-switch&gt;
&lt;wa-switch value=&quot;push&quot;&gt;Push&lt;/wa-switch&gt;
&lt;/wa-checkbox-group&gt;
</code></pre>
<h2>Two-Way Binding</h2>
<p>The group does not own a value — bind <code>[(ngModel)]</code> on the individual checkboxes.</p>
<pre><code class="language-html">&lt;wa-checkbox-group label=&quot;Choose your toppings&quot;&gt;
&lt;wa-checkbox [(ngModel)]=&quot;cheese&quot; name=&quot;cheese&quot; value=&quot;cheese&quot;&gt;Cheese&lt;/wa-checkbox&gt;
&lt;wa-checkbox [(ngModel)]=&quot;pepperoni&quot; name=&quot;pepperoni&quot; value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/wa-checkbox&gt;
&lt;wa-checkbox [(ngModel)]=&quot;mushrooms&quot; name=&quot;mushrooms&quot; value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/wa-checkbox&gt;
&lt;/wa-checkbox-group&gt;
</code></pre>
<h2>Custom Gap</h2>
<p>Adjust the space between grouped checkboxes with the <code>styleGap</code> input (maps to the <code>--gap</code> CSS variable).</p>
<pre><code class="language-html">&lt;wa-checkbox-group label=&quot;Choose your toppings&quot; [styleGap]=&quot;&#39;1rem&#39;&quot;&gt;
&lt;wa-checkbox value=&quot;cheese&quot;&gt;Cheese&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/wa-checkbox&gt;
&lt;/wa-checkbox-group&gt;
</code></pre>
<h2>Label and Hint Slots</h2>
<p>Use the <code>label</code> and <code>hint</code> slots when you need HTML content.</p>
<pre><code class="language-html">&lt;wa-checkbox-group [withLabel]=&quot;true&quot; [withHint]=&quot;true&quot;&gt;
&lt;span slot=&quot;label&quot;&gt;Choose your &lt;strong&gt;toppings&lt;/strong&gt;&lt;/span&gt;
&lt;span slot=&quot;hint&quot;&gt;Select &lt;em&gt;all&lt;/em&gt; that apply&lt;/span&gt;
&lt;wa-checkbox value=&quot;cheese&quot;&gt;Cheese&lt;/wa-checkbox&gt;
&lt;wa-checkbox value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/wa-checkbox&gt;
&lt;/wa-checkbox-group&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
1 change: 1 addition & 0 deletions docs/generate-docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,7 @@ const componentCategories = {
'combobox': 'input',
'text-area': 'input',
'checkbox': 'input',
'checkbox-group': 'input',
'radio': 'input',
'switch': 'input',
'slider': 'input',
Expand Down
Loading
Loading