diff --git a/angular.json b/angular.json index 29d34b6a331..3ff4f70e5a9 100644 --- a/angular.json +++ b/angular.json @@ -118,5 +118,8 @@ } } } + }, + "cli": { + "analytics": false } } \ No newline at end of file diff --git a/src/app/components/calendar/calendar.interface.ts b/src/app/components/calendar/calendar.interface.ts index 69df8cf65a5..a7e19a4dd2c 100644 --- a/src/app/components/calendar/calendar.interface.ts +++ b/src/app/components/calendar/calendar.interface.ts @@ -34,6 +34,16 @@ export interface CalendarTemplates { * Custom header template. */ header(): TemplateRef; + /** + * Custom input icon template. + * @param {Object} context - input icon template params. + */ + inputIconTemplate(context: { + /** + * Click callback + */ + clickCallBack: () => void; + }): TemplateRef<{ clickCallBack: Function }>; /** * Custom previous icon template. */ diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts index 4c6735d0ec8..212b61047cc 100755 --- a/src/app/components/calendar/calendar.ts +++ b/src/app/components/calendar/calendar.ts @@ -49,7 +49,19 @@ export const CALENDAR_VALUE_ACCESSOR: any = { @Component({ selector: 'p-calendar', template: ` - + + + + +
>; + inputIconTemplate: Nullable>; + _disabledDates!: Array; _disabledDays!: Array; @@ -1156,6 +1175,10 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { this.headerTemplate = item.template; break; + case 'inputicon': + this.inputIconTemplate = item.template; + break; + case 'previousicon': this.previousIconTemplate = item.template; break; @@ -1884,7 +1907,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor { this.onModelTouched(); } - onButtonClick(event: Event, inputfield: any) { + onButtonClick(event: Event, inputfield: any = this.inputfieldViewChild?.nativeElement) { if (!this.overlayVisible) { inputfield.focus(); this.showOverlay(); diff --git a/src/app/components/confirmdialog/confirmdialog.interface.ts b/src/app/components/confirmdialog/confirmdialog.interface.ts index 840b67eeb2e..03c930a1a16 100644 --- a/src/app/components/confirmdialog/confirmdialog.interface.ts +++ b/src/app/components/confirmdialog/confirmdialog.interface.ts @@ -15,7 +15,9 @@ export interface ConfirmDialogTemplates { /** * Custom template of message. */ - message(): TemplateRef; + message(context:{ + $implicit?:any + }): TemplateRef; /** * Custom template of icon. */ @@ -28,4 +30,10 @@ export interface ConfirmDialogTemplates { * Custom template of accepticon. */ accepticon(): TemplateRef; + /** + * Headless template. + */ + headless(context:{ + $implicit?:any + }): TemplateRef; } diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts index 3e7f3e3d34d..531788809e5 100755 --- a/src/app/components/confirmdialog/confirmdialog.ts +++ b/src/app/components/confirmdialog/confirmdialog.ts @@ -56,71 +56,76 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{ [attr.aria-labelledby]="getAriaLabelledBy()" [attr.aria-modal]="true" > -
- -
-
- {{ option('header') }} -
- + + + + +
+ +
+
+ {{ option('header') }} +
+ +
-
-
- - - - - - - - -
-
- - -
-
- - -
+
+
+ + +
+
+ + +
+
`, @@ -377,6 +382,10 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy { case 'accepticon': this.acceptIconTemplate = item.template; break; + + case 'headless': + this.headlessTemplate = item.template; + break; } }); } @@ -393,6 +402,8 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy { iconTemplate: Nullable>; + headlessTemplate: Nullable>; + confirmation: Nullable; _visible: boolean | undefined; diff --git a/src/app/components/confirmpopup/confirmpopup.interface.ts b/src/app/components/confirmpopup/confirmpopup.interface.ts index 44de90dec45..bb5e4fe2280 100644 --- a/src/app/components/confirmpopup/confirmpopup.interface.ts +++ b/src/app/components/confirmpopup/confirmpopup.interface.ts @@ -5,6 +5,12 @@ import { TemplateRef } from '@angular/core'; * @group Templates */ export interface ConfirmPopupTemplates { + /** + * Custom content template. + */ + content(context:{ + $implicit?:any + }): TemplateRef; /** * Custom template of rejecticon. */ @@ -13,4 +19,10 @@ export interface ConfirmPopupTemplates { * Custom template of accepticon. */ accepticon(): TemplateRef; + /** + * Headless template. + */ + headless(context:{ + $implicit?:any + }): TemplateRef; } diff --git a/src/app/components/confirmpopup/confirmpopup.ts b/src/app/components/confirmpopup/confirmpopup.ts index 04d7e76183f..c5749f19e52 100755 --- a/src/app/components/confirmpopup/confirmpopup.ts +++ b/src/app/components/confirmpopup/confirmpopup.ts @@ -42,9 +42,18 @@ import { Subscription } from 'rxjs'; (@animation.start)="onAnimationStart($event)" (@animation.done)="onAnimationEnd($event)" > -
- - {{ confirmation?.message }} + + + + +
+ + + + + + {{ confirmation?.message }} +
+
`, animations: [ @@ -164,10 +174,14 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy { confirmation: Nullable; + contentTemplate: Nullable>; + acceptIconTemplate: Nullable>; rejectIconTemplate: Nullable>; + headlessTemplate: Nullable>; + _visible: boolean | undefined; documentClickListener: VoidListener; @@ -214,6 +228,10 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy { ngAfterContentInit() { this.templates?.forEach((item) => { switch (item.getType()) { + case 'content': + this.contentTemplate = item.template; + break; + case 'rejecticon': this.rejectIconTemplate = item.template; break; @@ -221,6 +239,10 @@ export class ConfirmPopup implements AfterContentInit, OnDestroy { case 'accepticon': this.acceptIconTemplate = item.template; break; + + case 'headless': + this.headlessTemplate = item.template; + break; } }); } diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts index 40bfc366306..e52570660c6 100755 --- a/src/app/components/dialog/dialog.ts +++ b/src/app/components/dialog/dialog.ts @@ -48,6 +48,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
+ + + + +
{{ header }} @@ -126,6 +132,7 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
+
`, @@ -241,6 +248,11 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { * @group Props */ @Input() maskStyleClass: string | undefined; + /** + * Style of the mask. + * @group Props + */ + @Input() maskStyle: string | undefined; /** * Whether to show the header or not. * @group Props @@ -455,6 +467,8 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { minimizeIconTemplate: Nullable>; + headlessTemplate: Nullable>; + _visible: boolean = false; maskVisible: boolean | undefined; @@ -544,6 +558,10 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy { this.minimizeIconTemplate = item.template; break; + case 'headless': + this.headlessTemplate = item.template; + break; + default: this.contentTemplate = item.template; break; diff --git a/src/app/components/dynamicdialog/dialogservice.ts b/src/app/components/dynamicdialog/dialogservice.ts index e6992ed1abe..a06ddc24aac 100755 --- a/src/app/components/dynamicdialog/dialogservice.ts +++ b/src/app/components/dynamicdialog/dialogservice.ts @@ -5,6 +5,7 @@ import { DynamicDialogInjector } from './dynamicdialog-injector'; import { DynamicDialogConfig } from './dynamicdialog-config'; import { DynamicDialogRef } from './dynamicdialog-ref'; import { DOCUMENT } from '@angular/common'; +import { ObjectUtils } from 'primeng/utils'; /** * Dynamic Dialog component methods. * @group Service @@ -32,6 +33,14 @@ export class DialogService { return dialogRef; } + /** + * Returns the dynamic dialog component instance. + * @param {ref} DynamicDialogRef - DynamicDialog instance. + * @group Method + */ + public getInstance(ref: DynamicDialogRef) { + return this.dialogComponentRefMap.get(ref).instance; + } private appendDialogComponentToBody(config: DynamicDialogConfig) { const map = new WeakMap(); diff --git a/src/app/components/dynamicdialog/dynamicdialog-config.ts b/src/app/components/dynamicdialog/dynamicdialog-config.ts index fd8b7938519..4e2dc8baf14 100755 --- a/src/app/components/dynamicdialog/dynamicdialog-config.ts +++ b/src/app/components/dynamicdialog/dynamicdialog-config.ts @@ -1,3 +1,6 @@ +import { Component, TemplateRef } from '@angular/core'; +import { ComponentRef } from 'react'; + /** * Dialogs can be created dynamically with any component as the content using a DialogService. * @group Components @@ -158,4 +161,51 @@ export class DynamicDialogConfig { * @group Props */ duplicate?: boolean; + /** + * Object literal to define widths per screen size. + * @group Props + */ + breakpoints?: any; + /** + * Dialog templates. + * @group Props + */ + templates?: DynamicDialogTemplates; +} + +/** + * Defines valid templates in Dynamic Dialog. + * @group Templates + */ +export interface DynamicDialogTemplates { + /** + * Template of the header. + * @group Props + */ + header?: ComponentRef; + /** + * Template of the body. + * @group Props + */ + content?: ComponentRef; + /** + * Template of the footer. + * @group Props + */ + footer?: ComponentRef; + /** + * Template of the minimize icon. + * @group Props + */ + minimizeicon?: ComponentRef; + /** + * Template of the maximize icon. + * @group Props + */ + maximizeicon?: ComponentRef; + /** + * Template of the close icon. + * @group Props + */ + closeicon?: ComponentRef; } diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts index 7ff8183541b..1f364a560f9 100755 --- a/src/app/components/dynamicdialog/dynamicdialog.ts +++ b/src/app/components/dynamicdialog/dynamicdialog.ts @@ -71,23 +71,33 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{ >
- {{ config.header }} -
- - -
+ + + {{ config.header }} +
+ + +
+
- + +
-
- {{ config.footer }} +
+ + {{ config.footer }} + +
@@ -123,6 +133,10 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { ariaLabelledBy: string | undefined; + id: string = UniqueComponentId(); + + styleElement: any; + @ViewChild(DynamicDialogContent) insertionPoint: Nullable; @ViewChild('mask') maskViewChild: Nullable; @@ -203,6 +217,38 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { return this.config.header; } + get data() { + return this.config.data; + } + + get breakpoints() { + return this.config.breakpoints; + } + + get footerTemplate() { + return this.config?.templates?.footer; + } + + get headerTemplate() { + return this.config?.templates?.header; + } + + get contentTemplate() { + return this.config?.templates?.content; + } + + get minimizeIconTemplate() { + return this.config?.templates?.minimizeicon; + } + + get maximizeIconTemplate() { + return this.config?.templates?.maximizeicon; + } + + get closeIconTemplate() { + return this.config?.templates?.closeicon; + } + constructor( @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, @@ -215,6 +261,39 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { @SkipSelf() @Optional() private parentDialog: DynamicDialogComponent ) {} + ngOnInit() { + if (this.breakpoints) { + this.createStyle(); + } + } + createStyle() { + if (isPlatformBrowser(this.platformId)) { + if (!this.styleElement) { + this.styleElement = this.renderer.createElement('style'); + this.styleElement.type = 'text/css'; + this.renderer.appendChild(this.document.head, this.styleElement); + let innerHTML = ''; + for (let breakpoint in this.breakpoints) { + innerHTML += ` + @media screen and (max-width: ${breakpoint}) { + .p-dialog[${this.id}]:not(.p-dialog-maximized) { + width: ${this.breakpoints[breakpoint]} !important; + } + } + `; + } + + this.renderer.setProperty(this.styleElement, 'innerHTML', innerHTML); + } + } + } + destroyStyle() { + if (this.styleElement) { + this.renderer.removeChild(this.document.head, this.styleElement); + this.styleElement = null; + } + } + ngAfterViewInit() { this.loadChildComponent(this.childComponentType!); this.ariaLabelledBy = this.getAriaLabelledBy(); @@ -249,6 +328,7 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { this.unbindGlobalListeners(); } this.bindGlobalListeners(); + this.container?.setAttribute(this.id, ''); if (this.config.modal !== false) { this.enableModality(); @@ -637,6 +717,7 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { if (this.componentRef) { this.componentRef.destroy(); } + this.destroyStyle(); } } diff --git a/src/app/components/inputswitch/inputswitch.css b/src/app/components/inputswitch/inputswitch.css index a073d08bfb1..6cc866516a7 100755 --- a/src/app/components/inputswitch/inputswitch.css +++ b/src/app/components/inputswitch/inputswitch.css @@ -12,6 +12,7 @@ left: 0; right: 0; bottom: 0; + border: 1px solid transparent; } .p-inputswitch-slider:before { diff --git a/src/app/components/progressbar/progressbar.interface.ts b/src/app/components/progressbar/progressbar.interface.ts new file mode 100644 index 00000000000..7c9cebb5f62 --- /dev/null +++ b/src/app/components/progressbar/progressbar.interface.ts @@ -0,0 +1,17 @@ +import { TemplateRef } from '@angular/core'; + +/** + * Defines valid templates in ProgressBar. + * @group Templates + */ +export interface ProgressBarTemplates { + /** + * Custom template of content. + */ + content(context: { + /** + * Value of the progressbar. + */ + $implicit: any; + }): TemplateRef<{ $implicit: number | undefined }>; +} diff --git a/src/app/components/progressbar/progressbar.ts b/src/app/components/progressbar/progressbar.ts index bbd04cb53ca..3f42ca53d30 100755 --- a/src/app/components/progressbar/progressbar.ts +++ b/src/app/components/progressbar/progressbar.ts @@ -1,5 +1,7 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; +import { ChangeDetectionStrategy, Component, TemplateRef, ContentChildren, Input, NgModule, ViewEncapsulation } from '@angular/core'; +import { PrimeTemplate } from 'primeng/api'; +import { QueryList } from '@angular/core'; /** * ProgressBar is a process status indicator. * @group Components @@ -19,7 +21,11 @@ import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation [ngClass]="{ 'p-progressbar p-component': true, 'p-progressbar-determinate': mode === 'determinate', 'p-progressbar-indeterminate': mode === 'indeterminate' }" >
-
{{ value }}{{ unit }}
+
+
{{ value }}{{ unit }}
+ +
+
@@ -69,6 +75,22 @@ export class ProgressBar { * @group Props */ @Input() color: string | undefined; + + @ContentChildren(PrimeTemplate) templates: QueryList | undefined; + + contentTemplate: TemplateRef | undefined; + + ngAfterContentInit() { + this.templates?.forEach((item) => { + switch (item.getType()) { + case 'content': + this.contentTemplate = item.template; + break; + default: + this.contentTemplate = item.template; + } + }); + } } @NgModule({ diff --git a/src/app/components/scroller/scroller.ts b/src/app/components/scroller/scroller.ts index 8501e1f9b1a..8639e0f1cfc 100644 --- a/src/app/components/scroller/scroller.ts +++ b/src/app/components/scroller/scroller.ts @@ -69,7 +69,7 @@ import { ScrollerLazyLoadEvent, ScrollerScrollEvent, ScrollerScrollIndexChangeEv - +
diff --git a/src/app/components/sidebar/sidebar.interface.ts b/src/app/components/sidebar/sidebar.interface.ts index cf80b5838ec..16c6f705405 100644 --- a/src/app/components/sidebar/sidebar.interface.ts +++ b/src/app/components/sidebar/sidebar.interface.ts @@ -21,4 +21,8 @@ export interface SidebarTemplates { * Custom template of closeicon. */ closeicon(): TemplateRef; + /** + * Headless template. + */ + headless(): TemplateRef; } diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts index fb7581f8d27..09909cdb092 100755 --- a/src/app/components/sidebar/sidebar.ts +++ b/src/app/components/sidebar/sidebar.ts @@ -59,6 +59,10 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{ [attr.aria-modal]="modal" (keydown)="onKeyDown($event)" > + + + +
+ `, animations: [trigger('panelState', [transition('void => visible', [useAnimation(showAnimation)]), transition('visible => void', [useAnimation(hideAnimation)])])], @@ -252,6 +257,8 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { closeIconTemplate: Nullable>; + headlessTemplate: Nullable>; + constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {} ngAfterViewInit() { @@ -273,6 +280,9 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { case 'closeicon': this.closeIconTemplate = item.template; break; + case 'headless': + this.headlessTemplate = item.template; + break; default: this.contentTemplate = item.template; diff --git a/src/app/components/tieredmenu/tieredmenu.interface.ts b/src/app/components/tieredmenu/tieredmenu.interface.ts index 74cb83dccf3..6992a00cd3b 100644 --- a/src/app/components/tieredmenu/tieredmenu.interface.ts +++ b/src/app/components/tieredmenu/tieredmenu.interface.ts @@ -5,6 +5,19 @@ import { TemplateRef } from '@angular/core'; * @group Templates */ export interface TieredMenuTemplates { + /** + * Custom template of item. + */ + item(context: { + /** + * Item instance. + */ + $implicit: any; + /** + * Submenu control of the item. + */ + hasSubmenu: boolean; + }): TemplateRef<{ $implicit: any; hasSubmenu:boolean }>; /** * Custom template of submenuicon. */ diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts index 597ede0ee9c..3fbab1a39f1 100755 --- a/src/app/components/tieredmenu/tieredmenu.ts +++ b/src/app/components/tieredmenu/tieredmenu.ts @@ -164,7 +164,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils'; - + @@ -231,7 +231,7 @@ export class TieredMenuSub { @ViewChild('sublist', { static: true }) sublistViewChild: ElementRef; constructor(public el: ElementRef, public renderer: Renderer2, private cd: ChangeDetectorRef, @Inject(forwardRef(() => TieredMenu)) public tieredMenu: TieredMenu) {} - + positionSubmenu() { let sublist = this.sublistViewChild && this.sublistViewChild.nativeElement; diff --git a/src/app/components/toast/toast.interface.ts b/src/app/components/toast/toast.interface.ts index b73f8ebebe0..6879543c9ac 100644 --- a/src/app/components/toast/toast.interface.ts +++ b/src/app/components/toast/toast.interface.ts @@ -15,6 +15,15 @@ export interface ToastTemplates { */ $implicit: any; }): TemplateRef<{ $implicit: any }>; + /** + * Headless template. + */ + headless(context: { + /** + * Data of the message. + */ + $implicit: any; + }): TemplateRef<{ $implicit: any }>; } /** diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts index 5843c4d82ab..f939d0177b4 100755 --- a/src/app/components/toast/toast.ts +++ b/src/app/components/toast/toast.ts @@ -50,37 +50,42 @@ import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast [attr.data-pc-name]="'toast'" [attr.data-pc-section]="'root'" > -
- - - - - - - - - - -
-
{{ message.summary }}
-
{{ message.detail }}
-
- - - -
+ + + + +
+ + + + + + + + + + +
+
{{ message.summary }}
+
{{ message.detail }}
+
+ + + +
+ `, animations: [ @@ -126,6 +131,8 @@ export class ToastItem implements AfterViewInit, OnDestroy { @Input() template: TemplateRef | undefined; + @Input() headlessTemplate: TemplateRef | undefined; + @Input() showTransformOptions: string | undefined; @Input() hideTransformOptions: string | undefined; @@ -209,6 +216,7 @@ export class ToastItem implements AfterViewInit, OnDestroy { [life]="life" (onClose)="onMessageClose($event)" [template]="template" + [headlessTemplate]="headlessTemplate" @toastAnimation (@toastAnimation.start)="onAnimationStart($event)" (@toastAnimation.done)="onAnimationEnd($event)" @@ -328,6 +336,8 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy { template: TemplateRef | undefined; + headlessTemplate: TemplateRef | undefined; + _position: ToastPositionType = 'top-right'; constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, public messageService: MessageService, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {} @@ -409,6 +419,9 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy { case 'message': this.template = item.template; break; + case 'headless': + this.headlessTemplate = item.template; + break; default: this.template = item.template; diff --git a/src/app/showcase/doc/accordion/accordiondoc.module.ts b/src/app/showcase/doc/accordion/accordiondoc.module.ts index 5a61dfe7051..af9852217f7 100644 --- a/src/app/showcase/doc/accordion/accordiondoc.module.ts +++ b/src/app/showcase/doc/accordion/accordiondoc.module.ts @@ -1,8 +1,11 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; +import { FormsModule } from '@angular/forms'; import { AccordionModule } from 'primeng/accordion'; import { ButtonModule } from 'primeng/button'; +import { AvatarModule } from 'primeng/avatar'; +import { BadgeModule } from 'primeng/badge'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; @@ -15,7 +18,7 @@ import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, AccordionModule, ButtonModule, RouterModule], + imports: [CommonModule, AppCodeModule, AppDocModule, AccordionModule, ButtonModule, RouterModule, AvatarModule, BadgeModule, FormsModule], exports: [AppDocModule], declarations: [ImportDoc, BasicDoc, MultipleDoc, DisabledDoc, ControlledDoc, TemplateDoc, StyleDoc, AccessibilityDoc] }) diff --git a/src/app/showcase/doc/accordion/controlleddoc.ts b/src/app/showcase/doc/accordion/controlleddoc.ts index 1da0a9cc1ff..37fcac85fe4 100644 --- a/src/app/showcase/doc/accordion/controlleddoc.ts +++ b/src/app/showcase/doc/accordion/controlleddoc.ts @@ -8,26 +8,26 @@ import { Code } from '../../domain/code';

Tabs can be controlled programmatically using the activeIndex property of the accordion in general or the selected property of p-accordionTab individually.

-
- - - +
+ + +
- + -

+

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.

@@ -38,57 +38,60 @@ import { Code } from '../../domain/code'; ` }) export class ControlledDoc { - activeIndex: number | undefined; + activeIndex: number | undefined = 0; + + activeIndexChange(index : number){ + this.activeIndex = index + } code: Code = { - basic: `
- - - -
- - -

- 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. -

- -`, + basic: `
+ + + +
+ + +

+ 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. +

+ + `, - html: ` -
-
- - - + 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.

@@ -104,7 +107,11 @@ import { Component } from '@angular/core'; templateUrl: './accordion-controlled-demo.html' }) export class AccordionControlledDemo { - activeIndex: number | undefined; + activeIndex: number | undefined = 0; + + activeIndexChange(index : number){ + this.activeIndex = index + } }` }; } diff --git a/src/app/showcase/doc/accordion/templatedoc.ts b/src/app/showcase/doc/accordion/templatedoc.ts index ea6be4bbef1..be20dbbc921 100644 --- a/src/app/showcase/doc/accordion/templatedoc.ts +++ b/src/app/showcase/doc/accordion/templatedoc.ts @@ -11,48 +11,42 @@ import { Code } from '../../domain/code'; -
- - 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. -

+ + + 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. +

-
- - Header II - -
- - -

- 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. -

+ + + 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. +

-
- - 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. -

+ + + 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. +

@@ -62,102 +56,89 @@ import { Code } from '../../domain/code'; export class TemplateDoc { code: Code = { basic: ` - - -
- - 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 - -
- - -

- 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 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. -

- - -`, - - 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. -

+ + + 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. +

-
- - Header II - -
- - -

- 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. -

+ + + 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. +

-
- - 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. -

+ + + 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. +

- +`, + + html: `
+ + + + + + 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. +

+ + + + + + 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. +

+ + + + + + 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: ` diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index b3f237a11bc..2b597e7db8b 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -7874,7 +7874,11 @@ { "parent": "confirmdialog", "name": "message", - "parameters": [], + "parameters": [{ + "name": "context", + "type": "{\n \t $implicit: any, // Data of the message.\n }", + "description": "Message data." + }], "description": "Custom template of message." }, { @@ -7894,6 +7898,16 @@ "name": "accepticon", "parameters": [], "description": "Custom template of accepticon." + }, + { + "parent": "confirmdialog", + "name": "headless", + "parameters": [{ + "name": "context", + "type": "{\n \t $implicit: any, // Data of the message.\n }", + "description": "Message data." + }], + "description": "Headless template." } ] } @@ -7983,6 +7997,16 @@ "templates": { "description": "Defines the templates used by the component.", "values": [ + { + "parent": "confirmpopup", + "name": "content", + "parameters": [{ + "name": "context", + "type": "{\n \t $implicit: any, // Data of the message.\n }", + "description": "Message data." + }], + "description": "Custom content template." + }, { "parent": "confirmpopup", "name": "rejecticon", @@ -7994,6 +8018,16 @@ "name": "accepticon", "parameters": [], "description": "Custom template of accepticon." + }, + { + "parent": "confirmpopup", + "name": "headless", + "parameters": [{ + "name": "context", + "type": "{\n \t $implicit: any, // Data of the message.\n }", + "description": "Message data." + }], + "description": "Headless template." } ] } @@ -8807,6 +8841,13 @@ "type": "string", "description": "Style class of the mask." }, + { + "name": "maskStyle", + "optional": false, + "readonly": false, + "type": "string", + "description": "Style of the mask." + }, { "name": "showHeader", "optional": false, @@ -9079,6 +9120,12 @@ "name": "minimizeicon", "parameters": [], "description": "Custom template of minimizeicon." + }, + { + "parent": "dialog", + "name": "headless", + "parameters": [], + "description": "Headless template." } ] } @@ -19887,6 +19934,12 @@ "name": "closeicon", "parameters": [], "description": "Custom template of closeicon." + }, + { + "parent": "sidebar", + "name": "headless", + "parameters": [], + "description": "Headless template." } ] } @@ -23872,6 +23925,17 @@ } ], "description": "Custom template of message." + }, + { + "parent": "toast", + "name": "headless", + "parameters": [ + { + "name": "context", + "type": "{\n \t $implicit: any, // Data of the message.\n }" + } + ], + "description": "Headless template." } ] } diff --git a/src/app/showcase/doc/autocomplete/groupeddoc.ts b/src/app/showcase/doc/autocomplete/groupeddoc.ts index 816326cf6be..357549fe5e0 100644 --- a/src/app/showcase/doc/autocomplete/groupeddoc.ts +++ b/src/app/showcase/doc/autocomplete/groupeddoc.ts @@ -13,7 +13,7 @@ interface AutoCompleteCompleteEvent {

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.

- +
@@ -87,7 +87,7 @@ export class GroupedDoc implements OnInit { } code: Code = { - basic: ` + basic: `
@@ -96,9 +96,8 @@ export class GroupedDoc implements OnInit { `, - html: ` -
- + html: `
+
diff --git a/src/app/showcase/doc/autocomplete/templatedoc.ts b/src/app/showcase/doc/autocomplete/templatedoc.ts index 897b0309443..ae86a6fcca2 100644 --- a/src/app/showcase/doc/autocomplete/templatedoc.ts +++ b/src/app/showcase/doc/autocomplete/templatedoc.ts @@ -13,7 +13,7 @@ interface AutoCompleteCompleteEvent {

item template allows displaying custom content inside the suggestions panel. The local ng-template variable passed to the ng-template is an object in the suggestions array.

- +
@@ -54,7 +54,7 @@ export class TemplateDoc { code: Code = { basic: ` + (completeMethod)="filterCountry($event)" field="name">
@@ -65,7 +65,7 @@ export class TemplateDoc { html: `
- +
diff --git a/src/app/showcase/doc/button/badgedoc.ts b/src/app/showcase/doc/button/badgedoc.ts index 0b57007c43e..17a99677485 100644 --- a/src/app/showcase/doc/button/badgedoc.ts +++ b/src/app/showcase/doc/button/badgedoc.ts @@ -7,9 +7,9 @@ import { Code } from '../../domain/code';

Buttons have built-in badge support with badge and badgeClass properties.

 -
- - +
+ +
` @@ -17,12 +17,11 @@ import { Code } from '../../domain/code'; export class BadgeDoc { code: Code = { basic: ` -`, +`, - html: ` -
+ html: `
- +
`, typescript: ` diff --git a/src/app/showcase/doc/button/linkdoc.ts b/src/app/showcase/doc/button/linkdoc.ts index 091761ed422..b7df282e917 100644 --- a/src/app/showcase/doc/button/linkdoc.ts +++ b/src/app/showcase/doc/button/linkdoc.ts @@ -7,19 +7,21 @@ import { Code } from '../../domain/code';

A button can be rendered as a link as well.

 -
- +
+ + Navigate
` }) export class LinkDoc { code: Code = { - basic: ``, + basic: ` +Navigate`, - html: ` -
- + html: `
+ + Navigate
`, typescript: ` diff --git a/src/app/showcase/doc/button/templatedoc.ts b/src/app/showcase/doc/button/templatedoc.ts index fe345431b09..c181a820674 100644 --- a/src/app/showcase/doc/button/templatedoc.ts +++ b/src/app/showcase/doc/button/templatedoc.ts @@ -9,8 +9,16 @@ import { Code } from '../../domain/code';
- logo - PrimeNG + + + +
@@ -19,16 +27,31 @@ import { Code } from '../../domain/code'; export class TemplateDoc { code: Code = { basic: ` - logo - PrimeNG + + + + `, - html: ` -
- - logo - PrimeNG - + html: `
+ + + + + +
`, typescript: ` diff --git a/src/app/showcase/doc/calendar/calendardoc.module.ts b/src/app/showcase/doc/calendar/calendardoc.module.ts index a5a46e677b4..93af58b847c 100644 --- a/src/app/showcase/doc/calendar/calendardoc.module.ts +++ b/src/app/showcase/doc/calendar/calendardoc.module.ts @@ -29,6 +29,9 @@ import { MethodsDoc } from './methodsdoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { TemplatesDoc } from './templatesdoc'; +import { FloatLabelDoc } from './floatlabeldoc'; +import { InvalidDoc } from './invaliddoc'; +import { DisabledDoc } from './disableddoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, CalendarModule, ReactiveFormsModule], @@ -57,7 +60,10 @@ import { TemplatesDoc } from './templatesdoc'; MethodsDoc, TemplatesDoc, AccessibilityDoc, - ReactiveFormsDoc + ReactiveFormsDoc, + FloatLabelDoc, + InvalidDoc, + DisabledDoc ] }) export class CalendarDocModule {} diff --git a/src/app/showcase/doc/calendar/disableddoc.ts b/src/app/showcase/doc/calendar/disableddoc.ts new file mode 100644 index 00000000000..a0a7f9d36ad --- /dev/null +++ b/src/app/showcase/doc/calendar/disableddoc.ts @@ -0,0 +1,37 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'calendar-disabled-demo', + template: ` + +

When disabled is present, the element cannot be edited and focused.

+ +
+ +
+ + ` +}) +export class DisabledDoc { + date: Date | undefined; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'calendar-disabled-demo', + templateUrl: './calendar-disabled-demo.html' +}) +export class CalendarDisabledDemo { + date: Date | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/calendar/floatlabeldoc.ts b/src/app/showcase/doc/calendar/floatlabeldoc.ts new file mode 100644 index 00000000000..c350ca631b4 --- /dev/null +++ b/src/app/showcase/doc/calendar/floatlabeldoc.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'calendar-float-label-demo', + template: ` + +

A floating label appears on top of the input field when focused.

+ +
+ + + + +
+ + ` +}) +export class FloatLabelDoc { + date: Date | undefined; + + code: Code = { + basic: ` + + +`, + + html: `
+ + + + +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'calendar-float-label-demo', + templateUrl: './calendar-float-label-demo.html' +}) +export class CalendarFloatLabelDemo { + date: Date | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/calendar/icondoc.ts b/src/app/showcase/doc/calendar/icondoc.ts index b41045f199f..eb09a929c71 100644 --- a/src/app/showcase/doc/calendar/icondoc.ts +++ b/src/app/showcase/doc/calendar/icondoc.ts @@ -7,32 +7,78 @@ import { Code } from '../../domain/code';

An additional icon is displayed next to the input field when showIcon is present.

 -
- +
+
+ + +
+ +
+ + +
+ +
+ + + + + + +
` }) export class IconDoc { - date: Date | undefined; + date1: Date | undefined; + + date2: Date | undefined; + + date3: Date | undefined; code: Code = { - basic: ``, + basic: ` + + + + + +`, + + html: `
+
+ + +
- html: ` -
- +
+ + +
+ +
+ + + + + + +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; @Component({ selector: 'calendar-icon-demo', templateUrl: './calendar-icon-demo.html' }) export class CalendarIconDemo { - date: Date | undefined; + date1: Date | undefined; + + date2: Date | undefined; + + date3: Date | undefined; }` }; } diff --git a/src/app/showcase/doc/calendar/invaliddoc.ts b/src/app/showcase/doc/calendar/invaliddoc.ts new file mode 100644 index 00000000000..57e8a31e61b --- /dev/null +++ b/src/app/showcase/doc/calendar/invaliddoc.ts @@ -0,0 +1,37 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'calendar-invalid-demo', + template: ` + +

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.

+ +
+ +
+ + ` +}) +export class InvalidDoc { + date: Date | undefined; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'calendar-invalid-demo', + templateUrl: './calendar-invalid-demo.html' +}) +export class CalendarInvalidDemo { + date: Date | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts b/src/app/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts index 6feca3da20d..1ec62d4a328 100644 --- a/src/app/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts +++ b/src/app/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts @@ -8,13 +8,15 @@ import { AppCodeModule } from '../../layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; +import { InvalidDoc } from './invaliddoc'; +import { FloatLabelDoc } from './floatlabeldoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; - +import { DisabledDoc } from './disableddoc'; @NgModule({ imports: [CommonModule, RouterModule, CascadeSelectModule, FormsModule, AppCodeModule, AppDocModule, ReactiveFormsModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, TemplateDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, TemplateDoc, InvalidDoc, FloatLabelDoc,DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] }) export class CascadeSelectDocModule {} diff --git a/src/app/showcase/doc/cascadeselect/disableddoc.ts b/src/app/showcase/doc/cascadeselect/disableddoc.ts new file mode 100644 index 00000000000..b1a8897c93a --- /dev/null +++ b/src/app/showcase/doc/cascadeselect/disableddoc.ts @@ -0,0 +1,36 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@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'; + +@Component({ + selector: 'cascade-select-disabled-demo', + templateUrl: './cascade-select-disabled-demo.html' +}) +export class CascadeSelectDisabledDemo { + +}` + }; +} diff --git a/src/app/showcase/doc/cascadeselect/floatlabeldoc.ts b/src/app/showcase/doc/cascadeselect/floatlabeldoc.ts new file mode 100644 index 00000000000..b765747d03c --- /dev/null +++ b/src/app/showcase/doc/cascadeselect/floatlabeldoc.ts @@ -0,0 +1,233 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'cascade-select-float-label-demo', + template: ` + +

+ A floating label appears on top of the input field when focused. +

+ +
+ + + + +
+ + ` +}) +export class FloatLabelDoc { + 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'; + +@Component({ + selector: 'cascade-select-float-label-demo', + templateUrl: './cascade-select-float-label-demo.html' +}) +export class CascadeSelectFloatLabelDemo 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/src/app/showcase/doc/cascadeselect/invaliddoc.ts b/src/app/showcase/doc/cascadeselect/invaliddoc.ts new file mode 100644 index 00000000000..da54ba75b2b --- /dev/null +++ b/src/app/showcase/doc/cascadeselect/invaliddoc.ts @@ -0,0 +1,195 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@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'; + +@Component({ + selector: 'cascade-select-invalid-demo', + templateUrl: './cascade-select-invalid-demo.html' +}) +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/src/app/showcase/doc/checkbox/checkboxdoc.module.ts b/src/app/showcase/doc/checkbox/checkboxdoc.module.ts index f0332123e11..3e6d61da5d4 100644 --- a/src/app/showcase/doc/checkbox/checkboxdoc.module.ts +++ b/src/app/showcase/doc/checkbox/checkboxdoc.module.ts @@ -11,6 +11,7 @@ import { MultipleDoc } from './multipledoc'; import { LabelDoc } from './labeldoc'; import { DynamicDoc } from './dynamicdoc'; import { DisabledDoc } from './disableddoc'; +import { InvalidDoc } from './invaliddoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; @@ -18,6 +19,6 @@ import { ReactiveFormsDoc } from './reactiveformsdoc'; @NgModule({ imports: [CommonModule, RouterModule, FormsModule, AppCodeModule, AppDocModule, CheckboxModule, ReactiveFormsModule], exports: [ImportDoc], - declarations: [ImportDoc, BasicDoc, MultipleDoc, LabelDoc, DynamicDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, MultipleDoc, LabelDoc, DynamicDoc, DisabledDoc, InvalidDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] }) export class CheckboxDocModule {} diff --git a/src/app/showcase/doc/checkbox/dynamicdoc.ts b/src/app/showcase/doc/checkbox/dynamicdoc.ts index 443b801b71a..564832ebcd7 100644 --- a/src/app/showcase/doc/checkbox/dynamicdoc.ts +++ b/src/app/showcase/doc/checkbox/dynamicdoc.ts @@ -10,8 +10,7 @@ import { Code } from '../../domain/code';
- - +
@@ -30,16 +29,14 @@ export class DynamicDoc { code: Code = { basic: `
- - +
`, html: `
- - +
`, diff --git a/src/app/showcase/doc/checkbox/invaliddoc.ts b/src/app/showcase/doc/checkbox/invaliddoc.ts new file mode 100644 index 00000000000..1fc976c927d --- /dev/null +++ b/src/app/showcase/doc/checkbox/invaliddoc.ts @@ -0,0 +1,38 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'checkbox-invalid-demo', + template: ` + +

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.

+ +
+ +
+ + ` +}) +export class InvalidDoc { + checked: boolean = false; + + code: Code = { + basic: ``, + + html: ` +
+ +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'checkbox-invalid-demo', + templateUrl: './checkbox-invalid-demo.html' +}) +export class CheckboxInvalidDemo { + checked: boolean = false; +}` + }; +} diff --git a/src/app/showcase/doc/checkbox/multipledoc.ts b/src/app/showcase/doc/checkbox/multipledoc.ts index c431cfc9788..d918ff8fc6a 100644 --- a/src/app/showcase/doc/checkbox/multipledoc.ts +++ b/src/app/showcase/doc/checkbox/multipledoc.ts @@ -7,56 +7,53 @@ import { Code } from '../../domain/code';

Multiple checkboxes can be grouped together.

 -
-
- - +
+
+
-
- - +
+
-
- - +
+ +
+
+
` }) export class MultipleDoc { - selectedCities: string[] = []; + pizza: string[] = []; code: Code = { - basic: `
- - -
- -
- - -
- -
- - + basic: `
+ +
+
+ +
+
+ +
+
+
`, - html: ` -
-
- - + html: `
+
+
-
- - +
+
-
- - +
+
+
+ +
`, typescript: ` @@ -67,7 +64,7 @@ import { Component } from '@angular/core'; templateUrl: './checkbox-multiple-demo.html' }) export class CheckboxMultipleDemo { - selectedCities: string[] = []; + pizza: string[] = []; }` }; } diff --git a/src/app/showcase/doc/chip/templatedoc.ts b/src/app/showcase/doc/chip/templatedoc.ts index 02840522078..67aefb7084f 100644 --- a/src/app/showcase/doc/chip/templatedoc.ts +++ b/src/app/showcase/doc/chip/templatedoc.ts @@ -8,8 +8,9 @@ import { Code } from '../../domain/code';

Content can easily be customized with the dynamic content instead of using the built-in modes.

- -
Content
+ + P + PRIME
@@ -17,13 +18,14 @@ import { Code } from '../../domain/code'; }) export class TemplateDoc { code: Code = { - basic: ` -
Content
+ basic: ` + P + PRIME `, - html: ` -
- -
Content
+ html: `
+ + P + PRIME
`, typescript: ` diff --git a/src/app/showcase/doc/confirmdialog/basicdoc.ts b/src/app/showcase/doc/confirmdialog/basicdoc.ts index 26c178e7508..65598716a89 100644 --- a/src/app/showcase/doc/confirmdialog/basicdoc.ts +++ b/src/app/showcase/doc/confirmdialog/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { ConfirmEventType, ConfirmationService, MessageService } from 'primeng/api'; +import { ConfirmationService, MessageService } from 'primeng/api'; import { Code } from '../../domain/code'; @Component({ @@ -10,9 +10,9 @@ import { Code } from '../../domain/code';
- - - + + +
`, @@ -21,60 +21,55 @@ import { Code } from '../../domain/code'; export class BasicDoc { constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} - confirm1() { + confirm1(event: Event) { this.confirmationService.confirm({ + target: event.target as EventTarget, message: 'Are you sure that you want to proceed?', header: 'Confirmation', icon: 'pi pi-exclamation-triangle', + acceptIcon:"none", + rejectIcon:"none", + rejectButtonStyleClass:"p-button-text", accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' }); }, - reject: (type: ConfirmEventType) => { - switch (type) { - case ConfirmEventType.REJECT: - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); - break; - case ConfirmEventType.CANCEL: - this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' }); - break; - } + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); } }); } - confirm2() { + confirm2(event: Event) { this.confirmationService.confirm({ + target: event.target as EventTarget, message: 'Do you want to delete this record?', header: 'Delete Confirmation', icon: 'pi pi-info-circle', + acceptButtonStyleClass:"p-button-danger p-button-text", + rejectButtonStyleClass:"p-button-text p-button-text", + acceptIcon:"none", + rejectIcon:"none", + accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted' }); }, - reject: (type: ConfirmEventType) => { - switch (type) { - case ConfirmEventType.REJECT: - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); - break; - case ConfirmEventType.CANCEL: - this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' }); - break; - } + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); } }); } code: Code = { basic: ` - - -`, + + +`, - html: ` -
+ html: `
- - - + + +
`, typescript: ` @@ -86,47 +81,43 @@ import { ConfirmationService, MessageService, ConfirmEventType } from 'primeng/a templateUrl: './confirm-dialog-basic-demo.html', providers: [ConfirmationService, MessageService] }) -export class ConfirmBasicDoc { +export class ConfirmDialogBasicDemo { constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} - confirm1() { + confirm1(event: Event) { this.confirmationService.confirm({ + target: event.target as EventTarget, message: 'Are you sure that you want to proceed?', header: 'Confirmation', icon: 'pi pi-exclamation-triangle', + acceptIcon:"none", + rejectIcon:"none", + rejectButtonStyleClass:"p-button-text", accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' }); }, - reject: (type) => { - switch (type: ConfirmEventType) { - case ConfirmEventType.REJECT: - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); - break; - case ConfirmEventType.CANCEL: - this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' }); - break; - } + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); } }); } - confirm2() { + confirm2(event: Event) { this.confirmationService.confirm({ + target: event.target as EventTarget, message: 'Do you want to delete this record?', header: 'Delete Confirmation', icon: 'pi pi-info-circle', + acceptButtonStyleClass:"p-button-danger p-button-text", + rejectButtonStyleClass:"p-button-text p-button-text", + acceptIcon:"none", + rejectIcon:"none", + accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted' }); }, - reject: (type) => { - switch (type: ConfirmEventType) { - case ConfirmEventType.REJECT: - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); - break; - case ConfirmEventType.CANCEL: - this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' }); - break; - } + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); } }); } diff --git a/src/app/showcase/doc/confirmdialog/confirmdialogdoc.module.ts b/src/app/showcase/doc/confirmdialog/confirmdialogdoc.module.ts index 02d4f495156..97fb1842268 100644 --- a/src/app/showcase/doc/confirmdialog/confirmdialogdoc.module.ts +++ b/src/app/showcase/doc/confirmdialog/confirmdialogdoc.module.ts @@ -11,11 +11,12 @@ import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; import { PositionDoc } from './positiondoc'; import { TemplateDoc } from './templatedoc'; +import { HeadlessDoc } from './headlessdoc'; import { AccessibilityDoc } from './accessibilitydoc'; @NgModule({ imports: [CommonModule, AppCodeModule, RouterModule, ConfirmDialogModule, ButtonModule, ToastModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, StyleDoc, PositionDoc, TemplateDoc, AccessibilityDoc], + declarations: [BasicDoc, ImportDoc, StyleDoc, PositionDoc, TemplateDoc, HeadlessDoc, AccessibilityDoc], exports: [AppDocModule] }) export class ConfirmDialogDocModule {} diff --git a/src/app/showcase/doc/confirmdialog/headlessdoc.ts b/src/app/showcase/doc/confirmdialog/headlessdoc.ts new file mode 100644 index 00000000000..11180479d79 --- /dev/null +++ b/src/app/showcase/doc/confirmdialog/headlessdoc.ts @@ -0,0 +1,115 @@ +import { Component } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'confirm-dialog-headless-demo', + template: ` + +

Headless mode allows you to customize the entire user interface instead of the default elements.

+ +
+ + + +
+
+ +
+ {{ message.header }} +

{{ message.message }}

+
+ + +
+
+ + + +
+ + `, + providers: [ConfirmationService, MessageService] +}) +export class HeadlessDoc { + constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} + + confirm() { + this.confirmationService.confirm({ + header: 'Are you sure?', + message: 'Please confirm to proceed.', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); + } + }); + } + + code: Code = { + basic: ` + + +
+
+ +
+ {{ message.header }} +

{{ message.message }}

+
+ + +
+
+ + +`, + + html: `
+ + + +
+
+ +
+ {{ message.header }} +

{{ message.message }}

+
+ + +
+
+ + + +
`, + + typescript: ` +import { Component } from '@angular/core'; +import { ConfirmationService, MessageService, ConfirmEventType } from 'primeng/api'; + +@Component({ + selector: 'confirm-dialog-headless-demo', + templateUrl: './confirm-dialog-headless-demo.html', + providers: [ConfirmationService, MessageService] +}) +export class ConfirmDialogHeadlessDemo { + constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} + + confirm() { + this.confirmationService.confirm({ + header: 'Are you sure?', + message: 'Please confirm to proceed.', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); + } + }); + } +}` + }; +} diff --git a/src/app/showcase/doc/confirmdialog/positiondoc.ts b/src/app/showcase/doc/confirmdialog/positiondoc.ts index 8ae6cf2a876..ea1b187d419 100644 --- a/src/app/showcase/doc/confirmdialog/positiondoc.ts +++ b/src/app/showcase/doc/confirmdialog/positiondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { ConfirmEventType, ConfirmationService, MessageService } from 'primeng/api'; +import { ConfirmationService, MessageService } from 'primeng/api'; import { Code } from '../../domain/code'; @Component({ @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
- +
@@ -39,21 +39,17 @@ export class PositionDoc { this.position = position; this.confirmationService.confirm({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', + message: 'Are you sure you want to proceed?', + header: 'Confirmation', icon: 'pi pi-info-circle', + acceptIcon:"none", + rejectIcon:"none", + rejectButtonStyleClass:"p-button-text", accept: () => { - this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted' }); + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted' }); }, - reject: (type: ConfirmEventType) => { - switch (type) { - case ConfirmEventType.REJECT: - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); - break; - case ConfirmEventType.CANCEL: - this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' }); - break; - } + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 }); }, key: 'positionDialog' }); @@ -61,26 +57,7 @@ export class PositionDoc { code: Code = { basic: ` - -
- - -
-
- - - -
-
- - - -
`, - - html: ` -
- - +
@@ -94,7 +71,25 @@ export class PositionDoc { -
+
`, + + html: `
+ + +
+ + +
+
+ + + +
+
+ + + +
`, typescript: ` @@ -106,7 +101,7 @@ import { ConfirmationService, MessageService, ConfirmEventType } from 'primeng/a templateUrl: './confirm-dialog-position-demo.html', providers: [ConfirmationService, MessageService] }) -export class ConfirmPositionDoc { +export class ConfirmDialogPositionDemo { position: string = 'center'; constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} @@ -115,21 +110,17 @@ export class ConfirmPositionDoc { this.position = position; this.confirmationService.confirm({ - message: 'Do you want to delete this record?', - header: 'Delete Confirmation', + message: 'Are you sure you want to proceed?', + header: 'Confirmation', icon: 'pi pi-info-circle', + acceptIcon:"none", + rejectIcon:"none", + rejectButtonStyleClass:"p-button-text", accept: () => { - this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted' }); + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted' }); }, - reject: (type: ConfirmEventType) => { - switch (type) { - case ConfirmEventType.REJECT: - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); - break; - case ConfirmEventType.CANCEL: - this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' }); - break; - } + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 }); }, key: 'positionDialog' }); diff --git a/src/app/showcase/doc/confirmdialog/templatedoc.ts b/src/app/showcase/doc/confirmdialog/templatedoc.ts index eb1bc7bc48b..110055cf54d 100644 --- a/src/app/showcase/doc/confirmdialog/templatedoc.ts +++ b/src/app/showcase/doc/confirmdialog/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { ConfirmEventType, ConfirmationService, MessageService } from 'primeng/api'; +import { ConfirmationService, MessageService } from 'primeng/api'; import { Code } from '../../domain/code'; @Component({ @@ -17,22 +17,15 @@ import { Code } from '../../domain/code';
- - -

Header Content

- - - - - -

Message Template

- - - - + + +
+ +

{{ message.message }}

+
- +
`, @@ -41,62 +34,46 @@ import { Code } from '../../domain/code'; export class TemplateDoc { constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} - confirm1() { + confirm() { this.confirmationService.confirm({ + header: 'Confirmation', + message: 'Please confirm to proceed moving forward.', + acceptIcon: 'pi pi-check mr-2', + rejectIcon: 'pi pi-times mr-2', + rejectButtonStyleClass: 'p-button-sm', + acceptButtonStyleClass: 'p-button-outlined p-button-sm', accept: () => { - this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' }); + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, - reject: (type: ConfirmEventType) => { - switch (type) { - case ConfirmEventType.REJECT: - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); - break; - case ConfirmEventType.CANCEL: - this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' }); - break; - } + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); } }); } code: Code = { basic: ` - - -

Header Content

- - - - - -

Message Template

- - - - + + +
+ +

{{ message.message }}

+
+ + +`, + + html: `
+ + + +
+ +

{{ message.message }}

+
-`, - - html: ` -
- - - -

Header Content

- - - - - -

Message Template

- - - - - - - +
`, typescript: ` @@ -108,26 +85,26 @@ import { ConfirmationService, MessageService, ConfirmEventType } from 'primeng/a templateUrl: './confirm-dialog-template-demo.html', providers: [ConfirmationService, MessageService] }) -export class ConfirmTemplateDoc { +export class ConfirmDialogTemplateDemo { constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} - confirm1() { + confirm() { this.confirmationService.confirm({ + header: 'Confirmation', + message: 'Please confirm to proceed moving forward.', + acceptIcon: 'pi pi-check mr-2', + rejectIcon: 'pi pi-times mr-2', + rejectButtonStyleClass: 'p-button-sm', + acceptButtonStyleClass: 'p-button-outlined p-button-sm', accept: () => { - this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' }); + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, - reject: (type: ConfirmEventType) => { - switch (type) { - case ConfirmEventType.REJECT: - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); - break; - case ConfirmEventType.CANCEL: - this.messageService.add({ severity: 'warn', summary: 'Cancelled', detail: 'You have cancelled' }); - break; - } + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); } }); } + }` }; } diff --git a/src/app/showcase/doc/confirmpopup/basicdoc.ts b/src/app/showcase/doc/confirmpopup/basicdoc.ts index 7ee63e613f9..6e719a229dd 100644 --- a/src/app/showcase/doc/confirmpopup/basicdoc.ts +++ b/src/app/showcase/doc/confirmpopup/basicdoc.ts @@ -6,12 +6,13 @@ import { Code } from '../../domain/code'; selector: 'confirm-popup-basic-demo', template: ` -

ConfirmDialog is defined using p-confirmDialog tag and an instance of ConfirmationService is required to display it bycalling confirm method.

+

ConfirmPopup is defined using p-confirmPopup tag and an instance of ConfirmationService is required to display it bycalling confirm method.
- + +
`, @@ -20,30 +21,46 @@ import { Code } from '../../domain/code'; export class BasicDoc { constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} - confirm(event: Event) { + confirm1(event: Event) { this.confirmationService.confirm({ target: event.target as EventTarget, - message: 'Are you sure that you want to proceed?', + message: 'Are you sure you want to proceed?', icon: 'pi pi-exclamation-triangle', accept: () => { - this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' }); + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, reject: () => { - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); + } + }); + } + + confirm2(event: Event) { + this.confirmationService.confirm({ + target: event.target as EventTarget, + message: 'Do you want to delete this record?', + icon: 'pi pi-info-circle', + acceptButtonStyleClass: 'p-button-danger p-button-sm', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); } }); } code: Code = { basic: ` - -`, + + +`, - html: ` -
+ html: `
- + +
`, typescript: ` @@ -58,16 +75,31 @@ import { ConfirmationService, MessageService } from 'primeng/api'; export class ConfirmPopupBasicDemo { constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} - confirm(event: Event) { + confirm1(event: Event) { this.confirmationService.confirm({ target: event.target as EventTarget, - message: 'Are you sure that you want to proceed?', + message: 'Are you sure you want to proceed?', icon: 'pi pi-exclamation-triangle', accept: () => { - this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' }); + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); + } + }); + } + + confirm2(event: Event) { + this.confirmationService.confirm({ + target: event.target as EventTarget, + message: 'Do you want to delete this record?', + icon: 'pi pi-info-circle', + acceptButtonStyleClass: 'p-button-danger p-button-sm', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 }); }, reject: () => { - this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' }); + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); } }); } diff --git a/src/app/showcase/doc/confirmpopup/confirmpopupdoc.module.ts b/src/app/showcase/doc/confirmpopup/confirmpopupdoc.module.ts index 95400fa7107..d7ab306c904 100644 --- a/src/app/showcase/doc/confirmpopup/confirmpopupdoc.module.ts +++ b/src/app/showcase/doc/confirmpopup/confirmpopupdoc.module.ts @@ -12,11 +12,13 @@ import { PropsDoc } from './propsdoc'; import { StyleDoc } from './styledoc'; import { ConfirmationApiDoc } from './confirmationapidoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { TemplateDoc } from './templatedoc'; import { TemplatesDoc } from './templatesdoc'; +import { HeadlessDoc } from './headlessdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, RouterModule, ConfirmPopupModule, ButtonModule, ToastModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, PropsDoc, StyleDoc, ConfirmationApiDoc, AccessibilityDoc, TemplatesDoc], + declarations: [BasicDoc, ImportDoc, PropsDoc, StyleDoc, ConfirmationApiDoc, AccessibilityDoc, TemplatesDoc, TemplateDoc, HeadlessDoc], exports: [AppDocModule] }) export class ConfirmPopupDocModule {} diff --git a/src/app/showcase/doc/confirmpopup/headlessdoc.ts b/src/app/showcase/doc/confirmpopup/headlessdoc.ts new file mode 100644 index 00000000000..e9374516d48 --- /dev/null +++ b/src/app/showcase/doc/confirmpopup/headlessdoc.ts @@ -0,0 +1,123 @@ +import { Component, ViewChild } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { Code } from '../../domain/code'; +import { ConfirmPopup } from 'primeng/confirmpopup'; +@Component({ + selector: 'confirm-popup-headless-demo', + template: ` + +

Headless mode allows you to customize the entire user interface instead of the default elements.

+ +
+ + + +
+ {{ message.message }} +
+ + +
+
+ + + +
+ + `, + providers: [ConfirmationService, MessageService] +}) +export class HeadlessDoc { + constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} + + @ViewChild(ConfirmPopup) confirmPopup!: ConfirmPopup; + + accept() { + this.confirmPopup.accept(); + } + + reject() { + this.confirmPopup.reject(); + } + + confirm(event: Event) { + this.confirmationService.confirm({ + target: event.target as EventTarget, + message: 'Are you sure? You cannot undo this.', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); + } + }); + } + + code: Code = { + basic: ` + + +
+ {{ message.message }} +
+ + +
+
+ + +`, + + html: `
+ + + +
+ {{ message.message }} +
+ + +
+
+ + +`, + + typescript: ` +import { Component, ViewChild } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { ConfirmPopup } from 'primeng/confirmpopup'; + +@Component({ + selector: 'confirm-popup-headless-demo', + templateUrl: './confirm-popup-headless-demo.html', + providers: [ConfirmationService, MessageService] +}) +export class ConfirmPopupHeadlessDemo { + constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} + + @ViewChild(ConfirmPopup) confirmPopup!: ConfirmPopup; + + accept() { + this.confirmPopup.accept(); + } + + reject() { + this.confirmPopup.reject(); + } + + confirm(event: Event) { + this.confirmationService.confirm({ + target: event.target as EventTarget, + message: 'Are you sure? You cannot undo this.', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); + } + }); + } +}` + }; +} diff --git a/src/app/showcase/doc/confirmpopup/templatedoc.ts b/src/app/showcase/doc/confirmpopup/templatedoc.ts new file mode 100644 index 00000000000..2d893bfcffa --- /dev/null +++ b/src/app/showcase/doc/confirmpopup/templatedoc.ts @@ -0,0 +1,105 @@ +import { Component } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'confirm-popup-template-demo', + template: ` + +

Content section can be customized using content template.

+ +
+ + + +
+ +

{{ message.message }}

+
+ + + +
+ + `, + providers: [ConfirmationService, MessageService] +}) +export class TemplateDoc { + constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} + + confirm(event: Event) { + this.confirmationService.confirm({ + target: event.target as EventTarget, + message: 'Please confirm to proceed moving forward.', + icon: 'pi pi-exclamation-circle', + acceptIcon: 'pi pi-check mr-1', + rejectIcon: 'pi pi-times mr-1', + rejectButtonStyleClass: 'p-button-danger p-button-sm', + acceptButtonStyleClass: 'p-button-outlined p-button-sm', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); + } + }); + } + + + code: Code = { + basic: ` + + +
+ +

{{ message.message }}

+
+ + +`, + + html: `
+ + + +
+ +

{{ message.message }}

+
+ + + +
`, + + typescript: ` +import { Component } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; + +@Component({ + selector: 'confirm-popup-template-demo', + templateUrl: './confirm-popup-template-demo.html', + providers: [ConfirmationService, MessageService] +}) +export class ConfirmPopupTemplateDemo { + constructor(private confirmationService: ConfirmationService, private messageService: MessageService) {} + + confirm(event: Event) { + this.confirmationService.confirm({ + target: event.target as EventTarget, + message: 'Please confirm to proceed moving forward.', + icon: 'pi pi-exclamation-circle', + acceptIcon: 'pi pi-check mr-1', + rejectIcon: 'pi pi-times mr-1', + rejectButtonStyleClass: 'p-button-danger p-button-sm', + acceptButtonStyleClass: 'p-button-outlined p-button-sm', + accept: () => { + this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); + }, + reject: () => { + this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 }); + } + }); + } +}` + }; +} diff --git a/src/app/showcase/doc/dialog/dialogdoc.module.ts b/src/app/showcase/doc/dialog/dialogdoc.module.ts index 43452ac5c57..6f4bc14df03 100644 --- a/src/app/showcase/doc/dialog/dialogdoc.module.ts +++ b/src/app/showcase/doc/dialog/dialogdoc.module.ts @@ -5,6 +5,9 @@ import { FormsModule } from '@angular/forms'; import { DialogModule } from 'primeng/dialog'; import { ButtonModule } from 'primeng/button'; import { DropdownModule } from 'primeng/dropdown'; +import { InputTextModule } from 'primeng/inputtext'; +import { AutoFocusModule } from 'primeng/autofocus'; +import { AvatarModule } from 'primeng/avatar'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; @@ -17,11 +20,11 @@ import { MaximizableDoc } from './maximizabledoc'; import { TemplateDoc } from './templatedoc'; import { OverlaysInsideDoc } from './overlaysinsidedoc'; import { ModalDoc } from './modaldoc'; +import { HeadlessDoc } from './headlessdoc'; import { AccessibilityDoc } from './accessibilitydoc'; - @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, FormsModule, DialogModule, ButtonModule, DropdownModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, StyleDoc, LongContentDoc, ResponsiveDoc, PositionDoc, MaximizableDoc, TemplateDoc, OverlaysInsideDoc, ModalDoc, AccessibilityDoc], + imports: [CommonModule, AppCodeModule, RouterModule, FormsModule, DialogModule, ButtonModule, DropdownModule, AppDocModule, InputTextModule, AvatarModule, AutoFocusModule], + declarations: [BasicDoc, ImportDoc, StyleDoc, LongContentDoc, ResponsiveDoc, PositionDoc, MaximizableDoc, TemplateDoc, OverlaysInsideDoc, ModalDoc, AccessibilityDoc, HeadlessDoc], exports: [AppDocModule] }) export class DialogDocModule {} diff --git a/src/app/showcase/doc/dialog/headlessdoc.ts b/src/app/showcase/doc/dialog/headlessdoc.ts new file mode 100644 index 00000000000..409034c70fb --- /dev/null +++ b/src/app/showcase/doc/dialog/headlessdoc.ts @@ -0,0 +1,137 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'dialog-headless-demo', + template: ` + +

Headless mode allows you to customize the entire user interface instead of the default elements.

+ +
+ + + +
+ + + + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + ` +}) +export class HeadlessDoc { + visible: boolean = false; + + showDialog() { + this.visible = true; + } + + closeDialog() { + this.visible = false; + } + + code: Code = { + basic: ` + + +
+ + + + +
+ + +
+
+ + +
+
+ + +
+
+ +`, + + html: `
+ + + +
+ + + + +
+ + +
+
+ + +
+
+ + +
+
+ + +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'dialog-headless-demo', + templateUrl: './dialog-headless-demo.html' +}) +export class DialogHeadlessDemo { + visible: boolean = false; + + showDialog() { + this.visible = true; + } + + closeDialog() { + this.visible = false; + } +}` + }; +} diff --git a/src/app/showcase/doc/dialog/templatedoc.ts b/src/app/showcase/doc/dialog/templatedoc.ts index f2eb767622d..b73bf22b329 100644 --- a/src/app/showcase/doc/dialog/templatedoc.ts +++ b/src/app/showcase/doc/dialog/templatedoc.ts @@ -9,16 +9,19 @@ import { Code } from '../../domain/code';
- + - Header Content +
+ + 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.

- +
@@ -34,34 +37,39 @@ export class TemplateDoc { code: Code = { basic: ` - - - Header Content - -

- 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. -

- - - -`, - - html: ` -
- - + - Header Content +
+ + 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.

- + - +`, + + html: `
+ + + +
+ + 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. +

+ + + +
`, typescript: ` diff --git a/src/app/showcase/doc/divider/contentdoc.ts b/src/app/showcase/doc/divider/contentdoc.ts index f99d40c24bd..3b93cd8f225 100644 --- a/src/app/showcase/doc/divider/contentdoc.ts +++ b/src/app/showcase/doc/divider/contentdoc.ts @@ -11,37 +11,34 @@ import { Code } from '../../domain/code';

-

+

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.

- -
- - Text -
+ + Left -

+

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.

- - Badge + + Center -

+

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.

- - + + Right -

+

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.

@@ -51,64 +48,69 @@ import { Code } from '../../domain/code'; }) export class ContentDoc { code: Code = { - basic: `

+ basic: `

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. -

- -
- - Text -
- -

+

+ + + Left + + +

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. -

- - Badge - -

+

+ + + Center + + +

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. -

- - - -

+

+ + + Right + + +

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.

`, - 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. + 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.

- -
- - Text -
+ + + Left -

- 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.

- - Badge + + + Center -

- 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.

- - + + + Right -

- 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. + +

+ 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.

`, @@ -119,6 +121,6 @@ import { Component } from '@angular/core'; selector: 'divider-content-demo', templateUrl: './divider-content-demo.html' }) -export class ContentDoc {}` +export class DividerContentDemo {}` }; } diff --git a/src/app/showcase/doc/dropdown/dropdowndoc.module.ts b/src/app/showcase/doc/dropdown/dropdowndoc.module.ts index bd80ae57c55..acd5022870e 100644 --- a/src/app/showcase/doc/dropdown/dropdowndoc.module.ts +++ b/src/app/showcase/doc/dropdown/dropdowndoc.module.ts @@ -11,16 +11,17 @@ import { EditableDoc } from './editabledoc'; import { GroupDoc } from './groupdoc'; import { TemplateDoc } from './templatedoc'; import { DisabledDoc } from './disableddoc'; +import { InvalidDoc } from './invaliddoc'; import { VirtualScrollDoc } from './virtualscrolldoc'; +import { LazyVirtualScrollDoc } from './lazyvirtualscrolldoc'; import { FilterDoc } from './filterdoc'; import { FloatLabelDoc } from './floatlabeldoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; - @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, ReactiveFormsModule, DropdownModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, EditableDoc, GroupDoc, TemplateDoc, DisabledDoc, VirtualScrollDoc, FilterDoc, FloatLabelDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, EditableDoc, GroupDoc, TemplateDoc, DisabledDoc, InvalidDoc, VirtualScrollDoc, LazyVirtualScrollDoc, FilterDoc, FloatLabelDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] }) export class DropdownDocModule {} diff --git a/src/app/showcase/doc/dropdown/invaliddoc.ts b/src/app/showcase/doc/dropdown/invaliddoc.ts new file mode 100644 index 00000000000..a4f48313425 --- /dev/null +++ b/src/app/showcase/doc/dropdown/invaliddoc.ts @@ -0,0 +1,71 @@ +import { Component, OnInit } from '@angular/core'; +import { Code } from '../../domain/code'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-invalid-demo', + template: ` + +

Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.

+ +
+ +
+ + ` +}) +export class InvalidDoc implements OnInit { + cities: City[]; + + selectedCity: City | undefined; + + ngOnInit() { + this.cities = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' } + ]; + } + + code: Code = { + basic: ``, + + html: ` +
+ +
`, + + typescript: ` +import { Component, OnInit } from '@angular/core'; + +interface City { + name: string; + code: string; +} +@Component({ + selector: 'dropdown-invalid-demo', + templateUrl: './dropdown-invalid-demo.html' +}) +export class DropdownInvalidDemo implements OnInit { + cities: City[] | undefined; + + selectedCity: City | undefined; + + ngOnInit() { + this.cities = [ + { name: 'New York', code: 'NY' }, + { name: 'Rome', code: 'RM' }, + { name: 'London', code: 'LDN' }, + { name: 'Istanbul', code: 'IST' }, + { name: 'Paris', code: 'PRS' } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/dropdown/lazyvirtualscrolldoc.ts b/src/app/showcase/doc/dropdown/lazyvirtualscrolldoc.ts new file mode 100644 index 00000000000..c4a352fda2d --- /dev/null +++ b/src/app/showcase/doc/dropdown/lazyvirtualscrolldoc.ts @@ -0,0 +1,125 @@ +import { Component } from '@angular/core'; +import { ScrollerOptions, SelectItem } from 'primeng/api'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'dropdown-lazy-virtualscroll-demo', + template: ` +
+ +
+ + ` +}) +export class LazyVirtualScrollDoc { + items: SelectItem[]; + + selectedItem: string | undefined; + + loading: boolean = false; + + loadLazyTimeout = null; + + options: ScrollerOptions = { + delay: 250, + showLoader: true, + lazy: true, + onLazyLoad: this.onLazyLoad.bind(this) + }; + + constructor() { + this.items = []; + for (let i = 0; i < 10000; i++) { + this.items.push({ label: 'Item ' + i, value: 'Item ' + i }); + } + } + onLazyLoad(event) { + this.loading = true; + + if (this.loadLazyTimeout) { + clearTimeout(this.loadLazyTimeout); + } + + //imitate delay of a backend call + this.loadLazyTimeout = setTimeout(() => { + const { first, last } = event; + const items = [...this.items]; + + for (let i = first; i < last; i++) { + items[i] = { label: `Item #${i}`, value: i }; + } + + this.items = items; + this.loading = false; + }, Math.random() * 1000 + 250); + } + + code: Code = { + basic: ``, + + html: ` +
+ +
`, + + typescript: ` +import { SelectItem } from 'primeng/api'; +import { Component } from '@angular/core'; + +@Component({ + selector: 'dropdown-lazy-virtualscroll-demo', + templateUrl: './dropdown-lazy-virtualscroll-demo.html' +}) +export class DropdownLazyVirtualscrollDemo { + items: SelectItem[]; + + selectedItem: string | undefined; + + loading: boolean = false; + + loadLazyTimeout = null; + + options: ScrollerOptions = { + delay: 250, + showLoader: true, + lazy: true, + onLazyLoad: this.onLazyLoad.bind(this) + }; + + constructor() { + this.items = []; + for (let i = 0; i < 10000; i++) { + this.items.push({ label: 'Item ' + i, value: 'Item ' + i }); + } + } + onLazyLoad(event) { + this.loading = true; + + if (this.loadLazyTimeout) { + clearTimeout(this.loadLazyTimeout); + } + + //imitate delay of a backend call + this.loadLazyTimeout = setTimeout(() => { + const { first, last } = event; + const items = [...this.items]; + + for (let i = first; i < last; i++) { + items[i] = { label: \`Item #\${i}\`, value: i }; + } + + this.items = items; + this.loading = false; + }, Math.random() * 1000 + 250); + } + +}` + }; +} diff --git a/src/app/showcase/doc/dynamicdialog/basicdoc.ts b/src/app/showcase/doc/dynamicdialog/basicdoc.ts deleted file mode 100644 index cde84dafa89..00000000000 --- a/src/app/showcase/doc/dynamicdialog/basicdoc.ts +++ /dev/null @@ -1,194 +0,0 @@ -import { Component, OnDestroy } from '@angular/core'; -import { MessageService } from 'primeng/api'; -import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductListDemo } from './productlistdemo'; - -@Component({ - selector: 'dynamic-dialog-basic-demo', - template: ` - -

- 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. -

- -
- - -
- - `, - providers: [DialogService, MessageService] -}) -export class BasicDoc implements OnDestroy { - constructor(public dialogService: DialogService, public messageService: MessageService) {} - - ref: DynamicDialogRef | undefined; - - show() { - this.ref = this.dialogService.open(ProductListDemo, { - header: 'Select a Product', - width: '70%', - contentStyle: { overflow: 'auto' }, - baseZIndex: 10000, - maximizable: true - }); - - this.ref.onClose.subscribe((product: Product) => { - if (product) { - this.messageService.add({ severity: 'info', summary: 'Product Selected', detail: product.name }); - } - }); - - this.ref.onMaximize.subscribe((value) => { - this.messageService.add({ severity: 'info', summary: 'Maximized', detail: `maximized: ${value.maximized}` }); - }); - } - - ngOnDestroy() { - if (this.ref) { - this.ref.close(); - } - } - - code: Code = { - basic: ` -`, - - html: ` -
- - -
`, - - typescript: ` -import { Component, OnDestroy } from '@angular/core'; -import { MessageService } from 'primeng/api'; -import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Product } from '../../domain/product'; -import { ProductListDemo } from './productlistdemo'; - -@Component({ - selector: 'dynamic-dialog-basic-demo', - templateUrl: './dynamic-dialog-basic-demo.html', - providers: [DialogService, MessageService] -}) -export class DynamicDialogBasicDemo implements OnDestroy { - - constructor(public dialogService: DialogService, public messageService: MessageService) {} - - ref: DynamicDialogRef | undefined; - - show() { - this.ref = this.dialogService.open(ProductListDemo, { - header: 'Select a Product', - width: '70%', - contentStyle: { overflow: 'auto' }, - baseZIndex: 10000, - maximizable: true - }); - - this.ref.onClose.subscribe((product: Product) => { - if (product) { - this.messageService.add({ severity: 'info', summary: 'Product Selected', detail: product.name }); - } - }); - - this.ref.onMaximize.subscribe((value) => { - this.messageService.add({ severity: 'info', summary: 'Maximized', detail: \`maximized: \${value.maximized}\` }); - }); - } - - ngOnDestroy() { - if (this.ref) { - this.ref.close(); - } - } -}`, - - 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; -}` - } - ]; - - routeFiles = [ - { - path: 'src/app/demo/productlistdemo.ts', - name: 'ProductListDemo', - content: `import { Component, OnInit } from '@angular/core'; -import { DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; - -@Component({ - template: \` - - - Name - Image - Brand - Status - - - - - - {{ product.name }} - - {{ product.price }} - - - - - - - - - \` -}) -export class ProductListDemo implements OnInit { - products: Product[]; - - constructor(private productService: ProductService, public ref: DynamicDialogRef) {} - - ngOnInit() { - this.productService.getProductsSmall().then((products) => (this.products = products)); - } - - selectProduct(product: Product) { - this.ref.close(product); - } - - getSeverity(status: string) { - switch (status) { - case 'INSTOCK': - return 'success'; - case 'LOWSTOCK': - return 'warning'; - case 'OUTOFSTOCK': - return 'danger'; - } - } -}` - } - ]; -} diff --git a/src/app/showcase/doc/dynamicdialog/customizationdoc.ts b/src/app/showcase/doc/dynamicdialog/customizationdoc.ts new file mode 100644 index 00000000000..caf7423ae0c --- /dev/null +++ b/src/app/showcase/doc/dynamicdialog/customizationdoc.ts @@ -0,0 +1,62 @@ +import { Component } from '@angular/core'; +import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { Code } from '../../domain/code'; +import { ProductListDemo } from './productlistdemo'; + +@Component({ + selector: 'customization-doc', + template: ` + +

DynamicDialog uses the Dialog component internally, visit dialog for more information about the available props.

+ + + `, + providers: [DialogService] +}) +export class CustomizationDoc { + ref: DynamicDialogRef | undefined; + + constructor(public dialogService: DialogService) {} + + show() { + this.ref = this.dialogService.open(ProductListDemo, { + header: 'Select a Product', + width: '50vw', + modal:true, + breakpoints: { + '960px': '75vw', + '640px': '90vw' + }, + }); + + + } + + code: Code = { + typescript: ` +import { Component } from '@angular/core'; +import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { ProductListDemo } from './productlistdemo'; + +@Component({ + templateUrl: './dynamicdialogdemo.html', + providers: [DialogService] +}) +export class CustomizationDemo { + + ref: DynamicDialogRef | undefined; + + constructor(public dialogService: DialogService) {} + show() { + this.ref = this.dialogService.open(ProductListDemo, { + header: 'Select a Product', + width: '50vw', + modal:true, + breakpoints: { + '960px': '75vw', + '640px': '90vw' + }, + }); +}` + }; +} diff --git a/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts b/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts index a144be3329d..3869453375c 100644 --- a/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts +++ b/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts @@ -12,16 +12,17 @@ import { OpenDoc } from './opendoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; import { ProductListDemo } from './productlistdemo'; -import { BasicDoc } from './basicdoc'; +import { ExampleDoc } from './exampledoc'; import { UsageDoc } from './usagedoc'; import { PassingDataDoc } from './passingdatadoc'; import { CloseDoc } from './closedoc'; -import { ProductListDemoDoc } from './productlistdemodoc'; import { TagModule } from 'primeng/tag'; - +import { InfoDemo } from './infodemo'; +import { CustomizationDoc } from './customizationdoc'; +import { Footer } from './footer'; @NgModule({ imports: [CommonModule, AppCodeModule, RouterModule, FormsModule, TagModule, DialogModule, ButtonModule, AppDocModule, ToastModule, TableModule], - declarations: [OpenDoc, ImportDoc, StyleDoc, BasicDoc, ProductListDemo, UsageDoc, PassingDataDoc, CloseDoc, ProductListDemoDoc, StyleDoc], + declarations: [OpenDoc, Footer, ImportDoc, StyleDoc, ExampleDoc, ProductListDemo, UsageDoc, PassingDataDoc, CloseDoc, StyleDoc, InfoDemo, CustomizationDoc], exports: [AppDocModule] }) export class DynamicDialogDocModule {} diff --git a/src/app/showcase/doc/dynamicdialog/exampledoc.ts b/src/app/showcase/doc/dynamicdialog/exampledoc.ts new file mode 100644 index 00000000000..dde25566de9 --- /dev/null +++ b/src/app/showcase/doc/dynamicdialog/exampledoc.ts @@ -0,0 +1,301 @@ +import { Component, OnDestroy } from '@angular/core'; +import { MessageService } from 'primeng/api'; +import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { Code } from '../../domain/code'; +import { ProductListDemo } from './productlistdemo'; +import { Footer } from './footer'; + +@Component({ + selector: 'dynamic-dialog-example-demo', + template: ` + +

+ 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. +

+ +
+ + +
+ + `, + providers: [DialogService, MessageService] +}) +export class ExampleDoc implements OnDestroy { + constructor(public dialogService: DialogService, public messageService: MessageService) {} + + ref: DynamicDialogRef | undefined; + + show() { + this.ref = this.dialogService.open(ProductListDemo, { + header: 'Select a Product', + width: '50vw', + contentStyle: { overflow: 'auto' }, + breakpoints: { + '960px': '75vw', + '640px': '90vw' + }, + templates: { + footer: Footer + } + }); + + this.ref.onClose.subscribe((data: any) => { + let summary_and_detail; + if (data) { + const buttonType = data?.buttonType; + summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: `Pressed '${buttonType}' button` } : { summary: 'Product Selected', detail: data?.name }; + } else { + summary_and_detail = { summary: 'No Product Selected', detail: 'Pressed Close button' }; + } + this.messageService.add({ severity: 'info', ...summary_and_detail, life: 3000 }); + }); + + this.ref.onMaximize.subscribe((value) => { + this.messageService.add({ severity: 'info', summary: 'Maximized', detail: `maximized: ${value.maximized}` }); + }); + } + + ngOnDestroy() { + if (this.ref) { + this.ref.close(); + } + } + + code: Code = { + basic: ` +`, + + html: ` +
+ + +
`, + + typescript: ` +import { Component, OnDestroy } from '@angular/core'; +import { MessageService } from 'primeng/api'; +import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { Product } from '../../domain/product'; +import { ProductListDemo } from './productlistdemo'; +import { Footer } from './footer'; + +@Component({ + selector: 'dynamic-dialog-example-demo', + templateUrl: './dynamic-dialog-example-demo.html', + providers: [DialogService, MessageService] +}) +export class DynamicDialogExampleDemo implements OnDestroy { + + constructor(public dialogService: DialogService, public messageService: MessageService) {} + + ref: DynamicDialogRef | undefined; + + show() { + this.ref = this.dialogService.open(ProductListDemo, { + header: 'Select a Product', + width: '50vw', + contentStyle: { overflow: 'auto' }, + breakpoints: { + '960px': '75vw', + '640px': '90vw' + }, + templates: { + footer: Footer + } + }); + + this.ref.onClose.subscribe((data: any) => { + let summary_and_detail; + if (data) { + const buttonType = data?.buttonType; + summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data?.name }; + } else { + summary_and_detail = { summary: 'No Product Selected', detail: 'Pressed Close button' }; + } + this.messageService.add({ severity: 'info', ...summary_and_detail, life: 3000 }); + }); + + this.ref.onMaximize.subscribe((value) => { + this.messageService.add({ severity: 'info', summary: 'Maximized', detail: \`maximized: \${value.maximized}\` }); + }); + } + + ngOnDestroy() { + if (this.ref) { + this.ref.close(); + } + } +}`, + + 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; +}` + } + ]; + + routeFiles = [ + { + path: 'src/app/demo/productlistdemo.ts', + name: 'ProductListDemo', + content: `import { Component, OnInit } from '@angular/core'; +import { Product } from '../../domain/product'; +import { ProductService } from '../../service/productservice'; +import { MessageService } from 'primeng/api'; +import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { InfoDemo } from './infodemo'; +@Component({ + providers: [DialogService, MessageService, ProductService], + template: \`
+ +
+ + + + Code + Name + Image + Category + Quantity + + + + + + {{ product.code }} + {{ product.name }} + + {{ product.category }} + + {{ product.quantity }} + + + + + + + \` +}) +export class ProductListDemo implements OnInit { + products: Product[]; + + constructor(private productService: ProductService, private dialogService: DialogService, private ref: DynamicDialogRef) {} + + ngOnInit() { + this.productService.getProductsSmall().then((products) => (this.products = products.slice(0, 5))); + } + + selectProduct(product: Product) { + this.ref.close(product); + } + + showInfo() { + this.dialogService.open(InfoDemo, { + header: 'Information', + modal: true, + dismissableMask: true, + data: { + totalProducts: this.products ? this.products.length : 0 + } + }); + } + + closeDialog(data) { + this.ref.close(data); + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warning'; + case 'OUTOFSTOCK': + return 'danger'; + } + } +}` + }, + { + path: 'src/app/demo/infodemo.ts', + name: 'InfoDemo', + content: `import { Component} from '@angular/core'; +import { DialogService, DynamicDialogComponent, DynamicDialogRef } from 'primeng/dynamicdialog'; +import { MessageService } from 'primeng/api'; +@Component({ + providers: [DialogService, MessageService], + template: \`
+

+ There are {{ totalProducts }} products in total in this list. +

+
+ +
+
\` +}) +export class InfoDemo { + totalProducts: number = 0; + + instance: DynamicDialogComponent | undefined; + + constructor(public ref: DynamicDialogRef, private dialogService: DialogService) { + this.instance = this.dialogService.getInstance(this.ref); + } + + ngOnInit() { + if (this.instance && this.instance.data) { + this.totalProducts = this.instance.data['totalProducts']; + } + } + + close() { + this.ref.close(); + } + + ngOnDestroy() { + if (this.ref) { + this.ref.close(); + } + } +}` + }, + { + path: 'src/app/demo/footer.ts', + name: 'Footer', + content: `import { Component } from '@angular/core'; +import { DynamicDialogRef } from 'primeng/dynamicdialog'; + +@Component({ + selector: 'footer', + template: \` +
+ +
\` +}) +export class Footer { + constructor(public ref: DynamicDialogRef) {} + + closeDialog(data) { + this.ref.close(data); + } +}` + } + ]; +} diff --git a/src/app/showcase/doc/dynamicdialog/footer.ts b/src/app/showcase/doc/dynamicdialog/footer.ts new file mode 100644 index 00000000000..f6c5f872c2e --- /dev/null +++ b/src/app/showcase/doc/dynamicdialog/footer.ts @@ -0,0 +1,18 @@ +import { Component } from '@angular/core'; +import { DynamicDialogRef } from 'primeng/dynamicdialog'; + +@Component({ + selector: 'footer', + template: ` +
+ +
+ ` +}) +export class Footer { + constructor(public ref: DynamicDialogRef) {} + + closeDialog(data) { + this.ref.close(data); + } +} diff --git a/src/app/showcase/doc/dynamicdialog/infodemo.ts b/src/app/showcase/doc/dynamicdialog/infodemo.ts new file mode 100644 index 00000000000..5b5a7d1f331 --- /dev/null +++ b/src/app/showcase/doc/dynamicdialog/infodemo.ts @@ -0,0 +1,40 @@ +import { Component, OnInit } from '@angular/core'; +import { DialogService, DynamicDialogComponent, DynamicDialogRef } from 'primeng/dynamicdialog'; + +@Component({ + template: ` +
+

+ There are {{ totalProducts }} products in total in this list. +

+
+ +
+
+ ` +}) +export class InfoDemo implements OnInit { + totalProducts: number = 0; + + instance: DynamicDialogComponent | undefined; + + constructor(public ref: DynamicDialogRef, private dialogService: DialogService) { + this.instance = this.dialogService.getInstance(this.ref); + } + + ngOnInit() { + if (this.instance && this.instance.data) { + this.totalProducts = this.instance.data['totalProducts']; + } + } + + close() { + this.ref.close(); + } + + ngOnDestroy() { + if (this.ref) { + this.ref.close(); + } + } +} diff --git a/src/app/showcase/doc/dynamicdialog/productlistdemo.ts b/src/app/showcase/doc/dynamicdialog/productlistdemo.ts index 63422d76a60..6d6ed192c7e 100755 --- a/src/app/showcase/doc/dynamicdialog/productlistdemo.ts +++ b/src/app/showcase/doc/dynamicdialog/productlistdemo.ts @@ -1,47 +1,63 @@ import { Component, OnInit } from '@angular/core'; -import { DynamicDialogRef } from 'primeng/dynamicdialog'; +import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; - +import { InfoDemo } from './infodemo'; @Component({ - template: ` - - - Name - Image - Brand - Status - - - - - - {{ product.name }} - - {{ product.price }} - - - - - - - - - ` + template: `
+ +
+ + + + Code + Name + Image + Category + Quantity + + + + + + {{ product.code }} + {{ product.name }} + + {{ product.category }} + + {{ product.quantity }} + + + + + + + ` }) export class ProductListDemo implements OnInit { products: Product[]; - constructor(private productService: ProductService, public ref: DynamicDialogRef) {} + constructor(private productService: ProductService, private dialogService: DialogService, private ref: DynamicDialogRef) {} ngOnInit() { - this.productService.getProductsSmall().then((products) => (this.products = products)); + this.productService.getProductsSmall().then((products) => (this.products = products.slice(0, 5))); } selectProduct(product: Product) { this.ref.close(product); } + showInfo() { + this.dialogService.open(InfoDemo, { + header: 'Information', + modal: true, + dismissableMask: true, + data: { + totalProducts: this.products ? this.products.length : 0 + } + }); + } + getSeverity(status: string) { switch (status) { case 'INSTOCK': diff --git a/src/app/showcase/doc/dynamicdialog/productlistdemodoc.ts b/src/app/showcase/doc/dynamicdialog/productlistdemodoc.ts deleted file mode 100644 index d9f52edef27..00000000000 --- a/src/app/showcase/doc/dynamicdialog/productlistdemodoc.ts +++ /dev/null @@ -1,182 +0,0 @@ -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; - -@Component({ - selector: 'productlistdemo-doc', - template: `
- -

ProductListDemo component used in examples above.

- -
- - - - Name - Image - Brand - Status - - - - - - {{ product.name }} - - {{ product.price }} - - - - - - - - - -
- -
`, - providers: [DynamicDialogRef] -}) -export class ProductListDemoDoc implements OnInit { - products: Product[]; - - constructor(private productService: ProductService, public ref: DynamicDialogRef, private cd: ChangeDetectorRef) {} - - ngOnInit() { - this.productService.getProductsSmall().then((products) => { - this.products = products; - this.cd.markForCheck(); - }); - } - - selectProduct(product: Product) { - this.ref.close(product); - } - - getSeverity(status: string) { - switch (status) { - case 'INSTOCK': - return 'success'; - case 'LOWSTOCK': - return 'warning'; - case 'OUTOFSTOCK': - return 'danger'; - } - } - - code: Code = { - basic: ` - - - Name - Image - Brand - Status - - - - - - {{ product.name }} - - {{ product.price }} - - - - - - - - -`, - html: ` -
- - - - Name - Image - Brand - Status - - - - - - {{ product.name }} - - {{ product.price }} - - - - - - - - - -
`, - typescript: ` -import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; -import { DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; - -@Component({ - selector: 'product-list-demo', - templateUrl: './productlistdemo.html', - providers: [DynamicDialogRef] -}) -export class ProductListDemo implements OnInit { - - products: Product[]; - - constructor(private productService: ProductService, public ref: DynamicDialogRef, private cd: ChangeDetectorRef) {} - - ngOnInit() { - this.productService.getProductsSmall().then((products) => { - this.products = products; - this.cd.markForCheck(); - }); - } - - selectProduct(product: Product) { - this.ref.close(product); - } - - getSeverity(status: string) { - switch (status) { - case 'INSTOCK': - return 'success'; - case 'LOWSTOCK': - return 'warning'; - case 'OUTOFSTOCK': - return 'danger'; - } - } -}`, - 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/src/app/showcase/doc/editor/customtoolbardoc.ts b/src/app/showcase/doc/editor/customtoolbardoc.ts index 4d06cf84f93..374a5af4b61 100644 --- a/src/app/showcase/doc/editor/customtoolbardoc.ts +++ b/src/app/showcase/doc/editor/customtoolbardoc.ts @@ -22,7 +22,7 @@ import { Code } from '../../domain/code'; ` }) export class CustomToolbarDoc { - text: string = 'Hello World!'; + text: string = '
Hello World!
PrimeNG Editor Rocks

'; code: Code = { basic: ` @@ -56,7 +56,7 @@ import { Component } from '@angular/core'; templateUrl: './editor-customtoolbar-demo.html' }) export class EditorCustomtoolbarDemo { - text: string = 'Hello World!'; + text: string = '
Hello World!
PrimeNG Editor Rocks

'; }` }; } diff --git a/src/app/showcase/doc/fieldset/fieldsetdoc.module.ts b/src/app/showcase/doc/fieldset/fieldsetdoc.module.ts index cbccdb2852d..563e0329421 100644 --- a/src/app/showcase/doc/fieldset/fieldsetdoc.module.ts +++ b/src/app/showcase/doc/fieldset/fieldsetdoc.module.ts @@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FieldsetModule } from 'primeng/fieldset'; +import { AvatarModule } from 'primeng/avatar'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; @@ -12,7 +13,7 @@ import { TemplateDoc } from './templatedoc'; import { ToggleableDoc } from './toggleabledoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, FieldsetModule, RouterModule], + imports: [CommonModule, AppCodeModule, AppDocModule, FieldsetModule, RouterModule, AvatarModule], exports: [AppDocModule], declarations: [ImportDoc, BasicDoc, ToggleableDoc, TemplateDoc, StyleDoc, AccessibilityDoc] }) diff --git a/src/app/showcase/doc/fieldset/templatedoc.ts b/src/app/showcase/doc/fieldset/templatedoc.ts index 272f52aa23c..8a729ef3198 100644 --- a/src/app/showcase/doc/fieldset/templatedoc.ts +++ b/src/app/showcase/doc/fieldset/templatedoc.ts @@ -5,17 +5,20 @@ import { Code } from '../../domain/code'; selector: 'fieldset-template-demo', template: ` -

Legend section can also be defined with custom content instead of primitive values.

+

Header section can also be defined with custom content instead of primitive values.
-
- - User Details +
+ + Amy Elsner
- Content +

+ 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. +

@@ -25,25 +28,30 @@ export class TemplateDoc { code: Code = { basic: ` -
- - User Details +
+ + Amy Elsner
- Content +

+ 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. +

`, - html: ` -
- - -
- - User Details -
- - Content - + html: `
+ + +
+ + 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. +

+
`, typescript: ` diff --git a/src/app/showcase/doc/inputgroup/buttondoc.ts b/src/app/showcase/doc/inputgroup/buttondoc.ts index cc7aa2ece23..d0ce74437d5 100644 --- a/src/app/showcase/doc/inputgroup/buttondoc.ts +++ b/src/app/showcase/doc/inputgroup/buttondoc.ts @@ -15,34 +15,34 @@ import { Code } from '../../domain/code'; - + - + - +
- + ` }) export class ButtonDoc { code: Code = { basic: ` - - - + + + - - - - + + + + - - - - + + + + `, html: `
@@ -52,13 +52,13 @@ export class ButtonDoc { - + - + - +
`, diff --git a/src/app/showcase/doc/inputswitch/basicdoc.ts b/src/app/showcase/doc/inputswitch/basicdoc.ts index c125e420160..bc2c6445cec 100644 --- a/src/app/showcase/doc/inputswitch/basicdoc.ts +++ b/src/app/showcase/doc/inputswitch/basicdoc.ts @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Two-way value binding is defined using ngModel.

- +
` diff --git a/src/app/showcase/doc/inputswitch/inputswitchdoc.module.ts b/src/app/showcase/doc/inputswitch/inputswitchdoc.module.ts index 51e056af341..e06b461f6f9 100644 --- a/src/app/showcase/doc/inputswitch/inputswitchdoc.module.ts +++ b/src/app/showcase/doc/inputswitch/inputswitchdoc.module.ts @@ -12,10 +12,10 @@ import { PreselectionDoc } from './preselectiondoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; - +import { InvalidDoc } from './invaliddoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, ReactiveFormsModule, InputSwitchModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, PreselectionDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, PreselectionDoc, DisabledDoc, InvalidDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] }) export class InputSwitchDocModule {} diff --git a/src/app/showcase/doc/inputswitch/invaliddoc.ts b/src/app/showcase/doc/inputswitch/invaliddoc.ts new file mode 100644 index 00000000000..92a49360d1d --- /dev/null +++ b/src/app/showcase/doc/inputswitch/invaliddoc.ts @@ -0,0 +1,37 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@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 { + checked: boolean = false; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'input-switch-invalid-demo', + templateUrl: './input-switch-invalid-demo.html' +}) +export class InputSwitchInvalidDemo { + checked: boolean = false; +}` + }; +} diff --git a/src/app/showcase/doc/inputtextarea/inputtextareadoc.module.ts b/src/app/showcase/doc/inputtextarea/inputtextareadoc.module.ts index f31817698f0..b6aef933df0 100644 --- a/src/app/showcase/doc/inputtextarea/inputtextareadoc.module.ts +++ b/src/app/showcase/doc/inputtextarea/inputtextareadoc.module.ts @@ -11,6 +11,7 @@ import { AutoResizeDoc } from './autoresizedoc'; import { BasicDoc } from './basicdoc'; import { DisabledDoc } from './disableddoc'; import { FloatlabelDoc } from './floatlabeldoc'; +import { InvalidDoc } from './invaliddoc'; import { ImportDoc } from './importdoc'; import { KeyfilterDoc } from './keyfilterdoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; @@ -19,6 +20,6 @@ import { StyleDoc } from './styledoc'; @NgModule({ imports: [CommonModule, AppCodeModule, InputTextModule, FormsModule, ReactiveFormsModule, InputTextareaModule, AppDocModule, KeyFilterModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, AutoResizeDoc, FloatlabelDoc, DisabledDoc, KeyfilterDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, AutoResizeDoc, FloatlabelDoc, InvalidDoc, DisabledDoc, KeyfilterDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] }) export class InputtextareaDocModule {} diff --git a/src/app/showcase/doc/inputtextarea/invaliddoc.ts b/src/app/showcase/doc/inputtextarea/invaliddoc.ts new file mode 100644 index 00000000000..978333e4f77 --- /dev/null +++ b/src/app/showcase/doc/inputtextarea/invaliddoc.ts @@ -0,0 +1,38 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@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 { + value!: string; + + code: Code = { + basic: ``, + + html: ` +
+ +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'input-textarea-invalid-demo', + templateUrl: './input-textarea-invalid-demo.html' +}) +export class InputTextareaInvalidDemo { + value!: string; +}` + }; +} diff --git a/src/app/showcase/doc/knob/knobdoc.module.ts b/src/app/showcase/doc/knob/knobdoc.module.ts index d55732fd50a..5e4a25918a6 100644 --- a/src/app/showcase/doc/knob/knobdoc.module.ts +++ b/src/app/showcase/doc/knob/knobdoc.module.ts @@ -7,6 +7,7 @@ import { KnobModule } from 'primeng/knob'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { ButtonModule } from 'primeng/button'; import { MinMaxDoc } from './minmaxdoc'; import { StepDoc } from './stepdoc'; import { TemplateDoc } from './templatedoc'; @@ -18,10 +19,11 @@ import { DisabledDoc } from './disableddoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; +import { ReactiveDoc } from './reactivedoc'; @NgModule({ - imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule, AppCodeModule, AppDocModule, KnobModule], + imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule,ButtonModule, AppCodeModule, AppDocModule, KnobModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, MinMaxDoc, StepDoc, TemplateDoc, StrokeDoc, SizeDoc, ColorDoc, ReadonlyDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, MinMaxDoc, StepDoc, TemplateDoc, StrokeDoc, SizeDoc, ColorDoc, ReadonlyDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, ReactiveDoc] }) export class KnobDocModule {} diff --git a/src/app/showcase/doc/knob/reactivedoc.ts b/src/app/showcase/doc/knob/reactivedoc.ts new file mode 100644 index 00000000000..85349ee24df --- /dev/null +++ b/src/app/showcase/doc/knob/reactivedoc.ts @@ -0,0 +1,49 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'reactive-doc', + template: ` + +

Knob can be controlled with custom controls as well.

+ +
+ +
+ + +
+
+ + ` +}) +export class ReactiveDoc { + value: number = 0; + + code: Code = { + basic: ` +
+ + +
`, + + html: `
+ +
+ + +
+
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'knob-reactive-demo', + templateUrl: './knob-reactive-demo.html' +}) +export class KnobReactiveDemo { + value: number = 0; +}` + }; +} diff --git a/src/app/showcase/doc/overlaypanel/datatabledoc.ts b/src/app/showcase/doc/overlaypanel/datatabledoc.ts index 3958bb4fcab..15716f8c89f 100644 --- a/src/app/showcase/doc/overlaypanel/datatabledoc.ts +++ b/src/app/showcase/doc/overlaypanel/datatabledoc.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { MessageService } from 'primeng/api'; import { OverlayPanel } from 'primeng/overlaypanel'; import { Code } from '../../domain/code'; @@ -20,7 +20,7 @@ interface TableRowSelectEvent {
- +
@@ -57,16 +57,18 @@ interface TableRowSelectEvent { providers: [MessageService] }) export class DataTableDoc implements OnInit { + + constructor(private productService: ProductService, private messageService: MessageService, private cdr: ChangeDetectorRef) {} + products: Product[] | undefined; selectedProduct: Product | undefined; - constructor(private productService: ProductService, private messageService: MessageService) {} - ngOnInit() { this.productService.getProductsSmall().then((products) => { this.products = products; this.selectedProduct = products[0]; + this.cdr.markForCheck() }); } @@ -77,18 +79,18 @@ export class DataTableDoc implements OnInit { code: Code = { basic: ` - +
- {{selectedProduct.name}} - {{'$' + selectedProduct.price}} + {{ selectedProduct.name }} + {{ '$' + selectedProduct.price }}
- {{selectedProduct.category}} + {{ selectedProduct.category }}
- + @@ -100,53 +102,52 @@ export class DataTableDoc implements OnInit { - {{product.name}} - - {{product.price}} + {{ product.name }} + + {{ product.price }} `, - html: ` -
- - -
-
- -
-
- {{selectedProduct.name}} - {{'$' + selectedProduct.price}} -
- {{selectedProduct.category}} + html: `
+ + +
+
+
- - - - - - Name - Image - Price - - - - - {{product.name}} - - {{product.price}} - - - - - +
+ {{ selectedProduct.name }} + {{ '$' + selectedProduct.price }} +
+ {{ selectedProduct.category }} +
+ + + + + + Name + Image + Price + + + + + {{ product.name }} + + {{ product.price }} + + + + +
`, typescript: ` -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { MessageService } from 'primeng/api'; import { OverlayPanel } from 'primeng/overlaypanel'; import { Product } from '../../domain/product'; @@ -162,19 +163,21 @@ interface TableRowSelectEvent { @Component({ selector: 'overlay-panel-data-table-demo', templateUrl: './overlay-panel-data-table-demo.html', - providers: [ MessageService ] + providers: [ MessageService, ProductService ] }) export class OverlayPanelDataTableDemo implements OnInit { + + constructor(private productService: ProductService, private messageService: MessageService, private cdr: ChangeDetectorRef) {} + products: Product[] | undefined; selectedProduct: Product | undefined; - constructor(private productService: ProductService, private messageService: MessageService) {} - ngOnInit() { this.productService.getProductsSmall().then((products) => { this.products = products; this.selectedProduct = products[0]; + this.cdr.markForCheck() }); } diff --git a/src/app/showcase/doc/panel/paneldoc.module.ts b/src/app/showcase/doc/panel/paneldoc.module.ts index e79a8ed4400..5aa7ae73ece 100644 --- a/src/app/showcase/doc/panel/paneldoc.module.ts +++ b/src/app/showcase/doc/panel/paneldoc.module.ts @@ -4,6 +4,9 @@ import { RouterModule } from '@angular/router'; import { PanelModule } from 'primeng/panel'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AvatarModule } from 'primeng/avatar'; +import { ButtonModule } from 'primeng/button'; +import { MenuModule } from 'primeng/menu'; import { StyleDoc } from './styledoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; @@ -12,7 +15,7 @@ import { ToggleableDoc } from './toggleabledoc'; import { AccessibilityDoc } from './accessibilitydoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, PanelModule, RouterModule], + imports: [CommonModule, AppCodeModule, AppDocModule, PanelModule, RouterModule, AvatarModule, ButtonModule, MenuModule], exports: [AppDocModule], declarations: [ImportDoc, BasicDoc, ToggleableDoc, TemplateDoc, StyleDoc, AccessibilityDoc] }) diff --git a/src/app/showcase/doc/panel/templatedoc.ts b/src/app/showcase/doc/panel/templatedoc.ts index 35a65932377..c5f3512347b 100644 --- a/src/app/showcase/doc/panel/templatedoc.ts +++ b/src/app/showcase/doc/panel/templatedoc.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Code } from '../../domain/code'; @Component({ @@ -8,39 +8,148 @@ import { Code } from '../../domain/code';

Header and Footers sections can be customized using header and footer templates.

- - Header - Body Content - Footer content here + + +
+ + Amy Elsner +
+ + +
+
+ + +
+ Updated 2 hours ago +
+ + + + + +

+ 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 TemplateDoc { +export class TemplateDoc implements OnInit { + items: { label?: string; icon?: string; separator?: boolean }[] = []; + + ngOnInit() { + this.items = [ + { + label: 'Refresh', + icon: 'pi pi-refresh' + }, + { + label: 'Search', + icon: 'pi pi-search' + }, + { + separator: true + }, + { + label: 'Delete', + icon: 'pi pi-times' + } + ]; + } + code: Code = { - basic: ` - Header - Body Content - Footer content here + basic: ` + +
+ + Amy Elsner +
+ + +
+
+ + +
+ Updated 2 hours ago +
+ + + + + +

+ 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. +

`, - html: ` -
- - Header - Body Content - Footer content here + html: `
+ + +
+ + Amy Elsner +
+ + +
+
+ + +
+ Updated 2 hours ago +
+ + + + + +

+ 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. +

`, typescript: ` -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'panel-template-demo', templateUrl: './panel-template-demo.html' }) -export class PanelTemplateDemo {}` +export class PanelTemplateDemo implements OnInit { + items: { label?: string; icon?: string; separator?: boolean }[] = []; + + ngOnInit() { + this.items = [ + { + label: 'Refresh', + icon: 'pi pi-refresh' + }, + { + label: 'Search', + icon: 'pi pi-search' + }, + { + separator: true + }, + { + label: 'Delete', + icon: 'pi pi-times' + } + ]; + } +}` }; } diff --git a/src/app/showcase/doc/password/localedoc.ts b/src/app/showcase/doc/password/localedoc.ts new file mode 100644 index 00000000000..5dd05ac838c --- /dev/null +++ b/src/app/showcase/doc/password/localedoc.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'locale-doc', + template: ` + +

+ 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 +

+ +
+ +
+ + ` +}) +export class LocaleDoc { + value!: string; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'password-locale-demo', + templateUrl: './password-locale-demo.html' +}) +export class PasswordLocaleDemo { + value!: string; +}` + }; +} diff --git a/src/app/showcase/doc/password/passworddoc.module.ts b/src/app/showcase/doc/password/passworddoc.module.ts index ded7292c845..c7a8ce2b1fa 100644 --- a/src/app/showcase/doc/password/passworddoc.module.ts +++ b/src/app/showcase/doc/password/passworddoc.module.ts @@ -13,6 +13,7 @@ import { FloatLabelDoc } from './floatlabeldoc'; import { ImportDoc } from './importdoc'; import { InvalidDoc } from './invaliddoc'; import { MeterDoc } from './meterdoc'; +import { LocaleDoc } from './localedoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; @@ -21,6 +22,6 @@ import { ToggleMaskDoc } from './togglemaskdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, PasswordModule, FormsModule, ReactiveFormsModule, DividerModule, RouterModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, MeterDoc, ToggleMaskDoc, TemplateDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, MeterDoc,LocaleDoc, ToggleMaskDoc, TemplateDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] }) export class PasswordDocModule {} diff --git a/src/app/showcase/doc/progressbar/progressbardoc.module.ts b/src/app/showcase/doc/progressbar/progressbardoc.module.ts index 66afa7efaae..151de7c64f2 100644 --- a/src/app/showcase/doc/progressbar/progressbardoc.module.ts +++ b/src/app/showcase/doc/progressbar/progressbardoc.module.ts @@ -10,11 +10,12 @@ import { BasicDoc } from './basicdoc'; import { DynamicDoc } from './dynamicdoc'; import { ImportDoc } from './importdoc'; import { IndeterminateDoc } from './indeterminatedoc'; +import { TemplateDoc } from './templatedoc'; import { StyleDoc } from './styledoc'; @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, ProgressBarModule, ToastModule], - declarations: [BasicDoc, DynamicDoc, ImportDoc, IndeterminateDoc, StyleDoc, AccessibilityDoc], + declarations: [BasicDoc, DynamicDoc, ImportDoc, IndeterminateDoc, TemplateDoc, StyleDoc, AccessibilityDoc], exports: [AppDocModule] }) export class ProgressBarDocModule {} diff --git a/src/app/showcase/doc/progressbar/templatedoc.ts b/src/app/showcase/doc/progressbar/templatedoc.ts new file mode 100644 index 00000000000..05892758b54 --- /dev/null +++ b/src/app/showcase/doc/progressbar/templatedoc.ts @@ -0,0 +1,43 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'template-doc', + template: ` + +

content template allows displaying custom content inside the progressbar.

+ +
+ + + {{value}}/100 + + +
+ + ` +}) +export class TemplateDoc { + code: Code = { + basic: ` + + {{value}}/100 + +`, + html: `
+ + + {{value}}/100 + + +
`, + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'progress-bar-template-demo', + templateUrl: './progress-bar-template-demo.html' +}) +export class ProgressBarTemplateDemo {}` + }; +} diff --git a/src/app/showcase/doc/progressspinner/basicdoc.ts b/src/app/showcase/doc/progressspinner/basicdoc.ts index 3a82fcc138b..ed44e81a0d9 100644 --- a/src/app/showcase/doc/progressspinner/basicdoc.ts +++ b/src/app/showcase/doc/progressspinner/basicdoc.ts @@ -7,7 +7,7 @@ import { Code } from '../../domain/code';

An infinite spin animation is displayed by default.

 -
+
@@ -16,8 +16,7 @@ import { Code } from '../../domain/code'; export class BasicDoc { code: Code = { basic: ``, - html: ` -
+ html: `
`, typescript: ` diff --git a/src/app/showcase/doc/progressspinner/templatedoc.ts b/src/app/showcase/doc/progressspinner/templatedoc.ts index 5e3c6594a63..510bbcc584c 100644 --- a/src/app/showcase/doc/progressspinner/templatedoc.ts +++ b/src/app/showcase/doc/progressspinner/templatedoc.ts @@ -7,7 +7,7 @@ import { Code } from '../../domain/code';

ProgressSpinner can be customized with styling property like styleClass, strokeWidth and fill.

 -
+
@@ -20,8 +20,7 @@ export class TemplateDoc { code: Code = { basic: ``, - html: ` -
+ html: `
`, typescript: ` diff --git a/src/app/showcase/doc/rating/disableddoc.ts b/src/app/showcase/doc/rating/disableddoc.ts index 7c812c02799..af4da290e71 100644 --- a/src/app/showcase/doc/rating/disableddoc.ts +++ b/src/app/showcase/doc/rating/disableddoc.ts @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.

- +
` @@ -17,11 +17,11 @@ export class DisabledDoc { value: number = 5; code: Code = { - basic: ``, + basic: ``, html: `
- +
`, typescript: ` diff --git a/src/app/showcase/doc/rating/templatedoc.ts b/src/app/showcase/doc/rating/templatedoc.ts index b26ab3e7617..07e435c7af8 100644 --- a/src/app/showcase/doc/rating/templatedoc.ts +++ b/src/app/showcase/doc/rating/templatedoc.ts @@ -28,21 +28,7 @@ export class TemplateDoc { code: Code = { basic: ` - - - - - - - - - -`, - - html: ` -
- - + @@ -51,6 +37,20 @@ export class TemplateDoc { +`, + + html: ` +
+ + + + + + + + + +
`, diff --git a/src/app/showcase/doc/scrolltop/basicdoc.ts b/src/app/showcase/doc/scrolltop/basicdoc.ts index 2b4ddb5e7a4..843c86d6b11 100644 --- a/src/app/showcase/doc/scrolltop/basicdoc.ts +++ b/src/app/showcase/doc/scrolltop/basicdoc.ts @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

Scroll down the page to display the ScrollTo component.

- +
diff --git a/src/app/showcase/doc/scrolltop/elementdoc.ts b/src/app/showcase/doc/scrolltop/elementdoc.ts index ebd1d0e88f7..2263043d628 100644 --- a/src/app/showcase/doc/scrolltop/elementdoc.ts +++ b/src/app/showcase/doc/scrolltop/elementdoc.ts @@ -7,7 +7,7 @@ import { Code } from '../../domain/code';

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 diff --git a/src/app/showcase/doc/sidebar/headlessdoc.ts b/src/app/showcase/doc/sidebar/headlessdoc.ts new file mode 100644 index 00000000000..4c5008f54d1 --- /dev/null +++ b/src/app/showcase/doc/sidebar/headlessdoc.ts @@ -0,0 +1,579 @@ +import { Component, ViewChild } from '@angular/core'; +import { Code } from '../../domain/code'; +import { Sidebar } from 'primeng/sidebar'; + +@Component({ + selector: 'headless-doc', + template: ` + +

Headless mode allows you to customize the entire user interface instead of the default elements.

+ +
+ + +
+
+ + + + + + Your Logo + + + + +
+
+ + +
+
+
+ + + Amy Elsner + +
+
+ + + +
+ + ` +}) +export class HeadlessDoc { + @ViewChild('sidebarRef') sidebarRef!: Sidebar; + + closeCallback(e): void { + this.sidebarRef.close(e); + } + + sidebarVisible: boolean = false; + + code: Code = { + basic: ` + +
+
+ + + + + + Your Logo + + + + +
+
+ + +
+
+
+ + + Amy Elsner + +
+
+ + +`, + + html: `
+ + +
+
+ + + + + + Your Logo + + + + +
+
+ + +
+
+
+ + + Amy Elsner + +
+
+ + + +
`, + + typescript: ` +import { Component, ViewChild } from '@angular/core'; +import { Sidebar } from 'primeng/sidebar'; + +@Component({ + selector: 'sidebar-headless-demo', + templateUrl: './sidebar-headless-demo.html' +}) +export class SidebarHeadlessDemo { + @ViewChild('sidebarRef') sidebarRef!: Sidebar; + + closeCallback(e): void { + this.sidebarRef.close(e); + } + + sidebarVisible: boolean = false; +}` + }; +} diff --git a/src/app/showcase/doc/sidebar/sidebardoc.module.ts b/src/app/showcase/doc/sidebar/sidebardoc.module.ts index 73615db508a..13709333737 100644 --- a/src/app/showcase/doc/sidebar/sidebardoc.module.ts +++ b/src/app/showcase/doc/sidebar/sidebardoc.module.ts @@ -4,6 +4,7 @@ import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { SidebarModule } from 'primeng/sidebar'; import { ButtonModule } from 'primeng/button'; +import { AvatarModule } from 'primeng/avatar'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; @@ -13,11 +14,14 @@ import { StyleDoc } from './styledoc'; import { PositionDoc } from './positiondoc'; import { FullScreenDoc } from './fullscreendoc'; import { SizeDoc } from './sizedoc'; +import { HeadlessDoc } from './headlessdoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { RippleModule } from 'primeng/ripple'; +import { StyleClassModule } from 'primeng/styleclass'; @NgModule({ - imports: [CommonModule, FormsModule, AppCodeModule, RouterModule, SidebarModule, ButtonModule, AppDocModule], - declarations: [BasicDoc, TemplateDoc, ImportDoc, StyleDoc, PositionDoc, FullScreenDoc, SizeDoc, AccessibilityDoc], + imports: [CommonModule, FormsModule, AppCodeModule, RouterModule, SidebarModule, ButtonModule, AppDocModule, AvatarModule, RippleModule, StyleClassModule], + declarations: [BasicDoc, TemplateDoc, ImportDoc, StyleDoc, PositionDoc, FullScreenDoc, SizeDoc, AccessibilityDoc, HeadlessDoc], exports: [AppDocModule] }) export class SidebarDocModule {} diff --git a/src/app/showcase/doc/skeleton/shapesdoc.ts b/src/app/showcase/doc/skeleton/shapesdoc.ts index 39e8aeb0abb..6bbf89aaccc 100644 --- a/src/app/showcase/doc/skeleton/shapesdoc.ts +++ b/src/app/showcase/doc/skeleton/shapesdoc.ts @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Various shapes and sizes can be created using styling properties like shape, width, height, borderRadius and styleClass.

-
+
Rectangle
@@ -16,7 +16,7 @@ import { Code } from '../../domain/code';
-
+
Rounded
@@ -24,7 +24,7 @@ import { Code } from '../../domain/code';
-
+
Square
@@ -33,7 +33,7 @@ import { Code } from '../../domain/code';
-
+
Circle
@@ -75,7 +75,7 @@ export class ShapesDoc { `, html: `
-
+
Rectangle
@@ -83,7 +83,7 @@ export class ShapesDoc {
-
+
Rounded
@@ -91,7 +91,7 @@ export class ShapesDoc {
-
+
Square
@@ -100,7 +100,7 @@ export class ShapesDoc {
-
+
Circle
diff --git a/src/app/showcase/doc/tabview/controlleddoc.ts b/src/app/showcase/doc/tabview/controlleddoc.ts index fd1bb1cb802..afcd64577f3 100644 --- a/src/app/showcase/doc/tabview/controlleddoc.ts +++ b/src/app/showcase/doc/tabview/controlleddoc.ts @@ -8,10 +8,10 @@ import { Code } from '../../domain/code';

TabView can be controlled programmatically using a binding to activeIndex update the active index.

-
- - - +
+ + +
@@ -41,38 +41,10 @@ export class ControlledDoc { activeIndex: number = 0; code: Code = { - basic: `
- - - -
- - -

- 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. -

- -`, - - html: ` -
-
- - - + basic: `
+ + +
@@ -93,7 +65,34 @@ export class ControlledDoc { 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.

- +`, + + 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. +

+ +
`, typescript: ` diff --git a/src/app/showcase/doc/tabview/dynamicdoc.ts b/src/app/showcase/doc/tabview/dynamicdoc.ts new file mode 100644 index 00000000000..8cac5a5605d --- /dev/null +++ b/src/app/showcase/doc/tabview/dynamicdoc.ts @@ -0,0 +1,73 @@ +import { Component, OnInit } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'dynamic-doc', + template: ` + +

Tabs can be generated dynamically using the standard ngFor directive.

+ +
+ + +

+ {{ tab.content }} +

+ + +
+ + ` +}) +export class DynamicDoc implements OnInit { + + tabs: { title: string, content: string }[] = []; + + ngOnInit() { + this.tabs = [ + { title: 'Tab 1', content: 'Tab 1 Content' }, + { title: 'Tab 2', content: 'Tab 2 Content' }, + { title: 'Tab 3', content: 'Tab 3 Content' } + ]; + } + + code: Code = { + basic: ` + +

+ {{ tab.content }} +

+ +`, + + html: `
+ + +

+ {{ tab.content }} +

+ + +
`, + + typescript: ` +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'tab-view-basic-demo', + templateUrl: './tab-view-basic-demo.html' +}) +export class TabViewBasicDemo imlements onInit { + tabs: { title: string, content: string }[] = []; + + ngOnInit() { + this.tabs = [ + { title: 'Tab 1', content: 'Tab 1 Content' }, + { title: 'Tab 2', content: 'Tab 2 Content' }, + { title: 'Tab 3', content: 'Tab 3 Content' } + ]; + } + +}` + }; +} diff --git a/src/app/showcase/doc/tabview/lazydoc.ts b/src/app/showcase/doc/tabview/lazydoc.ts new file mode 100644 index 00000000000..32b1b50d57f --- /dev/null +++ b/src/app/showcase/doc/tabview/lazydoc.ts @@ -0,0 +1,57 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'lazy-doc', + template: ` + +

Lazy loading helps initial load performance by only initializing the active tab, inactive tabs are not initialized until they get selected. A lazy loaded tabpanel contents are cached by default so that upon reselection, they are not created again. You may use cache property on TabPanel to configure this behavior. A TabPanel is specified as lazy when there is a ngTemplate with pTemplate="content" in it.

+ +
+ + Content 1 + + Complex Content to Lazy Load + + + Complex Content to Lazy Load + + +
+ + ` +}) +export class LazyDoc { + code: Code = { + basic: ` + Content 1 + + Complex Content to Lazy Load + + + Complex Content to Lazy Load + +`, + + html: `
+ + Content 1 + + Complex Content to Lazy Load + + + Complex Content to Lazy Load + + +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'tab-view-lazy-demo', + templateUrl: './tab-view-lazy-demo.html' +}) +export class TabViewLazyDemo {}` + }; +} diff --git a/src/app/showcase/doc/tabview/tabviewdoc.module.ts b/src/app/showcase/doc/tabview/tabviewdoc.module.ts index 4fc38ca2e22..cfb081dd424 100644 --- a/src/app/showcase/doc/tabview/tabviewdoc.module.ts +++ b/src/app/showcase/doc/tabview/tabviewdoc.module.ts @@ -7,17 +7,19 @@ import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ControlledDoc } from './controlleddoc'; +import { DynamicDoc } from './dynamicdoc'; import { DisabledDoc } from './disableddoc'; import { TemplateDoc } from './customtemplatedoc'; import { ImportDoc } from './importdoc'; import { ClosableDoc } from './closabledoc'; import { ScrollableDoc } from './scrollabledoc'; +import { LazyDoc } from './lazydoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, TabViewModule, RouterModule, ButtonModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, ControlledDoc, DisabledDoc, TemplateDoc, ClosableDoc, ScrollableDoc, StyleDoc, AccessibilityDoc] + declarations: [ImportDoc, BasicDoc, ControlledDoc, DynamicDoc, DisabledDoc, TemplateDoc, ClosableDoc, ScrollableDoc, LazyDoc, StyleDoc, AccessibilityDoc] }) export class TabViewDocModule {} diff --git a/src/app/showcase/doc/tieredmenu/basicdoc.ts b/src/app/showcase/doc/tieredmenu/basicdoc.ts index 44826d6b5c1..96f85ceb918 100644 --- a/src/app/showcase/doc/tieredmenu/basicdoc.ts +++ b/src/app/showcase/doc/tieredmenu/basicdoc.ts @@ -21,136 +21,78 @@ export class BasicDoc implements OnInit { this.items = [ { label: 'File', - icon: 'pi pi-fw pi-file', + icon: 'pi pi-file', items: [ { label: 'New', - icon: 'pi pi-fw pi-plus', + icon: 'pi pi-plus', items: [ { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' + label: 'Document', + icon: 'pi pi-file' + }, + { + label: 'Image', + icon: 'pi pi-image' }, { label: 'Video', - icon: 'pi pi-fw pi-video' + icon: 'pi pi-video' } ] }, { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true + label: 'Open', + icon: 'pi pi-folder-open' }, { - label: 'Export', - icon: 'pi pi-fw pi-external-link' + label: 'Print', + icon: 'pi pi-print' } ] }, { label: 'Edit', - icon: 'pi pi-fw pi-pencil', + icon: 'pi pi-file-edit', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' + label: 'Copy', + icon: 'pi pi-copy' }, { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' + label: 'Delete', + icon: 'pi pi-times' } ] }, { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] + label: 'Search', + icon: 'pi pi-search' }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + separator: true + }, + { + label: 'Share', + icon: 'pi pi-share-alt', items: [ { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Slack', + icon: 'pi pi-slack' }, { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Whatsapp', + icon: 'pi pi-whatsapp' } ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' } - ]; + ] } code: Code = { basic: ``, - html: ` -
+ html: `
`, @@ -169,129 +111,72 @@ export class TieredMenuBasicDemo implements OnInit { this.items = [ { label: 'File', - icon: 'pi pi-fw pi-file', + icon: 'pi pi-file', items: [ { label: 'New', - icon: 'pi pi-fw pi-plus', + icon: 'pi pi-plus', items: [ { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' + label: 'Document', + icon: 'pi pi-file' + }, + { + label: 'Image', + icon: 'pi pi-image' }, { label: 'Video', - icon: 'pi pi-fw pi-video' + icon: 'pi pi-video' } ] }, { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true + label: 'Open', + icon: 'pi pi-folder-open' }, { - label: 'Export', - icon: 'pi pi-fw pi-external-link' + label: 'Print', + icon: 'pi pi-print' } ] }, { label: 'Edit', - icon: 'pi pi-fw pi-pencil', + icon: 'pi pi-file-edit', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' + label: 'Copy', + icon: 'pi pi-copy' }, { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' + label: 'Delete', + icon: 'pi pi-times' } ] }, { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] + label: 'Search', + icon: 'pi pi-search' }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + separator: true + }, + { + label: 'Share', + icon: 'pi pi-share-alt', items: [ { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Slack', + icon: 'pi pi-slack' }, { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Whatsapp', + icon: 'pi pi-whatsapp' } ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' } - ]; + ] } }` }; diff --git a/src/app/showcase/doc/tieredmenu/commanddoc.ts b/src/app/showcase/doc/tieredmenu/commanddoc.ts new file mode 100644 index 00000000000..e563165a2f7 --- /dev/null +++ b/src/app/showcase/doc/tieredmenu/commanddoc.ts @@ -0,0 +1,155 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '../../domain/code'; +import { MessageService } from 'primeng/api'; + +@Component({ + selector: 'command-doc', + template: ` + +

The command property defines the callback to run when an item is activated by click or a key event.

+ +
+ + +
+ + ` +}) +export class CommandDoc implements OnInit { + constructor(private messageService: MessageService) {} + items: MenuItem[] | undefined; + ngOnInit() { + this.items = [ + { + label: 'File', + icon: 'pi pi-file', + items: [ + { + label: 'New', + icon: 'pi pi-plus', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 }); + } + }, + { + label: 'Print', + icon: 'pi pi-print', + command: () => { + this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 }); + } + } + ] + }, + { + label: 'Search', + icon: 'pi pi-search', + command: () => { + this.messageService.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 }); + } + }, + { + separator: true + }, + { + label: 'Sync', + icon: 'pi pi-cloud', + items: [ + { + label: 'Import', + icon: 'pi pi-cloud-download', + command: () => { + this.messageService.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 }); + } + }, + { + label: 'Export', + icon: 'pi pi-cloud-upload', + command: () => { + this.messageService.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 }); + } + } + ] + } + ]; + } + + code: Code = { + basic: ` +`, + + html: `
+ + +
`, + + typescript: ` +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { MessageService } from 'primeng/api'; + +@Component({ + selector: 'tiered-menu-command-demo', + templateUrl: './tiered-menu-command-demo.html' +}) +export class TieredMenuCommandDemo implements OnInit { + constructor(private messageService: MessageService) {} + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + label: 'File', + icon: 'pi pi-file', + items: [ + { + label: 'New', + icon: 'pi pi-plus', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 }); + } + }, + { + label: 'Print', + icon: 'pi pi-print', + command: () => { + this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 }); + } + } + ] + }, + { + label: 'Search', + icon: 'pi pi-search', + command: () => { + this.messageService.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 }); + } + }, + { + separator: true + }, + { + label: 'Sync', + icon: 'pi pi-cloud', + items: [ + { + label: 'Import', + icon: 'pi pi-cloud-download', + command: () => { + this.messageService.add({ severity: 'info', summary: 'Downloads', detail: 'Downloaded from cloud', life: 3000 }); + } + }, + { + label: 'Export', + icon: 'pi pi-cloud-upload', + command: () => { + this.messageService.add({ severity: 'info', summary: 'Shared', detail: 'Exported to cloud', life: 3000 }); + } + } + ] + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/tieredmenu/popupdoc.ts b/src/app/showcase/doc/tieredmenu/popupdoc.ts index 037a6c456b0..2b988d5b11f 100644 --- a/src/app/showcase/doc/tieredmenu/popupdoc.ts +++ b/src/app/showcase/doc/tieredmenu/popupdoc.ts @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

Popup mode is enabled by adding popup property and calling toggle method with an event of the target.

- +
@@ -22,138 +22,80 @@ export class PopupDoc implements OnInit { this.items = [ { label: 'File', - icon: 'pi pi-fw pi-file', + icon: 'pi pi-file', items: [ { label: 'New', - icon: 'pi pi-fw pi-plus', + icon: 'pi pi-plus', items: [ { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' + label: 'Document', + icon: 'pi pi-file' + }, + { + label: 'Image', + icon: 'pi pi-image' }, { label: 'Video', - icon: 'pi pi-fw pi-video' + icon: 'pi pi-video' } ] }, { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true + label: 'Open', + icon: 'pi pi-folder-open' }, { - label: 'Export', - icon: 'pi pi-fw pi-external-link' + label: 'Print', + icon: 'pi pi-print' } ] }, { label: 'Edit', - icon: 'pi pi-fw pi-pencil', + icon: 'pi pi-file-edit', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' + label: 'Copy', + icon: 'pi pi-copy' }, { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' + label: 'Delete', + icon: 'pi pi-times' } ] }, { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] + label: 'Search', + icon: 'pi pi-search' }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + separator: true + }, + { + label: 'Share', + icon: 'pi pi-share-alt', items: [ { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Slack', + icon: 'pi pi-slack' }, { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Whatsapp', + icon: 'pi pi-whatsapp' } ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' } - ]; + ] } code: Code = { - basic: ` + basic: ` `, - html: ` -
- + html: `
+
`, @@ -172,129 +114,72 @@ export class TieredMenuPopupDemo implements OnInit { this.items = [ { label: 'File', - icon: 'pi pi-fw pi-file', + icon: 'pi pi-file', items: [ { label: 'New', - icon: 'pi pi-fw pi-plus', + icon: 'pi pi-plus', items: [ { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' + label: 'Document', + icon: 'pi pi-file' + }, + { + label: 'Image', + icon: 'pi pi-image' }, { label: 'Video', - icon: 'pi pi-fw pi-video' + icon: 'pi pi-video' } ] }, { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true + label: 'Open', + icon: 'pi pi-folder-open' }, { - label: 'Export', - icon: 'pi pi-fw pi-external-link' + label: 'Print', + icon: 'pi pi-print' } ] }, { label: 'Edit', - icon: 'pi pi-fw pi-pencil', + icon: 'pi pi-file-edit', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' + label: 'Copy', + icon: 'pi pi-copy' }, { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' + label: 'Delete', + icon: 'pi pi-times' } ] }, { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' - }, - { - label: 'Search', - icon: 'pi pi-fw pi-users', - items: [ - { - label: 'Filter', - icon: 'pi pi-fw pi-filter', - items: [ - { - label: 'Print', - icon: 'pi pi-fw pi-print' - } - ] - }, - { - icon: 'pi pi-fw pi-bars', - label: 'List' - } - ] - } - ] + label: 'Search', + icon: 'pi pi-search' }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + separator: true + }, + { + label: 'Share', + icon: 'pi pi-share-alt', items: [ { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Slack', + icon: 'pi pi-slack' }, { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Whatsapp', + icon: 'pi pi-whatsapp' } ] - }, - { - separator: true - }, - { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' } - ]; + ] } }` }; diff --git a/src/app/showcase/doc/tieredmenu/routerdoc.ts b/src/app/showcase/doc/tieredmenu/routerdoc.ts new file mode 100644 index 00000000000..21498873998 --- /dev/null +++ b/src/app/showcase/doc/tieredmenu/routerdoc.ts @@ -0,0 +1,200 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '../../domain/code'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'router-doc', + template: ` + +

Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.

+ +
+ + + + + + {{ item.label }} + + + + + + + {{ item.label }} + + + + + + + {{ item.label }} + + + + + + +
+ + ` +}) +export class RouterDoc implements OnInit { + constructor(private router: Router) {} + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + label: 'Router', + icon: 'pi pi-palette', + items: [ + { + label: 'Theming', + route: '/theming' + }, + { + label: 'Colors', + route: '/colors' + } + ] + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + items: [ + { + label: 'Angular', + url: 'https://angular.dev/' + }, + { + label: 'Vite.js', + url: 'https://vitejs.dev/' + } + ] + } + ]; + } + + code: Code = { + basic: ` + + + + + {{ item.label }} + + + + + + + {{ item.label }} + + + + + + + {{ item.label }} + + + + + +`, + + html: `
+ + + + + + {{ item.label }} + + + + + + + {{ item.label }} + + + + + + + {{ item.label }} + + + + + + +
`, + + typescript: ` +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'tiered-menu-router-demo', + templateUrl: './tiered-menu-router-demo.html' +}) +export class TieredMenuRouterDemo implements OnInit { + constructor(private router: Router) {} + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + label: 'Router', + icon: 'pi pi-palette', + items: [ + { + label: 'Theming', + route: '/theming' + }, + { + label: 'Colors', + route: '/colors' + } + ] + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + items: [ + { + label: 'Angular', + url: 'https://angular.dev/' + }, + { + label: 'Vite.js', + url: 'https://vitejs.dev/' + } + ] + } + ]; + } + + +}` + }; +} diff --git a/src/app/showcase/doc/tieredmenu/templatedoc.ts b/src/app/showcase/doc/tieredmenu/templatedoc.ts new file mode 100644 index 00000000000..0fa3a3bd3a7 --- /dev/null +++ b/src/app/showcase/doc/tieredmenu/templatedoc.ts @@ -0,0 +1,233 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'template-doc', + template: ` + +

TieredMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.

+ +
+ + + + + {{ item.label }} + + {{ item.shortcut }} + + + + +
+ + ` +}) +export class TemplateDoc implements OnInit { + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + label: 'File', + icon: 'pi pi-file', + items: [ + { + label: 'New', + icon: 'pi pi-plus', + items: [ + { + label: 'Document', + icon: 'pi pi-file', + shortcut: '⌘+N' + }, + { + label: 'Image', + icon: 'pi pi-image', + shortcut: '⌘+I' + }, + { + label: 'Video', + icon: 'pi pi-video', + shortcut: '⌘+L' + } + ] + }, + { + label: 'Open', + icon: 'pi pi-folder-open', + shortcut: '⌘+O' + }, + { + label: 'Print', + icon: 'pi pi-print', + shortcut: '⌘+P' + } + ] + }, + { + label: 'Edit', + icon: 'pi pi-file-edit', + items: [ + { + label: 'Copy', + icon: 'pi pi-copy', + shortcut: '⌘+C' + }, + { + label: 'Delete', + icon: 'pi pi-times', + shortcut: '⌘+D' + } + ] + }, + { + label: 'Search', + icon: 'pi pi-search', + shortcut: '⌘+S' + }, + { + separator: true + }, + { + label: 'Share', + icon: 'pi pi-share-alt', + items: [ + { + label: 'Slack', + icon: 'pi pi-slack', + badge: '2' + }, + { + label: 'Whatsapp', + icon: 'pi pi-whatsapp', + badge: '3' + } + ] + } + ] + } + + code: Code = { + basic: ` + + + + {{ item.label }} + + {{ item.shortcut }} + + + +`, + + html: `
+ + + + + {{ item.label }} + + {{ item.shortcut }} + + + + +
`, + + typescript: ` +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; + +@Component({ + selector: 'tiered-menu-template-demo', + templateUrl: './tiered-menu-template-demo.html' +}) +export class TieredMenuTemplateDemo implements OnInit { + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + label: 'File', + icon: 'pi pi-file', + items: [ + { + label: 'New', + icon: 'pi pi-plus', + items: [ + { + label: 'Document', + icon: 'pi pi-file', + shortcut: '⌘+N' + }, + { + label: 'Image', + icon: 'pi pi-image', + shortcut: '⌘+I' + }, + { + label: 'Video', + icon: 'pi pi-video', + shortcut: '⌘+L' + } + ] + }, + { + label: 'Open', + icon: 'pi pi-folder-open', + shortcut: '⌘+O' + }, + { + label: 'Print', + icon: 'pi pi-print', + shortcut: '⌘+P' + } + ] + }, + { + label: 'Edit', + icon: 'pi pi-file-edit', + items: [ + { + label: 'Copy', + icon: 'pi pi-copy', + shortcut: '⌘+C' + }, + { + label: 'Delete', + icon: 'pi pi-times', + shortcut: '⌘+D' + } + ] + }, + { + label: 'Search', + icon: 'pi pi-search', + shortcut: '⌘+S' + }, + { + separator: true + }, + { + label: 'Share', + icon: 'pi pi-share-alt', + items: [ + { + label: 'Slack', + icon: 'pi pi-slack', + badge: '2' + }, + { + label: 'Whatsapp', + icon: 'pi pi-whatsapp', + badge: '3' + } + ] + } + ] + } +}` + }; +} diff --git a/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts b/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts index fd9322cfc53..5f7244575a6 100644 --- a/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts +++ b/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts @@ -5,15 +5,22 @@ import { TieredMenuModule } from 'primeng/tieredmenu'; import { ButtonModule } from 'primeng/button'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { BadgeModule } from 'primeng/badge'; +import { ToastModule } from 'primeng/toast'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { PopupDoc } from './popupdoc'; +import { TemplateDoc } from './templatedoc'; +import { CommandDoc } from './commanddoc'; +import { RouterDoc } from './routerdoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { MessageService } from 'primeng/api'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, TieredMenuModule, ButtonModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, PopupDoc, StyleDoc, AccessibilityDoc], - exports: [AppDocModule] + imports: [CommonModule, AppCodeModule, RouterModule, TieredMenuModule, ButtonModule, AppDocModule, BadgeModule, ToastModule], + declarations: [BasicDoc, ImportDoc, PopupDoc, StyleDoc, AccessibilityDoc, TemplateDoc, CommandDoc, RouterDoc], + exports: [AppDocModule], + providers:[MessageService] }) export class TieredMenuDocModule {} diff --git a/src/app/showcase/doc/toast/headlessdoc.ts b/src/app/showcase/doc/toast/headlessdoc.ts new file mode 100644 index 00000000000..61acf9769d9 --- /dev/null +++ b/src/app/showcase/doc/toast/headlessdoc.ts @@ -0,0 +1,176 @@ +import { ChangeDetectorRef, Component } from '@angular/core'; +import { MessageService } from 'primeng/api'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'headless-doc', + template: ` + +

Headless mode allows you to customize the entire user interface instead of the default elements.

+ +
+ + +
+ +
+

{{ message.summary }}

+

{{ message.detail }}

+
+ + +
+
+ + +
+
+
+ + + +
+ + `, + providers: [MessageService] +}) +export class HeadlessDoc { + constructor(private messageService: MessageService, private cdr: ChangeDetectorRef) {} + + visible: boolean = false; + + progress: number = 0; + + interval = null; + + showConfirm() { + if (!this.visible) { + this.messageService.add({ key: 'confirm', sticky: true, severity: 'custom', summary: 'Uploading your files.' }); + this.visible = true; + this.progress = 0; + + if (this.interval) { + clearInterval(this.interval); + } + + this.interval = setInterval(() => { + if (this.progress <= 100) { + this.progress = this.progress + 20; + } + + if (this.progress >= 100) { + this.progress = 100; + clearInterval(this.interval); + } + this.cdr.markForCheck() + }, 1000); + } + } + + onConfirm() { + this.messageService.clear('confirm'); + this.visible = false; + } + + onReject() { + this.messageService.clear('confirm'); + this.visible = false; + } + + code: Code = { + basic: ` + +
+ +
+

{{ message.summary }}

+

{{ message.detail }}

+
+ + +
+
+ + +
+
+
+ + +`, + html: `
+ + +
+ +
+

{{ message.summary }}

+

{{ message.detail }}

+
+ + +
+
+ + +
+
+
+ + + +
`, + typescript: ` +import { ChangeDetectorRef, Component } from '@angular/core'; +import { MessageService } from 'primeng/api'; + +@Component({ + selector: 'toast-headless-demo', + templateUrl: './toast-headless-demo.html', + providers: [MessageService] +}) +export class ToastHeadlessDemo { + constructor(private messageService: MessageService,private cdr:ChangeDetectorRef) {} + + visible: boolean = false; + + progress: number = 0; + + interval = null; + + showConfirm() { + if (!this.visible) { + this.messageService.add({ key: 'confirm', sticky: true, severity: 'custom', summary: 'Uploading your files.' }); + this.visible = true; + this.progress = 0; + + if (this.interval) { + clearInterval(this.interval); + } + + this.interval = setInterval(() => { + if (this.progress <= 100) { + this.progress = this.progress + 20; + } + + if (this.progress >= 100) { + this.progress = 100; + clearInterval(this.interval); + } + this.cdr.detectChanges() + }, 1000); + } + } + + onConfirm() { + this.messageService.clear('confirm'); + this.visible = false; + } + + onReject() { + this.messageService.clear('confirm'); + this.visible = false; + } +}` + }; +} diff --git a/src/app/showcase/doc/toast/templatedoc.ts b/src/app/showcase/doc/toast/templatedoc.ts index a1709657158..2212035a779 100644 --- a/src/app/showcase/doc/toast/templatedoc.ts +++ b/src/app/showcase/doc/toast/templatedoc.ts @@ -11,20 +11,13 @@ import { Code } from '../../domain/code';
-
-
- -

{{ message.summary }}

-

{{ message.detail }}

-
-
-
- -
-
- -
+
+
+ + Amy Elsner
+
{{ message.summary }}
+
@@ -35,13 +28,14 @@ import { Code } from '../../domain/code'; providers: [MessageService] }) export class TemplateDoc { - visible: boolean = false; constructor(private messageService: MessageService) {} + visible: boolean = false; + showConfirm() { if (!this.visible) { - this.messageService.add({ key: 'confirm', sticky: true, severity: 'warn', summary: 'Are you sure?', detail: 'Confirm to proceed' }); + this.messageService.add({ key: 'confirm', sticky: true, severity: 'success', summary: 'Can you send me the report?' }); this.visible = true; } } @@ -57,48 +51,33 @@ export class TemplateDoc { } code: Code = { - basic: ` - -
-
- -

{{message.summary}}

-

{{message.detail}}

-
-
-
- -
-
- + basic: ` + +
+
+ + Amy Elsner +
+
{{ message.summary }}
+
-
-
- - + + `, - html: ` -
- + html: `
+ -
-
- -

{{message.summary}}

-

{{message.detail}}

-
-
-
- -
-
- -
+
+
+ + Amy Elsner
+
{{ message.summary }}
+
- +
`, typescript: ` import { Component } from '@angular/core'; @@ -116,7 +95,7 @@ export class ToastTemplateDemo { showConfirm() { if (!this.visible) { - this.messageService.add({ key: 'confirm', sticky: true, severity: 'warn', summary: 'Are you sure?', detail: 'Confirm to proceed' }); + this.messageService.add({ key: 'confirm', sticky: true, severity: 'success', summary: 'Can you send me the report?' }); this.visible = true; } } diff --git a/src/app/showcase/doc/toast/toastdoc.module.ts b/src/app/showcase/doc/toast/toastdoc.module.ts index d18878d5676..fe2b1cc974f 100644 --- a/src/app/showcase/doc/toast/toastdoc.module.ts +++ b/src/app/showcase/doc/toast/toastdoc.module.ts @@ -3,9 +3,11 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { RippleModule } from 'primeng/ripple'; +import { ProgressBarModule } from 'primeng/progressbar'; import { ToastModule } from 'primeng/toast'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AvatarModule } from 'primeng/avatar'; import { ImportDoc } from './importdoc'; import { AnimationDoc } from './animationdoc'; import { BasicDoc } from './basicdoc'; @@ -19,11 +21,12 @@ import { StyleDoc } from './styledoc'; import { TargetDoc } from './targetdoc'; import { TemplateDoc } from './templatedoc'; import { ClearDoc } from './cleardoc'; +import { HeadlessDoc } from './headlessdoc'; import { AccessibilityDoc } from './accessibilitydoc'; @NgModule({ - imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, ToastModule, ButtonModule, RippleModule], - declarations: [AnimationDoc, BasicDoc, ImportDoc, MultipleDoc, PositionDoc, ResponsiveDoc, SeverityDoc, LifeDoc, StickyDoc, StyleDoc, TargetDoc, TemplateDoc, ClearDoc, AccessibilityDoc], + imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, ToastModule, ButtonModule, RippleModule, AvatarModule, ProgressBarModule], + declarations: [AnimationDoc, BasicDoc, ImportDoc, MultipleDoc, PositionDoc, ResponsiveDoc, SeverityDoc, LifeDoc, StickyDoc, StyleDoc, TargetDoc, TemplateDoc, ClearDoc, HeadlessDoc, AccessibilityDoc], exports: [AppDocModule] }) export class ToastDocModule {} diff --git a/src/app/showcase/doc/togglebutton/disableddoc.ts b/src/app/showcase/doc/togglebutton/disableddoc.ts new file mode 100644 index 00000000000..636f9f33a11 --- /dev/null +++ b/src/app/showcase/doc/togglebutton/disableddoc.ts @@ -0,0 +1,37 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@Component({ + selector: 'disabled-doc', + template: ` + +

When disabled is present, the element cannot be edited and focused.

+ +
+ +
+ + ` +}) +export class DisabledDoc { + checked: boolean = false; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'toggle-button-disabled-demo', + templateUrl: './toggle-button-disabled-demo.html' +}) +export class ToggleButtonDisabledDemo { + checked: boolean = false; +}` + }; +} diff --git a/src/app/showcase/doc/togglebutton/togglebuttondoc.module.ts b/src/app/showcase/doc/togglebutton/togglebuttondoc.module.ts index a1a8b562098..d7cc7762517 100644 --- a/src/app/showcase/doc/togglebutton/togglebuttondoc.module.ts +++ b/src/app/showcase/doc/togglebutton/togglebuttondoc.module.ts @@ -9,12 +9,13 @@ import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { CustomizedDoc } from './customizeddoc'; import { ImportDoc } from './importdoc'; +import { DisabledDoc } from './disableddoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, ToggleButtonModule, FormsModule, ReactiveFormsModule, RouterModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, CustomizedDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, CustomizedDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, DisabledDoc] }) export class ToggleButtonDocModule {} diff --git a/src/app/showcase/doc/toolbar/basicdoc.ts b/src/app/showcase/doc/toolbar/basicdoc.ts index 306bac28971..0b85769eec0 100644 --- a/src/app/showcase/doc/toolbar/basicdoc.ts +++ b/src/app/showcase/doc/toolbar/basicdoc.ts @@ -11,15 +11,18 @@ import { Code } from '../../domain/code';
- - - - + + + +
+
+ + + +
- - - +
@@ -38,16 +41,6 @@ export class BasicDoc implements OnInit { { label: 'Delete', icon: 'pi pi-times' - }, - { - label: 'Angular', - icon: 'pi pi-external-link', - url: 'http://angular.io' - }, - { - label: 'Router', - icon: 'pi pi-upload', - routerLink: '/fileupload' } ]; } @@ -55,33 +48,38 @@ export class BasicDoc implements OnInit { code: Code = { basic: `
- - - - + + + +
+
+ + + +
- - - +
`, - html: ` -
- -
- - - - -
-
- - - -
- + html: `
+ +
+ + + +
+
+ + + + +
+
+ +
+
`, typescript: ` @@ -104,16 +102,6 @@ export class ToolbarBasicDemo implements OnInit { { label: 'Delete', icon: 'pi pi-times' - }, - { - label: 'Angular', - icon: 'pi pi-external-link', - url: 'http://angular.io' - }, - { - label: 'Router', - icon: 'pi pi-upload', - routerLink: '/fileupload' } ]; } diff --git a/src/app/showcase/doc/toolbar/templatedoc.ts b/src/app/showcase/doc/toolbar/templatedoc.ts index 117054eed94..7c3b13c3be1 100644 --- a/src/app/showcase/doc/toolbar/templatedoc.ts +++ b/src/app/showcase/doc/toolbar/templatedoc.ts @@ -1,5 +1,4 @@ -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; +import { Component } from '@angular/core'; import { Code } from '../../domain/code'; @Component({ @@ -9,123 +8,81 @@ import { Code } from '../../domain/code';

Content can also be placed using the start, center and end templates.

- + - - - - + - Center +
+ + + +
- - - +
+ + Amy Elsner +
` }) -export class TemplateDoc implements OnInit { - items: MenuItem[] | undefined; +export class TemplateDoc{ - ngOnInit() { - this.items = [ - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-times' - }, - { - label: 'Angular', - icon: 'pi pi-external-link', - url: 'http://angular.io' - }, - { - label: 'Router', - icon: 'pi pi-upload', - routerLink: '/fileupload' - } - ]; - } code: Code = { - basic: ` - - - - - - - - Center - - - - - - -`, - - html: ` -
- + basic: ` - - - - + - Center +
+ + + +
- - - +
+ + Amy Elsner +
- +`, + + html: `
+ + + + + +
+ + + +
+ + +
+ + Amy Elsner +
+ +
`, typescript: ` -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; +import { Component } from '@angular/core'; @Component({ selector: 'toolbar-template-demo', templateUrl: './toolbar-template-demo.html' }) -export class ToolbarTemplateDemo implements OnInit { - items: MenuItem[] | undefined; - - ngOnInit() { - this.items = [ - { - label: 'Update', - icon: 'pi pi-refresh' - }, - { - label: 'Delete', - icon: 'pi pi-times' - }, - { - label: 'Angular', - icon: 'pi pi-external-link', - url: 'http://angular.io' - }, - { - label: 'Router', - icon: 'pi pi-upload', - routerLink: '/fileupload' - } - ]; - } +export class ToolbarTemplateDemo { + }` }; } diff --git a/src/app/showcase/doc/toolbar/toolbardoc.module.ts b/src/app/showcase/doc/toolbar/toolbardoc.module.ts index 2f8734e9bce..f634ab2ef93 100644 --- a/src/app/showcase/doc/toolbar/toolbardoc.module.ts +++ b/src/app/showcase/doc/toolbar/toolbardoc.module.ts @@ -3,6 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { SplitButtonModule } from 'primeng/splitbutton'; +import { InputTextModule } from 'primeng/inputtext'; +import { AvatarModule } from 'primeng/avatar'; import { ToolbarModule } from 'primeng/toolbar'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; @@ -13,7 +15,7 @@ import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, ToolbarModule, RouterModule, ButtonModule, SplitButtonModule], + imports: [CommonModule, AppCodeModule, AppDocModule, ToolbarModule, RouterModule, ButtonModule, SplitButtonModule, InputTextModule, AvatarModule], exports: [AppDocModule], declarations: [ImportDoc, BasicDoc, TemplateDoc, StyleDoc, AccessibilityDoc] }) diff --git a/src/app/showcase/doc/tooltip/delaydoc.ts b/src/app/showcase/doc/tooltip/delaydoc.ts index 7a9ef2efba3..2b9b3d3741f 100644 --- a/src/app/showcase/doc/tooltip/delaydoc.ts +++ b/src/app/showcase/doc/tooltip/delaydoc.ts @@ -8,18 +8,17 @@ import { Code } from '../../domain/code';

Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.

- +
` }) export class DelayDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, typescript: ` diff --git a/src/app/showcase/doc/tooltip/templatedoc.ts b/src/app/showcase/doc/tooltip/templatedoc.ts index 570f25e8c4c..060fab41f1c 100644 --- a/src/app/showcase/doc/tooltip/templatedoc.ts +++ b/src/app/showcase/doc/tooltip/templatedoc.ts @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Tooltip can use either a string or a TemplateRef.

- +
@@ -21,27 +21,22 @@ import { Code } from '../../domain/code'; }) export class TemplateDoc { code: Code = { - basic: ` + basic: ` + +
+ + PrimeNG rocks! +
+ `, - -
- - - PrimeNG rocks! - -
-`, - - html: ` - - - -
- - - PrimeNG rocks! - -
-` + html: `
+ + +
+ + PrimeNG rocks! +
+ +
` }; } diff --git a/src/app/showcase/doc/tree/controlleddoc.ts b/src/app/showcase/doc/tree/controlleddoc.ts index 3f4fe46873c..845ff2e0cd0 100644 --- a/src/app/showcase/doc/tree/controlleddoc.ts +++ b/src/app/showcase/doc/tree/controlleddoc.ts @@ -11,8 +11,8 @@ import { NodeService } from '../../service/nodeservice';
- - + +
diff --git a/src/app/showcase/doc/treetable/templatedoc.ts b/src/app/showcase/doc/treetable/templatedoc.ts index 2a622f327ae..a232b12a06d 100644 --- a/src/app/showcase/doc/treetable/templatedoc.ts +++ b/src/app/showcase/doc/treetable/templatedoc.ts @@ -16,26 +16,23 @@ interface Column {
- FileViewer +
File Viewer
 {{ col.header }} - - - - + {{ rowData[col.field] }} - - - - + + + + @@ -61,65 +58,30 @@ export class TemplateDoc implements OnInit { this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, - { field: 'type', header: 'Type' } + { field: 'type', header: 'Type' }, + { field: '', header: '' } ]; } code: Code = { - basic: ` - FileViewer - - - - {{ col.header }} - - - - - - - - - - - {{ rowData[col.field] }} - - - - - - - - -
- -
- -`, - - html: ` -
- - FileViewer + basic: ` +
File Viewer
 {{ col.header }} - - - - + {{ rowData[col.field] }} - - - - + + + + @@ -128,6 +90,35 @@ export class TemplateDoc implements OnInit {
+`, + + html: `
+ +
File Viewer
 + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + + + + + + + +
+ +
+
`, @@ -157,11 +148,12 @@ export class TreeTableTemplateDemo implements OnInit { this.cols = [ { field: 'name', header: 'Name' }, { field: 'size', header: 'Size' }, - { field: 'type', header: 'Type' } + { field: 'type', header: 'Type' }, + { field: '', header: '' } ]; } }`, - service: ['NodeService'] + service: ['NodeService'], }; } diff --git a/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts b/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts new file mode 100644 index 00000000000..95d94ad0370 --- /dev/null +++ b/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { Code } from '../../domain/code'; + +@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 { + value: boolean | null = null; + + code: Code = { + basic: ` +`, + + html: `
+ + +
`, + + typescript: ` +import { Component } from '@angular/core'; + +@Component({ + selector: 'tri-state-checkbox-invalid-demo', + templateUrl: './tri-state-checkbox-invalid-demo.html' +}) +export class TriStateCheckboxInvalidDemo { + value: boolean | null = null; +}` + }; +} diff --git a/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts b/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts index 065a16d1da6..9a4c7bd473c 100644 --- a/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts +++ b/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts @@ -5,6 +5,7 @@ import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; import { AppDocModule } from '../../layout/doc/app.doc.module'; import { AppCodeModule } from '../../layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; +import { InvalidDoc } from './invaliddoc'; import { ImportDoc } from './importdoc'; import { DisabledDoc } from './disableddoc'; import { StyleDoc } from './styledoc'; @@ -15,6 +16,6 @@ import { ReactiveFormsDoc } from './reactiveformsdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, TriStateCheckboxModule, FormsModule, ReactiveFormsModule, RouterModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] }) export class TristatecheckboxDocModule {} diff --git a/src/app/showcase/domain/product.ts b/src/app/showcase/domain/product.ts index 13929d93fa4..5721d5a252d 100755 --- a/src/app/showcase/domain/product.ts +++ b/src/app/showcase/domain/product.ts @@ -9,4 +9,5 @@ export interface Product { category?: string; image?: string; rating?: number; + buttonType?: string; } diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts index 55053bd463b..74bf5c9578b 100644 --- a/src/app/showcase/layout/doc/codeeditor/templates.ts +++ b/src/app/showcase/layout/doc/codeeditor/templates.ts @@ -489,7 +489,6 @@ const getAngularApp = (props: Props = {}) => { const serviceImports = code.service ? getServiceImports(code.service) : ''; const routerModule = code.routerModule ? code.routerModule : `RouterModule.forRoot([{ path: '', component: ${componentName} }])`; const declarations = routeFiles && routeFiles.length ? (componentName ? routeFiles.map((r) => r.name).join(', ') + ',' + componentName : routeFiles.map((r) => r.name).join(', ')) : `${componentName}`; - const providers = code.service && code.service.length ? code.service.map((s) => s).join(', ') : ''; const app_module_ts = `import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; @@ -536,6 +535,8 @@ import { InputSwitchModule } from 'primeng/inputswitch'; import { InputTextModule } from 'primeng/inputtext'; import { InputNumberModule } from 'primeng/inputnumber'; import { InputTextareaModule } from 'primeng/inputtextarea'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { InputGroupModule } from 'primeng/inputgroup' import { ImageModule } from 'primeng/image'; import { KnobModule } from 'primeng/knob'; import { ListboxModule } from 'primeng/listbox'; @@ -588,6 +589,9 @@ import { AnimateModule } from 'primeng/animate'; import { CardModule } from 'primeng/card'; import { BlockUIModule } from 'primeng/blockui'; import { ProgressSpinnerModule } from 'primeng/progressspinner'; +import { RippleModule } from 'primeng/ripple'; +import { StyleClassModule } from 'primeng/styleclass'; +import { MessageService } from 'primeng/api'; ${serviceImports} @NgModule({ @@ -634,6 +638,8 @@ ${serviceImports} InputTextModule, InputTextareaModule, InputNumberModule, + InputGroupModule, + InputGroupAddonModule, ImageModule, KnobModule, ListboxModule, @@ -685,10 +691,12 @@ ${serviceImports} TreeTableModule, AnimateModule, CardModule, + RippleModule, + StyleClassModule, ${routerModule}], declarations: [ ${declarations} ], bootstrap: [ ${componentName} ], - providers: [ ${providers} ] + providers: [ MessageService ] }) export class AppModule {}`; diff --git a/src/app/showcase/pages/calendar/calendardemo.ts b/src/app/showcase/pages/calendar/calendardemo.ts index 1dd75e0e729..1776b2517fa 100755 --- a/src/app/showcase/pages/calendar/calendardemo.ts +++ b/src/app/showcase/pages/calendar/calendardemo.ts @@ -23,7 +23,9 @@ import { EventsDoc } from '../../doc/calendar/eventsdoc'; import { MethodsDoc } from '../../doc/calendar/methodsdoc'; import { AccessibilityDoc } from '../../doc/calendar/accessibilitydoc'; import { ReactiveFormsDoc } from '../../doc/calendar/reactiveformsdoc'; - +import { FloatLabelDoc } from '../../doc/calendar/floatlabeldoc'; +import { InvalidDoc } from '../../doc/calendar/invaliddoc'; +import { DisabledDoc } from '../../doc/calendar/disableddoc'; @Component({ templateUrl: './calendardemo.html' }) @@ -119,6 +121,21 @@ export class CalendarDemo { label: 'Inline', component: InlineDoc }, + { + id: 'floatlabel', + label: 'Float Label', + component: FloatLabelDoc + }, + { + id: 'invalid', + label: 'Invalid', + component: InvalidDoc + }, + { + id: 'disabled', + label: 'Disabled', + component: DisabledDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/cascadeselect/cascadeselectdemo.ts b/src/app/showcase/pages/cascadeselect/cascadeselectdemo.ts index 2b9ddb0c12a..2b9355e3bf4 100644 --- a/src/app/showcase/pages/cascadeselect/cascadeselectdemo.ts +++ b/src/app/showcase/pages/cascadeselect/cascadeselectdemo.ts @@ -3,8 +3,11 @@ import { AccessibilityDoc } from '../../doc/cascadeselect/accessibilitydoc'; import { BasicDoc } from '../../doc/cascadeselect/basicdoc'; import { ImportDoc } from '../../doc/cascadeselect/importdoc'; import { ReactiveFormsDoc } from '../../doc/cascadeselect/reactiveformsdoc'; +import { InvalidDoc } from '../../doc/cascadeselect/invaliddoc'; +import { FloatLabelDoc } from '../../doc/cascadeselect/floatlabeldoc'; import { StyleDoc } from '../../doc/cascadeselect/styledoc'; import { TemplateDoc } from '../../doc/cascadeselect/templatedoc'; +import { DisabledDoc } from '../../doc/cascadeselect/disableddoc'; @Component({ templateUrl: './cascadeselectdemo.html' @@ -31,6 +34,21 @@ export class CascadeSelectDemo { label: 'Template', component: TemplateDoc }, + { + id: 'float-label', + label: 'Float Label', + component: FloatLabelDoc + }, + { + id: 'invalid', + label: 'Invalid', + component: InvalidDoc + }, + { + id: 'disabled', + label: 'Disabled', + component: DisabledDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/checkbox/checkboxdemo.ts b/src/app/showcase/pages/checkbox/checkboxdemo.ts index 356b9bb614e..d1a72e4e702 100755 --- a/src/app/showcase/pages/checkbox/checkboxdemo.ts +++ b/src/app/showcase/pages/checkbox/checkboxdemo.ts @@ -5,6 +5,7 @@ import { ImportDoc } from '../../doc/checkbox/importdoc'; import { MultipleDoc } from '../../doc/checkbox/multipledoc'; import { DynamicDoc } from '../../doc/checkbox/dynamicdoc'; import { DisabledDoc } from '../../doc/checkbox/disableddoc'; +import { InvalidDoc } from '../../doc/checkbox/invaliddoc'; import { StyleDoc } from '../../doc/checkbox/styledoc'; import { AccessibilityDoc } from '../../doc/checkbox/accessibilitydoc'; import { ReactiveFormsDoc } from '../../doc/checkbox/reactiveformsdoc'; @@ -44,6 +45,11 @@ export class CheckboxDemo { label: 'Dynamic', component: DynamicDoc }, + { + id: 'invalid', + label: 'Invalid', + component: InvalidDoc + }, { id: 'disabled', label: 'Disabled', diff --git a/src/app/showcase/pages/confirmdialog/confirmdialogdemo.ts b/src/app/showcase/pages/confirmdialog/confirmdialogdemo.ts index 7eaf30d620b..346d703c8a5 100755 --- a/src/app/showcase/pages/confirmdialog/confirmdialogdemo.ts +++ b/src/app/showcase/pages/confirmdialog/confirmdialogdemo.ts @@ -4,6 +4,7 @@ import { ImportDoc } from '../../doc/confirmdialog/importdoc'; import { StyleDoc } from '../../doc/confirmdialog/styledoc'; import { PositionDoc } from '../../doc/confirmdialog/positiondoc'; import { TemplateDoc } from '../../doc/confirmdialog/templatedoc'; +import { HeadlessDoc } from '../../doc/confirmdialog/headlessdoc'; import { AccessibilityDoc } from '../../doc/confirmdialog/accessibilitydoc'; @Component({ @@ -31,6 +32,11 @@ export class ConfirmDialogDemo { label: 'Template', component: TemplateDoc }, + { + id: 'headless', + label: 'Headless', + component: HeadlessDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/confirmpopup/confirmpopupdemo.ts b/src/app/showcase/pages/confirmpopup/confirmpopupdemo.ts index 9b51715b984..73759e8a441 100755 --- a/src/app/showcase/pages/confirmpopup/confirmpopupdemo.ts +++ b/src/app/showcase/pages/confirmpopup/confirmpopupdemo.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; import { BasicDoc } from '../../doc/confirmpopup/basicdoc'; import { ImportDoc } from '../../doc/confirmpopup/importdoc'; +import { TemplateDoc } from '../../doc/confirmpopup/templatedoc'; import { StyleDoc } from '../../doc/confirmpopup/styledoc'; import { AccessibilityDoc } from '../../doc/confirmpopup/accessibilitydoc'; - +import { HeadlessDoc } from '../../doc/confirmpopup/headlessdoc'; @Component({ templateUrl: './confirmpopupdemo.html' }) @@ -19,6 +20,16 @@ export class ConfirmPopupDemo { label: 'Basic', component: BasicDoc }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, + { + id: 'headless', + label: 'Headless', + component: HeadlessDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/dialog/dialogdemo.ts b/src/app/showcase/pages/dialog/dialogdemo.ts index f58dd0a9759..87606347c2d 100755 --- a/src/app/showcase/pages/dialog/dialogdemo.ts +++ b/src/app/showcase/pages/dialog/dialogdemo.ts @@ -9,6 +9,7 @@ import { MaximizableDoc } from '../../doc/dialog/maximizabledoc'; import { TemplateDoc } from '../../doc/dialog/templatedoc'; import { OverlaysInsideDoc } from '../../doc/dialog/overlaysinsidedoc'; import { ModalDoc } from '../../doc/dialog/modaldoc'; +import { HeadlessDoc } from '../../doc/dialog/headlessdoc'; import { AccessibilityDoc } from '../../doc/dialog/accessibilitydoc'; @Component({ @@ -61,6 +62,11 @@ export class DialogDemo { label: 'Overlays Inside', component: OverlaysInsideDoc }, + { + id: 'headless', + label: 'Headless', + component: HeadlessDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/dropdown/dropdowndemo.ts b/src/app/showcase/pages/dropdown/dropdowndemo.ts index bd2f76df639..7ea813f72bc 100755 --- a/src/app/showcase/pages/dropdown/dropdowndemo.ts +++ b/src/app/showcase/pages/dropdown/dropdowndemo.ts @@ -11,6 +11,8 @@ import { FloatLabelDoc } from '../../doc/dropdown/floatlabeldoc'; import { StyleDoc } from '../../doc/dropdown/styledoc'; import { AccessibilityDoc } from '../../doc/dropdown/accessibilitydoc'; import { ReactiveFormsDoc } from '../../doc/dropdown/reactiveformsdoc'; +import { LazyVirtualScrollDoc } from '../../doc/dropdown/lazyvirtualscrolldoc'; +import { InvalidDoc } from '../../doc/dropdown/invaliddoc'; @Component({ templateUrl: './dropdowndemo.html', @@ -58,11 +60,21 @@ export class DropdownDemo { label: 'Virtual Scroll', component: VirtualScrollDoc }, + { + id: 'lazyvirtualscroll', + label: 'Lazy Virtual Scroll', + component: LazyVirtualScrollDoc + }, { id: 'disabled', label: 'Disabled', component: DisabledDoc }, + { + id: 'invalid', + label: 'Invalid', + component: InvalidDoc + }, { id: 'floatlabel', label: 'Float Label', diff --git a/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.ts b/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.ts index b117a47b775..ff498b68af4 100755 --- a/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.ts +++ b/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.ts @@ -2,11 +2,11 @@ import { Component } from '@angular/core'; import { OpenDoc } from '../../doc/dynamicdialog/opendoc'; import { ImportDoc } from '../../doc/dynamicdialog/importdoc'; import { StyleDoc } from '../../doc/dynamicdialog/styledoc'; -import { BasicDoc } from '../../doc/dynamicdialog/basicdoc'; +import { ExampleDoc } from '../../doc/dynamicdialog/exampledoc'; import { UsageDoc } from '../../doc/dynamicdialog/usagedoc'; import { PassingDataDoc } from '../../doc/dynamicdialog/passingdatadoc'; import { CloseDoc } from '../../doc/dynamicdialog/closedoc'; -import { ProductListDemoDoc } from '../../doc/dynamicdialog/productlistdemodoc'; +import { CustomizationDoc } from '../../doc/dynamicdialog/customizationdoc'; @Component({ templateUrl: './dynamicdialogdemo.html' @@ -18,11 +18,6 @@ export class DynamicDialogDemo { label: 'Import', component: ImportDoc }, - { - id: 'basic', - label: 'Basic', - component: BasicDoc - }, { id: 'usage', label: 'Usage', @@ -33,6 +28,11 @@ export class DynamicDialogDemo { label: 'Opening a Dialog', component: OpenDoc }, + { + id: 'customization', + label: 'Customization', + component: CustomizationDoc + }, { id: 'passingdata', label: 'Passing Data', @@ -44,9 +44,9 @@ export class DynamicDialogDemo { component: CloseDoc }, { - id: 'productlistdemo', - label: 'ProductListDemo', - component: ProductListDemoDoc + id: 'example', + label: 'Example', + component: ExampleDoc }, { id: 'style', diff --git a/src/app/showcase/pages/inputswitch/inputswitchdemo.ts b/src/app/showcase/pages/inputswitch/inputswitchdemo.ts index f4125c20b2a..2dfb14ba8a0 100755 --- a/src/app/showcase/pages/inputswitch/inputswitchdemo.ts +++ b/src/app/showcase/pages/inputswitch/inputswitchdemo.ts @@ -6,7 +6,7 @@ import { PreselectionDoc } from '../../doc/inputswitch/preselectiondoc'; import { StyleDoc } from '../../doc/inputswitch/styledoc'; import { AccessibilityDoc } from '../../doc/inputswitch/accessibilitydoc'; import { ReactiveFormsDoc } from '../../doc/inputswitch/reactiveformsdoc'; - +import { InvalidDoc } from '../../doc/inputswitch/invaliddoc'; @Component({ templateUrl: './inputswitchdemo.html' }) @@ -37,6 +37,11 @@ export class InputSwitchDemo { label: 'Disabled', component: DisabledDoc }, + { + id: 'invalid', + label: 'Invalid', + component: InvalidDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/inputtextarea/inputtextareademo.ts b/src/app/showcase/pages/inputtextarea/inputtextareademo.ts index 51d1d77884a..90dc452d501 100755 --- a/src/app/showcase/pages/inputtextarea/inputtextareademo.ts +++ b/src/app/showcase/pages/inputtextarea/inputtextareademo.ts @@ -5,6 +5,7 @@ import { AutoResizeDoc } from '../../doc/inputtextarea/autoresizedoc'; import { BasicDoc } from '../../doc/inputtextarea/basicdoc'; import { DisabledDoc } from '../../doc/inputtextarea/disableddoc'; import { FloatlabelDoc } from '../../doc/inputtextarea/floatlabeldoc'; +import { InvalidDoc } from '../../doc/inputtextarea/invaliddoc'; import { ImportDoc } from '../../doc/inputtextarea/importdoc'; import { KeyfilterDoc } from '../../doc/inputtextarea/keyfilterdoc'; import { StyleDoc } from '../../doc/inputtextarea/styledoc'; @@ -44,6 +45,11 @@ export class InputTextareaDemo { label: 'Float Label', component: FloatlabelDoc }, + { + id: 'invalid', + label: 'Invalid', + component: InvalidDoc + }, { id: 'disabled', label: 'Disabled', diff --git a/src/app/showcase/pages/knob/knobdemo.ts b/src/app/showcase/pages/knob/knobdemo.ts index e9c67574250..083b9c9f538 100644 --- a/src/app/showcase/pages/knob/knobdemo.ts +++ b/src/app/showcase/pages/knob/knobdemo.ts @@ -3,6 +3,7 @@ import { ReactiveFormsDoc } from '../../doc/knob/reactiveformsdoc'; import { AccessibilityDoc } from '../../doc/knob/accessibilitydoc'; import { BasicDoc } from '../../doc/knob/basicdoc'; import { ColorDoc } from '../../doc/knob/colordoc'; +import { ReactiveDoc } from '../../doc/knob/reactivedoc'; import { DisabledDoc } from '../../doc/knob/disableddoc'; import { ImportDoc } from '../../doc/knob/importdoc'; import { MinMaxDoc } from '../../doc/knob/minmaxdoc'; @@ -63,6 +64,11 @@ export class KnobDemo { label: 'Color', component: ColorDoc }, + { + id: 'reactive', + label: 'Reactive', + component: ReactiveDoc + }, { id: 'readonly', label: 'ReadOnly', diff --git a/src/app/showcase/pages/password/passworddemo.ts b/src/app/showcase/pages/password/passworddemo.ts index da9527c272b..cb6a7e0fc4d 100755 --- a/src/app/showcase/pages/password/passworddemo.ts +++ b/src/app/showcase/pages/password/passworddemo.ts @@ -7,6 +7,7 @@ import { FloatLabelDoc } from '../../doc/password/floatlabeldoc'; import { ImportDoc } from '../../doc/password/importdoc'; import { InvalidDoc } from '../../doc/password/invaliddoc'; import { MeterDoc } from '../../doc/password/meterdoc'; +import { LocaleDoc } from '../../doc/password/localedoc'; import { StyleDoc } from '../../doc/password/styledoc'; import { TemplateDoc } from '../../doc/password/templatedoc'; import { ToggleMaskDoc } from '../../doc/password/togglemaskdoc'; @@ -36,6 +37,11 @@ export class PasswordDemo { label: 'Meter', component: MeterDoc }, + { + id: 'locale', + label: 'Locale', + component: LocaleDoc + }, { id: 'togglemask', label: 'Toggle Mask', diff --git a/src/app/showcase/pages/progressbar/progressbardemo.ts b/src/app/showcase/pages/progressbar/progressbardemo.ts index bd96f9247d8..25a06212856 100755 --- a/src/app/showcase/pages/progressbar/progressbardemo.ts +++ b/src/app/showcase/pages/progressbar/progressbardemo.ts @@ -2,6 +2,7 @@ import { Component } from '@angular/core'; import { BasicDoc } from '../../doc/progressbar/basicdoc'; import { StyleDoc } from '../../doc/progressbar/styledoc'; import { ImportDoc } from '../../doc/progressbar/importdoc'; +import { TemplateDoc } from '../../doc/progressbar/templatedoc'; import { IndeterminateDoc } from '../../doc/progressbar/indeterminatedoc'; import { DynamicDoc } from '../../doc/progressbar/dynamicdoc'; import { AccessibilityDoc } from '../../doc/progressbar/accessibilitydoc'; @@ -31,6 +32,11 @@ export class ProgressBarDemo { label: 'Indeterminate', component: IndeterminateDoc }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/sidebar/sidebardemo.ts b/src/app/showcase/pages/sidebar/sidebardemo.ts index ddac8cf0df2..bbd60da4963 100755 --- a/src/app/showcase/pages/sidebar/sidebardemo.ts +++ b/src/app/showcase/pages/sidebar/sidebardemo.ts @@ -6,6 +6,7 @@ import { StyleDoc } from '../../doc/sidebar/styledoc'; import { PositionDoc } from '../../doc/sidebar/positiondoc'; import { FullScreenDoc } from '../../doc/sidebar/fullscreendoc'; import { SizeDoc } from '../../doc/sidebar/sizedoc'; +import { HeadlessDoc } from '../../doc/sidebar/headlessdoc'; import { AccessibilityDoc } from '../../doc/sidebar/accessibilitydoc'; @Component({ @@ -43,6 +44,11 @@ export class SidebarDemo { label: 'Template', component: TemplateDoc }, + { + id: 'headless', + label: 'Headless', + component: HeadlessDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/tabview/tabviewdemo.ts b/src/app/showcase/pages/tabview/tabviewdemo.ts index fa3dd283b37..bb98a34679a 100755 --- a/src/app/showcase/pages/tabview/tabviewdemo.ts +++ b/src/app/showcase/pages/tabview/tabviewdemo.ts @@ -1,11 +1,13 @@ import { Component } from '@angular/core'; import { DisabledDoc } from '../../doc/tabview/disableddoc'; import { BasicDoc } from '../../doc/tabview/basicdoc'; +import { DynamicDoc } from '../../doc/tabview/dynamicdoc'; import { ControlledDoc } from '../../doc/tabview/controlleddoc'; import { ImportDoc } from '../../doc/tabview/importdoc'; import { TemplateDoc } from '../../doc/tabview/customtemplatedoc'; import { ClosableDoc } from '../../doc/tabview/closabledoc'; import { ScrollableDoc } from '../../doc/tabview/scrollabledoc'; +import { LazyDoc } from '../../doc/tabview/lazydoc'; import { StyleDoc } from '../../doc/tabview/styledoc'; import { AccessibilityDoc } from '../../doc/tabview/accessibilitydoc'; @@ -25,6 +27,11 @@ export class TabViewDemo { label: 'Basic', component: BasicDoc }, + { + id: 'dynamic', + label: 'Dynamic', + component: DynamicDoc + }, { id: 'controlled', label: 'Controlled', @@ -50,6 +57,11 @@ export class TabViewDemo { label: 'Scrollable', component: ScrollableDoc }, + { + id: 'lazy', + label: 'Lazy', + component: LazyDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts b/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts index d48ff2bfa0b..761e54f9a7e 100755 --- a/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts +++ b/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts @@ -2,6 +2,9 @@ import { Component } from '@angular/core'; import { BasicDoc } from '../../doc/tieredmenu/basicdoc'; import { ImportDoc } from '../../doc/tieredmenu/importdoc'; import { PopupDoc } from '../../doc/tieredmenu/popupdoc'; +import { TemplateDoc } from '../../doc/tieredmenu/templatedoc'; +import { CommandDoc } from '../../doc/tieredmenu/commanddoc'; +import { RouterDoc } from '../../doc/tieredmenu/routerdoc'; import { StyleDoc } from '../../doc/tieredmenu/styledoc'; import { AccessibilityDoc } from '../../doc/tieredmenu/accessibilitydoc'; @@ -25,6 +28,21 @@ export class TieredMenuDemo { label: 'Popup', component: PopupDoc }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, + { + id: 'command', + label: 'Command', + component: CommandDoc + }, + { + id: 'router', + label: 'Router', + component: RouterDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/toast/toastdemo.ts b/src/app/showcase/pages/toast/toastdemo.ts index 8b91eae600d..2a5ddda7fbd 100755 --- a/src/app/showcase/pages/toast/toastdemo.ts +++ b/src/app/showcase/pages/toast/toastdemo.ts @@ -13,6 +13,7 @@ import { StickyDoc } from '../../doc/toast/stickydoc'; import { StyleDoc } from '../../doc/toast/styledoc'; import { TargetDoc } from '../../doc/toast/targetdoc'; import { TemplateDoc } from '../../doc/toast/templatedoc'; +import { HeadlessDoc } from '../../doc/toast/headlessdoc'; @Component({ templateUrl: './toastdemo.html' @@ -69,6 +70,11 @@ export class ToastDemo { label: 'Templating', component: TemplateDoc }, + { + id: 'headless', + label: 'Headless', + component: HeadlessDoc + }, { id: 'responsive', label: 'Responsive', diff --git a/src/app/showcase/pages/togglebutton/togglebuttondemo.ts b/src/app/showcase/pages/togglebutton/togglebuttondemo.ts index d09e9a40568..3bb22095a5b 100755 --- a/src/app/showcase/pages/togglebutton/togglebuttondemo.ts +++ b/src/app/showcase/pages/togglebutton/togglebuttondemo.ts @@ -3,6 +3,7 @@ import { ReactiveFormsDoc } from '../../doc/togglebutton/reactiveformsdoc'; import { AccessibilityDoc } from '../../doc/togglebutton/accessibilitydoc'; import { BasicDoc } from '../../doc/togglebutton/basicdoc'; import { CustomizedDoc } from '../../doc/togglebutton/customizeddoc'; +import { DisabledDoc } from '../../doc/togglebutton/disableddoc'; import { ImportDoc } from '../../doc/togglebutton/importdoc'; import { StyleDoc } from '../../doc/togglebutton/styledoc'; @@ -31,6 +32,11 @@ export class ToggleButtonDemo { label: 'Customized', component: CustomizedDoc }, + { + id: 'disabled', + label: 'Disabled', + component: DisabledDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts index f432b015964..7c03a427837 100755 --- a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts +++ b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; import { BasicDoc } from '../../doc/tristatecheckbox/basicdoc'; +import { InvalidDoc } from '../../doc/tristatecheckbox/invaliddoc'; import { ImportDoc } from '../../doc/tristatecheckbox/importdoc'; import { DisabledDoc } from '../../doc/tristatecheckbox/disableddoc'; import { StyleDoc } from '../../doc/tristatecheckbox/styledoc'; @@ -26,6 +27,11 @@ export class TriStateCheckboxDemo { label: 'Reactive Forms', component: ReactiveFormsDoc }, + { + id: 'invalid', + label: 'Invalid', + component: InvalidDoc + }, { id: 'disabled', label: 'Disabled', diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index 9e221a20126..02dee7347ea 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ef9a9a; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1169,7 @@ background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1195,7 +1200,6 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #43a5f4; } - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index ac93c9c8c66..8995291084c 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ef9a9a; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1169,7 @@ background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6abd6e; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 058302389f6..6d4710d7233 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ef9a9a; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1169,7 @@ background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ffcd2e; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index b998fd6c53b..dfbab9d0371 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ef9a9a; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1169,7 @@ background: #383838; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b052c0; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index bca48deb5b6..fec8e9c94d7 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f19ea6; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1169,6 +1173,7 @@ background: #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8dd0ff; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f19ea6; } diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index e105bce7302..ed4da00170c 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f19ea6; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1169,6 +1173,7 @@ background: #3f4b5b; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #c298d8; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f19ea6; } diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index b56386ef4ca..8adb78e409c 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #dc3545; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1169,6 +1173,7 @@ background: #ced4da; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #007bff; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #dc3545; } diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index 72f7a261cdd..12b4df67bb7 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #dc3545; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1169,6 +1173,7 @@ background: #ced4da; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; border-radius: 4px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #883cae; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #dc3545; } diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index 5531f7e2b7a..cc058e984c4 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #a4252c; + } + .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; @@ -1165,6 +1169,7 @@ background: #ffffff; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #605e5c; @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #005a9e; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a4252c; } diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index b7461a44708..4cbea902478 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -1069,6 +1069,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #fca5a5; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1182,6 +1186,7 @@ background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1212,8 +1217,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #93c5fd; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index 7568b63fa6d..bfbebea4b3f 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -1069,6 +1069,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #fca5a5; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1182,6 +1186,7 @@ background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1212,8 +1217,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #a5b4fc; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index c6c40643d98..21b2d3f6cf5 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -1069,6 +1069,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #fca5a5; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1182,6 +1186,7 @@ background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1212,8 +1217,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #c4b5fd; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 0002606017c..48a366e66d9 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -1069,6 +1069,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #fca5a5; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1182,6 +1186,7 @@ background: #6b7280; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1212,8 +1217,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #5eead4; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index e51bf9f2db9..2e7fb11909f 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -1069,6 +1069,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e24c4c; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1182,6 +1186,7 @@ background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1212,8 +1217,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #2563eb; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index 1d16faf2d21..b80939759bc 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -1069,6 +1069,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e24c4c; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1182,6 +1186,7 @@ background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1212,8 +1217,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4F46E5; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 17d7415b0c6..0cae91f9450 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -1069,6 +1069,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e24c4c; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1182,6 +1186,7 @@ background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1212,8 +1217,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #7C3AED; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 56bb47d933f..e13d9de7f96 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -1069,6 +1069,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e24c4c; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1182,6 +1186,7 @@ background: #d1d5db; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1212,8 +1217,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0d9488; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e24c4c; } diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 8026e335455..5a8bb0ca805 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e57373; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1169,6 +1173,7 @@ background: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #FFD54F; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index ffb37e59e25..64ffdb7d710 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e57373; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1169,6 +1173,7 @@ background: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4FC3F7; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index 75b666e2f7b..1294749826b 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e57373; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1169,6 +1173,7 @@ background: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #AED581; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 3cf9e83812a..be2e8b7e2cf 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e57373; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1169,6 +1173,7 @@ background: #4b4b4b; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #323232; @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #F06292; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e57373; } diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index ed5e5b50d7b..52107e23caa 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -1075,6 +1075,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f44435; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1188,6 +1192,7 @@ background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1218,8 +1223,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index 2041323f028..e2d9105b49b 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -1075,6 +1075,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f44435; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1188,6 +1192,7 @@ background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1218,8 +1223,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index ed63152cdb9..3d5ed7498a2 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -1075,6 +1075,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #b00020; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1188,6 +1192,7 @@ background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1218,8 +1223,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 403993ca69d..5b2ab249ffb 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -1075,6 +1075,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #b00020; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1188,6 +1192,7 @@ background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1218,8 +1223,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 5c8c20e3ee3..09dbd50d6a0 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -1075,6 +1075,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f44435; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1188,6 +1192,7 @@ background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1218,8 +1223,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(206, 147, 216, 0.5); } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 3e709f86bff..a8f0a2838b7 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -1075,6 +1075,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f44435; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1188,6 +1192,7 @@ background: rgba(255, 255, 255, 0.3); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #bdbdbd; @@ -1218,8 +1223,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(159, 168, 218, 0.5); } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44435; } diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index 44032f51c8e..857762c696c 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -1075,6 +1075,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #b00020; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1188,6 +1192,7 @@ background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1218,8 +1223,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(103, 58, 183, 0.5); } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index 728b0cba70a..aa47127dc35 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -1075,6 +1075,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #b00020; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1188,6 +1192,7 @@ background: rgba(0, 0, 0, 0.38); transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1); border-radius: 0.5rem; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1218,8 +1223,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: rgba(63, 81, 181, 0.5); } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #b00020; } diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index be377a0c180..8bcc3cb8bca 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -1078,6 +1078,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #bf616a; + } + .p-inputgroup-addon { background: #ffffff; color: #81a1c1; @@ -1191,6 +1195,7 @@ background: #d8dee9; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #5e81ac; @@ -1221,8 +1226,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #81a1c1; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #bf616a; } diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index 9ae7f144783..bfe4eab1ec3 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #d8222f; + } + .p-inputgroup-addon { background: #dde1e6; color: #697077; @@ -1165,6 +1169,7 @@ background: #a5acb3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0f68ad; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #d8222f; } diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 589fce37ea8..bc78ce130a1 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #a80000; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1165,6 +1169,7 @@ background: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index 1d53e6fd868..3a9ef24630f 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #a80000; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1169,6 +1173,7 @@ background: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index cf0d3c3fb1a..496bf3922e6 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -1056,6 +1056,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #a80000; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1169,6 +1173,7 @@ background: #cccccc; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1199,8 +1204,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #116fbf; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #a80000; } diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 9c06cbc0998..1342e9f2c72 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #e7a3a3; + } + .p-inputgroup-addon { background: #dbdbdb; color: #666666; @@ -1165,6 +1169,7 @@ background: #ffffff; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #7b95a3; @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #afd3c8; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #e7a3a3; } diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index e33ae040372..6f2189705e6 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f44336; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1165,6 +1169,7 @@ background: #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #0d89ec; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index 6ed98f56347..1f3d1862640 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f44336; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1165,6 +1169,7 @@ background: #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #449e48; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index 8c3e12e2937..8fef77959d1 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f44336; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1165,6 +1169,7 @@ background: #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ecb100; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index cbffa537140..08d66d39a51 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f44336; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1165,6 +1169,7 @@ background: #ced4da; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8c239e; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f44336; } diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index 4a648fd44b6..3f9ee2120cd 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -1074,6 +1074,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ff9a9a; + } + .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -1187,6 +1191,7 @@ background: #3e4053; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1217,8 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #a28af5; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ff9a9a; } diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index 65c9c1b2852..ce6427c69bc 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -1074,6 +1074,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ff6767; + } + .p-inputgroup-addon { background: #f6f9fc; color: #708da9; @@ -1187,6 +1191,7 @@ background: #d3dbe3; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1217,8 +1222,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6545f2; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ff6767; } diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index 0db20b88595..4fb1646e2b8 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -1088,6 +1088,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f0a9a7; + } + .p-inputgroup-addon { background: #fafafa; color: #71717a; @@ -1201,6 +1205,7 @@ background: #d4d4d8; transition: none; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1231,8 +1236,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4338ca; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f0a9a7; } diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index 5b2c6454cce..00ff2779375 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ef9a9a; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1169,7 @@ background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #43a5f4; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 2b14b4b6012..c9a387b8dc6 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ef9a9a; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1169,7 @@ background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #6abd6e; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index c4c4c07d458..8f717327e19 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ef9a9a; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1169,7 @@ background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #ffcd2e; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index e6d59bdf070..ecfcdae2296 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -1052,6 +1052,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #ef9a9a; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1169,7 @@ background: #304562; transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s; border-radius: 30px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1195,8 +1200,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #b052c0; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index 96e6a22e07b..e9f39075945 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -1082,6 +1082,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f78c79; + } + .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -1195,6 +1199,7 @@ background: #263238; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: rgba(255, 255, 255, 0.6); @@ -1225,8 +1230,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #8fa0e2; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f78c79; } diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index 6140f4b44d3..3d6604d2394 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -1083,6 +1083,10 @@ background-color: transparent; } + p-dropdown.ng-dirty.ng-invalid > .p-dropdown { + border-color: #f88c79; + } + .p-inputgroup-addon { background: #f5f5f5; color: #898989; @@ -1196,6 +1200,7 @@ background: #cecece; transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s; border-radius: 6px; + border: 1px solid transparent; } .p-inputswitch .p-inputswitch-slider:before { background: #ffffff; @@ -1226,8 +1231,11 @@ .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider { background: #4868d1; } +<<<<<<< HEAD +======= - p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch { +>>>>>>> 927106a2aa82cb6253ebe7b5d19d155d7617061e + p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch > .p-inputswitch-slider { border-color: #f88c79; }