@festo-ui/angular 8.0.0 → 8.1.0-dev.563

package/README.md

@@ -1,24 +1,64 @@
-# Angular
+# FESTO UI
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.0.
+## Angular Component Library
 
-## Code scaffolding
+### Getting started
 
-Run `ng generate component component-name --project angular` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular`.
-> Note: Don't forget to add `--project angular` or else it will be added to the default project in your `angular.json` file. 
+Festo Angular comes as a NPM package.
+Oh you don't know NPM? Then you must start a bit further at [Node.js](https://nodejs.org).
 
-## Build
+If you want to use the Festo Angular library with your Angular project then this command is the way to go:
 
-Run `ng build angular` to build the project. The build artifacts will be stored in the `dist/` directory.
+`npm install @festo-ui/angular`
 
-## Publishing
+### Peer dependencies
 
-After building your library with `ng build angular`, go to the dist folder `cd dist/angular` and run `npm publish`.
+We have set the **@festo-ui/web-essentials** and the **@angular/cdk** as peer dependency. Make sure you have it installed:
 
-## Running unit tests
+`npm install @festo-ui/web-essentials`
 
-Run `ng test angular` to execute the unit tests via [Karma](https://karma-runner.github.io).
+`npm install @angular/cdk`
 
-## Further help
+### Required CSS
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+You should add the CSS files to your `angular.json` file to load the styles when your Angular projects get built.
+
+Example:
+
+```json
+{
+  "projects": {
+    "projectName": {
+      ...
+      "architect": {
+        "build": {
+          ...
+          "options": {
+            ...
+            "styles": [
+              ...
+              "node_modules/@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css",
+              "node_modules/@festo-ui/angular/css/bundle.css"
+            ],
+            ...
+```
+
+If you only want to load the styles for popovers or image gallery you can use following paths:
+  - `node_modules/@festo-ui/angular/css/popover.css`
+  - `node_modules/@festo-ui/angular/css/iamge-gallery.css`
+
+### Modules
+
+After installation you have to import the **FestoAngularModule** and the **BrowserAnimationsModule** to your root module (called `app.module.ts` in the majority of projects). Have a look at the following example:
+
+```typescript
+import { FestoAngularModule } from '@festo-ui/angular';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, FestoAngularModule, AppRoutingModule],
+  providers: []
+})
+export class AppModule {}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/angular",
-  "version": "8.0.0",
+  "version": "8.1.0-dev.563",
   "author": "Festo UI (styleguide@festo.com)",
   "copyright": "Copyright (c) 2025 Festo SE & Co. KG. All rights reserved.",
   "license": "apache-2.0",
@@ -41,4 +41,4 @@
     }
   },
   "sideEffects": false
-}
+}