Utility-komponenter, direktiver og pipes¶

Denne siden samler mindre felleskomponenter og Angular-hjelpere som ikke trenger egne sider, men som bør brukes konsekvent.

Feature-tabell¶

Type	Navn	Selector/pipe	Bruk
Komponent	TimeInsightsComponent	`app-time-insights`	Viser endringshistorikk for timeregistrering.
Komponent	PWAInstallPromptComponent	`app-pwa-install-prompt`	Viser PWA-installasjonsprompt.
Komponent	UpdateNotificationComponent	`app-update-notification`	Varsler om service worker-oppdatering eller kritisk reload.
Komponent	NgbdDatepickerI18n	`ngb-datepicker-i18n`	ng-bootstrap datepicker med oversatte måneder/dager.
Direktiv	AutoResizeTextareaDirective	`textarea[appAutoResize]`	Autosizer tekstfelt opp til maks rader.
Direktiv	MarkAsteriskDirective	`[required-asterisk]`	Legger required-stjerne etter label.
Pipe	FormatTimePipe	`formatTime`	Formaterer `HHmm` til `HH:mm`.
Pipe	ToDatePipe	`toDate`	Konverterer `YYYYMMDD` til `Date`.
Pipe	Nl2brPipe	`nl2br`	Escaper tekst og legger til enkel markdown-/linjeskift-HTML.

Time insights¶

Del	Sti
Komponent	`ui/ePortal.ui/src/app/shared/time-insights/time-insights.component.ts`
Service	`ui/ePortal.ui/src/app/services/time-insights.service.ts`

app-time-insights viser endringshistorikk for en wage registration. Komponenten kan åpnes via public method open.

<app-time-insights #timeInsights></app-time-insights>

<button type="button" class="btn btn-link btn-sm" (click)="timeInsights.open(row.wrID, row.employeeName, row.employeeNo)">
  {{ 'TimeInsights.Open' | translate }}
</button>

Type	Navn	Default	Beskrivelse
Input	`wrID`	`0`	Wage registration id.
Method	`open(wrID, employeeName, employeeNo)`		Åpner panelet og laster historikk.
Method	`close()`		Lukker panelet og nullstiller data.

PWA install prompt¶

Del	Sti
Komponent	`ui/ePortal.ui/src/app/shared/pwa-install-prompt/pwa-install-prompt.component.ts`

Komponenten har ingen inputs eller outputs. Den lytter på PWAService og viser prompt når appen kan installeres.

<app-pwa-install-prompt></app-pwa-install-prompt>

Plasser den normalt én gang i app-shell, ikke på hver feature-side.

Update notification¶

Del	Sti
Komponent	`ui/ePortal.ui/src/app/shared/components/update-notification/update-notification.component.ts`

Komponenten har ingen inputs eller outputs. Den lytter på Angular service worker og AppUpdateService.

<app-update-notification></app-update-notification>

Plasser den normalt én gang i app-shell.

Datepicker i18n¶

Del	Sti
Komponent	`ui/ePortal.ui/src/app/shared/date-picker-i18n.ts`

Wrapper rundt ngb-datepicker med oversatte måned- og dagnavn fra i18n.

<ngb-datepicker-i18n
  [(model)]="selectedDate"
  [openPopup]="true"
  [placeholder]="'Common.SelectDate' | translate"
  [disabled]="formDisabled"
  [minDate]="minDate"
  [maxDate]="maxDate">
</ngb-datepicker-i18n>

Type	Navn	Default	Beskrivelse
Input	`model`		`NgbDateStruct`.
Output	`modelChange`		Emitter valgt dato.
Input	`openPopup`	`false`	Viser input med kalenderknapp i stedet for inline datepicker.
Input	`placeholder`	`''`	Placeholder for popup-input.
Input	`readOnly`	`false`	Gjør input readonly.
Input	`disabled`	`false`	Deaktiverer knapp/input.
Input	`navigation`	`arrow`	ng-bootstrap navigation mode.
Input	`footerTemplate`	`null`	Valgfri footer template.
Input	`minDate`		Nedre datogrense.
Input	`maxDate`		Øvre datogrense.

Direktiver¶

Auto-resize textarea¶

<textarea
  appAutoResize
  [appAutoResizeMax]="12"
  rows="3"
  class="form-control"
  formControlName="description">
</textarea>

Input	Default	Beskrivelse
`appAutoResizeMax`	`10`	Maks synlige rader før textarea får scroll.

Required asterisk¶

<div class="form-group" required-asterisk>
  <label for="customerName">{{ 'Customer.Name' | translate }}</label>
  <input id="customerName" class="form-control" formControlName="customerName">
</div>

Direktivet finner første label i parent og legger til en span.required-asterisk hvis den ikke finnes.

Pipes¶

<span>{{ row.startTime | formatTime }}</span>
<span>{{ row.workDate | toDate | date: dateFormat }}</span>
<div [innerHTML]="message.body | nl2br"></div>

Pipe	Input	Output
`formatTime`	`HHmm`	`HH:mm`
`toDate`	`YYYYMMDD` eller `Date`	`Date` eller `null`
`nl2br`	tekst	`SafeHtml` med escaped HTML, enkle lister, bold og interne lenker

Kjente fallgruver¶

Fallgruve	Riktig mønster
Legge PWA/update-komponenter i mange feature-sider	Plasser dem én gang i shell.
Bruke `nl2br` på ubegrenset ekstern HTML	Den er laget for tekst som escapes først, ikke som generell HTML-renderer.
Bruke `formatTime` på allerede formatert tid med sekunder	Send `HHmm` eller lag egen formattering i parent.
Bruke required-stjerne uten label i parent	Direktivet trenger en `label` i samme parent-element.