Document LuigiElement feature on docu website (#4020)

* #3881 - Document LuigiElement feature on docu website

* Edit script

* Update docs/luigi-element-api.md

Co-authored-by: Johannes Doberer <johannes.doberer@sap.com>

* Fix for missing styles in the function name headers

* Remove enter

* Remove duplicate

* Remove sentence

---------

Co-authored-by: Anna Milewska <anna.milewska@sap.com>
Co-authored-by: Waldemar Mazurek <waldemar.mazurek@sap.com>
Co-authored-by: Johannes Doberer <johannes.doberer@sap.com>

docs/luigi-element-api.md

@@ -0,0 +1,112 @@
+<!-- meta
+{
+  "node": {
+    "label": "Luigi Element API",
+    "category": {
+      "label": "API Reference",
+      "collapsible": true
+    },
+    "metaData": {
+      "categoryPosition": 6,
+      "position": 5
+    }
+  }
+}
+meta -->
+
+# Luigi Element
+
+The `LuigiElement` class is a base class for building web component micro frontends within the Luigi framework. It provides essential functionality for rendering and managing the lifecycle of web components.
+
+## Example Usage
+
+To create a custom web component, extend `LuigiElement` and implement the required methods such as `render()`, `afterInit()`, and `onContextUpdate()`.
+
+```js
+class MyComponent extends LuigiElement {
+  render(ctx) {
+    return `<div>Hello, ${ctx.user.name}!</div>`;
+  }
+
+  afterInit(ctx) {
+    console.log('MyComponent initialized with context:', ctx);
+  }
+
+  onContextUpdate(ctx) {
+    console.log('Context updated:', ctx);
+  }
+}
+```
+
+The html function allows for creating HTML templates with interpolated values.
+
+```js
+const name = 'World';
+const template = html`<p>Hello, ${name}!</p>`;
+console.log(template); // Output: <p>Hello, World!</p>
+```
+
+## API Reference
+
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+### LuigiElement
+
+**Extends HTMLElement**
+
+Base class for Luigi web component micro frontends.
+
+#### Parameters
+
+*   `options`  
+
+#### afterInit
+
+Override to execute logic after initialization of the web component, i.e.
+after internal rendering and all context data set.
+
+##### Parameters
+
+*   `ctx` **any** The context object passed by luigi core
+
+#### render
+
+Override to return the html template string defining the web component view.
+
+##### Parameters
+
+*   `ctx` **any** The context object passed by luigi core
+
+#### update
+
+Override to execute logic after an attribute of this web component has changed.
+
+#### onContextUpdate
+
+Override to execute logic when a new context object is set.
+
+##### Parameters
+
+*   `ctx` **any** The new context object passed by luigi core
+
+#### querySelector
+
+*   **See**: ParentNode.querySelector
+
+Query selector operating on shadow root.
+
+##### Parameters
+
+*   `selector`  
+
+### html
+
+Html string processing according to luigi functionality.
+Also useful in combination with LitElement VS Code plugins.
+
+#### Parameters
+
+*   `literal` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The literal to process.
+*   `keys` **...any** 
+
+Returns **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Returns the processed literal.

docs/mkdocs.yml

@@ -29,6 +29,7 @@ nav:
   - API Reference: 
     - Luigi Core API: luigi-core-api.md
     - Luigi Client API: luigi-client-api.md
+    - Luigi Element API: luigi-element-api.md
   - Advanced: 
     - Advanced scenarios: advanced-scenarios.md
     - Core/Client Communication: communication.md

scripts/package.json

@@ -2,7 +2,7 @@
   "name": "luigi-scripts-private",
   "private": true,
   "scripts": {
-    "docu": "npm run docu:container && npm run docu:client && npm run docu:core",
+    "docu": "npm run docu:container && npm run docu:client && npm run docu:core && npm run docu:element",
     "docu:generate:section": "npm run docu:client:generate:section && npm run docu:core:generate:sections",
     "docu:container": "npm run docu:container:validate && npm run docu:container:generate:sections",
     "docu:container:validate": "documentation lint ../container/typings/LuigiContainer.svelte.d.ts ../container/typings/LuigiCompoundContainer.svelte.d.ts",
@@ -11,6 +11,7 @@
     "docu:container:generate:compound-container-api": "documentation readme ../container/typings/LuigiCompoundContainer.svelte.d.ts --parse-extension ts -f md --readme-file=../docs/luigi-compound-container-api.md --section=\"API Reference\" --markdown-toc=false --quiet --github false",
     "docu:client": "npm run docu:client:validate && npm run docu:client:generate:section",
     "docu:client:generate:section": "documentation readme ../client/src/luigi-client.js ../client/luigi-client-wc-docu-mixin.js -f md --readme-file=../docs/luigi-client-api.md --section=\"API Reference\" --markdown-toc=false --quiet --github false",
+    "docu:element": "documentation readme ../client/src/luigi-element.js -f md --readme-file=../docs/luigi-element-api.md --section=\"API Reference\" --markdown-toc=false --quiet --github false",
     "docu:client:validate": "documentation lint ../client/src/luigi-client.js",
     "docu:core": "npm run docu:core:validate && npm run docu:core:generate:sections",
     "docu:core:validate": "documentation lint --shallow ../core/src/core-api/config.js ../core/src/core-api/elements.js ../core/src/core-api/auth.js ../core/src/core-api/navigation.js ../core/src/core-api/i18n.js ../core/src/core-api/custom-messages.js ../core/src/core-api/ux.js ../core/src/core-api/globalsearch.js  ../core/src/core-api/theming.js ../core/src/core-api/featuretoggles.js",

website/docs/src/styles/app.scss

@@ -115,7 +115,8 @@ body {
 
     // API Function names
     &.page-luigi-core-api,
-    &.page-luigi-client-api {
+    &.page-luigi-client-api,
+    &.page-luigi-element-api {
         h4 {
             margin-top: 35px;
             display: inline-block;