@resolve-components/theme 1.2.2 ā 1.2.5
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 +168 -3
- package/package.json +2 -7
- package/schematics/ng-add/index.js +70 -18
- package/styles/resolve-components.scss +17 -0
package/README.md
CHANGED
|
@@ -1,7 +1,172 @@
|
|
|
1
1
|
# resolve-components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**Fully customizable Angular UI component library** ā 40+ standalone, fully typed, OnPush components with a comprehensive theming system.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
- šØ **40+ Components** ā buttons, inputs, dialogs, tables, trees, virtual scroll, and more
|
|
6
|
+
- š **Design Tokens** ā flat-map SCSS themes emit CSS custom properties at runtime
|
|
7
|
+
- š **Dark Mode** ā built-in `default` and `dark` themes; create your own
|
|
8
|
+
- ā
**Standalone** ā every component is standalone with OnPush change detection
|
|
9
|
+
- š¦ **Zero Dependencies** ā uses only Angular CDK overlay for dialogs
|
|
10
|
+
- š **ng add Schematic** ā automatic setup with a single command
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
[š Documentation](https://resolve-components.web.app) | [šØ Component Library](https://resolve-components.web.app/components) | [š¦ npm](https://www.npmjs.com/package/@resolve-components/theme)
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## Quick Start
|
|
17
|
+
|
|
18
|
+
### Automatic Setup (Recommended)
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
ng add @resolve-components/theme
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
The schematic will:
|
|
25
|
+
|
|
26
|
+
- ā
Install the package
|
|
27
|
+
- ā
Configure `angular.json`
|
|
28
|
+
- ā
Update `app.config.ts`
|
|
29
|
+
- ā
Add `@resolve-components` entry to styles
|
|
30
|
+
|
|
31
|
+
Then start building! š
|
|
32
|
+
|
|
33
|
+
### Manual Setup
|
|
34
|
+
|
|
35
|
+
#### 1. Install the package & Angular CDK
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @resolve-components/theme @angular/cdk
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
#### 2. Configure `angular.json`
|
|
42
|
+
|
|
43
|
+
Add the CDK overlay stylesheet to your build `styles` and register the `styles/` folder as a Sass include path:
|
|
44
|
+
|
|
45
|
+
```json
|
|
46
|
+
{
|
|
47
|
+
"projects": {
|
|
48
|
+
"<your-project>": {
|
|
49
|
+
"architect": {
|
|
50
|
+
"build": {
|
|
51
|
+
"options": {
|
|
52
|
+
"styles": ["node_modules/@angular/cdk/overlay-prebuilt.css", "node_modules/@resolve-components/theme/styles/resolve-components.scss"],
|
|
53
|
+
"stylePreprocessorOptions": {
|
|
54
|
+
"includePaths": ["node_modules/@resolve-components/theme/styles"]
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
#### 3. Register the theme provider
|
|
65
|
+
|
|
66
|
+
Add `provideRcTheme()` to your application providers in `app.config.ts`:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { provideRcTheme } from '@resolve-components/theme';
|
|
70
|
+
|
|
71
|
+
export const appConfig: ApplicationConfig = {
|
|
72
|
+
providers: [
|
|
73
|
+
provideRcTheme({ name: 'default' }),
|
|
74
|
+
// ...other providers
|
|
75
|
+
],
|
|
76
|
+
};
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
#### 4. Wrap your root template with `<rc-layout>`
|
|
80
|
+
|
|
81
|
+
The layout component listens to theme changes and applies the correct CSS class to `<body>`:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<!-- app.html -->
|
|
85
|
+
<rc-layout>
|
|
86
|
+
<rc-navbar position="fixed">...</rc-navbar>
|
|
87
|
+
<router-outlet />
|
|
88
|
+
</rc-layout>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Import `RcLayout` in your root component:
|
|
92
|
+
|
|
93
|
+
```typescript
|
|
94
|
+
import { RcLayout } from '@resolve-components/theme';
|
|
95
|
+
|
|
96
|
+
@Component({
|
|
97
|
+
imports: [RcLayout /* , ... */],
|
|
98
|
+
})
|
|
99
|
+
export class AppComponent {}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## What's Included
|
|
105
|
+
|
|
106
|
+
### 40+ Components
|
|
107
|
+
|
|
108
|
+
All standalone, fully typed, with OnPush change detection:
|
|
109
|
+
|
|
110
|
+
- **Layout & Display**: Layout, Navbar, Sidenav, Card, Alert, Badge, Icon
|
|
111
|
+
- **Forms**: Input, Select, Checkbox, Radio, Toggle, Datepicker, File Upload
|
|
112
|
+
- **Content**: Table, Tree, Paginator, Infinite Scroll, Virtual Scroll
|
|
113
|
+
- **Feedback**: Toast, Dialog, Tooltip, Menu
|
|
114
|
+
- **Input Patterns**: Autocomplete, Slider, Tabs, Accordion
|
|
115
|
+
- **Progress**: Spinner, Progress Bar
|
|
116
|
+
- **And more!** ā [Browse all components](https://resolve-components.web.app/components)
|
|
117
|
+
|
|
118
|
+
### Design Tokens
|
|
119
|
+
|
|
120
|
+
Flat-map SCSS theming system:
|
|
121
|
+
|
|
122
|
+
- Emit CSS custom properties at runtime
|
|
123
|
+
- Swap themes instantly with a single class change on `<body>`
|
|
124
|
+
- Fully customizable ā extend the default theme or create your own
|
|
125
|
+
|
|
126
|
+
### Built-in Themes
|
|
127
|
+
|
|
128
|
+
- **Default** ā light mode with professional neutral colors
|
|
129
|
+
- **Dark** ā dark mode optimized for low-light environments
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Example Usage
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
import { RcButtonComponent } from '@resolve-components/theme';
|
|
137
|
+
|
|
138
|
+
@Component({
|
|
139
|
+
selector: 'app-example',
|
|
140
|
+
standalone: true,
|
|
141
|
+
imports: [RcButtonComponent],
|
|
142
|
+
template: `
|
|
143
|
+
<button rcButton variant="filled" status="primary">Click me</button>
|
|
144
|
+
<button rcButton variant="outline">Secondary</button>
|
|
145
|
+
<button rcButton variant="ghost">Ghost</button>
|
|
146
|
+
`,
|
|
147
|
+
})
|
|
148
|
+
export class ExampleComponent {}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## Peer Dependencies
|
|
154
|
+
|
|
155
|
+
- `@angular/common` ā„ 17.0.0
|
|
156
|
+
- `@angular/core` ā„ 17.0.0
|
|
157
|
+
- `@angular/forms` ā„ 17.0.0
|
|
158
|
+
- `@angular/cdk` ā„ 17.0.0
|
|
159
|
+
- `@angular/platform-browser` ā„ 17.0.0
|
|
160
|
+
- `rxjs` ā„ 7.4.0
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## Resources
|
|
165
|
+
|
|
166
|
+
- š [Full Documentation](https://resolve-components.web.app)
|
|
167
|
+
- šØ [Component Showcase](https://resolve-components.web.app/components)
|
|
168
|
+
- š¦ [npm Package](https://www.npmjs.com/package/@resolve-components/theme)
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
**Made with ā¤ļø using Angular, Angular CDK, and SCSS**
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@resolve-components/theme",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.5",
|
|
4
4
|
"schematics": "./collection.json",
|
|
5
|
-
"description": "
|
|
5
|
+
"description": "ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆāĆĀ ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā¾ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ°ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¦ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀøĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ¦ĆĘĆ¢ā¬Å”ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ¦ĆĘĆ¢ā¬Å”ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ„ Fully customizable Angular UI components made with ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆāĆĀ ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā¾ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ¦ĆĘĆ¢ā¬Å”ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ¦ĆĘĆ¢ā¬Å”ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¤ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆāĆĀ ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā¾ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀÆĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ¦ĆĘĆ¢ā¬Å”ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀøĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ¦ĆĘĆ¢ā¬Å”ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ using Angular CDK ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆāĆĀ ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā¾ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ°ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¦ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀøĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ¦ĆĘĆ¢ā¬Å”ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬ĆĀ¢Ć¢ā¬Å¾ĆĀ¢ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Å”ĆāĆĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆ¢ā¬Å”ĆāĆĀ¬ĆĘĆāĆĀ¢Ć¢āĀ¬ĆĀ¦ĆĘĆ¢ā¬Å”ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆ¢ā¬Ā ĆĀ¢Ć¢āĀ¬Ć¢āĀ¢ĆĘĆāĆāĆĀ¢ĆĘĆĀ¢ĆĀ¢Ć¢āĀ¬Ć
Ā”ĆāĆĀ¬ĆĘĆ¢ā¬Ā¦ĆāĆĀ”ĆĘĆāĆā Ć¢ā¬ā¢ĆĘĆĀ¢ĆĀ¢Ć¢ā¬Å”ĆĀ¬Ćā¦ĆĀ”ĆĘĆāĆĀ¢Ć¢āĀ¬Ć
Ā”ĆĘĆ¢ā¬Å”ĆāĆĀ„",
|
|
6
6
|
"peerDependencies": {
|
|
7
7
|
"@angular/common": ">=17.0.0",
|
|
8
8
|
"@angular/core": ">=17.0.0",
|
|
@@ -13,11 +13,6 @@
|
|
|
13
13
|
"eva-icons": "^1.1.3",
|
|
14
14
|
"@angular-devkit/schematics": ">=17.0.0"
|
|
15
15
|
},
|
|
16
|
-
"peerDependenciesMeta": {
|
|
17
|
-
"eva-icons": {
|
|
18
|
-
"optional": true
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
16
|
"website": "https://resolve-components.web.app",
|
|
22
17
|
"keywords": [
|
|
23
18
|
"@resolve-components/theme",
|
|
@@ -207,12 +207,17 @@ function addBuildConfig(options) {
|
|
|
207
207
|
ctx.logger.warn('ā Could not find build target options ā add them manually.');
|
|
208
208
|
return tree;
|
|
209
209
|
}
|
|
210
|
-
// āā styles: add CDK overlay CSS āā
|
|
211
|
-
const cdkStyle = 'node_modules/@angular/cdk/overlay-prebuilt.css';
|
|
210
|
+
// āā styles: add CDK overlay CSS + resolve-components entry āā
|
|
212
211
|
if (!Array.isArray(buildOptions['styles']))
|
|
213
212
|
buildOptions['styles'] = [];
|
|
214
|
-
|
|
215
|
-
|
|
213
|
+
const stylesToAdd = [
|
|
214
|
+
'node_modules/@angular/cdk/overlay-prebuilt.css',
|
|
215
|
+
'node_modules/@resolve-components/theme/styles/resolve-components.scss',
|
|
216
|
+
];
|
|
217
|
+
for (const s of stylesToAdd) {
|
|
218
|
+
if (!buildOptions['styles'].includes(s)) {
|
|
219
|
+
buildOptions['styles'].push(s);
|
|
220
|
+
}
|
|
216
221
|
}
|
|
217
222
|
// āā stylePreprocessorOptions: add includePath āā
|
|
218
223
|
const includePath = 'node_modules/@resolve-components/theme/styles';
|
|
@@ -260,28 +265,73 @@ function addProviderToConfig(options) {
|
|
|
260
265
|
};
|
|
261
266
|
}
|
|
262
267
|
// ---------------------------------------------------------------------------
|
|
263
|
-
// Rule:
|
|
268
|
+
// Rule: global styles ā handled via styles array entry, no styles.scss changes
|
|
269
|
+
// ---------------------------------------------------------------------------
|
|
270
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
271
|
+
function addGlobalStyles(_options) {
|
|
272
|
+
// All styles are now emitted through the resolve-components.scss entry file
|
|
273
|
+
// added to the project's styles array in addBuildConfig ā no modifications to
|
|
274
|
+
// the consumer's styles.scss are needed (mirrors the Nebular/Material approach).
|
|
275
|
+
return (tree) => tree;
|
|
276
|
+
}
|
|
277
|
+
// ---------------------------------------------------------------------------
|
|
278
|
+
// Rule: wrap app.html with <rc-layout>
|
|
279
|
+
// ---------------------------------------------------------------------------
|
|
280
|
+
function addRcLayoutToTemplate(options) {
|
|
281
|
+
return (tree, ctx) => {
|
|
282
|
+
const cfg = resolveProjectConfig(tree, options);
|
|
283
|
+
const sourceRoot = cfg?.sourceRoot ?? 'src';
|
|
284
|
+
const templatePath = `${sourceRoot}/app/app.html`;
|
|
285
|
+
if (!tree.exists(templatePath)) {
|
|
286
|
+
ctx.logger.warn(`ā ${templatePath} not found ā wrap your root template with <rc-layout> manually.`);
|
|
287
|
+
return tree;
|
|
288
|
+
}
|
|
289
|
+
const content = tree.read(templatePath).toString('utf-8');
|
|
290
|
+
if (content.includes('<rc-layout'))
|
|
291
|
+
return tree;
|
|
292
|
+
const wrapped = `<rc-layout>\n${content.trimEnd()}\n</rc-layout>\n`;
|
|
293
|
+
tree.overwrite(templatePath, wrapped);
|
|
294
|
+
ctx.logger.info(` Wrapped ${templatePath} with <rc-layout>`);
|
|
295
|
+
return tree;
|
|
296
|
+
};
|
|
297
|
+
}
|
|
298
|
+
// ---------------------------------------------------------------------------
|
|
299
|
+
// Rule: add RcLayout to app.ts imports
|
|
264
300
|
// ---------------------------------------------------------------------------
|
|
265
|
-
function
|
|
301
|
+
function addRcLayoutToAppComponent(options) {
|
|
266
302
|
return (tree, ctx) => {
|
|
267
303
|
const cfg = resolveProjectConfig(tree, options);
|
|
268
304
|
const sourceRoot = cfg?.sourceRoot ?? 'src';
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
`
|
|
305
|
+
// Support both app.ts and app.component.ts
|
|
306
|
+
const appTsPath = tree.exists(`${sourceRoot}/app/app.ts`)
|
|
307
|
+
? `${sourceRoot}/app/app.ts`
|
|
308
|
+
: tree.exists(`${sourceRoot}/app/app.component.ts`)
|
|
309
|
+
? `${sourceRoot}/app/app.component.ts`
|
|
310
|
+
: null;
|
|
311
|
+
if (!appTsPath) {
|
|
312
|
+
ctx.logger.warn(`ā app.ts / app.component.ts not found ā add RcLayout to your root component imports manually.`);
|
|
274
313
|
return tree;
|
|
275
314
|
}
|
|
276
|
-
let content = tree.read(
|
|
277
|
-
if (content.includes('
|
|
278
|
-
content.includes(`@use 'all'`)) {
|
|
315
|
+
let content = tree.read(appTsPath).toString('utf-8');
|
|
316
|
+
if (content.includes('RcLayout'))
|
|
279
317
|
return tree;
|
|
318
|
+
// Add import statement after last existing import
|
|
319
|
+
const importLine = `import { RcLayout } from '@resolve-components/theme';\n`;
|
|
320
|
+
const lastImportMatch = [...content.matchAll(/^import .*?;\n/gms)]
|
|
321
|
+
.filter((m) => !m[0].includes('\n '))
|
|
322
|
+
.pop();
|
|
323
|
+
if (lastImportMatch) {
|
|
324
|
+
const insertAt = lastImportMatch.index + lastImportMatch[0].length;
|
|
325
|
+
content =
|
|
326
|
+
content.slice(0, insertAt) + importLine + content.slice(insertAt);
|
|
327
|
+
}
|
|
328
|
+
else {
|
|
329
|
+
content = importLine + content;
|
|
280
330
|
}
|
|
281
|
-
//
|
|
282
|
-
|
|
283
|
-
tree.overwrite(
|
|
284
|
-
ctx.logger.info(`
|
|
331
|
+
// Add RcLayout to the component's imports array
|
|
332
|
+
content = content.replace(/(imports:\s*\[)/, `$1RcLayout, `);
|
|
333
|
+
tree.overwrite(appTsPath, content);
|
|
334
|
+
ctx.logger.info(` Added RcLayout import ā ${appTsPath}`);
|
|
285
335
|
return tree;
|
|
286
336
|
};
|
|
287
337
|
}
|
|
@@ -296,6 +346,8 @@ function ngAdd(options) {
|
|
|
296
346
|
addBuildConfig(options),
|
|
297
347
|
addProviderToConfig(options),
|
|
298
348
|
addGlobalStyles(options),
|
|
349
|
+
addRcLayoutToTemplate(options),
|
|
350
|
+
addRcLayoutToAppComponent(options),
|
|
299
351
|
(_tree, ctx) => {
|
|
300
352
|
ctx.addTask(new tasks_1.NodePackageInstallTask());
|
|
301
353
|
ctx.logger.info('\nā
@resolve-components/theme setup complete!');
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Resolve Components ā Prebuilt Entry Point
|
|
3
|
+
// =============================================================================
|
|
4
|
+
// Add this file to your project's styles array in angular.json / project.json:
|
|
5
|
+
//
|
|
6
|
+
// "styles": [
|
|
7
|
+
// "node_modules/@angular/cdk/overlay-prebuilt.css",
|
|
8
|
+
// "node_modules/@resolve-components/theme/styles/resolve-components.scss"
|
|
9
|
+
// ]
|
|
10
|
+
//
|
|
11
|
+
// This single import loads all component styles and emits the CSS custom
|
|
12
|
+
// property blocks required for theming. No changes to your styles.scss needed.
|
|
13
|
+
// =============================================================================
|
|
14
|
+
|
|
15
|
+
@use 'all' as *;
|
|
16
|
+
|
|
17
|
+
@include rc-install();
|