# ImmElementUi

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.

## Code scaffolding

Run `ng generate component component-name --project imm-element-ui` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project imm-element-ui`.

> Note: Don't forget to add `--project imm-element-ui` or else it will be added to the default project in your `angular.json` file.

## Build

Run `ng build imm-element-ui` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build imm-element-ui`, go to the dist folder `cd dist/imm-element-ui` and run `npm publish`.

## Running unit tests

Run `ng test imm-element-ui` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

## PageForm slots

`PageFormComponent` supports custom tab slots via `ng-template[pageFormSlot]`.

### Recommended usage

- Use `gridList[].slotKey` to mark tabs that should render through a custom slot.
- Register one `ng-template[pageFormSlot]` per slot key, and set `slotKey` on the directive itself.
- `subDataKey` remains a compatibility fallback when `grid.slotKey` is not provided.

### Example

```html
<app-page-form
	[gridList]="gridList"
	[form]="formOptions"
	[getPrmInput]="getPrm">
	<ng-template
		pageFormSlot
		slotKey="gantt"
		let-slotKey="slotKey"
		let-grid="grid"
		let-data="data"
		let-model="model"
		let-upsert="upsert"
		let-pageForm="pageForm"
		let-index="index"
		let-active="active">
		<app-gantt-data
			[grid]="grid"
			[data]="data"
			[model]="model"
			[upsert]="upsert"
			[pageForm]="pageForm"
			[active]="active">
		</app-gantt-data>
	</ng-template>
</app-page-form>
```

### Slot context

The slot template receives:

- `slotKey`: resolved from `grid.slotKey || grid.subDataKey`
- `grid`: current tab config
- `index`: current tab index
- `pageForm`: `PageFormComponent` instance
- `data`: page-level model data
- `model`: current tab model
- `upsert`: page save context
- `active`: whether the current tab is active

### PageFormService

Provide `PageFormService` at the page container level so `PageFormComponent` and custom slot components share the same instance.
Custom slot components can:

- subscribe to `pageFormService.gridAction$` and filter by `subDataKey`
- update page data with `pageFormService.updateData(partialData)`
- update a single sub-table with `pageFormService.updateDataByKey(key, value)`

`PageFormComponent` dispatches add/remove actions with the current `subDataKey`, and shallow-merges incoming page data while keeping sub-form models in sync.