@zenit-hosting/zenit-ui 0.2.0 → 0.2.2
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/LICENSE +21 -0
- package/README.md +32 -16
- package/fesm2022/zenit-hosting-zenit-ui.mjs +2 -2
- package/fesm2022/zenit-hosting-zenit-ui.mjs.map +1 -1
- package/llms-full.txt +8 -6
- package/llms.txt +3 -2
- package/package.json +2 -2
- package/schematics/ng-add/index.js +1 -1
- package/schematics/ng-add/init-script.js +2 -2
- package/types/zenit-hosting-zenit-ui.d.ts +1 -1
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Zenit-Hosting
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -12,25 +12,28 @@ All five are peer dependencies and are not bundled with the library. Its only ow
|
|
|
12
12
|
|
|
13
13
|
## Installation
|
|
14
14
|
|
|
15
|
-
The
|
|
15
|
+
The package is published on npmjs.org as `@zenit-hosting/zenit-ui`. Install it under the alias `zenit-ui`, so that imports (`from 'zenit-ui'`) and stylesheet paths (`zenit-ui/styles/…`) resolve as every example in this README shows:
|
|
16
16
|
|
|
17
17
|
```bash
|
|
18
|
-
|
|
19
|
-
cd dist/zenit-ui
|
|
20
|
-
npm pack
|
|
18
|
+
npm install zenit-ui@npm:@zenit-hosting/zenit-ui
|
|
21
19
|
```
|
|
22
20
|
|
|
23
|
-
This
|
|
21
|
+
This writes `"zenit-ui": "npm:@zenit-hosting/zenit-ui@^0.2.0"` into your `package.json`. Without the alias the package sits in `node_modules/@zenit-hosting/zenit-ui`, and neither your imports nor what the `ng-add` schematic generates resolve.
|
|
22
|
+
|
|
23
|
+
> **Never install the unscoped name.** `zenit-ui` on npmjs.com is not this package. `npm i zenit-ui`
|
|
24
|
+
> or `ng add zenit-ui` would fetch whatever somebody else publishes under that name and, in the
|
|
25
|
+
> case of `ng add`, run its schematics against your workspace. Always go through the alias above.
|
|
26
|
+
|
|
27
|
+
To try an unreleased build of the library, pack it and install the tarball under the same alias:
|
|
24
28
|
|
|
25
29
|
```bash
|
|
26
|
-
npm
|
|
30
|
+
npm run build:lib
|
|
31
|
+
cd dist/zenit-ui && npm pack # zenit-hosting-zenit-ui-<version>.tgz
|
|
27
32
|
```
|
|
28
33
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
> workspace. Point every command at the local file, as the sections below do, until the name is
|
|
33
|
-
> claimed or the package is scoped.
|
|
34
|
+
```bash
|
|
35
|
+
npm i zenit-ui@file:../path/to/zenit-hosting-zenit-ui-<version>.tgz
|
|
36
|
+
```
|
|
34
37
|
|
|
35
38
|
### Working against a linked build
|
|
36
39
|
|
|
@@ -63,6 +66,10 @@ of this: the package then lives inside your own `node_modules` and resolves `@an
|
|
|
63
66
|
there. The measured table and the alternative via `resolve.dedupe` are in
|
|
64
67
|
[`docs/ng-add.md`](../../docs/ng-add.md), "Working against a linked build".
|
|
65
68
|
|
|
69
|
+
## Versions and changes
|
|
70
|
+
|
|
71
|
+
Every published version has a GitHub release with its section of the changelog as text: [releases](https://github.com/UnlegitWolfHD/zenit-ui/releases), full history in [`CHANGELOG.md`](https://github.com/UnlegitWolfHD/zenit-ui/blob/main/CHANGELOG.md). Below 1.0.0 a caret range stays within one minor version (`^0.2.0` takes 0.2.x), so moving to the next minor version is a deliberate update: read its release notes first.
|
|
72
|
+
|
|
66
73
|
## Setup
|
|
67
74
|
|
|
68
75
|
### 1. Register the styles in `angular.json`
|
|
@@ -260,7 +267,7 @@ providers: [provideZenitTheme({ defaultScheme: 'system' })];
|
|
|
260
267
|
|
|
261
268
|
The order is binding, because `:root` and `[data-theme="light"]` weigh the same and the later rule wins. A scheme is a block of token overrides, so an own scheme is CSS plus its id in `schemes`. Components never learn about any of this.
|
|
262
269
|
|
|
263
|
-
**These values are not part of the design system yet.** They were derived by the contrast rules in `docs/theming.md` and checked by `node tools/check-theme-contrast.mjs` (3 schemes ×
|
|
270
|
+
**These values are not part of the design system yet.** They were derived by the contrast rules in `docs/theming.md` and checked by `node tools/check-theme-contrast.mjs` (3 schemes × 8 accents, 1776 pairs), but they still need the design owner's approval before they move into `tokens.json`. Everything about schemes, accents, the service, SSR and the gate is in [`docs/theming.md`](../../docs/theming.md).
|
|
264
271
|
|
|
265
272
|
## Server rendering
|
|
266
273
|
|
|
@@ -300,15 +307,15 @@ providers: [provideZenitLabels(Z_LABELS_EN)];
|
|
|
300
307
|
|
|
301
308
|
## `ng add`
|
|
302
309
|
|
|
303
|
-
The setup above is a schematic as well.
|
|
310
|
+
The setup above is a schematic as well. After the aliased install, run it through `ng generate`, not `ng add`:
|
|
304
311
|
|
|
305
312
|
```bash
|
|
306
|
-
ng
|
|
313
|
+
ng generate zenit-ui:ng-add --themes
|
|
307
314
|
```
|
|
308
315
|
|
|
309
|
-
|
|
316
|
+
`ng add @zenit-hosting/zenit-ui` would add the package a second time without the alias, and `ng add zenit-ui` would resolve the unscoped name on the public registry and run a stranger's schematics. `ng generate zenit-ui:ng-add` takes the same options (`--project`, `--themes`, `--fonts`, `--toast-outlet`) and is also the way to run it again later.
|
|
310
317
|
|
|
311
|
-
|
|
318
|
+
It registers the stylesheets in `angular.json` in the prescribed order, merges `z-root` into `<html>` and `<body>`, adds `@angular/cdk` and the four font packages with their `@import` rules, and mounts `<z-toast-outlet />` in the root component. With `--themes` it also registers `themes.css`, puts the theme init script into `index.html`, adds `provideZenitTheme()` and sets `inlineCritical: false` for production. Every step is idempotent, and a source file is either fully patched or left untouched with the manual step in the log (NgModule applications, `imports` that are not an array literal). An existing `lang` on `<html>` is kept. What it changes exactly, which options it takes and its limits are in [`docs/ng-add.md`](../../docs/ng-add.md).
|
|
312
319
|
|
|
313
320
|
### Coming from Angular Material
|
|
314
321
|
|
|
@@ -398,3 +405,12 @@ npm run start:beispiel # example app: one complete page against dist/zenit-ui
|
|
|
398
405
|
The demo app `ui-demo` shows every building block in the states idle, hover, focus, active, disabled, loading, error, empty and success. It is the reference for markup and classes.
|
|
399
406
|
|
|
400
407
|
The example app `beispiel-app` shows one complete page of the customer area, built the way an application builds it: it imports from the package in `dist/zenit-ui` and follows the setup steps above one by one. Its page "Einbindung" and the disclosures on the Gameserver page show the real files of that setup, generated from the sources themselves. Copy it as the starting point for a real page; `projects/beispiel-app/README.md` maps every region of the page to the rule it follows.
|
|
408
|
+
|
|
409
|
+
## License
|
|
410
|
+
|
|
411
|
+
MIT, see [`LICENSE`](LICENSE). You may use, change and ship the library in open and closed, free and commercial projects. The one condition: keep the copyright notice and the license text with every copy of the code you pass on. The library comes without any warranty.
|
|
412
|
+
|
|
413
|
+
What the license does not cover:
|
|
414
|
+
|
|
415
|
+
- **The name and the logo.** "Zenit-Hosting" and the Zenit logo stay with Zenit-Hosting. You may say that your product uses `zenit-ui`. You may not present your product, or a fork of the library, as made by or endorsed by Zenit-Hosting. The logo is not part of the package.
|
|
416
|
+
- **Fonts and icons.** The package contains none. The fonts your application self-hosts come with their own licenses: Inter, Space Grotesk and JetBrains Mono under the SIL Open Font License 1.1, Material Icons under the Apache License 2.0.
|
|
@@ -10804,7 +10804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
|
|
|
10804
10804
|
one level deeper is dropped from the published types. */
|
|
10805
10805
|
|
|
10806
10806
|
/*
|
|
10807
|
-
* Plain TypeScript without a single import, on purpose: `ng
|
|
10807
|
+
* Plain TypeScript without a single import, on purpose: the `ng-add` schematic
|
|
10808
10808
|
* needs the same script, and schematics are compiled apart from the library
|
|
10809
10809
|
* (CommonJS, no DOM types, `rootDir: schematics`). A byte-identical copy of
|
|
10810
10810
|
* this file therefore lives at `schematics/ng-add/init-script.ts`; the test in
|
|
@@ -10886,7 +10886,7 @@ function alsLiteral(wert) {
|
|
|
10886
10886
|
* "critical" CSS and loads the rest late; `[data-theme="light"]` is never
|
|
10887
10887
|
* critical, because nothing in `index.html` matches it. Set
|
|
10888
10888
|
* `optimization.styles.inlineCritical` to `false` in the `production`
|
|
10889
|
-
* configuration of the build target; `ng
|
|
10889
|
+
* configuration of the build target; `ng generate zenit-ui:ng-add --themes` writes both
|
|
10890
10890
|
* the script and that setting.
|
|
10891
10891
|
*
|
|
10892
10892
|
* With a Content Security Policy the returned string is what you hash
|