v17 update

src/app/demo/components/documentation/documentation.component.html

@@ -2,9 +2,9 @@
     <div>
         <h2>Documentation</h2>
         <h4>Getting Started</h4>
-        <p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v16 with PrimeNG v16. In case CLI is not installed already, use the command below to set it up.</p>
+        <p>Sakai is an application template for Angular and is distributed as a CLI project. Current versions is Angular v17 with PrimeNG v17. In case CLI is not installed already, use the command below to set it up.</p>
     
-<pre class="app-code"><code>npm install -g @angular/cli</code></pre>
+<pre class="app-code"><code>npm install -g &#64;angular/cli</code></pre>
         
         <p>Once CLI is ready in your system, extract the contents of the zip file distribution, cd to the directory,
             install the libraries from npm and then execute "ng serve" to run the application in your local environment.</p>
@@ -41,11 +41,11 @@ Run 'ng help' for more options.</code></pre>
             initial scale is defined with the <span class="text-primary font-medium">$scale</span> at <strong class="font-semibold">layout.scss</strong>. When default theme or scale is changed at their files initially, it is required to configure the layout service with the matching values
             to avoid sync issues. </p>
     
-<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '@angular/core';
+<pre class="app-code"><code>import &#123; Component, OnInit &#125; from '&#64;angular/core';
 import &#123; PrimeNGConfig &#125; from 'primeng/api';
 import &#123; LayoutService &#125; from './layout/service/app.layout.service';
 
-@Component(&#123;
+&#64;Component(&#123;
     selector: 'app-root',
     templateUrl: './app.component.html'
 &#125;)
@@ -73,10 +73,10 @@ export class AppComponent implements OnInit &#123;
         <p>Menu is a separate component defined in <span class="text-primary font-medium">src/app/layout/app.menu.component.ts</span> file and based on PrimeNG MenuModel API. In order to define the menuitems,
             navigate to this file and define your own model as a nested structure.</p>
     
-<pre class="app-code"><code>import &#123; OnInit &#125; from '@angular/core';
-import &#123; Component &#125; from '@angular/core';
+<pre class="app-code"><code>import &#123; OnInit &#125; from '&#64;angular/core';
+import &#123; Component &#125; from '&#64;angular/core';
 
-@Component(&#123;
+&#64;Component(&#123;
     selector: 'app-menu',
     templateUrl: './app.menu.component.html'
 &#125;)

src/app/demo/components/uikit/floatlabel/floatlabeldemo.component.html

@@ -1,37 +1,63 @@
 <div class="card">
     <h5>Float Label</h5>
-    <p>All input text components support floating labels by adding (<mark>.p-float-label</mark>) to wrapper class.</p>
+    <p>
+        All input text components support floating labels by adding
+        (<mark>.p-float-label</mark>) to wrapper class.
+    </p>
     <div class="grid p-fluid mt-3">
         <div class="field col-12 md:col-4">
             <span class="p-float-label">
-                <input type="text" id="inputtext" pInputText [(ngModel)]="value1">
+                <input
+                    type="text"
+                    id="inputtext"
+                    pInputText
+                    [(ngModel)]="value1"
+                />
                 <label for="inputtext">InputText</label>
             </span>
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label">
-                <p-autoComplete inputId="autocomplete" [(ngModel)]="value2" [suggestions]="filteredCountries"
-                (completeMethod)="searchCountry($event)" field="name"></p-autoComplete>
+                <p-autoComplete
+                    inputId="autocomplete"
+                    [(ngModel)]="value2"
+                    [suggestions]="filteredCountries"
+                    (completeMethod)="searchCountry($event)"
+                    field="name"
+                ></p-autoComplete>
                 <label for="autocomplete">AutoComplete</label>
             </span>
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label p-input-icon-left">
                 <i class="pi pi-search"></i>
-                <input type="text" id="lefticon" pInputText [(ngModel)]="value3">
+                <input
+                    type="text"
+                    id="lefticon"
+                    pInputText
+                    [(ngModel)]="value3"
+                />
                 <label for="lefticon">Left Icon</label>
             </span>
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label p-input-icon-right">
-                <input type="text" id="righticon" pInputText [(ngModel)]="value4">
+                <input
+                    type="text"
+                    id="righticon"
+                    pInputText
+                    [(ngModel)]="value4"
+                />
                 <label for="righticon">Right Icon</label>
                 <i class="pi pi-spin pi-spinner"></i>
             </span>
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label">
-                <p-calendar inputId="calendar" [(ngModel)]="value5"></p-calendar>
+                <p-calendar
+                    inputId="calendar"
+                    [(ngModel)]="value5"
+                ></p-calendar>
                 <label for="calendar">Calendar</label>
             </span>
         </div>
@@ -43,42 +69,72 @@
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label">
-                <p-inputMask inputId="inputmask" mask="99/99/9999" [(ngModel)]="value7"></p-inputMask>
+                <p-inputMask
+                    inputId="inputmask"
+                    mask="99/99/9999"
+                    [(ngModel)]="value7"
+                ></p-inputMask>
                 <label for="inputmask">InputMask</label>
             </span>
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label">
-                <p-inputNumber inputId="inputnumber" [(ngModel)]="value8"></p-inputNumber>
+                <p-inputNumber
+                    inputId="inputnumber"
+                    [(ngModel)]="value8"
+                ></p-inputNumber>
                 <label for="inputnumber">InputNumber</label>
             </span>
         </div>
         <div class="field col-12 md:col-4">
-            <div class="p-inputgroup">
-                <span class="p-inputgroup-addon">
+            <p-inputGroup>
+                <p-inputGroupAddon>
                     <i class="pi pi-user"></i>
-                </span>
+                </p-inputGroupAddon>
                 <span class="p-float-label">
-                    <input type="text" inputId="inputgroup" pInputText [(ngModel)]="value9"> 
+                    <input
+                        type="text"
+                        inputId="inputgroup"
+                        pInputText
+                        [(ngModel)]="value9"
+                    />
                     <label for="inputgroup">InputGroup</label>
                 </span>
-            </div>
+            </p-inputGroup>
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label">
-                <p-dropdown inputId="dropdown" [autoDisplayFirst]="false" [options]="cities" [(ngModel)]="value10" optionLabel="name"></p-dropdown>
+                <p-dropdown
+                    inputId="dropdown"
+                    [autoDisplayFirst]="false"
+                    [options]="cities"
+                    [(ngModel)]="value10"
+                    optionLabel="name"
+                ></p-dropdown>
                 <label for="dropdown">Dropdown</label>
             </span>
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label">
-                <p-multiSelect inputId="multiselect" [options]="cities" [(ngModel)]="value11" optionLabel="name" [filter]="false"></p-multiSelect>
+                <p-multiSelect
+                    inputId="multiselect"
+                    [options]="cities"
+                    [(ngModel)]="value11"
+                    optionLabel="name"
+                    [filter]="false"
+                ></p-multiSelect>
                 <label for="multiselect">MultiSelect</label>
             </span>
         </div>
         <div class="field col-12 md:col-4">
             <span class="p-float-label">
-                <textarea inputId="textarea" rows="3" cols="30" [(ngModel)]="value12" pInputTextarea></textarea>
+                <textarea
+                    inputId="textarea"
+                    rows="3"
+                    cols="30"
+                    [(ngModel)]="value12"
+                    pInputTextarea
+                ></textarea>
                 <label for="textarea">Textarea</label>
             </span>
         </div>

src/app/demo/components/uikit/floatlabel/floatlabeldemo.module.ts

@@ -13,7 +13,8 @@ import { CascadeSelectModule } from "primeng/cascadeselect";
 import { MultiSelectModule } from "primeng/multiselect";
 import { InputTextareaModule } from "primeng/inputtextarea";
 import { InputTextModule } from "primeng/inputtext";
-
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { InputGroupModule } from 'primeng/inputgroup';
 @NgModule({
 	imports: [
 		CommonModule,
@@ -28,7 +29,9 @@ import { InputTextModule } from "primeng/inputtext";
 		CascadeSelectModule,
 		MultiSelectModule,
 		InputTextareaModule,
-		InputTextModule
+		InputTextModule,
+		InputGroupModule,
+		InputGroupAddonModule
 	],
 	declarations: [FloatLabelDemoComponent]
 })

src/app/demo/components/uikit/input/inputdemo.component.html

@@ -170,32 +170,41 @@
 			<h5>InputGroup</h5>
 			<div class="grid">
 				<div class="col-12 md:col-6">
-					<div class="p-inputgroup">
-						<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
-						<input type="text" pInputText placeholder="Username">
-					</div>
-				</div>
+                    <p-inputGroup>
+                        <p-inputGroupAddon>
+                            <i class="pi pi-user"></i>
+                        </p-inputGroupAddon>
+                        <input pInputText type="text" placeholder="Username" />
+                    </p-inputGroup>
+                </div>
 				<div class="col-12 md:col-6">
-					<div class="p-inputgroup">
-						<span class="p-inputgroup-addon"><i class="pi pi-tags" style="line-height: 1.25;"></i></span>
-						<span class="p-inputgroup-addon"><i class="pi pi-shopping-cart" style="line-height: 1.25;"></i></span>
-						<input type="text" pInputText placeholder="Price">
-						<span class="p-inputgroup-addon">$</span>
-						<span class="p-inputgroup-addon">.00</span>
-					</div>
-				</div>
+                    <p-inputGroup class="w-full">
+                        <p-inputGroupAddon>
+                            <i class="pi pi-tags" style="line-height: 1.25"></i>
+                        </p-inputGroupAddon>
+
+                        <p-inputGroupAddon>
+                            <i class="pi pi-shopping-cart" style="line-height: 1.25"></i>
+                        </p-inputGroupAddon>
+
+                        <input type="text" pInputText placeholder="Price" />
+                        <p-inputGroupAddon>$</p-inputGroupAddon>
+                        <p-inputGroupAddon>.00</p-inputGroupAddon>
+                    </p-inputGroup>
+                </div>
 				<div class="col-12 md:col-6">
-					<div class="p-inputgroup">
-						<button type="button" pButton pRipple label="Search"></button>
-						<input type="text" pInputText placeholder="Keyword">
-					</div>
-				</div>
+                    <p-inputGroup>
+                        <button type="button" pButton label="Search"></button>
+                        <input type="text" pInputText placeholder="Keyword" />
+                    </p-inputGroup>
+                </div>
 				<div class="col-12 md:col-6">
-					<div class="p-inputgroup">
-						<span class="p-inputgroup-addon"><p-checkbox [(ngModel)]="valCheck2" [binary]="true"></p-checkbox></span>
-						<input type="text" pInputText placeholder="Username">
-					</div>
-				</div>
+                    <p-inputGroup>
+                        <p-inputGroupAddon><p-checkbox [(ngModel)]="valCheck2"
+                                [binary]="true"></p-checkbox></p-inputGroupAddon>
+                        <input type="text" pInputText placeholder="Username" />
+                    </p-inputGroup>
+                </div>
 			</div>
 		</div>
 	</div>

src/app/demo/components/uikit/input/inputdemo.module.ts

@@ -25,7 +25,8 @@ import { RadioButtonModule } from 'primeng/radiobutton';
 import { ColorPickerModule } from 'primeng/colorpicker';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import { SliderModule } from 'primeng/slider';
-
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { InputGroupModule } from 'primeng/inputgroup';
 @NgModule({
 	imports: [
 		CommonModule,
@@ -52,7 +53,9 @@ import { SliderModule } from 'primeng/slider';
 		ListboxModule,
 		SelectButtonModule,
 		CheckboxModule,
-		ButtonModule
+		ButtonModule,
+		InputGroupModule,
+		InputGroupAddonModule
 	],
 	declarations: [InputDemoComponent]
 })

src/app/demo/components/uikit/list/listdemo.component.html

@@ -14,8 +14,8 @@
 					</div>
 				</ng-template>
 
-				<ng-template let-product pTemplate="listItem">
-					<div class="col-12">
+				<ng-template let-products pTemplate="listItem">
+					<div class="col-12" *ngFor="let product of products">
 						<div class="flex flex-column md:flex-row align-items-center p-3 w-full">
 							<img [src]="'assets/demo/images/product/' + product.image" [alt]="product.name" class="my-4 md:my-0 w-9 md:w-10rem shadow-2 mr-5"/>
 							<div class="flex-1 flex flex-column align-items-center text-center md:text-left">
@@ -36,8 +36,9 @@
 					</div>
 				</ng-template>
 
-				<ng-template let-product pTemplate="gridItem">
-					<div class="col-12 md:col-4">
+				<ng-template let-products pTemplate="gridItem">
+					<div class="grid grid-nogutter">
+					<div class="col-12 md:col-4" *ngFor="let product of products">
 						<div class="card m-3 border-1 surface-border">
 							<div class="flex flex-wrap gap-2 align-items-center justify-content-between mb-2">
 								<div class="flex align-items-center">
@@ -58,6 +59,7 @@
 							</div>
 						</div>
 					</div>
+					</div>
 				</ng-template>
 			</p-dataView>
 		</div>