+
\ No newline at end of file
diff --git a/U22/src/app/adminuser/adminuser.edit.component.ts b/U22/src/app/adminuser/adminuser.edit.component.ts
new file mode 100644
index 0000000..e9881c6
--- /dev/null
+++ b/U22/src/app/adminuser/adminuser.edit.component.ts
@@ -0,0 +1,203 @@
+import { Component, inject, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormGroup, Validators, ReactiveFormsModule, FormBuilder, FormControl } from '@angular/forms';
+import { Subject, pipe, Subscription, single } from 'rxjs';
+
+import { AdminUser, Lookup, userRole } from '../models';
+import { LookupService, Utils } from '../shares';
+import { AdminUserService } from './adminuser.service';
+import { MessageService } from 'primeng/api';
+import { InputTextModule } from 'primeng/inputtext';
+import { SelectModule } from 'primeng/select';
+import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from 'primeng/checkbox';
+@Component({
+ templateUrl: 'adminuser.edit.component.html',
+ imports: [InputTextModule, ButtonModule, ReactiveFormsModule, SelectModule, CheckboxModule],
+ selector: 'adminuser-edit',
+ styleUrls: ['adminuser.edit.component.css']
+})
+export class AdminUserEditComponent implements OnInit, OnDestroy {
+ returnUrl = '';
+ loginUser = '';
+ _id = -1;
+ Roles = signal
+ {{getEditText()}}
+
+
+
+
+
+
+
+ Date
+ Concession Type
+ Concession Card Number
+ Concession Holder Name
+ Validation Point
+ Expiry date checked
+
+ @if(isAdmin) {
+ Staff Name
+ Delete
+ }
+ Edit
+
+
+
+
+ {{element.validateDate | date: 'dd/MM/yyyy HH:mm'}}
+
+ {{element.concessionType}}
+
+
+ {{element.concessionCard}}
+
+
+ {{element.concessionHolder}}
+
+
+ {{element.validationPoint}}
+
+
+
+ @if (element.concessionExpiry == true)
+ {
+
+ }
+ @else {
+
+ }
+
+
+
+
+
+
+ @if(isAdmin) {
+
+ {{element.staffFirstName}} {{element.staffLastName}}
+
+
+
+
+
+
+
+ }
+
+
+
+
+
+
+
diff --git a/U22/src/app/concessionValidation/concessionvalidation.component.ts b/U22/src/app/concessionValidation/concessionvalidation.component.ts
new file mode 100644
index 0000000..856823a
--- /dev/null
+++ b/U22/src/app/concessionValidation/concessionvalidation.component.ts
@@ -0,0 +1,149 @@
+import { Component, OnInit, OnDestroy, signal, inject } from '@angular/core';
+
+import { ConcessionValidation } from '../models';
+
+import { Utils } from '../shares';
+
+import { Router, RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { ConcessionValidationService } from './concessionvalidation.service';
+
+import { DatePickerModule } from 'primeng/datepicker';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { TableModule } from 'primeng/table';
+import { ButtonModule } from 'primeng/button';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Pencil } from '@primeicons/angular/pencil';
+import { Times } from '@primeicons/angular/times';
+import { Check } from '@primeicons/angular/check';
+
+
+@Component({
+ selector: 'concessionvalidation-list',
+ templateUrl: './concessionvalidation.component.html',
+ imports: [TableModule, ButtonModule, CommonModule, FormsModule, Check, Times, Pencil, DatePickerModule, RouterModule],
+ styleUrls: ['./concessionvalidation.component.css']
+})
+export class ConcessionValidationComponent implements OnInit, OnDestroy {
+ private concessionValidationService = inject(ConcessionValidationService);
+ private router = inject(Router);
+ private messageService = inject(MessageService);
+ private confirmationService = inject(ConfirmationService);
+ dataSource = signal([]);
+ isAdmin = false;
+ isAllowFilter = true;
+ fromDate = new Date();
+ toDate = new Date();
+ username = '';
+ private subscription: Subscription = new Subscription();
+
+ msg = "[ConcessionValidation component]";
+
+
+ /*
+ private store: Store
+ */
+ constructor(
+
+
+ ) {
+
+ this.isAdmin = Utils.getIsAdmin();
+ }
+ //KeyboardEvent
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ // this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+ ngOnInit(): void {
+ const user = Utils.getCurrentUser();
+ // console.log(this.msg + "current login user ", user);
+ if (user.username === "") {
+ user.username = "60249360";
+ this.messageService.add({ severity: 'error', summary: 'Error', detail: "you are not login! using my number " + user.username });
+ }
+ this.username = user.username;
+ if (this.isAdmin)
+ this.username = '';
+ const dateRange = this.concessionValidationService.getDate();
+ // console.log("the date range for now ", dateRange);
+ if (dateRange.fromDate != '')
+ this.fromDate = dateRange.fromDate;
+ if (dateRange.toDate != '')
+ this.toDate = dateRange.toDate;
+ this.onLoad();
+ /*
+ this.store.dispatch(validationActions.LoadValidationpoints());
+ this.store.pipe(select(validationSelector.getAllValidations)).subscribe(result => this.dataSource.data = result);
+ */
+ }
+
+
+ onLoad(): void {
+ const cDate = this.fromDate;
+ const tDate = this.toDate;
+
+ this.subscription.add(
+ this.concessionValidationService.loadConcessionvalidationByStaffId(this.username, cDate, tDate)
+ .subscribe({
+ next: result => {
+ //console.log(this.msg + "onInit load Data by staffId "+ this.username, result);
+ this.dataSource.set(result.data);
+ }, error: e => console.error("error in loading concession validation", e)
+ })
+ );
+
+ //this.dataList$ = this.concessionValidationService.loadConcessionvalidationByStaffId(this.username, cDate, tDate)
+ // .pipe(catchError(err => {this.toastr.error(err.message); return EMPTY}));
+ }
+ setDate(): void {
+ this.concessionValidationService.setDateRange(this.fromDate, this.toDate);
+ }
+ showEdit(item: ConcessionValidation) {
+ // console.log(this.msg + "on row click", item);
+ this.setDate();
+ this.router.navigate(['/concessionvalidation/' + item.id], { queryParams: { returnUrl: '/concessionvalidation' } });
+ }
+
+ deleteItem(id: number): void {
+ const message = "Are you sure you want to delete this?";
+ const title = " Confirmation";
+ this.confirmationService.confirm({
+
+ message: message,
+ header: title,
+ icon: 'pi pi-exclamation-triangle',
+
+ accept: () => {
+ this.concessionValidationService.deleteConcessionvalidation(id)
+ .subscribe(result => {
+ console.log(this.msg + " deleteItem success", result);
+ let data = this.dataSource();
+ let index: number = data.findIndex(d => d.id === id);
+ console.log(this.msg + "delete from datasource");
+ data.splice(index, 1)
+ this.dataSource.set(data);
+ },
+ error => {
+
+
+ console.log("error ", error);
+ }
+ );
+ },
+ reject: () => {
+ console.log(this.msg + "click on No to delete");
+ }
+ });
+
+ }
+
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ }
+
+}
+
+
+
diff --git a/U22/src/app/concessionValidation/concessionvalidation.edit.component.css b/U22/src/app/concessionValidation/concessionvalidation.edit.component.css
new file mode 100644
index 0000000..3db3368
--- /dev/null
+++ b/U22/src/app/concessionValidation/concessionvalidation.edit.component.css
@@ -0,0 +1,12 @@
+table {
+ width: 100%;
+}
+
+.mat-form-field {
+ font-size: 14px;
+ width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+ width: 35px;
+ padding-right: 2px;
+}
diff --git a/U22/src/app/concessionValidation/concessionvalidation.edit.component.html b/U22/src/app/concessionValidation/concessionvalidation.edit.component.html
new file mode 100644
index 0000000..d02ce91
--- /dev/null
+++ b/U22/src/app/concessionValidation/concessionvalidation.edit.component.html
@@ -0,0 +1,68 @@
+();
+ _id = -1;
+ isAdmin = false;
+ concessionTypes = signal([]);
+ validationPoints = signal([]);
+
+
+ private subscription: Subscription = new Subscription();
+ concessionvalidationForm = this.formBuilder.group({
+ id: [0], //Validators.required
+ validateDate: new FormControl(null), //Validators.required
+ concessionCard: ['', Validators.required],
+ concessionHolder: ['', Validators.required],
+ concessionExpiry: [false, Validators.required], //Validators.required
+ concessionTypeId: [-1, Validators.min(1)],
+ stafflinkNo: [''], //Validators.required
+ validationPointId: [-1, Validators.min(1)],
+ validationPoint: [''], //Validators.required
+ staffFirstName: [''], //Validators.required
+ staffLastName: [''], //Validators.required
+ staffEmail: [''], //Validators.required
+ active: [false], //Validators.required
+ });
+ constructor() {
+ /*
+ this.concessionTypes = [];
+ let item:Lookup = {id:1,categoryId:0, description:'Health Care Card'};
+ this.concessionTypes.push(item);
+ item = {id:3,categoryId:1, description:'Gold Veterans Affairs Card'};
+ this.concessionTypes.push(item);
+ item = {id:3,categoryId:1, description:'Pensioner Concession Card'};
+ this.concessionTypes.push(item);
+ */
+
+ }
+ searchCard(): void {
+ const cardNo = this.concessionvalidationForm.controls["concessionCard"].value ?? '';
+ if (cardNo != "") {
+ const card$ = this.concessionValidationService.loadConcessionvalidationByCard(cardNo);
+ this.subscription.add(card$.subscribe({
+ next: x => {
+ if (x.statusCode == 1) {
+ const data = x.data;
+ this.concessionvalidationForm.patchValue({
+ concessionHolder: data.concessionHolder,
+ concessionTypeId: data.concessionTypeId,
+
+
+ });
+ }
+ }
+ })
+ );
+ }
+ }
+
+ ngOnInit(): void {
+
+ this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+ const id = Number(this.route.snapshot.paramMap.get('id'));
+
+ // now load thing up
+ this._id = id;
+
+ this.isAdmin = Utils.getIsAdmin();
+
+ this.subscription.add(this.lookupService.loadConcessionType().subscribe({
+ next: x => this.concessionTypes.set(x.data),
+ error: e => console.error("error loading concession type", e)
+ }
+ ));
+ this.subscription.add(
+ this.lookupService.loadValidationPoint().subscribe({
+ next: x => this.validationPoints.set(x.data),
+ error: e => console.error("error validation Point", e)
+ })
+
+ );
+ this.subscription.add(this.concessionvalidationForm.valueChanges.subscribe(x => this.isChange = false));
+ this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
+ const user = Utils.getCurrentUser();
+
+ console.log(this.msg + "current login user ", user);
+ if (user.username === "") {
+ user.username = "60249360";
+ this.messageService.add({ severity: 'error', summary: 'Error', detail: "you are not login! using my number " + user.username });
+ }
+
+ if (this._id < 1) {
+ this.concessionvalidationForm.patchValue({
+ validateDate: new Date(),
+ stafflinkNo: user.username,
+ staffFirstName: user.firstName,
+ staffLastName: user.lastName,
+ staffEmail: user.email,
+ validationPointId: user.validationPointId,
+ active: true
+ });
+ }
+ else {
+ this.subscription.add(
+ this.concessionValidationService.loadConcessionvalidationById(id)
+ .subscribe({
+ next: x => this.assignValue(x.data),
+ error: e => console.log(e.message)
+ }));
+ // console.log(this.msg + " load from db"+id);
+
+ }
+
+ }
+
+
+ get isFieldsChange() {
+ const chan = this.isChange || !this.concessionvalidationForm.valid; // this disable so need true valid = true not
+ const fvalid = this.concessionvalidationForm.valid;
+ // console.log(this.msg + "is fields change is valid: " + fvalid , chan,);
+ return chan;
+ }
+ getEditText(): string {
+ if (this._id > 0)
+ return "Edit Concession Validation";
+ else
+ return "New Concession Validation";
+ }
+ onChangeValidation($event: Event) {
+ //$event.target.value
+ //this.selectedCar = (event.target as HTMLSelectElement).value;
+ var val = ($event.target as HTMLSelectElement).value;
+ // console.log("the log for val " , val);
+ }
+
+ assignValue(concessionvalidation: ConcessionValidation): void {
+ this.concessionvalidationForm.patchValue({
+ id: concessionvalidation.id,
+ validateDate: moment(concessionvalidation.validateDate).toDate(),
+ concessionCard: concessionvalidation.concessionCard,
+ concessionHolder: concessionvalidation.concessionHolder,
+ concessionExpiry: concessionvalidation.concessionExpiry,
+ concessionTypeId: concessionvalidation.concessionTypeId,
+ stafflinkNo: concessionvalidation.stafflinkNo,
+ staffFirstName: concessionvalidation.staffFirstName,
+ staffLastName: concessionvalidation.staffLastName,
+ staffEmail: concessionvalidation.staffEmail,
+ validationPointId: concessionvalidation.validationPointId,
+ active: concessionvalidation.active,
+ });
+ // disable use false//true for not disable.
+ this.subChanged$.next(true);
+
+ }
+
+ // convenience getter for easy access in form fields
+ get f() { return this.concessionvalidationForm.controls; }
+
+ onSubmit(): void {
+ const OkToSave = this.concessionvalidationForm.valid;
+
+ const checkActive = this.concessionvalidationForm.value.concessionExpiry ?? false;
+ console.log("onsubmit value", checkActive, this.concessionvalidationForm.value);
+ if (checkActive == false) {
+ this.messageService.add({ severity: 'error', summary: 'Check Concession Expiry', detail: 'Not Check Concession Expiry' });
+ return;
+ }
+ if (OkToSave) {
+ const concessionvalidationValue = this.concessionvalidationForm.value;
+ const concessionvalidation: ConcessionValidation = {
+ id: concessionvalidationValue.id ?? 0,
+ validateDate: moment(concessionvalidationValue.validateDate).toDate(),
+ concessionCard: concessionvalidationValue.concessionCard ?? '',
+ concessionHolder: concessionvalidationValue.concessionHolder ?? '',
+ concessionExpiry: concessionvalidationValue.concessionExpiry ?? false,
+ concessionTypeId: concessionvalidationValue.concessionTypeId ?? 0,
+ stafflinkNo: concessionvalidationValue.stafflinkNo ?? '',
+ staffFirstName: concessionvalidationValue.staffFirstName ?? '',
+ staffLastName: concessionvalidationValue.staffLastName ?? '',
+ staffEmail: concessionvalidationValue.staffEmail ?? '',
+ validationPointId: concessionvalidationValue.validationPointId ?? 0,
+ active: concessionvalidationValue.active ?? false,
+ };
+ // console.log(this.msg + "this is OKTOsave", concessionvalidation);
+ //if edit mode just save it don't check
+ if (concessionvalidation.id > 0) {
+ this.saveConcession(concessionvalidation);
+ }
+ else {
+ //check first only if new
+ this.checkAndSave(concessionvalidation);
+ }
+ }
+ else {
+ // console.log(this.msg + "this is NOT OKTOsave");
+ this.messageService.add({ severity: 'error', summary: 'Error', detail: "please fill in the required fields" });
+
+ }
+ }
+
+ checkAndSave(concessionvalidation: ConcessionValidation): void {
+ const currentDate = moment(concessionvalidation.validateDate).format("YYYY-MM-DD");
+ const id = concessionvalidation.id;
+ this.subscription.add(
+ this.concessionValidationService.checkConcessionValidationByStaff(concessionvalidation.stafflinkNo,
+ concessionvalidation.concessionCard, currentDate, id)
+ .subscribe(x => {
+ let okTo = true;
+ if (x.data < 0) {
+ const message = "This card was used earlier today. Is it Ok to continue?";
+ const title = "Alert";
+ this.confirmationService.confirm({
+ message: message,
+ header: 'Confirmation',
+ icon: 'pi pi-exclamation-triangle',
+ accept: () => {
+ this.saveConcession(concessionvalidation);
+ },
+ reject: () => {
+ this.router.navigate([this.returnUrl]);
+ }
+ });
+
+ }
+ else {
+ this.saveConcession(concessionvalidation);
+ }
+ })
+ );
+ }
+
+ saveConcession(concessionvalidation: ConcessionValidation): void {
+ //console.log(this.msg + " Save Concession validation to server");
+ this.subscription.add(
+ this.concessionValidationService.saveConcessionvalidation(concessionvalidation)
+ .subscribe({
+ next: x => {
+ if (x.statusCode >= 1) {
+ this.messageService.add({ severity: 'success', summary: 'Success', detail: "Save is OK" });
+ this.router.navigate([this.returnUrl]);
+ }
+ else
+ this.messageService.add({ severity: 'error', summary: 'Fail to Save', detail: x.message });
+
+ }, error: e => {
+ const message = e || e.message;
+ this.messageService.add({ severity: 'error', summary: 'Fail to Save', detail: message });
+ console.log("error ", e);
+ }
+ }
+ ));
+ }
+
+ goBack(): void {
+ this.router.navigate([this.returnUrl]);
+ }
+
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ }
+
+}
diff --git a/U22/src/app/concessionValidation/concessionvalidation.service.ts b/U22/src/app/concessionValidation/concessionvalidation.service.ts
new file mode 100644
index 0000000..7cba1a8
--- /dev/null
+++ b/U22/src/app/concessionValidation/concessionvalidation.service.ts
@@ -0,0 +1,102 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { ConcessionValidation, ResultModel, ConfigureUrl } from '../models';
+import moment from 'moment';
+import { AppSettingService } from '../shares';
+@Injectable({ providedIn: 'root' })
+export class ConcessionValidationService {
+ private dateRange: any;
+ constructor(private http: HttpClient,
+ private appSetting: AppSettingService
+ ) {
+ this.dateRange = {};
+ this.dateRange.fromDate = '';
+ this.dateRange.toDate = '';
+ console.log("constructor concessionValidationService daterange", this.dateRange);
+ }
+ public setDateRange(fromDate: any, toDate: any) {
+ this.dateRange.fromDate = moment(fromDate).toDate();
+ this.dateRange.toDate = moment(toDate).toDate();
+ // console.log("concessionValidationService setdaterange", this.dateRange);
+ }
+ public getDate(): any {
+ // console.log("concessionValidationService getdaterange", this.dateRange);
+ return this.dateRange;
+ }
+ loadConcessionvalidations(): Observable> {
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl;
+ let config = { headers: { 'Content-Type': 'application/json' } };
+ // console.log("the concession", baseUrl);
+ return this.http.get>(baseUrl);
+ }
+ loadConcessionvalidationByStaffId(staffLinkId: string, fromDate: Date, toDate: Date): Observable> {
+ this.setDateRange(fromDate, toDate);
+ const strDate = moment(fromDate).format("YYYY-MM-DD");
+ const strtoDate = moment(toDate).format("YYYY-MM-DD");
+ const url = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationByIdUrl;
+ const params = new HttpParams().set("staffLinkNo", staffLinkId)
+ .set("fromDate", strDate)
+ .set("toDate", strtoDate);
+ const headers = new HttpHeaders().set('Content-Type', 'application/json');
+ const options = {
+ headers: headers,
+ params: params
+ };
+ //console.log("loadConcessionvalidationByStaffId url", url);
+ return this.http.get>(url, options);
+ }
+ loadConcessionvalidationById(id: number): Observable> {
+ let params = new HttpParams().set("id", "" + id);
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl;
+ let headers = new HttpHeaders().set('Content-Type', 'application/json');
+ let options = {
+ headers: headers,
+ params: params
+ };
+ //return this.http.get(this.baseUrl + 'api/Concessionvalidation/LoadConcessionvalidationById',options);
+ return this.http.get>(baseUrl + "/" + id);
+ }
+ loadConcessionvalidationByCard(cardNo: string): Observable> {
+ const data = { cardNo };
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl + "/GetConcessionCard";
+ /*
+ let params = new HttpParams().set("id", "" + id);
+
+ let headers = new HttpHeaders().set('Content-Type', 'application/json');
+ let options = {
+ headers: headers,
+ params: params
+ };
+ */
+ //return this.http.get(this.baseUrl + 'api/Concessionvalidation/LoadConcessionvalidationById',options);
+ return this.http.post>(baseUrl, data);
+ }
+ checkConcessionValidationByStaff(staffLinkNo: string, concessionCard: string, currentDate: string, id: number): Observable> {
+ let params = new HttpParams().set("staffLinkNo", staffLinkNo)
+ .set("concessionCard", concessionCard)
+ .set("currentDate", currentDate)
+ .set("id", "" + id);
+
+ let headers = new HttpHeaders().set('Content-Type', 'application/json');
+ let options = {
+ headers: headers,
+ params: params
+ };
+ const baseUrl = this.appSetting.appSetting.baseUrl;
+ const url = baseUrl + "/" + ConfigureUrl.CheckConcessionValidationByStaffUrl;
+ //return this.http.get(this.baseUrl + 'api/Concessionvalidation/LoadConcessionvalidationById',options);
+ return this.http.get>(url, options);
+ }
+ saveConcessionvalidation(item: ConcessionValidation): Observable> { //insert Concessionvalidation
+ let config = { headers: { 'Content-Type': 'application/json' } };
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl;
+ return this.http.post>(baseUrl, item, config);
+ }
+ deleteConcessionvalidation(Id: number): Observable> {
+ let config = { headers: { 'Content-Type': 'application/json' } };
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.concessionValidationUrl;
+ return this.http.delete>(baseUrl + "/" + Id);
+ }
+}
+
diff --git a/U22/src/app/concessionValidation/index.ts b/U22/src/app/concessionValidation/index.ts
new file mode 100644
index 0000000..208fad4
--- /dev/null
+++ b/U22/src/app/concessionValidation/index.ts
@@ -0,0 +1,4 @@
+export * from './concessionvalidation.component';
+export * from './concessionvalidation.edit.component';
+export * from './concessionvalidation.service';
+
diff --git a/U22/src/app/concessiontype/concessiontype.component.css b/U22/src/app/concessiontype/concessiontype.component.css
new file mode 100644
index 0000000..3db3368
--- /dev/null
+++ b/U22/src/app/concessiontype/concessiontype.component.css
@@ -0,0 +1,12 @@
+table {
+ width: 100%;
+}
+
+.mat-form-field {
+ font-size: 14px;
+ width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+ width: 35px;
+ padding-right: 2px;
+}
diff --git a/U22/src/app/concessiontype/concessiontype.component.html b/U22/src/app/concessiontype/concessiontype.component.html
new file mode 100644
index 0000000..c953727
--- /dev/null
+++ b/U22/src/app/concessiontype/concessiontype.component.html
@@ -0,0 +1,45 @@
+([]);
+
+ private subscription: Subscription = new Subscription();
+
+
+ msg = "[concessionType.com]";
+
+
+ /*
+ private store: Store
+ */
+ constructor(
+
+ ) {
+
+ }
+ /*
+ applyFilter($event:any) {
+ const filterValue = $event.target.value;
+ this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+ */
+ ngOnInit(): void {
+ this.subscription.add(
+ this.concessionTypeService.loadConcessiontypes().subscribe(
+ {
+ next: result => {
+ // console.log(this.msg + "onInit", result);
+ this.dataSource.set(result.data);
+ }, error: e => {
+
+ console.log("error ", e);
+ }
+ }
+ )
+ );
+
+ /*
+ this.store.dispatch(validationActions.LoadValidationpoints());
+ this.store.pipe(select(validationSelector.getAllValidations)).subscribe(result => this.dataSource.data = result);
+ */
+ }
+
+
+ showEdit(item: ConcessionType) {
+ console.log(this.msg + "on row click", item);
+ this.router.navigate(['/concessiontype/' + item.id], { queryParams: { returnUrl: '/concessiontype' } });
+ }
+ deleteItem(id: number): void {
+
+ this.concessionTypeService.deleteConcessiontype(id)
+ .pipe(take(1))
+ .subscribe(result => {
+ // console.log(this.msg + " deleteItem success", result);
+ let data = this.dataSource();
+ let index: number = data.findIndex(d => d.id === id);
+ // console.log(this.msg + "delete from datasource");
+ data.splice(index, 1)
+ this.dataSource.set(data);
+ },
+ error => {
+
+ console.log("error ", error);
+ }
+ );
+
+ }
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ }
+}
+
+
+
diff --git a/U22/src/app/concessiontype/concessiontype.edit.component.css b/U22/src/app/concessiontype/concessiontype.edit.component.css
new file mode 100644
index 0000000..3db3368
--- /dev/null
+++ b/U22/src/app/concessiontype/concessiontype.edit.component.css
@@ -0,0 +1,12 @@
+table {
+ width: 100%;
+}
+
+.mat-form-field {
+ font-size: 14px;
+ width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+ width: 35px;
+ padding-right: 2px;
+}
diff --git a/U22/src/app/concessiontype/concessiontype.edit.component.html b/U22/src/app/concessiontype/concessiontype.edit.component.html
new file mode 100644
index 0000000..7ff5bda
--- /dev/null
+++ b/U22/src/app/concessiontype/concessiontype.edit.component.html
@@ -0,0 +1,34 @@
+();
+ concessiontypeForm = this.formBuilder.group({
+ id: [0], //Validators.required
+ description: [''], //Validators.required
+ display: [''], //Validators.required
+ active: [false], //Validators.required
+ });
+ constructor() { }
+ ngOnInit(): void {
+ this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+ const id = Number(this.route.snapshot.paramMap.get('id'));
+ // now load thing up
+ this.subscription.add(this.concessiontypeForm.valueChanges.subscribe(x => this.isChange = false));
+ this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
+ if (id > 0) {
+ this.subscription.add(
+ this.concessionTypeService.loadConcessiontypeById(id).subscribe({
+ next: x => {
+ this.assignValue(x.data)
+ }, error: e => {
+
+ console.log("error ", e);
+ }
+ }
+ )
+ );
+ }
+ }
+ getEditText(): string {
+ if (this._id > 0)
+ return "Edit Concession Type";
+ else
+ return "New Concession Type";
+ }
+ // this for disable submit button
+ get isFieldsChange() {
+ const chan = this.isChange || !this.concessiontypeForm.valid; // this disable so need true valid = true not
+ //console.log(this.msg + 'is fields change', chan);
+ return chan;
+ }
+ assignValue(concessiontype: ConcessionType): void {
+ this.concessiontypeForm.patchValue({
+ id: concessiontype.id,
+ description: concessiontype.description,
+ display: concessiontype.display,
+ active: concessiontype.active,
+ });
+ // disable use false//true for not disable.
+ this.subChanged$.next(true);
+
+ }
+
+ // convenience getter for easy access in form fields
+ get f() { return this.concessiontypeForm.controls; }
+
+ onSubmit(): void {
+ // if form valid then go save
+ //make sure
+ const okToSave = this.concessiontypeForm.valid;
+ if (okToSave) {
+ let concessiontypeValue = this.concessiontypeForm.value;
+ let concessiontype: ConcessionType = {
+ id: concessiontypeValue.id ?? 0,
+ description: concessiontypeValue.description ?? '',
+ display: concessiontypeValue.display ?? '',
+ active: concessiontypeValue.active ?? false,
+ };
+
+ this.subscription.add(this.concessionTypeService.saveConcessiontype(concessiontype).subscribe(x => {
+ //console.log("after save return is", x);
+ if (x.statusCode > 0) {
+ //alert("save ok");
+
+ this.messageService.add({ severity: 'success', summary: 'Success', detail: "Save is OK" });
+ this.router.navigate([this.returnUrl]);
+ //this.router.navigate(['/home/concessiontype'])
+ }
+ },
+ error => {
+
+ console.log("error ", error);
+ }
+ ));
+ }
+ }
+ goBack(): void {
+ this.router.navigate([this.returnUrl]);
+ }
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ }
+
+}
diff --git a/U22/src/app/concessiontype/concessiontype.service.ts b/U22/src/app/concessiontype/concessiontype.service.ts
new file mode 100644
index 0000000..75ba971
--- /dev/null
+++ b/U22/src/app/concessiontype/concessiontype.service.ts
@@ -0,0 +1,40 @@
+
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { ConcessionType, ResultModel, ConfigureUrl } from '../models';
+import { AppSettingService } from '../shares';
+
+@Injectable({ providedIn: 'root' })
+export class ConcessionTypeService {
+
+ constructor(private http: HttpClient,
+ private appSetting :AppSettingService
+ ) {}
+ loadConcessiontypes(): Observable > {
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" +ConfigureUrl.concessionTypeUrl;
+ let config = { headers : { 'Content-Type': 'application/json' } };
+ return this.http.get>(baseUrl);
+ }
+ loadConcessiontypeById(id:number): Observable> {
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" +ConfigureUrl.concessionTypeUrl;
+ let params = new HttpParams().set("id", ""+id);
+ let headers = new HttpHeaders().set('Content-Type', 'application/json');
+ let options = {
+ headers: headers,
+ params: params
+ };
+
+ return this.http.get>(baseUrl +"/"+id);
+ }
+ saveConcessiontype(concessType:ConcessionType): Observable> { //insert Concessiontype
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" +ConfigureUrl.concessionTypeUrl;
+ let config = { headers : { 'Content-Type': 'application/json' } };
+ return this.http.post>(baseUrl , concessType, config);
+ }
+ deleteConcessiontype(id:number): Observable>{
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/" +ConfigureUrl.concessionTypeUrl;
+ let config = { headers : { 'Content-Type': 'application/json' } };
+ return this.http.delete>(baseUrl +"/" + id);
+ }
+}
diff --git a/U22/src/app/concessiontype/index.ts b/U22/src/app/concessiontype/index.ts
new file mode 100644
index 0000000..3e6671c
--- /dev/null
+++ b/U22/src/app/concessiontype/index.ts
@@ -0,0 +1,4 @@
+export * from './concessiontype.component';
+export * from './concessiontype.edit.component';
+export * from './concessiontype.service';
+
diff --git a/U22/src/app/concessionvalidationreport/concessionvalidationreport.component.css b/U22/src/app/concessionvalidationreport/concessionvalidationreport.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/U22/src/app/concessionvalidationreport/concessionvalidationreport.component.html b/U22/src/app/concessionvalidationreport/concessionvalidationreport.component.html
new file mode 100644
index 0000000..c0c2749
--- /dev/null
+++ b/U22/src/app/concessionvalidationreport/concessionvalidationreport.component.html
@@ -0,0 +1,24 @@
+) => {
+ if (response) {
+ console.log("the download report response", response);
+ CommonUtilities.downloadFile(response, 'report.xlsx');
+ }
+ });
+
+ }
+
+ onDownloadUser(): void {
+ //GetReportFile
+ this.http.getFileResponse(`api/v1/Users/GetReportFile`).pipe(
+ catchError(err => {
+
+ return EMPTY;
+ }),
+ finalize(() => {
+ this.messageService.add({ severity: 'success', summary: 'Success', detail: "download completed ok to view now" });
+ })).subscribe((response: HttpResponse) => {
+ if (response) {
+ console.log("the download user report response", response);
+ CommonUtilities.downloadFile(response, 'UserReport.xlsx');
+ }
+ });
+ }
+
+ ngOnInit(): void {
+ this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+ this.assignValue();
+ }
+
+ assignValue(): void {
+ this.concessionvalidationreportForm.patchValue({
+ fromDate: new Date(),
+ toDate: moment(new Date()).add(30, 'd')
+
+ });
+ }
+
+}
diff --git a/U22/src/app/concessionvalidationreport/index.ts b/U22/src/app/concessionvalidationreport/index.ts
new file mode 100644
index 0000000..a6cea44
--- /dev/null
+++ b/U22/src/app/concessionvalidationreport/index.ts
@@ -0,0 +1 @@
+export * from './concessionvalidationreport.component';
\ No newline at end of file
diff --git a/U22/src/app/login/index.ts b/U22/src/app/login/index.ts
new file mode 100644
index 0000000..22d615d
--- /dev/null
+++ b/U22/src/app/login/index.ts
@@ -0,0 +1,2 @@
+export * from './login.component';
+
diff --git a/U22/src/app/login/login.component.css b/U22/src/app/login/login.component.css
new file mode 100644
index 0000000..f93262f
--- /dev/null
+++ b/U22/src/app/login/login.component.css
@@ -0,0 +1,5 @@
+.btnloginRigh {
+ display: flex;
+ flex-direction:reverse;
+ justify-content:flex-end;
+}
diff --git a/U22/src/app/login/login.component.html b/U22/src/app/login/login.component.html
new file mode 100644
index 0000000..92eb0b0
--- /dev/null
+++ b/U22/src/app/login/login.component.html
@@ -0,0 +1,47 @@
+([]);
+ expanable = new BehaviorSubject(true);
+
+
+ get children(): DataNode$[] {
+ return this.childrenChange.value;
+ }
+ get isExpanable(): boolean {
+ return this.expanable.value;
+ }
+ constructor(public id: number,
+ public name: string,
+ public canCheck: boolean,
+ public hasChildren: boolean,
+ public parentId: number,
+ public loadMoreParentItem: number | null = null) { }
+}
diff --git a/U22/src/app/models/resultmodel.ts b/U22/src/app/models/resultmodel.ts
new file mode 100644
index 0000000..1ea43e3
--- /dev/null
+++ b/U22/src/app/models/resultmodel.ts
@@ -0,0 +1,5 @@
+export interface ResultModel {
+ data: T;
+ message: string;
+ statusCode:number;
+}
\ No newline at end of file
diff --git a/U22/src/app/models/user.ts b/U22/src/app/models/user.ts
new file mode 100644
index 0000000..ec75deb
--- /dev/null
+++ b/U22/src/app/models/user.ts
@@ -0,0 +1,10 @@
+export class User {
+ id: number = 0;
+ username: string = '';
+ role: number = -1;
+ firstName: string = '';
+ lastName: string = '';
+ email:string = '';
+ token:string ='';
+ validationPointId:number = 0;
+}
diff --git a/U22/src/app/models/validationpoint.ts b/U22/src/app/models/validationpoint.ts
new file mode 100644
index 0000000..21e7f70
--- /dev/null
+++ b/U22/src/app/models/validationpoint.ts
@@ -0,0 +1,6 @@
+export interface ValidationPoint {
+ id: number,
+ description: string,
+ display: string,
+ active: boolean,
+}
diff --git a/U22/src/app/mytheme_aura.ts b/U22/src/app/mytheme_aura.ts
new file mode 100644
index 0000000..2d8fb89
--- /dev/null
+++ b/U22/src/app/mytheme_aura.ts
@@ -0,0 +1,5235 @@
+
+import Aura from "@primeuix/themes/aura";
+import { definePreset } from "@primeuix/themes";
+const MyPreset = definePreset(Aura, {
+ primitive: {
+ borderRadius: {
+ none: "0",
+ xs: "2px",
+ sm: "4px",
+ md: "6px",
+ lg: "8px",
+ xl: "12px"
+ },
+ emerald: {
+ 50: "#ecfdf5",
+ 100: "#d1fae5",
+ 200: "#a7f3d0",
+ 300: "#6ee7b7",
+ 400: "#34d399",
+ 500: "#10b981",
+ 600: "#059669",
+ 700: "#047857",
+ 800: "#065f46",
+ 900: "#064e3b",
+ 950: "#022c22"
+ },
+ green: {
+ 50: "#f0fdf4",
+ 100: "#dcfce7",
+ 200: "#bbf7d0",
+ 300: "#86efac",
+ 400: "#4ade80",
+ 500: "#22c55e",
+ 600: "#16a34a",
+ 700: "#15803d",
+ 800: "#166534",
+ 900: "#14532d",
+ 950: "#052e16"
+ },
+ lime: {
+ 50: "#f7fee7",
+ 100: "#ecfccb",
+ 200: "#d9f99d",
+ 300: "#bef264",
+ 400: "#a3e635",
+ 500: "#84cc16",
+ 600: "#65a30d",
+ 700: "#4d7c0f",
+ 800: "#3f6212",
+ 900: "#365314",
+ 950: "#1a2e05"
+ },
+ red: {
+ 50: "#fef2f2",
+ 100: "#fee2e2",
+ 200: "#fecaca",
+ 300: "#fca5a5",
+ 400: "#f87171",
+ 500: "#ef4444",
+ 600: "#dc2626",
+ 700: "#b91c1c",
+ 800: "#991b1b",
+ 900: "#7f1d1d",
+ 950: "#450a0a"
+ },
+ orange: {
+ 50: "#fff7ed",
+ 100: "#ffedd5",
+ 200: "#fed7aa",
+ 300: "#fdba74",
+ 400: "#fb923c",
+ 500: "#f97316",
+ 600: "#ea580c",
+ 700: "#c2410c",
+ 800: "#9a3412",
+ 900: "#7c2d12",
+ 950: "#431407"
+ },
+ amber: {
+ 50: "#fffbeb",
+ 100: "#fef3c7",
+ 200: "#fde68a",
+ 300: "#fcd34d",
+ 400: "#fbbf24",
+ 500: "#f59e0b",
+ 600: "#d97706",
+ 700: "#b45309",
+ 800: "#92400e",
+ 900: "#78350f",
+ 950: "#451a03"
+ },
+ yellow: {
+ 50: "#fefce8",
+ 100: "#fef9c3",
+ 200: "#fef08a",
+ 300: "#fde047",
+ 400: "#facc15",
+ 500: "#eab308",
+ 600: "#ca8a04",
+ 700: "#a16207",
+ 800: "#854d0e",
+ 900: "#713f12",
+ 950: "#422006"
+ },
+ teal: {
+ 50: "#f0fdfa",
+ 100: "#ccfbf1",
+ 200: "#99f6e4",
+ 300: "#5eead4",
+ 400: "#2dd4bf",
+ 500: "#14b8a6",
+ 600: "#0d9488",
+ 700: "#0f766e",
+ 800: "#115e59",
+ 900: "#134e4a",
+ 950: "#042f2e"
+ },
+ cyan: {
+ 50: "#ecfeff",
+ 100: "#cffafe",
+ 200: "#a5f3fc",
+ 300: "#67e8f9",
+ 400: "#22d3ee",
+ 500: "#06b6d4",
+ 600: "#0891b2",
+ 700: "#0e7490",
+ 800: "#155e75",
+ 900: "#164e63",
+ 950: "#083344"
+ },
+ sky: {
+ 50: "#f0f9ff",
+ 100: "#e0f2fe",
+ 200: "#bae6fd",
+ 300: "#7dd3fc",
+ 400: "#38bdf8",
+ 500: "#0ea5e9",
+ 600: "#0284c7",
+ 700: "#0369a1",
+ 800: "#075985",
+ 900: "#0c4a6e",
+ 950: "#082f49"
+ },
+ blue: {
+ 50: "#eff6ff",
+ 100: "#dbeafe",
+ 200: "#bfdbfe",
+ 300: "#93c5fd",
+ 400: "#60a5fa",
+ 500: "#3b82f6",
+ 600: "#2563eb",
+ 700: "#1d4ed8",
+ 800: "#1e40af",
+ 900: "#1e3a8a",
+ 950: "#172554"
+ },
+ indigo: {
+ 50: "#eef2ff",
+ 100: "#e0e7ff",
+ 200: "#c7d2fe",
+ 300: "#a5b4fc",
+ 400: "#818cf8",
+ 500: "#6366f1",
+ 600: "#4f46e5",
+ 700: "#4338ca",
+ 800: "#3730a3",
+ 900: "#312e81",
+ 950: "#1e1b4b"
+ },
+ violet: {
+ 50: "#f5f3ff",
+ 100: "#ede9fe",
+ 200: "#ddd6fe",
+ 300: "#c4b5fd",
+ 400: "#a78bfa",
+ 500: "#8b5cf6",
+ 600: "#7c3aed",
+ 700: "#6d28d9",
+ 800: "#5b21b6",
+ 900: "#4c1d95",
+ 950: "#2e1065"
+ },
+ purple: {
+ 50: "#faf5ff",
+ 100: "#f3e8ff",
+ 200: "#e9d5ff",
+ 300: "#d8b4fe",
+ 400: "#c084fc",
+ 500: "#a855f7",
+ 600: "#9333ea",
+ 700: "#7e22ce",
+ 800: "#6b21a8",
+ 900: "#581c87",
+ 950: "#3b0764"
+ },
+ fuchsia: {
+ 50: "#fdf4ff",
+ 100: "#fae8ff",
+ 200: "#f5d0fe",
+ 300: "#f0abfc",
+ 400: "#e879f9",
+ 500: "#d946ef",
+ 600: "#c026d3",
+ 700: "#a21caf",
+ 800: "#86198f",
+ 900: "#701a75",
+ 950: "#4a044e"
+ },
+ pink: {
+ 50: "#fdf2f8",
+ 100: "#fce7f3",
+ 200: "#fbcfe8",
+ 300: "#f9a8d4",
+ 400: "#f472b6",
+ 500: "#ec4899",
+ 600: "#db2777",
+ 700: "#be185d",
+ 800: "#9d174d",
+ 900: "#831843",
+ 950: "#500724"
+ },
+ rose: {
+ 50: "#fff1f2",
+ 100: "#ffe4e6",
+ 200: "#fecdd3",
+ 300: "#fda4af",
+ 400: "#fb7185",
+ 500: "#f43f5e",
+ 600: "#e11d48",
+ 700: "#be123c",
+ 800: "#9f1239",
+ 900: "#881337",
+ 950: "#4c0519"
+ },
+ slate: {
+ 50: "#f8fafc",
+ 100: "#f1f5f9",
+ 200: "#e2e8f0",
+ 300: "#cbd5e1",
+ 400: "#94a3b8",
+ 500: "#64748b",
+ 600: "#475569",
+ 700: "#334155",
+ 800: "#1e293b",
+ 900: "#0f172a",
+ 950: "#020617"
+ },
+ gray: {
+ 50: "#f9fafb",
+ 100: "#f3f4f6",
+ 200: "#e5e7eb",
+ 300: "#d1d5db",
+ 400: "#9ca3af",
+ 500: "#6b7280",
+ 600: "#4b5563",
+ 700: "#374151",
+ 800: "#1f2937",
+ 900: "#111827",
+ 950: "#030712"
+ },
+ zinc: {
+ 50: "#fafafa",
+ 100: "#f4f4f5",
+ 200: "#e4e4e7",
+ 300: "#d4d4d8",
+ 400: "#a1a1aa",
+ 500: "#71717a",
+ 600: "#52525b",
+ 700: "#3f3f46",
+ 800: "#27272a",
+ 900: "#18181b",
+ 950: "#09090b"
+ },
+ neutral: {
+ 50: "#fafafa",
+ 100: "#f5f5f5",
+ 200: "#e5e5e5",
+ 300: "#d4d4d4",
+ 400: "#a3a3a3",
+ 500: "#737373",
+ 600: "#525252",
+ 700: "#404040",
+ 800: "#262626",
+ 900: "#171717",
+ 950: "#0a0a0a"
+ },
+ stone: {
+ 50: "#fafaf9",
+ 100: "#f5f5f4",
+ 200: "#e7e5e4",
+ 300: "#d6d3d1",
+ 400: "#a8a29e",
+ 500: "#78716c",
+ 600: "#57534e",
+ 700: "#44403c",
+ 800: "#292524",
+ 900: "#1c1917",
+ 950: "#0c0a09"
+ }
+ },
+ semantic: {
+ transitionDuration: "0.2s",
+ focusRing: {
+ width: "1px",
+ style: "solid",
+ color: "{primary.color}",
+ offset: "2px",
+ shadow: "none"
+ },
+ disabledOpacity: "0.6",
+ iconSize: "1rem",
+ anchorGutter: "2px",
+ primary: {
+ 50: "#f4f7fd",
+ 100: "#cad9f6",
+ 200: "#a1bbf0",
+ 300: "#779de9",
+ 400: "#4e7fe2",
+ 500: "#2461db",
+ 600: "#1f52ba",
+ 700: "#194499",
+ 800: "#143578",
+ 900: "#0e2758",
+ 950: "#091837"
+ },
+ formField: {
+ paddingX: "0.75rem",
+ paddingY: "0.5rem",
+ sm: {
+ fontSize: "0.875rem",
+ paddingX: "0.625rem",
+ paddingY: "0.375rem"
+ },
+ lg: {
+ fontSize: "1.125rem",
+ paddingX: "0.875rem",
+ paddingY: "0.625rem"
+ },
+ borderRadius: "{border.radius.md}",
+ focusRing: {
+ width: "0",
+ style: "none",
+ color: "transparent",
+ offset: "0",
+ shadow: "none"
+ },
+ transitionDuration: "{transition.duration}"
+ },
+ list: {
+ padding: "0.25rem 0.25rem",
+ gap: "2px",
+ header: {
+ padding: "0.5rem 1rem 0.25rem 1rem"
+ },
+ option: {
+ padding: "0.5rem 0.75rem",
+ borderRadius: "{border.radius.sm}"
+ },
+ optionGroup: {
+ padding: "0.5rem 0.75rem",
+ fontWeight: "600"
+ }
+ },
+ content: {
+ borderRadius: "{border.radius.md}"
+ },
+ mask: {
+ transitionDuration: "0.15s"
+ },
+ navigation: {
+ list: {
+ padding: "0.25rem 0.25rem",
+ gap: "2px"
+ },
+ item: {
+ padding: "0.5rem 0.75rem",
+ borderRadius: "{border.radius.sm}",
+ gap: "0.5rem"
+ },
+ submenuLabel: {
+ padding: "0.5rem 0.75rem",
+ fontWeight: "600"
+ },
+ submenuIcon: {
+ size: "0.875rem"
+ }
+ },
+ overlay: {
+ select: {
+ borderRadius: "{border.radius.md}",
+ shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+ },
+ popover: {
+ borderRadius: "{border.radius.md}",
+ padding: "0.75rem",
+ shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+ },
+ modal: {
+ borderRadius: "{border.radius.xl}",
+ padding: "1.25rem",
+ shadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+ },
+ navigation: {
+ shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
+ }
+ },
+ colorScheme: {
+ light: {
+ surface: {
+ 0: "#ffffff",
+ 50: "#f8fafc",
+ 100: "#f1f5f9",
+ 200: "#e2e8f0",
+ 300: "#cbd5e1",
+ 400: "#94a3b8",
+ 500: "#64748b",
+ 600: "#475569",
+ 700: "#334155",
+ 800: "#1e293b",
+ 900: "#0f172a",
+ 950: "#020617"
+ },
+ primary: {
+ color: "{primary.500}",
+ contrastColor: "#ffffff",
+ hoverColor: "{primary.600}",
+ activeColor: "{primary.700}"
+ },
+ highlight: {
+ background: "{primary.50}",
+ focusBackground: "{primary.100}",
+ color: "{primary.700}",
+ focusColor: "{primary.800}"
+ },
+ mask: {
+ background: "rgba(0,0,0,0.4)",
+ color: "{surface.200}"
+ },
+ formField: {
+ background: "{surface.0}",
+ disabledBackground: "{surface.200}",
+ filledBackground: "{surface.50}",
+ filledHoverBackground: "{surface.50}",
+ filledFocusBackground: "{surface.50}",
+ borderColor: "{surface.300}",
+ hoverBorderColor: "{surface.400}",
+ focusBorderColor: "{primary.color}",
+ invalidBorderColor: "{red.400}",
+ color: "{surface.700}",
+ disabledColor: "{surface.500}",
+ placeholderColor: "{surface.500}",
+ invalidPlaceholderColor: "{red.600}",
+ floatLabelColor: "{surface.500}",
+ floatLabelFocusColor: "{primary.600}",
+ floatLabelActiveColor: "{surface.500}",
+ floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+ iconColor: "{surface.400}",
+ shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)"
+ },
+ text: {
+ color: "{surface.700}",
+ hoverColor: "{surface.800}",
+ mutedColor: "{surface.500}",
+ hoverMutedColor: "{surface.600}"
+ },
+ content: {
+ background: "{surface.0}",
+ hoverBackground: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{text.color}",
+ hoverColor: "{text.hover.color}"
+ },
+ overlay: {
+ select: {
+ background: "{surface.0}",
+ borderColor: "{surface.200}",
+ color: "{text.color}"
+ },
+ popover: {
+ background: "{surface.0}",
+ borderColor: "{surface.200}",
+ color: "{text.color}"
+ },
+ modal: {
+ background: "{surface.0}",
+ borderColor: "{surface.200}",
+ color: "{text.color}"
+ }
+ },
+ list: {
+ option: {
+ focusBackground: "{surface.100}",
+ selectedBackground: "{highlight.background}",
+ selectedFocusBackground: "{highlight.focus.background}",
+ color: "{text.color}",
+ focusColor: "{text.hover.color}",
+ selectedColor: "{highlight.color}",
+ selectedFocusColor: "{highlight.focus.color}",
+ icon: {
+ color: "{surface.400}",
+ focusColor: "{surface.500}"
+ }
+ },
+ optionGroup: {
+ background: "transparent",
+ color: "{text.muted.color}"
+ }
+ },
+ navigation: {
+ item: {
+ focusBackground: "{surface.100}",
+ activeBackground: "{surface.100}",
+ color: "{text.color}",
+ focusColor: "{text.hover.color}",
+ activeColor: "{text.hover.color}",
+ icon: {
+ color: "{surface.400}",
+ focusColor: "{surface.500}",
+ activeColor: "{surface.500}"
+ }
+ },
+ submenuLabel: {
+ background: "transparent",
+ color: "{text.muted.color}"
+ },
+ submenuIcon: {
+ color: "{surface.400}",
+ focusColor: "{surface.500}",
+ activeColor: "{surface.500}"
+ }
+ }
+ },
+ dark: {
+ surface: {
+ 0: "#ffffff",
+ 50: "#fafafa",
+ 100: "#f4f4f5",
+ 200: "#e4e4e7",
+ 300: "#d4d4d8",
+ 400: "#a1a1aa",
+ 500: "#71717a",
+ 600: "#52525b",
+ 700: "#3f3f46",
+ 800: "#27272a",
+ 900: "#18181b",
+ 950: "#09090b"
+ },
+ primary: {
+ color: "{primary.400}",
+ contrastColor: "{surface.900}",
+ hoverColor: "{primary.300}",
+ activeColor: "{primary.200}"
+ },
+ highlight: {
+ background: "color-mix(in srgb, {primary.400}, transparent 84%)",
+ focusBackground: "color-mix(in srgb, {primary.400}, transparent 76%)",
+ color: "rgba(255,255,255,.87)",
+ focusColor: "rgba(255,255,255,.87)"
+ },
+ mask: {
+ background: "rgba(0,0,0,0.6)",
+ color: "{surface.200}"
+ },
+ formField: {
+ background: "{surface.950}",
+ disabledBackground: "{surface.700}",
+ filledBackground: "{surface.800}",
+ filledHoverBackground: "{surface.800}",
+ filledFocusBackground: "{surface.800}",
+ borderColor: "{surface.600}",
+ hoverBorderColor: "{surface.500}",
+ focusBorderColor: "{primary.color}",
+ invalidBorderColor: "{red.300}",
+ color: "{surface.0}",
+ disabledColor: "{surface.400}",
+ placeholderColor: "{surface.400}",
+ invalidPlaceholderColor: "{red.400}",
+ floatLabelColor: "{surface.400}",
+ floatLabelFocusColor: "{primary.color}",
+ floatLabelActiveColor: "{surface.400}",
+ floatLabelInvalidColor: "{form.field.invalid.placeholder.color}",
+ iconColor: "{surface.400}",
+ shadow: "0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)"
+ },
+ text: {
+ color: "{surface.0}",
+ hoverColor: "{surface.0}",
+ mutedColor: "{surface.400}",
+ hoverMutedColor: "{surface.300}"
+ },
+ content: {
+ background: "{surface.900}",
+ hoverBackground: "{surface.800}",
+ borderColor: "{surface.700}",
+ color: "{text.color}",
+ hoverColor: "{text.hover.color}"
+ },
+ overlay: {
+ select: {
+ background: "{surface.900}",
+ borderColor: "{surface.700}",
+ color: "{text.color}"
+ },
+ popover: {
+ background: "{surface.900}",
+ borderColor: "{surface.700}",
+ color: "{text.color}"
+ },
+ modal: {
+ background: "{surface.900}",
+ borderColor: "{surface.700}",
+ color: "{text.color}"
+ }
+ },
+ list: {
+ option: {
+ focusBackground: "{surface.800}",
+ selectedBackground: "{highlight.background}",
+ selectedFocusBackground: "{highlight.focus.background}",
+ color: "{text.color}",
+ focusColor: "{text.hover.color}",
+ selectedColor: "{highlight.color}",
+ selectedFocusColor: "{highlight.focus.color}",
+ icon: {
+ color: "{surface.500}",
+ focusColor: "{surface.400}"
+ }
+ },
+ optionGroup: {
+ background: "transparent",
+ color: "{text.muted.color}"
+ }
+ },
+ navigation: {
+ item: {
+ focusBackground: "{surface.800}",
+ activeBackground: "{surface.800}",
+ color: "{text.color}",
+ focusColor: "{text.hover.color}",
+ activeColor: "{text.hover.color}",
+ icon: {
+ color: "{surface.500}",
+ focusColor: "{surface.400}",
+ activeColor: "{surface.400}"
+ }
+ },
+ submenuLabel: {
+ background: "transparent",
+ color: "{text.muted.color}"
+ },
+ submenuIcon: {
+ color: "{surface.500}",
+ focusColor: "{surface.400}",
+ activeColor: "{surface.400}"
+ }
+ }
+ }
+ }
+ },
+ components: {
+ accordion: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ panel: {
+ borderWidth: "0 0 1px 0",
+ borderColor: "{content.border.color}"
+ },
+ header: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{text.color}",
+ padding: "1.125rem",
+ fontWeight: "600",
+ borderRadius: "0",
+ borderWidth: "0",
+ borderColor: "{content.border.color}",
+ background: "{content.background}",
+ hoverBackground: "{content.background}",
+ activeBackground: "{content.background}",
+ activeHoverBackground: "{content.background}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ },
+ toggleIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{text.color}",
+ activeHoverColor: "{text.color}"
+ },
+ first: {
+ topBorderRadius: "{content.border.radius}",
+ borderWidth: "0"
+ },
+ last: {
+ bottomBorderRadius: "{content.border.radius}",
+ activeBottomBorderRadius: "0"
+ }
+ },
+ content: {
+ borderWidth: "0",
+ borderColor: "{content.border.color}",
+ background: "{content.background}",
+ color: "{text.color}",
+ padding: "0 1.125rem 1.125rem 1.125rem"
+ }
+ },
+ autocomplete: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}"
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ },
+ optionGroup: {
+ background: "{list.option.group.background}",
+ color: "{list.option.group.color}",
+ fontWeight: "{list.option.group.font.weight}",
+ padding: "{list.option.group.padding}"
+ },
+ dropdown: {
+ width: "2.5rem",
+ sm: {
+ width: "2rem"
+ },
+ lg: {
+ width: "3rem"
+ },
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.border.color}",
+ activeBorderColor: "{form.field.border.color}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ chip: {
+ borderRadius: "{border.radius.sm}"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ },
+ colorScheme: {
+ light: {
+ chip: {
+ focusBackground: "{surface.200}",
+ focusColor: "{surface.800}"
+ },
+ dropdown: {
+ background: "{surface.100}",
+ hoverBackground: "{surface.200}",
+ activeBackground: "{surface.300}",
+ color: "{surface.600}",
+ hoverColor: "{surface.700}",
+ activeColor: "{surface.800}"
+ }
+ },
+ dark: {
+ chip: {
+ focusBackground: "{surface.700}",
+ focusColor: "{surface.0}"
+ },
+ dropdown: {
+ background: "{surface.800}",
+ hoverBackground: "{surface.700}",
+ activeBackground: "{surface.600}",
+ color: "{surface.300}",
+ hoverColor: "{surface.200}",
+ activeColor: "{surface.100}"
+ }
+ }
+ }
+ },
+ avatar: {
+ root: {
+ width: "2rem",
+ height: "2rem",
+ fontSize: "1rem",
+ background: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}"
+ },
+ icon: {
+ size: "1rem"
+ },
+ group: {
+ borderColor: "{content.background}",
+ offset: "-0.75rem"
+ },
+ lg: {
+ width: "3rem",
+ height: "3rem",
+ fontSize: "1.5rem",
+ icon: {
+ size: "1.5rem"
+ },
+ group: {
+ offset: "-1rem"
+ }
+ },
+ xl: {
+ width: "4rem",
+ height: "4rem",
+ fontSize: "2rem",
+ icon: {
+ size: "2rem"
+ },
+ group: {
+ offset: "-1.5rem"
+ }
+ }
+ },
+ badge: {
+ root: {
+ borderRadius: "{border.radius.md}",
+ padding: "0 0.5rem",
+ fontSize: "0.75rem",
+ fontWeight: "700",
+ minWidth: "1.5rem",
+ height: "1.5rem"
+ },
+ dot: {
+ size: "0.5rem"
+ },
+ sm: {
+ fontSize: "0.625rem",
+ minWidth: "1.25rem",
+ height: "1.25rem"
+ },
+ lg: {
+ fontSize: "0.875rem",
+ minWidth: "1.75rem",
+ height: "1.75rem"
+ },
+ xl: {
+ fontSize: "1rem",
+ minWidth: "2rem",
+ height: "2rem"
+ },
+ colorScheme: {
+ light: {
+ primary: {
+ background: "{primary.color}",
+ color: "{primary.contrast.color}"
+ },
+ secondary: {
+ background: "{surface.100}",
+ color: "{surface.600}"
+ },
+ success: {
+ background: "{green.500}",
+ color: "{surface.0}"
+ },
+ info: {
+ background: "{sky.500}",
+ color: "{surface.0}"
+ },
+ warn: {
+ background: "{orange.500}",
+ color: "{surface.0}"
+ },
+ danger: {
+ background: "{red.500}",
+ color: "{surface.0}"
+ },
+ contrast: {
+ background: "{surface.950}",
+ color: "{surface.0}"
+ }
+ },
+ dark: {
+ primary: {
+ background: "{primary.color}",
+ color: "{primary.contrast.color}"
+ },
+ secondary: {
+ background: "{surface.800}",
+ color: "{surface.300}"
+ },
+ success: {
+ background: "{green.400}",
+ color: "{green.950}"
+ },
+ info: {
+ background: "{sky.400}",
+ color: "{sky.950}"
+ },
+ warn: {
+ background: "{orange.400}",
+ color: "{orange.950}"
+ },
+ danger: {
+ background: "{red.400}",
+ color: "{red.950}"
+ },
+ contrast: {
+ background: "{surface.0}",
+ color: "{surface.950}"
+ }
+ }
+ }
+ },
+ blockui: {
+ root: {
+ borderRadius: "{content.border.radius}"
+ }
+ },
+ breadcrumb: {
+ root: {
+ padding: "1rem",
+ background: "{content.background}",
+ gap: "0.5rem",
+ transitionDuration: "{transition.duration}"
+ },
+ item: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ borderRadius: "{content.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ hoverColor: "{navigation.item.icon.focus.color}"
+ },
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ separator: {
+ color: "{navigation.item.icon.color}"
+ }
+ },
+ button: {
+ root: {
+ borderRadius: "{form.field.border.radius}",
+ roundedBorderRadius: "2rem",
+ gap: "0.5rem",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ iconOnlyWidth: "2.5rem",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ },
+ label: {
+ fontWeight: "500"
+ },
+ raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ offset: "{focus.ring.offset}"
+ },
+ badgeSize: "1rem",
+ transitionDuration: "{form.field.transition.duration}"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ primary: {
+ background: "{primary.color}",
+ hoverBackground: "{primary.hover.color}",
+ activeBackground: "{primary.active.color}",
+ borderColor: "{primary.color}",
+ hoverBorderColor: "{primary.hover.color}",
+ activeBorderColor: "{primary.active.color}",
+ color: "{primary.contrast.color}",
+ hoverColor: "{primary.contrast.color}",
+ activeColor: "{primary.contrast.color}",
+ focusRing: {
+ color: "{primary.color}",
+ shadow: "none"
+ }
+ },
+ secondary: {
+ background: "{surface.100}",
+ hoverBackground: "{surface.200}",
+ activeBackground: "{surface.300}",
+ borderColor: "{surface.100}",
+ hoverBorderColor: "{surface.200}",
+ activeBorderColor: "{surface.300}",
+ color: "{surface.600}",
+ hoverColor: "{surface.700}",
+ activeColor: "{surface.800}",
+ focusRing: {
+ color: "{surface.600}",
+ shadow: "none"
+ }
+ },
+ info: {
+ background: "{sky.500}",
+ hoverBackground: "{sky.600}",
+ activeBackground: "{sky.700}",
+ borderColor: "{sky.500}",
+ hoverBorderColor: "{sky.600}",
+ activeBorderColor: "{sky.700}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{sky.500}",
+ shadow: "none"
+ }
+ },
+ success: {
+ background: "{green.500}",
+ hoverBackground: "{green.600}",
+ activeBackground: "{green.700}",
+ borderColor: "{green.500}",
+ hoverBorderColor: "{green.600}",
+ activeBorderColor: "{green.700}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{green.500}",
+ shadow: "none"
+ }
+ },
+ warn: {
+ background: "{orange.500}",
+ hoverBackground: "{orange.600}",
+ activeBackground: "{orange.700}",
+ borderColor: "{orange.500}",
+ hoverBorderColor: "{orange.600}",
+ activeBorderColor: "{orange.700}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{orange.500}",
+ shadow: "none"
+ }
+ },
+ help: {
+ background: "{purple.500}",
+ hoverBackground: "{purple.600}",
+ activeBackground: "{purple.700}",
+ borderColor: "{purple.500}",
+ hoverBorderColor: "{purple.600}",
+ activeBorderColor: "{purple.700}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{purple.500}",
+ shadow: "none"
+ }
+ },
+ danger: {
+ background: "{red.500}",
+ hoverBackground: "{red.600}",
+ activeBackground: "{red.700}",
+ borderColor: "{red.500}",
+ hoverBorderColor: "{red.600}",
+ activeBorderColor: "{red.700}",
+ color: "#ffffff",
+ hoverColor: "#ffffff",
+ activeColor: "#ffffff",
+ focusRing: {
+ color: "{red.500}",
+ shadow: "none"
+ }
+ },
+ contrast: {
+ background: "{surface.950}",
+ hoverBackground: "{surface.900}",
+ activeBackground: "{surface.800}",
+ borderColor: "{surface.950}",
+ hoverBorderColor: "{surface.900}",
+ activeBorderColor: "{surface.800}",
+ color: "{surface.0}",
+ hoverColor: "{surface.0}",
+ activeColor: "{surface.0}",
+ focusRing: {
+ color: "{surface.950}",
+ shadow: "none"
+ }
+ }
+ },
+ outlined: {
+ primary: {
+ hoverBackground: "{primary.50}",
+ activeBackground: "{primary.100}",
+ borderColor: "{primary.200}",
+ color: "{primary.color}"
+ },
+ secondary: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{surface.500}"
+ },
+ success: {
+ hoverBackground: "{green.50}",
+ activeBackground: "{green.100}",
+ borderColor: "{green.200}",
+ color: "{green.500}"
+ },
+ info: {
+ hoverBackground: "{sky.50}",
+ activeBackground: "{sky.100}",
+ borderColor: "{sky.200}",
+ color: "{sky.500}"
+ },
+ warn: {
+ hoverBackground: "{orange.50}",
+ activeBackground: "{orange.100}",
+ borderColor: "{orange.200}",
+ color: "{orange.500}"
+ },
+ help: {
+ hoverBackground: "{purple.50}",
+ activeBackground: "{purple.100}",
+ borderColor: "{purple.200}",
+ color: "{purple.500}"
+ },
+ danger: {
+ hoverBackground: "{red.50}",
+ activeBackground: "{red.100}",
+ borderColor: "{red.200}",
+ color: "{red.500}"
+ },
+ contrast: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ borderColor: "{surface.700}",
+ color: "{surface.950}"
+ },
+ plain: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{surface.700}"
+ }
+ },
+ text: {
+ primary: {
+ hoverBackground: "{primary.50}",
+ activeBackground: "{primary.100}",
+ color: "{primary.color}"
+ },
+ secondary: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ color: "{surface.500}"
+ },
+ success: {
+ hoverBackground: "{green.50}",
+ activeBackground: "{green.100}",
+ color: "{green.500}"
+ },
+ info: {
+ hoverBackground: "{sky.50}",
+ activeBackground: "{sky.100}",
+ color: "{sky.500}"
+ },
+ warn: {
+ hoverBackground: "{orange.50}",
+ activeBackground: "{orange.100}",
+ color: "{orange.500}"
+ },
+ help: {
+ hoverBackground: "{purple.50}",
+ activeBackground: "{purple.100}",
+ color: "{purple.500}"
+ },
+ danger: {
+ hoverBackground: "{red.50}",
+ activeBackground: "{red.100}",
+ color: "{red.500}"
+ },
+ contrast: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ color: "{surface.950}"
+ },
+ plain: {
+ hoverBackground: "{surface.50}",
+ activeBackground: "{surface.100}",
+ color: "{surface.700}"
+ }
+ },
+ link: {
+ color: "{primary.color}",
+ hoverColor: "{primary.color}",
+ activeColor: "{primary.color}"
+ }
+ },
+ dark: {
+ root: {
+ primary: {
+ background: "{primary.color}",
+ hoverBackground: "{primary.hover.color}",
+ activeBackground: "{primary.active.color}",
+ borderColor: "{primary.color}",
+ hoverBorderColor: "{primary.hover.color}",
+ activeBorderColor: "{primary.active.color}",
+ color: "{primary.contrast.color}",
+ hoverColor: "{primary.contrast.color}",
+ activeColor: "{primary.contrast.color}",
+ focusRing: {
+ color: "{primary.color}",
+ shadow: "none"
+ }
+ },
+ secondary: {
+ background: "{surface.800}",
+ hoverBackground: "{surface.700}",
+ activeBackground: "{surface.600}",
+ borderColor: "{surface.800}",
+ hoverBorderColor: "{surface.700}",
+ activeBorderColor: "{surface.600}",
+ color: "{surface.300}",
+ hoverColor: "{surface.200}",
+ activeColor: "{surface.100}",
+ focusRing: {
+ color: "{surface.300}",
+ shadow: "none"
+ }
+ },
+ info: {
+ background: "{sky.400}",
+ hoverBackground: "{sky.300}",
+ activeBackground: "{sky.200}",
+ borderColor: "{sky.400}",
+ hoverBorderColor: "{sky.300}",
+ activeBorderColor: "{sky.200}",
+ color: "{sky.950}",
+ hoverColor: "{sky.950}",
+ activeColor: "{sky.950}",
+ focusRing: {
+ color: "{sky.400}",
+ shadow: "none"
+ }
+ },
+ success: {
+ background: "{green.400}",
+ hoverBackground: "{green.300}",
+ activeBackground: "{green.200}",
+ borderColor: "{green.400}",
+ hoverBorderColor: "{green.300}",
+ activeBorderColor: "{green.200}",
+ color: "{green.950}",
+ hoverColor: "{green.950}",
+ activeColor: "{green.950}",
+ focusRing: {
+ color: "{green.400}",
+ shadow: "none"
+ }
+ },
+ warn: {
+ background: "{orange.400}",
+ hoverBackground: "{orange.300}",
+ activeBackground: "{orange.200}",
+ borderColor: "{orange.400}",
+ hoverBorderColor: "{orange.300}",
+ activeBorderColor: "{orange.200}",
+ color: "{orange.950}",
+ hoverColor: "{orange.950}",
+ activeColor: "{orange.950}",
+ focusRing: {
+ color: "{orange.400}",
+ shadow: "none"
+ }
+ },
+ help: {
+ background: "{purple.400}",
+ hoverBackground: "{purple.300}",
+ activeBackground: "{purple.200}",
+ borderColor: "{purple.400}",
+ hoverBorderColor: "{purple.300}",
+ activeBorderColor: "{purple.200}",
+ color: "{purple.950}",
+ hoverColor: "{purple.950}",
+ activeColor: "{purple.950}",
+ focusRing: {
+ color: "{purple.400}",
+ shadow: "none"
+ }
+ },
+ danger: {
+ background: "{red.400}",
+ hoverBackground: "{red.300}",
+ activeBackground: "{red.200}",
+ borderColor: "{red.400}",
+ hoverBorderColor: "{red.300}",
+ activeBorderColor: "{red.200}",
+ color: "{red.950}",
+ hoverColor: "{red.950}",
+ activeColor: "{red.950}",
+ focusRing: {
+ color: "{red.400}",
+ shadow: "none"
+ }
+ },
+ contrast: {
+ background: "{surface.0}",
+ hoverBackground: "{surface.100}",
+ activeBackground: "{surface.200}",
+ borderColor: "{surface.0}",
+ hoverBorderColor: "{surface.100}",
+ activeBorderColor: "{surface.200}",
+ color: "{surface.950}",
+ hoverColor: "{surface.950}",
+ activeColor: "{surface.950}",
+ focusRing: {
+ color: "{surface.0}",
+ shadow: "none"
+ }
+ }
+ },
+ outlined: {
+ primary: {
+ hoverBackground: "color-mix(in srgb, {primary.color}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {primary.color}, transparent 84%)",
+ borderColor: "{primary.700}",
+ color: "{primary.color}"
+ },
+ secondary: {
+ hoverBackground: "rgba(255,255,255,0.04)",
+ activeBackground: "rgba(255,255,255,0.16)",
+ borderColor: "{surface.700}",
+ color: "{surface.400}"
+ },
+ success: {
+ hoverBackground: "color-mix(in srgb, {green.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {green.400}, transparent 84%)",
+ borderColor: "{green.700}",
+ color: "{green.400}"
+ },
+ info: {
+ hoverBackground: "color-mix(in srgb, {sky.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {sky.400}, transparent 84%)",
+ borderColor: "{sky.700}",
+ color: "{sky.400}"
+ },
+ warn: {
+ hoverBackground: "color-mix(in srgb, {orange.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {orange.400}, transparent 84%)",
+ borderColor: "{orange.700}",
+ color: "{orange.400}"
+ },
+ help: {
+ hoverBackground: "color-mix(in srgb, {purple.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {purple.400}, transparent 84%)",
+ borderColor: "{purple.700}",
+ color: "{purple.400}"
+ },
+ danger: {
+ hoverBackground: "color-mix(in srgb, {red.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {red.400}, transparent 84%)",
+ borderColor: "{red.700}",
+ color: "{red.400}"
+ },
+ contrast: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ borderColor: "{surface.500}",
+ color: "{surface.0}"
+ },
+ plain: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ borderColor: "{surface.600}",
+ color: "{surface.0}"
+ }
+ },
+ text: {
+ primary: {
+ hoverBackground: "color-mix(in srgb, {primary.color}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {primary.color}, transparent 84%)",
+ color: "{primary.color}"
+ },
+ secondary: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ color: "{surface.400}"
+ },
+ success: {
+ hoverBackground: "color-mix(in srgb, {green.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {green.400}, transparent 84%)",
+ color: "{green.400}"
+ },
+ info: {
+ hoverBackground: "color-mix(in srgb, {sky.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {sky.400}, transparent 84%)",
+ color: "{sky.400}"
+ },
+ warn: {
+ hoverBackground: "color-mix(in srgb, {orange.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {orange.400}, transparent 84%)",
+ color: "{orange.400}"
+ },
+ help: {
+ hoverBackground: "color-mix(in srgb, {purple.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {purple.400}, transparent 84%)",
+ color: "{purple.400}"
+ },
+ danger: {
+ hoverBackground: "color-mix(in srgb, {red.400}, transparent 96%)",
+ activeBackground: "color-mix(in srgb, {red.400}, transparent 84%)",
+ color: "{red.400}"
+ },
+ contrast: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ color: "{surface.0}"
+ },
+ plain: {
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ color: "{surface.0}"
+ }
+ },
+ link: {
+ color: "{primary.color}",
+ hoverColor: "{primary.color}",
+ activeColor: "{primary.color}"
+ }
+ }
+ }
+ },
+ datepicker: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ panel: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.popover.shadow}",
+ padding: "{overlay.popover.padding}"
+ },
+ header: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ padding: "0 0 0.5rem 0"
+ },
+ title: {
+ gap: "0.5rem",
+ fontWeight: "500"
+ },
+ dropdown: {
+ width: "2.5rem",
+ sm: {
+ width: "2rem"
+ },
+ lg: {
+ width: "3rem"
+ },
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.border.color}",
+ activeBorderColor: "{form.field.border.color}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ inputIcon: {
+ color: "{form.field.icon.color}"
+ },
+ selectMonth: {
+ hoverBackground: "{content.hover.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ padding: "0.25rem 0.5rem",
+ borderRadius: "{content.border.radius}"
+ },
+ selectYear: {
+ hoverBackground: "{content.hover.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ padding: "0.25rem 0.5rem",
+ borderRadius: "{content.border.radius}"
+ },
+ group: {
+ borderColor: "{content.border.color}",
+ gap: "{overlay.popover.padding}"
+ },
+ dayView: {
+ margin: "0.5rem 0 0 0"
+ },
+ weekDay: {
+ padding: "0.25rem",
+ fontWeight: "500",
+ color: "{content.color}"
+ },
+ date: {
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{primary.color}",
+ rangeSelectedBackground: "{highlight.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{primary.contrast.color}",
+ rangeSelectedColor: "{highlight.color}",
+ width: "2rem",
+ height: "2rem",
+ borderRadius: "50%",
+ padding: "0.25rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ monthView: {
+ margin: "0.5rem 0 0 0"
+ },
+ month: {
+ padding: "0.375rem",
+ borderRadius: "{content.border.radius}"
+ },
+ yearView: {
+ margin: "0.5rem 0 0 0"
+ },
+ year: {
+ padding: "0.375rem",
+ borderRadius: "{content.border.radius}"
+ },
+ buttonbar: {
+ padding: "0.5rem 0 0 0",
+ borderColor: "{content.border.color}"
+ },
+ timePicker: {
+ padding: "0.5rem 0 0 0",
+ borderColor: "{content.border.color}",
+ gap: "0.5rem",
+ buttonGap: "0.25rem"
+ },
+ colorScheme: {
+ light: {
+ dropdown: {
+ background: "{surface.100}",
+ hoverBackground: "{surface.200}",
+ activeBackground: "{surface.300}",
+ color: "{surface.600}",
+ hoverColor: "{surface.700}",
+ activeColor: "{surface.800}"
+ },
+ today: {
+ background: "{surface.200}",
+ color: "{surface.900}"
+ }
+ },
+ dark: {
+ dropdown: {
+ background: "{surface.800}",
+ hoverBackground: "{surface.700}",
+ activeBackground: "{surface.600}",
+ color: "{surface.300}",
+ hoverColor: "{surface.200}",
+ activeColor: "{surface.100}"
+ },
+ today: {
+ background: "{surface.700}",
+ color: "{surface.0}"
+ }
+ }
+ }
+ },
+ card: {
+ root: {
+ background: "{content.background}",
+ borderRadius: "{border.radius.xl}",
+ color: "{content.color}",
+ shadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
+ },
+ body: {
+ padding: "1.25rem",
+ gap: "0.5rem"
+ },
+ caption: {
+ gap: "0.5rem"
+ },
+ title: {
+ fontSize: "1.25rem",
+ fontWeight: "500"
+ },
+ subtitle: {
+ color: "{text.muted.color}"
+ }
+ },
+ carousel: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ content: {
+ gap: "0.25rem"
+ },
+ indicatorList: {
+ padding: "1rem",
+ gap: "0.5rem"
+ },
+ indicator: {
+ width: "2rem",
+ height: "0.5rem",
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ colorScheme: {
+ light: {
+ indicator: {
+ background: "{surface.200}",
+ hoverBackground: "{surface.300}",
+ activeBackground: "{primary.color}"
+ }
+ },
+ dark: {
+ indicator: {
+ background: "{surface.700}",
+ hoverBackground: "{surface.600}",
+ activeBackground: "{primary.color}"
+ }
+ }
+ }
+ },
+ cascadeselect: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ },
+ dropdown: {
+ width: "2.5rem",
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}",
+ mobileIndent: "1rem"
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}",
+ icon: {
+ color: "{list.option.icon.color}",
+ focusColor: "{list.option.icon.focus.color}",
+ size: "0.875rem"
+ }
+ },
+ clearIcon: {
+ color: "{form.field.icon.color}"
+ }
+ },
+ checkbox: {
+ root: {
+ borderRadius: "{border.radius.sm}",
+ width: "1.25rem",
+ height: "1.25rem",
+ background: "{form.field.background}",
+ checkedBackground: "{primary.color}",
+ checkedHoverBackground: "{primary.hover.color}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.border.color}",
+ checkedBorderColor: "{primary.color}",
+ checkedHoverBorderColor: "{primary.hover.color}",
+ checkedFocusBorderColor: "{primary.color}",
+ checkedDisabledBorderColor: "{form.field.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ shadow: "{form.field.shadow}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ width: "1rem",
+ height: "1rem"
+ },
+ lg: {
+ width: "1.5rem",
+ height: "1.5rem"
+ }
+ },
+ icon: {
+ size: "0.875rem",
+ color: "{form.field.color}",
+ checkedColor: "{primary.contrast.color}",
+ checkedHoverColor: "{primary.contrast.color}",
+ disabledColor: "{form.field.disabled.color}",
+ sm: {
+ size: "0.75rem"
+ },
+ lg: {
+ size: "1rem"
+ }
+ }
+ },
+ chip: {
+ root: {
+ borderRadius: "16px",
+ paddingX: "0.75rem",
+ paddingY: "0.5rem",
+ gap: "0.5rem",
+ transitionDuration: "{transition.duration}"
+ },
+ image: {
+ width: "2rem",
+ height: "2rem"
+ },
+ icon: {
+ size: "1rem"
+ },
+ removeIcon: {
+ size: "1rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ }
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.100}",
+ color: "{surface.800}"
+ },
+ icon: {
+ color: "{surface.800}"
+ },
+ removeIcon: {
+ color: "{surface.800}"
+ }
+ },
+ dark: {
+ root: {
+ background: "{surface.800}",
+ color: "{surface.0}"
+ },
+ icon: {
+ color: "{surface.0}"
+ },
+ removeIcon: {
+ color: "{surface.0}"
+ }
+ }
+ }
+ },
+ colorpicker: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ preview: {
+ width: "1.5rem",
+ height: "1.5rem",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ panel: {
+ shadow: "{overlay.popover.shadow}",
+ borderRadius: "{overlay.popover.borderRadius}"
+ },
+ colorScheme: {
+ light: {
+ panel: {
+ background: "{surface.800}",
+ borderColor: "{surface.900}"
+ },
+ handle: {
+ color: "{surface.0}"
+ }
+ },
+ dark: {
+ panel: {
+ background: "{surface.900}",
+ borderColor: "{surface.700}"
+ },
+ handle: {
+ color: "{surface.0}"
+ }
+ }
+ }
+ },
+ confirmdialog: {
+ icon: {
+ size: "2rem",
+ color: "{overlay.modal.color}"
+ },
+ content: {
+ gap: "1rem"
+ }
+ },
+ confirmpopup: {
+ root: {
+ background: "{overlay.popover.background}",
+ borderColor: "{overlay.popover.border.color}",
+ color: "{overlay.popover.color}",
+ borderRadius: "{overlay.popover.border.radius}",
+ shadow: "{overlay.popover.shadow}",
+ gutter: "10px",
+ arrowOffset: "1.25rem"
+ },
+ content: {
+ padding: "{overlay.popover.padding}",
+ gap: "1rem"
+ },
+ icon: {
+ size: "1.5rem",
+ color: "{overlay.popover.color}"
+ },
+ footer: {
+ gap: "0.5rem",
+ padding: "0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}"
+ }
+ },
+ contextmenu: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.navigation.shadow}",
+ transitionDuration: "{transition.duration}"
+ },
+ list: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ activeBackground: "{navigation.item.active.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ activeColor: "{navigation.item.active.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}",
+ activeColor: "{navigation.item.icon.active.color}"
+ }
+ },
+ submenu: {
+ mobileIndent: "1rem"
+ },
+ submenuIcon: {
+ size: "{navigation.submenu.icon.size}",
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}",
+ activeColor: "{navigation.submenu.icon.active.color}"
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ }
+ },
+ dataview: {
+ root: {
+ borderColor: "transparent",
+ borderWidth: "0",
+ borderRadius: "0",
+ padding: "0"
+ },
+ header: {
+ background: "{content.background}",
+ color: "{content.color}",
+ borderColor: "{content.border.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem",
+ borderRadius: "0"
+ },
+ content: {
+ background: "{content.background}",
+ color: "{content.color}",
+ borderColor: "transparent",
+ borderWidth: "0",
+ padding: "0",
+ borderRadius: "0"
+ },
+ footer: {
+ background: "{content.background}",
+ color: "{content.color}",
+ borderColor: "{content.border.color}",
+ borderWidth: "1px 0 0 0",
+ padding: "0.75rem 1rem",
+ borderRadius: "0"
+ },
+ paginatorTop: {
+ borderColor: "{content.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ paginatorBottom: {
+ borderColor: "{content.border.color}",
+ borderWidth: "1px 0 0 0"
+ }
+ },
+ datatable: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ header: {
+ background: "{content.background}",
+ borderColor: "{datatable.border.color}",
+ color: "{content.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem"
+ },
+ headerCell: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ borderColor: "{datatable.border.color}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{highlight.color}",
+ gap: "0.5rem",
+ padding: "0.75rem 1rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ columnTitle: {
+ fontWeight: "600"
+ },
+ row: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{highlight.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ bodyCell: {
+ borderColor: "{datatable.border.color}",
+ padding: "0.75rem 1rem"
+ },
+ footerCell: {
+ background: "{content.background}",
+ borderColor: "{datatable.border.color}",
+ color: "{content.color}",
+ padding: "0.75rem 1rem"
+ },
+ columnFooter: {
+ fontWeight: "600"
+ },
+ footer: {
+ background: "{content.background}",
+ borderColor: "{datatable.border.color}",
+ color: "{content.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem"
+ },
+ dropPoint: {
+ color: "{primary.color}"
+ },
+
+ resizeIndicator: {
+ width: "1px",
+ color: "{primary.color}"
+ },
+ sortIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ size: "0.875rem"
+ },
+ loadingIcon: {
+ size: "2rem"
+ },
+ rowToggleButton: {
+ hoverBackground: "{content.hover.background}",
+ selectedHoverBackground: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ selectedHoverColor: "{primary.color}",
+ size: "1.75rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ filter: {
+ inlineGap: "0.5rem",
+ overlaySelect: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ overlayPopover: {
+ background: "{overlay.popover.background}",
+ borderColor: "{overlay.popover.border.color}",
+ borderRadius: "{overlay.popover.border.radius}",
+ color: "{overlay.popover.color}",
+ shadow: "{overlay.popover.shadow}",
+ padding: "{overlay.popover.padding}",
+ gap: "0.5rem"
+ },
+ rule: {
+ borderColor: "{content.border.color}"
+ },
+ constraintList: {
+ padding: "{list.padding}",
+ gap: "{list.gap}"
+ },
+ constraint: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ separator: {
+ borderColor: "{content.border.color}"
+ },
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ }
+ },
+ paginatorTop: {
+ borderColor: "{datatable.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ paginatorBottom: {
+ borderColor: "{datatable.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ borderColor: "{content.border.color}"
+ },
+ row: {
+ stripedBackground: "{surface.50}"
+ },
+ bodyCell: {
+ selectedBorderColor: "{primary.100}"
+ }
+ },
+ dark: {
+ root: {
+ borderColor: "{surface.800}"
+ },
+ row: {
+ stripedBackground: "{surface.950}"
+ },
+ bodyCell: {
+ selectedBorderColor: "{primary.900}"
+ }
+ }
+ }
+ },
+ dialog: {
+ root: {
+ background: "{overlay.modal.background}",
+ borderColor: "{overlay.modal.border.color}",
+ color: "{overlay.modal.color}",
+ borderRadius: "{overlay.modal.border.radius}",
+ shadow: "{overlay.modal.shadow}"
+ },
+ header: {
+ padding: "{overlay.modal.padding}",
+ gap: "0.5rem"
+ },
+ title: {
+ fontSize: "1.25rem",
+ fontWeight: "600"
+ },
+ content: {
+ padding: "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}"
+ },
+ footer: {
+ padding: "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}",
+ gap: "0.5rem"
+ }
+ },
+ divider: {
+ root: {
+ borderColor: "{content.border.color}"
+ },
+ content: {
+ background: "{content.background}",
+ color: "{text.color}"
+ },
+ horizontal: {
+ margin: "1rem 0",
+ padding: "0 1rem",
+ content: {
+ padding: "0 0.5rem"
+ }
+ },
+ vertical: {
+ margin: "0 1rem",
+ padding: "0.5rem 0",
+ content: {
+ padding: "0.5rem 0"
+ }
+ }
+ },
+ dock: {
+ root: {
+ background: "rgba(255, 255, 255, 0.1)",
+ borderColor: "rgba(255, 255, 255, 0.2)",
+ padding: "0.5rem",
+ borderRadius: "{border.radius.xl}"
+ },
+ item: {
+ borderRadius: "{content.border.radius}",
+ padding: "0.5rem",
+ size: "3rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ drawer: {
+ root: {
+ background: "{overlay.modal.background}",
+ borderColor: "{overlay.modal.border.color}",
+ color: "{overlay.modal.color}",
+ shadow: "{overlay.modal.shadow}"
+ },
+ header: {
+ padding: "{overlay.modal.padding}"
+ },
+ title: {
+ fontSize: "1.5rem",
+ fontWeight: "600"
+ },
+ content: {
+ padding: "0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}"
+ },
+ footer: {
+ padding: "{overlay.modal.padding}"
+ }
+ },
+ editor: {
+ toolbar: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}"
+ },
+ toolbarItem: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}",
+ padding: "{list.padding}"
+ },
+ overlayOption: {
+ focusBackground: "{list.option.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ },
+ content: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}"
+ }
+ },
+ fieldset: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ padding: "0 1.125rem 1.125rem 1.125rem",
+ transitionDuration: "{transition.duration}"
+ },
+ legend: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ borderRadius: "{content.border.radius}",
+ borderWidth: "1px",
+ borderColor: "transparent",
+ padding: "0.5rem 0.75rem",
+ gap: "0.5rem",
+ fontWeight: "600",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ toggleIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}"
+ },
+ content: {
+ padding: "0"
+ }
+ },
+ fileupload: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ transitionDuration: "{transition.duration}"
+ },
+ header: {
+ background: "transparent",
+ color: "{text.color}",
+ padding: "1.125rem",
+ borderColor: "unset",
+ borderWidth: "0",
+ borderRadius: "0",
+ gap: "0.5rem"
+ },
+ content: {
+ highlightBorderColor: "{primary.color}",
+ padding: "0 1.125rem 1.125rem 1.125rem",
+ gap: "1rem"
+ },
+ file: {
+ padding: "1rem",
+ gap: "1rem",
+ borderColor: "{content.border.color}",
+ info: {
+ gap: "0.5rem"
+ }
+ },
+ fileList: {
+ gap: "0.5rem"
+ },
+ progressbar: {
+ height: "0.25rem"
+ },
+ basic: {
+ gap: "0.5rem"
+ }
+ },
+ iftalabel: {
+ root: {
+ color: "{form.field.float.label.color}",
+ focusColor: "{form.field.float.label.focus.color}",
+ invalidColor: "{form.field.float.label.invalid.color}",
+ transitionDuration: "0.2s",
+ positionX: "{form.field.padding.x}",
+ top: "{form.field.padding.y}",
+ fontSize: "0.75rem",
+ fontWeight: "400"
+ },
+ input: {
+ paddingTop: "1.5rem",
+ paddingBottom: "{form.field.padding.y}"
+ }
+ },
+ floatlabel: {
+ root: {
+ color: "{form.field.float.label.color}",
+ focusColor: "{form.field.float.label.focus.color}",
+ activeColor: "{form.field.float.label.active.color}",
+ invalidColor: "{form.field.float.label.invalid.color}",
+ transitionDuration: "0.2s",
+ positionX: "{form.field.padding.x}",
+ positionY: "{form.field.padding.y}",
+ fontWeight: "500",
+ active: {
+ fontSize: "0.75rem",
+ fontWeight: "400"
+ }
+ },
+ over: {
+ active: {
+ top: "-1.25rem"
+ }
+ },
+ in: {
+ input: {
+ paddingTop: "1.5rem",
+ paddingBottom: "{form.field.padding.y}"
+ },
+ active: {
+ top: "{form.field.padding.y}"
+ }
+ },
+ on: {
+ borderRadius: "{border.radius.xs}",
+ active: {
+ background: "{form.field.background}",
+ padding: "0 0.125rem"
+ }
+ }
+ },
+ galleria: {
+ root: {
+ borderWidth: "1px",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ transitionDuration: "{transition.duration}"
+ },
+ navButton: {
+ background: "rgba(255, 255, 255, 0.1)",
+ hoverBackground: "rgba(255, 255, 255, 0.2)",
+ color: "{surface.100}",
+ hoverColor: "{surface.0}",
+ size: "3rem",
+ gutter: "0.5rem",
+ prev: {
+ borderRadius: "50%"
+ },
+ next: {
+ borderRadius: "50%"
+ },
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ navIcon: {
+ size: "1.5rem"
+ },
+ thumbnailsContent: {
+ background: "{content.background}",
+ padding: "1rem 0.25rem"
+ },
+ thumbnailNavButton: {
+ size: "2rem",
+ borderRadius: "{content.border.radius}",
+ gutter: "0.5rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ thumbnailNavButtonIcon: {
+ size: "1rem"
+ },
+ caption: {
+ background: "rgba(0, 0, 0, 0.5)",
+ color: "{surface.100}",
+ padding: "1rem"
+ },
+ indicatorList: {
+ gap: "0.5rem",
+ padding: "1rem"
+ },
+ indicatorButton: {
+ width: "1rem",
+ height: "1rem",
+ activeBackground: "{primary.color}",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ insetIndicatorList: {
+ background: "rgba(0, 0, 0, 0.5)"
+ },
+ insetIndicatorButton: {
+ background: "rgba(255, 255, 255, 0.4)",
+ hoverBackground: "rgba(255, 255, 255, 0.6)",
+ activeBackground: "rgba(255, 255, 255, 0.9)"
+ },
+ closeButton: {
+ size: "3rem",
+ gutter: "0.5rem",
+ background: "rgba(255, 255, 255, 0.1)",
+ hoverBackground: "rgba(255, 255, 255, 0.2)",
+ color: "{surface.50}",
+ hoverColor: "{surface.0}",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ closeButtonIcon: {
+ size: "1.5rem"
+ },
+ colorScheme: {
+ light: {
+ thumbnailNavButton: {
+ hoverBackground: "{surface.100}",
+ color: "{surface.600}",
+ hoverColor: "{surface.700}"
+ },
+ indicatorButton: {
+ background: "{surface.200}",
+ hoverBackground: "{surface.300}"
+ }
+ },
+ dark: {
+ thumbnailNavButton: {
+ hoverBackground: "{surface.700}",
+ color: "{surface.400}",
+ hoverColor: "{surface.0}"
+ },
+ indicatorButton: {
+ background: "{surface.700}",
+ hoverBackground: "{surface.600}"
+ }
+ }
+ }
+ },
+ iconfield: {
+ icon: {
+ color: "{form.field.icon.color}"
+ }
+ },
+ image: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ preview: {
+ icon: {
+ size: "1.5rem"
+ },
+ mask: {
+ background: "{mask.background}",
+ color: "{mask.color}"
+ }
+ },
+ toolbar: {
+ position: {
+ left: "auto",
+ right: "1rem",
+ top: "1rem",
+ bottom: "auto"
+ },
+ blur: "8px",
+ background: "rgba(255,255,255,0.1)",
+ borderColor: "rgba(255,255,255,0.2)",
+ borderWidth: "1px",
+ borderRadius: "30px",
+ padding: ".5rem",
+ gap: "0.5rem"
+ },
+ action: {
+ hoverBackground: "rgba(255,255,255,0.1)",
+ color: "{surface.50}",
+ hoverColor: "{surface.0}",
+ size: "3rem",
+ iconSize: "1.5rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ imagecompare: {
+ handle: {
+ size: "15px",
+ hoverSize: "30px",
+ background: "rgba(255,255,255,0.3)",
+ hoverBackground: "rgba(255,255,255,0.3)",
+ borderColor: "unset",
+ hoverBorderColor: "unset",
+ borderWidth: "0",
+ borderRadius: "50%",
+ transitionDuration: "{transition.duration}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "rgba(255,255,255,0.3)",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ inlinemessage: {
+ root: {
+ padding: "{form.field.padding.y} {form.field.padding.x}",
+ borderRadius: "{content.border.radius}",
+ gap: "0.5rem"
+ },
+ text: {
+ fontWeight: "500"
+ },
+ icon: {
+ size: "1rem"
+ },
+ colorScheme: {
+ light: {
+ info: {
+ background: "color-mix(in srgb, {blue.50}, transparent 5%)",
+ borderColor: "{blue.200}",
+ color: "{blue.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)"
+ },
+ success: {
+ background: "color-mix(in srgb, {green.50}, transparent 5%)",
+ borderColor: "{green.200}",
+ color: "{green.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)"
+ },
+ warn: {
+ background: "color-mix(in srgb,{yellow.50}, transparent 5%)",
+ borderColor: "{yellow.200}",
+ color: "{yellow.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)"
+ },
+ error: {
+ background: "color-mix(in srgb, {red.50}, transparent 5%)",
+ borderColor: "{red.200}",
+ color: "{red.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)"
+ },
+ secondary: {
+ background: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{surface.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)"
+ },
+ contrast: {
+ background: "{surface.900}",
+ borderColor: "{surface.950}",
+ color: "{surface.50}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)"
+ }
+ },
+ dark: {
+ info: {
+ background: "color-mix(in srgb, {blue.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {blue.700}, transparent 64%)",
+ color: "{blue.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)"
+ },
+ success: {
+ background: "color-mix(in srgb, {green.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {green.700}, transparent 64%)",
+ color: "{green.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)"
+ },
+ warn: {
+ background: "color-mix(in srgb, {yellow.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {yellow.700}, transparent 64%)",
+ color: "{yellow.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)"
+ },
+ error: {
+ background: "color-mix(in srgb, {red.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {red.700}, transparent 64%)",
+ color: "{red.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)"
+ },
+ secondary: {
+ background: "{surface.800}",
+ borderColor: "{surface.700}",
+ color: "{surface.300}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)"
+ },
+ contrast: {
+ background: "{surface.0}",
+ borderColor: "{surface.100}",
+ color: "{surface.950}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)"
+ }
+ }
+ }
+ },
+ inplace: {
+ root: {
+ padding: "{form.field.padding.y} {form.field.padding.x}",
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ transitionDuration: "{transition.duration}"
+ },
+ display: {
+ hoverBackground: "{content.hover.background}",
+ hoverColor: "{content.hover.color}"
+ }
+ },
+ inputchips: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}"
+ },
+ chip: {
+ borderRadius: "{border.radius.sm}"
+ },
+ colorScheme: {
+ light: {
+ chip: {
+ focusBackground: "{surface.200}",
+ color: "{surface.800}"
+ }
+ },
+ dark: {
+ chip: {
+ focusBackground: "{surface.700}",
+ color: "{surface.0}"
+ }
+ }
+ }
+ },
+ inputgroup: {
+ addon: {
+ background: "{form.field.background}",
+ borderColor: "{form.field.border.color}",
+ color: "{form.field.icon.color}",
+ borderRadius: "{form.field.border.radius}",
+ padding: "0.5rem",
+ minWidth: "2.5rem"
+ }
+ },
+ inputnumber: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ button: {
+ width: "2.5rem",
+ borderRadius: "{form.field.border.radius}",
+ verticalPadding: "{form.field.padding.y}"
+ },
+ colorScheme: {
+ light: {
+ button: {
+ background: "transparent",
+ hoverBackground: "{surface.100}",
+ activeBackground: "{surface.200}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.border.color}",
+ activeBorderColor: "{form.field.border.color}",
+ color: "{surface.400}",
+ hoverColor: "{surface.500}",
+ activeColor: "{surface.600}"
+ }
+ },
+ dark: {
+ button: {
+ background: "transparent",
+ hoverBackground: "{surface.800}",
+ activeBackground: "{surface.700}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.border.color}",
+ activeBorderColor: "{form.field.border.color}",
+ color: "{surface.400}",
+ hoverColor: "{surface.300}",
+ activeColor: "{surface.200}"
+ }
+ }
+ }
+ },
+ inputotp: {
+ root: {
+ gap: "0.5rem"
+ },
+ input: {
+ width: "2.5rem",
+ sm: {
+ width: "2rem"
+ },
+ lg: {
+ width: "3rem"
+ }
+ }
+ },
+ inputtext: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ }
+ },
+ knob: {
+ root: {
+ transitionDuration: "{transition.duration}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ value: {
+ background: "{primary.color}"
+ },
+ range: {
+ background: "{content.border.color}"
+ },
+ text: {
+ color: "{text.muted.color}"
+ }
+ },
+ listbox: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ borderColor: "{form.field.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ shadow: "{form.field.shadow}",
+ borderRadius: "{form.field.border.radius}",
+ transitionDuration: "{form.field.transition.duration}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}",
+ header: {
+ padding: "{list.header.padding}"
+ }
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ },
+ optionGroup: {
+ background: "{list.option.group.background}",
+ color: "{list.option.group.color}",
+ fontWeight: "{list.option.group.font.weight}",
+ padding: "{list.option.group.padding}"
+ },
+ checkmark: {
+ color: "{list.option.color}",
+ gutterStart: "-0.375rem",
+ gutterEnd: "0.375rem"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ },
+ colorScheme: {
+ light: {
+ option: {
+ stripedBackground: "{surface.50}"
+ }
+ },
+ dark: {
+ option: {
+ stripedBackground: "{surface.900}"
+ }
+ }
+ }
+ },
+ megamenu: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ gap: "0.5rem",
+ verticalOrientation: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ horizontalOrientation: {
+ padding: "0.5rem 0.75rem",
+ gap: "0.5rem"
+ },
+ transitionDuration: "{transition.duration}"
+ },
+ baseItem: {
+ borderRadius: "{content.border.radius}",
+ padding: "{navigation.item.padding}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ activeBackground: "{navigation.item.active.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ activeColor: "{navigation.item.active.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}",
+ activeColor: "{navigation.item.icon.active.color}"
+ }
+ },
+ overlay: {
+ padding: "0",
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ shadow: "{overlay.navigation.shadow}",
+ gap: "0.5rem"
+ },
+ submenu: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ submenuLabel: {
+ padding: "{navigation.submenu.label.padding}",
+ fontWeight: "{navigation.submenu.label.font.weight}",
+ background: "{navigation.submenu.label.background.}",
+ color: "{navigation.submenu.label.color}"
+ },
+ submenuIcon: {
+ size: "{navigation.submenu.icon.size}",
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}",
+ activeColor: "{navigation.submenu.icon.active.color}"
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ },
+ mobileButton: {
+ borderRadius: "50%",
+ size: "1.75rem",
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ hoverBackground: "{content.hover.background}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ menu: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.navigation.shadow}",
+ transitionDuration: "{transition.duration}"
+ },
+ list: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}"
+ }
+ },
+ submenuLabel: {
+ padding: "{navigation.submenu.label.padding}",
+ fontWeight: "{navigation.submenu.label.font.weight}",
+ background: "{navigation.submenu.label.background}",
+ color: "{navigation.submenu.label.color}"
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ }
+ },
+ menubar: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ gap: "0.5rem",
+ padding: "0.5rem 0.75rem",
+ transitionDuration: "{transition.duration}"
+ },
+ baseItem: {
+ borderRadius: "{content.border.radius}",
+ padding: "{navigation.item.padding}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ activeBackground: "{navigation.item.active.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ activeColor: "{navigation.item.active.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}",
+ activeColor: "{navigation.item.icon.active.color}"
+ }
+ },
+ submenu: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}",
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.navigation.shadow}",
+ mobileIndent: "1rem",
+ icon: {
+ size: "{navigation.submenu.icon.size}",
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}",
+ activeColor: "{navigation.submenu.icon.active.color}"
+ }
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ },
+ mobileButton: {
+ borderRadius: "50%",
+ size: "1.75rem",
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ hoverBackground: "{content.hover.background}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ message: {
+ root: {
+ borderRadius: "{content.border.radius}",
+ borderWidth: "1px",
+ transitionDuration: "{transition.duration}"
+ },
+ content: {
+ padding: "0.5rem 0.75rem",
+ gap: "0.5rem",
+ sm: {
+ padding: "0.375rem 0.625rem"
+ },
+ lg: {
+ padding: "0.625rem 0.875rem"
+ }
+ },
+ text: {
+ fontSize: "1rem",
+ fontWeight: "500",
+ sm: {
+ fontSize: "0.875rem"
+ },
+ lg: {
+ fontSize: "1.125rem"
+ }
+ },
+ icon: {
+ size: "1.125rem",
+ sm: {
+ size: "1rem"
+ },
+ lg: {
+ size: "1.25rem"
+ }
+ },
+ closeButton: {
+ width: "1.75rem",
+ height: "1.75rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ offset: "{focus.ring.offset}"
+ }
+ },
+ closeIcon: {
+ size: "1rem",
+ sm: {
+ size: "0.875rem"
+ },
+ lg: {
+ size: "1.125rem"
+ }
+ },
+ outlined: {
+ root: {
+ borderWidth: "1px"
+ }
+ },
+ simple: {
+ content: {
+ padding: "0"
+ }
+ },
+ colorScheme: {
+ light: {
+ info: {
+ background: "color-mix(in srgb, {blue.50}, transparent 5%)",
+ borderColor: "{blue.200}",
+ color: "{blue.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{blue.100}",
+ focusRing: {
+ color: "{blue.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{blue.600}",
+ borderColor: "{blue.600}"
+ },
+ simple: {
+ color: "{blue.600}"
+ }
+ },
+ success: {
+ background: "color-mix(in srgb, {green.50}, transparent 5%)",
+ borderColor: "{green.200}",
+ color: "{green.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{green.100}",
+ focusRing: {
+ color: "{green.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{green.600}",
+ borderColor: "{green.600}"
+ },
+ simple: {
+ color: "{green.600}"
+ }
+ },
+ warn: {
+ background: "color-mix(in srgb,{yellow.50}, transparent 5%)",
+ borderColor: "{yellow.200}",
+ color: "{yellow.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{yellow.100}",
+ focusRing: {
+ color: "{yellow.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{yellow.600}",
+ borderColor: "{yellow.600}"
+ },
+ simple: {
+ color: "{yellow.600}"
+ }
+ },
+ error: {
+ background: "color-mix(in srgb, {red.50}, transparent 5%)",
+ borderColor: "{red.200}",
+ color: "{red.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{red.100}",
+ focusRing: {
+ color: "{red.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{red.600}",
+ borderColor: "{red.600}"
+ },
+ simple: {
+ color: "{red.600}"
+ }
+ },
+ secondary: {
+ background: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{surface.600}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{surface.200}",
+ focusRing: {
+ color: "{surface.600}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{surface.500}",
+ borderColor: "{surface.500}"
+ },
+ simple: {
+ color: "{surface.500}"
+ }
+ },
+ contrast: {
+ background: "{surface.900}",
+ borderColor: "{surface.950}",
+ color: "{surface.50}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{surface.800}",
+ focusRing: {
+ color: "{surface.50}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{surface.950}",
+ borderColor: "{surface.950}"
+ },
+ simple: {
+ color: "{surface.950}"
+ }
+ }
+ },
+ dark: {
+ info: {
+ background: "color-mix(in srgb, {blue.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {blue.700}, transparent 64%)",
+ color: "{blue.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{blue.500}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{blue.500}",
+ borderColor: "{blue.500}"
+ },
+ simple: {
+ color: "{blue.500}"
+ }
+ },
+ success: {
+ background: "color-mix(in srgb, {green.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {green.700}, transparent 64%)",
+ color: "{green.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{green.500}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{green.500}",
+ borderColor: "{green.500}"
+ },
+ simple: {
+ color: "{green.500}"
+ }
+ },
+ warn: {
+ background: "color-mix(in srgb, {yellow.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {yellow.700}, transparent 64%)",
+ color: "{yellow.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{yellow.500}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{yellow.500}",
+ borderColor: "{yellow.500}"
+ },
+ simple: {
+ color: "{yellow.500}"
+ }
+ },
+ error: {
+ background: "color-mix(in srgb, {red.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {red.700}, transparent 64%)",
+ color: "{red.500}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{red.500}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{red.500}",
+ borderColor: "{red.500}"
+ },
+ simple: {
+ color: "{red.500}"
+ }
+ },
+ secondary: {
+ background: "{surface.800}",
+ borderColor: "{surface.700}",
+ color: "{surface.300}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{surface.700}",
+ focusRing: {
+ color: "{surface.300}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{surface.400}",
+ borderColor: "{surface.400}"
+ },
+ simple: {
+ color: "{surface.400}"
+ }
+ },
+ contrast: {
+ background: "{surface.0}",
+ borderColor: "{surface.100}",
+ color: "{surface.950}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{surface.100}",
+ focusRing: {
+ color: "{surface.950}",
+ shadow: "none"
+ }
+ },
+ outlined: {
+ color: "{surface.0}",
+ borderColor: "{surface.0}"
+ },
+ simple: {
+ color: "{surface.0}"
+ }
+ }
+ }
+ }
+ },
+ metergroup: {
+ root: {
+ borderRadius: "{content.border.radius}",
+ gap: "1rem"
+ },
+ meters: {
+ background: "{content.border.color}",
+ size: "0.5rem"
+ },
+ label: {
+ gap: "0.5rem"
+ },
+ labelMarker: {
+ size: "0.5rem"
+ },
+ labelIcon: {
+ size: "1rem"
+ },
+ labelList: {
+ verticalGap: "0.5rem",
+ horizontalGap: "1rem"
+ }
+ },
+ multiselect: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ },
+ dropdown: {
+ width: "2.5rem",
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}",
+ header: {
+ padding: "{list.header.padding}"
+ }
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}",
+ gap: "0.5rem"
+ },
+ optionGroup: {
+ background: "{list.option.group.background}",
+ color: "{list.option.group.color}",
+ fontWeight: "{list.option.group.font.weight}",
+ padding: "{list.option.group.padding}"
+ },
+ clearIcon: {
+ color: "{form.field.icon.color}"
+ },
+ chip: {
+ borderRadius: "{border.radius.sm}"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ }
+ },
+ orderlist: {
+ root: {
+ gap: "1.125rem"
+ },
+ controls: {
+ gap: "0.5rem"
+ }
+ },
+ organizationchart: {
+ root: {
+ gutter: "0.75rem",
+ transitionDuration: "{transition.duration}"
+ },
+ node: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ selectedColor: "{highlight.color}",
+ hoverColor: "{content.hover.color}",
+ padding: "0.75rem 1rem",
+ toggleablePadding: "0.75rem 1rem 1.25rem 1rem",
+ borderRadius: "{content.border.radius}"
+ },
+ nodeToggleButton: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ borderColor: "{content.border.color}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ size: "1.5rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ connector: {
+ color: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ height: "24px"
+ }
+ },
+ overlaybadge: {
+ root: {
+ outline: {
+ width: "2px",
+ color: "{content.background}"
+ }
+ }
+ },
+ popover: {
+ root: {
+ background: "{overlay.popover.background}",
+ borderColor: "{overlay.popover.border.color}",
+ color: "{overlay.popover.color}",
+ borderRadius: "{overlay.popover.border.radius}",
+ shadow: "{overlay.popover.shadow}",
+ gutter: "10px",
+ arrowOffset: "1.25rem"
+ },
+ content: {
+ padding: "{overlay.popover.padding}"
+ }
+ },
+ paginator: {
+ root: {
+ padding: "0.5rem 1rem",
+ gap: "0.25rem",
+ borderRadius: "{content.border.radius}",
+ background: "{content.background}",
+ color: "{content.color}",
+ transitionDuration: "{transition.duration}"
+ },
+ navButton: {
+ background: "transparent",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ selectedColor: "{highlight.color}",
+ width: "2.5rem",
+ height: "2.5rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ currentPageReport: {
+ color: "{text.muted.color}"
+ },
+ jumpToPageInput: {
+ maxWidth: "2.5rem"
+ }
+ },
+ password: {
+ meter: {
+ background: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ height: ".75rem"
+ },
+ icon: {
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.popover.background}",
+ borderColor: "{overlay.popover.border.color}",
+ borderRadius: "{overlay.popover.border.radius}",
+ color: "{overlay.popover.color}",
+ padding: "{overlay.popover.padding}",
+ shadow: "{overlay.popover.shadow}"
+ },
+ content: {
+ gap: "0.5rem"
+ },
+ colorScheme: {
+ light: {
+ strength: {
+ weakBackground: "{red.500}",
+ mediumBackground: "{amber.500}",
+ strongBackground: "{green.500}"
+ }
+ },
+ dark: {
+ strength: {
+ weakBackground: "{red.400}",
+ mediumBackground: "{amber.400}",
+ strongBackground: "{green.400}"
+ }
+ }
+ }
+ },
+ panel: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}"
+ },
+ header: {
+ background: "transparent",
+ color: "{text.color}",
+ padding: "1.125rem",
+ borderColor: "{content.border.color}",
+ borderWidth: "0",
+ borderRadius: "0"
+ },
+ toggleableHeader: {
+ padding: "0.375rem 1.125rem"
+ },
+ title: {
+ fontWeight: "600"
+ },
+ content: {
+ padding: "0 1.125rem 1.125rem 1.125rem"
+ },
+ footer: {
+ padding: "0 1.125rem 1.125rem 1.125rem"
+ }
+ },
+ panelmenu: {
+ root: {
+ gap: "0.5rem",
+ transitionDuration: "{transition.duration}"
+ },
+ panel: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderWidth: "1px",
+ color: "{content.color}",
+ padding: "0.25rem 0.25rem",
+ borderRadius: "{content.border.radius}",
+ first: {
+ borderWidth: "1px",
+ topBorderRadius: "{content.border.radius}"
+ },
+ last: {
+ borderWidth: "1px",
+ bottomBorderRadius: "{content.border.radius}"
+ }
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ gap: "0.5rem",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{content.border.radius}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}"
+ }
+ },
+ submenu: {
+ indent: "1rem"
+ },
+ submenuIcon: {
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}"
+ }
+ },
+ picklist: {
+ root: {
+ gap: "1.125rem"
+ },
+ controls: {
+ gap: "0.5rem"
+ }
+ },
+ progressbar: {
+ root: {
+ background: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ height: "1.25rem"
+ },
+ value: {
+ background: "{primary.color}"
+ },
+ label: {
+ color: "{primary.contrast.color}",
+ fontSize: "0.75rem",
+ fontWeight: "600"
+ }
+ },
+ progressspinner: {
+ colorScheme: {
+ light: {
+ root: {
+
+
+
+
+ }
+ },
+ dark: {
+ root: {
+
+ }
+ }
+ }
+ },
+ radiobutton: {
+ root: {
+ width: "1.25rem",
+ height: "1.25rem",
+ background: "{form.field.background}",
+ checkedBackground: "{primary.color}",
+ checkedHoverBackground: "{primary.hover.color}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.border.color}",
+ checkedBorderColor: "{primary.color}",
+ checkedHoverBorderColor: "{primary.hover.color}",
+ checkedFocusBorderColor: "{primary.color}",
+ checkedDisabledBorderColor: "{form.field.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ shadow: "{form.field.shadow}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ width: "1rem",
+ height: "1rem"
+ },
+ lg: {
+ width: "1.5rem",
+ height: "1.5rem"
+ }
+ },
+ icon: {
+ size: "0.75rem",
+ checkedColor: "{primary.contrast.color}",
+ checkedHoverColor: "{primary.contrast.color}",
+ disabledColor: "{form.field.disabled.color}",
+ sm: {
+ size: "0.5rem"
+ },
+ lg: {
+ size: "1rem"
+ }
+ }
+ },
+ rating: {
+ root: {
+ gap: "0.25rem",
+ transitionDuration: "{transition.duration}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ icon: {
+ size: "1rem",
+ color: "{text.muted.color}",
+ hoverColor: "{primary.color}",
+ activeColor: "{primary.color}"
+ }
+ },
+ scrollpanel: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ bar: {
+ size: "9px",
+ borderRadius: "{border.radius.sm}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ colorScheme: {
+ light: {
+ bar: {
+ background: "{surface.100}"
+ }
+ },
+ dark: {
+ bar: {
+ background: "{surface.800}"
+ }
+ }
+ }
+ },
+ select: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ },
+ dropdown: {
+ width: "2.5rem",
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ list: {
+ padding: "{list.padding}",
+ gap: "{list.gap}",
+ header: {
+ padding: "{list.header.padding}"
+ }
+ },
+ option: {
+ focusBackground: "{list.option.focus.background}",
+ selectedBackground: "{list.option.selected.background}",
+ selectedFocusBackground: "{list.option.selected.focus.background}",
+ color: "{list.option.color}",
+ focusColor: "{list.option.focus.color}",
+ selectedColor: "{list.option.selected.color}",
+ selectedFocusColor: "{list.option.selected.focus.color}",
+ padding: "{list.option.padding}",
+ borderRadius: "{list.option.border.radius}"
+ },
+ optionGroup: {
+ background: "{list.option.group.background}",
+ color: "{list.option.group.color}",
+ fontWeight: "{list.option.group.font.weight}",
+ padding: "{list.option.group.padding}"
+ },
+ clearIcon: {
+ color: "{form.field.icon.color}"
+ },
+ checkmark: {
+ color: "{list.option.color}",
+ gutterStart: "-0.375rem",
+ gutterEnd: "0.375rem"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ }
+ },
+ selectbutton: {
+ root: {
+ borderRadius: "{form.field.border.radius}"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ invalidBorderColor: "{form.field.invalid.border.color}"
+ }
+ },
+ dark: {
+ root: {
+ invalidBorderColor: "{form.field.invalid.border.color}"
+ }
+ }
+ }
+ },
+ skeleton: {
+ root: {
+ borderRadius: "{content.border.radius}"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.200}",
+ animationBackground: "rgba(255,255,255,0.4)"
+ }
+ },
+ dark: {
+ root: {
+ background: "rgba(255, 255, 255, 0.06)",
+ animationBackground: "rgba(255, 255, 255, 0.04)"
+ }
+ }
+ }
+ },
+ slider: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ track: {
+ background: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ size: "3px"
+ },
+ range: {
+ background: "{primary.color}"
+ },
+ handle: {
+ width: "20px",
+ height: "20px",
+ borderRadius: "50%",
+ background: "{content.border.color}",
+ hoverBackground: "{content.border.color}",
+ content: {
+ borderRadius: "50%",
+ hoverBackground: "{content.background}",
+ width: "16px",
+ height: "16px",
+ shadow: "0px 0.5px 0px 0px rgba(0, 0, 0, 0.08), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)"
+ },
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ colorScheme: {
+ light: {
+ handle: {
+ }
+ },
+ dark: {
+ handle: {
+
+ }
+ }
+ }
+ },
+ speeddial: {
+ root: {
+ gap: "0.5rem",
+ transitionDuration: "{transition.duration}"
+ }
+ },
+ splitter: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ transitionDuration: "{transition.duration}"
+ },
+ gutter: {
+ background: "{content.border.color}"
+ },
+ handle: {
+ size: "24px",
+ background: "transparent",
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ }
+ },
+ splitbutton: {
+ root: {
+ borderRadius: "{form.field.border.radius}",
+ roundedBorderRadius: "2rem",
+ raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)"
+ }
+ },
+ stepper: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ separator: {
+ background: "{content.border.color}",
+ activeBackground: "{primary.color}",
+ margin: "0 0 0 1.625rem",
+ size: "2px"
+ },
+ step: {
+ padding: "0.5rem",
+ gap: "1rem"
+ },
+ stepHeader: {
+ padding: "0",
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ gap: "0.5rem"
+ },
+ stepTitle: {
+ color: "{text.muted.color}",
+ activeColor: "{primary.color}",
+ fontWeight: "500"
+ },
+ stepNumber: {
+ background: "{content.background}",
+ activeBackground: "{content.background}",
+ borderColor: "{content.border.color}",
+ activeBorderColor: "{content.border.color}",
+ color: "{text.muted.color}",
+ activeColor: "{primary.color}",
+ size: "2rem",
+ fontSize: "1.143rem",
+ fontWeight: "500",
+ borderRadius: "50%",
+ shadow: "0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)"
+ },
+ steppanels: {
+ padding: "0.875rem 0.5rem 1.125rem 0.5rem"
+ },
+ steppanel: {
+ background: "{content.background}",
+ color: "{content.color}",
+ padding: "0",
+ indent: "1rem"
+ }
+ },
+ steps: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ separator: {
+ background: "{content.border.color}"
+ },
+ itemLink: {
+ borderRadius: "{content.border.radius}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ gap: "0.5rem"
+ },
+ itemLabel: {
+ color: "{text.muted.color}",
+ activeColor: "{primary.color}",
+ fontWeight: "500"
+ },
+ itemNumber: {
+ background: "{content.background}",
+ activeBackground: "{content.background}",
+ borderColor: "{content.border.color}",
+ activeBorderColor: "{content.border.color}",
+ color: "{text.muted.color}",
+ activeColor: "{primary.color}",
+ size: "2rem",
+ fontSize: "1.143rem",
+ fontWeight: "500",
+ borderRadius: "50%",
+ shadow: "0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)"
+ }
+ },
+ tabmenu: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ tablist: {
+ borderWidth: "0 0 1px 0",
+ background: "{content.background}",
+ borderColor: "{content.border.color}"
+ },
+ item: {
+ background: "transparent",
+ hoverBackground: "transparent",
+ activeBackground: "transparent",
+ borderWidth: "0 0 1px 0",
+ borderColor: "{content.border.color}",
+ hoverBorderColor: "{content.border.color}",
+ activeBorderColor: "{primary.color}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}",
+ padding: "1rem 1.125rem",
+ fontWeight: "600",
+ margin: "0 0 -1px 0",
+ gap: "0.5rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ itemIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}"
+ },
+ activeBar: {
+ height: "1px",
+ bottom: "-1px",
+ background: "{primary.color}"
+ }
+ },
+ tabs: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ tablist: {
+ borderWidth: "0 0 1px 0",
+ background: "{content.background}",
+ borderColor: "{content.border.color}"
+ },
+ tab: {
+ background: "transparent",
+ hoverBackground: "transparent",
+ activeBackground: "transparent",
+ borderWidth: "0 0 1px 0",
+ borderColor: "{content.border.color}",
+ hoverBorderColor: "{content.border.color}",
+ activeBorderColor: "{primary.color}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}",
+ padding: "1rem 1.125rem",
+ fontWeight: "600",
+ margin: "0 0 -1px 0",
+ gap: "0.5rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ tabpanel: {
+ background: "{content.background}",
+ color: "{content.color}",
+ padding: "0.875rem 1.125rem 1.125rem 1.125rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "inset {focus.ring.shadow}"
+ }
+ },
+ navButton: {
+ background: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ width: "2.5rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ activeBar: {
+ height: "1px",
+ bottom: "-1px",
+ background: "{primary.color}"
+ },
+ colorScheme: {
+ light: {
+ navButton: {
+ shadow: "0px 0px 10px 50px rgba(255, 255, 255, 0.6)"
+ }
+ },
+ dark: {
+ navButton: {
+ shadow: "0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)"
+ }
+ }
+ }
+ },
+ tabview: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ tabList: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}"
+ },
+ tab: {
+ borderColor: "{content.border.color}",
+ activeBorderColor: "{primary.color}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ activeColor: "{primary.color}"
+ },
+ tabPanel: {
+ background: "{content.background}",
+ color: "{content.color}"
+ },
+ navButton: {
+ background: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}"
+ },
+ colorScheme: {
+ light: {
+ navButton: {
+ shadow: "0px 0px 10px 50px rgba(255, 255, 255, 0.6)"
+ }
+ },
+ dark: {
+ navButton: {
+ shadow: "0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)"
+ }
+ }
+ }
+ },
+ textarea: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ }
+ },
+ tieredmenu: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ color: "{content.color}",
+ borderRadius: "{content.border.radius}",
+ shadow: "{overlay.navigation.shadow}",
+ transitionDuration: "{transition.duration}"
+ },
+ list: {
+ padding: "{navigation.list.padding}",
+ gap: "{navigation.list.gap}"
+ },
+ item: {
+ focusBackground: "{navigation.item.focus.background}",
+ activeBackground: "{navigation.item.active.background}",
+ color: "{navigation.item.color}",
+ focusColor: "{navigation.item.focus.color}",
+ activeColor: "{navigation.item.active.color}",
+ padding: "{navigation.item.padding}",
+ borderRadius: "{navigation.item.border.radius}",
+ gap: "{navigation.item.gap}",
+ icon: {
+ color: "{navigation.item.icon.color}",
+ focusColor: "{navigation.item.icon.focus.color}",
+ activeColor: "{navigation.item.icon.active.color}"
+ }
+ },
+ submenu: {
+ mobileIndent: "1rem"
+ },
+ submenuIcon: {
+ size: "{navigation.submenu.icon.size}",
+ color: "{navigation.submenu.icon.color}",
+ focusColor: "{navigation.submenu.icon.focus.color}",
+ activeColor: "{navigation.submenu.icon.active.color}"
+ },
+ separator: {
+ borderColor: "{content.border.color}"
+ }
+ },
+ tag: {
+ root: {
+ fontSize: "0.875rem",
+ fontWeight: "700",
+ padding: "0.25rem 0.5rem",
+ gap: "0.25rem",
+ borderRadius: "{content.border.radius}",
+ roundedBorderRadius: "{border.radius.xl}"
+ },
+ icon: {
+ size: "0.75rem"
+ },
+ colorScheme: {
+ light: {
+ primary: {
+ background: "{primary.100}",
+ color: "{primary.700}"
+ },
+ secondary: {
+ background: "{surface.100}",
+ color: "{surface.600}"
+ },
+ success: {
+ background: "{green.100}",
+ color: "{green.700}"
+ },
+ info: {
+ background: "{sky.100}",
+ color: "{sky.700}"
+ },
+ warn: {
+ background: "{orange.100}",
+ color: "{orange.700}"
+ },
+ danger: {
+ background: "{red.100}",
+ color: "{red.700}"
+ },
+ contrast: {
+ background: "{surface.950}",
+ color: "{surface.0}"
+ }
+ },
+ dark: {
+ primary: {
+ background: "color-mix(in srgb, {primary.500}, transparent 84%)",
+ color: "{primary.300}"
+ },
+ secondary: {
+ background: "{surface.800}",
+ color: "{surface.300}"
+ },
+ success: {
+ background: "color-mix(in srgb, {green.500}, transparent 84%)",
+ color: "{green.300}"
+ },
+ info: {
+ background: "color-mix(in srgb, {sky.500}, transparent 84%)",
+ color: "{sky.300}"
+ },
+ warn: {
+ background: "color-mix(in srgb, {orange.500}, transparent 84%)",
+ color: "{orange.300}"
+ },
+ danger: {
+ background: "color-mix(in srgb, {red.500}, transparent 84%)",
+ color: "{red.300}"
+ },
+ contrast: {
+ background: "{surface.0}",
+ color: "{surface.950}"
+ }
+ }
+ }
+ },
+ terminal: {
+ root: {
+ background: "{form.field.background}",
+ borderColor: "{form.field.border.color}",
+ color: "{form.field.color}",
+ height: "18rem",
+ padding: "{form.field.padding.y} {form.field.padding.x}",
+ borderRadius: "{form.field.border.radius}"
+ },
+ prompt: {
+ gap: "0.25rem"
+ },
+ commandResponse: {
+ margin: "2px 0"
+ }
+ },
+ timeline: {
+ event: {
+ minHeight: "5rem"
+ },
+ horizontal: {
+ eventContent: {
+ padding: "1rem 0"
+ }
+ },
+ vertical: {
+ eventContent: {
+ padding: "0 1rem"
+ }
+ },
+ eventMarker: {
+ size: "1.125rem",
+ borderRadius: "50%",
+ borderWidth: "2px",
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ content: {
+ borderRadius: "50%",
+ size: "0.375rem",
+ background: "{primary.color}",
+ insetShadow: "0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12)"
+ }
+ },
+ eventConnector: {
+ color: "{content.border.color}",
+ size: "2px"
+ }
+ },
+ togglebutton: {
+ root: {
+ padding: "0.5rem 1rem",
+ borderRadius: "{content.border.radius}",
+ gap: "0.5rem",
+ fontWeight: "500",
+ disabledBackground: "{form.field.disabled.background}",
+ disabledBorderColor: "{form.field.disabled.background}",
+ disabledColor: "{form.field.disabled.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ padding: "0.375rem 0.75rem"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ padding: "0.625rem 1.25rem"
+ }
+ },
+ icon: {
+ disabledColor: "{form.field.disabled.color}"
+ },
+ content: {
+
+
+ checkedShadow: "0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.100}",
+ checkedBackground: "{surface.100}",
+ hoverBackground: "{surface.100}",
+ borderColor: "{surface.100}",
+ color: "{surface.500}",
+ hoverColor: "{surface.700}",
+ checkedColor: "{surface.900}",
+ checkedBorderColor: "{surface.100}"
+ },
+ content: {
+ checkedBackground: "{surface.0}"
+ },
+ icon: {
+ color: "{surface.500}",
+ hoverColor: "{surface.700}",
+ checkedColor: "{surface.900}"
+ }
+ },
+ dark: {
+ root: {
+ background: "{surface.950}",
+ checkedBackground: "{surface.950}",
+ hoverBackground: "{surface.950}",
+ borderColor: "{surface.950}",
+ color: "{surface.400}",
+ hoverColor: "{surface.300}",
+ checkedColor: "{surface.0}",
+ checkedBorderColor: "{surface.950}"
+ },
+ content: {
+ checkedBackground: "{surface.800}"
+ },
+ icon: {
+ color: "{surface.400}",
+ hoverColor: "{surface.300}",
+ checkedColor: "{surface.0}"
+ }
+ }
+ }
+ },
+ toggleswitch: {
+ root: {
+ width: "2.5rem",
+ height: "1.5rem",
+ borderRadius: "30px",
+ gap: "0.25rem",
+ shadow: "{form.field.shadow}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ },
+ borderWidth: "1px",
+ borderColor: "transparent",
+ hoverBorderColor: "transparent",
+ checkedBorderColor: "transparent",
+ checkedHoverBorderColor: "transparent",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ transitionDuration: "{form.field.transition.duration}",
+ slideDuration: "0.2s"
+ },
+ handle: {
+ borderRadius: "50%",
+ size: "1rem"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.300}",
+ disabledBackground: "{form.field.disabled.background}",
+ hoverBackground: "{surface.400}",
+ checkedBackground: "{primary.color}",
+ checkedHoverBackground: "{primary.hover.color}"
+ },
+ handle: {
+ background: "{surface.0}",
+ disabledBackground: "{form.field.disabled.color}",
+ hoverBackground: "{surface.0}",
+ checkedBackground: "{surface.0}",
+ checkedHoverBackground: "{surface.0}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ checkedColor: "{primary.color}",
+ checkedHoverColor: "{primary.hover.color}"
+ }
+ },
+ dark: {
+ root: {
+ background: "{surface.700}",
+ disabledBackground: "{surface.600}",
+ hoverBackground: "{surface.600}",
+ checkedBackground: "{primary.color}",
+ checkedHoverBackground: "{primary.hover.color}"
+ },
+ handle: {
+ background: "{surface.400}",
+ disabledBackground: "{surface.900}",
+ hoverBackground: "{surface.300}",
+ checkedBackground: "{surface.900}",
+ checkedHoverBackground: "{surface.900}",
+ color: "{surface.900}",
+ hoverColor: "{surface.800}",
+ checkedColor: "{primary.color}",
+ checkedHoverColor: "{primary.hover.color}"
+ }
+ }
+ }
+ },
+ tree: {
+ root: {
+ background: "{content.background}",
+ color: "{content.color}",
+ padding: "1rem",
+ gap: "2px",
+ indent: "1rem",
+ transitionDuration: "{transition.duration}"
+ },
+ node: {
+ padding: "0.25rem 0.5rem",
+ borderRadius: "{content.border.radius}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ color: "{text.color}",
+ hoverColor: "{text.hover.color}",
+ selectedColor: "{highlight.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ },
+ gap: "0.25rem"
+ },
+ nodeIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ selectedColor: "{highlight.color}"
+ },
+ nodeToggleButton: {
+ borderRadius: "50%",
+ size: "1.75rem",
+ hoverBackground: "{content.hover.background}",
+ selectedHoverBackground: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ selectedHoverColor: "{primary.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ loadingIcon: {
+ size: "2rem"
+ },
+ filter: {
+ margin: "0 0 0.5rem 0"
+ }
+ },
+ treeselect: {
+ root: {
+ background: "{form.field.background}",
+ disabledBackground: "{form.field.disabled.background}",
+ filledBackground: "{form.field.filled.background}",
+ filledHoverBackground: "{form.field.filled.hover.background}",
+ filledFocusBackground: "{form.field.filled.focus.background}",
+ borderColor: "{form.field.border.color}",
+ hoverBorderColor: "{form.field.hover.border.color}",
+ focusBorderColor: "{form.field.focus.border.color}",
+ invalidBorderColor: "{form.field.invalid.border.color}",
+ color: "{form.field.color}",
+ disabledColor: "{form.field.disabled.color}",
+ placeholderColor: "{form.field.placeholder.color}",
+ invalidPlaceholderColor: "{form.field.invalid.placeholder.color}",
+ shadow: "{form.field.shadow}",
+ paddingX: "{form.field.padding.x}",
+ paddingY: "{form.field.padding.y}",
+ borderRadius: "{form.field.border.radius}",
+ focusRing: {
+ width: "{form.field.focus.ring.width}",
+ style: "{form.field.focus.ring.style}",
+ color: "{form.field.focus.ring.color}",
+ offset: "{form.field.focus.ring.offset}",
+ shadow: "{form.field.focus.ring.shadow}"
+ },
+ transitionDuration: "{form.field.transition.duration}",
+ sm: {
+ fontSize: "{form.field.sm.font.size}",
+ paddingX: "{form.field.sm.padding.x}",
+ paddingY: "{form.field.sm.padding.y}"
+ },
+ lg: {
+ fontSize: "{form.field.lg.font.size}",
+ paddingX: "{form.field.lg.padding.x}",
+ paddingY: "{form.field.lg.padding.y}"
+ }
+ },
+ dropdown: {
+ width: "2.5rem",
+ color: "{form.field.icon.color}"
+ },
+ overlay: {
+ background: "{overlay.select.background}",
+ borderColor: "{overlay.select.border.color}",
+ borderRadius: "{overlay.select.border.radius}",
+ color: "{overlay.select.color}",
+ shadow: "{overlay.select.shadow}"
+ },
+ tree: {
+ padding: "{list.padding}"
+ },
+ clearIcon: {
+ color: "{form.field.icon.color}"
+ },
+ emptyMessage: {
+ padding: "{list.option.padding}"
+ },
+ chip: {
+ borderRadius: "{border.radius.sm}"
+ }
+ },
+ treetable: {
+ root: {
+ transitionDuration: "{transition.duration}"
+ },
+ header: {
+ background: "{content.background}",
+ borderColor: "{treetable.border.color}",
+ color: "{content.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem"
+ },
+ headerCell: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ borderColor: "{treetable.border.color}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{highlight.color}",
+ gap: "0.5rem",
+ padding: "0.75rem 1rem",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ columnTitle: {
+ fontWeight: "600"
+ },
+ row: {
+ background: "{content.background}",
+ hoverBackground: "{content.hover.background}",
+ selectedBackground: "{highlight.background}",
+ color: "{content.color}",
+ hoverColor: "{content.hover.color}",
+ selectedColor: "{highlight.color}",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "-1px",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ bodyCell: {
+ borderColor: "{treetable.border.color}",
+ padding: "0.75rem 1rem",
+ gap: "0.5rem"
+ },
+ footerCell: {
+ background: "{content.background}",
+ borderColor: "{treetable.border.color}",
+ color: "{content.color}",
+ padding: "0.75rem 1rem"
+ },
+ columnFooter: {
+ fontWeight: "600"
+ },
+ footer: {
+ background: "{content.background}",
+ borderColor: "{treetable.border.color}",
+ color: "{content.color}",
+ borderWidth: "0 0 1px 0",
+ padding: "0.75rem 1rem"
+ },
+
+ resizeIndicator: {
+ width: "1px",
+ color: "{primary.color}"
+ },
+ sortIcon: {
+ color: "{text.muted.color}",
+ hoverColor: "{text.hover.muted.color}",
+ size: "0.875rem"
+ },
+ loadingIcon: {
+ size: "2rem"
+ },
+ nodeToggleButton: {
+ hoverBackground: "{content.hover.background}",
+ selectedHoverBackground: "{content.background}",
+ color: "{text.muted.color}",
+ hoverColor: "{text.color}",
+ selectedHoverColor: "{primary.color}",
+ size: "1.75rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ color: "{focus.ring.color}",
+ offset: "{focus.ring.offset}",
+ shadow: "{focus.ring.shadow}"
+ }
+ },
+ paginatorTop: {
+ borderColor: "{content.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ paginatorBottom: {
+ borderColor: "{content.border.color}",
+ borderWidth: "0 0 1px 0"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ borderColor: "{content.border.color}"
+ },
+ bodyCell: {
+ selectedBorderColor: "{primary.100}"
+ }
+ },
+ dark: {
+ root: {
+ borderColor: "{surface.800}"
+ },
+ bodyCell: {
+ selectedBorderColor: "{primary.900}"
+ }
+ }
+ }
+ },
+ toast: {
+ root: {
+ width: "25rem",
+ borderRadius: "{content.border.radius}",
+ borderWidth: "1px",
+ transitionDuration: "{transition.duration}"
+ },
+ icon: {
+ size: "1.125rem"
+ },
+ content: {
+ padding: "{overlay.popover.padding}",
+ gap: "0.5rem"
+ },
+ text: {
+ gap: "0.5rem"
+ },
+ summary: {
+ fontWeight: "500",
+ fontSize: "1rem"
+ },
+ detail: {
+ fontWeight: "500",
+ fontSize: "0.875rem"
+ },
+ closeButton: {
+ width: "1.75rem",
+ height: "1.75rem",
+ borderRadius: "50%",
+ focusRing: {
+ width: "{focus.ring.width}",
+ style: "{focus.ring.style}",
+ offset: "{focus.ring.offset}"
+ }
+ },
+ closeIcon: {
+ size: "1rem"
+ },
+ colorScheme: {
+ light: {
+
+ info: {
+ background: "color-mix(in srgb, {blue.50}, transparent 5%)",
+ borderColor: "{blue.200}",
+ color: "{blue.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{blue.100}",
+ focusRing: {
+ color: "{blue.600}",
+ shadow: "none"
+ }
+ }
+ },
+ success: {
+ background: "color-mix(in srgb, {green.50}, transparent 5%)",
+ borderColor: "{green.200}",
+ color: "{green.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{green.100}",
+ focusRing: {
+ color: "{green.600}",
+ shadow: "none"
+ }
+ }
+ },
+ warn: {
+ background: "color-mix(in srgb,{yellow.50}, transparent 5%)",
+ borderColor: "{yellow.200}",
+ color: "{yellow.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{yellow.100}",
+ focusRing: {
+ color: "{yellow.600}",
+ shadow: "none"
+ }
+ }
+ },
+ error: {
+ background: "color-mix(in srgb, {red.50}, transparent 5%)",
+ borderColor: "{red.200}",
+ color: "{red.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{red.100}",
+ focusRing: {
+ color: "{red.600}",
+ shadow: "none"
+ }
+ }
+ },
+ secondary: {
+ background: "{surface.100}",
+ borderColor: "{surface.200}",
+ color: "{surface.600}",
+ detailColor: "{surface.700}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{surface.200}",
+ focusRing: {
+ color: "{surface.600}",
+ shadow: "none"
+ }
+ }
+ },
+ contrast: {
+ background: "{surface.900}",
+ borderColor: "{surface.950}",
+ color: "{surface.50}",
+ detailColor: "{surface.0}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{surface.800}",
+ focusRing: {
+ color: "{surface.50}",
+ shadow: "none"
+ }
+ }
+ }
+ },
+ dark: {
+
+ info: {
+ background: "color-mix(in srgb, {blue.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {blue.700}, transparent 64%)",
+ color: "{blue.500}",
+ detailColor: "{surface.0}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{blue.500}",
+ shadow: "none"
+ }
+ }
+ },
+ success: {
+ background: "color-mix(in srgb, {green.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {green.700}, transparent 64%)",
+ color: "{green.500}",
+ detailColor: "{surface.0}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{green.500}",
+ shadow: "none"
+ }
+ }
+ },
+ warn: {
+ background: "color-mix(in srgb, {yellow.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {yellow.700}, transparent 64%)",
+ color: "{yellow.500}",
+ detailColor: "{surface.0}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{yellow.500}",
+ shadow: "none"
+ }
+ }
+ },
+ error: {
+ background: "color-mix(in srgb, {red.500}, transparent 84%)",
+ borderColor: "color-mix(in srgb, {red.700}, transparent 64%)",
+ color: "{red.500}",
+ detailColor: "{surface.0}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "rgba(255, 255, 255, 0.05)",
+ focusRing: {
+ color: "{red.500}",
+ shadow: "none"
+ }
+ }
+ },
+ secondary: {
+ background: "{surface.800}",
+ borderColor: "{surface.700}",
+ color: "{surface.300}",
+ detailColor: "{surface.0}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{surface.700}",
+ focusRing: {
+ color: "{surface.300}",
+ shadow: "none"
+ }
+ }
+ },
+ contrast: {
+ background: "{surface.0}",
+ borderColor: "{surface.100}",
+ color: "{surface.950}",
+ detailColor: "{surface.950}",
+ shadow: "0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)",
+ closeButton: {
+ hoverBackground: "{surface.100}",
+ focusRing: {
+ color: "{surface.950}",
+ shadow: "none"
+ }
+ }
+ }
+ }
+ }
+ },
+ toolbar: {
+ root: {
+ background: "{content.background}",
+ borderColor: "{content.border.color}",
+ borderRadius: "{content.border.radius}",
+ color: "{content.color}",
+ gap: "0.5rem",
+ padding: "0.75rem"
+ }
+ },
+ virtualscroller: {
+ loader: {
+ mask: {
+ background: "{content.background}",
+ color: "{text.muted.color}"
+ },
+ icon: {
+ size: "2rem"
+ }
+ }
+ },
+ tooltip: {
+ root: {
+ maxWidth: "12.5rem",
+ gutter: "0.25rem",
+ shadow: "{overlay.popover.shadow}",
+ padding: "0.5rem 0.75rem",
+ borderRadius: "{overlay.popover.border.radius}"
+ },
+ colorScheme: {
+ light: {
+ root: {
+ background: "{surface.700}",
+ color: "{surface.0}"
+ }
+ },
+ dark: {
+ root: {
+ background: "{surface.700}",
+ color: "{surface.0}"
+ }
+ }
+ }
+ },
+ ripple: {
+ colorScheme: {
+ light: {
+ root: {
+ background: "rgba(0,0,0,0.1)"
+ }
+ },
+ dark: {
+ root: {
+ background: "rgba(255,255,255,0.3)"
+ }
+ }
+ }
+ }
+ }
+});
+
+export default MyPreset;
+/*
+export const appConfig: ApplicationConfig = {
+ providers: [
+ provideAnimationsAsync(),
+ providePrimeNG({
+ theme: {
+ preset: MyPreset,
+ }
+ })
+ ]
+};
+*/
+
diff --git a/U22/src/app/nav-toolbar/nav-toolbar.component.css b/U22/src/app/nav-toolbar/nav-toolbar.component.css
new file mode 100644
index 0000000..df66041
--- /dev/null
+++ b/U22/src/app/nav-toolbar/nav-toolbar.component.css
@@ -0,0 +1,38 @@
+a {
+ text-decoration: none;
+ color: white;
+}
+
+a:hover,
+a:active {
+ color: lightgray;
+}
+
+
+/* may be is not use anymore */
+li .glyphicon {
+ margin-right: 10px;
+}
+
+.navigation-items {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+/* Highlighting rules for nav menu items */
+li.link-active a,
+li.link-active a:hover,
+li.link-active a:focus {
+ background-color: #4189C7;
+ color: white;
+}
+
+/* Keep the nav menu independent of scrolling and on top of other items */
+.main-nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1;
+}
\ No newline at end of file
diff --git a/U22/src/app/nav-toolbar/nav-toolbar.component.html b/U22/src/app/nav-toolbar/nav-toolbar.component.html
new file mode 100644
index 0000000..72298b5
--- /dev/null
+++ b/U22/src/app/nav-toolbar/nav-toolbar.component.html
@@ -0,0 +1,24 @@
+ = new EventEmitter();
+ private authService = inject(AuthenticationService);
+
+ constructor(
+ private router: Router) { }
+
+ ngOnInit() {
+ const currentUser = this.authService.authChange();
+ this.isAuth.set(false);
+ this.isAdmin.set(false);
+ if (currentUser.firstName != '') {
+ this.isAuth.set(Utils.getIsAuth());
+ this.isAdmin.set(Utils.getIsAdmin());
+ this.currentUserName = currentUser.firstName + ' ' + currentUser.lastName;
+ }
+
+ }
+
+ ngOnDestroy() {
+ if (this.authSubscription) {
+ this.authSubscription.unsubscribe();
+ }
+ }
+
+ onHome() {
+ this.router.navigate(['/concessionvalidation']);
+ }
+ onToggle() {
+ this.isExpanded = !this.isExpanded;
+ this.toggleEvent.emit(this.isExpanded);
+ }
+ onLogout() {
+ this.authService.logout();
+ this.router.navigate(['/login']);
+ }
+
+}
+
+
diff --git a/U22/src/app/route-guard/auth.guard.ts b/U22/src/app/route-guard/auth.guard.ts
new file mode 100644
index 0000000..25c2f69
--- /dev/null
+++ b/U22/src/app/route-guard/auth.guard.ts
@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Utils } from '../shares';
+@Injectable({ providedIn: 'root' })
+export class AuthGuard {
+ msg = "[AuthGuard] ";
+ constructor(private router: Router) { }
+
+ canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+ const roleAllowed = route.data['roleAllowed'];
+ const user = Utils.getCurrentUser();
+ const userRole = Utils.getUserRole(user);
+ let hasLoggedIn = Utils.getIsAuth();
+ console.log(this.msg + " the userlogin ", user);
+ if (hasLoggedIn) {
+
+ if (roleAllowed != undefined) {
+ console.log("[auth-guard] ther roleAllow ", roleAllowed);
+ if (roleAllowed.indexOf(userRole) != -1) {
+ return true;
+ }
+ else {
+ this.router.navigate(['/login']);
+ return false;
+ }
+ }
+ else //if no role define just return hasLoggedIn
+ {
+ return hasLoggedIn;
+ }
+ }
+ else {
+ this.router.navigate(['/login']);
+ return false;
+ }
+
+ // not logged in so redirect to login page with the return url
+ this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
+ return false;
+ }
+
+}
diff --git a/U22/src/app/route-guard/index.js b/U22/src/app/route-guard/index.js
new file mode 100644
index 0000000..1cb7315
--- /dev/null
+++ b/U22/src/app/route-guard/index.js
@@ -0,0 +1,7 @@
+"use strict";
+function __export(m) {
+ for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./auth.guard"));
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/U22/src/app/route-guard/index.ts b/U22/src/app/route-guard/index.ts
new file mode 100644
index 0000000..b41e34a
--- /dev/null
+++ b/U22/src/app/route-guard/index.ts
@@ -0,0 +1 @@
+export * from './auth.guard';
diff --git a/U22/src/app/shares/CommonUtilities.ts b/U22/src/app/shares/CommonUtilities.ts
new file mode 100644
index 0000000..966161f
--- /dev/null
+++ b/U22/src/app/shares/CommonUtilities.ts
@@ -0,0 +1,60 @@
+import { FormControl, FormGroup } from '@angular/forms';
+
+declare global {
+ interface Navigator {
+ msSaveBlob?: (blob: any, defaultName?: string) => boolean
+ msSaveOrOpenBlob?: (blob: any, defaultName?: string) => boolean
+ }
+}
+
+export class CommonUtilities {
+ /** Display the blob */
+ static displayFileInNewTab(response: any, defaultFileName: string) {
+ const contentType = response.headers.get('content-type');
+ const blob = new Blob([response.body], { type: contentType });
+ const fileName = this.getFileName(response, defaultFileName);
+ if (window.navigator.msSaveOrOpenBlob) {
+ window.navigator.msSaveOrOpenBlob(blob, fileName);
+ } else {
+ const data = window.URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = data;
+ link.target = '_blank';
+ link.click();
+ }
+ }
+ /*** Download the blob ***/
+ static downloadFile(response: any, defaultFileName: string) {
+ const contentType = response.headers.get('content-type');
+
+ const blob = new Blob([response.body], { type: contentType });
+ const fileName = this.getFileName(response, defaultFileName);
+
+ if (typeof window.navigator.msSaveBlob === 'function') {
+ console.log("download the report saveblob");
+ window.navigator.msSaveBlob(blob, fileName);
+ console.log("download the report saveblob done");
+ }
+ else {
+ const link = document.createElement('a');
+ link.href = window.URL.createObjectURL(blob);
+ console.log("no msSaveBlob download the report saveblob done");
+ //link.download? = fileName;
+ link.download = fileName;
+ link.click();
+ }
+ }
+ /** Get the attachment file name */
+ static getFileName(response: any, defaultFileName: string) {
+ const contentDis = response.headers.get('content-disposition');
+ let fileName = defaultFileName;
+ if (contentDis && contentDis.indexOf('attachment') !== -1) {
+ const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
+ const matches = filenameRegex.exec(contentDis);
+ if (matches != null && matches[1]) {
+ fileName = matches[1].replace(/['"]/g, '');
+ }
+ }
+ return fileName;
+ }
+}
\ No newline at end of file
diff --git a/U22/src/app/shares/appsetting.ts b/U22/src/app/shares/appsetting.ts
new file mode 100644
index 0000000..0deee83
--- /dev/null
+++ b/U22/src/app/shares/appsetting.ts
@@ -0,0 +1,65 @@
+import { inject, Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+export function initializeApp() {
+ return (): Promise => {
+ return inject(AppSettingService).loadAppSetting();
+ }
+ // return () => inject(AppSettingService).loadAppSetting();
+};
+
+@Injectable({ providedIn: 'root' })
+export class AppSettingService {
+ private _appsetting: any;
+ constructor(private http: HttpClient
+ ) { }
+
+ public loadAppSetting(): Promise {
+ const source$ = this.http.get("config/appsetting.json")
+ const rs$ = firstValueFrom(source$)
+ .then(x => {
+ this._appsetting = x;
+ console.log("[AppSettingService] assign", x);
+ return x;
+ });
+ return rs$;
+ }
+ set appSeting(value: any) {
+ this._appsetting = value;
+ }
+ get appSetting(): any {
+ return this._appsetting;
+ }
+
+}
+/* module put this
+to use it
+in app.module.ts
+add
+1)
+ providers: [
+ { provide : APP_INITIALIZER, multi : true, deps : [AppSettingService],
+ useFactory: initializeApp
+ },
+ ]
+
+2)
+other this one work too.
+providers: [
+{
+ provide : APP_INITIALIZER,
+ multi : true,
+ deps : [AppSettingService],
+ useFactory : (appConfigService : AppSettingService) => () => appConfigService.loadAppSetting()
+}
+]
+
+to use it calling something like this
+export class TestComponent {
+ public test1ServiceUrl: string;
+
+ constructor(public configService: AppConfigService) {
+ this.test1ServiceUrl = this.configService.appSetting.test1ServiceUrl;
+ }
+}
+*/
\ No newline at end of file
diff --git a/U22/src/app/shares/error.interceptor.ts b/U22/src/app/shares/error.interceptor.ts
new file mode 100644
index 0000000..5379593
--- /dev/null
+++ b/U22/src/app/shares/error.interceptor.ts
@@ -0,0 +1,97 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpInterceptorFn, HttpHandlerFn } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+import { AuthenticationService } from '../user-services';
+//import { ToastrService } from 'ngx-toastr';
+import { NavigationExtras, Router } from '@angular/router';
+/*
+@Injectable()
+export class ErrorInterceptor implements HttpInterceptor {
+ //private authenticationService: AuthenticationService;
+ constructor(
+ private router: Router,
+ // private toastr: ToastrService,
+ ) { }
+
+ intercept(request: HttpRequest, next: HttpHandler): Observable> {
+ // console.log("I am intercept to catch error status = 401...", request);
+ return next.handle(request).pipe(catchError(err => {
+ /* no use yet
+ if (err) {
+ switch(err.status) {
+ case 400:
+ if (err.error.errors) {
+ const modalStateErrors = [];
+ for (const key in err.error.errors) {
+ if (err.error.errors[key]) {
+ modalStateErrors.push(err.error.errors[key]);
+ }
+ }
+ throw modalStateErrors;
+ } else {
+ this.toastr.error(err.statusText, err.status);
+ }
+ break;
+ case 401:
+ this.toastr.error(err.statusText, err.status);
+ break;
+ case 404:
+ this.router.navigateByUrl('/not-found');
+ break;
+ case 500:
+ const navigationExtras: NavigationExtras = {state:{error:err.error}};
+ this.router.navigateByUrl('/server-error', navigationExtras);
+ break;
+ default:
+ this.toastr.error('Something unexpected went wrong');
+ console.log("this error interceptor",err);
+ break;
+ }
+ }
+ */
+/*
+ if (err.status === 401) {
+ // auto logout if 401 response returned from api Unauthorized
+ // this.authenticationService.logout();
+ //location.reload();
+ const error = err.error.message || err.statusText;
+ console.log("After I Get Error status = 401...", error, err);
+ return throwError(error);
+ }
+ else {
+ console.log("I Get Error .", err);
+ return throwError(err);
+ }
+ }))
+}
+}
+
+*/
+//new one
+//https://blog.ninja-squad.com/2022/11/09/angular-http-in-standalone-applications/
+////////////////
+export const ErrorInterceptor: HttpInterceptorFn = (req: HttpRequest, next: HttpHandlerFn): Observable> => {
+ const authenticationService = inject(AuthenticationService);
+
+ // logger.log(`Request is on its way to ${req.url}`);
+ return next(req).pipe(catchError(err => {
+ if (err.status === 401) {
+ // auto logout if 401 response returned from api Unauthorized
+ // this.authenticationService.logout();
+ //location.reload();
+ const error = err.error.message || err.statusText;
+ // console.log("After I Get Error status = 401...", error, err);
+ return throwError(() => error);
+ }
+ else {
+ console.log("I Get Error .", err);
+ return throwError(() => err);
+ }
+
+ }));
+}
+
+////////////////
+
diff --git a/U22/src/app/shares/httpfile.service.ts b/U22/src/app/shares/httpfile.service.ts
new file mode 100644
index 0000000..aa32074
--- /dev/null
+++ b/U22/src/app/shares/httpfile.service.ts
@@ -0,0 +1,115 @@
+import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { ConfigureUrl } from '../models';
+import { AppSettingService } from './appsetting';
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class HttpUtility {
+ private baseApiUrl: string = "";
+ constructor(private http: HttpClient,
+ private appSetting :AppSettingService,
+ private router: Router) {
+ }
+ /**
+ * getFile
+ * @param url
+ */
+ public getFileAsText(url: string): Observable {
+ return this.http
+ .get(this.getApiUrl(url), { responseType: 'blob' as 'text' })
+ .pipe(catchError(e => this.handleError(e)));
+ }
+ /**
+ * getFile
+ * @param url
+ */
+ public getFile(url: string): Observable {
+ return this.http
+ .get(this.getApiUrl(url), { responseType: 'blob' as 'json' })
+ .pipe(catchError(e => this.handleError(e)));
+ }
+
+ /**
+ * handleError
+ * @param response
+ */
+ private handleError(errorResponse: HttpErrorResponse) {
+ // in a real world app, we may send the server to some remote logging infrastructure
+ // instead of just logging it to the console
+ return throwError(errorResponse);
+ }
+ //get excel file zip file etc ..
+ /*
+ allowedToDisplay = [
+ this.mimeConstant.png,
+ this.mimeConstant.jpeg,
+ this.mimeConstant.jpg,
+ this.mimeConstant.gif,
+ this.mimeConstant.txt,
+ this.mimeConstant.pdf
+ ];
+ */
+ /* how to use it
+ this.http.getFileResponse(`Person/GetPhoto?recordId=${personId}`).pipe(
+ catchError(err => {
+ this.snackBar.error(err || this.constants.error_Getting_photo);
+ return EMPTY;
+ }),
+ finalize(() => {
+ this.spinner.hide();
+ })).subscribe(response => {
+ if (response) {
+ if (isDownload) {
+ CommonUtilities.downloadFile(response);
+ } else {
+ if (response.body && response.body.type) {
+ if (this.allowedToDisplay.includes(response.body.type)) {
+ CommonUtilities.displayFileInNewTab(response);
+ } else {
+ this.temporaryFile = response;
+ this.downloadWarning = true;
+ }
+ }
+ }
+ }
+ });
+ */
+ public getFileResponse(url: string, data?: any): Observable {
+ if (data) {
+ return this.http.post(this.getApiUrl(url),
+ data,
+ { responseType: 'blob', observe: 'response' })
+ .pipe(catchError(e => this.handleError(e)));
+
+ }
+ return this.http
+ .get(this.getApiUrl(url), { responseType: 'blob', observe: 'response' })
+ .pipe(catchError(e => this.handleError(e)));
+ }
+
+ public getFileAsPDF(url: string, data: any): Observable {
+ let updateURL;
+ if (data) {
+ updateURL = url + data;
+ } else {
+ updateURL = url;
+ }
+ return this.http
+ .get(this.getApiUrl(updateURL), { responseType: 'blob' as 'text', observe: 'response' })
+ .pipe(catchError(e => this.handleError(e)));
+ }
+ /**
+ * getApiUrl
+ * @param url
+ */
+ private getApiUrl(url:string) {
+ const baseUrl = this.appSetting.appSetting.baseUrl;
+ return baseUrl + "/"+ url;
+ }
+}
\ No newline at end of file
diff --git a/U22/src/app/shares/index.ts b/U22/src/app/shares/index.ts
new file mode 100644
index 0000000..22a9b8c
--- /dev/null
+++ b/U22/src/app/shares/index.ts
@@ -0,0 +1,8 @@
+export * from './lookup.service';
+export * from './utils';
+export * from './httpfile.service';
+export * from './CommonUtilities';
+export * from './error.interceptor';
+export * from './jwt.interceptor';
+export { initializeApp, AppSettingService } from './appsetting';
+
diff --git a/U22/src/app/shares/jwt.interceptor.ts b/U22/src/app/shares/jwt.interceptor.ts
new file mode 100644
index 0000000..13e466b
--- /dev/null
+++ b/U22/src/app/shares/jwt.interceptor.ts
@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpInterceptorFn, HttpHandlerFn } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { Utils } from './utils';
+/*
+@Injectable()
+export class JwtInterceptor implements HttpInterceptor {
+ intercept(request: HttpRequest, next: HttpHandler): Observable> {
+ // add authorization header with jwt token if available
+ const currentUser = Utils.getCurrentUser();//localStorage.getItem('currentUser')!;
+ console.log('I am interceptor debug for currentUser obj', currentUser);
+ if (currentUser && currentUser.token) {
+ //console.log('I am interceptor add authorization header with jwt token');
+ request = request.clone({
+ setHeaders: {
+ Authorization: `Bearer ${currentUser.token}`
+ }
+ });
+ }
+ return next.handle(request);
+ }
+}
+
+/*
+new one
+////////////////
+*/
+export const JwtInterceptor: HttpInterceptorFn = (request: HttpRequest, next: HttpHandlerFn): Observable> => {
+ //const logger = inject(Logger);
+ //logger.log(`Request is on its way to ${req.url}`);
+ let data: any = {
+ withCredentials: true
+ }
+ const currentUser = Utils.getCurrentUser();//localStorage.getItem('currentUser')!;
+ // console.log('I am interceptor debug for currentUser obj', currentUser);
+ if (currentUser && currentUser.token && currentUser.token != "") {
+ // console.log('I am interceptor add authorization header with jwt token');
+
+ data.setHeaders = {
+ Authorization: `Bearer ${currentUser.token}`
+ };
+ }
+ request = request.clone(data);
+ return next(request);
+}
+
+////////////////
+/*
+providers: [provideHttpClient(withInterceptors([loggerInterceptor]))]
+*/
\ No newline at end of file
diff --git a/U22/src/app/shares/lookup.service.ts b/U22/src/app/shares/lookup.service.ts
new file mode 100644
index 0000000..fbb5ee0
--- /dev/null
+++ b/U22/src/app/shares/lookup.service.ts
@@ -0,0 +1,25 @@
+
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { ConfigureUrl,Lookup,ResultModel } from '../models';
+import { AppSettingService } from '../shares';
+@Injectable({ providedIn: 'root' })
+export class LookupService {
+
+ constructor(private http: HttpClient,
+ private appSetting :AppSettingService
+ ) {}
+
+ loadConcessionType(): Observable> {
+
+ const url = this.appSetting.appSetting.baseUrl +"/"+ConfigureUrl.luConcessionTypeUrl;
+ return this.http.get>(url);
+ }
+
+ loadValidationPoint(): Observable> {
+ const url = this.appSetting.appSetting.baseUrl +"/"+ConfigureUrl.luValidationPointUrl;
+ return this.http.get>(url);
+ }
+
+}
diff --git a/U22/src/app/shares/utils.ts b/U22/src/app/shares/utils.ts
new file mode 100644
index 0000000..ba507ce
--- /dev/null
+++ b/U22/src/app/shares/utils.ts
@@ -0,0 +1,66 @@
+import { User, userRole } from "../models"
+
+export class Utils {
+ static getCurrentUser(): User {
+
+ let myUser = new User();
+ myUser.username = "";
+ const obj = sessionStorage.getItem('currentUser');
+ //const obj = localStorage.getItem('currentUser');
+ if (obj != undefined) {
+ let user = JSON.parse(obj);
+ myUser.firstName = user.firstName;
+ myUser.lastName = user.lastName;
+ myUser.role = user.role;
+ myUser.username = user.username;
+ myUser.email = user.email;
+ myUser.token = user.token;
+ myUser.validationPointId = user.validationPointId;
+ }
+ // console.log("[util] getcurrentUser",myUser);
+ return myUser;
+ }
+ static setLocalStore(user: User): void {
+ if (user && user.token) {
+ // store user details and jwt token in local storage to keep user logged in between page refreshes
+ // localStorage.setItem('currentUser', JSON.stringify(user));
+ sessionStorage.setItem('currentUser', JSON.stringify(user));
+ }
+ }
+
+ static getUserRole(user: User): string {
+ let ret: string;
+ if (user.role == userRole.Normal)
+ ret = "Normal";
+ else (user.role == userRole.Admin)
+ ret = "Admin";
+ return ret;
+ }
+ static getIsAuth(): boolean {
+ const user = this.getCurrentUser();
+ if (user.username != "") {
+ return true;
+ }
+ else
+ return false;
+ }
+
+ static getIsAdmin(): boolean {
+ const user = this.getCurrentUser();
+ let result = false;
+ // console.log("[util] get isAdmin", user);
+ if (user.username != "") {
+ // console.log("[util] get isAdmin username is not null", user);
+ if (user.role == userRole.Admin)
+ // console.log("[util] this user is admin", user);
+ result = user.role == userRole.Admin;
+ }
+ else
+ result = false;
+ return result;
+ }
+ static clearCurrentUser(): void {
+ sessionStorage.clear();
+ //localStorage.clear();
+ }
+}
\ No newline at end of file
diff --git a/U22/src/app/user-services/authentication.service.ts b/U22/src/app/user-services/authentication.service.ts
new file mode 100644
index 0000000..f0f0776
--- /dev/null
+++ b/U22/src/app/user-services/authentication.service.ts
@@ -0,0 +1,72 @@
+import { Injectable, Inject, Output, signal } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { ConfigureUrl, User } from '../models';
+import { Utils, AppSettingService } from '../shares';
+
+@Injectable({ providedIn: 'root' })
+export class AuthenticationService {
+
+ currentUser: string = '';
+ public authChange = signal(new User());
+ baseUrl = ''; // this.appSettingService.appSetting.baseUrl + "/"+ ConfigureUrl.loginApiUrl;
+ constructor(private http: HttpClient,
+ private appSetting: AppSettingService
+ ) {
+ // this default when load look for previous login information
+ // if no need then comment out downthere
+
+ const fname = this.getCurrentUser();
+ if (fname) {
+
+ this.authChange.set(fname);
+ }
+
+ }
+
+ login(username: string, password: string): Observable {
+
+ const url = this.appSetting.appSetting.baseUrl + "/" + ConfigureUrl.loginApiUrl;
+
+ return this.http.post(url, { username, password })
+ .pipe(map(resultModel => {
+ // login successful if there's a jwt token in the response
+ if (resultModel.statusCode == 1) {
+ const user = resultModel.data;
+ console.log("login result ", user);
+ Utils.setLocalStore(user);
+ this.currentUser = user.firstName + " " + user.lastName;
+ this.authChange.set(user);
+
+ }
+ return resultModel.statusCode;
+ }));
+ }
+
+ getCurrentUser(): User {
+ let userObj = new User();
+ let user = sessionStorage.getItem('currentUser');
+ if (user) {
+ userObj = JSON.parse(user);
+
+ // logged in so return true
+ }
+ return userObj;
+ }
+
+ isAuth(): boolean {
+ let val: boolean;
+ val = false;
+ if (sessionStorage.getItem('currentUser')) {
+ // logged in so return true
+ val = true;
+ }
+ return val;
+ }
+ logout() {
+ // remove user from local storage to log user out
+ sessionStorage.removeItem('currentUser');
+ this.authChange.set(new User());
+ }
+}
diff --git a/U22/src/app/user-services/index.js b/U22/src/app/user-services/index.js
new file mode 100644
index 0000000..e477703
--- /dev/null
+++ b/U22/src/app/user-services/index.js
@@ -0,0 +1,8 @@
+"use strict";
+function __export(m) {
+ for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./authentication.service"));
+__export(require("./user.service"));
+//# sourceMappingURL=index.js.map
\ No newline at end of file
diff --git a/U22/src/app/user-services/index.js.map b/U22/src/app/user-services/index.js.map
new file mode 100644
index 0000000..dd6e67c
--- /dev/null
+++ b/U22/src/app/user-services/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;;;AAAA,8CAAyC;AACzC,oCAA+B"}
\ No newline at end of file
diff --git a/U22/src/app/user-services/index.ts b/U22/src/app/user-services/index.ts
new file mode 100644
index 0000000..ac74d32
--- /dev/null
+++ b/U22/src/app/user-services/index.ts
@@ -0,0 +1,2 @@
+export * from './authentication.service';
+export * from './user.service';
diff --git a/U22/src/app/user-services/user.service.ts b/U22/src/app/user-services/user.service.ts
new file mode 100644
index 0000000..c92b379
--- /dev/null
+++ b/U22/src/app/user-services/user.service.ts
@@ -0,0 +1,19 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { User,ConfigureUrl } from '../models';
+
+@Injectable({ providedIn: 'root' })
+export class UserService {
+
+ constructor(private http: HttpClient,
+
+ ) {
+
+ }
+
+ // getAll() {
+ // return this.http.get(`${config.apiUrl}/users`);
+ // return this.http.get(`${ConfigureUrl.baseUrl}/${ConfigureUrl.getAllUrl}`);
+ // }
+}
diff --git a/U22/src/app/validationPoint/index.ts b/U22/src/app/validationPoint/index.ts
new file mode 100644
index 0000000..bbec327
--- /dev/null
+++ b/U22/src/app/validationPoint/index.ts
@@ -0,0 +1,4 @@
+export * from './validationpoint.component';
+export * from './validationpoint.edit.component';
+export * from './validationpoint.service';
+
diff --git a/U22/src/app/validationPoint/validationpoint.component.css b/U22/src/app/validationPoint/validationpoint.component.css
new file mode 100644
index 0000000..3db3368
--- /dev/null
+++ b/U22/src/app/validationPoint/validationpoint.component.css
@@ -0,0 +1,12 @@
+table {
+ width: 100%;
+}
+
+.mat-form-field {
+ font-size: 14px;
+ width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+ width: 35px;
+ padding-right: 2px;
+}
diff --git a/U22/src/app/validationPoint/validationpoint.component.html b/U22/src/app/validationPoint/validationpoint.component.html
new file mode 100644
index 0000000..3779479
--- /dev/null
+++ b/U22/src/app/validationPoint/validationpoint.component.html
@@ -0,0 +1,46 @@
+([]);
+ private subscription: Subscription = new Subscription();
+ displayedColumns: string[] = ['description', 'active', 'edit'];
+ msg = "[validationpoint.com]";
+
+ /*
+ private store: Store
+ */
+ constructor(
+ private validationPointService: ValidationPointService,
+ private messageService: MessageService,
+ private router: Router
+ ) {
+
+ }
+
+ //KeyboardEvent
+ applyFilter(event: Event) {
+ const filterValue = (event.target as HTMLInputElement).value;
+ // this.dataSource.filter = filterValue.trim().toLowerCase();
+ }
+
+ ngOnInit(): void {
+ this.subscription.add(
+ this.validationPointService.loadValidationpoints().subscribe(
+ {
+ next: result => {
+ // console.log(this.msg + "onInit", result);
+ this.dataSource.set(result.data);
+ }, error: e => {
+
+ console.log("error ", e);
+ }
+ }
+ )
+ );
+
+ /*
+ this.store.dispatch(validationActions.LoadValidationpoints());
+ this.store.pipe(select(validationSelector.getAllValidations)).subscribe(result => this.dataSource.data = result);
+ */
+ }
+
+
+ showEdit(item: ValidationPoint) {
+ // console.log(this.msg + "on row click", item);
+ this.router.navigate(['/validationpoint/' + item.id], { queryParams: { returnUrl: '/validationpoint' } });
+ }
+ deleteItem(id: number): void {
+ this.validationPointService.deleteValidationpoint(id)
+ .pipe(take(1))
+ .subscribe(result => {
+ console.log(this.msg + " deleteItem success", result);
+ let data = this.dataSource();
+ let index: number = data.findIndex(d => d.id === id);
+ // console.log(this.msg + "delete from datasource");
+ data.splice(index, 1)
+ this.dataSource.set(data);
+ },
+ error => {
+ const message = error || error.message;
+
+ }
+ );
+ }
+
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ }
+}
+
+
+
diff --git a/U22/src/app/validationPoint/validationpoint.edit.component.css b/U22/src/app/validationPoint/validationpoint.edit.component.css
new file mode 100644
index 0000000..3db3368
--- /dev/null
+++ b/U22/src/app/validationPoint/validationpoint.edit.component.css
@@ -0,0 +1,12 @@
+table {
+ width: 100%;
+}
+
+.mat-form-field {
+ font-size: 14px;
+ width: 100%;
+}
+td.mat-column-edit, .mat-column-delete {
+ width: 35px;
+ padding-right: 2px;
+}
diff --git a/U22/src/app/validationPoint/validationpoint.edit.component.html b/U22/src/app/validationPoint/validationpoint.edit.component.html
new file mode 100644
index 0000000..afd91ae
--- /dev/null
+++ b/U22/src/app/validationPoint/validationpoint.edit.component.html
@@ -0,0 +1,36 @@
+();
+ private formBuilder = inject(FormBuilder);
+ private validationPointService = inject(ValidationPointService);
+ private messageService = inject(MessageService);
+ private route = inject(ActivatedRoute);
+ private router = inject(Router);
+ validationpointForm = this.formBuilder.group({
+ id: [0], //Validators.required
+ description: ['', Validators.required],
+ display: [''], //Validators.required
+ active: [false], //Validators.required
+ });
+ constructor() { }
+ ngOnInit(): void {
+ this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+ const id = Number(this.route.snapshot.paramMap.get('id'));
+ // now load thing up
+ this._id = id;
+ //console.log(this.msg + " " + id );
+
+ this.subscription.add(this.validationpointForm.valueChanges.subscribe(x => this.isChange = false));
+ this.subscription.add(this.subChanged$.subscribe(x => this.isChange = x));
+ // console.log(this.msg + "ngOnInit load data id " + id );
+ if (id > 0) {
+ this.subscription.add(
+ this.validationPointService.loadValidationpointById(id).subscribe(x => {
+ this.assignValue(x.data)
+ },
+ error => {
+
+ console.log("error ", error);
+ }
+ ));
+ }
+ }
+
+ getEditText(): string {
+ if (this._id > 0)
+ return "Edit Validation Point";
+ else
+ return "New Validation Point";
+ }
+
+ // this for disable submit button
+ get isFieldsChange() {
+ const chan = this.isChange || !this.validationpointForm.valid; // this disable so need true valid = true not
+ //console.log(this.msg + 'is fields change', chan);
+ return chan;
+ }
+
+ assignValue(validationpoint: ValidationPoint): void {
+ this.validationpointForm.patchValue({
+ id: validationpoint.id,
+ description: validationpoint.description,
+ display: validationpoint.display,
+ active: validationpoint.active,
+ });
+ // disable use false//true for not disable.
+ this.subChanged$.next(true);
+ }
+
+ // convenience getter for easy access in form fields
+ get f() { return this.validationpointForm.controls; }
+
+ onSubmit(): void {
+ // if form valid then go save
+ //make sure
+ const okToSave = this.validationpointForm.valid;
+ if (okToSave) {
+ let validationpointValue = this.validationpointForm.value;
+ let validationpoint: ValidationPoint = {
+ id: validationpointValue.id ?? 0,
+ description: validationpointValue.description ?? '',
+ display: validationpointValue.display ?? '',
+ active: validationpointValue.active ?? false,
+ };
+
+ this.validationPointService.saveValidationpoint(validationpoint).subscribe(
+ {
+ next: x => {
+ if (x.statusCode >= 1) {
+ this.messageService.add({ severity: 'success', summary: 'Success', detail: "Save is OK" });
+ this.router.navigate(['/home/validationpoint']);
+ }
+ },
+ error: e => {
+
+ console.log("error ", e);
+ }
+ }
+ );
+ }
+
+ }
+ goBack(): void {
+ this.router.navigate([this.returnUrl]);
+ }
+ ngOnDestroy() {
+ this.subscription.unsubscribe();
+ }
+}
diff --git a/U22/src/app/validationPoint/validationpoint.service.ts b/U22/src/app/validationPoint/validationpoint.service.ts
new file mode 100644
index 0000000..311104a
--- /dev/null
+++ b/U22/src/app/validationPoint/validationpoint.service.ts
@@ -0,0 +1,44 @@
+
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { ValidationPoint,ResultModel ,ConfigureUrl} from '../models';
+import { AppSettingService } from '../shares';
+@Injectable({ providedIn: 'root' })
+export class ValidationPointService {
+
+ constructor(
+ private http: HttpClient,
+ private appSetting :AppSettingService
+ ) { }
+ loadValidationpoints(): Observable> {
+ let config = { headers : { 'Content-Type': 'application/json' } };
+ //const url = this.appUrl.baseUrl + "/" + this.appUrl.validationPoint;
+ const baseUrl = this.appSetting.appSetting.baseUrl+ "/"+ ConfigureUrl.validationPoint;
+ console.log("[validation service] loadValidtionpoints url is: " + baseUrl );
+ return this.http.get>(baseUrl);
+ }
+ loadValidationpointById(id:number): Observable> {
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.validationPoint;
+ let params = new HttpParams().set("id", ""+id);
+ let headers = new HttpHeaders().set('Content-Type', 'application/json');
+ let options = {
+ headers: headers,
+ params: params
+ };
+ //const url = this.appUrl.baseUrl + "/" + this.appUrl.validationPoint;
+ return this.http.get>(baseUrl + "/"+ id);
+ }
+ saveValidationpoint(jsData:ValidationPoint): Observable> { //insert Validationpoint
+ let config = { headers : { 'Content-Type': 'application/json' } };
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.validationPoint;
+ return this.http.post>(baseUrl, jsData, config);
+ }
+ deleteValidationpoint(Id:number): Observable>{
+ let config = { headers : { 'Content-Type': 'application/json' } };
+ const baseUrl = this.appSetting.appSetting.baseUrl + "/"+ ConfigureUrl.validationPoint;
+ //const url = this.appUrl.baseUrl + "/" + this.appUrl.validationPoint;
+ return this.http.delete> (baseUrl + "/" + Id);
+ }
+}
diff --git a/U22/src/index.html b/U22/src/index.html
new file mode 100644
index 0000000..28fa3db
--- /dev/null
+++ b/U22/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ Carparkvalidation
+ {
- return browser.get(browser.baseUrl) as Promise;
- }
-
- getTitleText(): Promise {
- return element(by.css('app-root .content span')).getText() as Promise;
- }
-}
diff --git a/UI/e2e/tsconfig.json b/UI/e2e/tsconfig.json
deleted file mode 100644
index 426058e..0000000
--- a/UI/e2e/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
- "extends": "../tsconfig.json",
- "compilerOptions": {
- "outDir": "../out-tsc/e2e",
- "module": "commonjs",
- "target": "es2018",
- "types": [
- "jasmine",
- "jasminewd2",
- "node"
- ]
- }
-}
Concession Validation
+ @if (isAdmin) { +
+
+ }
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/U22/src/app/concessionValidation/concessionvalidation.edit.component.ts b/U22/src/app/concessionValidation/concessionvalidation.edit.component.ts
new file mode 100644
index 0000000..545e2fb
--- /dev/null
+++ b/U22/src/app/concessionValidation/concessionvalidation.edit.component.ts
@@ -0,0 +1,296 @@
+import { Component, inject, OnDestroy, OnInit, signal, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormGroup, Validators, ReactiveFormsModule, FormBuilder, FormControl } from '@angular/forms';
+
+import { ConcessionValidation, Lookup, ResultModel } from '../models';
+import { Subject, Subscription } from 'rxjs';
+import { LookupService } from '../shares';
+import { ConcessionValidationService } from './concessionvalidation.service';
+import { Utils } from '../shares';
+
+import moment from 'moment';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { CheckboxModule } from 'primeng/checkbox';
+import { DatePickerModule } from 'primeng/datepicker';
+import { SelectModule } from 'primeng/select';
+
+@Component({
+ templateUrl: 'concessionvalidation.edit.component.html',
+ selector: 'concessionvalidation-edit',
+ imports: [ButtonModule, InputTextModule, CheckboxModule, DatePickerModule,
+ SelectModule, ReactiveFormsModule],
+ styleUrls: ['concessionvalidation.edit.component.css']
+})
+export class ConcessionValidationEditComponent implements OnInit, OnDestroy {
+ returnUrl = "";
+ private formBuilder = inject(FormBuilder);
+ private lookupService = inject(LookupService);
+ private concessionValidationService = inject(ConcessionValidationService);
+ private router = inject(Router);
+
+ private confirmationService = inject(ConfirmationService);
+ private messageService = inject(MessageService);
+ private route = inject(ActivatedRoute);
+ msg = "[concessionvalidation edit Component] "
+ isChange = true; // disable use false//true for not disable. make sure it true is disable button.
+ subChanged$ = new Subject
+ {{getEditText()}}
+
+
+
+
+
+
+
+
+ Description
+ Display
+ Active
+ Edit
+
+
+
+
+ {{ item.description }}
+ {{item.display}}
+
+ @if(item.active == true) {
+
+ }
+ @else {
+
+ }
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/U22/src/app/concessiontype/concessiontype.component.ts b/U22/src/app/concessiontype/concessiontype.component.ts
new file mode 100644
index 0000000..47c7067
--- /dev/null
+++ b/U22/src/app/concessiontype/concessiontype.component.ts
@@ -0,0 +1,99 @@
+import { Component, OnInit, OnDestroy, signal, inject } from '@angular/core';
+import { ConcessionTypeService } from './concessiontype.service';
+import { ConcessionType } from '../models';
+
+
+import { take } from 'rxjs/operators';
+import { Router, RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { Pencil } from '@primeicons/angular/pencil';
+import { TableModule } from 'primeng/table';
+import { Check } from '@primeicons/angular/check';
+import { Times } from '@primeicons/angular/times';
+
+@Component({
+ selector: 'concessiontype-list',
+ templateUrl: './concessiontype.component.html',
+ imports: [ButtonModule, TableModule, RouterModule, Pencil, Check, Times],
+ styleUrls: ['./concessiontype.component.css']
+})
+export class ConcessionTypeComponent implements OnInit, OnDestroy {
+ private concessionTypeService = inject(ConcessionTypeService);
+ private messageService = inject(MessageService);
+ private router = inject(Router);
+ dataSource = signalConcession Type
+ + + +
+
\ No newline at end of file
diff --git a/U22/src/app/concessiontype/concessiontype.edit.component.ts b/U22/src/app/concessiontype/concessiontype.edit.component.ts
new file mode 100644
index 0000000..346efc6
--- /dev/null
+++ b/U22/src/app/concessiontype/concessiontype.edit.component.ts
@@ -0,0 +1,122 @@
+import { Component, inject, OnInit, ViewChild } from '@angular/core';
+import { UntypedFormBuilder, FormGroup, Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+
+import { ConcessionType } from '../models';
+import { Subject, pipe, Subscription } from 'rxjs';
+import { ConcessionTypeService } from './concessiontype.service';
+import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from 'primeng/checkbox';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+ templateUrl: 'concessiontype.edit.component.html',
+ selector: 'concessiontype-edit',
+ imports: [ButtonModule, CheckboxModule, ReactiveFormsModule, InputTextModule],
+ styleUrls: ['concessiontype.edit.component.css']
+})
+export class ConcessiontypeEditComponent implements OnInit {
+ private formBuilder = inject(FormBuilder);
+ private messageService = inject(MessageService);
+ private concessionTypeService = inject(ConcessionTypeService);
+ private route = inject(ActivatedRoute);
+ private router = inject(Router);
+ returnUrl = '';
+ _id = -1;
+ msg = "[Concession type edit Component] ";
+ isChange = true; // disable use false//true for not disable. make sure it true is disable button.
+ private subscription: Subscription = new Subscription();
+ subChanged$ = new Subject {{getEditText()}}
+
+
+
+
\ No newline at end of file
diff --git a/U22/src/app/concessionvalidationreport/concessionvalidationreport.component.ts b/U22/src/app/concessionvalidationreport/concessionvalidationreport.component.ts
new file mode 100644
index 0000000..5c4edc2
--- /dev/null
+++ b/U22/src/app/concessionvalidationreport/concessionvalidationreport.component.ts
@@ -0,0 +1,96 @@
+import { Component, inject, OnInit } from '@angular/core';
+import { ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
+import moment from 'moment';
+import { HttpUtility, CommonUtilities } from '../shares';
+import { catchError, finalize } from 'rxjs/operators';
+import { EMPTY } from 'rxjs';
+
+import { HttpResponse } from '@angular/common/http';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { DatePickerModule } from 'primeng/datepicker';
+
+@Component({
+ selector: 'app-concessionvalidation-report',
+ templateUrl: './concessionvalidationreport.component.html',
+ imports: [ReactiveFormsModule, ButtonModule, DatePickerModule],
+ styleUrls: ['./concessionvalidationreport.component.css']
+})
+export class ConcessionvalidationReportComponent implements OnInit {
+ private formBuilder = inject(UntypedFormBuilder);
+ private http = inject(HttpUtility);
+
+ private route = inject(ActivatedRoute);
+ private messageService = inject(MessageService);
+ msg = "[concessionvalidation] ";
+ returnUrl = "";
+ concessionvalidationreportForm = this.formBuilder.group({
+
+ fromDate: [new Date()], //Validators.required
+ toDate: [new Date(), Validators.required],
+
+ });
+
+ constructor(
+
+ ) {
+
+ }
+
+ onDownload(): void {
+
+ const constDate = this.concessionvalidationreportForm.value;
+ const fromDate = moment(constDate.fromDate).format("YYYY-MM-DD");
+ const toDate = moment(constDate.toDate).format("YYYY-MM-DD");
+ console.log(this.msg + "click on download", fromDate);
+
+ //GetReportFile
+ this.http.getFileResponse(`api/v1/ConcessionValidation/GetReportFile?fromDate=${fromDate}&toDate=${toDate}`).pipe(
+ catchError(err => {
+
+ return EMPTY;
+ }),
+ finalize(() => {
+
+ this.messageService.add({ severity: 'success', summary: 'Success', detail: "download completed ok to view now" });
+ })).subscribe((response: HttpResponseConcession Validation Report
+ +
+
+
\ No newline at end of file
diff --git a/U22/src/app/login/login.component.ts b/U22/src/app/login/login.component.ts
new file mode 100644
index 0000000..ef985cb
--- /dev/null
+++ b/U22/src/app/login/login.component.ts
@@ -0,0 +1,82 @@
+import { Component, inject, OnInit, signal } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { Validators, FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { first } from 'rxjs/operators';
+
+import { AuthenticationService } from '../user-services';
+import { AppSettingService } from '../shares';
+import { CardModule } from 'primeng/card';
+import { InputTextModule } from 'primeng/inputtext';
+import { CommonModule } from '@angular/common';
+import { ButtonModule } from 'primeng/button';
+@Component({
+ templateUrl: './login.component.html',
+ styleUrls: ['./login.component.css'],
+ imports: [CardModule, ButtonModule, InputTextModule, ReactiveFormsModule, CommonModule],
+ selector: 'login'
+})
+export class LoginComponent implements OnInit {
+ private formBuilder = inject(FormBuilder);
+ private route = inject(ActivatedRoute);
+ private router = inject(Router);
+ private appSetting = inject(AppSettingService);
+ private authenticationService = inject(AuthenticationService);
+ loginForm = this.formBuilder.group({
+ username: ['', Validators.required],
+ password: ['', Validators.required]
+ });
+
+ loading = signal(false);
+
+ adminEmail = "";
+ // get return url from route parameters or default to '/'
+ returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/concessionvalidation';
+ error = '';
+
+ constructor(
+ ) {
+ this.adminEmail = this.appSetting.appSetting.adminEmail;
+ }
+
+ ngOnInit() {
+
+ // reset login status
+ this.authenticationService.logout();
+
+
+ }
+
+ // convenience getter for easy access to form fields
+ get f() { return this.loginForm.controls; }
+
+ onSubmit() {
+
+
+ // stop here if form is invalid
+ if (this.loginForm.invalid) {
+ return;
+ }
+
+ this.loading.set(true);
+ this.authenticationService.login(this.f.username.value ?? '', this.f.password.value ?? '')
+ .pipe(first())
+ .subscribe({
+ next: data => {
+ this.loading.set(false);
+ console.log("login result ", data);
+ if (data == 1)
+ this.router.navigate([this.returnUrl]);
+ else {
+ this.loginForm.patchValue({ password: '' });
+ alert("Invalid Username or Password. Please try again.");
+
+ }
+ },
+ error: er => {
+ console.log("error in login", er);
+ this.error = er.message;
+ this.loading.set(false);
+ }
+ });
+ }
+}
diff --git a/U22/src/app/models/adminuser.ts b/U22/src/app/models/adminuser.ts
new file mode 100644
index 0000000..c99fa8b
--- /dev/null
+++ b/U22/src/app/models/adminuser.ts
@@ -0,0 +1,21 @@
+export interface AdminUser {
+ id: number,
+ stafflinkNo: string,
+ name: string,
+ addedBy: string,
+ addedOn: Date,
+ active: boolean,
+ roleType: number,
+ validationPointId: number,
+}
+
+export interface AdminUserView {
+ id: number,
+ stafflinkNo: string,
+ name: string,
+ addedBy: string,
+ addedOn: Date,
+ active: boolean,
+ roleType: string,
+ validationPoint: string,
+}
\ No newline at end of file
diff --git a/U22/src/app/models/concessiontype.ts b/U22/src/app/models/concessiontype.ts
new file mode 100644
index 0000000..247ef14
--- /dev/null
+++ b/U22/src/app/models/concessiontype.ts
@@ -0,0 +1,6 @@
+export interface ConcessionType {
+ id: number,
+ description: string,
+ display: string,
+ active: boolean,
+}
diff --git a/U22/src/app/models/concessionvalidation.ts b/U22/src/app/models/concessionvalidation.ts
new file mode 100644
index 0000000..6bf2089
--- /dev/null
+++ b/U22/src/app/models/concessionvalidation.ts
@@ -0,0 +1,14 @@
+export interface ConcessionValidation {
+ id: number,
+ validateDate: Date,
+ concessionCard: string,
+ concessionHolder: string,
+ concessionExpiry: boolean,
+ concessionTypeId: number,
+ stafflinkNo: string,
+ staffFirstName:string,
+ staffLastName:string,
+ staffEmail:string,
+ validationPointId: number,
+ active: boolean,
+}
diff --git a/U22/src/app/models/configureUrl.ts b/U22/src/app/models/configureUrl.ts
new file mode 100644
index 0000000..da09464
--- /dev/null
+++ b/U22/src/app/models/configureUrl.ts
@@ -0,0 +1,17 @@
+export enum ConfigureUrl
+{
+ //baseUrl = "http://localhost:61744",
+
+ authenticateUrl = "api/v1/Users/Authenticate", //no use anymore
+ loginADUrl = "api/v1/Users/LoginAD",
+ loginApiUrl = "api/v1/Users/LoginApiAD",
+ validationPoint = "api/v1/ValidationPoint", //no "/" at the front
+ adminUserUrl = "api/v1/AdminUser",
+ concessionValidationUrl = "api/v1/ConcessionValidation",
+ concessionValidationByIdUrl = "api/v1/ConcessionValidation/ConcessionValidationByStaff",
+ CheckConcessionValidationByStaffUrl = "api/v1/ConcessionValidation/CheckConcessionValidationByStaff",
+ concessionTypeUrl = "api/v1/ConcessionType",
+ userByStaffIdUrl = "api/v1/Users/SearchApiStaff",
+ luConcessionTypeUrl = "api/v1/LookupCode/ConcessionTypes",
+ luValidationPointUrl = "api/v1/LookupCode/ValidationPoints",
+}
\ No newline at end of file
diff --git a/U22/src/app/models/enum.ts b/U22/src/app/models/enum.ts
new file mode 100644
index 0000000..126dd1c
--- /dev/null
+++ b/U22/src/app/models/enum.ts
@@ -0,0 +1,44 @@
+export const MIMEType = {
+ png: 'image/png',
+ jpg: 'image/jpg',
+ jpeg: 'image/jpeg',
+ gif: 'image/gif',
+ txt: 'text/plain',
+ pdf: 'application/pdf'
+};
+
+
+//for status of object 0 no change, 1 changed , -1 is deleted.
+export enum mState {
+ Delete = -1,
+ NoChange = 0,
+ Modified = 1,
+ New =2,
+};
+
+export enum PickListType {
+ Ok =0,
+ BodyPart = 16, // Body Part
+ Location = 17,
+ Equipment = 18,
+ LocationType = 19,
+ CheckList = 20,
+ Company = 21,
+ NonConformance = 22,
+ Occupation = 23,
+ IncidentType = 24,
+ InvestigationAgency = 25,
+ OutCome = 26,
+ Visibility = 27,
+ Surface = 28,
+ Lighting = 29,
+ Weather = 30,
+ CauseOfPrimaryInjury = 31,
+ ContributingFactor = 32,
+ HazardControlType = 33,
+}
+
+export enum userRole {
+ Normal = 1,
+ Admin = 2,
+};
diff --git a/U22/src/app/models/index.ts b/U22/src/app/models/index.ts
new file mode 100644
index 0000000..3b5f555
--- /dev/null
+++ b/U22/src/app/models/index.ts
@@ -0,0 +1,9 @@
+export * from './user';
+export * from './validationpoint';
+export * from './enum';
+export * from './resultmodel';
+export * from './adminuser';
+export * from './configureUrl';
+export * from './concessionvalidation';
+export * from './lookup';
+export * from './concessiontype';
\ No newline at end of file
diff --git a/U22/src/app/models/lookup.ts b/U22/src/app/models/lookup.ts
new file mode 100644
index 0000000..0fe80ed
--- /dev/null
+++ b/U22/src/app/models/lookup.ts
@@ -0,0 +1,7 @@
+
+export interface Lookup {
+ id: number;
+ categoryId: number;
+ description: string;
+};
+
diff --git a/U22/src/app/models/lookupcode.ts b/U22/src/app/models/lookupcode.ts
new file mode 100644
index 0000000..6b51e42
--- /dev/null
+++ b/U22/src/app/models/lookupcode.ts
@@ -0,0 +1,44 @@
+export interface treeLookupCode {
+ id: number;
+ code: string;
+ description: string;
+ canCheck: number; // 0 no 1 is yes
+ hasChild: number; // 0 no 1 is yes
+}
+
+export interface LookupCode {
+ id: number;
+ code: string;
+ description: string;
+}
+
+export interface LookupEnumContainer {
+ enumId: number;
+ list: LookupCode[];
+}
+
+export interface BusinessUnitLookup {
+ id: number;
+ abbreviation: string;
+ levelID: number;
+ name: string;
+ parentID: number;
+}
+
+export interface LookupBUData {
+ allowMultiSelect: boolean;
+ pickListTitle: string;
+ lookupList: BusinessUnitLookup[];
+}
+
+
+export interface LookupData {
+ allowMultiSelect:boolean;
+ pickListTitle: string;
+ lookupList: LookupCode[];
+};
+
+export interface LookupCodeContainer {
+ list: LookupCode[];
+ totalPages: number;
+}
diff --git a/U22/src/app/models/pagequery.ts b/U22/src/app/models/pagequery.ts
new file mode 100644
index 0000000..f14dbf6
--- /dev/null
+++ b/U22/src/app/models/pagequery.ts
@@ -0,0 +1,7 @@
+
+export interface PageQuery {
+ pageIndex: number;
+ pageSize: number;
+ search: string;
+};
+
diff --git a/U22/src/app/models/person.ts b/U22/src/app/models/person.ts
new file mode 100644
index 0000000..5697d39
--- /dev/null
+++ b/U22/src/app/models/person.ts
@@ -0,0 +1,80 @@
+import { Lookup } from './lookup';
+
+export interface SharePersonContainer {
+ list: PersonLite[];
+ totalPages: number;
+}
+export interface PersonLite {
+ id: number;
+ firstName: string;
+ surname: string;
+ referenceNo: string;
+ payrollNo: number;
+ email: string;
+ phoneNo: string;
+}
+
+export interface PersonLookup {
+ categorys: Lookup[];
+ title: Lookup[]; ///for source
+ positions: Lookup[]; ///for source
+ companys: Lookup[];
+ personStatus: Lookup[];
+ englishLevel: Lookup[];
+ yesNoPickList: Lookup[];
+ language: Lookup[];
+ residence: Lookup[];
+ nationality: Lookup[];
+ gender: Lookup[];
+
+}
+
+export interface PersonContainer {
+ person: Person;
+
+}
+
+export class Person {
+ id: number =0;
+ titleId: number =0;
+ firstName: string = '';
+ surname: string = '';
+ referenceNo: string = '';
+ workNo: string = '';
+ email: string = '';
+ categoryId: number = 0;
+ statusId: number = 0;
+ statusDate: string = '';
+ businessUnitId: number = 0;
+ businessUnitDesc: string = '';
+}
+
+export interface PersonDetail {
+ street: string;
+ postCode: string;
+ suburb: string;
+ state: string;
+ country: string;
+ home: string;
+ fax: string;
+ mobile: string;
+ work: string;
+ email: string;
+
+ mailStreetPostCode: string;
+ mailPostCode: string;
+ mailSuburb: string;
+ mailState: string;
+ mailCountry: string;
+
+ dateOfBirth: string;
+ genderId: number;
+ nationalityId: number;
+ residenceId: number;
+ englishLevelId: number;
+ interpretRequired: number;
+
+ languageSpokenId: string;
+ driverLicenceNo: string;
+ expiryDate: string;
+}
diff --git a/U22/src/app/models/picklist.ts b/U22/src/app/models/picklist.ts
new file mode 100644
index 0000000..c14b719
--- /dev/null
+++ b/U22/src/app/models/picklist.ts
@@ -0,0 +1,45 @@
+import { BehaviorSubject } from 'rxjs';
+import { treeLookupCode } from './lookupcode';
+
+enum EnumLookup {
+ BodyPart = 16,
+ Location = 17,
+ Equipment = 18,
+ LocationType = 19,
+ CheckList = 20
+}
+
+export class DataNode {
+ loaded: boolean = false;
+ name: string ='';
+ id: number = 0;
+ children: DataNode[] =[];
+
+}
+
+export class UIDataNode {
+ allowMultiSelect: boolean = false;
+ pickListTitle: string = '';
+ enumPickType: number = 0;
+ children: treeLookupCode[] = [];
+}
+
+/** Nested node */
+export class DataNode$ {
+ childrenChange = new BehaviorSubject
+
+
\ No newline at end of file
diff --git a/U22/src/app/nav-toolbar/nav-toolbar.component.ts b/U22/src/app/nav-toolbar/nav-toolbar.component.ts
new file mode 100644
index 0000000..5289c19
--- /dev/null
+++ b/U22/src/app/nav-toolbar/nav-toolbar.component.ts
@@ -0,0 +1,59 @@
+import { AuthenticationService } from '../user-services';
+import { Subscription } from 'rxjs'
+import { Component, EventEmitter, Output, OnInit, OnDestroy, inject, signal } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { Utils } from '../shares';
+import { AngleDown } from '@primeicons/angular/angle-down';
+import { SidebarModule } from 'primeng/sidebar';
+
+@Component({
+ selector: 'app-nav-toolbar',
+ imports: [RouterModule, AngleDown, SidebarModule],
+ templateUrl: './nav-toolbar.component.html',
+ styleUrls: ['./nav-toolbar.component.css']
+})
+export class NavToolarComponent implements OnInit, OnDestroy {
+ isExpanded = false;
+ isAuth = signal(false);
+ isAdmin = signal(false);
+ currentUserName = "";
+ authSubscription: Subscription = new Subscription;
+ @Output() toggleEvent: EventEmitter
+ 
+
+
+
+
+
+
+ {{currentUserName}}
+
+
+
+
+
+
+
+ Description
+ Display
+ Active
+ Edit
+
+
+
+
+ {{ item.description }}
+ {{item.display}}
+
+ @if(item.active == true) {
+
+ }
+ @else {
+
+ }
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/U22/src/app/validationPoint/validationpoint.component.ts b/U22/src/app/validationPoint/validationpoint.component.ts
new file mode 100644
index 0000000..d59aaa3
--- /dev/null
+++ b/U22/src/app/validationPoint/validationpoint.component.ts
@@ -0,0 +1,95 @@
+import { Component, Inject, OnInit, ViewChild, AfterViewInit, OnDestroy, signal } from '@angular/core';
+import { ValidationPointService } from './validationpoint.service';
+import { ValidationPoint } from '../models';
+import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { Pencil } from '@primeicons/angular/pencil';
+import { TableModule } from 'primeng/table';
+import { Check } from '@primeicons/angular/check';
+import { Times } from '@primeicons/angular/times';
+
+
+import { take } from 'rxjs/operators';
+import { Router, RouterModule } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'validationpoint-list',
+ templateUrl: './validationpoint.component.html',
+ imports: [ButtonModule, TableModule, Times, Check, Pencil, RouterModule],
+ styleUrls: ['./validationpoint.component.css']
+})
+export class ValidationPointComponent implements OnInit, OnDestroy {
+ dataSource = signalValidation Point
+ + + + + +
+
\ No newline at end of file
diff --git a/U22/src/app/validationPoint/validationpoint.edit.component.ts b/U22/src/app/validationPoint/validationpoint.edit.component.ts
new file mode 100644
index 0000000..eae1e9e
--- /dev/null
+++ b/U22/src/app/validationPoint/validationpoint.edit.component.ts
@@ -0,0 +1,125 @@
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { Router, ActivatedRoute, Route } from '@angular/router';
+import { UntypedFormBuilder, FormGroup, Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { Subject, pipe, Subscription } from 'rxjs';
+
+import { ValidationPoint } from '../models';
+import { ValidationPointService } from '.';
+import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from 'primeng/checkbox';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+ templateUrl: 'validationpoint.edit.component.html',
+ selector: 'validationpoint-edit',
+ styleUrls: ['validationpoint.edit.component.css'],
+ imports: [ButtonModule, ReactiveFormsModule, CheckboxModule, InputTextModule]
+})
+export class ValidationpointEditComponent implements OnInit, OnDestroy {
+ returnUrl = '';
+ msg = "[ValidationPoint Edit]";
+ _id: number = -1;
+ private subscription: Subscription = new Subscription();
+ isChange = true; // disable use false//true for not disable. make sure it true is disable button.
+ subChanged$ = new Subject
+ {{getEditText()}}
+
+
+
+