{{ description || null }}
@@ -33,14 +28,8 @@ import { AppConfigService } from '@service/appconfigservice';-
-
-
`,
standalone: true,
- imports: [RouterOutlet, AppFooterComponent, CommonModule, AppNewsComponent, AppMenuComponent, AppTopBarComponent],
+ imports: [RouterOutlet, AppFooterComponent, CommonModule, AppNewsComponent, AppMenuComponent, AppTopBarComponent]
})
export class AppMainComponent {
configService: AppConfigService = inject(AppConfigService);
- config: PrimeNGConfig = inject(PrimeNGConfig);
+ config: PrimeNG = inject(PrimeNG);
get isNewsActive(): boolean {
return this.configService.state.newsActive;
@@ -51,7 +51,7 @@ export class AppMainComponent {
get containerClass() {
return {
- 'layout-news-active': this.isNewsActive,
+ 'layout-news-active': this.isNewsActive
// 'p-ripple-disabled': this.isRippleDisabled,
};
}
diff --git a/src/app/showcase/layout/configurator/app.configurator.component.ts b/apps/showcase/components/layout/configurator/app.configurator.component.ts
similarity index 79%
rename from src/app/showcase/layout/configurator/app.configurator.component.ts
rename to apps/showcase/components/layout/configurator/app.configurator.component.ts
index 0e1decdb821..dbf9ffdfb67 100644
--- a/src/app/showcase/layout/configurator/app.configurator.component.ts
+++ b/apps/showcase/components/layout/configurator/app.configurator.component.ts
@@ -1,24 +1,24 @@
+import { AppConfigService } from '@/service/appconfigservice';
import { CommonModule } from '@angular/common';
import { Component, computed, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
-import { AppConfigService } from '@service/appconfigservice';
-import { PrimeNGConfig } from 'primeng/api';
+import { $t, updatePreset, updateSurfacePalette } from '@primeng/themes';
+import Aura from '@primeng/themes/aura';
+import Lara from '@primeng/themes/lara';
+import Material from '@primeng/themes/material';
+import Nora from '@primeng/themes/nora';
import { ButtonModule } from 'primeng/button';
+import { PrimeNG } from 'primeng/config';
import { InputSwitchModule } from 'primeng/inputswitch';
import { RadioButtonModule } from 'primeng/radiobutton';
import { SelectButton } from 'primeng/selectbutton';
-import { $t, updatePreset, updateSurfacePalette } from 'primeng/themes';
-import Aura from 'primeng/themes/aura';
-import Lara from 'primeng/themes/lara';
-import Material from 'primeng/themes/material';
-import Nora from 'primeng/themes/nora';
import { ToggleSwitchModule } from 'primeng/toggleswitch';
const presets = {
Aura,
Material,
Lara,
- Nora,
+ Nora
};
@Component({
@@ -30,15 +30,15 @@ const presets = {
Primary
@for (primaryColor of primaryColors(); track primaryColor) { - + > }@@ -47,28 +47,22 @@ const presets = { Surface@for (surface of surfaces; track surface) { - + > }Presets -
+ Ripple @@ -77,9 +71,9 @@ const presets = {`, host: { - class: 'config-panel hidden', + class: 'config-panel hidden' }, - imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButton, ToggleSwitchModule], + imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButton, ToggleSwitchModule] }) export class AppConfiguratorComponent { get ripple() { @@ -90,9 +84,7 @@ export class AppConfiguratorComponent { this.config.ripple.set(value); } - selectedPreset: string = 'Aura'; - - config: PrimeNGConfig = inject(PrimeNGConfig); + config: PrimeNG = inject(PrimeNG); configService: AppConfigService = inject(AppConfigService); @@ -113,8 +105,8 @@ export class AppConfiguratorComponent { 700: '#334155', 800: '#1e293b', 900: '#0f172a', - 950: '#020617', - }, + 950: '#020617' + } }, { name: 'gray', @@ -130,8 +122,8 @@ export class AppConfiguratorComponent { 700: '#374151', 800: '#1f2937', 900: '#111827', - 950: '#030712', - }, + 950: '#030712' + } }, { name: 'zinc', @@ -147,8 +139,8 @@ export class AppConfiguratorComponent { 700: '#3f3f46', 800: '#27272a', 900: '#18181b', - 950: '#09090b', - }, + 950: '#09090b' + } }, { name: 'neutral', @@ -164,8 +156,8 @@ export class AppConfiguratorComponent { 700: '#404040', 800: '#262626', 900: '#171717', - 950: '#0a0a0a', - }, + 950: '#0a0a0a' + } }, { name: 'stone', @@ -181,8 +173,8 @@ export class AppConfiguratorComponent { 700: '#44403c', 800: '#292524', 900: '#1c1917', - 950: '#0c0a09', - }, + 950: '#0c0a09' + } }, { name: 'soho', @@ -198,8 +190,8 @@ export class AppConfiguratorComponent { 700: '#616268', 800: '#4a4b52', 900: '#34343d', - 950: '#1d1e27', - }, + 950: '#1d1e27' + } }, { name: 'viva', @@ -215,8 +207,8 @@ export class AppConfiguratorComponent { 700: '#565a5b', 800: '#3e4244', 900: '#262b2c', - 950: '#0e1315', - }, + 950: '#0e1315' + } }, { name: 'ocean', @@ -232,9 +224,9 @@ export class AppConfiguratorComponent { 700: '#415B61', 800: '#29444E', 900: '#183240', - 950: '#0c1920', - }, - }, + 950: '#0c1920' + } + } ]; selectedPrimaryColor = computed(() => { @@ -243,32 +235,17 @@ export class AppConfiguratorComponent { selectedSurfaceColor = computed(() => this.configService.appState().surface); + selectedPreset = computed(() => this.configService.appState().preset); + primaryColors = computed(() => { const presetPalette = presets[this.configService.appState().preset].primitive; - const colors = [ - 'emerald', - 'green', - 'lime', - 'orange', - 'amber', - 'yellow', - 'teal', - 'cyan', - 'sky', - 'blue', - 'indigo', - 'violet', - 'purple', - 'fuchsia', - 'pink', - 'rose', - ]; + const colors = ['emerald', 'green', 'lime', 'orange', 'amber', 'yellow', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']; const palettes = [{ name: 'noir', palette: {} }]; colors.forEach((color) => { palettes.push({ name: color, - palette: presetPalette[color], + palette: presetPalette[color] }); }); @@ -292,7 +269,7 @@ export class AppConfiguratorComponent { 700: '{surface.700}', 800: '{surface.800}', 900: '{surface.900}', - 950: '{surface.950}', + 950: '{surface.950}' }, colorScheme: { light: { @@ -300,31 +277,31 @@ export class AppConfiguratorComponent { color: '{primary.950}', contrastColor: '#ffffff', hoverColor: '{primary.800}', - activeColor: '{primary.700}', + activeColor: '{primary.700}' }, highlight: { background: '{primary.950}', focusBackground: '{primary.700}', color: '#ffffff', - focusColor: '#ffffff', - }, + focusColor: '#ffffff' + } }, dark: { primary: { color: '{primary.50}', contrastColor: '{primary.950}', hoverColor: '{primary.200}', - activeColor: '{primary.300}', + activeColor: '{primary.300}' }, highlight: { background: '{primary.50}', focusBackground: '{primary.300}', color: '{primary.950}', - focusColor: '{primary.950}', - }, - }, - }, - }, + focusColor: '{primary.950}' + } + } + } + } }; } else { if (this.configService.appState().preset === 'Nora') { @@ -337,31 +314,31 @@ export class AppConfiguratorComponent { color: '{primary.600}', contrastColor: '#ffffff', hoverColor: '{primary.700}', - activeColor: '{primary.800}', + activeColor: '{primary.800}' }, highlight: { background: '{primary.600}', focusBackground: '{primary.700}', color: '#ffffff', - focusColor: '#ffffff', - }, + focusColor: '#ffffff' + } }, dark: { primary: { color: '{primary.500}', contrastColor: '{surface.900}', hoverColor: '{primary.400}', - activeColor: '{primary.300}', + activeColor: '{primary.300}' }, highlight: { background: '{primary.500}', focusBackground: '{primary.400}', color: '{surface.900}', - focusColor: '{surface.900}', - }, - }, - }, - }, + focusColor: '{surface.900}' + } + } + } + } }; } else if (this.configService.appState().preset === 'Material') { return { @@ -373,31 +350,31 @@ export class AppConfiguratorComponent { color: '{primary.500}', contrastColor: '#ffffff', hoverColor: '{primary.400}', - activeColor: '{primary.300}', + activeColor: '{primary.300}' }, highlight: { background: 'color-mix(in srgb, {primary.color}, transparent 88%)', focusBackground: 'color-mix(in srgb, {primary.color}, transparent 76%)', color: '{primary.700}', - focusColor: '{primary.800}', - }, + focusColor: '{primary.800}' + } }, dark: { primary: { color: '{primary.400}', contrastColor: '{surface.900}', hoverColor: '{primary.300}', - activeColor: '{primary.200}', + 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)', - }, - }, - }, - }, + focusColor: 'rgba(255,255,255,.87)' + } + } + } + } }; } else { return { @@ -409,44 +386,45 @@ export class AppConfiguratorComponent { color: '{primary.500}', contrastColor: '#ffffff', hoverColor: '{primary.600}', - activeColor: '{primary.700}', + activeColor: '{primary.700}' }, highlight: { background: '{primary.50}', focusBackground: '{primary.100}', color: '{primary.700}', - focusColor: '{primary.800}', - }, + focusColor: '{primary.800}' + } }, dark: { primary: { color: '{primary.400}', contrastColor: '{surface.900}', hoverColor: '{primary.300}', - activeColor: '{primary.200}', + 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)', - }, - }, - }, - }, + focusColor: 'rgba(255,255,255,.87)' + } + } + } + } }; } } } - updateColors(type: string, color: any) { + updateColors(event: any, type: string, color: any) { if (type === 'primary') { this.configService.appState.update((state) => ({ ...state, primary: color.name })); } else if (type === 'surface') { this.configService.appState.update((state) => ({ ...state, surface: color.name })); } - this.applyTheme(type, color); + + event.stopPropagation(); } applyTheme(type: string, color: any) { diff --git a/src/app/showcase/layout/footer/app.footer.component.ts b/apps/showcase/components/layout/footer/app.footer.component.ts similarity index 98% rename from src/app/showcase/layout/footer/app.footer.component.ts rename to apps/showcase/components/layout/footer/app.footer.component.ts index 4604417e09f..e1ea5035de6 100644 --- a/src/app/showcase/layout/footer/app.footer.component.ts +++ b/apps/showcase/components/layout/footer/app.footer.component.ts @@ -10,7 +10,7 @@ import { Component } from '@angular/core'; PrimeTek - `, + ` }) export class AppFooterComponent { // eslint-disable-next-line @typescript-eslint/no-var-requires diff --git a/src/app/showcase/layout/menu/app.menu.component.ts b/apps/showcase/components/layout/menu/app.menu.component.ts similarity index 81% rename from src/app/showcase/layout/menu/app.menu.component.ts rename to apps/showcase/components/layout/menu/app.menu.component.ts index c3834168b96..9312cb4ab0c 100644 --- a/src/app/showcase/layout/menu/app.menu.component.ts +++ b/apps/showcase/components/layout/menu/app.menu.component.ts @@ -1,3 +1,5 @@ +import { default as MenuData } from '@/assets/data/menu.json'; +import { AppConfigService } from '@/service/appconfigservice'; import { CommonModule } from '@angular/common'; import { afterNextRender, Component, ElementRef, OnDestroy } from '@angular/core'; import { NavigationEnd, Router, RouterModule } from '@angular/router'; @@ -5,8 +7,6 @@ import { AutoComplete } from 'primeng/autocomplete'; import { DomHandler } from 'primeng/dom'; import { StyleClass } from 'primeng/styleclass'; import { Subscription } from 'rxjs'; -import { default as MenuData } from 'src/assets/showcase/data/menu.json'; -import { AppConfigService } from '@service/appconfigservice'; import { AppMenuItemComponent } from './app.menuitem.component'; export interface MenuItem { @@ -28,10 +28,10 @@ export interface MenuItem { `, host: { class: 'layout-sidebar', - '[class.active]': 'isActive', + '[class.active]': 'isActive' }, standalone: true, - imports: [CommonModule, StyleClass, RouterModule, AutoComplete, AppMenuItemComponent], + imports: [CommonModule, StyleClass, RouterModule, AutoComplete, AppMenuItemComponent] }) export class AppMenuComponent implements OnDestroy { menu!: MenuItem[]; @@ -41,7 +41,7 @@ export class AppMenuComponent implements OnDestroy { constructor( private configService: AppConfigService, private el: ElementRef, - private router: Router, + private router: Router ) { this.menu = MenuData.data; @@ -72,13 +72,7 @@ export class AppMenuComponent implements OnDestroy { isInViewport(element) { const rect = element.getBoundingClientRect(); - return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= - (window.innerHeight || - (document.documentElement.clientHeight && rect.right <= (window.innerWidth || document.documentElement.clientWidth))) - ); + return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || (document.documentElement.clientHeight && rect.right <= (window.innerWidth || document.documentElement.clientWidth))); } ngOnDestroy() { diff --git a/apps/showcase/components/layout/menu/app.menuitem.component.ts b/apps/showcase/components/layout/menu/app.menuitem.component.ts new file mode 100644 index 00000000000..c0cc953230c --- /dev/null +++ b/apps/showcase/components/layout/menu/app.menuitem.component.ts @@ -0,0 +1,53 @@ +import { CommonModule } from '@angular/common'; +import { booleanAttribute, Component, Input } from '@angular/core'; +import { Router, RouterModule } from '@angular/router'; +import { StyleClass } from 'primeng/styleclass'; +import { MenuItem } from './app.menu.component'; +import { Tag } from 'primeng/tag'; + +@Component({ + selector: '[app-menuitem]', + template: ` + + + + {{ item.name }} ++ + + + {{ item.name }} + + + + ++ `, + standalone: true, + imports: [CommonModule, StyleClass, RouterModule, Tag] +}) +export class AppMenuItemComponent { + @Input() item: MenuItem; + + @Input({ transform: booleanAttribute }) root: boolean = true; + + constructor(private router: Router) {} + + isActiveRootMenuItem(menuitem: MenuItem): boolean { + const url = this.router.url.split('#')[0]; + return menuitem.children && !menuitem.children.some((item) => item.routerLink === `${url}` || (item.children && item.children.some((it) => it.routerLink === `${url}`))); + } +} diff --git a/src/app/showcase/layout/news/app.news.component.html b/apps/showcase/components/layout/news/app.news.component.html similarity index 98% rename from src/app/showcase/layout/news/app.news.component.html rename to apps/showcase/components/layout/news/app.news.component.html index 5ec659ed9a7..215bec326ac 100644 --- a/src/app/showcase/layout/news/app.news.component.html +++ b/apps/showcase/components/layout/news/app.news.component.html @@ -8,4 +8,4 @@ - \ No newline at end of file + diff --git a/src/app/showcase/layout/news/app.news.component.ts b/apps/showcase/components/layout/news/app.news.component.ts similarity index 86% rename from src/app/showcase/layout/news/app.news.component.ts rename to apps/showcase/components/layout/news/app.news.component.ts index 0c691437886..d25082e73f1 100644 --- a/src/app/showcase/layout/news/app.news.component.ts +++ b/apps/showcase/components/layout/news/app.news.component.ts @@ -1,16 +1,16 @@ +import News from '@/assets/data/news.json'; +import { AppConfigService } from '@/service/appconfigservice'; import { CommonModule } from '@angular/common'; import { afterNextRender, ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { StyleClass } from 'primeng/styleclass'; -import News from '../../data/news.json'; -import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'app-news', standalone: true, templateUrl: './app.news.component.html', changeDetection: ChangeDetectionStrategy.OnPush, - imports: [CommonModule, FormsModule, StyleClass], + imports: [CommonModule, FormsModule, StyleClass] }) export class AppNewsComponent { storageKey: string = 'primeng'; @@ -19,7 +19,7 @@ export class AppNewsComponent { constructor( private configService: AppConfigService, - private cd: ChangeDetectorRef, + private cd: ChangeDetectorRef ) { afterNextRender(() => { const itemString = localStorage.getItem(this.storageKey); @@ -48,7 +48,7 @@ export class AppNewsComponent { hideNews() { this.configService.hideNews(); const item = { - hiddenNews: this.announcement.id, + hiddenNews: this.announcement.id }; localStorage.setItem(this.storageKey, JSON.stringify(item)); diff --git a/apps/showcase/components/layout/topbar/app.topbar.component.html b/apps/showcase/components/layout/topbar/app.topbar.component.html new file mode 100644 index 00000000000..2da7b8fc430 --- /dev/null +++ b/apps/showcase/components/layout/topbar/app.topbar.component.html @@ -0,0 +1,122 @@ + diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/apps/showcase/components/layout/topbar/app.topbar.component.ts similarity index 88% rename from src/app/showcase/layout/topbar/app.topbar.component.ts rename to apps/showcase/components/layout/topbar/app.topbar.component.ts index 0f9fcb2c858..d00fb04c55e 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.ts +++ b/apps/showcase/components/layout/topbar/app.topbar.component.ts @@ -1,3 +1,6 @@ +import Versions from '@/assets/data/versions.json'; +import { AppConfiguratorComponent } from '@/components/layout/configurator/app.configurator.component'; +import { AppConfigService } from '@/service/appconfigservice'; import { CommonModule, DOCUMENT } from '@angular/common'; import { afterNextRender, booleanAttribute, Component, ElementRef, Inject, Input, OnDestroy, Renderer2 } from '@angular/core'; import { FormsModule } from '@angular/forms'; @@ -5,15 +8,12 @@ import { RouterModule } from '@angular/router'; import docsearch from '@docsearch/js'; import { DomHandler } from 'primeng/dom'; import { StyleClass } from 'primeng/styleclass'; -import Versions from '../../data/versions.json'; -import { AppConfigService } from '@service/appconfigservice'; -import { AppConfiguratorComponent } from '@layout/configurator/app.configurator.component'; @Component({ selector: 'app-topbar', standalone: true, templateUrl: './app.topbar.component.html', - imports: [CommonModule, FormsModule, StyleClass, RouterModule, AppConfiguratorComponent], + imports: [CommonModule, FormsModule, StyleClass, RouterModule, AppConfiguratorComponent] }) export class AppTopBarComponent implements OnDestroy { @Input({ transform: booleanAttribute }) showConfigurator = true; @@ -29,7 +29,7 @@ export class AppTopBarComponent implements OnDestroy { @Inject(DOCUMENT) private document: Document, private el: ElementRef, private renderer: Renderer2, - private configService: AppConfigService, + private configService: AppConfigService ) { this.window = this.document.defaultView as Window; @@ -66,7 +66,7 @@ export class AppTopBarComponent implements OnDestroy { appId: 'XG1L2MUWT9', apiKey: '6057fe1af77fee4e7e41907b0b3ec79d', indexName: 'primeng', - container: '#docsearch', + container: '#docsearch' }); } diff --git a/src/app/showcase/layout/templates/templateconfiguration.ts b/apps/showcase/components/template/templateconfiguration.ts similarity index 84% rename from src/app/showcase/layout/templates/templateconfiguration.ts rename to apps/showcase/components/template/templateconfiguration.ts index cc7a52ed752..8aa59017972 100644 --- a/src/app/showcase/layout/templates/templateconfiguration.ts +++ b/apps/showcase/components/template/templateconfiguration.ts @@ -18,11 +18,7 @@ import { SharedModule } from 'primeng/api';-
+
+
> ng new my-apollo-app
> cd my-apollo-app
> ng serve
-
+
{{ title }}
@@ -31,7 +27,7 @@ import { SharedModule } from 'primeng/api'; `, changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + encapsulation: ViewEncapsulation.None }) export class TemplateConfiguration { @Input() title; @@ -41,6 +37,6 @@ export class TemplateConfiguration { @NgModule({ imports: [CommonModule, SharedModule], exports: [TemplateConfiguration, SharedModule], - declarations: [TemplateConfiguration], + declarations: [TemplateConfiguration] }) export class TemplateConfigurationModule {} diff --git a/src/app/showcase/layout/templates/templatefeatures.ts b/apps/showcase/components/template/templatefeatures.ts similarity index 81% rename from src/app/showcase/layout/templates/templatefeatures.ts rename to apps/showcase/components/template/templatefeatures.ts index 5dfe3075665..c943cf6f3aa 100644 --- a/src/app/showcase/layout/templates/templatefeatures.ts +++ b/apps/showcase/components/template/templatefeatures.ts @@ -1,7 +1,7 @@ +import { AppConfigService } from '@/service/appconfigservice'; import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; import { SharedModule } from 'primeng/api'; -import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'template-features', @@ -13,11 +13,7 @@ import { AppConfigService } from '../../service/appconfigservice';-+
{{ feature.title }}
@@ -37,17 +33,13 @@ import { AppConfigService } from '../../service/appconfigservice'; *ngFor="let _ of [].constructor(2); let i = index" class="flex flex-col gap-6 flex-1" [ngClass]="{ - 'sm:pt-32': i === 1, + 'sm:pt-32': i === 1 }" >`, changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + encapsulation: ViewEncapsulation.None }) export class TemplateFeatures { @Input() displayType; @@ -88,6 +80,6 @@ export class TemplateFeatures { @NgModule({ imports: [CommonModule, SharedModule], exports: [TemplateFeatures, SharedModule], - declarations: [TemplateFeatures], + declarations: [TemplateFeatures] }) export class TemplateFeaturesModule {} diff --git a/src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimation.ts b/apps/showcase/components/template/templatefeaturesanimation/templatefeaturesanimation.ts similarity index 81% rename from src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimation.ts rename to apps/showcase/components/template/templatefeaturesanimation/templatefeaturesanimation.ts index 8eee960b6d4..9c34f7118ff 100644 --- a/src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimation.ts +++ b/apps/showcase/components/template/templatefeaturesanimation/templatefeaturesanimation.ts @@ -1,33 +1,18 @@ import { CommonModule, NgOptimizedImage, isPlatformBrowser } from '@angular/common'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - Inject, - Input, - NgModule, - NgZone, - PLATFORM_ID, - ViewEncapsulation, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, Input, NgModule, NgZone, PLATFORM_ID, ViewEncapsulation } from '@angular/core'; import { SharedModule } from 'primeng/api'; import { TemplateFeaturesAnimationInlineModule } from './templatefeaturesanimationinline'; @Component({ selector: 'template-features-animation', template: ` --+
{{ data.title }}
{{ data.description }}
@@ -60,7 +52,7 @@ import { AppConfigService } from '../../service/appconfigservice';+- `, + ` }) export class AvatarStyleDoc {} diff --git a/apps/showcase/doc/avatar/badgedoc.ts b/apps/showcase/doc/avatar/badgedoc.ts new file mode 100644 index 00000000000..292e758d666 --- /dev/null +++ b/apps/showcase/doc/avatar/badgedoc.ts @@ -0,0 +1,42 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'avatar-badge-demo', + template: ` +{{ title }}
+- `, + ` }) export class AvatarGroupStyleDoc {} diff --git a/src/app/showcase/doc/avatar/avatarstyledoc.ts b/apps/showcase/doc/avatar/avatarstyledoc.ts similarity index 99% rename from src/app/showcase/doc/avatar/avatarstyledoc.ts rename to apps/showcase/doc/avatar/avatarstyledoc.ts index 9695186832d..addab94893b 100644 --- a/src/app/showcase/doc/avatar/avatarstyledoc.ts +++ b/apps/showcase/doc/avatar/avatarstyledoc.ts @@ -46,6 +46,6 @@ import { Component } from '@angular/core';`, typescript: `import { Component, OnInit } from '@angular/core'; -import { CountryService } from '@service/countryservice'; +import { CountryService } from '@/service/countryservice'; import { AutoComplete } from 'primeng/autocomplete'; import { FormsModule } from '@angular/forms'; @@ -117,6 +111,6 @@ export class AutocompleteObjectsDemo implements OnInit { "name": "Afghanistan", "code": "AF" } -...`, +...` }; } diff --git a/apps/showcase/doc/autocomplete/reactiveformsdoc.ts b/apps/showcase/doc/autocomplete/reactiveformsdoc.ts new file mode 100644 index 00000000000..a65cb1100a2 --- /dev/null +++ b/apps/showcase/doc/autocomplete/reactiveformsdoc.ts @@ -0,0 +1,80 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'reactive-forms-doc', + template: ``, typescript: `import { Component, OnInit } from '@angular/core'; -import { CountryService } from '@service/countryservice'; +import { CountryService } from '@/service/countryservice'; import { AutoComplete } from 'primeng/autocomplete'; import { FormsModule } from '@angular/forms'; @@ -120,6 +111,6 @@ export class AutocompleteForceSelectionDemo implements OnInit { "name": "Afghanistan", "code": "AF" } -...`, +...` }; } diff --git a/apps/showcase/doc/autocomplete/groupdoc.ts b/apps/showcase/doc/autocomplete/groupdoc.ts new file mode 100644 index 00000000000..0438f17b1de --- /dev/null +++ b/apps/showcase/doc/autocomplete/groupdoc.ts @@ -0,0 +1,202 @@ +import { Code } from '@/domain/code'; +import { Component, OnInit } from '@angular/core'; +import { FilterService, SelectItemGroup } from 'primeng/api'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'grouped-doc', + template: `-`, changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + encapsulation: ViewEncapsulation.None }) export class TemplateFeaturesAnimation { @Input() featuresData; @@ -110,7 +88,7 @@ export class TemplateFeaturesAnimation { constructor( private cd: ChangeDetectorRef, public el: ElementRef, - @Inject(PLATFORM_ID) private platformId: any, + @Inject(PLATFORM_ID) private platformId: any ) {} startInterval() { @@ -165,6 +143,6 @@ export class TemplateFeaturesAnimation { @NgModule({ imports: [CommonModule, SharedModule, TemplateFeaturesAnimationInlineModule, NgOptimizedImage], exports: [TemplateFeaturesAnimation, SharedModule], - declarations: [TemplateFeaturesAnimation], + declarations: [TemplateFeaturesAnimation] }) export class TemplateFeaturesAnimationModule {} diff --git a/src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimationinline.ts b/apps/showcase/components/template/templatefeaturesanimation/templatefeaturesanimationinline.ts similarity index 80% rename from src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimationinline.ts rename to apps/showcase/components/template/templatefeaturesanimation/templatefeaturesanimationinline.ts index 8093d533bce..ae2c1dd83d9 100644 --- a/src/app/showcase/layout/templates/templatefeaturesanimation/templatefeaturesanimationinline.ts +++ b/apps/showcase/components/template/templatefeaturesanimation/templatefeaturesanimationinline.ts @@ -1,24 +1,12 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - ElementRef, - Inject, - Input, - NgModule, - PLATFORM_ID, - ViewEncapsulation, -} from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, Input, NgModule, PLATFORM_ID, ViewEncapsulation } from '@angular/core'; import { SharedModule } from 'primeng/api'; @Component({ selector: 'template-features-animation-inline', template: `+{{ (i + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }) }}- +
-`, changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + encapsulation: ViewEncapsulation.None }) export class TemplateRelated { @Input() relatedData: any[] = []; @@ -27,6 +27,6 @@ export class TemplateRelated { @NgModule({ imports: [CommonModule, SharedModule, RouterModule], exports: [TemplateRelated, SharedModule], - declarations: [TemplateRelated], + declarations: [TemplateRelated] }) export class TemplateRelatedModule {} diff --git a/apps/showcase/components/template/templateseparator.ts b/apps/showcase/components/template/templateseparator.ts new file mode 100644 index 00000000000..2855c02dded --- /dev/null +++ b/apps/showcase/components/template/templateseparator.ts @@ -0,0 +1,27 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { SharedModule } from 'primeng/api'; +import { DividerModule } from 'primeng/divider'; + +@Component({ + selector: 'template-separator', + template: ` ++`, changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + encapsulation: ViewEncapsulation.None }) export class TemplateFeaturesAnimationInline { @Input() inlineFeaturesData; @@ -71,7 +55,7 @@ export class TemplateFeaturesAnimationInline { constructor( private cd: ChangeDetectorRef, public el: ElementRef, - @Inject(PLATFORM_ID) private platformId: any, + @Inject(PLATFORM_ID) private platformId: any ) {} ngOnInit() { @@ -129,6 +113,6 @@ export class TemplateFeaturesAnimationInline { @NgModule({ imports: [CommonModule, SharedModule], exports: [TemplateFeaturesAnimationInline, SharedModule], - declarations: [TemplateFeaturesAnimationInline], + declarations: [TemplateFeaturesAnimationInline] }) export class TemplateFeaturesAnimationInlineModule {} diff --git a/apps/showcase/components/template/templatehero/templatehero.ts b/apps/showcase/components/template/templatehero/templatehero.ts new file mode 100755 index 00000000000..c09997cba29 --- /dev/null +++ b/apps/showcase/components/template/templatehero/templatehero.ts @@ -0,0 +1,85 @@ +import { CommonModule, NgOptimizedImage } from '@angular/common'; +import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; +import { SharedModule } from 'primeng/api'; +import { TemplateHeroLightModule } from './templateherolight'; +import { TemplateHeroRectangleModule } from './templateherorectangle'; + +@Component({ + selector: 'template-hero', + template: ` +-+
++ `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + styleUrl: '../../../pages/templates/learnmore/learnmore.scss' +}) +export class TemplateHero { + @Input() templateHeroData; + @Input() templateLogo; +} + +@NgModule({ + imports: [CommonModule, SharedModule, NgOptimizedImage, TemplateHeroLightModule, TemplateHeroRectangleModule], + exports: [TemplateHero, SharedModule], + declarations: [TemplateHero] +}) +export class TemplateHeroModule {} diff --git a/apps/showcase/components/template/templatehero/templateherolight.ts b/apps/showcase/components/template/templatehero/templateherolight.ts new file mode 100644 index 00000000000..66d1287b646 --- /dev/null +++ b/apps/showcase/components/template/templatehero/templateherolight.ts @@ -0,0 +1,76 @@ +import { CommonModule, NgOptimizedImage } from '@angular/common'; +import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { SharedModule } from 'primeng/api'; + +@Component({ + selector: 'template-hero-light', + template: ` + + `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + styleUrl: '../../../pages/templates/learnmore/learnmore.scss' +}) +export class TemplateHeroLight {} + +@NgModule({ + imports: [CommonModule, SharedModule, NgOptimizedImage], + exports: [TemplateHeroLight, SharedModule], + declarations: [TemplateHeroLight] +}) +export class TemplateHeroLightModule {} diff --git a/apps/showcase/components/template/templatehero/templateherorectangle.ts b/apps/showcase/components/template/templatehero/templateherorectangle.ts new file mode 100644 index 00000000000..966a2b18204 --- /dev/null +++ b/apps/showcase/components/template/templatehero/templateherorectangle.ts @@ -0,0 +1,36 @@ +import { CommonModule, NgOptimizedImage } from '@angular/common'; +import { ChangeDetectionStrategy, Component, NgModule, ViewEncapsulation } from '@angular/core'; +import { SharedModule } from 'primeng/api'; + +@Component({ + selector: 'template-hero-rectangle', + template: ` + + `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + styleUrl: '../../../pages/templates/learnmore/learnmore.scss' +}) +export class TemplateHeroRectangle {} + +@NgModule({ + imports: [CommonModule, SharedModule, NgOptimizedImage], + exports: [TemplateHeroRectangle, SharedModule], + declarations: [TemplateHeroRectangle] +}) +export class TemplateHeroRectangleModule {} diff --git a/src/app/showcase/layout/templates/templatelicense.ts b/apps/showcase/components/template/templatelicense.ts similarity index 88% rename from src/app/showcase/layout/templates/templatelicense.ts rename to apps/showcase/components/template/templatelicense.ts index 2dbf75135cb..9e851e340e2 100644 --- a/src/app/showcase/layout/templates/templatelicense.ts +++ b/apps/showcase/components/template/templatelicense.ts @@ -13,9 +13,7 @@ import { ButtonModule } from 'primeng/button';+ ++
+ ++ + ++ + +++++++ {{ templateHeroData?.description }}
+ + ++ ++
+ ++
{{ licenseData?.title }}`, changeDetection: ChangeDetectionStrategy.OnPush, - encapsulation: ViewEncapsulation.None, + encapsulation: ViewEncapsulation.None }) export class TemplateLicense { @Input() license; @@ -50,6 +46,6 @@ export class TemplateLicense { @NgModule({ imports: [CommonModule, SharedModule, ButtonModule], exports: [TemplateLicense, SharedModule], - declarations: [TemplateLicense], + declarations: [TemplateLicense] }) export class TemplateLicenseModule {} diff --git a/src/app/showcase/layout/templates/templaterelated.ts b/apps/showcase/components/template/templaterelated.ts similarity index 93% rename from src/app/showcase/layout/templates/templaterelated.ts rename to apps/showcase/components/template/templaterelated.ts index a825d2b1218..3310e20ea97 100644 --- a/src/app/showcase/layout/templates/templaterelated.ts +++ b/apps/showcase/components/template/templaterelated.ts @@ -18,7 +18,7 @@ import { SharedModule } from 'primeng/api';- {{ - licenseData?.price - }} + {{ licenseData?.price }} {{ licenseData?.discount_price }}@@ -32,16 +30,14 @@ import { ButtonModule } from 'primeng/button';{{ license?.description }}
Visit the - - official documentation - + official documentation for more information.
++ `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class TemplateSeparator {} + +@NgModule({ + imports: [CommonModule, SharedModule, DividerModule], + exports: [TemplateSeparator, SharedModule], + declarations: [TemplateSeparator] +}) +export class TemplateSeparatorModule {} diff --git a/apps/showcase/components/template/templateyoutube.ts b/apps/showcase/components/template/templateyoutube.ts new file mode 100644 index 00000000000..c5605b82fdb --- /dev/null +++ b/apps/showcase/components/template/templateyoutube.ts @@ -0,0 +1,77 @@ +import { CommonModule } from '@angular/common'; +import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; +import { SharedModule } from 'primeng/api'; +import { Dialog } from 'primeng/dialog'; +import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; + +@Component({ + selector: 'template-youtube', + template: ` ++ +++ + ++ `, + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None +}) +export class TemplateYoutube { + @Input() imgSrc: string; + title: string[] = ['Integration with', 'Existing Vite Applications']; + description: string = 'Only the folders that are related to the layout needs to move in to your project. We‘ve already created a short tutorial with details for Sakai Vue. The both templates have the same implementation.'; + youtubeLink: string = 'https://www.youtube.com/embed/Y07edRJd5QM'; + youtubeVideoVisible: boolean = false; + constructor(private sanitizer: DomSanitizer) {} + iframeSrc: SafeResourceUrl; + setYoutubeVideoVisible(visible: boolean) { + this.youtubeVideoVisible = visible; + } + ngOnInit() { + this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeLink); + } +} + +@NgModule({ + imports: [CommonModule, SharedModule, Dialog], + exports: [TemplateYoutube, SharedModule], + declarations: [TemplateYoutube] +}) +export class TemplateYoutubeModule {} diff --git a/apps/showcase/doc/Image/accessibilitydoc.ts b/apps/showcase/doc/Image/accessibilitydoc.ts new file mode 100644 index 00000000000..d78d173533c --- /dev/null +++ b/apps/showcase/doc/Image/accessibilitydoc.ts @@ -0,0 +1,42 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'image-accessibility-doc', + template: `++++{{ data }}
+{{ description }}++++++ +++
+ ++ +++ ` +}) +export class AccessibilityDoc {} diff --git a/apps/showcase/doc/Image/basicdoc.ts b/apps/showcase/doc/Image/basicdoc.ts new file mode 100644 index 00000000000..c548ebd75a3 --- /dev/null +++ b/apps/showcase/doc/Image/basicdoc.ts @@ -0,0 +1,35 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'basic-doc', + template: ` +Screen Reader
+The preview button is a native button element with an aria-label that refers to the aria.zoomImage property of the locale API by default.
+When preview is active, dialog role with aria-modal is applied to the overlay image container.
+Button controls use aria.rotateRight, aria.rotateLeft, aria.zoomIn, aria.zoomOut and aria.close from the locale API as aria-label.
+ButtonBar Keyboard Support
+When preview is activated, close button receives the initial focus.
++++ +
++ + + +Key +Function ++ +tab +Moves focus through button bar. ++ +enter +Activates the button. ++ +space +Activates the button. ++ + +esc +Closes the image preview. ++ +Image is used as the native img element and supports all properties that the native element has. For multiple image, see Galleria.
++++ + ` +}) +export class BasicDoc { + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { Image } from 'primeng/image'; + +@Component({ + selector: 'image-basic-demo', + templateUrl: './image-basic-demo.html', + standalone: true, + imports: [Image] +}) +export class ImageBasicDemo {}` + }; +} diff --git a/src/app/showcase/doc/Image/imagedoc.module.ts b/apps/showcase/doc/Image/imagedoc.module.ts similarity index 82% rename from src/app/showcase/doc/Image/imagedoc.module.ts rename to apps/showcase/doc/Image/imagedoc.module.ts index 86d17213431..5f056b97531 100644 --- a/src/app/showcase/doc/Image/imagedoc.module.ts +++ b/apps/showcase/doc/Image/imagedoc.module.ts @@ -1,20 +1,20 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; -import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; import { Image } from 'primeng/image'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; +import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; -import { TemplateDoc } from './templatedoc'; +import { ImportDoc } from './importdoc'; import { PreviewDoc } from './previewdoc'; import { PreviewImageSourceDoc } from './previewimagesourcedoc'; import { StyleDoc } from './styledoc'; -import { ImportDoc } from './importdoc'; -import { AccessibilityDoc } from './accessibilitydoc'; +import { TemplateDoc } from './templatedoc'; @NgModule({ imports: [CommonModule, RouterModule, Image, AppCodeModule, AppDocModule], declarations: [ImportDoc, BasicDoc, TemplateDoc, PreviewDoc, PreviewImageSourceDoc, StyleDoc, AccessibilityDoc], - exports: [AppDocModule], + exports: [AppDocModule] }) export class ImageDocModule {} diff --git a/apps/showcase/doc/Image/importdoc.ts b/apps/showcase/doc/Image/importdoc.ts new file mode 100644 index 00000000000..826669db86e --- /dev/null +++ b/apps/showcase/doc/Image/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'image-import-doc', + template: `+ ` +}) +export class ImportDoc { + code: Code = { + typescript: `import { Image } from 'primeng/image';` + }; +} diff --git a/src/app/showcase/doc/Image/previewdoc.ts b/apps/showcase/doc/Image/previewdoc.ts similarity index 80% rename from src/app/showcase/doc/Image/previewdoc.ts rename to apps/showcase/doc/Image/previewdoc.ts index 93403d862f2..129a8802b96 100644 --- a/src/app/showcase/doc/Image/previewdoc.ts +++ b/apps/showcase/doc/Image/previewdoc.ts @@ -1,20 +1,17 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; @Component({ selector: 'image-preview-demo', template: ` - - Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and - zooming. -
+Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.
- `, + ` }) export class PreviewDoc { code: Code = { @@ -35,6 +32,6 @@ import { Image } from 'primeng/image'; }) export class ImagePreviewDemo { }`, - service: ['PhotoService'], + service: ['PhotoService'] }; } diff --git a/apps/showcase/doc/Image/previewimagesourcedoc.ts b/apps/showcase/doc/Image/previewimagesourcedoc.ts new file mode 100644 index 00000000000..e4ae1ad8826 --- /dev/null +++ b/apps/showcase/doc/Image/previewimagesourcedoc.ts @@ -0,0 +1,48 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'image-preview-source-demo', + template: ` + + +In case that you want to show different image on preview, you can set previewImageSrc attribute. It could come handy when wanted to use smaller image version at first and bigger one on preview.
++++ + ` +}) +export class PreviewImageSourceDoc { + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { Image } from 'primeng/image'; + +@Component({ + selector: 'image-preview-source-demo', + templateUrl: './image-preview-source-demo.html', + standalone: true, + imports: [Image] +}) +export class ImagePreviewSourceDemo { + +}`, + service: ['PhotoService'] + }; +} diff --git a/apps/showcase/doc/Image/styledoc.ts b/apps/showcase/doc/Image/styledoc.ts new file mode 100644 index 00000000000..8522ef97f8d --- /dev/null +++ b/apps/showcase/doc/Image/styledoc.ts @@ -0,0 +1,58 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'image-style-doc', + template: ` ++ + ++ Following is the list of structural style classes, for theming classes visit + theming page. +
+++ ` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/Image/templatedoc.ts b/apps/showcase/doc/Image/templatedoc.ts new file mode 100644 index 00000000000..cc181af7e91 --- /dev/null +++ b/apps/showcase/doc/Image/templatedoc.ts @@ -0,0 +1,65 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'template-doc', + template: ` ++ +
++ + + +Name +Element ++ +p-image +Container element. ++ +p-image-preview-container +Container element with preview enabled. ++ +p-image-preview-indicator +Mask layer over the image when hovered. ++ +p-image-preview-icon +Icon of the preview indicator. ++ +p-image-mask +Preview overlay container. ++ +p-image-toolbar +Transformation options container. ++ +p-image-action +An element inside the toolbar. ++ + +p-image-preview +Image element inside the preview overlay. ++ +An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.
++++ ++ + ++ +
+ + +
+ + ` +}) +export class TemplateDoc { + code: Code = { + basic: ` + `, + + html: `+ + ++ +
+ + +
+ +`, + + typescript: `import { Component } from '@angular/core'; +import { ImageModule } from 'primeng/image'; + +@Component({ + selector: 'image-template-demo', + templateUrl: './image-template-demo.html', + standalone: true, + imports: [ImageModule] +}) +export class ImageTemplateDemo {}` + }; +} diff --git a/apps/showcase/doc/accordion/accessibilitydoc.ts b/apps/showcase/doc/accordion/accessibilitydoc.ts new file mode 100644 index 00000000000..0412875ea10 --- /dev/null +++ b/apps/showcase/doc/accordion/accessibilitydoc.ts @@ -0,0 +1,76 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'accordion-accessibility-doc', + template: `+ ++ + ++ +
+ + +
+ +` +}) +export class AccessibilityDoc {} diff --git a/apps/showcase/doc/accordion/accordiondoc.module.ts b/apps/showcase/doc/accordion/accordiondoc.module.ts new file mode 100644 index 00000000000..bc6be2c0a15 --- /dev/null +++ b/apps/showcase/doc/accordion/accordiondoc.module.ts @@ -0,0 +1,26 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; +import { AccordionModule } from 'primeng/accordion'; +import { AvatarModule } from 'primeng/avatar'; +import { BadgeModule } from 'primeng/badge'; +import { ButtonModule } from 'primeng/button'; +import { AccessibilityDoc } from './accessibilitydoc'; +import { BasicDoc } from './basicdoc'; +import { ControlledDoc } from './controlleddoc'; +import { DisabledDoc } from './disableddoc'; +import { DynamicDoc } from './dynamicdoc'; +import { ImportDoc } from './importdoc'; +import { MultipleDoc } from './multipledoc'; +import { StyleDoc } from './styledoc'; +import { TemplateDoc } from './templatedoc'; + +@NgModule({ + imports: [CommonModule, AppCodeModule, AppDocModule, AccordionModule, ButtonModule, RouterModule, AvatarModule, BadgeModule, FormsModule], + exports: [AppDocModule], + declarations: [ImportDoc, BasicDoc, DynamicDoc, MultipleDoc, DisabledDoc, ControlledDoc, TemplateDoc, StyleDoc, AccessibilityDoc] +}) +export class AccordionDocModule {} diff --git a/apps/showcase/doc/accordion/basicdoc.ts b/apps/showcase/doc/accordion/basicdoc.ts new file mode 100644 index 00000000000..ef505db3821 --- /dev/null +++ b/apps/showcase/doc/accordion/basicdoc.ts @@ -0,0 +1,137 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'basic-doc', + template: ` ++ +Screen Reader
++ Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the + value of the header property and can be customized by defining an aria-label or aria-labelledby property. Each header has a heading role, for which the level is customized by headerAriaLevel and has + a default level of 2 as per W3C specifications. +
+The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header.
+Header Keyboard Support
++++ +
++ + + +Key +Function ++ ++ tab + +Moves focus to the next the focusable element in the page tab sequence. ++ +shift + tab +Moves focus to the previous the focusable element in the page tab sequence. ++ ++ enter + +Toggles the visibility of the content. ++ ++ space + +Toggles the visibility of the content. ++ ++ down arrow + +Moves focus to the next header. ++ ++ up arrow + +Moves focus to the previous header. ++ ++ home + +Moves focus to the first header. ++ + ++ end + +Moves focus to the last header. ++ +Accordion is defined using AccordionPanel, AccordionHeader and AccordionContent components. Each AccordionPanel must contain a unique value property to specify the active item.
++++ ++ + +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ + +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ ` +}) +export class BasicDoc { + code: Code = { + basic: ` + `, + + html: `+ + +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ + +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++`, + + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; + +@Component({ + selector: 'accordion-basic-demo', + templateUrl: './accordion-basic-demo.html', + standalone: true, + imports: [AccordionModule] +}) +export class AccordionBasicDemo {}` + }; +} diff --git a/apps/showcase/doc/accordion/controlleddoc.ts b/apps/showcase/doc/accordion/controlleddoc.ts new file mode 100644 index 00000000000..68c05c4dcd1 --- /dev/null +++ b/apps/showcase/doc/accordion/controlleddoc.ts @@ -0,0 +1,163 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'controlled-doc', + template: ` ++ ++ + +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ + +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ + +Panels can be controlled programmatically using value property as a model.
+++ +++ ++ + + + ++ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ ` +}) +export class ControlledDoc { + active = '0'; + + code: Code = { + basic: ` ++ ++ + + + `, + + html: `+ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et + expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++`, + + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'accordion-controlled-demo', + templateUrl: './accordion-controlled-demo.html', + standalone: true, + imports: [AccordionModule, ButtonModule] +}) +export class AccordionControlledDemo { + activeIndex: number | undefined = 0; + + activeIndexChange(index : number){ + this.activeIndex = index + } +}` + }; +} diff --git a/apps/showcase/doc/accordion/disableddoc.ts b/apps/showcase/doc/accordion/disableddoc.ts new file mode 100644 index 00000000000..3edf1e58335 --- /dev/null +++ b/apps/showcase/doc/accordion/disableddoc.ts @@ -0,0 +1,143 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'disabled-doc', + template: ` +++ ++ + + + ++ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et + expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ +Enabling disabled property of an AccordionTab prevents user interaction.
++++ ++ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ +Header IV ++ ` +}) +export class DisabledDoc { + code: Code = { + basic: ` + `, + + html: `+ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et + expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ +Header IV ++`, + + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; + +@Component({ + selector: 'accordion-disabled-demo', + templateUrl: './accordion-disabled-demo.html', + standalone: true, + imports: [AccordionModule] +}) +export class AccordionDisabledDemo {}` + }; +} diff --git a/apps/showcase/doc/accordion/dynamicdoc.ts b/apps/showcase/doc/accordion/dynamicdoc.ts new file mode 100644 index 00000000000..47e97c2be89 --- /dev/null +++ b/apps/showcase/doc/accordion/dynamicdoc.ts @@ -0,0 +1,77 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'dynamic-doc', + template: ` ++ ++ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et + expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ +Header IV ++ +AccordionPanel can be generated dynamically using the standard @for block.
++++++ @for (tab of tabs; track tab.title) { + ++ + } +{{ tab.title }} ++ +{{ tab.content }}
++ ` +}) +export class DynamicDoc { + tabs = [ + { title: 'Title 1', content: 'Content 1', value: '0' }, + { title: 'Title 2', content: 'Content 2', value: '1' }, + { title: 'Title 3', content: 'Content 3', value: '2' } + ]; + + code: Code = { + basic: ` + @for (tab of tabs; track tab.title) { + `, + + html: `+ + } +{{ tab.title }} ++ +{{ tab.content }}
++`, + + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'accordion-dynamic-demo', + templateUrl: './accordion-dynamic-demo.html', + standalone: true, + imports: [AccordionModule, CommonModule] +}) +export class AccordionDynamicDemo { + tabs = [ + { title: 'Title 1', content: 'Content 1', value: '0' }, + { title: 'Title 2', content: 'Content 2', value: '1' }, + { title: 'Title 3', content: 'Content 3', value: '2' }, + ]; +}` + }; +} diff --git a/apps/showcase/doc/accordion/importdoc.ts b/apps/showcase/doc/accordion/importdoc.ts new file mode 100644 index 00000000000..f90eef9e309 --- /dev/null +++ b/apps/showcase/doc/accordion/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'accordion-import-doc', + template: `+ @for (tab of tabs; track tab.title) { + ++ + } +{{ tab.title }} ++ +{{ tab.content }}
+` +}) +export class ImportDoc { + code: Code = { + typescript: `import { Accordion, AccordionTab } from 'primeng/accordion';` + }; +} diff --git a/apps/showcase/doc/accordion/multipledoc.ts b/apps/showcase/doc/accordion/multipledoc.ts new file mode 100644 index 00000000000..68544d51d4d --- /dev/null +++ b/apps/showcase/doc/accordion/multipledoc.ts @@ -0,0 +1,134 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'multiple-doc', + template: ` + + +Only one tab at a time can be active by default, enabling multiple property changes this behavior to allow multiple tabs. In this case activeIndex needs to be an array.
++++ ++ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ ` +}) +export class MultipleDoc { + code: Code = { + basic: ` + `, + + html: `+ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et + expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++`, + + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; + +@Component({ + selector: 'accordion-multiple-demo', + templateUrl: './accordion-multiple-demo.html', + standalone: true, + imports: [AccordionModule] +}) +export class AccordionMultipleDemo {}` + }; +} diff --git a/apps/showcase/doc/accordion/styledoc.ts b/apps/showcase/doc/accordion/styledoc.ts new file mode 100644 index 00000000000..0dbf380e59e --- /dev/null +++ b/apps/showcase/doc/accordion/styledoc.ts @@ -0,0 +1,38 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'accordion-style-doc', + template: ` ++ ++ +Header I ++ ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ +Header II ++ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ +Header III ++ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et + expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ ++ Following is the list of structural style classes, for theming classes visit + theming page. +
+++ ` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/accordion/templatedoc.ts b/apps/showcase/doc/accordion/templatedoc.ts new file mode 100644 index 00000000000..883ed38a9fe --- /dev/null +++ b/apps/showcase/doc/accordion/templatedoc.ts @@ -0,0 +1,253 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'template-doc', + template: ` ++ +
++ + + +Name +Element ++ +p-accordion +Container element ++ +p-accordion-header +Header of a tab. ++ + +p-accordion-content +Content of a tab. ++ +Accordion is customized with toggleicon template.
++++ ++ ++ ++ @if (active) { + + } @else { + + } + + ++ Amy Elsner + + + + ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ ++ ++ @if (active) { + + } @else { + + } + + ++ Onyama Limba + + + + ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ ++ ++ @if (active) { + + } @else { + + } + + ++ Ioni Bowcher + + + + ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ ` +}) +export class TemplateDoc { + code: Code = { + basic: ` + `, + + html: `+ ++ ++ @if (active) { + + } @else { + + } + + ++ Amy Elsner + + + + ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ ++ ++ @if (active) { + + } @else { + + } + + ++ Onyama Limba + + + + ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ ++ ++ @if (active) { + + } @else { + + } + + ++ Ioni Bowcher + + + + ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et + expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++`, + + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; +import { AvatarModule } from 'primeng/avatar'; +import { BadgeModule } from 'primeng/badge'; + +@Component({ + selector: 'accordion-template-demo', + templateUrl: './accordion-template-demo.html', + standalone: true, + imports: [AccordionModule, AvatarModule, BadgeModule] +}) +export class AccordionTemplateDemo {}` + }; +} diff --git a/apps/showcase/doc/animateonscroll/accessibilitydoc.ts b/apps/showcase/doc/animateonscroll/accessibilitydoc.ts new file mode 100644 index 00000000000..7300547127b --- /dev/null +++ b/apps/showcase/doc/animateonscroll/accessibilitydoc.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'animate-on-scroll-accessibility-doc', + template: `+ ++ ++ ++ @if (active) { + + } @else { + + } + + ++ Amy Elsner + + + + ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore + magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est + laborum. +
++ ++ ++ @if (active) { + + } @else { + + } + + ++ Onyama Limba + + + + ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem + aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo + enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos + qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ ++ ++ @if (active) { + + } @else { + + } + + ++ Ioni Bowcher + + + + ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque + corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in + culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et + expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++` +}) +export class AccessibilityDoc {} diff --git a/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts b/apps/showcase/doc/animateonscroll/animateonscrolldoc.module.ts similarity index 76% rename from src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts rename to apps/showcase/doc/animateonscroll/animateonscrolldoc.module.ts index de6fb3fd754..5cc2b1f2196 100644 --- a/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts +++ b/apps/showcase/doc/animateonscroll/animateonscrolldoc.module.ts @@ -1,16 +1,16 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; -import { ImportDoc } from './importdoc'; -import { BasicDoc } from './basicdoc'; -import { AccessibilityDoc } from './accessibilitydoc'; import { AnimateOnScroll } from 'primeng/animateonscroll'; +import { AccessibilityDoc } from './accessibilitydoc'; +import { BasicDoc } from './basicdoc'; +import { ImportDoc } from './importdoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, AnimateOnScroll], declarations: [ImportDoc, BasicDoc, AccessibilityDoc], - exports: [AppDocModule], + exports: [AppDocModule] }) export class AnimateOnScrollDocModule {} diff --git a/apps/showcase/doc/animateonscroll/basicdoc.ts b/apps/showcase/doc/animateonscroll/basicdoc.ts new file mode 100644 index 00000000000..ad30b528ce8 --- /dev/null +++ b/apps/showcase/doc/animateonscroll/basicdoc.ts @@ -0,0 +1,289 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'basic-doc', + template: ` ++ +Screen Reader
+AnimateOnScroll does not require any roles and attributes.
+Keyboard Support
+Component does not include any interactive elements.
++ +Animation classes are defined with the enterClass and leaveClass properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.
++++ Scroll Down + ++ ++ fade-in ++ ++ fade-left ++ ++ fade-right ++ ++ zoom ++ ++ flip-left ++ ++ flip-y ++ ++ scalein +++ `, + styles: [ + ` + :host { + @keyframes slidedown-icon { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(20px); + } + + 100% { + transform: translateY(0); + } + } + + .slidedown-icon { + animation: slidedown-icon; + animation-duration: 3s; + animation-iteration-count: infinite; + } + + .box { + background-image: radial-gradient(var(--primary-300), var(--primary-600)); + border-radius: 50% !important; + color: var(--primary-color-text); + } + } + ` + ] +}) +export class BasicDoc { + code: Code = { + basic: ` + Scroll Down + ++ ++ fade-in ++ ++ fade-left ++ ++ fade-right ++ ++ zoom ++ ++ flip-left ++ ++ flip-y ++ ++ scalein +`, + html: `+`, + typescript: `import { Component } from '@angular/core'; +import { AnimateOnScroll } from 'primeng/animateonscroll'; + +@Component({ + selector: 'animate-on-scroll-basic-demo', + templateUrl: './animate-on-scroll-basic-demo.html', + standalone: true, + imports: [AnimateOnScroll], + styles: [ + \` + :host { + @keyframes slidedown-icon { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(20px); + } + + 100% { + transform: translateY(0); + } + } + + .slidedown-icon { + animation: slidedown-icon; + animation-duration: 3s; + animation-iteration-count: infinite; + } + + .box { + background-image: radial-gradient(var(--primary-300), var(--primary-600)); + border-radius: 50% !important; + color: var(--primary-color-text); + } + } + \` + ] +}) +export class AnimateOnScrollBasicDemo {}` + }; +} diff --git a/apps/showcase/doc/animateonscroll/importdoc.ts b/apps/showcase/doc/animateonscroll/importdoc.ts new file mode 100644 index 00000000000..37c1a52b720 --- /dev/null +++ b/apps/showcase/doc/animateonscroll/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'animate-on-scroll-import-doc', + template: `+ Scroll Down + ++ ++ fade-in ++ ++ fade-left ++ ++ fade-right ++ ++ zoom ++ ++ flip-left ++ ++ flip-y ++ ++ scalein ++` +}) +export class ImportDoc { + code: Code = { + typescript: `import { AnimateOnScroll } from 'primeng/animateonscroll';` + }; +} diff --git a/src/app/showcase/doc/apidoc/index.json b/apps/showcase/doc/apidoc/index.json similarity index 99% rename from src/app/showcase/doc/apidoc/index.json rename to apps/showcase/doc/apidoc/index.json index 982dd688532..719c56d0adb 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/apps/showcase/doc/apidoc/index.json @@ -1791,6 +1791,9 @@ "overlayservice": { "components": {} }, + "primeng": { + "components": {} + }, "primengconfig": { "components": {} }, @@ -2262,6 +2265,12 @@ "name": "ToastMessageOptions", "description": "Deines valid options for the toast message.", "props": [ + { + "name": "text", + "optional": true, + "readonly": false, + "type": "any" + }, { "name": "severity", "optional": true, @@ -3782,8 +3791,8 @@ "name": "size", "optional": false, "readonly": false, - "type": "number", - "description": "Size of the input field." + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." }, { "name": "appendTo", @@ -4601,6 +4610,15 @@ "readonly": false, "type": "boolean", "default": "false", + "description": "When present, it specifies that the component should automatically get focus on load.", + "deprecated": "use [pAutoFocus]=\"true\"" + }, + { + "name": "_autofocus", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", "description": "When present, it specifies that the component should automatically get focus on load." } ] @@ -5255,7 +5273,16 @@ "readonly": false, "type": "boolean", "default": "false", - "description": "Add a plain textual class to the button without a background initially." + "description": "Add a plain textual class to the button without a background initially.", + "deprecated": "use variant property instead." + }, + { + "name": "fluid", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Spans 100% width of the container when enabled." } ] } @@ -5355,7 +5382,8 @@ "readonly": false, "type": "boolean", "default": "false", - "description": "Add a plain textual class to the button without a background initially." + "description": "Add a plain textual class to the button without a background initially.", + "deprecated": "use variant property instead." }, { "name": "severity", @@ -5394,6 +5422,13 @@ "type": "\"small\" | \"large\"", "description": "Defines the size of the button." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"text\" | \"outlined\"", + "description": "Specifies the variant of the component." + }, { "name": "style", "optional": false, @@ -5439,6 +5474,14 @@ "default": "false", "description": "When present, it specifies that the component should automatically get focus on load." }, + { + "name": "fluid", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Spans 100% width of the container when enabled." + }, { "name": "buttonProps", "optional": false, @@ -7253,6 +7296,13 @@ "type": "string", "description": "Identifier of the underlying input element." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "tabindex", "optional": false, @@ -7380,6 +7430,14 @@ "type": "boolean", "default": "false", "description": "Spans 100% width of the container when enabled." + }, + { + "name": "breakpoint", + "optional": false, + "readonly": false, + "type": "string", + "default": "960px", + "description": "The breakpoint to define the maximum width boundary." } ] }, @@ -7493,6 +7551,18 @@ "type": "TemplateRef ", "parameters": [] }, + { + "name": "header", + "description": "Content template for customizing the header.", + "type": "TemplateRef ", + "parameters": [] + }, + { + "name": "footer", + "description": "Content template for customizing the footer.", + "type": "TemplateRef ", + "parameters": [] + }, { "name": "triggericon", "description": "Content template for customizing the trigger icon.", @@ -7981,6 +8051,13 @@ "default": "false", "description": "When present, it specifies input state as indeterminate." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "formControl", "optional": false, @@ -9111,6 +9188,14 @@ "type": "string", "description": "Current id state as a string." }, + { + "name": "breakpoint", + "optional": false, + "readonly": false, + "type": "string", + "default": "960px", + "description": "The breakpoint to define the maximum width boundary." + }, { "name": "ariaLabel", "optional": false, @@ -10323,6 +10408,13 @@ "type": "\"filled\" | \"outlined\"", "description": "Specifies the input variant of the component." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "minDate", "optional": false, @@ -16361,8 +16453,8 @@ "name": "size", "optional": false, "readonly": false, - "type": "number", - "description": "Size of the input field." + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." }, { "name": "maxlength", @@ -16679,8 +16771,8 @@ "name": "size", "optional": false, "readonly": false, - "type": "number", - "description": "Size of the input field." + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." }, { "name": "maxlength", @@ -17191,6 +17283,13 @@ "type": "boolean", "default": "false", "description": "When present, it specifies that the component should automatically get focus on load." + }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." } ] }, @@ -17631,6 +17730,13 @@ "type": "boolean", "default": "false", "description": "Spans 100% width of the container when enabled." + }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." } ] }, @@ -18784,6 +18890,22 @@ "type": "string", "description": "Identifier of the underlying input element." }, + { + "name": "breakpoint", + "optional": false, + "readonly": false, + "type": "string", + "default": "960px", + "description": "The breakpoint to define the maximum width boundary." + }, + { + "name": "scrollHeight", + "optional": false, + "readonly": false, + "type": "string", + "default": "20rem", + "description": "Height of the viewport, a scrollbar is defined if height of list exceeds this value." + }, { "name": "disabled", "optional": false, @@ -18834,6 +18956,18 @@ "description": "Defines template option for submenu icon.", "type": "TemplateRef ", "parameters": [] + }, + { + "name": "button", + "description": "Custom menu button template on responsive mode.", + "type": "TemplateRef ", + "parameters": [] + }, + { + "name": "buttonicon", + "description": "Custom menu button icon template on responsive mode.", + "type": "TemplateRef ", + "parameters": [] } ] } @@ -19326,6 +19460,14 @@ "default": "false", "description": "Whether to hide a root submenu when mouse leaves." }, + { + "name": "breakpoint", + "optional": false, + "readonly": false, + "type": "string", + "default": "960px", + "description": "The breakpoint to define the maximum width boundary." + }, { "name": "autoHideDelay", "optional": false, @@ -19408,6 +19550,12 @@ "description": "Defines template option for item.", "type": "TemplateRef ", "parameters": [] + }, + { + "name": "submenuicon", + "description": "Defines template option for submenu icon.", + "type": "TemplateRef ", + "parameters": [] } ] } @@ -19600,6 +19748,20 @@ "type": "string", "default": "'200ms cubic-bezier(0.86, 0, 0.07, 1)'", "description": "Transition options of the hide animation." + }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"text\" | \"outlined\" | \"simple\"", + "description": "Specifies the input variant of the component." } ] }, @@ -19626,7 +19788,7 @@ "parameters": [ { "name": "event", - "type": "any", + "type": "Event", "description": "Browser event." } ], @@ -19870,7 +20032,7 @@ "name": "labelOrientation", "optional": false, "readonly": false, - "type": "string", + "type": "\"horizontal\" | \"vertical\"", "default": "horizontal", "description": "Specifies the label orientation of the component, valid values are 'horizontal' and 'vertical'." }, @@ -20452,6 +20614,13 @@ "default": "off", "description": "Defines the autocomplete is active." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "showClear", "optional": false, @@ -21930,7 +22099,7 @@ "overlay": { "components": { "Overlay": { - "description": "This API allows overlay components to be controlled from the PrimeNGConfig. In this way, all overlay components in the application can have the same behavior.", + "description": "This API allows overlay components to be controlled from the PrimeNG. In this way, all overlay components in the application can have the same behavior.", "props": { "description": "Defines the input properties of the component.", "values": [ @@ -23647,6 +23816,13 @@ "default": "false", "description": "Whether to show an icon to display the password as plain text." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "inputStyleClass", "optional": false, @@ -25070,6 +25246,13 @@ "default": "outlined", "description": "Specifies the input variant of the component." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "tabindex", "optional": false, @@ -26613,6 +26796,13 @@ "type": "ScrollerOptions", "description": "Whether to use the scroller feature. The properties of scroller component can be used like an object in it." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "overlayOptions", "optional": false, @@ -27398,6 +27588,13 @@ "type": "string", "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "disabled", "optional": false, @@ -27694,6 +27891,13 @@ "readonly": false, "type": "TemplateRef ", "description": "Headless template." + }, + { + "name": "contentTemplate", + "optional": false, + "readonly": false, + "type": "TemplateRef ", + "description": "Headless template." } ] }, @@ -28490,7 +28694,7 @@ "name": "tooltipOptions", "optional": false, "readonly": false, - "type": "string", + "type": "TooltipOptions", "description": "Tooltip options for the main button." }, { @@ -32567,10 +32771,13 @@ "terminalservice": { "components": {} }, - "aura": { + "datatable": { "components": {} }, - "datatable": { + "imagecompare": { + "components": {} + }, + "aura": { "components": {} }, "inlinemessage": { @@ -32622,6 +32829,14 @@ "type": "any", "description": "Target element to attach the overlay, valid values are \"body\" or a local ng-template variable of another element." }, + { + "name": "breakpoint", + "optional": false, + "readonly": false, + "type": "string", + "default": "960px", + "description": "The breakpoint to define the maximum width boundary." + }, { "name": "autoZIndex", "optional": false, @@ -33351,6 +33566,13 @@ "default": "0", "description": "Index of the element in tabbing order." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "iconPos", "optional": false, @@ -33600,28 +33822,20 @@ "description": "Callback to invoke when the on value change." } ] + }, + "templates": { + "description": "Defines the templates used by the component.", + "values": [ + { + "name": "handle", + "description": "Callback to invoke when the on value change.", + "type": "TemplateRef ", + "parameters": [] + } + ] } } }, - "style": { - "components": {}, - "classes": { - "values": [ - { - "class": "p-toggleswitch", - "description": "Class name of the root element" - }, - { - "class": "p-toggleswitch-input", - "description": "Class name of the input element" - }, - { - "class": "p-toggleswitch-slider", - "description": "Class name of the slider element" - } - ] - } - }, "interfaces": { "components": {}, "events": { @@ -33649,6 +33863,25 @@ } ] } + }, + "style": { + "components": {}, + "classes": { + "values": [ + { + "class": "p-toggleswitch", + "description": "Class name of the root element" + }, + { + "class": "p-toggleswitch-input", + "description": "Class name of the input element" + }, + { + "class": "p-toggleswitch-slider", + "description": "Class name of the slider element" + } + ] + } } }, "toolbar": { @@ -35038,6 +35271,13 @@ "type": "number", "description": "Height of an item in the list for VirtualScrolling." }, + { + "name": "size", + "optional": false, + "readonly": false, + "type": "\"small\" | \"large\"", + "description": "Defines the size of the component." + }, { "name": "virtualScrollOptions", "optional": false, @@ -35113,8 +35353,8 @@ "name": "onShow", "parameters": [ { - "name": "event", - "type": "Event" + "name": "value", + "type": "any" } ], "description": "Callback to invoke when the overlay is shown." @@ -35230,6 +35470,12 @@ "type": "TemplateRef ", "parameters": [] }, + { + "name": "dropdownicon", + "description": "Custom dropdown icon template.", + "type": "TemplateRef ", + "parameters": [] + }, { "name": "filtericon", "description": "Custom filter icon template.", @@ -37073,126 +37319,9 @@ } }, "virtualscroller": { - "components": { - "VirtualScroller": { - "description": "VirtualScroller is a performant approach to handle huge data efficiently.", - "props": { - "description": "Defines the input properties of the component.", - "values": [ - { - "name": "value", - "optional": false, - "readonly": false, - "type": "any[]", - "description": "An array of objects to display." - }, - { - "name": "itemSize", - "optional": false, - "readonly": false, - "type": "number", - "description": "Height of an item in the list." - }, - { - "name": "style", - "optional": false, - "readonly": false, - "type": "Object", - "description": "Inline style of the component." - }, - { - "name": "styleClass", - "optional": false, - "readonly": false, - "type": "string", - "description": "Style class of the component." - }, - { - "name": "scrollHeight", - "optional": false, - "readonly": false, - "type": "any", - "description": "Max height of the content area in inline mode." - }, - { - "name": "lazy", - "optional": false, - "readonly": false, - "type": "boolean", - "default": "false", - "description": "Defines if data is loaded and interacted with in lazy manner." - }, - { - "name": "options", - "optional": false, - "readonly": false, - "type": "ScrollerOptions", - "description": "Whether to use the scroller feature. The properties of scroller component can be used like an object in it." - }, - { - "name": "delay", - "optional": false, - "readonly": false, - "type": "number", - "default": "250", - "description": "Threshold in milliseconds to delay lazy loading during scrolling." - } - ] - }, - "emits": { - "description": "Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.", - "values": [ - { - "name": "onLazyLoad", - "parameters": [ - { - "name": "event", - "type": "VirtualScrollerLazyLoadEvent" - } - ], - "description": "Callback to invoke in lazy mode to load new data." - } - ] - } - } - }, - "interfaces": { - "components": {}, - "templates": { - "description": "Defines the templates used by the component.", - "values": [ - { - "parent": "virtualscroller", - "name": "item", - "parameters": [ - { - "name": "context", - "type": "{\n \t $implicit: any, // Item instance.\n \t options: ScrollerOptions, // Scroller options.\n }", - "description": "item data." - } - ], - "description": "Custom item template." - }, - { - "parent": "virtualscroller", - "name": "header", - "parameters": [], - "description": "Custom header template." - }, - { - "parent": "virtualscroller", - "name": "footer", - "parameters": [], - "description": "Custom header template." - } - ] - } - } - }, - "lara": { "components": {} }, - "imagecompare": { + "lara": { "components": {} }, "material": { @@ -37221,4 +37350,4 @@ "zindexutils": { "components": {} } -} \ No newline at end of file +} diff --git a/apps/showcase/doc/apidoc/themedoc.json b/apps/showcase/doc/apidoc/themedoc.json new file mode 100644 index 00000000000..4af94f45c34 --- /dev/null +++ b/apps/showcase/doc/apidoc/themedoc.json @@ -0,0 +1,11146 @@ +{ + "accordion": { + "description": "Accordion Design Tokens\n\n[Live Demo](https://www.primeng.org/accordion/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-accordion-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "panel.borderWidth", + "variable": "--p-accordion-panel-border-width", + "description": "Border width of panel" + }, + { + "token": "panel.borderColor", + "variable": "--p-accordion-panel-border-color", + "description": "Border color of panel" + }, + { + "token": "header.color", + "variable": "--p-accordion-header-color", + "description": "Color of header" + }, + { + "token": "header.hoverColor", + "variable": "--p-accordion-header-hover-color", + "description": "Hover color of header" + }, + { + "token": "header.activeColor", + "variable": "--p-accordion-header-active-color", + "description": "Active color of header" + }, + { + "token": "header.padding", + "variable": "--p-accordion-header-padding", + "description": "Padding of header" + }, + { + "token": "header.fontWeight", + "variable": "--p-accordion-header-font-weight", + "description": "Font weight of header" + }, + { + "token": "header.borderRadius", + "variable": "--p-accordion-header-border-radius", + "description": "Border radius of header" + }, + { + "token": "header.borderWidth", + "variable": "--p-accordion-header-border-width", + "description": "Border width of header" + }, + { + "token": "header.borderColor", + "variable": "--p-accordion-header-border-color", + "description": "Border color of header" + }, + { + "token": "header.background", + "variable": "--p-accordion-header-background", + "description": "Background of header" + }, + { + "token": "header.hoverBackground", + "variable": "--p-accordion-header-hover-background", + "description": "Hover background of header" + }, + { + "token": "header.activeBackground", + "variable": "--p-accordion-header-active-background", + "description": "Active background of header" + }, + { + "token": "header.activeHoverBackground", + "variable": "--p-accordion-header-active-hover-background", + "description": "Active hover background of header" + }, + { + "token": "focusRing.width", + "variable": "--p-accordion-header-focus-ring-width", + "description": "Focus ring width of header" + }, + { + "token": "focusRing.style", + "variable": "--p-accordion-header-focus-ring-style", + "description": "Focus ring style of header" + }, + { + "token": "focusRing.color", + "variable": "--p-accordion-header-focus-ring-color", + "description": "Focus ring color of header" + }, + { + "token": "focusRing.offset", + "variable": "--p-accordion-header-focus-ring-offset", + "description": "Focus ring offset of header" + }, + { + "token": "focusRing.shadow", + "variable": "--p-accordion-header-focus-ring-shadow", + "description": "Focus ring shadow of header" + }, + { + "token": "toggleIcon.color", + "variable": "--p-accordion-header-toggle-icon-color", + "description": "Toggle icon color of header" + }, + { + "token": "toggleIcon.hoverColor", + "variable": "--p-accordion-header-toggle-icon-hover-color", + "description": "Toggle icon hover color of header" + }, + { + "token": "toggleIcon.activeColor", + "variable": "--p-accordion-header-toggle-icon-active-color", + "description": "Toggle icon active color of header" + }, + { + "token": "toggleIcon.activeHoverColor", + "variable": "--p-accordion-header-toggle-icon-active-hover-color", + "description": "Toggle icon active hover color of header" + }, + { + "token": "first.topBorderRadius", + "variable": "--p-accordion-header-first-top-border-radius", + "description": "First top border radius of header" + }, + { + "token": "first.borderWidth", + "variable": "--p-accordion-header-first-border-width", + "description": "First border width of header" + }, + { + "token": "last.bottomBorderRadius", + "variable": "--p-accordion-header-last-bottom-border-radius", + "description": "Last bottom border radius of header" + }, + { + "token": "last.activeBottomBorderRadius", + "variable": "--p-accordion-header-last-active-bottom-border-radius", + "description": "Last active bottom border radius of header" + }, + { + "token": "content.borderWidth", + "variable": "--p-accordion-content-border-width", + "description": "Border width of content" + }, + { + "token": "content.borderColor", + "variable": "--p-accordion-content-border-color", + "description": "Border color of content" + }, + { + "token": "content.background", + "variable": "--p-accordion-content-background", + "description": "Background of content" + }, + { + "token": "content.color", + "variable": "--p-accordion-content-color", + "description": "Color of content" + }, + { + "token": "content.padding", + "variable": "--p-accordion-content-padding", + "description": "Padding of content" + } + ] + }, + "autocomplete": { + "description": "AutoComplete Design Tokens\n\n[Live Demo](https://www.primeng.org/autocomplete/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-autocomplete-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-autocomplete-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-autocomplete-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.filledHoverBackground", + "variable": "--p-autocomplete-filled-hover-background", + "description": "Filled hover background of root" + }, + { + "token": "root.filledFocusBackground", + "variable": "--p-autocomplete-filled-focus-background", + "description": "Filled focus background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-autocomplete-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-autocomplete-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-autocomplete-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-autocomplete-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-autocomplete-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-autocomplete-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.placeholderColor", + "variable": "--p-autocomplete-placeholder-color", + "description": "Placeholder color of root" + }, + { + "token": "root.invalidPlaceholderColor", + "variable": "--p-autocomplete-invalid-placeholder-color", + "description": "Invalid placeholder color of root" + }, + { + "token": "root.shadow", + "variable": "--p-autocomplete-shadow", + "description": "Shadow of root" + }, + { + "token": "root.paddingX", + "variable": "--p-autocomplete-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-autocomplete-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-autocomplete-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-autocomplete-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-autocomplete-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-autocomplete-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-autocomplete-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-autocomplete-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-autocomplete-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "overlay.background", + "variable": "--p-autocomplete-overlay-background", + "description": "Background of overlay" + }, + { + "token": "overlay.borderColor", + "variable": "--p-autocomplete-overlay-border-color", + "description": "Border color of overlay" + }, + { + "token": "overlay.borderRadius", + "variable": "--p-autocomplete-overlay-border-radius", + "description": "Border radius of overlay" + }, + { + "token": "overlay.color", + "variable": "--p-autocomplete-overlay-color", + "description": "Color of overlay" + }, + { + "token": "overlay.shadow", + "variable": "--p-autocomplete-overlay-shadow", + "description": "Shadow of overlay" + }, + { + "token": "list.padding", + "variable": "--p-autocomplete-list-padding", + "description": "Padding of list" + }, + { + "token": "list.gap", + "variable": "--p-autocomplete-list-gap", + "description": "Gap of list" + }, + { + "token": "option.focusBackground", + "variable": "--p-autocomplete-option-focus-background", + "description": "Focus background of option" + }, + { + "token": "option.selectedBackground", + "variable": "--p-autocomplete-option-selected-background", + "description": "Selected background of option" + }, + { + "token": "option.selectedFocusBackground", + "variable": "--p-autocomplete-option-selected-focus-background", + "description": "Selected focus background of option" + }, + { + "token": "option.color", + "variable": "--p-autocomplete-option-color", + "description": "Color of option" + }, + { + "token": "option.focusColor", + "variable": "--p-autocomplete-option-focus-color", + "description": "Focus color of option" + }, + { + "token": "option.selectedColor", + "variable": "--p-autocomplete-option-selected-color", + "description": "Selected color of option" + }, + { + "token": "option.selectedFocusColor", + "variable": "--p-autocomplete-option-selected-focus-color", + "description": "Selected focus color of option" + }, + { + "token": "option.padding", + "variable": "--p-autocomplete-option-padding", + "description": "Padding of option" + }, + { + "token": "option.borderRadius", + "variable": "--p-autocomplete-option-border-radius", + "description": "Border radius of option" + }, + { + "token": "optionGroup.background", + "variable": "--p-autocomplete-option-group-background", + "description": "Background of option group" + }, + { + "token": "optionGroup.color", + "variable": "--p-autocomplete-option-group-color", + "description": "Color of option group" + }, + { + "token": "optionGroup.fontWeight", + "variable": "--p-autocomplete-option-group-font-weight", + "description": "Font weight of option group" + }, + { + "token": "optionGroup.padding", + "variable": "--p-autocomplete-option-group-padding", + "description": "Padding of option group" + }, + { + "token": "dropdown.width", + "variable": "--p-autocomplete-dropdown-width", + "description": "Width of dropdown" + }, + { + "token": "sm.width", + "variable": "--p-autocomplete-dropdown-sm-width", + "description": "Sm width of dropdown" + }, + { + "token": "lg.width", + "variable": "--p-autocomplete-dropdown-lg-width", + "description": "Lg width of dropdown" + }, + { + "token": "dropdown.borderColor", + "variable": "--p-autocomplete-dropdown-border-color", + "description": "Border color of dropdown" + }, + { + "token": "dropdown.hoverBorderColor", + "variable": "--p-autocomplete-dropdown-hover-border-color", + "description": "Hover border color of dropdown" + }, + { + "token": "dropdown.activeBorderColor", + "variable": "--p-autocomplete-dropdown-active-border-color", + "description": "Active border color of dropdown" + }, + { + "token": "dropdown.borderRadius", + "variable": "--p-autocomplete-dropdown-border-radius", + "description": "Border radius of dropdown" + }, + { + "token": "focusRing.width", + "variable": "--p-autocomplete-dropdown-focus-ring-width", + "description": "Focus ring width of dropdown" + }, + { + "token": "focusRing.style", + "variable": "--p-autocomplete-dropdown-focus-ring-style", + "description": "Focus ring style of dropdown" + }, + { + "token": "focusRing.color", + "variable": "--p-autocomplete-dropdown-focus-ring-color", + "description": "Focus ring color of dropdown" + }, + { + "token": "focusRing.offset", + "variable": "--p-autocomplete-dropdown-focus-ring-offset", + "description": "Focus ring offset of dropdown" + }, + { + "token": "focusRing.shadow", + "variable": "--p-autocomplete-dropdown-focus-ring-shadow", + "description": "Focus ring shadow of dropdown" + }, + { + "token": "dropdown.background", + "variable": "--p-autocomplete-dropdown-background", + "description": "Background of dropdown" + }, + { + "token": "dropdown.hoverBackground", + "variable": "--p-autocomplete-dropdown-hover-background", + "description": "Hover background of dropdown" + }, + { + "token": "dropdown.activeBackground", + "variable": "--p-autocomplete-dropdown-active-background", + "description": "Active background of dropdown" + }, + { + "token": "dropdown.color", + "variable": "--p-autocomplete-dropdown-color", + "description": "Color of dropdown" + }, + { + "token": "dropdown.hoverColor", + "variable": "--p-autocomplete-dropdown-hover-color", + "description": "Hover color of dropdown" + }, + { + "token": "dropdown.activeColor", + "variable": "--p-autocomplete-dropdown-active-color", + "description": "Active color of dropdown" + }, + { + "token": "chip.borderRadius", + "variable": "--p-autocomplete-chip-border-radius", + "description": "Border radius of chip" + }, + { + "token": "chip.focusBackground", + "variable": "--p-autocomplete-chip-focus-background", + "description": "Focus background of chip" + }, + { + "token": "chip.focusColor", + "variable": "--p-autocomplete-chip-focus-color", + "description": "Focus color of chip" + }, + { + "token": "emptyMessage.padding", + "variable": "--p-autocomplete-empty-message-padding", + "description": "Padding of empty message" + } + ] + }, + "avatar": { + "description": "Avatar Design Tokens\n\n[Live Demo](https://www.primeng.org/avatar/)", + "tokens": [ + { + "token": "root.width", + "variable": "--p-avatar-width", + "description": "Width of root" + }, + { + "token": "root.height", + "variable": "--p-avatar-height", + "description": "Height of root" + }, + { + "token": "root.fontSize", + "variable": "--p-avatar-font-size", + "description": "Font size of root" + }, + { + "token": "root.background", + "variable": "--p-avatar-background", + "description": "Background of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-avatar-border-radius", + "description": "Border radius of root" + }, + { + "token": "group.borderColor", + "variable": "--p-avatar-group-border-color", + "description": "Border color of group" + }, + { + "token": "group.offset", + "variable": "--p-avatar-group-offset", + "description": "Offset of group" + }, + { + "token": "lg.width", + "variable": "--p-avatar-lg-width", + "description": "Width of lg" + }, + { + "token": "lg.height", + "variable": "--p-avatar-lg-height", + "description": "Height of lg" + }, + { + "token": "lg.fontSize", + "variable": "--p-avatar-lg-font-size", + "description": "Font size of lg" + }, + { + "token": "xl.width", + "variable": "--p-avatar-xl-width", + "description": "Width of xl" + }, + { + "token": "xl.height", + "variable": "--p-avatar-xl-height", + "description": "Height of xl" + }, + { + "token": "xl.fontSize", + "variable": "--p-avatar-xl-font-size", + "description": "Font size of xl" + } + ] + }, + "badge": { + "description": "Badge Design Tokens\n\n[Live Demo](https://www.primeng.org/badge/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-badge-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.padding", + "variable": "--p-badge-padding", + "description": "Padding of root" + }, + { + "token": "root.fontSize", + "variable": "--p-badge-font-size", + "description": "Font size of root" + }, + { + "token": "root.fontWeight", + "variable": "--p-badge-font-weight", + "description": "Font weight of root" + }, + { + "token": "root.minWidth", + "variable": "--p-badge-min-width", + "description": "Min width of root" + }, + { + "token": "root.height", + "variable": "--p-badge-height", + "description": "Height of root" + }, + { + "token": "dot.size", + "variable": "--p-badge-dot-size", + "description": "Size of dot" + }, + { + "token": "sm.fontSize", + "variable": "--p-badge-sm-font-size", + "description": "Font size of sm" + }, + { + "token": "sm.minWidth", + "variable": "--p-badge-sm-min-width", + "description": "Min width of sm" + }, + { + "token": "sm.height", + "variable": "--p-badge-sm-height", + "description": "Height of sm" + }, + { + "token": "lg.fontSize", + "variable": "--p-badge-lg-font-size", + "description": "Font size of lg" + }, + { + "token": "lg.minWidth", + "variable": "--p-badge-lg-min-width", + "description": "Min width of lg" + }, + { + "token": "lg.height", + "variable": "--p-badge-lg-height", + "description": "Height of lg" + }, + { + "token": "xl.fontSize", + "variable": "--p-badge-xl-font-size", + "description": "Font size of xl" + }, + { + "token": "xl.minWidth", + "variable": "--p-badge-xl-min-width", + "description": "Min width of xl" + }, + { + "token": "xl.height", + "variable": "--p-badge-xl-height", + "description": "Height of xl" + }, + { + "token": "primary.background", + "variable": "--p-badge-primary-background", + "description": "Background of primary" + }, + { + "token": "primary.color", + "variable": "--p-badge-primary-color", + "description": "Color of primary" + }, + { + "token": "secondary.background", + "variable": "--p-badge-secondary-background", + "description": "Background of secondary" + }, + { + "token": "secondary.color", + "variable": "--p-badge-secondary-color", + "description": "Color of secondary" + }, + { + "token": "success.background", + "variable": "--p-badge-success-background", + "description": "Background of success" + }, + { + "token": "success.color", + "variable": "--p-badge-success-color", + "description": "Color of success" + }, + { + "token": "info.background", + "variable": "--p-badge-info-background", + "description": "Background of info" + }, + { + "token": "info.color", + "variable": "--p-badge-info-color", + "description": "Color of info" + }, + { + "token": "warn.background", + "variable": "--p-badge-warn-background", + "description": "Background of warn" + }, + { + "token": "warn.color", + "variable": "--p-badge-warn-color", + "description": "Color of warn" + }, + { + "token": "danger.background", + "variable": "--p-badge-danger-background", + "description": "Background of danger" + }, + { + "token": "danger.color", + "variable": "--p-badge-danger-color", + "description": "Color of danger" + }, + { + "token": "contrast.background", + "variable": "--p-badge-contrast-background", + "description": "Background of contrast" + }, + { + "token": "contrast.color", + "variable": "--p-badge-contrast-color", + "description": "Color of contrast" + } + ] + }, + "blockui": { + "description": "BlockUI Design Tokens\n\n[Live Demo](https://www.primeng.org/blockui/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-blockui-border-radius", + "description": "Border radius of root" + } + ] + }, + "breadcrumb": { + "description": "Breadcrumb Design Tokens\n\n[Live Demo](https://www.primeng.org/breadcrumb/)", + "tokens": [ + { + "token": "root.padding", + "variable": "--p-breadcrumb-padding", + "description": "Padding of root" + }, + { + "token": "root.background", + "variable": "--p-breadcrumb-background", + "description": "Background of root" + }, + { + "token": "root.gap", + "variable": "--p-breadcrumb-gap", + "description": "Gap of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-breadcrumb-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "item.color", + "variable": "--p-breadcrumb-item-color", + "description": "Color of item" + }, + { + "token": "item.hoverColor", + "variable": "--p-breadcrumb-item-hover-color", + "description": "Hover color of item" + }, + { + "token": "item.borderRadius", + "variable": "--p-breadcrumb-item-border-radius", + "description": "Border radius of item" + }, + { + "token": "item.gap", + "variable": "--p-breadcrumb-item-gap", + "description": "Gap of item" + }, + { + "token": "icon.color", + "variable": "--p-breadcrumb-item-icon-color", + "description": "Icon color of item" + }, + { + "token": "icon.hoverColor", + "variable": "--p-breadcrumb-item-icon-hover-color", + "description": "Icon hover color of item" + }, + { + "token": "focusRing.width", + "variable": "--p-breadcrumb-item-focus-ring-width", + "description": "Focus ring width of item" + }, + { + "token": "focusRing.style", + "variable": "--p-breadcrumb-item-focus-ring-style", + "description": "Focus ring style of item" + }, + { + "token": "focusRing.color", + "variable": "--p-breadcrumb-item-focus-ring-color", + "description": "Focus ring color of item" + }, + { + "token": "focusRing.offset", + "variable": "--p-breadcrumb-item-focus-ring-offset", + "description": "Focus ring offset of item" + }, + { + "token": "focusRing.shadow", + "variable": "--p-breadcrumb-item-focus-ring-shadow", + "description": "Focus ring shadow of item" + }, + { + "token": "separator.color", + "variable": "--p-breadcrumb-separator-color", + "description": "Color of separator" + } + ] + }, + "button": { + "description": "Button Design Tokens\n\n[Live Demo](https://www.primeng.org/button/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-button-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.roundedBorderRadius", + "variable": "--p-button-rounded-border-radius", + "description": "Rounded border radius of root" + }, + { + "token": "root.gap", + "variable": "--p-button-gap", + "description": "Gap of root" + }, + { + "token": "root.paddingX", + "variable": "--p-button-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-button-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.iconOnlyWidth", + "variable": "--p-button-icon-only-width", + "description": "Icon only width of root" + }, + { + "token": "sm.fontSize", + "variable": "--p-button-sm-font-size", + "description": "Sm font size of root" + }, + { + "token": "sm.paddingX", + "variable": "--p-button-sm-padding-x", + "description": "Sm padding x of root" + }, + { + "token": "sm.paddingY", + "variable": "--p-button-sm-padding-y", + "description": "Sm padding y of root" + }, + { + "token": "lg.fontSize", + "variable": "--p-button-lg-font-size", + "description": "Lg font size of root" + }, + { + "token": "lg.paddingX", + "variable": "--p-button-lg-padding-x", + "description": "Lg padding x of root" + }, + { + "token": "lg.paddingY", + "variable": "--p-button-lg-padding-y", + "description": "Lg padding y of root" + }, + { + "token": "label.fontWeight", + "variable": "--p-button-label-font-weight", + "description": "Label font weight of root" + }, + { + "token": "root.raisedShadow", + "variable": "--p-button-raised-shadow", + "description": "Raised shadow of root" + }, + { + "token": "focusRing.width", + "variable": "--p-button-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-button-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-button-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "root.badgeSize", + "variable": "--p-button-badge-size", + "description": "Badge size of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-button-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "primary.background", + "variable": "--p-button-primary-background", + "description": "Primary background of root" + }, + { + "token": "primary.hoverBackground", + "variable": "--p-button-primary-hover-background", + "description": "Primary hover background of root" + }, + { + "token": "primary.activeBackground", + "variable": "--p-button-primary-active-background", + "description": "Primary active background of root" + }, + { + "token": "primary.borderColor", + "variable": "--p-button-primary-border-color", + "description": "Primary border color of root" + }, + { + "token": "primary.hoverBorderColor", + "variable": "--p-button-primary-hover-border-color", + "description": "Primary hover border color of root" + }, + { + "token": "primary.activeBorderColor", + "variable": "--p-button-primary-active-border-color", + "description": "Primary active border color of root" + }, + { + "token": "primary.color", + "variable": "--p-button-primary-color", + "description": "Primary color of root" + }, + { + "token": "primary.hoverColor", + "variable": "--p-button-primary-hover-color", + "description": "Primary hover color of root" + }, + { + "token": "primary.activeColor", + "variable": "--p-button-primary-active-color", + "description": "Primary active color of root" + }, + { + "token": "focusRing.color", + "variable": "--p-button-primary-focus-ring-color", + "description": "Primary focus ring color of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-button-primary-focus-ring-shadow", + "description": "Primary focus ring shadow of root" + }, + { + "token": "secondary.background", + "variable": "--p-button-secondary-background", + "description": "Secondary background of root" + }, + { + "token": "secondary.hoverBackground", + "variable": "--p-button-secondary-hover-background", + "description": "Secondary hover background of root" + }, + { + "token": "secondary.activeBackground", + "variable": "--p-button-secondary-active-background", + "description": "Secondary active background of root" + }, + { + "token": "secondary.borderColor", + "variable": "--p-button-secondary-border-color", + "description": "Secondary border color of root" + }, + { + "token": "secondary.hoverBorderColor", + "variable": "--p-button-secondary-hover-border-color", + "description": "Secondary hover border color of root" + }, + { + "token": "secondary.activeBorderColor", + "variable": "--p-button-secondary-active-border-color", + "description": "Secondary active border color of root" + }, + { + "token": "secondary.color", + "variable": "--p-button-secondary-color", + "description": "Secondary color of root" + }, + { + "token": "secondary.hoverColor", + "variable": "--p-button-secondary-hover-color", + "description": "Secondary hover color of root" + }, + { + "token": "secondary.activeColor", + "variable": "--p-button-secondary-active-color", + "description": "Secondary active color of root" + }, + { + "token": "focusRing.color", + "variable": "--p-button-secondary-focus-ring-color", + "description": "Secondary focus ring color of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-button-secondary-focus-ring-shadow", + "description": "Secondary focus ring shadow of root" + }, + { + "token": "info.background", + "variable": "--p-button-info-background", + "description": "Info background of root" + }, + { + "token": "info.hoverBackground", + "variable": "--p-button-info-hover-background", + "description": "Info hover background of root" + }, + { + "token": "info.activeBackground", + "variable": "--p-button-info-active-background", + "description": "Info active background of root" + }, + { + "token": "info.borderColor", + "variable": "--p-button-info-border-color", + "description": "Info border color of root" + }, + { + "token": "info.hoverBorderColor", + "variable": "--p-button-info-hover-border-color", + "description": "Info hover border color of root" + }, + { + "token": "info.activeBorderColor", + "variable": "--p-button-info-active-border-color", + "description": "Info active border color of root" + }, + { + "token": "info.color", + "variable": "--p-button-info-color", + "description": "Info color of root" + }, + { + "token": "info.hoverColor", + "variable": "--p-button-info-hover-color", + "description": "Info hover color of root" + }, + { + "token": "info.activeColor", + "variable": "--p-button-info-active-color", + "description": "Info active color of root" + }, + { + "token": "focusRing.color", + "variable": "--p-button-info-focus-ring-color", + "description": "Info focus ring color of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-button-info-focus-ring-shadow", + "description": "Info focus ring shadow of root" + }, + { + "token": "success.background", + "variable": "--p-button-success-background", + "description": "Success background of root" + }, + { + "token": "success.hoverBackground", + "variable": "--p-button-success-hover-background", + "description": "Success hover background of root" + }, + { + "token": "success.activeBackground", + "variable": "--p-button-success-active-background", + "description": "Success active background of root" + }, + { + "token": "success.borderColor", + "variable": "--p-button-success-border-color", + "description": "Success border color of root" + }, + { + "token": "success.hoverBorderColor", + "variable": "--p-button-success-hover-border-color", + "description": "Success hover border color of root" + }, + { + "token": "success.activeBorderColor", + "variable": "--p-button-success-active-border-color", + "description": "Success active border color of root" + }, + { + "token": "success.color", + "variable": "--p-button-success-color", + "description": "Success color of root" + }, + { + "token": "success.hoverColor", + "variable": "--p-button-success-hover-color", + "description": "Success hover color of root" + }, + { + "token": "success.activeColor", + "variable": "--p-button-success-active-color", + "description": "Success active color of root" + }, + { + "token": "focusRing.color", + "variable": "--p-button-success-focus-ring-color", + "description": "Success focus ring color of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-button-success-focus-ring-shadow", + "description": "Success focus ring shadow of root" + }, + { + "token": "warn.background", + "variable": "--p-button-warn-background", + "description": "Warn background of root" + }, + { + "token": "warn.hoverBackground", + "variable": "--p-button-warn-hover-background", + "description": "Warn hover background of root" + }, + { + "token": "warn.activeBackground", + "variable": "--p-button-warn-active-background", + "description": "Warn active background of root" + }, + { + "token": "warn.borderColor", + "variable": "--p-button-warn-border-color", + "description": "Warn border color of root" + }, + { + "token": "warn.hoverBorderColor", + "variable": "--p-button-warn-hover-border-color", + "description": "Warn hover border color of root" + }, + { + "token": "warn.activeBorderColor", + "variable": "--p-button-warn-active-border-color", + "description": "Warn active border color of root" + }, + { + "token": "warn.color", + "variable": "--p-button-warn-color", + "description": "Warn color of root" + }, + { + "token": "warn.hoverColor", + "variable": "--p-button-warn-hover-color", + "description": "Warn hover color of root" + }, + { + "token": "warn.activeColor", + "variable": "--p-button-warn-active-color", + "description": "Warn active color of root" + }, + { + "token": "focusRing.color", + "variable": "--p-button-warn-focus-ring-color", + "description": "Warn focus ring color of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-button-warn-focus-ring-shadow", + "description": "Warn focus ring shadow of root" + }, + { + "token": "help.background", + "variable": "--p-button-help-background", + "description": "Help background of root" + }, + { + "token": "help.hoverBackground", + "variable": "--p-button-help-hover-background", + "description": "Help hover background of root" + }, + { + "token": "help.activeBackground", + "variable": "--p-button-help-active-background", + "description": "Help active background of root" + }, + { + "token": "help.borderColor", + "variable": "--p-button-help-border-color", + "description": "Help border color of root" + }, + { + "token": "help.hoverBorderColor", + "variable": "--p-button-help-hover-border-color", + "description": "Help hover border color of root" + }, + { + "token": "help.activeBorderColor", + "variable": "--p-button-help-active-border-color", + "description": "Help active border color of root" + }, + { + "token": "help.color", + "variable": "--p-button-help-color", + "description": "Help color of root" + }, + { + "token": "help.hoverColor", + "variable": "--p-button-help-hover-color", + "description": "Help hover color of root" + }, + { + "token": "help.activeColor", + "variable": "--p-button-help-active-color", + "description": "Help active color of root" + }, + { + "token": "focusRing.color", + "variable": "--p-button-help-focus-ring-color", + "description": "Help focus ring color of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-button-help-focus-ring-shadow", + "description": "Help focus ring shadow of root" + }, + { + "token": "danger.background", + "variable": "--p-button-danger-background", + "description": "Danger background of root" + }, + { + "token": "danger.hoverBackground", + "variable": "--p-button-danger-hover-background", + "description": "Danger hover background of root" + }, + { + "token": "danger.activeBackground", + "variable": "--p-button-danger-active-background", + "description": "Danger active background of root" + }, + { + "token": "danger.borderColor", + "variable": "--p-button-danger-border-color", + "description": "Danger border color of root" + }, + { + "token": "danger.hoverBorderColor", + "variable": "--p-button-danger-hover-border-color", + "description": "Danger hover border color of root" + }, + { + "token": "danger.activeBorderColor", + "variable": "--p-button-danger-active-border-color", + "description": "Danger active border color of root" + }, + { + "token": "danger.color", + "variable": "--p-button-danger-color", + "description": "Danger color of root" + }, + { + "token": "danger.hoverColor", + "variable": "--p-button-danger-hover-color", + "description": "Danger hover color of root" + }, + { + "token": "danger.activeColor", + "variable": "--p-button-danger-active-color", + "description": "Danger active color of root" + }, + { + "token": "focusRing.color", + "variable": "--p-button-danger-focus-ring-color", + "description": "Danger focus ring color of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-button-danger-focus-ring-shadow", + "description": "Danger focus ring shadow of root" + }, + { + "token": "contrast.background", + "variable": "--p-button-contrast-background", + "description": "Contrast background of root" + }, + { + "token": "contrast.hoverBackground", + "variable": "--p-button-contrast-hover-background", + "description": "Contrast hover background of root" + }, + { + "token": "contrast.activeBackground", + "variable": "--p-button-contrast-active-background", + "description": "Contrast active background of root" + }, + { + "token": "contrast.borderColor", + "variable": "--p-button-contrast-border-color", + "description": "Contrast border color of root" + }, + { + "token": "contrast.hoverBorderColor", + "variable": "--p-button-contrast-hover-border-color", + "description": "Contrast hover border color of root" + }, + { + "token": "contrast.activeBorderColor", + "variable": "--p-button-contrast-active-border-color", + "description": "Contrast active border color of root" + }, + { + "token": "contrast.color", + "variable": "--p-button-contrast-color", + "description": "Contrast color of root" + }, + { + "token": "contrast.hoverColor", + "variable": "--p-button-contrast-hover-color", + "description": "Contrast hover color of root" + }, + { + "token": "contrast.activeColor", + "variable": "--p-button-contrast-active-color", + "description": "Contrast active color of root" + }, + { + "token": "focusRing.color", + "variable": "--p-button-contrast-focus-ring-color", + "description": "Contrast focus ring color of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-button-contrast-focus-ring-shadow", + "description": "Contrast focus ring shadow of root" + }, + { + "token": "primary.hoverBackground", + "variable": "--p-button-outlined-primary-hover-background", + "description": "Primary hover background of outlined" + }, + { + "token": "primary.activeBackground", + "variable": "--p-button-outlined-primary-active-background", + "description": "Primary active background of outlined" + }, + { + "token": "primary.borderColor", + "variable": "--p-button-outlined-primary-border-color", + "description": "Primary border color of outlined" + }, + { + "token": "primary.color", + "variable": "--p-button-outlined-primary-color", + "description": "Primary color of outlined" + }, + { + "token": "secondary.hoverBackground", + "variable": "--p-button-outlined-secondary-hover-background", + "description": "Secondary hover background of outlined" + }, + { + "token": "secondary.activeBackground", + "variable": "--p-button-outlined-secondary-active-background", + "description": "Secondary active background of outlined" + }, + { + "token": "secondary.borderColor", + "variable": "--p-button-outlined-secondary-border-color", + "description": "Secondary border color of outlined" + }, + { + "token": "secondary.color", + "variable": "--p-button-outlined-secondary-color", + "description": "Secondary color of outlined" + }, + { + "token": "success.hoverBackground", + "variable": "--p-button-outlined-success-hover-background", + "description": "Success hover background of outlined" + }, + { + "token": "success.activeBackground", + "variable": "--p-button-outlined-success-active-background", + "description": "Success active background of outlined" + }, + { + "token": "success.borderColor", + "variable": "--p-button-outlined-success-border-color", + "description": "Success border color of outlined" + }, + { + "token": "success.color", + "variable": "--p-button-outlined-success-color", + "description": "Success color of outlined" + }, + { + "token": "info.hoverBackground", + "variable": "--p-button-outlined-info-hover-background", + "description": "Info hover background of outlined" + }, + { + "token": "info.activeBackground", + "variable": "--p-button-outlined-info-active-background", + "description": "Info active background of outlined" + }, + { + "token": "info.borderColor", + "variable": "--p-button-outlined-info-border-color", + "description": "Info border color of outlined" + }, + { + "token": "info.color", + "variable": "--p-button-outlined-info-color", + "description": "Info color of outlined" + }, + { + "token": "warn.hoverBackground", + "variable": "--p-button-outlined-warn-hover-background", + "description": "Warn hover background of outlined" + }, + { + "token": "warn.activeBackground", + "variable": "--p-button-outlined-warn-active-background", + "description": "Warn active background of outlined" + }, + { + "token": "warn.borderColor", + "variable": "--p-button-outlined-warn-border-color", + "description": "Warn border color of outlined" + }, + { + "token": "warn.color", + "variable": "--p-button-outlined-warn-color", + "description": "Warn color of outlined" + }, + { + "token": "help.hoverBackground", + "variable": "--p-button-outlined-help-hover-background", + "description": "Help hover background of outlined" + }, + { + "token": "help.activeBackground", + "variable": "--p-button-outlined-help-active-background", + "description": "Help active background of outlined" + }, + { + "token": "help.borderColor", + "variable": "--p-button-outlined-help-border-color", + "description": "Help border color of outlined" + }, + { + "token": "help.color", + "variable": "--p-button-outlined-help-color", + "description": "Help color of outlined" + }, + { + "token": "danger.hoverBackground", + "variable": "--p-button-outlined-danger-hover-background", + "description": "Danger hover background of outlined" + }, + { + "token": "danger.activeBackground", + "variable": "--p-button-outlined-danger-active-background", + "description": "Danger active background of outlined" + }, + { + "token": "danger.borderColor", + "variable": "--p-button-outlined-danger-border-color", + "description": "Danger border color of outlined" + }, + { + "token": "danger.color", + "variable": "--p-button-outlined-danger-color", + "description": "Danger color of outlined" + }, + { + "token": "contrast.hoverBackground", + "variable": "--p-button-outlined-contrast-hover-background", + "description": "Contrast hover background of outlined" + }, + { + "token": "contrast.activeBackground", + "variable": "--p-button-outlined-contrast-active-background", + "description": "Contrast active background of outlined" + }, + { + "token": "contrast.borderColor", + "variable": "--p-button-outlined-contrast-border-color", + "description": "Contrast border color of outlined" + }, + { + "token": "contrast.color", + "variable": "--p-button-outlined-contrast-color", + "description": "Contrast color of outlined" + }, + { + "token": "plain.hoverBackground", + "variable": "--p-button-outlined-plain-hover-background", + "description": "Plain hover background of outlined" + }, + { + "token": "plain.activeBackground", + "variable": "--p-button-outlined-plain-active-background", + "description": "Plain active background of outlined" + }, + { + "token": "plain.borderColor", + "variable": "--p-button-outlined-plain-border-color", + "description": "Plain border color of outlined" + }, + { + "token": "plain.color", + "variable": "--p-button-outlined-plain-color", + "description": "Plain color of outlined" + }, + { + "token": "primary.hoverBackground", + "variable": "--p-button-text-primary-hover-background", + "description": "Primary hover background of text" + }, + { + "token": "primary.activeBackground", + "variable": "--p-button-text-primary-active-background", + "description": "Primary active background of text" + }, + { + "token": "primary.color", + "variable": "--p-button-text-primary-color", + "description": "Primary color of text" + }, + { + "token": "secondary.hoverBackground", + "variable": "--p-button-text-secondary-hover-background", + "description": "Secondary hover background of text" + }, + { + "token": "secondary.activeBackground", + "variable": "--p-button-text-secondary-active-background", + "description": "Secondary active background of text" + }, + { + "token": "secondary.color", + "variable": "--p-button-text-secondary-color", + "description": "Secondary color of text" + }, + { + "token": "success.hoverBackground", + "variable": "--p-button-text-success-hover-background", + "description": "Success hover background of text" + }, + { + "token": "success.activeBackground", + "variable": "--p-button-text-success-active-background", + "description": "Success active background of text" + }, + { + "token": "success.color", + "variable": "--p-button-text-success-color", + "description": "Success color of text" + }, + { + "token": "info.hoverBackground", + "variable": "--p-button-text-info-hover-background", + "description": "Info hover background of text" + }, + { + "token": "info.activeBackground", + "variable": "--p-button-text-info-active-background", + "description": "Info active background of text" + }, + { + "token": "info.color", + "variable": "--p-button-text-info-color", + "description": "Info color of text" + }, + { + "token": "warn.hoverBackground", + "variable": "--p-button-text-warn-hover-background", + "description": "Warn hover background of text" + }, + { + "token": "warn.activeBackground", + "variable": "--p-button-text-warn-active-background", + "description": "Warn active background of text" + }, + { + "token": "warn.color", + "variable": "--p-button-text-warn-color", + "description": "Warn color of text" + }, + { + "token": "help.hoverBackground", + "variable": "--p-button-text-help-hover-background", + "description": "Help hover background of text" + }, + { + "token": "help.activeBackground", + "variable": "--p-button-text-help-active-background", + "description": "Help active background of text" + }, + { + "token": "help.color", + "variable": "--p-button-text-help-color", + "description": "Help color of text" + }, + { + "token": "danger.hoverBackground", + "variable": "--p-button-text-danger-hover-background", + "description": "Danger hover background of text" + }, + { + "token": "danger.activeBackground", + "variable": "--p-button-text-danger-active-background", + "description": "Danger active background of text" + }, + { + "token": "danger.color", + "variable": "--p-button-text-danger-color", + "description": "Danger color of text" + }, + { + "token": "plain.hoverBackground", + "variable": "--p-button-text-plain-hover-background", + "description": "Plain hover background of text" + }, + { + "token": "plain.activeBackground", + "variable": "--p-button-text-plain-active-background", + "description": "Plain active background of text" + }, + { + "token": "plain.color", + "variable": "--p-button-text-plain-color", + "description": "Plain color of text" + }, + { + "token": "link.color", + "variable": "--p-button-link-color", + "description": "Color of link" + }, + { + "token": "link.hoverColor", + "variable": "--p-button-link-hover-color", + "description": "Hover color of link" + }, + { + "token": "link.activeColor", + "variable": "--p-button-link-active-color", + "description": "Active color of link" + } + ] + }, + "card": { + "description": "Card Design Tokens\n\n[Live Demo](https://www.primeng.org/card/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-card-background", + "description": "Background of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-card-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.color", + "variable": "--p-card-color", + "description": "Color of root" + }, + { + "token": "root.shadow", + "variable": "--p-card-shadow", + "description": "Shadow of root" + }, + { + "token": "body.padding", + "variable": "--p-card-body-padding", + "description": "Padding of body" + }, + { + "token": "body.gap", + "variable": "--p-card-body-gap", + "description": "Gap of body" + }, + { + "token": "caption.gap", + "variable": "--p-card-caption-gap", + "description": "Gap of caption" + }, + { + "token": "title.fontSize", + "variable": "--p-card-title-font-size", + "description": "Font size of title" + }, + { + "token": "title.fontWeight", + "variable": "--p-card-title-font-weight", + "description": "Font weight of title" + }, + { + "token": "subtitle.color", + "variable": "--p-card-subtitle-color", + "description": "Color of subtitle" + } + ] + }, + "carousel": { + "description": "Carousel Design Tokens\n\n[Live Demo](https://www.primeng.org/carousel/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-carousel-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "content.gap", + "variable": "--p-carousel-content-gap", + "description": "Gap of content" + }, + { + "token": "indicatorList.padding", + "variable": "--p-carousel-indicator-list-padding", + "description": "Padding of indicator list" + }, + { + "token": "indicatorList.gap", + "variable": "--p-carousel-indicator-list-gap", + "description": "Gap of indicator list" + }, + { + "token": "indicator.width", + "variable": "--p-carousel-indicator-width", + "description": "Width of indicator" + }, + { + "token": "indicator.height", + "variable": "--p-carousel-indicator-height", + "description": "Height of indicator" + }, + { + "token": "indicator.borderRadius", + "variable": "--p-carousel-indicator-border-radius", + "description": "Border radius of indicator" + }, + { + "token": "focusRing.width", + "variable": "--p-carousel-indicator-focus-ring-width", + "description": "Focus ring width of indicator" + }, + { + "token": "focusRing.style", + "variable": "--p-carousel-indicator-focus-ring-style", + "description": "Focus ring style of indicator" + }, + { + "token": "focusRing.color", + "variable": "--p-carousel-indicator-focus-ring-color", + "description": "Focus ring color of indicator" + }, + { + "token": "focusRing.offset", + "variable": "--p-carousel-indicator-focus-ring-offset", + "description": "Focus ring offset of indicator" + }, + { + "token": "focusRing.shadow", + "variable": "--p-carousel-indicator-focus-ring-shadow", + "description": "Focus ring shadow of indicator" + }, + { + "token": "indicator.background", + "variable": "--p-carousel-indicator-background", + "description": "Background of indicator" + }, + { + "token": "indicator.hoverBackground", + "variable": "--p-carousel-indicator-hover-background", + "description": "Hover background of indicator" + }, + { + "token": "indicator.activeBackground", + "variable": "--p-carousel-indicator-active-background", + "description": "Active background of indicator" + } + ] + }, + "cascadeselect": { + "description": "CascadeSelect Design Tokens\n\n[Live Demo](https://www.primeng.org/cascadeselect/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-cascadeselect-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-cascadeselect-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-cascadeselect-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.filledHoverBackground", + "variable": "--p-cascadeselect-filled-hover-background", + "description": "Filled hover background of root" + }, + { + "token": "root.filledFocusBackground", + "variable": "--p-cascadeselect-filled-focus-background", + "description": "Filled focus background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-cascadeselect-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-cascadeselect-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-cascadeselect-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-cascadeselect-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-cascadeselect-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-cascadeselect-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.placeholderColor", + "variable": "--p-cascadeselect-placeholder-color", + "description": "Placeholder color of root" + }, + { + "token": "root.invalidPlaceholderColor", + "variable": "--p-cascadeselect-invalid-placeholder-color", + "description": "Invalid placeholder color of root" + }, + { + "token": "root.shadow", + "variable": "--p-cascadeselect-shadow", + "description": "Shadow of root" + }, + { + "token": "root.paddingX", + "variable": "--p-cascadeselect-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-cascadeselect-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-cascadeselect-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-cascadeselect-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-cascadeselect-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-cascadeselect-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-cascadeselect-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-cascadeselect-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-cascadeselect-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "sm.fontSize", + "variable": "--p-cascadeselect-sm-font-size", + "description": "Sm font size of root" + }, + { + "token": "sm.paddingX", + "variable": "--p-cascadeselect-sm-padding-x", + "description": "Sm padding x of root" + }, + { + "token": "sm.paddingY", + "variable": "--p-cascadeselect-sm-padding-y", + "description": "Sm padding y of root" + }, + { + "token": "lg.fontSize", + "variable": "--p-cascadeselect-lg-font-size", + "description": "Lg font size of root" + }, + { + "token": "lg.paddingX", + "variable": "--p-cascadeselect-lg-padding-x", + "description": "Lg padding x of root" + }, + { + "token": "lg.paddingY", + "variable": "--p-cascadeselect-lg-padding-y", + "description": "Lg padding y of root" + }, + { + "token": "dropdown.width", + "variable": "--p-cascadeselect-dropdown-width", + "description": "Width of dropdown" + }, + { + "token": "dropdown.color", + "variable": "--p-cascadeselect-dropdown-color", + "description": "Color of dropdown" + }, + { + "token": "overlay.background", + "variable": "--p-cascadeselect-overlay-background", + "description": "Background of overlay" + }, + { + "token": "overlay.borderColor", + "variable": "--p-cascadeselect-overlay-border-color", + "description": "Border color of overlay" + }, + { + "token": "overlay.borderRadius", + "variable": "--p-cascadeselect-overlay-border-radius", + "description": "Border radius of overlay" + }, + { + "token": "overlay.color", + "variable": "--p-cascadeselect-overlay-color", + "description": "Color of overlay" + }, + { + "token": "overlay.shadow", + "variable": "--p-cascadeselect-overlay-shadow", + "description": "Shadow of overlay" + }, + { + "token": "list.padding", + "variable": "--p-cascadeselect-list-padding", + "description": "Padding of list" + }, + { + "token": "list.gap", + "variable": "--p-cascadeselect-list-gap", + "description": "Gap of list" + }, + { + "token": "list.mobileIndent", + "variable": "--p-cascadeselect-list-mobile-indent", + "description": "Mobile indent of list" + }, + { + "token": "option.focusBackground", + "variable": "--p-cascadeselect-option-focus-background", + "description": "Focus background of option" + }, + { + "token": "option.selectedBackground", + "variable": "--p-cascadeselect-option-selected-background", + "description": "Selected background of option" + }, + { + "token": "option.selectedFocusBackground", + "variable": "--p-cascadeselect-option-selected-focus-background", + "description": "Selected focus background of option" + }, + { + "token": "option.color", + "variable": "--p-cascadeselect-option-color", + "description": "Color of option" + }, + { + "token": "option.focusColor", + "variable": "--p-cascadeselect-option-focus-color", + "description": "Focus color of option" + }, + { + "token": "option.selectedColor", + "variable": "--p-cascadeselect-option-selected-color", + "description": "Selected color of option" + }, + { + "token": "option.selectedFocusColor", + "variable": "--p-cascadeselect-option-selected-focus-color", + "description": "Selected focus color of option" + }, + { + "token": "option.padding", + "variable": "--p-cascadeselect-option-padding", + "description": "Padding of option" + }, + { + "token": "option.borderRadius", + "variable": "--p-cascadeselect-option-border-radius", + "description": "Border radius of option" + }, + { + "token": "icon.color", + "variable": "--p-cascadeselect-option-icon-color", + "description": "Icon color of option" + }, + { + "token": "icon.focusColor", + "variable": "--p-cascadeselect-option-icon-focus-color", + "description": "Icon focus color of option" + }, + { + "token": "icon.size", + "variable": "--p-cascadeselect-option-icon-size", + "description": "Icon size of option" + }, + { + "token": "clearIcon.color", + "variable": "--p-cascadeselect-clear-icon-color", + "description": "Color of clear icon" + } + ] + }, + "checkbox": { + "description": "Checkbox Design Tokens\n\n[Live Demo](https://www.primeng.org/checkbox/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-checkbox-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.width", + "variable": "--p-checkbox-width", + "description": "Width of root" + }, + { + "token": "root.height", + "variable": "--p-checkbox-height", + "description": "Height of root" + }, + { + "token": "root.background", + "variable": "--p-checkbox-background", + "description": "Background of root" + }, + { + "token": "root.checkedBackground", + "variable": "--p-checkbox-checked-background", + "description": "Checked background of root" + }, + { + "token": "root.checkedHoverBackground", + "variable": "--p-checkbox-checked-hover-background", + "description": "Checked hover background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-checkbox-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-checkbox-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-checkbox-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-checkbox-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-checkbox-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.checkedBorderColor", + "variable": "--p-checkbox-checked-border-color", + "description": "Checked border color of root" + }, + { + "token": "root.checkedHoverBorderColor", + "variable": "--p-checkbox-checked-hover-border-color", + "description": "Checked hover border color of root" + }, + { + "token": "root.checkedFocusBorderColor", + "variable": "--p-checkbox-checked-focus-border-color", + "description": "Checked focus border color of root" + }, + { + "token": "root.checkedDisabledBorderColor", + "variable": "--p-checkbox-checked-disabled-border-color", + "description": "Checked disabled border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-checkbox-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.shadow", + "variable": "--p-checkbox-shadow", + "description": "Shadow of root" + }, + { + "token": "focusRing.width", + "variable": "--p-checkbox-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-checkbox-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-checkbox-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-checkbox-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-checkbox-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-checkbox-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "icon.size", + "variable": "--p-checkbox-icon-size", + "description": "Size of icon" + }, + { + "token": "icon.color", + "variable": "--p-checkbox-icon-color", + "description": "Color of icon" + }, + { + "token": "icon.checkedColor", + "variable": "--p-checkbox-icon-checked-color", + "description": "Checked color of icon" + }, + { + "token": "icon.checkedHoverColor", + "variable": "--p-checkbox-icon-checked-hover-color", + "description": "Checked hover color of icon" + }, + { + "token": "icon.disabledColor", + "variable": "--p-checkbox-icon-disabled-color", + "description": "Disabled color of icon" + } + ] + }, + "chip": { + "description": "Chip Design Tokens\n\n[Live Demo](https://www.primeng.org/chip/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-chip-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.paddingX", + "variable": "--p-chip-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-chip-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.gap", + "variable": "--p-chip-gap", + "description": "Gap of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-chip-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "root.background", + "variable": "--p-chip-background", + "description": "Background of root" + }, + { + "token": "root.color", + "variable": "--p-chip-color", + "description": "Color of root" + }, + { + "token": "image.width", + "variable": "--p-chip-image-width", + "description": "Width of image" + }, + { + "token": "image.height", + "variable": "--p-chip-image-height", + "description": "Height of image" + }, + { + "token": "icon.size", + "variable": "--p-chip-icon-size", + "description": "Size of icon" + }, + { + "token": "icon.color", + "variable": "--p-chip-icon-color", + "description": "Color of icon" + }, + { + "token": "removeIcon.size", + "variable": "--p-chip-remove-icon-size", + "description": "Size of remove icon" + }, + { + "token": "focusRing.width", + "variable": "--p-chip-remove-icon-focus-ring-width", + "description": "Focus ring width of remove icon" + }, + { + "token": "focusRing.style", + "variable": "--p-chip-remove-icon-focus-ring-style", + "description": "Focus ring style of remove icon" + }, + { + "token": "focusRing.color", + "variable": "--p-chip-remove-icon-focus-ring-color", + "description": "Focus ring color of remove icon" + }, + { + "token": "focusRing.offset", + "variable": "--p-chip-remove-icon-focus-ring-offset", + "description": "Focus ring offset of remove icon" + }, + { + "token": "focusRing.shadow", + "variable": "--p-chip-remove-icon-focus-ring-shadow", + "description": "Focus ring shadow of remove icon" + }, + { + "token": "removeIcon.color", + "variable": "--p-chip-remove-icon-color", + "description": "Color of remove icon" + } + ] + }, + "colorpicker": { + "description": "ColorPicker Design Tokens\n\n[Live Demo](https://www.primeng.org/colorpicker/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-colorpicker-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "preview.width", + "variable": "--p-colorpicker-preview-width", + "description": "Width of preview" + }, + { + "token": "preview.height", + "variable": "--p-colorpicker-preview-height", + "description": "Height of preview" + }, + { + "token": "preview.borderRadius", + "variable": "--p-colorpicker-preview-border-radius", + "description": "Border radius of preview" + }, + { + "token": "focusRing.width", + "variable": "--p-colorpicker-preview-focus-ring-width", + "description": "Focus ring width of preview" + }, + { + "token": "focusRing.style", + "variable": "--p-colorpicker-preview-focus-ring-style", + "description": "Focus ring style of preview" + }, + { + "token": "focusRing.color", + "variable": "--p-colorpicker-preview-focus-ring-color", + "description": "Focus ring color of preview" + }, + { + "token": "focusRing.offset", + "variable": "--p-colorpicker-preview-focus-ring-offset", + "description": "Focus ring offset of preview" + }, + { + "token": "focusRing.shadow", + "variable": "--p-colorpicker-preview-focus-ring-shadow", + "description": "Focus ring shadow of preview" + }, + { + "token": "panel.shadow", + "variable": "--p-colorpicker-panel-shadow", + "description": "Shadow of panel" + }, + { + "token": "panel.borderRadius", + "variable": "--p-colorpicker-panel-border-radius", + "description": "Border radius of panel" + }, + { + "token": "panel.background", + "variable": "--p-colorpicker-panel-background", + "description": "Background of panel" + }, + { + "token": "panel.borderColor", + "variable": "--p-colorpicker-panel-border-color", + "description": "Border color of panel" + }, + { + "token": "handle.color", + "variable": "--p-colorpicker-handle-color", + "description": "Color of handle" + } + ] + }, + "confirmdialog": { + "description": "ConfirmDialog Design Tokens\n\n[Live Demo](https://www.primeng.org/confirmdialog/)", + "tokens": [ + { + "token": "icon.size", + "variable": "--p-confirmdialog-icon-size", + "description": "Size of icon" + }, + { + "token": "icon.color", + "variable": "--p-confirmdialog-icon-color", + "description": "Color of icon" + }, + { + "token": "content.gap", + "variable": "--p-confirmdialog-content-gap", + "description": "Gap of content" + } + ] + }, + "confirmpopup": { + "description": "ConfirmPopup Design Tokens\n\n[Live Demo](https://www.primeng.org/confirmpopup/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-confirmpopup-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-confirmpopup-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-confirmpopup-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-confirmpopup-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.shadow", + "variable": "--p-confirmpopup-shadow", + "description": "Shadow of root" + }, + { + "token": "root.gutter", + "variable": "--p-confirmpopup-gutter", + "description": "Gutter of root" + }, + { + "token": "root.arrowOffset", + "variable": "--p-confirmpopup-arrow-offset", + "description": "Arrow offset of root" + }, + { + "token": "content.padding", + "variable": "--p-confirmpopup-content-padding", + "description": "Padding of content" + }, + { + "token": "content.gap", + "variable": "--p-confirmpopup-content-gap", + "description": "Gap of content" + }, + { + "token": "icon.size", + "variable": "--p-confirmpopup-icon-size", + "description": "Size of icon" + }, + { + "token": "icon.color", + "variable": "--p-confirmpopup-icon-color", + "description": "Color of icon" + }, + { + "token": "footer.gap", + "variable": "--p-confirmpopup-footer-gap", + "description": "Gap of footer" + }, + { + "token": "footer.padding", + "variable": "--p-confirmpopup-footer-padding", + "description": "Padding of footer" + } + ] + }, + "contextmenu": { + "description": "ContextMenu Design Tokens\n\n[Live Demo](https://www.primeng.org/contextmenu/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-contextmenu-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-contextmenu-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-contextmenu-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-contextmenu-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.shadow", + "variable": "--p-contextmenu-shadow", + "description": "Shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-contextmenu-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "list.padding", + "variable": "--p-contextmenu-list-padding", + "description": "Padding of list" + }, + { + "token": "list.gap", + "variable": "--p-contextmenu-list-gap", + "description": "Gap of list" + }, + { + "token": "item.focusBackground", + "variable": "--p-contextmenu-item-focus-background", + "description": "Focus background of item" + }, + { + "token": "item.activeBackground", + "variable": "--p-contextmenu-item-active-background", + "description": "Active background of item" + }, + { + "token": "item.color", + "variable": "--p-contextmenu-item-color", + "description": "Color of item" + }, + { + "token": "item.focusColor", + "variable": "--p-contextmenu-item-focus-color", + "description": "Focus color of item" + }, + { + "token": "item.activeColor", + "variable": "--p-contextmenu-item-active-color", + "description": "Active color of item" + }, + { + "token": "item.padding", + "variable": "--p-contextmenu-item-padding", + "description": "Padding of item" + }, + { + "token": "item.borderRadius", + "variable": "--p-contextmenu-item-border-radius", + "description": "Border radius of item" + }, + { + "token": "item.gap", + "variable": "--p-contextmenu-item-gap", + "description": "Gap of item" + }, + { + "token": "icon.color", + "variable": "--p-contextmenu-item-icon-color", + "description": "Icon color of item" + }, + { + "token": "icon.focusColor", + "variable": "--p-contextmenu-item-icon-focus-color", + "description": "Icon focus color of item" + }, + { + "token": "icon.activeColor", + "variable": "--p-contextmenu-item-icon-active-color", + "description": "Icon active color of item" + }, + { + "token": "submenu.mobileIndent", + "variable": "--p-contextmenu-submenu-mobile-indent", + "description": "Mobile indent of submenu" + }, + { + "token": "submenuIcon.size", + "variable": "--p-contextmenu-submenu-icon-size", + "description": "Size of submenu icon" + }, + { + "token": "submenuIcon.color", + "variable": "--p-contextmenu-submenu-icon-color", + "description": "Color of submenu icon" + }, + { + "token": "submenuIcon.focusColor", + "variable": "--p-contextmenu-submenu-icon-focus-color", + "description": "Focus color of submenu icon" + }, + { + "token": "submenuIcon.activeColor", + "variable": "--p-contextmenu-submenu-icon-active-color", + "description": "Active color of submenu icon" + }, + { + "token": "separator.borderColor", + "variable": "--p-contextmenu-separator-border-color", + "description": "Border color of separator" + } + ] + }, + "table": { + "description": "DataTable Design Tokens\n\n[Live Demo](https://www.primeng.org/datatable/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-datatable-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "root.borderColor", + "variable": "--p-datatable-border-color", + "description": "Border color of root" + }, + { + "token": "header.background", + "variable": "--p-datatable-header-background", + "description": "Background of header" + }, + { + "token": "header.borderColor", + "variable": "--p-datatable-header-border-color", + "description": "Border color of header" + }, + { + "token": "header.color", + "variable": "--p-datatable-header-color", + "description": "Color of header" + }, + { + "token": "header.borderWidth", + "variable": "--p-datatable-header-border-width", + "description": "Border width of header" + }, + { + "token": "header.padding", + "variable": "--p-datatable-header-padding", + "description": "Padding of header" + }, + { + "token": "headerCell.background", + "variable": "--p-datatable-header-cell-background", + "description": "Background of header cell" + }, + { + "token": "headerCell.hoverBackground", + "variable": "--p-datatable-header-cell-hover-background", + "description": "Hover background of header cell" + }, + { + "token": "headerCell.selectedBackground", + "variable": "--p-datatable-header-cell-selected-background", + "description": "Selected background of header cell" + }, + { + "token": "headerCell.borderColor", + "variable": "--p-datatable-header-cell-border-color", + "description": "Border color of header cell" + }, + { + "token": "headerCell.color", + "variable": "--p-datatable-header-cell-color", + "description": "Color of header cell" + }, + { + "token": "headerCell.hoverColor", + "variable": "--p-datatable-header-cell-hover-color", + "description": "Hover color of header cell" + }, + { + "token": "headerCell.selectedColor", + "variable": "--p-datatable-header-cell-selected-color", + "description": "Selected color of header cell" + }, + { + "token": "headerCell.gap", + "variable": "--p-datatable-header-cell-gap", + "description": "Gap of header cell" + }, + { + "token": "headerCell.padding", + "variable": "--p-datatable-header-cell-padding", + "description": "Padding of header cell" + }, + { + "token": "focusRing.width", + "variable": "--p-datatable-header-cell-focus-ring-width", + "description": "Focus ring width of header cell" + }, + { + "token": "focusRing.style", + "variable": "--p-datatable-header-cell-focus-ring-style", + "description": "Focus ring style of header cell" + }, + { + "token": "focusRing.color", + "variable": "--p-datatable-header-cell-focus-ring-color", + "description": "Focus ring color of header cell" + }, + { + "token": "focusRing.offset", + "variable": "--p-datatable-header-cell-focus-ring-offset", + "description": "Focus ring offset of header cell" + }, + { + "token": "focusRing.shadow", + "variable": "--p-datatable-header-cell-focus-ring-shadow", + "description": "Focus ring shadow of header cell" + }, + { + "token": "columnTitle.fontWeight", + "variable": "--p-datatable-column-title-font-weight", + "description": "Font weight of column title" + }, + { + "token": "row.background", + "variable": "--p-datatable-row-background", + "description": "Background of row" + }, + { + "token": "row.hoverBackground", + "variable": "--p-datatable-row-hover-background", + "description": "Hover background of row" + }, + { + "token": "row.selectedBackground", + "variable": "--p-datatable-row-selected-background", + "description": "Selected background of row" + }, + { + "token": "row.color", + "variable": "--p-datatable-row-color", + "description": "Color of row" + }, + { + "token": "row.hoverColor", + "variable": "--p-datatable-row-hover-color", + "description": "Hover color of row" + }, + { + "token": "row.selectedColor", + "variable": "--p-datatable-row-selected-color", + "description": "Selected color of row" + }, + { + "token": "focusRing.width", + "variable": "--p-datatable-row-focus-ring-width", + "description": "Focus ring width of row" + }, + { + "token": "focusRing.style", + "variable": "--p-datatable-row-focus-ring-style", + "description": "Focus ring style of row" + }, + { + "token": "focusRing.color", + "variable": "--p-datatable-row-focus-ring-color", + "description": "Focus ring color of row" + }, + { + "token": "focusRing.offset", + "variable": "--p-datatable-row-focus-ring-offset", + "description": "Focus ring offset of row" + }, + { + "token": "focusRing.shadow", + "variable": "--p-datatable-row-focus-ring-shadow", + "description": "Focus ring shadow of row" + }, + { + "token": "row.stripedBackground", + "variable": "--p-datatable-row-striped-background", + "description": "Striped background of row" + }, + { + "token": "bodyCell.borderColor", + "variable": "--p-datatable-body-cell-border-color", + "description": "Border color of body cell" + }, + { + "token": "bodyCell.padding", + "variable": "--p-datatable-body-cell-padding", + "description": "Padding of body cell" + }, + { + "token": "bodyCell.selectedBorderColor", + "variable": "--p-datatable-body-cell-selected-border-color", + "description": "Selected border color of body cell" + }, + { + "token": "footerCell.background", + "variable": "--p-datatable-footer-cell-background", + "description": "Background of footer cell" + }, + { + "token": "footerCell.borderColor", + "variable": "--p-datatable-footer-cell-border-color", + "description": "Border color of footer cell" + }, + { + "token": "footerCell.color", + "variable": "--p-datatable-footer-cell-color", + "description": "Color of footer cell" + }, + { + "token": "footerCell.padding", + "variable": "--p-datatable-footer-cell-padding", + "description": "Padding of footer cell" + }, + { + "token": "columnFooter.fontWeight", + "variable": "--p-datatable-column-footer-font-weight", + "description": "Font weight of column footer" + }, + { + "token": "footer.background", + "variable": "--p-datatable-footer-background", + "description": "Background of footer" + }, + { + "token": "footer.borderColor", + "variable": "--p-datatable-footer-border-color", + "description": "Border color of footer" + }, + { + "token": "footer.color", + "variable": "--p-datatable-footer-color", + "description": "Color of footer" + }, + { + "token": "footer.borderWidth", + "variable": "--p-datatable-footer-border-width", + "description": "Border width of footer" + }, + { + "token": "footer.padding", + "variable": "--p-datatable-footer-padding", + "description": "Padding of footer" + }, + { + "token": "dropPointColor.0", + "variable": "--p-datatable-drop-point-color-0", + "description": "0 of drop point color" + }, + { + "token": "dropPointColor.1", + "variable": "--p-datatable-drop-point-color-1", + "description": "1 of drop point color" + }, + { + "token": "dropPointColor.2", + "variable": "--p-datatable-drop-point-color-2", + "description": "2 of drop point color" + }, + { + "token": "dropPointColor.3", + "variable": "--p-datatable-drop-point-color-3", + "description": "3 of drop point color" + }, + { + "token": "dropPointColor.4", + "variable": "--p-datatable-drop-point-color-4", + "description": "4 of drop point color" + }, + { + "token": "dropPointColor.5", + "variable": "--p-datatable-drop-point-color-5", + "description": "5 of drop point color" + }, + { + "token": "dropPointColor.6", + "variable": "--p-datatable-drop-point-color-6", + "description": "6 of drop point color" + }, + { + "token": "dropPointColor.7", + "variable": "--p-datatable-drop-point-color-7", + "description": "7 of drop point color" + }, + { + "token": "dropPointColor.8", + "variable": "--p-datatable-drop-point-color-8", + "description": "8 of drop point color" + }, + { + "token": "dropPointColor.9", + "variable": "--p-datatable-drop-point-color-9", + "description": "9 of drop point color" + }, + { + "token": "dropPointColor.10", + "variable": "--p-datatable-drop-point-color-10", + "description": "10 of drop point color" + }, + { + "token": "dropPointColor.11", + "variable": "--p-datatable-drop-point-color-11", + "description": "11 of drop point color" + }, + { + "token": "dropPointColor.12", + "variable": "--p-datatable-drop-point-color-12", + "description": "12 of drop point color" + }, + { + "token": "dropPointColor.13", + "variable": "--p-datatable-drop-point-color-13", + "description": "13 of drop point color" + }, + { + "token": "dropPointColor.14", + "variable": "--p-datatable-drop-point-color-14", + "description": "14 of drop point color" + }, + { + "token": "columnResizerWidth.0", + "variable": "--p-datatable-column-resizer-width-0", + "description": "0 of column resizer width" + }, + { + "token": "columnResizerWidth.1", + "variable": "--p-datatable-column-resizer-width-1", + "description": "1 of column resizer width" + }, + { + "token": "columnResizerWidth.2", + "variable": "--p-datatable-column-resizer-width-2", + "description": "2 of column resizer width" + }, + { + "token": "columnResizerWidth.3", + "variable": "--p-datatable-column-resizer-width-3", + "description": "3 of column resizer width" + }, + { + "token": "columnResizerWidth.4", + "variable": "--p-datatable-column-resizer-width-4", + "description": "4 of column resizer width" + }, + { + "token": "columnResizerWidth.5", + "variable": "--p-datatable-column-resizer-width-5", + "description": "5 of column resizer width" + }, + { + "token": "resizeIndicator.width", + "variable": "--p-datatable-resize-indicator-width", + "description": "Width of resize indicator" + }, + { + "token": "resizeIndicator.color", + "variable": "--p-datatable-resize-indicator-color", + "description": "Color of resize indicator" + }, + { + "token": "sortIcon.color", + "variable": "--p-datatable-sort-icon-color", + "description": "Color of sort icon" + }, + { + "token": "sortIcon.hoverColor", + "variable": "--p-datatable-sort-icon-hover-color", + "description": "Hover color of sort icon" + }, + { + "token": "loadingIcon.size", + "variable": "--p-datatable-loading-icon-size", + "description": "Size of loading icon" + }, + { + "token": "rowToggleButton.hoverBackground", + "variable": "--p-datatable-row-toggle-button-hover-background", + "description": "Hover background of row toggle button" + }, + { + "token": "rowToggleButton.selectedHoverBackground", + "variable": "--p-datatable-row-toggle-button-selected-hover-background", + "description": "Selected hover background of row toggle button" + }, + { + "token": "rowToggleButton.color", + "variable": "--p-datatable-row-toggle-button-color", + "description": "Color of row toggle button" + }, + { + "token": "rowToggleButton.hoverColor", + "variable": "--p-datatable-row-toggle-button-hover-color", + "description": "Hover color of row toggle button" + }, + { + "token": "rowToggleButton.selectedHoverColor", + "variable": "--p-datatable-row-toggle-button-selected-hover-color", + "description": "Selected hover color of row toggle button" + }, + { + "token": "rowToggleButton.size", + "variable": "--p-datatable-row-toggle-button-size", + "description": "Size of row toggle button" + }, + { + "token": "rowToggleButton.borderRadius", + "variable": "--p-datatable-row-toggle-button-border-radius", + "description": "Border radius of row toggle button" + }, + { + "token": "focusRing.width", + "variable": "--p-datatable-row-toggle-button-focus-ring-width", + "description": "Focus ring width of row toggle button" + }, + { + "token": "focusRing.style", + "variable": "--p-datatable-row-toggle-button-focus-ring-style", + "description": "Focus ring style of row toggle button" + }, + { + "token": "focusRing.color", + "variable": "--p-datatable-row-toggle-button-focus-ring-color", + "description": "Focus ring color of row toggle button" + }, + { + "token": "focusRing.offset", + "variable": "--p-datatable-row-toggle-button-focus-ring-offset", + "description": "Focus ring offset of row toggle button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-datatable-row-toggle-button-focus-ring-shadow", + "description": "Focus ring shadow of row toggle button" + }, + { + "token": "filter.inlineGap", + "variable": "--p-datatable-filter-inline-gap", + "description": "Inline gap of filter" + }, + { + "token": "overlaySelect.background", + "variable": "--p-datatable-filter-overlay-select-background", + "description": "Overlay select background of filter" + }, + { + "token": "overlaySelect.borderColor", + "variable": "--p-datatable-filter-overlay-select-border-color", + "description": "Overlay select border color of filter" + }, + { + "token": "overlaySelect.borderRadius", + "variable": "--p-datatable-filter-overlay-select-border-radius", + "description": "Overlay select border radius of filter" + }, + { + "token": "overlaySelect.color", + "variable": "--p-datatable-filter-overlay-select-color", + "description": "Overlay select color of filter" + }, + { + "token": "overlaySelect.shadow", + "variable": "--p-datatable-filter-overlay-select-shadow", + "description": "Overlay select shadow of filter" + }, + { + "token": "overlayPopover.background", + "variable": "--p-datatable-filter-overlay-popover-background", + "description": "Overlay popover background of filter" + }, + { + "token": "overlayPopover.borderColor", + "variable": "--p-datatable-filter-overlay-popover-border-color", + "description": "Overlay popover border color of filter" + }, + { + "token": "overlayPopover.borderRadius", + "variable": "--p-datatable-filter-overlay-popover-border-radius", + "description": "Overlay popover border radius of filter" + }, + { + "token": "overlayPopover.color", + "variable": "--p-datatable-filter-overlay-popover-color", + "description": "Overlay popover color of filter" + }, + { + "token": "overlayPopover.shadow", + "variable": "--p-datatable-filter-overlay-popover-shadow", + "description": "Overlay popover shadow of filter" + }, + { + "token": "overlayPopover.padding", + "variable": "--p-datatable-filter-overlay-popover-padding", + "description": "Overlay popover padding of filter" + }, + { + "token": "overlayPopover.gap", + "variable": "--p-datatable-filter-overlay-popover-gap", + "description": "Overlay popover gap of filter" + }, + { + "token": "rule.borderColor", + "variable": "--p-datatable-filter-rule-border-color", + "description": "Rule border color of filter" + }, + { + "token": "constraintList.padding", + "variable": "--p-datatable-filter-constraint-list-padding", + "description": "Constraint list padding of filter" + }, + { + "token": "constraintList.gap", + "variable": "--p-datatable-filter-constraint-list-gap", + "description": "Constraint list gap of filter" + }, + { + "token": "constraint.focusBackground", + "variable": "--p-datatable-filter-constraint-focus-background", + "description": "Constraint focus background of filter" + }, + { + "token": "constraint.selectedBackground", + "variable": "--p-datatable-filter-constraint-selected-background", + "description": "Constraint selected background of filter" + }, + { + "token": "constraint.selectedFocusBackground", + "variable": "--p-datatable-filter-constraint-selected-focus-background", + "description": "Constraint selected focus background of filter" + }, + { + "token": "constraint.color", + "variable": "--p-datatable-filter-constraint-color", + "description": "Constraint color of filter" + }, + { + "token": "constraint.focusColor", + "variable": "--p-datatable-filter-constraint-focus-color", + "description": "Constraint focus color of filter" + }, + { + "token": "constraint.selectedColor", + "variable": "--p-datatable-filter-constraint-selected-color", + "description": "Constraint selected color of filter" + }, + { + "token": "constraint.selectedFocusColor", + "variable": "--p-datatable-filter-constraint-selected-focus-color", + "description": "Constraint selected focus color of filter" + }, + { + "token": "separator.borderColor", + "variable": "--p-datatable-filter-constraint-separator-border-color", + "description": "Constraint separator border color of filter" + }, + { + "token": "constraint.padding", + "variable": "--p-datatable-filter-constraint-padding", + "description": "Constraint padding of filter" + }, + { + "token": "constraint.borderRadius", + "variable": "--p-datatable-filter-constraint-border-radius", + "description": "Constraint border radius of filter" + }, + { + "token": "paginatorTop.borderColor", + "variable": "--p-datatable-paginator-top-border-color", + "description": "Border color of paginator top" + }, + { + "token": "paginatorTop.borderWidth", + "variable": "--p-datatable-paginator-top-border-width", + "description": "Border width of paginator top" + }, + { + "token": "paginatorBottom.borderColor", + "variable": "--p-datatable-paginator-bottom-border-color", + "description": "Border color of paginator bottom" + }, + { + "token": "paginatorBottom.borderWidth", + "variable": "--p-datatable-paginator-bottom-border-width", + "description": "Border width of paginator bottom" + } + ] + }, + "dataview": { + "description": "DataView Design Tokens\n\n[Live Demo](https://www.primeng.org/dataview/)", + "tokens": [ + { + "token": "root.borderColor", + "variable": "--p-dataview-border-color", + "description": "Border color of root" + }, + { + "token": "root.borderWidth", + "variable": "--p-dataview-border-width", + "description": "Border width of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-dataview-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.padding", + "variable": "--p-dataview-padding", + "description": "Padding of root" + }, + { + "token": "header.background", + "variable": "--p-dataview-header-background", + "description": "Background of header" + }, + { + "token": "header.color", + "variable": "--p-dataview-header-color", + "description": "Color of header" + }, + { + "token": "header.borderColor", + "variable": "--p-dataview-header-border-color", + "description": "Border color of header" + }, + { + "token": "header.borderWidth", + "variable": "--p-dataview-header-border-width", + "description": "Border width of header" + }, + { + "token": "header.padding", + "variable": "--p-dataview-header-padding", + "description": "Padding of header" + }, + { + "token": "header.borderRadius", + "variable": "--p-dataview-header-border-radius", + "description": "Border radius of header" + }, + { + "token": "content.background", + "variable": "--p-dataview-content-background", + "description": "Background of content" + }, + { + "token": "content.color", + "variable": "--p-dataview-content-color", + "description": "Color of content" + }, + { + "token": "content.borderColor", + "variable": "--p-dataview-content-border-color", + "description": "Border color of content" + }, + { + "token": "content.borderWidth", + "variable": "--p-dataview-content-border-width", + "description": "Border width of content" + }, + { + "token": "content.padding", + "variable": "--p-dataview-content-padding", + "description": "Padding of content" + }, + { + "token": "content.borderRadius", + "variable": "--p-dataview-content-border-radius", + "description": "Border radius of content" + }, + { + "token": "footer.background", + "variable": "--p-dataview-footer-background", + "description": "Background of footer" + }, + { + "token": "footer.color", + "variable": "--p-dataview-footer-color", + "description": "Color of footer" + }, + { + "token": "footer.borderColor", + "variable": "--p-dataview-footer-border-color", + "description": "Border color of footer" + }, + { + "token": "footer.borderWidth", + "variable": "--p-dataview-footer-border-width", + "description": "Border width of footer" + }, + { + "token": "footer.padding", + "variable": "--p-dataview-footer-padding", + "description": "Padding of footer" + }, + { + "token": "footer.borderRadius", + "variable": "--p-dataview-footer-border-radius", + "description": "Border radius of footer" + }, + { + "token": "paginatorTop.borderColor", + "variable": "--p-dataview-paginator-top-border-color", + "description": "Border color of paginator top" + }, + { + "token": "paginatorTop.borderWidth", + "variable": "--p-dataview-paginator-top-border-width", + "description": "Border width of paginator top" + }, + { + "token": "paginatorBottom.borderColor", + "variable": "--p-dataview-paginator-bottom-border-color", + "description": "Border color of paginator bottom" + }, + { + "token": "paginatorBottom.borderWidth", + "variable": "--p-dataview-paginator-bottom-border-width", + "description": "Border width of paginator bottom" + } + ] + }, + "datepicker": { + "description": "DatePicker Design Tokens\n\n[Live Demo](https://www.primeng.org/datepicker/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-datepicker-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "panel.background", + "variable": "--p-datepicker-panel-background", + "description": "Background of panel" + }, + { + "token": "panel.borderColor", + "variable": "--p-datepicker-panel-border-color", + "description": "Border color of panel" + }, + { + "token": "panel.color", + "variable": "--p-datepicker-panel-color", + "description": "Color of panel" + }, + { + "token": "panel.borderRadius", + "variable": "--p-datepicker-panel-border-radius", + "description": "Border radius of panel" + }, + { + "token": "panel.shadow", + "variable": "--p-datepicker-panel-shadow", + "description": "Shadow of panel" + }, + { + "token": "panel.padding", + "variable": "--p-datepicker-panel-padding", + "description": "Padding of panel" + }, + { + "token": "header.background", + "variable": "--p-datepicker-header-background", + "description": "Background of header" + }, + { + "token": "header.borderColor", + "variable": "--p-datepicker-header-border-color", + "description": "Border color of header" + }, + { + "token": "header.color", + "variable": "--p-datepicker-header-color", + "description": "Color of header" + }, + { + "token": "header.padding", + "variable": "--p-datepicker-header-padding", + "description": "Padding of header" + }, + { + "token": "header.fontWeight", + "variable": "--p-datepicker-header-font-weight", + "description": "Font weight of header" + }, + { + "token": "header.gap", + "variable": "--p-datepicker-header-gap", + "description": "Gap of header" + }, + { + "token": "title.gap", + "variable": "--p-datepicker-title-gap", + "description": "Gap of title" + }, + { + "token": "title.fontWeight", + "variable": "--p-datepicker-title-font-weight", + "description": "Font weight of title" + }, + { + "token": "dropdown.width", + "variable": "--p-datepicker-dropdown-width", + "description": "Width of dropdown" + }, + { + "token": "dropdown.borderColor", + "variable": "--p-datepicker-dropdown-border-color", + "description": "Border color of dropdown" + }, + { + "token": "dropdown.hoverBorderColor", + "variable": "--p-datepicker-dropdown-hover-border-color", + "description": "Hover border color of dropdown" + }, + { + "token": "dropdown.activeBorderColor", + "variable": "--p-datepicker-dropdown-active-border-color", + "description": "Active border color of dropdown" + }, + { + "token": "dropdown.borderRadius", + "variable": "--p-datepicker-dropdown-border-radius", + "description": "Border radius of dropdown" + }, + { + "token": "focusRing.width", + "variable": "--p-datepicker-dropdown-focus-ring-width", + "description": "Focus ring width of dropdown" + }, + { + "token": "focusRing.style", + "variable": "--p-datepicker-dropdown-focus-ring-style", + "description": "Focus ring style of dropdown" + }, + { + "token": "focusRing.color", + "variable": "--p-datepicker-dropdown-focus-ring-color", + "description": "Focus ring color of dropdown" + }, + { + "token": "focusRing.offset", + "variable": "--p-datepicker-dropdown-focus-ring-offset", + "description": "Focus ring offset of dropdown" + }, + { + "token": "focusRing.shadow", + "variable": "--p-datepicker-dropdown-focus-ring-shadow", + "description": "Focus ring shadow of dropdown" + }, + { + "token": "dropdown.background", + "variable": "--p-datepicker-dropdown-background", + "description": "Background of dropdown" + }, + { + "token": "dropdown.hoverBackground", + "variable": "--p-datepicker-dropdown-hover-background", + "description": "Hover background of dropdown" + }, + { + "token": "dropdown.activeBackground", + "variable": "--p-datepicker-dropdown-active-background", + "description": "Active background of dropdown" + }, + { + "token": "dropdown.color", + "variable": "--p-datepicker-dropdown-color", + "description": "Color of dropdown" + }, + { + "token": "dropdown.hoverColor", + "variable": "--p-datepicker-dropdown-hover-color", + "description": "Hover color of dropdown" + }, + { + "token": "dropdown.activeColor", + "variable": "--p-datepicker-dropdown-active-color", + "description": "Active color of dropdown" + }, + { + "token": "inputIcon.color", + "variable": "--p-datepicker-input-icon-color", + "description": "Color of input icon" + }, + { + "token": "selectMonth.hoverBackground", + "variable": "--p-datepicker-select-month-hover-background", + "description": "Hover background of select month" + }, + { + "token": "selectMonth.color", + "variable": "--p-datepicker-select-month-color", + "description": "Color of select month" + }, + { + "token": "selectMonth.hoverColor", + "variable": "--p-datepicker-select-month-hover-color", + "description": "Hover color of select month" + }, + { + "token": "selectMonth.padding", + "variable": "--p-datepicker-select-month-padding", + "description": "Padding of select month" + }, + { + "token": "selectMonth.borderRadius", + "variable": "--p-datepicker-select-month-border-radius", + "description": "Border radius of select month" + }, + { + "token": "selectYear.hoverBackground", + "variable": "--p-datepicker-select-year-hover-background", + "description": "Hover background of select year" + }, + { + "token": "selectYear.color", + "variable": "--p-datepicker-select-year-color", + "description": "Color of select year" + }, + { + "token": "selectYear.hoverColor", + "variable": "--p-datepicker-select-year-hover-color", + "description": "Hover color of select year" + }, + { + "token": "selectYear.padding", + "variable": "--p-datepicker-select-year-padding", + "description": "Padding of select year" + }, + { + "token": "selectYear.borderRadius", + "variable": "--p-datepicker-select-year-border-radius", + "description": "Border radius of select year" + }, + { + "token": "group.borderColor", + "variable": "--p-datepicker-group-border-color", + "description": "Border color of group" + }, + { + "token": "group.gap", + "variable": "--p-datepicker-group-gap", + "description": "Gap of group" + }, + { + "token": "dayView.margin", + "variable": "--p-datepicker-day-view-margin", + "description": "Margin of day view" + }, + { + "token": "weekDay.padding", + "variable": "--p-datepicker-week-day-padding", + "description": "Padding of week day" + }, + { + "token": "weekDay.fontWeight", + "variable": "--p-datepicker-week-day-font-weight", + "description": "Font weight of week day" + }, + { + "token": "weekDay.color", + "variable": "--p-datepicker-week-day-color", + "description": "Color of week day" + }, + { + "token": "date.hoverBackground", + "variable": "--p-datepicker-date-hover-background", + "description": "Hover background of date" + }, + { + "token": "date.selectedBackground", + "variable": "--p-datepicker-date-selected-background", + "description": "Selected background of date" + }, + { + "token": "date.rangeSelectedBackground", + "variable": "--p-datepicker-date-range-selected-background", + "description": "Range selected background of date" + }, + { + "token": "date.color", + "variable": "--p-datepicker-date-color", + "description": "Color of date" + }, + { + "token": "date.hoverColor", + "variable": "--p-datepicker-date-hover-color", + "description": "Hover color of date" + }, + { + "token": "date.selectedColor", + "variable": "--p-datepicker-date-selected-color", + "description": "Selected color of date" + }, + { + "token": "date.rangeSelectedColor", + "variable": "--p-datepicker-date-range-selected-color", + "description": "Range selected color of date" + }, + { + "token": "date.width", + "variable": "--p-datepicker-date-width", + "description": "Width of date" + }, + { + "token": "date.height", + "variable": "--p-datepicker-date-height", + "description": "Height of date" + }, + { + "token": "date.borderRadius", + "variable": "--p-datepicker-date-border-radius", + "description": "Border radius of date" + }, + { + "token": "date.padding", + "variable": "--p-datepicker-date-padding", + "description": "Padding of date" + }, + { + "token": "focusRing.width", + "variable": "--p-datepicker-date-focus-ring-width", + "description": "Focus ring width of date" + }, + { + "token": "focusRing.style", + "variable": "--p-datepicker-date-focus-ring-style", + "description": "Focus ring style of date" + }, + { + "token": "focusRing.color", + "variable": "--p-datepicker-date-focus-ring-color", + "description": "Focus ring color of date" + }, + { + "token": "focusRing.offset", + "variable": "--p-datepicker-date-focus-ring-offset", + "description": "Focus ring offset of date" + }, + { + "token": "focusRing.shadow", + "variable": "--p-datepicker-date-focus-ring-shadow", + "description": "Focus ring shadow of date" + }, + { + "token": "monthView.margin", + "variable": "--p-datepicker-month-view-margin", + "description": "Margin of month view" + }, + { + "token": "month.padding", + "variable": "--p-datepicker-month-padding", + "description": "Padding of month" + }, + { + "token": "month.borderRadius", + "variable": "--p-datepicker-month-border-radius", + "description": "Border radius of month" + }, + { + "token": "yearView.margin", + "variable": "--p-datepicker-year-view-margin", + "description": "Margin of year view" + }, + { + "token": "year.borderRadius", + "variable": "--p-datepicker-year-border-radius", + "description": "Border radius of year" + }, + { + "token": "buttonbar.padding", + "variable": "--p-datepicker-buttonbar-padding", + "description": "Padding of buttonbar" + }, + { + "token": "buttonbar.borderColor", + "variable": "--p-datepicker-buttonbar-border-color", + "description": "Border color of buttonbar" + }, + { + "token": "timePicker.padding", + "variable": "--p-datepicker-time-picker-padding", + "description": "Padding of time picker" + }, + { + "token": "timePicker.borderColor", + "variable": "--p-datepicker-time-picker-border-color", + "description": "Border color of time picker" + }, + { + "token": "timePicker.gap", + "variable": "--p-datepicker-time-picker-gap", + "description": "Gap of time picker" + }, + { + "token": "timePicker.buttonGap", + "variable": "--p-datepicker-time-picker-button-gap", + "description": "Button gap of time picker" + }, + { + "token": "today.background", + "variable": "--p-datepicker-today-background", + "description": "Background of today" + }, + { + "token": "today.color", + "variable": "--p-datepicker-today-color", + "description": "Color of today" + } + ] + }, + "dialog": { + "description": "Dialog Design Tokens\n\n[Live Demo](https://www.primeng.org/dialog/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-dialog-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-dialog-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-dialog-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-dialog-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.shadow", + "variable": "--p-dialog-shadow", + "description": "Shadow of root" + }, + { + "token": "header.padding", + "variable": "--p-dialog-header-padding", + "description": "Padding of header" + }, + { + "token": "header.gap", + "variable": "--p-dialog-header-gap", + "description": "Gap of header" + }, + { + "token": "title.fontSize", + "variable": "--p-dialog-title-font-size", + "description": "Font size of title" + }, + { + "token": "title.fontWeight", + "variable": "--p-dialog-title-font-weight", + "description": "Font weight of title" + }, + { + "token": "content.padding", + "variable": "--p-dialog-content-padding", + "description": "Padding of content" + }, + { + "token": "footer.padding", + "variable": "--p-dialog-footer-padding", + "description": "Padding of footer" + }, + { + "token": "footer.gap", + "variable": "--p-dialog-footer-gap", + "description": "Gap of footer" + } + ] + }, + "divider": { + "description": "Divider Design Tokens\n\n[Live Demo](https://www.primeng.org/divider/)", + "tokens": [ + { + "token": "root.borderColor", + "variable": "--p-divider-border-color", + "description": "Border color of root" + }, + { + "token": "content.background", + "variable": "--p-divider-content-background", + "description": "Background of content" + }, + { + "token": "content.color", + "variable": "--p-divider-content-color", + "description": "Color of content" + }, + { + "token": "horizontal.margin", + "variable": "--p-divider-horizontal-margin", + "description": "Margin of horizontal" + }, + { + "token": "horizontal.padding", + "variable": "--p-divider-horizontal-padding", + "description": "Padding of horizontal" + }, + { + "token": "content.padding", + "variable": "--p-divider-horizontal-content-padding", + "description": "Content padding of horizontal" + }, + { + "token": "vertical.margin", + "variable": "--p-divider-vertical-margin", + "description": "Margin of vertical" + }, + { + "token": "vertical.padding", + "variable": "--p-divider-vertical-padding", + "description": "Padding of vertical" + }, + { + "token": "content.padding", + "variable": "--p-divider-vertical-content-padding", + "description": "Content padding of vertical" + } + ] + }, + "dock": { + "description": "Dock Design Tokens\n\n[Live Demo](https://www.primeng.org/dock/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-dock-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-dock-border-color", + "description": "Border color of root" + }, + { + "token": "root.padding", + "variable": "--p-dock-padding", + "description": "Padding of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-dock-border-radius", + "description": "Border radius of root" + }, + { + "token": "item.borderRadius", + "variable": "--p-dock-item-border-radius", + "description": "Border radius of item" + }, + { + "token": "item.padding", + "variable": "--p-dock-item-padding", + "description": "Padding of item" + }, + { + "token": "item.size", + "variable": "--p-dock-item-size", + "description": "Size of item" + }, + { + "token": "focusRing.width", + "variable": "--p-dock-item-focus-ring-width", + "description": "Focus ring width of item" + }, + { + "token": "focusRing.style", + "variable": "--p-dock-item-focus-ring-style", + "description": "Focus ring style of item" + }, + { + "token": "focusRing.color", + "variable": "--p-dock-item-focus-ring-color", + "description": "Focus ring color of item" + }, + { + "token": "focusRing.offset", + "variable": "--p-dock-item-focus-ring-offset", + "description": "Focus ring offset of item" + }, + { + "token": "focusRing.shadow", + "variable": "--p-dock-item-focus-ring-shadow", + "description": "Focus ring shadow of item" + } + ] + }, + "drawer": { + "description": "Drawer Design Tokens\n\n[Live Demo](https://www.primeng.org/drawer/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-drawer-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-drawer-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-drawer-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-drawer-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.shadow", + "variable": "--p-drawer-shadow", + "description": "Shadow of root" + }, + { + "token": "header.padding", + "variable": "--p-drawer-header-padding", + "description": "Padding of header" + }, + { + "token": "title.fontSize", + "variable": "--p-drawer-title-font-size", + "description": "Font size of title" + }, + { + "token": "title.fontWeight", + "variable": "--p-drawer-title-font-weight", + "description": "Font weight of title" + }, + { + "token": "content.padding", + "variable": "--p-drawer-content-padding", + "description": "Padding of content" + } + ] + }, + "dynamicdialog": { + "description": "DynamicDialog Design Tokens\n\n[Live Demo](https://www.primeng.org/dynamicdialog/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-dialog-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-dialog-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-dialog-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-dialog-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.shadow", + "variable": "--p-dialog-shadow", + "description": "Shadow of root" + }, + { + "token": "header.padding", + "variable": "--p-dialog-header-padding", + "description": "Padding of header" + }, + { + "token": "header.gap", + "variable": "--p-dialog-header-gap", + "description": "Gap of header" + }, + { + "token": "title.fontSize", + "variable": "--p-dialog-title-font-size", + "description": "Font size of title" + }, + { + "token": "title.fontWeight", + "variable": "--p-dialog-title-font-weight", + "description": "Font weight of title" + }, + { + "token": "content.padding", + "variable": "--p-dialog-content-padding", + "description": "Padding of content" + }, + { + "token": "footer.padding", + "variable": "--p-dialog-footer-padding", + "description": "Padding of footer" + }, + { + "token": "footer.gap", + "variable": "--p-dialog-footer-gap", + "description": "Gap of footer" + } + ] + }, + "editor": { + "description": "Editor Design Tokens\n\n[Live Demo](https://www.primeng.org/editor/)", + "tokens": [ + { + "token": "toolbar.background", + "variable": "--p-editor-toolbar-background", + "description": "Background of toolbar" + }, + { + "token": "toolbar.borderColor", + "variable": "--p-editor-toolbar-border-color", + "description": "Border color of toolbar" + }, + { + "token": "toolbar.borderRadius", + "variable": "--p-editor-toolbar-border-radius", + "description": "Border radius of toolbar" + }, + { + "token": "toolbarItem.color", + "variable": "--p-editor-toolbar-item-color", + "description": "Color of toolbar item" + }, + { + "token": "toolbarItem.hoverColor", + "variable": "--p-editor-toolbar-item-hover-color", + "description": "Hover color of toolbar item" + }, + { + "token": "toolbarItem.activeColor", + "variable": "--p-editor-toolbar-item-active-color", + "description": "Active color of toolbar item" + }, + { + "token": "overlay.background", + "variable": "--p-editor-overlay-background", + "description": "Background of overlay" + }, + { + "token": "overlay.borderColor", + "variable": "--p-editor-overlay-border-color", + "description": "Border color of overlay" + }, + { + "token": "overlay.borderRadius", + "variable": "--p-editor-overlay-border-radius", + "description": "Border radius of overlay" + }, + { + "token": "overlay.color", + "variable": "--p-editor-overlay-color", + "description": "Color of overlay" + }, + { + "token": "overlay.shadow", + "variable": "--p-editor-overlay-shadow", + "description": "Shadow of overlay" + }, + { + "token": "overlay.padding", + "variable": "--p-editor-overlay-padding", + "description": "Padding of overlay" + }, + { + "token": "overlayOption.focusBackground", + "variable": "--p-editor-overlay-option-focus-background", + "description": "Focus background of overlay option" + }, + { + "token": "overlayOption.color", + "variable": "--p-editor-overlay-option-color", + "description": "Color of overlay option" + }, + { + "token": "overlayOption.focusColor", + "variable": "--p-editor-overlay-option-focus-color", + "description": "Focus color of overlay option" + }, + { + "token": "overlayOption.padding", + "variable": "--p-editor-overlay-option-padding", + "description": "Padding of overlay option" + }, + { + "token": "overlayOption.borderRadius", + "variable": "--p-editor-overlay-option-border-radius", + "description": "Border radius of overlay option" + }, + { + "token": "content.background", + "variable": "--p-editor-content-background", + "description": "Background of content" + }, + { + "token": "content.borderColor", + "variable": "--p-editor-content-border-color", + "description": "Border color of content" + }, + { + "token": "content.color", + "variable": "--p-editor-content-color", + "description": "Color of content" + }, + { + "token": "content.borderRadius", + "variable": "--p-editor-content-border-radius", + "description": "Border radius of content" + } + ] + }, + "fieldset": { + "description": "Fieldset Design Tokens\n\n[Live Demo](https://www.primeng.org/fieldset/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-fieldset-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-fieldset-border-color", + "description": "Border color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-fieldset-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.color", + "variable": "--p-fieldset-color", + "description": "Color of root" + }, + { + "token": "root.padding", + "variable": "--p-fieldset-padding", + "description": "Padding of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-fieldset-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "legend.background", + "variable": "--p-fieldset-legend-background", + "description": "Background of legend" + }, + { + "token": "legend.hoverBackground", + "variable": "--p-fieldset-legend-hover-background", + "description": "Hover background of legend" + }, + { + "token": "legend.color", + "variable": "--p-fieldset-legend-color", + "description": "Color of legend" + }, + { + "token": "legend.hoverColor", + "variable": "--p-fieldset-legend-hover-color", + "description": "Hover color of legend" + }, + { + "token": "legend.borderRadius", + "variable": "--p-fieldset-legend-border-radius", + "description": "Border radius of legend" + }, + { + "token": "legend.borderWidth", + "variable": "--p-fieldset-legend-border-width", + "description": "Border width of legend" + }, + { + "token": "legend.borderColor", + "variable": "--p-fieldset-legend-border-color", + "description": "Border color of legend" + }, + { + "token": "legend.padding", + "variable": "--p-fieldset-legend-padding", + "description": "Padding of legend" + }, + { + "token": "legend.gap", + "variable": "--p-fieldset-legend-gap", + "description": "Gap of legend" + }, + { + "token": "legend.fontWeight", + "variable": "--p-fieldset-legend-font-weight", + "description": "Font weight of legend" + }, + { + "token": "focusRing.width", + "variable": "--p-fieldset-legend-focus-ring-width", + "description": "Focus ring width of legend" + }, + { + "token": "focusRing.style", + "variable": "--p-fieldset-legend-focus-ring-style", + "description": "Focus ring style of legend" + }, + { + "token": "focusRing.color", + "variable": "--p-fieldset-legend-focus-ring-color", + "description": "Focus ring color of legend" + }, + { + "token": "focusRing.offset", + "variable": "--p-fieldset-legend-focus-ring-offset", + "description": "Focus ring offset of legend" + }, + { + "token": "focusRing.shadow", + "variable": "--p-fieldset-legend-focus-ring-shadow", + "description": "Focus ring shadow of legend" + }, + { + "token": "toggleIcon.color", + "variable": "--p-fieldset-toggle-icon-color", + "description": "Color of toggle icon" + }, + { + "token": "toggleIcon.hoverColor", + "variable": "--p-fieldset-toggle-icon-hover-color", + "description": "Hover color of toggle icon" + }, + { + "token": "content.padding", + "variable": "--p-fieldset-content-padding", + "description": "Padding of content" + } + ] + }, + "fileupload": { + "description": "FileUpload Design Tokens\n\n[Live Demo](https://www.primeng.org/fileupload/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-fileupload-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-fileupload-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-fileupload-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-fileupload-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-fileupload-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "header.background", + "variable": "--p-fileupload-header-background", + "description": "Background of header" + }, + { + "token": "header.color", + "variable": "--p-fileupload-header-color", + "description": "Color of header" + }, + { + "token": "header.padding", + "variable": "--p-fileupload-header-padding", + "description": "Padding of header" + }, + { + "token": "header.borderWidth", + "variable": "--p-fileupload-header-border-width", + "description": "Border width of header" + }, + { + "token": "header.borderRadius", + "variable": "--p-fileupload-header-border-radius", + "description": "Border radius of header" + }, + { + "token": "header.gap", + "variable": "--p-fileupload-header-gap", + "description": "Gap of header" + }, + { + "token": "content.highlightBorderColor", + "variable": "--p-fileupload-content-highlight-border-color", + "description": "Highlight border color of content" + }, + { + "token": "content.padding", + "variable": "--p-fileupload-content-padding", + "description": "Padding of content" + }, + { + "token": "file.padding", + "variable": "--p-fileupload-file-padding", + "description": "Padding of file" + }, + { + "token": "file.gap", + "variable": "--p-fileupload-file-gap", + "description": "Gap of file" + }, + { + "token": "file.borderColor", + "variable": "--p-fileupload-file-border-color", + "description": "Border color of file" + }, + { + "token": "info.gap", + "variable": "--p-fileupload-file-info-gap", + "description": "Info gap of file" + }, + { + "token": "progressbar.height", + "variable": "--p-fileupload-progressbar-height", + "description": "Height of progressbar" + }, + { + "token": "basic.gap", + "variable": "--p-fileupload-basic-gap", + "description": "Gap of basic" + } + ] + }, + "floatlabel": { + "description": "FloatLabel Design Tokens\n\n[Live Demo](https://www.primeng.org/floatlabel/)", + "tokens": [ + { + "token": "root.color", + "variable": "--p-floatlabel-color", + "description": "Color of root" + }, + { + "token": "root.focusColor", + "variable": "--p-floatlabel-focus-color", + "description": "Focus color of root" + }, + { + "token": "root.invalidColor", + "variable": "--p-floatlabel-invalid-color", + "description": "Invalid color of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-floatlabel-transition-duration", + "description": "Transition duration of root" + } + ] + }, + "galleria": { + "description": "Galleria Design Tokens\n\n[Live Demo](https://www.primeng.org/galleria/)", + "tokens": [ + { + "token": "root.borderWidth", + "variable": "--p-galleria-border-width", + "description": "Border width of root" + }, + { + "token": "root.borderColor", + "variable": "--p-galleria-border-color", + "description": "Border color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-galleria-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-galleria-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "navButton.background", + "variable": "--p-galleria-nav-button-background", + "description": "Background of nav button" + }, + { + "token": "navButton.hoverBackground", + "variable": "--p-galleria-nav-button-hover-background", + "description": "Hover background of nav button" + }, + { + "token": "navButton.color", + "variable": "--p-galleria-nav-button-color", + "description": "Color of nav button" + }, + { + "token": "navButton.hoverColor", + "variable": "--p-galleria-nav-button-hover-color", + "description": "Hover color of nav button" + }, + { + "token": "navButton.size", + "variable": "--p-galleria-nav-button-size", + "description": "Size of nav button" + }, + { + "token": "navButton.gutter", + "variable": "--p-galleria-nav-button-gutter", + "description": "Gutter of nav button" + }, + { + "token": "prev.borderRadius", + "variable": "--p-galleria-nav-button-prev-border-radius", + "description": "Prev border radius of nav button" + }, + { + "token": "next.borderRadius", + "variable": "--p-galleria-nav-button-next-border-radius", + "description": "Next border radius of nav button" + }, + { + "token": "focusRing.width", + "variable": "--p-galleria-nav-button-focus-ring-width", + "description": "Focus ring width of nav button" + }, + { + "token": "focusRing.style", + "variable": "--p-galleria-nav-button-focus-ring-style", + "description": "Focus ring style of nav button" + }, + { + "token": "focusRing.color", + "variable": "--p-galleria-nav-button-focus-ring-color", + "description": "Focus ring color of nav button" + }, + { + "token": "focusRing.offset", + "variable": "--p-galleria-nav-button-focus-ring-offset", + "description": "Focus ring offset of nav button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-galleria-nav-button-focus-ring-shadow", + "description": "Focus ring shadow of nav button" + }, + { + "token": "navIcon.size", + "variable": "--p-galleria-nav-icon-size", + "description": "Size of nav icon" + }, + { + "token": "thumbnailsContent.background", + "variable": "--p-galleria-thumbnails-content-background", + "description": "Background of thumbnails content" + }, + { + "token": "thumbnailsContent.padding", + "variable": "--p-galleria-thumbnails-content-padding", + "description": "Padding of thumbnails content" + }, + { + "token": "thumbnailNavButton.size", + "variable": "--p-galleria-thumbnail-nav-button-size", + "description": "Size of thumbnail nav button" + }, + { + "token": "thumbnailNavButton.borderRadius", + "variable": "--p-galleria-thumbnail-nav-button-border-radius", + "description": "Border radius of thumbnail nav button" + }, + { + "token": "thumbnailNavButton.gutter", + "variable": "--p-galleria-thumbnail-nav-button-gutter", + "description": "Gutter of thumbnail nav button" + }, + { + "token": "focusRing.width", + "variable": "--p-galleria-thumbnail-nav-button-focus-ring-width", + "description": "Focus ring width of thumbnail nav button" + }, + { + "token": "focusRing.style", + "variable": "--p-galleria-thumbnail-nav-button-focus-ring-style", + "description": "Focus ring style of thumbnail nav button" + }, + { + "token": "focusRing.color", + "variable": "--p-galleria-thumbnail-nav-button-focus-ring-color", + "description": "Focus ring color of thumbnail nav button" + }, + { + "token": "focusRing.offset", + "variable": "--p-galleria-thumbnail-nav-button-focus-ring-offset", + "description": "Focus ring offset of thumbnail nav button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-galleria-thumbnail-nav-button-focus-ring-shadow", + "description": "Focus ring shadow of thumbnail nav button" + }, + { + "token": "thumbnailNavButton.hoverBackground", + "variable": "--p-galleria-thumbnail-nav-button-hover-background", + "description": "Hover background of thumbnail nav button" + }, + { + "token": "thumbnailNavButton.color", + "variable": "--p-galleria-thumbnail-nav-button-color", + "description": "Color of thumbnail nav button" + }, + { + "token": "thumbnailNavButton.hoverColor", + "variable": "--p-galleria-thumbnail-nav-button-hover-color", + "description": "Hover color of thumbnail nav button" + }, + { + "token": "thumbnailNavButtonIcon.size", + "variable": "--p-galleria-thumbnail-nav-button-icon-size", + "description": "Size of thumbnail nav button icon" + }, + { + "token": "caption.background", + "variable": "--p-galleria-caption-background", + "description": "Background of caption" + }, + { + "token": "caption.color", + "variable": "--p-galleria-caption-color", + "description": "Color of caption" + }, + { + "token": "caption.padding", + "variable": "--p-galleria-caption-padding", + "description": "Padding of caption" + }, + { + "token": "indicatorList.gap", + "variable": "--p-galleria-indicator-list-gap", + "description": "Gap of indicator list" + }, + { + "token": "indicatorList.padding", + "variable": "--p-galleria-indicator-list-padding", + "description": "Padding of indicator list" + }, + { + "token": "indicatorButton.width", + "variable": "--p-galleria-indicator-button-width", + "description": "Width of indicator button" + }, + { + "token": "indicatorButton.height", + "variable": "--p-galleria-indicator-button-height", + "description": "Height of indicator button" + }, + { + "token": "indicatorButton.activeBackground", + "variable": "--p-galleria-indicator-button-active-background", + "description": "Active background of indicator button" + }, + { + "token": "indicatorButton.borderRadius", + "variable": "--p-galleria-indicator-button-border-radius", + "description": "Border radius of indicator button" + }, + { + "token": "focusRing.width", + "variable": "--p-galleria-indicator-button-focus-ring-width", + "description": "Focus ring width of indicator button" + }, + { + "token": "focusRing.style", + "variable": "--p-galleria-indicator-button-focus-ring-style", + "description": "Focus ring style of indicator button" + }, + { + "token": "focusRing.color", + "variable": "--p-galleria-indicator-button-focus-ring-color", + "description": "Focus ring color of indicator button" + }, + { + "token": "focusRing.offset", + "variable": "--p-galleria-indicator-button-focus-ring-offset", + "description": "Focus ring offset of indicator button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-galleria-indicator-button-focus-ring-shadow", + "description": "Focus ring shadow of indicator button" + }, + { + "token": "indicatorButton.background", + "variable": "--p-galleria-indicator-button-background", + "description": "Background of indicator button" + }, + { + "token": "indicatorButton.hoverBackground", + "variable": "--p-galleria-indicator-button-hover-background", + "description": "Hover background of indicator button" + }, + { + "token": "insetIndicatorList.background", + "variable": "--p-galleria-inset-indicator-list-background", + "description": "Background of inset indicator list" + }, + { + "token": "insetIndicatorButton.background", + "variable": "--p-galleria-inset-indicator-button-background", + "description": "Background of inset indicator button" + }, + { + "token": "insetIndicatorButton.hoverBackground", + "variable": "--p-galleria-inset-indicator-button-hover-background", + "description": "Hover background of inset indicator button" + }, + { + "token": "insetIndicatorButton.activeBackground", + "variable": "--p-galleria-inset-indicator-button-active-background", + "description": "Active background of inset indicator button" + }, + { + "token": "mask.background", + "variable": "--p-galleria-mask-background", + "description": "Background of mask" + }, + { + "token": "mask.color", + "variable": "--p-galleria-mask-color", + "description": "Color of mask" + }, + { + "token": "closeButton.size", + "variable": "--p-galleria-close-button-size", + "description": "Size of close button" + }, + { + "token": "closeButton.gutter", + "variable": "--p-galleria-close-button-gutter", + "description": "Gutter of close button" + }, + { + "token": "closeButton.background", + "variable": "--p-galleria-close-button-background", + "description": "Background of close button" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-galleria-close-button-hover-background", + "description": "Hover background of close button" + }, + { + "token": "closeButton.color", + "variable": "--p-galleria-close-button-color", + "description": "Color of close button" + }, + { + "token": "closeButton.hoverColor", + "variable": "--p-galleria-close-button-hover-color", + "description": "Hover color of close button" + }, + { + "token": "closeButton.borderRadius", + "variable": "--p-galleria-close-button-border-radius", + "description": "Border radius of close button" + }, + { + "token": "focusRing.width", + "variable": "--p-galleria-close-button-focus-ring-width", + "description": "Focus ring width of close button" + }, + { + "token": "focusRing.style", + "variable": "--p-galleria-close-button-focus-ring-style", + "description": "Focus ring style of close button" + }, + { + "token": "focusRing.color", + "variable": "--p-galleria-close-button-focus-ring-color", + "description": "Focus ring color of close button" + }, + { + "token": "focusRing.offset", + "variable": "--p-galleria-close-button-focus-ring-offset", + "description": "Focus ring offset of close button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-galleria-close-button-focus-ring-shadow", + "description": "Focus ring shadow of close button" + }, + { + "token": "closeButtonIcon.size", + "variable": "--p-galleria-close-button-icon-size", + "description": "Size of close button icon" + } + ] + }, + "iconfield": { + "description": "IconField Design Tokens\n\n[Live Demo](https://www.primeng.org/iconfield/)", + "tokens": [ + { + "token": "icon.color", + "variable": "--p-iconfield-icon-color", + "description": "Color of icon" + } + ] + }, + "image": { + "description": "Image Design Tokens\n\n[Live Demo](https://www.primeng.org/image/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-image-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "icon.size", + "variable": "--p-image-preview-icon-size", + "description": "Icon size of preview" + }, + { + "token": "mask.background", + "variable": "--p-image-preview-mask-background", + "description": "Mask background of preview" + }, + { + "token": "mask.color", + "variable": "--p-image-preview-mask-color", + "description": "Mask color of preview" + }, + { + "token": "position.left", + "variable": "--p-image-toolbar-position-left", + "description": "Position left of toolbar" + }, + { + "token": "position.right", + "variable": "--p-image-toolbar-position-right", + "description": "Position right of toolbar" + }, + { + "token": "position.top", + "variable": "--p-image-toolbar-position-top", + "description": "Position top of toolbar" + }, + { + "token": "position.bottom", + "variable": "--p-image-toolbar-position-bottom", + "description": "Position bottom of toolbar" + }, + { + "token": "toolbar.blur", + "variable": "--p-image-toolbar-blur", + "description": "Blur of toolbar" + }, + { + "token": "toolbar.background", + "variable": "--p-image-toolbar-background", + "description": "Background of toolbar" + }, + { + "token": "toolbar.borderColor", + "variable": "--p-image-toolbar-border-color", + "description": "Border color of toolbar" + }, + { + "token": "toolbar.borderWidth", + "variable": "--p-image-toolbar-border-width", + "description": "Border width of toolbar" + }, + { + "token": "toolbar.borderRadius", + "variable": "--p-image-toolbar-border-radius", + "description": "Border radius of toolbar" + }, + { + "token": "toolbar.padding", + "variable": "--p-image-toolbar-padding", + "description": "Padding of toolbar" + }, + { + "token": "toolbar.gap", + "variable": "--p-image-toolbar-gap", + "description": "Gap of toolbar" + }, + { + "token": "action.hoverBackground", + "variable": "--p-image-action-hover-background", + "description": "Hover background of action" + }, + { + "token": "action.color", + "variable": "--p-image-action-color", + "description": "Color of action" + }, + { + "token": "action.hoverColor", + "variable": "--p-image-action-hover-color", + "description": "Hover color of action" + }, + { + "token": "action.size", + "variable": "--p-image-action-size", + "description": "Size of action" + }, + { + "token": "action.iconSize", + "variable": "--p-image-action-icon-size", + "description": "Icon size of action" + }, + { + "token": "action.borderRadius", + "variable": "--p-image-action-border-radius", + "description": "Border radius of action" + }, + { + "token": "focusRing.width", + "variable": "--p-image-action-focus-ring-width", + "description": "Focus ring width of action" + }, + { + "token": "focusRing.style", + "variable": "--p-image-action-focus-ring-style", + "description": "Focus ring style of action" + }, + { + "token": "focusRing.color", + "variable": "--p-image-action-focus-ring-color", + "description": "Focus ring color of action" + }, + { + "token": "focusRing.offset", + "variable": "--p-image-action-focus-ring-offset", + "description": "Focus ring offset of action" + }, + { + "token": "focusRing.shadow", + "variable": "--p-image-action-focus-ring-shadow", + "description": "Focus ring shadow of action" + } + ] + }, + "": { + "description": "[Live Demo](https://www.primeng.org/)", + "tokens": [] + }, + "inlinemessage": { + "description": "InlineMessage Design Tokens\n\n[Live Demo](https://www.primeng.org/inlinemessage/)", + "tokens": [ + { + "token": "root.padding", + "variable": "--p-inlinemessage-padding", + "description": "Padding of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-inlinemessage-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.gap", + "variable": "--p-inlinemessage-gap", + "description": "Gap of root" + }, + { + "token": "text.fontWeight", + "variable": "--p-inlinemessage-text-font-weight", + "description": "Font weight of text" + }, + { + "token": "icon.size", + "variable": "--p-inlinemessage-icon-size", + "description": "Size of icon" + }, + { + "token": "info.background", + "variable": "--p-inlinemessage-info-background", + "description": "Background of info" + }, + { + "token": "info.borderColor", + "variable": "--p-inlinemessage-info-border-color", + "description": "Border color of info" + }, + { + "token": "info.color", + "variable": "--p-inlinemessage-info-color", + "description": "Color of info" + }, + { + "token": "info.shadow", + "variable": "--p-inlinemessage-info-shadow", + "description": "Shadow of info" + }, + { + "token": "success.background", + "variable": "--p-inlinemessage-success-background", + "description": "Background of success" + }, + { + "token": "success.borderColor", + "variable": "--p-inlinemessage-success-border-color", + "description": "Border color of success" + }, + { + "token": "success.color", + "variable": "--p-inlinemessage-success-color", + "description": "Color of success" + }, + { + "token": "success.shadow", + "variable": "--p-inlinemessage-success-shadow", + "description": "Shadow of success" + }, + { + "token": "warn.background", + "variable": "--p-inlinemessage-warn-background", + "description": "Background of warn" + }, + { + "token": "warn.borderColor", + "variable": "--p-inlinemessage-warn-border-color", + "description": "Border color of warn" + }, + { + "token": "warn.color", + "variable": "--p-inlinemessage-warn-color", + "description": "Color of warn" + }, + { + "token": "warn.shadow", + "variable": "--p-inlinemessage-warn-shadow", + "description": "Shadow of warn" + }, + { + "token": "error.background", + "variable": "--p-inlinemessage-error-background", + "description": "Background of error" + }, + { + "token": "error.borderColor", + "variable": "--p-inlinemessage-error-border-color", + "description": "Border color of error" + }, + { + "token": "error.color", + "variable": "--p-inlinemessage-error-color", + "description": "Color of error" + }, + { + "token": "error.shadow", + "variable": "--p-inlinemessage-error-shadow", + "description": "Shadow of error" + }, + { + "token": "secondary.background", + "variable": "--p-inlinemessage-secondary-background", + "description": "Background of secondary" + }, + { + "token": "secondary.borderColor", + "variable": "--p-inlinemessage-secondary-border-color", + "description": "Border color of secondary" + }, + { + "token": "secondary.color", + "variable": "--p-inlinemessage-secondary-color", + "description": "Color of secondary" + }, + { + "token": "secondary.shadow", + "variable": "--p-inlinemessage-secondary-shadow", + "description": "Shadow of secondary" + }, + { + "token": "contrast.background", + "variable": "--p-inlinemessage-contrast-background", + "description": "Background of contrast" + }, + { + "token": "contrast.borderColor", + "variable": "--p-inlinemessage-contrast-border-color", + "description": "Border color of contrast" + }, + { + "token": "contrast.color", + "variable": "--p-inlinemessage-contrast-color", + "description": "Color of contrast" + }, + { + "token": "contrast.shadow", + "variable": "--p-inlinemessage-contrast-shadow", + "description": "Shadow of contrast" + } + ] + }, + "inplace": { + "description": "Inplace Design Tokens\n\n[Live Demo](https://www.primeng.org/inplace/)", + "tokens": [ + { + "token": "root.padding", + "variable": "--p-inplace-padding", + "description": "Padding of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-inplace-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-inplace-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-inplace-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-inplace-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-inplace-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-inplace-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-inplace-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "display.hoverBackground", + "variable": "--p-inplace-display-hover-background", + "description": "Hover background of display" + }, + { + "token": "display.hoverColor", + "variable": "--p-inplace-display-hover-color", + "description": "Hover color of display" + } + ] + }, + "inputchips": { + "description": "InputChips Design Tokens\n\n[Live Demo](https://www.primeng.org/inputchips/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-inputchips-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-inputchips-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-inputchips-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.filledFocusBackground", + "variable": "--p-inputchips-filled-focus-background", + "description": "Filled focus background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-inputchips-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-inputchips-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-inputchips-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-inputchips-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-inputchips-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-inputchips-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.placeholderColor", + "variable": "--p-inputchips-placeholder-color", + "description": "Placeholder color of root" + }, + { + "token": "root.shadow", + "variable": "--p-inputchips-shadow", + "description": "Shadow of root" + }, + { + "token": "root.paddingX", + "variable": "--p-inputchips-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-inputchips-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-inputchips-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-inputchips-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-inputchips-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-inputchips-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-inputchips-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-inputchips-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-inputchips-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "chip.borderRadius", + "variable": "--p-inputchips-chip-border-radius", + "description": "Border radius of chip" + }, + { + "token": "chip.focusBackground", + "variable": "--p-inputchips-chip-focus-background", + "description": "Focus background of chip" + }, + { + "token": "chip.color", + "variable": "--p-inputchips-chip-color", + "description": "Color of chip" + } + ] + }, + "inputgroup": { + "description": "InputGroup Design Tokens\n\n[Live Demo](https://www.primeng.org/inputgroup/)", + "tokens": [ + { + "token": "addon.background", + "variable": "--p-inputgroup-addon-background", + "description": "Background of addon" + }, + { + "token": "addon.borderColor", + "variable": "--p-inputgroup-addon-border-color", + "description": "Border color of addon" + }, + { + "token": "addon.color", + "variable": "--p-inputgroup-addon-color", + "description": "Color of addon" + }, + { + "token": "addon.borderRadius", + "variable": "--p-inputgroup-addon-border-radius", + "description": "Border radius of addon" + }, + { + "token": "addon.padding", + "variable": "--p-inputgroup-addon-padding", + "description": "Padding of addon" + }, + { + "token": "addon.minWidth", + "variable": "--p-inputgroup-addon-min-width", + "description": "Min width of addon" + } + ] + }, + "inputnumber": { + "description": "InputNumber Design Tokens\n\n[Live Demo](https://www.primeng.org/inputnumber/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-inputnumber-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "button.width", + "variable": "--p-inputnumber-button-width", + "description": "Width of button" + }, + { + "token": "button.borderRadius", + "variable": "--p-inputnumber-button-border-radius", + "description": "Border radius of button" + }, + { + "token": "button.verticalPadding", + "variable": "--p-inputnumber-button-vertical-padding", + "description": "Vertical padding of button" + }, + { + "token": "button.background", + "variable": "--p-inputnumber-button-background", + "description": "Background of button" + }, + { + "token": "button.hoverBackground", + "variable": "--p-inputnumber-button-hover-background", + "description": "Hover background of button" + }, + { + "token": "button.activeBackground", + "variable": "--p-inputnumber-button-active-background", + "description": "Active background of button" + }, + { + "token": "button.borderColor", + "variable": "--p-inputnumber-button-border-color", + "description": "Border color of button" + }, + { + "token": "button.hoverBorderColor", + "variable": "--p-inputnumber-button-hover-border-color", + "description": "Hover border color of button" + }, + { + "token": "button.activeBorderColor", + "variable": "--p-inputnumber-button-active-border-color", + "description": "Active border color of button" + }, + { + "token": "button.color", + "variable": "--p-inputnumber-button-color", + "description": "Color of button" + }, + { + "token": "button.hoverColor", + "variable": "--p-inputnumber-button-hover-color", + "description": "Hover color of button" + }, + { + "token": "button.activeColor", + "variable": "--p-inputnumber-button-active-color", + "description": "Active color of button" + } + ] + }, + "inputtext": { + "description": "InputText Design Tokens\n\n[Live Demo](https://www.primeng.org/inputtext/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-inputtext-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-inputtext-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-inputtext-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.filledHoverBackground", + "variable": "--p-inputtext-filled-hover-background", + "description": "Filled hover background of root" + }, + { + "token": "root.filledFocusBackground", + "variable": "--p-inputtext-filled-focus-background", + "description": "Filled focus background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-inputtext-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-inputtext-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-inputtext-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-inputtext-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-inputtext-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-inputtext-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.placeholderColor", + "variable": "--p-inputtext-placeholder-color", + "description": "Placeholder color of root" + }, + { + "token": "root.invalidPlaceholderColor", + "variable": "--p-inputtext-invalid-placeholder-color", + "description": "Invalid placeholder color of root" + }, + { + "token": "root.shadow", + "variable": "--p-inputtext-shadow", + "description": "Shadow of root" + }, + { + "token": "root.paddingX", + "variable": "--p-inputtext-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-inputtext-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-inputtext-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-inputtext-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-inputtext-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-inputtext-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-inputtext-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-inputtext-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-inputtext-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "sm.fontSize", + "variable": "--p-inputtext-sm-font-size", + "description": "Sm font size of root" + }, + { + "token": "sm.paddingX", + "variable": "--p-inputtext-sm-padding-x", + "description": "Sm padding x of root" + }, + { + "token": "sm.paddingY", + "variable": "--p-inputtext-sm-padding-y", + "description": "Sm padding y of root" + }, + { + "token": "lg.fontSize", + "variable": "--p-inputtext-lg-font-size", + "description": "Lg font size of root" + }, + { + "token": "lg.paddingX", + "variable": "--p-inputtext-lg-padding-x", + "description": "Lg padding x of root" + }, + { + "token": "lg.paddingY", + "variable": "--p-inputtext-lg-padding-y", + "description": "Lg padding y of root" + } + ] + }, + "knob": { + "description": "Knob Design Tokens\n\n[Live Demo](https://www.primeng.org/knob/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-knob-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "focusRing.width", + "variable": "--p-knob-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-knob-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-knob-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-knob-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-knob-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "value.background", + "variable": "--p-knob-value-background", + "description": "Background of value" + }, + { + "token": "range.background", + "variable": "--p-knob-range-background", + "description": "Background of range" + }, + { + "token": "text.color", + "variable": "--p-knob-text-color", + "description": "Color of text" + } + ] + }, + "listbox": { + "description": "Listbox Design Tokens\n\n[Live Demo](https://www.primeng.org/listbox/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-listbox-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-listbox-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-listbox-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-listbox-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-listbox-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-listbox-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-listbox-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-listbox-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.shadow", + "variable": "--p-listbox-shadow", + "description": "Shadow of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-listbox-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-listbox-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-listbox-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-listbox-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-listbox-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-listbox-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-listbox-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "list.padding", + "variable": "--p-listbox-list-padding", + "description": "Padding of list" + }, + { + "token": "list.gap", + "variable": "--p-listbox-list-gap", + "description": "Gap of list" + }, + { + "token": "header.padding", + "variable": "--p-listbox-list-header-padding", + "description": "Header padding of list" + }, + { + "token": "option.focusBackground", + "variable": "--p-listbox-option-focus-background", + "description": "Focus background of option" + }, + { + "token": "option.selectedBackground", + "variable": "--p-listbox-option-selected-background", + "description": "Selected background of option" + }, + { + "token": "option.selectedFocusBackground", + "variable": "--p-listbox-option-selected-focus-background", + "description": "Selected focus background of option" + }, + { + "token": "option.color", + "variable": "--p-listbox-option-color", + "description": "Color of option" + }, + { + "token": "option.focusColor", + "variable": "--p-listbox-option-focus-color", + "description": "Focus color of option" + }, + { + "token": "option.selectedColor", + "variable": "--p-listbox-option-selected-color", + "description": "Selected color of option" + }, + { + "token": "option.selectedFocusColor", + "variable": "--p-listbox-option-selected-focus-color", + "description": "Selected focus color of option" + }, + { + "token": "option.padding", + "variable": "--p-listbox-option-padding", + "description": "Padding of option" + }, + { + "token": "option.borderRadius", + "variable": "--p-listbox-option-border-radius", + "description": "Border radius of option" + }, + { + "token": "option.stripedBackground", + "variable": "--p-listbox-option-striped-background", + "description": "Striped background of option" + }, + { + "token": "optionGroup.background", + "variable": "--p-listbox-option-group-background", + "description": "Background of option group" + }, + { + "token": "optionGroup.color", + "variable": "--p-listbox-option-group-color", + "description": "Color of option group" + }, + { + "token": "optionGroup.fontWeight", + "variable": "--p-listbox-option-group-font-weight", + "description": "Font weight of option group" + }, + { + "token": "optionGroup.padding", + "variable": "--p-listbox-option-group-padding", + "description": "Padding of option group" + }, + { + "token": "checkmark.color", + "variable": "--p-listbox-checkmark-color", + "description": "Color of checkmark" + }, + { + "token": "checkmark.gutterStart", + "variable": "--p-listbox-checkmark-gutter-start", + "description": "Gutter start of checkmark" + }, + { + "token": "checkmark.gutterEnd", + "variable": "--p-listbox-checkmark-gutter-end", + "description": "Gutter end of checkmark" + }, + { + "token": "emptyMessage.padding", + "variable": "--p-listbox-empty-message-padding", + "description": "Padding of empty message" + } + ] + }, + "megamenu": { + "description": "MegaMenu Design Tokens\n\n[Live Demo](https://www.primeng.org/megamenu/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-megamenu-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-megamenu-border-color", + "description": "Border color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-megamenu-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.color", + "variable": "--p-megamenu-color", + "description": "Color of root" + }, + { + "token": "root.gap", + "variable": "--p-megamenu-gap", + "description": "Gap of root" + }, + { + "token": "verticalOrientation.padding", + "variable": "--p-megamenu-vertical-orientation-padding", + "description": "Vertical orientation padding of root" + }, + { + "token": "verticalOrientation.gap", + "variable": "--p-megamenu-vertical-orientation-gap", + "description": "Vertical orientation gap of root" + }, + { + "token": "horizontalOrientation.padding", + "variable": "--p-megamenu-horizontal-orientation-padding", + "description": "Horizontal orientation padding of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-megamenu-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "baseItem.borderRadius", + "variable": "--p-megamenu-base-item-border-radius", + "description": "Border radius of base item" + }, + { + "token": "baseItem.padding", + "variable": "--p-megamenu-base-item-padding", + "description": "Padding of base item" + }, + { + "token": "item.focusBackground", + "variable": "--p-megamenu-item-focus-background", + "description": "Focus background of item" + }, + { + "token": "item.activeBackground", + "variable": "--p-megamenu-item-active-background", + "description": "Active background of item" + }, + { + "token": "item.color", + "variable": "--p-megamenu-item-color", + "description": "Color of item" + }, + { + "token": "item.focusColor", + "variable": "--p-megamenu-item-focus-color", + "description": "Focus color of item" + }, + { + "token": "item.activeColor", + "variable": "--p-megamenu-item-active-color", + "description": "Active color of item" + }, + { + "token": "item.padding", + "variable": "--p-megamenu-item-padding", + "description": "Padding of item" + }, + { + "token": "item.borderRadius", + "variable": "--p-megamenu-item-border-radius", + "description": "Border radius of item" + }, + { + "token": "item.gap", + "variable": "--p-megamenu-item-gap", + "description": "Gap of item" + }, + { + "token": "icon.color", + "variable": "--p-megamenu-item-icon-color", + "description": "Icon color of item" + }, + { + "token": "icon.focusColor", + "variable": "--p-megamenu-item-icon-focus-color", + "description": "Icon focus color of item" + }, + { + "token": "icon.activeColor", + "variable": "--p-megamenu-item-icon-active-color", + "description": "Icon active color of item" + }, + { + "token": "overlay.padding", + "variable": "--p-megamenu-overlay-padding", + "description": "Padding of overlay" + }, + { + "token": "overlay.background", + "variable": "--p-megamenu-overlay-background", + "description": "Background of overlay" + }, + { + "token": "overlay.borderColor", + "variable": "--p-megamenu-overlay-border-color", + "description": "Border color of overlay" + }, + { + "token": "overlay.borderRadius", + "variable": "--p-megamenu-overlay-border-radius", + "description": "Border radius of overlay" + }, + { + "token": "overlay.color", + "variable": "--p-megamenu-overlay-color", + "description": "Color of overlay" + }, + { + "token": "overlay.shadow", + "variable": "--p-megamenu-overlay-shadow", + "description": "Shadow of overlay" + }, + { + "token": "overlay.gap", + "variable": "--p-megamenu-overlay-gap", + "description": "Gap of overlay" + }, + { + "token": "submenu.padding", + "variable": "--p-megamenu-submenu-padding", + "description": "Padding of submenu" + }, + { + "token": "submenu.gap", + "variable": "--p-megamenu-submenu-gap", + "description": "Gap of submenu" + }, + { + "token": "submenuLabel.padding", + "variable": "--p-megamenu-submenu-label-padding", + "description": "Padding of submenu label" + }, + { + "token": "submenuLabel.fontWeight", + "variable": "--p-megamenu-submenu-label-font-weight", + "description": "Font weight of submenu label" + }, + { + "token": "submenuLabel.background", + "variable": "--p-megamenu-submenu-label-background", + "description": "Background of submenu label" + }, + { + "token": "submenuLabel.color", + "variable": "--p-megamenu-submenu-label-color", + "description": "Color of submenu label" + }, + { + "token": "submenuIcon.size", + "variable": "--p-megamenu-submenu-icon-size", + "description": "Size of submenu icon" + }, + { + "token": "submenuIcon.color", + "variable": "--p-megamenu-submenu-icon-color", + "description": "Color of submenu icon" + }, + { + "token": "submenuIcon.focusColor", + "variable": "--p-megamenu-submenu-icon-focus-color", + "description": "Focus color of submenu icon" + }, + { + "token": "submenuIcon.activeColor", + "variable": "--p-megamenu-submenu-icon-active-color", + "description": "Active color of submenu icon" + }, + { + "token": "separator.borderColor", + "variable": "--p-megamenu-separator-border-color", + "description": "Border color of separator" + }, + { + "token": "mobileButton.borderRadius", + "variable": "--p-megamenu-mobile-button-border-radius", + "description": "Border radius of mobile button" + }, + { + "token": "mobileButton.size", + "variable": "--p-megamenu-mobile-button-size", + "description": "Size of mobile button" + }, + { + "token": "mobileButton.color", + "variable": "--p-megamenu-mobile-button-color", + "description": "Color of mobile button" + }, + { + "token": "mobileButton.hoverColor", + "variable": "--p-megamenu-mobile-button-hover-color", + "description": "Hover color of mobile button" + }, + { + "token": "mobileButton.hoverBackground", + "variable": "--p-megamenu-mobile-button-hover-background", + "description": "Hover background of mobile button" + }, + { + "token": "focusRing.width", + "variable": "--p-megamenu-mobile-button-focus-ring-width", + "description": "Focus ring width of mobile button" + }, + { + "token": "focusRing.style", + "variable": "--p-megamenu-mobile-button-focus-ring-style", + "description": "Focus ring style of mobile button" + }, + { + "token": "focusRing.color", + "variable": "--p-megamenu-mobile-button-focus-ring-color", + "description": "Focus ring color of mobile button" + }, + { + "token": "focusRing.offset", + "variable": "--p-megamenu-mobile-button-focus-ring-offset", + "description": "Focus ring offset of mobile button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-megamenu-mobile-button-focus-ring-shadow", + "description": "Focus ring shadow of mobile button" + } + ] + }, + "menu": { + "description": "Menu Design Tokens\n\n[Live Demo](https://www.primeng.org/menu/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-menu-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-menu-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-menu-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-menu-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.shadow", + "variable": "--p-menu-shadow", + "description": "Shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-menu-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "list.padding", + "variable": "--p-menu-list-padding", + "description": "Padding of list" + }, + { + "token": "list.gap", + "variable": "--p-menu-list-gap", + "description": "Gap of list" + }, + { + "token": "item.focusBackground", + "variable": "--p-menu-item-focus-background", + "description": "Focus background of item" + }, + { + "token": "item.color", + "variable": "--p-menu-item-color", + "description": "Color of item" + }, + { + "token": "item.focusColor", + "variable": "--p-menu-item-focus-color", + "description": "Focus color of item" + }, + { + "token": "item.padding", + "variable": "--p-menu-item-padding", + "description": "Padding of item" + }, + { + "token": "item.borderRadius", + "variable": "--p-menu-item-border-radius", + "description": "Border radius of item" + }, + { + "token": "item.gap", + "variable": "--p-menu-item-gap", + "description": "Gap of item" + }, + { + "token": "icon.color", + "variable": "--p-menu-item-icon-color", + "description": "Icon color of item" + }, + { + "token": "icon.focusColor", + "variable": "--p-menu-item-icon-focus-color", + "description": "Icon focus color of item" + }, + { + "token": "submenuLabel.padding", + "variable": "--p-menu-submenu-label-padding", + "description": "Padding of submenu label" + }, + { + "token": "submenuLabel.fontWeight", + "variable": "--p-menu-submenu-label-font-weight", + "description": "Font weight of submenu label" + }, + { + "token": "submenuLabel.background", + "variable": "--p-menu-submenu-label-background", + "description": "Background of submenu label" + }, + { + "token": "submenuLabel.color", + "variable": "--p-menu-submenu-label-color", + "description": "Color of submenu label" + }, + { + "token": "separator.borderColor", + "variable": "--p-menu-separator-border-color", + "description": "Border color of separator" + } + ] + }, + "menubar": { + "description": "Menubar Design Tokens\n\n[Live Demo](https://www.primeng.org/menubar/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-menubar-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-menubar-border-color", + "description": "Border color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-menubar-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.color", + "variable": "--p-menubar-color", + "description": "Color of root" + }, + { + "token": "root.gap", + "variable": "--p-menubar-gap", + "description": "Gap of root" + }, + { + "token": "root.padding", + "variable": "--p-menubar-padding", + "description": "Padding of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-menubar-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "baseItem.borderRadius", + "variable": "--p-menubar-base-item-border-radius", + "description": "Border radius of base item" + }, + { + "token": "baseItem.padding", + "variable": "--p-menubar-base-item-padding", + "description": "Padding of base item" + }, + { + "token": "item.focusBackground", + "variable": "--p-menubar-item-focus-background", + "description": "Focus background of item" + }, + { + "token": "item.activeBackground", + "variable": "--p-menubar-item-active-background", + "description": "Active background of item" + }, + { + "token": "item.color", + "variable": "--p-menubar-item-color", + "description": "Color of item" + }, + { + "token": "item.focusColor", + "variable": "--p-menubar-item-focus-color", + "description": "Focus color of item" + }, + { + "token": "item.activeColor", + "variable": "--p-menubar-item-active-color", + "description": "Active color of item" + }, + { + "token": "item.padding", + "variable": "--p-menubar-item-padding", + "description": "Padding of item" + }, + { + "token": "item.borderRadius", + "variable": "--p-menubar-item-border-radius", + "description": "Border radius of item" + }, + { + "token": "item.gap", + "variable": "--p-menubar-item-gap", + "description": "Gap of item" + }, + { + "token": "icon.color", + "variable": "--p-menubar-item-icon-color", + "description": "Icon color of item" + }, + { + "token": "icon.focusColor", + "variable": "--p-menubar-item-icon-focus-color", + "description": "Icon focus color of item" + }, + { + "token": "icon.activeColor", + "variable": "--p-menubar-item-icon-active-color", + "description": "Icon active color of item" + }, + { + "token": "submenu.padding", + "variable": "--p-menubar-submenu-padding", + "description": "Padding of submenu" + }, + { + "token": "submenu.gap", + "variable": "--p-menubar-submenu-gap", + "description": "Gap of submenu" + }, + { + "token": "submenu.background", + "variable": "--p-menubar-submenu-background", + "description": "Background of submenu" + }, + { + "token": "submenu.borderColor", + "variable": "--p-menubar-submenu-border-color", + "description": "Border color of submenu" + }, + { + "token": "submenu.borderRadius", + "variable": "--p-menubar-submenu-border-radius", + "description": "Border radius of submenu" + }, + { + "token": "submenu.shadow", + "variable": "--p-menubar-submenu-shadow", + "description": "Shadow of submenu" + }, + { + "token": "submenu.mobileIndent", + "variable": "--p-menubar-submenu-mobile-indent", + "description": "Mobile indent of submenu" + }, + { + "token": "submenuIcon.size", + "variable": "--p-menubar-submenu-icon-size", + "description": "Size of submenu icon" + }, + { + "token": "submenuIcon.color", + "variable": "--p-menubar-submenu-icon-color", + "description": "Color of submenu icon" + }, + { + "token": "submenuIcon.focusColor", + "variable": "--p-menubar-submenu-icon-focus-color", + "description": "Focus color of submenu icon" + }, + { + "token": "submenuIcon.activeColor", + "variable": "--p-menubar-submenu-icon-active-color", + "description": "Active color of submenu icon" + }, + { + "token": "separator.borderColor", + "variable": "--p-menubar-separator-border-color", + "description": "Border color of separator" + }, + { + "token": "mobileButton.borderRadius", + "variable": "--p-menubar-mobile-button-border-radius", + "description": "Border radius of mobile button" + }, + { + "token": "mobileButton.size", + "variable": "--p-menubar-mobile-button-size", + "description": "Size of mobile button" + }, + { + "token": "mobileButton.color", + "variable": "--p-menubar-mobile-button-color", + "description": "Color of mobile button" + }, + { + "token": "mobileButton.hoverColor", + "variable": "--p-menubar-mobile-button-hover-color", + "description": "Hover color of mobile button" + }, + { + "token": "mobileButton.hoverBackground", + "variable": "--p-menubar-mobile-button-hover-background", + "description": "Hover background of mobile button" + }, + { + "token": "focusRing.width", + "variable": "--p-menubar-mobile-button-focus-ring-width", + "description": "Focus ring width of mobile button" + }, + { + "token": "focusRing.style", + "variable": "--p-menubar-mobile-button-focus-ring-style", + "description": "Focus ring style of mobile button" + }, + { + "token": "focusRing.color", + "variable": "--p-menubar-mobile-button-focus-ring-color", + "description": "Focus ring color of mobile button" + }, + { + "token": "focusRing.offset", + "variable": "--p-menubar-mobile-button-focus-ring-offset", + "description": "Focus ring offset of mobile button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-menubar-mobile-button-focus-ring-shadow", + "description": "Focus ring shadow of mobile button" + } + ] + }, + "message": { + "description": "Message Design Tokens\n\n[Live Demo](https://www.primeng.org/message/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-message-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.borderWidth", + "variable": "--p-message-border-width", + "description": "Border width of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-message-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "content.padding", + "variable": "--p-message-content-padding", + "description": "Padding of content" + }, + { + "token": "content.gap", + "variable": "--p-message-content-gap", + "description": "Gap of content" + }, + { + "token": "text.fontSize", + "variable": "--p-message-text-font-size", + "description": "Font size of text" + }, + { + "token": "text.fontWeight", + "variable": "--p-message-text-font-weight", + "description": "Font weight of text" + }, + { + "token": "icon.size", + "variable": "--p-message-icon-size", + "description": "Size of icon" + }, + { + "token": "closeButton.width", + "variable": "--p-message-close-button-width", + "description": "Width of close button" + }, + { + "token": "closeButton.height", + "variable": "--p-message-close-button-height", + "description": "Height of close button" + }, + { + "token": "closeButton.borderRadius", + "variable": "--p-message-close-button-border-radius", + "description": "Border radius of close button" + }, + { + "token": "focusRing.width", + "variable": "--p-message-close-button-focus-ring-width", + "description": "Focus ring width of close button" + }, + { + "token": "focusRing.style", + "variable": "--p-message-close-button-focus-ring-style", + "description": "Focus ring style of close button" + }, + { + "token": "focusRing.offset", + "variable": "--p-message-close-button-focus-ring-offset", + "description": "Focus ring offset of close button" + }, + { + "token": "closeIcon.size", + "variable": "--p-message-close-icon-size", + "description": "Size of close icon" + }, + { + "token": "info.background", + "variable": "--p-message-info-background", + "description": "Background of info" + }, + { + "token": "info.borderColor", + "variable": "--p-message-info-border-color", + "description": "Border color of info" + }, + { + "token": "info.color", + "variable": "--p-message-info-color", + "description": "Color of info" + }, + { + "token": "info.shadow", + "variable": "--p-message-info-shadow", + "description": "Shadow of info" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-message-info-close-button-hover-background", + "description": "Close button hover background of info" + }, + { + "token": "focusRing.color", + "variable": "--p-message-info-close-button-focus-ring-color", + "description": "Close button focus ring color of info" + }, + { + "token": "focusRing.shadow", + "variable": "--p-message-info-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of info" + }, + { + "token": "success.background", + "variable": "--p-message-success-background", + "description": "Background of success" + }, + { + "token": "success.borderColor", + "variable": "--p-message-success-border-color", + "description": "Border color of success" + }, + { + "token": "success.color", + "variable": "--p-message-success-color", + "description": "Color of success" + }, + { + "token": "success.shadow", + "variable": "--p-message-success-shadow", + "description": "Shadow of success" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-message-success-close-button-hover-background", + "description": "Close button hover background of success" + }, + { + "token": "focusRing.color", + "variable": "--p-message-success-close-button-focus-ring-color", + "description": "Close button focus ring color of success" + }, + { + "token": "focusRing.shadow", + "variable": "--p-message-success-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of success" + }, + { + "token": "warn.background", + "variable": "--p-message-warn-background", + "description": "Background of warn" + }, + { + "token": "warn.borderColor", + "variable": "--p-message-warn-border-color", + "description": "Border color of warn" + }, + { + "token": "warn.color", + "variable": "--p-message-warn-color", + "description": "Color of warn" + }, + { + "token": "warn.shadow", + "variable": "--p-message-warn-shadow", + "description": "Shadow of warn" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-message-warn-close-button-hover-background", + "description": "Close button hover background of warn" + }, + { + "token": "focusRing.color", + "variable": "--p-message-warn-close-button-focus-ring-color", + "description": "Close button focus ring color of warn" + }, + { + "token": "focusRing.shadow", + "variable": "--p-message-warn-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of warn" + }, + { + "token": "error.background", + "variable": "--p-message-error-background", + "description": "Background of error" + }, + { + "token": "error.borderColor", + "variable": "--p-message-error-border-color", + "description": "Border color of error" + }, + { + "token": "error.color", + "variable": "--p-message-error-color", + "description": "Color of error" + }, + { + "token": "error.shadow", + "variable": "--p-message-error-shadow", + "description": "Shadow of error" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-message-error-close-button-hover-background", + "description": "Close button hover background of error" + }, + { + "token": "focusRing.color", + "variable": "--p-message-error-close-button-focus-ring-color", + "description": "Close button focus ring color of error" + }, + { + "token": "focusRing.shadow", + "variable": "--p-message-error-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of error" + }, + { + "token": "secondary.background", + "variable": "--p-message-secondary-background", + "description": "Background of secondary" + }, + { + "token": "secondary.borderColor", + "variable": "--p-message-secondary-border-color", + "description": "Border color of secondary" + }, + { + "token": "secondary.color", + "variable": "--p-message-secondary-color", + "description": "Color of secondary" + }, + { + "token": "secondary.shadow", + "variable": "--p-message-secondary-shadow", + "description": "Shadow of secondary" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-message-secondary-close-button-hover-background", + "description": "Close button hover background of secondary" + }, + { + "token": "focusRing.color", + "variable": "--p-message-secondary-close-button-focus-ring-color", + "description": "Close button focus ring color of secondary" + }, + { + "token": "focusRing.shadow", + "variable": "--p-message-secondary-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of secondary" + }, + { + "token": "contrast.background", + "variable": "--p-message-contrast-background", + "description": "Background of contrast" + }, + { + "token": "contrast.borderColor", + "variable": "--p-message-contrast-border-color", + "description": "Border color of contrast" + }, + { + "token": "contrast.color", + "variable": "--p-message-contrast-color", + "description": "Color of contrast" + }, + { + "token": "contrast.shadow", + "variable": "--p-message-contrast-shadow", + "description": "Shadow of contrast" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-message-contrast-close-button-hover-background", + "description": "Close button hover background of contrast" + }, + { + "token": "focusRing.color", + "variable": "--p-message-contrast-close-button-focus-ring-color", + "description": "Close button focus ring color of contrast" + }, + { + "token": "focusRing.shadow", + "variable": "--p-message-contrast-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of contrast" + } + ] + }, + "metergroup": { + "description": "MeterGroup Design Tokens\n\n[Live Demo](https://www.primeng.org/metergroup/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-metergroup-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.gap", + "variable": "--p-metergroup-gap", + "description": "Gap of root" + }, + { + "token": "meters.background", + "variable": "--p-metergroup-meters-background", + "description": "Background of meters" + }, + { + "token": "meters.size", + "variable": "--p-metergroup-meters-size", + "description": "Size of meters" + }, + { + "token": "label.gap", + "variable": "--p-metergroup-label-gap", + "description": "Gap of label" + }, + { + "token": "labelMarker.size", + "variable": "--p-metergroup-label-marker-size", + "description": "Size of label marker" + }, + { + "token": "labelIcon.size", + "variable": "--p-metergroup-label-icon-size", + "description": "Size of label icon" + }, + { + "token": "labelList.verticalGap", + "variable": "--p-metergroup-label-list-vertical-gap", + "description": "Vertical gap of label list" + }, + { + "token": "labelList.horizontalGap", + "variable": "--p-metergroup-label-list-horizontal-gap", + "description": "Horizontal gap of label list" + } + ] + }, + "multiselect": { + "description": "MultiSelect Design Tokens\n\n[Live Demo](https://www.primeng.org/multiselect/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-multiselect-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-multiselect-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-multiselect-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.filledHoverBackground", + "variable": "--p-multiselect-filled-hover-background", + "description": "Filled hover background of root" + }, + { + "token": "root.filledFocusBackground", + "variable": "--p-multiselect-filled-focus-background", + "description": "Filled focus background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-multiselect-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-multiselect-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-multiselect-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-multiselect-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-multiselect-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-multiselect-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.placeholderColor", + "variable": "--p-multiselect-placeholder-color", + "description": "Placeholder color of root" + }, + { + "token": "root.invalidPlaceholderColor", + "variable": "--p-multiselect-invalid-placeholder-color", + "description": "Invalid placeholder color of root" + }, + { + "token": "root.shadow", + "variable": "--p-multiselect-shadow", + "description": "Shadow of root" + }, + { + "token": "root.paddingX", + "variable": "--p-multiselect-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-multiselect-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-multiselect-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-multiselect-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-multiselect-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-multiselect-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-multiselect-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-multiselect-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-multiselect-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "sm.fontSize", + "variable": "--p-multiselect-sm-font-size", + "description": "Sm font size of root" + }, + { + "token": "sm.paddingX", + "variable": "--p-multiselect-sm-padding-x", + "description": "Sm padding x of root" + }, + { + "token": "sm.paddingY", + "variable": "--p-multiselect-sm-padding-y", + "description": "Sm padding y of root" + }, + { + "token": "lg.fontSize", + "variable": "--p-multiselect-lg-font-size", + "description": "Lg font size of root" + }, + { + "token": "lg.paddingX", + "variable": "--p-multiselect-lg-padding-x", + "description": "Lg padding x of root" + }, + { + "token": "lg.paddingY", + "variable": "--p-multiselect-lg-padding-y", + "description": "Lg padding y of root" + }, + { + "token": "dropdown.width", + "variable": "--p-multiselect-dropdown-width", + "description": "Width of dropdown" + }, + { + "token": "dropdown.color", + "variable": "--p-multiselect-dropdown-color", + "description": "Color of dropdown" + }, + { + "token": "overlay.background", + "variable": "--p-multiselect-overlay-background", + "description": "Background of overlay" + }, + { + "token": "overlay.borderColor", + "variable": "--p-multiselect-overlay-border-color", + "description": "Border color of overlay" + }, + { + "token": "overlay.borderRadius", + "variable": "--p-multiselect-overlay-border-radius", + "description": "Border radius of overlay" + }, + { + "token": "overlay.color", + "variable": "--p-multiselect-overlay-color", + "description": "Color of overlay" + }, + { + "token": "overlay.shadow", + "variable": "--p-multiselect-overlay-shadow", + "description": "Shadow of overlay" + }, + { + "token": "list.padding", + "variable": "--p-multiselect-list-padding", + "description": "Padding of list" + }, + { + "token": "list.gap", + "variable": "--p-multiselect-list-gap", + "description": "Gap of list" + }, + { + "token": "header.padding", + "variable": "--p-multiselect-list-header-padding", + "description": "Header padding of list" + }, + { + "token": "option.focusBackground", + "variable": "--p-multiselect-option-focus-background", + "description": "Focus background of option" + }, + { + "token": "option.selectedBackground", + "variable": "--p-multiselect-option-selected-background", + "description": "Selected background of option" + }, + { + "token": "option.selectedFocusBackground", + "variable": "--p-multiselect-option-selected-focus-background", + "description": "Selected focus background of option" + }, + { + "token": "option.color", + "variable": "--p-multiselect-option-color", + "description": "Color of option" + }, + { + "token": "option.focusColor", + "variable": "--p-multiselect-option-focus-color", + "description": "Focus color of option" + }, + { + "token": "option.selectedColor", + "variable": "--p-multiselect-option-selected-color", + "description": "Selected color of option" + }, + { + "token": "option.selectedFocusColor", + "variable": "--p-multiselect-option-selected-focus-color", + "description": "Selected focus color of option" + }, + { + "token": "option.padding", + "variable": "--p-multiselect-option-padding", + "description": "Padding of option" + }, + { + "token": "option.borderRadius", + "variable": "--p-multiselect-option-border-radius", + "description": "Border radius of option" + }, + { + "token": "option.gap", + "variable": "--p-multiselect-option-gap", + "description": "Gap of option" + }, + { + "token": "optionGroup.background", + "variable": "--p-multiselect-option-group-background", + "description": "Background of option group" + }, + { + "token": "optionGroup.color", + "variable": "--p-multiselect-option-group-color", + "description": "Color of option group" + }, + { + "token": "optionGroup.fontWeight", + "variable": "--p-multiselect-option-group-font-weight", + "description": "Font weight of option group" + }, + { + "token": "optionGroup.padding", + "variable": "--p-multiselect-option-group-padding", + "description": "Padding of option group" + }, + { + "token": "clearIcon.color", + "variable": "--p-multiselect-clear-icon-color", + "description": "Color of clear icon" + }, + { + "token": "chip.borderRadius", + "variable": "--p-multiselect-chip-border-radius", + "description": "Border radius of chip" + }, + { + "token": "emptyMessage.padding", + "variable": "--p-multiselect-empty-message-padding", + "description": "Padding of empty message" + } + ] + }, + "orderlist": { + "description": "OrderList Design Tokens\n\n[Live Demo](https://www.primeng.org/orderlist/)", + "tokens": [ + { + "token": "root.gap", + "variable": "--p-orderlist-gap", + "description": "Gap of root" + }, + { + "token": "controls.gap", + "variable": "--p-orderlist-controls-gap", + "description": "Gap of controls" + } + ] + }, + "organizationchart": { + "description": "OrganizationChart Design Tokens\n\n[Live Demo](https://www.primeng.org/organizationchart/)", + "tokens": [ + { + "token": "root.gutter", + "variable": "--p-organizationchart-gutter", + "description": "Gutter of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-organizationchart-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "node.background", + "variable": "--p-organizationchart-node-background", + "description": "Background of node" + }, + { + "token": "node.hoverBackground", + "variable": "--p-organizationchart-node-hover-background", + "description": "Hover background of node" + }, + { + "token": "node.selectedBackground", + "variable": "--p-organizationchart-node-selected-background", + "description": "Selected background of node" + }, + { + "token": "node.borderColor", + "variable": "--p-organizationchart-node-border-color", + "description": "Border color of node" + }, + { + "token": "node.color", + "variable": "--p-organizationchart-node-color", + "description": "Color of node" + }, + { + "token": "node.selectedColor", + "variable": "--p-organizationchart-node-selected-color", + "description": "Selected color of node" + }, + { + "token": "node.hoverColor", + "variable": "--p-organizationchart-node-hover-color", + "description": "Hover color of node" + }, + { + "token": "node.padding", + "variable": "--p-organizationchart-node-padding", + "description": "Padding of node" + }, + { + "token": "node.toggleablePadding", + "variable": "--p-organizationchart-node-toggleable-padding", + "description": "Toggleable padding of node" + }, + { + "token": "node.borderRadius", + "variable": "--p-organizationchart-node-border-radius", + "description": "Border radius of node" + }, + { + "token": "nodeToggleButton.background", + "variable": "--p-organizationchart-node-toggle-button-background", + "description": "Background of node toggle button" + }, + { + "token": "nodeToggleButton.hoverBackground", + "variable": "--p-organizationchart-node-toggle-button-hover-background", + "description": "Hover background of node toggle button" + }, + { + "token": "nodeToggleButton.borderColor", + "variable": "--p-organizationchart-node-toggle-button-border-color", + "description": "Border color of node toggle button" + }, + { + "token": "nodeToggleButton.color", + "variable": "--p-organizationchart-node-toggle-button-color", + "description": "Color of node toggle button" + }, + { + "token": "nodeToggleButton.hoverColor", + "variable": "--p-organizationchart-node-toggle-button-hover-color", + "description": "Hover color of node toggle button" + }, + { + "token": "nodeToggleButton.size", + "variable": "--p-organizationchart-node-toggle-button-size", + "description": "Size of node toggle button" + }, + { + "token": "nodeToggleButton.borderRadius", + "variable": "--p-organizationchart-node-toggle-button-border-radius", + "description": "Border radius of node toggle button" + }, + { + "token": "focusRing.width", + "variable": "--p-organizationchart-node-toggle-button-focus-ring-width", + "description": "Focus ring width of node toggle button" + }, + { + "token": "focusRing.style", + "variable": "--p-organizationchart-node-toggle-button-focus-ring-style", + "description": "Focus ring style of node toggle button" + }, + { + "token": "focusRing.color", + "variable": "--p-organizationchart-node-toggle-button-focus-ring-color", + "description": "Focus ring color of node toggle button" + }, + { + "token": "focusRing.offset", + "variable": "--p-organizationchart-node-toggle-button-focus-ring-offset", + "description": "Focus ring offset of node toggle button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-organizationchart-node-toggle-button-focus-ring-shadow", + "description": "Focus ring shadow of node toggle button" + }, + { + "token": "connector.color", + "variable": "--p-organizationchart-connector-color", + "description": "Color of connector" + }, + { + "token": "connector.borderRadius", + "variable": "--p-organizationchart-connector-border-radius", + "description": "Border radius of connector" + }, + { + "token": "connector.height", + "variable": "--p-organizationchart-connector-height", + "description": "Height of connector" + } + ] + }, + "overlaybadge": { + "description": "OverlayBadge Design Tokens\n\n[Live Demo](https://www.primeng.org/overlaybadge/)", + "tokens": [ + { + "token": "outline.width", + "variable": "--p-overlaybadge-outline-width", + "description": "Outline width of root" + }, + { + "token": "outline.color", + "variable": "--p-overlaybadge-outline-color", + "description": "Outline color of root" + } + ] + }, + "paginator": { + "description": "Paginator Design Tokens\n\n[Live Demo](https://www.primeng.org/paginator/)", + "tokens": [ + { + "token": "root.padding", + "variable": "--p-paginator-padding", + "description": "Padding of root" + }, + { + "token": "root.gap", + "variable": "--p-paginator-gap", + "description": "Gap of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-paginator-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.background", + "variable": "--p-paginator-background", + "description": "Background of root" + }, + { + "token": "root.color", + "variable": "--p-paginator-color", + "description": "Color of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-paginator-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "navButton.background", + "variable": "--p-paginator-nav-button-background", + "description": "Background of nav button" + }, + { + "token": "navButton.hoverBackground", + "variable": "--p-paginator-nav-button-hover-background", + "description": "Hover background of nav button" + }, + { + "token": "navButton.selectedBackground", + "variable": "--p-paginator-nav-button-selected-background", + "description": "Selected background of nav button" + }, + { + "token": "navButton.color", + "variable": "--p-paginator-nav-button-color", + "description": "Color of nav button" + }, + { + "token": "navButton.hoverColor", + "variable": "--p-paginator-nav-button-hover-color", + "description": "Hover color of nav button" + }, + { + "token": "navButton.selectedColor", + "variable": "--p-paginator-nav-button-selected-color", + "description": "Selected color of nav button" + }, + { + "token": "navButton.width", + "variable": "--p-paginator-nav-button-width", + "description": "Width of nav button" + }, + { + "token": "navButton.height", + "variable": "--p-paginator-nav-button-height", + "description": "Height of nav button" + }, + { + "token": "navButton.borderRadius", + "variable": "--p-paginator-nav-button-border-radius", + "description": "Border radius of nav button" + }, + { + "token": "focusRing.width", + "variable": "--p-paginator-nav-button-focus-ring-width", + "description": "Focus ring width of nav button" + }, + { + "token": "focusRing.style", + "variable": "--p-paginator-nav-button-focus-ring-style", + "description": "Focus ring style of nav button" + }, + { + "token": "focusRing.color", + "variable": "--p-paginator-nav-button-focus-ring-color", + "description": "Focus ring color of nav button" + }, + { + "token": "focusRing.offset", + "variable": "--p-paginator-nav-button-focus-ring-offset", + "description": "Focus ring offset of nav button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-paginator-nav-button-focus-ring-shadow", + "description": "Focus ring shadow of nav button" + }, + { + "token": "currentPageReport.color", + "variable": "--p-paginator-current-page-report-color", + "description": "Color of current page report" + }, + { + "token": "jumpToPageInput.maxWidth", + "variable": "--p-paginator-jump-to-page-input-max-width", + "description": "Max width of jump to page input" + } + ] + }, + "panel": { + "description": "Panel Design Tokens\n\n[Live Demo](https://www.primeng.org/panel/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-panel-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-panel-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-panel-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-panel-border-radius", + "description": "Border radius of root" + }, + { + "token": "header.background", + "variable": "--p-panel-header-background", + "description": "Background of header" + }, + { + "token": "header.color", + "variable": "--p-panel-header-color", + "description": "Color of header" + }, + { + "token": "header.padding", + "variable": "--p-panel-header-padding", + "description": "Padding of header" + }, + { + "token": "header.borderColor", + "variable": "--p-panel-header-border-color", + "description": "Border color of header" + }, + { + "token": "header.borderWidth", + "variable": "--p-panel-header-border-width", + "description": "Border width of header" + }, + { + "token": "header.borderRadius", + "variable": "--p-panel-header-border-radius", + "description": "Border radius of header" + }, + { + "token": "toggleableHeader.padding", + "variable": "--p-panel-toggleable-header-padding", + "description": "Padding of toggleable header" + }, + { + "token": "title.fontWeight", + "variable": "--p-panel-title-font-weight", + "description": "Font weight of title" + }, + { + "token": "content.padding", + "variable": "--p-panel-content-padding", + "description": "Padding of content" + }, + { + "token": "footer.padding", + "variable": "--p-panel-footer-padding", + "description": "Padding of footer" + } + ] + }, + "panelmenu": { + "description": "PanelMenu Design Tokens\n\n[Live Demo](https://www.primeng.org/panelmenu/)", + "tokens": [ + { + "token": "root.gap", + "variable": "--p-panelmenu-gap", + "description": "Gap of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-panelmenu-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "panel.background", + "variable": "--p-panelmenu-panel-background", + "description": "Background of panel" + }, + { + "token": "panel.borderColor", + "variable": "--p-panelmenu-panel-border-color", + "description": "Border color of panel" + }, + { + "token": "panel.borderWidth", + "variable": "--p-panelmenu-panel-border-width", + "description": "Border width of panel" + }, + { + "token": "panel.color", + "variable": "--p-panelmenu-panel-color", + "description": "Color of panel" + }, + { + "token": "panel.padding", + "variable": "--p-panelmenu-panel-padding", + "description": "Padding of panel" + }, + { + "token": "panel.borderRadius", + "variable": "--p-panelmenu-panel-border-radius", + "description": "Border radius of panel" + }, + { + "token": "first.borderWidth", + "variable": "--p-panelmenu-panel-first-border-width", + "description": "First border width of panel" + }, + { + "token": "first.topBorderRadius", + "variable": "--p-panelmenu-panel-first-top-border-radius", + "description": "First top border radius of panel" + }, + { + "token": "last.borderWidth", + "variable": "--p-panelmenu-panel-last-border-width", + "description": "Last border width of panel" + }, + { + "token": "last.bottomBorderRadius", + "variable": "--p-panelmenu-panel-last-bottom-border-radius", + "description": "Last bottom border radius of panel" + }, + { + "token": "item.focusBackground", + "variable": "--p-panelmenu-item-focus-background", + "description": "Focus background of item" + }, + { + "token": "item.color", + "variable": "--p-panelmenu-item-color", + "description": "Color of item" + }, + { + "token": "item.focusColor", + "variable": "--p-panelmenu-item-focus-color", + "description": "Focus color of item" + }, + { + "token": "item.gap", + "variable": "--p-panelmenu-item-gap", + "description": "Gap of item" + }, + { + "token": "item.padding", + "variable": "--p-panelmenu-item-padding", + "description": "Padding of item" + }, + { + "token": "item.borderRadius", + "variable": "--p-panelmenu-item-border-radius", + "description": "Border radius of item" + }, + { + "token": "icon.color", + "variable": "--p-panelmenu-item-icon-color", + "description": "Icon color of item" + }, + { + "token": "icon.focusColor", + "variable": "--p-panelmenu-item-icon-focus-color", + "description": "Icon focus color of item" + }, + { + "token": "submenu.indent", + "variable": "--p-panelmenu-submenu-indent", + "description": "Indent of submenu" + }, + { + "token": "submenuIcon.color", + "variable": "--p-panelmenu-submenu-icon-color", + "description": "Color of submenu icon" + }, + { + "token": "submenuIcon.focusColor", + "variable": "--p-panelmenu-submenu-icon-focus-color", + "description": "Focus color of submenu icon" + } + ] + }, + "password": { + "description": "Password Design Tokens\n\n[Live Demo](https://www.primeng.org/password/)", + "tokens": [ + { + "token": "meter.background", + "variable": "--p-password-meter-background", + "description": "Background of meter" + }, + { + "token": "meter.borderRadius", + "variable": "--p-password-meter-border-radius", + "description": "Border radius of meter" + }, + { + "token": "meter.height", + "variable": "--p-password-meter-height", + "description": "Height of meter" + }, + { + "token": "icon.color", + "variable": "--p-password-icon-color", + "description": "Color of icon" + }, + { + "token": "overlay.background", + "variable": "--p-password-overlay-background", + "description": "Background of overlay" + }, + { + "token": "overlay.borderColor", + "variable": "--p-password-overlay-border-color", + "description": "Border color of overlay" + }, + { + "token": "overlay.borderRadius", + "variable": "--p-password-overlay-border-radius", + "description": "Border radius of overlay" + }, + { + "token": "overlay.color", + "variable": "--p-password-overlay-color", + "description": "Color of overlay" + }, + { + "token": "overlay.padding", + "variable": "--p-password-overlay-padding", + "description": "Padding of overlay" + }, + { + "token": "overlay.shadow", + "variable": "--p-password-overlay-shadow", + "description": "Shadow of overlay" + }, + { + "token": "content.gap", + "variable": "--p-password-content-gap", + "description": "Gap of content" + }, + { + "token": "strength.weakBackground", + "variable": "--p-password-strength-weak-background", + "description": "Weak background of strength" + }, + { + "token": "strength.mediumBackground", + "variable": "--p-password-strength-medium-background", + "description": "Medium background of strength" + }, + { + "token": "strength.strongBackground", + "variable": "--p-password-strength-strong-background", + "description": "Strong background of strength" + } + ] + }, + "picklist": { + "description": "PickList Design Tokens\n\n[Live Demo](https://www.primeng.org/picklist/)", + "tokens": [ + { + "token": "root.gap", + "variable": "--p-picklist-gap", + "description": "Gap of root" + }, + { + "token": "controls.gap", + "variable": "--p-picklist-controls-gap", + "description": "Gap of controls" + } + ] + }, + "popover": { + "description": "Popover Design Tokens\n\n[Live Demo](https://www.primeng.org/popover/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-popover-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-popover-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-popover-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-popover-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.shadow", + "variable": "--p-popover-shadow", + "description": "Shadow of root" + }, + { + "token": "root.gutter", + "variable": "--p-popover-gutter", + "description": "Gutter of root" + }, + { + "token": "root.arrowOffset", + "variable": "--p-popover-arrow-offset", + "description": "Arrow offset of root" + }, + { + "token": "content.padding", + "variable": "--p-popover-content-padding", + "description": "Padding of content" + } + ] + }, + "progressbar": { + "description": "ProgressBar Design Tokens\n\n[Live Demo](https://www.primeng.org/progressbar/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-progressbar-background", + "description": "Background of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-progressbar-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.height", + "variable": "--p-progressbar-height", + "description": "Height of root" + }, + { + "token": "value.background", + "variable": "--p-progressbar-value-background", + "description": "Background of value" + }, + { + "token": "label.color", + "variable": "--p-progressbar-label-color", + "description": "Color of label" + }, + { + "token": "label.fontSize", + "variable": "--p-progressbar-label-font-size", + "description": "Font size of label" + }, + { + "token": "label.fontWeight", + "variable": "--p-progressbar-label-font-weight", + "description": "Font weight of label" + } + ] + }, + "progressspinner": { + "description": "ProgressSpinner Design Tokens\n\n[Live Demo](https://www.primeng.org/progressspinner/)", + "tokens": [ + { + "token": "root.color.1", + "variable": "--p-progressspinner-color-1", + "description": "Color.1 of root" + }, + { + "token": "root.color.2", + "variable": "--p-progressspinner-color-2", + "description": "Color.2 of root" + }, + { + "token": "root.color.3", + "variable": "--p-progressspinner-color-3", + "description": "Color.3 of root" + }, + { + "token": "root.color.4", + "variable": "--p-progressspinner-color-4", + "description": "Color.4 of root" + } + ] + }, + "radiobutton": { + "description": "RadioButton Design Tokens\n\n[Live Demo](https://www.primeng.org/radiobutton/)", + "tokens": [ + { + "token": "root.width", + "variable": "--p-radiobutton-width", + "description": "Width of root" + }, + { + "token": "root.height", + "variable": "--p-radiobutton-height", + "description": "Height of root" + }, + { + "token": "root.background", + "variable": "--p-radiobutton-background", + "description": "Background of root" + }, + { + "token": "root.checkedBackground", + "variable": "--p-radiobutton-checked-background", + "description": "Checked background of root" + }, + { + "token": "root.checkedHoverBackground", + "variable": "--p-radiobutton-checked-hover-background", + "description": "Checked hover background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-radiobutton-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-radiobutton-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-radiobutton-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-radiobutton-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-radiobutton-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.checkedBorderColor", + "variable": "--p-radiobutton-checked-border-color", + "description": "Checked border color of root" + }, + { + "token": "root.checkedHoverBorderColor", + "variable": "--p-radiobutton-checked-hover-border-color", + "description": "Checked hover border color of root" + }, + { + "token": "root.checkedFocusBorderColor", + "variable": "--p-radiobutton-checked-focus-border-color", + "description": "Checked focus border color of root" + }, + { + "token": "root.checkedDisabledBorderColor", + "variable": "--p-radiobutton-checked-disabled-border-color", + "description": "Checked disabled border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-radiobutton-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.shadow", + "variable": "--p-radiobutton-shadow", + "description": "Shadow of root" + }, + { + "token": "focusRing.width", + "variable": "--p-radiobutton-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-radiobutton-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-radiobutton-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-radiobutton-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-radiobutton-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-radiobutton-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "icon.size", + "variable": "--p-radiobutton-icon-size", + "description": "Size of icon" + }, + { + "token": "icon.checkedColor", + "variable": "--p-radiobutton-icon-checked-color", + "description": "Checked color of icon" + }, + { + "token": "icon.checkedHoverColor", + "variable": "--p-radiobutton-icon-checked-hover-color", + "description": "Checked hover color of icon" + }, + { + "token": "icon.disabledColor", + "variable": "--p-radiobutton-icon-disabled-color", + "description": "Disabled color of icon" + } + ] + }, + "rating": { + "description": "Rating Design Tokens\n\n[Live Demo](https://www.primeng.org/rating/)", + "tokens": [ + { + "token": "root.gap", + "variable": "--p-rating-gap", + "description": "Gap of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-rating-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "focusRing.width", + "variable": "--p-rating-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-rating-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-rating-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-rating-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-rating-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "icon.size", + "variable": "--p-rating-icon-size", + "description": "Size of icon" + }, + { + "token": "icon.color", + "variable": "--p-rating-icon-color", + "description": "Color of icon" + }, + { + "token": "icon.hoverColor", + "variable": "--p-rating-icon-hover-color", + "description": "Hover color of icon" + }, + { + "token": "icon.activeColor", + "variable": "--p-rating-icon-active-color", + "description": "Active color of icon" + } + ] + }, + "ripple": { + "description": "Ripple Design Tokens\n\n[Live Demo](https://www.primeng.org/ripple/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-ripple-background", + "description": "Background of root" + } + ] + }, + "scrollpanel": { + "description": "ScrollPanel Design Tokens\n\n[Live Demo](https://www.primeng.org/scrollpanel/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-scrollpanel-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "bar.size", + "variable": "--p-scrollpanel-bar-size", + "description": "Size of bar" + }, + { + "token": "bar.borderRadius", + "variable": "--p-scrollpanel-bar-border-radius", + "description": "Border radius of bar" + }, + { + "token": "focusRing.width", + "variable": "--p-scrollpanel-bar-focus-ring-width", + "description": "Focus ring width of bar" + }, + { + "token": "focusRing.style", + "variable": "--p-scrollpanel-bar-focus-ring-style", + "description": "Focus ring style of bar" + }, + { + "token": "focusRing.color", + "variable": "--p-scrollpanel-bar-focus-ring-color", + "description": "Focus ring color of bar" + }, + { + "token": "focusRing.offset", + "variable": "--p-scrollpanel-bar-focus-ring-offset", + "description": "Focus ring offset of bar" + }, + { + "token": "focusRing.shadow", + "variable": "--p-scrollpanel-bar-focus-ring-shadow", + "description": "Focus ring shadow of bar" + }, + { + "token": "bar.background", + "variable": "--p-scrollpanel-bar-background", + "description": "Background of bar" + } + ] + }, + "select": { + "description": "Select Design Tokens\n\n[Live Demo](https://www.primeng.org/select/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-select-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-select-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-select-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.filledHoverBackground", + "variable": "--p-select-filled-hover-background", + "description": "Filled hover background of root" + }, + { + "token": "root.filledFocusBackground", + "variable": "--p-select-filled-focus-background", + "description": "Filled focus background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-select-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-select-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-select-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-select-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-select-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-select-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.placeholderColor", + "variable": "--p-select-placeholder-color", + "description": "Placeholder color of root" + }, + { + "token": "root.shadow", + "variable": "--p-select-shadow", + "description": "Shadow of root" + }, + { + "token": "root.paddingX", + "variable": "--p-select-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-select-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-select-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-select-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-select-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-select-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-select-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-select-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-select-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "dropdown.width", + "variable": "--p-select-dropdown-width", + "description": "Width of dropdown" + }, + { + "token": "dropdown.color", + "variable": "--p-select-dropdown-color", + "description": "Color of dropdown" + }, + { + "token": "overlay.background", + "variable": "--p-select-overlay-background", + "description": "Background of overlay" + }, + { + "token": "overlay.borderColor", + "variable": "--p-select-overlay-border-color", + "description": "Border color of overlay" + }, + { + "token": "overlay.borderRadius", + "variable": "--p-select-overlay-border-radius", + "description": "Border radius of overlay" + }, + { + "token": "overlay.color", + "variable": "--p-select-overlay-color", + "description": "Color of overlay" + }, + { + "token": "overlay.shadow", + "variable": "--p-select-overlay-shadow", + "description": "Shadow of overlay" + }, + { + "token": "list.padding", + "variable": "--p-select-list-padding", + "description": "Padding of list" + }, + { + "token": "list.gap", + "variable": "--p-select-list-gap", + "description": "Gap of list" + }, + { + "token": "header.padding", + "variable": "--p-select-list-header-padding", + "description": "Header padding of list" + }, + { + "token": "option.focusBackground", + "variable": "--p-select-option-focus-background", + "description": "Focus background of option" + }, + { + "token": "option.selectedBackground", + "variable": "--p-select-option-selected-background", + "description": "Selected background of option" + }, + { + "token": "option.selectedFocusBackground", + "variable": "--p-select-option-selected-focus-background", + "description": "Selected focus background of option" + }, + { + "token": "option.color", + "variable": "--p-select-option-color", + "description": "Color of option" + }, + { + "token": "option.focusColor", + "variable": "--p-select-option-focus-color", + "description": "Focus color of option" + }, + { + "token": "option.selectedColor", + "variable": "--p-select-option-selected-color", + "description": "Selected color of option" + }, + { + "token": "option.selectedFocusColor", + "variable": "--p-select-option-selected-focus-color", + "description": "Selected focus color of option" + }, + { + "token": "option.padding", + "variable": "--p-select-option-padding", + "description": "Padding of option" + }, + { + "token": "option.borderRadius", + "variable": "--p-select-option-border-radius", + "description": "Border radius of option" + }, + { + "token": "optionGroup.background", + "variable": "--p-select-option-group-background", + "description": "Background of option group" + }, + { + "token": "optionGroup.color", + "variable": "--p-select-option-group-color", + "description": "Color of option group" + }, + { + "token": "optionGroup.fontWeight", + "variable": "--p-select-option-group-font-weight", + "description": "Font weight of option group" + }, + { + "token": "optionGroup.padding", + "variable": "--p-select-option-group-padding", + "description": "Padding of option group" + }, + { + "token": "clearIcon.color", + "variable": "--p-select-clear-icon-color", + "description": "Color of clear icon" + }, + { + "token": "checkmark.color", + "variable": "--p-select-checkmark-color", + "description": "Color of checkmark" + }, + { + "token": "checkmark.gutterStart", + "variable": "--p-select-checkmark-gutter-start", + "description": "Gutter start of checkmark" + }, + { + "token": "checkmark.gutterEnd", + "variable": "--p-select-checkmark-gutter-end", + "description": "Gutter end of checkmark" + }, + { + "token": "emptyMessage.padding", + "variable": "--p-select-empty-message-padding", + "description": "Padding of empty message" + } + ] + }, + "selectbutton": { + "description": "SelectButton Design Tokens\n\n[Live Demo](https://www.primeng.org/selectbutton/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-selectbutton-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-selectbutton-invalid-border-color", + "description": "Invalid border color of root" + } + ] + }, + "skeleton": { + "description": "Skeleton Design Tokens\n\n[Live Demo](https://www.primeng.org/skeleton/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-skeleton-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.background", + "variable": "--p-skeleton-background", + "description": "Background of root" + }, + { + "token": "root.animationBackground", + "variable": "--p-skeleton-animation-background", + "description": "Animation background of root" + } + ] + }, + "slider": { + "description": "Slider Design Tokens\n\n[Live Demo](https://www.primeng.org/slider/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-slider-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "track.background", + "variable": "--p-slider-track-background", + "description": "Background of track" + }, + { + "token": "track.borderRadius", + "variable": "--p-slider-track-border-radius", + "description": "Border radius of track" + }, + { + "token": "track.size", + "variable": "--p-slider-track-size", + "description": "Size of track" + }, + { + "token": "range.background", + "variable": "--p-slider-range-background", + "description": "Background of range" + }, + { + "token": "handle.width", + "variable": "--p-slider-handle-width", + "description": "Width of handle" + }, + { + "token": "handle.height", + "variable": "--p-slider-handle-height", + "description": "Height of handle" + }, + { + "token": "handle.borderRadius", + "variable": "--p-slider-handle-border-radius", + "description": "Border radius of handle" + }, + { + "token": "handle.background", + "variable": "--p-slider-handle-background", + "description": "Background of handle" + }, + { + "token": "handle.hoverBackground", + "variable": "--p-slider-handle-hover-background", + "description": "Hover background of handle" + }, + { + "token": "content.borderRadius", + "variable": "--p-slider-handle-content-border-radius", + "description": "Content border radius of handle" + }, + { + "token": "content.hoverBackground", + "variable": "--p-slider-handle-content-hover-background", + "description": "Content hover background of handle" + }, + { + "token": "content.width", + "variable": "--p-slider-handle-content-width", + "description": "Content width of handle" + }, + { + "token": "content.height", + "variable": "--p-slider-handle-content-height", + "description": "Content height of handle" + }, + { + "token": "content.shadow", + "variable": "--p-slider-handle-content-shadow", + "description": "Content shadow of handle" + }, + { + "token": "focusRing.width", + "variable": "--p-slider-handle-focus-ring-width", + "description": "Focus ring width of handle" + }, + { + "token": "focusRing.style", + "variable": "--p-slider-handle-focus-ring-style", + "description": "Focus ring style of handle" + }, + { + "token": "focusRing.color", + "variable": "--p-slider-handle-focus-ring-color", + "description": "Focus ring color of handle" + }, + { + "token": "focusRing.offset", + "variable": "--p-slider-handle-focus-ring-offset", + "description": "Focus ring offset of handle" + }, + { + "token": "focusRing.shadow", + "variable": "--p-slider-handle-focus-ring-shadow", + "description": "Focus ring shadow of handle" + }, + { + "token": "handle.contentBackground", + "variable": "--p-slider-handle-content-background", + "description": "Content background of handle" + } + ] + }, + "speeddial": { + "description": "SpeedDial Design Tokens\n\n[Live Demo](https://www.primeng.org/speeddial/)", + "tokens": [ + { + "token": "root.gap", + "variable": "--p-speeddial-gap", + "description": "Gap of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-speeddial-transition-duration", + "description": "Transition duration of root" + } + ] + }, + "splitbutton": { + "description": "SplitButton Design Tokens\n\n[Live Demo](https://www.primeng.org/splitbutton/)", + "tokens": [ + { + "token": "root.borderRadius", + "variable": "--p-splitbutton-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.roundedBorderRadius", + "variable": "--p-splitbutton-rounded-border-radius", + "description": "Rounded border radius of root" + }, + { + "token": "root.raisedShadow", + "variable": "--p-splitbutton-raised-shadow", + "description": "Raised shadow of root" + } + ] + }, + "splitter": { + "description": "Splitter Design Tokens\n\n[Live Demo](https://www.primeng.org/splitter/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-splitter-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-splitter-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-splitter-color", + "description": "Color of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-splitter-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "gutter.background", + "variable": "--p-splitter-gutter-background", + "description": "Background of gutter" + }, + { + "token": "handle.size", + "variable": "--p-splitter-handle-size", + "description": "Size of handle" + }, + { + "token": "handle.background", + "variable": "--p-splitter-handle-background", + "description": "Background of handle" + }, + { + "token": "handle.borderRadius", + "variable": "--p-splitter-handle-border-radius", + "description": "Border radius of handle" + }, + { + "token": "focusRing.width", + "variable": "--p-splitter-handle-focus-ring-width", + "description": "Focus ring width of handle" + }, + { + "token": "focusRing.style", + "variable": "--p-splitter-handle-focus-ring-style", + "description": "Focus ring style of handle" + }, + { + "token": "focusRing.color", + "variable": "--p-splitter-handle-focus-ring-color", + "description": "Focus ring color of handle" + }, + { + "token": "focusRing.offset", + "variable": "--p-splitter-handle-focus-ring-offset", + "description": "Focus ring offset of handle" + }, + { + "token": "focusRing.shadow", + "variable": "--p-splitter-handle-focus-ring-shadow", + "description": "Focus ring shadow of handle" + } + ] + }, + "stepper": { + "description": "Stepper Design Tokens\n\n[Live Demo](https://www.primeng.org/stepper/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-stepper-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "separator.background", + "variable": "--p-stepper-separator-background", + "description": "Background of separator" + }, + { + "token": "separator.activeBackground", + "variable": "--p-stepper-separator-active-background", + "description": "Active background of separator" + }, + { + "token": "separator.margin", + "variable": "--p-stepper-separator-margin", + "description": "Margin of separator" + }, + { + "token": "separator.size", + "variable": "--p-stepper-separator-size", + "description": "Size of separator" + }, + { + "token": "step.padding", + "variable": "--p-stepper-step-padding", + "description": "Padding of step" + }, + { + "token": "step.gap", + "variable": "--p-stepper-step-gap", + "description": "Gap of step" + }, + { + "token": "stepHeader.padding", + "variable": "--p-stepper-step-header-padding", + "description": "Padding of step header" + }, + { + "token": "stepHeader.borderRadius", + "variable": "--p-stepper-step-header-border-radius", + "description": "Border radius of step header" + }, + { + "token": "focusRing.width", + "variable": "--p-stepper-step-header-focus-ring-width", + "description": "Focus ring width of step header" + }, + { + "token": "focusRing.style", + "variable": "--p-stepper-step-header-focus-ring-style", + "description": "Focus ring style of step header" + }, + { + "token": "focusRing.color", + "variable": "--p-stepper-step-header-focus-ring-color", + "description": "Focus ring color of step header" + }, + { + "token": "focusRing.offset", + "variable": "--p-stepper-step-header-focus-ring-offset", + "description": "Focus ring offset of step header" + }, + { + "token": "focusRing.shadow", + "variable": "--p-stepper-step-header-focus-ring-shadow", + "description": "Focus ring shadow of step header" + }, + { + "token": "stepHeader.gap", + "variable": "--p-stepper-step-header-gap", + "description": "Gap of step header" + }, + { + "token": "stepTitle.color", + "variable": "--p-stepper-step-title-color", + "description": "Color of step title" + }, + { + "token": "stepTitle.activeColor", + "variable": "--p-stepper-step-title-active-color", + "description": "Active color of step title" + }, + { + "token": "stepTitle.fontWeight", + "variable": "--p-stepper-step-title-font-weight", + "description": "Font weight of step title" + }, + { + "token": "stepNumber.background", + "variable": "--p-stepper-step-number-background", + "description": "Background of step number" + }, + { + "token": "stepNumber.activeBackground", + "variable": "--p-stepper-step-number-active-background", + "description": "Active background of step number" + }, + { + "token": "stepNumber.borderColor", + "variable": "--p-stepper-step-number-border-color", + "description": "Border color of step number" + }, + { + "token": "stepNumber.activeBorderColor", + "variable": "--p-stepper-step-number-active-border-color", + "description": "Active border color of step number" + }, + { + "token": "stepNumber.color", + "variable": "--p-stepper-step-number-color", + "description": "Color of step number" + }, + { + "token": "stepNumber.activeColor", + "variable": "--p-stepper-step-number-active-color", + "description": "Active color of step number" + }, + { + "token": "stepNumber.size", + "variable": "--p-stepper-step-number-size", + "description": "Size of step number" + }, + { + "token": "stepNumber.fontSize", + "variable": "--p-stepper-step-number-font-size", + "description": "Font size of step number" + }, + { + "token": "stepNumber.fontWeight", + "variable": "--p-stepper-step-number-font-weight", + "description": "Font weight of step number" + }, + { + "token": "stepNumber.borderRadius", + "variable": "--p-stepper-step-number-border-radius", + "description": "Border radius of step number" + }, + { + "token": "stepNumber.shadow", + "variable": "--p-stepper-step-number-shadow", + "description": "Shadow of step number" + }, + { + "token": "steppanels.padding", + "variable": "--p-stepper-steppanels-padding", + "description": "Padding of steppanels" + }, + { + "token": "steppanel.background", + "variable": "--p-stepper-steppanel-background", + "description": "Background of steppanel" + }, + { + "token": "steppanel.color", + "variable": "--p-stepper-steppanel-color", + "description": "Color of steppanel" + }, + { + "token": "steppanel.padding", + "variable": "--p-stepper-steppanel-padding", + "description": "Padding of steppanel" + } + ] + }, + "steps": { + "description": "Steps Design Tokens\n\n[Live Demo](https://www.primeng.org/steps/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-steps-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "separator.background", + "variable": "--p-steps-separator-background", + "description": "Background of separator" + }, + { + "token": "itemLink.borderRadius", + "variable": "--p-steps-item-link-border-radius", + "description": "Border radius of item link" + }, + { + "token": "focusRing.width", + "variable": "--p-steps-item-link-focus-ring-width", + "description": "Focus ring width of item link" + }, + { + "token": "focusRing.style", + "variable": "--p-steps-item-link-focus-ring-style", + "description": "Focus ring style of item link" + }, + { + "token": "focusRing.color", + "variable": "--p-steps-item-link-focus-ring-color", + "description": "Focus ring color of item link" + }, + { + "token": "focusRing.offset", + "variable": "--p-steps-item-link-focus-ring-offset", + "description": "Focus ring offset of item link" + }, + { + "token": "focusRing.shadow", + "variable": "--p-steps-item-link-focus-ring-shadow", + "description": "Focus ring shadow of item link" + }, + { + "token": "itemLink.gap", + "variable": "--p-steps-item-link-gap", + "description": "Gap of item link" + }, + { + "token": "itemLabel.color", + "variable": "--p-steps-item-label-color", + "description": "Color of item label" + }, + { + "token": "itemLabel.activeColor", + "variable": "--p-steps-item-label-active-color", + "description": "Active color of item label" + }, + { + "token": "itemLabel.fontWeight", + "variable": "--p-steps-item-label-font-weight", + "description": "Font weight of item label" + }, + { + "token": "itemNumber.background", + "variable": "--p-steps-item-number-background", + "description": "Background of item number" + }, + { + "token": "itemNumber.activeBackground", + "variable": "--p-steps-item-number-active-background", + "description": "Active background of item number" + }, + { + "token": "itemNumber.borderColor", + "variable": "--p-steps-item-number-border-color", + "description": "Border color of item number" + }, + { + "token": "itemNumber.activeBorderColor", + "variable": "--p-steps-item-number-active-border-color", + "description": "Active border color of item number" + }, + { + "token": "itemNumber.color", + "variable": "--p-steps-item-number-color", + "description": "Color of item number" + }, + { + "token": "itemNumber.activeColor", + "variable": "--p-steps-item-number-active-color", + "description": "Active color of item number" + }, + { + "token": "itemNumber.size", + "variable": "--p-steps-item-number-size", + "description": "Size of item number" + }, + { + "token": "itemNumber.fontSize", + "variable": "--p-steps-item-number-font-size", + "description": "Font size of item number" + }, + { + "token": "itemNumber.fontWeight", + "variable": "--p-steps-item-number-font-weight", + "description": "Font weight of item number" + }, + { + "token": "itemNumber.borderRadius", + "variable": "--p-steps-item-number-border-radius", + "description": "Border radius of item number" + }, + { + "token": "itemNumber.shadow", + "variable": "--p-steps-item-number-shadow", + "description": "Shadow of item number" + } + ] + }, + "tabmenu": { + "description": "Tabmenu Design Tokens\n\n[Live Demo](https://www.primeng.org/tabmenu/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-tabmenu-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "tablist.borderWidth", + "variable": "--p-tabmenu-tablist-border-width", + "description": "Border width of tablist" + }, + { + "token": "tablist.background", + "variable": "--p-tabmenu-tablist-background", + "description": "Background of tablist" + }, + { + "token": "tablist.borderColor", + "variable": "--p-tabmenu-tablist-border-color", + "description": "Border color of tablist" + }, + { + "token": "item.background", + "variable": "--p-tabmenu-item-background", + "description": "Background of item" + }, + { + "token": "item.hoverBackground", + "variable": "--p-tabmenu-item-hover-background", + "description": "Hover background of item" + }, + { + "token": "item.activeBackground", + "variable": "--p-tabmenu-item-active-background", + "description": "Active background of item" + }, + { + "token": "item.borderWidth", + "variable": "--p-tabmenu-item-border-width", + "description": "Border width of item" + }, + { + "token": "item.borderColor", + "variable": "--p-tabmenu-item-border-color", + "description": "Border color of item" + }, + { + "token": "item.hoverBorderColor", + "variable": "--p-tabmenu-item-hover-border-color", + "description": "Hover border color of item" + }, + { + "token": "item.activeBorderColor", + "variable": "--p-tabmenu-item-active-border-color", + "description": "Active border color of item" + }, + { + "token": "item.color", + "variable": "--p-tabmenu-item-color", + "description": "Color of item" + }, + { + "token": "item.hoverColor", + "variable": "--p-tabmenu-item-hover-color", + "description": "Hover color of item" + }, + { + "token": "item.activeColor", + "variable": "--p-tabmenu-item-active-color", + "description": "Active color of item" + }, + { + "token": "item.padding", + "variable": "--p-tabmenu-item-padding", + "description": "Padding of item" + }, + { + "token": "item.fontWeight", + "variable": "--p-tabmenu-item-font-weight", + "description": "Font weight of item" + }, + { + "token": "item.margin", + "variable": "--p-tabmenu-item-margin", + "description": "Margin of item" + }, + { + "token": "item.gap", + "variable": "--p-tabmenu-item-gap", + "description": "Gap of item" + }, + { + "token": "focusRing.width", + "variable": "--p-tabmenu-item-focus-ring-width", + "description": "Focus ring width of item" + }, + { + "token": "focusRing.style", + "variable": "--p-tabmenu-item-focus-ring-style", + "description": "Focus ring style of item" + }, + { + "token": "focusRing.color", + "variable": "--p-tabmenu-item-focus-ring-color", + "description": "Focus ring color of item" + }, + { + "token": "focusRing.offset", + "variable": "--p-tabmenu-item-focus-ring-offset", + "description": "Focus ring offset of item" + }, + { + "token": "focusRing.shadow", + "variable": "--p-tabmenu-item-focus-ring-shadow", + "description": "Focus ring shadow of item" + }, + { + "token": "itemIcon.color", + "variable": "--p-tabmenu-item-icon-color", + "description": "Color of item icon" + }, + { + "token": "itemIcon.hoverColor", + "variable": "--p-tabmenu-item-icon-hover-color", + "description": "Hover color of item icon" + }, + { + "token": "itemIcon.activeColor", + "variable": "--p-tabmenu-item-icon-active-color", + "description": "Active color of item icon" + }, + { + "token": "activeBar.height", + "variable": "--p-tabmenu-active-bar-height", + "description": "Height of active bar" + }, + { + "token": "activeBar.bottom", + "variable": "--p-tabmenu-active-bar-bottom", + "description": "Bottom of active bar" + }, + { + "token": "activeBar.background", + "variable": "--p-tabmenu-active-bar-background", + "description": "Background of active bar" + } + ] + }, + "tabs": { + "description": "Tabs Design Tokens\n\n[Live Demo](https://www.primeng.org/tabs/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-tabs-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "tablist.borderWidth", + "variable": "--p-tabs-tablist-border-width", + "description": "Border width of tablist" + }, + { + "token": "tablist.background", + "variable": "--p-tabs-tablist-background", + "description": "Background of tablist" + }, + { + "token": "tablist.borderColor", + "variable": "--p-tabs-tablist-border-color", + "description": "Border color of tablist" + }, + { + "token": "tab.background", + "variable": "--p-tabs-tab-background", + "description": "Background of tab" + }, + { + "token": "tab.hoverBackground", + "variable": "--p-tabs-tab-hover-background", + "description": "Hover background of tab" + }, + { + "token": "tab.activeBackground", + "variable": "--p-tabs-tab-active-background", + "description": "Active background of tab" + }, + { + "token": "tab.borderWidth", + "variable": "--p-tabs-tab-border-width", + "description": "Border width of tab" + }, + { + "token": "tab.borderColor", + "variable": "--p-tabs-tab-border-color", + "description": "Border color of tab" + }, + { + "token": "tab.hoverBorderColor", + "variable": "--p-tabs-tab-hover-border-color", + "description": "Hover border color of tab" + }, + { + "token": "tab.activeBorderColor", + "variable": "--p-tabs-tab-active-border-color", + "description": "Active border color of tab" + }, + { + "token": "tab.color", + "variable": "--p-tabs-tab-color", + "description": "Color of tab" + }, + { + "token": "tab.hoverColor", + "variable": "--p-tabs-tab-hover-color", + "description": "Hover color of tab" + }, + { + "token": "tab.activeColor", + "variable": "--p-tabs-tab-active-color", + "description": "Active color of tab" + }, + { + "token": "tab.padding", + "variable": "--p-tabs-tab-padding", + "description": "Padding of tab" + }, + { + "token": "tab.fontWeight", + "variable": "--p-tabs-tab-font-weight", + "description": "Font weight of tab" + }, + { + "token": "tab.margin", + "variable": "--p-tabs-tab-margin", + "description": "Margin of tab" + }, + { + "token": "tab.gap", + "variable": "--p-tabs-tab-gap", + "description": "Gap of tab" + }, + { + "token": "focusRing.width", + "variable": "--p-tabs-tab-focus-ring-width", + "description": "Focus ring width of tab" + }, + { + "token": "focusRing.style", + "variable": "--p-tabs-tab-focus-ring-style", + "description": "Focus ring style of tab" + }, + { + "token": "focusRing.color", + "variable": "--p-tabs-tab-focus-ring-color", + "description": "Focus ring color of tab" + }, + { + "token": "focusRing.offset", + "variable": "--p-tabs-tab-focus-ring-offset", + "description": "Focus ring offset of tab" + }, + { + "token": "focusRing.shadow", + "variable": "--p-tabs-tab-focus-ring-shadow", + "description": "Focus ring shadow of tab" + }, + { + "token": "tabpanel.background", + "variable": "--p-tabs-tabpanel-background", + "description": "Background of tabpanel" + }, + { + "token": "tabpanel.color", + "variable": "--p-tabs-tabpanel-color", + "description": "Color of tabpanel" + }, + { + "token": "tabpanel.padding", + "variable": "--p-tabs-tabpanel-padding", + "description": "Padding of tabpanel" + }, + { + "token": "focusRing.width", + "variable": "--p-tabs-tabpanel-focus-ring-width", + "description": "Focus ring width of tabpanel" + }, + { + "token": "focusRing.style", + "variable": "--p-tabs-tabpanel-focus-ring-style", + "description": "Focus ring style of tabpanel" + }, + { + "token": "focusRing.color", + "variable": "--p-tabs-tabpanel-focus-ring-color", + "description": "Focus ring color of tabpanel" + }, + { + "token": "focusRing.offset", + "variable": "--p-tabs-tabpanel-focus-ring-offset", + "description": "Focus ring offset of tabpanel" + }, + { + "token": "focusRing.shadow", + "variable": "--p-tabs-tabpanel-focus-ring-shadow", + "description": "Focus ring shadow of tabpanel" + }, + { + "token": "navButton.background", + "variable": "--p-tabs-nav-button-background", + "description": "Background of nav button" + }, + { + "token": "navButton.color", + "variable": "--p-tabs-nav-button-color", + "description": "Color of nav button" + }, + { + "token": "navButton.hoverColor", + "variable": "--p-tabs-nav-button-hover-color", + "description": "Hover color of nav button" + }, + { + "token": "navButton.width", + "variable": "--p-tabs-nav-button-width", + "description": "Width of nav button" + }, + { + "token": "focusRing.width", + "variable": "--p-tabs-nav-button-focus-ring-width", + "description": "Focus ring width of nav button" + }, + { + "token": "focusRing.style", + "variable": "--p-tabs-nav-button-focus-ring-style", + "description": "Focus ring style of nav button" + }, + { + "token": "focusRing.color", + "variable": "--p-tabs-nav-button-focus-ring-color", + "description": "Focus ring color of nav button" + }, + { + "token": "focusRing.offset", + "variable": "--p-tabs-nav-button-focus-ring-offset", + "description": "Focus ring offset of nav button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-tabs-nav-button-focus-ring-shadow", + "description": "Focus ring shadow of nav button" + }, + { + "token": "navButton.shadow", + "variable": "--p-tabs-nav-button-shadow", + "description": "Shadow of nav button" + }, + { + "token": "activeBar.height", + "variable": "--p-tabs-active-bar-height", + "description": "Height of active bar" + }, + { + "token": "activeBar.bottom", + "variable": "--p-tabs-active-bar-bottom", + "description": "Bottom of active bar" + }, + { + "token": "activeBar.background", + "variable": "--p-tabs-active-bar-background", + "description": "Background of active bar" + } + ] + }, + "tabview": { + "description": "TabView Design Tokens\n\n[Live Demo](https://www.primeng.org/tabview/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-tabview-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "tabList.background", + "variable": "--p-tabview-tab-list-background", + "description": "Background of tab list" + }, + { + "token": "tabList.borderColor", + "variable": "--p-tabview-tab-list-border-color", + "description": "Border color of tab list" + }, + { + "token": "tab.borderColor", + "variable": "--p-tabview-tab-border-color", + "description": "Border color of tab" + }, + { + "token": "tab.activeBorderColor", + "variable": "--p-tabview-tab-active-border-color", + "description": "Active border color of tab" + }, + { + "token": "tab.color", + "variable": "--p-tabview-tab-color", + "description": "Color of tab" + }, + { + "token": "tab.hoverColor", + "variable": "--p-tabview-tab-hover-color", + "description": "Hover color of tab" + }, + { + "token": "tab.activeColor", + "variable": "--p-tabview-tab-active-color", + "description": "Active color of tab" + }, + { + "token": "tabPanel.background", + "variable": "--p-tabview-tab-panel-background", + "description": "Background of tab panel" + }, + { + "token": "tabPanel.color", + "variable": "--p-tabview-tab-panel-color", + "description": "Color of tab panel" + }, + { + "token": "navButton.background", + "variable": "--p-tabview-nav-button-background", + "description": "Background of nav button" + }, + { + "token": "navButton.color", + "variable": "--p-tabview-nav-button-color", + "description": "Color of nav button" + }, + { + "token": "navButton.hoverColor", + "variable": "--p-tabview-nav-button-hover-color", + "description": "Hover color of nav button" + }, + { + "token": "navButton.shadow", + "variable": "--p-tabview-nav-button-shadow", + "description": "Shadow of nav button" + } + ] + }, + "tag": { + "description": "Tag Design Tokens\n\n[Live Demo](https://www.primeng.org/tag/)", + "tokens": [ + { + "token": "root.fontSize", + "variable": "--p-tag-font-size", + "description": "Font size of root" + }, + { + "token": "root.fontWeight", + "variable": "--p-tag-font-weight", + "description": "Font weight of root" + }, + { + "token": "root.padding", + "variable": "--p-tag-padding", + "description": "Padding of root" + }, + { + "token": "root.gap", + "variable": "--p-tag-gap", + "description": "Gap of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-tag-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.roundedBorderRadius", + "variable": "--p-tag-rounded-border-radius", + "description": "Rounded border radius of root" + }, + { + "token": "icon.size", + "variable": "--p-tag-icon-size", + "description": "Size of icon" + }, + { + "token": "primary.background", + "variable": "--p-tag-primary-background", + "description": "Background of primary" + }, + { + "token": "primary.color", + "variable": "--p-tag-primary-color", + "description": "Color of primary" + }, + { + "token": "secondary.background", + "variable": "--p-tag-secondary-background", + "description": "Background of secondary" + }, + { + "token": "secondary.color", + "variable": "--p-tag-secondary-color", + "description": "Color of secondary" + }, + { + "token": "success.background", + "variable": "--p-tag-success-background", + "description": "Background of success" + }, + { + "token": "success.color", + "variable": "--p-tag-success-color", + "description": "Color of success" + }, + { + "token": "info.background", + "variable": "--p-tag-info-background", + "description": "Background of info" + }, + { + "token": "info.color", + "variable": "--p-tag-info-color", + "description": "Color of info" + }, + { + "token": "warn.background", + "variable": "--p-tag-warn-background", + "description": "Background of warn" + }, + { + "token": "warn.color", + "variable": "--p-tag-warn-color", + "description": "Color of warn" + }, + { + "token": "danger.background", + "variable": "--p-tag-danger-background", + "description": "Background of danger" + }, + { + "token": "danger.color", + "variable": "--p-tag-danger-color", + "description": "Color of danger" + }, + { + "token": "contrast.background", + "variable": "--p-tag-contrast-background", + "description": "Background of contrast" + }, + { + "token": "contrast.color", + "variable": "--p-tag-contrast-color", + "description": "Color of contrast" + } + ] + }, + "terminal": { + "description": "Terminal Design Tokens\n\n[Live Demo](https://www.primeng.org/terminal/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-terminal-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-terminal-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-terminal-color", + "description": "Color of root" + }, + { + "token": "root.height", + "variable": "--p-terminal-height", + "description": "Height of root" + }, + { + "token": "root.padding", + "variable": "--p-terminal-padding", + "description": "Padding of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-terminal-border-radius", + "description": "Border radius of root" + }, + { + "token": "prompt.gap", + "variable": "--p-terminal-prompt-gap", + "description": "Gap of prompt" + }, + { + "token": "commandResponse.margin", + "variable": "--p-terminal-command-response-margin", + "description": "Margin of command response" + } + ] + }, + "textarea": { + "description": "Textarea Design Tokens\n\n[Live Demo](https://www.primeng.org/textarea/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-textarea-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-textarea-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-textarea-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.filledFocusBackground", + "variable": "--p-textarea-filled-focus-background", + "description": "Filled focus background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-textarea-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-textarea-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-textarea-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-textarea-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-textarea-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-textarea-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.placeholderColor", + "variable": "--p-textarea-placeholder-color", + "description": "Placeholder color of root" + }, + { + "token": "root.invalidPlaceholderColor", + "variable": "--p-textarea-invalid-placeholder-color", + "description": "Invalid placeholder color of root" + }, + { + "token": "root.shadow", + "variable": "--p-textarea-shadow", + "description": "Shadow of root" + }, + { + "token": "root.paddingX", + "variable": "--p-textarea-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-textarea-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-textarea-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-textarea-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-textarea-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-textarea-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-textarea-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-textarea-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-textarea-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "sm.fontSize", + "variable": "--p-textarea-sm-font-size", + "description": "Sm font size of root" + }, + { + "token": "sm.paddingX", + "variable": "--p-textarea-sm-padding-x", + "description": "Sm padding x of root" + }, + { + "token": "sm.paddingY", + "variable": "--p-textarea-sm-padding-y", + "description": "Sm padding y of root" + }, + { + "token": "lg.fontSize", + "variable": "--p-textarea-lg-font-size", + "description": "Lg font size of root" + }, + { + "token": "lg.paddingX", + "variable": "--p-textarea-lg-padding-x", + "description": "Lg padding x of root" + }, + { + "token": "lg.paddingY", + "variable": "--p-textarea-lg-padding-y", + "description": "Lg padding y of root" + } + ] + }, + "tieredmenu": { + "description": "TieredMenu Design Tokens\n\n[Live Demo](https://www.primeng.org/tieredmenu/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-tieredmenu-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-tieredmenu-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-tieredmenu-color", + "description": "Color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-tieredmenu-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.shadow", + "variable": "--p-tieredmenu-shadow", + "description": "Shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-tieredmenu-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "list.padding", + "variable": "--p-tieredmenu-list-padding", + "description": "Padding of list" + }, + { + "token": "list.gap", + "variable": "--p-tieredmenu-list-gap", + "description": "Gap of list" + }, + { + "token": "item.focusBackground", + "variable": "--p-tieredmenu-item-focus-background", + "description": "Focus background of item" + }, + { + "token": "item.activeBackground", + "variable": "--p-tieredmenu-item-active-background", + "description": "Active background of item" + }, + { + "token": "item.color", + "variable": "--p-tieredmenu-item-color", + "description": "Color of item" + }, + { + "token": "item.focusColor", + "variable": "--p-tieredmenu-item-focus-color", + "description": "Focus color of item" + }, + { + "token": "item.activeColor", + "variable": "--p-tieredmenu-item-active-color", + "description": "Active color of item" + }, + { + "token": "item.padding", + "variable": "--p-tieredmenu-item-padding", + "description": "Padding of item" + }, + { + "token": "item.borderRadius", + "variable": "--p-tieredmenu-item-border-radius", + "description": "Border radius of item" + }, + { + "token": "item.gap", + "variable": "--p-tieredmenu-item-gap", + "description": "Gap of item" + }, + { + "token": "icon.color", + "variable": "--p-tieredmenu-item-icon-color", + "description": "Icon color of item" + }, + { + "token": "icon.focusColor", + "variable": "--p-tieredmenu-item-icon-focus-color", + "description": "Icon focus color of item" + }, + { + "token": "icon.activeColor", + "variable": "--p-tieredmenu-item-icon-active-color", + "description": "Icon active color of item" + }, + { + "token": "submenu.mobileIndent", + "variable": "--p-tieredmenu-submenu-mobile-indent", + "description": "Mobile indent of submenu" + }, + { + "token": "submenuLabel.padding", + "variable": "--p-tieredmenu-submenu-label-padding", + "description": "Padding of submenu label" + }, + { + "token": "submenuLabel.fontWeight", + "variable": "--p-tieredmenu-submenu-label-font-weight", + "description": "Font weight of submenu label" + }, + { + "token": "submenuLabel.background", + "variable": "--p-tieredmenu-submenu-label-background", + "description": "Background of submenu label" + }, + { + "token": "submenuLabel.color", + "variable": "--p-tieredmenu-submenu-label-color", + "description": "Color of submenu label" + }, + { + "token": "submenuIcon.size", + "variable": "--p-tieredmenu-submenu-icon-size", + "description": "Size of submenu icon" + }, + { + "token": "submenuIcon.color", + "variable": "--p-tieredmenu-submenu-icon-color", + "description": "Color of submenu icon" + }, + { + "token": "submenuIcon.focusColor", + "variable": "--p-tieredmenu-submenu-icon-focus-color", + "description": "Focus color of submenu icon" + }, + { + "token": "submenuIcon.activeColor", + "variable": "--p-tieredmenu-submenu-icon-active-color", + "description": "Active color of submenu icon" + }, + { + "token": "separator.borderColor", + "variable": "--p-tieredmenu-separator-border-color", + "description": "Border color of separator" + } + ] + }, + "timeline": { + "description": "Timeline Design Tokens\n\n[Live Demo](https://www.primeng.org/timeline/)", + "tokens": [ + { + "token": "event.minHeight", + "variable": "--p-timeline-event-min-height", + "description": "Min height of event" + }, + { + "token": "eventContent.padding", + "variable": "--p-timeline-horizontal-event-content-padding", + "description": "Event content padding of horizontal" + }, + { + "token": "eventContent.padding", + "variable": "--p-timeline-vertical-event-content-padding", + "description": "Event content padding of vertical" + }, + { + "token": "eventMarker.size", + "variable": "--p-timeline-event-marker-size", + "description": "Size of event marker" + }, + { + "token": "eventMarker.borderRadius", + "variable": "--p-timeline-event-marker-border-radius", + "description": "Border radius of event marker" + }, + { + "token": "eventMarker.borderWidth", + "variable": "--p-timeline-event-marker-border-width", + "description": "Border width of event marker" + }, + { + "token": "eventMarker.background", + "variable": "--p-timeline-event-marker-background", + "description": "Background of event marker" + }, + { + "token": "eventMarker.borderColor", + "variable": "--p-timeline-event-marker-border-color", + "description": "Border color of event marker" + }, + { + "token": "content.borderRadius", + "variable": "--p-timeline-event-marker-content-border-radius", + "description": "Content border radius of event marker" + }, + { + "token": "content.size", + "variable": "--p-timeline-event-marker-content-size", + "description": "Content size of event marker" + }, + { + "token": "content.background", + "variable": "--p-timeline-event-marker-content-background", + "description": "Content background of event marker" + }, + { + "token": "content.insetShadow", + "variable": "--p-timeline-event-marker-content-inset-shadow", + "description": "Content inset shadow of event marker" + }, + { + "token": "eventConnector.color", + "variable": "--p-timeline-event-connector-color", + "description": "Color of event connector" + }, + { + "token": "eventConnector.size", + "variable": "--p-timeline-event-connector-size", + "description": "Size of event connector" + } + ] + }, + "toast": { + "description": "Toast Design Tokens\n\n[Live Demo](https://www.primeng.org/toast/)", + "tokens": [ + { + "token": "root.width", + "variable": "--p-toast-width", + "description": "Width of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-toast-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.borderWidth", + "variable": "--p-toast-border-width", + "description": "Border width of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-toast-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "icon.size", + "variable": "--p-toast-icon-size", + "description": "Size of icon" + }, + { + "token": "content.padding", + "variable": "--p-toast-content-padding", + "description": "Padding of content" + }, + { + "token": "content.gap", + "variable": "--p-toast-content-gap", + "description": "Gap of content" + }, + { + "token": "text.gap", + "variable": "--p-toast-text-gap", + "description": "Gap of text" + }, + { + "token": "summary.fontWeight", + "variable": "--p-toast-summary-font-weight", + "description": "Font weight of summary" + }, + { + "token": "summary.fontSize", + "variable": "--p-toast-summary-font-size", + "description": "Font size of summary" + }, + { + "token": "detail.fontWeight", + "variable": "--p-toast-detail-font-weight", + "description": "Font weight of detail" + }, + { + "token": "detail.fontSize", + "variable": "--p-toast-detail-font-size", + "description": "Font size of detail" + }, + { + "token": "closeButton.width", + "variable": "--p-toast-close-button-width", + "description": "Width of close button" + }, + { + "token": "closeButton.height", + "variable": "--p-toast-close-button-height", + "description": "Height of close button" + }, + { + "token": "closeButton.borderRadius", + "variable": "--p-toast-close-button-border-radius", + "description": "Border radius of close button" + }, + { + "token": "focusRing.width", + "variable": "--p-toast-close-button-focus-ring-width", + "description": "Focus ring width of close button" + }, + { + "token": "focusRing.style", + "variable": "--p-toast-close-button-focus-ring-style", + "description": "Focus ring style of close button" + }, + { + "token": "focusRing.offset", + "variable": "--p-toast-close-button-focus-ring-offset", + "description": "Focus ring offset of close button" + }, + { + "token": "closeIcon.size", + "variable": "--p-toast-close-icon-size", + "description": "Size of close icon" + }, + { + "token": "blur.0", + "variable": "--p-toast-blur-0", + "description": "0 of blur" + }, + { + "token": "blur.1", + "variable": "--p-toast-blur-1", + "description": "1 of blur" + }, + { + "token": "blur.2", + "variable": "--p-toast-blur-2", + "description": "2 of blur" + }, + { + "token": "blur.3", + "variable": "--p-toast-blur-3", + "description": "3 of blur" + }, + { + "token": "blur.4", + "variable": "--p-toast-blur-4", + "description": "4 of blur" + }, + { + "token": "info.background", + "variable": "--p-toast-info-background", + "description": "Background of info" + }, + { + "token": "info.borderColor", + "variable": "--p-toast-info-border-color", + "description": "Border color of info" + }, + { + "token": "info.color", + "variable": "--p-toast-info-color", + "description": "Color of info" + }, + { + "token": "info.detailColor", + "variable": "--p-toast-info-detail-color", + "description": "Detail color of info" + }, + { + "token": "info.shadow", + "variable": "--p-toast-info-shadow", + "description": "Shadow of info" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-toast-info-close-button-hover-background", + "description": "Close button hover background of info" + }, + { + "token": "focusRing.color", + "variable": "--p-toast-info-close-button-focus-ring-color", + "description": "Close button focus ring color of info" + }, + { + "token": "focusRing.shadow", + "variable": "--p-toast-info-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of info" + }, + { + "token": "success.background", + "variable": "--p-toast-success-background", + "description": "Background of success" + }, + { + "token": "success.borderColor", + "variable": "--p-toast-success-border-color", + "description": "Border color of success" + }, + { + "token": "success.color", + "variable": "--p-toast-success-color", + "description": "Color of success" + }, + { + "token": "success.detailColor", + "variable": "--p-toast-success-detail-color", + "description": "Detail color of success" + }, + { + "token": "success.shadow", + "variable": "--p-toast-success-shadow", + "description": "Shadow of success" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-toast-success-close-button-hover-background", + "description": "Close button hover background of success" + }, + { + "token": "focusRing.color", + "variable": "--p-toast-success-close-button-focus-ring-color", + "description": "Close button focus ring color of success" + }, + { + "token": "focusRing.shadow", + "variable": "--p-toast-success-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of success" + }, + { + "token": "warn.background", + "variable": "--p-toast-warn-background", + "description": "Background of warn" + }, + { + "token": "warn.borderColor", + "variable": "--p-toast-warn-border-color", + "description": "Border color of warn" + }, + { + "token": "warn.color", + "variable": "--p-toast-warn-color", + "description": "Color of warn" + }, + { + "token": "warn.detailColor", + "variable": "--p-toast-warn-detail-color", + "description": "Detail color of warn" + }, + { + "token": "warn.shadow", + "variable": "--p-toast-warn-shadow", + "description": "Shadow of warn" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-toast-warn-close-button-hover-background", + "description": "Close button hover background of warn" + }, + { + "token": "focusRing.color", + "variable": "--p-toast-warn-close-button-focus-ring-color", + "description": "Close button focus ring color of warn" + }, + { + "token": "focusRing.shadow", + "variable": "--p-toast-warn-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of warn" + }, + { + "token": "error.background", + "variable": "--p-toast-error-background", + "description": "Background of error" + }, + { + "token": "error.borderColor", + "variable": "--p-toast-error-border-color", + "description": "Border color of error" + }, + { + "token": "error.color", + "variable": "--p-toast-error-color", + "description": "Color of error" + }, + { + "token": "error.detailColor", + "variable": "--p-toast-error-detail-color", + "description": "Detail color of error" + }, + { + "token": "error.shadow", + "variable": "--p-toast-error-shadow", + "description": "Shadow of error" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-toast-error-close-button-hover-background", + "description": "Close button hover background of error" + }, + { + "token": "focusRing.color", + "variable": "--p-toast-error-close-button-focus-ring-color", + "description": "Close button focus ring color of error" + }, + { + "token": "focusRing.shadow", + "variable": "--p-toast-error-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of error" + }, + { + "token": "secondary.background", + "variable": "--p-toast-secondary-background", + "description": "Background of secondary" + }, + { + "token": "secondary.borderColor", + "variable": "--p-toast-secondary-border-color", + "description": "Border color of secondary" + }, + { + "token": "secondary.color", + "variable": "--p-toast-secondary-color", + "description": "Color of secondary" + }, + { + "token": "secondary.detailColor", + "variable": "--p-toast-secondary-detail-color", + "description": "Detail color of secondary" + }, + { + "token": "secondary.shadow", + "variable": "--p-toast-secondary-shadow", + "description": "Shadow of secondary" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-toast-secondary-close-button-hover-background", + "description": "Close button hover background of secondary" + }, + { + "token": "focusRing.color", + "variable": "--p-toast-secondary-close-button-focus-ring-color", + "description": "Close button focus ring color of secondary" + }, + { + "token": "focusRing.shadow", + "variable": "--p-toast-secondary-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of secondary" + }, + { + "token": "contrast.background", + "variable": "--p-toast-contrast-background", + "description": "Background of contrast" + }, + { + "token": "contrast.borderColor", + "variable": "--p-toast-contrast-border-color", + "description": "Border color of contrast" + }, + { + "token": "contrast.color", + "variable": "--p-toast-contrast-color", + "description": "Color of contrast" + }, + { + "token": "contrast.detailColor", + "variable": "--p-toast-contrast-detail-color", + "description": "Detail color of contrast" + }, + { + "token": "contrast.shadow", + "variable": "--p-toast-contrast-shadow", + "description": "Shadow of contrast" + }, + { + "token": "closeButton.hoverBackground", + "variable": "--p-toast-contrast-close-button-hover-background", + "description": "Close button hover background of contrast" + }, + { + "token": "focusRing.color", + "variable": "--p-toast-contrast-close-button-focus-ring-color", + "description": "Close button focus ring color of contrast" + }, + { + "token": "focusRing.shadow", + "variable": "--p-toast-contrast-close-button-focus-ring-shadow", + "description": "Close button focus ring shadow of contrast" + } + ] + }, + "togglebutton": { + "description": "ToggleButton Design Tokens\n\n[Live Demo](https://www.primeng.org/togglebutton/)", + "tokens": [ + { + "token": "root.padding", + "variable": "--p-togglebutton-padding", + "description": "Padding of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-togglebutton-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.gap", + "variable": "--p-togglebutton-gap", + "description": "Gap of root" + }, + { + "token": "root.fontWeight", + "variable": "--p-togglebutton-font-weight", + "description": "Font weight of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-togglebutton-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.disabledBorderColor", + "variable": "--p-togglebutton-disabled-border-color", + "description": "Disabled border color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-togglebutton-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-togglebutton-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "focusRing.width", + "variable": "--p-togglebutton-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-togglebutton-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-togglebutton-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-togglebutton-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-togglebutton-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-togglebutton-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "root.background", + "variable": "--p-togglebutton-background", + "description": "Background of root" + }, + { + "token": "root.checkedBackground", + "variable": "--p-togglebutton-checked-background", + "description": "Checked background of root" + }, + { + "token": "root.hoverBackground", + "variable": "--p-togglebutton-hover-background", + "description": "Hover background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-togglebutton-border-color", + "description": "Border color of root" + }, + { + "token": "root.color", + "variable": "--p-togglebutton-color", + "description": "Color of root" + }, + { + "token": "root.hoverColor", + "variable": "--p-togglebutton-hover-color", + "description": "Hover color of root" + }, + { + "token": "root.checkedColor", + "variable": "--p-togglebutton-checked-color", + "description": "Checked color of root" + }, + { + "token": "root.checkedBorderColor", + "variable": "--p-togglebutton-checked-border-color", + "description": "Checked border color of root" + }, + { + "token": "icon.disabledColor", + "variable": "--p-togglebutton-icon-disabled-color", + "description": "Disabled color of icon" + }, + { + "token": "icon.color", + "variable": "--p-togglebutton-icon-color", + "description": "Color of icon" + }, + { + "token": "icon.hoverColor", + "variable": "--p-togglebutton-icon-hover-color", + "description": "Hover color of icon" + }, + { + "token": "icon.checkedColor", + "variable": "--p-togglebutton-icon-checked-color", + "description": "Checked color of icon" + }, + { + "token": "content.left", + "variable": "--p-togglebutton-content-left", + "description": "Left of content" + }, + { + "token": "content.top", + "variable": "--p-togglebutton-content-top", + "description": "Top of content" + }, + { + "token": "content.checkedShadow", + "variable": "--p-togglebutton-content-checked-shadow", + "description": "Checked shadow of content" + }, + { + "token": "content.checkedBackground", + "variable": "--p-togglebutton-content-checked-background", + "description": "Checked background of content" + } + ] + }, + "toggleswitch": { + "description": "ToggleSwitch Design Tokens\n\n[Live Demo](https://www.primeng.org/toggleswitch/)", + "tokens": [ + { + "token": "root.width", + "variable": "--p-toggleswitch-width", + "description": "Width of root" + }, + { + "token": "root.height", + "variable": "--p-toggleswitch-height", + "description": "Height of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-toggleswitch-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.gap", + "variable": "--p-toggleswitch-gap", + "description": "Gap of root" + }, + { + "token": "root.shadow", + "variable": "--p-toggleswitch-shadow", + "description": "Shadow of root" + }, + { + "token": "focusRing.width", + "variable": "--p-toggleswitch-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-toggleswitch-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-toggleswitch-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-toggleswitch-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-toggleswitch-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.borderWidth", + "variable": "--p-toggleswitch-border-width", + "description": "Border width of root" + }, + { + "token": "root.borderColor", + "variable": "--p-toggleswitch-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-toggleswitch-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.checkedBorderColor", + "variable": "--p-toggleswitch-checked-border-color", + "description": "Checked border color of root" + }, + { + "token": "root.checkedHoverBorderColor", + "variable": "--p-toggleswitch-checked-hover-border-color", + "description": "Checked hover border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-toggleswitch-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-toggleswitch-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "root.slideDuration", + "variable": "--p-toggleswitch-slide-duration", + "description": "Slide duration of root" + }, + { + "token": "root.background", + "variable": "--p-toggleswitch-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-toggleswitch-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.hoverBackground", + "variable": "--p-toggleswitch-hover-background", + "description": "Hover background of root" + }, + { + "token": "root.checkedBackground", + "variable": "--p-toggleswitch-checked-background", + "description": "Checked background of root" + }, + { + "token": "root.checkedHoverBackground", + "variable": "--p-toggleswitch-checked-hover-background", + "description": "Checked hover background of root" + }, + { + "token": "handle.borderRadius", + "variable": "--p-toggleswitch-handle-border-radius", + "description": "Border radius of handle" + }, + { + "token": "handle.size", + "variable": "--p-toggleswitch-handle-size", + "description": "Size of handle" + }, + { + "token": "handle.background", + "variable": "--p-toggleswitch-handle-background", + "description": "Background of handle" + }, + { + "token": "handle.disabledBackground", + "variable": "--p-toggleswitch-handle-disabled-background", + "description": "Disabled background of handle" + }, + { + "token": "handle.hoverBackground", + "variable": "--p-toggleswitch-handle-hover-background", + "description": "Hover background of handle" + }, + { + "token": "handle.checkedBackground", + "variable": "--p-toggleswitch-handle-checked-background", + "description": "Checked background of handle" + }, + { + "token": "handle.checkedHoverBackground", + "variable": "--p-toggleswitch-handle-checked-hover-background", + "description": "Checked hover background of handle" + }, + { + "token": "handle.color", + "variable": "--p-toggleswitch-handle-color", + "description": "Color of handle" + }, + { + "token": "handle.hoverColor", + "variable": "--p-toggleswitch-handle-hover-color", + "description": "Hover color of handle" + }, + { + "token": "handle.checkedColor", + "variable": "--p-toggleswitch-handle-checked-color", + "description": "Checked color of handle" + }, + { + "token": "handle.checkedHoverColor", + "variable": "--p-toggleswitch-handle-checked-hover-color", + "description": "Checked hover color of handle" + } + ] + }, + "toolbar": { + "description": "Toolbar Design Tokens\n\n[Live Demo](https://www.primeng.org/toolbar/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-toolbar-background", + "description": "Background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-toolbar-border-color", + "description": "Border color of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-toolbar-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.color", + "variable": "--p-toolbar-color", + "description": "Color of root" + }, + { + "token": "root.gap", + "variable": "--p-toolbar-gap", + "description": "Gap of root" + }, + { + "token": "root.padding", + "variable": "--p-toolbar-padding", + "description": "Padding of root" + } + ] + }, + "tooltip": { + "description": "Tooltip Design Tokens\n\n[Live Demo](https://www.primeng.org/tooltip/)", + "tokens": [ + { + "token": "root.maxWidth", + "variable": "--p-tooltip-max-width", + "description": "Max width of root" + }, + { + "token": "root.gutter", + "variable": "--p-tooltip-gutter", + "description": "Gutter of root" + }, + { + "token": "root.shadow", + "variable": "--p-tooltip-shadow", + "description": "Shadow of root" + }, + { + "token": "root.padding", + "variable": "--p-tooltip-padding", + "description": "Padding of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-tooltip-border-radius", + "description": "Border radius of root" + }, + { + "token": "root.background", + "variable": "--p-tooltip-background", + "description": "Background of root" + }, + { + "token": "root.color", + "variable": "--p-tooltip-color", + "description": "Color of root" + } + ] + }, + "tree": { + "description": "Tree Design Tokens\n\n[Live Demo](https://www.primeng.org/tree/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-tree-background", + "description": "Background of root" + }, + { + "token": "root.color", + "variable": "--p-tree-color", + "description": "Color of root" + }, + { + "token": "root.padding", + "variable": "--p-tree-padding", + "description": "Padding of root" + }, + { + "token": "root.gap", + "variable": "--p-tree-gap", + "description": "Gap of root" + }, + { + "token": "root.indent", + "variable": "--p-tree-indent", + "description": "Indent of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-tree-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "node.padding", + "variable": "--p-tree-node-padding", + "description": "Padding of node" + }, + { + "token": "node.borderRadius", + "variable": "--p-tree-node-border-radius", + "description": "Border radius of node" + }, + { + "token": "node.hoverBackground", + "variable": "--p-tree-node-hover-background", + "description": "Hover background of node" + }, + { + "token": "node.selectedBackground", + "variable": "--p-tree-node-selected-background", + "description": "Selected background of node" + }, + { + "token": "node.color", + "variable": "--p-tree-node-color", + "description": "Color of node" + }, + { + "token": "node.hoverColor", + "variable": "--p-tree-node-hover-color", + "description": "Hover color of node" + }, + { + "token": "node.selectedColor", + "variable": "--p-tree-node-selected-color", + "description": "Selected color of node" + }, + { + "token": "focusRing.width", + "variable": "--p-tree-node-focus-ring-width", + "description": "Focus ring width of node" + }, + { + "token": "focusRing.style", + "variable": "--p-tree-node-focus-ring-style", + "description": "Focus ring style of node" + }, + { + "token": "focusRing.color", + "variable": "--p-tree-node-focus-ring-color", + "description": "Focus ring color of node" + }, + { + "token": "focusRing.offset", + "variable": "--p-tree-node-focus-ring-offset", + "description": "Focus ring offset of node" + }, + { + "token": "focusRing.shadow", + "variable": "--p-tree-node-focus-ring-shadow", + "description": "Focus ring shadow of node" + }, + { + "token": "node.gap", + "variable": "--p-tree-node-gap", + "description": "Gap of node" + }, + { + "token": "nodeIcon.color", + "variable": "--p-tree-node-icon-color", + "description": "Color of node icon" + }, + { + "token": "nodeIcon.hoverColor", + "variable": "--p-tree-node-icon-hover-color", + "description": "Hover color of node icon" + }, + { + "token": "nodeIcon.selectedColor", + "variable": "--p-tree-node-icon-selected-color", + "description": "Selected color of node icon" + }, + { + "token": "nodeToggleButton.borderRadius", + "variable": "--p-tree-node-toggle-button-border-radius", + "description": "Border radius of node toggle button" + }, + { + "token": "nodeToggleButton.size", + "variable": "--p-tree-node-toggle-button-size", + "description": "Size of node toggle button" + }, + { + "token": "nodeToggleButton.hoverBackground", + "variable": "--p-tree-node-toggle-button-hover-background", + "description": "Hover background of node toggle button" + }, + { + "token": "nodeToggleButton.selectedHoverBackground", + "variable": "--p-tree-node-toggle-button-selected-hover-background", + "description": "Selected hover background of node toggle button" + }, + { + "token": "nodeToggleButton.color", + "variable": "--p-tree-node-toggle-button-color", + "description": "Color of node toggle button" + }, + { + "token": "nodeToggleButton.hoverColor", + "variable": "--p-tree-node-toggle-button-hover-color", + "description": "Hover color of node toggle button" + }, + { + "token": "nodeToggleButton.selectedHoverColor", + "variable": "--p-tree-node-toggle-button-selected-hover-color", + "description": "Selected hover color of node toggle button" + }, + { + "token": "focusRing.width", + "variable": "--p-tree-node-toggle-button-focus-ring-width", + "description": "Focus ring width of node toggle button" + }, + { + "token": "focusRing.style", + "variable": "--p-tree-node-toggle-button-focus-ring-style", + "description": "Focus ring style of node toggle button" + }, + { + "token": "focusRing.color", + "variable": "--p-tree-node-toggle-button-focus-ring-color", + "description": "Focus ring color of node toggle button" + }, + { + "token": "focusRing.offset", + "variable": "--p-tree-node-toggle-button-focus-ring-offset", + "description": "Focus ring offset of node toggle button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-tree-node-toggle-button-focus-ring-shadow", + "description": "Focus ring shadow of node toggle button" + }, + { + "token": "loadingIcon.size", + "variable": "--p-tree-loading-icon-size", + "description": "Size of loading icon" + } + ] + }, + "treeselect": { + "description": "TreeSelect Design Tokens\n\n[Live Demo](https://www.primeng.org/treeselect/)", + "tokens": [ + { + "token": "root.background", + "variable": "--p-treeselect-background", + "description": "Background of root" + }, + { + "token": "root.disabledBackground", + "variable": "--p-treeselect-disabled-background", + "description": "Disabled background of root" + }, + { + "token": "root.filledBackground", + "variable": "--p-treeselect-filled-background", + "description": "Filled background of root" + }, + { + "token": "root.filledHoverBackground", + "variable": "--p-treeselect-filled-hover-background", + "description": "Filled hover background of root" + }, + { + "token": "root.filledFocusBackground", + "variable": "--p-treeselect-filled-focus-background", + "description": "Filled focus background of root" + }, + { + "token": "root.borderColor", + "variable": "--p-treeselect-border-color", + "description": "Border color of root" + }, + { + "token": "root.hoverBorderColor", + "variable": "--p-treeselect-hover-border-color", + "description": "Hover border color of root" + }, + { + "token": "root.focusBorderColor", + "variable": "--p-treeselect-focus-border-color", + "description": "Focus border color of root" + }, + { + "token": "root.invalidBorderColor", + "variable": "--p-treeselect-invalid-border-color", + "description": "Invalid border color of root" + }, + { + "token": "root.color", + "variable": "--p-treeselect-color", + "description": "Color of root" + }, + { + "token": "root.disabledColor", + "variable": "--p-treeselect-disabled-color", + "description": "Disabled color of root" + }, + { + "token": "root.placeholderColor", + "variable": "--p-treeselect-placeholder-color", + "description": "Placeholder color of root" + }, + { + "token": "root.invalidPlaceholderColor", + "variable": "--p-treeselect-invalid-placeholder-color", + "description": "Invalid placeholder color of root" + }, + { + "token": "root.shadow", + "variable": "--p-treeselect-shadow", + "description": "Shadow of root" + }, + { + "token": "root.paddingX", + "variable": "--p-treeselect-padding-x", + "description": "Padding x of root" + }, + { + "token": "root.paddingY", + "variable": "--p-treeselect-padding-y", + "description": "Padding y of root" + }, + { + "token": "root.borderRadius", + "variable": "--p-treeselect-border-radius", + "description": "Border radius of root" + }, + { + "token": "focusRing.width", + "variable": "--p-treeselect-focus-ring-width", + "description": "Focus ring width of root" + }, + { + "token": "focusRing.style", + "variable": "--p-treeselect-focus-ring-style", + "description": "Focus ring style of root" + }, + { + "token": "focusRing.color", + "variable": "--p-treeselect-focus-ring-color", + "description": "Focus ring color of root" + }, + { + "token": "focusRing.offset", + "variable": "--p-treeselect-focus-ring-offset", + "description": "Focus ring offset of root" + }, + { + "token": "focusRing.shadow", + "variable": "--p-treeselect-focus-ring-shadow", + "description": "Focus ring shadow of root" + }, + { + "token": "root.transitionDuration", + "variable": "--p-treeselect-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "sm.fontSize", + "variable": "--p-treeselect-sm-font-size", + "description": "Sm font size of root" + }, + { + "token": "sm.paddingX", + "variable": "--p-treeselect-sm-padding-x", + "description": "Sm padding x of root" + }, + { + "token": "sm.paddingY", + "variable": "--p-treeselect-sm-padding-y", + "description": "Sm padding y of root" + }, + { + "token": "lg.fontSize", + "variable": "--p-treeselect-lg-font-size", + "description": "Lg font size of root" + }, + { + "token": "lg.paddingX", + "variable": "--p-treeselect-lg-padding-x", + "description": "Lg padding x of root" + }, + { + "token": "lg.paddingY", + "variable": "--p-treeselect-lg-padding-y", + "description": "Lg padding y of root" + }, + { + "token": "dropdown.width", + "variable": "--p-treeselect-dropdown-width", + "description": "Width of dropdown" + }, + { + "token": "dropdown.color", + "variable": "--p-treeselect-dropdown-color", + "description": "Color of dropdown" + }, + { + "token": "overlay.background", + "variable": "--p-treeselect-overlay-background", + "description": "Background of overlay" + }, + { + "token": "overlay.borderColor", + "variable": "--p-treeselect-overlay-border-color", + "description": "Border color of overlay" + }, + { + "token": "overlay.borderRadius", + "variable": "--p-treeselect-overlay-border-radius", + "description": "Border radius of overlay" + }, + { + "token": "overlay.color", + "variable": "--p-treeselect-overlay-color", + "description": "Color of overlay" + }, + { + "token": "overlay.shadow", + "variable": "--p-treeselect-overlay-shadow", + "description": "Shadow of overlay" + }, + { + "token": "tree.padding", + "variable": "--p-treeselect-tree-padding", + "description": "Padding of tree" + }, + { + "token": "clearIcon.color", + "variable": "--p-treeselect-clear-icon-color", + "description": "Color of clear icon" + }, + { + "token": "emptyMessage.padding", + "variable": "--p-treeselect-empty-message-padding", + "description": "Padding of empty message" + }, + { + "token": "chip.borderRadius", + "variable": "--p-treeselect-chip-border-radius", + "description": "Border radius of chip" + } + ] + }, + "treetable": { + "description": "TreeTable Design Tokens\n\n[Live Demo](https://www.primeng.org/treetable/)", + "tokens": [ + { + "token": "root.transitionDuration", + "variable": "--p-treetable-transition-duration", + "description": "Transition duration of root" + }, + { + "token": "root.borderColor", + "variable": "--p-treetable-border-color", + "description": "Border color of root" + }, + { + "token": "header.background", + "variable": "--p-treetable-header-background", + "description": "Background of header" + }, + { + "token": "header.borderColor", + "variable": "--p-treetable-header-border-color", + "description": "Border color of header" + }, + { + "token": "header.color", + "variable": "--p-treetable-header-color", + "description": "Color of header" + }, + { + "token": "header.borderWidth", + "variable": "--p-treetable-header-border-width", + "description": "Border width of header" + }, + { + "token": "header.padding", + "variable": "--p-treetable-header-padding", + "description": "Padding of header" + }, + { + "token": "headerCell.background", + "variable": "--p-treetable-header-cell-background", + "description": "Background of header cell" + }, + { + "token": "headerCell.hoverBackground", + "variable": "--p-treetable-header-cell-hover-background", + "description": "Hover background of header cell" + }, + { + "token": "headerCell.selectedBackground", + "variable": "--p-treetable-header-cell-selected-background", + "description": "Selected background of header cell" + }, + { + "token": "headerCell.borderColor", + "variable": "--p-treetable-header-cell-border-color", + "description": "Border color of header cell" + }, + { + "token": "headerCell.color", + "variable": "--p-treetable-header-cell-color", + "description": "Color of header cell" + }, + { + "token": "headerCell.hoverColor", + "variable": "--p-treetable-header-cell-hover-color", + "description": "Hover color of header cell" + }, + { + "token": "headerCell.selectedColor", + "variable": "--p-treetable-header-cell-selected-color", + "description": "Selected color of header cell" + }, + { + "token": "headerCell.gap", + "variable": "--p-treetable-header-cell-gap", + "description": "Gap of header cell" + }, + { + "token": "headerCell.padding", + "variable": "--p-treetable-header-cell-padding", + "description": "Padding of header cell" + }, + { + "token": "focusRing.width", + "variable": "--p-treetable-header-cell-focus-ring-width", + "description": "Focus ring width of header cell" + }, + { + "token": "focusRing.style", + "variable": "--p-treetable-header-cell-focus-ring-style", + "description": "Focus ring style of header cell" + }, + { + "token": "focusRing.color", + "variable": "--p-treetable-header-cell-focus-ring-color", + "description": "Focus ring color of header cell" + }, + { + "token": "focusRing.offset", + "variable": "--p-treetable-header-cell-focus-ring-offset", + "description": "Focus ring offset of header cell" + }, + { + "token": "focusRing.shadow", + "variable": "--p-treetable-header-cell-focus-ring-shadow", + "description": "Focus ring shadow of header cell" + }, + { + "token": "columnTitle.fontWeight", + "variable": "--p-treetable-column-title-font-weight", + "description": "Font weight of column title" + }, + { + "token": "row.background", + "variable": "--p-treetable-row-background", + "description": "Background of row" + }, + { + "token": "row.hoverBackground", + "variable": "--p-treetable-row-hover-background", + "description": "Hover background of row" + }, + { + "token": "row.selectedBackground", + "variable": "--p-treetable-row-selected-background", + "description": "Selected background of row" + }, + { + "token": "row.color", + "variable": "--p-treetable-row-color", + "description": "Color of row" + }, + { + "token": "row.hoverColor", + "variable": "--p-treetable-row-hover-color", + "description": "Hover color of row" + }, + { + "token": "row.selectedColor", + "variable": "--p-treetable-row-selected-color", + "description": "Selected color of row" + }, + { + "token": "focusRing.width", + "variable": "--p-treetable-row-focus-ring-width", + "description": "Focus ring width of row" + }, + { + "token": "focusRing.style", + "variable": "--p-treetable-row-focus-ring-style", + "description": "Focus ring style of row" + }, + { + "token": "focusRing.color", + "variable": "--p-treetable-row-focus-ring-color", + "description": "Focus ring color of row" + }, + { + "token": "focusRing.offset", + "variable": "--p-treetable-row-focus-ring-offset", + "description": "Focus ring offset of row" + }, + { + "token": "focusRing.shadow", + "variable": "--p-treetable-row-focus-ring-shadow", + "description": "Focus ring shadow of row" + }, + { + "token": "bodyCell.borderColor", + "variable": "--p-treetable-body-cell-border-color", + "description": "Border color of body cell" + }, + { + "token": "bodyCell.padding", + "variable": "--p-treetable-body-cell-padding", + "description": "Padding of body cell" + }, + { + "token": "bodyCell.gap", + "variable": "--p-treetable-body-cell-gap", + "description": "Gap of body cell" + }, + { + "token": "bodyCell.selectedBorderColor", + "variable": "--p-treetable-body-cell-selected-border-color", + "description": "Selected border color of body cell" + }, + { + "token": "footerCell.background", + "variable": "--p-treetable-footer-cell-background", + "description": "Background of footer cell" + }, + { + "token": "footerCell.borderColor", + "variable": "--p-treetable-footer-cell-border-color", + "description": "Border color of footer cell" + }, + { + "token": "footerCell.color", + "variable": "--p-treetable-footer-cell-color", + "description": "Color of footer cell" + }, + { + "token": "footerCell.padding", + "variable": "--p-treetable-footer-cell-padding", + "description": "Padding of footer cell" + }, + { + "token": "columnFooter.fontWeight", + "variable": "--p-treetable-column-footer-font-weight", + "description": "Font weight of column footer" + }, + { + "token": "footer.background", + "variable": "--p-treetable-footer-background", + "description": "Background of footer" + }, + { + "token": "footer.borderColor", + "variable": "--p-treetable-footer-border-color", + "description": "Border color of footer" + }, + { + "token": "footer.color", + "variable": "--p-treetable-footer-color", + "description": "Color of footer" + }, + { + "token": "footer.borderWidth", + "variable": "--p-treetable-footer-border-width", + "description": "Border width of footer" + }, + { + "token": "footer.padding", + "variable": "--p-treetable-footer-padding", + "description": "Padding of footer" + }, + { + "token": "columnResizerWidth.0", + "variable": "--p-treetable-column-resizer-width-0", + "description": "0 of column resizer width" + }, + { + "token": "columnResizerWidth.1", + "variable": "--p-treetable-column-resizer-width-1", + "description": "1 of column resizer width" + }, + { + "token": "columnResizerWidth.2", + "variable": "--p-treetable-column-resizer-width-2", + "description": "2 of column resizer width" + }, + { + "token": "columnResizerWidth.3", + "variable": "--p-treetable-column-resizer-width-3", + "description": "3 of column resizer width" + }, + { + "token": "columnResizerWidth.4", + "variable": "--p-treetable-column-resizer-width-4", + "description": "4 of column resizer width" + }, + { + "token": "columnResizerWidth.5", + "variable": "--p-treetable-column-resizer-width-5", + "description": "5 of column resizer width" + }, + { + "token": "resizeIndicator.width", + "variable": "--p-treetable-resize-indicator-width", + "description": "Width of resize indicator" + }, + { + "token": "resizeIndicator.color", + "variable": "--p-treetable-resize-indicator-color", + "description": "Color of resize indicator" + }, + { + "token": "sortIcon.color", + "variable": "--p-treetable-sort-icon-color", + "description": "Color of sort icon" + }, + { + "token": "sortIcon.hoverColor", + "variable": "--p-treetable-sort-icon-hover-color", + "description": "Hover color of sort icon" + }, + { + "token": "loadingIcon.size", + "variable": "--p-treetable-loading-icon-size", + "description": "Size of loading icon" + }, + { + "token": "nodeToggleButton.hoverBackground", + "variable": "--p-treetable-node-toggle-button-hover-background", + "description": "Hover background of node toggle button" + }, + { + "token": "nodeToggleButton.selectedHoverBackground", + "variable": "--p-treetable-node-toggle-button-selected-hover-background", + "description": "Selected hover background of node toggle button" + }, + { + "token": "nodeToggleButton.color", + "variable": "--p-treetable-node-toggle-button-color", + "description": "Color of node toggle button" + }, + { + "token": "nodeToggleButton.hoverColor", + "variable": "--p-treetable-node-toggle-button-hover-color", + "description": "Hover color of node toggle button" + }, + { + "token": "nodeToggleButton.selectedHoverColor", + "variable": "--p-treetable-node-toggle-button-selected-hover-color", + "description": "Selected hover color of node toggle button" + }, + { + "token": "nodeToggleButton.size", + "variable": "--p-treetable-node-toggle-button-size", + "description": "Size of node toggle button" + }, + { + "token": "nodeToggleButton.borderRadius", + "variable": "--p-treetable-node-toggle-button-border-radius", + "description": "Border radius of node toggle button" + }, + { + "token": "focusRing.width", + "variable": "--p-treetable-node-toggle-button-focus-ring-width", + "description": "Focus ring width of node toggle button" + }, + { + "token": "focusRing.style", + "variable": "--p-treetable-node-toggle-button-focus-ring-style", + "description": "Focus ring style of node toggle button" + }, + { + "token": "focusRing.color", + "variable": "--p-treetable-node-toggle-button-focus-ring-color", + "description": "Focus ring color of node toggle button" + }, + { + "token": "focusRing.offset", + "variable": "--p-treetable-node-toggle-button-focus-ring-offset", + "description": "Focus ring offset of node toggle button" + }, + { + "token": "focusRing.shadow", + "variable": "--p-treetable-node-toggle-button-focus-ring-shadow", + "description": "Focus ring shadow of node toggle button" + }, + { + "token": "paginatorTop.borderColor", + "variable": "--p-treetable-paginator-top-border-color", + "description": "Border color of paginator top" + }, + { + "token": "paginatorTop.borderWidth", + "variable": "--p-treetable-paginator-top-border-width", + "description": "Border width of paginator top" + }, + { + "token": "paginatorBottom.borderColor", + "variable": "--p-treetable-paginator-bottom-border-color", + "description": "Border color of paginator bottom" + }, + { + "token": "paginatorBottom.borderWidth", + "variable": "--p-treetable-paginator-bottom-border-width", + "description": "Border width of paginator bottom" + } + ] + }, + "scroller": { + "description": "VirtualScroller Design Tokens\n\n[Live Demo](https://www.primeng.org/virtualscroller/)", + "tokens": [ + { + "token": "loaderMask.background", + "variable": "--p-virtualscroller-loader-mask-background", + "description": "Background of loader mask" + }, + { + "token": "loaderMask.color", + "variable": "--p-virtualscroller-loader-mask-color", + "description": "Color of loader mask" + }, + { + "token": "loaderIcon.size", + "variable": "--p-virtualscroller-loader-icon-size", + "description": "Size of the loader icon" + } + ] + } +} diff --git a/apps/showcase/doc/autocomplete/accessibilitydoc.ts b/apps/showcase/doc/autocomplete/accessibilitydoc.ts new file mode 100644 index 00000000000..dab8556cb3b --- /dev/null +++ b/apps/showcase/doc/autocomplete/accessibilitydoc.ts @@ -0,0 +1,146 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'autocomplete-accessibility-doc', + template: ` + + +Screen Reader
++ Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. The input element has combobox role in addition to + aria-autocomplete, aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct + screen reader which option to read during keyboard navigation within the popup list. +
+In multiple mode, chip list uses listbox role whereas each chip has the option role with aria-label set to the label of the chip.
++ The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the + input element. +
++ + Keyboard Support
+++ ++ +
++ + + +Key +Function ++ ++ tab + +Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element. ++ ++ up arrow + +Highlights the previous item if popup is visible. ++ ++ down arrow + +Highlights the next item if popup is visible. ++ ++ enter + +Selects the highlighted item and closes the popup if popup is visible. ++ ++ home + +Highlights the first item if popup is visible. ++ ++ end + +Highlights the last item if popup is visible. ++ + ++ escape + +Hides the popup. +Chips Input Keyboard Support
+++ ++ +
++ + + +Key +Function ++ ++ backspace + +Deletes the previous chip if the input field is empty. ++ + ++ left arrow + +Moves focus to the previous chip if available and input field is empty. +Chip Keyboard Support
++` +}) +export class AccessibilityDoc { + code: Code = { + basic: ` ++ +
++ + + +Key +Function ++ ++ left arrow + +Moves focus to the previous chip if available. ++ ++ right arrow + +Moves focus to the next chip, if there is none then input field receives the focus. ++ + ++ backspace + +Deletes the chips and adds focus to the input field. ++ +Email + + + ` + }; +} diff --git a/src/app/showcase/doc/autocomplete/autocompletedoc.module.ts b/apps/showcase/doc/autocomplete/autocompletedoc.module.ts similarity index 80% rename from src/app/showcase/doc/autocomplete/autocompletedoc.module.ts rename to apps/showcase/doc/autocomplete/autocompletedoc.module.ts index e078ec628e2..5325f98f0f5 100644 --- a/src/app/showcase/doc/autocomplete/autocompletedoc.module.ts +++ b/apps/showcase/doc/autocomplete/autocompletedoc.module.ts @@ -1,46 +1,34 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; +import { RouterModule } from '@angular/router'; import { AutoCompleteModule } from 'primeng/autocomplete'; -import { ImportDoc } from './importdoc'; -import { BasicDoc } from './basicdoc'; -import { TemplateDoc } from './templatedoc'; -import { GroupDoc } from './groupdoc'; -import { VirtualScrollDoc } from './virtualscrolldoc'; -import { MultipleDoc } from './multipledoc'; -import { StyleDoc } from './styledoc'; +import { ButtonModule } from 'primeng/button'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { IftaLabelModule } from 'primeng/iftalabel'; import { AccessibilityDoc } from './accessibilitydoc'; +import { BasicDoc } from './basicdoc'; +import { DisabledDoc } from './disableddoc'; import { DropdownDoc } from './dropdowndoc'; +import { FilledDoc } from './filleddoc'; +import { FloatLabelDoc } from './floatlabeldoc'; import { ForceSelectionDoc } from './forceselectiondoc'; +import { GroupDoc } from './groupdoc'; +import { IftaLabelDoc } from './iftalabeldoc'; +import { ImportDoc } from './importdoc'; +import { InvalidDoc } from './invaliddoc'; +import { MultipleDoc } from './multipledoc'; import { ObjectsDoc } from './objectsdoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; -import { FloatLabelDoc } from './floatlabeldoc'; -import { DisabledDoc } from './disableddoc'; -import { InvalidDoc } from './invaliddoc'; -import { FilledDoc } from './filleddoc'; -import { FloatLabelModule } from 'primeng/floatlabel'; -import { IftaLabelModule } from 'primeng/iftalabel'; -import { IftaLabelDoc } from './iftalabeldoc'; -import { ButtonModule } from 'primeng/button'; import { SizesDoc } from './sizesdoc'; +import { StyleDoc } from './styledoc'; +import { TemplateDoc } from './templatedoc'; +import { VirtualScrollDoc } from './virtualscrolldoc'; @NgModule({ - imports: [ - CommonModule, - RouterModule, - AppCodeModule, - FormsModule, - AppDocModule, - AutoCompleteModule, - ReactiveFormsModule, - RouterModule, - FloatLabelModule, - IftaLabelModule, - ButtonModule - ], + imports: [CommonModule, RouterModule, AppCodeModule, FormsModule, AppDocModule, AutoCompleteModule, ReactiveFormsModule, RouterModule, FloatLabelModule, IftaLabelModule, ButtonModule], exports: [AppDocModule], declarations: [ ImportDoc, @@ -61,6 +49,6 @@ import { SizesDoc } from './sizesdoc'; InvalidDoc, FilledDoc, SizesDoc - ], + ] }) export class AutoCompleteDocModule {} diff --git a/apps/showcase/doc/autocomplete/basicdoc.ts b/apps/showcase/doc/autocomplete/basicdoc.ts new file mode 100644 index 00000000000..601931fbb35 --- /dev/null +++ b/apps/showcase/doc/autocomplete/basicdoc.ts @@ -0,0 +1,62 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'basic-doc', + template: ` + ++ AutoComplete uses ngModel for two-way binding, requires a list of suggestions and a completeMethod to query for the results. The completeMethod gets the query text as event.query property and should update the + suggestions with the search results. +
++++ ` +}) +export class BasicDoc { + items: any[] | undefined; + + value: any; + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoComplete } from 'primeng/autocomplete'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-basic-demo', + templateUrl: './autocomplete-basic-demo.html', + imports: [AutoComplete, FormsModule], + standalone: true, +}) +export class AutocompleteBasicDemo { + items: any[] | undefined; + + value: any; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map(item => event.query + '-' + item); + } +}` + }; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } +} diff --git a/apps/showcase/doc/autocomplete/disableddoc.ts b/apps/showcase/doc/autocomplete/disableddoc.ts new file mode 100644 index 00000000000..6f5d7290dbc --- /dev/null +++ b/apps/showcase/doc/autocomplete/disableddoc.ts @@ -0,0 +1,64 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'disabled-doc', + template: `+ + +When disabled is present, the element cannot be edited and focused.
++++ ` +}) +export class DisabledDoc { + items: any[] | undefined; + + selectedItem: any; + + suggestions: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.suggestions = [...Array(10).keys()].map((item) => event.query + '-' + item); + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { AutoComplete } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-disabled-demo', + templateUrl: './autocomplete-disabled-demo.html', + standalone: true, + imports: [FormsModule, AutoComplete] +}) +export class AutocompleteDisabledDemo { + items: any[] | undefined; + + selectedItem: any; + + suggestions: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.suggestions = [...Array(10).keys()].map(item => event.query + '-' + item); + } +}` + }; +} diff --git a/src/app/showcase/doc/autocomplete/dropdowndoc.ts b/apps/showcase/doc/autocomplete/dropdowndoc.ts similarity index 83% rename from src/app/showcase/doc/autocomplete/dropdowndoc.ts rename to apps/showcase/doc/autocomplete/dropdowndoc.ts index fd9d1224f6f..a4dbe5309b4 100644 --- a/src/app/showcase/doc/autocomplete/dropdowndoc.ts +++ b/apps/showcase/doc/autocomplete/dropdowndoc.ts @@ -1,5 +1,5 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -10,16 +10,14 @@ interface AutoCompleteCompleteEvent { selector: 'dropdown-doc', template: `+ - Enabling dropdown property displays a button next to the input field where click behavior of the button is defined - using dropdownMode property that takes blank or current as possible values. - blank is the default mode to send a query with an empty string whereas current setting sends a query with the - current value of the input. + Enabling dropdown property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes blank or current as possible + values. blank is the default mode to send a query with an empty string whereas current setting sends a query with the current value of the input.
-`, + ` }) export class DropdownDoc { items: any[] | undefined; @@ -57,7 +55,7 @@ export class AutocompleteDropdownDemo implements OnInit { this.items = event.query ? [...Array(10).keys()].map((item) => event.query + '-' + item) : _items; } -}`, +}` }; search(event: AutoCompleteCompleteEvent) { diff --git a/apps/showcase/doc/autocomplete/filleddoc.ts b/apps/showcase/doc/autocomplete/filleddoc.ts new file mode 100644 index 00000000000..6c33dc96038 --- /dev/null +++ b/apps/showcase/doc/autocomplete/filleddoc.ts @@ -0,0 +1,64 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'filled-doc', + template: ` + +Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
++++ ` +}) +export class FilledDoc { + items: any[] | undefined; + + selectedItem: any; + + suggestions: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.suggestions = [...Array(10).keys()].map((item) => event.query + '-' + item); + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoComplete } from 'primeng/autocomplete'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-filled-demo', + templateUrl: './autocomplete-filled-demo.html', + imports: [AutoComplete, FormsModule], + standalone: true, +}) +export class AutocompleteFilledDemo { + items: any[] | undefined; + + selectedItem: any; + + suggestions: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.suggestions = [...Array(10).keys()].map(item => event.query + '-' + item); + } +}` + }; +} diff --git a/apps/showcase/doc/autocomplete/floatlabeldoc.ts b/apps/showcase/doc/autocomplete/floatlabeldoc.ts new file mode 100644 index 00000000000..1e0c5f19720 --- /dev/null +++ b/apps/showcase/doc/autocomplete/floatlabeldoc.ts @@ -0,0 +1,110 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'float-label-doc', + template: `+ + ++ A floating label appears on top of the input field when focused. Visit + FloatLabel documentation for more information. +
++++ + ++ + + + ++ + + ++ + ` +}) +export class FloatLabelDoc { + value1: string | undefined; + + value2: string | undefined; + + value3: string | undefined; + + items: any[] | undefined; + code: Code = { + basic: ` + + ++ + + + ++ + + `, + + html: `+ + +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoComplete } from 'primeng/autocomplete'; +import { FloatLabel } from 'primeng/floatlabel'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-float-label-demo', + templateUrl: './autocomplete-float-label-demo.html', + standalone: true, + imports: [FormsModule, AutoComplete, FloatLabel] +}) +export class AutocompleteFloatLabelDemo { + value1: string | undefined; + + value2: string | undefined; + + value3: string | undefined; + + items: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } +}` + }; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } +} diff --git a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts b/apps/showcase/doc/autocomplete/forceselectiondoc.ts similarity index 80% rename from src/app/showcase/doc/autocomplete/forceselectiondoc.ts rename to apps/showcase/doc/autocomplete/forceselectiondoc.ts index da8c12581eb..d58176205cf 100644 --- a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts +++ b/apps/showcase/doc/autocomplete/forceselectiondoc.ts @@ -1,6 +1,6 @@ +import { Code } from '@/domain/code'; +import { CountryService } from '@/service/countryservice'; import { Component, Input, OnInit } from '@angular/core'; -import { Code } from '@domain/code'; -import { CountryService } from '@service/countryservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -10,21 +10,12 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'force-selection-doc', template: `+ + ++ + + + ++ + + ++ + - - ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input - value is cleared to make sure the value passed to the model is always one of the suggestions. -
+ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions.
--+ `, + ` }) export class ForceSelectionDoc implements OnInit { @Input() id: string; @@ -67,7 +58,7 @@ export class ForceSelectionDoc implements OnInit { + +Option grouping is enabled when group property is set to true. group template is available to customize the option groups. All templates get the option instance as the default local template variable.
++++ ++ +++
+ {{ group.label }}
+ ` +}) +export class GroupDoc implements OnInit { + selectedCity: any; + + filteredGroups: any[] | undefined; + + groupedCities: SelectItemGroup[] | undefined; + + constructor(private filterService: FilterService) {} + + ngOnInit() { + this.groupedCities = [ + { + label: 'Germany', + value: 'de', + items: [ + { label: 'Berlin', value: 'Berlin' }, + { label: 'Frankfurt', value: 'Frankfurt' }, + { label: 'Hamburg', value: 'Hamburg' }, + { label: 'Munich', value: 'Munich' } + ] + }, + { + label: 'USA', + value: 'us', + items: [ + { label: 'Chicago', value: 'Chicago' }, + { label: 'Los Angeles', value: 'Los Angeles' }, + { label: 'New York', value: 'New York' }, + { label: 'San Francisco', value: 'San Francisco' } + ] + }, + { + label: 'Japan', + value: 'jp', + items: [ + { label: 'Kyoto', value: 'Kyoto' }, + { label: 'Osaka', value: 'Osaka' }, + { label: 'Tokyo', value: 'Tokyo' }, + { label: 'Yokohama', value: 'Yokohama' } + ] + } + ]; + } + + filterGroupedCity(event: AutoCompleteCompleteEvent) { + let query = event.query; + let filteredGroups = []; + + for (let optgroup of this.groupedCities as SelectItemGroup[]) { + let filteredSubOptions = this.filterService.filter(optgroup.items, ['label'], query, 'contains'); + if (filteredSubOptions && filteredSubOptions.length) { + filteredGroups.push({ + label: optgroup.label, + value: optgroup.value, + items: filteredSubOptions + }); + } + } + + this.filteredGroups = filteredGroups; + } + + code: Code = { + basic: ` + `, + + html: `+ +++
+ {{ group.label }}
+ +`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { FilterService, SelectItemGroup } from 'primeng/api'; +import { AutoComplete } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-grouped-demo', + templateUrl: './autocomplete-grouped-demo.html', + standalone: true, + imports: [AutoComplete, FormsModule], + }) +export class AutocompleteGroupedDemo implements OnInit { + selectedCity: any; + + filteredGroups: any[] | undefined; + + groupedCities: SelectItemGroup[] | undefined; + + constructor(private filterService: FilterService) { } + + ngOnInit() { + this.groupedCities = [ + { + label: 'Germany', value: 'de', + items: [ + { label: 'Berlin', value: 'Berlin' }, + { label: 'Frankfurt', value: 'Frankfurt' }, + { label: 'Hamburg', value: 'Hamburg' }, + { label: 'Munich', value: 'Munich' } + ] + }, + { + label: 'USA', value: 'us', + items: [ + { label: 'Chicago', value: 'Chicago' }, + { label: 'Los Angeles', value: 'Los Angeles' }, + { label: 'New York', value: 'New York' }, + { label: 'San Francisco', value: 'San Francisco' } + ] + }, + { + label: 'Japan', value: 'jp', + items: [ + { label: 'Kyoto', value: 'Kyoto' }, + { label: 'Osaka', value: 'Osaka' }, + { label: 'Tokyo', value: 'Tokyo' }, + { label: 'Yokohama', value: 'Yokohama' } + ] + } + ]; + } + + filterGroupedCity(event: AutoCompleteCompleteEvent) { + let query = event.query; + let filteredGroups = []; + + for (let optgroup of this.groupedCities) { + let filteredSubOptions = this.filterService.filter(optgroup.items, ['label'], query, "contains"); + if (filteredSubOptions && filteredSubOptions.length) { + filteredGroups.push({ + label: optgroup.label, + value: optgroup.value, + items: filteredSubOptions + }); + } + } + + this.filteredGroups = filteredGroups; + } +}` + }; +} diff --git a/apps/showcase/doc/autocomplete/iftalabeldoc.ts b/apps/showcase/doc/autocomplete/iftalabeldoc.ts new file mode 100644 index 00000000000..62439581d79 --- /dev/null +++ b/apps/showcase/doc/autocomplete/iftalabeldoc.ts @@ -0,0 +1,69 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'ifta-label-doc', + template: `+ ++ +++
+ {{ group.label }}
+ + +IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
++++ ++ + ` +}) +export class IftaLabelDoc { + items: any[] | undefined; + + value: any; + code: Code = { + basic: ` + `, + + html: `+ + +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { IftaLabelModule } from 'primeng/iftalabel'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-ifta-label-demo', + templateUrl: './autocomplete-ifta-label-demo.html', + standalone: true, + imports: [FormsModule, AutoCompleteModule, IftaLabelModule] +}) +export class AutocompleteIftaLabelDemo { + items: any[] | undefined; + + value: any; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } +}` + }; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } +} diff --git a/apps/showcase/doc/autocomplete/importdoc.ts b/apps/showcase/doc/autocomplete/importdoc.ts new file mode 100644 index 00000000000..7a09daa0804 --- /dev/null +++ b/apps/showcase/doc/autocomplete/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'autocomplete-import-doc', + template: `+ ++ + ` +}) +export class ImportDoc { + code: Code = { + typescript: `import { AutoComplete } from 'primeng/autocomplete';` + }; +} diff --git a/apps/showcase/doc/autocomplete/invaliddoc.ts b/apps/showcase/doc/autocomplete/invaliddoc.ts new file mode 100644 index 00000000000..735d5507018 --- /dev/null +++ b/apps/showcase/doc/autocomplete/invaliddoc.ts @@ -0,0 +1,64 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'invalid-doc', + template: ` + +Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
++++ ` +}) +export class InvalidDoc { + items: any[] | undefined; + + selectedItem: any; + + suggestions: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.suggestions = [...Array(10).keys()].map((item) => event.query + '-' + item); + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoComplete } from 'primeng/autocomplete'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-invalid-demo', + templateUrl: './autocomplete-invalid-demo.html', + standalone: true, + imports: [FormsModule, AutoComplete] +}) +export class AutocompleteInvalidDemo { + items: any[] | undefined; + + selectedItem: any; + + suggestions: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.suggestions = [...Array(10).keys()].map(item => event.query + '-' + item); + } +}` + }; +} diff --git a/apps/showcase/doc/autocomplete/multipledoc.ts b/apps/showcase/doc/autocomplete/multipledoc.ts new file mode 100644 index 00000000000..f9a38513fc1 --- /dev/null +++ b/apps/showcase/doc/autocomplete/multipledoc.ts @@ -0,0 +1,76 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-multiple-demo', + template: `+ + +Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array.
++ +++ + + + ` +}) +export class MultipleDoc { + value1: any[] | undefined; + + value2: any[] | undefined; + + items: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } + + code: Code = { + basic: ` + + + + `, + + html: ` + +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoComplete } from 'primeng/autocomplete'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-multiple-demo', + templateUrl: './autocomplete-multiple-demo.html', + standalone: true, + imports: [FormsModule, AutoComplete] +}) +export class AutocompleteMultipleDemo { + value1: any[] | undefined; + + value2: any[] | undefined; + + items: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } +}` + }; +} diff --git a/src/app/showcase/doc/autocomplete/objectsdoc.ts b/apps/showcase/doc/autocomplete/objectsdoc.ts similarity index 82% rename from src/app/showcase/doc/autocomplete/objectsdoc.ts rename to apps/showcase/doc/autocomplete/objectsdoc.ts index a8dce16b76b..cc2e1b3f444 100644 --- a/src/app/showcase/doc/autocomplete/objectsdoc.ts +++ b/apps/showcase/doc/autocomplete/objectsdoc.ts @@ -1,6 +1,6 @@ +import { Code } from '@/domain/code'; +import { CountryService } from '@/service/countryservice'; import { Component, OnInit } from '@angular/core'; -import { Code } from '@domain/code'; -import { CountryService } from '@service/countryservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -11,20 +11,14 @@ interface AutoCompleteCompleteEvent { selector: 'autocomplete-objects-demo', template: `+ + + + - AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. - The value passed to the model would still be the object instance of a suggestion. Here is an example with a Country object - that has name and code fields such as {name: "United States", code:"USA"}. + AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a + Country object that has name and code fields such as {name: "United States", code:"USA"}.
--+ `, + ` }) export class ObjectsDoc implements OnInit { countries: any[] | undefined; @@ -63,7 +57,7 @@ export class ObjectsDoc implements OnInit { + +AutoComplete can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
++ ++` +}) +export class ReactiveFormsDoc { + items: any[] | undefined; + + formGroup: FormGroup | undefined; + code: Code = { + basic: ``, + + html: ` + +`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { CountryService } from '@/service/countryservice'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { AutoComplete } from 'primeng/autocomplete'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-reactive-forms-demo', + templateUrl: './autocomplete-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, AutoComplete], + providers: [CountryService] +}) +export class AutocompleteReactiveFormsDemo implements OnInit { + items: any[] | undefined; + + formGroup: FormGroup | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } + + ngOnInit() { + this.formGroup = new FormGroup({ + selectedCountry: new FormControl(undefined), + }); + } +}` + }; + + search(event: AutoCompleteCompleteEvent) { + this.items = [...Array(10).keys()].map((item) => event.query + '-' + item); + } + + ngOnInit() { + this.formGroup = new FormGroup({ + selectedCountry: new FormControl(undefined) + }); + } +} diff --git a/apps/showcase/doc/autocomplete/sizesdoc.ts b/apps/showcase/doc/autocomplete/sizesdoc.ts new file mode 100644 index 00000000000..5690bde4a40 --- /dev/null +++ b/apps/showcase/doc/autocomplete/sizesdoc.ts @@ -0,0 +1,64 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'sizes-doc', + template: `+ +AutoComplete provides small and large sizes as alternatives to the base.
++++ + + ` +}) +export class SizesDoc { + items: any[] | undefined; + + value1: any; + + value2: any; + + value3: any; + + code: Code = { + basic: ` + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'autocomplete-size-demo', + templateUrl: './autocomplete-size-demo.html', + imports: [AutoComplete, FormsModule], + standalone: true, +}) +export class AutocompleteSizesDemo { + items: any[] | undefined; + + value1: any; + + value2: any; + + value3: any; + + search() { + this.items = []; + } + +}` + }; + + search() { + this.items = []; + } +} diff --git a/apps/showcase/doc/autocomplete/styledoc.ts b/apps/showcase/doc/autocomplete/styledoc.ts new file mode 100644 index 00000000000..ec768b61ad3 --- /dev/null +++ b/apps/showcase/doc/autocomplete/styledoc.ts @@ -0,0 +1,53 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'autocomplete-style-doc', + template: `+ + + + +Following is the list of structural style classes, for theming classes visit theming page.
++` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/autocomplete/templatedoc.ts b/apps/showcase/doc/autocomplete/templatedoc.ts new file mode 100644 index 00000000000..07ee948cc27 --- /dev/null +++ b/apps/showcase/doc/autocomplete/templatedoc.ts @@ -0,0 +1,159 @@ +import { Code } from '@/domain/code'; +import { CountryService } from '@/service/countryservice'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-template-demo', + template: `+ +
++ + + +Name +Element ++ +p-autocomplete +Container element ++ +p-autocomplete-panel +Overlay panel of suggestions. ++ +p-autocomplete-items +List container of suggestions. ++ +p-autocomplete-item +List item of a suggestion. ++ +p-autocomplete-token +Element of a selected item in multiple mode. ++ +p-autocomplete-token-icon +Close icon element of a selected item in multiple mode. ++ +p-autocomplete-token-label +Label of a selected item in multiple mode. ++ + +p-autocomplete-loader +Loader icon. ++ +AutoComplete offers multiple templates for customization through templating.
++++ ++ +++
+ {{ country.name }}++ +Available Countries++ ++++ ` +}) +export class TemplateDoc { + countries: any[] | undefined; + + selectedCountryAdvanced: any[] | undefined; + + filteredCountries: any[] | undefined; + + constructor(private countryService: CountryService) {} + + ngOnInit() { + this.countryService.getCountries().then((countries) => { + this.countries = countries; + }); + } + + filterCountry(event: AutoCompleteCompleteEvent) { + let filtered: any[] = []; + let query = event.query; + + for (let i = 0; i < (this.countries as any[]).length; i++) { + let country = (this.countries as any[])[i]; + if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) { + filtered.push(country); + } + } + this.filteredCountries = filtered; + } + + code: Code = { + basic: ` + `, + + html: `+ +++
+ {{ country.name }}++ +Available Countries++ ++++ +`, + + typescript: `import { Component } from '@angular/core'; +import { SelectItemGroup } from 'primeng/api'; +import { CountryService } from '@/service/countryservice'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; +import { ButtonModule } from 'primeng/button'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-template-demo', + templateUrl: './autocomplete-template-demo.html', + standalone: true, + imports: [FormsModule, AutoCompleteModule, ButtonModule], + providers: [CountryService] +}) +export class AutocompleteTemplateDemo { + countries: any[] | undefined; + + selectedCountryAdvanced: any[] | undefined; + + filteredCountries: any[] | undefined; + + constructor(private countryService: CountryService) {} + + ngOnInit() { + this.countryService.getCountries().then((countries) => { + this.countries = countries; + }); + } + + filterCountry(event: AutoCompleteCompleteEvent) { + let filtered: any[] = []; + let query = event.query; + + for (let i = 0; i < (this.countries as any[]).length; i++) { + let country = (this.countries as any[])[i]; + if (country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) { + filtered.push(country); + } + } + + this.filteredCountries = filtered; + } +}`, + + service: ['CountryService'], + + data: ` +//CountryService +{ + "name": "Afghanistan", + "code": "AF" +} +...` + }; +} diff --git a/apps/showcase/doc/autocomplete/virtualscrolldoc.ts b/apps/showcase/doc/autocomplete/virtualscrolldoc.ts new file mode 100644 index 00000000000..8f2299a0919 --- /dev/null +++ b/apps/showcase/doc/autocomplete/virtualscrolldoc.ts @@ -0,0 +1,103 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-virtual-scroll-demo', + template: `+ ++ +++
+ {{ country.name }}++ +Available Countries++ ++++ + ++ Virtual scrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable virtual scrolling to avoid + performance issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. +
++++ ` +}) +export class VirtualScrollDoc { + selectedItem: any; + + filteredItems: any[] | undefined; + + items: any[] | undefined; + + filterItems(event: AutoCompleteCompleteEvent) { + //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side + let filtered: any[] = []; + let query = event.query; + + for (let i = 0; i < (this.items as any[]).length; i++) { + let item = (this.items as any[])[i]; + if (item.label.toLowerCase().indexOf(query.toLowerCase()) == 0) { + filtered.push(item); + } + } + + this.filteredItems = filtered; + } + + ngOnInit() { + this.items = []; + for (let i = 0; i < 10000; i++) { + this.items.push({ label: 'Item ' + i, value: 'Item ' + i }); + } + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { AutoComplete } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-virtual-scroll-demo', + templateUrl: './autocomplete-virtual-scroll-demo.html', + standalone: true, + imports: [FormsModule, AutoComplete] +}) +export class AutocompleteVirtualScrollDemo { + selectedItem: any; + + filteredItems: any[] | undefined; + + items: any[] | undefined; + + filterItems(event: AutoCompleteCompleteEvent) { + //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side + let filtered: any[] = []; + let query = event.query; + + for (let i = 0; i < (this.items as any[]).length; i++) { + let item = (this.items as any[])[i]; + if (item.label.toLowerCase().indexOf(query.toLowerCase()) == 0) { + filtered.push(item); + } + } + + this.filteredItems = filtered; + } + + ngOnInit() { + this.items = []; + for (let i = 0; i < 10000; i++) { + this.items.push({ label: 'Item ' + i, value: 'Item ' + i }); + } + } +}` + }; +} diff --git a/src/app/showcase/doc/autofocus/autofocusdoc.module.ts b/apps/showcase/doc/autofocus/autofocusdoc.module.ts similarity index 76% rename from src/app/showcase/doc/autofocus/autofocusdoc.module.ts rename to apps/showcase/doc/autofocus/autofocusdoc.module.ts index 442c20c97c3..26786c06ca6 100644 --- a/src/app/showcase/doc/autofocus/autofocusdoc.module.ts +++ b/apps/showcase/doc/autofocus/autofocusdoc.module.ts @@ -1,16 +1,16 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; -import { ImportDoc } from './importdoc'; -import { BasicDoc } from './basicdoc'; import { AutoFocus } from 'primeng/autofocus'; import { InputTextModule } from 'primeng/inputtext'; +import { BasicDoc } from './basicdoc'; +import { ImportDoc } from './importdoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, AutoFocus, InputTextModule], declarations: [ImportDoc, BasicDoc], - exports: [AppDocModule], + exports: [AppDocModule] }) export class AutoFocusDocModule {} diff --git a/apps/showcase/doc/autofocus/basicdoc.ts b/apps/showcase/doc/autofocus/basicdoc.ts new file mode 100644 index 00000000000..735e8755589 --- /dev/null +++ b/apps/showcase/doc/autofocus/basicdoc.ts @@ -0,0 +1,34 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'auto-focus-basic-demo', + template: ` ++ + +AutoFocus is applied to any focusable input element on initial load. It's disabled by default and needs to be enabled manually.
++ +++ ` +}) +export class BasicDoc { + code: Code = { + basic: ``, + html: ` + +`, + typescript: `import { Component } from '@angular/core'; +import { AutoFocus } from 'primeng/autofocus'; +import { InputTextModule } from 'primeng/inputtext'; + +@Component({ + selector: 'auto-focus-basic-demo', + templateUrl: './auto-focus-basic-demo.html', + standalone: true, + imports: [AutoFocus, InputTextModule] +}) +export class AutoFocusBasicDemo {}` + }; +} diff --git a/apps/showcase/doc/autofocus/importdoc.ts b/apps/showcase/doc/autofocus/importdoc.ts new file mode 100644 index 00000000000..76bc68aada2 --- /dev/null +++ b/apps/showcase/doc/autofocus/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'auto-focus-import-doc', + template: `` +}) +export class ImportDoc { + code: Code = { + typescript: `import { AutoFocus } from 'primeng/autofocus';` + }; +} diff --git a/apps/showcase/doc/avatar/accessibilitydoc.ts b/apps/showcase/doc/avatar/accessibilitydoc.ts new file mode 100644 index 00000000000..53b100ea848 --- /dev/null +++ b/apps/showcase/doc/avatar/accessibilitydoc.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'avatar-accessibility-doc', + template: ` + ` +}) +export class AccessibilityDoc {} diff --git a/apps/showcase/doc/avatar/avatardoc.module.ts b/apps/showcase/doc/avatar/avatardoc.module.ts new file mode 100644 index 00000000000..a854d951af2 --- /dev/null +++ b/apps/showcase/doc/avatar/avatardoc.module.ts @@ -0,0 +1,30 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; +import { AvatarModule } from 'primeng/avatar'; +import { AvatarGroupModule } from 'primeng/avatargroup'; +import { BadgeModule } from 'primeng/badge'; +import { InputTextModule } from 'primeng/inputtext'; +import { OverlayBadgeModule } from 'primeng/overlaybadge'; +import { AccessibilityDoc } from './accessibilitydoc'; +import { GroupDoc } from './avatargroupdoc'; +import { AvatarGroupStyleDoc } from './avatargroupstyledoc'; +import { AvatarStyleDoc } from './avatarstyledoc'; +import { BadgeDoc } from './badgedoc'; +import { IconDoc } from './icondoc'; +import { ImageDoc } from './imagedoc'; +import { ImportDoc } from './importdoc'; +import { LabelDoc } from './labeldoc'; +import { ShapeDoc } from './shapedoc'; +import { SizeDoc } from './sizedoc'; +import { TemplateDoc } from './templatedoc'; + +@NgModule({ + imports: [CommonModule, RouterModule, AppCodeModule, InputTextModule, FormsModule, AppDocModule, AvatarModule, AvatarGroupModule, BadgeModule, OverlayBadgeModule], + declarations: [ImportDoc, LabelDoc, IconDoc, GroupDoc, ImageDoc, AvatarStyleDoc, AvatarGroupStyleDoc, ShapeDoc, SizeDoc, BadgeDoc, TemplateDoc, AccessibilityDoc], + exports: [AppDocModule] +}) +export class AvatarDocModule {} diff --git a/src/app/showcase/doc/avatar/avatargroupdoc.ts b/apps/showcase/doc/avatar/avatargroupdoc.ts similarity index 97% rename from src/app/showcase/doc/avatar/avatargroupdoc.ts rename to apps/showcase/doc/avatar/avatargroupdoc.ts index 1e29722a370..ebbd13bc7b4 100644 --- a/src/app/showcase/doc/avatar/avatargroupdoc.ts +++ b/apps/showcase/doc/avatar/avatargroupdoc.ts @@ -1,5 +1,5 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; @Component({ selector: 'avatar-group-demo', @@ -18,7 +18,7 @@ import { Code } from '@domain/code';Screen Reader
++ Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like img along with aria-labelledby or aria-label to describe the component. In case + avatars need to be tabbable, tabIndex can be added as well to implement custom key handlers. +
+ +Keyboard Support
+Component does not include any interactive elements.
+- `, + ` }) export class GroupDoc { code: Code = { @@ -48,6 +48,6 @@ import { AvatarGroup } from 'primeng/avatargroup'; standalone: true, imports: [Avatar, AvatarGroup] }) -export class AvatarGroupDemo {}`, +export class AvatarGroupDemo {}` }; } diff --git a/src/app/showcase/doc/avatar/avatargroupstyledoc.ts b/apps/showcase/doc/avatar/avatargroupstyledoc.ts similarity index 98% rename from src/app/showcase/doc/avatar/avatargroupstyledoc.ts rename to apps/showcase/doc/avatar/avatargroupstyledoc.ts index 04ebe8f115c..20a31de6c66 100644 --- a/src/app/showcase/doc/avatar/avatargroupstyledoc.ts +++ b/apps/showcase/doc/avatar/avatargroupstyledoc.ts @@ -19,6 +19,6 @@ import { Component } from '@angular/core'; + +A badge can be added to an Avatar with the Badge directive.
++++ + ` +}) +export class BadgeDoc { + code: Code = { + basic: ` `, + html: ` +`, + typescript: `import { Component } from '@angular/core'; +import { Avatar } from 'primeng/avatar'; +import { BadgeModule } from 'primeng/badge'; + +@Component({ + selector: 'avatar-badge-demo', + templateUrl: './avatar-badge-demo.html', + standalone: true, + imports: [Avatar, BadgeModule] +}) +export class AvatarBadgeDemo {}` + }; +} diff --git a/apps/showcase/doc/avatar/icondoc.ts b/apps/showcase/doc/avatar/icondoc.ts new file mode 100644 index 00000000000..d867f5273b3 --- /dev/null +++ b/apps/showcase/doc/avatar/icondoc.ts @@ -0,0 +1,92 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'avatar-icon-demo', + template: ` ++ + +A font icon is displayed as an Avatar with the icon property.
+++++++ +Icon
++ + + ++ +Circle
++ + + ++Badge
++ ++ + ` +}) +export class IconDoc { + code: Code = { + basic: ` + + + + + + + + `, + + html: `+ +`, + typescript: `import { Component } from '@angular/core'; +import { AvatarModule } from 'primeng/avatar'; +import { OverlayBadgeModule } from 'primeng/overlaybadge'; + +@Component({ + selector: 'avatar-icon-demo', + templateUrl: './avatar-icon-demo.html', + standalone: true, + imports: [AvatarModule, OverlayBadgeModule] +}) +export class AvatarIconDemo {}` + }; +} diff --git a/apps/showcase/doc/avatar/imagedoc.ts b/apps/showcase/doc/avatar/imagedoc.ts new file mode 100644 index 00000000000..5a885cc4625 --- /dev/null +++ b/apps/showcase/doc/avatar/imagedoc.ts @@ -0,0 +1,81 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'avatar-image-demo', + template: ` +++++ +Icon
++ + + ++ +Circle
++ + + ++Badge
++ ++ + +Use the image property to display an image as an Avatar.
+++++++ +Image
++ + + ++ +Badge
++ ++ ++Gravatar
++ + ` +}) +export class ImageDoc { + code: Code = { + basic: ` + + + + + + ++ `, + + html: ` +`, + typescript: `import { Component } from '@angular/core'; +import { AvatarModule } from 'primeng/avatar'; +import { OverlayBadgeModule } from 'primeng/overlaybadge'; + +@Component({ + selector: 'avatar-image-demo', + templateUrl: './avatar-image-demo.html', + standalone: true, + imports: [AvatarModule, OverlayBadgeModule] +}) +export class AvatarImageDemo {}` + }; +} diff --git a/apps/showcase/doc/avatar/importdoc.ts b/apps/showcase/doc/avatar/importdoc.ts new file mode 100644 index 00000000000..6dcaf07cba2 --- /dev/null +++ b/apps/showcase/doc/avatar/importdoc.ts @@ -0,0 +1,13 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'avatar-import-doc', + template: `++++ +Image
++ + + ++ +Badge
++ ++ ++Gravatar
++ ` +}) +export class ImportDoc { + code: Code = { + html: `import { Avatar } from 'primeng/avatar'; +import { AvatarGroup } from 'primeng/avatargroup';` + }; +} diff --git a/apps/showcase/doc/avatar/labeldoc.ts b/apps/showcase/doc/avatar/labeldoc.ts new file mode 100644 index 00000000000..61769cdfd92 --- /dev/null +++ b/apps/showcase/doc/avatar/labeldoc.ts @@ -0,0 +1,88 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'avatar-label-demo', + template: ` + + +A letter Avatar is defined with the label property.
+++++++Label
++ + + ++Circle
++ + + ++Badge
++ ++ + ` +}) +export class LabelDoc { + code: Code = { + basic: ` + + + + + + + + `, + + html: `+ +`, + typescript: `import { Component } from '@angular/core'; +import { AvatarModule } from 'primeng/avatar'; +import { OverlayBadgeModule } from 'primeng/overlaybadge'; + +@Component({ + selector: 'avatar-label-demo', + templateUrl: './avatar-label-demo.html', + standalone: true, + imports: [AvatarModule, OverlayBadgeModule] +}) +export class AvatarLabelDemo {}` + }; +} diff --git a/src/app/showcase/doc/avatar/shapedoc.ts b/apps/showcase/doc/avatar/shapedoc.ts similarity index 75% rename from src/app/showcase/doc/avatar/shapedoc.ts rename to apps/showcase/doc/avatar/shapedoc.ts index 01687bb4109..808337049eb 100644 --- a/src/app/showcase/doc/avatar/shapedoc.ts +++ b/apps/showcase/doc/avatar/shapedoc.ts @@ -1,21 +1,18 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; @Component({ selector: 'avatar-shape-demo', template: `++++Label
++ + + ++Circle
++ + + ++Badge
++ ++ - - Avatar comes in two different styles specified with the shape property, square is the default and - circle is the alternative. -
+Avatar comes in two different styles specified with the shape property, square is the default and circle is the alternative.
- `, + ` }) export class ShapeDoc { code: Code = { @@ -34,6 +31,6 @@ import { Avatar } from 'primeng/avatar'; standalone: true, imports: [Avatar] }) -export class AvatarShapeDemo {}`, +export class AvatarShapeDemo {}` }; } diff --git a/apps/showcase/doc/avatar/sizedoc.ts b/apps/showcase/doc/avatar/sizedoc.ts new file mode 100644 index 00000000000..cad2470b40b --- /dev/null +++ b/apps/showcase/doc/avatar/sizedoc.ts @@ -0,0 +1,36 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'avatar-size-demo', + template: ` + + +size property defines the size of the Avatar with large and xlarge as possible values.
++++ + + ` +}) +export class SizeDoc { + code: Code = { + basic: ` + `, + html: ` +`, + typescript: `import { Component } from '@angular/core'; +import { Avatar } from 'primeng/avatar'; + +@Component({ + selector: 'avatar-size-demo', + templateUrl: './avatar-size-demo.html', + standalone: true, + imports: [Avatar] +}) +export class AvatarSizeDemo {}` + }; +} diff --git a/apps/showcase/doc/avatar/templatedoc.ts b/apps/showcase/doc/avatar/templatedoc.ts new file mode 100644 index 00000000000..48c4680fd61 --- /dev/null +++ b/apps/showcase/doc/avatar/templatedoc.ts @@ -0,0 +1,39 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'avatar-template-demo', + template: ` ++ + + +Content can easily be customized with the dynamic content instead of using the built-in modes.
++++ Content + ++ ` +}) +export class TemplateDoc { + code: Code = { + basic: ` + Content + `, + html: `+`, + typescript: `import { Component } from '@angular/core'; +import { Avatar } from 'primeng/avatar'; + +@Component({ + selector: 'avatar-template-demo', + templateUrl: './avatar-template-demo.html', + standalone: true, + imports: [Avatar] +}) +export class AvatarTemplateDemo {}` + }; +} diff --git a/apps/showcase/doc/badge/accessibilitydoc.ts b/apps/showcase/doc/badge/accessibilitydoc.ts new file mode 100644 index 00000000000..39ad2c2a27b --- /dev/null +++ b/apps/showcase/doc/badge/accessibilitydoc.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-accessibility-doc', + template: `+ Content + ++ ` +}) +export class AccessibilityDoc {} diff --git a/src/app/showcase/doc/badge/badgedoc.module.ts b/apps/showcase/doc/badge/badgedoc.module.ts similarity index 86% rename from src/app/showcase/doc/badge/badgedoc.module.ts rename to apps/showcase/doc/badge/badgedoc.module.ts index 4be18364b5d..18c68204c26 100644 --- a/src/app/showcase/doc/badge/badgedoc.module.ts +++ b/apps/showcase/doc/badge/badgedoc.module.ts @@ -1,25 +1,25 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; import { BadgeModule } from 'primeng/badge'; import { ButtonModule } from 'primeng/button'; -import { ImportDoc } from './importdoc'; +import { OverlayBadgeModule } from 'primeng/overlaybadge'; +import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ButtonDoc } from './buttondoc'; import { DirectiveDoc } from './directivedoc'; +import { ImportDoc } from './importdoc'; +import { OverlayDoc } from './overlaydoc'; import { PositionDoc } from './positiondoc'; import { SeverityDoc } from './severitydoc'; import { SizeDoc } from './sizedoc'; -import { AccessibilityDoc } from './accessibilitydoc'; import { StyleDoc } from './styledoc'; -import { OverlayBadgeModule } from 'primeng/overlaybadge'; -import { OverlayDoc } from './overlaydoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, BadgeModule, ButtonModule, OverlayBadgeModule], declarations: [ImportDoc, BasicDoc, ButtonDoc, DirectiveDoc, PositionDoc, SeverityDoc, SizeDoc, OverlayDoc, StyleDoc, AccessibilityDoc], - exports: [AppDocModule], + exports: [AppDocModule] }) export class BadgeDocModule {} diff --git a/apps/showcase/doc/badge/basicdoc.ts b/apps/showcase/doc/badge/basicdoc.ts new file mode 100644 index 00000000000..03d94c47827 --- /dev/null +++ b/apps/showcase/doc/badge/basicdoc.ts @@ -0,0 +1,33 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-basic-demo', + template: ` +Screen Reader
++ Badge does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the badges are dynamic, + aria-live may be utilized as well. In case badges need to be tabbable, tabIndex can be added to implement custom key handlers. +
+ +Keyboard Support
+Component does not include any interactive elements.
++ +Content of the badge is specified using the value property.
++++ + ` +}) +export class BasicDoc { + code: Code = { + basic: ` `, + html: ` +`, + typescript: `import { Component } from '@angular/core'; +import { BadgeModule } from 'primeng/badge'; + +@Component({ + selector: 'badge-basic-demo', + templateUrl: './badge-basic-demo.html', + standalone: true, + imports: [BadgeModule] +}) +export class BadgeBasicDemo {}` + }; +} diff --git a/apps/showcase/doc/badge/buttondoc.ts b/apps/showcase/doc/badge/buttondoc.ts new file mode 100644 index 00000000000..317917aa816 --- /dev/null +++ b/apps/showcase/doc/badge/buttondoc.ts @@ -0,0 +1,37 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-button-demo', + template: ` ++ + + +Buttons have built-in support for badges to display a badge inline.
+++ ++ + + ` +}) +export class ButtonDoc { + code: Code = { + basic: ` `, + html: ` +`, + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'badge-button-demo', + templateUrl: './badge-button-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class BadgeButtonDemo {}` + }; +} diff --git a/apps/showcase/doc/badge/directivedoc.ts b/apps/showcase/doc/badge/directivedoc.ts new file mode 100644 index 00000000000..b4b27377d5f --- /dev/null +++ b/apps/showcase/doc/badge/directivedoc.ts @@ -0,0 +1,33 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-directive-demo', + template: ` ++ + + +Content of the badge is specified using the value property.
++ +++ ` +}) +export class DirectiveDoc { + code: Code = { + basic: ``, + html: ` + +`, + typescript: `import { Component } from '@angular/core'; +import { BadgeModule } from 'primeng/badge'; + +@Component({ + selector: 'badge-directive-demo', + templateUrl: './badge-directive-demo.html', + standalone: true, + imports: [BadgeModule] +}) +export class BadgeDirectiveDemo {}` + }; +} diff --git a/apps/showcase/doc/badge/importdoc.ts b/apps/showcase/doc/badge/importdoc.ts new file mode 100644 index 00000000000..7d9a83f38f9 --- /dev/null +++ b/apps/showcase/doc/badge/importdoc.ts @@ -0,0 +1,13 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-import-doc', + template: `` +}) +export class ImportDoc { + code: Code = { + typescript: `import { BadgeModule } from 'primeng/badge'; +import { OverlayBadgeModule } from 'primeng/overlaybadge';` + }; +} diff --git a/src/app/showcase/doc/badge/overlaydoc.ts b/apps/showcase/doc/badge/overlaydoc.ts similarity index 96% rename from src/app/showcase/doc/badge/overlaydoc.ts rename to apps/showcase/doc/badge/overlaydoc.ts index 4c3b5848345..a0908f2a08f 100644 --- a/src/app/showcase/doc/badge/overlaydoc.ts +++ b/apps/showcase/doc/badge/overlaydoc.ts @@ -1,5 +1,5 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; @Component({ selector: 'badge-overlay-demo', @@ -19,7 +19,7 @@ import { Code } from '@domain/code'; - `, + ` }) export class OverlayDoc { code: Code = { @@ -52,6 +52,6 @@ import { OverlayBadgeModule } from 'primeng/overlaybadge'; standalone: true, imports: [OverlayBadgeModule] }) -export class BadgeOverlayDemo {}`, +export class BadgeOverlayDemo {}` }; } diff --git a/apps/showcase/doc/badge/positiondoc.ts b/apps/showcase/doc/badge/positiondoc.ts new file mode 100644 index 00000000000..70c9f858282 --- /dev/null +++ b/apps/showcase/doc/badge/positiondoc.ts @@ -0,0 +1,37 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-position-demo', + template: ` + + +A Badge can be positioned at the top right corner of an element by adding p-overlay-badge style class to the element and embedding the badge inside.
++ + + +++ ` +}) +export class PositionDoc { + code: Code = { + basic: ``, + html: ` + + + +`, + typescript: `import { Component } from '@angular/core'; +import { BadgeModule } from 'primeng/badge'; + +@Component({ + selector: 'badge-position-demo', + templateUrl: './badge-position-demo.html', + standalone: true, + imports: [BadgeModule] +}) +export class BadgePositionDemo {}` + }; +} diff --git a/apps/showcase/doc/badge/severitydoc.ts b/apps/showcase/doc/badge/severitydoc.ts new file mode 100644 index 00000000000..ad28e74ac85 --- /dev/null +++ b/apps/showcase/doc/badge/severitydoc.ts @@ -0,0 +1,42 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-severity-demo', + template: ` ++ +Severity defines the color of the badge, possible values are success, info, warn and danger
++++ + + + + + + + ` +}) +export class SeverityDoc { + code: Code = { + basic: ` `, + html: ` +`, + typescript: `import { Component } from '@angular/core'; +import { BadgeModule } from 'primeng/badge'; + +@Component({ + selector: 'badge-severity-demo', + templateUrl: './badge-severity-demo.html', + standalone: true, + imports: [BadgeModule] +}) +export class BadgeSeverityDemo {}` + }; +} diff --git a/apps/showcase/doc/badge/sizedoc.ts b/apps/showcase/doc/badge/sizedoc.ts new file mode 100644 index 00000000000..2da155183aa --- /dev/null +++ b/apps/showcase/doc/badge/sizedoc.ts @@ -0,0 +1,39 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-size-demo', + template: ` ++ + + + + +Badge sizes are adjusted with the badgeSize property that accepts small, large and xlarge as the possible alternatives to the default size. Currently sizes only apply to component mode.
++++ + + + + ` +}) +export class SizeDoc { + code: Code = { + basic: ` `, + html: ` +`, + typescript: `import { Component } from '@angular/core'; +import { BadgeModule } from 'primeng/badge'; + +@Component({ + selector: 'badge-size-demo', + templateUrl: './badge-size-demo.html', + standalone: true, + imports: [BadgeModule] +}) +export class BadgeSizeDemo {}` + }; +} diff --git a/apps/showcase/doc/badge/styledoc.ts b/apps/showcase/doc/badge/styledoc.ts new file mode 100644 index 00000000000..69d6c74c1a0 --- /dev/null +++ b/apps/showcase/doc/badge/styledoc.ts @@ -0,0 +1,62 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'badge-style-doc', + template: ` ++ + + + + ++ Following is the list of structural style classes, for theming classes visit + theming page. +
+++ ` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/blockui/accessibilitydoc.ts b/apps/showcase/doc/blockui/accessibilitydoc.ts new file mode 100644 index 00000000000..fdc4af7bb42 --- /dev/null +++ b/apps/showcase/doc/blockui/accessibilitydoc.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'block-ui-accessibility-doc', + template: `+ +
++ + + +Name +Element ++ +p-badge +Badge element ++ +p-overlay-badge +Wrapper of a badge and its target. ++ +p-badge-dot +Badge element with no value. ++ +p-badge-success +Badge element with success severity. ++ +p-badge-info +Badge element with info severity. ++ +p-badge-warning +Badge element with warning severity. ++ +p-badge-danger +Badge element with danger severity. ++ +p-badge-lg +Large badge element ++ + +p-badge-xl +Extra large badge element ++ ` +}) +export class AccessibilityDoc {} diff --git a/apps/showcase/doc/blockui/basicdoc.ts b/apps/showcase/doc/blockui/basicdoc.ts new file mode 100644 index 00000000000..082614a795e --- /dev/null +++ b/apps/showcase/doc/blockui/basicdoc.ts @@ -0,0 +1,63 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'block-ui-basic-demo', + template: ` +Screen Reader
++ BlockUI manages aria-busy state attribute when the UI gets blocked and unblocked. Any valid attribute is passed to the root element so additional attributes like role and aria-live can be used to define live regions. +
+ +Keyboard Support
+Component does not include any interactive elements.
++ +The element to block should be placed as a child of BlockUI and blocked property is required to control the state.
++++ + + + ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ ` +}) +export class BasicDoc { + blockedPanel: boolean = false; + + code: Code = { + basic: ` + + + + `, + html: `+ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +
++`, + typescript: `import { Component } from '@angular/core'; +import { BlockUI } from 'primeng/blockui'; +import { ButtonModule } from 'primeng/button'; +import { PanelModule } from 'primeng/panel'; +import { Ripple } from 'primeng/ripple'; + +@Component({ + selector: 'block-ui-basic-demo', + templateUrl: './block-ui-basic-demo.html', + standalone: true, + imports: [BlockUI, ButtonModule, PanelModule, Ripple] +}) +export class BlockUiBasicDemo { + blockedPanel: boolean = false; +}` + }; +} diff --git a/src/app/showcase/doc/blockui/blockuidoc.module.ts b/apps/showcase/doc/blockui/blockuidoc.module.ts similarity index 81% rename from src/app/showcase/doc/blockui/blockuidoc.module.ts rename to apps/showcase/doc/blockui/blockuidoc.module.ts index e88db3f397e..d71c82e0fd9 100644 --- a/src/app/showcase/doc/blockui/blockuidoc.module.ts +++ b/apps/showcase/doc/blockui/blockuidoc.module.ts @@ -1,11 +1,11 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { BlockUI } from 'primeng/blockui'; import { ButtonModule } from 'primeng/button'; import { PanelModule } from 'primeng/panel'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DocumentDoc } from './documentdoc'; @@ -15,6 +15,6 @@ import { StyleDoc } from './styledoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, PanelModule, ButtonModule, BlockUI], declarations: [ImportDoc, BasicDoc, DocumentDoc, StyleDoc, AccessibilityDoc], - exports: [AppDocModule], + exports: [AppDocModule] }) export class BlockUIDocModule {} diff --git a/apps/showcase/doc/blockui/documentdoc.ts b/apps/showcase/doc/blockui/documentdoc.ts new file mode 100644 index 00000000000..0e9cb4585a4 --- /dev/null +++ b/apps/showcase/doc/blockui/documentdoc.ts @@ -0,0 +1,62 @@ +import { Code } from '@/domain/code'; +import { ChangeDetectorRef, Component } from '@angular/core'; + +@Component({ + selector: 'block-ui-document-demo', + template: ` ++ + + + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
++ +If the target element is not specified, BlockUI blocks the document by default.
++++ + + ` +}) +export class DocumentDoc { + blockedDocument: boolean = false; + + constructor(private cd: ChangeDetectorRef) {} + + blockDocument() { + this.blockedDocument = true; + setTimeout(() => { + this.blockedDocument = false; + this.cd.markForCheck(); + }, 3000); + } + + code: Code = { + basic: ` `, + html: ` +`, + typescript: `import { Component, ChangeDetectorRef } from '@angular/core'; +import { BlockUI } from 'primeng/blockui'; +import { ButtonModule } from 'primeng/button'; +import { Ripple } from 'primeng/ripple'; + +@Component({ + selector: 'block-ui-document-demo', + templateUrl: './block-ui-document-demo.html', + standalone: true, + imports: [BlockUI, ButtonModule, Ripple] +}) +export class BlockUiDocumentDemo { + blockedDocument: boolean = false; + + constructor(private cd: ChangeDetectorRef) {} + + blockDocument() { + this.blockedDocument = true; + setTimeout(() => { + this.blockedDocument = false; + this.cd.markForCheck(); + }, 3000); + } + +}` + }; +} diff --git a/apps/showcase/doc/blockui/importdoc.ts b/apps/showcase/doc/blockui/importdoc.ts new file mode 100644 index 00000000000..ae03e048f1d --- /dev/null +++ b/apps/showcase/doc/blockui/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'block-ui-import-doc', + template: `+ + ` +}) +export class ImportDoc { + code: Code = { + typescript: `import { BlockUI } from 'primeng/blockui';` + }; +} diff --git a/apps/showcase/doc/blockui/styledoc.ts b/apps/showcase/doc/blockui/styledoc.ts new file mode 100644 index 00000000000..76c9b932aee --- /dev/null +++ b/apps/showcase/doc/blockui/styledoc.ts @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'block-ui-style-doc', + template: ` + + +Following is the list of structural style classes, for theming classes visit theming page.
+++ ` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/breadcrumb/accessibilitydoc.ts b/apps/showcase/doc/breadcrumb/accessibilitydoc.ts new file mode 100644 index 00000000000..600476dd49c --- /dev/null +++ b/apps/showcase/doc/breadcrumb/accessibilitydoc.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'breadcrumb-accessibility-doc', + template: `+ +
++ + + +Name +Element ++ +p-blockui +Mask element. ++ + +p-blockui-document +Mask element in full screen mode. ++ ` +}) +export class AccessibilityDoc {} diff --git a/apps/showcase/doc/breadcrumb/basicdoc.ts b/apps/showcase/doc/breadcrumb/basicdoc.ts new file mode 100644 index 00000000000..4d3ab4f9a05 --- /dev/null +++ b/apps/showcase/doc/breadcrumb/basicdoc.ts @@ -0,0 +1,63 @@ +import { Code } from '@/domain/code'; +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; + +@Component({ + selector: 'breadcrumb-basic-demo', + template: ` +Screen Reader
++ Breadcrumb uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the list item + separators have aria-hidden to be able to ignored by the screen readers. If the last link represents the current route, aria-current is added with "page" as the value. +
+ +Keyboard Support
+No special keyboard interaction is needed, all menuitems are focusable based on the page tab sequence.
++ +Breadcrumb provides contextual information about page hierarchy.
++++ + ` +}) +export class BasicDoc implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }]; + + this.home = { icon: 'pi pi-home', routerLink: '/' }; + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Breadcrumb } from 'primeng/breadcrumb'; + +@Component({ + selector: 'breadcrumb-basic-demo', + templateUrl: './breadcrumb-basic-demo.html', + standalone: true, + imports: [Breadcrumb] +}) +export class BreadcrumbBasicDemo implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [ + { label: 'Electronics' }, + { label: 'Computer' }, + { label: 'Accessories' }, + { label: 'Keyboard' }, + { label: 'Wireless' } + ]; + + this.home = { icon: 'pi pi-home', routerLink: '/' }; + } +}` + }; +} diff --git a/src/app/showcase/doc/breadcrumb/breadcrumbdoc.module.ts b/apps/showcase/doc/breadcrumb/breadcrumbdoc.module.ts similarity index 80% rename from src/app/showcase/doc/breadcrumb/breadcrumbdoc.module.ts rename to apps/showcase/doc/breadcrumb/breadcrumbdoc.module.ts index 56f5805bf49..e5ec1d757de 100644 --- a/src/app/showcase/doc/breadcrumb/breadcrumbdoc.module.ts +++ b/apps/showcase/doc/breadcrumb/breadcrumbdoc.module.ts @@ -1,19 +1,19 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { Breadcrumb } from 'primeng/breadcrumb'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; -import { StyleDoc } from './styledoc'; +import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; -import { AccessibilityDoc } from './accessibilitydoc'; -import { TemplateDoc } from './templatedoc'; import { RouterDoc } from './routerdoc'; +import { StyleDoc } from './styledoc'; +import { TemplateDoc } from './templatedoc'; @NgModule({ imports: [CommonModule, AppCodeModule, RouterModule, Breadcrumb, AppDocModule], declarations: [BasicDoc, TemplateDoc, RouterDoc, ImportDoc, StyleDoc, AccessibilityDoc], - exports: [AppDocModule], + exports: [AppDocModule] }) export class BreadcrumbDocModule {} diff --git a/apps/showcase/doc/breadcrumb/importdoc.ts b/apps/showcase/doc/breadcrumb/importdoc.ts new file mode 100644 index 00000000000..ed4740e4862 --- /dev/null +++ b/apps/showcase/doc/breadcrumb/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'breadcrumb-import-doc', + template: `+ ` +}) +export class ImportDoc { + code: Code = { + typescript: `import { Breadcrumb } from 'primeng/breadcrumb';` + }; +} diff --git a/apps/showcase/doc/breadcrumb/routerdoc.ts b/apps/showcase/doc/breadcrumb/routerdoc.ts new file mode 100644 index 00000000000..ed7ae33aad7 --- /dev/null +++ b/apps/showcase/doc/breadcrumb/routerdoc.ts @@ -0,0 +1,96 @@ +import { Code } from '@/domain/code'; +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; + +@Component({ + selector: 'breadcrumb-router-demo', + template: ` + + +Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
++++ ++ ++ + + {{ item.label }} + + ++ + {{ item.label }} + + ++ ` +}) +export class RouterDoc implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ icon: 'pi pi-home', route: '/installation' }, { label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }]; + } + + code: Code = { + basic: ` + `, + + html: `+ ++ + + {{ item.label }} + + ++ + {{ item.label }} + + ++`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Breadcrumb } from 'primeng/breadcrumb'; +import { RouterModule } from '@angular/router'; + +@Component({ + selector: 'breadcrumb-router-demo', + templateUrl: './breadcrumb-router-demo.html', + standalone: true, + imports: [Breadcrumb, RouterModule] +}) +export class BreadcrumbRouterDemo implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ icon: 'pi pi-home', route: '/installation' }, { label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }]; + } +}` + }; +} diff --git a/apps/showcase/doc/breadcrumb/styledoc.ts b/apps/showcase/doc/breadcrumb/styledoc.ts new file mode 100644 index 00000000000..c93d994c04c --- /dev/null +++ b/apps/showcase/doc/breadcrumb/styledoc.ts @@ -0,0 +1,42 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'breadcrumb-style-doc', + template: ` ++ ++ ++ + + {{ item.label }} + + ++ + {{ item.label }} + + ++ ++ Following is the list of structural style classes, for theming classes visit + theming page. +
+++ ` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/breadcrumb/templatedoc.ts b/apps/showcase/doc/breadcrumb/templatedoc.ts new file mode 100644 index 00000000000..7b8ef4989f7 --- /dev/null +++ b/apps/showcase/doc/breadcrumb/templatedoc.ts @@ -0,0 +1,79 @@ +import { Code } from '@/domain/code'; +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; + +@Component({ + selector: 'breadcrumb-template-demo', + template: ` ++ +
++ + + +Name +Element ++ +p-breadcrumb +Container element. ++ +p-menuitem +Menuitem element. ++ +p-menuitem-text +Label of a menuitem. ++ + +p-breadcrumb-chevron +Chevron element. ++ +Custom content can be placed inside the items using the item template. The divider between the items has its own separator template.
++++ ++ + + + +/ ++ ` +}) +export class TemplateDoc implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]; + + this.home = { icon: 'pi pi-home' }; + } + + code: Code = { + basic: ` + `, + + html: `+ + + + +/ ++`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Breadcrumb } from 'primeng/breadcrumb'; +import { RouterModule } from '@angular/router'; + +@Component({ + selector: 'breadcrumb-template-demo', + templateUrl: './breadcrumb-template-demo.html', + standalone: true, + imports: [Breadcrumb, RouterModule] +}) +export class BreadcrumbTemplateDemo implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]; + + this.home = { icon: 'pi pi-home' }; + } +}` + }; +} diff --git a/apps/showcase/doc/button/accessibilitydoc.ts b/apps/showcase/doc/button/accessibilitydoc.ts new file mode 100644 index 00000000000..5d1cf62b729 --- /dev/null +++ b/apps/showcase/doc/button/accessibilitydoc.ts @@ -0,0 +1,60 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-accessibility-doc', + template: ` ++ ++ + + + +/ ++ + +Screen Reader
++ Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is + icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly. +
++ + Keyboard Support
+++ ` +}) +export class AccessibilityDoc { + code: Code = { + basic: `+ +
++ + + +Key +Function ++ ++ tab + +Moves focus to the button. ++ ++ enter + +Activates the button. ++ + ++ space + +Activates the button. ++ + + + + Youtube + ` + }; +} diff --git a/apps/showcase/doc/button/badgedoc.ts b/apps/showcase/doc/button/badgedoc.ts new file mode 100644 index 00000000000..21d58b5688a --- /dev/null +++ b/apps/showcase/doc/button/badgedoc.ts @@ -0,0 +1,38 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-badge-demo', + template: ` ++ +Buttons have built-in badge support with badge and badgeClass properties.
++++ + + ` +}) +export class BadgeDoc { + code: Code = { + basic: ` + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-badge-demo', + templateUrl: './button-badge-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonBadgeDemo { }` + }; +} diff --git a/apps/showcase/doc/button/basicdoc.ts b/apps/showcase/doc/button/basicdoc.ts new file mode 100644 index 00000000000..76df760bcb1 --- /dev/null +++ b/apps/showcase/doc/button/basicdoc.ts @@ -0,0 +1,35 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-basic-demo', + template: ` ++ + + +Text to display on a button is defined with the label property.
++++ + ` +}) +export class BasicDoc { + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-basic-demo', + templateUrl: './button-basic-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonBasicDemo { }` + }; +} diff --git a/src/app/showcase/doc/button/buttondoc.module.ts b/apps/showcase/doc/button/buttondoc.module.ts similarity index 88% rename from src/app/showcase/doc/button/buttondoc.module.ts rename to apps/showcase/doc/button/buttondoc.module.ts index 0ed1500fcac..04ed67fee35 100644 --- a/src/app/showcase/doc/button/buttondoc.module.ts +++ b/apps/showcase/doc/button/buttondoc.module.ts @@ -1,14 +1,16 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { ButtonGroupModule } from 'primeng/buttongroup'; +import { WindowMaximizeIcon } from 'primeng/icons'; import { RippleModule } from 'primeng/ripple'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BadgeDoc } from './badgedoc'; import { BasicDoc } from './basicdoc'; +import { ButtonGroupDoc } from './buttongroupdoc'; import { ButtonsetDoc } from './buttonsetdoc'; import { DirectiveDoc } from './directivedoc'; import { DisabledDoc } from './disableddoc'; @@ -26,8 +28,6 @@ import { SizesDoc } from './sizesdoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { TextDoc } from './textdoc'; -import { ButtonGroupDoc } from './buttongroupdoc'; -import { WindowMaximizeIcon } from '../../../components/icons/windowmaximize/windowmaximize'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, ButtonModule, ButtonGroupModule, RippleModule, RouterModule, WindowMaximizeIcon], @@ -53,7 +53,7 @@ import { WindowMaximizeIcon } from '../../../components/icons/windowmaximize/win TemplateDoc, StyleDoc, AccessibilityDoc, - DirectiveDoc, - ], + DirectiveDoc + ] }) export class ButtonDocModule {} diff --git a/src/app/showcase/doc/button/buttongroupdoc.ts b/apps/showcase/doc/button/buttongroupdoc.ts similarity index 94% rename from src/app/showcase/doc/button/buttongroupdoc.ts rename to apps/showcase/doc/button/buttongroupdoc.ts index 669083e85da..f77f08f30e0 100644 --- a/src/app/showcase/doc/button/buttongroupdoc.ts +++ b/apps/showcase/doc/button/buttongroupdoc.ts @@ -1,5 +1,5 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; @Component({ selector: 'button-group-demo', @@ -15,7 +15,7 @@ import { Code } from '@domain/code';+ - `, + ` }) export class ButtonGroupDoc { code: Code = { @@ -42,6 +42,6 @@ import { ButtonModule } from 'primeng/button'; standalone: true, imports: [ButtonModule] }) -export class ButtonGroupDemo { }`, +export class ButtonGroupDemo { }` }; } diff --git a/src/app/showcase/doc/button/buttonsetdoc.ts b/apps/showcase/doc/button/buttonsetdoc.ts similarity index 95% rename from src/app/showcase/doc/button/buttonsetdoc.ts rename to apps/showcase/doc/button/buttonsetdoc.ts index 7505a945d80..ed9819447f3 100644 --- a/src/app/showcase/doc/button/buttonsetdoc.ts +++ b/apps/showcase/doc/button/buttonsetdoc.ts @@ -1,5 +1,5 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; @Component({ selector: 'button-set-demo', @@ -15,7 +15,7 @@ import { Code } from '@domain/code'; - `, + ` }) export class ButtonsetDoc { code: Code = { @@ -41,6 +41,6 @@ import { Component } from '@angular/core'; selector: 'button-set-demo', templateUrl: './button-set-demo.html' }) -export class ButtonSetDemo { }`, +export class ButtonSetDemo { }` }; } diff --git a/apps/showcase/doc/button/directivedoc.ts b/apps/showcase/doc/button/directivedoc.ts new file mode 100644 index 00000000000..5b9d0ebc3a4 --- /dev/null +++ b/apps/showcase/doc/button/directivedoc.ts @@ -0,0 +1,48 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-directive-demo', + template: ` + + ++ Button can also be used as directive using pButton along with pButtonLabel and pButtonIcon helper directives. In contrary of p-button component, pButton directive does not utilize ripple effect, use + pRipple directive to enable ripple. +
++ +++ ` +}) +export class DirectiveDoc { + code: Code = { + basic: ``, + + html: ` + +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; + +@Component({ + selector: 'button-directive-demo', + templateUrl: './button-directive-demo.html', + standalone: true, + imports: [ButtonModule, RippleModule] +}) +export class ButtonDirectiveDemo { }` + }; +} diff --git a/apps/showcase/doc/button/disableddoc.ts b/apps/showcase/doc/button/disableddoc.ts new file mode 100644 index 00000000000..3ce23a1f5a5 --- /dev/null +++ b/apps/showcase/doc/button/disableddoc.ts @@ -0,0 +1,35 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-disabled-demo', + template: ` ++ +When disabled is present, the element cannot be edited and focused.
++++ + ` +}) +export class DisabledDoc { + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-disabled-demo', + templateUrl: './button-disabled-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonDisabledDemo { }` + }; +} diff --git a/apps/showcase/doc/button/iconsdoc.ts b/apps/showcase/doc/button/iconsdoc.ts new file mode 100644 index 00000000000..936743dae59 --- /dev/null +++ b/apps/showcase/doc/button/iconsdoc.ts @@ -0,0 +1,55 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-icons-demo', + template: ` ++ + +Icon of a button is specified with icon property and position is configured using iconPos attribute.
++++++ + + +++ + + ` +}) +export class IconsDoc { + code: Code = { + basic: ` + + + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-icons-demo', + templateUrl: './button-icons-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonIconsDemo { }` + }; +} diff --git a/src/app/showcase/doc/button/iconsonlydoc.ts b/apps/showcase/doc/button/iconsonlydoc.ts similarity index 99% rename from src/app/showcase/doc/button/iconsonlydoc.ts rename to apps/showcase/doc/button/iconsonlydoc.ts index 3433b2dcec0..fa37588c3d2 100644 --- a/src/app/showcase/doc/button/iconsonlydoc.ts +++ b/apps/showcase/doc/button/iconsonlydoc.ts @@ -1,5 +1,5 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; @Component({ selector: 'button-icon-only-demo', @@ -55,7 +55,7 @@ import { Code } from '@domain/code';+++ + + +++ + - `, + ` }) export class IconOnlyDoc { code: Code = { @@ -156,6 +156,6 @@ import { ButtonModule } from 'primeng/button'; standalone: true, imports: [ButtonModule] }) -export class ButtonIconOnlyDemo { }`, +export class ButtonIconOnlyDemo { }` }; } diff --git a/apps/showcase/doc/button/importdoc.ts b/apps/showcase/doc/button/importdoc.ts new file mode 100644 index 00000000000..f7ca74cd508 --- /dev/null +++ b/apps/showcase/doc/button/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-import-doc', + template: ` ` +}) +export class ImportDoc { + code: Code = { + typescript: `import { ButtonModule } from 'primeng/button';` + }; +} diff --git a/src/app/showcase/doc/button/linkdoc.ts b/apps/showcase/doc/button/linkdoc.ts similarity index 95% rename from src/app/showcase/doc/button/linkdoc.ts rename to apps/showcase/doc/button/linkdoc.ts index 93996d64086..ac3880ecf17 100644 --- a/src/app/showcase/doc/button/linkdoc.ts +++ b/apps/showcase/doc/button/linkdoc.ts @@ -1,5 +1,5 @@ +import { Code } from '@/domain/code'; import { Component } from '@angular/core'; -import { Code } from '@domain/code'; @Component({ selector: 'button-link-demo', @@ -13,7 +13,7 @@ import { Code } from '@domain/code'; Router - `, + ` }) export class LinkDoc { code: Code = { @@ -45,6 +45,6 @@ import { RouterModule } from '@angular/router'; standalone: true, imports: [ButtonModule, RouterModule] }) -export class ButtonLinkDemo { }`, +export class ButtonLinkDemo { }` }; } diff --git a/apps/showcase/doc/button/loadingdoc.ts b/apps/showcase/doc/button/loadingdoc.ts new file mode 100644 index 00000000000..0c5e11b500d --- /dev/null +++ b/apps/showcase/doc/button/loadingdoc.ts @@ -0,0 +1,58 @@ +import { Code } from '@/domain/code'; +import { ChangeDetectorRef, Component } from '@angular/core'; + +@Component({ + selector: 'button-loading-demo', + template: ` + + +Busy state is controlled with the loading property.
++++ + ` +}) +export class LoadingDoc { + loading: boolean = false; + + constructor(private readonly cdr: ChangeDetectorRef) {} + + load() { + this.loading = true; + + setTimeout(() => { + this.loading = false; + this.cdr.markForCheck(); + }, 2000); + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-loading-demo', + templateUrl: './button-loading-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonLoadingDemo { + loading: boolean = false; + + load() { + this.loading = true; + + setTimeout(() => { + this.loading = false + }, 2000); + } +}` + }; +} diff --git a/apps/showcase/doc/button/outlineddoc.ts b/apps/showcase/doc/button/outlineddoc.ts new file mode 100644 index 00000000000..090d8f11da7 --- /dev/null +++ b/apps/showcase/doc/button/outlineddoc.ts @@ -0,0 +1,56 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-outlined-demo', + template: ` ++ + +Outlined buttons display a border without a background initially.
++++ + + + + + + + + ` +}) +export class OutlinedDoc { + code: Code = { + basic: ` + + + + + + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-outlined-demo', + templateUrl: './button-outlined-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonOutlinedDemo { }` + }; +} diff --git a/apps/showcase/doc/button/raiseddoc.ts b/apps/showcase/doc/button/raiseddoc.ts new file mode 100644 index 00000000000..b462d030d41 --- /dev/null +++ b/apps/showcase/doc/button/raiseddoc.ts @@ -0,0 +1,56 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-raised-demo', + template: ` ++ + + + + + + + + +Raised buttons display a shadow to indicate elevation.
++++ + + + + + + + + ` +}) +export class RaisedDoc { + code: Code = { + basic: ` + + + + + + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-raised-demo', + templateUrl: './button-raised-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonRaisedDemo { }` + }; +} diff --git a/apps/showcase/doc/button/raisedtextdoc.ts b/apps/showcase/doc/button/raisedtextdoc.ts new file mode 100644 index 00000000000..b1aaf2b6d0e --- /dev/null +++ b/apps/showcase/doc/button/raisedtextdoc.ts @@ -0,0 +1,56 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-raisedtext-demo', + template: ` ++ + + + + + + + + +Text buttons can be displayed as raised for elevation.
++++ + + + + + + + + ` +}) +export class RaisedTextDoc { + code: Code = { + basic: ` + + + + + + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-raisedtext-demo', + templateUrl: './button-raisedtext-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonRaisedtextDemo { }` + }; +} diff --git a/apps/showcase/doc/button/roundeddoc.ts b/apps/showcase/doc/button/roundeddoc.ts new file mode 100644 index 00000000000..c65805d1e44 --- /dev/null +++ b/apps/showcase/doc/button/roundeddoc.ts @@ -0,0 +1,56 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-rounded-demo', + template: ` ++ + + + + + + + + +Rounded buttons have a circular border radius.
++++ + + + + + + + + ` +}) +export class RoundedDoc { + code: Code = { + basic: ` + + + + + + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-rounded-demo', + templateUrl: './button-rounded-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonRoundedDemo { }` + }; +} diff --git a/apps/showcase/doc/button/severitydoc.ts b/apps/showcase/doc/button/severitydoc.ts new file mode 100644 index 00000000000..c52067bf6b3 --- /dev/null +++ b/apps/showcase/doc/button/severitydoc.ts @@ -0,0 +1,56 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-severity-demo', + template: ` ++ + + + + + + + + +Severity defines the type of button.
++++ + + + + + + + + ` +}) +export class SeverityDoc { + code: Code = { + basic: ` + + + + + + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-severity-demo', + templateUrl: './button-severity-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonSeverityDemo { }` + }; +} diff --git a/apps/showcase/doc/button/sizesdoc.ts b/apps/showcase/doc/button/sizesdoc.ts new file mode 100644 index 00000000000..28e8dafc955 --- /dev/null +++ b/apps/showcase/doc/button/sizesdoc.ts @@ -0,0 +1,41 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-sizes-demo', + template: ` ++ + + + + + + + + +Button provides small and large sizes as alternatives to the standard.
++++ + + + ` +}) +export class SizesDoc { + code: Code = { + basic: ` + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-sizes-demo', + templateUrl: './button-sizes-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonSizesDemo { }` + }; +} diff --git a/apps/showcase/doc/button/styledoc.ts b/apps/showcase/doc/button/styledoc.ts new file mode 100644 index 00000000000..3eb4df3e8b5 --- /dev/null +++ b/apps/showcase/doc/button/styledoc.ts @@ -0,0 +1,38 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-style-doc', + template: ` ++ + + + ++ Following is the list of structural style classes, for theming classes visit + theming page. +
+++ ` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/button/templatedoc.ts b/apps/showcase/doc/button/templatedoc.ts new file mode 100644 index 00000000000..1f80807fa82 --- /dev/null +++ b/apps/showcase/doc/button/templatedoc.ts @@ -0,0 +1,130 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-template-demo', + template: ` ++ +
++ + + +Name +Element ++ +p-button +Button element ++ +p-button-icon +Icon element ++ + +p-button-label +Label element of the button ++ +Custom content inside a button is defined as children.
++++ + ++ ` +}) +export class TemplateDoc { + code: Code = { + basic: ` + + `, + + html: `+`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-template-demo', + templateUrl: './button-template-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonTemplateDemo { }` + }; +} diff --git a/apps/showcase/doc/button/textdoc.ts b/apps/showcase/doc/button/textdoc.ts new file mode 100644 index 00000000000..90885d71354 --- /dev/null +++ b/apps/showcase/doc/button/textdoc.ts @@ -0,0 +1,56 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'button-text-demo', + template: ` ++ + ++ +Text buttons are displayed as textual elements.
++++ + + + + + + + + ` +}) +export class TextDoc { + code: Code = { + basic: ` + + + + + + + `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'button-text-demo', + templateUrl: './button-text-demo.html', + standalone: true, + imports: [ButtonModule] +}) +export class ButtonTextDemo { }` + }; +} diff --git a/apps/showcase/doc/card/accessibilitydoc.ts b/apps/showcase/doc/card/accessibilitydoc.ts new file mode 100644 index 00000000000..e67d3a79a72 --- /dev/null +++ b/apps/showcase/doc/card/accessibilitydoc.ts @@ -0,0 +1,25 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'card-accessibility-doc', + template: `+ + + + + + + + + ` +}) +export class AccessibilityDoc { + code: Code = { + html: `++Screen Reader
++ A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you + require to use one of the landmark roles like region, you may use the role property. +
++ Keyboard Support
+Component does not include any interactive elements.
++ Content + ` + }; +} diff --git a/apps/showcase/doc/card/advanceddoc.ts b/apps/showcase/doc/card/advanceddoc.ts new file mode 100644 index 00000000000..a9890f04f00 --- /dev/null +++ b/apps/showcase/doc/card/advanceddoc.ts @@ -0,0 +1,84 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'card-advanced-demo', + template: ` ++ +Card content can be customized further with subHeader, header and footer properties.
++++ ++ +
+ Advanced Card +Card subtitle ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque + quas! +
++ ++++ + + ` +}) +export class AdvancedDoc { + code: Code = { + basic: ` + `, + + html: `+ +
+ Advanced Card +Card subtitle ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt + quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! +
++ ++++ + +`, + + typescript: `import { Component } from '@angular/core'; +import { CardModule } from 'primeng/card'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'card-advanced-demo', + templateUrl: './card-advanced-demo.html', + standalone: true, + imports: [CardModule, ButtonModule] +}) +export class CardAdvancedDemo {}` + }; +} diff --git a/apps/showcase/doc/card/basicdoc.ts b/apps/showcase/doc/card/basicdoc.ts new file mode 100644 index 00000000000..c26bab9e484 --- /dev/null +++ b/apps/showcase/doc/card/basicdoc.ts @@ -0,0 +1,49 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'card-basic-demo', + template: ` ++ ++ +
+ Advanced Card +Card subtitle ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt + quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! +
++ ++++ + + +A simple Card is created with a header property along with the content as children.
++++ ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque + quas! +
++ ` +}) +export class BasicDoc { + code: Code = { + basic: ` + `, + + html: `+ Lorem ipsum dolor sit amet... +
++`, + + typescript: `import { Component } from '@angular/core'; +import { CardModule } from 'primeng/card'; + +@Component({ + selector: 'card-basic-demo', + templateUrl: './card-basic-demo.html', + standalone: true, + imports: [CardModule] +}) +export class CardBasicDemo {}` + }; +} diff --git a/src/app/showcase/doc/card/carddoc.module.ts b/apps/showcase/doc/card/carddoc.module.ts similarity index 81% rename from src/app/showcase/doc/card/carddoc.module.ts rename to apps/showcase/doc/card/carddoc.module.ts index 6447a22322e..908b5719bdd 100644 --- a/src/app/showcase/doc/card/carddoc.module.ts +++ b/apps/showcase/doc/card/carddoc.module.ts @@ -1,10 +1,10 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { Card } from 'primeng/card'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { AdvancedDoc } from './advanceddoc'; import { BasicDoc } from './basicdoc'; @@ -14,6 +14,6 @@ import { StyleDoc } from './styledoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, Card, ButtonModule, RouterModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, AdvancedDoc, StyleDoc, AccessibilityDoc], + declarations: [ImportDoc, BasicDoc, AdvancedDoc, StyleDoc, AccessibilityDoc] }) export class CardDocModule {} diff --git a/apps/showcase/doc/card/importdoc.ts b/apps/showcase/doc/card/importdoc.ts new file mode 100644 index 00000000000..be0aab6ad3a --- /dev/null +++ b/apps/showcase/doc/card/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'card-import-doc', + template: `+ ++ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque + quas! +
+` +}) +export class ImportDoc { + code: Code = { + typescript: `import { Card } from 'primeng/card';` + }; +} diff --git a/apps/showcase/doc/card/styledoc.ts b/apps/showcase/doc/card/styledoc.ts new file mode 100644 index 00000000000..1b2188c0a68 --- /dev/null +++ b/apps/showcase/doc/card/styledoc.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'card-style-doc', + template: ` + + ++ Following is the list of structural style classes, for theming classes visit + theming page. +
+++ ` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/carousel/accessibilitydoc.ts b/apps/showcase/doc/carousel/accessibilitydoc.ts new file mode 100644 index 00000000000..ed7dd447223 --- /dev/null +++ b/apps/showcase/doc/carousel/accessibilitydoc.ts @@ -0,0 +1,90 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'carousel-accessibility-doc', + template: `+ +
++ + + +Name +Element ++ +p-card +Container element. ++ +p-card-header +Title element. ++ +p-card-subheader +Subtitle element. ++ +p-card-content +Content of the card. ++ + +p-card-footer +Footer of the card. ++ ` +}) +export class AccessibilityDoc {} diff --git a/apps/showcase/doc/carousel/basicdoc.ts b/apps/showcase/doc/carousel/basicdoc.ts new file mode 100644 index 00000000000..eefbdda956b --- /dev/null +++ b/apps/showcase/doc/carousel/basicdoc.ts @@ -0,0 +1,262 @@ +import { Code } from '@/domain/code'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'carousel-basic-demo', + template: ` +Screen Reader
++ Carousel uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has aria-live + attribute set as "polite" if carousel is not in autoplay mode, otherwise "off" would be the value in autoplay. +
++ A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of the + item. Inactive slides are hidden from the readers with aria-hidden. +
++ Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default + respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps. +
+Quick navigation elements are button elements with an aria-label attribute referring to the aria.pageLabel of the locale API. Current page is marked with aria-current.
+ +Next/Prev Keyboard Support
+++ ++ +
++ + + +Key +Function ++ +tab +Moves focus through interactive elements in the carousel. ++ +enter +Activates navigation. ++ + +space +Activates navigation. +Quick Navigation Keyboard Support
++++ +
++ + + +Key +Function ++ +tab +Moves focus through the active slide link. ++ +enter +Activates the focused slide link. ++ +space +Activates the focused slide link. ++ +right arrow +Moves focus to the next slide link. ++ +left arrow +Moves focus to the previous slide link. ++ +home +Moves focus to the first slide link. ++ + +end +Moves focus to the last slide link. ++ +Carousel requires a collection of items as its value along with a template to render each item.
++++ ++ ++++++++
+ {{ product.name }}+++{{ '$' + product.price }}+ ++ + + + ` +}) +export class BasicDoc implements OnInit { + products: Product[] | undefined; + + responsiveOptions: any[] | undefined; + + code: Code = { + basic: ` + `, + html: `+ ++++++++ + {{ product.name }} +++++ {{ '$' + product.price }} ++ ++ + + +`, + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; +import { CarouselModule } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; + +@Component({ + selector: 'carousel-basic-demo', + templateUrl: './carousel-basic-demo.html', + standalone: true, + imports: [CarouselModule, ButtonModule, TagModule], + providers: [ProductService] +}) +export class CarouselBasicDemo implements OnInit { + products: Product[] | undefined; + + responsiveOptions: any[] | undefined; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProductsSmall().then((products) => { + this.products = products; + }); + + this.responsiveOptions = [ + { + breakpoint: '1400px', + numVisible: 2, + numScroll: 1 + }, + { + breakpoint: '1199px', + numVisible: 3, + numScroll: 1 + }, + { + breakpoint: '767px', + numVisible: 2, + numScroll: 1 + }, + { + breakpoint: '575px', + numVisible: 1, + numScroll: 1 + } + ] + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } +}`, + data: ` +/* ProductService */ +{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +...`, + service: ['ProductService'] + }; + + constructor( + private productService: ProductService, + private cdr: ChangeDetectorRef + ) {} + + ngOnInit() { + this.productService.getProductsSmall().then((products) => { + this.products = products; + this.cdr.detectChanges(); + }); + + this.responsiveOptions = [ + { + breakpoint: '1400px', + numVisible: 2, + numScroll: 1 + }, + { + breakpoint: '1199px', + numVisible: 3, + numScroll: 1 + }, + { + breakpoint: '767px', + numVisible: 2, + numScroll: 1 + }, + { + breakpoint: '575px', + numVisible: 1, + numScroll: 1 + } + ]; + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } + + extFiles = [ + { + path: 'src/domain/product.ts', + content: ` +export interface Product { + id?: string; + code?: string; + name?: string; + description?: string; + price?: number; + quantity?: number; + inventoryStatus?: string; + category?: string; + image?: string; + rating?: number; +}` + } + ]; +} diff --git a/src/app/showcase/doc/carousel/carouseldoc.module.ts b/apps/showcase/doc/carousel/carouseldoc.module.ts similarity index 85% rename from src/app/showcase/doc/carousel/carouseldoc.module.ts rename to apps/showcase/doc/carousel/carouseldoc.module.ts index fe03cd54db3..18987d640e6 100644 --- a/src/app/showcase/doc/carousel/carouseldoc.module.ts +++ b/apps/showcase/doc/carousel/carouseldoc.module.ts @@ -1,24 +1,24 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '@layout/doc/app.doc.module'; -import { AppCodeModule } from '@layout/doc/app.code.component'; -import { ImportDoc } from './importdoc'; +import { Button, ButtonDirective } from 'primeng/button'; +import { Carousel } from 'primeng/carousel'; import { Tag } from 'primeng/tag'; +import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; -import { StyleDoc } from './styledoc'; -import { Carousel } from 'primeng/carousel'; -import { Button, ButtonDirective } from 'primeng/button'; import { CircularDoc } from './circulardoc'; +import { ImportDoc } from './importdoc'; import { NumScrollDoc } from './numscrolldoc'; import { ResponsiveDoc } from './responsivedoc'; +import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { VerticalDoc } from './verticaldoc'; -import { AccessibilityDoc } from './accessibilitydoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, Carousel, Button, ButtonDirective, Tag], declarations: [ImportDoc, BasicDoc, CircularDoc, NumScrollDoc, StyleDoc, ResponsiveDoc, TemplateDoc, VerticalDoc, AccessibilityDoc], - exports: [AppDocModule], + exports: [AppDocModule] }) export class CarouselDocModule {} diff --git a/src/app/showcase/doc/carousel/circulardoc.ts b/apps/showcase/doc/carousel/circulardoc.ts similarity index 83% rename from src/app/showcase/doc/carousel/circulardoc.ts rename to apps/showcase/doc/carousel/circulardoc.ts index 5ab493b21bb..d9c0274ea83 100644 --- a/src/app/showcase/doc/carousel/circulardoc.ts +++ b/apps/showcase/doc/carousel/circulardoc.ts @@ -1,42 +1,22 @@ +import { Code } from '@/domain/code'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '@domain/code'; -import { Product } from '@domain/product'; -import { ProductService } from '@service/productservice'; @Component({ selector: 'carousel-circular-demo', template: `+ ++ ++++++++ + {{ product.name }} +++++ {{ '$' + product.price }} ++ ++ + + - - When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite - scrolling circular property needs to be added which is enabled automatically in auto play mode. -
+When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling circular property needs to be added which is enabled automatically in auto play mode.
-`, typescript: `import { Component, OnInit } from '@angular/core'; -import { Product } from '@domain/product'; -import { ProductService } from '@service/productservice'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; import { Carousel } from 'primeng/carousel'; import { ButtonModule } from 'primeng/button'; import { Tag } from 'primeng/tag'; @@ -260,7 +240,7 @@ export class CarouselCircularDemo implements OnInit{ rating: 5 }, ...`, - service: ['ProductService'], + service: ['ProductService'] }; extFiles = [ @@ -278,7 +258,7 @@ export interface Product { category?: string; image?: string; rating?: number; -}`, - }, +}` + } ]; } diff --git a/apps/showcase/doc/carousel/importdoc.ts b/apps/showcase/doc/carousel/importdoc.ts new file mode 100644 index 00000000000..483ef8714f3 --- /dev/null +++ b/apps/showcase/doc/carousel/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'carousel-import-doc', + template: `+ -+ {{ product.name }}@@ -52,7 +32,7 @@ import { ProductService } from '@service/productservice';- `, + ` }) export class CircularDoc implements OnInit { products: Product[] | undefined; @@ -61,7 +41,7 @@ export class CircularDoc implements OnInit { constructor( private productService: ProductService, - private cdr: ChangeDetectorRef, + private cdr: ChangeDetectorRef ) {} ngOnInit() { @@ -91,7 +71,7 @@ export class CircularDoc implements OnInit { numVisible: 1, numScroll: 1 } - ] + ]; } getSeverity(status: string) { @@ -185,8 +165,8 @@ export class CircularDoc implements OnInit { ` +}) +export class ImportDoc { + code: Code = { + typescript: `import { Carousel } from 'primeng/carousel';` + }; +} diff --git a/src/app/showcase/doc/carousel/numscrolldoc.ts b/apps/showcase/doc/carousel/numscrolldoc.ts similarity index 86% rename from src/app/showcase/doc/carousel/numscrolldoc.ts rename to apps/showcase/doc/carousel/numscrolldoc.ts index 526c26b955a..1d64cf4f8d3 100644 --- a/src/app/showcase/doc/carousel/numscrolldoc.ts +++ b/apps/showcase/doc/carousel/numscrolldoc.ts @@ -1,7 +1,7 @@ +import { Code } from '@/domain/code'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '@domain/code'; -import { Product } from '@domain/product'; -import { ProductService } from '@service/productservice'; @Component({ selector: 'carousel-num-scroll-demo', @@ -15,18 +15,8 @@ import { ProductService } from '@service/productservice'; -+ {{ product.name }}@@ -42,7 +32,7 @@ import { ProductService } from '@service/productservice';- `, + ` }) export class NumScrollDoc implements OnInit { products: Product[] | undefined; @@ -51,7 +41,7 @@ export class NumScrollDoc implements OnInit { constructor( private productService: ProductService, - private cdr: ChangeDetectorRef, + private cdr: ChangeDetectorRef ) {} ngOnInit() { @@ -64,18 +54,18 @@ export class NumScrollDoc implements OnInit { { breakpoint: '1199px', numVisible: 1, - numScroll: 1, + numScroll: 1 }, { breakpoint: '991px', numVisible: 2, - numScroll: 1, + numScroll: 1 }, { breakpoint: '767px', numVisible: 1, - numScroll: 1, - }, + numScroll: 1 + } ]; } @@ -166,8 +156,8 @@ export class NumScrollDoc implements OnInit { `, typescript: `import { Component, OnInit } from '@angular/core'; -import { Product } from '@domain/product'; -import { ProductService } from '@service/productservice'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; import { Carousel } from 'primeng/carousel'; import { ButtonModule } from 'primeng/button'; import { Tag } from 'primeng/tag'; @@ -237,7 +227,7 @@ export class CarouselNumScrollDemo implements OnInit { rating: 5 }, ...`, - service: ['ProductService'], + service: ['ProductService'] }; extFiles = [ @@ -255,7 +245,7 @@ inventoryStatus?: string; category?: string; image?: string; rating?: number; -}`, - }, +}` + } ]; } diff --git a/apps/showcase/doc/carousel/responsivedoc.ts b/apps/showcase/doc/carousel/responsivedoc.ts new file mode 100644 index 00000000000..5b1fcc27e5c --- /dev/null +++ b/apps/showcase/doc/carousel/responsivedoc.ts @@ -0,0 +1,267 @@ +import { Code } from '@/domain/code'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'responsive-doc', + template: ` + + ++ Carousel supports specific configuration per screen size with the responsiveOptions property that takes an array of objects where each object defines the max-width breakpoint, numVisible for the number of items + items per page and numScroll for number of items to scroll. When responsiveOptions is defined, the numScroll + and + numVisible properties of the Carousel are used as default when there is breakpoint that applies. +
++++ ++ ++++++++ {{ product.name }}+++{{ '$' + product.price }}+ ++ + + + ` +}) +export class ResponsiveDoc implements OnInit { + products: Product[] | undefined; + + responsiveOptions: any[] | undefined; + + constructor( + private productService: ProductService, + private cdr: ChangeDetectorRef + ) {} + + code: Code = { + basic: ` + `, + html: `+ ++++++++ + {{ product.name }} +++++ {{ '$' + product.price }} ++ ++ + + +`, + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; +import { Carousel } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { Tag } from 'primeng/tag'; + +@Component({ + selector: 'carousel-responsive-demo', + templateUrl: './carousel-responsive-demo.html', + standalone: true, + imports: [Carousel, ButtonModule, Tag], + providers: [ProductService] +}) +export class CarouselResponsiveDemo { + products: Product[] | undefined; + + responsiveOptions: any[] | undefined; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProductsSmall().then((products) => { + this.products = products; + }); + + + this.responsiveOptions = [ + { + breakpoint: '1400px', + numVisible: 2, + numScroll: 1, + }, + { + breakpoint: '1199px', + numVisible: 3, + numScroll: 1, + }, + { + breakpoint: '767px', + numVisible: 2, + numScroll: 1, + }, + { + breakpoint: '575px', + numVisible: 1, + numScroll: 1, + }, + ]; + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } +}`, + + data: ` +/* ProductService */ +{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +...`, + service: ['ProductService'] + }; + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } + + ngOnInit() { + this.productService.getProductsSmall().then((products) => { + this.products = products; + this.cdr.detectChanges(); + }); + + this.responsiveOptions = [ + { + breakpoint: '1400px', + numVisible: 2, + numScroll: 1 + }, + { + breakpoint: '1199px', + numVisible: 3, + numScroll: 1 + }, + { + breakpoint: '767px', + numVisible: 2, + numScroll: 1 + }, + { + breakpoint: '575px', + numVisible: 1, + numScroll: 1 + } + ]; + } + + extFiles = [ + { + path: 'src/domain/product.ts', + content: ` +export interface Product { + id?: string; + code?: string; + name?: string; + description?: string; + price?: number; + quantity?: number; + inventoryStatus?: string; + category?: string; + image?: string; + rating?: number; +}` + } + ]; +} diff --git a/apps/showcase/doc/carousel/styledoc.ts b/apps/showcase/doc/carousel/styledoc.ts new file mode 100644 index 00000000000..250e8c7a807 --- /dev/null +++ b/apps/showcase/doc/carousel/styledoc.ts @@ -0,0 +1,62 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'carousel-style-doc', + template: ` ++ ++ ++++++++ + {{ product.name }} +++++ {{ '$' + product.price }} ++ ++ + + + ++ Following is the list of structural style classes, for theming classes visit + theming page. +
+++ ` +}) +export class StyleDoc {} diff --git a/apps/showcase/doc/carousel/templatedoc.ts b/apps/showcase/doc/carousel/templatedoc.ts new file mode 100644 index 00000000000..7e1969c1054 --- /dev/null +++ b/apps/showcase/doc/carousel/templatedoc.ts @@ -0,0 +1,267 @@ +import { Code } from '@/domain/code'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'carousel-template-demo', + template: ` ++ +
++ + + +Name +Element ++ +p-carousel +Container element. ++ +p-carousel-header +Header section. ++ +p-carousel-footer +Footer section. ++ +p-carousel-content +Main content element. It contains the container of the viewport. ++ +p-carousel-container +Container of the viewport. It contains navigation buttons and viewport. ++ +p-carousel-items-content +Viewport. ++ +p-carousel-dots-container +Container of the paginator. ++ +p-carousel-dot-item +Paginator element. ++ + +p-carousel-dot-icon +Paginator element icon. ++ +Custom content projection is available using the header and footer templates.
++++ ++ +Header content
++ ++++++++ {{ product.name }}+++{{ '$' + product.price }}+ ++ + + + +Footer content
++ ` +}) +export class TemplateDoc implements OnInit { + products: Product[] | undefined; + + responsiveOptions: any[] | undefined; + + constructor( + private productService: ProductService, + private cdr: ChangeDetectorRef + ) {} + + ngOnInit() { + this.productService.getProductsSmall().then((products) => { + this.products = products; + this.cdr.detectChanges(); + }); + + this.responsiveOptions = [ + { + breakpoint: '1199px', + numVisible: 1, + numScroll: 1 + }, + { + breakpoint: '991px', + numVisible: 2, + numScroll: 1 + }, + { + breakpoint: '767px', + numVisible: 1, + numScroll: 1 + } + ]; + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } + + code: Code = { + basic: ` + `, + html: `+ +Header content
++ ++++++++ + {{ product.name }} +++++ {{ '$' + product.price }} ++ ++ + + + +Footer content
++`, + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; +import { Carousel } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { Tag } from 'primeng/tag'; + +@Component({ + selector: 'carousel-template-demo', + templateUrl: './carousel-template-demo.html', + standalone: true, + imports: [Carousel, ButtonModule, Tag], + providers: [ProductService] +}) +export class CarouselTemplateDemo implements OnInit{ + products: Product[] | undefined; + + responsiveOptions: any[] | undefined; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProductsSmall().then((products) => { + this.products = products; + }); + + this.responsiveOptions = [ + { + breakpoint: '1199px', + numVisible: 1, + numScroll: 1 + }, + { + breakpoint: '991px', + numVisible: 2, + numScroll: 1 + }, + { + breakpoint: '767px', + numVisible: 1, + numScroll: 1 + } + ]; + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } +}`, + + data: ` +/* ProductService */ +{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +...`, + service: ['ProductService'] + }; + + extFiles = [ + { + path: 'src/domain/product.ts', + content: ` +export interface Product { + id?: string; + code?: string; + name?: string; + description?: string; + price?: number; + quantity?: number; + inventoryStatus?: string; + category?: string; + image?: string; + rating?: number; +}` + } + ]; +} diff --git a/apps/showcase/doc/carousel/verticaldoc.ts b/apps/showcase/doc/carousel/verticaldoc.ts new file mode 100644 index 00000000000..674b7d5235f --- /dev/null +++ b/apps/showcase/doc/carousel/verticaldoc.ts @@ -0,0 +1,237 @@ +import { Code } from '@/domain/code'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'carousel-vertical-demo', + template: ` ++ ++ +Header content
++ ++++++++ {{ product.name }}++++ {{ '$' + product.price }} ++ ++ + + + +Footer content
++ +To create a vertical Carousel, orientation needs to be set to vertical along with a verticalViewPortHeight.
++++ ++ ++++++++ {{ product.name }}+++{{ '$' + product.price }}+ ++ + + + ` +}) +export class VerticalDoc implements OnInit { + products: Product[] | undefined; + + constructor( + private productService: ProductService, + private cdr: ChangeDetectorRef + ) {} + + ngOnInit() { + this.productService.getProductsSmall().then((products) => { + this.products = products; + this.cdr.detectChanges(); + }); + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } + + code: Code = { + basic: ` + `, + html: `+ ++++++++ + {{ product.name }} +++++ {{ '$' + product.price }} ++ ++ + + +`, + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@/domain/product'; +import { ProductService } from '@/service/productservice'; +import { Carousel } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { Tag } from 'primeng/tag'; + +@Component({ + selector: 'carousel-vertical-demo', + templateUrl: './carousel-vertical-demo.html', + standalone: true, + imports: [Carousel, ButtonModule, Tag], + providers: [ProductService] +}) +export class CarouselVerticalDemo implements OnInit { + products: Product[] | undefined; + + responsiveOptions: any[]; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProductsSmall().then((products) => { + this.products = products; + }); + + this.responsiveOptions = [ + { + breakpoint: '1024px', + numVisible: 3, + numScroll: 3 + }, + { + breakpoint: '768px', + numVisible: 2, + numScroll: 2 + }, + { + breakpoint: '560px', + numVisible: 1, + numScroll: 1 + } + ]; + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warn'; + case 'OUTOFSTOCK': + return 'danger'; + } + } +}`, + scss: ` +:host ::ng-deep { + .product-item { + .product-item-content { + border: 1px solid var(--surface-d); + border-radius: 3px; + margin: .3rem; + text-align: center; + padding: 2rem 0; + } + + .product-image { + width: 50%; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) + } + } +}`, + data: ` +/* ProductService */ +{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +...`, + service: ['ProductService'] + }; + + extFiles = [ + { + path: 'src/domain/product.ts', + content: ` +export interface Product { + id?: string; + code?: string; + name?: string; + description?: string; + price?: number; + quantity?: number; + inventoryStatus?: string; + category?: string; + image?: string; + rating?: number; +}` + } + ]; +} diff --git a/apps/showcase/doc/cascadeselect/accessibilitydoc.ts b/apps/showcase/doc/cascadeselect/accessibilitydoc.ts new file mode 100644 index 00000000000..29b0ef3a42a --- /dev/null +++ b/apps/showcase/doc/cascadeselect/accessibilitydoc.ts @@ -0,0 +1,130 @@ +import { Code } from '@/domain/code'; +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'cascade-select-accessibility-doc', + template: `+ ++ ++++++++ {{ product.name }}++++ {{ '$' + product.price }} ++ ++ + + + + +Screen Reader
++ Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The cascadeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. + The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup. +
++ The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label, + aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and + added to each treeitem. +
++ + Closed State Keyboard Support
+++ ++ +
++ + + +Key +Function ++ ++ tab + +Moves focus to the cascadeselect element. ++ ++ space + +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. ++ + ++ down arrow + +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. +Popup Keyboard Support
++` +}) +export class AccessibilityDoc { + @Input() id: string; + + @Input() title: string; + + code: Code = { + basic: `Options ++ +
++ + + +Key +Function ++ ++ tab + +Hides the popup and moves focus to the next tabbable element. ++ +shift + tab +Hides the popup and moves focus to the previous tabbable element. ++ ++ enter + +Selects the focused option and closes the popup. ++ ++ space + +Selects the focused option and closes the popup. ++ ++ escape + +Closes the popup, moves focus to the cascadeselect element. ++ ++ down arrow + +Moves focus to the next option. ++ ++ up arrow + +Moves focus to the previous option. ++ ++ right arrow + +If option is closed, opens the option otherwise moves focus to the first child option. ++ + ++ left arrow + +If option is open, closes the option otherwise moves focus to the parent option. ++ + ` + }; +} diff --git a/apps/showcase/doc/cascadeselect/basicdoc.ts b/apps/showcase/doc/cascadeselect/basicdoc.ts new file mode 100644 index 00000000000..23209650bc8 --- /dev/null +++ b/apps/showcase/doc/cascadeselect/basicdoc.ts @@ -0,0 +1,202 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'cascade-select-basic-demo', + template: ` + + ++ CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. + optionGroupLabel is used for the text of a category and optionGroupChildren is to define the children of the category. Note that order of the optionGroupChildren matters and it should correspond to the data + hierarchy. +
++++ + ` +}) +export class BasicDoc { + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelect } from 'primeng/cascadeselect'; + +@Component({ + selector: 'cascade-select-basic-demo', + templateUrl: './cascade-select-basic-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelect] +}) +export class CascadeSelectBasicDemo implements OnInit { + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } +}` + }; +} diff --git a/apps/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts b/apps/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts new file mode 100644 index 00000000000..2e5a819878c --- /dev/null +++ b/apps/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts @@ -0,0 +1,30 @@ +import { AppCodeModule } from '@/components/doc/app.code.component'; +import { AppDocModule } from '@/components/doc/app.doc.module'; +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { RouterModule } from '@angular/router'; +import { ButtonModule } from 'primeng/button'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { IftaLabelModule } from 'primeng/iftalabel'; +import { AccessibilityDoc } from './accessibilitydoc'; +import { BasicDoc } from './basicdoc'; +import { DisabledDoc } from './disableddoc'; +import { FilledDoc } from './filleddoc'; +import { FloatLabelDoc } from './floatlabeldoc'; +import { IftaLabelDoc } from './iftalabeldoc'; +import { ImportDoc } from './importdoc'; +import { InvalidDoc } from './invaliddoc'; +import { LoadingDoc } from './loadingdoc'; +import { ReactiveFormsDoc } from './reactiveformsdoc'; +import { SizesDoc } from './sizesdoc'; +import { StyleDoc } from './styledoc'; +import { TemplateDoc } from './templatedoc'; + +@NgModule({ + imports: [CommonModule, RouterModule, CascadeSelectModule, FormsModule, AppCodeModule, AppDocModule, ReactiveFormsModule, FloatLabelModule, IftaLabelModule, ButtonModule], + exports: [AppDocModule], + declarations: [ImportDoc, BasicDoc, TemplateDoc, InvalidDoc, FloatLabelDoc, IftaLabelDoc, FilledDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, LoadingDoc, SizesDoc] +}) +export class CascadeSelectDocModule {} diff --git a/apps/showcase/doc/cascadeselect/disableddoc.ts b/apps/showcase/doc/cascadeselect/disableddoc.ts new file mode 100644 index 00000000000..922d5827d4a --- /dev/null +++ b/apps/showcase/doc/cascadeselect/disableddoc.ts @@ -0,0 +1,38 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'cascade-select-disabled-demo', + template: ` ++ + +When disabled is present, the element cannot be edited and focused.
++++ + ` +}) +export class DisabledDoc { + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelect } from 'primeng/cascadeselect'; + +@Component({ + selector: 'cascade-select-disabled-demo', + templateUrl: './cascade-select-disabled-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelect] +}) +export class CascadeSelectDisabledDemo { + +}` + }; +} diff --git a/apps/showcase/doc/cascadeselect/filleddoc.ts b/apps/showcase/doc/cascadeselect/filleddoc.ts new file mode 100644 index 00000000000..b664c58f6c0 --- /dev/null +++ b/apps/showcase/doc/cascadeselect/filleddoc.ts @@ -0,0 +1,198 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'cascade-select-filled-demo', + template: ` ++ + +Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
++++ + ` +}) +export class FilledDoc { + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelect } from 'primeng/cascadeselect'; + +@Component({ + selector: 'cascade-select-filled-demo', + templateUrl: './cascade-select-filled-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelect] +}) +export class CascadeSelectFilledDemo implements OnInit { + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } +}` + }; +} diff --git a/apps/showcase/doc/cascadeselect/floatlabeldoc.ts b/apps/showcase/doc/cascadeselect/floatlabeldoc.ts new file mode 100644 index 00000000000..43d1544a974 --- /dev/null +++ b/apps/showcase/doc/cascadeselect/floatlabeldoc.ts @@ -0,0 +1,255 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'cascade-select-float-label-demo', + template: ` ++ + + ++ A floating label appears on top of the input field when focused. Visit + FloatLabel documentation for more information. +
+++ ++ + ++ + + + ++ + + ++ + + ` +}) +export class FloatLabelDoc { + value1: string | undefined; + + value2: string | undefined; + + value3: string | undefined; + + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } + + code: Code = { + basic: ` + + ++ + + + ++ + + `, + + html: `+ + +`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelect } from 'primeng/cascadeselect'; +import { FloatLabel } from 'primeng/floatlabel'; + +@Component({ + selector: 'cascade-select-float-label-demo', + templateUrl: './cascade-select-float-label-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelect, FloatLabel] +}) +export class CascadeSelectFloatLabelDemo implements OnInit { + value1: string | undefined; + + value2: string | undefined; + + value3: string | undefined; + + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } +}` + }; +} diff --git a/apps/showcase/doc/cascadeselect/iftalabeldoc.ts b/apps/showcase/doc/cascadeselect/iftalabeldoc.ts new file mode 100644 index 00000000000..02d97cc99ae --- /dev/null +++ b/apps/showcase/doc/cascadeselect/iftalabeldoc.ts @@ -0,0 +1,209 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'cascade-select-ifta-label-demo', + template: ` ++ + ++ + + + ++ + + ++ + + +IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+++ ++ ++ + + ` +}) +export class IftaLabelDoc { + countries: any[] | undefined; + + selectedCity: any; + code: Code = { + basic: ` + `, + + html: `+ + +`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; +import { IftaLabelModule } from 'primeng/iftalabel'; + +@Component({ + selector: 'cascade-select-ifta-label-demo', + templateUrl: './cascade-select-ifta-label-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelectModule, IftaLabelModule] +}) +export class CascadeSelectIftaLabelDemo implements OnInit { + + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } +}` + }; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } +} diff --git a/apps/showcase/doc/cascadeselect/importdoc.ts b/apps/showcase/doc/cascadeselect/importdoc.ts new file mode 100644 index 00000000000..02cacbec162 --- /dev/null +++ b/apps/showcase/doc/cascadeselect/importdoc.ts @@ -0,0 +1,12 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'cascade-select-import-doc', + template: `+ ++ + ` +}) +export class ImportDoc { + code: Code = { + typescript: `import { CascadeSelect } from 'primeng/cascadeselect';` + }; +} diff --git a/apps/showcase/doc/cascadeselect/invaliddoc.ts b/apps/showcase/doc/cascadeselect/invaliddoc.ts new file mode 100644 index 00000000000..96c2db36fae --- /dev/null +++ b/apps/showcase/doc/cascadeselect/invaliddoc.ts @@ -0,0 +1,207 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'cascade-select-invalid-demo', + template: ` + + +Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
++++ + ` +}) +export class InvalidDoc { + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } + + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelect } from 'primeng/cascadeselect'; + +@Component({ + selector: 'cascade-select-invalid-demo', + templateUrl: './cascade-select-invalid-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelect] +}) +export class CascadeSelectInvalidDemo implements OnInit { + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } +}` + }; +} diff --git a/apps/showcase/doc/cascadeselect/loadingdoc.ts b/apps/showcase/doc/cascadeselect/loadingdoc.ts new file mode 100644 index 00000000000..191629f6543 --- /dev/null +++ b/apps/showcase/doc/cascadeselect/loadingdoc.ts @@ -0,0 +1,36 @@ +import { Code } from '@/domain/code'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'cascade-select-loading-demo', + template: ` ++ + +Loading state can be used loading property.
++++ + ` +}) +export class LoadingDoc { + code: Code = { + basic: ` `, + + html: ` +`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelect } from 'primeng/cascadeselect'; + +@Component({ + selector: 'cascade-select-loading-demo', + templateUrl: './cascade-select-loading-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelect] +}) +export class CascadeSelectLoadingDemo {}` + }; +} diff --git a/apps/showcase/doc/cascadeselect/reactiveformsdoc.ts b/apps/showcase/doc/cascadeselect/reactiveformsdoc.ts new file mode 100644 index 00000000000..0c7c9de97c3 --- /dev/null +++ b/apps/showcase/doc/cascadeselect/reactiveformsdoc.ts @@ -0,0 +1,217 @@ +import { Code } from '@/domain/code'; +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup } from '@angular/forms'; + +@Component({ + selector: 'reactive-forms-doc', + template: ` ++ + +CascadeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
++ +++ ` +}) +export class ReactiveFormsDoc implements OnInit { + countries: any[] | undefined; + + selectedCity: any; + + formGroup: FormGroup | undefined; + + ngOnInit() { + this.formGroup = new FormGroup({ + selectedCity: new FormControl
Headless mode allows you to customize the entire user interface instead of the default elements.
+| Name | +Type | +Default | +Description | +
|---|---|---|---|
| key | +string | +null | +Optional key to match the key of confirm object, necessary to use when component tree has multiple confirm dialogs. | +
| showTransitionOptions | +string | +.12s cubic-bezier(0, 0, 0.2, 1) | +Transition options of the show animation. | +
| hideTransitionOptions | +string | +.1s linear | +Transition options of the hide animation. | +
| autoZIndex | +boolean | +true | +Whether to automatically manage layering. | +
| baseZIndex | +number | +0 | +Base zIndex value to use in layering. | +
| style | +string | +null | +Inline style of the component. | +
| styleClass | +string | +null | +Style class of the component. | +
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-confirm-popup | +Container element | +
| p-confirm-popup-content | +Content element. | +
| p-confirm-popup-icon | +Message icon. | +
| p-confirm-popup-message | +Message text. | +
| p-confirm-popup-footer | +Footer element for buttons. | +
Content section can be customized using content template.
+{{ message.message }}
+{{ message.message }}
+{{ message.message }}
+| Name | +Parameters | +
|---|---|
| accepticon | +- | +
| rejecticon | +- | +
Screen Reader
++ ContextMenu component uses the menubar role with aria-orientation set to "vertical" and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a + presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a ContextMenu uses the + menu role with an aria-labelledby defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have aria-haspopup, aria-expanded and aria-controls to define the + relation between the item and the submenu. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +When focus is in the menu, closes the context menu and moves focus to the next focusable element in the page sequence. | +
| enter | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
| space | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
| escape | +Closes the context menu. | +
| down arrow | +If focus is not inside the menu and menu is open, add focus to the first item. If an item is already focused, moves focus to the next menuitem within the submenu. | +
| up arrow | +If focus is not inside the menu and menu is open, add focus to the last item. If an item is already focused, moves focus to the next menuitem within the submenu. | +
| right arrow | +Opens a submenu if there is one available and moves focus to the first item. | +
| left arrow | +Closes a submenu and moves focus to the root item of the closed submenu. | +
| home | +Moves focus to the first menuitem within the submenu. | +
| end | +Moves focus to the last menuitem within the submenu. | +
+ ContextMenu can be attached to a particular element whose local template variable name is defined using the + target property. +
+
+
+
+ The function to invoke when an item is clicked is defined using the command property.
+-
+
-
+ ++
+ {{ user.name }} +
+
+
-
+
-
+ ++
+ {{ user.name }} +
+
+
-
+
-
+ ++
+ {{ user.name }} +
+
+
Setting global property to true attaches the context menu to the document.
+Right-Click anywhere on this page to view the global ContextMenu.
+Right-Click anywhere on this page to view the global ContextMenu.
+Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-contextmenu | +Container element. | +
| p-menu-list | +List element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-submenu-icon | +Arrow icon of a submenu. | +
ContextMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.
+-
+
-
+ +++ {{ product.name }} ++ ${{ product.price }} ++ + {{ product.category }} ++
+
-
+
-
+ +++ {{ product.name }} ++ ${{ product.price }} ++ + {{ product.category }} ++
+
-
+
-
+ +++ {{ product.name }} ++ ${{ product.price }} ++ + {{ product.category }} ++
+
Font Awesome is a popular icon library with a wide range of icons.
Any type of image can be used as an icon.
+
+ Material icons is the official icon library based on Google Material Design.
Inline SVGs are embedded inside the dom.
Screen Reader
++ The container element that wraps the layout options buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Values to describe the buttons + are derived from the aria.listView and aria.gridView properties of the locale API respectively. +
+Refer to paginator accessibility documentation for the paginator of the component.
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the buttons. | +
| space | +Toggles the checked state of a button. | +
DataView requires a value to display along with a list template that receives an object in the collection to return content.
+- DataView supports list and grid display modes defined with the layout property. The grid mode is - not built-in for flexibility purposes and requires a library with CSS grid features like Tailwind. -
+DataView supports list and grid display modes defined with the layout property. The grid mode is not built-in for flexibility purposes and requires a library with CSS grid features like Tailwind.
While data is being loaded. Skeleton component may be used to indicate the busy state.
+- Pagination is enabled with the paginator and rows properties. Refer to the - Paginator for more information about customizing the paginator. -
+Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator.
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-dataview | +Container element. | +
| p-dataview-list | +Container element in list layout. | +
| p-dataview-grid | +Container element in grid layout. | +
| p-dataview-header | +Header section. | +
| p-dataview-footer | +Footer section. | +
| p-dataview-content | +Container of items. | +
| p-dataview-emptymessage | +Empty message element. | +
Screen Reader
++ Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role in addition to + aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup. +
++ The optional DatePicker button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the + chooseDate + key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be + able to notify users about the current value. +
+ ++ Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth, + nextMonth,prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys. +
+ ++ Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. + Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute. +
+ ++ Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and + pm keys. +
+ +DatePicker also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.
+Choose Date Button Keyboard Support
+| Key | +Function | +
|---|---|
| + space + | +Opens popup and moves focus to the selected date, if there is none focuses on today. | +
| + enter + | +Opens popup and moves focus to the selected date, if there is none focuses on today. | +
Popup Keyboard Support
+| Key | +Function | +
|---|---|
| + escape + | +Closes the popup and moves focus to the input element. | +
| + tab + | +Moves focus to the next focusable element within the popup. | +
| shift + tab | +Moves focus to the next focusable element within the popup. | +
Header Buttons Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Triggers the button action. | +
| + space + | +Triggers the button action. | +
Date Grid Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Selects the date, closes the popup and moves focus to the input element. | +
| + space + | +Selects the date, closes the popup and moves focus to the input element. | +
| + up arrow + | +Moves focus to the same day of the previous week. | +
| + down arrow + | +Moves focus to the same day of the next week. | +
| + right arrow + | +Moves focus to the next day. | +
| + left arrow + | +Moves focus to the previous day. | +
| + home + | +Moves focus to the first day of the current week. | +
| + end + | +Moves focus to the last day of the current week. | +
| + page up + | +Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker. | +
| shift + page up | +Changes the date to previous year in date picker mode. Has no effect in month or year picker | +
| + page down + | +Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker. | +
| shift + page down | +Changes the date to next year in date picker mode. Has no effect in month or year picker | +
Footer Buttons Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Triggers the button action. | +
| + space + | +Triggers the button action. | +
Two-way value binding is defined using the standard ngModel directive referencing to a Date property.
+When disabled is present, the element cannot be edited and focused.
+| Name | +Parameters | +Description | +
|---|---|---|
| onSelect | +value: Selected value | +Callback to invoke when a date is selected. Note that this event is not called when the value is entered from the input manually. | +
| onBlur | +event: Blur event | +Callback to invoke on blur of input field. | +
| onFocus | +event: Focus event | +Callback to invoke on focus of input field. | +
| onClose | +event: Close event | +Callback to invoke when datepicker panel is closed. | +
| onShow | +event: Animation event | +Callback to invoke when datepicker panel is visible. | +
| onClickOutside | +event: Click event | +Callback to invoke when click outside of datepicker panel. | +
| onInput | +event: Input event | +Callback to invoke when input field is being typed. | +
| onTodayClick | +event: Click event | +Callback to invoke when today button is clicked. | +
| onClearClick | +event: Click event | +Callback to invoke when clear button is clicked. | +
| onMonthChange | +
+ event.month: New month + event.year: New year + |
+ Callback to invoke when a month is changed using the navigators. | +
| onYearChange | +
+ event.month: New month + event.year: New year + |
+ Callback to invoke when a year is changed using the navigators. | +
| onClear | +- | +Callback to invoke when input field is cleared. | +
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
++ A floating label appears on top of the input field when focused. Visit + FloatLabel documentation for more information. +
+Default date format is mm/dd/yy which can be customized using the dateFormat property. Following options can be a part of the format.
+-
+
- d - day of month (no leading zero) +
- dd - day of month (two digit) +
- o - day of the year (no leading zeros) +
- oo - day of the year (three digit) +
- D - day name short +
- DD - day name long +
- m - month of year (no leading zero) +
- mm - month of year (two digit) +
- M - month name short +
- MM - month name long +
- y - year (two digit) +
- yy - year (four digit) +
- @ - Unix timestamp (ms since 01/01/1970) +
- ! - Windows ticks (100ns since 01/01/0001) +
- '...' - literal text +
- '' - single quote +
- anything else - literal text +
An additional icon is displayed next to the input field when showIcon is present.
+IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+DatePicker is displayed as a popup by default, add inline property to customize this behavior.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
++ Locale for different languages and formats is defined globally, refer to the + PrimeNG Locale configuration for more information. +
+| Name | +Parameters | +Description | +
|---|---|---|
| toggle | +- | +Toggles the visibility of the calendar. | +
In order to choose multiple dates, set selectionMode as multiple. In this mode, the value binding should be an array.
+A range of dates can be selected by defining selectionMode as range, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.
+DatePicker can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+DatePicker provides small and large sizes as alternatives to the base.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-calendar | +Main container element | +
| p-calendar-w-btn | +Main container element when button is enabled. | +
| p-calendar-timeonly | +Main container element in time picker only mode. | +
| p-inputtext | +Input element | +
| p-datepicker | +Datepicker element | +
| p-datepicker-inline | +Datepicker element in inline mode | +
| p-datepicker-monthpicker | +Datepicker element in month view. | +
| p-datepicker-touch-p | +Datepicker element in touch p mode. | +
| p-datepicker-calendar | +Table containing dates of a month. | +
| p-datepicker-current-day | +Cell of selected date. | +
| p-datepicker-today | +Cell of today's date. | +
Calendar UI accepts custom content using header and footer templates.
+| Name | +Parameters | +
|---|---|
| header | +- | +
| footer | +- | +
| date | +$implicit: Value of the component | +
| decade | +$implicit: An array containing the start and and year of a decade to display at header of the year picker. | +
| previousicon | +- | +
| nexticon | +- | +
| triggericon | +- | +
| clearicon | +- | +
| incrementicon | +- | +
| decrementicon | +- | +
- A time picker is displayed when showTime is enabled where 12/24 hour format is configured with - hourFormat property. In case, only time needs to be selected, add timeOnly to hide the date section. -
+A time picker is displayed when showTime is enabled where 12/24 hour format is configured with hourFormat property. In case, only time needs to be selected, add timeOnly to hide the date section.
Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.
+Content is not loaded yet, scroll down to initialize it.
+
+
+ + Content is not loaded yet, scroll down to initialize it. +
+
+ Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.
+Table is not loaded yet, scroll down to initialize it.
+ ++ Table is not loaded yet, scroll down to initialize it. +
+ +Screen Reader
++ Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In + addition aria-modal is added since focus is kept within the popup. +
++ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding + tabIndex would be necessary. +
+Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
++ Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may usecloseButtonProps to customize the element + and override the default aria-label. +
+ +Overlay Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the next the focusable element within the dialog. | +
| shift + tab | +Moves focus to the previous the focusable element within the dialog. | +
| escape | +Closes the dialog if closeOnEscape is true. | +
Close Button Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Closes the dialog. | +
| space | +Closes the dialog. | +
Content
+Dialog is used as a container and visibility is controlled with visible property.
Headless mode allows you to customize the entire user interface instead of the default elements.
+Dialog automatically displays a scroller when content exceeeds viewport.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea + commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime + placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non + recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea + commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime + placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non + recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. +
++ Lorem ipsum dolor sit amet... +
++ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
++ At vero eos et accusamus et iusto odio dignissimos... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +
++ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
++ At vero eos et accusamus et iusto odio dignissimos... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea + commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime + placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non + recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea + commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime + placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non + recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. +
+Setting maximizable property to true enables the full screen mode.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- When dialog includes other components with overlays such as dropdown, the overlay part cannot exceed dialog boundaries due - to overflow. In order to solve this, you can either append the overlay to the body by using + When dialog includes other components with overlays such as dropdown, the overlay part cannot exceed dialog boundaries due to overflow. In order to solve this, you can either append the overlay to the body by using appendTo property or allow overflow in dialog.
The position property is used to display a Dialog at all edges and corners of the screen.
++ Dialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in + style property is used. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-dialog | +Container element | +
| p-dialog-titlebar | +Container of header. | +
| p-dialog-title | +Header element. | +
| p-dialog-titlebar-icon | +Icon container inside header. | +
| p-dialog-titlebar-close | +Close icon element. | +
| p-dialog-content | +Content element. | +
| p-dialog-footer | +Footer element. | +
Dialog can be customized using header and footer templates.
+Screen Reader
+Divider uses a separator role with aria-orientation set to either "horizontal" or "vertical".
+Keyboard Support
+Component does not include any interactive elements.
+Divider is basically placed between the items to separate.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
+ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
+ ++ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis + voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio. +
++ Lorem ipsum dolor sit amet... +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
++ At vero eos et accusamus et iusto odio dignissimos... +
++ Temporibus autem quibusdam et aut officiis... +
`, + + html: `+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis + voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio. +
++ Children are rendered within the boundaries of the divider where location of the content is configured with the align property. In horizontal layout, alignment options are left, center and right whereas vertical + mode supports top, center and bottom. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
+ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
+ ++ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis + voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio. +
++ Lorem ipsum dolor sit amet... +
+ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
+ ++ At vero eos et accusamus et iusto odio dignissimos... +
+ ++ Temporibus autem quibusdam et aut officiis... +
`, + + html: `+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
+ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
+ ++ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis + voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-divider | +Container element. | +
| p-divider-horizontal | +Container element in horizontal layout. | +
| p-divider-vertical | +Container element in vertical layout. | +
| p-divider-solid | +Container element with solid border. | +
| p-divider-dashed | +Container element with dashed border. | +
| p-divider-dotted | +Container element with dotted border. | +
| p-divider-left | +Container element with content aligned to left. | +
| p-divider-right | +Container element with content aligned to right. | +
| p-divider-center | +Container element with content aligned to center. | +
| p-divider-bottom | +Container element with content aligned to bottom. | +
| p-divider-top | +Container element with content aligned to top. | +
Style of the border is configured with the type property that can either be solid, dotted or dashed.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
+ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
+ ++ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis + voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio. +
++ Lorem ipsum dolor sit amet... +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
++ At vero eos et accusamus et iusto odio dignissimos... +
++ Temporibus autem quibusdam et aut officiis... +
`, + + html: `+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis + voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio. +
+Vertical divider is enabled by setting the layout property as vertical.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+ ++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
+ ++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ Lorem ipsum dolor sit amet... +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
++ At vero eos et accusamus et iusto odio dignissimos... +
`, + + html: `+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam + voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
+Screen Reader
++ Dock component uses the menu role with the aria-orientation and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role + whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
| shift + tab | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
| enter | +Activates the focused menuitem. | +
| space | +Activates the focused menuitem. | +
| down arrow | +Moves focus to the next menuitem in vertical layout. | +
| up arrow | +Moves focus to the previous menuitem in vertical layout. | +
| home | +Moves focus to the first menuitem in horizontal layout. | +
| end | +Moves focus to the last menuitem in horizontal layout. | +
+ Dock requires a collection of menuitems as its model. Default location is bottom and other sides are also available when defined with the position property. Content of the dock component is defined by + item template. +
++ Dock requires a collection of menuitems as its model. Default location is bottom and other sides are also available when defined with the position property. Content of the dock component is defined by + item template. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-dock | +Container element. | +
| p-dock-list | +List of items. | +
| p-dock-item | +Each items in list. | +
+ pDraggable and pDroppable are attached to a target element to add drag-drop behavior. The value of a Directive attribute is required and it defines the scope to match draggables with droppables. Droppable scope can also + be an array to accept multiple droppables. +
+-
+
- + {{ product.name }} + +
Drop Zone
+-
+
- + {{ product.name }} + +
-
+
- + {{product.name}} + +
+ Drop Zone +
+-
+
- + {{product.name}} + +
-
+
- + {{product.name}} + +
Drop Zone
+-
+
- + {{product.name}} + +
Drag and Drop to Table
+
+ {{ product.name }}
+ + {{ product.category }} +{{ product.price }}
+
+ + {{product.name}} +
+ + + {{product.category}} + ++ {{product.price}} +
+
+ + {{product.name}} +
+ + + {{product.category}} + ++ {{product.price}} +
+- dragHandle is used to restrict dragging unless mousedown occurs on the specified element. Panel below can only be - dragged using its header. -
+dragHandle is used to restrict dragging unless mousedown occurs on the specified element. Panel below can only be dragged using its header.
- When a suitable draggable enters a droppable area, the area gets p-draggable-enter class that can be used to style - the droppable section. -
+When a suitable draggable enters a droppable area, the area gets p-draggable-enter class that can be used to style the droppable section.
-
-
- +
- {{ product.name }}
-
-
- {{product.name}} @@ -103,11 +94,11 @@ export class DropIndicatorDoc { html: `
- {{product.name}} @@ -123,8 +114,8 @@ export class DropIndicatorDoc {
-
+ + FAVORITES + ++
-
+
- + + + Dashboard + + +
- + + + Bookmarks + + +
- + + + Reports + + + + +
- + + + Team + + +
- + + + Messages + 3 + + +
- + + + Calendar + + +
- + + + Settings + + +
+ -
+ + APPLICATION + ++
-
+
- + + + Projects + + +
- + + + Performance + + +
- + + + Settings + + +
+ -
+ + FAVORITES + ++
-
+
- + + + Dashboard + + +
- + + + Bookmarks + + +
- + + + Reports + + + + +
- + + + Team + + +
- + + + Messages + 3 + + +
- + + + Calendar + + +
- + + + Settings + + +
+ -
+ + APPLICATION + ++
-
+
- + + + Projects + + +
- + + + Performance + + +
- + + + Settings + + +
+ -
+ + FAVORITES + ++
-
+
- + + + Dashboard + + +
- + + + Bookmarks + + +
- + + + Reports + + + + +
- + + + Team + + +
- + + + Messages + 3 + + +
- + + + Calendar + + +
- + + + Settings + + +
+ -
+ + APPLICATION + ++
-
+
- + + + Projects + + +
- + + + Performance + + +
- + + + Settings + + +
+
-
-
Screen Reader
++ Drawer component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In + addition aria-modal is added since focus is kept within the drawer when opened. +
++ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding + tabIndex would be necessary. +
+Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
+ +Overlay Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the next the focusable element within the drawer. | +
| shift + tab | +Moves focus to the previous the focusable element within the drawer. | +
| escape | +Closes the dialog if closeOnEscape is true. | +
Close Button Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Closes the drawer. | +
| space | +Closes the drawer. | +
Drawer is used as a container and visibility is controlled with a binding to visible.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
+- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
@@ -31,7 +31,7 @@ export class FullScreenDoc {
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
@@ -52,6 +52,6 @@ import { ButtonModule } from 'primeng/button';
})
export class DrawerFullScreenDemo {
visible: boolean = false;
-}`,
+}`
};
}
diff --git a/apps/showcase/doc/drawer/headlessdoc.ts b/apps/showcase/doc/drawer/headlessdoc.ts
new file mode 100644
index 00000000000..276fd5ca11f
--- /dev/null
+++ b/apps/showcase/doc/drawer/headlessdoc.ts
@@ -0,0 +1,660 @@
+import { Code } from '@/domain/code';
+import { Component, ViewChild } from '@angular/core';
+import { Drawer } from 'primeng/drawer';
+
+@Component({
+ selector: 'headless-doc',
+ template: `
+ Headless mode allows you to customize the entire user interface instead of the default elements.
-
+
-
+
+ +
-
+
-
+
+ +
-
+
-
+
+ +
Drawer location is configured with the position property that can take left, right, top and bottom as a value.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
+Drawer dimension can be defined with style or class properties, this responsive example utilizes Tailwind.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-sidebar | +Container element | +
| p-sidebar-left | +Container element of left sidebar. | +
| p-sidebar-right | +Container element of right sidebar. | +
| p-sidebar-top | +Container element of top sidebar. | +
| p-sidebar-bottom | +Container element of bottom sidebar. | +
| p-sidebar-full | +Container element of a full screen sidebar. | +
| p-sidebar-active | +Container element when sidebar is visible. | +
| p-sidebar-close | +Close anchor element. | +
| p-sidebar-sm | +Small sized sidebar. | +
| p-sidebar-md | +Medium sized sidebar. | +
| p-sidebar-lg | +Large sized sidebar. | +
| p-sidebar-mask | +Modal layer of the sidebar. | +
Drawer is customizable by header, content, footer templates.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +
+- Most of the time, requirement is returning a value from the dialog. DialogRef's close method is used for this purpose where - the parameter passed will be available at the onClose event at the caller. Here is an example on how to close the - dialog from the ProductListDemo by passing a selected product. + Most of the time, requirement is returning a value from the dialog. DialogRef's close method is used for this purpose where the parameter passed will be available at the onClose event at the caller. Here is an example on how to + close the dialog from the ProductListDemo by passing a selected product.
- DynamicDialog uses the Dialog component internally, visit dialog for more information about - the available props. -
+DynamicDialog uses the Dialog component internally, visit dialog for more information about the available props.
- Dynamic dialogs require an instance of a DialogService that is responsible for displaying a dialog with a component - as its content. Calling open method of DialogService will display dynamic dialog. First parameter of - open method is the type of component to load and the second parameter is the configuration of the Dialog such as - header, width and more. + Dynamic dialogs require an instance of a DialogService that is responsible for displaying a dialog with a component as its content. Calling open method of DialogService will display dynamic dialog. First parameter + of open method is the type of component to load and the second parameter is the configuration of the Dialog such as header, width and more.
- The open method of the DialogService is used to open a Dialog. First parameter is the component to load and - second one is the configuration object to customize the Dialog. -
+The open method of the DialogService is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.
+ In case you need to pass data to the component that is dynamically loaded, use the data property that can be access using the DynamicDialogConfig class. In additon, the loaded component can also control the Dialog using the + DynamicDialogRef API. Both the DynamicDialogConfig and DynamicDialogRef are injectable using the constructor. +
+
+
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-dialog | +Container element | +
| p-dynamicdialog | +Container element | +
| p-dialog-titlebar | +Container of header. | +
| p-dialog-title | +Header element. | +
| p-dialog-titlebar-icon | +Icon container inside header. | +
| p-dialog-titlebar-close | +Close icon element. | +
| p-dialog-content | +Content element. | +
| p-dialog-footer | +Footer element. | +
To use dynamic dialog, a reference should be declared as DynamicDialogRef after the DialogService injected into the component.
++ Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for + dropdowns in the toolbar that may be overcome with a custom toolbar. +
+A model can be bound using the standard ngModel directive.
+- Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer - to Quill documentation for available controls. -
+Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to Quill documentation for available controls.
Editor uses Quill editor underneath so it needs to be installed as a dependency.
Editor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+When readonly is present, the value cannot be edited.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-editor-container | +Container element | +
| p-editor-toolbar | +Toolbar of the editor | +
| p-editor-content | +Editable area | +
Screen Reader
++ Fieldset component uses the semantic fieldset element. When toggleable option is enabled, a clickable element with button role is included inside the legend element, this button has aria-controls to define + the id of the content section along with aria-expanded for the visibility state. The value to read the button defaults to the value of the legend property and can be customized by defining an aria-label or + aria-labelledby via the toggleButtonProps property. +
+The content uses region, defines an id that matches the aria-controls of the content toggle button and aria-labelledby referring to the id of the header.
+Content Toggle Button Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the next the focusable element in the page tab sequence. | +
| shift + tab | +Moves focus to the previous the focusable element in the page tab sequence. | +
| enter | +Toggles the visibility of the content. | +
| space | +Toggles the visibility of the content. | +
PrimeIcons is available at npm, run the following command to download it to your project.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-fieldset | +Fieldset element | +
| p-fieldset-toggleable | +Toggleable fieldset element | +
| p-fieldset-legend | +Legend element. | +
| p-fieldset-content | +Content element. | +
Header section can also be defined with custom content instead of primitive values.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+Content of the fieldset can be expanded and collapsed using toggleable option, default state is defined with collapsed option.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+Screen Reader
+FileUpload uses a hidden native input element with type="file" for screen readers.
+Keyboard Support
+Interactive elements of the uploader are buttons, visit the Button accessibility section for more information.
+FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
+-
+
- {{ file.name }} - {{ file.size }} bytes +
-
+
- {{ file.name }} - {{ file.size }} bytes +
-
+
- {{ file.name }} - {{ file.size }} bytes +
FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.
+FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-fileupload | +Container element | +
| p-fileupload-buttonbar | +Header containing the buttons | +
| p-fileupload-content | +Content section | +
+ Uploader UI is customizable using a ng-template called file that gets the File instance as the implicit variable. Second ng-template named content can be used to place custom + content inside the content section which would be useful to implement a user interface to manage the uploaded files such as removing them. This template gets the selected files as the implicit variable. Third and final ng-template + option is toolbar to display custom content at toolbar. +
Pending
+Completed
+Drag and drop files to here to upload.
+Pending
+Completed
+Drag and drop files to here to upload.
+Pending
+Completed
+Drag and drop files to here to upload.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Parameters | +Description | +
|---|---|---|
| filter | +
+ value[]: An array of values to filter + fields[]: An array of properties in the value object + filterValue: Filter value + filterMatchMode: Constraint + filterLocale: Locale to use in filtering + |
+ Whether the property values of the given value collection matches the filter. | +
| filters | +- | +Property to access constraints collection. | +
| register | +
+ name: string + fn: Filter callback + |
+ Registers a new constraint in filters. | +
FilterService can be extended by adding new constraints using the register function.
- A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column - filter. -
+A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.
FilterService needs to be injected into your component. Filters are accessed with FilterService.filters.
+Screen Reader
+FloatLabel does not require any roles and attributes.
+ +Keyboard Support
+Component does not include any interactive elements.
+FloatLabel is used by wrapping the input and its label.
+When the form element is invalid, the label is also highlighted.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-float-label | +Float label element. | +
- The variant property defines the position of the label. Default value is over, whereas in and - on are the alternatives. -
+The variant property defines the position of the label. Default value is over, whereas in and on are the alternatives.
Screen Reader
+Fluid does not require any roles and attributes.
+ +Keyboard Support
+Component does not include any interactive elements.
++ Components with the fluid option like InputText have the ability to span the full width of their component. Enabling the fluid for each component individually may be cumbersome so wrap the content with + Fluid to instead for an easier alternative. +
+Any component that has the fluid property can be nested inside the Fluid component. The fluid property of a child component has higher precedence than the fluid container as shown in the last sample.
+FocusTrap is applied to a container element with the pFocusTrap directive.
+Screen Reader
++ Galleria uses region role and since any attribute is passed to the main container element, attributes such as aria-label and aria-roledescription can be used as well. The slides container has + aria-live attribute set as "polite" if galleria is not in autoplay mode, otherwise "off" would be the value in autoplay. +
++ A slide has a group role with an aria-label that refers to the aria.slideNumber property of the locale API. Similarly aria.slide is used as the aria-roledescription of the + item. Inactive slides are hidden from the readers with aria-hidden. +
++ Next and Previous navigators are button elements with aria-label attributes referring to the aria.nextPageLabel and aria.firstPageLabel properties of the locale API by default + respectively, you may still use your own aria roles and attributes as any valid attribute is passed to the button elements implicitly by using nextButtonProps and prevButtonProps. +
++ Quick navigation elements and thumnbails follow the tab pattern. They are placed inside an element with a tablist role whereas each item has a tab role with aria-selected and aria-controls attributes. The + aria-label attribute of a quick navigation item refers to the aria.pageLabel of the locale API. Current page is marked with aria-current. +
+In full screen mode, modal element uses dialog role with aria-modal enabled. The close button retrieves aria-label from the aria.close property of the locale API.
+ +Next/Prev Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus through interactive elements in the carousel. | +
| enter | +Activates navigation. | +
| space | +Activates navigation. | +
Quick Navigation Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus through the active slide link. | +
| enter | +Activates the focused slide link. | +
| space | +Activates the focused slide link. | +
| right arrow | +Moves focus to the next slide link. | +
| left arrow | +Moves focus to the previous slide link. | +
| home | +Moves focus to the first slide link. | +
| end | +Moves focus to the last slide link. | +
Galleria can be extended further to implement complex requirements.
+A slideshow implementation is defined by adding circular and autoPlay properties.
Galleria requires a value as a collection of images, item template for the higher resolution image and thumbnail template to display as a thumbnail.
+Description of an image is specified with the caption template.
Galleria can be controlled programmatically using the activeIndex property.
+- Indicators are displayed at the bottom by enabling showIndicators property and interacted with the click event by - default. -
+Indicators are displayed at the bottom by enabling showIndicators property and interacted with the click event by default.
Indicators can be activated on hover instead of click if changeItemOnIndicatorHover is added.
- Indicators can be placed at four different sides using the indicatorsPosition property. In addition, enabling - showIndicatorsOnItem moves the indicators inside the image section. indicatorsPosition set to bottom by - default, accepted values are top, left, right, and bottom. + Indicators can be placed at four different sides using the indicatorsPosition property. In addition, enabling showIndicatorsOnItem moves the indicators inside the image section. indicatorsPosition set to + bottom by default, accepted values are top, left, right, and bottom.
Indicator content can be customized with the indicator template.
+Navigators are displayed on hover only if showItemNavigatorsOnHover is enabled.
Add showItemNavigators to display navigator elements and the left and right side.
Simple example with indicators only.
Galleria responsiveness is defined with the responsiveOptions property.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-galleria | +Container element. | +
| p-galleria-header | +Header section. | +
| p-galleria-footer | +Footer section. | +
| p-galleria-item-wrapper | +Preview content element. It contains preview and indicator containers. | +
| p-galleria-item-container | +Container of the preview content. It contains navigation buttons, preview item and caption content. | +
| p-galleria-indicators | +Container of the indicators. It contains indicator items. | +
| p-galleria-thumbnail-wrapper | +Thumbnail content element. | +
| p-galleria-thumbnail-container | +Container of the thumbnail content. It contains navigation buttons and thumbnail items. | +
| p-galleria-caption | +Content of the preview caption. | +
Colors on a web page should aim a contrast ratio of at least 4.5:1 and consider a selection of colors that do not cause vibration.
+Good Contrast
+Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.
+ +Vibration
+Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.
+ +Dark Mode
+Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.
+ ++ Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used + with space key as well to trigger. +
+On the other hand, a fancy css based button using a div has no keyboard or screen reader support.
++ tabindex is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form + controls should be preferred. +
+Relations
+Form components must be related to another element that describes what the form element is used for. This is usually achieved with the label element.
++ According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial + to ensure content can be consumed by anyone. +
+ +Disabilities
+Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories;
+ +Visual Impairments
++ Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page + developers are required to make sure content is readable by the readers. Popular readers are + NVDA, JAWS and + ChromeVox. +
+ +Hearing Impairments
++ Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is + providing textual alternatives, transcripts and captions for content with audio. +
+ +Mobility Impairments
++ People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a + trackpad remain as solutions for people who are not able to utilize a mouse. +
+ +Cognitive Impairments
++ Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive + impairments result in better design for any user. +
++ HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular + div elements with classes are used. Consider the following example that do not mean too much for readers. +
+Same layout can be achieved using the semantic elements with screen reader support built-in.
+Header
++ ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as + a datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeNG. These types of components must + provide keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized. +
++ ARIA consists of roles, properties and attributes. Roles define what the element is mainly used for e.g. checkbox, dialog, tablist whereas States and Properties define the metadata of the + element like aria-checked, aria-disabled. +
+Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.
++ A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot + be read by a reader. +
++ One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of + aria-labelledby as a replacement of the label tag with for. +
++ However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the + usage of + p-sr-only + that hides the elements from the user but not from the screen reader. +
+A working sample is the PrimeNG checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.
++ WCAG refers to Web Content Accessibility Guideline, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide + Web Consortium). WCAG consists of recommendations for making the web content more accessible. PrimeNG components aim high level of WCAG compliancy in the near future. +
++ Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are Section 508 in the US and + Web Accessibility Directive of the European Union. +
+Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.
+Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primeNG coming after the normalized layer.
++ Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeNG because global styles with a broader scope e.g. button { } and no layer + always override the PrimeNG components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best + practice is wrapping your CSS in a layer like reset and make sure primeNG comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeNG components. +
++ The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at + MDN to begin with. PrimeNG wraps the built-in style classes under the primeng cascade layer to make the library styles easy to override. CSS in your app + without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written. +
++ For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without + the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeNG with a more straightforward class name such as my-inputswitch. + Another advantage of this approach is that it does not force you to figure out the built-in class names of the components. +
++ Tailwind CSS includes a reset utility in base called + preflight. If you are using this feature, wrap the base and utilities in separate layers and make sure primeNG layer comes after the base. +
+Configuration
++ The PrimeNGConfig has been replaced by PrimeNG and the initial configuration is now done via the providePrimeNG provider during startup. See the installation section for an + example. +
+ +SASS Themes
++ The styled mode theming has been reimplemented from scratch based on an all-new architecture. The theme.css and the primeng/resources do not exist anymore, so any imports of these assets needs to be removed. If you had a + custom theme for v17, the theme needs to be recreated using the new APIs. See the customization section at styled mode for details. +
+Removed Components
+-
+
- TriStateCheckbox | Use Checkbox with indeterminate option. +
- DataViewLayoutOptions | Use SelectButton instead. +
- pAnimate | Use pAnimateOnScroll instead. +
Removed Files
+Messages and Message
++ Messages component is deprecated due to unnecessary role of being just a wrapper around multiple message instances and it's replaced with the new Message. Instead of message, users now need to loop through + their custom array to display multiple messages to achieve same behavior. The spacing, closable and life properties of the Message have breaking changes to provide Message functionality. Default margin is removed, + closable is false by default and messages do not disappear automatically. +
+Message Interface
+Message interface in primeng/api is renamed as ToastMessageOptions due to name collision with the Message component.
+Removed Features
+-
+
- Sidebar/Drawer size property is removed, use a responsive class utilty as replacement, demos have new examples. +
Removed Style Classes
+-
+
- .p-link, use a button in link mode. +
- .p-highlight, each component have its own class such as .p-select-option-selected. +
- .p-fluid, use the new built-in fluid property of the supported components or the Fluid component. +
Premium Templates
+Application templates like Apollo do not support PrimeNG v18 yet, all templates will be updated to PrimeNG v18 by the end of the 2024.
+Deprecated Components
Components that are deprecated since their functionality is provided by other components.
-
-
- - Chips | Use AutoComplete with multiple enabled and - typeahead disabled. - +
- Chips | Use AutoComplete with multiple enabled and typeahead disabled.
- TabMenu | Use Tabs without panels.
- Steps | Use Stepper without panels.
- InlineMessage | Use Message component. @@ -19,6 +16,6 @@ import { Component } from '@angular/core';
- Messages | Use with the new Message component.
+ At PrimeTek, we have been developing UI component libraries since 2008. The web continues to undergo technological advancements, and as a result, we have to modernize and update our libraries to stay relevant. PrimeNG v18 is the + next-generation version that fully embraces modern Web APIs and removes technical debt like the legacy-styled mode. Every component has been reviewed and enhanced. +
++ The most notable feature is the new styled mode implementation. Previous iterations use SASS at an external repo called PrimeNG-sass-theme which requires compilation of a theme.cssa + file. This file had to be included in the application and need to be swapped at runtime for basic tasks like dark mode or primary color changes. In v18, styled mode is now part of the core, SASS is not used at all, and a new design + token based architecture that fully utilizes CSS variables has been created. The new API is modern and superior to the legacy styled mode. +
++ Names of some of the components have been changed to more common alternatives for example, Popover replaced OverlayPanel and InputSwitch is now called ToggleSwitch. Each component has been reviewed for a + consistent naming between CSS class names and sections. An example would be the option element of a Select component that uses p-select-option for the class name. +
++ Components have been utilized more within other components, for instance Dialog close button is not actually a PrimeNG button so that closeButtonProps can be used to enable the features of button like outlined, raised and more. +
+Renamed Components
-- Old names are deprecated but still functional, migrate to new import paths instead e.g. primeng/datepicker becomes - primeng/datepicker. -
+Old names are deprecated but still functional, migrate to new import paths instead e.g. primeng/calendar becomes primeng/datepicker.
- Calendar -> DatePicker.
- Dropdown -> Select. @@ -17,6 +14,6 @@ import { Component } from '@angular/core';
- Sidebar -> Drawer.
+ The primeclt is a command line utility by PrimeTek to assist project setup and migration. The pf2tw command is created for smooth + migration between PrimeFlex to Tailwind CSS. For flawless migration, it is highly suggested to use PrimeNG v18 as the requirement of the tailwindcss plugin. +
+Install PrimeCLT.
+Run the pf2wt in a directory that contains files to be migrated.
+There are a couple of utility classes that are not migrated as they have no counterparts, use flexbox utilities instead as replacements.
+-
+
- formgrid +
- formgroup +
- formgroup-inline +
- col +
- col-fixed +
- field +
- field-checkbox +
- field-radiobutton +
- reset +
+ PrimeFlex is designed to be a lightweight CSS utility to accompany Prime UI libraries. As part of our product roadmap planning at PrimeTek, the team has decided to avoid the maintenance of a CSS + library and utilize the resources on improving the UI libraries instead. Community feedback has been essential in this decision as well since majority of the applications have their own CSS utilities whether it is Tailwind, Bootstrap + or an in-house one, as a result adding PrimeFlex to a project was causing overlapping functionality. +
++ Tailwind CSS in particular is a popular choice, we have even built the whole showcase with Tailwind CSS. Website templating demos have been migrated from PrimeFlex to Tailwind and a converter tool called pf2tw has been created. + In summary, PrimeTek officially suggests Tailwind CSS as the replacement for PrimeFlex. +
+Screen Reader
+IconField and InputIcon does not require any roles and attributes.
+ +Keyboard Support
+Components does not include any interactive elements.
++ A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property + that the default value is right and also left option is available. +
+FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
+IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
++ A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property + that the default value is right and also left option is available. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-icon-field | +Container of element. | +
| p-icon-field-right | +Right input icon element. | +
| p-icon-field-left | +Left input icon element. | +
| p-input-icon | +Container of input icon. | +
An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.
+PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element such as i or span
+Icon color is defined with the color property which is inherited from parent by default.
+PrimeIcons is available at npm, run the following command to download it to your project.
++ PrimeIcons library is now available on + Figma Community. By adding them as a library, you can easily use these icons in your designs. +
+CSS file of the icon library needs to be imported in styles.scss of your application.
++ Here is the full list of PrimeIcons. More icons will be added periodically and you may also + request new icons at the issue tracker. +
+Size of an icon is controlled with the font-size property of the element.
+Screen Reader
+IftaLabel does not require any roles and attributes.
+ +Keyboard Support
+Component does not include any interactive elements.
+IftaLabel is used by wrapping the input and its label.
+When the form element is invalid, the label is also highlighted.
+Screen Reader
+Inplace component defines aria-live as "polite" by default, since any valid attribute is passed to the main container aria roles and attributes of the root element can be customized easily.
++ Display element uses button role in view mode by default, displayProps can be used for customizations like adding aria-label or aria-labelledby attributes to describe the content of the view mode or even + overriding the default role. +
++ Closable inplace components displays a button with an aria-label that refers to the aria.close property of the locale API by default, you may usecloseButtonProps to customize + the element and override the default aria-label. +
+View Mode Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Switches to content. | +
Close Button Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Switches to display. | +
| space | +Switches to display. | +
Inplace component requires display and content templates to define the content of each state.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Any content such as an image can be placed inside an Inplace.
+
+
+
+ + Inplace can be used within a form to display a value as read only before making it editable. The + closable property adds a close button next to the content to switch back to read only mode. +
+Using the onActivate event, data can be loaded in a lazy manner before displaying it in a table.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-inplace | +Container element | +
| p-inplace-display | +Display container | +
| p-inplace-content | +Content container | +
Screen Reader
+InputGroup and InputGroupAddon does not require any roles and attributes.
+ +Keyboard Support
+Component does not include any interactive elements.
+A group is created by wrapping the input and add-ons with the p-inputgroup component. Each add-on element is defined as a child of p-inputgroup-addon component.
+Buttons can be placed at either side of an input element.
+Checkbox and RadioButton components can be combined with an input element under the same group.
++ FloatLabel visually integrates a label with its form element. Visit + FloatLabel documentation for more information. +
+IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+Multiple add-ons can be placed inside the same group.
+Screen Reader
++ InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy, + ariaLabel props. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the input. | +
InputMask is used as a controlled input with ngModel properties.
+When disabled is present, the element cannot be edited and focused.
+Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
+IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
++ Mask format can be a combination of the following definitions; a for alphabetic characters, 9 for numeric characters and * for alphanumberic characters. In addition, formatting characters like ( , + ) , - are also accepted. +
+- When the input does not complete the mask definition, it is cleared by default. Use autoClear property to control - this behavior. In addition, ? is used to mark anything after the question mark optional. -
+When the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, ? is used to mark anything after the question mark optional.
InputMask can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+InputMask provides small and large sizes as alternatives to the base.
+Styling is same as inputtext component, for theming classes visit theming page.
+Screen Reader
++ Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy, ariaLabel props. The input element uses spinbutton role in addition to the + aria-valuemin, aria-valuemax and aria-valuenow attributes. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the input. | +
| + up arrow + | +Increments the value. | +
| + down arrow + | +Decrements the value. | +
| + home + | +Set the minimum value if provided. | +
| + end + | +Set the maximum value if provided. | +
- Spinner buttons are enabled using the showButtons options and layout is defined with the buttonLayout. Default - value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up and down - arrow keys can be used to spin the values with keyboard. + Spinner buttons are enabled using the showButtons options and layout is defined with the buttonLayout. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, + up and down arrow keys can be used to spin the values with keyboard.
When disabled is present, the element cannot be edited and focused.
+Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
++ A floating label appears on top of the input field when focused. Visit + FloatLabel documentation for more information. +
+IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale.
+- Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties. -
+Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.
Enable the mask option to hide the values in the input fields.
+Please enter the code sent to your phone.
InputOtp provides small and large sizes as alternatives to the base.
+Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.
+Screen Reader
++ InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, + aria-label props. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the input. | +
InputText is used as a controlled input with ngModel property.
+When disabled is present, the element cannot be edited and focused.
+Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
++ FloatLabel visually integrates a label with its form element. Visit + FloatLabel documentation for more information. +
++ Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either + .p-input-icon-left or p-input-icon-right class. +
+IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
+InputText can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+InputText provides small and large sizes as alternatives to the standard.
+| Name | +Element | +
|---|---|
| p-inputtext | +Input element | +
PrimeNG is available for download on the npm registry.
+An example starter with Angular CLI is available at GitHub.
+Welcome to the Prime UI Ecosystem! Once you have PrimeNG up and running, we recommend exploring the following resources to gain a deeper understanding of the library.
+ +Add providePrimeNG and provideAnimationsAsync to the list of providers in your app.config.ts.
+Configure PrimeNG to use a theme like Aura.
+- Verify your setup by adding a component such as Button. Each component can be imported and registered individually so that - you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding - component. + Verify your setup by adding a component such as Button. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the + corresponding component.
Refer to InputText for accessibility as KeyFilter is a built-in add-on of the InputText.
+KeyFilter provides various presets configured with the pKeyFilter property.
+KeyFilter can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+Screen Reader
++ Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and + ariaLabel props. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the slider. | +
| + + left arrow + down arrow + + | +Decrements the value. | +
| + + right arrow + up arrow + + | +Increments the value. | +
| + home + | +Set the minimum value. | +
| + end + | +Set the maximum value. | +
| + page up + | +Increments the value by 10 steps. | +
| + page down + | +Decrements the value by 10 steps. | +
Knob is an input component and used with the standard ngModel directive.
+Colors are customized with the textColor, rangeColor and valueColor properties.
+When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
+Boundaries are configured with the min and max properties whose defaults are 0 and 100 respectively.
+Knob can be controlled with custom controls as well.
+Knob can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+When readonly present, value cannot be edited.
+Diameter of the knob is defined in pixels using the size property.
+Size of each movement is defined with the step property.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-knob | +Container element. | +
| p-knob-text | +Text element. | +
| p-knob-value | +Value element. | +
Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder .
+Screen Reader
++ Value to describe the component can be provided ariaLabelledBy or ariaLabel props. The list element has a listbox role with the aria-multiselectable attribute that sets to true when multiple selection is + enabled. Each list item has an option role with aria-selected and aria-disabled as their attributes. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the first selected option, if there is none then first option receives the focus. | +
| + up arrow + | +Moves focus to the previous option. | +
| + down arrow + | +Moves focus to the next option. | +
| + enter + | +Toggles the selected state of the focused option. | +
| + space + | +Toggles the selected state of the focused option. | +
| + home + | +Moves focus to the first option. | +
| + end + | +Moves focus to the last option. | +
| shift + down arrow | +Moves focus to the next option and toggles the selection state. | +
| shift + up arrow | +Moves focus to the previous option and toggles the selection state. | +
| shift + space | +Selects the items between the most recently selected option and the focused option. | +
| control + shift + home | +Selects the focused options and all the options up to the first one. | +
| control + shift + end | +Selects the focused options and all the options down to the last one. | +
| control + a | +Selects all options. | +
+ Listbox is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. + Default property name for the optionLabel is label and value for the optionValue. If optionValue is omitted and the object has no value property, the object itself becomes the value of an + option. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary. +
+An alternative way to highlight the selected option is displaying a checkmark instead.
+When disabled is present, the element cannot be edited and focused.
+ListBox provides built-in filtering that is enabled by adding the filter property.
+Options can be grouped when a nested data structures is provided.
+
+ {{ group.label }}
+
+ {{ group.label }}
+
+ {{ group.label }}
+ Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
++ ListBox allows choosing a single item by default, enable multiple property to choose more than one. When the optional metaKeySelection is present, behavior is changed in a way that selecting a new item requires meta key + to be present. +
+Listbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-listbox | +Container element. | +
| p-listbox-list | +List container. | +
| p-listbox-item | +An item in the list. | +
| p-listbox-header | +Header element. | +
| p-listbox-filter-container | +Container of filter input in header. | +
Custom content for an option is displayed with the pTemplate property that takes an option as a parameter.
+
+
+
+ + VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance + issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. +
+Screen Reader
++ MegaMenu component uses the menubar role along with aria-orientation and the value to describe the component can either be provided with aria-labelledby or aria-label props. Each list item has a + presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a MegaMenu uses the + menu role with an aria-labelledby defined as the id of the submenu root menuitem label. In addition, root menuitems that open a submenu have aria-haspopup, aria-expanded and aria-controls to define + the relation between the item and the submenu. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
| shift + tab | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
| enter | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
| space | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
| escape | +If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. | +
| down arrow | +If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu. | +
| up arrow | +If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu. | +
| right arrow | +If focus is on a root element, moves focus to the next menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the next menu group. | +
| left arrow | +If focus is on a root element, moves focus to the previous menuitem. If the focus in inside a submenu, moves focus to the first menuitem of the previous menu group. | +
| home | +Moves focus to the first menuitem within the submenu. | +
| end | +Moves focus to the last menuitem within the submenu. | +
MegaMenu requires a collection of menuitems as its model.
+The command property of a menuitem defines the callback to run when an item is activated by click or a key event.
+Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-megamenu | +Container element. | +
| p-menu-list | +List element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-submenu-icon | +Arrow icon of a submenu. | +
Custom content can be placed between p-megamenu tags. Megamenu should be horizontal for custom content.
+Layout of the MegaMenu is changed with the orientation property that accepts horizontal and vertical as options.
+Screen Reader
++ Menu component uses the menu role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a + menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a Menu uses the group role with an aria-labelledby defined as the + id of the submenu root menuitem label. +
+In popup mode, the component implicitly manages the aria-expanded, aria-haspopup and aria-controls attributes of the target element to define the relation between the target and the popup.
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
| shift + tab | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
| enter | +Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. | +
| space | +Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. | +
| escape | +If menu is in overlay mode, popup gets closes and focus moves to target. | +
| down arrow | +Moves focus to the next menuitem. | +
| up arrow | +Moves focus to the previous menuitem. | +
| home | +Moves focus to the first menuitem. | +
| end | +Moves focus to the last menuitem. | +
Menu requires a collection of menuitems as its model.
+The function to invoke when an item is clicked is defined using the command property.
+Menu supports one level of nesting by defining children with items property.
+Popup mode is enabled by setting popup property to true and calling toggle method with an event of the target.
++ Navigation is specified using url property for external links and with routerLink for internal ones. If a menuitem has an active route, p-menuitem-link-active style class is added as an indicator. Active route link can + be configured with routerLinkActiveOptions property of MenuItem API. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-menu | +Container element. | +
| p-menu-list | +List element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
+ Menu offers item customization with the item template that receives the menuitem instance from the model as a parameter. The submenu header has its own submenuheader template, additional slots named start and + end are provided to embed content before or after the menu. +
+Screen Reader
++ Menubar component uses the menubar role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements + have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a MenuBar uses the menu role with an + aria-labelledby defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have aria-haspopup, aria-expanded and aria-controls to define the relation between the item + and the submenu. +
++ In mobile viewports, a menu icon appears with a button role along with aria-haspopup, aria-expanded and aria-controls to manage the relation between the overlay menubar and the button. The value to describe + the button can be defined aria-label or aria-labelledby specified using buttonProps, by default navigation key of the aria property from the locale API as the + aria-label. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. | +
| shift + tab | +Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. | +
| enter | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
| space | +If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays. | +
| escape | +If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu. | +
| down arrow | +If focus is on a root element, open a submenu and moves focus to the first element in the submenu otherwise moves focus to the next menuitem within the submenu. | +
| up arrow | +If focus is on a root element, opens a submenu and moves focus to the last element in the submenu otherwise moves focus to the previous menuitem within the submenu. | +
| right arrow | +If focus is on a root element, moves focus to the next menuitem otherwise opens a submenu if there is one available and moves focus to the first item. | +
| left arrow | +If focus is on a root element, moves focus to the previous menuitem otherwise closes a submenu and moves focus to the root item of the closed submenu. | +
| home | +Moves focus to the first menuitem within the submenu. | +
| end | +Moves focus to the last menuitem within the submenu. | +
Menubar requires nested menuitems as its model.
+The command property defines the callback to run when an item is activated by click or a key event.
+Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-menubar | +Container element. | +
| p-menu-list | +List element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-submenu-icon | +Arrow icon of a submenu. | +
Custom content can be placed inside the menubar using the start and end templates.
+Screen Reader
++ Message component uses alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Since any attribute is passed to the root element, attributes like aria-labelledby and + aria-label can optionally be used as well. +
+Close element is a button with an aria-label that refers to the aria.close property of the locale API by default.
+ +Close Button Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Closes the message. | +
| space | +Closes the message. | +
Message component requires a content to display.
+Multiple messages can be displayed using the standard for block.
+Validation errors in a form are displayed with the error severity.
+The severity option specifies the type of the message.
+Messages can disappear automatically by defined the life in milliseconds.
+Configure the variant value as outlined for messages with borders and no background.
+The severity option specifies the type of the message.
+Message provides small and large sizes as alternatives to the base.
+Screen Reader
+MeterGroup component uses meter role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby prop.
+ +Keyboard Support
+Component does not include any interactive elements.
+MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem.
+Icons can be displayed next to the labels instead of the default marker.
++ The position of the labels relative to the meters is defined using the labelPosition property. The default orientation of the labels is horizontal, and the vertical alternative is available through the + labelOrientation option. +
+Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively.
+Adding more items to the array displays the meters in a group.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-metergroup | +Container element. | +
| p-metergroup-horizontal | +Container element when orientation mode is horizontal. | +
| p-metergroup-vertical | +Container element when orientation mode is vertical. | +
| p-metergroup-meter-container | +Container of the meters. | +
| p-metergroup-meter | +Content of a meter. | +
| p-metergroup-label-list | +Container element of the list of labels. | +
| p-metergroup-label-list-start | +Container element when label position is start. | +
| p-metergroup-label-list-end | +Container element when label position is end. | +
| p-metergroup-label-list-horizontal | +Container element when label orientation is horizontal. | +
| p-metergroup-label-list-vertical | +Container element when label orientation is vertical. | +
| p-metergroup-label-list-item | +Container element of a list item. | +
| p-metergroup-label-list-type | +Container element of a list type. | +
| p-metergroup-label | +Content of a label. | +
MeterGroup provides templating support for labels, meter items, and content around the meters.
+Layout of the MeterGroup is configured with the orientation property that accepts either horizontal or vertical as available options.
+Screen Reader
++ Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The multiselect component has a combobox role in addition to aria-haspopup and aria-expanded attributes. + The relation between the combobox and the popup is created with aria-controls attribute that refers to the id of the popup listbox. +
+The popup listbox uses listbox as the role with aria-multiselectable enabled. Each list item has an option role along with aria-label, aria-selected and aria-disabled attributes.
+ ++ Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the selectAll and unselectAll keys of the aria property from + the locale API. +
+ +If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element.
+ +Close button uses close key of the aria property from the locale API as the aria-label by default, this can be overriden with the closeButtonProps.
+Closed State Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the multiselect element. | +
| + space + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
| + down arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
| + up arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
Popup Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus. | +
| shift + tab | +Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus. | +
| + enter + | +Toggles the selection state of the focused option. | +
| + space + | +Toggles the selection state of the focused option. | +
| + escape + | +Closes the popup, moves focus to the multiselect element. | +
| + down arrow + | +Moves focus to the next option, if there is none then visual focus does not change. | +
| + up arrow + | +Moves focus to the previous option, if there is none then visual focus does not change. | +
| + home + | +Moves focus to the first option. | +
| + end + | +Moves focus to the last option. | +
| + any printable character + | +Moves focus to the option whose label starts with the characters being typed if dropdown is not editable. | +
Toggle All Checkbox Keyboard Support
+| Key | +Function | +
|---|---|
| + space + | +Toggles the checked state. | +
| + escape + | +Closes the popup. | +
Filter Input Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Closes the popup and moves focus to the multiselect element. | +
| + escape + | +Closes the popup and moves focus to the multiselect element. | +
Close Button Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Closes the popup and moves focus to the multiselect element. | +
| + space + | +Closes the popup and moves focus to the multiselect element. | +
| + escape + | +Closes the popup and moves focus to the multiselect element. | +
+ MultiSelect is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. + Default property name for the optionLabel is label and value for the optionValue. If optionValue is omitted and the object has no value property, the object itself becomes the value of an + option. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary. +
+- Selected values are displayed as a comma separated list by default, setting display as chip displays them as - chips. -
+Selected values are displayed as a comma separated list by default, setting display as chip displays them as chips.
When disabled is present, the element cannot be edited and focused.
+Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+MultiSelect provides built-in filtering that is enabled by adding the filter property.
++ A floating label appears on top of the input field when focused. Visit + FloatLabel documentation for more information. +
+Options can be grouped when a nested data structures is provided.
+
+ {{ group.label }}
+
+ {{ group.label }}
+
+ {{ group.label }}
+ IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+Loading state can be used loading property.
+MultiSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+MultiSelect provides small and large sizes as alternatives to the base.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-multiselect | +Container element. | +
| p-multiselect-label-container | +Container of the label to display selected items. | +
| p-multiselect-label | +Label to display selected items. | +
| p-multiselect-trigger | +Dropdown button. | +
| p-multiselect-filter-container | +Container of filter input. | +
| p-multiselect-panel | +Overlay panel for items. | +
| p-multiselect-items | +List container of items. | +
| p-multiselect-item | +An item in the list. | +
| p-multiselect-open | +Container element when overlay is visible. | +
Available options and the selected options support templating with pTemplate properties respectively. In addition, header, footer and filter sections can be templated as well.
+
+
+
+ + VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance + issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. +
+Screen Reader
++ Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with + the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes. +
++ Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo, + aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps, + moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. +
+ +OrderList Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the first selected option, if there is none then first option receives the focus. | +
| up arrow | +Moves focus to the previous option. | +
| down arrow | +Moves focus to the next option. | +
| enter | +Toggles the selected state of the focused option. | +
| space | +Toggles the selected state of the focused option. | +
| home | +Moves focus to the first option. | +
| end | +Moves focus to the last option. | +
| shift + down arrow | +Moves focus to the next option and toggles the selection state. | +
| shift + up arrow | +Moves focus to the previous option and toggles the selection state. | +
| shift + space | +Selects the items between the most recently selected option and the focused option. | +
| control + shift + home | +Selects the focused options and all the options up to the first one. | +
| control + shift + end | +Selects the focused options and all the options down to the first one. | +
| control + a | +Selects all options. | +
Buttons Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Executes button action. | +
| space | +Executes button action. | +
OrderList is used as a controlled input with value properties. Content of a list item needs to be defined with the pTemplate property that receives an object in the list as parameter.
+Items can be reordered using drag and drop by enabling dragdrop property. Depends on @angular/cdk package.
+
+
+
+ Filter value is checked against the property of an object configured with the filterBy property
+
+
+
+ + Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-orderlist | +Container element. | +
| p-orderlist-list | +List container. | +
| p-orderlist-item | +An item in the list. | +
For custom content support define an option template that gets the item instance as a parameter. In addition header template is provided for further customization.
+
+
+
+ Screen Reader
++ Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of + reader support in the upcoming versions. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus through the focusable elements within the chart. | +
| enter | +Toggles the expanded state of a node. | +
| space | +Toggles the expanded state of a node. | +
OrganizationChart requires a collection of TreeNode instances as a value.
+- Nodes can be selected by defining selectionMode along with a value binding with selection properties. By - default only one node can be selected, set selectionMode as multiple to select more than one. + Nodes can be selected by defining selectionMode along with a value binding with selection properties. By default only one node can be selected, set selectionMode as multiple to select more than one.
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-organizationchart | +Container element. | +
| p-organizationchart-table | +Table container of a node. | +
| p-organizationchart-lines | +Connector lines container. | +
| p-organizationchart-nodes | +Contained of node children. | +
| p-organizationchart-line-right | +Right side line of a node connector. | +
| p-organizationchart-line-left | +Left side line of a node connector. | +
| p-organizationchart-line-top | +Top side line of a node connector. | +
Custom content instead of a node label is defined using the pTemplate property.
+
+
+
+ Screen Reader
++ Overlay component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition + aria-modal is added since focus is kept within the popup. +
++ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding + tabIndex would be necessary. Overlay adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined. +
+Overlay Keyboard Support
++ When the popup gets opened, the first focusable element receives the focus and this can be customized by adding + autofocus to an element within the popup. +
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the next the focusable element within the popup. | +
| shift + tab | +Moves focus to the previous the focusable element within the popup. | +
| escape | +Closes the popup and moves focus to the trigger. | +
Close Button Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Closes the popup and moves focus to the trigger. | +
| space | +Closes the popup and moves focus to the trigger. | +
Overlay can be mounted into its location, body or DOM element instance using this option.
+The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.
+The baseZIndex is base zIndex value to use in layering. Its default value is 0.
+Overlay is a container to display content in an overlay window. All the options mentioned above can be used as props for this component.
+The hideOnEscape determines to hide the overlay when escape key pressed. Accepts boolean, default value is false.
++ It has two valid values; overlay and modal. In overlay mode, a container element is opened like overlaypanel or dropdown's panel. In modal mode, the container element behaves like popup. This behaviour is similar to a + dialog component. +
+It is the option used to determine in which mode it should appear according to the given media or breakpoint.
+Valid values of the direction property would be;
+-
+
- center (default) +
- top +
- top-start +
- top-end +
- bottom +
- bottom-start +
- bottom-end +
- left +
- left-start +
- left-end +
- right +
- right-start +
- right-end +
The style and styleClass are used to define styles that will be added to all overlay components. In addition, it can be used in contentStyle and contentStyleClass classes.
+The target is used to detect the element that will be used to position the overlay. Valid values would be;
+-
+
- @prev (default) +
- @next +
- @parent +
- @grandparent +
- Use CSS selector +
- Use () => HTMLElement +
Content can be customized with the content template.
+Transition options of the show or hide animation. The default value of showTransitionOptions is '.12s cubic-bezier(0, 0, 0.2, 1)' and the default value of hideTransitionOptions is '.1s linear'.
+Screen Reader
+Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below.
++ First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel, aria.prevPageLabel, aria.nextPageLabel and aria.lastPageLabelproperties of the + locale API respectively. +
++ Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page" as + well. +
+Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state.
++ Rows per page dropdown internally uses a dropdown component, refer to the + dropdown documentation for accessibility details. Additionally, the dropdown uses an aria-labelfrom the aria.rowsPerPage property of the locale API. +
+Jump to page input is an input element with an aria-label that refers to the aria.jumpToPage property of the locale API.
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus through the paginator elements. | +
| enter | +Executes the paginator element action. | +
| space | +Executes the paginator element action. | +
Rows Per Page Dropdown Keyboard Support
+Refer to the dropdown documentation for more details about keyboard support.
++ Paginator is used as a controlled component with first, rows and onPageChange properties to manage the first index and number of records to display per page. Total number of records need to be with + totalRecords property. Default template includes a dropdown to change the rows so rowsPerPageOptions is also necessary for the dropdown options. +
+- Current page report item in the template displays information about the pagination state. Default value is ({{ - '{' - }}currentPage{{ '}' }} of {{ '{' }}totalPages{{ '}' }}) whereas available placeholders are the following; -
+Current page report item in the template displays information about the pagination state. Default value is ({{ '{' }}currentPage{{ '}' }} of {{ '{' }}totalPages{{ '}' }}) whereas available placeholders are the following;
- {{ '{' }}currentPage{{ '}' }}
- {{ '{' }}totalPages{{ '}' }} @@ -39,7 +35,7 @@ interface PageEvent { />
Sample image gallery implementation using paginator.
 % 10 }}.jpg)
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-paginator | +Container element. | +
| p-paginator-first | +First page element. | +
| p-paginator-prev | +Previous page element. | +
| p-paginator-pages | +Container of page links. | +
| p-paginator-page | +A page link. | +
| p-paginator-next | +Next page element. | +
| p-paginator-last | +Last page element. | +
| p-paginator-rpp-options | +Rows per page dropdown. | +
| p-paginator-page-options | +Jump to per page dropdown. | +
Templating allows overriding the default content of the UI elements by defining callbacks using the element name.
+Screen Reader
++ Toggleable panels use a content toggle button at the header that has aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read the button defaults to the + value of the header property and can be customized by defining an aria-label or aria-labelledby via the toggleButtonProps property. +
+The content uses region, defines an id that matches the aria-controls of the content toggle button and aria-labelledby referring to the id of the header.
+Content Toggle Button Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the next the focusable element in the page tab sequence. | +
| shift + tab | +Moves focus to the previous the focusable element in the page tab sequence. | +
| enter | +Toggles the visibility of the content. | +
| space | +Toggles the visibility of the content. | +
A simple Panel is created with a header property along with the content as children.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-panel | +Container element. | +
| p-panel-header | +Header section. | +
| p-panel-title | +Title text of panel. | +
| p-panel-header-icon | +Toggle icon. | +
| p-panel-content | +Content of panel. | +
Header and Footers sections can be customized using header and footer templates.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis + aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis + aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Content of the panel can be expanded and collapsed using toggleable option, default state is defined with collapsed option. By default, toggle icon is used to toggle the contents whereas setting toggler to "header" enables + clicking anywhere in the header to trigger a toggle. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Lorem ipsum dolor sit amet... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+Screen Reader
++ Accordion header elements have a button role, an aria-label defined using the label property of the menuitem model and aria-controls to define the id of the content section along with + aria-expanded for the visibility state. +
+The content of an accordion panel uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header.
++ The tree elements has a tree as the role and each menu item has a treeitem role along with aria-label, aria-selected and aria-expanded attributes. The container element of a treenode has the + group role. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem. +
+ +Header Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Adds focus to the first header when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. | +
| enter | +Toggles the visibility of the content. | +
| space | +Toggles the visibility of the content. | +
| down arrow | +If panel is collapsed then moves focus to the next header, otherwise first treenode of the panel receives the focus. | +
| up arrow | +If previous panel is collapsed then moves focus to the previous header, otherwise last treenode of the previous panel receives the focus. | +
| home | +Moves focus to the first header. | +
| end | +Moves focus to the last header. | +
Tree Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the next focusable element in the page tab order. | +
| shift + tab | +Moves focus to the previous focusable element in the page tab order. | +
| enter | +Activates the focused treenode. | +
| space | +Activates the focused treenode. | +
| down arrow | +Moves focus to the next treenode. | +
| up arrow | +Moves focus to the previous treenode. | +
| right arrow | +If node is closed, opens the node otherwise moves focus to the first child node. | +
| left arrow | +If node is open, closes the node otherwise moves focus to the parent node. | +
PanelMenu requires a collection of menuitems as its model.
+The command property defines the callback to run when an item is activated by click or a key event.
+Menu items can be controlled programmatically.
+Only one single root menuitem can be active by default, enable multiple property to be able to open more than one items.
+Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-panelmenu | +Container element. | +
| p-panelmenu-header | +Accordion header of root submenu. | +
| p-panelmenu-content | +Accordion content of root submenu. | +
| p-menu-list | +List element. | +
| p-menuitem | +Menuitem element. | +
| p-menuitem-text | +Label of a menuitem. | +
| p-menuitem-icon | +Icon of a menuitem. | +
| p-panelmenu-icon | +Arrow icon of an accordion header. | +
PanelMenu requires a collection of menuitems as its model.
+Screen Reader
++ Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy, ariaLabel props. Screen reader is notified about the changes to the strength of the + password using a section that has aria-live while typing. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the input. | +
| + escape + | +Hides the strength meter if open. | +
Two-way value binding is defined using ngModel.
+When disabled is present, the element cannot be edited and focused.
+Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
++ A floating label appears on top of the input field when focused. Visit + FloatLabel documentation for more information. +
+IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
++ Labels are translated at component level by promptLabel, weakLabel, mediumLabel and strongLabel properties. In order to apply global translations for all Password components in the application, refer to the + locale +
+Password can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+Password provides small and large sizes as alternatives to the base.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-password-panel | +Container of password panel | +
| p-password-meter | +Meter element of password strength | +
| p-password-info | +Text to display strength | +
3 templates are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.
+-
+
- At least one lowercase +
- At least one uppercase +
- At least one numeric +
- Minimum 8 characters +
-
+
- At least one lowercase +
- At least one uppercase +
- At least one numeric +
- Minimum 8 characters +
-
+
- At least one lowercase +
- At least one uppercase +
- At least one numeric +
- Minimum 8 characters +
Screen Reader
++ Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has + an option role with aria-selected and aria-disabled as their attributes. +
++ Controls buttons are button elements with an aria-label that refers to the aria.moveTop, aria.moveUp, aria.moveDown, aria.moveBottom,aria.moveTo, aria.moveAllTo, + aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps, moveUpButtonProps, moveDownButtonProps, + moveToButtonProps, moveAllToButtonProps, moveFromButtonProps, moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes. +
+ +PickList Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the first selected option, if there is none then first option receives the focus. | +
| up arrow | +Moves focus to the previous option. | +
| down arrow | +Moves focus to the next option. | +
| enter | +Toggles the selected state of the focused option. | +
| space | +Toggles the selected state of the focused option. | +
| home | +Moves focus to the first option. | +
| end | +Moves focus to the last option. | +
| shift + down arrow | +Moves focus to the next option and toggles the selection state. | +
| shift + up arrow | +Moves focus to the previous option and toggles the selection state. | +
| shift + space | +Selects the items between the most recently selected option and the focused option. | +
| control + shift + home | +Selects the focused options and all the options up to the first one. | +
| control + shift + end | +Selects the focused options and all the options down to the first one. | +
| control + a | +Selects all options. | +
Buttons Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Executes button action. | +
| space | +Executes button action. | +
+ PickList is used as a controlled input with source and target properties. Content of a list item needs to be defined with the pTemplate property that receives an object in the list as parameter. Drag & drop + functionality depends on @angular/cdk package. +
+Filter value is checked against the property of an object configured with the filterBy property.
+
+
+
+ + Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-picklist | +Container element. | +
| p-picklist-source-controls | +Container of source list buttons. | +
| p-picklist-target-controls | +Container of target list buttons. | +
| p-picklist-buttons | +Container of buttons. | +
| p-picklist-list | +List element. | +
| p-picklist-item | +An item in the list. | +
For custom content support define an option template that gets the item instance as a parameter. In addition sourceheader and targetheader templates are provided for further customization.
+
+
+
+ | Name | +Parameters | +
|---|---|
| item | +
+ $implicit: Data of the item + index: Index of the item + |
+
| sourceHeader | +- | +
| targetHeader | +- | +
| sourceFilter | +
+ options.filter: Callback to filter data by the value param + options.reset: Resets the filters. + |
+
| targetFilter | +
+ options.filter: Callback to filter data by the value param + options.reset: Resets the filters + |
+
| emptymessagesource | +- | +
| emptyfiltermessagesource | +- | +
| emptymessagetarget | +- | +
| emptyfiltermessagetarget | +- | +
| moveupicon | +- | +
| movetopicon | +- | +
| movedownicon | +- | +
| movebottomicon | +- | +
| movetotargeticon | +$implicit: viewChanged | +
| movealltotargeticon | +$implicit: viewChanged | +
| movetosourceicon | +$implicit: viewChanged | +
| movealltosourceicon | +$implicit: viewChanged | +
| targetfiltericon | +- | +
| sourcefiltericon | +- | +
Screen Reader
++ Popover component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition + aria-modal is added since focus is kept within the popup. +
++ It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding + tabIndex would be necessary. Popover adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined. +
+Popover Keyboard Support
++ When the popup gets opened, the first focusable element receives the focus and this can be customized by adding + autofocus to an element within the popup. +
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the next the focusable element within the popup. | +
| shift + tab | +Moves focus to the previous the focusable element within the popup. | +
| escape | +Closes the popup and moves focus to the trigger. | +
Close Button Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Closes the popup and moves focus to the trigger. | +
| space | +Closes the popup and moves focus to the trigger. | +
Popover is accessed via its reference and visibility is controlled using toggle, show and hide methods with an event of the target.
+-
+
-
+
+
+ {{ member.name }} ++{{ member.email }}++ {{ member.role }} + ++
+
-
+
-
+
+
+ {{ member.name }} ++{{ member.email }}++ {{ member.role }} + ++
+
-
+
-
+
+
+ {{ member.name }} ++{{ member.email }}++ {{ member.role }} + ++
+
Place the Popover outside of the data iteration components to avoid rendering it multiple times.
+In this sample, data is retrieved from the content inside the popover.
+-
+
-
+
+
+ {{ member.name }} ++{{ member.email }}+
+
-
+
-
+
+
+ {{ member.name }} ++{{ member.email }}+
+
-
+
-
+
+
+ {{ member.name }} ++{{ member.email }}+
+
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-popover | +Container element. | +
| p-popover-content | +Content of the panel. | +
| p-popover-close | +Close icon. | +
+ show method takes two parameters, first one is the event and it is mandatory. By default the target component to align the overlay is the event target, if you'd like to align it to another element, provide it as the second + parameter target. +
+
+
+
+ Content of the OverlayPanel is defined by content template.
+Custom Content
+Custom Content
+Custom Content
+Screen Reader
++ ProgressBar components uses progressbar role along with aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined usingaria-labelledby and + aria-label props. +
+Keyboard Support
+Not applicable.
+ProgressBar is used with the value property.
+Value is reactive so updating it dynamically changes the bar as well.
+For progresses with no value to track, set the mode property to indeterminate.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-progressbar | +Container element. | +
| p-progressbar-determinate | +Container element of a determinate progressbar. | +
| p-progressbar-indeterminate | +Container element of an indeterminate progressbar. | +
| p-progressbar-value | +Element whose width changes according to value. | +
| p-progressbar-label | +Label element that displays the current value. | +
content template allows displaying custom content inside the progressbar.
+Screen Reader
+ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.
+Keyboard Support
+Component does not include any interactive elements.
+An infinite spin animation is displayed by default.
+ProgressSpinner can be customized with styling property like styleClass, strokeWidth and fill.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-progress-spinner | +Container element. | +
| p-progress-spinner-svg | +SVG element. | +
| p-progress-spinner-circle | +Circle element. | +
Screen Reader
++ RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using + ariaLabelledBy, ariaLabel props. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus. | +
| + + left arrow + up arrow + + | +Moves focus to the previous radio button, if there is none then last radio button receives the focus. | +
| + + right arrow + down arrow + + | +Moves focus to the next radio button, if there is none then first radio button receives the focus. | +
| + space + | +If the focused radio button is unchecked, changes the state to checked. | +
When disabled is present, the element cannot be edited and focused.
+RadioButtons can be generated using a list of values.
+Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+RadioButton is used as a controlled input with value and ngModel properties.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+RadioButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+RadioButton provides small and large sizes as alternatives to the base.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-radiobutton | +Container element | +
| p-radiobutton-box | +Container of icon. | +
| p-radiobutton-icon | +Icon element. | +
| p-checkbox-label | +Label element. | +
| p-label-active | +Label element of a checked state. | +
| p-label-focus | +Label element of a focused state. | +
| p-label-disabled | +Label element of a disabled state. | +
Screen Reader
++ Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the + aria + property. +
+Keyboard Support
+Keyboard interaction is derived from the native browser handling of radio buttons in a group.
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the star representing the value, if there is none then first star receives the focus. | +
| + + left arrow + up arrow + + | +Moves focus to the previous star, if there is none then last radio button receives the focus. | +
| + + right arrow + down arrow + + | +Moves focus to the next star, if there is none then first star receives the focus. | +
| + space + | +If the focused star does not represent the value, changes the value to the star value. | +
Two-way value binding is defined using ngModel.
+When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
+Rating can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+When readOnly present, value cannot be edited.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-rating | +Container element | +
| p-rating-star | +Star element | +
| p-rating-star-on | +Selected star element. | +
| p-rating-cancel | +Cancel icon. | +
Templating allows customizing the content where the icon instance is available as the implicit variable.
+
+ 
+ 
+
+
+
+
+
+
+ Screen Reader
+Ripple element has the aria-hidden attribute as true so that it gets ignored by the screen readers.
+ +Keyboard Support
+Component does not include any interactive elements.
+Styling Demo Content.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-ripple | +Host element. | +
| p-ink | +Ripple element. | +
| p-ink-active | +Ripple element during animating. | +
Screen Reader
+VirtualScroller uses a semantic list element to list the items. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element.
+Keyboard Support
+Component does not include any built-in interactive elements.
++ VirtualScroller requires items as the data to display, itemSize for the dimensions of an item and item template are required on component. In addition, an initial array is required based on the total number of + items to display. Size of the viewport is configured using scrollWidth, scrollHeight properties directly or with CSS width and height styles. +
+Scroll delay is adjusted by using delay property.
+Scrolling can be enabled vertically and horizontally when orientation is set as both. In this mode, itemSize should be an array where first value is the height of an item and second is the width.
+Setting orientation to horizontal enables scrolling horizontally. In this case, the itemSize should refer to the width of an item.
++ Lazy mode is handy to deal with large datasets where instead of loading the entire data, small chunks of data are loaded on demand by invoking onLazyLoad callback everytime scrolling requires a new chunk. To implement lazy loading, + enable + lazy attribute, initialize your data as a placeholder with a length and finally implement a method callback using onLazyLoad that actually loads a chunk from a datasource. onLazyLoad gets an event object that contains + information about the chunk of data to load such as the index and number of items to load. Notice that a new template called loadingItem is also required to display as a placeholder while the new items are being loaded. +
+Busy state is enabled by adding showLoader property which blocks the UI with a modal by default. Alternatively, loader template can be used to customize items e.g. with Skeleton.
+Scrolling to a specific index can be done with the scrollToIndex function.
+The properties of scroller component can be used like an object in it.
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-scroller | +Container element. | +
| p-scroller-content | +Content element. | +
| p-scroller-loader | +Loader element. | +
Scroller content is customizable by using ng-template. Valid values are content, item, loader and loadericon
+Screen Reader
++ Scrollbars of the ScrollPanel has a scrollbar role along with the aria-controls attribute that refers to the id of the scrollable content container and the aria-orientation to indicate the orientation of + scrolling. +
+Header Keyboard Support
+| Key | +Function | +
|---|---|
| down arrow | +Scrolls content down when vertical scrolling is available. | +
| up arrow | +Scrolls content up when vertical scrolling is available. | +
| left | +Scrolls content left when horizontal scrolling is available. | +
| right | +Scrolls content right when horizontal scrolling is available. | +
ScrollPanel is defined using dimensions for the scrollable viewport.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ Lorem ipsum dolor sit amet... +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
++ At vero eos et accusamus et iusto odio dignissimos... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
+Scrollbar visuals can be styled for a unified look across different platforms.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
++ At vero eos et accusamus et iusto odio dignissimos... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +
++ At vero eos et accusamus et iusto odio dignissimos... +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae + dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, + sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci + velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum + deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non + provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum + fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis + est eligendi optio cumque nihil impedit quo minus. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse + cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +
++ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, + totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae + dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, + sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci + velit, sed quia non numquam eius modi. +
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum + deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non + provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum + fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis + est eligendi optio cumque nihil impedit quo minus. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-scrollpanel | +Container element. | +
| p-scrollpanel-wrapper | +Wrapper of content section. | +
| p-scrollpanel-content | +Content section. | +
| p-scrollpanel-bar | +Scrollbar handle. | +
| p-scrollpanel-bar-x | +Scrollbar handle of a horizontal bar. | +
| p-scrollpanel-bar-y | +Scrollbar handle of a vertical bar | +
Screen Reader
++ ScrollTop uses a button element with an aria-label that refers to the aria.scrollTop property of the locale API by default, you may use your own aria roles and attributes as any valid + attribute is passed to the button element implicitly. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| enter | +Scrolls to top. | +
| space | +Scrolls to top. | +
ScrollTop listens window scroll by default.
+Scroll down the page to display the ScrollTo component.
+ +Scroll down the page to display the ScrollTo component.
+ +Setting the target property to parent binds ScrollTop to its parent element that has scrolling content.
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur + adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue + mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. + Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan + in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec. +
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae et leo duis ut diam. Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur + adipiscing elit ut. Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna. Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue + mauris. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus. + Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan + in nisl nisi. Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec. +
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-scrolltop | +Container element. | +
| p-scrolltop-sticky | +Container element when attached to its parent. | +
Screen Reader
++ Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The select element has a combobox role in addition to aria-haspopup and aria-expanded attributes. If the + editable option is enabled aria-autocomplete is also added. The relation between the combobox and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which + option to read during keyboard navigation within the popup list. +
++ The popup list has an id that refers to the aria-controls attribute of the combobox element and uses listbox as the role. Each list item has an option role, an id to match the + aria-activedescendant of the input element along with aria-label, aria-selected and aria-disabled attributes. +
+ +If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.
+Closed State Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the select element. | +
| + space + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
| + down arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. | +
| + up arrow + | +Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus. | +
Popup Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus. | +
| shift + tab | +Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus. | +
| + enter + | +Selects the focused option and closes the popup. | +
| + space + | +Selects the focused option and closes the popup. | +
| + escape + | +Closes the popup, moves focus to the select element. | +
| + down arrow + | +Moves focus to the next option, if there is none then visual focus does not change. | +
| + up arrow + | +Moves focus to the previous option, if there is none then visual focus does not change. | +
| + right arrow + | +If the select is editable, removes the visual focus from the current option and moves input cursor to one character left. | +
| + left arrow + | +If the select is editable, removes the visual focus from the current option and moves input cursor to one character right. | +
| + home + | +If the select is editable, moves input cursor at the end, if not then moves focus to the first option. | +
| + end + | +If the select is editable, moves input cursor at the beginning, if not then moves focus to the last option. | +
| + any printable character + | +Moves focus to the option whose label starts with the characters being typed if select is not editable. | +
Filter Input Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Closes the popup and moves focus to the select element. | +
| + escape + | +Closes the popup and moves focus to the select element. | +
+ Select is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Note + that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary. +
+An alternative way to highlight the selected option is displaying a checkmark instead.
+When showClear is enabled, a clear icon is added to reset the Select.
Custom filter can be applied with the filterTemplate.
+
+
When disabled is present, the element cannot be edited and focused.
+When editable is present, the input can also be entered with typing.
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+Select provides built-in filtering that is enabled by adding the filter property.
+
+
+
+
+ + A floating label appears on top of the input field when focused. Visit + FloatLabel documentation for more information. +
+Options can be grouped when a nested data structures is provided.
+
+ {{ group.label }}
+
+ {{ group.label }}
+
+ {{ group.label }}
+ IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+Loading state can be used loading property.
+Select can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+Select provides small and large sizes as alternatives to the base.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-dropdown | +Container element. | +
| p-dropdown-clearable | +Container element when showClear is on. | +
| p-dropdown-label | +Element to display label of selected option. | +
| p-dropdown-trigger | +Icon element. | +
| p-dropdown-panel | +Icon element. | +
| p-dropdown-items-wrapper | +Wrapper element of items list. | +
| p-dropdown-items | +List element of items. | +
| p-dropdown-item | +An item in the list. | +
| p-dropdown-filter-container | +Container of filter input. | +
| p-dropdown-filter | +Filter element. | +
| p-dropdown-open | +Container element when overlay is visible. | +
+ Both the selected option and the options list can be templated to provide customizated representation. Use + selectedItem template to customize the selected label display and the item template to change the content of the options in the select panel. In addition when grouping is enabled, group template is available to + customize the option groups. All templates get the option instance as the default local template variable. +
+
+
+
+
+
+
+ + VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance + issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item. +
+Screen Reader
++ The container element that wraps the buttons has a group role whereas each button element uses button role and aria-pressed is updated depending on selection state. Value to describe an option is automatically set + using the ariaLabel property that refers to the label of an option so it is still suggested to define a label even the option display consists of presentational content like icons only. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the buttons. | +
| + space + | +Toggles the checked state of a button. | +
SelectButton requires a value to bind and a collection of options.
+When disabled is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the optionDisabled property.
+Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array.
+SelectButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+SelectButton provides small and large sizes as alternatives to the base.
+For custom content support define a ng-template with pTemplate where the local ng-template variable refers to an option in the options collection.
+Screen Reader
++ Skeleton uses aria-hidden as "true" so that it gets ignored by screen readers, any valid attribute is passed to the root element so you may customize it further if required. If multiple skeletons are grouped inside a container, + you may use aria-busy on the container element as well to indicate the loading process. +
+Keyboard Support
+Component does not include any interactive elements.
+Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.
+Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.
+-
+
-
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+
-
+
-
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+
-
+
-
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+ -
+ ++
+ +++ +
+
- Various shapes and sizes can be created using styling properties like shape, width, height, - borderRadius and styleClass. -
+Various shapes and sizes can be created using styling properties like shape, width, height, borderRadius and styleClass.
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-skeleton | +Container element. | +
| p-skeleton-circle | +Container element of a determinate progressbar. | +
| p-skeleton-animation-none | +Container element of an indeterminate progressbar. | +
Screen Reader
++ Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined + using ariaLabelledBy and ariaLabel props. +
+Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus to the slider. | +
| + + left arrow + up arrow + + | +Decrements the value. | +
| + + right arrow + down arrow + + | +Increments the value. | +
| + home + | +Set the minimum value. | +
| + end + | +Set the maximum value. | +
| + page up + | +Increments the value by 10 steps. | +
| + page down + | +Decrements the value by 10 steps. | +
Two-way binding is defined using the standard ngModel directive.
+Image filter implementation using multiple sliders.
+
+
+
+ Slider is connected to an input field using two-way binding.
+When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.
+Slider can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+Size of each movement is defined with the step property.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-slider | +Container element | +
| p-slider-handle | +Handle element | +
Default layout of slider is horizontal, use orientation property for the alternative vertical mode.
+Screen Reader
++ SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes + includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. +
+ +The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button.
+Menu Button Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Toggles the visibility of the menu. | +
| + space + | +Toggles the visibility of the menu. | +
| + down arrow + | +Opens the menu and moves focus to the first item. | +
| + up arrow + | +Opens the menu and moves focus to the last item. | +
Menu Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Activates the menuitem, closes the menu and sets focus on the menu button. | +
| + escape + | +Closes the menu and sets focus on the menu button. | +
| + arrow keys + | +Navigates between the menu items. | +
| + home + | +Moves focus to the first item. | +
| + end + | +Moves focus to the last item. | +
- Items can be displayed around the button when type is set to circle. Additional radius property defines - the radius of the circle. -
+Items can be displayed around the button when type is set to circle. Additional radius property defines the radius of the circle.
SpeedDial items are defined with the model property based on MenuModel API. Default orientation of the items is linear and direction property is used to define the position of the items related to the button.
+Adding mask property displays a modal layer behind the popup items.
+When type is defined as semi-circle, items are displayed in a half-circle around the button.
++ SpeedDial offers item customization with the item template that receives the menuitem instance from the model as a parameter. The button has its own button template, additional template named icon is provided to + embed icon content for default button. +
+- Items display a tooltip on hover when a standalone Tooltip is present with a - target that matches the items. -
+Items display a tooltip on hover when a standalone Tooltip is present with a target that matches the items.
Screen Reader
++ SplitButton component renders two native button elements, main button uses the label property to define aria-label by default which can be customized with buttonProps. Dropdown button requires an explicit definition to + describe it using menuButtonProps option and also includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. +
+ +The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the dropdown button.
+Main Button Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Activates the button. | +
| + space + | +Activates the button. | +
Menu Button Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Toggles the visibility of the menu. | +
| + space + | +Toggles the visibility of the menu. | +
| + down arrow + | +Opens the menu and moves focus to the first item. | +
| + up arrow + | +Opens the menu and moves focus to the last item. | +
Menu Keyboard Support
+| Key | +Function | +
|---|---|
| + enter + | +Actives the menuitem, closes the menu and sets focus on the menu button. | +
| + escape + | +Closes the menu and sets focus on the menu button. | +
| + down arrow + | +Moves focus to the next item, if it is the last one then first item receives the focus. | +
| + up arrow + | +Moves focus to the previous item, if it is the first one then last item receives the focus. | +
| + home + | +Moves focus to the first item. | +
| + end + | +Moves focus to the last item. | +
SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
++ When the disabled attribute is present, the element is uneditable and unfocused. Additionally, the disabled states of the button and menu button can be handled independently. The button is disabled when buttonDisabled is + present, and the menu button is disabled when menuButtonDisabled is present. +
+The buttons and menuitems have support to display icons.
+SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
+Outlined buttons display a border without a background initially.
+Raised buttons display a shadow to indicate elevation.
+Text buttons can be displayed as raised as well for elevation.
+Rounded buttons have a circular border radius.
+The severity property defines the type of button.
+SplitButton provides small and large sizes as alternatives to the standard.
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-splitbutton | +Container element. | +
| p-splitbutton-menubutton | +Dropdown button. | +
| p-menu | +Overlay menu. | +
SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
+
+ PrimeNG
+
+
+ PrimeNG
+
+
+ PrimeNG
+
+ Text buttons are displayed as textual elements.
+Screen Reader
+Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical.
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus through the splitter bar. | +
| down arrow | +Moves a vertical splitter down. | +
| up arrow | +Moves a vertical splitter up. | +
| left arrow | +Moves a vertical splitter to the left. | +
| right arrow | +Moves a vertical splitter to the right. | +
Splitter requires two SplitterPanel components as children which are displayed horizontally by default.
+Splitters can be combined to create advanced layouts.
+When no panelSizes are defined, panels are split 50/50, use the panelSizes property to give relative widths e.g. [25, 75].
++ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-splitter | +Container element. | +
| p-splitter | +Container element during resize. | +
| p-splitter-horizontal | +Container element with horizontal layout. | +
| p-splitter-vertical | +Container element with vertical layout. | +
| p-splitter-panel | +Splitter panel element. | +
| p-splitter-gutter | +Gutter element to use when resizing the panels. | +
| p-splitter-gutter-handle | +Handl element of the gutter. | +
Panels are displayed as stacked by setting the layout to vertical.
+Screen Reader
++ Stepper container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Stepper. Each stepper header has a + tab role and aria-controls to refer to the corresponding stepper content element. The content element of each stepper has tabpanel role, an id to match the aria-controls of the header and + aria-labelledby reference to the header as the accessible name. +
+ +Tab Header Keyboard Support
+| Key | +Function | +
|---|---|
| + tab + | +Moves focus through the header. | +
| + enter + | +Activates the focused stepper header. | +
| + space + | +Activates the focused stepper header. | +
Stepper consists of a combination of StepList, Step, StepPanels and StepPanel components. The value property is essential for associating Step and StepPanel with each other.
+When linear property is set to true, current step must be completed in order to move to the next step.
+Stepper provides various templating options to customize the default UI design.
+
+
+
+ Layout of the Stepper is configured with the orientation property that accepts horizontal and vertical as available options.
+Screen Reader
++ Steps component uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the current + step item defines aria-current as "step". +
+Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. | +
| enter | +Activates the focused step if readonly is not enabled. | +
| space | +Activates the focused step if readonly is not enabled. | +
| right arrow | +Moves focus to the next step if readonly is not enabled. | +
| left arrow | +Moves focus to the previous step if readonly is not enabled. | +
| home | +Moves focus to the first step if readonly is not enabled. | +
| end | +Moves focus to the last step if readonly is not enabled. | +
Steps requires a collection of menuitems as its model.
+Steps can be controlled programmatically using activeIndex property.
+- In order to add interactivity to the component, disable readonly and use a binding to activeIndex along with - activeIndexChange to control the Steps. -
+In order to add interactivity to the component, disable readonly and use a binding to activeIndex along with activeIndexChange to control the Steps.
+ Following is the list of structural style classes, for theming classes visit + theming page. +
+| Name | +Element | +
|---|---|
| p-steps | +Container element. | +
| p-steps-item | +Menuitem element. | +
| p-steps-number | +Number of menuitem. | +
| p-steps-title | +Label of menuitem. | +
+ Classes to apply during enter and leave animations are specified using the enterFromClass, enterActiveClass, enterToClass, leaveFromClass, leaveActiveClass,leaveToClassproperties. In addition + in case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked, or enable hideOnEscape to close the popup by listening escape key. +
+- StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations. The target - element to change the styling is defined with the selector property that accepts any valid CSS selector or keywords - including @next, prev, parent, grandparent + StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations. The target element to change the styling is defined with the selector property that accepts any valid CSS selector or + keywords including @next, prev, parent, grandparent
Screen Reader
++ Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer + aria-sort attribute either set to "ascending" or "descending". +
+Table rows and table cells should be specified by users using the aria-posinset, aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.
++ Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton. The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the + locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row. +
++ The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties of the + locale API. +
++ The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup, aria-expanded and aria-controls to define the relation between the + button and the overlay. Popop menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use + aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and aria.apply properties. + filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well. +
++ Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow, aria.cancelEdit and aria.saveEdit used for the + aria-label. +
+Paginator is a standalone component used inside the Table, refer to the paginator for more information about the accessibility features.
+Keyboard Support
++ Any button element inside the Table used for cases like filter, row expansion, edit are tabbable and can be used with + space and enter keys. +
+Sortable Headers Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves through the headers. | +
| enter | +Sorts the column. | +
| space | +Sorts the column. | +
Filter Menu Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves through the elements inside the popup. | +
| escape | +Hides the popup. | +
| enter | +Opens the popup. | +
Selection Keyboard Support
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the first selected row, if there is none then first row receives the focus. | +
| up arrow | +Moves focus to the previous row. | +
| down arrow | +Moves focus to the next row. | +
| enter | +Toggles the selected state of the focused row depending on the metaKeySelection setting. | +
| space | +Toggles the selected state of the focused row depending on the metaKeySelection setting. | +
| home | +Moves focus to the first row. | +
| end | +Moves focus to the last row. | +
| shift + down arrow | +Moves focus to the next row and toggles the selection state. | +
| shift + up arrow | +Moves focus to the previous row and toggles the selection state. | +
| shift + space | +Selects the rows between the most recently selected row and the focused row. | +
| control + shift + home | +Selects the focused rows and all the options up to the first one. | +
| control + shift + end | +Selects the focused rows and all the options down to the last one. | +
| control + a | +Selects all rows. | +
DataTable requires a collection to display along with column components for the representation of the data.
+- In-cell editing is enabled by adding pEditableColumn directive to an editable cell that has a - p-cellEditor helper component to define the input-output templates for the edit and view modes respectively. -
+In-cell editing is enabled by adding pEditableColumn directive to an editable cell that has a p-cellEditor helper component to define the input-output templates for the edit and view modes respectively.
- Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as - multiple. -
+Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as multiple.
Columns can be grouped using rowspan and colspan properties.
+- Columns can be resized using drag drop by setting the resizableColumns to true. Fit mode is the default one - and the overall table width does not change when a column is resized. -
+Columns can be resized using drag drop by setting the resizableColumns to true. Fit mode is the default one and the overall table width does not change when a column is resized.
This demo uses a multiselect component to implement toggleable columns.
++ Table has exclusive integration with contextmenu component. In order to attach a menu to a table, add pContextMenuRow directive to the rows that can be selected with context menu, define a local template variable for the + menu and bind it to the contextMenu property of the table. This enables displaying the menu whenever a row is right clicked. Optional pContextMenuRowIndex property is available to access the row index. A separate + contextMenuSelection property is used to get a hold of the right clicked row. For dynamic columns, setting pContextMenuRowDisabled property as true disables context menu for that particular row. +
+
+
{{ option.name }}
+
{{ customer.country.name }}
+
{{ customer.representative.name }}
- Instead of using the built-in sorting algorithm a custom sort can be attached by enabling customSort property and - defining a sortFunction implementation. This function gets a SortEvent instance that provides the data to sort, + Instead of using the built-in sorting algorithm a custom sort can be attached by enabling customSort property and defining a sortFunction implementation. This function gets a SortEvent instance that provides the data to sort, sortField, sortOrder and multiSortMeta.
Columns can be defined dynamically using the *ngFor directive.
+- When expandableRowGroups is present in subheader based row grouping, groups can be expanded and collapsed. State of - the expansions are controlled using the expandedRows and onRowToggle properties. -
+When expandableRowGroups is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the expandedRows and onRowToggle properties.
+
+
{{ customer.representative.name }}
+
{{ customer.country.name }}
+
{{ option.name }}
+
{{ customer.country.name }}
+
{{ customer.representative.name }}
- Data filtering is enabled by defining the filters property referring to a DataTableFilterMeta instance. Each - column to filter also requires filter to be enabled. Built-in filter element is a input field and using + Data filtering is enabled by defining the filters property referring to a DataTableFilterMeta instance. Each column to filter also requires filter to be enabled. Built-in filter element is a input field and using filterElement, it is possible to customize the filtering with your own UI.
-- The optional global filtering searches the data against a single value that is bound to the global key of the - filters object. The fields to search against is defined with the globalFilterFields. -
+The optional global filtering searches the data against a single value that is bound to the global key of the filters object. The fields to search against is defined with the globalFilterFields.
+
{{ option.name }}
+
{{ customer.country.name }}
+
{{ customer.representative.name }}
+ Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data + viewport adjusts itself according to the size changes. +
+- Certain columns can be frozen by using the pFrozenColumn directive of the table component. In addition, - alignFrozen is available to define whether the column should be fixed on the left or right. -
+Certain columns can be frozen by using the pFrozenColumn directive of the table component. In addition, alignFrozen is available to define whether the column should be fixed on the left or right.
Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property.
+Enabling showGridlines displays borders between cells.
++ Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging, sorting and filtering happens. Sample here loads + the data from remote datasource efficiently using lazy loading. Also, the implementation of checkbox selection in lazy tables is left entirely to the user. Since the table component does not know what will happen to the data on + the next page or whether there are instant data changes, the selection array can be implemented in several ways. One of them is as in the example below. +
+
+ {{ option.name }}
+
+ {{ option.name }}
+
+ {{ option.name }}
+ - Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to - be pressed when clicking a header. -
+Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.
- More than one row is selectable by setting selectionMode to multiple. By default in multiple selection mode, - metaKey press (e.g. ⌘) is not necessary to add to existing selections. When the optional metaKeySelection - is present, behavior is changed in a way that selecting a new row requires meta key to be present. Note that in touch - enabled devices, DataTable always ignores metaKey. + More than one row is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is not necessary to add to existing selections. When the optional + metaKeySelection + is present, behavior is changed in a way that selecting a new row requires meta key to be present. Note that in touch enabled devices, DataTable always ignores metaKey.
+ Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page. For server side pagination, see the lazy loading + example. +
++ paginator localization information such as page numbers and rows per page options are defined with the + paginatorLocale property which defaults to the user locale. +
+Paginator can also be controlled via model using a binding to the first property where changes trigger a pagination.
+- Defining a default sortField and sortOrder displays data as sorted initially in single column sorting. In - multiple sort mode, multiSortMeta should be used instead by providing an array of + Defining a default sortField and sortOrder displays data as sorted initially in single column sorting. In multiple sort mode, multiSortMeta should be used instead by providing an array of DataTableSortMeta objects.
Manage Products
@@ -98,12 +80,7 @@ import { ProductService } from '@service/productservice';+ Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding + reorderableColumns property. +
++ Similarly, adding reorderableRows property enables draggable rows. For the drag handle a column needs to have rowReorder property and onRowReorder callback is required to control the state of the rows after + reorder completes. +
+- Row editing toggles the visibility of all the editors in the row at once and provides additional options to save and cancel - editing. Row editing functionality is enabled by setting the editMode to "row" on table, defining a dataKey to - uniquely identify a row, adding pEditableRow directive to the editable rows and defining the UI Controls with - pInitEditableRow, pSaveEditableRow and pCancelEditableRow directives respectively. + Row editing toggles the visibility of all the editors in the row at once and provides additional options to save and cancel editing. Row editing functionality is enabled by setting the editMode to "row" on table, defining a + dataKey to uniquely identify a row, adding pEditableRow directive to the editable rows and defining the UI Controls with pInitEditableRow, pSaveEditableRow and pCancelEditableRow directives respectively.
- Save and Cancel functionality implementation is left to the page author to provide more control over the editing business - logic. Example below utilizes a simple implementation where a row is cloned when editing is initialized and is saved or - restored depending on the result of the editing. An implicit variable called "editing" is passed to the body template so you - may come up with your own UI controls that implement editing based on your own requirements such as adding validations and - styling. Note that pSaveEditableRow only switches the row to back view mode when there are no validation errors. + Save and Cancel functionality implementation is left to the page author to provide more control over the editing business logic. Example below utilizes a simple implementation where a row is cloned when editing is initialized and is + saved or restored depending on the result of the editing. An implicit variable called "editing" is passed to the body template so you may come up with your own UI controls that implement editing based on your own requirements such as + adding validations and styling. Note that pSaveEditableRow only switches the row to back view mode when there are no validation errors.
- Moreover, you may use setting pEditableRowDisabled property as true to disable editing for that particular row and in - case you need to display rows in edit mode by default, use the editingRowKeys property which is a map whose key is - the dataKey of the record where the value is any arbitrary number greater than zero. + Moreover, you may use setting pEditableRowDisabled property as true to disable editing for that particular row and in case you need to display rows in edit mode by default, use the editingRowKeys property which is a map + whose key is the dataKey of the record where the value is any arbitrary number greater than zero.
- Row expansion allows displaying detailed content for a particular row. To use this feature, add a template named - rowexpansion and use the pRowToggler directive whose value is the row data instance on an element of your choice - whose click event toggles the expansion. This enables providing your custom UI such as buttons, links and so on. Example - below uses an anchor with an icon as a toggler. Setting pRowTogglerDisabled as true disables the toggle event for the - element. + Row expansion allows displaying detailed content for a particular row. To use this feature, add a template named rowexpansion and use the pRowToggler directive whose value is the row data instance on an element of your choice + whose click event toggles the expansion. This enables providing your custom UI such as buttons, links and so on. Example below uses an anchor with an icon as a toggler. Setting pRowTogglerDisabled as true disables the toggle + event for the element.
+
{{ customer.representative.name }}
+
{{ customer.country.name }}
- A column can be made sortable by adding the pSortableColumn directive whose value is the field to sort against and a - sort indicator via p-sortIcon component. For dynamic columns, setting pSortableColumnDisabled property as true - disables sorting for that particular column. + A column can be made sortable by adding the pSortableColumn directive whose value is the field to sort against and a sort indicator via p-sortIcon component. For dynamic columns, setting + pSortableColumnDisabled property as true disables sorting for that particular column.
Default sorting is executed on a single column, in order to enable multiple field sorting, set sortMode
@@ -51,14 +50,14 @@ import { ProductService } from '@service/productservice';
- Single row selection is enabled by defining selectionMode as single along with a value binding using
- selection property. When available, it is suggested to provide a unique identifier of a row with dataKey to
- optimize performance.
+ Single row selection is enabled by defining selectionMode as single along with a value binding using selection property. When available, it is suggested to provide a unique identifier of a row with
+ dataKey to optimize performance.
- By default, metaKey press (e.g. ⌘) is necessary to unselect a row however this can be configured with disabling the
- metaKeySelection property. In touch enabled devices this option has no effect and behavior is same as setting it to
- false.
+ By default, metaKey press (e.g. ⌘) is necessary to unselect a row however this can be configured with disabling the metaKeySelection property. In touch enabled devices this option has no effect and behavior is same as
+ setting it to false.
In addition to a regular table, alternatives with alternative sizes are available. Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.
- Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that
- when the page is visited again, table would render the data using the last settings.
-
- Change the state of the table e.g paginate, navigate away and then return to this table again to test this feature, the
- setting is set as session with the stateStorage property so that Table retains the state until the browser is
- closed. Other alternative is local referring to localStorage for an extended lifetime.
+ Change the state of the table e.g paginate, navigate away and then return to this table again to test this feature, the setting is set as session with the stateStorage property so that Table retains the state until the
+ browser is closed. Other alternative is local referring to localStorage for an extended lifetime.
Certain rows or cells can easily be styled based on conditions.
- Rows are grouped with the groupRowsBy property. When rowGroupMode is set as subheader, a header and
- footer can be displayed for each group. The content of a group header is provided with groupheader and footer with
- groupfooter templates.
+ Rows are grouped with the groupRowsBy property. When rowGroupMode is set as subheader, a header and footer can be displayed for each group. The content of a group header is provided with groupheader and
+ footer with groupfooter templates.
Custom content at header, body and footer sections are supported via templating.
- Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with
- fixed headers.
-
+ VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also
+ suggested to use the same virtualScrollItemSize value on the tr element inside the body template.
+
+ VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also
+ suggested to use the same virtualScrollItemSize value on the tr element inside the body template.
+
+ Tabs container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Tabs. Each tab header has a
+ tab role along with aria-selected state attribute and aria-controls to refer to the corresponding tab content element. The content element of each tab has tabpanel role, an id to match thearia-controls
+ of the header and aria-labelledby reference to the header as the accessible name.
+ Tabs is defined using TabList, Tab, TabPanels and TabPanel components. Tab and TabPanel components are associated with their value properties
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+ enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+ culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+ dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+ modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+ atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+ sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+ facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+ impedit quo minus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+ dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+ modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+ atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+ sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+ facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+ impedit quo minus.
+ Tabs can be controlled programmatically using value property as a model.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+ enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+ culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+ enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+ qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
+ corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+ culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
+ expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+ enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+ qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
+ corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+ culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
+ expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+ enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+ culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
Enabling disabled property of a Tab prevents user interaction.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+ enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+ culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+ dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+ modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+ atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+ sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+ facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+ impedit quo minus.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+ dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+ modi.
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+ atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+ sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+ facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+ impedit quo minus.
+ Tabs can be generated dynamically using the standard @for block. {{ tab.content }} {{ tab.content }} {{ tab.content }}
- A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component
- like
- router-outlet. For the purpose of this demo, router-outlet is not included.
+ A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like
+ router-outlet. For the purpose of this demo, router-outlet is not included.
+ Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic,aria-live may be utilized as well. In case
+ badges need to be tabbable, tabIndex can be added to implement custom key handlers.
+ Component does not include any interactive elements. Label of the tag is defined with the value property. A font icon next to the value can be displayed with the icon property. Severity defines the color of the tag, possible values are success, info, warn and danger in addition to the default theme color.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+ Children of the component are passed as the content for templating. The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives. PrimeNG color palette as utility classes. Using Tailwind utilities for the responsive layout of a form with PrimeNG components. A headless PrimeNG dialog with a custom UI.
- In styled mode, Tailwind utilities may not be able to override the default styling due to css specificity, there are two
- possible solutions.
- In styled mode, Tailwind utilities may not be able to override the default styling due to css specificity, there are two possible solutions. Use the ! as a prefix to enforce the styling.
+ Tailwind CSS is a popular CSS framework based on a utility-first design. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated btn class as in
+ Bootstrap, Tailwind offers primitive classes like bg-blue-500, rounded and p-4 to apply a button. A set of reusable classes can also be grouped as a Tailwind CSS component and there are even a couple of libraries
+ that take this approach to build components specifically for Tailwind.
+
+ Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Angular, this is where PrimeNG comes in by providing a wide range of highly accessible and feature rich UI component library.
+ The core of PrimeNG does not depend on Tailwind CSS.
+
+ The
+ tailwindcss-primeui
+ is an official plugin by PrimeTek to provide first class integration between a Prime UI library like PrimeNG and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors
+ such as primary and surfaces are provided as Tailwind utilities e.g. bg-primary, text-surface-500, text-muted-color.
+ Plugin is available on npm. After installation, configure the plugin at your tailwind configuration file.
+ Terminal component has an input element that can be described with aria-label or aria-labelledby props. The element that lists the previous commands has aria-live so that changes are received by the screen reader.
+ Commands are processed using observables via the TerminalService. Import this service into your component and subscribe to commandHandler to process commands by sending replies with sendResponse function. Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number. Enter "date" to display the current date,
+"greet {0}" for a message and "random"
+to get a random number. Enter "date" to display the current date,
+ "greet {0}" for a message and "random"
+ to get a random number.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+
+ Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby,
+ aria-label props.
+ Textarea is applied to an input field with pTextarea directive. When disabled is present, the element cannot be edited and focused. Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+ A floating label appears on top of the input field when focused. Visit
+ FloatLabel documentation for more information.
+ IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation. InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. Textarea can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. Textarea provides small and large sizes as alternatives to the base.
+ PrimeNG is a design agnostic library so unlike some other UI libraries it does not enforce a certain styling such as material design. Styling is decoupled from the components using the themes instead. A theme consists of two parts;
+ base and preset. The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to CSS variables. A base may be configured with different
+ presets, currently Aura, Lara and Nora are the available presets and in upcoming version more presets will be available such as Material Design.
+ The core of the styled mode architecture is based on a concept named design token, a preset defines the token configuration in 3 tiers; primitive, semantic and component.
+ Primitive tokens have no context, a color palette is a good example for a primitive token such as blue-50 to blue-900. A token named blue-500 may be used as the primary color, the background of a message however
+ on its own, the name of the token does not indicate context. Usually they are utilized by the semantic tokens.
+
+ Semantic tokens define content and their names indicate where they are utilized, a well known example of a semantic token is the primary.color. Semantic tokens map to primitive tokens or other semantic tokens. The
+ colorScheme token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like dark mode.
+
+ Component tokens are isolated tokens per component such as inputtext.background or button.color that map to the semantic tokens. As an example, button.background component token maps to the
+ primary.color semantic token which maps to the green.500 primitive token.
+
+ Use primitive tokens when defining the core color palette and semantic tokens to specify the common design elements such as focus ring, primary colors and surfaces. Components tokens should only be used when customizing a specific
+ component. By defining your own design tokens as a custom preset, you'll be able to define your own style without touching CSS. Overriding the PrimeNG components using style classes is not a best practice and should be the last
+ resort, design tokens are the suggested approach.
+ Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.
+ Tokens are described with the dot separator e.g. primary.color, form.field.background or checkbox.icon.checked.color. At preset configuration, camel case and object property are used when mapping the dot
+ separator. The following is an example from the checkbox component tokens to represent the checkbox.icon.checked.color, all alternatives have the same result.
+
+ Color palette of a preset is defined by the primitive design token group. The default colors are derived from the Tailwind colors with some extensions to make it consistent with the Tailwind Presets projects of the unstyled
+ mode.
+ Colors can be accessed at CSS as a variable and programmatically using the $dt utility.
- The design tokens of a specific component is defined at components layer. Overriding components tokens is not the
- recommended approach if you are building our own style, building your own preset should be preferred instead. This
- configuration is global and applies to all card components, in case you need to customize a particular component on a page
- locally, view the Scoped CSS section for an example.
+ The design tokens of a specific component is defined at components layer. Overriding components tokens is not the recommended approach if you are building our own style, building your own preset should be preferred instead.
+ This configuration is global and applies to all card components, in case you need to customize a particular component on a page locally, view the Scoped CSS section for an example.
+ PrimeNG uses the system as the default darkModeSelector in theme configuration. If you have a dark mode switch in your application, set the darkModeSelector to the selector you utilize such as
+ .my-app-dark so that PrimeNG can fit in seamlessly with your light-dark toggle.
+
+ Following is a very basic example implementation of a dark mode switch, you may extend it further by involving
+ prefers-color-scheme to retrieve it from the system initially and use localStorage to make it stateful. See this
+ article
+ for more information.
+ In case you prefer to use dark mode all the time, apply the darkModeSelector initially and never change it. The definePreset utility is used to customize an existing preset during the PrimeNG setup. The first parameter is the preset to customize and the second is the design tokens to override.
- The $dt function returns the information about a token like the full path and value. This would be useful if you need
- to access tokens programmatically.
- The $dt function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically. Focus ring defines the outline width, style, color and offset. Let's use a thicker ring with the primary color for the outline. There is no design for fonts as UI components inherit their font settings from the application.
- The design tokens of the form input components are derived from the form.field token group. This customization
- example changes border color to primary on hover. Any component that depends on this semantic token such as
+ The design tokens of the form input components are derived from the form.field token group. This customization example changes border color to primary on hover. Any component that depends on this semantic token such as
dropdown.hover.border.color and textarea.hover.border.color would receive the change.
Example layer configuration for the popular CSS libraries.
- The noir mode is the nickname of a variant that uses black tones as the primary and requires and additional
- colorScheme configuration to implement. A sample preset configuration with black and white variants as the primary
- color;
+ The noir mode is the nickname of a variant that uses black tones as the primary and requires and additional colorScheme configuration to implement. A sample preset configuration with black and white variants as the
+ primary color;
The options property defines the how the CSS would be generated from the design tokens of the preset. The prefix of the CSS variables, defaults to p. For instance, the primary.color design token would be var(--p-primary-color).
+ The CSS rule to encapsulate the CSS variables of the dark mode, the default is the system to generate media (prefers-color-scheme: dark). If you need to make the dark mode toggleable based on the user selection define a
+ class selector such as .app-dark and toggle this class at the document root. See the dark mode toggle section for an example.
+
+ Defines whether the styles should be defined inside a
+ CSS layer
+ named primeui by default or not. A CSS layer would be handy to declare a custom cascade layer for easier customization. The default is false.
+ Returns shades and tints of a given color from 50 to 950 as an array. Currently Aura, Lara and Nora are the available presets, a new preset based on Material Design is planned by the end of 2024. Coming soon with a future update.
- The primary defines the main color palette, default value maps to the emerald primitive token. Let's setup to
- use indigo instead.
- The primary defines the main color palette, default value maps to the emerald primitive token. Let's setup to use indigo instead.
+ Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeNG because global styles with a broader scope e.g. button { } and no layer
+ always override the PrimeNG components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best
+ practice is wrapping your CSS in a layer like reset and make sure PrimeNG comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeNG components.
+
+ Following keys are reserved in the preset scheme and cannot be used as a token name; primitive, semantic, components, directives, colorscheme, light, dark, common, root,
+ states.
+
+ PrimeNG UI component use rem units, 1rem equals to the font size of the html element which is 16px by default. Use the root font-size to adjust the size of the components globally. This website uses 14px as
+ the base so it may differ from your application if your base font size is different.
+
- Design tokens can be scoped to a certain component using CSS variables. In this example, first switch uses the global tokens
- whereas second one overrides the global with its own tokens.
- Design tokens can be scoped to a certain component using CSS variables. In this example, first switch uses the global tokens whereas second one overrides the global with its own tokens.
+ The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at
+ MDN to begin with. In styled mode, when the cssLayer option is enabled at theme configuration, PrimeNG wraps the built-in style classes
+ under the primeng cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class
+ is written. The cssLayer is disabled by default to avoid compatibility issues with 3rd party CSS libraries which requires a layer configuration for compatibility that is discussed in the next reset section.
+
+ For example, let's assume you need to remove the rounded borders of the ToggleSwitch component defined by the theme in use. In order to achieve this, .p-toggleswitch .p-toggleswitch-slider selector needs to be overriden.
+ Without the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeNG with a more straightforward class name such as
+ my-switch-slider. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.
+
The color scheme palette that varies between light and dark modes is specified with the surface tokens. Example below uses
- zinc for light mode and slategray for dark mode. With this setting, light mode, would have a grayscale tone
- and dark mode would include blue tone.
+ zinc for light mode and slategray for dark mode. With this setting, light mode, would have a grayscale tone and dark mode would include blue tone.
+ Tailwind CSS includes a reset utility in base called
+ preflight. If you are using this feature, wrap the base and utilities in separate layers and make sure primeng layer comes
+ after the base.
+ The theme property is used to customize the initial theme. Merges the provided tokens to the current preset, an example would be changing the primary color palette dynamically. Updates the primary colors, this is a shorthand to do the same update using updatePreset. Updates the surface colors, this is a shorthand to do the same update using updatePreset. Replaces the current presets entirely, common use case is changing the preset dynamically at runtime.
+ TieredMenu component uses the menubar role with aria-orientation set to "vertical" and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a
+ presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled. A submenu within a TieredMenu uses the
+ menu role with an aria-labelledby defined as the id of the submenu root menuitem label. In addition, menuitems that open a submenu have aria-haspopup, aria-expanded and aria-controls to define the
+ relation between the item and the submenu.
+ In popup mode, the component implicitly manages the aria-expanded, aria-haspopup and aria-controls attributes of the target element to define the relation between the target and the popup. TieredMenu requires a collection of menuitems as its model. The command property defines the callback to run when an item is activated by click or a key event. Popup mode is enabled by adding popup property and calling toggle method with an event of the target. Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+ TieredMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter. Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element. Component does not include any interactive elements.
+ Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. Example below is a sample events array that
+ is used throughout the documentation.
+ TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+ Sample implementation with custom content and styled markers.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+ neque quas!
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+ neque quas!
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+ neque quas!
+ Toast component use alert role that implicitly defines aria-live as "assertive" and aria-atomic as "true". Close element is a button with an aria-label that refers to the aria.close property of the locale API by default. Transition of the animations can be customized using the showTransitionOptions, hideTransitionOptions, showTransformOptions and hideTransformOptions properties.
+ Toasts are displayed by calling the add and addAll method provided by the messageService. A single toast is specified by the Message interface that defines various properties such as severity,
+ summary and detail.
+
- Clicking the close icon on the toast, removes it manually. Same can also be achieved programmatically using the clear
- function of the messageService. Calling it without any arguments, removes all displayed messages whereas calling it
- with a key, removes the messages displayed on a toast having the same key.
+ Clicking the close icon on the toast, removes it manually. Same can also be achieved programmatically using the clear function of the messageService. Calling it without any arguments, removes all displayed messages whereas
+ calling it with a key, removes the messages displayed on a toast having the same key.
Headless mode allows you to customize the entire user interface instead of the default elements. A toast disappears after 3000ms by default, set the life option on either the message or toast to override this. Multiple toasts are displayed by passing an array to the showAll method of the messageService. Location of the toast is customized with the position property. Valid values are top-left, top-center, top-right, bottom-left, bottom-center, bottom-right and center.
+ Toast styling can be adjusted per screen size with the breakpoints option. The value of breakpoints
+ should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px.
+
+ The severity option specifies the type of the message. There are four types of messages: success, info, warn and error. The severity of the message is used to display the icon and the color of the
+ toast.
+
- A toast disappears after the time defined by the life option, set sticky option true on the message to
- override this and not hide the toast automatically.
- A toast disappears after the time defined by the life option, set sticky option true on the message to override this and not hide the toast automatically.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+
+ A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the
+ key property so that toast and the message can match.
+ Templating allows customizing the content where the message instance is available as the implicit variable.
+ ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with ariaLabelledBy or ariaLabel props, it is highly
+ suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
+ does not change related to state.
+ Two-way binding to a boolean property is defined using the standard ngModel directive. Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties. When disabled is present, the element cannot be edited and focused. Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation. ToggleButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. ToggleButton provides small and large sizes as alternatives to the base.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+
+ InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with
+ inputId prop or using ariaLabelledBy, ariaLabel props.
+ Two-way value binding is defined using ngModel. When disabled is present, the element cannot be edited and focused. Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation. ToggleSwitch can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+ Toolbar uses toolbar role for the root element, aria-orientation is not included as it defaults to horizontal. Any valid attribute is passed to the root element so you may add additional properties like
+ aria-labelledby and aria-labelled to define the element if required.
+ Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.
+ Toolbar is a grouping component for buttons and other content. Its content can be placed inside the
+ start, center and end sections.
+ Content can also be placed using the start, center and end templates.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+ Tooltip component uses tooltip role and when it becomes visible the generated id of the tooltip is defined as the aria-describedby of the target. Tooltip can use either a string or a TemplateRef. Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively. Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide. Tooltip is also configurable by using tooltipOptions property. Position of the tooltip is specified using tooltipPosition attribute. Valid values are top, bottom, right and left. Default position of the tooltip is right.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+
+ Value to describe the component can either be provided with aria-labelledby or aria-label props. The root list element has a tree role whereas each list item has a treeitem role along with aria-label,
+ aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. The container element of a treenode has the group role. Checkbox and toggle icons are
+ hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The aria-setsize, aria-posinset and aria-level attributes are calculated
+ implicitly and added to each treeitem.
+ Tree component requires an array of TreeNode objects as its value. Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox. Tree requires a collection of TreeNode instances as a value. Tree requires a collection of TreeNode instances as a value. Nodes can be reordered within the same tree and also can be transferred between other trees using drag&drop. An event is provided for each type of user interaction such as expand, collapse and selection.
+ Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
+ filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included.
+ On the other hand, in strict mode when the query matches a node, filtering continues on all descendants.
+
+ Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using
+ loading property and onNodeExpand method. Default value of loadingMode is mask and also icon is available.
+
+ More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with
+ disabling the metaKeySelection property. Note that in touch enabled devices, Tree always ignores metaKey.
+ In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.
- Single node selection is configured by setting selectionMode as single along with selection properties
- to manage the selection value binding.
- Single node selection is configured by setting selectionMode as single along with selection properties to manage the selection value binding. Custom node content instead of a node label is defined with the pTemplate property. VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.
+ Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes.
+ The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup.
+
+ The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label,
+ aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. Checkbox and toggle icons are hidden from screen readers as their parent element with
+ treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are
+ calculated implicitly and added to each treeitem.
+ If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element. TreeSelect is used as a controlled component with ng-model directive along with an options collection. Internally Tree component is used so the options model is based on TreeNode API. In single selection mode, value binding should be the key value of a node. Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox. When disabled is present, the element cannot be edited and focused. Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+ Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
+ filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included.
+ On the other hand, in strict mode when the query matches a node, filtering continues on all descendants.
+
+ A floating label appears on top of the input field when focused. Visit
+ FloatLabel documentation for more information.
+ IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information. Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+ Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using
+ loading property and onNodeExpand method.
+
+ More than one node is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is necessary to add to existing selections however this can be configured with
+ disabling the metaKeySelection property. Note that in touch enabled devices, TreeSelect always ignores metaKey.
+ In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection. TreeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control. TreeSelect provides small and large sizes as alternatives to the base.
+ Following is the list of structural style classes, for theming classes visit
+ theming page.
+ TreeSelect offers multiple templates for customization through templating.
+ VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance
+ issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item.
+
+ Default role of the table is table. Header, body and footer elements use rowgroup, rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer
+ aria-sort attribute either set to "ascending" or "descending".
+
+ Row elements manage aria-expanded for state and aria-level attribute to define the hierachy by ttRow directive. Table rows and table cells should be specified by users using the aria-posinset,
+ aria-setsize, aria-label, and aria-describedby attributes, as they are determined through templating.
+ When selection is enabled, ttSelectableRow directive sets aria-selected to true on a row. In checkbox mode, the built-in checkbox component use checkbox role with aria-checked state attribute. Editable cells use custom templating so you need to manage aria roles and attributes manually if required. Paginator is a standalone component used inside the TreeTable, refer to the paginator for more information about the accessibility features. TreeTable requires a collection of TreeNode instances as a value components as children for the representation.
- Columns can be resized with drag and drop when resizableColumns is enabled. Default resize mode is fit that
- does not change the overall table width.
- Columns can be resized with drag and drop when resizableColumns is enabled. Default resize mode is fit that does not change the overall table width.
- To utilize the column resize modes with a scrollable TreeTable, a colgroup template must be defined. The
- default value of scrollHeight is "flex," it can also be set as a string value.
- To utilize the column resize modes with a scrollable TreeTable, a colgroup template must be defined. The default value of scrollHeight is "flex," it can also be set as a string value. Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.
- Particular rows and cells can be styled based on conditions. The ngClass receives a row data as a parameter to return
- a style class for a row whereas cells are customized using the body template.
- Particular rows and cells can be styled based on conditions. The ngClass receives a row data as a parameter to return a style class for a row whereas cells are customized using the body template. TreeTable has exclusive integration with ContextMenu using the contextMenu event to open a menu on right click alont with contextMenuSelection properties to control the selection via the menu. Expansion state is controlled with expandedKeys property.
+ The filterMode specifies the filtering strategy, in lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in
+ strict mode when the query matches a node, filtering continues on all descendants. A general filled called filterGlobal is also provided to search all columns that support filtering.
+
+ Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data
+ viewport adjusts itself according to the size changes.
+ Enabling showGridlines displays grid lines.
+ Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging, sorting and filtering occurs. Sample below
+ imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
+
+ Enabling the lazy property and assigning the logical number of rows to totalRecords by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually
+ records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
+ In addition, only the root elements should be loaded, children can be loaded on demand using onNodeExpand callback. Pagination is enabled by adding paginator property and defining rows per page.
+ Paginator localization information such as page numbers and rows per page options are defined with the
+ paginatorLocale property which defaults to the user locale.
+
- Paginator UI is customized using the paginatorleft and paginatorright property. Each element can also be
- customized further with your own UI to replace the default one, refer to the
- Paginator component for more information about the advanced customization
- options.
+ Paginator UI is customized using the paginatorleft and paginatorright property. Each element can also be customized further with your own UI to replace the default one, refer to the
+ Paginator component for more information about the advanced customization options.
Order of the columns can be changed using drag and drop when reorderableColumns is present.
- Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with
- fixed headers.
- Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers. Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.
- In checkbox selection mode, value binding should be a key-value pair where key (or the dataKey) is the node key and value is
- an object that has checked and partialChecked properties to represent the checked state of a node.
+ In checkbox selection mode, value binding should be a key-value pair where key (or the dataKey) is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a
+ node.
Code
@@ -51,7 +42,7 @@ import { ProductService } from '@service/productservice';
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
Name
@@ -64,27 +55,18 @@ import { CustomerService } from '@service/customerservice';
{{ customer.name }}
Country
-
+
{{ customer.country.name }}
-
@@ -92,26 +74,17 @@ import { CustomerService } from '@service/customerservice';
{{ customer.name }}
-
+
{{ customer.country.name }}
-
@@ -128,7 +101,7 @@ import { CustomerService } from '@service/customerservice';
Name
@@ -179,7 +152,7 @@ export class StatefulDoc {
Status
{{ customer.name }}
@@ -209,7 +182,7 @@ export class StatefulDoc {
{{ customer.name }}
@@ -258,7 +231,7 @@ export class StatefulDoc {
stateStorage="session"
stateKey="statedemo-session"
>
-
Name
@@ -283,7 +256,7 @@ export class StatefulDoc {
Status
{{ customer.name }}
@@ -313,7 +286,7 @@ export class StatefulDoc {
{{ customer.name }}
@@ -350,8 +323,8 @@ export class StatefulDoc {
`,
typescript: `import { Component, OnInit } from '@angular/core';
-import { Customer } from '@domain/customer';
-import { CustomerService } from '@service/customerservice';
+import { Customer } from '@/domain/customer';
+import { CustomerService } from '@/service/customerservice';
import { TableModule } from 'primeng/table';
import { HttpClientModule } from '@angular/common/http';
import { InputTextModule } from 'primeng/inputtext';
@@ -415,7 +388,7 @@ export class TableStatefulDemo implements OnInit{
balance: 70663
},
...`,
- service: ['CustomerService'],
+ service: ['CustomerService']
};
getSeverity(status: string) {
@@ -469,7 +442,7 @@ export interface Customer {
representative?: Representative;
verified?: boolean;
balance?: number;
-}`,
- },
+}`
+ }
];
}
diff --git a/src/app/showcase/doc/table/stripeddoc.ts b/apps/showcase/doc/table/stripeddoc.ts
similarity index 91%
rename from src/app/showcase/doc/table/stripeddoc.ts
rename to apps/showcase/doc/table/stripeddoc.ts
index b4e6071a125..c0b9a86c7a6 100644
--- a/src/app/showcase/doc/table/stripeddoc.ts
+++ b/apps/showcase/doc/table/stripeddoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { Product } from '@/domain/product';
+import { ProductService } from '@/service/productservice';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
-import { Code } from '@domain/code';
-import { Product } from '@domain/product';
-import { ProductService } from '@service/productservice';
@Component({
selector: 'striped-doc',
@@ -31,14 +31,14 @@ import { ProductService } from '@service/productservice';
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+
+
+
Name
@@ -36,21 +26,14 @@ import { CustomerService } from '@service/customerservice';
-
-
- Total Customers: {{ calculateCustomerTotal(customer.representative.name) }}
-
+ Total Customers: {{ calculateCustomerTotal(customer.representative.name) }}
-
+
{{ customer.country.name }}
@@ -81,14 +60,14 @@ import { CustomerService } from '@service/customerservice';
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+ {{ product.name }}
+
+
+
+
{{ product.price | currency: 'USD' }}
+ {{ product.category }}
+
+
+
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+ {{ product.name }}
+
+
+
+
{{ product.price | currency: 'USD' }}
+ {{ product.category }}
+
+
+
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+ {{ product.name }}
+
+
+
+
{{ product.price | currency: 'USD' }}
+ {{ product.category }}
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+ {{ col.header }}
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+ {{ col.header }}
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+ {{ col.header }}
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+
+
+
+ {{col.header}}
+
+
+
+
+ {{rowData[col.field]}}
+
+
+
+
+
+
+
+
+ {{col.header}}
+
+
+
+
+ {{rowData[col.field]}}
+
+
+
+
+
+ Screen Reader
+ Tab Header Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+ tab
+ Moves focus through the header.
+
+
+ enter
+ Activates the focused tab header.
+
+
+ space
+ Activates the focused tab header.
+
+
+ right arrow
+ Moves focus to the next header.
+
+
+ left arrow
+ Moves focus to the previous header.
+
+
+ home
+ Moves focus to the last header.
+
+
+
+ end
+ Moves focus to the first header.
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-tag
+ Tag element
+
+
+ p-tag-rounded
+ Rounded element
+
+
+ p-tag-icon
+ Icon of the tag
+
+
+
+ p-tag-value
+ Value of the tag
+
+ Italy
+
+
+ Italy
+
+
+
+ Italy
+
+ Animations
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ animate-fadein
+ fadein 0.15s linear
+
+
+ animate-fadeout
+ fadeout 0.15s linear
+
+
+ animate-slidedown
+ slidedown 0.45s ease-in-out
+
+
+ animate-slideup
+ slideup 0.45s cubic-bezier(0, 1, 0, 1)
+
+
+ animate-scalein
+ scalein 0.15s linear
+
+
+ animate-fadeinleft
+ fadeinleft 0.15s linear
+
+
+ animate-fadeoutleft
+ fadeoutleft 0.15s linear
+
+
+ animate-fadeinright
+ fadeinright 0.15s linear
+
+
+ animate-fadeoutright
+ fadeoutright 0.15s linear
+
+
+ animate-fadeinup
+ fadeinup 0.15s linear
+
+
+ animate-fadeoutup
+ fadeoutup 0.15s linear
+
+
+ animate-fadeindown
+ fadeindown 0.15s linear
+
+
+ animate-fadeoutup
+ fadeoutup 0.15s linear
+
+
+ animate-width
+ width 0.15s linear
+
+
+ animate-flip
+ flip 0.15s linear
+
+
+ animate-flipup
+ flipup 0.15s linear
+
+
+ animate-flipleft
+ fadein 0.15s linear
+
+
+ animate-flipright
+ flipright 0.15s linear
+
+
+ animate-zoomin
+ zoomin 0.15s linear
+
+
+ animate-zoomindown
+ zoomindown 0.15s linear
+
+
+ animate-zoominleft
+ zoominleft 0.15s linear
+
+
+ animate-zoominright
+ zoominright 0.15s linear
+
+
+
+ animate-zoominup
+ zoominup 0.15s linear
+ Animation Duration
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ animate-duration-0
+ animation-duration: 0s
+
+
+ animate-duration-75
+ animation-duration: 75ms
+
+
+ animate-duration-100
+ animation-duration: 100ms
+
+
+ animate-duration-200
+ animation-duration: 200ms
+
+
+ animate-duration-300
+ animation-duration: 300ms
+
+
+ animate-duration-400
+ animation-duration: 400ms
+
+
+ animate-duration-500
+ animation-duration: 500ms
+
+
+ animate-duration-700
+ animation-duration: 700ms
+
+
+ animate-duration-1000
+ animation-duration: 1000ms
+
+
+ animate-duration-2000
+ animation-duration: 2000ms
+
+
+
+ animate-duration-3000
+ animation-duration: 300ms
+ Animation Delay
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ animate-delay-none
+ animation-duration: 0s
+
+
+ animate-delay-75
+ animation-delay: 75ms
+
+
+ animate-delay-100
+ animation-delay: 100ms
+
+
+ animate-delay-150
+ animation-delay: 150ms
+
+
+ animate-delay-200
+ animation-delay: 200ms
+
+
+ animate-delay-300
+ animation-delay: 300ms
+
+
+ animate-delay-400
+ animation-delay: 400ms
+
+
+ animate-delay-500
+ animation-delay: 500ms
+
+
+ animate-delay-700
+ animation-delay: 700ms
+
+
+
+ animate-delay-1000
+ animation-delay: 1000ms
+ Iteration Count
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ animate-infinite
+ animation-iteration-count: infinite
+
+
+ animate-once
+ animation-iteration-count: 1
+
+
+
+ animate-twice
+ animation-iteration-count: 2
+ Direction
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ animate-normal
+ animation-direction: normal
+
+
+ animate-reverse
+ animation-direction: reverse
+
+
+ animate-alternate
+ animation-direction: alternate
+
+
+
+ animate-alternate-reverse
+ animation-direction: alternate-reverse
+ Timing Function
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ animate-ease-linear
+ animation-timing-function: linear
+
+
+ animate-ease-in
+ animation-timing-function: cubic-bezier(0.4, 0, 1, 1)
+
+
+ animate-ease-out
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1)
+
+
+
+ animate-ease-in-out
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+ Fill Mode
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ animate-fill-none
+ animation-fill-mode: normal
+
+
+ animate-fill-forwards
+ animation-fill-mode: forwards
+
+
+ animate-fill-backwards
+ animation-fill-mode: backwards
+
+
+
+ animate-fill-both
+ animation-fill-mode: both
+ Play State
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ animate-running
+ animation-play-state: running
+
+
+
+ animate-paused
+ animation-play-state: paused
+ Backface Visibility State
+
+
+
+
+
+
+
+ Class
+ Property
+
+
+ backface-visible
+ backface-visibility: visible
+
+
+
+ backface-hidden
+ backface-visibility: hidden
+
+
+
+
+
+
+
+ Important
Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+ tab
+ Moves focus through the input element.
+
+
+
+ enter
+ Executes the command when focus in on the input element.
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-terminal
+ Container element.
+
+
+ p-terminal-content
+ Content of terminal.
+
+
+ p-terminal-prompt
+ Prompt text.
+
+
+ p-terminal-response
+ Command response.
+
+
+
+ p-terminal-input
+ Input element to enter commands.
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+
+
+ tab
+
+ Moves focus to the input.
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+
+ p-inputtextarea
+ Textarea element
+ 
+ Primitive Tokens
+ Semantic Tokens
+ Component Tokens
+ Best Practices
+
+ @for (color of colors; track color) {
+
+ prefix
+ darkModeSelector
+ cssLayer
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+ tab
+ Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence.
+
+
+ shift + tab
+ Add focus to the last item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence.
+
+
+ enter
+ If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.
+
+
+ space
+ If menuitem has a submenu, toggles the visibility of the submenu otherwise activates the menuitem and closes all open overlays.
+
+
+ escape
+ If focus is inside a popup submenu, closes the submenu and moves focus to the root item of the closed submenu.
+
+
+ down arrow
+ Moves focus to the next menuitem within the submenu.
+
+
+ up arrow
+ Moves focus to the previous menuitem within the submenu.
+
+
+ right arrow
+ Opens a submenu if there is one available and moves focus to the first item.
+
+
+ left arrow
+ Closes a submenu and moves focus to the root item of the closed submenu.
+
+
+ home
+ Moves focus to the first menuitem within the submenu.
+
+
+
+ end
+ Moves focus to the last menuitem within the submenu.
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-tieredmenu
+ Container element.
+
+
+ p-menu-list
+ List element.
+
+
+ p-menuitem
+ Menuitem element.
+
+
+ p-menuitem-text
+ Label of a menuitem.
+
+
+ p-menuitem-icon
+ Icon of a menuitem.
+
+
+
+ p-submenu-icon
+ Arrow icon of a submenu.
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-timeline
+ Container element.
+
+
+ p-timeline-left
+ Container element when alignment is left.
+
+
+ p-timeline-right
+ Container element when alignment is right.
+
+
+ p-timeline-top
+ Container element when alignment is top.
+
+
+ p-timeline-bottom
+ Container element when alignment is bottom.
+
+
+ p-timeline-alternate
+ Container element when alignment is alternating.
+
+
+ p-timeline-vertical
+ Container element of a vertical timeline.
+
+
+ p-timeline-horizontal
+ Container element of a horizontal timeline.
+
+
+ p-timeline-event
+ Event element.
+
+
+ p-timeline-event-opposite
+ Opposite of an event content.
+
+
+ p-timeline-event-content
+ Event content.
+
+
+ p-timeline-event-separator
+ Separator element of an event.
+
+
+ p-timeline-event-marker
+ Marker element of an event.
+
+
+
+ p-timeline-event-connector
+ Connector element of an event.
+
+
+
+
Screen Reader
+ Close Button Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+ enter
+ Closes the message.
+
+
+
+ space
+ Closes the message.
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-toast
+ Main container element.
+
+
+ p-toast-message
+ Container of a message item.
+
+
+ p-toast-icon-close
+ Close icon of a message.
+
+
+ p-toast-icon
+ Severity icon.
+
+
+ p-toast-message-content
+ Container of message texts.
+
+
+ p-toast-summary
+ Summary of the message.
+
+
+
+ p-toast-detail
+ Detail of the message.
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+
+ tab
+
+ Moves focus to the button.
+
+
+
+
+ space
+
+ Toggles the checked state.
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-togglebutton
+ Container element.
+
+
+ p-button-icon-left
+ Text element.
+
+
+
+ p-button-icon-right
+ Value element.
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+
+ tab
+
+ Moves focus to the switch.
+
+
+
+
+ space
+
+ Toggles the checked state.
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-inputswitch
+ Container element.
+
+
+ p-inputswitch-checked
+ Container element in active state.
+
+
+
+ p-inputswitch-slider
+ Slider element behind the handle.
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-toolbar
+ Main container element.
+
+
+ p-toolbar-group-start
+ Start content container.
+
+
+ p-toolbar-group-center
+ Center content container.
+
+
+
+ p-toolbar-group-end
+ End content container.
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+
+ escape
+ Closes the tooltip when focus is on the target.
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-tooltip
+ Container element.
+
+
+ p-tooltip-arrow
+ Arrow of the tooltip.
+
+
+
+ p-tooltip-text
+ Text of the tooltip.
+ Screen Reader
+ Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+ tab
+
+ Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+ page tab sequence.
+
+
+
+ shift + tab
+
+ Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
+ page tab sequence.
+
+
+
+ enter
+ Selects the focused treenode.
+
+
+ space
+ Selects the focused treenode.
+
+
+ down arrow
+ Moves focus to the next treenode.
+
+
+ up arrow
+ Moves focus to the previous treenode.
+
+
+ right arrow
+ If node is closed, opens the node otherwise moves focus to the first child node.
+
+
+
+ left arrow
+ If node is open, closes the node otherwise moves focus to the parent node.
+ Screen Reader
+ Closed State Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+
+ tab
+
+ Moves focus to the treeselect element.
+
+
+
+ space
+
+ Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.
+
+
+
+
+ down arrow
+
+ Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
+ Popup Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+
+ tab
+
+ Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.
+
+
+ shift + tab
+ Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.
+
+
+
+ enter
+
+ Selects the focused option, closes the popup if selection mode is single.
+
+
+
+ space
+
+ Selects the focused option, closes the popup if selection mode is single.
+
+
+
+ escape
+
+ Closes the popup, moves focus to the treeselect element.
+
+
+
+ down arrow
+
+ Moves focus to the next treenode.
+
+
+
+ up arrow
+
+ Moves focus to the previous treenode.
+
+
+
+ right arrow
+
+ If node is closed, opens the node otherwise moves focus to the first child node.
+
+
+
+
+ left arrow
+
+ If node is open, closes the node otherwise moves focus to the parent node.
+ Filter Input Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+
+ enter
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+
+ escape
+
+ Closes the popup and moves focus to the treeselect element.
+ Close Button Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+
+ enter
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+ space
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+
+ escape
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+
+
+
+
+ Name
+ Element
+
+
+ p-treeselect
+ Container element.
+
+
+ p-treeselect-label-container
+ Container of the label to display selected items.
+
+
+ p-treeselect-label
+ Label to display selected items.
+
+
+ p-treeselect-trigger
+ Dropdown button.
+
+
+ p-treeselect-panel
+ Overlay panel for items.
+
+
+
+ p-treeselect-items-wrapper
+ List container of items.
+ Screen Reader
+ Sortable Headers Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+ tab
+ Moves through the headers.
+
+
+ enter
+ Sorts the column.
+
+
+
+ space
+ Sorts the column.
+ Keyboard Support
+
+
+
+
+
+
+
+ Key
+ Function
+
+
+ tab
+
+ Moves focus to the first selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the next focusable element in the
+ page tab sequence.
+
+
+
+ shift + tab
+
+ Moves focus to the last selected node when focus enters the component, if there is none then first element receives the focus. If focus is already inside the component, moves focus to the previous focusable element in the
+ page tab sequence.
+
+
+
+ enter
+ Selects the focused treenode.
+
+
+ space
+ Selects the focused treenode.
+
+
+ down arrow
+ Moves focus to the next treenode.
+
+
+ up arrow
+ Moves focus to the previous treenode.
+
+
+ right arrow
+ If node is closed, opens the node otherwise moves focus to the first child node.
+
+
+
+ left arrow
+ If node is open, closes the node otherwise moves focus to the parent node.
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ Brand
+ Sale Rate
+
+
+ Sales
+ Profits
+
+
+ Last Year
+ This Year
+ Last Year
+ This Year
+
+
+
+
+ {{ rowData.lastYearSale }}
+ {{ rowData.thisYearSale }}
+ {{ rowData.lastYearProfit }}
+ {{ rowData.thisYearProfit }}
+
+
+ Totals
+ $3,283,772
+ $2,126,925
+
+
+ Brand
+ Sale Rate
+
+
+ Sales
+ Profits
+
+
+ Last Year
+ This Year
+ Last Year
+ This Year
+
+
+
+
+ {{ rowData.lastYearSale }}
+ {{ rowData.thisYearSale }}
+ {{ rowData.lastYearProfit }}
+ {{ rowData.thisYearProfit }}
+
+
+ Totals
+ $3,283,772
+ $2,126,925
+
+
+ Brand
+ Sale Rate
+
+
+ Sales
+ Profits
+
+
+ Last Year
+ This Year
+ Last Year
+ This Year
+
+
+
+
+ {{ rowData.lastYearSale }}
+ {{ rowData.thisYearSale }}
+ {{ rowData.lastYearProfit }}
+ {{ rowData.thisYearProfit }}
+
+
+ Totals
+ $3,283,772
+ $2,126,925
+
@@ -37,7 +37,7 @@ interface Column {
-
@@ -71,7 +71,7 @@ export class ResizeExpandDoc {
@@ -79,10 +79,10 @@ export class ResizeExpandDoc {
`,
html: `
-
@@ -94,7 +94,7 @@ export class ResizeExpandDoc {
@@ -104,7 +104,7 @@ export class ResizeExpandDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
@@ -136,6 +136,6 @@ export class TreeTableResizeExpandDemo implements OnInit {
];
}
}`,
- service: ['NodeService'],
+ service: ['NodeService']
};
}
diff --git a/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/apps/showcase/doc/treetable/columnresizefitdoc.ts
similarity index 81%
rename from src/app/showcase/doc/treetable/columnresizefitdoc.ts
rename to apps/showcase/doc/treetable/columnresizefitdoc.ts
index 1494877e473..69e93d02750 100644
--- a/src/app/showcase/doc/treetable/columnresizefitdoc.ts
+++ b/apps/showcase/doc/treetable/columnresizefitdoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -12,10 +12,7 @@ interface Column {
selector: 'resize-fit-doc',
template: `
-
@@ -40,7 +37,7 @@ interface Column {
-
@@ -74,7 +71,7 @@ export class ResizeFitDoc {
@@ -82,10 +79,10 @@ export class ResizeFitDoc {
`,
html: `
-
@@ -97,7 +94,7 @@ export class ResizeFitDoc {
@@ -107,7 +104,7 @@ export class ResizeFitDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
@@ -140,6 +137,6 @@ export class TreeTableResizeFitDemo implements OnInit {
}
}`,
- service: ['NodeService'],
+ service: ['NodeService']
};
}
diff --git a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts b/apps/showcase/doc/treetable/columnresizescrollabledoc.ts
similarity index 77%
rename from src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
rename to apps/showcase/doc/treetable/columnresizescrollabledoc.ts
index 7ec314ea54c..3aa21275759 100644
--- a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
+++ b/apps/showcase/doc/treetable/columnresizescrollabledoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -12,21 +12,11 @@ interface Column {
selector: 'resize-scrollable-doc',
template: `
-
@@ -52,7 +42,7 @@ interface Column {
-
@@ -100,11 +90,11 @@ export class ResizeScrollableDoc {
-
@@ -131,7 +121,7 @@ export class ResizeScrollableDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
@@ -164,6 +154,6 @@ export class TreeTableResizeScrollableDemo implements OnInit {
}
}`,
- service: ['NodeService'],
+ service: ['NodeService']
};
}
diff --git a/apps/showcase/doc/treetable/columntoggledoc.ts b/apps/showcase/doc/treetable/columntoggledoc.ts
new file mode 100644
index 00000000000..792510c7915
--- /dev/null
+++ b/apps/showcase/doc/treetable/columntoggledoc.ts
@@ -0,0 +1,181 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+interface Column {
+ field: string;
+ header: string;
+}
+
+@Component({
+ selector: 'column-toggle-doc',
+ template: `
+
-
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
-
@@ -43,7 +37,7 @@ interface Column {
-
+
@@ -76,10 +70,10 @@ export class ConditionalStyleDoc {
-
@@ -87,10 +81,10 @@ export class ConditionalStyleDoc {
`,
html: `
-
@@ -101,10 +95,10 @@ export class ConditionalStyleDoc {
-
@@ -114,7 +108,7 @@ export class ConditionalStyleDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
@@ -147,6 +141,6 @@ export class TreeTableConditionalStyleDemo implements OnInit{
}
}`,
- service: ['NodeService'],
+ service: ['NodeService']
};
}
diff --git a/apps/showcase/doc/treetable/contextmenudoc.ts b/apps/showcase/doc/treetable/contextmenudoc.ts
new file mode 100644
index 00000000000..7bd64f02d30
--- /dev/null
+++ b/apps/showcase/doc/treetable/contextmenudoc.ts
@@ -0,0 +1,202 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MenuItem, MessageService, TreeNode } from 'primeng/api';
+
+interface Column {
+ field: string;
+ header: string;
+}
+
+@Component({
+ selector: 'context-menu-doc',
+ template: `
+
-
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
@@ -37,7 +37,7 @@ interface Column {
-
@@ -84,7 +84,7 @@ export class DynamicColumnsDoc {
-
@@ -93,7 +93,7 @@ export class DynamicColumnsDoc {
`,
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
@@ -125,6 +125,6 @@ export class TreeTableDynamicColumnsDemo implements OnInit {
];
}
}`,
- service: ['NodeService'],
+ service: ['NodeService']
};
}
diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/apps/showcase/doc/treetable/editdoc.ts
similarity index 84%
rename from src/app/showcase/doc/treetable/editdoc.ts
rename to apps/showcase/doc/treetable/editdoc.ts
index 945ed7557e4..381f58ab0eb 100644
--- a/src/app/showcase/doc/treetable/editdoc.ts
+++ b/apps/showcase/doc/treetable/editdoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -26,13 +26,8 @@ interface Column {
-
-
-
+
@@ -81,7 +76,7 @@ export class EditDoc {
-
@@ -111,7 +106,7 @@ export class EditDoc {
-
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+ No data found.
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+ No data found.
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+ No data found.
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+ {{ rowData.size }}
+
+
+ {{ rowData.type }}
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+ {{ rowData.size }}
+
+
+ {{ rowData.type }}
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ Name
+ Size
+ Type
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
@@ -38,24 +29,24 @@ interface Column {
-
@@ -110,26 +101,26 @@ export class PaginatorTemplateDoc {
-
@@ -141,16 +132,16 @@ export class PaginatorTemplateDoc {
-
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
@@ -58,7 +49,7 @@ interface Column {
-
@@ -131,14 +122,14 @@ export class FrozenColumnsDoc {
-
@@ -172,7 +163,7 @@ export class FrozenColumnsDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
@@ -220,6 +211,6 @@ export class TreeTableScrollFrozenColumnsDemo implements OnInit {
}
}`,
- service: ['NodeService'],
+ service: ['NodeService']
};
}
diff --git a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts b/apps/showcase/doc/treetable/scrollhorizontaldoc.ts
similarity index 84%
rename from src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
rename to apps/showcase/doc/treetable/scrollhorizontaldoc.ts
index 1320b6a3e9c..fa0cc425c34 100644
--- a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
+++ b/apps/showcase/doc/treetable/scrollhorizontaldoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -16,14 +16,7 @@ interface Column {
-
@@ -48,7 +41,7 @@ interface Column {
-
@@ -108,7 +101,7 @@ export class ScrollHorizontalDoc {
-
@@ -119,7 +112,7 @@ export class ScrollHorizontalDoc {
typescript: `
import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
interface Column {
field: string;
@@ -147,6 +140,6 @@ export class TreeTableScrollHorizontalDemo implements OnInit {
}
}`,
- service: ['NodeService'],
+ service: ['NodeService']
};
}
diff --git a/src/app/showcase/doc/treetable/scrollverticaldoc.ts b/apps/showcase/doc/treetable/scrollverticaldoc.ts
similarity index 75%
rename from src/app/showcase/doc/treetable/scrollverticaldoc.ts
rename to apps/showcase/doc/treetable/scrollverticaldoc.ts
index 092635dbbbb..59ac34b4c4c 100644
--- a/src/app/showcase/doc/treetable/scrollverticaldoc.ts
+++ b/apps/showcase/doc/treetable/scrollverticaldoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -12,21 +12,11 @@ interface Column {
selector: 'scroll-vertical-doc',
template: `
-
@@ -37,7 +27,7 @@ interface Column {
@@ -47,7 +37,7 @@ interface Column {
-
@@ -83,7 +73,7 @@ export class ScrollVerticalDoc {
@@ -91,12 +81,12 @@ export class ScrollVerticalDoc {
`,
html: `
-
@@ -108,7 +98,7 @@ export class ScrollVerticalDoc {
@@ -118,7 +108,7 @@ export class ScrollVerticalDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
@@ -151,6 +141,6 @@ export class TreeTableScrollVerticalDemo implements OnInit{
}
}`,
- service: ['NodeService'],
+ service: ['NodeService']
};
}
diff --git a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts b/apps/showcase/doc/treetable/selectioncheckboxdoc.ts
similarity index 78%
rename from src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
rename to apps/showcase/doc/treetable/selectioncheckboxdoc.ts
index 4ea49f4be67..ba2308d33a9 100644
--- a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
+++ b/apps/showcase/doc/treetable/selectioncheckboxdoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -14,22 +14,14 @@ interface Column {
-
@@ -40,7 +32,7 @@ interface Column {
-