src/app/core/common-components/hint-box/hint-box.component.ts
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-hint-box |
| standalone | true |
| styleUrls | ./hint-box.component.scss |
| templateUrl | ./hint-box.component.html |
| styleUrl | ./hint-box.component.scss |
AdminDashboardComponent
AdminEntityDetailsComponent
AdminEntityGeneralSettingsComponent
AdminEntityListComponent
AdminEntityPublicFormsComponent
AdminNoteDetailsComponent
AdminPrimaryActionComponent
AdminRelatedEntityDetailsComponent
AdvancedFeaturesComponent
ChangeHistoryDialogComponent
DiscreteImportDialogComponent
EditPublicFormColumnsComponent
EntityImportConfigComponent
ImportComponent
ImportConfirmSummaryComponent
ImportReviewDataComponent
PermissionMatrixComponent
PublicFormFormatWarningComponent
PublicFormPermissionWarningComponent
SubscriptionInfoComponent
SupportComponent
No results matching.
import { Component, ChangeDetectionStrategy, input } from "@angular/core";
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: "app-hint-box",
imports: [],
templateUrl: "./hint-box.component.html",
styleUrl: "./hint-box.component.scss",
})
export class HintBoxComponent {
type = input<"info" | "warning">("info");
}
<div class="hint-banner" [class.warning]="type() === 'warning'">
<ng-content></ng-content>
</div>
./hint-box.component.scss
@use "@angular/material/core/style/elevation" as mat-elevation;
.hint-banner {
background: #e8e8e8;
padding: 1em;
margin-bottom: 1em;
border-radius: 4px;
@include mat-elevation.elevation(1);
}
.warning {
background: #fff3e0;
border-left: 4px solid #f57c00;
}