Which Primeng .css files are required to be in angular.js for various Primeng components? I can't find any documentation for this. The docs for Primeng components don't mention which .css files are required (e.g. DataView).
I'm migrating a ng version 8 project to ng 14 and the layout is wrong in ng14. I created a new ng14 project and copied the various files to it (some of the .ts files required modifications, but they seem to be working). The ng8 angular.json contains this:
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/luna-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css"
],
Here is the (correct) layout:
I added those .css files to the ng14 project but the layout looks like a list:
Did the required .css files in angular.json change from ng8 to ng14? Is this documented anywhere?
Edit: Here's an example. The PrimeNG CLI Quickstart shows this example where they have added the primeflex.css file:
"styles": [
"node_modules/primeng/resources/themes/lara-light-indigo/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeflex/primeflex.css",
"src/styles.css"
],
How do we know which additional .css files are needed?
Here is the .html file.
<div class="wrapper">
<div class="left-side ui-g-12 ui-md-12 ui-lg-4">
<div class="card-block">
<p-panel>
<p-header>
<div class="panel-header">
<span class="panel-title">
Data Exchanges
</span>
<div class="panel-actions">
<button pButton icon="pi pi-plus" class="ui-button-success" (click)="overlayForm.toggle($event)">
</button>
<button pButton icon="pi pi-trash" class="ui-button-danger" (click)="onExchangeDelete()"
[disabled]="!isDeleteExchangeEnabled"></button>
<p-overlayPanel #overlayForm>
<form [formGroup]="exchangeForm" (ngSubmit)="onSubmit()">
<div class="ui-g">
<label for="exchangeInput">Remote Machine</label>
</div>
<div class="ui-g">
<div class="ui-inputgroup">
<input id="exchangeInput" formControlName="exchangeInput" pInputText #exName
type="text" placeholder="Exchange hostname or IP address"
maxlength="45"
autocomplete="off"
(keyup)="receiverIPKeyup($event)"
(click)="openReceiverIPAutocomplete()"
>
<div class="autocomplete" [ngClass]="{'open': receiverIPAutocompleteOpen}">
<div class="item"
*ngFor="let ip of filteredReceiverIPs"
(click)="receiverIPSelected(ip)">{{ip}}</div>
</div>
<button pButton type="button" [disabled]="!exchangeForm.valid"
(click)="onSubmit()" label="OK"></button>
</div>
</div>
</form>
</p-overlayPanel>
</div>
</div>
</p-header>
<div class="exchanges-list-wrapper">
<app-exchange-list [exchangesList]="exchangesList" [deleteSubject]="deleteExchangeSubject"
[selectSubject]="selectExchangeSubject" (selectedExchange)="onExchangeSelected($event)"
(deleteStatus)="onDeleteExchangeStatus($event)"
(exchangeHasBeenDeleted)="exchangeHasBeenDeleted()">
</app-exchange-list>
</div>
<p-footer>
<div class="footer-wrapper">
<div class="status-wrapper">
<div class="rmq-status-wrapper {{rmqState.styleClass}}" pTooltip="{{rmqState.label}}"
appendTo="body" tooltipPosition="right">
<span class="rmq-status-circle"></span>
<span class="rmq-status-title">RMQ</span>
</div>
</div>
</div>
</p-footer>
</p-panel>
</div>
<div class="card-block">
<p-panel>
<p-header>
<div class="panel-header">
<span class="panel-title">
Components
</span>
<div class="panel-actions">
<button pButton icon="pi pi-plus" [disabled]="!selectedExchange" class="ui-button-success"
(click)="onAddComponent()">
</button>
<button pButton icon="pi pi-trash" class="ui-button-danger" (click)="onComponentDelete()"
[disabled]="!isDeleteComponentEnabled">
</button>
</div>
</div>
</p-header>
<div class="component-list-wrapper">
<app-component-list [componentsList]="componentsList" [deleteSubject]="deleteComponentSubject"
[creatingComponentSubject]="creatingComponentSubject"
[componentStatusSubject]="componentStatusSubject"
[exchange]="selectedExchange"
(selectedComponent)="onComponentSelected($event)"
(deleteStatus)="onDeleteComponentStatus($event)"
(deletedComponent)="onComponentDeleted($event)">
</app-component-list>
</div>
</p-panel>
</div>
</div>
<div class="right-side ui-g-12 ui-md-12 ui-lg-8">
<div class="card-block component-configuration">
<p-panel>
<p-header>
<div class="panel-header">
<span class="panel-title"> Component Configuration</span>
<div class="panel-actions">
</div>
</div>
</p-header>
<div class="component-configuration-wrapper">
<app-component-configuration [canAddComponent]="rmqState.isOnline" [exchange]="selectedExchange"
[component]="selectedComponent"
[addSubject]="addComponent" (componentAdded)="onComponentAdded($event)"
[deleteSubject]="deleteComponent" [componentActionButtonsEnabled]="canComponentActionButtonsEnable">
</app-component-configuration>
</div>
</p-panel>
</div>
<div class="card-block empty-block">
</div>
</div>
</div>
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle"></p-confirmDialog>