semmet-angular 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,6 +17,68 @@ ng generate semmet-angular:accordion my-faq
|
|
|
17
17
|
|
|
18
18
|
Each generated component is dropped into your project exactly like `ng generate component` would (respecting your `angular.json` project, source root, and selector prefix), and has **zero runtime dependency** on this package — `semmet-angular` is only needed at generation time.
|
|
19
19
|
|
|
20
|
+
## Projected content containers
|
|
21
|
+
|
|
22
|
+
Some generated components are containers: they own the ARIA wiring, keyboard behavior, focus management, and visual shell, while your app owns the content rendered inside them.
|
|
23
|
+
|
|
24
|
+
`accordion`, `tabs`, `carousel`, and `disclosure` use Angular's modern projection pattern with `ng-template`, signal queries, and `NgTemplateOutlet`. This means you can place real app components inside generated components without dynamic component factories.
|
|
25
|
+
|
|
26
|
+
Example after generating `faq`:
|
|
27
|
+
|
|
28
|
+
```ts
|
|
29
|
+
import { Component, signal } from '@angular/core';
|
|
30
|
+
import { Faq, FaqItem } from './faq/faq';
|
|
31
|
+
import { ProfilePanel } from './profile-panel/profile-panel';
|
|
32
|
+
import { SettingsPanel } from './settings-panel/settings-panel';
|
|
33
|
+
|
|
34
|
+
@Component({
|
|
35
|
+
selector: 'app-root',
|
|
36
|
+
imports: [Faq, FaqItem, ProfilePanel, SettingsPanel],
|
|
37
|
+
templateUrl: './app.html',
|
|
38
|
+
})
|
|
39
|
+
export class App {
|
|
40
|
+
readonly userId = signal(123);
|
|
41
|
+
|
|
42
|
+
reload(): void {}
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
```html
|
|
47
|
+
<app-faq>
|
|
48
|
+
<ng-template faqItem id="profile" title="Profile" [expanded]="true">
|
|
49
|
+
<app-profile-panel />
|
|
50
|
+
</ng-template>
|
|
51
|
+
|
|
52
|
+
<ng-template faqItem id="settings" title="Settings">
|
|
53
|
+
<app-settings-panel [userId]="userId()" (saved)="reload()" />
|
|
54
|
+
</ng-template>
|
|
55
|
+
</app-faq>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
The same pattern applies to `tabs`, `carousel`, and `disclosure`:
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<app-settings-tabs>
|
|
62
|
+
<ng-template settingsTabsItem id="profile" label="Profile" [selected]="true">
|
|
63
|
+
<app-profile-panel />
|
|
64
|
+
</ng-template>
|
|
65
|
+
</app-settings-tabs>
|
|
66
|
+
|
|
67
|
+
<app-featured-carousel>
|
|
68
|
+
<ng-template featuredCarouselSlide id="intro" label="Introduction">
|
|
69
|
+
<app-intro-slide />
|
|
70
|
+
</ng-template>
|
|
71
|
+
</app-featured-carousel>
|
|
72
|
+
|
|
73
|
+
<app-details label="Show profile details" [(expanded)]="profileDetailsOpen">
|
|
74
|
+
<ng-template detailsContent>
|
|
75
|
+
<app-profile-details [userId]="userId()" />
|
|
76
|
+
</ng-template>
|
|
77
|
+
</app-details>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
By default, projected panel/slide content is preserved after its first render. Set `[preserveContent]="false"` on the generated container to destroy inactive content when it closes or becomes inactive.
|
|
81
|
+
|
|
20
82
|
## Schematics (28)
|
|
21
83
|
|
|
22
84
|
**Overlays & disclosure**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "semmet-angular",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Angular schematics that generate real, ARIA-conformant standalone components (Accordion, Tabs, Dialog, Disclosure, Tooltip...) with signals-based state and keyboard interaction built in.",
|
|
5
5
|
"publisher": "danilodevsilva",
|
|
6
6
|
"license": "MIT",
|