semmet-angular 0.14.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "semmet-angular",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Angular schematics that generate real, ARIA-conformant standalone components (Accordion, Tabs, Dialog, Disclosure, Tooltip...) with signals-based state and keyboard interaction built in.",
   "publisher": "danilodevsilva",
   "license": "MIT",

package/src/button-group/files/__name@dasherize__/__name@dasherize__.html.template

@@ -4,6 +4,7 @@ Usage from a parent component template:
 Import <%= classify(name) %> in that parent component.
 
 <<%= selector %> label="View options" />
+<<%= selector %> label="View options" [items]="views" [(selectedIds)]="selectedViewIds" />
 <<%= selector %> [items]="views">
   <ng-template <%= camelize(name) %>Item let-item let-pressed="pressed">
     {{ item.label }}

package/src/button-group/files/__name@dasherize__/__name@dasherize__.ts.template

@@ -1,5 +1,5 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input, signal } from '@angular/core';
+import { Component, Directive, TemplateRef, booleanAttribute, computed, contentChild, inject, input, model } from '@angular/core';
 
 type <%= classify(name) %>Orientation = 'horizontal' | 'vertical';
 type <%= classify(name) %>SelectionMode = 'none' | 'single' | 'multiple';
@@ -17,6 +17,7 @@ const DEFAULT_ITEMS: readonly <%= classify(name) %>Item[] = [
   { id: 'week', label: 'Week' },
   { id: 'month', label: 'Month' },
 ];
+const DEFAULT_SELECTED_IDS = DEFAULT_ITEMS.filter((item) => item.pressed).map((item) => item.id);
 
 let nextId = 0;
 
@@ -43,10 +44,9 @@ export class <%= classify(name) %> {
   readonly size = input<<%= classify(name) %>Size>('md');
   readonly disabled = input(false, { transform: booleanAttribute });
   readonly items = input<readonly <%= classify(name) %>Item[]>(DEFAULT_ITEMS);
+  readonly selectedIds = model<readonly string[]>(DEFAULT_SELECTED_IDS);
 
-  protected readonly selectedIds = signal<ReadonlySet<string>>(
-    new Set(DEFAULT_ITEMS.filter((item) => item.pressed).map((item) => item.id)),
-  );
+  protected readonly selectedIdSet = computed<ReadonlySet<string>>(() => new Set(this.selectedIds()));
 
   protected readonly groupClasses = computed(() => [
     'semmet-button-group',
@@ -59,7 +59,7 @@ export class <%= classify(name) %> {
       return item.pressed ?? null;
     }
 
-    return this.selectedIds().has(item.id);
+    return this.selectedIdSet().has(item.id);
   }
 
   protected ariaPressed(item: <%= classify(name) %>Item): string | null {
@@ -77,7 +77,7 @@ export class <%= classify(name) %> {
     }
 
     if (this.selectionMode() === 'single') {
-      this.selectedIds.set(new Set([item.id]));
+      this.selectedIds.set([item.id]);
       return;
     }
 
@@ -88,7 +88,7 @@ export class <%= classify(name) %> {
       } else {
         next.add(item.id);
       }
-      return next;
+      return Array.from(next);
     });
   }
 }