diff --git a/package-lock.json b/package-lock.json index 2d2912363aa..aa9c1ec2db6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,9 +42,9 @@ "esbuild": "^0.19.8", "eslint": "^8.39.0", "eslint-config-prettier": "^8.8.0", - "eslint-plugin-import": "latest", - "eslint-plugin-jsdoc": "latest", - "eslint-plugin-prefer-arrow": "latest", + "eslint-plugin-import": "*", + "eslint-plugin-jsdoc": "*", + "eslint-plugin-prefer-arrow": "*", "express": "^4.19.2", "file-saver": "^2.0.5", "gulp": "^4.0.2", @@ -9423,9 +9423,9 @@ "dev": true }, "node_modules/ejs": { - "version": "3.1.9", - "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz", - "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==", + "version": "3.1.10", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz", + "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==", "dev": true, "dependencies": { "jake": "^10.8.5" diff --git a/src/app/components/api/megamenuitem.ts b/src/app/components/api/megamenuitem.ts index d7cfc18c0c6..d3e14b3ce59 100644 --- a/src/app/components/api/megamenuitem.ts +++ b/src/app/components/api/megamenuitem.ts @@ -122,4 +122,8 @@ export interface MegaMenuItem { state?: { [k: string]: any; }; + /** + * Optional + */ + [key: string]: any; } diff --git a/src/app/components/api/primengconfig.ts b/src/app/components/api/primengconfig.ts index ac1e4d96c16..f9f47913339 100644 --- a/src/app/components/api/primengconfig.ts +++ b/src/app/components/api/primengconfig.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { Injectable, signal } from '@angular/core'; import { Subject } from 'rxjs'; import { FilterMatchMode } from './filtermatchmode'; import { OverlayOptions } from './overlayoptions'; @@ -8,7 +8,7 @@ import { Translation } from './translation'; export class PrimeNGConfig { ripple: boolean = false; - inputStyle: 'outlined' | 'filled' = 'outlined'; + inputStyle = signal<'outlined' | 'filled'>('outlined'); overlayOptions: OverlayOptions = {}; diff --git a/src/app/components/api/treenode.ts b/src/app/components/api/treenode.ts index 1e64649c86c..58436a390f2 100755 --- a/src/app/components/api/treenode.ts +++ b/src/app/components/api/treenode.ts @@ -75,4 +75,9 @@ export interface TreeNode { * Mandatory unique key of the node. */ key?: string; + /** + * Mandatory unique key of the node. + */ + loading?: boolean; + } diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index fb19fd8c32b..f9fffef51f9 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -104,7 +104,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { @@ -792,6 +805,7 @@ export class UITreeNode implements OnInit { [lastChild]="lastChild" [index]="index" [level]="0" + [loadingMode]="loadingMode" > @@ -847,6 +861,11 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo * @group Props */ @Input() selectionMode: 'single' | 'multiple' | 'checkbox' | null | undefined; + /** + * Loading mode display. + * @group Props + */ + @Input() loadingMode: 'mask' | 'icon' = 'mask'; /** * A single treenode instance or an array to refer to the selections. * @group Props diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts index f2527508518..f6fd4e6521d 100755 --- a/src/app/components/treeselect/treeselect.ts +++ b/src/app/components/treeselect/treeselect.ts @@ -234,6 +234,11 @@ export class TreeSelect implements AfterContentInit { * @group Props */ @Input({ transform: booleanAttribute }) metaKeySelection: boolean = false; + /** + * Specifies the input variant of the component. + * @group Props + */ + @Input() variant: 'filled' | 'outlined' = 'outlined'; /** * Defines how the selected items are displayed. * @group Props @@ -946,7 +951,8 @@ export class TreeSelect implements AfterContentInit { 'p-treeselect p-component p-inputwrapper': true, 'p-treeselect-chip': this.display === 'chip', 'p-disabled': this.disabled, - 'p-focus': this.focused + 'p-focus': this.focused, + 'p-variant-filled': this.variant === 'filled' || this.config.inputStyle() === 'filled' }; } diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts index 1afebdbba5a..a56fe10ac56 100755 --- a/src/app/components/treetable/treetable.ts +++ b/src/app/components/treetable/treetable.ts @@ -968,7 +968,16 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable }); } - constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, public el: ElementRef, public cd: ChangeDetectorRef, public zone: NgZone, public tableService: TreeTableService, public filterService: FilterService) {} + constructor( + @Inject(DOCUMENT) private document: Document, + private renderer: Renderer2, + public el: ElementRef, + public cd: ChangeDetectorRef, + public zone: NgZone, + public tableService: TreeTableService, + public filterService: FilterService, + public config: PrimeNGConfig + ) {} ngOnChanges(simpleChange: SimpleChanges) { if (simpleChange.value) { @@ -3049,7 +3058,7 @@ export class TTContextMenuRow { @Component({ selector: 'p-treeTableCheckbox', template: ` -
+
diff --git a/src/app/components/tristatecheckbox/tristatecheckbox.ts b/src/app/components/tristatecheckbox/tristatecheckbox.ts index 69dbe131571..1193a1947fb 100755 --- a/src/app/components/tristatecheckbox/tristatecheckbox.ts +++ b/src/app/components/tristatecheckbox/tristatecheckbox.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, Input, NgModule, Output, QueryList, TemplateRef, ViewEncapsulation, booleanAttribute, forwardRef, numberAttribute } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { PrimeTemplate, SharedModule } from 'primeng/api'; +import { PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api'; import { CheckIcon } from 'primeng/icons/check'; import { TimesIcon } from 'primeng/icons/times'; import { Nullable } from 'primeng/ts-helpers'; @@ -22,7 +22,7 @@ export const TRISTATECHECKBOX_VALUE_ACCESSOR: any = { template: `
Image is used as the native img element and supports all properties that the native element has. For multiple image, see Galleria.

- +
` }) export class BasicDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { ImageModule } from 'primeng/image'; + @Component({ selector: 'image-basic-demo', - templateUrl: './image-basic-demo.html' + templateUrl: './image-basic-demo.html', + standalone: true, + imports: [ImageModule] }) export class ImageBasicDemo {}` }; diff --git a/src/app/showcase/doc/Image/imagedoc.module.ts b/src/app/showcase/doc/Image/imagedoc.module.ts index 5abb87d99ea..d62b60c9867 100644 --- a/src/app/showcase/doc/Image/imagedoc.module.ts +++ b/src/app/showcase/doc/Image/imagedoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { ImageModule } from 'primeng/image'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { TemplateDoc } from './templatedoc'; import { PreviewDoc } from './previewdoc'; diff --git a/src/app/showcase/doc/Image/importdoc.ts b/src/app/showcase/doc/Image/importdoc.ts index ad7216832cd..1276398bd1f 100644 --- a/src/app/showcase/doc/Image/importdoc.ts +++ b/src/app/showcase/doc/Image/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/Image/previewdoc.ts b/src/app/showcase/doc/Image/previewdoc.ts index 72b32e138b4..589dc9efe16 100644 --- a/src/app/showcase/doc/Image/previewdoc.ts +++ b/src/app/showcase/doc/Image/previewdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'image-preview-demo', @@ -8,30 +8,37 @@ import { Code } from '../../domain/code';

Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.

- +
` }) export class PreviewDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; - + typescript: `import { Component } from '@angular/core'; +import { ImageModule } from 'primeng/image'; + @Component({ selector: 'image-preview-demo', - templateUrl: './image-preview-demo.html' + templateUrl: './image-preview-demo.html', + standalone: true, + imports: [ImageModule] }) export class ImagePreviewDemo { - constructor(private photoService: PhotoService) {} }`, service: ['PhotoService'] }; diff --git a/src/app/showcase/doc/Image/previewimagesourcedoc.ts b/src/app/showcase/doc/Image/previewimagesourcedoc.ts index c25a9b85488..60bfdc659d5 100644 --- a/src/app/showcase/doc/Image/previewimagesourcedoc.ts +++ b/src/app/showcase/doc/Image/previewimagesourcedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'image-preview-source-demo', @@ -8,30 +8,40 @@ import { Code } from '../../domain/code';

In case that you want to show different image on preview, you can set previewImageSrc attribute. It could come handy when wanted to use smaller image version at first and bigger one on preview.

- +
- + ` }) export class PreviewImageSourceDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component } from '@angular/core'; +import { ImageModule } from 'primeng/image'; @Component({ selector: 'image-preview-source-demo', - templateUrl: './image-preview-source-demo.html' + templateUrl: './image-preview-source-demo.html', + standalone: true, + imports: [ImageModule] }) -export class ImagePreviewDemo { - constructor(private photoService: PhotoService) {} +export class ImagePreviewSourceDemo { + }`, service: ['PhotoService'] }; diff --git a/src/app/showcase/doc/Image/templatedoc.ts b/src/app/showcase/doc/Image/templatedoc.ts index 94386dbdab7..d3214383e04 100644 --- a/src/app/showcase/doc/Image/templatedoc.ts +++ b/src/app/showcase/doc/Image/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.

- + @@ -19,27 +19,36 @@ import { Code } from '../../domain/code'; }) export class TemplateDoc { code: Code = { - basic: ` - - - -`, - - html: ` -
- + basic: ` +`, + + html: `
+ + + +
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { ImageModule } from 'primeng/image'; + @Component({ selector: 'image-template-demo', - templateUrl: './image-template-demo.html' + templateUrl: './image-template-demo.html', + standalone: true, + imports: [ImageModule] }) export class ImageTemplateDemo {}` }; diff --git a/src/app/showcase/doc/accordion/accordiondoc.module.ts b/src/app/showcase/doc/accordion/accordiondoc.module.ts index af9852217f7..5db6077b671 100644 --- a/src/app/showcase/doc/accordion/accordiondoc.module.ts +++ b/src/app/showcase/doc/accordion/accordiondoc.module.ts @@ -6,8 +6,8 @@ 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 { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ControlledDoc } from './controlleddoc'; @@ -16,10 +16,11 @@ import { ImportDoc } from './importdoc'; import { MultipleDoc } from './multipledoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; +import { DynamicDoc } from './dynamicdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, AccordionModule, ButtonModule, RouterModule, AvatarModule, BadgeModule, FormsModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, MultipleDoc, DisabledDoc, ControlledDoc, TemplateDoc, StyleDoc, AccessibilityDoc] + declarations: [ImportDoc, BasicDoc, DynamicDoc, MultipleDoc, DisabledDoc, ControlledDoc, TemplateDoc, StyleDoc, AccessibilityDoc] }) export class AccordionDocModule {} diff --git a/src/app/showcase/doc/accordion/basicdoc.ts b/src/app/showcase/doc/accordion/basicdoc.ts index c4f6269ed5e..15ddb8163e5 100644 --- a/src/app/showcase/doc/accordion/basicdoc.ts +++ b/src/app/showcase/doc/accordion/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -37,26 +37,22 @@ export class BasicDoc { 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. + Lorem ipsum dolor sit amet...

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

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

`, - html: ` -
+ html: `

@@ -79,12 +75,14 @@ export class BasicDoc {

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; @Component({ selector: 'accordion-basic-demo', - templateUrl: './accordion-basic-demo.html' + templateUrl: './accordion-basic-demo.html', + standalone: true, + imports: [AccordionModule] }) export class AccordionBasicDemo {}` }; diff --git a/src/app/showcase/doc/accordion/controlleddoc.ts b/src/app/showcase/doc/accordion/controlleddoc.ts index 50e1f46659b..23fed1e5605 100644 --- a/src/app/showcase/doc/accordion/controlleddoc.ts +++ b/src/app/showcase/doc/accordion/controlleddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'controlled-doc', @@ -9,9 +9,9 @@ import { Code } from '../../domain/code';
- - - + + +
@@ -46,36 +46,63 @@ export class ControlledDoc { 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. + Lorem ipsum dolor sit amet...

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

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

`, html: `
-
- - - +
+ + +
@@ -99,12 +126,15 @@ export class ControlledDoc {
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'accordion-controlled-demo', - templateUrl: './accordion-controlled-demo.html' + templateUrl: './accordion-controlled-demo.html', + standalone: true, + imports: [AccordionModule, ButtonModule] }) export class AccordionControlledDemo { activeIndex: number | undefined = 0; diff --git a/src/app/showcase/doc/accordion/disableddoc.ts b/src/app/showcase/doc/accordion/disableddoc.ts index 6a4e90e05e8..2430df23bc0 100644 --- a/src/app/showcase/doc/accordion/disableddoc.ts +++ b/src/app/showcase/doc/accordion/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -15,7 +15,7 @@ import { Code } from '../../domain/code'; 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. @@ -27,6 +27,7 @@ import { Code } from '../../domain/code'; 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.

+
@@ -37,26 +38,23 @@ export class DisabledDoc { 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. + Lorem ipsum dolor sit amet...

- +

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

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

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

@@ -64,7 +62,7 @@ export class DisabledDoc { 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. @@ -75,16 +73,19 @@ export class DisabledDoc { At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

- + +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; @Component({ selector: 'accordion-disabled-demo', - templateUrl: './accordion-disabled-demo.html' + templateUrl: './accordion-disabled-demo.html', + standalone: true, + imports: [AccordionModule] }) export class AccordionDisabledDemo {}` }; diff --git a/src/app/showcase/doc/accordion/dynamicdoc.ts b/src/app/showcase/doc/accordion/dynamicdoc.ts new file mode 100644 index 00000000000..1b4855469ac --- /dev/null +++ b/src/app/showcase/doc/accordion/dynamicdoc.ts @@ -0,0 +1,65 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'dynamic-doc', + template: ` + +

AccordionTabs can be generated dynamically using the standard ngFor directive.

+ +
+ + +

+ {{ tab.content }} +

+ + +
+ + ` +}) +export class DynamicDoc { + tabs = [ + { title: 'Title 1', content: 'Content 1' }, + { title: 'Title 2', content: 'Content 2' }, + { title: 'Title 3', content: 'Content 3' } + ]; + code: Code = { + basic: ` + +

+ {{ tab.content }} +

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

+ {{ tab.content }} +

+ + +
`, + + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'accordion-dynamic-demo', + templateUrl: './accordion-dynamic-demo.html', + standalone: true, + imports: [AccordionModule, CommonModule] +}) +export class AccordionDynamicDemo { + tabs = [ + { title: 'Title 1', content: 'Content 1' }, + { title: 'Title 2', content: 'Content 2' }, + { title: 'Title 3', content: 'Content 3' } + ]; +}` + }; +} diff --git a/src/app/showcase/doc/accordion/importdoc.ts b/src/app/showcase/doc/accordion/importdoc.ts index 64d433e69c0..295b733230c 100644 --- a/src/app/showcase/doc/accordion/importdoc.ts +++ b/src/app/showcase/doc/accordion/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/accordion/multipledoc.ts b/src/app/showcase/doc/accordion/multipledoc.ts index e1217546c65..fa3f0cf412c 100644 --- a/src/app/showcase/doc/accordion/multipledoc.ts +++ b/src/app/showcase/doc/accordion/multipledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'multiple-doc', @@ -37,26 +37,22 @@ export class MultipleDoc { 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. + Lorem ipsum dolor sit amet...

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

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

`, - html: ` -
+ html: `

@@ -79,12 +75,14 @@ export class MultipleDoc {

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; @Component({ selector: 'accordion-multiple-demo', - templateUrl: './accordion-multiple-demo.html' + templateUrl: './accordion-multiple-demo.html', + standalone: true, + imports: [AccordionModule] }) export class AccordionMultipleDemo {}` }; diff --git a/src/app/showcase/doc/accordion/templatedoc.ts b/src/app/showcase/doc/accordion/templatedoc.ts index 90a70bf33eb..552fcf5e24c 100644 --- a/src/app/showcase/doc/accordion/templatedoc.ts +++ b/src/app/showcase/doc/accordion/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -8,13 +8,13 @@ import { Code } from '../../domain/code';

AccordionTab is customized header and content templates.

- + Amy Elsner - +

@@ -27,7 +27,7 @@ import { Code } from '../../domain/code'; Onyama Limba - +

@@ -40,7 +40,7 @@ import { Code } from '../../domain/code'; Ioni Bowcher - +

@@ -55,56 +55,69 @@ import { Code } from '../../domain/code'; }) export class TemplateDoc { code: Code = { - basic: ` + basic: ` - - Amy Elsner - + + + 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. + Lorem ipsum dolor sit amet...

- - Onyama Limba - + + + 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. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...

- - Ioni Bowcher - + + + 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. + At vero eos et accusamus et iusto odio dignissimos...

`, html: `
- + - - Amy Elsner - + + + Amy Elsner + +

@@ -115,9 +128,13 @@ export class TemplateDoc { - - Onyama Limba - + + + Onyama Limba + +

@@ -128,9 +145,13 @@ export class TemplateDoc { - - Ioni Bowcher - + + + Ioni Bowcher + +

@@ -141,12 +162,16 @@ export class TemplateDoc {

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { AccordionModule } from 'primeng/accordion'; +import { AvatarModule } from 'primeng/avatar'; +import { BadgeModule } from 'primeng/badge'; @Component({ selector: 'accordion-template-demo', - templateUrl: './accordion-template-demo.html' + templateUrl: './accordion-template-demo.html', + standalone: true, + imports: [AccordionModule, AvatarModule, BadgeModule] }) export class AccordionTemplateDemo {}` }; diff --git a/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts b/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts index 7de6b528064..80d1e70f2b1 100644 --- a/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts +++ b/src/app/showcase/doc/animateonscroll/animateonscrolldoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { AccessibilityDoc } from './accessibilitydoc'; diff --git a/src/app/showcase/doc/animateonscroll/basicdoc.ts b/src/app/showcase/doc/animateonscroll/basicdoc.ts index a74f0bde2ce..778ee2fda15 100644 --- a/src/app/showcase/doc/animateonscroll/basicdoc.ts +++ b/src/app/showcase/doc/animateonscroll/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/animateonscroll/importdoc.ts b/src/app/showcase/doc/animateonscroll/importdoc.ts index 25316d5ce54..eb5239c614e 100644 --- a/src/app/showcase/doc/animateonscroll/importdoc.ts +++ b/src/app/showcase/doc/animateonscroll/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index f1506b4ddb3..acbec600f9a 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -3277,6 +3277,13 @@ "readonly": false, "type": "string", "description": "Mandatory unique key of the node." + }, + { + "name": "loading", + "optional": true, + "readonly": false, + "type": "boolean", + "description": "Mandatory unique key of the node." } ] } @@ -3459,6 +3466,13 @@ "type": "string", "description": "Mandatory unique key of the node." }, + { + "name": "loading", + "optional": true, + "readonly": false, + "type": "boolean", + "description": "Mandatory unique key of the node." + }, { "name": "originalEvent", "optional": true, @@ -3986,6 +4000,14 @@ "type": "boolean", "default": "false", "description": "When enabled, the hovered option will be focused." + }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." } ] }, @@ -5487,6 +5509,14 @@ "type": "number", "description": "Index of the element in tabbing order." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, { "name": "minDate", "optional": false, @@ -6575,6 +6605,29 @@ "description": "Transition options of the show animation.", "deprecated": "deprecated since v14.2.0, use overlayOptions property instead." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, + { + "name": "loading", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Whether the dropdown is in loading state." + }, + { + "name": "loadingIcon", + "optional": false, + "readonly": false, + "type": "string", + "description": "Icon to display in loading state." + }, { "name": "hideTransitionOptions", "optional": false, @@ -6868,6 +6921,12 @@ "name": "optiongroupicon", "parameters": [], "description": "Custom option group icon template." + }, + { + "parent": "cascadeselect", + "name": "loadingicon", + "parameters": [], + "description": "Custom loading icon template." } ] } @@ -7111,6 +7170,14 @@ "type": "any", "default": "false", "description": "Value in unchecked state." + }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." } ] }, @@ -7458,6 +7525,14 @@ "type": "boolean", "default": "false", "description": "When present, it specifies that the component should automatically get focus on load." + }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." } ] }, @@ -9749,6 +9824,13 @@ "type": "Signal", "description": "Default text to display when no option is selected." }, + { + "name": "loadingIcon", + "optional": false, + "readonly": false, + "type": "string", + "description": "Icon to display in loading state." + }, { "name": "filterPlaceholder", "optional": false, @@ -9763,6 +9845,14 @@ "type": "string", "description": "Locale to use in filtering. The default locale is the host environment's current locale." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, { "name": "inputId", "optional": false, @@ -9807,6 +9897,14 @@ "default": "false", "description": "Clears the filter value when hiding the dropdown." }, + { + "name": "checkmark", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Whether the selected option will be shown with a check mark." + }, { "name": "dropdownIcon", "optional": false, @@ -9814,6 +9912,14 @@ "type": "string", "description": "Icon class of the dropdown icon." }, + { + "name": "loading", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Whether the dropdown is in loading state." + }, { "name": "optionLabel", "optional": false, @@ -12371,6 +12477,9 @@ "bars": { "components": {} }, + "blank": { + "components": {} + }, "caretleft": { "components": {} }, @@ -13012,6 +13121,14 @@ "type": "string", "description": "Title text of the input text." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, { "name": "ariaLabel", "optional": false, @@ -13987,7 +14104,24 @@ } }, "inputtext": { - "components": {} + "components": { + "InputText": { + "description": "InputText directive is an extension to standard input element with theming.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Button directive is an extension to button component." + } + ] + } + } + } }, "inputtextarea": { "components": { @@ -14003,6 +14137,14 @@ "type": "boolean", "default": "false", "description": "When present, textarea size changes as being typed." + }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." } ] }, @@ -15724,7 +15866,7 @@ "optional": false, "readonly": false, "type": "boolean", - "default": "true", + "default": "false", "description": "When specified, displays an input field to filter the items on keyup." }, { @@ -15757,6 +15899,14 @@ "default": "0", "description": "Index of the element in tabbing order." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, { "name": "appendTo", "optional": false, @@ -15928,6 +16078,14 @@ "default": "false", "description": "Whether the data should be loaded on demand during scroll." }, + { + "name": "loading", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Whether the multiselect is in loading state." + }, { "name": "virtualScrollItemSize", "optional": false, @@ -15935,6 +16093,13 @@ "type": "number", "description": "Height of an item in the list for VirtualScrolling." }, + { + "name": "loadingIcon", + "optional": false, + "readonly": false, + "type": "string", + "description": "Icon to display in loading state." + }, { "name": "virtualScrollOptions", "optional": false, @@ -17048,6 +17213,14 @@ "type": "\"multiple\" | \"single\"", "description": "Defines the selection mode." }, + { + "name": "collapsible", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Whether the nodes can be expanded or toggled." + }, { "name": "preserveSpace", "optional": false, @@ -19465,6 +19638,14 @@ "type": "string", "description": "Label of the radiobutton." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, { "name": "tabindex", "optional": false, @@ -25996,6 +26177,14 @@ "type": "\"multiple\" | \"checkbox\" | \"single\"", "description": "Defines the selection mode." }, + { + "name": "loadingMode", + "optional": false, + "readonly": false, + "type": "\"mask\" | \"icon\"", + "default": "mask", + "description": "Loading mode display." + }, { "name": "selection", "optional": false, @@ -26733,6 +26922,14 @@ "default": "false", "description": "Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, { "name": "display", "optional": false, @@ -28283,6 +28480,13 @@ "type": "string", "description": "Mandatory unique key of the node." }, + { + "name": "loading", + "optional": true, + "readonly": false, + "type": "boolean", + "description": "Mandatory unique key of the node." + }, { "name": "originalEvent", "optional": true, @@ -28759,6 +28963,14 @@ "type": "string", "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs." }, + { + "name": "variant", + "optional": false, + "readonly": false, + "type": "\"outlined\" | \"filled\"", + "default": "outlined", + "description": "Specifies the input variant of the component." + }, { "name": "tabindex", "optional": false, diff --git a/src/app/showcase/doc/autocomplete/accessibilitydoc.ts b/src/app/showcase/doc/autocomplete/accessibilitydoc.ts index 1c696407ce0..f24050659f6 100644 --- a/src/app/showcase/doc/autocomplete/accessibilitydoc.ts +++ b/src/app/showcase/doc/autocomplete/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -136,11 +136,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Email - + -` +` }; } diff --git a/src/app/showcase/doc/autocomplete/autocompletedoc.module.ts b/src/app/showcase/doc/autocomplete/autocompletedoc.module.ts index c5590b572de..8d6ce1514dd 100644 --- a/src/app/showcase/doc/autocomplete/autocompletedoc.module.ts +++ b/src/app/showcase/doc/autocomplete/autocompletedoc.module.ts @@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AutoCompleteModule } from 'primeng/autocomplete'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { TemplateDoc } from './templatedoc'; -import { GroupedDoc } from './groupeddoc'; +import { GroupDoc } from './groupdoc'; import { VirtualScrollDoc } from './virtualscrolldoc'; import { MultipleDoc } from './multipledoc'; import { StyleDoc } from './styledoc'; @@ -20,10 +20,12 @@ import { ReactiveFormsDoc } from './reactiveformsdoc'; import { FloatLabelDoc } from './floatlabeldoc'; import { DisabledDoc } from './disableddoc'; import { InvalidDoc } from './invaliddoc'; +import { FilledDoc } from './filleddoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; @NgModule({ - imports: [CommonModule, RouterModule, AppCodeModule, FormsModule, AppDocModule, AutoCompleteModule, ReactiveFormsModule], + imports: [CommonModule, RouterModule, AppCodeModule, FormsModule, AppDocModule, AutoCompleteModule, ReactiveFormsModule, RouterModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, TemplateDoc, GroupedDoc, VirtualScrollDoc, MultipleDoc, StyleDoc, AccessibilityDoc, DropdownDoc, ForceSelectionDoc, ObjectsDoc, ReactiveFormsDoc, FloatLabelDoc, DisabledDoc, InvalidDoc] + declarations: [ImportDoc, BasicDoc, TemplateDoc, GroupDoc, VirtualScrollDoc, MultipleDoc, StyleDoc, AccessibilityDoc, DropdownDoc, ForceSelectionDoc, ObjectsDoc, ReactiveFormsDoc, FloatLabelDoc, DisabledDoc, InvalidDoc, FilledDoc] }) export class AutoCompleteDocModule {} diff --git a/src/app/showcase/doc/autocomplete/basicdoc.ts b/src/app/showcase/doc/autocomplete/basicdoc.ts index a59614fe026..88ad271e3ed 100644 --- a/src/app/showcase/doc/autocomplete/basicdoc.ts +++ b/src/app/showcase/doc/autocomplete/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -15,7 +15,7 @@ interface AutoCompleteCompleteEvent {

- +
` }) @@ -31,15 +31,21 @@ export class BasicDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -48,7 +54,9 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-basic-demo', - templateUrl: './autocomplete-basic-demo.html' + templateUrl: './autocomplete-basic-demo.html', + imports: [AutoCompleteModule, FormsModule], + standalone: true, }) export class AutocompleteBasicDemo { items: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/disableddoc.ts b/src/app/showcase/doc/autocomplete/disableddoc.ts index 5031e8dff92..8d74dd628f5 100644 --- a/src/app/showcase/doc/autocomplete/disableddoc.ts +++ b/src/app/showcase/doc/autocomplete/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -12,7 +12,7 @@ interface AutoCompleteCompleteEvent {

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

- +
` }) @@ -28,15 +28,23 @@ export class DisabledDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -46,7 +54,8 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-disabled-demo', templateUrl: './autocomplete-disabled-demo.html', - styleUrls: ['./autocomplete-disabled-demo.scss'] + standalone: true, + imports: [FormsModule, AutoCompleteModule] }) export class AutocompleteDisabledDemo { items: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/dropdowndoc.ts b/src/app/showcase/doc/autocomplete/dropdowndoc.ts index 615ae782c4a..ad6c548eb60 100644 --- a/src/app/showcase/doc/autocomplete/dropdowndoc.ts +++ b/src/app/showcase/doc/autocomplete/dropdowndoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { CountryService } from '../../service/countryservice'; -import { PlatformService } from '../../service/platformservice'; +import { Code } from '@domain/code'; +import { CountryService } from '@service/countryservice'; +import { PlatformService } from '@service/platformservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -17,7 +17,7 @@ interface AutoCompleteCompleteEvent {

- +
` }) @@ -53,16 +53,26 @@ export class DropdownDoc implements OnInit { } code: Code = { - basic: ``, - - html: ` -
- + basic: ``, + + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { CountryService } from 'src/service/countryservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { CountryService } from '@service/countryservice'; +import { FormsModule } from '@angular/forms'; +import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -71,7 +81,10 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-dropdown-demo', - templateUrl: './autocomplete-dropdown-demo.html' + templateUrl: './autocomplete-dropdown-demo.html', + standalone:true, + imports: [FormsModule, AutoCompleteModule], + providers:[CountryService] }) export class AutocompleteDropdownDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/filleddoc.ts b/src/app/showcase/doc/autocomplete/filleddoc.ts new file mode 100644 index 00000000000..c7e6970268d --- /dev/null +++ b/src/app/showcase/doc/autocomplete/filleddoc.ts @@ -0,0 +1,72 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'filled-doc', + template: ` +

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

+ +
+ +
+ ` +}) +export class FilledDoc { + items: any[] | undefined; + + selectedItem: any; + + suggestions: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.suggestions = [...Array(10).keys()].map((item) => event.query + '-' + item); + } + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoCompleteModule } from 'primeng/autocomplete'; + +interface AutoCompleteCompleteEvent { + originalEvent: Event; + query: string; +} + +@Component({ + selector: 'autocomplete-filled-demo', + templateUrl: './autocomplete-filled-demo.html', + imports: [AutoCompleteModule, FormsModule], + standalone: true, +}) +export class AutocompleteFilledDemo { + items: any[] | undefined; + + selectedItem: any; + + suggestions: any[] | undefined; + + search(event: AutoCompleteCompleteEvent) { + this.suggestions = [...Array(10).keys()].map(item => event.query + '-' + item); + } +}` + }; +} diff --git a/src/app/showcase/doc/autocomplete/floatlabeldoc.ts b/src/app/showcase/doc/autocomplete/floatlabeldoc.ts index 5f1906af2bd..ee594fdce78 100644 --- a/src/app/showcase/doc/autocomplete/floatlabeldoc.ts +++ b/src/app/showcase/doc/autocomplete/floatlabeldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -9,13 +9,13 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'float-label-doc', template: ` -

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

+

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
- - + + - +
` }) @@ -31,21 +31,30 @@ export class FloatLabelDoc { } code: Code = { - basic: ` - + basic: ` + -`, +`, - html: ` -
- - + html: `
+ + - +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { FloatLabelModule } from 'primeng/floatlabel'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -55,7 +64,8 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-float-label-demo', templateUrl: './autocomplete-float-label-demo.html', - styleUrls: ['./autocomplete-float-label-demo.scss'] + standalone: true, + imports: [FormsModule, AutoCompleteModule, FloatLabelModule] }) export class AutocompleteFloatLabelDemo { items: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts index bf62b0eda2c..ad93fcd55e9 100644 --- a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts +++ b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts @@ -1,6 +1,6 @@ import { Component, Input, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { CountryService } from '../../service/countryservice'; +import { Code } from '@domain/code'; +import { CountryService } from '@service/countryservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -13,7 +13,7 @@ interface AutoCompleteCompleteEvent {

ForceSelection mode validates the manual input to check whether it also exists in the suggestions list, if not the input value is cleared to make sure the value passed to the model is always one of the suggestions.

- +
` }) @@ -51,16 +51,26 @@ export class ForceSelectionDoc implements OnInit { } code: Code = { - basic: ``, - - html: ` -
- + basic: ``, + + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { CountryService } from 'src/service/countryservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { CountryService } from '@service/countryservice'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -69,9 +79,12 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-force-selection-demo', - templateUrl: './autocomplete-force-selection-demo.html' + templateUrl: './autocomplete-force-selection-demo.html', + standalone: true, + imports: [FormsModule, AutoCompleteModule], + providers: [CountryService] }) -export class ForceSelectionDoc implements OnInit { +export class AutocompleteForceSelectionDemo implements OnInit { countries: any[] | undefined; selectedCountry: any; diff --git a/src/app/showcase/doc/autocomplete/groupeddoc.ts b/src/app/showcase/doc/autocomplete/groupdoc.ts similarity index 83% rename from src/app/showcase/doc/autocomplete/groupeddoc.ts rename to src/app/showcase/doc/autocomplete/groupdoc.ts index 357549fe5e0..46c7093e12d 100644 --- a/src/app/showcase/doc/autocomplete/groupeddoc.ts +++ b/src/app/showcase/doc/autocomplete/groupdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FilterService, SelectItemGroup } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -24,7 +24,7 @@ interface AutoCompleteCompleteEvent {
` }) -export class GroupedDoc implements OnInit { +export class GroupDoc implements OnInit { selectedCity: any; filteredGroups: any[] | undefined; @@ -87,20 +87,36 @@ export class GroupedDoc implements OnInit { } code: Code = { - basic: ` + basic: `
- + {{ group.label }}
`, html: `
- +
- + {{ group.label }}
@@ -110,6 +126,8 @@ export class GroupedDoc implements OnInit { typescript: ` import { Component, OnInit } from '@angular/core'; import { FilterService, SelectItemGroup } from 'primeng/api'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -118,8 +136,10 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-grouped-demo', - templateUrl: './autocomplete-grouped-demo.html' -}) + templateUrl: './autocomplete-grouped-demo.html', + standalone: true, + imports: [AutoCompleteModule, FormsModule], + }) export class AutocompleteGroupedDemo implements OnInit { selectedCity: any; diff --git a/src/app/showcase/doc/autocomplete/importdoc.ts b/src/app/showcase/doc/autocomplete/importdoc.ts index 18744842eb0..7dd4e99c32f 100644 --- a/src/app/showcase/doc/autocomplete/importdoc.ts +++ b/src/app/showcase/doc/autocomplete/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/autocomplete/invaliddoc.ts b/src/app/showcase/doc/autocomplete/invaliddoc.ts index 0b7c8f0c04f..7c3f12a85c6 100644 --- a/src/app/showcase/doc/autocomplete/invaliddoc.ts +++ b/src/app/showcase/doc/autocomplete/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -12,7 +12,7 @@ interface AutoCompleteCompleteEvent {

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

- +
` }) @@ -28,15 +28,23 @@ export class InvalidDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -46,7 +54,8 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-invalid-demo', templateUrl: './autocomplete-invalid-demo.html', - styleUrls: ['./autocomplete-invalid-demo.scss'] + standalone: true, + imports: [FormsModule, AutoCompleteModule] }) export class AutocompleteInvalidDemo { items: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/multipledoc.ts b/src/app/showcase/doc/autocomplete/multipledoc.ts index c8290041a1a..16de80d0359 100644 --- a/src/app/showcase/doc/autocomplete/multipledoc.ts +++ b/src/app/showcase/doc/autocomplete/multipledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -13,7 +13,7 @@ interface AutoCompleteCompleteEvent {
- +
` @@ -29,18 +29,26 @@ export class MultipleDoc { code: Code = { basic: ` - + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -49,7 +57,9 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-multiple-demo', - templateUrl: './autocomplete-multiple-demo.html' + templateUrl: './autocomplete-multiple-demo.html', + standalone: true, + imports: [FormsModule, AutoCompleteModule] }) export class AutocompleteMultipleDemo { selectedItems: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/objectsdoc.ts b/src/app/showcase/doc/autocomplete/objectsdoc.ts index 21252223f63..06f864932ac 100644 --- a/src/app/showcase/doc/autocomplete/objectsdoc.ts +++ b/src/app/showcase/doc/autocomplete/objectsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { CountryService } from '../../service/countryservice'; +import { Code } from '@domain/code'; +import { CountryService } from '@service/countryservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -16,7 +16,7 @@ interface AutoCompleteCompleteEvent {

- +
` }) @@ -50,16 +50,24 @@ export class ObjectsDoc implements OnInit { } code: Code = { - basic: ``, - - html: ` -
- + basic: ``, + + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { CountryService } from 'src/service/countryservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { CountryService } from '@service/countryservice'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -68,7 +76,11 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-objects-demo', - templateUrl: './autocomplete-objects-demo.html' + templateUrl: './autocomplete-objects-demo.html', + standalone: true, + imports: [AutoCompleteModule, FormsModule], + providers: [CountryService] + }) export class AutocompleteObjectsDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts index 637ce107b8e..ec6da7bd803 100644 --- a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts +++ b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; -import { CountryService } from '../../service/countryservice'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { Code } from '@domain/code'; +import { CountryService } from '@service/countryservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -15,7 +15,7 @@ interface AutoCompleteCompleteEvent {
- +
` @@ -55,20 +55,27 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
- + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { CountryService } from '../../service/countryservice'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { CountryService } from '@service/countryservice'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { AutoCompleteModule } from 'primeng/autocomplete'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -77,7 +84,10 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-reactive-forms-demo', - templateUrl: './autocomplete-reactive-forms-demo.html' + templateUrl: './autocomplete-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, AutoCompleteModule], + providers: [CountryService] }) export class AutocompleteReactiveFormsDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/templatedoc.ts b/src/app/showcase/doc/autocomplete/templatedoc.ts index ecfe77a1a6b..6bbb5212a36 100644 --- a/src/app/showcase/doc/autocomplete/templatedoc.ts +++ b/src/app/showcase/doc/autocomplete/templatedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { CountryService } from '../../service/countryservice'; +import { Code } from '@domain/code'; +import { CountryService } from '@service/countryservice'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -53,32 +53,45 @@ export class TemplateDoc { } code: Code = { - basic: ` - -
- -
{{ country.name }}
-
- + basic: ` + +
+ +
{{ country.name }}
+
+ `, - html: ` -
- + html: `
+
- +
{{ country.name }}
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { SelectItemGroup } from 'primeng/api'; -import { CountryService } from 'src/service/countryservice'; +import { CountryService } from '@service/countryservice'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -88,7 +101,9 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-template-demo', templateUrl: './autocomplete-template-demo.html', - styleUrls: ['./autocomplete-template-demo.scss'] + standalone: true, + imports: [FormsModule, AutoCompleteModule], + providers: [CountryService] }) export class AutocompleteTemplateDemo { countries: any[] | undefined; diff --git a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts index 49d29cddbf6..273780437ca 100644 --- a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts +++ b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -15,7 +15,7 @@ interface AutoCompleteCompleteEvent {

- +
` }) @@ -49,15 +49,29 @@ export class VirtualScrollDoc { } code: Code = { - basic: ` `, - - html: ` -
- + basic: ``, + + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { AutoCompleteModule } from 'primeng/autocomplete'; +import { FormsModule } from '@angular/forms'; interface AutoCompleteCompleteEvent { originalEvent: Event; @@ -66,7 +80,9 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-virtual-scroll-demo', - templateUrl: './autocomplete-virtual-scroll-demo.html' + templateUrl: './autocomplete-virtual-scroll-demo.html', + standalone: true, + imports: [FormsModule, AutoCompleteModule] }) export class AutocompleteVirtualScrollDemo { selectedItem: any; diff --git a/src/app/showcase/doc/autofocus/autofocusdoc.module.ts b/src/app/showcase/doc/autofocus/autofocusdoc.module.ts index e1c5e52ce5e..8c823118e31 100644 --- a/src/app/showcase/doc/autofocus/autofocusdoc.module.ts +++ b/src/app/showcase/doc/autofocus/autofocusdoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { AutoFocusModule } from 'primeng/autofocus'; diff --git a/src/app/showcase/doc/autofocus/basicdoc.ts b/src/app/showcase/doc/autofocus/basicdoc.ts index 7597334faa9..721ee2c204f 100644 --- a/src/app/showcase/doc/autofocus/basicdoc.ts +++ b/src/app/showcase/doc/autofocus/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'auto-focus-basic-demo', diff --git a/src/app/showcase/doc/autofocus/importdoc.ts b/src/app/showcase/doc/autofocus/importdoc.ts index 99b6b82268c..1ec3f0dcc5a 100644 --- a/src/app/showcase/doc/autofocus/importdoc.ts +++ b/src/app/showcase/doc/autofocus/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/avatar/avatardoc.module.ts b/src/app/showcase/doc/avatar/avatardoc.module.ts index 2805fc95d86..5c218696ede 100644 --- a/src/app/showcase/doc/avatar/avatardoc.module.ts +++ b/src/app/showcase/doc/avatar/avatardoc.module.ts @@ -6,8 +6,8 @@ import { AvatarModule } from 'primeng/avatar'; import { BadgeModule } from 'primeng/badge'; import { AvatarGroupModule } from 'primeng/avatargroup'; import { InputTextModule } from 'primeng/inputtext'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { GroupDoc } from './avatargroupdoc'; import { IconDoc } from './icondoc'; import { ImageDoc } from './imagedoc'; diff --git a/src/app/showcase/doc/avatar/avatargroupdoc.ts b/src/app/showcase/doc/avatar/avatargroupdoc.ts index a9657999699..3ee5ff83c44 100644 --- a/src/app/showcase/doc/avatar/avatargroupdoc.ts +++ b/src/app/showcase/doc/avatar/avatargroupdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'avatar-group-demo', diff --git a/src/app/showcase/doc/avatar/badgedoc.ts b/src/app/showcase/doc/avatar/badgedoc.ts index 207ebf508f0..7409c065414 100644 --- a/src/app/showcase/doc/avatar/badgedoc.ts +++ b/src/app/showcase/doc/avatar/badgedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'avatar-badge-demo', diff --git a/src/app/showcase/doc/avatar/icondoc.ts b/src/app/showcase/doc/avatar/icondoc.ts index 50b0ebe34ed..2877568a633 100644 --- a/src/app/showcase/doc/avatar/icondoc.ts +++ b/src/app/showcase/doc/avatar/icondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'avatar-icon-demo', diff --git a/src/app/showcase/doc/avatar/imagedoc.ts b/src/app/showcase/doc/avatar/imagedoc.ts index 3b56554e2f2..5681a761f94 100644 --- a/src/app/showcase/doc/avatar/imagedoc.ts +++ b/src/app/showcase/doc/avatar/imagedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'avatar-image-demo', diff --git a/src/app/showcase/doc/avatar/importdoc.ts b/src/app/showcase/doc/avatar/importdoc.ts index b8af33c0621..455b22a18f2 100644 --- a/src/app/showcase/doc/avatar/importdoc.ts +++ b/src/app/showcase/doc/avatar/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/avatar/labeldoc.ts b/src/app/showcase/doc/avatar/labeldoc.ts index bc7e54babb0..e3690b91279 100644 --- a/src/app/showcase/doc/avatar/labeldoc.ts +++ b/src/app/showcase/doc/avatar/labeldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'avatar-label-demo', diff --git a/src/app/showcase/doc/avatar/shapedoc.ts b/src/app/showcase/doc/avatar/shapedoc.ts index 7d2ca1b0d58..cc3ec6f730c 100644 --- a/src/app/showcase/doc/avatar/shapedoc.ts +++ b/src/app/showcase/doc/avatar/shapedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'avatar-shape-demo', diff --git a/src/app/showcase/doc/avatar/sizedoc.ts b/src/app/showcase/doc/avatar/sizedoc.ts index 0b767980886..be7f28dadee 100644 --- a/src/app/showcase/doc/avatar/sizedoc.ts +++ b/src/app/showcase/doc/avatar/sizedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'avatar-size-demo', diff --git a/src/app/showcase/doc/avatar/templatedoc.ts b/src/app/showcase/doc/avatar/templatedoc.ts index c79ac47aaa0..43f67350788 100644 --- a/src/app/showcase/doc/avatar/templatedoc.ts +++ b/src/app/showcase/doc/avatar/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'avatar-template-demo', diff --git a/src/app/showcase/doc/badge/badgedoc.module.ts b/src/app/showcase/doc/badge/badgedoc.module.ts index a72b6c922df..93106dc839b 100644 --- a/src/app/showcase/doc/badge/badgedoc.module.ts +++ b/src/app/showcase/doc/badge/badgedoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BadgeModule } from 'primeng/badge'; import { ButtonModule } from 'primeng/button'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/badge/basicdoc.ts b/src/app/showcase/doc/badge/basicdoc.ts index 721e9e8edda..f847e90b442 100644 --- a/src/app/showcase/doc/badge/basicdoc.ts +++ b/src/app/showcase/doc/badge/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'badge-basic-demo', diff --git a/src/app/showcase/doc/badge/buttondoc.ts b/src/app/showcase/doc/badge/buttondoc.ts index 8a0721720c6..73616cfdeb8 100644 --- a/src/app/showcase/doc/badge/buttondoc.ts +++ b/src/app/showcase/doc/badge/buttondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'badge-button-demo', diff --git a/src/app/showcase/doc/badge/directivedoc.ts b/src/app/showcase/doc/badge/directivedoc.ts index 6acd350006b..97a31e399a8 100644 --- a/src/app/showcase/doc/badge/directivedoc.ts +++ b/src/app/showcase/doc/badge/directivedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'badge-directive-demo', diff --git a/src/app/showcase/doc/badge/importdoc.ts b/src/app/showcase/doc/badge/importdoc.ts index ca2a4ff5ce2..a7771b2055e 100644 --- a/src/app/showcase/doc/badge/importdoc.ts +++ b/src/app/showcase/doc/badge/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/badge/positiondoc.ts b/src/app/showcase/doc/badge/positiondoc.ts index 6cf3306788b..9a6a8c1734b 100644 --- a/src/app/showcase/doc/badge/positiondoc.ts +++ b/src/app/showcase/doc/badge/positiondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'badge-position-demo', diff --git a/src/app/showcase/doc/badge/severitydoc.ts b/src/app/showcase/doc/badge/severitydoc.ts index 9d24925ddbb..f6028c57d50 100644 --- a/src/app/showcase/doc/badge/severitydoc.ts +++ b/src/app/showcase/doc/badge/severitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'badge-severity-demo', diff --git a/src/app/showcase/doc/badge/sizedoc.ts b/src/app/showcase/doc/badge/sizedoc.ts index 905445f1a0d..5fbbd480a12 100644 --- a/src/app/showcase/doc/badge/sizedoc.ts +++ b/src/app/showcase/doc/badge/sizedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'badge-size-demo', diff --git a/src/app/showcase/doc/blockui/basicdoc.ts b/src/app/showcase/doc/blockui/basicdoc.ts index 07622465aef..7e5a0e56da7 100644 --- a/src/app/showcase/doc/blockui/basicdoc.ts +++ b/src/app/showcase/doc/blockui/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'block-ui-basic-demo', diff --git a/src/app/showcase/doc/blockui/blockuidoc.module.ts b/src/app/showcase/doc/blockui/blockuidoc.module.ts index 37096dca94b..1a5dc6d01b9 100644 --- a/src/app/showcase/doc/blockui/blockuidoc.module.ts +++ b/src/app/showcase/doc/blockui/blockuidoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { BlockUIModule } from 'primeng/blockui'; import { ButtonModule } from 'primeng/button'; import { PanelModule } from 'primeng/panel'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DocumentDoc } from './documentdoc'; diff --git a/src/app/showcase/doc/blockui/documentdoc.ts b/src/app/showcase/doc/blockui/documentdoc.ts index 94c0eaf802e..f531e131fe9 100644 --- a/src/app/showcase/doc/blockui/documentdoc.ts +++ b/src/app/showcase/doc/blockui/documentdoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'block-ui-document-demo', diff --git a/src/app/showcase/doc/blockui/importdoc.ts b/src/app/showcase/doc/blockui/importdoc.ts index 5179f17eb70..9eb5b1e2c90 100644 --- a/src/app/showcase/doc/blockui/importdoc.ts +++ b/src/app/showcase/doc/blockui/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/breadcrumb/basicdoc.ts b/src/app/showcase/doc/breadcrumb/basicdoc.ts index 6baee9ec01c..4d928e17cf5 100644 --- a/src/app/showcase/doc/breadcrumb/basicdoc.ts +++ b/src/app/showcase/doc/breadcrumb/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'breadcrumb-basic-demo', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

Breadcrumb provides contextual information about page hierarchy.

- +
` @@ -20,26 +20,33 @@ export class BasicDoc implements OnInit { home: MenuItem | undefined; ngOnInit() { - this.items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]; + this.items = [{ label: 'Electronics' }, { label: 'Computer' }, { label: 'Accessories' }, { label: 'Keyboard' }, { label: 'Wireless' }]; this.home = { icon: 'pi pi-home', routerLink: '/' }; } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { BreadcrumbModule } from 'primeng/breadcrumb'; @Component({ selector: 'breadcrumb-basic-demo', - templateUrl: './breadcrumb-basic-demo.html' + templateUrl: './breadcrumb-basic-demo.html', + standalone: true, + imports: [BreadcrumbModule] }) export class BreadcrumbBasicDemo implements OnInit { items: MenuItem[] | undefined; @@ -47,7 +54,13 @@ export class BreadcrumbBasicDemo implements OnInit { home: MenuItem | undefined; ngOnInit() { - this.items = [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }]; + this.items = [ + { label: 'Electronics' }, + { label: 'Computer' }, + { label: 'Accessories' }, + { label: 'Keyboard' }, + { label: 'Wireless' } + ]; this.home = { icon: 'pi pi-home', routerLink: '/' }; } diff --git a/src/app/showcase/doc/breadcrumb/breadcrumbdoc.module.ts b/src/app/showcase/doc/breadcrumb/breadcrumbdoc.module.ts index 5cada66cf7b..39a2d8845d8 100644 --- a/src/app/showcase/doc/breadcrumb/breadcrumbdoc.module.ts +++ b/src/app/showcase/doc/breadcrumb/breadcrumbdoc.module.ts @@ -2,16 +2,18 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { BreadcrumbModule } from 'primeng/breadcrumb'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { StyleDoc } from './styledoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { TemplateDoc } from './templatedoc'; +import { RouterDoc } from './routerdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, RouterModule, BreadcrumbModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, StyleDoc, AccessibilityDoc], + declarations: [BasicDoc, TemplateDoc, RouterDoc, ImportDoc, StyleDoc, AccessibilityDoc], exports: [AppDocModule] }) export class BreadcrumbDocModule {} diff --git a/src/app/showcase/doc/breadcrumb/importdoc.ts b/src/app/showcase/doc/breadcrumb/importdoc.ts index 7667267ff9b..cd21647d09c 100644 --- a/src/app/showcase/doc/breadcrumb/importdoc.ts +++ b/src/app/showcase/doc/breadcrumb/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/breadcrumb/routerdoc.ts b/src/app/showcase/doc/breadcrumb/routerdoc.ts new file mode 100644 index 00000000000..ec54d62830b --- /dev/null +++ b/src/app/showcase/doc/breadcrumb/routerdoc.ts @@ -0,0 +1,96 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'breadcrumb-router-demo', + template: ` + +

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

+ +
+ + + + + + {{ item.label }} + + + + + {{ item.label }} + + + + +
+ + ` +}) +export class RouterDoc implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ icon: 'pi pi-home', route: '/installation' }, { label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }]; + } + + code: Code = { + basic: ` + + + + + {{ item.label }} + + + + + {{ item.label }} + + + +`, + + html: `
+ + + + + + {{ item.label }} + + + + + {{ item.label }} + + + + +
`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { BreadcrumbModule } from 'primeng/breadcrumb'; +import { RouterModule } from '@angular/router'; + +@Component({ + selector: 'breadcrumb-router-demo', + templateUrl: './breadcrumb-router-demo.html', + standalone: true, + imports: [BreadcrumbModule, RouterModule] +}) +export class BreadcrumbRouterDemo implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ icon: 'pi pi-home', route: '/installation' }, { label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }]; + } +}` + }; +} diff --git a/src/app/showcase/doc/breadcrumb/templatedoc.ts b/src/app/showcase/doc/breadcrumb/templatedoc.ts new file mode 100644 index 00000000000..c81160e5850 --- /dev/null +++ b/src/app/showcase/doc/breadcrumb/templatedoc.ts @@ -0,0 +1,79 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'breadcrumb-template-demo', + template: ` + +

Custom content can be placed inside the items using the item template. The divider between the items has its own separator template.

+ +
+ + + + + + + / + +
+ + ` +}) +export class TemplateDoc implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]; + + this.home = { icon: 'pi pi-home' }; + } + + code: Code = { + basic: ` + + + + + + / +`, + + html: `
+ + + + + + + / + +
`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { BreadcrumbModule } from 'primeng/breadcrumb'; +import { RouterModule } from '@angular/router'; + +@Component({ + selector: 'breadcrumb-template-demo', + templateUrl: './breadcrumb-template-demo.html', + standalone: true, + imports: [BreadcrumbModule, RouterModule] +}) +export class BreadcrumbTemplateDemo implements OnInit { + items: MenuItem[] | undefined; + + home: MenuItem | undefined; + + ngOnInit() { + this.items = [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }]; + + this.home = { icon: 'pi pi-home' }; + } +}` + }; +} diff --git a/src/app/showcase/doc/button/accessibilitydoc.ts b/src/app/showcase/doc/button/accessibilitydoc.ts index 4575c75e545..9670429ba6d 100644 --- a/src/app/showcase/doc/button/accessibilitydoc.ts +++ b/src/app/showcase/doc/button/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/button/badgedoc.ts b/src/app/showcase/doc/button/badgedoc.ts index a925d1e86e6..1dfe56ea913 100644 --- a/src/app/showcase/doc/button/badgedoc.ts +++ b/src/app/showcase/doc/button/badgedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-badge-demo', diff --git a/src/app/showcase/doc/button/basicdoc.ts b/src/app/showcase/doc/button/basicdoc.ts index f3701ad2566..018c829be4e 100644 --- a/src/app/showcase/doc/button/basicdoc.ts +++ b/src/app/showcase/doc/button/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-basic-demo', diff --git a/src/app/showcase/doc/button/buttondoc.module.ts b/src/app/showcase/doc/button/buttondoc.module.ts index cda2ae90370..fb2345118a3 100644 --- a/src/app/showcase/doc/button/buttondoc.module.ts +++ b/src/app/showcase/doc/button/buttondoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { ButtonGroupModule } from 'primeng/buttongroup'; import { RippleModule } from 'primeng/ripple'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BadgeDoc } from './badgedoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/button/buttongroupdoc.ts b/src/app/showcase/doc/button/buttongroupdoc.ts index 37a04b1965b..d296a3cbf6e 100644 --- a/src/app/showcase/doc/button/buttongroupdoc.ts +++ b/src/app/showcase/doc/button/buttongroupdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-group-demo', diff --git a/src/app/showcase/doc/button/buttonsetdoc.ts b/src/app/showcase/doc/button/buttonsetdoc.ts index f35cc0bd460..aaecdaeb7c2 100644 --- a/src/app/showcase/doc/button/buttonsetdoc.ts +++ b/src/app/showcase/doc/button/buttonsetdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-set-demo', diff --git a/src/app/showcase/doc/button/directivedoc.ts b/src/app/showcase/doc/button/directivedoc.ts index 6b7a3bb9b17..0ee5483e320 100644 --- a/src/app/showcase/doc/button/directivedoc.ts +++ b/src/app/showcase/doc/button/directivedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-directive-demo', diff --git a/src/app/showcase/doc/button/disableddoc.ts b/src/app/showcase/doc/button/disableddoc.ts index 89ce253f4c8..a22b67655a2 100644 --- a/src/app/showcase/doc/button/disableddoc.ts +++ b/src/app/showcase/doc/button/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-disabled-demo', diff --git a/src/app/showcase/doc/button/iconsdoc.ts b/src/app/showcase/doc/button/iconsdoc.ts index dfb3cb04ae2..673e3d4d902 100644 --- a/src/app/showcase/doc/button/iconsdoc.ts +++ b/src/app/showcase/doc/button/iconsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-icons-demo', diff --git a/src/app/showcase/doc/button/iconsonlydoc.ts b/src/app/showcase/doc/button/iconsonlydoc.ts index 702c38a77d1..432dd447c3f 100644 --- a/src/app/showcase/doc/button/iconsonlydoc.ts +++ b/src/app/showcase/doc/button/iconsonlydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-icon-only-demo', diff --git a/src/app/showcase/doc/button/importdoc.ts b/src/app/showcase/doc/button/importdoc.ts index aa23634a075..25f9809a265 100644 --- a/src/app/showcase/doc/button/importdoc.ts +++ b/src/app/showcase/doc/button/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/button/linkdoc.ts b/src/app/showcase/doc/button/linkdoc.ts index b7df282e917..721b8bfbae7 100644 --- a/src/app/showcase/doc/button/linkdoc.ts +++ b/src/app/showcase/doc/button/linkdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-link-demo', diff --git a/src/app/showcase/doc/button/loadingdoc.ts b/src/app/showcase/doc/button/loadingdoc.ts index 4fa1c29782b..10d77c8148b 100644 --- a/src/app/showcase/doc/button/loadingdoc.ts +++ b/src/app/showcase/doc/button/loadingdoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-loading-demo', diff --git a/src/app/showcase/doc/button/outlineddoc.ts b/src/app/showcase/doc/button/outlineddoc.ts index 98c0b164f82..1ada169b3cf 100644 --- a/src/app/showcase/doc/button/outlineddoc.ts +++ b/src/app/showcase/doc/button/outlineddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-outlined-demo', diff --git a/src/app/showcase/doc/button/raiseddoc.ts b/src/app/showcase/doc/button/raiseddoc.ts index f19a5205655..9108c3fd369 100644 --- a/src/app/showcase/doc/button/raiseddoc.ts +++ b/src/app/showcase/doc/button/raiseddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-raised-demo', diff --git a/src/app/showcase/doc/button/raisedtextdoc.ts b/src/app/showcase/doc/button/raisedtextdoc.ts index fa3464f71a9..4d60d4dfe3b 100644 --- a/src/app/showcase/doc/button/raisedtextdoc.ts +++ b/src/app/showcase/doc/button/raisedtextdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-raisedtext-demo', diff --git a/src/app/showcase/doc/button/roundeddoc.ts b/src/app/showcase/doc/button/roundeddoc.ts index d23ed33ddd6..6fc74e6aa28 100644 --- a/src/app/showcase/doc/button/roundeddoc.ts +++ b/src/app/showcase/doc/button/roundeddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-rounded-demo', diff --git a/src/app/showcase/doc/button/severitydoc.ts b/src/app/showcase/doc/button/severitydoc.ts index e9206fd82cd..a1926e335ad 100644 --- a/src/app/showcase/doc/button/severitydoc.ts +++ b/src/app/showcase/doc/button/severitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-severity-demo', diff --git a/src/app/showcase/doc/button/sizesdoc.ts b/src/app/showcase/doc/button/sizesdoc.ts index 09781ca40d3..fea244ab23a 100644 --- a/src/app/showcase/doc/button/sizesdoc.ts +++ b/src/app/showcase/doc/button/sizesdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-sizes-demo', diff --git a/src/app/showcase/doc/button/templatedoc.ts b/src/app/showcase/doc/button/templatedoc.ts index cc05f99f21f..a140d1c32d4 100644 --- a/src/app/showcase/doc/button/templatedoc.ts +++ b/src/app/showcase/doc/button/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-template-demo', diff --git a/src/app/showcase/doc/button/textdoc.ts b/src/app/showcase/doc/button/textdoc.ts index e06221810ea..5cfdd21af45 100644 --- a/src/app/showcase/doc/button/textdoc.ts +++ b/src/app/showcase/doc/button/textdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-text-demo', diff --git a/src/app/showcase/doc/calendar/accessibilitydoc.ts b/src/app/showcase/doc/calendar/accessibilitydoc.ts index 07fd2d11d01..0279ff16ec5 100644 --- a/src/app/showcase/doc/calendar/accessibilitydoc.ts +++ b/src/app/showcase/doc/calendar/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -231,11 +231,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Date - + -` +` }; } diff --git a/src/app/showcase/doc/calendar/basicdoc.ts b/src/app/showcase/doc/calendar/basicdoc.ts index ea91408630d..e1513a86bf3 100644 --- a/src/app/showcase/doc/calendar/basicdoc.ts +++ b/src/app/showcase/doc/calendar/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-basic-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Two-way value binding is defined using the standard ngModel directive referencing to a Date property.

- +
` @@ -17,19 +17,21 @@ export class BasicDoc { date: Date | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { CalendarModule } from 'primeng/calendar'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'calendar-basic-demo', - templateUrl: './calendar-basic-demo.html' + templateUrl: './calendar-basic-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarBasicDemo { date: Date | undefined; diff --git a/src/app/showcase/doc/calendar/buttonbardoc.ts b/src/app/showcase/doc/calendar/buttonbardoc.ts index 3429196171a..f19eb63fdfc 100644 --- a/src/app/showcase/doc/calendar/buttonbardoc.ts +++ b/src/app/showcase/doc/calendar/buttonbardoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-buttonbar-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

When showButtonBar is present, today and clear buttons are displayed at the footer.

- +
` @@ -17,19 +17,25 @@ export class ButtonBarDoc { date: Date[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-buttonbar-demo', - templateUrl: './calendar-buttonbar-demo.html' + templateUrl: './calendar-buttonbar-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarButtonbarDemo { date: Date[] | undefined; diff --git a/src/app/showcase/doc/calendar/calendardoc.module.ts b/src/app/showcase/doc/calendar/calendardoc.module.ts index 93af58b847c..5d5bbca09be 100644 --- a/src/app/showcase/doc/calendar/calendardoc.module.ts +++ b/src/app/showcase/doc/calendar/calendardoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { CalendarModule } from 'primeng/calendar'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; @@ -32,9 +32,11 @@ import { TemplatesDoc } from './templatesdoc'; import { FloatLabelDoc } from './floatlabeldoc'; import { InvalidDoc } from './invaliddoc'; import { DisabledDoc } from './disableddoc'; +import { FilledDoc } from './filleddoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; @NgModule({ - imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, CalendarModule, ReactiveFormsModule], + imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, CalendarModule, ReactiveFormsModule, FloatLabelModule], exports: [AppDocModule], declarations: [ ImportDoc, @@ -62,6 +64,7 @@ import { DisabledDoc } from './disableddoc'; AccessibilityDoc, ReactiveFormsDoc, FloatLabelDoc, + FilledDoc, InvalidDoc, DisabledDoc ] diff --git a/src/app/showcase/doc/calendar/datetemplatedoc.ts b/src/app/showcase/doc/calendar/datetemplatedoc.ts index 877516041ff..104d2daa6e3 100644 --- a/src/app/showcase/doc/calendar/datetemplatedoc.ts +++ b/src/app/showcase/doc/calendar/datetemplatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-datetemplate-demo', @@ -23,25 +23,31 @@ export class DateTemplateDoc { code: Code = { basic: ` - {{date.day}} + + {{date.day}} + `, - html: ` -
+ html: `
- {{ date.day }} + + {{ date.day }} +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-datetemplate-demo', - templateUrl: './calendar-datetemplate-demo.html' + templateUrl: './calendar-datetemplate-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarDatetemplateDemo { date: Date[] | undefined; diff --git a/src/app/showcase/doc/calendar/disableddoc.ts b/src/app/showcase/doc/calendar/disableddoc.ts index a0a7f9d36ad..6a3f258e1df 100644 --- a/src/app/showcase/doc/calendar/disableddoc.ts +++ b/src/app/showcase/doc/calendar/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-disabled-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

- +
` @@ -17,18 +17,25 @@ export class DisabledDoc { date: Date | undefined; code: Code = { - basic: ``, + basic: ``, html: `
- +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-disabled-demo', - templateUrl: './calendar-disabled-demo.html' + templateUrl: './calendar-disabled-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarDisabledDemo { date: Date | undefined; diff --git a/src/app/showcase/doc/calendar/filleddoc.ts b/src/app/showcase/doc/calendar/filleddoc.ts new file mode 100644 index 00000000000..312d4f7d210 --- /dev/null +++ b/src/app/showcase/doc/calendar/filleddoc.ts @@ -0,0 +1,44 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'calendar-filled-demo', + template: ` + +

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

+ +
+ +
+ + ` +}) +export class FilledDoc { + date: Date[] | undefined; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; + +@Component({ + selector: 'calendar-filled-demo', + templateUrl: './calendar-filled-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] +}) +export class CalendarFilledDemo { + date: Date[] | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/calendar/floatlabeldoc.ts b/src/app/showcase/doc/calendar/floatlabeldoc.ts index c350ca631b4..d88077891b3 100644 --- a/src/app/showcase/doc/calendar/floatlabeldoc.ts +++ b/src/app/showcase/doc/calendar/floatlabeldoc.ts @@ -1,17 +1,17 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-float-label-demo', template: ` -

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

+

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
- - + + - +
` @@ -20,24 +20,32 @@ export class FloatLabelDoc { date: Date | undefined; code: Code = { - basic: ` - + basic: ` + -`, +`, html: `
- - - - + + + +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; +import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ selector: 'calendar-float-label-demo', - templateUrl: './calendar-float-label-demo.html' + templateUrl: './calendar-float-label-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule, FloatLabelModule] }) export class CalendarFloatLabelDemo { date: Date | undefined; diff --git a/src/app/showcase/doc/calendar/formatdoc.ts b/src/app/showcase/doc/calendar/formatdoc.ts index c95826b0bc3..afafab9de41 100644 --- a/src/app/showcase/doc/calendar/formatdoc.ts +++ b/src/app/showcase/doc/calendar/formatdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-format-demo', @@ -27,7 +27,7 @@ import { Code } from '../../domain/code';
- +
` @@ -36,19 +36,25 @@ export class FormatDoc { date: Date | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-format-demo', - templateUrl: './calendar-format-demo.html' + templateUrl: './calendar-format-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarFormatDemo { date: Date | undefined; diff --git a/src/app/showcase/doc/calendar/icondoc.ts b/src/app/showcase/doc/calendar/icondoc.ts index 67ea62eeaae..0e4d6be5668 100644 --- a/src/app/showcase/doc/calendar/icondoc.ts +++ b/src/app/showcase/doc/calendar/icondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-icon-demo', @@ -9,20 +9,20 @@ import { Code } from '../../domain/code';
- - + +
- - + +
- - + + - +
@@ -38,40 +38,74 @@ export class IconDoc { date3: Date | undefined; code: Code = { - basic: ` - - - - - + basic: ` + + + + + + + `, html: `
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - - - - +
+ + + + + -
+
`, typescript: `import { Component } from '@angular/core'; +import { CalendarModule } from 'primeng/calendar'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'calendar-icon-demo', - templateUrl: './calendar-icon-demo.html' + templateUrl: './calendar-icon-demo.html', + standalone: true, + imports: [CalendarModule, FormsModule] }) export class CalendarIconDemo { date1: Date | undefined; diff --git a/src/app/showcase/doc/calendar/importdoc.ts b/src/app/showcase/doc/calendar/importdoc.ts index 8a972895bdd..e5ad5b99d8a 100644 --- a/src/app/showcase/doc/calendar/importdoc.ts +++ b/src/app/showcase/doc/calendar/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/calendar/inlinedoc.ts b/src/app/showcase/doc/calendar/inlinedoc.ts index d3f75fd6151..3bcdb00c655 100644 --- a/src/app/showcase/doc/calendar/inlinedoc.ts +++ b/src/app/showcase/doc/calendar/inlinedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-inline-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Calendar is displayed as a popup by default, add inline property to customize this behavior.

- +
` @@ -17,19 +17,29 @@ export class InlineDoc { date: Date[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-inline-demo', - templateUrl: './calendar-inline-demo.html' + templateUrl: './calendar-inline-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarInlineDemo { date: Date[] | undefined; diff --git a/src/app/showcase/doc/calendar/invaliddoc.ts b/src/app/showcase/doc/calendar/invaliddoc.ts index 839d5f6a346..0d41605a6d1 100644 --- a/src/app/showcase/doc/calendar/invaliddoc.ts +++ b/src/app/showcase/doc/calendar/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-invalid-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

- +
` @@ -17,18 +17,25 @@ export class InvalidDoc { date: Date | undefined; code: Code = { - basic: ``, + basic: ``, html: `
- +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-invalid-demo', - templateUrl: './calendar-invalid-demo.html' + templateUrl: './calendar-invalid-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarInvalidDemo { date: Date | undefined; diff --git a/src/app/showcase/doc/calendar/minmaxdox.ts b/src/app/showcase/doc/calendar/minmaxdox.ts index a8341a7c59f..4603fb32009 100644 --- a/src/app/showcase/doc/calendar/minmaxdox.ts +++ b/src/app/showcase/doc/calendar/minmaxdox.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-minmax-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Boundaries for the permitted dates that can be entered are defined with minDate and maxDate properties.

- +
` @@ -37,19 +37,29 @@ export class MinMaxDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-minmax-demo', - templateUrl: './calendar-minmax-demo.html' + templateUrl: './calendar-minmax-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarMinmaxDemo implements OnInit { date: Date | undefined; diff --git a/src/app/showcase/doc/calendar/monthdoc.ts b/src/app/showcase/doc/calendar/monthdoc.ts index 49839f46353..b241a2db996 100644 --- a/src/app/showcase/doc/calendar/monthdoc.ts +++ b/src/app/showcase/doc/calendar/monthdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-month-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Month only picker is enabled by specifying view as month in addition to a suitable dateFormat.

- +
` @@ -17,19 +17,29 @@ export class MonthDoc { date: Date[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-month-demo', - templateUrl: './calendar-month-demo.html' + templateUrl: './calendar-month-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarMonthDemo { date: Date[] | undefined; diff --git a/src/app/showcase/doc/calendar/multipledoc.ts b/src/app/showcase/doc/calendar/multipledoc.ts index b2e2feb7d55..e30e8f70917 100644 --- a/src/app/showcase/doc/calendar/multipledoc.ts +++ b/src/app/showcase/doc/calendar/multipledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-multiple-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

In order to choose multiple dates, set selectionMode as multiple. In this mode, the value binding should be an array.

- +
` @@ -17,19 +17,27 @@ export class MultipleDoc { dates: Date[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-multiple-demo', - templateUrl: './calendar-multiple-demo.html' + templateUrl: './calendar-multiple-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarMultipleDemo { dates: Date[] | undefined; diff --git a/src/app/showcase/doc/calendar/multiplemonths.doc.ts b/src/app/showcase/doc/calendar/multiplemonths.doc.ts index 20e070e324b..9558b97cb4f 100644 --- a/src/app/showcase/doc/calendar/multiplemonths.doc.ts +++ b/src/app/showcase/doc/calendar/multiplemonths.doc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-multiplemonths-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Number of months to display is configured with the numberOfMonths property.

- +
` @@ -17,19 +17,24 @@ export class MultipleMonthDoc { date: Date[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core' + typescript: `import { Component } from '@angular/core'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-multiplemonths-demo', - templateUrl: './calendar-multiplemonths-demo.html' + templateUrl: './calendar-multiplemonths-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarMultiplemonthsDemo { date: Date[] | undefined; diff --git a/src/app/showcase/doc/calendar/rangedoc.ts b/src/app/showcase/doc/calendar/rangedoc.ts index 1464d63bd51..12cff49bbdc 100644 --- a/src/app/showcase/doc/calendar/rangedoc.ts +++ b/src/app/showcase/doc/calendar/rangedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-range-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

A range of dates can be selected by defining selectionMode as range, in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.

- +
` @@ -17,22 +17,31 @@ export class RangeDoc { rangeDates: Date[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core' + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-range-demo', templateUrl: './calendar-range-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarRangeDemo { rangeDates: Date[] | undefined; }` }; } + diff --git a/src/app/showcase/doc/calendar/reactiveformsdoc.ts b/src/app/showcase/doc/calendar/reactiveformsdoc.ts index c8872ad78cd..b2dac3351a3 100644 --- a/src/app/showcase/doc/calendar/reactiveformsdoc.ts +++ b/src/app/showcase/doc/calendar/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
- +
@@ -27,23 +27,24 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
- + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-reactive-forms-demo', - templateUrl: './calendar-reactive-forms-demo.html' + templateUrl: './calendar-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, CalendarModule] }) export class CalendarReactiveFormsDemo { formGroup: FormGroup | undefined; diff --git a/src/app/showcase/doc/calendar/templatedoc.ts b/src/app/showcase/doc/calendar/templatedoc.ts index 55908e26451..83048fa09b0 100644 --- a/src/app/showcase/doc/calendar/templatedoc.ts +++ b/src/app/showcase/doc/calendar/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-template-demo', @@ -25,16 +25,14 @@ export class TemplateDoc { Footer `, - html: ` -
+ html: `
Header Footer
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; @Component({ selector: 'calendar-template-demo', diff --git a/src/app/showcase/doc/calendar/timedoc.ts b/src/app/showcase/doc/calendar/timedoc.ts index a0dc72949f1..92786b8454d 100644 --- a/src/app/showcase/doc/calendar/timedoc.ts +++ b/src/app/showcase/doc/calendar/timedoc.ts @@ -1,38 +1,97 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-time-demo', template: ` -

TimePicker is enabled with showTime property and 24 (default) or 12 hour mode is configured using hourFormat option.

+

A time picker is displayed when showTime is enabled where 12/24 hour format is configured with hourFormat property. In case, only time needs to be selected, add timeOnly to hide the date section.

 -
- +
+
+ + +
+
+ + +
+
+ + +
` }) export class TimeDoc { - date: Date[] | undefined; + datetime12h: Date[] | undefined; + + datetime24h: Date[] | undefined; + + time: Date[] | undefined; code: Code = { - basic: ``, + basic: ` + + + +`, - html: ` -
- + html: `
+
+ + +
+
+ + +
+
+ + +
`, - typescript: ` -import { Component } from '@angular/core' + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-time-demo', - templateUrl: './calendar-time-demo.html' + templateUrl: './calendar-time-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarTimeDemo { - date: Date[] | undefined; + + datetime12h: Date[] | undefined; + + datetime24h: Date[] | undefined; + + time: Date[] | undefined; }` }; } diff --git a/src/app/showcase/doc/calendar/touchuidoc.ts b/src/app/showcase/doc/calendar/touchuidoc.ts index b93c0bc6954..4e00fca1900 100644 --- a/src/app/showcase/doc/calendar/touchuidoc.ts +++ b/src/app/showcase/doc/calendar/touchuidoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-touchui-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

When touchUI is enabled, overlay is displayed as optimized for touch devices.

- +
` @@ -17,19 +17,27 @@ export class TouchUIDoc { date: Date[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core' + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-touchui-demo', - templateUrl: './calendar-touchui-demo.html' + templateUrl: './calendar-touchui-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarTouchuiDemo { date: Date[] | undefined; diff --git a/src/app/showcase/doc/calendar/yeardoc.ts b/src/app/showcase/doc/calendar/yeardoc.ts index 3baf732ae29..1cfba8bc360 100644 --- a/src/app/showcase/doc/calendar/yeardoc.ts +++ b/src/app/showcase/doc/calendar/yeardoc.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'calendar-year-demo', template: ` -

Similar to the month picker, year picker can be used to select years only. Set view to year to display the year picker.

+

Specifying view as year in addition to a suitable dateFormat enables the year picker.
- +
` @@ -17,19 +17,27 @@ export class YearDoc { date: Date[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core' + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CalendarModule } from 'primeng/calendar'; @Component({ selector: 'calendar-year-demo', - templateUrl: './calendar-year-demo.html' + templateUrl: './calendar-year-demo.html', + standalone: true, + imports: [FormsModule, CalendarModule] }) export class CalendarYearDemo { date: Date[] | undefined; diff --git a/src/app/showcase/doc/card/accessibilitydoc.ts b/src/app/showcase/doc/card/accessibilitydoc.ts index f54face3156..ea369ddf365 100644 --- a/src/app/showcase/doc/card/accessibilitydoc.ts +++ b/src/app/showcase/doc/card/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/card/advanceddoc.ts b/src/app/showcase/doc/card/advanceddoc.ts index 40f7463ed0c..83059019d8f 100644 --- a/src/app/showcase/doc/card/advanceddoc.ts +++ b/src/app/showcase/doc/card/advanceddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'card-advanced-demo', @@ -10,15 +10,17 @@ import { Code } from '../../domain/code';
- Card + Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

- - +
+ + +
@@ -29,41 +31,46 @@ export class AdvancedDoc { code: Code = { basic: ` - Card + Card

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque - quas! + Lorem ipsum dolor sit amet...

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

- - +
+ + +
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { CardModule } from 'primeng/card'; +import { ButtonModule } from 'primeng/button'; + @Component({ selector: 'card-advanced-demo', - templateUrl: './card-advanced-demo.html' + templateUrl: './card-advanced-demo.html', + standalone: true, + imports: [CardModule, ButtonModule] }) export class CardAdvancedDemo {}` }; diff --git a/src/app/showcase/doc/card/basicdoc.ts b/src/app/showcase/doc/card/basicdoc.ts index 26d1d660e46..b5bffcb3cbc 100644 --- a/src/app/showcase/doc/card/basicdoc.ts +++ b/src/app/showcase/doc/card/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'card-basic-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

A simple Card is created with a header property along with the content as children.

- +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! @@ -20,16 +20,14 @@ import { Code } from '../../domain/code'; }) export class BasicDoc { code: Code = { - basic: ` + basic: `

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque - quas! + Lorem ipsum dolor sit amet...

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! @@ -37,12 +35,14 @@ export class BasicDoc {

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { CardModule } from 'primeng/card'; @Component({ selector: 'card-basic-demo', - templateUrl: './card-basic-demo.html' + templateUrl: './card-basic-demo.html', + standalone: true, + imports: [CardModule] }) export class CardBasicDemo {}` }; diff --git a/src/app/showcase/doc/card/carddoc.module.ts b/src/app/showcase/doc/card/carddoc.module.ts index 6811b87056e..50ef878d5f5 100644 --- a/src/app/showcase/doc/card/carddoc.module.ts +++ b/src/app/showcase/doc/card/carddoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { CardModule } from 'primeng/card'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { AdvancedDoc } from './advanceddoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/card/importdoc.ts b/src/app/showcase/doc/card/importdoc.ts index 3cfff06c00d..2b7b24af039 100644 --- a/src/app/showcase/doc/card/importdoc.ts +++ b/src/app/showcase/doc/card/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/carousel/basicdoc.ts b/src/app/showcase/doc/carousel/basicdoc.ts index 54fc2190bae..0529980a689 100644 --- a/src/app/showcase/doc/carousel/basicdoc.ts +++ b/src/app/showcase/doc/carousel/basicdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'carousel-basic-demo', @@ -12,19 +12,21 @@ import { ProductService } from '../../service/productservice';
-
+
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - +
+ +
+
{{ product.name }}
+
+
{{ '$' + product.price }}
+ + + + +
@@ -76,53 +78,93 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ` - -
-
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - -
-
-
- -`, - html: `
- + basic: ` -
+
- +
+ + +
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - +
+ {{ product.name }}
+
+
+ {{ '$' + product.price }} +
+ + + +
+`, + html: `
+ + +
+
+
+ + +
+
+
+ {{ product.name }} +
+
+
+ {{ '$' + product.price }} +
+ + + + +
+
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { CarouselModule } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'carousel-basic-demo', templateUrl: './carousel-basic-demo.html', - styleUrls: ['./carousel-basic-demo.scss'] + standalone: true, + imports: [CarouselModule, ButtonModule, TagModule], + providers: [ProductService] }) export class CarouselBasicDemo implements OnInit { products: Product[] | undefined; @@ -165,23 +207,6 @@ export class CarouselBasicDemo implements OnInit { return 'danger'; } } -}`, - scss: ` -:host ::ng-deep { - .product-item { - .product-item-content { - border: 1px solid var(--surface-d); - border-radius: 3px; - margin: .3rem; - text-align: center; - padding: 2rem 0; - } - - .product-image { - width: 50%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) - } - } }`, data: ` /* ProductService */ diff --git a/src/app/showcase/doc/carousel/carouseldoc.module.ts b/src/app/showcase/doc/carousel/carouseldoc.module.ts index 7c407b25552..a234e5b1169 100644 --- a/src/app/showcase/doc/carousel/carouseldoc.module.ts +++ b/src/app/showcase/doc/carousel/carouseldoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { TagModule } from 'primeng/tag'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/carousel/circulardoc.ts b/src/app/showcase/doc/carousel/circulardoc.ts index b592738acc1..880478e68da 100644 --- a/src/app/showcase/doc/carousel/circulardoc.ts +++ b/src/app/showcase/doc/carousel/circulardoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'carousel-circular-demo', @@ -12,19 +12,21 @@ import { ProductService } from '../../service/productservice';
-
+
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - +
+ +
+
{{ product.name }}
+
+
{{ '$' + product.price }}
+ + + + +
@@ -76,53 +78,95 @@ export class CircularDoc implements OnInit { } code: Code = { - basic: ` - -
-
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - -
-
-
- + basic: ` + +
+
+
+ + +
+
+
+ {{ product.name }} +
+
+
+ {{ '$' + product.price }} +
+ + + + +
+
+ `, html: `
- + -
-
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - -
+
+
+
+ + +
+
+
+ {{ product.name }} +
+
+
+ {{ '$' + product.price }} +
+ + + + +
-
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { CarouselModule } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'carousel-circular-demo', templateUrl: './carousel-circular-demo.html', - styleUrls: ['./carousel-circular-demo.scss'] + standalone: true, + imports: [CarouselModule, ButtonModule, TagModule], + providers: [ProductService] }) export class CarouselCircularDemo implements OnInit{ products: Product[] | undefined; @@ -165,23 +209,6 @@ export class CarouselCircularDemo implements OnInit{ return 'danger'; } } -}`, - scss: ` -:host ::ng-deep { - .product-item { - .product-item-content { - border: 1px solid var(--surface-d); - border-radius: 3px; - margin: .3rem; - text-align: center; - padding: 2rem 0; - } - - .product-image { - width: 50%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) - } - } }`, data: ` /* ProductService */ diff --git a/src/app/showcase/doc/carousel/importdoc.ts b/src/app/showcase/doc/carousel/importdoc.ts index b6411c1c980..e00d274391b 100644 --- a/src/app/showcase/doc/carousel/importdoc.ts +++ b/src/app/showcase/doc/carousel/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/carousel/numscrolldoc.ts b/src/app/showcase/doc/carousel/numscrolldoc.ts index 34c43bfb0f7..e619f1d54b4 100644 --- a/src/app/showcase/doc/carousel/numscrolldoc.ts +++ b/src/app/showcase/doc/carousel/numscrolldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'carousel-num-scroll-demo', @@ -12,19 +12,21 @@ import { ProductService } from '../../service/productservice';
-
+
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - +
+ +
+
{{ product.name }}
+
+
{{ '$' + product.price }}
+ + + + +
@@ -76,53 +78,92 @@ export class NumScrollDoc implements OnInit { } code: Code = { - basic: ` - -
-
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - -
-
-
- -`, - html: `
- + basic: ` -
+
- +
+ + +
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - +
+ {{ product.name }}
+
+
+ {{ '$' + product.price }} +
+ + + +
+`, + html: `
+ + +
+
+
+ + +
+
+
+ {{ product.name }} +
+
+
+ {{ '$' + product.price }} +
+ + + + +
+
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { CarouselModule } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'carousel-num-scroll-demo', templateUrl: './carousel-num-scroll-demo.html', - styleUrls: ['./carousel-num-scroll-demo.scss'] + standalone: true, + imports: [CarouselModule, ButtonModule, TagModule], + providers: [ProductService] + }) export class CarouselNumScrollDemo implements OnInit { products: Product[] | undefined; @@ -165,23 +206,6 @@ export class CarouselNumScrollDemo implements OnInit { return 'danger'; } } -}`, - scss: ` -:host ::ng-deep { - .product-item { - .product-item-content { - border: 1px solid var(--surface-d); - border-radius: 3px; - margin: .3rem; - text-align: center; - padding: 2rem 0; - } - - .product-image { - width: 50%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) - } - } }`, data: ` /* ProductService */ diff --git a/src/app/showcase/doc/carousel/responsivedoc.ts b/src/app/showcase/doc/carousel/responsivedoc.ts index d77d4109108..db933c9a4e1 100644 --- a/src/app/showcase/doc/carousel/responsivedoc.ts +++ b/src/app/showcase/doc/carousel/responsivedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'responsive-doc', @@ -16,21 +16,21 @@ import { ProductService } from '../../service/productservice';
-
-
-
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - -
+
+
+
+ +
+
{{ product.name }}
+
+
{{ '$' + product.price }}
+ + + + +
@@ -82,57 +82,91 @@ export class ResponsiveDoc implements OnInit { } code: Code = { - basic: ` - -
-
+ basic: ` + +
- +
+ + +
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - +
+ {{ product.name }}
+
+
+ {{ '$' + product.price }} +
+ + + +
-
- + `, html: `
- - -
-
+ + +
- +
+ + +
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - +
+ {{ product.name }}
+
+
+ {{ '$' + product.price }} +
+ + + +
-
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { CarouselModule } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'carousel-responsive-demo', templateUrl: './carousel-responsive-demo.html', - styleUrls: ['./carousel-responsive-demo.scss'] + standalone: true, + imports: [CarouselModule, ButtonModule, TagModule], + providers: [ProductService] }) export class CarouselResponsiveDemo { products: Product[] | undefined; @@ -176,23 +210,7 @@ export class CarouselResponsiveDemo { } } }`, - scss: ` -:host ::ng-deep { - .product-item { - .product-item-content { - border: 1px solid var(--surface-d); - border-radius: 3px; - margin: .3rem; - text-align: center; - padding: 2rem 0; - } - - .product-image { - width: 50%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) - } - } -}`, + data: ` /* ProductService */ { diff --git a/src/app/showcase/doc/carousel/templatedoc.ts b/src/app/showcase/doc/carousel/templatedoc.ts index fe1feb964fc..ba25dc07022 100644 --- a/src/app/showcase/doc/carousel/templatedoc.ts +++ b/src/app/showcase/doc/carousel/templatedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'carousel-template-demo', @@ -15,19 +15,21 @@ import { ProductService } from '../../service/productservice';

Header content

 -
+
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - +
+ +
+
{{ product.name }}
+
+
{{ '$' + product.price }}
+ + + + +
@@ -82,65 +84,101 @@ export class TemplateDoc implements OnInit { } code: Code = { - basic: ` - -

Header content

- - -
-
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - + basic: ` + +

Header content

+ + +
+
+
+ + +
+
+
+ {{ product.name }} +
+
+
+ {{ '$' + product.price }} +
+ + + +
-
- - -

Footer content

- + + +

Footer content

+ `, html: `
- - -

Header content

- - -
-
- -
-
-

{{ product.name }}

-
{{ '$' + product.price }}
- -
- - -
-
-
- - -

Footer content

- - + + +

Header content

+ + +
+
+
+ + +
+
+
{{ product.name }}
+
+
+ {{ '$' + product.price }} +
+ + + + +
+
+ + +

Footer content

+ +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { CarouselModule } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'carousel-template-demo', templateUrl: './carousel-template-demo.html', - styleUrls: ['./carousel-template-demo.scss'] + standalone: true, + imports: [CarouselModule, ButtonModule, TagModule], + providers: [ProductService] }) export class CarouselTemplateDemo implements OnInit{ products: Product[] | undefined; @@ -184,23 +222,7 @@ export class CarouselTemplateDemo implements OnInit{ } } }`, - scss: ` -:host ::ng-deep { - .product-item { - .product-item-content { - border: 1px solid var(--surface-d); - border-radius: 3px; - margin: .3rem; - text-align: center; - padding: 2rem 0; - } - - .product-image { - width: 50%; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23) - } - } -}`, + data: ` /* ProductService */ { diff --git a/src/app/showcase/doc/carousel/verticaldoc.ts b/src/app/showcase/doc/carousel/verticaldoc.ts index 17924e98bb2..08650603f61 100644 --- a/src/app/showcase/doc/carousel/verticaldoc.ts +++ b/src/app/showcase/doc/carousel/verticaldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'carousel-vertical-demo', @@ -12,21 +12,21 @@ import { ProductService } from '../../service/productservice';
-
-
-
- -
-
-

{{ product.name }}

-
{{ product.price }}
- -
- - -
+
+
+
+ +
+
{{ product.name }}
+
+
{{ '$' + product.price }}
+ + + + +
@@ -58,57 +58,91 @@ export class VerticalDoc implements OnInit { } code: Code = { - basic: ` - -
-
+ basic: ` + +
- +
+ + +
-
-

{{product.name}}

-
{{product.price}}
- -
- - +
+ {{ product.name }}
+
+
+ {{ '$' + product.price }} +
+ + + +
-
- + `, html: `
- - -
-
+ + +
- +
+ + +
-
-

{{product.name}}

-
{{product.price}}
- -
- - +
{{ product.name }}
+
+
+ {{ '$' + product.price }}
+ + + +
-
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { CarouselModule } from 'primeng/carousel'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'carousel-vertical-demo', templateUrl: './carousel-vertical-demo.html', - styleUrls: ['./carousel-vertical-demo.scss'] + standalone: true, + imports: [CarouselModule, ButtonModule, TagModule], + providers: [ProductService] }) export class CarouselVerticalDemo implements OnInit { products: Product[] | undefined; diff --git a/src/app/showcase/doc/cascadeselect/accessibilitydoc.ts b/src/app/showcase/doc/cascadeselect/accessibilitydoc.ts index f5c71ccf2ca..7863e8ca51e 100644 --- a/src/app/showcase/doc/cascadeselect/accessibilitydoc.ts +++ b/src/app/showcase/doc/cascadeselect/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -123,8 +123,8 @@ export class AccessibilityDoc { code: Code = { basic: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/cascadeselect/basicdoc.ts b/src/app/showcase/doc/cascadeselect/basicdoc.ts index 026ad5d009c..acbffa80be6 100644 --- a/src/app/showcase/doc/cascadeselect/basicdoc.ts +++ b/src/app/showcase/doc/cascadeselect/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'cascade-select-basic-demo', @@ -11,7 +11,7 @@ import { Code } from '../../domain/code';

- +
` @@ -99,19 +99,35 @@ export class BasicDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ selector: 'cascade-select-basic-demo', - templateUrl: './cascade-select-basic-demo.html' + templateUrl: './cascade-select-basic-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelectModule] }) export class CascadeSelectBasicDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts b/src/app/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts index f2e42557169..dc97349843f 100644 --- a/src/app/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts +++ b/src/app/showcase/doc/cascadeselect/cascasdeselectdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { CascadeSelectModule } from 'primeng/cascadeselect'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; @@ -14,9 +14,12 @@ import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { DisabledDoc } from './disableddoc'; +import { FilledDoc } from './filleddoc'; +import { LoadingDoc } from './loadingdoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; @NgModule({ - imports: [CommonModule, RouterModule, CascadeSelectModule, FormsModule, AppCodeModule, AppDocModule, ReactiveFormsModule], + imports: [CommonModule, RouterModule, CascadeSelectModule, FormsModule, AppCodeModule, AppDocModule, ReactiveFormsModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, TemplateDoc, InvalidDoc, FloatLabelDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, TemplateDoc, InvalidDoc, FloatLabelDoc, FilledDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, LoadingDoc] }) export class CascadeSelectDocModule {} diff --git a/src/app/showcase/doc/cascadeselect/disableddoc.ts b/src/app/showcase/doc/cascadeselect/disableddoc.ts index b1a8897c93a..f4947cdce46 100644 --- a/src/app/showcase/doc/cascadeselect/disableddoc.ts +++ b/src/app/showcase/doc/cascadeselect/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'cascade-select-disabled-demo', @@ -8,26 +8,34 @@ import { Code } from '../../domain/code';

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

- +
` }) export class DisabledDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ selector: 'cascade-select-disabled-demo', - templateUrl: './cascade-select-disabled-demo.html' + templateUrl: './cascade-select-disabled-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelectModule] }) export class CascadeSelectDisabledDemo { diff --git a/src/app/showcase/doc/cascadeselect/filleddoc.ts b/src/app/showcase/doc/cascadeselect/filleddoc.ts new file mode 100644 index 00000000000..16c6d48ce63 --- /dev/null +++ b/src/app/showcase/doc/cascadeselect/filleddoc.ts @@ -0,0 +1,214 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'cascade-select-filled-demo', + template: ` + +

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

+ +
+ +
+ + ` +}) +export class FilledDoc { + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; + +@Component({ + selector: 'cascade-select-filled-demo', + templateUrl: './cascade-select-filled-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelectModule] +}) +export class CascadeSelectFilledDemo implements OnInit { + countries: any[] | undefined; + + selectedCity: any; + + ngOnInit() { + this.countries = [ + { + name: 'Australia', + code: 'AU', + states: [ + { + name: 'New South Wales', + cities: [ + { cname: 'Sydney', code: 'A-SY' }, + { cname: 'Newcastle', code: 'A-NE' }, + { cname: 'Wollongong', code: 'A-WO' } + ] + }, + { + name: 'Queensland', + cities: [ + { cname: 'Brisbane', code: 'A-BR' }, + { cname: 'Townsville', code: 'A-TO' } + ] + } + ] + }, + { + name: 'Canada', + code: 'CA', + states: [ + { + name: 'Quebec', + cities: [ + { cname: 'Montreal', code: 'C-MO' }, + { cname: 'Quebec City', code: 'C-QU' } + ] + }, + { + name: 'Ontario', + cities: [ + { cname: 'Ottawa', code: 'C-OT' }, + { cname: 'Toronto', code: 'C-TO' } + ] + } + ] + }, + { + name: 'United States', + code: 'US', + states: [ + { + name: 'California', + cities: [ + { cname: 'Los Angeles', code: 'US-LA' }, + { cname: 'San Diego', code: 'US-SD' }, + { cname: 'San Francisco', code: 'US-SF' } + ] + }, + { + name: 'Florida', + cities: [ + { cname: 'Jacksonville', code: 'US-JA' }, + { cname: 'Miami', code: 'US-MI' }, + { cname: 'Tampa', code: 'US-TA' }, + { cname: 'Orlando', code: 'US-OR' } + ] + }, + { + name: 'Texas', + cities: [ + { cname: 'Austin', code: 'US-AU' }, + { cname: 'Dallas', code: 'US-DA' }, + { cname: 'Houston', code: 'US-HO' } + ] + } + ] + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/cascadeselect/floatlabeldoc.ts b/src/app/showcase/doc/cascadeselect/floatlabeldoc.ts index 2b2b4e47fca..c36dcf262e7 100644 --- a/src/app/showcase/doc/cascadeselect/floatlabeldoc.ts +++ b/src/app/showcase/doc/cascadeselect/floatlabeldoc.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +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.

+

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
- + + /> - +
` @@ -108,22 +108,21 @@ export class FloatLabelDoc { } code: Code = { - basic: ` - - -`, + basic: ` + + +`, html: `
- + + placeholder="Select a City" /> - +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; +import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ selector: 'cascade-select-float-label-demo', - templateUrl: './cascade-select-float-label-demo.html' + templateUrl: './cascade-select-float-label-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelectModule, FloatLabelModule] }) export class CascadeSelectFloatLabelDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/cascadeselect/importdoc.ts b/src/app/showcase/doc/cascadeselect/importdoc.ts index 400e10b80bb..e31eea8bf23 100644 --- a/src/app/showcase/doc/cascadeselect/importdoc.ts +++ b/src/app/showcase/doc/cascadeselect/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/cascadeselect/invaliddoc.ts b/src/app/showcase/doc/cascadeselect/invaliddoc.ts index cd111c386d1..44e2165875c 100644 --- a/src/app/showcase/doc/cascadeselect/invaliddoc.ts +++ b/src/app/showcase/doc/cascadeselect/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'cascade-select-invalid-demo', @@ -17,7 +17,7 @@ import { Code } from '../../domain/code'; [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City" - > + />
` @@ -105,18 +105,37 @@ export class InvalidDoc { } code: Code = { - basic: ``, + basic: ``, html: `
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ selector: 'cascade-select-invalid-demo', - templateUrl: './cascade-select-invalid-demo.html' + templateUrl: './cascade-select-invalid-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelectModule] }) export class CascadeSelectInvalidDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/cascadeselect/loadingdoc.ts b/src/app/showcase/doc/cascadeselect/loadingdoc.ts new file mode 100644 index 00000000000..344d97b98be --- /dev/null +++ b/src/app/showcase/doc/cascadeselect/loadingdoc.ts @@ -0,0 +1,43 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'cascade-select-loading-demo', + template: ` + +

Loading state can be used loading property.

+ +
+ +
+ + ` +}) +export class LoadingDoc { + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; + +@Component({ + selector: 'cascade-select-loading-demo', + templateUrl: './cascade-select-loading-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelectModule] +}) +export class CascadeSelectLoadingDemo {}` + }; +} diff --git a/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts b/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts index 95e6c138c89..07ba4e43874 100644 --- a/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts +++ b/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -18,7 +18,7 @@ import { Code } from '../../domain/code'; [optionGroupChildren]="['states', 'cities']" [style]="{ minWidth: '14rem' }" placeholder="Select a City" - > + />
@@ -114,23 +114,38 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
- + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ selector: 'cascade-select-reactive-forms-demo', - templateUrl: './cascade-select-reactive-forms-demo.html' + templateUrl: './cascade-select-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, CascadeSelectModule] }) export class CascadeSelectReactiveFormsDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/cascadeselect/templatedoc.ts b/src/app/showcase/doc/cascadeselect/templatedoc.ts index 8953624688d..44623814fad 100644 --- a/src/app/showcase/doc/cascadeselect/templatedoc.ts +++ b/src/app/showcase/doc/cascadeselect/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'cascade-select-template-demo', @@ -108,10 +108,20 @@ export class TemplateDoc { } code: Code = { - basic: ` + basic: `
- + {{ option.cname || option.name }} @@ -119,28 +129,40 @@ export class TemplateDoc { `, - html: ` -
- - -
- - - - {{ option.cname || option.name }} -
- + html: `
+ + +
+ + + + {{ option.cname || option.name }} +
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CascadeSelectModule } from 'primeng/cascadeselect'; @Component({ selector: 'cascade-select-template-demo', - templateUrl: './cascade-select-template-demo.html' + templateUrl: './cascade-select-template-demo.html', + standalone: true, + imports: [FormsModule, CascadeSelectModule] }) -export class CascadeselectTemplateDemo implements OnInit { +export class CascadeSelectTemplateDemo implements OnInit { countries: any[] | undefined; selectedCity: any; diff --git a/src/app/showcase/doc/chart/accessibilitydoc.ts b/src/app/showcase/doc/chart/accessibilitydoc.ts index 06950e6e5a2..cbef3ab94d7 100644 --- a/src/app/showcase/doc/chart/accessibilitydoc.ts +++ b/src/app/showcase/doc/chart/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -19,6 +19,6 @@ import { Code } from '../../domain/code'; }) export class AccessibilityDoc { code: Code = { - html: `` + html: `` }; } diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts index 600ce97c7b3..adb10f4ed9b 100644 --- a/src/app/showcase/doc/chart/basicdoc.ts +++ b/src/app/showcase/doc/chart/basicdoc.ts @@ -1,7 +1,7 @@ import { isPlatformBrowser } from '@angular/common'; import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; -import { Code } from '../../domain/code'; -import { AppConfigService } from '../../service/appconfigservice'; +import { Code } from '@domain/code'; +import { AppConfigService } from '@service/appconfigservice'; import { Subscription, debounceTime } from 'rxjs'; @Component({ @@ -14,7 +14,7 @@ import { Subscription, debounceTime } from 'rxjs';

- +
` @@ -93,17 +93,18 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-basic-demo', - templateUrl: './chart-basic-demo.html' + templateUrl: './chart-basic-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartBasicDemo implements OnInit { basicData: any; diff --git a/src/app/showcase/doc/chart/chartdoc.module.ts b/src/app/showcase/doc/chart/chartdoc.module.ts index 7fbad3237df..ab06e81723c 100644 --- a/src/app/showcase/doc/chart/chartdoc.module.ts +++ b/src/app/showcase/doc/chart/chartdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ChartModule } from 'primeng/chart'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ChartjsDoc } from './chartjsdoc'; diff --git a/src/app/showcase/doc/chart/chartjsdoc.ts b/src/app/showcase/doc/chart/chartjsdoc.ts index c9d621faca2..41832e38164 100644 --- a/src/app/showcase/doc/chart/chartjsdoc.ts +++ b/src/app/showcase/doc/chart/chartjsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'chartjs-doc', diff --git a/src/app/showcase/doc/chart/combodoc.ts b/src/app/showcase/doc/chart/combodoc.ts index d1e0249e3e8..971a2e682cc 100644 --- a/src/app/showcase/doc/chart/combodoc.ts +++ b/src/app/showcase/doc/chart/combodoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-combo-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

Different chart types can be combined in the same graph usign the type option of a dataset.

- +
` @@ -102,17 +102,18 @@ export class ComboDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-combo-demo', - templateUrl: './chart-combo-demo.html' + templateUrl: './chart-combo-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartComboDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/doughnutdoc.ts b/src/app/showcase/doc/chart/doughnutdoc.ts index 5d4ff268e57..e71b56c92fa 100644 --- a/src/app/showcase/doc/chart/doughnutdoc.ts +++ b/src/app/showcase/doc/chart/doughnutdoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-doughnut-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

A doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.

- +
` @@ -62,17 +62,18 @@ export class DoughnutDoc implements OnInit { } } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-doughnut-demo', - templateUrl: './chart-doughnut-demo.html' + templateUrl: './chart-doughnut-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartDoughnutDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/horizontalbardoc.ts b/src/app/showcase/doc/chart/horizontalbardoc.ts index 1ecb0006e64..cf7b7ba7539 100644 --- a/src/app/showcase/doc/chart/horizontalbardoc.ts +++ b/src/app/showcase/doc/chart/horizontalbardoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-horizontal-bar-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

A bar chart is rendered horizontally when indexAxis option is set as y.

- +
` @@ -97,17 +97,18 @@ export class HorizontalBarDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-horizontal-bar-demo', - templateUrl: './chart-horizontal-bar-demo.html' + templateUrl: './chart-horizontal-bar-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartHorizontalBarDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/importdoc.ts b/src/app/showcase/doc/chart/importdoc.ts index 99aa87c70b9..d61a00bbde5 100644 --- a/src/app/showcase/doc/chart/importdoc.ts +++ b/src/app/showcase/doc/chart/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/chart/linedoc.ts b/src/app/showcase/doc/chart/linedoc.ts index e1dc2fb978e..bb8b0e9be86 100644 --- a/src/app/showcase/doc/chart/linedoc.ts +++ b/src/app/showcase/doc/chart/linedoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-line-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

A line chart or line graph is a type of chart which displays information as a series of data points called 'markers' connected by straight line segments.

- +
` @@ -95,17 +95,18 @@ export class LineDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-line-demo', - templateUrl: './chart-line-demo.html' + templateUrl: './chart-line-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartLineDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/linestyledoc.ts b/src/app/showcase/doc/chart/linestyledoc.ts index 4c612ad0eed..5cf3311a21b 100644 --- a/src/app/showcase/doc/chart/linestyledoc.ts +++ b/src/app/showcase/doc/chart/linestyledoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-line-style-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

Various styles of a line series can be customized to display customizations like an area chart.

- +
` @@ -102,17 +102,18 @@ export class LineStyleDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-line-style-demo', - templateUrl: './chart-line-style-demo.html' + templateUrl: './chart-line-style-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartLineStyleDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/multiaxisdoc.ts b/src/app/showcase/doc/chart/multiaxisdoc.ts index debb7dc8cfb..2e908be8ecd 100644 --- a/src/app/showcase/doc/chart/multiaxisdoc.ts +++ b/src/app/showcase/doc/chart/multiaxisdoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-multi-axis-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

Multiple axes can be added using the scales option.

- +
` @@ -111,17 +111,18 @@ export class MultiAxisDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-multi-axis-demo', - templateUrl: './chart-multi-axis-demo.html' + templateUrl: './chart-multi-axis-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartMultiAxisDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/piedoc.ts b/src/app/showcase/doc/chart/piedoc.ts index 028ba8737c4..6019b1d77d9 100644 --- a/src/app/showcase/doc/chart/piedoc.ts +++ b/src/app/showcase/doc/chart/piedoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-pie-demo', @@ -11,7 +11,7 @@ import { AppConfigService } from '../../service/appconfigservice';

A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion.

- +
` @@ -64,17 +64,18 @@ export class PieDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-pie-demo', - templateUrl: './chart-pie-demo.html' + templateUrl: './chart-pie-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartPieDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/polarareadoc.ts b/src/app/showcase/doc/chart/polarareadoc.ts index 6cf506310ea..0e549f81f8a 100644 --- a/src/app/showcase/doc/chart/polarareadoc.ts +++ b/src/app/showcase/doc/chart/polarareadoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-polar-area-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

Polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.

- +
` @@ -75,17 +75,18 @@ export class PolarAreaDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-polar-area-demo', - templateUrl: './chart-polar-area-demo.html' + templateUrl: './chart-polar-area-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartPolarAreaDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/radardoc.ts b/src/app/showcase/doc/chart/radardoc.ts index 708804a0612..53a68b54160 100644 --- a/src/app/showcase/doc/chart/radardoc.ts +++ b/src/app/showcase/doc/chart/radardoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-radar-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

A radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

- +
` @@ -86,17 +86,18 @@ export class RadarDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-radar-demo', - templateUrl: './chart-radar-demo.html' + templateUrl: './chart-radar-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartRadarDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/stackedbardoc.ts b/src/app/showcase/doc/chart/stackedbardoc.ts index 17e9f0f395f..09a10a8c452 100644 --- a/src/app/showcase/doc/chart/stackedbardoc.ts +++ b/src/app/showcase/doc/chart/stackedbardoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-stacked-bar-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

Bars can be stacked on top of each other when stacked option of a scale is enabled.

- +
` @@ -105,17 +105,18 @@ export class StackedBarDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-stacked-bar-demo', - templateUrl: './chart-stacked-bar-demo.html' + templateUrl: './chart-stacked-bar-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartStackedBarDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/chart/verticalbardoc.ts b/src/app/showcase/doc/chart/verticalbardoc.ts index d045fcd5770..1c54f3d52de 100644 --- a/src/app/showcase/doc/chart/verticalbardoc.ts +++ b/src/app/showcase/doc/chart/verticalbardoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'chart-vertical-bar-demo', template: ` @@ -10,7 +10,7 @@ import { AppConfigService } from '../../service/appconfigservice';

A bar chart or bar graph is a chart that presents grouped data with rectangular bars with lengths proportional to the values that they represent.

- +
` @@ -96,17 +96,18 @@ export class VerticalBarDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
- + basic: ``, + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ChartModule } from 'primeng/chart'; @Component({ selector: 'chart-vertical-bar-demo', - templateUrl: './chart-vertical-bar-demo.html' + templateUrl: './chart-vertical-bar-demo.html', + standalone: true, + imports: [ChartModule] }) export class ChartVerticalBarDemo implements OnInit { data: any; diff --git a/src/app/showcase/doc/checkbox/accessibilitydoc.ts b/src/app/showcase/doc/checkbox/accessibilitydoc.ts index 505d65424e7..e528ce1a19f 100644 --- a/src/app/showcase/doc/checkbox/accessibilitydoc.ts +++ b/src/app/showcase/doc/checkbox/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -44,11 +44,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Remember Me - + -` +` }; } diff --git a/src/app/showcase/doc/checkbox/basicdoc.ts b/src/app/showcase/doc/checkbox/basicdoc.ts index 239cbc4a651..053adfe0775 100644 --- a/src/app/showcase/doc/checkbox/basicdoc.ts +++ b/src/app/showcase/doc/checkbox/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'checkbox-basic-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Binary checkbox is used as a controlled input with ngModel and binary properties.

- +
` @@ -17,19 +17,27 @@ export class BasicDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CheckboxModule } from 'primeng/checkbox'; @Component({ selector: 'checkbox-basic-demo', - templateUrl: './checkbox-basic-demo.html' + templateUrl: './checkbox-basic-demo.html', + standalone: true, + imports: [FormsModule, CheckboxModule] }) export class CheckboxBasicDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/checkbox/checkboxdoc.module.ts b/src/app/showcase/doc/checkbox/checkboxdoc.module.ts index 3e6d61da5d4..37fd85acf1a 100644 --- a/src/app/showcase/doc/checkbox/checkboxdoc.module.ts +++ b/src/app/showcase/doc/checkbox/checkboxdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { CheckboxModule } from 'primeng/checkbox'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { MultipleDoc } from './multipledoc'; @@ -15,10 +15,11 @@ import { InvalidDoc } from './invaliddoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; +import { FilledDoc } from './filleddoc'; @NgModule({ imports: [CommonModule, RouterModule, FormsModule, AppCodeModule, AppDocModule, CheckboxModule, ReactiveFormsModule], exports: [ImportDoc], - declarations: [ImportDoc, BasicDoc, MultipleDoc, LabelDoc, DynamicDoc, DisabledDoc, InvalidDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, MultipleDoc, LabelDoc, DynamicDoc, DisabledDoc, InvalidDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] }) export class CheckboxDocModule {} diff --git a/src/app/showcase/doc/checkbox/disableddoc.ts b/src/app/showcase/doc/checkbox/disableddoc.ts index 3a2a829cdd5..99028c3aae0 100644 --- a/src/app/showcase/doc/checkbox/disableddoc.ts +++ b/src/app/showcase/doc/checkbox/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'checkbox-disabled-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

- +
` @@ -17,19 +17,25 @@ export class DisabledDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CheckboxModule } from 'primeng/checkbox'; @Component({ selector: 'checkbox-disabled-demo', - templateUrl: './checkbox-disabled-demo.html' + templateUrl: './checkbox-disabled-demo.html', + standalone: true, + imports: [FormsModule, CheckboxModule] }) export class CheckboxDisabledDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/checkbox/dynamicdoc.ts b/src/app/showcase/doc/checkbox/dynamicdoc.ts index 341188d0704..bd47f03509f 100644 --- a/src/app/showcase/doc/checkbox/dynamicdoc.ts +++ b/src/app/showcase/doc/checkbox/dynamicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'checkbox-dynamic-demo', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
- +
@@ -29,24 +29,34 @@ export class DynamicDoc { code: Code = { basic: `
- +
`, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CheckboxModule } from 'primeng/checkbox'; @Component({ selector: 'checkbox-dynamic-demo', - templateUrl: './checkbox-dynamic-demo.html' + templateUrl: './checkbox-dynamic-demo.html', + standalone: true, + imports: [FormsModule, CheckboxModule] }) export class CheckboxDynamicDemo { selectedCategories: any[] = []; diff --git a/src/app/showcase/doc/checkbox/filleddoc.ts b/src/app/showcase/doc/checkbox/filleddoc.ts new file mode 100644 index 00000000000..5aa29f6fb89 --- /dev/null +++ b/src/app/showcase/doc/checkbox/filleddoc.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'checkbox-filled-demo', + template: ` + +

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

+ +
+ +
+ + ` +}) +export class FilledDoc { + checked: boolean = false; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CheckboxModule } from 'primeng/checkbox'; + +@Component({ + selector: 'checkbox-filled-demo', + templateUrl: './checkbox-filled-demo.html', + standalone: true, + imports: [FormsModule, CheckboxModule] +}) +export class CheckboxFilledDemo { + checked: boolean = false; +}` + }; +} diff --git a/src/app/showcase/doc/checkbox/importdoc.ts b/src/app/showcase/doc/checkbox/importdoc.ts index 53aec9ab529..8acb03adbfe 100644 --- a/src/app/showcase/doc/checkbox/importdoc.ts +++ b/src/app/showcase/doc/checkbox/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/checkbox/invaliddoc.ts b/src/app/showcase/doc/checkbox/invaliddoc.ts index 170b5c4be8d..76e7507dabe 100644 --- a/src/app/showcase/doc/checkbox/invaliddoc.ts +++ b/src/app/showcase/doc/checkbox/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'checkbox-invalid-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

- +
` @@ -17,19 +17,29 @@ export class InvalidDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CheckboxModule } from 'primeng/checkbox'; @Component({ selector: 'checkbox-invalid-demo', - templateUrl: './checkbox-invalid-demo.html' + templateUrl: './checkbox-invalid-demo.html', + standalone: true, + imports: [FormsModule, CheckboxModule] }) export class CheckboxInvalidDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/checkbox/labeldoc.ts b/src/app/showcase/doc/checkbox/labeldoc.ts index a9c2dd3ad2a..d1ac2a6312c 100644 --- a/src/app/showcase/doc/checkbox/labeldoc.ts +++ b/src/app/showcase/doc/checkbox/labeldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'checkbox-label-demo', diff --git a/src/app/showcase/doc/checkbox/multipledoc.ts b/src/app/showcase/doc/checkbox/multipledoc.ts index 96935180eb7..78c11692607 100644 --- a/src/app/showcase/doc/checkbox/multipledoc.ts +++ b/src/app/showcase/doc/checkbox/multipledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'checkbox-multiple-demo', @@ -9,16 +9,16 @@ import { Code } from '../../domain/code';
- +
- +
- +
- +
@@ -29,39 +29,74 @@ export class MultipleDoc { code: Code = { basic: `
- -
-
- -
-
- -
-
- + +
+
+ +
+
+ +
+
+
`, html: `
-
- +
+
- +
- +
- -
+ +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { CheckboxModule } from 'primeng/checkbox'; @Component({ selector: 'checkbox-multiple-demo', - templateUrl: './checkbox-multiple-demo.html' + templateUrl: './checkbox-multiple-demo.html', + standalone: true, + imports: [FormsModule, CheckboxModule] }) export class CheckboxMultipleDemo { pizza: string[] = []; diff --git a/src/app/showcase/doc/checkbox/reactiveformsdoc.ts b/src/app/showcase/doc/checkbox/reactiveformsdoc.ts index eb969b445e6..50d0305dae6 100644 --- a/src/app/showcase/doc/checkbox/reactiveformsdoc.ts +++ b/src/app/showcase/doc/checkbox/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
- +
@@ -28,25 +28,32 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
- + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { CheckboxModule } from 'primeng/checkbox'; @Component({ selector: 'checkbox-reactive-forms-demo', - templateUrl: './checkbox-reactive-forms-demo.html' + templateUrl: './checkbox-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, CheckboxModule] }) export class CheckboxReactiveFormsDemo implements OnInit{ formGroup: FormGroup | undefined; diff --git a/src/app/showcase/doc/chip/basicdoc.ts b/src/app/showcase/doc/chip/basicdoc.ts index 2e0cd8f3872..e6a819e7fb9 100644 --- a/src/app/showcase/doc/chip/basicdoc.ts +++ b/src/app/showcase/doc/chip/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'chip-basic-demo', diff --git a/src/app/showcase/doc/chip/chipdoc.module.ts b/src/app/showcase/doc/chip/chipdoc.module.ts index 2cb09c64ea3..f695a2f9451 100644 --- a/src/app/showcase/doc/chip/chipdoc.module.ts +++ b/src/app/showcase/doc/chip/chipdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ChipModule } from 'primeng/chip'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { IconDoc } from './icondoc'; diff --git a/src/app/showcase/doc/chip/icondoc.ts b/src/app/showcase/doc/chip/icondoc.ts index 1c979c318f4..7c9ef7893eb 100644 --- a/src/app/showcase/doc/chip/icondoc.ts +++ b/src/app/showcase/doc/chip/icondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'chip-icon-demo', diff --git a/src/app/showcase/doc/chip/imagedoc.ts b/src/app/showcase/doc/chip/imagedoc.ts index 107e0d1ae4c..4ef9ece33e7 100644 --- a/src/app/showcase/doc/chip/imagedoc.ts +++ b/src/app/showcase/doc/chip/imagedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'chip-image-demo', diff --git a/src/app/showcase/doc/chip/importdoc.ts b/src/app/showcase/doc/chip/importdoc.ts index 5ceaac30ed7..0e70f6e85ae 100644 --- a/src/app/showcase/doc/chip/importdoc.ts +++ b/src/app/showcase/doc/chip/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/chip/templatedoc.ts b/src/app/showcase/doc/chip/templatedoc.ts index 67aefb7084f..bad13070cd9 100644 --- a/src/app/showcase/doc/chip/templatedoc.ts +++ b/src/app/showcase/doc/chip/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'chip-template-demo', diff --git a/src/app/showcase/doc/chips/accessibilitydoc.ts b/src/app/showcase/doc/chips/accessibilitydoc.ts index 1edc01ea840..0b947d82bfb 100644 --- a/src/app/showcase/doc/chips/accessibilitydoc.ts +++ b/src/app/showcase/doc/chips/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -88,11 +88,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Tags - + -` +` }; } diff --git a/src/app/showcase/doc/chips/basicdoc.ts b/src/app/showcase/doc/chips/basicdoc.ts index 1d7455e0696..0b9e00e0baf 100644 --- a/src/app/showcase/doc/chips/basicdoc.ts +++ b/src/app/showcase/doc/chips/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'chips-basic-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Chips is used as a controlled input with ngModel property where it should be an array.

- +
` @@ -17,19 +17,21 @@ export class BasicDoc { values: string[] | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; @Component({ selector: 'chips-basic-demo', - templateUrl: './chips-basic-demo.html' + templateUrl: './chips-basic-demo.html', + standalone: true, + imports: [FormsModule, ChipsModule] }) export class ChipsBasicDemo { values: string[] | undefined; diff --git a/src/app/showcase/doc/chips/chipsdoc.module.ts b/src/app/showcase/doc/chips/chipsdoc.module.ts index 0ec182daac6..e7aaf9a2a2b 100644 --- a/src/app/showcase/doc/chips/chipsdoc.module.ts +++ b/src/app/showcase/doc/chips/chipsdoc.module.ts @@ -2,21 +2,26 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ChipsModule } from 'primeng/chips'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; -import { CommaSeparatorDoc } from './commaseparator.doc'; +import { SeparatorDoc } from './separatordoc'; import { ImportDoc } from './importdoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { RegexpSeparatorDoc } from './regexpseparator.doc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { MaxValuesDoc } from './maxvaluesdoc'; - +import { FilledDoc } from './filleddoc'; +import { FloatLabelDoc } from './floatlabeldoc'; +import { RouterModule } from '@angular/router'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { InvalidDoc } from './invaliddoc'; +import { DisabledDoc } from './disableddoc'; @NgModule({ - imports: [CommonModule, ChipsModule, FormsModule, ReactiveFormsModule, AppCodeModule, AppDocModule], + imports: [CommonModule, ChipsModule, FormsModule, RouterModule, ReactiveFormsModule, AppCodeModule, AppDocModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, CommaSeparatorDoc, RegexpSeparatorDoc, TemplateDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, MaxValuesDoc] + declarations: [ImportDoc, BasicDoc, SeparatorDoc, RegexpSeparatorDoc, TemplateDoc, FloatLabelDoc, FilledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, MaxValuesDoc, InvalidDoc, DisabledDoc] }) export class ChipsDocModule {} diff --git a/src/app/showcase/doc/chips/commaseparator.doc.ts b/src/app/showcase/doc/chips/commaseparator.doc.ts deleted file mode 100644 index 377ec062eeb..00000000000 --- a/src/app/showcase/doc/chips/commaseparator.doc.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'chips-comma-separator-demo', - template: ` -

A new chip is added when enter key is pressed, separator property allows definining an additional key. Currently only valid value is , to create a new item when comma key is pressed.

- -
- -
- ` -}) -export class CommaSeparatorDoc { - values: string[] | undefined; - - code: Code = { - basic: ``, - - html: ` -
- -
`, - - typescript: ` -import { Component } from '@angular/core'; - -@Component({ - selector: 'chips-comma-separator-demo', - templateUrl: './chips-comma-separator-demo.html', -}) -export class ChipsCommaseparatorDemo { - values: string[] | undefined; -}` - }; -} diff --git a/src/app/showcase/doc/chips/disableddoc.ts b/src/app/showcase/doc/chips/disableddoc.ts new file mode 100644 index 00000000000..7e4b64252c4 --- /dev/null +++ b/src/app/showcase/doc/chips/disableddoc.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'chips-disabled-demo', + template: ` + +

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

+ +
+ +
+ + ` +}) +export class DisabledDoc { + values: string[] | undefined; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; + +@Component({ + selector: 'chips-disabled-demo', + templateUrl: './chips-disabled-demo.html', + standalone: true, + imports: [FormsModule, ChipsModule] +}) +export class ChipsDisabledDemo { + values: string[] | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/chips/filleddoc.ts b/src/app/showcase/doc/chips/filleddoc.ts new file mode 100644 index 00000000000..75a6c5d2e3d --- /dev/null +++ b/src/app/showcase/doc/chips/filleddoc.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'chips-filled-demo', + template: ` + +

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

+ +
+ +
+ + ` +}) +export class FilledDoc { + value: string[] | undefined; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; + +@Component({ + selector: 'chips-filled-demo', + templateUrl: './chips-filled-demo.html', + standalone: true, + imports: [FormsModule, ChipsModule] +}) +export class ChipsFilledDemo { + value: string[] | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/chips/floatlabeldoc.ts b/src/app/showcase/doc/chips/floatlabeldoc.ts new file mode 100644 index 00000000000..403de1273fa --- /dev/null +++ b/src/app/showcase/doc/chips/floatlabeldoc.ts @@ -0,0 +1,50 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'chips-float-label-demo', + template: ` + +

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

+ +
+ + + + +
+ + ` +}) +export class FloatLabelDoc { + values: string[] | undefined; + + code: Code = { + basic: ` + + +`, + + html: `
+ + + + +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; +import { FloatLabelModule } from 'primeng/floatlabel'; + +@Component({ + selector: 'chips-float-label-demo', + templateUrl: './chips-float-label-demo.html', + standalone: true, + imports: [FormsModule, ChipsModule, FloatLabelModule] +}) +export class ChipsFloatLabelDemo { + values: string[] | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/chips/importdoc.ts b/src/app/showcase/doc/chips/importdoc.ts index d341cc3dbf8..27ddaea9e08 100644 --- a/src/app/showcase/doc/chips/importdoc.ts +++ b/src/app/showcase/doc/chips/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/chips/invaliddoc.ts b/src/app/showcase/doc/chips/invaliddoc.ts new file mode 100644 index 00000000000..4687ef37013 --- /dev/null +++ b/src/app/showcase/doc/chips/invaliddoc.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'chips-invalid-demo', + template: ` + +

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

+ +
+ +
+ + ` +}) +export class InvalidDoc { + values: string[] | undefined; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; + +@Component({ + selector: 'chips-invalid-demo', + templateUrl: './chips-invalid-demo.html', + standalone: true, + imports: [FormsModule, ChipsModule] +}) +export class ChipsInvalidDemo { + values: string[] | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/chips/maxvaluesdoc.ts b/src/app/showcase/doc/chips/maxvaluesdoc.ts index 8efd7003fdf..ed0db4f78ba 100644 --- a/src/app/showcase/doc/chips/maxvaluesdoc.ts +++ b/src/app/showcase/doc/chips/maxvaluesdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'max-values-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

Chips can have a maximum number of entered items. To set this limit, the max property is used, which accepts a numeric value that represents the maximum number of items in the chip list

- +
` @@ -18,21 +18,27 @@ export class MaxValuesDoc { values = new FormControl(null); code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component } from '@angular/core'; +import { FormControl, ReactiveFormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; @Component({ selector: 'chips-max-values-demo', templateUrl: './chips-max-values-demo.html', - styleUrls: ['./chips-max-values-demo.scss'] + standalone: true, + imports: [ReactiveFormsModule, ChipsModule] }) export class ChipsMaxValuesDemo { values = new FormControl(null); diff --git a/src/app/showcase/doc/chips/reactiveformsdoc.ts b/src/app/showcase/doc/chips/reactiveformsdoc.ts index c46fa9e39d3..c8538d07f6b 100644 --- a/src/app/showcase/doc/chips/reactiveformsdoc.ts +++ b/src/app/showcase/doc/chips/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
- +
@@ -27,24 +27,24 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
- + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; @Component({ selector: 'chips-reactive-forms-demo', templateUrl: './chips-reactive-forms-demo.html', - styleUrls: ['./chips-reactive-forms-demo.scss'] + standalone: true, + imports: [ReactiveFormsModule, ChipsModule] }) export class ChipsReactiveFormsDemo implements OnInit { formGroup: FormGroup | undefined; diff --git a/src/app/showcase/doc/chips/regexpseparator.doc.ts b/src/app/showcase/doc/chips/regexpseparator.doc.ts index 09cf020f7a8..52fbfb93272 100644 --- a/src/app/showcase/doc/chips/regexpseparator.doc.ts +++ b/src/app/showcase/doc/chips/regexpseparator.doc.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'chips-reg-exp-separator-demo', diff --git a/src/app/showcase/doc/chips/separatordoc.ts b/src/app/showcase/doc/chips/separatordoc.ts new file mode 100644 index 00000000000..d57db04cadc --- /dev/null +++ b/src/app/showcase/doc/chips/separatordoc.ts @@ -0,0 +1,38 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'chips-separator-demo', + template: ` +

A new chip is added when enter key is pressed, separator property allows definining an additional key. Currently only valid value is , to create a new item when comma key is pressed.

+ +
+ +
+ ` +}) +export class SeparatorDoc { + values: string[] | undefined; + + code: Code = { + basic: ``, + + html: `
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; + +@Component({ + selector: 'chips-basic-demo', + templateUrl: './chips-basic-demo.html', + standalone: true, + imports: [FormsModule, ChipsModule] +}) +export class ChipsSeparatorDemo { + values: string[] | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/chips/templatedoc.ts b/src/app/showcase/doc/chips/templatedoc.ts index 2e8dcd3b269..20863cb88a7 100644 --- a/src/app/showcase/doc/chips/templatedoc.ts +++ b/src/app/showcase/doc/chips/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'chips-template-demo', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';
- {{ item }} - (active) + {{ item }} - (active)
@@ -20,22 +20,28 @@ export class TemplateDoc { code: Code = { basic: ` - {{ item }} - (active) + + {{ item }} - (active) + `, - html: ` -
+ html: `
- {{ item }} - (active) + + {{ item }} - (active) +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ChipsModule } from 'primeng/chips'; @Component({ selector: 'chips-template-demo', - templateUrl: './chips-template-demo.html' + templateUrl: './chips-template-demo.html', + standalone: true, + imports: [FormsModule, ChipsModule] }) export class ChipsTemplateDemo { values: string[] | undefined; diff --git a/src/app/showcase/doc/colorpicker/basicdoc.ts b/src/app/showcase/doc/colorpicker/basicdoc.ts index e953d81fbc4..9163872055f 100644 --- a/src/app/showcase/doc/colorpicker/basicdoc.ts +++ b/src/app/showcase/doc/colorpicker/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'color-picker-basic-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

ColorPicker is used as a controlled input with ngModel property.

- +
` @@ -17,19 +17,21 @@ export class BasicDoc { color: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ selector: 'color-picker-basic-demo', - templateUrl: './color-picker-basic-demo.html' + templateUrl: './color-picker-basic-demo.html', + standalone: true, + imports: [FormsModule, ColorPickerModule] }) export class ColorPickerBasicDemo { color: string | undefined; diff --git a/src/app/showcase/doc/colorpicker/colorpickerdoc.module.ts b/src/app/showcase/doc/colorpicker/colorpickerdoc.module.ts index ea36400f9ae..b3c2565af14 100644 --- a/src/app/showcase/doc/colorpicker/colorpickerdoc.module.ts +++ b/src/app/showcase/doc/colorpicker/colorpickerdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ColorPickerModule } from 'primeng/colorpicker'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/colorpicker/disableddoc.ts b/src/app/showcase/doc/colorpicker/disableddoc.ts index c4795b157ce..542d81f3cc5 100644 --- a/src/app/showcase/doc/colorpicker/disableddoc.ts +++ b/src/app/showcase/doc/colorpicker/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'color-picker-disabled-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

- +
` @@ -17,19 +17,25 @@ export class DisabledDoc { color: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ - selector: 'color-picker-disabled-demo', - templateUrl: './color-picker-disabled-demo.html' + selector: 'color-picker-format-demo', + templateUrl: './color-picker-format-demo.html', + standalone: true, + imports: [FormsModule, ColorPickerModule] }) export class ColorPickerDisabledDemo { color: string | undefined; diff --git a/src/app/showcase/doc/colorpicker/formatdoc.ts b/src/app/showcase/doc/colorpicker/formatdoc.ts index 8cef02208a0..11004f25c43 100644 --- a/src/app/showcase/doc/colorpicker/formatdoc.ts +++ b/src/app/showcase/doc/colorpicker/formatdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'color-picker-format-demo', @@ -10,17 +10,17 @@ import { Code } from '../../domain/code';
- + {{ color }}
- + {{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}
- + {{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}
@@ -35,35 +35,49 @@ export class FormatDoc { colorHSB: any = { h: 239, s: 59, b: 95 }; code: Code = { - basic: ` - -`, + basic: ` - html: ` -
+ + +`, + + html: `
- + {{ color }}
- + {{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}
- + {{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ selector: 'color-picker-format-demo', - templateUrl: './color-picker-format-demo.html' + templateUrl: './color-picker-format-demo.html', + standalone: true, + imports: [FormsModule, ColorPickerModule] }) export class ColorPickerFormatDemo { color: string = '#6466f1'; diff --git a/src/app/showcase/doc/colorpicker/importdoc.ts b/src/app/showcase/doc/colorpicker/importdoc.ts index 788641ece22..860cbf53dbe 100644 --- a/src/app/showcase/doc/colorpicker/importdoc.ts +++ b/src/app/showcase/doc/colorpicker/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/colorpicker/inlinedoc.ts b/src/app/showcase/doc/colorpicker/inlinedoc.ts index 7898a892ddd..8961bd88c66 100644 --- a/src/app/showcase/doc/colorpicker/inlinedoc.ts +++ b/src/app/showcase/doc/colorpicker/inlinedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'color-picker-inline-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

ColorPicker is displayed as a popup by default, add inline property to customize this behavior.

- +
` @@ -17,19 +17,25 @@ export class InlineDoc { color: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ selector: 'color-picker-inline-demo', - templateUrl: './color-picker-inline-demo.html' + templateUrl: './color-picker-inline-demo.html', + standalone: true, + imports: [FormsModule, ColorPickerModule] }) export class ColorPickerInlineDemo { color: string | undefined; diff --git a/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts b/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts index 517cc5d612a..8f012929a2d 100644 --- a/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts +++ b/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
- +
@@ -27,25 +27,26 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
- + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { ColorPickerModule } from 'primeng/colorpicker'; @Component({ selector: 'color-picker-reactive-forms-demo', - templateUrl: './color-picker-reactive-forms-demo.html' + templateUrl: './color-picker-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, ColorPickerModule] }) -export class ColorPickerReactiveFormsDemo implements OnInit { +export class ColorPickerReactiveFormsDemo { formGroup: FormGroup | undefined; ngOnInit() { diff --git a/src/app/showcase/doc/colors/colorsdoc.module.ts b/src/app/showcase/doc/colors/colorsdoc.module.ts index e7e7955c99a..51fe1d264ae 100644 --- a/src/app/showcase/doc/colors/colorsdoc.module.ts +++ b/src/app/showcase/doc/colors/colorsdoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { OverviewDoc } from './overviewdoc'; import { PaletteDoc } from './palettedoc'; import { SurfacesDoc } from './surfacesdoc'; diff --git a/src/app/showcase/doc/colors/overviewdoc.ts b/src/app/showcase/doc/colors/overviewdoc.ts index 1c3030ef4fe..4a6aee118be 100644 --- a/src/app/showcase/doc/colors/overviewdoc.ts +++ b/src/app/showcase/doc/colors/overviewdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'overview-doc', diff --git a/src/app/showcase/doc/configuration/configurationdoc.module.ts b/src/app/showcase/doc/configuration/configurationdoc.module.ts index 482a59838ef..9af5d0128a8 100644 --- a/src/app/showcase/doc/configuration/configurationdoc.module.ts +++ b/src/app/showcase/doc/configuration/configurationdoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { FilterModeDoc } from './filtermodedoc'; import { ImportDoc } from './importdoc'; import { ApiDoc } from './locale/apidoc'; diff --git a/src/app/showcase/doc/configuration/filtermodedoc.ts b/src/app/showcase/doc/configuration/filtermodedoc.ts index 5b588c47a3a..067bcf08b1e 100644 --- a/src/app/showcase/doc/configuration/filtermodedoc.ts +++ b/src/app/showcase/doc/configuration/filtermodedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'filter-mode-doc', diff --git a/src/app/showcase/doc/configuration/importdoc.ts b/src/app/showcase/doc/configuration/importdoc.ts index c0a4de53c16..912f558c391 100644 --- a/src/app/showcase/doc/configuration/importdoc.ts +++ b/src/app/showcase/doc/configuration/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/configuration/locale/ngx-translatedoc.ts b/src/app/showcase/doc/configuration/locale/ngx-translatedoc.ts index eb5f05a1994..7b9f7b57bfe 100644 --- a/src/app/showcase/doc/configuration/locale/ngx-translatedoc.ts +++ b/src/app/showcase/doc/configuration/locale/ngx-translatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'ngx-translate-doc', diff --git a/src/app/showcase/doc/configuration/locale/setlocaledoc.ts b/src/app/showcase/doc/configuration/locale/setlocaledoc.ts index 2f0fc606446..fd9f0941185 100644 --- a/src/app/showcase/doc/configuration/locale/setlocaledoc.ts +++ b/src/app/showcase/doc/configuration/locale/setlocaledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'set-locale-doc', diff --git a/src/app/showcase/doc/configuration/rippledoc.ts b/src/app/showcase/doc/configuration/rippledoc.ts index cc2735d10c9..1dffac64688 100644 --- a/src/app/showcase/doc/configuration/rippledoc.ts +++ b/src/app/showcase/doc/configuration/rippledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'ripple-doc', diff --git a/src/app/showcase/doc/configuration/zindexdoc.ts b/src/app/showcase/doc/configuration/zindexdoc.ts index 38c76815655..d5591488159 100644 --- a/src/app/showcase/doc/configuration/zindexdoc.ts +++ b/src/app/showcase/doc/configuration/zindexdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'zindex-doc', diff --git a/src/app/showcase/doc/confirmdialog/accessibilitydoc.ts b/src/app/showcase/doc/confirmdialog/accessibilitydoc.ts index d6bb9c09922..7883d13ad9b 100644 --- a/src/app/showcase/doc/confirmdialog/accessibilitydoc.ts +++ b/src/app/showcase/doc/confirmdialog/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/confirmdialog/basicdoc.ts b/src/app/showcase/doc/confirmdialog/basicdoc.ts index 9e365f6233a..d85d8613507 100644 --- a/src/app/showcase/doc/confirmdialog/basicdoc.ts +++ b/src/app/showcase/doc/confirmdialog/basicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'confirm-dialog-basic-demo', @@ -9,10 +9,10 @@ import { Code } from '../../domain/code';

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

- - - - + + + +
`, @@ -60,25 +60,29 @@ export class BasicDoc { } code: Code = { - basic: ` - - -`, + basic: ` + + +`, html: `
- - - - + + + +
`, - typescript: ` -import { Component } from '@angular/core'; -import { ConfirmationService, MessageService, ConfirmEventType } from 'primeng/api'; - + typescript: `import { Component } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { ConfirmDialogModule } from 'primeng/confirmdialog'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; + @Component({ selector: 'confirm-dialog-basic-demo', templateUrl: './confirm-dialog-basic-demo.html', + standalone: true, + imports: [ConfirmDialogModule, ToastModule, ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmDialogBasicDemo { diff --git a/src/app/showcase/doc/confirmdialog/confirmdialogdoc.module.ts b/src/app/showcase/doc/confirmdialog/confirmdialogdoc.module.ts index 97fb1842268..63bbf3e8757 100644 --- a/src/app/showcase/doc/confirmdialog/confirmdialogdoc.module.ts +++ b/src/app/showcase/doc/confirmdialog/confirmdialogdoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { ConfirmDialogModule } from 'primeng/confirmdialog'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; diff --git a/src/app/showcase/doc/confirmdialog/headlessdoc.ts b/src/app/showcase/doc/confirmdialog/headlessdoc.ts index 779bbc818ee..bd6f8857e76 100644 --- a/src/app/showcase/doc/confirmdialog/headlessdoc.ts +++ b/src/app/showcase/doc/confirmdialog/headlessdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'confirm-dialog-headless-demo', @@ -9,11 +9,11 @@ import { Code } from '../../domain/code';

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

- +
-
+
{{ message.header }} @@ -25,7 +25,7 @@ import { Code } from '../../domain/code';
- +
`, @@ -48,51 +48,79 @@ export class HeadlessDoc { } code: Code = { - basic: ` + basic: `
-
+
- {{ message.header }} + + {{ message.header }} +

{{ message.message }}

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

{{ message.message }}

- - + +
- +
`, - typescript: ` -import { Component } from '@angular/core'; -import { ConfirmationService, MessageService, ConfirmEventType } from 'primeng/api'; - + typescript: `import { Component } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { ConfirmDialogModule } from 'primeng/confirmdialog'; +import { ButtonModule } from 'primeng/button'; +import { ToastModule } from 'primeng/toast'; + @Component({ selector: 'confirm-dialog-headless-demo', templateUrl: './confirm-dialog-headless-demo.html', + standalone: true, + imports: [ConfirmDialogModule, ButtonModule, ToastModule], providers: [ConfirmationService, MessageService] }) export class ConfirmDialogHeadlessDemo { diff --git a/src/app/showcase/doc/confirmdialog/importdoc.ts b/src/app/showcase/doc/confirmdialog/importdoc.ts index 20dbd04d3af..8f9e4b8672e 100644 --- a/src/app/showcase/doc/confirmdialog/importdoc.ts +++ b/src/app/showcase/doc/confirmdialog/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/confirmdialog/positiondoc.ts b/src/app/showcase/doc/confirmdialog/positiondoc.ts index c3264a4b95a..7bd5ca725d4 100644 --- a/src/app/showcase/doc/confirmdialog/positiondoc.ts +++ b/src/app/showcase/doc/confirmdialog/positiondoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'confirm-dialog-position-demo', @@ -9,21 +9,21 @@ import { Code } from '../../domain/code';

The position property of the confirm options is used to display a Dialog at all edges and corners of the screen.

- - + +
- - + +
- - - + + +
- - - + + +
@@ -56,49 +56,125 @@ export class PositionDoc { } code: Code = { - basic: ` - -
- - -
-
- - - -
-
- - - -
`, + basic: ` + - html: `
- -
- - + +
- - - + + +
- - - -
+ + +
`, - typescript: ` -import { Component } from '@angular/core'; -import { ConfirmationService, MessageService, ConfirmEventType } from 'primeng/api'; - + html: `
+ + + +
+ + +
+
+ + + +
+
+ + + +
+
`, + + typescript: `import { Component } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { ConfirmDialogModule } from 'primeng/confirmdialog'; +import { ButtonModule } from 'primeng/button'; +import { ToastModule } from 'primeng/toast'; + @Component({ selector: 'confirm-dialog-position-demo', templateUrl: './confirm-dialog-position-demo.html', + standalone: true, + imports: [ConfirmDialogModule, ButtonModule, ToastModule], providers: [ConfirmationService, MessageService] }) export class ConfirmDialogPositionDemo { diff --git a/src/app/showcase/doc/confirmdialog/templatedoc.ts b/src/app/showcase/doc/confirmdialog/templatedoc.ts index 110055cf54d..c23ecc4851d 100644 --- a/src/app/showcase/doc/confirmdialog/templatedoc.ts +++ b/src/app/showcase/doc/confirmdialog/templatedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'confirm-dialog-template-demo', @@ -16,7 +16,7 @@ import { Code } from '../../domain/code';

- +
@@ -25,7 +25,7 @@ import { Code } from '../../domain/code';
- +
`, @@ -52,19 +52,7 @@ export class TemplateDoc { } code: Code = { - basic: ` - - -
- -

{{ message.message }}

-
- - -`, - - html: `
- + basic: `
@@ -73,16 +61,32 @@ export class TemplateDoc {
- +`, + + html: `
+ + + +
+ +

{{ message.message }}

+
+ + +
`, - typescript: ` -import { Component } from '@angular/core'; -import { ConfirmationService, MessageService, ConfirmEventType } from 'primeng/api'; + typescript: `import { Component } from '@angular/core'; +import { ConfirmationService, MessageService } from 'primeng/api'; +import { ConfirmDialogModule } from 'primeng/confirmdialog'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'confirm-dialog-template-demo', templateUrl: './confirm-dialog-template-demo.html', + standalone: true, + imports: [ConfirmDialogModule, ToastModule, ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmDialogTemplateDemo { diff --git a/src/app/showcase/doc/confirmpopup/basicdoc.ts b/src/app/showcase/doc/confirmpopup/basicdoc.ts index 6e719a229dd..86bb64031c3 100644 --- a/src/app/showcase/doc/confirmpopup/basicdoc.ts +++ b/src/app/showcase/doc/confirmpopup/basicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'confirm-popup-basic-demo', @@ -9,10 +9,10 @@ import { Code } from '../../domain/code';

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

- - - - + + + +
`, @@ -51,25 +51,43 @@ export class BasicDoc { } code: Code = { - basic: ` - - -`, + basic: ` + + +`, html: `
- - - - + + + +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; - +import { ButtonModule } from 'primeng/button'; +import { ToastModule } from 'primeng/toast'; +import { ConfirmPopupModule } from 'primeng/confirmpopup'; + @Component({ selector: 'confirm-popup-basic-demo', templateUrl: './confirm-popup-basic-demo.html', + standalone: true, + imports: [ButtonModule, ToastModule, ConfirmPopupModule], providers: [ConfirmationService, MessageService] }) export class ConfirmPopupBasicDemo { diff --git a/src/app/showcase/doc/confirmpopup/confirmpopupdoc.module.ts b/src/app/showcase/doc/confirmpopup/confirmpopupdoc.module.ts index d7ab306c904..ae20f671477 100644 --- a/src/app/showcase/doc/confirmpopup/confirmpopupdoc.module.ts +++ b/src/app/showcase/doc/confirmpopup/confirmpopupdoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { ConfirmPopupModule } from 'primeng/confirmpopup'; import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { PropsDoc } from './propsdoc'; diff --git a/src/app/showcase/doc/confirmpopup/headlessdoc.ts b/src/app/showcase/doc/confirmpopup/headlessdoc.ts index fa571996423..2094bb5aad8 100644 --- a/src/app/showcase/doc/confirmpopup/headlessdoc.ts +++ b/src/app/showcase/doc/confirmpopup/headlessdoc.ts @@ -1,6 +1,6 @@ import { Component, ViewChild } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { ConfirmPopup } from 'primeng/confirmpopup'; @Component({ selector: 'confirm-popup-headless-demo', @@ -9,19 +9,19 @@ import { ConfirmPopup } from 'primeng/confirmpopup';

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

- + -
+
{{ message.message }}
- - + +
- +
`, @@ -43,7 +43,7 @@ export class HeadlessDoc { confirm(event: Event) { this.confirmationService.confirm({ target: event.target as EventTarget, - message: 'Are you sure? You cannot undo this.', + message: 'Save your current process?', accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -54,43 +54,47 @@ export class HeadlessDoc { } code: Code = { - basic: ` + basic: ` -
+
{{ message.message }}
- - + +
-`, +`, html: `
- + -
+
{{ message.message }}
- - + +
-`, + +
`, - typescript: ` -import { Component, ViewChild } from '@angular/core'; + typescript: `import { Component, ViewChild } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { ConfirmPopup } from 'primeng/confirmpopup'; +import { ConfirmPopup, ConfirmPopupModule } from 'primeng/confirmpopup'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'confirm-popup-headless-demo', templateUrl: './confirm-popup-headless-demo.html', + standalone: true, + imports: [ConfirmPopupModule, ToastModule, ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmPopupHeadlessDemo { @@ -109,7 +113,7 @@ export class ConfirmPopupHeadlessDemo { confirm(event: Event) { this.confirmationService.confirm({ target: event.target as EventTarget, - message: 'Are you sure? You cannot undo this.', + message: 'Save your current process?', accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, diff --git a/src/app/showcase/doc/confirmpopup/importdoc.ts b/src/app/showcase/doc/confirmpopup/importdoc.ts index 658aca97962..6c0948131ff 100644 --- a/src/app/showcase/doc/confirmpopup/importdoc.ts +++ b/src/app/showcase/doc/confirmpopup/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/confirmpopup/templatedoc.ts b/src/app/showcase/doc/confirmpopup/templatedoc.ts index a57bddcd96b..94967bbc49f 100644 --- a/src/app/showcase/doc/confirmpopup/templatedoc.ts +++ b/src/app/showcase/doc/confirmpopup/templatedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'confirm-popup-template-demo', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

Content section can be customized using content template.

- +
@@ -18,7 +18,7 @@ import { Code } from '../../domain/code';
- +
`, @@ -34,8 +34,10 @@ export class TemplateDoc { 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', + acceptLabel: 'Confirm', + rejectLabel: 'Cancel', + rejectButtonStyleClass: 'p-button-outlined p-button-sm', + acceptButtonStyleClass: 'p-button-sm', accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, @@ -46,7 +48,7 @@ export class TemplateDoc { } code: Code = { - basic: ` + basic: `
@@ -55,10 +57,10 @@ export class TemplateDoc {
-`, +`, html: `
- +
@@ -67,16 +69,20 @@ export class TemplateDoc {
- +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; - +import { ConfirmPopupModule } from 'primeng/confirmpopup'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; + @Component({ selector: 'confirm-popup-template-demo', templateUrl: './confirm-popup-template-demo.html', + standalone: true, + imports: [ConfirmPopupModule, ToastModule, ButtonModule], providers: [ConfirmationService, MessageService] }) export class ConfirmPopupTemplateDemo { @@ -89,8 +95,10 @@ export class ConfirmPopupTemplateDemo { 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', + acceptLabel: 'Confirm', + rejectLabel: 'Cancel', + rejectButtonStyleClass: 'p-button-outlined p-button-sm', + acceptButtonStyleClass: 'p-button-sm', accept: () => { this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 }); }, diff --git a/src/app/showcase/doc/contextmenu/basicdoc.ts b/src/app/showcase/doc/contextmenu/basicdoc.ts index 337887d8a21..b708c99ab04 100644 --- a/src/app/showcase/doc/contextmenu/basicdoc.ts +++ b/src/app/showcase/doc/contextmenu/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'context-menu-basic-demo', @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';

ContextMenu can be attached to a particular element whose local template variable name is defined using the target property.

- Logo - + Logo +
` @@ -20,36 +20,47 @@ export class BasicDoc implements OnInit { ngOnInit() { this.items = [ - { label: 'View', icon: 'pi pi-fw pi-search' }, - { label: 'Delete', icon: 'pi pi-fw pi-trash' } + { label: 'Copy', icon: 'pi pi-copy' }, + { label: 'Rename', icon: 'pi pi-file-edit' } ]; } code: Code = { - basic: `Logo -`, + basic: `Logo +`, - html: ` -
- Logo - + html: `
+ Logo +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { ContextMenuModule } from 'primeng/contextmenu'; @Component({ selector: 'context-menu-basic-demo', - templateUrl: './context-menu-basic-demo.html' + templateUrl: './context-menu-basic-demo.html', + standalone: true, + imports: [ContextMenuModule] }) export class ContextMenuBasicDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ - { label: 'View', icon: 'pi pi-fw pi-search' }, - { label: 'Delete', icon: 'pi pi-fw pi-trash' } + { label: 'Copy', icon: 'pi pi-copy' }, + { label: 'Rename', icon: 'pi pi-file-edit' } ]; } }` diff --git a/src/app/showcase/doc/contextmenu/commanddoc.ts b/src/app/showcase/doc/contextmenu/commanddoc.ts new file mode 100644 index 00000000000..36987007437 --- /dev/null +++ b/src/app/showcase/doc/contextmenu/commanddoc.ts @@ -0,0 +1,285 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MenuItem, MessageService } from 'primeng/api'; +import { Code } from '@domain/code'; +import { ContextMenu } from 'primeng/contextmenu'; + +interface Users { + id: number; + name: string; + image: string; + role: string; +} + +@Component({ + selector: 'context-menu-command-demo', + template: ` + +

The function to invoke when an item is clicked is defined using the command property.

+ +
+ +
    +
  • +
    + + {{ user.name }} +
    + +
    • +
+ + +
+ + + `, + providers: [MessageService] +}) +export class CommandDoc implements OnInit { + items: MenuItem[] | undefined; + + @ViewChild('cm') cm: ContextMenu; + + selectedUser: Users; + + users: Users[]; + + constructor(private messageService: MessageService) {} + + ngOnInit() { + this.users = [ + { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' }, + { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' }, + { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' }, + { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' }, + { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' } + ]; + + this.items = [ + { + label: 'Roles', + icon: 'pi pi-users', + items: [ + { + label: 'Admin', + command: () => { + this.selectedUser.role = 'Admin'; + } + }, + { + label: 'Member', + command: () => { + this.selectedUser.role = 'Member'; + } + }, + { + label: 'Guest', + command: () => { + this.selectedUser.role = 'Guest'; + } + } + ] + }, + { + label: 'Invite', + icon: 'pi pi-user-plus', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 }); + } + } + ]; + } + + getBadge(user) { + if (user.role === 'Member') return 'info'; + else if (user.role === 'Guest') return 'warning'; + else return null; + } + + onContextMenu(event, user) { + this.selectedUser = user; + this.cm.show(event); + } + + onHide() { + this.selectedUser = null; + } + + code: Code = { + basic: ` +
    +
  • +
    + + + {{ user.name }} + +
    + +
    • +
+`, + + html: `
+ +
    +
  • +
    + + + {{ user.name }} + +
    + +
    • +
+ + +
`, + + typescript: `import { Component, OnInit, ViewChild } from '@angular/core'; +import { ContextMenu } from 'primeng/contextmenu'; +import { MenuItem, MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ContextMenuModule } from 'primeng/contextmenu'; +import { CommonModule } from '@angular/common'; +import { TagModule } from 'primeng/tag'; + +interface Users { + id: number; + name: string; + image: string; + role: string; +} + +@Component({ + selector: 'context-menu-command-demo', + templateUrl: './context-menu-command-demo.html', + standalone: true, + imports: [ContextMenuModule, ToastModule, CommonModule, TagModule], + providers: [MessageService] +}) +export class ContextMenuCommandDemo implements OnInit { + items: MenuItem[] | undefined; + + @ViewChild('cm') cm: ContextMenu; + + selectedUser : Users + + users : Users[]; + + constructor(private messageService: MessageService) {} + + ngOnInit() { + this.users = [ + { id: 0, name: 'Amy Elsner', image: 'amyelsner.png', role: 'Admin' }, + { id: 1, name: 'Anna Fali', image: 'annafali.png', role: 'Member' }, + { id: 2, name: 'Asiya Javayant', image: 'asiyajavayant.png', role: 'Member' }, + { id: 3, name: 'Bernardo Dominic', image: 'bernardodominic.png', role: 'Guest' }, + { id: 4, name: 'Elwin Sharvill', image: 'elwinsharvill.png', role: 'Member' } + ]; + + this.items = [ + { + label: 'Roles', + icon: 'pi pi-users', + items: [ + { + label: 'Admin', + command: () => { + this.selectedUser.role = 'Admin'; + } + }, + { + label: 'Member', + command: () => { + this.selectedUser.role = 'Member'; + } + }, + { + label: 'Guest', + command: () => { + this.selectedUser.role = 'Guest'; + } + } + ] + }, + { + label: 'Invite', + icon: 'pi pi-user-plus', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 }); + } + } + ]; + } + + getBadge(user) { + if (user.role === 'Member') return 'info'; + else if (user.role === 'Guest') return 'warning'; + else return null; + } + + onContextMenu(event, user) { + this.selectedUser = user; + this.cm.show(event); + } + + onHide() { + this.selectedUser = null; + } +}` + }; +} diff --git a/src/app/showcase/doc/contextmenu/contextmenudoc.module.ts b/src/app/showcase/doc/contextmenu/contextmenudoc.module.ts index 96f3204947e..b0de0dd0e00 100644 --- a/src/app/showcase/doc/contextmenu/contextmenudoc.module.ts +++ b/src/app/showcase/doc/contextmenu/contextmenudoc.module.ts @@ -2,17 +2,23 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ContextMenuModule } from 'primeng/contextmenu'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DocumentDoc } from './documentdoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; +import { TemplateDoc } from './templatedoc'; +import { CommandDoc } from './commanddoc'; +import { TagModule } from 'primeng/tag'; +import { ToastModule } from 'primeng/toast'; +import { RouterDoc } from './routerdoc'; +import { TableDoc } from './tabledoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, ContextMenuModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, DocumentDoc, StyleDoc, AccessibilityDoc], + imports: [CommonModule, AppCodeModule, RouterModule, ContextMenuModule, AppDocModule, TagModule, ToastModule], + declarations: [BasicDoc, ImportDoc, DocumentDoc, TemplateDoc, CommandDoc, RouterDoc, TableDoc, StyleDoc, AccessibilityDoc], exports: [AppDocModule] }) export class ContextMenuDocModule {} diff --git a/src/app/showcase/doc/contextmenu/documentdoc.ts b/src/app/showcase/doc/contextmenu/documentdoc.ts index c4b3560de21..6bb46f9c742 100644 --- a/src/app/showcase/doc/contextmenu/documentdoc.ts +++ b/src/app/showcase/doc/contextmenu/documentdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'context-menu-document-demo', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';

Right-Click anywhere on this page to view the global ContextMenu.

- +
` @@ -21,119 +21,20 @@ export class DocumentDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] + label: 'Translate', + icon: 'pi pi-language' }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Speech', + icon: 'pi pi-volume-up', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' - }, - { - label: 'Center', - icon: 'pi pi-fw pi-align-center' + label: 'Start', + icon: 'pi pi-caret-right' }, { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - 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: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Stop', + icon: 'pi pi-pause' } ] }, @@ -141,28 +42,29 @@ export class DocumentDoc implements OnInit { separator: true }, { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' + label: 'Print', + icon: 'pi pi-print' } - ]; + ] } code: Code = { - basic: ``, + basic: ``, - html: ` -
+ html: `

Right-Click anywhere on this page to view the global ContextMenu.

- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { ContextMenuModule } from 'primeng/contextmenu'; @Component({ selector: 'context-menu-document-demo', - templateUrl: './context-menu-document-demo.html' + templateUrl: './context-menu-document-demo.html', + standalone: true, + imports: [ContextMenuModule] }) export class ContextMenuDocumentDemo implements OnInit { items: MenuItem[] | undefined; @@ -170,119 +72,20 @@ export class ContextMenuDocumentDemo implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] - }, - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - 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: '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: 'Translate', + icon: 'pi pi-language' }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + label: 'Speech', + icon: 'pi pi-volume-up', 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: 'Start', + icon: 'pi pi-caret-right' }, { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Stop', + icon: 'pi pi-pause' } ] }, @@ -290,10 +93,10 @@ export class ContextMenuDocumentDemo implements OnInit { separator: true }, { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' + label: 'Print', + icon: 'pi pi-print' } - ]; + ] } }`, diff --git a/src/app/showcase/doc/contextmenu/importdoc.ts b/src/app/showcase/doc/contextmenu/importdoc.ts index 3e30f8cbaf3..b555ea91c2b 100644 --- a/src/app/showcase/doc/contextmenu/importdoc.ts +++ b/src/app/showcase/doc/contextmenu/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/contextmenu/routerdoc.ts b/src/app/showcase/doc/contextmenu/routerdoc.ts new file mode 100644 index 00000000000..5af2e6b24d0 --- /dev/null +++ b/src/app/showcase/doc/contextmenu/routerdoc.ts @@ -0,0 +1,215 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'context-menu-router-demo', + template: ` + +

ContextMenu can be attached to a particular element whose local template variable name is defined using the target property.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + + +
+ + ` +}) +export class RouterDoc implements OnInit { + items: MenuItem[] | undefined; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { + label: 'Router Link', + icon: 'pi pi-palette', + route: '/guides/csslayer' + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + url: 'https://angular.io//' + } + ]; + } + + code: Code = { + basic: ` + + + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + +`, + + html: `
+ + + + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + + +
`, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { ContextMenuModule } from 'primeng/contextmenu'; +import { Router } from '@angular/router'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'context-menu-router-demo', + templateUrl: './context-menu-router-demo.html', + standalone: true, + imports: [ContextMenuModule, CommonModule], +}) +export class ContextMenuRouterDemo implements OnInit { + items: MenuItem[] | undefined; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { + label: 'Router Link', + icon: 'pi pi-palette', + route: '/guides/csslayer' + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + url: 'https://angular.io//' + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/contextmenu/tabledoc.ts b/src/app/showcase/doc/contextmenu/tabledoc.ts new file mode 100644 index 00000000000..c9470ccc93b --- /dev/null +++ b/src/app/showcase/doc/contextmenu/tabledoc.ts @@ -0,0 +1,11 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'context-menu-table-demo', + template: ` + +

Table has built-in support for ContextMenu, see the ContextMenu demo for an example.

+ + ` +}) +export class TableDoc {} diff --git a/src/app/showcase/doc/contextmenu/templatedoc.ts b/src/app/showcase/doc/contextmenu/templatedoc.ts new file mode 100644 index 00000000000..3b1e180892a --- /dev/null +++ b/src/app/showcase/doc/contextmenu/templatedoc.ts @@ -0,0 +1,373 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; +import { ContextMenu } from 'primeng/contextmenu'; + +@Component({ + selector: 'context-menu-template-demo', + template: ` + +

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

+ +
+
    +
  • +
    + product.name +
    + {{ product.name }} +
    + + {{ product.category }} +
    +
    + ${{ product.price }} +
    +
    • +
+ + + + + + {{ item.label }} + + {{ item.shortcut }} + + + + +
+ + + ` +}) +export class TemplateDoc implements OnInit { + items: MenuItem[] | undefined; + + @ViewChild('cm') cm: ContextMenu; + + selectedId!: string; + + data = [ + { + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 + }, + { + id: '1001', + code: 'nvklal433', + name: 'Black Watch', + description: 'Product Description', + image: 'black-watch.jpg', + price: 72, + category: 'Accessories', + quantity: 61, + inventoryStatus: 'INSTOCK', + rating: 4 + }, + { + id: '1002', + code: 'zz21cz3c1', + name: 'Blue Band', + description: 'Product Description', + image: 'blue-band.jpg', + price: 79, + category: 'Fitness', + quantity: 2, + inventoryStatus: 'LOWSTOCK', + rating: 3 + }, + { + id: '1003', + code: '244wgerg2', + name: 'Blue T-Shirt', + description: 'Product Description', + image: 'blue-t-shirt.jpg', + price: 29, + category: 'Clothing', + quantity: 25, + inventoryStatus: 'INSTOCK', + rating: 5 + }, + { + id: '1004', + code: 'h456wer53', + name: 'Bracelet', + description: 'Product Description', + image: 'bracelet.jpg', + price: 15, + category: 'Accessories', + quantity: 73, + inventoryStatus: 'INSTOCK', + rating: 4 + } + ]; + + ngOnInit() { + this.items = [ + { + label: 'Favorite', + icon: 'pi pi-star', + shortcut: '⌘+D' + }, + { + label: 'Add', + icon: 'pi pi-shopping-cart', + shortcut: '⌘+A' + }, + { + separator: true + }, + { + label: 'Share', + icon: 'pi pi-share-alt', + items: [ + { + label: 'Whatsapp', + icon: 'pi pi-whatsapp', + badge: '2' + }, + { + label: 'Instagram', + icon: 'pi pi-instagram', + badge: '3' + } + ] + } + ]; + } + + onContextMenu(event) { + this.cm.target = event.currentTarget; + this.cm.show(event); + } + + onHide() { + this.selectedId = undefined; + } + + code: Code = { + basic: `
    +
  • +
    + product.name +
    + + {{ product.name }} + +
    + + + {{ product.category }} + +
    +
    + + ${{ product.price }} + +
    +
    • +
+ + + + + + {{ item.label }} + + + {{ item.shortcut }} + + + + +`, + + html: `
+
    +
  • +
    + product.name +
    + + {{ product.name }} + +
    + + + {{ product.category }} + +
    +
    + + ${{ product.price }} + +
    +
    • +
+ + + + + + {{ item.label }} + + + {{ item.shortcut }} + + + + + +
`, + + typescript: `import { Component, OnInit, ViewChild } from '@angular/core'; +import { ContextMenu } from 'primeng/contextmenu'; +import { MenuItem } from 'primeng/api'; +import { ContextMenuModule } from 'primeng/contextmenu'; +import { CommonModule } from '@angular/common'; +import { RippleModule } from 'primeng/ripple'; + + +@Component({ + selector: 'context-menu-template-demo', + templateUrl: './context-menu-template-demo.html', + standalone: true, + imports: [ContextMenuModule, CommonModule, RippleModule] +}) +export class ContextMenuTemplateDemo implements OnInit { + items: MenuItem[] | undefined; + + @ViewChild('cm') cm: ContextMenu; + + selectedId!: string; + + data = [ + { + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 + }, + { + id: '1001', + code: 'nvklal433', + name: 'Black Watch', + description: 'Product Description', + image: 'black-watch.jpg', + price: 72, + category: 'Accessories', + quantity: 61, + inventoryStatus: 'INSTOCK', + rating: 4 + }, + { + id: '1002', + code: 'zz21cz3c1', + name: 'Blue Band', + description: 'Product Description', + image: 'blue-band.jpg', + price: 79, + category: 'Fitness', + quantity: 2, + inventoryStatus: 'LOWSTOCK', + rating: 3 + }, + { + id: '1003', + code: '244wgerg2', + name: 'Blue T-Shirt', + description: 'Product Description', + image: 'blue-t-shirt.jpg', + price: 29, + category: 'Clothing', + quantity: 25, + inventoryStatus: 'INSTOCK', + rating: 5 + }, + { + id: '1004', + code: 'h456wer53', + name: 'Bracelet', + description: 'Product Description', + image: 'bracelet.jpg', + price: 15, + category: 'Accessories', + quantity: 73, + inventoryStatus: 'INSTOCK', + rating: 4 + } + ]; + + ngOnInit() { + this.items = [ + { + label: 'Favorite', + icon: 'pi pi-star', + shortcut: '⌘+D' + }, + { + label: 'Add', + icon: 'pi pi-shopping-cart', + shortcut: '⌘+A' + }, + { + separator: true + }, + { + label: 'Share', + icon: 'pi pi-share-alt', + items: [ + { + label: 'Whatsapp', + icon: 'pi pi-whatsapp', + badge: '2' + }, + { + label: 'Instagram', + icon: 'pi pi-instagram', + badge: '3' + } + ] + } + ]; + } + + onContextMenu(event) { + this.cm.target = event.currentTarget; + this.cm.show(event); + } + + onHide() { + this.selectedId = undefined; + } +}` + }; +} diff --git a/src/app/showcase/doc/customicons/customicons.module.ts b/src/app/showcase/doc/customicons/customicons.module.ts index a30a5460b20..80972fd49c4 100644 --- a/src/app/showcase/doc/customicons/customicons.module.ts +++ b/src/app/showcase/doc/customicons/customicons.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { FontAwesomeDoc } from './fontawesomedoc'; import { ImageDoc } from './imagedoc'; import { MaterialDoc } from './materialdoc'; diff --git a/src/app/showcase/doc/customicons/fontawesomedoc.ts b/src/app/showcase/doc/customicons/fontawesomedoc.ts index 8230b59c5ef..ccc7278b3f6 100644 --- a/src/app/showcase/doc/customicons/fontawesomedoc.ts +++ b/src/app/showcase/doc/customicons/fontawesomedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'fontawesome-doc', diff --git a/src/app/showcase/doc/customicons/imagedoc.ts b/src/app/showcase/doc/customicons/imagedoc.ts index 25b2a41e8ce..9bbd3d3a086 100644 --- a/src/app/showcase/doc/customicons/imagedoc.ts +++ b/src/app/showcase/doc/customicons/imagedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'image-doc', diff --git a/src/app/showcase/doc/customicons/materialdoc.ts b/src/app/showcase/doc/customicons/materialdoc.ts index a84d2e240a8..3cf4b16d418 100644 --- a/src/app/showcase/doc/customicons/materialdoc.ts +++ b/src/app/showcase/doc/customicons/materialdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'material-doc', diff --git a/src/app/showcase/doc/customicons/svgdoc.ts b/src/app/showcase/doc/customicons/svgdoc.ts index 01c9f579316..32c4248d37a 100644 --- a/src/app/showcase/doc/customicons/svgdoc.ts +++ b/src/app/showcase/doc/customicons/svgdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'svg-doc', diff --git a/src/app/showcase/doc/dataview/basicdoc.ts b/src/app/showcase/doc/dataview/basicdoc.ts index 1b7f375535e..4b580d8980c 100644 --- a/src/app/showcase/doc/dataview/basicdoc.ts +++ b/src/app/showcase/doc/dataview/basicdoc.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'data-view-basic-demo', @@ -13,24 +13,31 @@ import { ProductService } from '../../service/productservice';
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -68,28 +75,34 @@ export class BasicDoc { } code: Code = { - basic: ` - + basic: `
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -98,29 +111,35 @@ export class BasicDoc { `, - html: ` -
+ html: `
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -130,14 +149,20 @@ export class BasicDoc {
`, - typescript: ` -import { Component } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { DataViewModule } from 'primeng/dataview'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'data-view-basic-demo', - templateUrl: './data-view-basic-demo.html' + templateUrl: './data-view-basic-demo.html', + standalone: true, + imports: [DataViewModule, ButtonModule, TagModule, CommonModule], + providers: [ProductService] }) export class DataViewBasicDemo { products!: Product[]; diff --git a/src/app/showcase/doc/dataview/dataviewdoc.module.ts b/src/app/showcase/doc/dataview/dataviewdoc.module.ts index 8dc0680aed5..066976cb313 100644 --- a/src/app/showcase/doc/dataview/dataviewdoc.module.ts +++ b/src/app/showcase/doc/dataview/dataviewdoc.module.ts @@ -7,8 +7,8 @@ import { DataViewModule } from 'primeng/dataview'; import { DropdownModule } from 'primeng/dropdown'; import { RatingModule } from 'primeng/rating'; import { TagModule } from 'primeng/tag'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; @@ -16,10 +16,12 @@ import { LayoutDoc } from './layoutdoc'; import { PaginationDoc } from './paginationdoc'; import { SortingDoc } from './sortingdoc'; import { StyleDoc } from './styledoc'; +import { LoadingDoc } from './loadingdoc'; +import { SkeletonModule } from 'primeng/skeleton'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, DataViewModule, DropdownModule, ButtonModule, RouterModule, RatingModule, TagModule, FormsModule], + imports: [CommonModule, AppCodeModule, AppDocModule, DataViewModule, DropdownModule, ButtonModule, RouterModule, RatingModule, TagModule, FormsModule, SkeletonModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, PaginationDoc, SortingDoc, LayoutDoc, StyleDoc, AccessibilityDoc] + declarations: [ImportDoc, BasicDoc, PaginationDoc, SortingDoc, LayoutDoc, LoadingDoc, StyleDoc, AccessibilityDoc] }) export class DataViewDocModule {} diff --git a/src/app/showcase/doc/dataview/importdoc.ts b/src/app/showcase/doc/dataview/importdoc.ts index e15229fb7b0..78705ff730a 100644 --- a/src/app/showcase/doc/dataview/importdoc.ts +++ b/src/app/showcase/doc/dataview/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/dataview/layoutdoc.ts b/src/app/showcase/doc/dataview/layoutdoc.ts index c22eb59498f..63f6d07d8fa 100644 --- a/src/app/showcase/doc/dataview/layoutdoc.ts +++ b/src/app/showcase/doc/dataview/layoutdoc.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'data-view-layout-demo', @@ -16,29 +16,36 @@ import { ProductService } from '../../service/productservice';
- +
- +
-
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + product.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -47,23 +54,34 @@ import { ProductService } from '../../service/productservice';
-
-
-
- - - {{ product.category }} - - -
-
- -
{{ product.name }}
- +
+
+
+
+ + +
-
- {{ '$' + product.price }} - +
+
+
+ {{ product.category }} +
{{ product.name }}
+
+
+
+ {{ product.rating }} + +
+
+
+
+ {{ '$' + product.price }} +
+ + +
+
@@ -105,29 +123,36 @@ export class LayoutDoc { basic: `
- +
- +
-
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + product.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -136,23 +161,34 @@ export class LayoutDoc {
-
-
-
- - - {{ product.category }} - - -
-
- -
{{ product.name }}
- +
+
+
+
+ + +
-
- {{ '$' + product.price }} - +
+
+
+ {{ product.category }} +
{{ product.name }}
+
+
+
+ {{ product.rating }} + +
+
+
+
+ {{ '$' + product.price }} +
+ + +
+
@@ -160,75 +196,105 @@ export class LayoutDoc { `, - html: ` -
+ html: `
- -
- -
- - -
-
-
- -
-
-
{{ product.name }}
- -
- - - {{ product.category }} - - -
+ +
+ +
+ + +
+
+
+
+ +
-
- {{ '$' + product.price }} - +
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
+
+
+
+ {{ '$' + item.price }} +
+ + +
+
-
- - -
-
-
-
- - - {{ product.category }} - - -
-
- -
{{ product.name }}
- -
-
- {{ '$' + product.price }} - + + +
+
+
+
+
+ + +
+
+
+
+
+ {{ product.category }} +
{{ product.name }}
+
+
+
+ {{ product.rating }} + +
+
+
+
+ {{ '$' + product.price }} +
+ + +
+
+
-
- +
`, - typescript: ` -import { Component } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { DataViewModule } from 'primeng/dataview'; +import { TagModule } from 'primeng/tag'; +import { RatingModule } from 'primeng/rating'; +import { ButtonModule } from 'primeng/button'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'data-view-layout-demo', - templateUrl: './data-view-layout-demo.html' + templateUrl: './data-view-layout-demo.html', + standalone: true, + imports: [ + DataViewModule, + TagModule, + RatingModule, + ButtonModule, + CommonModule, + ], + providers: [ProductService], }) export class DataViewLayoutDemo { layout: string = 'list'; diff --git a/src/app/showcase/doc/dataview/loadingdoc.ts b/src/app/showcase/doc/dataview/loadingdoc.ts new file mode 100644 index 00000000000..2462a530941 --- /dev/null +++ b/src/app/showcase/doc/dataview/loadingdoc.ts @@ -0,0 +1,290 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; + +@Component({ + selector: 'data-view-loading-demo', + template: ` + +

While data is being loaded. Skeleton component may be used to indicate the busy state.

+ +
+ + +
+ +
+ + +
+
+
+ +
+
+ + +
+ + +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ + +
+
+ + + +
+
+ + +
+
+
+
+ + +
+ + ` +}) +export class LoadingDoc { + layout: string = 'list'; + + products!: Product[]; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProducts().then((data) => (this.products = data.slice(0, 12))); + } + + getSeverity(product: Product) { + switch (product.inventoryStatus) { + case 'INSTOCK': + return 'success'; + + case 'LOWSTOCK': + return 'warning'; + + case 'OUTOFSTOCK': + return 'danger'; + + default: + return null; + } + } + + counterArray(n: number): any[] { + return Array(n); + } + + code: Code = { + basic: ` + +
+ +
+ + +
+
+
+ +
+
+ + +
+ + +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ + +
+
+ + + +
+
+ + +
+
+
+
+ +`, + + html: `
+ + +
+ +
+ + +
+
+
+ +
+
+ + +
+ + +
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+ + +
+
+ + + +
+
+ + +
+
+
+
+ + +
`, + + typescript: `import { Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { DataViewModule } from 'primeng/dataview'; +import { CommonModule } from '@angular/common'; +import { SkeletonModule } from 'primeng/skeleton'; + +@Component({ + selector: 'data-view-loading-demo', + templateUrl: './data-view-loading-demo.html', + standalone: true, + imports: [DataViewModule, CommonModule, SkeletonModule,], + providers: [ProductService] +}) +export class DataViewLoadingDemo { + layout: string = 'list'; + + products!: Product[]; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProducts().then((data) => (this.products = data.slice(0, 12))); + } + + getSeverity(product: Product) { + switch (product.inventoryStatus) { + case 'INSTOCK': + return 'success'; + + case 'LOWSTOCK': + return 'warning'; + + case 'OUTOFSTOCK': + return 'danger'; + + default: + return null; + } + } + + counterArray(n: number): any[] { + return Array(n); + } + +}`, + + data: ` +/* ProductService */ +{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +...`, + + service: ['ProductService'] + }; + + extFiles = [ + { + path: 'src/domain/product.ts', + content: ` +export interface Product { + id?: string; + code?: string; + name?: string; + description?: string; + price?: number; + quantity?: number; + inventoryStatus?: string; + category?: string; + image?: string; + rating?: number; +}` + } + ]; +} diff --git a/src/app/showcase/doc/dataview/paginationdoc.ts b/src/app/showcase/doc/dataview/paginationdoc.ts index 8faaf6aba1c..fb7fe6dbe8c 100644 --- a/src/app/showcase/doc/dataview/paginationdoc.ts +++ b/src/app/showcase/doc/dataview/paginationdoc.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'data-view-pagination-demo', @@ -11,26 +11,33 @@ import { ProductService } from '../../service/productservice';
- +
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -68,28 +75,34 @@ export class PaginationDoc { } code: Code = { - basic: ` - - + basic: ` +
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -98,29 +111,35 @@ export class PaginationDoc { `, - html: ` -
+ html: `
- +
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -130,14 +149,20 @@ export class PaginationDoc {
`, - typescript: ` -import { Component } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { DataViewModule } from 'primeng/dataview'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'data-view-pagination-demo', - templateUrl: './data-view-pagination-demo.html' + templateUrl: './data-view-pagination-demo.html', + standalone: true, + imports: [DataViewModule, ButtonModule, TagModule, CommonModule], + providers: [ProductService] }) export class DataViewPaginationDemo { products!: Product[]; diff --git a/src/app/showcase/doc/dataview/sortingdoc.ts b/src/app/showcase/doc/dataview/sortingdoc.ts index 19063d2e477..14c15aa80c2 100644 --- a/src/app/showcase/doc/dataview/sortingdoc.ts +++ b/src/app/showcase/doc/dataview/sortingdoc.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; import { SelectItem } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'data-view-sorting-demo', @@ -14,29 +14,36 @@ import { ProductService } from '../../service/productservice';
- +
- +
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -100,29 +107,36 @@ export class SortingDoc { basic: `
- +
- +
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
@@ -131,52 +145,65 @@ export class SortingDoc { `, - html: ` -
+ html: `
- +
- +
-
-
- -
-
-
{{ item.name }}
- -
- - - {{ item.category }} - - +
+
+
+ + +
+
+
+
+ {{ item.category }} +
{{ item.name }}
+
+
+
+ {{ item.rating }} + +
-
- {{ '$' + item.price }} - +
+ {{ '$' + item.price }} +
+ + +
- +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { SelectItem } from 'primeng/api'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { DataViewModule } from 'primeng/dataview'; +import { ButtonModule } from 'primeng/button'; +import { TagModule } from 'primeng/tag'; +import { CommonModule } from '@angular/common'; +import { DropdownModule } from 'primeng/dropdown'; @Component({ selector: 'data-view-sorting-demo', - templateUrl: './data-view-sorting-demo.html' + templateUrl: './data-view-sorting-demo.html', + standalone: true, + imports: [DataViewModule, ButtonModule, TagModule, CommonModule, DropdownModule], + providers: [ProductService] }) export class DataViewSortingDemo { sortOptions!: SelectItem[]; diff --git a/src/app/showcase/doc/defer/basicdoc.ts b/src/app/showcase/doc/defer/basicdoc.ts index 57e9989a95d..8eb3739d880 100644 --- a/src/app/showcase/doc/defer/basicdoc.ts +++ b/src/app/showcase/doc/defer/basicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/defer/datatabledoc.ts b/src/app/showcase/doc/defer/datatabledoc.ts index 41c91cafb0f..2a21314b50b 100644 --- a/src/app/showcase/doc/defer/datatabledoc.ts +++ b/src/app/showcase/doc/defer/datatabledoc.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Car } from '../../domain/car'; -import { Code } from '../../domain/code'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { Code } from '@domain/code'; +import { CarService } from '@service/carservice'; @Component({ selector: 'datatable-doc', @@ -107,8 +107,8 @@ export class DataTableDoc { typescript: ` import { Component, Input } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Car } from '../../domain/car'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { CarService } from '@service/carservice'; @Component({ selector: 'defer-data-table-demo', diff --git a/src/app/showcase/doc/defer/deferdoc.module.ts b/src/app/showcase/doc/defer/deferdoc.module.ts index 09dce706957..a86d9c9b70d 100644 --- a/src/app/showcase/doc/defer/deferdoc.module.ts +++ b/src/app/showcase/doc/defer/deferdoc.module.ts @@ -5,8 +5,8 @@ import { RouterModule } from '@angular/router'; import { DeferModule } from 'primeng/defer'; import { TableModule } from 'primeng/table'; import { ToastModule } from 'primeng/toast'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { DataTableDoc } from './datatabledoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/defer/importdoc.ts b/src/app/showcase/doc/defer/importdoc.ts index 62aa1a72e2a..3b452bd9811 100644 --- a/src/app/showcase/doc/defer/importdoc.ts +++ b/src/app/showcase/doc/defer/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/dialog/accessibilitydoc.ts b/src/app/showcase/doc/dialog/accessibilitydoc.ts index cd441901af3..576c8c15397 100644 --- a/src/app/showcase/doc/dialog/accessibilitydoc.ts +++ b/src/app/showcase/doc/dialog/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -70,14 +70,19 @@ import { Code } from '../../domain/code'; }) export class AccessibilityDoc { code: Code = { - html: ` - -

Content

+ aria-expanded="{{visible ? true : false}}" /> + + +

Content

` }; } diff --git a/src/app/showcase/doc/dialog/basicdoc.ts b/src/app/showcase/doc/dialog/basicdoc.ts index 6b8378281bc..f8e68a96113 100644 --- a/src/app/showcase/doc/dialog/basicdoc.ts +++ b/src/app/showcase/doc/dialog/basicdoc.ts @@ -1,19 +1,28 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dialog-basic-demo', template: ` -

Dialog is used as a container and visibility is controlled with visible property. Dialogs are draggable and resizable by default.

+

Dialog is used as a container and visibility is controlled with visible property.

- - -

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

+ + + Update your information. +
+ + +
+
+ + +
+
+ + +
@@ -27,31 +36,52 @@ export class BasicDoc { } 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. -

+ basic: ` + + Update your information. +
+ + +
+
+ + +
+
+ + +
`, - 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: `
+ + + Update your information. +
+ + +
+
+ + +
+
+ + +
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { DialogModule } from 'primeng/dialog'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'dialog-basic-demo', - templateUrl: './dialog-basic-demo.html' + templateUrl: './dialog-basic-demo.html', + standalone: true, + imports: [DialogModule, ButtonModule, InputTextModule] }) export class DialogBasicDemo { visible: boolean = false; diff --git a/src/app/showcase/doc/dialog/dialogdoc.module.ts b/src/app/showcase/doc/dialog/dialogdoc.module.ts index 6f4bc14df03..9b2c919e29a 100644 --- a/src/app/showcase/doc/dialog/dialogdoc.module.ts +++ b/src/app/showcase/doc/dialog/dialogdoc.module.ts @@ -8,8 +8,8 @@ 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 { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; @@ -22,9 +22,10 @@ import { OverlaysInsideDoc } from './overlaysinsidedoc'; import { ModalDoc } from './modaldoc'; import { HeadlessDoc } from './headlessdoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { WithoutModalDoc } from './withoutmodaldoc'; @NgModule({ 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], + declarations: [BasicDoc, ImportDoc, StyleDoc, LongContentDoc, ResponsiveDoc, PositionDoc, MaximizableDoc, TemplateDoc, OverlaysInsideDoc, ModalDoc, AccessibilityDoc, HeadlessDoc, WithoutModalDoc], exports: [AppDocModule] }) export class DialogDocModule {} diff --git a/src/app/showcase/doc/dialog/headlessdoc.ts b/src/app/showcase/doc/dialog/headlessdoc.ts index 56a87bbc0fe..1811a95ece9 100644 --- a/src/app/showcase/doc/dialog/headlessdoc.ts +++ b/src/app/showcase/doc/dialog/headlessdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dialog-headless-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

- +
@@ -50,8 +50,8 @@ import { Code } from '../../domain/code';
- - + +
@@ -72,7 +72,7 @@ export class HeadlessDoc { } code: Code = { - basic: ` + basic: `
@@ -114,15 +114,15 @@ export class HeadlessDoc {
- - + +
`, html: `
- +
@@ -164,20 +164,24 @@ export class HeadlessDoc {
- - + +
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { DialogModule } from 'primeng/dialog'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; + @Component({ selector: 'dialog-headless-demo', - templateUrl: './dialog-headless-demo.html' + templateUrl: './dialog-headless-demo.html', + standalone: true, + imports: [DialogModule, ButtonModule, InputTextModule] }) export class DialogHeadlessDemo { visible: boolean = false; diff --git a/src/app/showcase/doc/dialog/importdoc.ts b/src/app/showcase/doc/dialog/importdoc.ts index 48c19b9de0d..f7cc5c0dd0e 100644 --- a/src/app/showcase/doc/dialog/importdoc.ts +++ b/src/app/showcase/doc/dialog/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/dialog/longcontentdoc.ts b/src/app/showcase/doc/dialog/longcontentdoc.ts index e6b68883c60..d2826526828 100644 --- a/src/app/showcase/doc/dialog/longcontentdoc.ts +++ b/src/app/showcase/doc/dialog/longcontentdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dialog-long-content-demo', @@ -8,20 +8,34 @@ import { Code } from '../../domain/code';

Dialog automatically displays a scroller when content exceeeds viewport.

- - -

+ + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- -

+

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea + commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime + placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non + recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

-

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime @@ -41,59 +55,85 @@ export class LongContentDoc { } 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. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, - adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea - commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? -

- -

- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime - placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non - recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. -

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

+ Lorem ipsum dolor sit amet...

- -

- "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim - ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, - adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea - commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +

+

+ At vero eos et accusamus et iusto odio dignissimos... +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit... +

+

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...

-

- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui - officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime - placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non - recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. + At vero eos et accusamus et iusto odio dignissimos...

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

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea + commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime + placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non + recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo + consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim + ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, + adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea + commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? +

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui + officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime + placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non + recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. +

+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { DialogModule } from 'primeng/dialog'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'dialog-long-content-demo', - templateUrl: './dialog-long-content-demo.html' + templateUrl: './dialog-long-content-demo.html', + standalone: true, + imports: [DialogModule, ButtonModule] }) export class DialogLongContentDemo { visible: boolean = false; diff --git a/src/app/showcase/doc/dialog/maximizabledoc.ts b/src/app/showcase/doc/dialog/maximizabledoc.ts index 7a50582622e..0eebbdd8d77 100644 --- a/src/app/showcase/doc/dialog/maximizabledoc.ts +++ b/src/app/showcase/doc/dialog/maximizabledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dialog-maximizable-demo', @@ -8,8 +8,8 @@ import { Code } from '../../domain/code';

Setting maximizable property to true enables the full screen mode.

- - + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. @@ -27,31 +27,44 @@ export class MaximizableDoc { } 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. -

-`, - - html: ` -
- - + 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. + Lorem ipsum dolor sit amet, consectetur adipiscing elit...

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

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { DialogModule } from 'primeng/dialog'; @Component({ selector: 'dialog-maximizable-demo', - templateUrl: './dialog-maximizable-demo.html' + templateUrl: './dialog-maximizable-demo.html', + standalone: true, + imports: [DialogModule, ButtonModule] }) export class DialogMaximizableDemo { visible: boolean = false; diff --git a/src/app/showcase/doc/dialog/modaldoc.ts b/src/app/showcase/doc/dialog/modaldoc.ts index 515ad1d3fb8..d581eabc23e 100644 --- a/src/app/showcase/doc/dialog/modaldoc.ts +++ b/src/app/showcase/doc/dialog/modaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dialog-modal-demo', diff --git a/src/app/showcase/doc/dialog/overlaysinsidedoc.ts b/src/app/showcase/doc/dialog/overlaysinsidedoc.ts index 9e7f0440572..9759a23585b 100644 --- a/src/app/showcase/doc/dialog/overlaysinsidedoc.ts +++ b/src/app/showcase/doc/dialog/overlaysinsidedoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; diff --git a/src/app/showcase/doc/dialog/positiondoc.ts b/src/app/showcase/doc/dialog/positiondoc.ts index e9fe6d24409..3564dba290f 100644 --- a/src/app/showcase/doc/dialog/positiondoc.ts +++ b/src/app/showcase/doc/dialog/positiondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dialog-position-demo', @@ -9,24 +9,33 @@ 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. -

+ + Update your information. +
+ + +
+
+ + +
+
+ + +
@@ -44,56 +53,163 @@ export class PositionDoc { 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. -

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

+ + + Update your information. + +
+ + +
+
+ + +
+
+ + +
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { DialogModule } from 'primeng/dialog'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; + @Component({ selector: 'dialog-position-demo', - templateUrl: './dialog-position-demo.html' + templateUrl: './dialog-position-demo.html', + standalone: true, + imports: [DialogModule, ButtonModule, InputTextModule] }) export class DialogPositionDemo { visible: boolean = false; diff --git a/src/app/showcase/doc/dialog/responsivedoc.ts b/src/app/showcase/doc/dialog/responsivedoc.ts index bc2f7078c85..03f3ada34d2 100644 --- a/src/app/showcase/doc/dialog/responsivedoc.ts +++ b/src/app/showcase/doc/dialog/responsivedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dialog-responsive-demo', @@ -11,8 +11,8 @@ 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. @@ -30,31 +30,46 @@ export class ResponsiveDoc { } 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. -

-`, - - html: ` -
- - + 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. + Lorem ipsum dolor sit amet...

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

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { DialogModule } from 'primeng/dialog'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'dialog-responsive-demo', - templateUrl: './dialog-responsive-demo.html' + templateUrl: './dialog-responsive-demo.html', + standalone: true, + imports: [DialogModule, ButtonModule] }) export class DialogResponsiveDemo { visible: boolean = false; diff --git a/src/app/showcase/doc/dialog/templatedoc.ts b/src/app/showcase/doc/dialog/templatedoc.ts index 27832c24301..ceb7fab32f1 100644 --- a/src/app/showcase/doc/dialog/templatedoc.ts +++ b/src/app/showcase/doc/dialog/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dialog-template-demo', @@ -8,20 +8,26 @@ import { Code } from '../../domain/code';

Dialog can be customized using header and footer templates.

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

+ Update your information. +
+ + +
+
+ + +
- + +
@@ -36,48 +42,103 @@ export class TemplateDoc { } code: Code = { - basic: ` - + basic: ` +
- - Amy Elsner + + + 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. -

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

- - - - + + + +
+ + + Amy Elsner + +
+ + Update your information. +
+ + +
+
+ + +
+ + + + +
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { DialogModule } from 'primeng/dialog'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; +import { AvatarModule } from 'primeng/avatar'; + @Component({ selector: 'dialog-template-demo', - templateUrl: './dialog-template-demo.html' + templateUrl: './dialog-template-demo.html', + standalone: true, + imports: [DialogModule, ButtonModule, InputTextModule, AvatarModule] }) export class DialogTemplateDemo { visible: boolean = false; diff --git a/src/app/showcase/doc/dialog/withoutmodaldoc.ts b/src/app/showcase/doc/dialog/withoutmodaldoc.ts new file mode 100644 index 00000000000..3170616ac16 --- /dev/null +++ b/src/app/showcase/doc/dialog/withoutmodaldoc.ts @@ -0,0 +1,94 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'dialog-without-modal-demo', + template: ` + +

Mask layer behind the Dialog is configured with the modal property. By default, no modal layer is added.

+ +
+ + + Update your information. +
+ + +
+
+ + +
+
+ + +
+ +
+ + ` +}) +export class WithoutModalDoc { + visible: boolean = false; + + showDialog() { + this.visible = true; + } + + code: Code = { + basic: ` + + Update your information. +
+ + +
+
+ + +
+
+ + +
+`, + + html: `
+ + + Update your information. +
+ + +
+
+ + +
+
+ + +
+ +
`, + + typescript: `import { Component } from '@angular/core'; +import { DialogModule } from 'primeng/dialog'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; + +@Component({ + selector: 'dialog-without-modal-demo', + templateUrl: './dialog-without-modal-demo.html', + standalone: true, + imports: [DialogModule, ButtonModule, InputTextModule] +}) +export class DialogWithoutModalDemo { + visible: boolean = false; + + showDialog() { + this.visible = true; + } +}` + }; +} diff --git a/src/app/showcase/doc/divider/basicdoc.ts b/src/app/showcase/doc/divider/basicdoc.ts index 1a9b79a9191..325f5e1b910 100644 --- a/src/app/showcase/doc/divider/basicdoc.ts +++ b/src/app/showcase/doc/divider/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'divider-basic-demo', @@ -13,21 +13,21 @@ import { Code } from '../../domain/code'; Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- +

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

- +

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

- +

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis @@ -40,55 +40,52 @@ import { Code } from '../../domain/code'; export class BasicDoc { 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. + Lorem ipsum dolor sit amet...

- +

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

- +

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

- +

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

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

- +

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.

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { DividerModule } from 'primeng/divider'; @Component({ selector: 'divider-basic-demo', - templateUrl: './divider-basic-demo.html' + templateUrl: './divider-basic-demo.html', + standalone: true, + imports: [DividerModule] }) -export class BasicDoc {}` +export class DividerBasicDemo {}` }; } diff --git a/src/app/showcase/doc/divider/contentdoc.ts b/src/app/showcase/doc/divider/contentdoc.ts index 3b93cd8f225..2037ca8295b 100644 --- a/src/app/showcase/doc/divider/contentdoc.ts +++ b/src/app/showcase/doc/divider/contentdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'divider-content-demo', @@ -49,8 +49,7 @@ import { Code } from '../../domain/code'; export class ContentDoc { 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. + Lorem ipsum dolor sit amet...

@@ -58,8 +57,7 @@ export class ContentDoc {

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

@@ -67,8 +65,7 @@ export class ContentDoc {

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

@@ -76,8 +73,7 @@ export class ContentDoc {

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

`, html: `
@@ -114,12 +110,14 @@ export class ContentDoc {

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { DividerModule } from 'primeng/divider'; @Component({ selector: 'divider-content-demo', - templateUrl: './divider-content-demo.html' + templateUrl: './divider-content-demo.html', + standalone: true, + imports: [DividerModule] }) export class DividerContentDemo {}` }; diff --git a/src/app/showcase/doc/divider/dividerdoc.module.ts b/src/app/showcase/doc/divider/dividerdoc.module.ts index c043fddd0e8..3119be4033c 100644 --- a/src/app/showcase/doc/divider/dividerdoc.module.ts +++ b/src/app/showcase/doc/divider/dividerdoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { DividerModule } from 'primeng/divider'; import { InputTextModule } from 'primeng/inputtext'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ContentDoc } from './contentdoc'; diff --git a/src/app/showcase/doc/divider/importdoc.ts b/src/app/showcase/doc/divider/importdoc.ts index 208985e2743..31d557f9f67 100644 --- a/src/app/showcase/doc/divider/importdoc.ts +++ b/src/app/showcase/doc/divider/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/divider/logindoc.ts b/src/app/showcase/doc/divider/logindoc.ts index bfbded9c324..ad73b349082 100644 --- a/src/app/showcase/doc/divider/logindoc.ts +++ b/src/app/showcase/doc/divider/logindoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'divider-login-demo', @@ -18,14 +18,14 @@ import { Code } from '../../domain/code';
- +
OR OR
- +
@@ -44,19 +44,22 @@ export class LoginDoc {
- +
- OR - OR + + OR + + + OR +
- +
`, - html: ` -
+ html: `
@@ -67,24 +70,32 @@ export class LoginDoc {
- +
- OR - OR + + OR + + + OR +
- +
`, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { DividerModule } from 'primeng/divider'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; + @Component({ selector: 'divider-login-demo', - templateUrl: './divider-login-demo.html' + templateUrl: './divider-login-demo.html', + standalone: true, + imports: [DividerModule, ButtonModule, InputTextModule] }) export class DividerLoginDemo {}` }; diff --git a/src/app/showcase/doc/divider/typedoc.ts b/src/app/showcase/doc/divider/typedoc.ts index e7c82876d62..a5db76592cd 100644 --- a/src/app/showcase/doc/divider/typedoc.ts +++ b/src/app/showcase/doc/divider/typedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'divider-type-demo', @@ -13,21 +13,21 @@ import { Code } from '../../domain/code'; Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- +

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.

- +

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

- +

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis @@ -40,54 +40,51 @@ import { Code } from '../../domain/code'; export class TypeDoc { 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. + Lorem ipsum dolor sit amet...

- +

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

- +

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

- +

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

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

- +

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.

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { DividerModule } from 'primeng/divider'; @Component({ selector: 'divider-type-demo', - templateUrl: './divider-type-demo.html' + templateUrl: './divider-type-demo.html', + standalone: true, + imports: [DividerModule] }) export class DividerTypeDemo {}` }; diff --git a/src/app/showcase/doc/divider/verticaldoc.ts b/src/app/showcase/doc/divider/verticaldoc.ts index 53d3d11c471..b7661806499 100644 --- a/src/app/showcase/doc/divider/verticaldoc.ts +++ b/src/app/showcase/doc/divider/verticaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'divider-vertical-demo', @@ -13,14 +13,14 @@ import { Code } from '../../domain/code'; 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 @@ -33,44 +33,42 @@ import { Code } from '../../domain/code'; export class VerticalDoc { 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. + Lorem ipsum dolor sit amet...

- +

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

- +

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

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

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { DividerModule } from 'primeng/divider'; @Component({ selector: 'divider-vertical-demo', - templateUrl: './divider-vertical-demo.html' + templateUrl: './divider-vertical-demo.html', + standalone: true, + imports: [DividerModule] }) export class DividerVerticalDemo {}` }; diff --git a/src/app/showcase/doc/dock/advanceddoc.ts b/src/app/showcase/doc/dock/advanceddoc.ts index 697bdb40b79..8e3620229bd 100644 --- a/src/app/showcase/doc/dock/advanceddoc.ts +++ b/src/app/showcase/doc/dock/advanceddoc.ts @@ -2,9 +2,9 @@ import { Component, OnDestroy, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; import { TerminalService } from 'primeng/terminal'; import { Subscription } from 'rxjs'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; -import { PhotoService } from '../../service/photoservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'dock-advanced-demo', @@ -36,14 +36,14 @@ import { PhotoService } from '../../service/photoservice'; - + - + - + - + - - + + - - + + + [fullScreen]="true">
`, - html: ` -
+ html: `
@@ -437,14 +448,27 @@ export class AdvancedDoc implements OnInit, OnDestroy { - + - - + + - - + +
`, - typescript: ` -import { Component, OnDestroy, OnInit } from '@angular/core'; + typescript: `import { Component, OnDestroy, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; +import { TerminalModule } from 'primeng/terminal'; import { TerminalService } from 'primeng/terminal'; import { Subscription } from 'rxjs'; -import { NodeService } from '../../service/nodeservice'; -import { PhotoService } from '../../service/photoservice'; +import { NodeService } from '@service/nodeservice'; +import { PhotoService } from '@service/photoservice'; +import { DockModule } from 'primeng/dock'; +import { MenubarModule } from 'primeng/menubar'; +import { ToastModule } from 'primeng/toast'; +import { DialogModule } from 'primeng/dialog'; +import { TreeModule } from 'primeng/tree'; +import { GalleriaModule } from 'primeng/galleria'; + @Component({ selector: 'dock-advanced-demo', templateUrl: './dock-advanced-demo.html', - styleUrls: ['./dock-advanced-demo.scss'], - providers: [MessageService, TerminalService] + imports: [DockModule, MenubarModule, ToastModule, DialogModule, TreeModule, TerminalModule, GalleriaModule], + standalone: true, + styles: [ + \` :host ::ng-deep { + .dock-window { + width: 100%; + height: 450px; + position: relative; + background-image: url('https://primefaces.org/cdn/primeng/images/dock/window.jpg'); + background-repeat: no-repeat; + background-size: cover; + } + + .p-dock { + z-index: 1000; + } + + .dock-advanced { + .p-dialog-mask, + .p-toast { + position: absolute; + } + + .p-dialog { + .p-dialog-header { + padding: .2rem; + } + + .p-dialog-content { + padding: 0; + } + + p { + margin-top: 0; + } + + .p-terminal { + background-color: #212121; + color: #ffffff; + border: 0 none; + min-height: 18rem; + height: 100%; + + .p-terminal-command { + color: #80CBC4; + } + + .p-terminal-prompt { + color: #FFD54F; + } + + .p-terminal-response { + color: #9FA8DA; + } + } + + .p-tree { + height: 100%; + border-radius: 0; + border-left-width: 0; + border-right-width: 0; + border-bottom-width: 0; + } + } + + .p-toast { + top: 20px; + } + } + + .p-menubar { + padding-top: 0; + padding-bottom: 0; + border-radius: 0; + + .p-menuitem:first-child { + font-weight: bold; + padding: 0 1rem; + } + + .p-menuitem-link { + padding: 0.5rem .75rem; + } + + .p-menubar-root-list > .p-menuitem > .p-menuitem-link { + padding: 0.5rem .75rem; + + > .p-submenu-icon { + display: none; + } + } + + .p-menubar-end { + span, i { + padding: 0 .75rem; + } + } + } + } + + .dark-tooltip { + .p-tooltip { + .p-tooltip-arrow { + border-top-color: var(--surface-900); + } + + .p-tooltip-text { + background-color: var(--surface-900); + } + } + }\` + ], + providers: [MessageService, TerminalService, PhotoService, NodeService] }) export class DockAdvancedDemo implements OnInit { displayTerminal: boolean | undefined; diff --git a/src/app/showcase/doc/dock/basicdoc.ts b/src/app/showcase/doc/dock/basicdoc.ts index 85ed67a31e5..fb71348cea8 100644 --- a/src/app/showcase/doc/dock/basicdoc.ts +++ b/src/app/showcase/doc/dock/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dock-basic-demo', @@ -13,7 +13,7 @@ import { Code } from '../../domain/code';
- +
@@ -29,7 +29,7 @@ import { Code } from '../../domain/code'; export class BasicDoc implements OnInit { items: MenuItem[] | undefined; - position: string = 'top'; + position: string = 'bottom'; positionOptions = [ { @@ -78,10 +78,15 @@ export class BasicDoc implements OnInit { `, - html: ` -
+ html: `
- +
@@ -92,18 +97,37 @@ export class BasicDoc implements OnInit {
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { DockModule } from 'primeng/dock'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'dock-basic-demo', - templateUrl: './dock-basic-demo.html' + templateUrl: './dock-basic-demo.html', + styles: [ + \` .dock-window { + width: 100%; + height: 450px; + position: relative; + background-image: url('https://primefaces.org/cdn/primeng/images/dock/window.jpg'); + background-repeat: no-repeat; + background-size: cover; + } + + .p-dock { + z-index: 1000; + }\` + ], + standalone: true, + imports: [DockModule, RadioButtonModule, CommonModule, FormsModule] }) -export class BasicDoc implements OnInit { +export class DockBasicDemo implements OnInit { items: MenuItem[] | undefined; - position: string = 'top'; + position: string = 'bottom'; positionOptions = [ { diff --git a/src/app/showcase/doc/dock/dockdoc.module.ts b/src/app/showcase/doc/dock/dockdoc.module.ts index cba9068807c..9daae48d088 100644 --- a/src/app/showcase/doc/dock/dockdoc.module.ts +++ b/src/app/showcase/doc/dock/dockdoc.module.ts @@ -10,8 +10,8 @@ import { RadioButtonModule } from 'primeng/radiobutton'; import { TerminalModule } from 'primeng/terminal'; import { ToastModule } from 'primeng/toast'; import { TreeModule } from 'primeng/tree'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { AdvancedDoc } from './advanceddoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/dock/importdoc.ts b/src/app/showcase/doc/dock/importdoc.ts index f31ce4e573f..e742d10c3f8 100644 --- a/src/app/showcase/doc/dock/importdoc.ts +++ b/src/app/showcase/doc/dock/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/dragdrop/basicdoc.ts b/src/app/showcase/doc/dragdrop/basicdoc.ts index ef60c578f90..345e7595a35 100644 --- a/src/app/showcase/doc/dragdrop/basicdoc.ts +++ b/src/app/showcase/doc/dragdrop/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; @Component({ selector: 'drag-drop-basic-demo', @@ -77,25 +77,36 @@ export class BasicDoc implements OnInit { code: Code = { basic: `
    -
  • - {{product.name}} +
  • + {{product.name}}
-

Drop Zone

+

+ Drop Zone +

  • {{product.name}}
`, - html: ` -
+ html: `
    -
  • - {{product.name}} +
  • + {{product.name}}
@@ -108,15 +119,23 @@ export class BasicDoc implements OnInit {
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; - + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { DragDropModule } from 'primeng/dragdrop'; +import { CommonModule } from '@angular/common'; + @Component({ selector: 'drag-drop-basic-demo', templateUrl: './drag-drop-basic-demo.html', - styleUrls: ['./drag-drop-basic-demo.scss'] + styles: [ + \`:host ::ng-deep { + [pDraggable] { + cursor: move; + } + }\` + ], + standalone: true, + imports: [DragDropModule, CommonModule] }) export class DragDropBasicDemo implements OnInit { availableProducts: Product[] | undefined; diff --git a/src/app/showcase/doc/dragdrop/datatabledoc.ts b/src/app/showcase/doc/dragdrop/datatabledoc.ts index c07cf49c604..edf7691baa7 100644 --- a/src/app/showcase/doc/dragdrop/datatabledoc.ts +++ b/src/app/showcase/doc/dragdrop/datatabledoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'drag-drop-data-table-demo', @@ -23,7 +23,7 @@ import { ProductService } from '../../service/productservice';
{{ product.price }}
- +
@@ -109,19 +109,34 @@ export class DataTableDoc implements OnInit { basic: `
-
-
- -
-
-
{{product.name}}
- - {{product.category}} +
+
+ +
+
+
+ {{product.name}} +
+ + + {{product.category}} + +
+
+
+ {{product.price}} +
+
-
-
{{product.price}}
- -
@@ -129,40 +144,70 @@ export class DataTableDoc implements OnInit { - ID - Category - Name - Price + + ID + + + Category + + + Name + + + Price + - {{product.id}} - {{product.category}} - {{product.name}} - {{product.price}} - + + {{product.id}} + + + {{product.category}} + + + {{product.name}} + + + {{product.price}} + +
`, - html: ` -
+ html: `
-
-
- -
-
-
{{product.name}}
- - {{product.category}} +
+
+ +
+
+
+ {{product.name}} +
+ + + {{product.category}} + +
+
+
+ {{product.price}} +
+
-
-
{{product.price}}
- -
@@ -170,32 +215,123 @@ export class DataTableDoc implements OnInit { - ID - Category - Name - Price + + ID + + + Category + + + Name + + + Price + - {{product.id}} - {{product.category}} - {{product.name}} - {{product.price}} - + + {{product.id}} + + + {{product.category}} + + + {{product.name}} + + + {{product.price}} + +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { DragDropModule } from 'primeng/dragdrop'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'drag-drop-data-table-demo', templateUrl: './drag-drop-data-table-demo.html', - styleUrls: ['./drag-drop-data-table-demo.scss'] + styles: [ + \`:host ::ng-deep { + .drag-column { + padding-right: .5em; + } + + .drop-column { + border: 1px solid transparent; + transition: border-color .2s; + + &.p-draggable-enter { + border-color: var(--primary-color); + } + } + + .product-item { + display: flex; + align-items: center; + padding: 1rem; + width: 100%; + border-bottom: 1px solid var(--surface-d); + + img { + width: 75px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + margin-right: 1rem; + } + + .product-list-detail { + flex: 1 1 0; + } + + .product-list-action { + display: flex; + flex-direction: column; + align-items: flex-end; + } + + .product-category-icon { + vertical-align: middle; + margin-right: .5rem; + } + + .product-category { + vertical-align: middle; + line-height: 1; + } + } + + [pDraggable] { + cursor: move; + } + + @media screen and (max-width: 576px) { + .product-item { + flex-wrap: wrap; + + .image-container { + width: 100%; + text-align: center; + } + + img { + margin: 0 0 1rem 0; + width: 100px; + } + } + } + }\` + ], + standalone: true, + imports: [DragDropModule, TableModule, TagModule, CommonModule], + providers: [ProductService] }) export class DragDropDataTableDemo implements OnInit { availableProducts: Product[] | undefined; @@ -250,75 +386,7 @@ export class DragDropDataTableDemo implements OnInit { } } }`, - scss: ` -:host ::ng-deep { - .drag-column { - padding-right: .5em; - } - - .drop-column { - border: 1px solid transparent; - transition: border-color .2s; - - &.p-draggable-enter { - border-color: var(--primary-color); - } - } - - .product-item { - display: flex; - align-items: center; - padding: 1rem; - width: 100%; - border-bottom: 1px solid var(--surface-d); - - img { - width: 75px; - box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); - margin-right: 1rem; - } - - .product-list-detail { - flex: 1 1 0; - } - - .product-list-action { - display: flex; - flex-direction: column; - align-items: flex-end; - } - - .product-category-icon { - vertical-align: middle; - margin-right: .5rem; - } - - .product-category { - vertical-align: middle; - line-height: 1; - } - } - - [pDraggable] { - cursor: move; - } - - @media screen and (max-width: 576px) { - .product-item { - flex-wrap: wrap; - - .image-container { - width: 100%; - text-align: center; - } - - img { - margin: 0 0 1rem 0; - width: 100px; - } - } - } -}`, + data: ` ... { diff --git a/src/app/showcase/doc/dragdrop/dragdropdoc.module.ts b/src/app/showcase/doc/dragdrop/dragdropdoc.module.ts index 4c87912056f..8658d543426 100644 --- a/src/app/showcase/doc/dragdrop/dragdropdoc.module.ts +++ b/src/app/showcase/doc/dragdrop/dragdropdoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { DataTableDoc } from './datatabledoc'; import { DragDropModule } from 'primeng/dragdrop'; diff --git a/src/app/showcase/doc/dragdrop/draghandledoc.ts b/src/app/showcase/doc/dragdrop/draghandledoc.ts index 3e21c606314..dee061ebf3f 100644 --- a/src/app/showcase/doc/dragdrop/draghandledoc.ts +++ b/src/app/showcase/doc/dragdrop/draghandledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'drag-drop-drag-handle-demo', @@ -22,29 +22,32 @@ export class DragHandleDoc { Content
`, - html: ` -
+ html: `
Content
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { DragDropModule } from 'primeng/dragdrop'; +import { PanelModule } from 'primeng/panel'; @Component({ selector: 'drag-drop-drag-handle-demo', templateUrl: './drag-drop-drag-handle-demo.html', - styleUrls: ['./drag-drop-drag-handle-demo.scss'] + styles: [ + \`:host ::ng-deep { + [pDraggable] { + cursor: move; + } + }\` + ], + standalone: true, + imports: [DragDropModule, PanelModule] }) export class DragDropDragHandleDemo {}`, - scss: ` -:host ::ng-deep { - [pDraggable] { - cursor: move; - } -}`, + service: ['ProductService'] }; diff --git a/src/app/showcase/doc/dragdrop/dropindicatordoc.ts b/src/app/showcase/doc/dragdrop/dropindicatordoc.ts index d3b509682c1..9952cdb69f8 100644 --- a/src/app/showcase/doc/dragdrop/dropindicatordoc.ts +++ b/src/app/showcase/doc/dragdrop/dropindicatordoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; @Component({ selector: 'drag-drop-drop-indicator-demo', @@ -73,8 +73,13 @@ export class DropIndicatorDoc { code: Code = { basic: `
    -
  • - {{product.name}} +
  • + {{product.name}}
@@ -86,12 +91,16 @@ export class DropIndicatorDoc {
`, - html: ` -
+ html: `
    -
  • - {{product.name}} +
  • + {{product.name}}
@@ -104,15 +113,32 @@ export class DropIndicatorDoc {
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'drag-drop-drop-indicator-demo', templateUrl: './drag-drop-drop-indicator-demo.html', - styleUrls: ['./drag-drop-drop-indicator-demo.scss'] + styles: [ + \`:host ::ng-deep { + .drop-column { + border: 1px solid transparent; + transition: border-color .2s; + + &.p-draggable-enter { + border-color: var(--primary-color); + } + } + + [pDraggable] { + cursor: move; + } + }\` + ], + standalone: true, + imports: [DragDropModule, CommonModule], + providers: [ProductService] }) export class DragDropDropIndicatorDemo implements OnInit { availableProducts: Product[] | undefined; diff --git a/src/app/showcase/doc/dragdrop/importdoc.ts b/src/app/showcase/doc/dragdrop/importdoc.ts index 36857631454..f176821b1fe 100644 --- a/src/app/showcase/doc/dragdrop/importdoc.ts +++ b/src/app/showcase/doc/dragdrop/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/dropdown/accessibilitydoc.ts b/src/app/showcase/doc/dropdown/accessibilitydoc.ts index 951a782daa7..585ec5a7735 100644 --- a/src/app/showcase/doc/dropdown/accessibilitydoc.ts +++ b/src/app/showcase/doc/dropdown/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -173,8 +173,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/dropdown/basicdoc.ts b/src/app/showcase/doc/dropdown/basicdoc.ts index 6c327cbbc8d..f525cc8aa87 100644 --- a/src/app/showcase/doc/dropdown/basicdoc.ts +++ b/src/app/showcase/doc/dropdown/basicdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -16,7 +16,7 @@ interface City {

- +
` @@ -37,23 +37,34 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; interface City { name: string; code: string; } + @Component({ selector: 'dropdown-basic-demo', - templateUrl: './dropdown-basic-demo.html' + templateUrl: './dropdown-basic-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownBasicDemo implements OnInit { cities: City[] | undefined; diff --git a/src/app/showcase/doc/dropdown/checkmarkdoc.ts b/src/app/showcase/doc/dropdown/checkmarkdoc.ts new file mode 100644 index 00000000000..c0585db561f --- /dev/null +++ b/src/app/showcase/doc/dropdown/checkmarkdoc.ts @@ -0,0 +1,86 @@ +import { Component, OnInit } from '@angular/core'; +import { Code } from '@domain/code'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-checkmark-demo', + template: ` + +

An alternative way to highlight the selected option is displaying a checkmark instead.

+ +
+ +
+ + ` +}) +export class CheckmarkDoc 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'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-checkmark-demo', + templateUrl: './dropdown-checkmark-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] +}) +export class DropdownCheckmarkDemo 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/clearicondoc.ts b/src/app/showcase/doc/dropdown/clearicondoc.ts new file mode 100644 index 00000000000..7ca22cf96d1 --- /dev/null +++ b/src/app/showcase/doc/dropdown/clearicondoc.ts @@ -0,0 +1,84 @@ +import { Component, OnInit } from '@angular/core'; +import { Code } from '@domain/code'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-clear-icon-demo', + template: ` + +

When showClear is enabled, a clear icon is added to reset the Dropdown.

+ +
+ +
+ + ` +}) +export class ClearIconDoc 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'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-clear-icon-demo', + templateUrl: './dropdown-clear-icon-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] +}) +export class DropdownClearIconDemo 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/customfilterdoc.ts b/src/app/showcase/doc/dropdown/customfilterdoc.ts index 72b7f90cb64..4af2657f37f 100644 --- a/src/app/showcase/doc/dropdown/customfilterdoc.ts +++ b/src/app/showcase/doc/dropdown/customfilterdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { DropdownFilterOptions } from 'primeng/dropdown'; interface City { @@ -73,59 +73,98 @@ export class CustomFilterDoc implements OnInit { } code: Code = { - basic: ` + basic: `
- +
- +
{{ selectedOption.name }}
- +
{{ country.name }}
 `, html: `
- - -
-
- - + + +
+
+ + +
+
- -
- - -
- -
{{ selectedOption.name }}
-
- - -
- -
{{ country.name }}
-
- + + +
+ +
{{ selectedOption.name }}
+
+ + +
+ +
{{ country.name }}
+
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { DropdownFilterOptions } from 'primeng/dropdown'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; interface City { name: string; @@ -133,7 +172,9 @@ interface City { } @Component({ selector: 'dropdown-custom-filter-demo', - templateUrl: './dropdown-custom-filter-demo.html' + templateUrl: './dropdown-custom-filter-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownCustomFilterDemo implements OnInit { countries: City[] | undefined; diff --git a/src/app/showcase/doc/dropdown/disableddoc.ts b/src/app/showcase/doc/dropdown/disableddoc.ts index 7153970ecef..f56f4557ce0 100644 --- a/src/app/showcase/doc/dropdown/disableddoc.ts +++ b/src/app/showcase/doc/dropdown/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

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

- +
` @@ -34,15 +34,25 @@ export class DisabledDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; interface City { name: string; @@ -51,7 +61,9 @@ interface City { @Component({ selector: 'dropdown-disabled-demo', - templateUrl: './dropdown-disabled-demo.html' + templateUrl: './dropdown-disabled-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownDisabledDemo { cities: City[] | undefined; diff --git a/src/app/showcase/doc/dropdown/dropdowndoc.module.ts b/src/app/showcase/doc/dropdown/dropdowndoc.module.ts index 0dec1b38f69..593129a43a9 100644 --- a/src/app/showcase/doc/dropdown/dropdowndoc.module.ts +++ b/src/app/showcase/doc/dropdown/dropdowndoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { DropdownModule } from 'primeng/dropdown'; @@ -22,9 +22,14 @@ import { AccessibilityDoc } from './accessibilitydoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; +import { CheckmarkDoc } from './checkmarkdoc'; +import { ClearIconDoc } from './clearicondoc'; +import { LoadingStateDoc } from './loadingstatedoc'; +import { FilledDoc } from './filleddoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; @NgModule({ - imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, ReactiveFormsModule, DropdownModule, ButtonModule, InputTextModule], + imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, ReactiveFormsModule, DropdownModule, ButtonModule, InputTextModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, EditableDoc, GroupDoc, TemplateDoc, DisabledDoc, InvalidDoc, VirtualScrollDoc, LazyVirtualScrollDoc, CustomFilterDoc, FilterDoc, FloatLabelDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, EditableDoc, GroupDoc, TemplateDoc, DisabledDoc, InvalidDoc, VirtualScrollDoc, LazyVirtualScrollDoc, CustomFilterDoc, FilterDoc, FloatLabelDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, CheckmarkDoc, ClearIconDoc, LoadingStateDoc, FilledDoc] }) export class DropdownDocModule {} diff --git a/src/app/showcase/doc/dropdown/editabledoc.ts b/src/app/showcase/doc/dropdown/editabledoc.ts index c5e526da2ab..a0139bb514e 100644 --- a/src/app/showcase/doc/dropdown/editabledoc.ts +++ b/src/app/showcase/doc/dropdown/editabledoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

When editable is present, the input can also be entered with typing.

- +
` @@ -34,15 +34,26 @@ export class EditableDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, typescript: ` import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; interface City { name: string; @@ -51,7 +62,9 @@ interface City { @Component({ selector: 'dropdown-editable-demo', - templateUrl: './dropdown-editable-demo.html' + templateUrl: './dropdown-editable-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownEditableDemo implements OnInit { cities: City[] | undefined; diff --git a/src/app/showcase/doc/dropdown/filleddoc.ts b/src/app/showcase/doc/dropdown/filleddoc.ts new file mode 100644 index 00000000000..f1797cfc609 --- /dev/null +++ b/src/app/showcase/doc/dropdown/filleddoc.ts @@ -0,0 +1,84 @@ +import { Component, OnInit } from '@angular/core'; +import { Code } from '@domain/code'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-filled-demo', + template: ` + +

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

+ +
+ +
+ + ` +}) +export class FilledDoc 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'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-filled-demo', + templateUrl: './dropdown-filled-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] +}) +export class DropdownFilledDemo 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/filterdoc.ts b/src/app/showcase/doc/dropdown/filterdoc.ts index d868e806545..c0bd9bf6518 100644 --- a/src/app/showcase/doc/dropdown/filterdoc.ts +++ b/src/app/showcase/doc/dropdown/filterdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dropdown-filter-demo', @@ -45,45 +45,73 @@ export class FilterDoc implements OnInit { } code: Code = { - basic: ` - -
- -
{{ selectedOption.name }}
-
- - -
- -
{{ country.name }}
-
- -`, - - html: ` -
- + basic: `
- +
{{ selectedOption.name }}
- +
{{ country.name }}
 +`, + + html: `
+ + +
+ +
{{ selectedOption.name }}
+
+ + +
+ +
{{ country.name }}
+
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; @Component({ selector: 'dropdown-filter-demo', - templateUrl: './dropdown-filter-demo.html' + templateUrl: './dropdown-filter-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownFilterDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/dropdown/floatlabeldoc.ts b/src/app/showcase/doc/dropdown/floatlabeldoc.ts index 6b0a85b56c1..fc7c9bfc502 100644 --- a/src/app/showcase/doc/dropdown/floatlabeldoc.ts +++ b/src/app/showcase/doc/dropdown/floatlabeldoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,10 +13,10 @@ interface City {

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

- - + + - +
` @@ -37,21 +37,30 @@ export class FloatLabelDoc implements OnInit { } code: Code = { - basic: ` - + basic: ` + -`, +`, - html: ` -
- - + html: `
+ + - +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; +import { FloatLabelModule } from "primeng/floatlabel" interface City { name: string; @@ -60,7 +69,9 @@ interface City { @Component({ selector: 'dropdown-floatlabel-demo', - templateUrl: './dropdown-floatlabel-demo.html' + templateUrl: './dropdown-floatlabel-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule, FloatLabelModule] }) export class DropdownFloatlabelDemo implements OnInit { cities: City[] | undefined; diff --git a/src/app/showcase/doc/dropdown/groupdoc.ts b/src/app/showcase/doc/dropdown/groupdoc.ts index 26b51af4b72..ee8c943992b 100644 --- a/src/app/showcase/doc/dropdown/groupdoc.ts +++ b/src/app/showcase/doc/dropdown/groupdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { SelectItemGroup } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dropdown-group-demo', @@ -62,34 +62,50 @@ export class GroupDoc { } code: Code = { - basic: ` + basic: `
- + {{ group.label }}
`, - html: ` -
- - -
- - {{ group.label }} -
- + html: `
+ + +
+ + {{ group.label }} +
+
`, - typescript: ` -import { SelectItemGroup } from 'primeng/api'; + typescript: `import { SelectItemGroup } from 'primeng/api'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; @Component({ selector: 'dropdown-group-demo', - templateUrl: './dropdown-group-demo.html' + templateUrl: './dropdown-group-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownGroupDemo { groupedCities: SelectItemGroup[]; diff --git a/src/app/showcase/doc/dropdown/importdoc.ts b/src/app/showcase/doc/dropdown/importdoc.ts index d0f66a396ed..9a8e47548ba 100644 --- a/src/app/showcase/doc/dropdown/importdoc.ts +++ b/src/app/showcase/doc/dropdown/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/dropdown/invaliddoc.ts b/src/app/showcase/doc/dropdown/invaliddoc.ts index 81ced413b2c..392018a86a1 100644 --- a/src/app/showcase/doc/dropdown/invaliddoc.ts +++ b/src/app/showcase/doc/dropdown/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

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

- +
` @@ -34,15 +34,27 @@ export class InvalidDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; interface City { name: string; @@ -50,7 +62,9 @@ interface City { } @Component({ selector: 'dropdown-invalid-demo', - templateUrl: './dropdown-invalid-demo.html' + templateUrl: './dropdown-invalid-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownInvalidDemo implements OnInit { cities: City[] | undefined; diff --git a/src/app/showcase/doc/dropdown/lazyvirtualscrolldoc.ts b/src/app/showcase/doc/dropdown/lazyvirtualscrolldoc.ts index c4a352fda2d..846fa0d9529 100644 --- a/src/app/showcase/doc/dropdown/lazyvirtualscrolldoc.ts +++ b/src/app/showcase/doc/dropdown/lazyvirtualscrolldoc.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; import { ScrollerOptions, SelectItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dropdown-lazy-virtualscroll-demo', template: `
- +
` @@ -61,21 +61,28 @@ export class LazyVirtualScrollDoc { placeholder="Select Item" [virtualScroll]="true" [virtualScrollItemSize]="38" - [virtualScrollOptions]="options" ->`, - - html: ` -
- + [virtualScrollOptions]="options" />`, + + html: `
+
`, - typescript: ` -import { SelectItem } from 'primeng/api'; + typescript: `import { SelectItem } from 'primeng/api'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; @Component({ selector: 'dropdown-lazy-virtualscroll-demo', - templateUrl: './dropdown-lazy-virtualscroll-demo.html' + templateUrl: './dropdown-lazy-virtualscroll-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownLazyVirtualscrollDemo { items: SelectItem[]; diff --git a/src/app/showcase/doc/dropdown/loadingstatedoc.ts b/src/app/showcase/doc/dropdown/loadingstatedoc.ts new file mode 100644 index 00000000000..9adfdc8dbaf --- /dev/null +++ b/src/app/showcase/doc/dropdown/loadingstatedoc.ts @@ -0,0 +1,84 @@ +import { Component, OnInit } from '@angular/core'; +import { Code } from '@domain/code'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-loading-state-demo', + template: ` + +

Loading state can be used loading property.

+ +
+ +
+ + ` +}) +export class LoadingStateDoc 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'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'dropdown-loading-state-demo', + templateUrl: './dropdown-loading-state-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] +}) +export class DropdownLoadingStateDemo 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/reactiveformsdoc.ts b/src/app/showcase/doc/dropdown/reactiveformsdoc.ts index 19fe88cffb7..08bfc7cfbce 100644 --- a/src/app/showcase/doc/dropdown/reactiveformsdoc.ts +++ b/src/app/showcase/doc/dropdown/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -15,7 +15,7 @@ interface City {
- +
@@ -42,19 +42,26 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
- + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; interface City { name: string; @@ -63,7 +70,9 @@ interface City { @Component({ selector: 'dropdown-reactive-forms-demo', - templateUrl: './dropdown-reactive-forms-demo.html' + templateUrl: './dropdown-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, DropdownModule] }) export class DropdownReactiveFormsDemo implements OnInit { cities: City[] | undefined; diff --git a/src/app/showcase/doc/dropdown/templatedoc.ts b/src/app/showcase/doc/dropdown/templatedoc.ts index 0889eebd1d5..e65123b0ea9 100644 --- a/src/app/showcase/doc/dropdown/templatedoc.ts +++ b/src/app/showcase/doc/dropdown/templatedoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dropdown-template-demo', @@ -50,45 +50,69 @@ export class TemplateDoc implements OnInit { } code: Code = { - basic: ` - -
- -
{{ selectedCountry.name }}
-
- - -
- -
{{ country.name }}
-
- -`, - - html: ` -
- + basic: `
- +
{{ selectedCountry.name }}
- +
{{ country.name }}
 +`, + + html: `
+ + +
+ +
{{ selectedCountry.name }}
+
+ + +
+ +
{{ country.name }}
+
+
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; @Component({ - selector: 'dropdown-template-demo', - templateUrl: './dropdown-template-demo.html' + selector: 'dropdown-group-demo', + templateUrl: './dropdown-group-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownTemplateDemo implements OnInit { countries: any[] | undefined; diff --git a/src/app/showcase/doc/dropdown/virtualscrolldoc.ts b/src/app/showcase/doc/dropdown/virtualscrolldoc.ts index 74d327ea7a0..1aedfb47909 100644 --- a/src/app/showcase/doc/dropdown/virtualscrolldoc.ts +++ b/src/app/showcase/doc/dropdown/virtualscrolldoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { SelectItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dropdown-virtualscroll-demo', @@ -12,7 +12,7 @@ import { Code } from '../../domain/code';

- +
` @@ -30,21 +30,32 @@ export class VirtualScrollDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { SelectItem } from 'primeng/api'; + typescript: `import { SelectItem } from 'primeng/api'; import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { DropdownModule } from 'primeng/dropdown'; @Component({ selector: 'dropdown-virtualscroll-demo', - templateUrl: './dropdown-virtualscroll-demo.html' + templateUrl: './dropdown-virtualscroll-demo.html', + standalone: true, + imports: [FormsModule, DropdownModule] }) export class DropdownVirtualscrollDemo { items: SelectItem[]; diff --git a/src/app/showcase/doc/dynamicdialog/closedoc.ts b/src/app/showcase/doc/dynamicdialog/closedoc.ts index 4c1bedb48d3..28ce08288a7 100644 --- a/src/app/showcase/doc/dynamicdialog/closedoc.ts +++ b/src/app/showcase/doc/dynamicdialog/closedoc.ts @@ -1,8 +1,8 @@ import { Component } 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 { Code } from '@domain/code'; +import { Product } from '@domain/product'; import { ProductListDemo } from './productlistdemo'; @Component({ @@ -44,7 +44,7 @@ export class CloseDoc { import { Component, Input } from '@angular/core'; import { MessageService } from 'primeng/api'; import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Product } from '../../domain/product'; +import { Product } from '@domain/product'; import { ProductListDemo } from './productlistdemo'; @Component({ diff --git a/src/app/showcase/doc/dynamicdialog/customizationdoc.ts b/src/app/showcase/doc/dynamicdialog/customizationdoc.ts index 44e45684739..46926d21bf5 100644 --- a/src/app/showcase/doc/dynamicdialog/customizationdoc.ts +++ b/src/app/showcase/doc/dynamicdialog/customizationdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { ProductListDemo } from './productlistdemo'; @Component({ diff --git a/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts b/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts index 3869453375c..ecc8c7be79b 100644 --- a/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts +++ b/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts @@ -6,8 +6,8 @@ import { DialogModule } from 'primeng/dialog'; import { ButtonModule } from 'primeng/button'; import { TableModule } from 'primeng/table'; import { ToastModule } from 'primeng/toast'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { OpenDoc } from './opendoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; diff --git a/src/app/showcase/doc/dynamicdialog/importdoc.ts b/src/app/showcase/doc/dynamicdialog/importdoc.ts index b811df8a787..3398089ef3a 100644 --- a/src/app/showcase/doc/dynamicdialog/importdoc.ts +++ b/src/app/showcase/doc/dynamicdialog/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/dynamicdialog/opendoc.ts b/src/app/showcase/doc/dynamicdialog/opendoc.ts index 22d2ed49567..bcfb98c3ea3 100644 --- a/src/app/showcase/doc/dynamicdialog/opendoc.ts +++ b/src/app/showcase/doc/dynamicdialog/opendoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { ProductListDemo } from './productlistdemo'; @Component({ diff --git a/src/app/showcase/doc/dynamicdialog/passingdatadoc.ts b/src/app/showcase/doc/dynamicdialog/passingdatadoc.ts index ef7c687953c..6e72ffc066e 100644 --- a/src/app/showcase/doc/dynamicdialog/passingdatadoc.ts +++ b/src/app/showcase/doc/dynamicdialog/passingdatadoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { ProductListDemo } from './productlistdemo'; @Component({ diff --git a/src/app/showcase/doc/dynamicdialog/productlistdemo.ts b/src/app/showcase/doc/dynamicdialog/productlistdemo.ts index 6d6ed192c7e..faedc807683 100755 --- a/src/app/showcase/doc/dynamicdialog/productlistdemo.ts +++ b/src/app/showcase/doc/dynamicdialog/productlistdemo.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; import { InfoDemo } from './infodemo'; @Component({ template: `
diff --git a/src/app/showcase/doc/dynamicdialog/usagedoc.ts b/src/app/showcase/doc/dynamicdialog/usagedoc.ts index a586f785969..5b970f93a98 100644 --- a/src/app/showcase/doc/dynamicdialog/usagedoc.ts +++ b/src/app/showcase/doc/dynamicdialog/usagedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'usage-doc', @@ -21,7 +21,7 @@ export class UsageDoc { typescript: ` import { Component, OnDestroy } from '@angular/core'; import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { Product } from '../../domain/product'; +import { Product } from '@domain/product'; import { ProductListDemo } from './productlistdemo'; @Component({ diff --git a/src/app/showcase/doc/editor/basicdoc.ts b/src/app/showcase/doc/editor/basicdoc.ts index 58f85806f2b..4d57b546a22 100644 --- a/src/app/showcase/doc/editor/basicdoc.ts +++ b/src/app/showcase/doc/editor/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'editor-basic-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to Quill documentation for available controls.

- +
` @@ -17,19 +17,21 @@ export class BasicDoc { text: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { EditorModule } from 'primeng/editor'; @Component({ selector: 'editor-basic-demo', - templateUrl: './editor-basic-demo.html' + templateUrl: './editor-basic-demo.html', + standalone: true, + imports: [FormsModule, EditorModule] }) export class EditorBasicDemo { text: string | undefined; diff --git a/src/app/showcase/doc/editor/customtoolbardoc.ts b/src/app/showcase/doc/editor/customtoolbardoc.ts index 374a5af4b61..9e5fa3aca56 100644 --- a/src/app/showcase/doc/editor/customtoolbardoc.ts +++ b/src/app/showcase/doc/editor/customtoolbardoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'editor-customtoolbar-demo', @@ -35,8 +35,7 @@ export class CustomToolbarDoc { `, - html: ` -
+ html: `
diff --git a/src/app/showcase/doc/editor/editordoc.module.ts b/src/app/showcase/doc/editor/editordoc.module.ts index b0c0c69465a..b5d45a31ba9 100644 --- a/src/app/showcase/doc/editor/editordoc.module.ts +++ b/src/app/showcase/doc/editor/editordoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { DropdownModule } from 'primeng/dropdown'; import { ImportDoc } from './importdoc'; import { QuillDoc } from './quilldoc'; diff --git a/src/app/showcase/doc/editor/importdoc.ts b/src/app/showcase/doc/editor/importdoc.ts index 17d77d060ce..605ba8a7c79 100644 --- a/src/app/showcase/doc/editor/importdoc.ts +++ b/src/app/showcase/doc/editor/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/editor/quilldoc.ts b/src/app/showcase/doc/editor/quilldoc.ts index e00d9725e47..719d0332c52 100644 --- a/src/app/showcase/doc/editor/quilldoc.ts +++ b/src/app/showcase/doc/editor/quilldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'quill-doc', diff --git a/src/app/showcase/doc/editor/reactiveformsdoc.ts b/src/app/showcase/doc/editor/reactiveformsdoc.ts index 1d9c873ae4e..1a5f58f5ced 100644 --- a/src/app/showcase/doc/editor/reactiveformsdoc.ts +++ b/src/app/showcase/doc/editor/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
- +
@@ -27,24 +27,25 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
- + `, - html: ` -
+ html: `
- +
`, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { EditorModule } from 'primeng/editor'; @Component({ selector: 'editor-reactive-forms-demo', - templateUrl: './editor-reactive-forms-demo.html' -}) + templateUrl: './editor-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, EditorModule], + }) export class EditorReactiveFormsDemo implements OnInit { formGroup: FormGroup | undefined; diff --git a/src/app/showcase/doc/editor/readonlydoc.ts b/src/app/showcase/doc/editor/readonlydoc.ts index 50def218419..7f58f2a9256 100644 --- a/src/app/showcase/doc/editor/readonlydoc.ts +++ b/src/app/showcase/doc/editor/readonlydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'editor-readonly-demo', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

When readonly is present, the value cannot be edited.

- +
` @@ -17,19 +17,21 @@ export class ReadOnlyDoc { text: string = 'Always bet on Prime!'; code: Code = { - basic: ``, + basic: ``, - html: ` -
- + html: `
+
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { EditorModule } from 'primeng/editor'; @Component({ selector: 'editor-readonly-demo', - templateUrl: './editor-readonly-demo.html' + templateUrl: './editor-readonly-demo.html', + standalone: true, + imports: [FormsModule, EditorModule] }) export class EditorReadonlyDemo { text: string = 'Always bet on Prime!'; diff --git a/src/app/showcase/doc/fieldset/basicdoc.ts b/src/app/showcase/doc/fieldset/basicdoc.ts index 26affa7ccca..e536d71830a 100644 --- a/src/app/showcase/doc/fieldset/basicdoc.ts +++ b/src/app/showcase/doc/fieldset/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'fieldset-basic-demo', @@ -22,13 +22,11 @@ export class BasicDoc { 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. + Lorem ipsum dolor sit amet...

`, - 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 @@ -37,12 +35,14 @@ export class BasicDoc {

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FieldsetModule } from 'primeng/fieldset'; @Component({ selector: 'fieldset-basic-demo', - templateUrl: './fieldset-basic-demo.html' + templateUrl: './fieldset-basic-demo.html', + standalone: true, + imports: [FieldsetModule] }) export class FieldsetBasicDemo {}` }; diff --git a/src/app/showcase/doc/fieldset/fieldsetdoc.module.ts b/src/app/showcase/doc/fieldset/fieldsetdoc.module.ts index 563e0329421..328be320671 100644 --- a/src/app/showcase/doc/fieldset/fieldsetdoc.module.ts +++ b/src/app/showcase/doc/fieldset/fieldsetdoc.module.ts @@ -3,8 +3,8 @@ 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 { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/fieldset/importdoc.ts b/src/app/showcase/doc/fieldset/importdoc.ts index a4438a278dd..79f1588167c 100644 --- a/src/app/showcase/doc/fieldset/importdoc.ts +++ b/src/app/showcase/doc/fieldset/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/fieldset/templatedoc.ts b/src/app/showcase/doc/fieldset/templatedoc.ts index 455c45d7f36..17bfce226a9 100644 --- a/src/app/showcase/doc/fieldset/templatedoc.ts +++ b/src/app/showcase/doc/fieldset/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'fieldset-template-demo', @@ -29,13 +29,14 @@ export class TemplateDoc { basic: `
- + 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. + Lorem ipsum dolor sit amet...

`, @@ -43,7 +44,9 @@ export class TemplateDoc {
- + Amy Elsner
@@ -54,12 +57,15 @@ export class TemplateDoc {
`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FieldsetModule } from 'primeng/fieldset'; +import { AvatarModule } from 'primeng/avatar'; @Component({ selector: 'fieldset-template-demo', - templateUrl: './fieldset-template-demo.html' + templateUrl: './fieldset-template-demo.html', + standalone: true, + imports: [FieldsetModule, AvatarModule] }) export class FieldsetTemplateDemo {}` }; diff --git a/src/app/showcase/doc/fieldset/toggleabledoc.ts b/src/app/showcase/doc/fieldset/toggleabledoc.ts index 79585a8e477..1b35a1c77c6 100644 --- a/src/app/showcase/doc/fieldset/toggleabledoc.ts +++ b/src/app/showcase/doc/fieldset/toggleabledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'fieldset-toggleable-demo', @@ -22,13 +22,11 @@ export class ToggleableDoc { 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. + Lorem ipsum dolor sit amet...

`, - 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 @@ -37,12 +35,14 @@ export class ToggleableDoc {

`, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FieldsetModule } from 'primeng/fieldset'; @Component({ selector: 'fieldset-toggleable-demo', - templateUrl: './fieldset-toggleable-demo.html' + templateUrl: './fieldset-toggleable-demo.html', + standalone: true, + imports: [FieldsetModule] }) export class FieldsetToggleableDemo {}` }; diff --git a/src/app/showcase/doc/fileupload/advanceddoc.ts b/src/app/showcase/doc/fileupload/advanceddoc.ts index 08b0f12e8db..e7c60d707b5 100644 --- a/src/app/showcase/doc/fileupload/advanceddoc.ts +++ b/src/app/showcase/doc/fileupload/advanceddoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface UploadEvent { originalEvent: Event; @@ -10,11 +10,12 @@ interface UploadEvent { @Component({ selector: 'file-upload-advanced-demo', template: ` +

FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
- + -
Drag and drop files
+
Drag and drop files to here to upload.
    @@ -41,27 +42,44 @@ export class AdvancedDoc { } code: Code = { - basic: ` - -
      -
    • {{ file.name }} - {{ file.size }} bytes
      • -
    -     -    `, - html: ` -
    - - + basic: `
      -
    • {{ file.name }} - {{ file.size }} bytes
      • +
    • + {{ file.name }} - {{ file.size }} bytes +
    +    `, + html: `
    + + + +
      +
    • + {{ file.name }} - {{ file.size }} bytes +
      • +
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { FileUploadModule } from 'primeng/fileupload'; +import { ToastModule } from 'primeng/toast'; +import { CommonModule } from '@angular/common'; interface UploadEvent { originalEvent: Event; @@ -71,6 +89,8 @@ interface UploadEvent { @Component({ selector: 'file-upload-advanced-demo', templateUrl: './file-upload-advanced-demo.html', + standalone: true, + imports: [FileUploadModule, ToastModule, CommonModule], providers: [MessageService] }) export class FileUploadAdvancedDemo { diff --git a/src/app/showcase/doc/fileupload/autodoc.ts b/src/app/showcase/doc/fileupload/autodoc.ts index 01a59978baa..5cfa66c4ca7 100644 --- a/src/app/showcase/doc/fileupload/autodoc.ts +++ b/src/app/showcase/doc/fileupload/autodoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface UploadEvent { originalEvent: Event; @@ -14,8 +14,8 @@ interface UploadEvent {

    When auto property is enabled, a file gets uploaded instantly after selection.

    - - + +
    `, @@ -29,16 +29,32 @@ export class AutoDoc { } code: Code = { - basic: ``, - html: ` -
    - - + basic: ``, + html: `
    + +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { FileUploadModule } from 'primeng/fileupload'; +import { ToastModule } from 'primeng/toast'; interface UploadEvent { originalEvent: Event; @@ -48,6 +64,8 @@ interface UploadEvent { @Component({ selector: 'file-upload-auto-demo', templateUrl: './file-upload-auto-demo.html', + standalone: true, + imports: [FileUploadModule, ToastModule], providers: [MessageService] }) export class FileUploadAutoDemo { diff --git a/src/app/showcase/doc/fileupload/basicdoc.ts b/src/app/showcase/doc/fileupload/basicdoc.ts index 15c65102bac..4e87e10a021 100644 --- a/src/app/showcase/doc/fileupload/basicdoc.ts +++ b/src/app/showcase/doc/fileupload/basicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface UploadEvent { originalEvent: Event; @@ -14,8 +14,8 @@ interface UploadEvent {

    FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.

    - - + +
    `, @@ -29,15 +29,31 @@ export class BasicDoc { } code: Code = { - basic: ``, - html: ` -
    - - + basic: ``, + html: `
    + +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { FileUploadModule } from 'primeng/fileupload'; +import { ToastModule } from 'primeng/toast'; interface UploadEvent { originalEvent: Event; @@ -47,6 +63,8 @@ interface UploadEvent { @Component({ selector: 'file-upload-basic-demo', templateUrl: './file-upload-basic-demo.html', + standalone: true, + imports: [FileUploadModule, ToastModule], providers: [MessageService] }) export class FileUploadBasicDemo { diff --git a/src/app/showcase/doc/fileupload/customdoc.ts b/src/app/showcase/doc/fileupload/customdoc.ts index b3a36227d98..978fd78e1a8 100644 --- a/src/app/showcase/doc/fileupload/customdoc.ts +++ b/src/app/showcase/doc/fileupload/customdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'file-upload-custom-demo', diff --git a/src/app/showcase/doc/fileupload/fileuploaddoc.module.ts b/src/app/showcase/doc/fileupload/fileuploaddoc.module.ts index 0a33bde6280..83f9478ffc7 100644 --- a/src/app/showcase/doc/fileupload/fileuploaddoc.module.ts +++ b/src/app/showcase/doc/fileupload/fileuploaddoc.module.ts @@ -7,8 +7,8 @@ import { ButtonModule } from 'primeng/button'; import { ToastModule } from 'primeng/toast'; import { TagModule } from 'primeng/tag'; import { ProgressBarModule } from 'primeng/progressbar'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AdvancedDoc } from './advanceddoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; @@ -16,9 +16,10 @@ import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { AutoDoc } from './autodoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { BadgeModule } from 'primeng/badge'; @NgModule({ - imports: [CommonModule, FormsModule, AppCodeModule, AppDocModule, ButtonModule, TagModule, ProgressBarModule, ToastModule, FileUploadModule, RouterModule], + imports: [CommonModule, FormsModule, AppCodeModule, AppDocModule, ButtonModule, TagModule, ProgressBarModule, ToastModule, FileUploadModule, BadgeModule, RouterModule], exports: [AppDocModule], declarations: [ImportDoc, BasicDoc, TemplateDoc, StyleDoc, AdvancedDoc, AutoDoc, AccessibilityDoc] }) diff --git a/src/app/showcase/doc/fileupload/importdoc.ts b/src/app/showcase/doc/fileupload/importdoc.ts index 7974a08e585..5ef50d15544 100644 --- a/src/app/showcase/doc/fileupload/importdoc.ts +++ b/src/app/showcase/doc/fileupload/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'file-upload-import-doc', diff --git a/src/app/showcase/doc/fileupload/templatedoc.ts b/src/app/showcase/doc/fileupload/templatedoc.ts index 37ea877fee4..45d9aa7f12c 100644 --- a/src/app/showcase/doc/fileupload/templatedoc.ts +++ b/src/app/showcase/doc/fileupload/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'file-upload-template-demo', @@ -11,16 +11,55 @@ import { Code } from '../../domain/code'; option is toolbar to display custom content at toolbar.

    -
    +
    - -
    Upload 3 Files
    -     - -
    Custom UI to display a file
    + +
    +
    + + + +
    + + {{ totalSize }}B / 1Mb + +
    -
    Additional content.
    +
    +
    Pending
    +
    +
    +
    + +
    + {{ file.name }} +
    {{ formatSize(file.size) }}
    + + +
    +
    +
    +
    +
    Completed
    +
    +
    +
    + +
    + {{ file.name }} +
    {{ formatSize(file.size) }}
    + + +
    +
    +
    +     + +
    + +

    Drag and drop files to here to upload.

    +
    diff --git a/src/app/showcase/doc/filterservice/customconstraintsdoc.ts b/src/app/showcase/doc/filterservice/customconstraintsdoc.ts index c7b20e7f002..ca3f094e2b1 100644 --- a/src/app/showcase/doc/filterservice/customconstraintsdoc.ts +++ b/src/app/showcase/doc/filterservice/customconstraintsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'custom-constraints-doc', diff --git a/src/app/showcase/doc/filterservice/filterservicedoc.module.ts b/src/app/showcase/doc/filterservice/filterservicedoc.module.ts index 6284eb228a4..38d08fa73b6 100644 --- a/src/app/showcase/doc/filterservice/filterservicedoc.module.ts +++ b/src/app/showcase/doc/filterservice/filterservicedoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { TableModule } from 'primeng/table'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ApiDoc } from './apidoc'; import { BuiltInConstraintsDoc } from './builtinconstraintsdoc'; import { CustomConstraintsDoc } from './customconstraintsdoc'; diff --git a/src/app/showcase/doc/filterservice/importdoc.ts b/src/app/showcase/doc/filterservice/importdoc.ts index 38e06f2406d..75921bce199 100644 --- a/src/app/showcase/doc/filterservice/importdoc.ts +++ b/src/app/showcase/doc/filterservice/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/filterservice/tableintegrationdoc.ts b/src/app/showcase/doc/filterservice/tableintegrationdoc.ts index 05a54a14430..5521a650fe2 100644 --- a/src/app/showcase/doc/filterservice/tableintegrationdoc.ts +++ b/src/app/showcase/doc/filterservice/tableintegrationdoc.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { FilterMatchMode, FilterService, SelectItem } from 'primeng/api'; -import { Car } from '../../domain/car'; -import { Code } from '../../domain/code'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { Code } from '@domain/code'; +import { CarService } from '@service/carservice'; @Component({ selector: 'filter-service-table-integration-demo', @@ -118,8 +118,8 @@ export class TableIntegrationDoc implements OnInit { typescript: ` import { Component, OnInit } from '@angular/core'; import { FilterMatchMode, FilterService, SelectItem } from 'primeng/api'; -import { Car } from '../../domain/car'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { CarService } from '@service/carservice'; @Component({ selector: 'filter-service-table-integration-demo', diff --git a/src/app/showcase/doc/filterservice/usagedoc.ts b/src/app/showcase/doc/filterservice/usagedoc.ts index 68595863c9e..8762a1ee16a 100644 --- a/src/app/showcase/doc/filterservice/usagedoc.ts +++ b/src/app/showcase/doc/filterservice/usagedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'usage-doc', diff --git a/src/app/showcase/doc/floatlabel/basicdoc.ts b/src/app/showcase/doc/floatlabel/basicdoc.ts index 8e34e9f351b..45c73ac1381 100644 --- a/src/app/showcase/doc/floatlabel/basicdoc.ts +++ b/src/app/showcase/doc/floatlabel/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -32,12 +32,14 @@ export class BasicDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { FloatLabelModule } from "primeng/floatlabel" + @Component({ selector: 'float-label-basic-demo', - templateUrl: './float-label-basic-demo.html' + templateUrl: './float-label-basic-demo.html', + standalone: true, + imports: [FloatLabelModule] }) export class FloatLabelBasicDemo { value: string | undefined; diff --git a/src/app/showcase/doc/floatlabel/floatlabeldoc.module.ts b/src/app/showcase/doc/floatlabel/floatlabeldoc.module.ts index 7dd5ce0f54a..60e9b92d0ad 100644 --- a/src/app/showcase/doc/floatlabel/floatlabeldoc.module.ts +++ b/src/app/showcase/doc/floatlabel/floatlabeldoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { FormsModule } from '@angular/forms'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/floatlabel/importdoc.ts b/src/app/showcase/doc/floatlabel/importdoc.ts index 524c2bc6deb..dc0e02f441f 100644 --- a/src/app/showcase/doc/floatlabel/importdoc.ts +++ b/src/app/showcase/doc/floatlabel/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/focustrap/basicdoc.ts b/src/app/showcase/doc/focustrap/basicdoc.ts index 4523f9a9b16..8392c75d517 100644 --- a/src/app/showcase/doc/focustrap/basicdoc.ts +++ b/src/app/showcase/doc/focustrap/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'focus-trap-basic-demo', diff --git a/src/app/showcase/doc/focustrap/focustrapdoc.module.ts b/src/app/showcase/doc/focustrap/focustrapdoc.module.ts index 12b0d3fa0b1..b9c912940bf 100644 --- a/src/app/showcase/doc/focustrap/focustrapdoc.module.ts +++ b/src/app/showcase/doc/focustrap/focustrapdoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; diff --git a/src/app/showcase/doc/focustrap/importdoc.ts b/src/app/showcase/doc/focustrap/importdoc.ts index eb01aa139aa..124be22be59 100644 --- a/src/app/showcase/doc/focustrap/importdoc.ts +++ b/src/app/showcase/doc/focustrap/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/galleria/advanceddoc.ts b/src/app/showcase/doc/galleria/advanceddoc.ts index 78ec53ffc61..4e9fd5674a7 100644 --- a/src/app/showcase/doc/galleria/advanceddoc.ts +++ b/src/app/showcase/doc/galleria/advanceddoc.ts @@ -1,8 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { ChangeDetectorRef, Component, Inject, OnDestroy, OnInit, PLATFORM_ID, ViewChild } from '@angular/core'; import { Galleria } from 'primeng/galleria'; -import { Code } from '../../domain/code'; -import { PhotoService } from '../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-advanced-doc', @@ -179,10 +179,11 @@ export class AdvancedDoc implements OnInit, OnDestroy { [autoPlay]="true" [transitionInterval]="3000" [containerStyle]="{ 'max-width': '640px' }" - [containerClass]="galleriaClass()" -> + [containerClass]="galleriaClass()"> - +
    @@ -191,38 +192,133 @@ export class AdvancedDoc implements OnInit, OnDestroy {
    - + {{ activeIndex + 1 }}/{{ images.length }} {{ images[activeIndex].title }} {{ images[activeIndex].alt }} - +
    `, - html: ` -
    - + html: `
    + - +
    - +
    -     -
    `, - typescript: ` -import { ChangeDetectorRef, Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; + +
    + + + {{ activeIndex + 1 }}/{{ images.length }} + {{ images[activeIndex].title }} + {{ images[activeIndex].alt }} + + +
    +     +     `, + typescript: `import { ChangeDetectorRef, Component, OnInit, OnDestroy, ViewChild, PLATFORM_ID, Inject } from '@angular/core'; import { Galleria } from 'primeng/galleria'; -import { PhotoService } from '../../service/photoservice'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-advanced-demo', templateUrl: './galleria-advanced-demo.html', - styleUrls: ['./galleria-advanced-demo.scss'] + styles: [ + \`:host ::ng-deep { + .custom-galleria { + &.p-galleria { + &.fullscreen { + display: flex; + flex-direction: column; + + .p-galleria-content { + flex-grow: 1; + justify-content: center; + } + } + + .p-galleria-content { + position: relative; + } + + .p-galleria-thumbnail-wrapper { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + } + + .p-galleria-thumbnail-items-container { + width: 100%; + } + + .custom-galleria-footer { + display: flex; + align-items: center; + background-color: rgba(0, 0, 0, .9); + color: #ffffff; + + > button { + background-color: transparent; + color: #ffffff; + border: 0 none; + border-radius: 0; + margin: .2rem 0; + + &.fullscreen-button { + margin-left: auto; + } + + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } + } + } + + .title-container { + > span { + font-size: .9rem; + padding-left: .829rem; + + &.title { + font-weight: bold; + } + } + } + } + } + }\` + ], + standalone: true, + imports: [ButtonModule, GalleriaModule], + providers: [PhotoService] }) export class GalleriaAdvancedDemo implements OnInit, OnDestroy { @@ -238,6 +334,8 @@ export class GalleriaAdvancedDemo implements OnInit, OnDestroy { @ViewChild('galleria') galleria: Galleria | undefined; + constructor(@Inject(PLATFORM_ID) private platformId: any, private photoService: PhotoService, private cd: ChangeDetectorRef) {} + responsiveOptions: any[] = [ { breakpoint: '1024px', @@ -343,71 +441,7 @@ export class GalleriaAdvancedDemo implements OnInit, OnDestroy { title: 'Title 1' }, ...`, - scss: ` -:host ::ng-deep { - .custom-galleria { - &.p-galleria { - &.fullscreen { - display: flex; - flex-direction: column; - - .p-galleria-content { - flex-grow: 1; - justify-content: center; - } - } - - .p-galleria-content { - position: relative; - } - - .p-galleria-thumbnail-wrapper { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - } - - .p-galleria-thumbnail-items-container { - width: 100%; - } - - .custom-galleria-footer { - display: flex; - align-items: center; - background-color: rgba(0, 0, 0, .9); - color: #ffffff; - - > button { - background-color: transparent; - color: #ffffff; - border: 0 none; - border-radius: 0; - margin: .2rem 0; - - &.fullscreen-button { - margin-left: auto; - } - - &:hover { - background-color: rgba(255, 255, 255, 0.1); - } - } - } - - .title-container { - > span { - font-size: .9rem; - padding-left: .829rem; - - &.title { - font-weight: bold; - } - } - } - } - } -}`, + service: ['PhotoService'] }; } diff --git a/src/app/showcase/doc/galleria/autoplaydoc.ts b/src/app/showcase/doc/galleria/autoplaydoc.ts index 7fb7b0ce6db..5d67aa75bdd 100644 --- a/src/app/showcase/doc/galleria/autoplaydoc.ts +++ b/src/app/showcase/doc/galleria/autoplaydoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { PhotoService } from '../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-autoplay-demo', @@ -48,19 +48,13 @@ export class AutoPlayDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     -    `, - html: ` -
    - + basic: ` @@ -69,15 +63,35 @@ export class AutoPlayDoc implements OnInit {
    +`, + html: `
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-autoplay-demo', - templateUrl: './galleria-autoplay-demo.html' + templateUrl: './galleria-autoplay-demo.html', + standalone: true, + imports: [GalleriaModule], + providers: [PhotoService] }) export class GalleriaAutoplayDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/galleria/basicdoc.ts b/src/app/showcase/doc/galleria/basicdoc.ts index f48743e740b..d30b0e47b61 100644 --- a/src/app/showcase/doc/galleria/basicdoc.ts +++ b/src/app/showcase/doc/galleria/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { PhotoService } from '../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-basic-demo', @@ -49,19 +49,11 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     -    `, - html: ` -
    - + basic: ` @@ -70,15 +62,33 @@ export class BasicDoc implements OnInit {
    +`, + html: `
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-basic-demo', - templateUrl: './galleria-basic-demo.html' + templateUrl: './galleria-basic-demo.html', + standalone: true, + imports: [GalleriaModule], + providers: [PhotoService] }) export class GalleriaBasicDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/galleria/captiondoc.ts b/src/app/showcase/doc/galleria/captiondoc.ts index 25119037256..d0cf9c1f933 100644 --- a/src/app/showcase/doc/galleria/captiondoc.ts +++ b/src/app/showcase/doc/galleria/captiondoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { PhotoService } from '../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-caption-demo', @@ -52,41 +52,53 @@ export class CaptionDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     - -

    {{ item.title }}

    -

    {{ item.alt }}

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

    + {{ item.title }} +

    +

    {{ item.alt }}

    +     +     +`, + html: `
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-caption-demo', - templateUrl: './galleria-caption-demo.html' + templateUrl: './galleria-caption-demo.html', + standalone: true, + imports: [GalleriaModule], + providers: [PhotoService] }) export class GalleriaCaptionDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/galleria/controlleddoc.ts b/src/app/showcase/doc/galleria/controlleddoc.ts index 3bdd27703ee..88195c5141a 100644 --- a/src/app/showcase/doc/galleria/controlleddoc.ts +++ b/src/app/showcase/doc/galleria/controlleddoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { PhotoService } from '../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-controlled-demo', @@ -10,8 +10,8 @@ import { PhotoService } from '../../service/photoservice';
    - - + +
    @@ -73,26 +73,23 @@ export class ControlledDoc implements OnInit { code: Code = { basic: `
    - - + +
    - - - - - -
    - -
    -     -    `, - html: ` -
    -
    - - -
    - + @@ -101,15 +98,47 @@ export class ControlledDoc implements OnInit {
    +    `, + html: `
    +
    + + +
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'galleria-controlled-demo', - templateUrl: './galleria-controlled-demo.html' + templateUrl: './galleria-controlled-demo.html', + standalone: true, + imports: [GalleriaModule, ButtonModule], + providers: [PhotoService] }) export class GalleriaControlledDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts index fd23a660eb7..3bfe38f210f 100644 --- a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts +++ b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'template-doc', @@ -31,7 +31,7 @@ import { PhotoService } from '../../../service/photoservice';
    - + ` }) export class FullScreenTemplateDoc implements OnInit { @@ -82,18 +82,22 @@ export class FullScreenTemplateDoc implements OnInit { [circular]="true" [fullScreen]="true" [showItemNavigators]="true" - [showThumbnails]="false" -> + [showThumbnails]="false"> - +     `, - html: ` -
    + html: `
    - +
    + [showThumbnails]="false"> - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; +import { CommonModule } from '@angular/common'; @Component({ - selector: 'galleria-full-secreen-template-demo', - templateUrl: './galleria-full-secreen-template-demo.html' + selector: 'galleria-full-screen-template-demo', + templateUrl: './galleria-full-screen-template-demo.html', + standalone: true, + imports: [GalleriaModule, CommonModule], + providers: [PhotoService] }) export class GalleriaFullScreenTemplateDemo implements OnInit { displayCustom: boolean | undefined; diff --git a/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts b/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts index 054b6b2750f..7dbf02c9836 100644 --- a/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'without-thumbnails-doc', @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

    Thumbnails can also be hidden in full screen mode.

    - + - - - -`, - html: ` -
    - - + [showThumbnails]="false"> - + - +`, + html: `
    + + + + + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'galleria-full-screen-without-thumbnails-demo', - templateUrl: './galleria-full-screen-without-thumbnails-demo.html' + templateUrl: './galleria-full-screen-without-thumbnails-demo.html', + standalone: true, + imports: [GalleriaModule, ButtonModule], + providers: [PhotoService] }) export class GalleriaFullScreenWithoutThumbnailsDemo implements OnInit { displayBasic: boolean | undefined; diff --git a/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts b/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts index 0b9cc92464d..ed0a9acbdb0 100644 --- a/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'with-thumbnails-doc', @@ -9,7 +9,7 @@ import { PhotoService } from '../../../service/photoservice';

    Full screen mode is enabled by adding fullScreen property.

    - + @@ -55,38 +55,63 @@ export class WithThumbnailsDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     -    `, - html: ` -
    - - + basic: ` - +
    - +
    +    `, + html: `
    + + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'galleria-full-screen-with-thumbnails-demo', - templateUrl: './galleria-full-screen-with-thumbnails-demo.html' + templateUrl: './galleria-full-screen-with-thumbnails-demo.html', + standalone: true, + imports: [GalleriaModule, ButtonModule], + providers: [PhotoService] }) export class GalleriaFullScreenWithThumbnailsDemo implements OnInit { displayBasic: boolean | undefined; diff --git a/src/app/showcase/doc/galleria/galleriadoc.module.ts b/src/app/showcase/doc/galleria/galleriadoc.module.ts index 2b57989146a..b739967a800 100644 --- a/src/app/showcase/doc/galleria/galleriadoc.module.ts +++ b/src/app/showcase/doc/galleria/galleriadoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { GalleriaModule } from 'primeng/galleria'; import { FormsModule } from '@angular/forms'; import { ButtonModule } from 'primeng/button'; diff --git a/src/app/showcase/doc/galleria/importdoc.ts b/src/app/showcase/doc/galleria/importdoc.ts index 5280fa1d0b3..4b179b771a7 100644 --- a/src/app/showcase/doc/galleria/importdoc.ts +++ b/src/app/showcase/doc/galleria/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts b/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts index fcbdf6e8183..6cfe9b8323d 100644 --- a/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts +++ b/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'click-event-doc', @@ -45,26 +45,38 @@ export class ClickEventDoc implements OnInit { } code: Code = { - basic: ` + basic: ` `, - html: ` -
    - - - - + html: `
    + + + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-indicator-click-event-demo', - templateUrl: './galleria-indicator-click-event-demo.html' + templateUrl: './galleria-indicator-click-event-demo.html', + standalone: true, + imports: [GalleriaModule], + providers: [PhotoService] }) export class GalleriaIndicatorClickEventDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts b/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts index 9f5a2c74243..888cd06db5b 100644 --- a/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts +++ b/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'hover-event-doc', @@ -45,26 +45,40 @@ export class HoverEventDoc implements OnInit { } code: Code = { - basic: ` - - - -`, - html: ` -
    - + basic: ` +`, + html: `
    + + + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-indicator-hover-event-demo', - templateUrl: './galleria-indicator-hover-event-demo.html' + templateUrl: './galleria-indicator-hover-event-demo.html', + standalone: true, + imports: [GalleriaModule], + providers: [PhotoService] }) export class GalleriaIndicatorHoverEventDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/galleria/indicator/positioneddoc.ts b/src/app/showcase/doc/galleria/indicator/positioneddoc.ts index 73c81566e83..93de8a842a2 100644 --- a/src/app/showcase/doc/galleria/indicator/positioneddoc.ts +++ b/src/app/showcase/doc/galleria/indicator/positioneddoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'positioned-doc', @@ -13,10 +13,10 @@ import { PhotoService } from '../../../service/photoservice';
    - +
    - +
    `, - html: ` -
    + html: `
    - +
    - +
    - - - - + + + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { CheckboxModule } from 'primeng/checkbox'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'galleria-indicator-positioned-demo', - templateUrl: './galleria-indicator-positioned-demo.html' + templateUrl: './galleria-indicator-positioned-demo.html', + standalone: true, + imports: [GalleriaModule, RadioButtonModule, CheckboxModule, FormsModule], + providers: [PhotoService] }) export class GalleriaIndicatorPositionedDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/galleria/indicator/templatedoc.ts b/src/app/showcase/doc/galleria/indicator/templatedoc.ts index 6af439572a5..c3fc2027a6d 100644 --- a/src/app/showcase/doc/galleria/indicator/templatedoc.ts +++ b/src/app/showcase/doc/galleria/indicator/templatedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'template-doc', @@ -75,7 +75,7 @@ export class TemplateDoc implements OnInit {
    `, typescript: ` import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-indicator-template-demo', diff --git a/src/app/showcase/doc/galleria/navigator/hoverdoc.ts b/src/app/showcase/doc/galleria/navigator/hoverdoc.ts index 95086690e71..a7ad136fc3f 100644 --- a/src/app/showcase/doc/galleria/navigator/hoverdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/hoverdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'hover-doc', @@ -51,19 +51,13 @@ export class HoverDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     -    `, - html: ` -
    - + basic: ` @@ -72,15 +66,34 @@ export class HoverDoc implements OnInit {
    +`, + html: `
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-navigator-hover-demo', templateUrl: './galleria-navigator-hover-demo.html', + standalone: true, + imports: [GalleriaModule], providers: [PhotoService] }) export class GalleriaNavigatorHoverDemo implements OnInit { diff --git a/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts b/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts index 4817c345a1d..ed3342f8f83 100644 --- a/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'indicators-doc', @@ -59,19 +59,14 @@ export class IndicatorsDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     -    `, - html: ` -
    - + basic: ` @@ -80,15 +75,35 @@ export class IndicatorsDoc implements OnInit {
    +`, + html: `
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-navigator-indicators-demo', templateUrl: './galleria-navigator-indicators-demo.html', + standalone: true, + imports: [GalleriaModule], providers: [PhotoService] }) export class GalleriaNavigatorIndicatorsDemo implements OnInit { diff --git a/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts b/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts index e78f8305138..f4beb2be9c5 100644 --- a/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'itemthumbnails-doc', @@ -51,19 +51,13 @@ export class ItemThumbnailsDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     -    `, - html: ` -
    - + basic: ` @@ -72,15 +66,34 @@ export class ItemThumbnailsDoc implements OnInit {
    +`, + html: `
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-navigator-item-thumbnails-demo', templateUrl: './galleria-navigator-item-thumbnails-demo.html', + standalone: true, + imports: [GalleriaModule], providers: [PhotoService] }) export class GalleriaNavigatorItemThumbnailsDemo implements OnInit { diff --git a/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts b/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts index 79328ea2d0d..cef5fc43b03 100644 --- a/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../../domain/code'; -import { PhotoService } from '../../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'itemwithoutthumbnails-doc', @@ -46,26 +46,41 @@ export class ItemWithoutThumbnailsDoc implements OnInit { } code: Code = { - basic: ` - - - -`, - html: ` -
    - + basic: ` +`, + html: `
    + + + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-item-without-thumbnails-demo', templateUrl: './galleria-item-without-thumbnails-demo.html', + standalone: true, + imports: [GalleriaModule], providers: [PhotoService] }) export class GalleriaItemWithoutThumbnailsDemo implements OnInit { diff --git a/src/app/showcase/doc/galleria/responsivedoc.ts b/src/app/showcase/doc/galleria/responsivedoc.ts index f027b420ac9..d8a3806e6cf 100644 --- a/src/app/showcase/doc/galleria/responsivedoc.ts +++ b/src/app/showcase/doc/galleria/responsivedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { PhotoService } from '../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-responsive-demo', @@ -48,36 +48,56 @@ export class ResponsiveDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     -    `, - html: ` -
    - + basic: ` - +
    - +
    +    `, + html: `
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; @Component({ selector: 'galleria-responsive-demo', - templateUrl: './galleria-responsive-demo.html' + templateUrl: './galleria-responsive-demo.html', + standalone: true, + imports: [GalleriaModule], + providers: [PhotoService] }) export class GalleriaResponsiveDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/galleria/thumbnaildoc.ts b/src/app/showcase/doc/galleria/thumbnaildoc.ts index 150e0e47d00..c41924f0dbc 100644 --- a/src/app/showcase/doc/galleria/thumbnaildoc.ts +++ b/src/app/showcase/doc/galleria/thumbnaildoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { PhotoService } from '../../service/photoservice'; +import { Code } from '@domain/code'; +import { PhotoService } from '@service/photoservice'; @Component({ selector: 'galleria-thumbnail-demo', @@ -10,7 +10,7 @@ import { PhotoService } from '../../service/photoservice';
    - +
    @@ -72,39 +72,63 @@ export class ThumbnailDoc implements OnInit { } code: Code = { - basic: ` - - - - -
    - -
    -     -    `, - html: ` -
    -
    - -
    - + basic: ` - +
    +    `, + html: `
    +
    + +
    + + + + + +
    + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { PhotoService } from '../../service/photoservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PhotoService } from '@service/photoservice'; +import { GalleriaModule } from 'primeng/galleria'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'galleria-thumbnail-demo', - templateUrl: './galleria-thumbnail-demo.html' + templateUrl: './galleria-thumbnail-demo.html', + standalone: true, + imports: [GalleriaModule, RadioButtonModule, FormsModule], + providers: [PhotoService] }) export class GalleriaThumbnailDemo implements OnInit { images: any[] | undefined; diff --git a/src/app/showcase/doc/guides/accessibility/formcontrolsdoc.ts b/src/app/showcase/doc/guides/accessibility/formcontrolsdoc.ts index 87861c43ccb..0773ceeb928 100644 --- a/src/app/showcase/doc/guides/accessibility/formcontrolsdoc.ts +++ b/src/app/showcase/doc/guides/accessibility/formcontrolsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'form-controls-doc', diff --git a/src/app/showcase/doc/guides/accessibility/semantichtmldoc.ts b/src/app/showcase/doc/guides/accessibility/semantichtmldoc.ts index 48285578994..7a7288ee159 100644 --- a/src/app/showcase/doc/guides/accessibility/semantichtmldoc.ts +++ b/src/app/showcase/doc/guides/accessibility/semantichtmldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'semantic-html-doc', diff --git a/src/app/showcase/doc/guides/accessibility/waiariadoc.ts b/src/app/showcase/doc/guides/accessibility/waiariadoc.ts index 2003fa5d99d..a3e083c7374 100644 --- a/src/app/showcase/doc/guides/accessibility/waiariadoc.ts +++ b/src/app/showcase/doc/guides/accessibility/waiariadoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'wai-aria-doc', diff --git a/src/app/showcase/doc/guides/guidesdoc.module.ts b/src/app/showcase/doc/guides/guidesdoc.module.ts index ef66380679c..5ade2510813 100644 --- a/src/app/showcase/doc/guides/guidesdoc.module.ts +++ b/src/app/showcase/doc/guides/guidesdoc.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { CheckboxModule } from 'primeng/checkbox'; diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts index 05d7afe40e0..b3d151659a9 100644 --- a/src/app/showcase/doc/iconfield/basicdoc.ts +++ b/src/app/showcase/doc/iconfield/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -45,13 +45,18 @@ export class BasicDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputIconModule } from 'primeng/inputicon'; +import { IconFieldModule } from 'primeng/iconfield'; +import { InputTextModule } from 'primeng/inputtext'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'iconfield-basic-demo', - templateUrl: './iconfield-basic-demo.html' + templateUrl: './iconfield-basic-demo.html', + standalone: true, + imports: [InputIconModule, IconFieldModule, InputTextModule, FormsModule] }) -export class IconFieldBasicDemo {}` +export class IconfieldBasicDemo {}` }; } diff --git a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts index 125d9b4d618..0180bd09eca 100644 --- a/src/app/showcase/doc/iconfield/iconfielddoc.module.ts +++ b/src/app/showcase/doc/iconfield/iconfielddoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { InputTextModule } from 'primeng/inputtext'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { TemplateDoc } from './templatedoc'; diff --git a/src/app/showcase/doc/iconfield/importdoc.ts b/src/app/showcase/doc/iconfield/importdoc.ts index b4904188e89..3c47bbcb3eb 100644 --- a/src/app/showcase/doc/iconfield/importdoc.ts +++ b/src/app/showcase/doc/iconfield/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/iconfield/templatedoc.ts b/src/app/showcase/doc/iconfield/templatedoc.ts index db612818418..0cb747b0189 100644 --- a/src/app/showcase/doc/iconfield/templatedoc.ts +++ b/src/app/showcase/doc/iconfield/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -120,12 +120,17 @@ export class TemplateDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { InputIconModule } from 'primeng/inputicon'; +import { IconFieldModule } from 'primeng/iconfield'; +import { InputTextModule } from 'primeng/inputtext'; +import { FormsModule } from '@angular/forms'; + @Component({ selector: 'iconfield-template-demo', - templateUrl: './iconfield-template-demo.html' + templateUrl: './iconfield-template-demo.html', + standalone: true, + imports: [InputIconModule, IconFieldModule, InputTextModule, FormsModule] }) export class IconFieldTemplateDemo {}` }; diff --git a/src/app/showcase/doc/icons/basicdoc.ts b/src/app/showcase/doc/icons/basicdoc.ts index 1cf080c4bc4..619e2bf31d2 100644 --- a/src/app/showcase/doc/icons/basicdoc.ts +++ b/src/app/showcase/doc/icons/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/icons/colordoc.ts b/src/app/showcase/doc/icons/colordoc.ts index 57305407855..32e910cf312 100644 --- a/src/app/showcase/doc/icons/colordoc.ts +++ b/src/app/showcase/doc/icons/colordoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'color-doc', diff --git a/src/app/showcase/doc/icons/constantsdoc.ts b/src/app/showcase/doc/icons/constantsdoc.ts index a30018abd42..162fe0755fe 100644 --- a/src/app/showcase/doc/icons/constantsdoc.ts +++ b/src/app/showcase/doc/icons/constantsdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, PrimeIcons } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'prime-icons-constants-demo', diff --git a/src/app/showcase/doc/icons/downloaddoc.ts b/src/app/showcase/doc/icons/downloaddoc.ts index 495f0f53ac8..5d5d9b004ab 100644 --- a/src/app/showcase/doc/icons/downloaddoc.ts +++ b/src/app/showcase/doc/icons/downloaddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'download-doc', diff --git a/src/app/showcase/doc/icons/icons.module.ts b/src/app/showcase/doc/icons/icons.module.ts index 8788235e231..039c87eb3e8 100644 --- a/src/app/showcase/doc/icons/icons.module.ts +++ b/src/app/showcase/doc/icons/icons.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ColorDoc } from './colordoc'; import { ConstantsDoc } from './constantsdoc'; diff --git a/src/app/showcase/doc/icons/importdoc.ts b/src/app/showcase/doc/icons/importdoc.ts index 2a2c3fe6720..359df959afa 100644 --- a/src/app/showcase/doc/icons/importdoc.ts +++ b/src/app/showcase/doc/icons/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/icons/sizedoc.ts b/src/app/showcase/doc/icons/sizedoc.ts index 7728e44e4bd..0f01551b164 100644 --- a/src/app/showcase/doc/icons/sizedoc.ts +++ b/src/app/showcase/doc/icons/sizedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'size-doc', diff --git a/src/app/showcase/doc/icons/spindoc.ts b/src/app/showcase/doc/icons/spindoc.ts index df357e196d0..3e77671cbfc 100644 --- a/src/app/showcase/doc/icons/spindoc.ts +++ b/src/app/showcase/doc/icons/spindoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'spin-doc', diff --git a/src/app/showcase/doc/inplace/basicdoc.ts b/src/app/showcase/doc/inplace/basicdoc.ts index 21716132992..acb6f5ac2dc 100644 --- a/src/app/showcase/doc/inplace/basicdoc.ts +++ b/src/app/showcase/doc/inplace/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/inplace/datadoc.ts b/src/app/showcase/doc/inplace/datadoc.ts index 47550331ae5..d7dec71a359 100644 --- a/src/app/showcase/doc/inplace/datadoc.ts +++ b/src/app/showcase/doc/inplace/datadoc.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { Car } from '../../domain/car'; -import { Code } from '../../domain/code'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { Code } from '@domain/code'; +import { CarService } from '@service/carservice'; @Component({ selector: 'data-doc', @@ -110,8 +110,8 @@ export class DataDoc {
    `, typescript: ` import { Component } from '@angular/core'; -import { Car } from '../../domain/car'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { CarService } from '@service/carservice'; @Component({ selector: 'inplace-data-demo', diff --git a/src/app/showcase/doc/inplace/imagedoc.ts b/src/app/showcase/doc/inplace/imagedoc.ts index 51f94ba7867..26b1c3460af 100644 --- a/src/app/showcase/doc/inplace/imagedoc.ts +++ b/src/app/showcase/doc/inplace/imagedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'image-doc', diff --git a/src/app/showcase/doc/inplace/importdoc.ts b/src/app/showcase/doc/inplace/importdoc.ts index 6c450ac156e..37c51c38a4f 100644 --- a/src/app/showcase/doc/inplace/importdoc.ts +++ b/src/app/showcase/doc/inplace/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/inplace/inplacedoc.module.ts b/src/app/showcase/doc/inplace/inplacedoc.module.ts index 26307a80d85..81ed01c5729 100644 --- a/src/app/showcase/doc/inplace/inplacedoc.module.ts +++ b/src/app/showcase/doc/inplace/inplacedoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { InplaceModule } from 'primeng/inplace'; import { InputTextModule } from 'primeng/inputtext'; import { TableModule } from 'primeng/table'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DataDoc } from './datadoc'; diff --git a/src/app/showcase/doc/inplace/inputdoc.ts b/src/app/showcase/doc/inplace/inputdoc.ts index 13b10a926f1..887fff9054a 100644 --- a/src/app/showcase/doc/inplace/inputdoc.ts +++ b/src/app/showcase/doc/inplace/inputdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'input-doc', diff --git a/src/app/showcase/doc/inputgroup/accessibilitydoc.ts b/src/app/showcase/doc/inputgroup/accessibilitydoc.ts new file mode 100644 index 00000000000..3b94b2cb5b1 --- /dev/null +++ b/src/app/showcase/doc/inputgroup/accessibilitydoc.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'accessibility-doc', + template: ` + +

    Screen Reader

    +

    InputGroup and InputGroupAddon does not require any roles and attributes.

    + +

    Keyboard Support

    +

    Component does not include any interactive elements.

    +     + ` +}) +export class AccessibilityDoc {} diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts index 1eb5f409b07..f4903c606b3 100644 --- a/src/app/showcase/doc/inputgroup/basicdoc.ts +++ b/src/app/showcase/doc/inputgroup/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -63,12 +63,17 @@ export class BasicDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { InputGroupModule } from 'primeng/inputgroup'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'input-group-basic-demo', - templateUrl: './input-group-basic-demo.html' + templateUrl: './input-group-basic-demo.html', + standalone: true, + imports: [FormsModule, InputGroupModule, InputGroupAddonModule, InputTextModule] }) export class InputGroupBasicDemo { }` }; diff --git a/src/app/showcase/doc/inputgroup/buttondoc.ts b/src/app/showcase/doc/inputgroup/buttondoc.ts index e20212f3819..bb8032414fa 100644 --- a/src/app/showcase/doc/inputgroup/buttondoc.ts +++ b/src/app/showcase/doc/inputgroup/buttondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'button-doc', @@ -57,12 +57,18 @@ export class ButtonDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { InputGroupModule } from 'primeng/inputgroup'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { InputTextModule } from 'primeng/inputtext'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'input-group-button-demo', - templateUrl: './input-group-button-demo.html' + templateUrl: './input-group-button-demo.html', + standalone: true, + imports: [FormsModule, InputGroupModule, InputGroupAddonModule, InputTextModule, ButtonModule] }) export class InputGroupButtonDemo { }` diff --git a/src/app/showcase/doc/inputgroup/checkboxdoc.ts b/src/app/showcase/doc/inputgroup/checkboxdoc.ts index bd7487bda94..50374b63b82 100644 --- a/src/app/showcase/doc/inputgroup/checkboxdoc.ts +++ b/src/app/showcase/doc/inputgroup/checkboxdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'checkbox-doc', @@ -9,71 +9,92 @@ import { Code } from '../../domain/code';
    - - + + + - - + + + - + - +
    ` }) export class CheckboxDoc { - checkbox1: boolean = false; + radioValue1: boolean = false; + + checked1: boolean = false; - checkbox2: boolean = false; + checked2: boolean = false; category: string | undefined; code: Code = { basic: ` - - + + + + + - - + + + - + - + `, html: `
    - - + + + + + - - + + + - + - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { InputGroupModule } from 'primeng/inputgroup'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { InputTextModule } from 'primeng/inputtext'; +import { CheckboxModule } from 'primeng/checkbox'; +import { RadioButtonModule } from 'primeng/radiobutton'; @Component({ selector: 'input-group-checkbox-demo', - templateUrl: './input-group-checkbox-demo.html' + templateUrl: './input-group-checkbox-demo.html', + standalone: true, + imports: [FormsModule, InputGroupModule, InputGroupAddonModule, InputTextModule, CheckboxModule, RadioButtonModule] }) export class InputGroupCheckboxDemo { - checkbox1: boolean = false; + radioValue1: boolean = false; + + checked1: boolean = false; - checkbox2: boolean = false; + checked2: boolean = false; category: string | undefined; }` diff --git a/src/app/showcase/doc/inputgroup/importdoc.ts b/src/app/showcase/doc/inputgroup/importdoc.ts index 9f15f95f75e..04612debf93 100644 --- a/src/app/showcase/doc/inputgroup/importdoc.ts +++ b/src/app/showcase/doc/inputgroup/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts b/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts index 24182e05119..b875d040ad6 100644 --- a/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts +++ b/src/app/showcase/doc/inputgroup/inputgroupddoc.module.ts @@ -6,8 +6,8 @@ import { ButtonModule } from 'primeng/button'; import { CheckboxModule } from 'primeng/checkbox'; import { InputTextModule } from 'primeng/inputtext'; import { RadioButtonModule } from 'primeng/radiobutton'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ButtonDoc } from './buttondoc'; import { CheckboxDoc } from './checkboxdoc'; @@ -15,10 +15,11 @@ import { ImportDoc } from './importdoc'; import { MultipleDoc } from './multipledoc'; import { InputGroupModule } from 'primeng/inputgroup'; import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { AccessibilityDoc } from './accessibilitydoc'; @NgModule({ - imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, InputTextModule, ButtonModule, CheckboxModule, RadioButtonModule, InputGroupModule, InputGroupAddonModule], + imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, InputTextModule, ButtonModule, CheckboxModule, RadioButtonModule, InputGroupModule, InputGroupAddonModule, RadioButtonModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, MultipleDoc, ButtonDoc, CheckboxDoc] + declarations: [ImportDoc, BasicDoc, MultipleDoc, ButtonDoc, CheckboxDoc, AccessibilityDoc] }) export class InputGroupDocModule {} diff --git a/src/app/showcase/doc/inputgroup/multipledoc.ts b/src/app/showcase/doc/inputgroup/multipledoc.ts index e63714685c7..7808319b797 100644 --- a/src/app/showcase/doc/inputgroup/multipledoc.ts +++ b/src/app/showcase/doc/inputgroup/multipledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'multiple-doc', @@ -51,12 +51,17 @@ export class MultipleDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { InputGroupModule } from 'primeng/inputgroup'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'input-group-multiple-demo', - templateUrl: './input-group-multiple-demo.html' + templateUrl: './input-group-multiple-demo.html', + standalone: true, + imports: [FormsModule, InputGroupModule, InputGroupAddonModule, InputTextModule] }) export class InputGroupMultipleDemo { }` diff --git a/src/app/showcase/doc/inputmask/accessibilitydoc.ts b/src/app/showcase/doc/inputmask/accessibilitydoc.ts index 37f098015d8..009880733fc 100644 --- a/src/app/showcase/doc/inputmask/accessibilitydoc.ts +++ b/src/app/showcase/doc/inputmask/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -38,11 +38,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Phone - + -` +` }; } diff --git a/src/app/showcase/doc/inputmask/basicdoc.ts b/src/app/showcase/doc/inputmask/basicdoc.ts index 116f495dbbf..5fdd3706f62 100644 --- a/src/app/showcase/doc/inputmask/basicdoc.ts +++ b/src/app/showcase/doc/inputmask/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    InputMask is used as a controlled input with ngModel properties.

    - +
    ` @@ -17,19 +17,27 @@ export class BasicDoc { value: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputMaskModule } from 'primeng/inputmask'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-mask-basic-demo', - templateUrl: './input-mask-basic-demo.html' + templateUrl: './input-mask-basic-demo.html', + standalone: true, + imports: [FormsModule, InputMaskModule] }) export class InputMaskBasicDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputmask/disableddoc.ts b/src/app/showcase/doc/inputmask/disableddoc.ts index 6fbef3d3e3a..cfc5a2b538f 100644 --- a/src/app/showcase/doc/inputmask/disableddoc.ts +++ b/src/app/showcase/doc/inputmask/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

    - +
    ` @@ -17,19 +17,27 @@ export class DisabledDoc { value: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputMaskModule } from 'primeng/inputmask'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-mask-disabled-demo', - templateUrl: './input-mask-disabled-demo.html' + templateUrl: './input-mask-disabled-demo.html', + standalone: true, + imports: [FormsModule, InputMaskModule] }) export class InputMaskDisabledDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputmask/filleddoc.ts b/src/app/showcase/doc/inputmask/filleddoc.ts new file mode 100644 index 00000000000..35690fd516c --- /dev/null +++ b/src/app/showcase/doc/inputmask/filleddoc.ts @@ -0,0 +1,48 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'filled-doc', + template: ` + +

    Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

    +     +
    + +
    + + ` +}) +export class FilledDoc { + value: string | undefined; + + code: Code = { + basic: ``, + + html: `
    + +
    `, + + typescript: `import { Component } from '@angular/core'; +import { InputMaskModule } from 'primeng/inputmask'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'input-mask-filled-demo', + templateUrl: './input-mask-filled-demo.html', + standalone: true, + imports: [FormsModule, InputMaskModule] +}) +export class InputMaskFilledDemo { + value: string | undefined; +}` + }; +} diff --git a/src/app/showcase/doc/inputmask/floatlabeldoc.ts b/src/app/showcase/doc/inputmask/floatlabeldoc.ts index 0eb8f4e4f46..d5da8ad674a 100644 --- a/src/app/showcase/doc/inputmask/floatlabeldoc.ts +++ b/src/app/showcase/doc/inputmask/floatlabeldoc.ts @@ -1,17 +1,17 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'floatlabel-doc', template: ` -

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

    +

    A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
    - - + + - +
    ` @@ -20,25 +20,34 @@ export class FloatlabelDoc { value: string | undefined; code: Code = { - basic: ` - + basic: ` + -`, +`, - html: ` -
    - - - - + html: `
    + + + +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputMaskModule } from 'primeng/inputmask'; +import { FormsModule } from '@angular/forms'; +import { FloatLabelModule } from "primeng/floatlabel" @Component({ selector: 'input-mask-floatlabel-demo', - templateUrl: './input-mask-floatlabel-demo.html' + templateUrl: './input-mask-floatlabel-demo.html', + standalone: true, + imports: [FormsModule, InputMaskModule, FloatLabelModule] }) export class InputMaskFloatlabelDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputmask/importdoc.ts b/src/app/showcase/doc/inputmask/importdoc.ts index 1d0ff604956..2a6413da08a 100644 --- a/src/app/showcase/doc/inputmask/importdoc.ts +++ b/src/app/showcase/doc/inputmask/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/inputmask/inputmaskdoc.module.ts b/src/app/showcase/doc/inputmask/inputmaskdoc.module.ts index caadbbec60a..878532f8356 100644 --- a/src/app/showcase/doc/inputmask/inputmaskdoc.module.ts +++ b/src/app/showcase/doc/inputmask/inputmaskdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { InputMaskModule } from 'primeng/inputmask'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DisabledDoc } from './disableddoc'; @@ -16,10 +16,12 @@ import { OptionalDoc } from './optionaldoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { SlotCharDoc } from './slotchardoc'; import { StyleDoc } from './styledoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { FilledDoc } from './filleddoc'; @NgModule({ - imports: [CommonModule, FormsModule, ReactiveFormsModule, InputMaskModule, RouterModule, AppCodeModule, AppDocModule], + imports: [CommonModule, FormsModule, ReactiveFormsModule, InputMaskModule, RouterModule, AppCodeModule, AppDocModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, MaskDoc, SlotCharDoc, OptionalDoc, FloatlabelDoc, DisabledDoc, InvalidDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, MaskDoc, SlotCharDoc, OptionalDoc, FloatlabelDoc, DisabledDoc, InvalidDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] }) export class InputMaskDocModule {} diff --git a/src/app/showcase/doc/inputmask/invaliddoc.ts b/src/app/showcase/doc/inputmask/invaliddoc.ts index 549dc35f7cb..56deed56a85 100644 --- a/src/app/showcase/doc/inputmask/invaliddoc.ts +++ b/src/app/showcase/doc/inputmask/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

    - +
    ` @@ -17,19 +17,27 @@ export class InvalidDoc { value: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputMaskModule } from 'primeng/inputmask'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-mask-invalid-demo', - templateUrl: './input-mask-invalid-demo.html' + templateUrl: './input-mask-invalid-demo.html', + standalone: true, + imports: [FormsModule, InputMaskModule] }) export class InputMaskInvalidDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputmask/maskdoc.ts b/src/app/showcase/doc/inputmask/maskdoc.ts index d70f11369db..d2c313fd3c9 100644 --- a/src/app/showcase/doc/inputmask/maskdoc.ts +++ b/src/app/showcase/doc/inputmask/maskdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'input-mask-mask-demo', @@ -13,15 +13,15 @@ import { Code } from '../../domain/code';
    SSN - +
    Phone - +
    Serial Number - +
    @@ -36,38 +36,54 @@ export class MaskDoc { code: Code = { basic: `SSN - - + Phone - - + Serial Number -`, +`, - html: ` -
    + html: `
    SSN - +
    -
    Phone - +
    -
    Serial Number - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputMaskModule } from 'primeng/inputmask'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-mask-mask-demo', - templateUrl: './input-mask-mask-demo.html' + templateUrl: './input-mask-mask-demo.html', + standalone: true, + imports: [FormsModule, InputMaskModule] }) export class InputMaskMaskDemo { value1: string | undefined; diff --git a/src/app/showcase/doc/inputmask/optionaldoc.ts b/src/app/showcase/doc/inputmask/optionaldoc.ts index a8238536d81..49a9374c1fc 100644 --- a/src/app/showcase/doc/inputmask/optionaldoc.ts +++ b/src/app/showcase/doc/inputmask/optionaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'optional-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    When the input does not complete the mask definition, it is cleared by default. Use autoClear property to control this behavior. In addition, ? is used to mark anything after the question mark optional.

    - +
    ` @@ -17,19 +17,27 @@ export class OptionalDoc { value: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputMaskModule } from 'primeng/inputmask'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-mask-optional-demo', - templateUrl: './input-mask-optional-demo.html' + templateUrl: './input-mask-optional-demo.html', + standalone: true, + imports: [FormsModule, InputMaskModule] }) export class InputMaskOptionalDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputmask/reactiveformsdoc.ts b/src/app/showcase/doc/inputmask/reactiveformsdoc.ts index 02d41d9c4ad..c728a20ee8a 100644 --- a/src/app/showcase/doc/inputmask/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputmask/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
    - +
    @@ -26,21 +26,27 @@ export class ReactiveFormsDoc implements OnInit { } code: Code = { - basic: ` -`, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { InputMaskModule } from 'primeng/inputmask'; @Component({ selector: 'input-mask-reactive-forms-demo', - templateUrl: './input-mask-reactive-forms-demo.html' + templateUrl: './input-mask-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, InputMaskModule] }) export class InputMaskReactiveFormsDemo implements OnInit { formGroup: FormGroup | undefined; diff --git a/src/app/showcase/doc/inputmask/slotchardoc.ts b/src/app/showcase/doc/inputmask/slotchardoc.ts index d1b76c06e55..5dac4a9bf44 100644 --- a/src/app/showcase/doc/inputmask/slotchardoc.ts +++ b/src/app/showcase/doc/inputmask/slotchardoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'slot-char-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Default placeholder for a mask is underscore that can be customized using slotChar property.

    - +
    ` @@ -17,19 +17,29 @@ export class SlotCharDoc { value: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputMaskModule } from 'primeng/inputmask'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-mask-slot-char-demo', - templateUrl: './input-mask-slot-char-demo.html' + templateUrl: './input-mask-slot-char-demo.html', + standalone: true, + imports: [FormsModule, InputMaskModule] }) export class InputMaskSlotCharDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputnumber/accessibilitydoc.ts b/src/app/showcase/doc/inputnumber/accessibilitydoc.ts index d4609e3a09b..a47adc256d1 100644 --- a/src/app/showcase/doc/inputnumber/accessibilitydoc.ts +++ b/src/app/showcase/doc/inputnumber/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -62,11 +62,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Number - + -` +` }; } diff --git a/src/app/showcase/doc/inputnumber/buttonsdoc.ts b/src/app/showcase/doc/inputnumber/buttonsdoc.ts index ca65e54750f..857fa250ae6 100644 --- a/src/app/showcase/doc/inputnumber/buttonsdoc.ts +++ b/src/app/showcase/doc/inputnumber/buttonsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'buttons-doc', @@ -13,11 +13,11 @@ import { Code } from '../../domain/code';
    - +
    - +
    @@ -34,7 +34,7 @@ import { Code } from '../../domain/code'; decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" - > + />
    @@ -48,23 +48,63 @@ export class ButtonsDoc { value3: number = 25; code: Code = { - basic: ` - -`, + basic: ` - html: ` -
    + + +`, + + html: `
    - - + +
    - - + +
    - + + currency="EUR" />
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-number-buttons-demo', - templateUrl: './input-number-buttons-demo.html' + templateUrl: './input-number-buttons-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule] }) export class InputNumberButtonsDemo { value1: number = 20; diff --git a/src/app/showcase/doc/inputnumber/currencydoc.ts b/src/app/showcase/doc/inputnumber/currencydoc.ts index 76bbbaad346..fb7677208cc 100644 --- a/src/app/showcase/doc/inputnumber/currencydoc.ts +++ b/src/app/showcase/doc/inputnumber/currencydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'currency-doc', @@ -13,19 +13,19 @@ import { Code } from '../../domain/code';
    - +
    - +
    - +
    - +
    @@ -41,37 +41,93 @@ export class CurrencyDoc { value4: number = 5002; code: Code = { - basic: ` - - - `, + basic: ` + + + + + + `, html: `
    - - + +
    - - + +
    - - + +
    - - + +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-number-currency-demo', - templateUrl: './input-number-currency-demo.html' + templateUrl: './input-number-currency-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule] }) export class InputNumberCurrencyDemo { value1: number = 1500; diff --git a/src/app/showcase/doc/inputnumber/disableddoc.ts b/src/app/showcase/doc/inputnumber/disableddoc.ts index 3ae6d714d85..c076a15ebc6 100644 --- a/src/app/showcase/doc/inputnumber/disableddoc.ts +++ b/src/app/showcase/doc/inputnumber/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

    - +
    ` @@ -17,19 +17,29 @@ export class DisabledDoc { value1: number = 50; code: Code = { - basic: ` `, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-number-disabled-demo', - templateUrl: './input-number-disabled-demo.html' + templateUrl: './input-number-disabled-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule] }) export class InputNumberDisabledDemo { value1: number = 50; diff --git a/src/app/showcase/doc/inputnumber/floatlabeldoc.ts b/src/app/showcase/doc/inputnumber/floatlabeldoc.ts index ca4bb9bede6..28bb52e47fd 100644 --- a/src/app/showcase/doc/inputnumber/floatlabeldoc.ts +++ b/src/app/showcase/doc/inputnumber/floatlabeldoc.ts @@ -1,17 +1,17 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'float-label-doc', template: ` -

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

    +

    A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
    - - + + - +
    ` @@ -20,25 +20,28 @@ export class FloatlabelDoc { value1!: number; code: Code = { - basic: ` - + basic: ` + -`, +`, - html: ` -
    - - + html: `
    + + - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; +import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ selector: 'input-number-float-label-demo', - templateUrl: './input-number-float-label-demo.html' + templateUrl: './input-number-float-label-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule, FloatLabelModule] }) export class InputNumberFloatLabelDemo { value1!: number; diff --git a/src/app/showcase/doc/inputnumber/importdoc.ts b/src/app/showcase/doc/inputnumber/importdoc.ts index 950f57df5d6..ec53c018e4e 100644 --- a/src/app/showcase/doc/inputnumber/importdoc.ts +++ b/src/app/showcase/doc/inputnumber/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/inputnumber/inputnumberdoc.module.ts b/src/app/showcase/doc/inputnumber/inputnumberdoc.module.ts index 10e6c5d0932..383987d3b63 100644 --- a/src/app/showcase/doc/inputnumber/inputnumberdoc.module.ts +++ b/src/app/showcase/doc/inputnumber/inputnumberdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { InputNumberModule } from 'primeng/inputnumber'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { ButtonsDoc } from './buttonsdoc'; import { CurrencyDoc } from './currencydoc'; @@ -18,9 +18,10 @@ import { PrefixSuffixDoc } from './prefixsuffixdoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; import { VerticalDoc } from './verticaldoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; @NgModule({ - imports: [CommonModule, FormsModule, ReactiveFormsModule, InputNumberModule, RouterModule, AppCodeModule, AppDocModule], + imports: [CommonModule, FormsModule, ReactiveFormsModule, InputNumberModule, RouterModule, AppCodeModule, AppDocModule, FloatLabelModule], exports: [AppDocModule], declarations: [ImportDoc, NumeralsDoc, LocaleDoc, CurrencyDoc, PrefixSuffixDoc, ButtonsDoc, VerticalDoc, FloatlabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] }) diff --git a/src/app/showcase/doc/inputnumber/invaliddoc.ts b/src/app/showcase/doc/inputnumber/invaliddoc.ts index d6d515340e2..d69ec676e4d 100644 --- a/src/app/showcase/doc/inputnumber/invaliddoc.ts +++ b/src/app/showcase/doc/inputnumber/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

    - +
    ` @@ -17,19 +17,27 @@ export class InvalidDoc { value1!: number; code: Code = { - basic: ` `, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-number-invalid-demo', - templateUrl: './input-number-invalid-demo.html' + templateUrl: './input-number-invalid-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule] }) export class InputNumberInvalidDemo { value1!: number; diff --git a/src/app/showcase/doc/inputnumber/localedoc.ts b/src/app/showcase/doc/inputnumber/localedoc.ts index 58f46aa3270..9df03082241 100644 --- a/src/app/showcase/doc/inputnumber/localedoc.ts +++ b/src/app/showcase/doc/inputnumber/localedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'locale-doc', @@ -10,19 +10,19 @@ import { Code } from '../../domain/code';
    - +
    - +
    - +
    - +
    @@ -38,37 +38,86 @@ export class LocaleDoc { value4: number = 732762; code: Code = { - basic: ` - - - `, + basic: ` - html: ` -
    + + + + +`, + + html: `
    - - + +
    - - + +
    - - + +
    - - + +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-number-locale-demo', - templateUrl: './input-number-locale-demo.html' + templateUrl: './input-number-locale-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule] }) export class InputNumberLocaleDemo { value1: number = 151351; diff --git a/src/app/showcase/doc/inputnumber/numeralsdoc.ts b/src/app/showcase/doc/inputnumber/numeralsdoc.ts index 1b4f4e5f922..b95d7ef7e4d 100644 --- a/src/app/showcase/doc/inputnumber/numeralsdoc.ts +++ b/src/app/showcase/doc/inputnumber/numeralsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'numerals-doc', @@ -10,19 +10,19 @@ import { Code } from '../../domain/code';
    - +
    - +
    - +
    - +
    @@ -38,37 +38,74 @@ export class NumeralsDoc { value4: number = 50; code: Code = { - basic: ` - - - `, + basic: ` - html: ` -
    + + + + + `, + + html: `
    - +
    - +
    - +
    - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-number-numerals-demo', - templateUrl: './input-number-numerals-demo.html' + templateUrl: './input-number-numerals-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule] }) export class InputNumberNumeralsDemo { value1: number = 42723; diff --git a/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts b/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts index f9390b0adfa..f1036e7e66b 100644 --- a/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts +++ b/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'prefix-suffix-doc', @@ -10,19 +10,19 @@ import { Code } from '../../domain/code';
    - +
    - +
    - +
    - +
    @@ -38,37 +38,82 @@ export class PrefixSuffixDoc { value4: number = 20; code: Code = { - basic: ` - - - `, + basic: ` - html: ` -
    + + + + +`, + + html: `
    - - + +
    - - + +
    - - + +
    - - + +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-number-prefix-suffix-demo', - templateUrl: './input-number-prefix-suffix-demo.html' + templateUrl: './input-number-prefix-suffix-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule] }) export class InputNumberPrefixSuffixDemo { value1: number = 20; diff --git a/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts b/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts index 978ee749a06..5e5e80a2e51 100644 --- a/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
    - +
    @@ -27,23 +27,24 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
    - + `, - html: ` -
    + html: `
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { InputNumberModule } from 'primeng/inputnumber'; @Component({ selector: 'input-number-reactive-forms-demo', - templateUrl: './input-number-reactive-forms-demo.html' + templateUrl: './input-number-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, InputNumberModule], }) export class InputNumberReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/inputnumber/verticaldoc.ts b/src/app/showcase/doc/inputnumber/verticaldoc.ts index 39c095fc55e..1ed42a1c6b9 100644 --- a/src/app/showcase/doc/inputnumber/verticaldoc.ts +++ b/src/app/showcase/doc/inputnumber/verticaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'vertical-doc', @@ -19,7 +19,7 @@ import { Code } from '../../domain/code'; incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" - > + />
    ` @@ -28,21 +28,40 @@ export class VerticalDoc { value1: number = 50; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputNumberModule } from 'primeng/inputnumber'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-number-vertical-demo', - templateUrl: './input-number-vertical-demo.html' + templateUrl: './input-number-vertical-demo.html', + standalone: true, + imports: [FormsModule, InputNumberModule] }) export class InputNumberVerticalDemo { value1: number = 50; diff --git a/src/app/showcase/doc/inputotp/basicdoc.ts b/src/app/showcase/doc/inputotp/basicdoc.ts index b556e9fc926..489f2b446a9 100644 --- a/src/app/showcase/doc/inputotp/basicdoc.ts +++ b/src/app/showcase/doc/inputotp/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Two-way value binding is defined using ngModel. The number of characters is defined with the length property, which is set to 4 by default.

    - +
    ` @@ -17,18 +17,21 @@ export class BasicDoc { value: any; code: Code = { - basic: ``, + basic: ``, html: `
    - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputOtpModule } from 'primeng/inputotp'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-otp-basic-demo', - templateUrl: './input-otp-basic-demo.html' + templateUrl: './input-otp-basic-demo.html', + standalone: true, + imports: [FormsModule, InputOtpModule] }) export class InputOtpBasicDemo { value : any diff --git a/src/app/showcase/doc/inputotp/importdoc.ts b/src/app/showcase/doc/inputotp/importdoc.ts index ebe22dc7afd..8a5a7e6e865 100644 --- a/src/app/showcase/doc/inputotp/importdoc.ts +++ b/src/app/showcase/doc/inputotp/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/inputotp/inputotpdoc.module.ts b/src/app/showcase/doc/inputotp/inputotpdoc.module.ts index 93f327f1da6..8288ec9cbf2 100644 --- a/src/app/showcase/doc/inputotp/inputotpdoc.module.ts +++ b/src/app/showcase/doc/inputotp/inputotpdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { InputOtpModule } from 'primeng/inputotp'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/inputotp/integeronlydoc.ts b/src/app/showcase/doc/inputotp/integeronlydoc.ts index 1ff970f32ce..c1dd10e1975 100644 --- a/src/app/showcase/doc/inputotp/integeronlydoc.ts +++ b/src/app/showcase/doc/inputotp/integeronlydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'integer-only-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    When integerOnly is present, only integers can be accepted as input.

    - +
    ` @@ -17,18 +17,21 @@ export class IntegerOnlyDoc { value: any; code: Code = { - basic: ``, + basic: ``, html: `
    - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputOtpModule } from 'primeng/inputotp'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-otp-integer-only-demo', - templateUrl: './input-otp-integer-only-demo.html' + templateUrl: './input-otp-integer-only-demo.html', + standalone: true, + imports: [FormsModule, InputOtpModule] }) export class InputOtpIntegerOnlyDemo { value : any diff --git a/src/app/showcase/doc/inputotp/maskdoc.ts b/src/app/showcase/doc/inputotp/maskdoc.ts index 94862b5db54..db4a83fa1e8 100644 --- a/src/app/showcase/doc/inputotp/maskdoc.ts +++ b/src/app/showcase/doc/inputotp/maskdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'mask-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Enable the mask option to hide the values in the input fields.

    - +
    ` @@ -17,18 +17,21 @@ export class MaskDoc { value: any; code: Code = { - basic: ``, + basic: ``, html: `
    - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputOtpModule } from 'primeng/inputotp'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-otp-mask-demo', - templateUrl: './input-otp-mask-demo.html' + templateUrl: './input-otp-mask-demo.html', + standalone: true, + imports: [FormsModule, InputOtpModule] }) export class InputOtpMaskDemo { value: any; diff --git a/src/app/showcase/doc/inputotp/sampledoc.ts b/src/app/showcase/doc/inputotp/sampledoc.ts index 5c7f94b3651..ec089730c1b 100644 --- a/src/app/showcase/doc/inputotp/sampledoc.ts +++ b/src/app/showcase/doc/inputotp/sampledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'sample-doc', @@ -20,8 +20,8 @@ import { Code } from '../../domain/code';
    - - + +
    @@ -76,15 +76,22 @@ export class SampleDoc {

    Please enter the code sent to your phone.

    - +
    - - + +
    `, @@ -94,25 +101,36 @@ export class SampleDoc {

    Please enter the code sent to your phone.

    - +
    - - + +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { InputOtpModule } from 'primeng/inputotp'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'input-otp-sample-demo', templateUrl: './input-otp-sample-demo.html', + standalone: true, + imports: [FormsModule, InputOtpModule, ButtonModule], styles: [ \` .custom-otp-input { diff --git a/src/app/showcase/doc/inputotp/templatedoc.ts b/src/app/showcase/doc/inputotp/templatedoc.ts index fecdcee4b3e..d3f5e9f55e1 100644 --- a/src/app/showcase/doc/inputotp/templatedoc.ts +++ b/src/app/showcase/doc/inputotp/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -45,24 +45,41 @@ export class TemplateDoc { code: Code = { basic: ` - + `, html: `
    - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputOtpModule } from 'primeng/inputotp'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-otp-template-demo', templateUrl: './input-otp-template-demo.html', + standalone: true, + imports: [FormsModule, InputOtpModule], styles: [ \` .custom-otp-input { diff --git a/src/app/showcase/doc/inputswitch/accessibilitydoc.ts b/src/app/showcase/doc/inputswitch/accessibilitydoc.ts index dfdd49f5d58..ae099963aef 100644 --- a/src/app/showcase/doc/inputswitch/accessibilitydoc.ts +++ b/src/app/showcase/doc/inputswitch/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -44,11 +44,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Remember Me - + -` +` }; } diff --git a/src/app/showcase/doc/inputswitch/basicdoc.ts b/src/app/showcase/doc/inputswitch/basicdoc.ts index c125e420160..21002cc5f87 100644 --- a/src/app/showcase/doc/inputswitch/basicdoc.ts +++ b/src/app/showcase/doc/inputswitch/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Two-way value binding is defined using ngModel.

    - +
    ` @@ -17,19 +17,21 @@ export class BasicDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-switch-basic-demo', - templateUrl: './input-switch-basic-demo.html' + templateUrl: './input-switch-basic-demo.html', + standalone: true, + imports: [FormsModule, InputSwitchModule] }) export class InputSwitchBasicDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/inputswitch/disableddoc.ts b/src/app/showcase/doc/inputswitch/disableddoc.ts index e3ab61a1dbe..759dd411dca 100644 --- a/src/app/showcase/doc/inputswitch/disableddoc.ts +++ b/src/app/showcase/doc/inputswitch/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

    - +
    ` @@ -17,19 +17,21 @@ export class DisabledDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-switch-disabled-demo', - templateUrl: './input-switch-disabled-demo.html' + templateUrl: './input-switch-disabled-demo.html', + standalone: true, + imports: [FormsModule, InputSwitchModule] }) export class InputSwitchDisabledDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/inputswitch/importdoc.ts b/src/app/showcase/doc/inputswitch/importdoc.ts index 6e9653642d1..3d464c80b23 100644 --- a/src/app/showcase/doc/inputswitch/importdoc.ts +++ b/src/app/showcase/doc/inputswitch/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/inputswitch/inputswitchdoc.module.ts b/src/app/showcase/doc/inputswitch/inputswitchdoc.module.ts index e06b461f6f9..c2bfef49ec4 100644 --- a/src/app/showcase/doc/inputswitch/inputswitchdoc.module.ts +++ b/src/app/showcase/doc/inputswitch/inputswitchdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { InputSwitchModule } from 'primeng/inputswitch'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { DisabledDoc } from './disableddoc'; diff --git a/src/app/showcase/doc/inputswitch/invaliddoc.ts b/src/app/showcase/doc/inputswitch/invaliddoc.ts index 9285ce40a65..c379980368e 100644 --- a/src/app/showcase/doc/inputswitch/invaliddoc.ts +++ b/src/app/showcase/doc/inputswitch/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

    - +
    ` @@ -17,18 +17,21 @@ export class InvalidDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, html: `
    - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-switch-invalid-demo', - templateUrl: './input-switch-invalid-demo.html' + templateUrl: './input-switch-invalid-demo.html', + standalone: true, + imports: [FormsModule, InputSwitchModule] }) export class InputSwitchInvalidDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/inputswitch/preselectiondoc.ts b/src/app/showcase/doc/inputswitch/preselectiondoc.ts index 4ee945bc3fd..76a664c9615 100644 --- a/src/app/showcase/doc/inputswitch/preselectiondoc.ts +++ b/src/app/showcase/doc/inputswitch/preselectiondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'preselection-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Enabling ngModel property displays the component as active initially.

    - +
    ` @@ -17,19 +17,21 @@ export class PreselectionDoc { checked: boolean = true; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-switch-preselection-demo', - templateUrl: './input-switch-preselection-demo.html' + templateUrl: './input-switch-preselection-demo.html', + standalone: true, + imports: [FormsModule, InputSwitchModule] }) export class InputSwitchPreselectionDemo { checked: boolean = true; diff --git a/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts b/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts index d246eef4390..bf8783a6354 100644 --- a/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
    - +
    @@ -26,20 +26,21 @@ export class ReactiveFormsDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { InputSwitchModule } from 'primeng/inputswitch'; @Component({ selector: 'input-switch-reactive-forms-demo', - templateUrl: './input-switch-reactive-forms-demo.html' + templateUrl: './input-switch-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, InputSwitchModule] }) export class InputSwitchReactiveFormsDemo implements OnInit { formGroup: FormGroup | undefined; diff --git a/src/app/showcase/doc/inputtext/accessibilitydoc.ts b/src/app/showcase/doc/inputtext/accessibilitydoc.ts index eb296edaf70..c3b73412d3c 100644 --- a/src/app/showcase/doc/inputtext/accessibilitydoc.ts +++ b/src/app/showcase/doc/inputtext/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/inputtext/basicdoc.ts b/src/app/showcase/doc/inputtext/basicdoc.ts index 2c756c6e364..7ec9fa7790c 100644 --- a/src/app/showcase/doc/inputtext/basicdoc.ts +++ b/src/app/showcase/doc/inputtext/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -19,17 +19,19 @@ export class BasicDoc { code: Code = { basic: ``, - html: ` -
    + html: `
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextModule } from 'primeng/inputtext'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-text-basic-demo', - templateUrl: './input-text-basic-demo.html' + templateUrl: './input-text-basic-demo.html', + standalone: true, + imports: [FormsModule, InputTextModule] }) export class InputTextBasicDemo { value: string; diff --git a/src/app/showcase/doc/inputtext/disableddoc.ts b/src/app/showcase/doc/inputtext/disableddoc.ts index 388a5192714..fe4ad42c889 100644 --- a/src/app/showcase/doc/inputtext/disableddoc.ts +++ b/src/app/showcase/doc/inputtext/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -17,19 +17,31 @@ export class DisabledDoc { value: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextModule } from 'primeng/inputtext'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-text-disabled-demo', - templateUrl: './input-text-disabled-demo.html' + templateUrl: './input-text-disabled-demo.html', + standalone: true, + imports: [FormsModule, InputTextModule] }) export class InputTextDisabledDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputtext/filleddoc.ts b/src/app/showcase/doc/inputtext/filleddoc.ts new file mode 100644 index 00000000000..ce633edd3d0 --- /dev/null +++ b/src/app/showcase/doc/inputtext/filleddoc.ts @@ -0,0 +1,48 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'filled-doc', + template: ` + +

    Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

    +     +
    + +
    + + ` +}) +export class FilledDoc { + value: string; + + code: Code = { + basic: ``, + + html: `
    + +
    `, + + typescript: `import { Component } from '@angular/core'; +import { InputTextModule } from 'primeng/inputtext'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'input-text-filled-demo', + templateUrl: './input-text-filled-demo.html', + standalone: true, + imports: [FormsModule, InputTextModule] +}) +export class InputTextFilledDemo { + value: string; +}` + }; +} diff --git a/src/app/showcase/doc/inputtext/floatlabeldoc.ts b/src/app/showcase/doc/inputtext/floatlabeldoc.ts index 999bfff3f95..be099990862 100644 --- a/src/app/showcase/doc/inputtext/floatlabeldoc.ts +++ b/src/app/showcase/doc/inputtext/floatlabeldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'floatlabel-doc', @@ -8,10 +8,10 @@ import { Code } from '../../domain/code';

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

    - + - +
    ` @@ -20,25 +20,28 @@ export class FloatLabelDoc { value: string | undefined; code: Code = { - basic: ` + basic: ` -`, +`, - html: ` -
    - + html: `
    + - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextModule } from 'primeng/inputtext'; +import { FormsModule } from '@angular/forms'; +import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ selector: 'input-text-floatlabel-demo', - templateUrl: './input-text-floatlabel-demo.html' + templateUrl: './input-text-floatlabel-demo.html', + standalone: true, + imports: [FormsModule, InputTextModule, FloatLabelModule] }) export class InputTextFloatlabelDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputtext/helptextdoc.ts b/src/app/showcase/doc/inputtext/helptextdoc.ts index ebc28d3bea4..a95ea91dfbe 100644 --- a/src/app/showcase/doc/inputtext/helptextdoc.ts +++ b/src/app/showcase/doc/inputtext/helptextdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'helptext-doc', @@ -23,25 +23,39 @@ export class HelpTextDoc { code: Code = { basic: `
    - - Enter your username to reset your password. + + + Enter your username to reset your password. +
    `, - html: ` -
    + html: `
    - - Enter your username to reset your password. + + + Enter your username to reset your password. +
    `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { InputTextModule } from 'primeng/inputtext'; +import { FormsModule } from '@angular/forms'; + @Component({ selector: 'input-text-help-text-demo', - templateUrl: './input-text-help-text-demo.html' + templateUrl: './input-text-help-text-demo.html', + standalone: true, + imports: [FormsModule, InputTextModule] }) export class InputTextHelpTextDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputtext/iconsdoc.ts b/src/app/showcase/doc/inputtext/iconsdoc.ts index f1f3cfdaf2e..15dff788170 100644 --- a/src/app/showcase/doc/inputtext/iconsdoc.ts +++ b/src/app/showcase/doc/inputtext/iconsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'icons-doc', diff --git a/src/app/showcase/doc/inputtext/importdoc.ts b/src/app/showcase/doc/inputtext/importdoc.ts index ad034136223..2892c218a9d 100644 --- a/src/app/showcase/doc/inputtext/importdoc.ts +++ b/src/app/showcase/doc/inputtext/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/inputtext/inputtextdoc.module.ts b/src/app/showcase/doc/inputtext/inputtextdoc.module.ts index 49a2b410513..97475ab2b25 100644 --- a/src/app/showcase/doc/inputtext/inputtextdoc.module.ts +++ b/src/app/showcase/doc/inputtext/inputtextdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { KeyFilterModule } from 'primeng/keyfilter'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DisabledDoc } from './disableddoc'; @@ -17,10 +17,12 @@ import { KeyFilterDoc } from './keyfilterdoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { SizesDoc } from './sizesdoc'; import { StyleDoc } from './styledoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { FilledDoc } from './filleddoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, InputTextModule, FormsModule, ReactiveFormsModule, AppDocModule, KeyFilterModule], - declarations: [BasicDoc, DisabledDoc, FloatLabelDoc, HelpTextDoc, IconsDoc, InvalidDoc, KeyFilterDoc, SizesDoc, ImportDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc], + imports: [CommonModule, AppCodeModule, InputTextModule, FormsModule, ReactiveFormsModule, AppDocModule, KeyFilterModule, FloatLabelModule], + declarations: [BasicDoc, DisabledDoc, FloatLabelDoc, HelpTextDoc, IconsDoc, InvalidDoc, KeyFilterDoc, SizesDoc, ImportDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc], exports: [AppDocModule] }) export class InputtextDocModule {} diff --git a/src/app/showcase/doc/inputtext/invaliddoc.ts b/src/app/showcase/doc/inputtext/invaliddoc.ts index ae8f892c069..f6b077a562d 100644 --- a/src/app/showcase/doc/inputtext/invaliddoc.ts +++ b/src/app/showcase/doc/inputtext/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -17,19 +17,27 @@ export class InvalidDoc { value: string | undefined; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextModule } from 'primeng/inputtext'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-text-invalid-demo', - templateUrl: './input-text-invalid-demo.html' + templateUrl: './input-text-invalid-demo.html', + standalone: true, + imports: [FormsModule, InputTextModule] }) export class InputTextInvalidDemo { value: string | undefined; diff --git a/src/app/showcase/doc/inputtext/keyfilterdoc.ts b/src/app/showcase/doc/inputtext/keyfilterdoc.ts index cd389f03cc6..f9a08a30da4 100644 --- a/src/app/showcase/doc/inputtext/keyfilterdoc.ts +++ b/src/app/showcase/doc/inputtext/keyfilterdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'key-filter-doc', diff --git a/src/app/showcase/doc/inputtext/reactiveformsdoc.ts b/src/app/showcase/doc/inputtext/reactiveformsdoc.ts index b4a84326a9a..3d32d25b5dd 100644 --- a/src/app/showcase/doc/inputtext/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputtext/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -26,20 +26,21 @@ export class ReactiveFormsDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'input-text-reactive-forms-demo', - templateUrl: './input-text-reactive-forms-demo.html' + templateUrl: './input-text-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, InputTextModule] }) export class InputTextReactiveFormsDemo implements OnInit { formGroup: FormGroup | undefined; diff --git a/src/app/showcase/doc/inputtext/sizesdoc.ts b/src/app/showcase/doc/inputtext/sizesdoc.ts index 0701de982b7..b998a2f4a7e 100644 --- a/src/app/showcase/doc/inputtext/sizesdoc.ts +++ b/src/app/showcase/doc/inputtext/sizesdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'sizes-doc', @@ -27,8 +27,7 @@ export class SizesDoc { `, - html: ` -
    + html: `
    diff --git a/src/app/showcase/doc/inputtextarea/accessibilitydoc.ts b/src/app/showcase/doc/inputtextarea/accessibilitydoc.ts index 5700a26cefd..db9440c7041 100644 --- a/src/app/showcase/doc/inputtextarea/accessibilitydoc.ts +++ b/src/app/showcase/doc/inputtextarea/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -38,11 +38,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - Address 2 - -` }; } diff --git a/src/app/showcase/doc/inputtextarea/autoresizedoc.ts b/src/app/showcase/doc/inputtextarea/autoresizedoc.ts index 92403d9bab6..2c7c5dbed70 100644 --- a/src/app/showcase/doc/inputtextarea/autoresizedoc.ts +++ b/src/app/showcase/doc/inputtextarea/autoresizedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'autoresize-doc', @@ -15,19 +15,31 @@ import { Code } from '../../domain/code'; }) export class AutoResizeDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextareaModule } from 'primeng/inputtextarea'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-textarea-auto-resize-demo', - templateUrl: './input-textarea-auto-resize-demo.html' + templateUrl: './input-textarea-auto-resize-demo.html', + standalone: true, + imports: [FormsModule, InputTextareaModule] }) export class InputTextareaAutoResizeDemo { }` diff --git a/src/app/showcase/doc/inputtextarea/basicdoc.ts b/src/app/showcase/doc/inputtextarea/basicdoc.ts index 6ee9befdf73..926bbf7a6eb 100644 --- a/src/app/showcase/doc/inputtextarea/basicdoc.ts +++ b/src/app/showcase/doc/inputtextarea/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -17,20 +17,33 @@ export class BasicDoc { value!: string; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextareaModule } from 'primeng/inputtextarea'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-textarea-basic-demo', - templateUrl: './input-textarea-basic-demo.html' + templateUrl: './input-textarea-basic-demo.html', + standalone: true, + imports: [FormsModule, InputTextareaModule] }) + export class InputTextareaBasicDemo { value!: string; }` diff --git a/src/app/showcase/doc/inputtextarea/disableddoc.ts b/src/app/showcase/doc/inputtextarea/disableddoc.ts index d425a4a3f86..4b6eb6d82a2 100644 --- a/src/app/showcase/doc/inputtextarea/disableddoc.ts +++ b/src/app/showcase/doc/inputtextarea/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -15,19 +15,31 @@ import { Code } from '../../domain/code'; }) export class DisabledDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextareaModule } from 'primeng/inputtextarea'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-textarea-disabled-demo', - templateUrl: './input-textarea-disabled-demo.html' + templateUrl: './input-textarea-disabled-demo.html', + standalone: true, + imports: [FormsModule, InputTextareaModule] }) export class InputTextareaDisabledDemo { }` diff --git a/src/app/showcase/doc/inputtextarea/filleddoc.ts b/src/app/showcase/doc/inputtextarea/filleddoc.ts new file mode 100644 index 00000000000..2b9d20200ef --- /dev/null +++ b/src/app/showcase/doc/inputtextarea/filleddoc.ts @@ -0,0 +1,53 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'filled-doc', + template: ` + +

    Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

    +     +
    + +
    + + ` +}) +export class FilledDoc { + value!: string; + + code: Code = { + basic: ``, + + html: `
    + +
    `, + + typescript: `import { Component } from '@angular/core'; +import { InputTextareaModule } from 'primeng/inputtextarea'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'input-textarea-filled-demo', + templateUrl: './input-textarea-filled-demo.html', + standalone: true, + imports: [FormsModule, InputTextareaModule] +}) + +export class InputTextareaFilledDemo { + value!: string; +}` + }; +} diff --git a/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts b/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts index d804c0468c1..18dc6a537ad 100644 --- a/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts +++ b/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts @@ -1,42 +1,54 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'floatlabel-doc', template: ` -

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

    +

    A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
    - + - +
    ` }) export class FloatlabelDoc { code: Code = { - basic: ` - + basic: ` + -`, +`, - html: ` -
    - - + html: `
    + + - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextareaModule } from 'primeng/inputtextarea'; +import { FormsModule } from '@angular/forms'; +import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ selector: ': 'input-textarea-floatlabel-demo', - templateUrl: './: 'input-textarea-floatlabel-demo.html' + templateUrl: './: 'input-textarea-floatlabel-demo.html', + standalone: true, + imports: [FormsModule, InputTextareaModule, FloatLabelModule] }) export class InputTextareaFloatlabelDemo { }` diff --git a/src/app/showcase/doc/inputtextarea/importdoc.ts b/src/app/showcase/doc/inputtextarea/importdoc.ts index 2cb739a2797..cbec64bd979 100644 --- a/src/app/showcase/doc/inputtextarea/importdoc.ts +++ b/src/app/showcase/doc/inputtextarea/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/inputtextarea/inputtextareadoc.module.ts b/src/app/showcase/doc/inputtextarea/inputtextareadoc.module.ts index b6aef933df0..3bd3abdee6d 100644 --- a/src/app/showcase/doc/inputtextarea/inputtextareadoc.module.ts +++ b/src/app/showcase/doc/inputtextarea/inputtextareadoc.module.ts @@ -4,8 +4,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { InputTextareaModule } from 'primeng/inputtextarea'; import { KeyFilterModule } from 'primeng/keyfilter'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { AutoResizeDoc } from './autoresizedoc'; import { BasicDoc } from './basicdoc'; @@ -16,10 +16,13 @@ import { ImportDoc } from './importdoc'; import { KeyfilterDoc } from './keyfilterdoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; +import { FilledDoc } from './filleddoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { RouterModule } from '@angular/router'; @NgModule({ - imports: [CommonModule, AppCodeModule, InputTextModule, FormsModule, ReactiveFormsModule, InputTextareaModule, AppDocModule, KeyFilterModule], + imports: [CommonModule, AppCodeModule, InputTextModule, FormsModule, ReactiveFormsModule, InputTextareaModule, AppDocModule, KeyFilterModule, FloatLabelModule, RouterModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, AutoResizeDoc, FloatlabelDoc, InvalidDoc, DisabledDoc, KeyfilterDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, AutoResizeDoc, FloatlabelDoc, InvalidDoc, DisabledDoc, KeyfilterDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] }) export class InputtextareaDocModule {} diff --git a/src/app/showcase/doc/inputtextarea/invaliddoc.ts b/src/app/showcase/doc/inputtextarea/invaliddoc.ts index fd876ced01c..78f8a2f81a1 100644 --- a/src/app/showcase/doc/inputtextarea/invaliddoc.ts +++ b/src/app/showcase/doc/inputtextarea/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -17,19 +17,33 @@ export class InvalidDoc { value!: string; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextareaModule } from 'primeng/inputtextarea'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'input-textarea-invalid-demo', - templateUrl: './input-textarea-invalid-demo.html' + templateUrl: './input-textarea-invalid-demo.html', + standalone: true, + imports: [FormsModule, InputTextareaModule] }) export class InputTextareaInvalidDemo { value!: string; diff --git a/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts b/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts index 3f84e68f07f..2ddafcc9cdb 100644 --- a/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts +++ b/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'key-filter-doc', @@ -15,19 +15,31 @@ import { Code } from '../../domain/code'; }) export class KeyfilterDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { InputTextareaModule } from 'primeng/inputtextarea'; +import { FormsModule } from '@angular/forms'; @Component({ selector:'input-textarea-key-filter-demo', - templateUrl: './input-textarea-key-filter-demo.html' + templateUrl: './input-textarea-key-filter-demo.html', + standalone: true, + imports: [FormsModule, InputTextareaModule] }) export class InputTextareaKeyFilterDemo { }` diff --git a/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts b/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts index 5ede07f730f..53dbf3845bc 100644 --- a/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -27,23 +27,34 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
    - +
    `, - html: ` -
    + html: `
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { InputTextareaModule } from 'primeng/inputtextarea'; @Component({ selector: 'input-textarea-reactive-forms-demo', - templateUrl: './input-textarea-reactive-forms-demo.html' + templateUrl: './input-textarea-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, InputTextareaModule], }) export class InputTextareaReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/installation/animationsdoc.ts b/src/app/showcase/doc/installation/animationsdoc.ts index 8aab3c4ee8d..1e8fdc629c4 100644 --- a/src/app/showcase/doc/installation/animationsdoc.ts +++ b/src/app/showcase/doc/installation/animationsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'animations-doc', diff --git a/src/app/showcase/doc/installation/downloaddoc.ts b/src/app/showcase/doc/installation/downloaddoc.ts index afe7579466d..c48b4809a1c 100644 --- a/src/app/showcase/doc/installation/downloaddoc.ts +++ b/src/app/showcase/doc/installation/downloaddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'download-doc', diff --git a/src/app/showcase/doc/installation/installationdoc.module.ts b/src/app/showcase/doc/installation/installationdoc.module.ts index a56ebaaf4cb..a8b3653044e 100644 --- a/src/app/showcase/doc/installation/installationdoc.module.ts +++ b/src/app/showcase/doc/installation/installationdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AnimationsDoc } from './animationsdoc'; import { DownloadDoc } from './downloaddoc'; import { ExamplesDoc } from './examplesdoc'; diff --git a/src/app/showcase/doc/installation/stylesdoc.ts b/src/app/showcase/doc/installation/stylesdoc.ts index f16fb4f0c52..72b88b33f86 100644 --- a/src/app/showcase/doc/installation/stylesdoc.ts +++ b/src/app/showcase/doc/installation/stylesdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'styles-doc', diff --git a/src/app/showcase/doc/installation/usagedoc.ts b/src/app/showcase/doc/installation/usagedoc.ts index e03c1bb9311..a1571733ccb 100644 --- a/src/app/showcase/doc/installation/usagedoc.ts +++ b/src/app/showcase/doc/installation/usagedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'usage-doc', diff --git a/src/app/showcase/doc/keyfilter/importdoc.ts b/src/app/showcase/doc/keyfilter/importdoc.ts index 7231077703a..ee2ba0bd84c 100644 --- a/src/app/showcase/doc/keyfilter/importdoc.ts +++ b/src/app/showcase/doc/keyfilter/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/keyfilter/keyfilterdoc.module.ts b/src/app/showcase/doc/keyfilter/keyfilterdoc.module.ts index 9d1c9c84555..a2abb8a97ff 100644 --- a/src/app/showcase/doc/keyfilter/keyfilterdoc.module.ts +++ b/src/app/showcase/doc/keyfilter/keyfilterdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; import { KeyFilterModule } from 'primeng/keyfilter'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { ImportDoc } from './importdoc'; import { PresetsDoc } from './presetsdoc'; diff --git a/src/app/showcase/doc/keyfilter/presetsdoc.ts b/src/app/showcase/doc/keyfilter/presetsdoc.ts index 57aadfa52bd..cd5a3d1d486 100644 --- a/src/app/showcase/doc/keyfilter/presetsdoc.ts +++ b/src/app/showcase/doc/keyfilter/presetsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'presets-doc', @@ -49,8 +49,7 @@ export class PresetsDoc { `, - html: ` -
    + html: `
    @@ -81,12 +80,15 @@ export class PresetsDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'key-filter-presets-demo', - templateUrl: './key-filter-presets-demo.html' + templateUrl: './key-filter-presets-demo.html', + standalone: true, + imports: [FormsModule, InputTextModule] }) export class KeyFilterPresetsDemo {}` }; diff --git a/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts b/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts index 096524592d7..9c5d72a29ea 100644 --- a/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts +++ b/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -29,24 +29,25 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
    - +
    `, - html: ` -
    + html: `
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'key-filter-reactive-forms-demo', - templateUrl: './key-filter-reactive-forms-demo.html' + templateUrl: './key-filter-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, InputTextModule] }) export class KeyFilterReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/keyfilter/regexdoc.ts b/src/app/showcase/doc/keyfilter/regexdoc.ts index 138dd5d5a18..ab5c57e3bb5 100644 --- a/src/app/showcase/doc/keyfilter/regexdoc.ts +++ b/src/app/showcase/doc/keyfilter/regexdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reg-exp-demo', @@ -28,8 +28,7 @@ export class RegexDoc { basic: ` `, - html: ` -
    + html: `
    @@ -40,12 +39,15 @@ export class RegexDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'key-filter-reg-exp-demo', - templateUrl: './key-filter-reg-exp-demo.html' + templateUrl: './key-filter-reg-exp-demo.html', + standalone: true, + imports: [FormsModule, InputTextModule] }) export class KeyFilterRegExpDemo { blockSpace: RegExp = /[^\s]/; diff --git a/src/app/showcase/doc/knob/accessibilitydoc.ts b/src/app/showcase/doc/knob/accessibilitydoc.ts index 24b130514e0..92e2fb89063 100644 --- a/src/app/showcase/doc/knob/accessibilitydoc.ts +++ b/src/app/showcase/doc/knob/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -80,8 +80,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: `Number - + -` +` }; } diff --git a/src/app/showcase/doc/knob/basicdoc.ts b/src/app/showcase/doc/knob/basicdoc.ts index 2cdd14715d7..e8b2bc0a9e0 100644 --- a/src/app/showcase/doc/knob/basicdoc.ts +++ b/src/app/showcase/doc/knob/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Knob is an input component and used with the standard ngModel directive.

    - +
    ` @@ -17,19 +17,21 @@ export class BasicDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-basic-demo', - templateUrl: './knob-basic-demo.html' + templateUrl: './knob-basic-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobBasicDemo { value!: number; diff --git a/src/app/showcase/doc/knob/colordoc.ts b/src/app/showcase/doc/knob/colordoc.ts index 4527a3ddaf8..81d2b3c8083 100644 --- a/src/app/showcase/doc/knob/colordoc.ts +++ b/src/app/showcase/doc/knob/colordoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'color-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Colors are customized with the textColor, rangeColor and valueColor properties.

    - +
    ` @@ -17,19 +17,21 @@ export class ColorDoc { value: number = 50; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; + @Component({ selector: 'knob-color-demo', - templateUrl: './knob-color-demo.html' + templateUrl: './knob-color-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobColorDemo { value: number = 50; diff --git a/src/app/showcase/doc/knob/disableddoc.ts b/src/app/showcase/doc/knob/disableddoc.ts index 6f078bca990..f241f8fa2bf 100644 --- a/src/app/showcase/doc/knob/disableddoc.ts +++ b/src/app/showcase/doc/knob/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -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,19 +17,21 @@ export class DisabledDoc { value: number = 75; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-disabled-demo', - templateUrl: './knob-disabled-demo.html' + templateUrl: './knob-disabled-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobDisabledDemo { value: number = 75; diff --git a/src/app/showcase/doc/knob/importdoc.ts b/src/app/showcase/doc/knob/importdoc.ts index 777f9c5f48d..ad7a6d68191 100644 --- a/src/app/showcase/doc/knob/importdoc.ts +++ b/src/app/showcase/doc/knob/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/knob/knobdoc.module.ts b/src/app/showcase/doc/knob/knobdoc.module.ts index 56b3199aead..a9ee9817f2d 100644 --- a/src/app/showcase/doc/knob/knobdoc.module.ts +++ b/src/app/showcase/doc/knob/knobdoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { KnobModule } from 'primeng/knob'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/knob/minmaxdoc.ts b/src/app/showcase/doc/knob/minmaxdoc.ts index c3382d00bb4..9258410eb87 100644 --- a/src/app/showcase/doc/knob/minmaxdoc.ts +++ b/src/app/showcase/doc/knob/minmaxdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'min-max-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Boundaries are configured with the min and max properties whose defaults are 0 and 100 respectively.

    - +
    ` @@ -17,19 +17,21 @@ export class MinMaxDoc { value: number = 10; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-min-max-demo', - templateUrl: './knob-min-max-demo.html' + templateUrl: './knob-min-max-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobMinMaxDemo { value: number = 10; diff --git a/src/app/showcase/doc/knob/reactivedoc.ts b/src/app/showcase/doc/knob/reactivedoc.ts index 420d2307a66..1b62038169e 100644 --- a/src/app/showcase/doc/knob/reactivedoc.ts +++ b/src/app/showcase/doc/knob/reactivedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Knob can be controlled with custom controls as well.

    - +
    @@ -21,26 +21,42 @@ export class ReactiveDoc { value: number = 0; code: Code = { - basic: ` + basic: `
    - - + +
    `, html: `
    - +
    - - + +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'knob-reactive-demo', - templateUrl: './knob-reactive-demo.html' + templateUrl: './knob-reactive-demo.html', + standalone: true, + imports: [FormsModule, KnobModule, ButtonModule] }) export class KnobReactiveDemo { value: number = 0; diff --git a/src/app/showcase/doc/knob/reactiveformsdoc.ts b/src/app/showcase/doc/knob/reactiveformsdoc.ts index 63751f56f40..899151ac20d 100644 --- a/src/app/showcase/doc/knob/reactiveformsdoc.ts +++ b/src/app/showcase/doc/knob/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
    - +
    @@ -27,23 +27,24 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
    - + `, - html: ` -
    + html: `
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-reactive-forms-demo', - templateUrl: './knob-reactive-forms-demo.html' + templateUrl: './knob-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, KnobModule] }) export class KnobReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/knob/readonlydoc.ts b/src/app/showcase/doc/knob/readonlydoc.ts index d94d2dcc5cf..b5861f78e05 100644 --- a/src/app/showcase/doc/knob/readonlydoc.ts +++ b/src/app/showcase/doc/knob/readonlydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'readonly-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    When readonly present, value cannot be edited.

    - +
    ` @@ -17,19 +17,21 @@ export class ReadonlyDoc { value: number = 50; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-readonly-demo', - templateUrl: './knob-readonly-demo.html' + templateUrl: './knob-readonly-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobReadonlyDemo { value: number = 50; diff --git a/src/app/showcase/doc/knob/sizedoc.ts b/src/app/showcase/doc/knob/sizedoc.ts index ee5fd8cda0a..77f2aedad49 100644 --- a/src/app/showcase/doc/knob/sizedoc.ts +++ b/src/app/showcase/doc/knob/sizedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'size-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Diameter of the knob is defined in pixels using the size property.

    - +
    ` @@ -17,19 +17,21 @@ export class SizeDoc { value: number = 60; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-size-demo', - templateUrl: './knob-size-demo.html' + templateUrl: './knob-size-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobSizeDemo { value: number = 60; diff --git a/src/app/showcase/doc/knob/stepdoc.ts b/src/app/showcase/doc/knob/stepdoc.ts index aac70b52838..6019c7c976f 100644 --- a/src/app/showcase/doc/knob/stepdoc.ts +++ b/src/app/showcase/doc/knob/stepdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'step-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Size of each movement is defined with the step property.

    - +
    ` @@ -17,19 +17,21 @@ export class StepDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-step-demo', - templateUrl: './knob-step-demo.html' + templateUrl: './knob-step-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobStepDemo { value!: number; diff --git a/src/app/showcase/doc/knob/strokedoc.ts b/src/app/showcase/doc/knob/strokedoc.ts index b52ea030b51..9452a0f14b8 100644 --- a/src/app/showcase/doc/knob/strokedoc.ts +++ b/src/app/showcase/doc/knob/strokedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'stroke-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    The border size is specified with the strokeWidth property as a number in pixels.

    - +
    ` @@ -17,19 +17,21 @@ export class StrokeDoc { value: number = 40; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-stroke-demo', - templateUrl: './knob-stroke-demo.html' + templateUrl: './knob-stroke-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobStrokeDemo { value: number = 40; diff --git a/src/app/showcase/doc/knob/templatedoc.ts b/src/app/showcase/doc/knob/templatedoc.ts index 0ba17b95cd9..0a3ec3d3b83 100644 --- a/src/app/showcase/doc/knob/templatedoc.ts +++ b/src/app/showcase/doc/knob/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder .

    - +
    ` @@ -17,19 +17,21 @@ export class TemplateDoc { value: number = 60; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { KnobModule } from 'primeng/knob'; @Component({ selector: 'knob-template-demo', - templateUrl: './knob-template-demo.html' + templateUrl: './knob-template-demo.html', + standalone: true, + imports: [FormsModule, KnobModule] }) export class KnobTemplateDemo { value: number = 60; diff --git a/src/app/showcase/doc/listbox/accessibilitydoc.ts b/src/app/showcase/doc/listbox/accessibilitydoc.ts index d9749e1556d..ccefc908bc5 100644 --- a/src/app/showcase/doc/listbox/accessibilitydoc.ts +++ b/src/app/showcase/doc/listbox/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -98,8 +98,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/listbox/basicdoc.ts b/src/app/showcase/doc/listbox/basicdoc.ts index b21e4d99556..32ae3d887f5 100644 --- a/src/app/showcase/doc/listbox/basicdoc.ts +++ b/src/app/showcase/doc/listbox/basicdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -17,7 +17,7 @@ interface City {

    - +
    ` @@ -38,15 +38,25 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; interface City { name: string, @@ -55,7 +65,9 @@ interface City { @Component({ selector: 'listbox-basic-demo', - templateUrl: './listbox-basic-demo.html' + templateUrl: './listbox-basic-demo.html', + standalone: true, + imports: [FormsModule, ListboxModule] }) export class ListboxBasicDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/listbox/disableddoc.ts b/src/app/showcase/doc/listbox/disableddoc.ts index 23a7e5a0d12..066ee18fd97 100644 --- a/src/app/showcase/doc/listbox/disableddoc.ts +++ b/src/app/showcase/doc/listbox/disableddoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

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

    - +
    ` @@ -34,15 +34,27 @@ export class DisabledDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; interface City { name: string, @@ -51,7 +63,9 @@ interface City { @Component({ selector: 'listbox-disabled-demo', - templateUrl: './listbox-disabled-demo.html' + templateUrl: './listbox-disabled-demo.html', + standalone: true, + imports: [FormsModule, ListboxModule] }) export class ListboxDisabledDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/listbox/filterdoc.ts b/src/app/showcase/doc/listbox/filterdoc.ts index 0736c98d5cf..5bac2d0db8d 100644 --- a/src/app/showcase/doc/listbox/filterdoc.ts +++ b/src/app/showcase/doc/listbox/filterdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

    ListBox provides built-in filtering that is enabled by adding the filter property.

    - +
    ` @@ -34,15 +34,27 @@ export class FilterDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; interface City { name: string, @@ -51,7 +63,9 @@ interface City { @Component({ selector: 'listbox-filter-demo', - templateUrl: './listbox-filter-demo.html' + templateUrl: './listbox-filter-demo.html', + standalone: true, + imports: [FormsModule, ListboxModule] }) export class ListboxFilterDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/listbox/groupdoc.ts b/src/app/showcase/doc/listbox/groupdoc.ts index e78b4a65f75..e21b850a200 100644 --- a/src/app/showcase/doc/listbox/groupdoc.ts +++ b/src/app/showcase/doc/listbox/groupdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { SelectItemGroup } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface Country { name: string; @@ -67,30 +67,46 @@ export class GroupDoc { } code: Code = { - basic: ` - -
    - - {{ group.label }} -
    -     -    `, - - html: ` -
    - + basic: `
    - + {{ group.label }}
    +    `, + + html: `
    + + +
    + + {{ group.label }} +
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { SelectItemGroup } from 'primeng/api'; +import { FormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; interface Country { name: string, @@ -99,7 +115,9 @@ interface Country { @Component({ selector: 'listbox-group-demo', - templateUrl: './listbox-group-demo.html' + templateUrl: './listbox-group-demo.html', + standalone: true, + imports: [FormsModule, ListboxModule] }) export class ListboxGroupDemo { groupedCities!: SelectItemGroup[]; diff --git a/src/app/showcase/doc/listbox/importdoc.ts b/src/app/showcase/doc/listbox/importdoc.ts index 799b36937ef..839dd536823 100644 --- a/src/app/showcase/doc/listbox/importdoc.ts +++ b/src/app/showcase/doc/listbox/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/listbox/invaliddoc.ts b/src/app/showcase/doc/listbox/invaliddoc.ts index f06dea3f1a0..886990e6ec9 100644 --- a/src/app/showcase/doc/listbox/invaliddoc.ts +++ b/src/app/showcase/doc/listbox/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

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

    - +
    ` @@ -34,15 +34,27 @@ export class InvalidDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, ngOnInit } from '@angular/core'; + typescript: `import { Component, ngOnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; interface City { name: string, @@ -51,7 +63,9 @@ interface City { @Component({ selector: 'listbox-invalid-demo', - templateUrl: './listbox-invalid-demo.html' + templateUrl: './listbox-invalid-demo.html', + standalone: true, + imports: [FormsModule, ListboxModule] }) export class ListboxInvalidDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/listbox/listboxdoc.module.ts b/src/app/showcase/doc/listbox/listboxdoc.module.ts index 6e98e10497b..cf55e085135 100644 --- a/src/app/showcase/doc/listbox/listboxdoc.module.ts +++ b/src/app/showcase/doc/listbox/listboxdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { ListboxModule } from 'primeng/listbox'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DisabledDoc } from './disableddoc'; diff --git a/src/app/showcase/doc/listbox/multipledoc.ts b/src/app/showcase/doc/listbox/multipledoc.ts index 64f45db88de..7c5808b9e7c 100644 --- a/src/app/showcase/doc/listbox/multipledoc.ts +++ b/src/app/showcase/doc/listbox/multipledoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -16,7 +16,7 @@ interface City {

    - +
    ` @@ -37,15 +37,29 @@ export class MultipleDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; interface City { name: string, @@ -54,7 +68,9 @@ interface City { @Component({ selector: 'listbox-multiple-demo', - templateUrl: './listbox-multiple-demo.html' + templateUrl: './listbox-multiple-demo.html', + standalone: true, + imports: [FormsModule, ListboxModule] }) export class ListboxMultipleDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/listbox/reactiveformsdoc.ts b/src/app/showcase/doc/listbox/reactiveformsdoc.ts index 0d78637af8e..3aae8a058fe 100644 --- a/src/app/showcase/doc/listbox/reactiveformsdoc.ts +++ b/src/app/showcase/doc/listbox/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -15,7 +15,7 @@ interface City {
    - +
    @@ -42,19 +42,28 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
    - + `, - html: ` -
    + html: `
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; interface City { name: string, @@ -63,7 +72,9 @@ interface City { @Component({ selector: 'listbox-reactive-forms-demo', - templateUrl: './listbox-reactive-forms-demo.html' + templateUrl: './listbox-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, ListboxModule] }) export class ListboxReactiveFormsDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/listbox/templatedoc.ts b/src/app/showcase/doc/listbox/templatedoc.ts index d6d3474664b..88ff7bf904d 100644 --- a/src/app/showcase/doc/listbox/templatedoc.ts +++ b/src/app/showcase/doc/listbox/templatedoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface Country { name: string; @@ -46,29 +46,47 @@ export class TemplateDoc implements OnInit { } code: Code = { - basic: ` - -
    - -
    {{ country.name }}
    -
    -     -    `, - - html: ` -
    - + basic: `
    - +
    {{ country.name }}
     +    `, + + html: `
    + + +
    + +
    {{ country.name }}
    +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; interface Country { name: string, @@ -77,7 +95,9 @@ interface Country { @Component({ selector: 'listbox-template-demo', - templateUrl: './listbox-template-demo.html' + templateUrl: './listbox-template-demo.html', + standalone: true, + imports: [FormsModule, ListboxModule] }) export class ListboxTemplateDemo implements OnInit { countries!: Country[]; diff --git a/src/app/showcase/doc/listbox/virtualscrolldoc.ts b/src/app/showcase/doc/listbox/virtualscrolldoc.ts index 7652075addb..5b4934e8ce2 100644 --- a/src/app/showcase/doc/listbox/virtualscrolldoc.ts +++ b/src/app/showcase/doc/listbox/virtualscrolldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'virtual-scroll-doc', @@ -18,17 +18,13 @@ import { Code } from '../../domain/code'; optionLabel="label" [style]="{ width: '15rem' }" [virtualScroll]="true" - [filter]="true" - [virtualScrollItemSize]="43" + [virtualScrollItemSize]="38" [multiple]="true" - [checkbox]="true" - [showToggleAll]="false" [metaKeySelection]="false" - [showToggleAll]="true" (onSelectAllChange)="onSelectAllChange($event)" (onChange)="onChange($event)" - [listStyle]="{ 'max-height': '220px' }" - >     + scrollHeight="250px" + />
    ` @@ -58,20 +54,14 @@ export class VirtualScrollDoc { optionLabel="label" [style]="{ width: '15rem' }" [virtualScroll]="true" - [filter]="true" - [virtualScrollItemSize]="43" + [virtualScrollItemSize]="38" [multiple]="true" - [checkbox]="true" - [showToggleAll]="false" [metaKeySelection]="false" - [showToggleAll]="true" (onSelectAllChange)="onSelectAllChange($event)" (onChange)="onChange($event)" - [listStyle]="{ 'max-height': '220px' }" ->`, + scrollHeight="250px" />`, - html: ` -
    + html: `
    + scrollHeight="250px" />
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ListboxModule } from 'primeng/listbox'; @Component({ selector: 'listbox-virtual-scroll-demo', - templateUrl: './listbox-virtual-scroll-demo.html' + templateUrl: './listbox-virtual-scroll-demo.html', + standalone: true, + imports: [FormsModule, ListboxModule] }) export class ListboxVirtualScrollDemo { items = Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })) diff --git a/src/app/showcase/doc/megamenu/basicdoc.ts b/src/app/showcase/doc/megamenu/basicdoc.ts index 85d98866b16..c381e0570b4 100644 --- a/src/app/showcase/doc/megamenu/basicdoc.ts +++ b/src/app/showcase/doc/megamenu/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MegaMenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    MegaMenu requires a collection of menuitems as its model.

    - +
    ` @@ -20,137 +20,118 @@ export class BasicDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'Videos', - icon: 'pi pi-fw pi-video', + label: 'Furniture', + icon: 'pi pi-box', items: [ [ { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] + label: 'Living Room', + items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }] + } + ], + [ + { + label: 'Kitchen', + items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }] }, { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] + label: 'Bathroom', + items: [{ label: 'Accessories' }] } ], [ { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, + label: 'Bedroom', + items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }] + } + ], + [ { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] + label: 'Office', + items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }] } ] ] }, { - label: 'Users', - icon: 'pi pi-fw pi-users', + label: 'Electronics', + icon: 'pi pi-mobile', items: [ [ { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] + label: 'Computer', + items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }] } ], [ { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] + label: 'Home Theather', + items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }] } ], [ { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, + label: 'Gaming', + items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }] + } + ], + [ { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] + label: 'Appliances', + items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }] } ] ] }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + label: 'Sports', + icon: 'pi pi-clock', items: [ [ { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] + label: 'Football', + items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }] } ], [ { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] + label: 'Running', + items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }] } - ] - ] - }, - { - label: 'Settings', - icon: 'pi pi-fw pi-cog', - items: [ + ], [ { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] + label: 'Swimming', + items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }] } ], [ { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] + label: 'Tennis', + items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }] } ] ] } - ]; + ] } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MegaMenuItem } from 'primeng/api'; +import { MegaMenuModule } from 'primeng/megamenu'; @Component({ selector: 'mega-menu-basic-demo', - templateUrl: './mega-menu-basic-demo.html' + templateUrl: './mega-menu-basic-demo.html', + standalone: true, + imports: [MegaMenuModule] }) export class MegaMenuBasicDemo implements OnInit { items: MegaMenuItem[] | undefined; @@ -158,120 +139,100 @@ export class MegaMenuBasicDemo implements OnInit { ngOnInit() { this.items = [ { - label: 'Videos', - icon: 'pi pi-fw pi-video', + label: 'Furniture', + icon: 'pi pi-box', items: [ [ { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] + label: 'Living Room', + items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }] + } + ], + [ + { + label: 'Kitchen', + items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }] }, { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] + label: 'Bathroom', + items: [{ label: 'Accessories' }] } ], [ { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, + label: 'Bedroom', + items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }] + } + ], + [ { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] + label: 'Office', + items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }] } ] ] }, { - label: 'Users', - icon: 'pi pi-fw pi-users', + label: 'Electronics', + icon: 'pi pi-mobile', items: [ [ { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] + label: 'Computer', + items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }] } ], [ { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] + label: 'Home Theather', + items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }] } ], [ { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, + label: 'Gaming', + items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }] + } + ], + [ { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] + label: 'Appliances', + items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }] } ] ] }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + label: 'Sports', + icon: 'pi pi-clock', items: [ [ { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] + label: 'Football', + items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }] } ], [ { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] + label: 'Running', + items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }] } - ] - ] - }, - { - label: 'Settings', - icon: 'pi pi-fw pi-cog', - items: [ + ], [ { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] + label: 'Swimming', + items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }] } ], [ { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] + label: 'Tennis', + items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }] } ] ] } - ]; + ] } }` }; diff --git a/src/app/showcase/doc/megamenu/commanddoc.ts b/src/app/showcase/doc/megamenu/commanddoc.ts new file mode 100644 index 00000000000..9c6fd48ed65 --- /dev/null +++ b/src/app/showcase/doc/megamenu/commanddoc.ts @@ -0,0 +1,23 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'command-doc', + template: ` + +

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

    +     + + ` +}) +export class CommandDoc { + code: Code = { + basic: `{ + label: 'Log out', + icon: 'pi pi-signout', + command: () => { + // Callback to run + } +}` + }; +} diff --git a/src/app/showcase/doc/megamenu/importdoc.ts b/src/app/showcase/doc/megamenu/importdoc.ts index b289263c15a..63c9a35f1c2 100644 --- a/src/app/showcase/doc/megamenu/importdoc.ts +++ b/src/app/showcase/doc/megamenu/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/megamenu/megamenudoc.module.ts b/src/app/showcase/doc/megamenu/megamenudoc.module.ts index f0529eae36e..d3c62fb10e9 100644 --- a/src/app/showcase/doc/megamenu/megamenudoc.module.ts +++ b/src/app/showcase/doc/megamenu/megamenudoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { StyleDoc } from './styledoc'; @@ -12,10 +12,13 @@ import { MegaMenuModule } from 'primeng/megamenu'; import { InputTextModule } from 'primeng/inputtext'; import { ButtonModule } from 'primeng/button'; import { AccessibilityDoc } from './accessibilitydoc'; +import { AvatarModule } from 'primeng/avatar'; +import { CommandDoc } from './commanddoc'; +import { RouterDoc } from './routerdoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, MegaMenuModule, InputTextModule, ButtonModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, StyleDoc, TemplateDoc, VerticalDoc, AccessibilityDoc], + imports: [CommonModule, AppCodeModule, RouterModule, MegaMenuModule, InputTextModule, ButtonModule, AppDocModule, AvatarModule], + declarations: [BasicDoc, ImportDoc, StyleDoc, TemplateDoc, VerticalDoc, CommandDoc,RouterDoc, AccessibilityDoc], exports: [AppDocModule] }) export class MegaMenuDocModule {} diff --git a/src/app/showcase/doc/megamenu/routerdoc.ts b/src/app/showcase/doc/megamenu/routerdoc.ts new file mode 100644 index 00000000000..19a47c26092 --- /dev/null +++ b/src/app/showcase/doc/megamenu/routerdoc.ts @@ -0,0 +1,33 @@ +import { Component, OnInit } from '@angular/core'; +import { MegaMenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'router-doc', + template: ` + +

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

    +     + + ` +}) +export class RouterDoc { + code: Code = { + basic: ` + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + +` + }; +} diff --git a/src/app/showcase/doc/megamenu/templatedoc.ts b/src/app/showcase/doc/megamenu/templatedoc.ts index 90f70ed6a19..d336b963a8f 100644 --- a/src/app/showcase/doc/megamenu/templatedoc.ts +++ b/src/app/showcase/doc/megamenu/templatedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MegaMenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -9,12 +9,60 @@ import { Code } from '../../domain/code';

    Custom content can be placed between p-megaMenu tags. Megamenu should be horizontal for custom content.

    - + - + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + + + + + + {{ item.label }} + {{ item.subtext }} + + +
    + megamenu-demo + {{ item.subtext }} + +
    - +
    @@ -27,151 +75,184 @@ export class TemplateDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'Videos', - icon: 'pi pi-fw pi-video', + label: 'Company', + root: true, items: [ [ { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] - }, - { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] + items: [ + { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' }, + { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' }, + { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' } + ] } ], [ { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, - { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] - } - ] - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-users', - items: [ - [ - { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] + items: [ + { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' }, + { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' }, + { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' } + ] } ], [ { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] + items: [ + { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' }, + { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' }, + { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' } + ] } ], [ { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, - { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] + items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }] } ] ] }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - [ - { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] - } - ], - [ - { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] - } - ] - ] + label: 'Resources', + root: true }, { - label: 'Settings', - icon: 'pi pi-fw pi-cog', - items: [ - [ - { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] - } - ], - [ - { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] - } - ] - ] + label: 'Contact', + root: true } ]; } code: Code = { - basic: ` + basic: ` - + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + + + + + + {{ item.label }} + {{ item.subtext }} + + +
    + megamenu-demo + {{ item.subtext }} + +
    - +     `, - html: ` -
    - + html: `
    + - + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + + + + + + {{ item.label }} + {{ item.subtext }} + + +
    + megamenu-demo + {{ item.subtext }} + +
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MegaMenuItem } from 'primeng/api'; +import { MegaMenuModule } from 'primeng/megamenu'; +import { ButtonModule } from 'primeng/button'; +import { CommonModule } from '@angular/common'; +import { AvatarModule } from 'primeng/avatar'; + @Component({ selector: 'mega-menu-template-demo', - templateUrl: './mega-menu-template-demo.html' + templateUrl: './mega-menu-template-demo.html', + standalone: true, + imports: [MegaMenuModule, ButtonModule, CommonModule, AvatarModule] }) export class MegaMenuTemplateDemo implements OnInit { items: MegaMenuItem[] | undefined; @@ -179,118 +260,50 @@ export class MegaMenuTemplateDemo implements OnInit { ngOnInit() { this.items = [ { - label: 'Videos', - icon: 'pi pi-fw pi-video', + label: 'Company', + root: true, items: [ [ { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] - }, - { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] + items: [ + { label: 'Features', icon: 'pi pi-list', subtext: 'Subtext of item' }, + { label: 'Customers', icon: 'pi pi-users', subtext: 'Subtext of item' }, + { label: 'Case Studies', icon: 'pi pi-file', subtext: 'Subtext of item' } + ] } ], [ { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, - { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] - } - ] - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-users', - items: [ - [ - { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] + items: [ + { label: 'Solutions', icon: 'pi pi-shield', subtext: 'Subtext of item' }, + { label: 'Faq', icon: 'pi pi-question', subtext: 'Subtext of item' }, + { label: 'Library', icon: 'pi pi-search', subtext: 'Subtext of item' } + ] } ], [ { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] + items: [ + { label: 'Community', icon: 'pi pi-comments', subtext: 'Subtext of item' }, + { label: 'Rewards', icon: 'pi pi-star', subtext: 'Subtext of item' }, + { label: 'Investors', icon: 'pi pi-globe', subtext: 'Subtext of item' } + ] } ], [ { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, - { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] + items: [{ image: 'https://primefaces.org/cdn/primevue/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }] } ] ] }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - [ - { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] - } - ], - [ - { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] - } - ] - ] + label: 'Resources', + root: true }, { - label: 'Settings', - icon: 'pi pi-fw pi-cog', - items: [ - [ - { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] - } - ], - [ - { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] - } - ] - ] + label: 'Contact', + root: true } ]; } diff --git a/src/app/showcase/doc/megamenu/verticaldoc.ts b/src/app/showcase/doc/megamenu/verticaldoc.ts index 8ddd569c429..1b53ffe9cd8 100644 --- a/src/app/showcase/doc/megamenu/verticaldoc.ts +++ b/src/app/showcase/doc/megamenu/verticaldoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MegaMenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'vertical-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    Layout of the MegaMenu is changed with the orientation property that accepts horizontal and vertical as options.

    - +
    ` @@ -20,137 +20,118 @@ export class VerticalDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'Videos', - icon: 'pi pi-fw pi-video', + label: 'Furniture', + icon: 'pi pi-box', items: [ [ { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] + label: 'Living Room', + items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }] + } + ], + [ + { + label: 'Kitchen', + items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }] }, { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] + label: 'Bathroom', + items: [{ label: 'Accessories' }] } ], [ { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, + label: 'Bedroom', + items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }] + } + ], + [ { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] + label: 'Office', + items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }] } ] ] }, { - label: 'Users', - icon: 'pi pi-fw pi-users', + label: 'Electronics', + icon: 'pi pi-mobile', items: [ [ { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] + label: 'Computer', + items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }] } ], [ { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] + label: 'Home Theather', + items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }] } ], [ { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, + label: 'Gaming', + items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }] + } + ], + [ { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] + label: 'Appliances', + items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }] } ] ] }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + label: 'Sports', + icon: 'pi pi-clock', items: [ [ { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] + label: 'Football', + items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }] } ], [ { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] + label: 'Running', + items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }] } - ] - ] - }, - { - label: 'Settings', - icon: 'pi pi-fw pi-cog', - items: [ + ], [ { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] + label: 'Swimming', + items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }] } ], [ { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] + label: 'Tennis', + items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }] } ] ] } - ]; + ] } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MegaMenuItem } from 'primeng/api'; +import { MegaMenuModule } from 'primeng/megamenu'; @Component({ selector: 'mega-menu-vertical-demo', - templateUrl: './mega-menu-vertical-demo.html' + templateUrl: './mega-menu-vertical-demo.html', + standalone: true, + imports: [MegaMenuModule] }) export class MegaMenuVerticalDemo implements OnInit { items: MegaMenuItem[] | undefined; @@ -158,120 +139,100 @@ export class MegaMenuVerticalDemo implements OnInit { ngOnInit() { this.items = [ { - label: 'Videos', - icon: 'pi pi-fw pi-video', + label: 'Furniture', + icon: 'pi pi-box', items: [ [ { - label: 'Video 1', - items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }] + label: 'Living Room', + items: [{ label: 'Accessories' }, { label: 'Armchair' }, { label: 'Coffee Table' }, { label: 'Couch' }, { label: 'TV Stand' }] + } + ], + [ + { + label: 'Kitchen', + items: [{ label: 'Bar stool' }, { label: 'Chair' }, { label: 'Table' }] }, { - label: 'Video 2', - items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }] + label: 'Bathroom', + items: [{ label: 'Accessories' }] } ], [ { - label: 'Video 3', - items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }] - }, + label: 'Bedroom', + items: [{ label: 'Bed' }, { label: 'Chaise lounge' }, { label: 'Cupboard' }, { label: 'Dresser' }, { label: 'Wardrobe' }] + } + ], + [ { - label: 'Video 4', - items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }] + label: 'Office', + items: [{ label: 'Bookcase' }, { label: 'Cabinet' }, { label: 'Chair' }, { label: 'Desk' }, { label: 'Executive Chair' }] } ] ] }, { - label: 'Users', - icon: 'pi pi-fw pi-users', + label: 'Electronics', + icon: 'pi pi-mobile', items: [ [ { - label: 'User 1', - items: [{ label: 'User 1.1' }, { label: 'User 1.2' }] - }, - { - label: 'User 2', - items: [{ label: 'User 2.1' }, { label: 'User 2.2' }] + label: 'Computer', + items: [{ label: 'Monitor' }, { label: 'Mouse' }, { label: 'Notebook' }, { label: 'Keyboard' }, { label: 'Printer' }, { label: 'Storage' }] } ], [ { - label: 'User 3', - items: [{ label: 'User 3.1' }, { label: 'User 3.2' }] - }, - { - label: 'User 4', - items: [{ label: 'User 4.1' }, { label: 'User 4.2' }] + label: 'Home Theather', + items: [{ label: 'Projector' }, { label: 'Speakers' }, { label: 'TVs' }] } ], [ { - label: 'User 5', - items: [{ label: 'User 5.1' }, { label: 'User 5.2' }] - }, + label: 'Gaming', + items: [{ label: 'Accessories' }, { label: 'Console' }, { label: 'PC' }, { label: 'Video Games' }] + } + ], + [ { - label: 'User 6', - items: [{ label: 'User 6.1' }, { label: 'User 6.2' }] + label: 'Appliances', + items: [{ label: 'Coffee Machine' }, { label: 'Fridge' }, { label: 'Oven' }, { label: 'Vaccum Cleaner' }, { label: 'Washing Machine' }] } ] ] }, { - label: 'Events', - icon: 'pi pi-fw pi-calendar', + label: 'Sports', + icon: 'pi pi-clock', items: [ [ { - label: 'Event 1', - items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }] - }, - { - label: 'Event 2', - items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }] + label: 'Football', + items: [{ label: 'Kits' }, { label: 'Shoes' }, { label: 'Shorts' }, { label: 'Training' }] } ], [ { - label: 'Event 3', - items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }] - }, - { - label: 'Event 4', - items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }] + label: 'Running', + items: [{ label: 'Accessories' }, { label: 'Shoes' }, { label: 'T-Shirts' }, { label: 'Shorts' }] } - ] - ] - }, - { - label: 'Settings', - icon: 'pi pi-fw pi-cog', - items: [ + ], [ { - label: 'Setting 1', - items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }] - }, - { - label: 'Setting 2', - items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }] - }, - { - label: 'Setting 3', - items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }] + label: 'Swimming', + items: [{ label: 'Kickboard' }, { label: 'Nose Clip' }, { label: 'Swimsuits' }, { label: 'Paddles' }] } ], [ { - label: 'Technology 4', - items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }] + label: 'Tennis', + items: [{ label: 'Balls' }, { label: 'Rackets' }, { label: 'Shoes' }, { label: 'Training' }] } ] ] } - ]; + ] } }` }; diff --git a/src/app/showcase/doc/menu/basicdoc.ts b/src/app/showcase/doc/menu/basicdoc.ts index 56483e15c20..1f71aca0eb2 100644 --- a/src/app/showcase/doc/menu/basicdoc.ts +++ b/src/app/showcase/doc/menu/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    Menu requires a collection of menuitems as its model.

    - +
    ` @@ -19,46 +19,35 @@ export class BasicDoc implements OnInit { ngOnInit() { this.items = [ - { - label: 'New', - icon: 'pi pi-fw pi-plus' - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - } + { label: 'New', icon: 'pi pi-plus' }, + { label: 'Search', icon: 'pi pi-search' } ]; } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { MenuModule } from 'primeng/menu'; @Component({ selector: 'menu-basic-demo', - templateUrl: './menu-basic-demo.html' + templateUrl: './menu-basic-demo.html', + standalone: true, + imports: [MenuModule] }) export class MenuBasicDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - } + { label: 'New', icon: 'pi pi-plus' }, + { label: 'Search', icon: 'pi pi-search' } ]; } }` diff --git a/src/app/showcase/doc/menu/commanddoc.ts b/src/app/showcase/doc/menu/commanddoc.ts index f0cff6de9d8..aae20bdf9bc 100644 --- a/src/app/showcase/doc/menu/commanddoc.ts +++ b/src/app/showcase/doc/menu/commanddoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'command-doc', @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';

    The function to invoke when an item is clicked is defined using the command property.

    - - + +
    `, @@ -24,15 +24,15 @@ export class CommandDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'Update', - icon: 'pi pi-refresh', + label: 'New', + icon: 'pi pi-plus', command: () => { this.update(); } }, { - label: 'Delete', - icon: 'pi pi-times', + label: 'Search', + icon: 'pi pi-search', command: () => { this.delete(); } @@ -41,48 +41,51 @@ export class CommandDoc implements OnInit { } update() { - this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); + this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 }); } delete() { - this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); + this.messageService.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 }); } code: Code = { - basic: ` -`, + basic: ` +`, - html: ` -
    - + html: `
    + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; +import { MenuModule } from 'primeng/menu'; +import { ToastModule } from 'primeng/toast'; @Component({ selector: 'menu-command-demo', templateUrl: './menu-command-demo.html', + standalone: true, + imports: [MenuModule, ToastModule], providers: [MessageService] }) export class MenuCommandDemo implements OnInit { items: MenuItem[] | undefined; constructor(private messageService: MessageService) {} - + ngOnInit() { this.items = [ { - label: 'Update', - icon: 'pi pi-refresh', + label: 'New', + icon: 'pi pi-plus', command: () => { this.update(); } }, { - label: 'Delete', - icon: 'pi pi-times', + label: 'Search', + icon: 'pi pi-search', command: () => { this.delete(); } @@ -91,11 +94,11 @@ export class MenuCommandDemo implements OnInit { } update() { - this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); + this.messageService.add({ severity: 'success', summary: 'Success', detail: 'File created', life: 3000 }); } delete() { - this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); + this.messageService.add({ severity: 'warn', summary: 'Search Completed', detail: 'No results found', life: 3000 }); } }` }; diff --git a/src/app/showcase/doc/menu/customdoc.ts b/src/app/showcase/doc/menu/customdoc.ts deleted file mode 100644 index 5675d446b64..00000000000 --- a/src/app/showcase/doc/menu/customdoc.ts +++ /dev/null @@ -1,186 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'custom-content-doc', - template: ` - -

    Label of a menuitem both supports simple strings and html values as well. By default, html values are escaped, use escape property to allow html.

    -     -
    - - - -
    - - {{ item.label }} -
    -
    - {{ item.shortcut }} - -
    -     - -
    - - {{ item.label }} -
    -
    - {{ item.shortcut }} - -
    -     -     -     -
    - - ` -}) -export class CustomContentDoc implements OnInit { - items: MenuItem[] | undefined; - - ngOnInit() { - this.items = [ - { - label: 'Options', - items: [ - { - label: 'Refresh', - icon: 'pi pi-refresh', - shortcut: '⌘+U', - shortcutClass: 'p-1 font-medium border-round text-sm surface-ground' - }, - { - label: 'Delete', - icon: 'pi pi-times', - shortcut: '⌘+B', - shortcutClass: 'p-1 font-medium border-round text-sm surface-ground' - } - ] - }, - { - label: 'Navigate', - items: [ - { - label: 'Angular', - icon: 'pi pi-external-link', - badge: '2', - badgeSeverity: 'success', - url: 'http://angular.io' - }, - { - label: 'File Upload', - icon: 'pi pi-upload', - routerLink: '/fileupload', - badge: '2' - } - ] - } - ]; - } - - code: Code = { - basic: ` - - -
    - - {{ item.label }} -
    -
    - {{ item.shortcut }} - -
    -     - -
    - - {{ item.label }} -
    -
    - {{ item.shortcut }} - -
    -     -     -    `, - - html: ` -
    - - - -
    - - {{ item.label }} -
    -
    - {{ item.shortcut }} - -
    -     - -
    - - {{ item.label }} -
    -
    - {{ item.shortcut }} - -
    -     -     -     -
    `, - - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; - -@Component({ - selector: 'menu-custom-content-demo', - templateUrl: './menu-custom-content-demo.html' -}) -export class MenuCustomContentDemo implements OnInit { - items: MenuItem[] | undefined; - - ngOnInit() { - this.items = [ - { - label: 'Options', - items: [ - { - label: 'Refresh', - escape: false, - icon: 'pi pi-refresh', - iconClass: 'text-xl' - }, - { - label: 'Delete', - escape: false, - icon: 'pi pi-times', - iconClass: 'text-xl' - } - ] - }, - { - label: 'Navigate', - items: [ - { - 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/menu/groupdoc.ts b/src/app/showcase/doc/menu/groupdoc.ts index d78121136d6..62a39476fc3 100644 --- a/src/app/showcase/doc/menu/groupdoc.ts +++ b/src/app/showcase/doc/menu/groupdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'menu-group-demo', @@ -9,8 +9,7 @@ import { Code } from '../../domain/code';

    Menu supports one level of nesting by defining children with items property.

    - - +
    `, @@ -24,120 +23,86 @@ export class GroupDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'Options', + label: 'Documents', items: [ { - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - this.update(); - } + label: 'New', + icon: 'pi pi-plus' }, { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - this.delete(); - } + label: 'Search', + icon: 'pi pi-search' } ] }, { - label: 'Navigate', + label: 'Profile', items: [ { - label: 'Angular', - icon: 'pi pi-external-link', - url: 'http://angular.io' + label: 'Settings', + icon: 'pi pi-cog' }, { - label: 'Router', - icon: 'pi pi-upload', - routerLink: '/fileupload' + label: 'Logout', + icon: 'pi pi-sign-out' } ] } ]; } - update() { - this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); - } - - delete() { - this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); - } - code: Code = { - basic: ` -`, + basic: ``, - html: ` -
    - - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { MenuItem, MessageService } from 'primeng/api'; - + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { MenuModule } from 'primeng/menu'; +import { ToastModule } from 'primeng/toast'; + @Component({ selector: 'menu-group-demo', templateUrl: './menu-group-demo.html', - providers: [MessageService] + standalone: true, + imports: [MenuModule, ToastModule] }) export class MenuGroupDemo implements OnInit { items: MenuItem[] | undefined; - - constructor(private messageService: MessageService) {} ngOnInit() { this.items = [ { - label: 'Options', + label: 'Documents', items: [ { - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - this.update(); - } + label: 'New', + icon: 'pi pi-plus' }, { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - this.delete(); - } + label: 'Search', + icon: 'pi pi-search' } ] }, { - label: 'Navigate', + label: 'Profile', items: [ { - label: 'Angular', - icon: 'pi pi-external-link', - url: 'http://angular.io' + label: 'Settings', + icon: 'pi pi-cog' }, { - label: 'Router', - icon: 'pi pi-upload', - routerLink: '/fileupload' + label: 'Logout', + icon: 'pi pi-sign-out' } ] } ]; } - update() { - this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); - } - - delete() { - this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); - } }` }; } diff --git a/src/app/showcase/doc/menu/importdoc.ts b/src/app/showcase/doc/menu/importdoc.ts index 96c5a825c7e..7404241b128 100644 --- a/src/app/showcase/doc/menu/importdoc.ts +++ b/src/app/showcase/doc/menu/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/menu/menudoc.module.ts b/src/app/showcase/doc/menu/menudoc.module.ts index c793a148d3c..a8854d4c6d5 100644 --- a/src/app/showcase/doc/menu/menudoc.module.ts +++ b/src/app/showcase/doc/menu/menudoc.module.ts @@ -6,21 +6,22 @@ import { BadgeModule } from 'primeng/badge'; import { ButtonModule } from 'primeng/button'; import { MenuModule } from 'primeng/menu'; import { ToastModule } from 'primeng/toast'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { CommandDoc } from './commanddoc'; -import { CustomContentDoc } from './customdoc'; +import { TemplateDoc } from './templatedoc'; import { GroupDoc } from './groupdoc'; import { ImportDoc } from './importdoc'; -import { NavigationDoc } from './navigationdoc'; +import { RouterDoc } from './routerdoc'; import { PopupDoc } from './popupdoc'; import { StyleDoc } from './styledoc'; +import { RippleModule } from 'primeng/ripple'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, MenuModule, ToastModule, ButtonModule, AvatarModule, AppDocModule, BadgeModule], - declarations: [BasicDoc, CommandDoc, CustomContentDoc, GroupDoc, ImportDoc, NavigationDoc, PopupDoc, StyleDoc, AccessibilityDoc], + imports: [CommonModule, AppCodeModule, RouterModule, MenuModule, ToastModule, ButtonModule, RippleModule, AvatarModule, AppDocModule, BadgeModule], + declarations: [BasicDoc, CommandDoc, TemplateDoc, GroupDoc, ImportDoc, RouterDoc, PopupDoc, StyleDoc, AccessibilityDoc], exports: [AppDocModule] }) export class MenuDocModule {} diff --git a/src/app/showcase/doc/menu/navigationdoc.ts b/src/app/showcase/doc/menu/navigationdoc.ts deleted file mode 100644 index c3f53d16414..00000000000 --- a/src/app/showcase/doc/menu/navigationdoc.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'navigation-doc', - template: ` - -

    - Navigation is specified using url property for external links and with routerLink for internal ones. If a menuitem has an active route, p-menuitem-link-active style class is added as an indicator. Active route link can - be configured with routerLinkActiveOptions property of MenuItem API. -

    -     -
    - -
    - - ` -}) -export class NavigationDoc implements OnInit { - items: MenuItem[] | undefined; - - ngOnInit() { - this.items = [ - { - label: 'File', - items: [ - { label: 'New', icon: 'pi pi-plus', url: 'https://primeng.org' }, - { label: 'Open', icon: 'pi pi-download', routerLink: ['/menu'] }, - { label: 'Recent Files', icon: 'pi pi-download', routerLink: ['/pagename'], queryParams: { recent: 'true' } } - ] - } - ]; - } - - code: Code = { - basic: ``, - - html: ` -
    - -
    `, - - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; - -@Component({ - selector: 'menu-navigation-demo', - templateUrl: './menu-navigation-demo.html' -}) -export class MenuNavigationDemo implements OnInit { - items: MenuItem[] | undefined; - - constructor(private messageService: MessageService) {} - - ngOnInit() { - this.items = [{ - label: 'File', - items: [ - {label: 'New', icon: 'pi pi-plus', url: 'https://primeng.org'}, - {label: 'Open', icon: 'pi pi-download', routerLink: ['/menu']}, - {label: 'Recent Files', icon: 'pi pi-download', routerLink: ['/pagename'], queryParams: {'recent': 'true'}} - ] - }]; - } -}` - }; -} diff --git a/src/app/showcase/doc/menu/popupdoc.ts b/src/app/showcase/doc/menu/popupdoc.ts index 6d80ac8d84b..4b48845b504 100644 --- a/src/app/showcase/doc/menu/popupdoc.ts +++ b/src/app/showcase/doc/menu/popupdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'popup-doc', @@ -9,9 +9,8 @@ import { Code } from '../../domain/code';

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

    - - - + +
    `, @@ -20,127 +19,64 @@ import { Code } from '../../domain/code'; export class PopupDoc implements OnInit { items: MenuItem[] | undefined; - constructor(private messageService: MessageService) {} - ngOnInit() { this.items = [ { label: 'Options', items: [ { - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - this.update(); - } - }, - { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - this.delete(); - } - } - ] - }, - { - label: 'Navigate', - items: [ - { - label: 'Angular', - icon: 'pi pi-external-link', - url: 'http://angular.io' + label: 'Refresh', + icon: 'pi pi-refresh' }, { - label: 'Router', - icon: 'pi pi-upload', - routerLink: '/fileupload' + label: 'Export', + icon: 'pi pi-upload' } ] } ]; } - - update() { - this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); - } - - delete() { - this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); - } - code: Code = { - basic: ` - -`, + basic: ` + +`, - html: ` -
    - - - + html: `
    + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { MenuItem, MessageService } from 'primeng/api'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { MenuModule } from 'primeng/menu'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'menu-popup-demo', templateUrl: './menu-popup-demo.html', - providers: [MessageService] + standalone: true, + imports: [MenuModule, ButtonModule] }) export class MenuPopupDemo implements OnInit { items: MenuItem[] | undefined; - constructor(private messageService: MessageService) {} - ngOnInit() { this.items = [ { label: 'Options', items: [ { - label: 'Update', - icon: 'pi pi-refresh', - command: () => { - this.update(); - } + label: 'Refresh', + icon: 'pi pi-refresh' }, { - label: 'Delete', - icon: 'pi pi-times', - command: () => { - this.delete(); - } - } - ] - }, - { - label: 'Navigate', - items: [ - { - label: 'Angular', - icon: 'pi pi-external-link', - url: 'http://angular.io' - }, - { - label: 'Router', - icon: 'pi pi-upload', - routerLink: '/fileupload' + label: 'Export', + icon: 'pi pi-upload' } ] } ]; } - - update() { - this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Data Updated' }); - } - - delete() { - this.messageService.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted' }); - } }` }; } diff --git a/src/app/showcase/doc/menu/routerdoc.ts b/src/app/showcase/doc/menu/routerdoc.ts new file mode 100644 index 00000000000..7e3d41849f2 --- /dev/null +++ b/src/app/showcase/doc/menu/routerdoc.ts @@ -0,0 +1,149 @@ +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: ` + +

    + Navigation is specified using url property for external links and with routerLink for internal ones. If a menuitem has an active route, p-menuitem-link-active style class is added as an indicator. Active route link can + be configured with routerLinkActiveOptions property of MenuItem API. +

    +     +
    + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + + +
    + + ` +}) +export class RouterDoc implements OnInit { + items: MenuItem[] | undefined; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { + label: 'Navigate', + items: [ + { + label: 'Router Link', + icon: 'pi pi-palette', + route: '/guides/csslayer' + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + url: 'https://angular.io//' + } + ] + } + ]; + } + + code: Code = { + basic: ` + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + +`, + + html: `
    + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + + +
    `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Router } from '@angular/router'; +import { MenuModule } from 'primeng/menu'; + +@Component({ + selector: 'menu-router-demo', + templateUrl: './menu-router-demo.html', + standalone: true, + imports: [MenuModule] +}) +export class MenuRouterDemo implements OnInit { + items: MenuItem[] | undefined; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { + label: 'Navigate', + items: [ + { + label: 'Router Link', + icon: 'pi pi-palette', + route: '/guides/csslayer' + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + url: 'https://angular.io//' + } + ] + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/menu/templatedoc.ts b/src/app/showcase/doc/menu/templatedoc.ts new file mode 100644 index 00000000000..18b95694bb7 --- /dev/null +++ b/src/app/showcase/doc/menu/templatedoc.ts @@ -0,0 +1,308 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'template-doc', + template: ` + +

    + Menu offers item customization with the item template that receives the menuitem instance from the model as a parameter. The submenu header has its own submenuheader template, additional slots named start and + end are provided to embed content before or after the menu. +

    +     +
    + + + + + + + + + + + + + + + + + + + + + + + PRIMEAPP + + + + {{ item.label }} + + + + + {{ item.label }} + + {{ item.shortcut }} + + + + + + +
    + + ` +}) +export class TemplateDoc implements OnInit { + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + separator: true + }, + { + label: 'Documents', + items: [ + { + label: 'New', + icon: 'pi pi-plus', + shortcut: '⌘+N' + }, + { + label: 'Search', + icon: 'pi pi-search', + shortcut: '⌘+S' + } + ] + }, + { + label: 'Profile', + items: [ + { + label: 'Settings', + icon: 'pi pi-cog', + shortcut: '⌘+O' + }, + { + label: 'Messages', + icon: 'pi pi-inbox', + badge: '2' + }, + { + label: 'Logout', + icon: 'pi pi-sign-out', + shortcut: '⌘+Q' + } + ] + }, + { + separator: true + } + ]; + } + + code: Code = { + basic: ` + + + + + + + + + + + + + + + + + + + + + + + PRIMEAPP + + + + + {{ item.label }} + + + + + {{ item.label }} + + + {{ item.shortcut }} + + + + + + +`, + + html: `
    + + + + + + + + + + + + + + + + + + + + + + + PRIMEAPP + + + + {{ item.label }} + + + + + {{ item.label }} + + {{ item.shortcut }} + + + + + + +
    `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { MenuModule } from 'primeng/menu'; +import { BadgeModule } from 'primeng/badge'; +import { RippleModule } from 'primeng/ripple'; +import { AvatarModule } from 'primeng/avatar'; + +@Component({ + selector: 'menu-template-demo', + templateUrl: './menu-template-demo.html', + standalone: true, + imports: [MenuModule, BadgeModule, RippleModule, AvatarModule] +}) +export class MenuTemplateDemo implements OnInit { + items: MenuItem[] | undefined; + + ngOnInit() { + this.items = [ + { + separator: true + }, + { + label: 'Documents', + items: [ + { + label: 'New', + icon: 'pi pi-plus', + shortcut: '⌘+N' + }, + { + label: 'Search', + icon: 'pi pi-search', + shortcut: '⌘+S' + } + ] + }, + { + label: 'Profile', + items: [ + { + label: 'Settings', + icon: 'pi pi-cog', + shortcut: '⌘+O' + }, + { + label: 'Messages', + icon: 'pi pi-inbox', + badge: '2' + }, + { + label: 'Logout', + icon: 'pi pi-sign-out', + shortcut: '⌘+Q' + } + ] + }, + { + separator: true + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/menubar/basicdoc.ts b/src/app/showcase/doc/menubar/basicdoc.ts index d045bcb90d5..ea43c69c426 100644 --- a/src/app/showcase/doc/menubar/basicdoc.ts +++ b/src/app/showcase/doc/menubar/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    Menubar requires nested menuitems as its model.

    - +
    ` @@ -20,144 +20,68 @@ export class BasicDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] + label: 'Home', + icon: 'pi pi-home' }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - 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: 'Features', + icon: 'pi pi-star' }, { - label: 'Users', - icon: 'pi pi-fw pi-user', + label: 'Projects', + icon: 'pi pi-search', items: [ { - label: 'New', - icon: 'pi pi-fw pi-user-plus' + label: 'Components', + icon: 'pi pi-bolt' }, { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' + label: 'Blocks', + icon: 'pi pi-server' }, { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ + label: 'UI Kit', + icon: 'pi pi-pencil' + }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Templates', + icon: 'pi pi-palette', items: [ { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' + label: 'Apollo', + icon: 'pi pi-palette' }, { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' + label: 'Ultima', + icon: 'pi pi-palette' } ] } ] }, { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' + label: 'Contact', + icon: 'pi pi-envelope' } - ]; + ] } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { MenubarModule } from 'primeng/menubar'; @Component({ selector: 'menubar-basic-demo', - templateUrl: './menubar-basic-demo.html' + templateUrl: './menubar-basic-demo.html', + standalone: true, + imports: [MenubarModule] }) export class MenubarBasicDemo implements OnInit { items: MenuItem[] | undefined; @@ -165,127 +89,50 @@ export class MenubarBasicDemo implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] + label: 'Home', + icon: 'pi pi-home' }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', - items: [ - { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - 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: 'Features', + icon: 'pi pi-star' }, { - label: 'Users', - icon: 'pi pi-fw pi-user', + label: 'Projects', + icon: 'pi pi-search', items: [ { - label: 'New', - icon: 'pi pi-fw pi-user-plus' + label: 'Components', + icon: 'pi pi-bolt' }, { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' + label: 'Blocks', + icon: 'pi pi-server' }, { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ + label: 'UI Kit', + icon: 'pi pi-pencil' + }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Templates', + icon: 'pi pi-palette', items: [ { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' + label: 'Apollo', + icon: 'pi pi-palette' }, { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' + label: 'Ultima', + icon: 'pi pi-palette' } ] } ] }, { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' + label: 'Contact', + icon: 'pi pi-envelope' } - ]; + ] } }` }; diff --git a/src/app/showcase/doc/menubar/commanddoc.ts b/src/app/showcase/doc/menubar/commanddoc.ts new file mode 100644 index 00000000000..5ebb64c7dd4 --- /dev/null +++ b/src/app/showcase/doc/menubar/commanddoc.ts @@ -0,0 +1,161 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem, MessageService } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'command-doc', + template: ` + +

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

    +     +
    + + +
    + + `, + providers: [MessageService] +}) +export class CommandDoc implements OnInit { + items: MenuItem[] | undefined; + + constructor(private messageService: MessageService) {} + + 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, MessageService } from 'primeng/api'; +import { MenubarModule } from 'primeng/menubar'; +import { ToastModule } from 'primeng/toast'; + +@Component({ + selector: 'menubar-command-demo', + templateUrl: './menubar-command-demo.html', + standalone: true, + imports: [MenubarModule, ToastModule], + providers: [MessageService] +}) +export class MenubarCommandDemo implements OnInit { + items: MenuItem[] | undefined; + + constructor(private messageService: MessageService) {} + + 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/menubar/importdoc.ts b/src/app/showcase/doc/menubar/importdoc.ts index 1ecf9e3a55f..c582c4c57e1 100644 --- a/src/app/showcase/doc/menubar/importdoc.ts +++ b/src/app/showcase/doc/menubar/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/menubar/menubardoc.module.ts b/src/app/showcase/doc/menubar/menubardoc.module.ts index 45347da6dcd..1e6496b69a2 100644 --- a/src/app/showcase/doc/menubar/menubardoc.module.ts +++ b/src/app/showcase/doc/menubar/menubardoc.module.ts @@ -2,18 +2,24 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { MenubarModule } from 'primeng/menubar'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { TemplateDoc } from './templatedoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; import { InputTextModule } from 'primeng/inputtext'; import { AccessibilityDoc } from './accessibilitydoc'; +import { BadgeModule } from 'primeng/badge'; +import { RippleModule } from 'primeng/ripple'; +import { AvatarModule } from 'primeng/avatar'; +import { CommandDoc } from './commanddoc'; +import { ToastModule } from 'primeng/toast'; +import { RouterDoc } from './routerdoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, MenubarModule, InputTextModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, StyleDoc, TemplateDoc, AccessibilityDoc], + imports: [CommonModule, AppCodeModule, RouterModule, MenubarModule, InputTextModule, AppDocModule, BadgeModule, RippleModule, AvatarModule, ToastModule], + declarations: [BasicDoc, ImportDoc, StyleDoc, TemplateDoc, CommandDoc, RouterDoc, AccessibilityDoc], exports: [AppDocModule] }) export class MenubarDocModule {} diff --git a/src/app/showcase/doc/menubar/routerdoc.ts b/src/app/showcase/doc/menubar/routerdoc.ts new file mode 100644 index 00000000000..fa0f1aa6bf2 --- /dev/null +++ b/src/app/showcase/doc/menubar/routerdoc.ts @@ -0,0 +1,173 @@ +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 routerLink directive, an external link or programmatic navigation.

    +     +
    + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + + +
    + + ` +}) +export class RouterDoc implements OnInit { + items: MenuItem[] | undefined; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { + label: 'Router', + icon: 'pi pi-palette', + items: [ + { + label: 'Installation', + route: '/installation' + }, + { + label: 'Configuration', + route: '/configuration' + } + ] + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + items: [ + { + label: 'Angular', + url: 'https://angular.io/' + }, + { + label: 'Vite.js', + url: 'https://vitejs.dev/' + } + ] + } + ]; + } + + code: Code = { + basic: ` + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + +`, + + html: `
    + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + + +
    `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { MenubarModule } from 'primeng/menubar'; +import { CommonModule } from '@angular/common'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'menubar-router-demo', + templateUrl: './menubar-router-demo.html', + standalone: true, + imports: [MenubarModule, CommonModule], +}) +export class MenubarRouterDemo implements OnInit { + items: MenuItem[] | undefined; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { + label: 'Router', + icon: 'pi pi-palette', + items: [ + { + label: 'Installation', + route: '/installation' + }, + { + label: 'Configuration', + route: '/configuration' + } + ] + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + items: [ + { + label: 'Angular', + url: 'https://angular.io/' + }, + { + label: 'Vite.js', + url: 'https://vitejs.dev/' + } + ] + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/menubar/templatedoc.ts b/src/app/showcase/doc/menubar/templatedoc.ts index 5c92cbe3d7a..c28d4ca508e 100644 --- a/src/app/showcase/doc/menubar/templatedoc.ts +++ b/src/app/showcase/doc/menubar/templatedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'menubar-template-demo', @@ -11,10 +11,50 @@ import { Code } from '../../domain/code';
    - + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + {{ item.shortcut }} + + - +
    + + +
    @@ -27,125 +67,57 @@ export class TemplateDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] + label: 'Home', + icon: 'pi pi-home' + }, + { + label: 'Features', + icon: 'pi pi-star' }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Projects', + icon: 'pi pi-search', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' + label: 'Core', + icon: 'pi pi-bolt', + shortcut: '⌘+S' }, { - label: 'Right', - icon: 'pi pi-fw pi-align-right' + label: 'Blocks', + icon: 'pi pi-server', + shortcut: '⌘+B' }, { - label: 'Center', - icon: 'pi pi-fw pi-align-center' + label: 'UI Kit', + icon: 'pi pi-pencil', + shortcut: '⌘+U' }, { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - 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' + separator: true }, { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Templates', + icon: 'pi pi-palette', items: [ { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' + label: 'Apollo', + icon: 'pi pi-palette', + badge: '2' }, { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' + label: 'Ultima', + icon: 'pi pi-palette', + badge: '3' } ] } ] }, { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' + label: 'Contact', + icon: 'pi pi-envelope', + badge: '3' } ]; } @@ -153,32 +125,118 @@ export class TemplateDoc implements OnInit { code: Code = { basic: ` - + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + {{ item.shortcut }} + + - +
    + + +
    `, - html: ` -
    + html: `
    - + + + + + + + + + + + + + + + + + + + + + + + + {{ item.label }} + + {{ item.shortcut }} + + - +
    + + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { MenubarModule } from 'primeng/menubar'; +import { BadgeModule } from 'primeng/badge'; +import { AvatarModule } from 'primeng/avatar'; +import { InputTextModule } from 'primeng/inputtext'; +import { CommonModule } from '@angular/common'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'menubar-template-demo', - templateUrl: './menubar-template-demo.html' + templateUrl: './menubar-template-demo.html', + standalone: true, + imports: [MenubarModule, BadgeModule, AvatarModule, InputTextModule, RippleModule, CommonModule] }) export class MenubarTemplateDemo implements OnInit { items: MenuItem[] | undefined; @@ -186,125 +244,57 @@ export class MenubarTemplateDemo implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-plus', - items: [ - { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' - }, - { - label: 'Video', - icon: 'pi pi-fw pi-video' - } - ] - }, - { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' - } - ] + label: 'Home', + icon: 'pi pi-home' + }, + { + label: 'Features', + icon: 'pi pi-star' }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Projects', + icon: 'pi pi-search', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' + label: 'Core', + icon: 'pi pi-bolt', + shortcut: '⌘+S' }, { - label: 'Right', - icon: 'pi pi-fw pi-align-right' + label: 'Blocks', + icon: 'pi pi-server', + shortcut: '⌘+B' }, { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' - } - ] - }, - { - label: 'Users', - icon: 'pi pi-fw pi-user', - items: [ - { - label: 'New', - icon: 'pi pi-fw pi-user-plus' + label: 'UI Kit', + icon: 'pi pi-pencil', + shortcut: '⌘+U' }, { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' + separator: true }, { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - items: [ - { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Templates', + icon: 'pi pi-palette', items: [ { - label: 'Save', - icon: 'pi pi-fw pi-calendar-plus' + label: 'Apollo', + icon: 'pi pi-palette', + badge: '2' }, { - label: 'Delete', - icon: 'pi pi-fw pi-calendar-minus' - } - ] - }, - { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' + label: 'Ultima', + icon: 'pi pi-palette', + badge: '3' } ] } ] }, { - label: 'Quit', - icon: 'pi pi-fw pi-power-off' + label: 'Contact', + icon: 'pi pi-envelope', + badge: '3' } ]; } diff --git a/src/app/showcase/doc/messages/animationdoc.ts b/src/app/showcase/doc/messages/animationdoc.ts index 703c6b73628..49c7b397eed 100644 --- a/src/app/showcase/doc/messages/animationdoc.ts +++ b/src/app/showcase/doc/messages/animationdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'animation-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.

    - +
    ` @@ -25,18 +25,27 @@ export class AnimationDoc implements OnInit { } code: Code = { - basic: ``, - html: ` -
    - + basic: ``, + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; +import { MessagesModule } from 'primeng/messages'; @Component({ selector: 'messages-animation-demo', - templateUrl: './messages-animation-demo.html' + templateUrl: './messages-animation-demo.html', + standalone: true, + imports: [MessagesModule] }) export class MessagesAnimationDemo implements OnInit { messages: Message[] | undefined; diff --git a/src/app/showcase/doc/messages/basicdoc.ts b/src/app/showcase/doc/messages/basicdoc.ts index c0f2fcbd097..da8956eb798 100644 --- a/src/app/showcase/doc/messages/basicdoc.ts +++ b/src/app/showcase/doc/messages/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -12,7 +12,7 @@ import { Code } from '../../domain/code';

    - +
    ` @@ -21,28 +21,35 @@ export class BasicDoc implements OnInit { messages: Message[] | undefined; ngOnInit() { - this.messages = [{ severity: 'success', summary: 'Success', detail: 'Message Content' }]; + this.messages = [{ severity: 'info', detail: 'Message Content' }]; } code: Code = { - basic: ``, - html: ` -
    - + basic: ``, + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; +import { MessagesModule } from 'primeng/messages'; @Component({ selector: 'messages-basic-demo', - templateUrl: './messages-basic-demo.html' + templateUrl: './messages-basic-demo.html', + standalone: true, + imports: [MessagesModule] }) export class MessagesBasicDemo implements OnInit { messages: Message[] | undefined; ngOnInit() { - this.messages = [{ severity: 'success', summary: 'Success', detail: 'Message Content' }]; + this.messages = [{ severity: 'info', detail: 'Message Content' }]; } }` }; diff --git a/src/app/showcase/doc/messages/closabledoc.ts b/src/app/showcase/doc/messages/closabledoc.ts index d388e9b8cf9..2e8dea7bdf4 100644 --- a/src/app/showcase/doc/messages/closabledoc.ts +++ b/src/app/showcase/doc/messages/closabledoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'closable-doc', @@ -12,44 +12,32 @@ import { Code } from '../../domain/code';

    - - +
    ` }) export class ClosableDoc implements OnInit { - messages1: Message[] | undefined; - - messages2: Message[] | undefined; + messages: Message[] | undefined; ngOnInit() { - this.messages1 = [ - { severity: 'success', summary: 'Success', detail: 'Message Content' }, - { severity: 'info', summary: 'Info', detail: 'Message Content' } - ]; - - this.messages2 = [ - { severity: 'warn', summary: 'Warning', detail: 'Closable Message Content' }, - { severity: 'error', summary: 'Error', detail: 'Closable Message Content' } - ]; + this.messages = [{ severity: 'info', detail: 'Not Closable' }]; } code: Code = { - basic: ` -`, - html: ` -
    - - + basic: ``, + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; +import { MessagesModule } from 'primeng/messages'; @Component({ selector: 'messages-closable-demo', - templateUrl: './messages-closable-demo.html' + templateUrl: './messages-closable-demo.html', + standalone: true, + imports: [MessagesModule] }) export class MessagesClosableDemo implements OnInit { messages1: Message[] | undefined; diff --git a/src/app/showcase/doc/messages/dynamicdoc.ts b/src/app/showcase/doc/messages/dynamicdoc.ts index 73c5c230d9a..061088c95d5 100644 --- a/src/app/showcase/doc/messages/dynamicdoc.ts +++ b/src/app/showcase/doc/messages/dynamicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { Message } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'messages-dynamic-demo', @@ -9,9 +9,9 @@ import { Code } from '../../domain/code';

    A binding to the value property is required to provide messages to the component.

    - - - + + +
    ` @@ -21,10 +21,9 @@ export class DynamicDoc { addMessages() { this.messages = [ - { severity: 'success', summary: 'Success', detail: 'Message Content' }, - { severity: 'info', summary: 'Info', detail: 'Message Content' }, - { severity: 'warn', summary: 'Warning', detail: 'Message Content' }, - { severity: 'error', summary: 'Error', detail: 'Message Content' } + { severity: 'info', summary: 'Dynamic Info Message' }, + { severity: 'success', summary: 'Dynamic Success Message' }, + { severity: 'warn', summary: 'Dynamic Warning Message' } ]; } @@ -33,32 +32,54 @@ export class DynamicDoc { } code: Code = { - basic: ` - -`, - html: ` -
    - - - + basic: ` + +`, + html: `
    + + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; +import { MessagesModule } from 'primeng/messages'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'messages-dynamic-demo', - templateUrl: './messages-dynamic-demo.html' + templateUrl: './messages-dynamic-demo.html', + standalone: true, + imports: [MessagesModule, ButtonModule, RippleModule] }) export class MessagesDynamicDemo { messages: Message[] | undefined; addMessages() { this.messages = [ - { severity: 'success', summary: 'Success', detail: 'Message Content' }, - { severity: 'info', summary: 'Info', detail: 'Message Content' }, - { severity: 'warn', summary: 'Warning', detail: 'Message Content' }, - { severity: 'error', summary: 'Error', detail: 'Message Content' } + { severity: 'info', summary: 'Dynamic Info Message' }, + { severity: 'success', summary: 'Dynamic Success Message' }, + { severity: 'warn', summary: 'Dynamic Warning Message' } ]; } diff --git a/src/app/showcase/doc/messages/importdoc.ts b/src/app/showcase/doc/messages/importdoc.ts index 27cf4d311a7..4d5d1087e86 100644 --- a/src/app/showcase/doc/messages/importdoc.ts +++ b/src/app/showcase/doc/messages/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-demo', diff --git a/src/app/showcase/doc/messages/inlinedoc.ts b/src/app/showcase/doc/messages/inlinedoc.ts index 996a6657c11..c6810be0166 100644 --- a/src/app/showcase/doc/messages/inlinedoc.ts +++ b/src/app/showcase/doc/messages/inlinedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'messages-inline-demo', diff --git a/src/app/showcase/doc/messages/messagesdoc.module.ts b/src/app/showcase/doc/messages/messagesdoc.module.ts index 55574b5387e..884da815ecd 100644 --- a/src/app/showcase/doc/messages/messagesdoc.module.ts +++ b/src/app/showcase/doc/messages/messagesdoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { MessagesModule } from 'primeng/messages'; import { MessageModule } from 'primeng/message'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { MessagesStyleDoc } from './messagesstyledoc'; @@ -20,9 +20,10 @@ import { ServiceDoc } from './servicedoc'; import { InlineDoc } from './inlinedoc'; import { AnimationDoc } from './animationdoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { AvatarModule } from 'primeng/avatar'; @NgModule({ - imports: [CommonModule, AppCodeModule, FormsModule, RouterModule, MessagesModule, ButtonModule, MessageModule, InputTextModule, AppDocModule], + imports: [CommonModule, AppCodeModule, FormsModule, RouterModule, MessagesModule, ButtonModule, MessageModule, InputTextModule, AvatarModule, AppDocModule], declarations: [BasicDoc, ImportDoc, ClosableDoc, StaticDoc, DynamicDoc, ServiceDoc, SeverityDoc, InlineDoc, MessagesStyleDoc, AnimationDoc, MessageStyleDoc, AccessibilityDoc], exports: [AppDocModule] }) diff --git a/src/app/showcase/doc/messages/servicedoc.ts b/src/app/showcase/doc/messages/servicedoc.ts index e08b3d4a002..a2410777643 100644 --- a/src/app/showcase/doc/messages/servicedoc.ts +++ b/src/app/showcase/doc/messages/servicedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'service-doc', @@ -13,11 +13,11 @@ import { Code } from '../../domain/code';
    - - - + + +
    - +
    `, @@ -43,27 +43,29 @@ export class ServiceDoc { code: Code = { basic: `
    - - - + + +
    -`, - html: ` -
    +`, + html: `
    - - - + + +
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Message, MessageService } from 'primeng/api'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { MessageService } from 'primeng/api'; +import { MessagesModule } from 'primeng/messages'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'messages-service-demo', templateUrl: './messages-service-demo.html', + standalone: true, + imports: [MessagesModule, ButtonModule], providers: [MessageService] }) export class MessagesServiceDemo { diff --git a/src/app/showcase/doc/messages/severitydoc.ts b/src/app/showcase/doc/messages/severitydoc.ts index 4a25e645d0e..b5c70b2f748 100644 --- a/src/app/showcase/doc/messages/severitydoc.ts +++ b/src/app/showcase/doc/messages/severitydoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'severity-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    The severity option specifies the type of the message.

    - +
    ` @@ -19,36 +19,37 @@ export class SeverityDoc implements OnInit { ngOnInit() { this.messages = [ - { severity: 'info', summary: 'Info', detail: 'Message Content' }, - { severity: 'success', summary: 'Success', detail: 'Message Content' }, - { severity: 'warn', summary: 'Warning', detail: 'Message Content' }, - { severity: 'error', summary: 'Error', detail: 'Message Content' } + { severity: 'info', detail: 'Info Message' }, + { severity: 'success', detail: 'Success Message' }, + { severity: 'warn', detail: 'Warning Message' }, + { severity: 'error', detail: 'Error Message' } ]; } code: Code = { - basic: ``, - html: ` -
    - + basic: ``, + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { Message } from 'primeng/api'; +import { MessagesModule } from 'primeng/messages'; @Component({ selector: 'messages-severity-demo', - templateUrl: './messages-severity-demo.html' + templateUrl: './messages-severity-demo.html', + standalone: true, + imports: [MessagesModule] }) export class MessagesSeverityDemo implements OnInit { messages: Message[] | undefined; ngOnInit() { this.messages = [ - { severity: 'info', summary: 'Info', detail: 'Message Content' }, - { severity: 'success', summary: 'Success', detail: 'Message Content' }, - { severity: 'warn', summary: 'Warning', detail: 'Message Content' }, - { severity: 'error', summary: 'Error', detail: 'Message Content' }, + { severity: 'info', detail: 'Info Message' }, + { severity: 'success', detail: 'Success Message' }, + { severity: 'warn', detail: 'Warning Message' }, + { severity: 'error', detail: 'Error Message' } ]; } }` diff --git a/src/app/showcase/doc/messages/staticdoc.ts b/src/app/showcase/doc/messages/staticdoc.ts index e22a70d372c..f6b3ffde6e7 100644 --- a/src/app/showcase/doc/messages/staticdoc.ts +++ b/src/app/showcase/doc/messages/staticdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'static-doc', @@ -26,8 +26,7 @@ export class StaticDoc {
    Always bet on Prime.
    `, - html: ` -
    + html: `
    @@ -35,12 +34,14 @@ export class StaticDoc {
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { MessagesModule } from 'primeng/messages'; @Component({ selector: 'messages-static-demo', - templateUrl: './messages-static-demo.html' + templateUrl: './messages-static-demo.html', + standalone: true, + imports: [MessagesModule] }) export class MessagesStaticDemo { }` }; diff --git a/src/app/showcase/doc/metergroup/basicdoc.ts b/src/app/showcase/doc/metergroup/basicdoc.ts index 538bb37e02f..bd68e062fc1 100644 --- a/src/app/showcase/doc/metergroup/basicdoc.ts +++ b/src/app/showcase/doc/metergroup/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/metergroup/icondoc.ts b/src/app/showcase/doc/metergroup/icondoc.ts index 5d50aa15738..21551f646c6 100644 --- a/src/app/showcase/doc/metergroup/icondoc.ts +++ b/src/app/showcase/doc/metergroup/icondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'icon-doc', diff --git a/src/app/showcase/doc/metergroup/importdoc.ts b/src/app/showcase/doc/metergroup/importdoc.ts index 864c12676e2..798a326a8dd 100644 --- a/src/app/showcase/doc/metergroup/importdoc.ts +++ b/src/app/showcase/doc/metergroup/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/metergroup/labeldoc.ts b/src/app/showcase/doc/metergroup/labeldoc.ts index af426688db2..8b30673395a 100644 --- a/src/app/showcase/doc/metergroup/labeldoc.ts +++ b/src/app/showcase/doc/metergroup/labeldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'label-doc', diff --git a/src/app/showcase/doc/metergroup/metergroupdoc.module.ts b/src/app/showcase/doc/metergroup/metergroupdoc.module.ts index 51c953845e6..85e2dcf251c 100644 --- a/src/app/showcase/doc/metergroup/metergroupdoc.module.ts +++ b/src/app/showcase/doc/metergroup/metergroupdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { FormsModule } from '@angular/forms'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; import { ButtonModule } from 'primeng/button'; diff --git a/src/app/showcase/doc/metergroup/minmaxdoc.ts b/src/app/showcase/doc/metergroup/minmaxdoc.ts index ab71820e127..d7ab7fcaeea 100644 --- a/src/app/showcase/doc/metergroup/minmaxdoc.ts +++ b/src/app/showcase/doc/metergroup/minmaxdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'min-max-doc', diff --git a/src/app/showcase/doc/metergroup/multipledoc.ts b/src/app/showcase/doc/metergroup/multipledoc.ts index e5ca7f3cd4a..d0933c7c902 100644 --- a/src/app/showcase/doc/metergroup/multipledoc.ts +++ b/src/app/showcase/doc/metergroup/multipledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'multiple-doc', diff --git a/src/app/showcase/doc/metergroup/templatedoc.ts b/src/app/showcase/doc/metergroup/templatedoc.ts index 13bbf3016d3..9e89d3b2b78 100644 --- a/src/app/showcase/doc/metergroup/templatedoc.ts +++ b/src/app/showcase/doc/metergroup/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', diff --git a/src/app/showcase/doc/metergroup/verticaldoc.ts b/src/app/showcase/doc/metergroup/verticaldoc.ts index 413fd767079..2cae665444f 100644 --- a/src/app/showcase/doc/metergroup/verticaldoc.ts +++ b/src/app/showcase/doc/metergroup/verticaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'vertical-doc', diff --git a/src/app/showcase/doc/multiselect/accessibilitydoc.ts b/src/app/showcase/doc/multiselect/accessibilitydoc.ts index e2d8d1be2a7..0cdc708379f 100644 --- a/src/app/showcase/doc/multiselect/accessibilitydoc.ts +++ b/src/app/showcase/doc/multiselect/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -222,8 +222,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/multiselect/basicdoc.ts b/src/app/showcase/doc/multiselect/basicdoc.ts index b912e7b012f..f48c1a7035d 100644 --- a/src/app/showcase/doc/multiselect/basicdoc.ts +++ b/src/app/showcase/doc/multiselect/basicdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -17,7 +17,7 @@ interface City {

    - +
    ` @@ -38,15 +38,23 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string, @@ -55,7 +63,9 @@ interface City { @Component({ selector: 'multi-select-basic-demo', - templateUrl: './multi-select-basic-demo.html' + templateUrl: './multi-select-basic-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] }) export class MultiSelectBasicDemo implements OnInit { diff --git a/src/app/showcase/doc/multiselect/chipsdoc.ts b/src/app/showcase/doc/multiselect/chipsdoc.ts index b25dfc9771c..dd8ba8da4e0 100644 --- a/src/app/showcase/doc/multiselect/chipsdoc.ts +++ b/src/app/showcase/doc/multiselect/chipsdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

    Selected values are displayed as a comma separated list by default, setting display as chip displays them as chips.

    - +
    ` @@ -34,15 +34,27 @@ export class ChipsDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string, @@ -51,7 +63,9 @@ interface City { @Component({ selector: 'multi-select-chips-demo', - templateUrl: './multi-select-chips-demo.html' + templateUrl: './multi-select-chips-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] }) export class MultiSelectChipsDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/multiselect/disableddoc.ts b/src/app/showcase/doc/multiselect/disableddoc.ts index 6213ba422e2..e6748185874 100644 --- a/src/app/showcase/doc/multiselect/disableddoc.ts +++ b/src/app/showcase/doc/multiselect/disableddoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

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

    - +
    ` @@ -34,15 +34,23 @@ export class DisabledDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string, @@ -51,7 +59,9 @@ interface City { @Component({ selector: 'multi-select-disabled-demo', - templateUrl: './multi-select-disabled-demo.html' + templateUrl: './multi-select-disabled-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] }) export class MultiSelectDisabledDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/multiselect/filleddoc.ts b/src/app/showcase/doc/multiselect/filleddoc.ts new file mode 100644 index 00000000000..ea237d23779 --- /dev/null +++ b/src/app/showcase/doc/multiselect/filleddoc.ts @@ -0,0 +1,85 @@ +import { Component, OnInit } from '@angular/core'; +import { Code } from '@domain/code'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'filled-doc', + template: ` + +

    Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

    +     +
    + +
    + + ` +}) +export class FilledDoc implements OnInit { + cities!: City[]; + + selectedCities!: any[]; + + 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'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; + +interface City { + name: string, + code: string +} + +@Component({ + selector: 'multi-select-filled-demo', + templateUrl: './multi-select-filled-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] +}) +export class MultiSelectFilledDemo implements OnInit { + + cities!: City[]; + + selectedCities!: City[]; + + 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/multiselect/filterdoc.ts b/src/app/showcase/doc/multiselect/filterdoc.ts index 63d4f8483f5..9a816e42a3a 100644 --- a/src/app/showcase/doc/multiselect/filterdoc.ts +++ b/src/app/showcase/doc/multiselect/filterdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

    MultiSelect provides built-in filtering that is enabled by adding the filter property.

    - +
    ` @@ -34,15 +34,25 @@ export class FilterDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string, @@ -51,7 +61,9 @@ interface City { @Component({ selector: 'multi-select-filter-demo', - templateUrl: './multi-select-filter-demo.html' + templateUrl: './multi-select-filter-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] }) export class MultiSelectFilterDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/multiselect/floatlabeldoc.ts b/src/app/showcase/doc/multiselect/floatlabeldoc.ts index be0975c22ce..b0047a963c1 100644 --- a/src/app/showcase/doc/multiselect/floatlabeldoc.ts +++ b/src/app/showcase/doc/multiselect/floatlabeldoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -10,13 +10,13 @@ interface City { selector: 'floatlabel-doc', template: ` -

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

    +

    A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
    - - - - + + + +
    ` @@ -37,21 +37,30 @@ export class FloatLabelDoc implements OnInit { } code: Code = { - basic: ` - - -`, + basic: ` + + +`, - html: ` -
    - - - - + html: `
    + + + +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; +import { FloatLabelModule } from 'primeng/floatlabel'; interface City { name: string, @@ -60,7 +69,9 @@ interface City { @Component({ selector: 'multi-select-floatlabel-demo', - templateUrl: './multi-select-floatlabel-demo.html' + templateUrl: './multi-select-floatlabel-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule, FloatLabelModule] }) export class MultiSelectFloatlabelDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/multiselect/groupdoc.ts b/src/app/showcase/doc/multiselect/groupdoc.ts index 9616c160879..fba68504eb1 100644 --- a/src/app/showcase/doc/multiselect/groupdoc.ts +++ b/src/app/showcase/doc/multiselect/groupdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { SelectItemGroup } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -67,30 +67,48 @@ export class GroupDoc { } code: Code = { - basic: ` - -
    - - {{ group.label }} -
    -     -    `, - - html: ` -
    - + basic: `
    - + {{ group.label }}
    +    `, + + html: `
    + + +
    + + {{ group.label }} +
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { SelectItemGroup } from 'primeng/api'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string, @@ -99,7 +117,9 @@ interface City { @Component({ selector: 'multi-select-group-demo', - templateUrl: './multi-select-group-demo.html' + templateUrl: './multi-select-group-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] }) export class MultiSelectGroupDemo { groupedCities!: SelectItemGroup[]; diff --git a/src/app/showcase/doc/multiselect/importdoc.ts b/src/app/showcase/doc/multiselect/importdoc.ts index 07daa22025e..5e56f17cb19 100644 --- a/src/app/showcase/doc/multiselect/importdoc.ts +++ b/src/app/showcase/doc/multiselect/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/multiselect/invaliddoc.ts b/src/app/showcase/doc/multiselect/invaliddoc.ts index cb81fef0f83..da11a4ababf 100644 --- a/src/app/showcase/doc/multiselect/invaliddoc.ts +++ b/src/app/showcase/doc/multiselect/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -13,7 +13,7 @@ interface City {

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

    - +
    ` @@ -34,15 +34,23 @@ export class InvalidDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; interface City { name: string, @@ -51,7 +59,9 @@ interface City { @Component({ selector: 'multi-select-invalid-demo', - templateUrl: './multi-select-invalid-demo.html' + templateUrl: './multi-select-invalid-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] }) export class MultiSelectInvalidDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/multiselect/loadingstatedoc.ts b/src/app/showcase/doc/multiselect/loadingstatedoc.ts new file mode 100644 index 00000000000..52844a685d8 --- /dev/null +++ b/src/app/showcase/doc/multiselect/loadingstatedoc.ts @@ -0,0 +1,85 @@ +import { Component, OnInit } from '@angular/core'; +import { Code } from '@domain/code'; + +interface City { + name: string; + code: string; +} + +@Component({ + selector: 'loading-state-doc', + template: ` + +

    Loading state can be used loading property.

    +     +
    + +
    + + ` +}) +export class LoadingStateDoc implements OnInit { + cities!: City[]; + + selectedCities!: any[]; + + 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'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; + +interface City { + name: string, + code: string +} + +@Component({ + selector: 'multi-select-loading-state-demo', + templateUrl: './multi-select-loading-state-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] +}) +export class MultiSelectLoadingStateDemo implements OnInit { + + cities!: City[]; + + selectedCities!: City[]; + + 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/multiselect/multiselectdoc.module.ts b/src/app/showcase/doc/multiselect/multiselectdoc.module.ts index 8bab07ff1a4..1685365b272 100644 --- a/src/app/showcase/doc/multiselect/multiselectdoc.module.ts +++ b/src/app/showcase/doc/multiselect/multiselectdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { MultiSelectModule } from 'primeng/multiselect'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ChipsDoc } from './chipsdoc'; @@ -18,10 +18,13 @@ import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { VirtualScrollDoc } from './virtualscrolldoc'; +import { LoadingStateDoc } from './loadingstatedoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { FilledDoc } from './filleddoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, MultiSelectModule, FormsModule, ReactiveFormsModule, AppDocModule], + imports: [CommonModule, AppCodeModule, RouterModule, MultiSelectModule, FormsModule, ReactiveFormsModule, AppDocModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, ChipsDoc, GroupDoc, FilterDoc, TemplateDoc, VirtualScrollDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, ChipsDoc, GroupDoc, FilterDoc, TemplateDoc, VirtualScrollDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, LoadingStateDoc, FilledDoc] }) export class MultiSelectDocModule {} diff --git a/src/app/showcase/doc/multiselect/reactiveformsdoc.ts b/src/app/showcase/doc/multiselect/reactiveformsdoc.ts index 900717a4eb9..0c1d002d0d6 100644 --- a/src/app/showcase/doc/multiselect/reactiveformsdoc.ts +++ b/src/app/showcase/doc/multiselect/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface City { name: string; @@ -15,7 +15,7 @@ interface City {
    - +
    @@ -42,19 +42,25 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
    - + `, - html: ` -
    + html: `
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; interface City { name: string, @@ -63,7 +69,9 @@ interface City { @Component({ selector: 'multi-select-reactive-forms-demo', - templateUrl: './multi-select-reactive-forms-demo.html' + templateUrl: './multi-select-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, MultiSelectModule] }) export class MultiSelectReactiveFormsDemo implements OnInit { cities!: City[]; diff --git a/src/app/showcase/doc/multiselect/templatedoc.ts b/src/app/showcase/doc/multiselect/templatedoc.ts index 10e2dbe6a05..9fd37524d41 100644 --- a/src/app/showcase/doc/multiselect/templatedoc.ts +++ b/src/app/showcase/doc/multiselect/templatedoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface Country { name: string; @@ -27,6 +27,14 @@ interface Country {
    {{ country.name }}
    + +
    + + {{ selectedCountries ? selectedCountries.length : 0 }} + + item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected. +
    +
    @@ -53,43 +61,79 @@ export class TemplateDoc implements OnInit { } code: Code = { - basic: ` - -
    - -
    {{ option.name }},
    -
    -
    Select Countries
    -     - -
    - -
    {{ country.name }}
    -
    -     -    `, - - html: ` -
    - + basic: `
    - +
    {{ option.name }},
    Select Countries
    - +
    {{ country.name }}
     + +
    + + {{ selectedCountries ? selectedCountries.length : 0 }} + + item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected. +
    +     +    `, + + html: `
    + + +
    + +
    {{ option.name }},
    +
    +
    Select Countries
    +     + +
    + +
    {{ country.name }}
    +
    +     + +
    + + {{ selectedCountries ? selectedCountries.length : 0 }} + + item{{ (selectedCountries ? selectedCountries.length : 0) > 1 ? 's' : '' }} selected. +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; interface Country { name: string; @@ -98,7 +142,9 @@ interface Country { @Component({ selector: 'multi-select-template-demo', - templateUrl: './multi-select-template-demo.html' + templateUrl: './multi-select-template-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] }) export class MultiSelectTemplateDemo implements OnInit { countries!: Country[]; diff --git a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts index f624aafef33..e30579c9477 100644 --- a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts +++ b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { MultiSelect } from 'primeng/multiselect'; @Component({ @@ -19,7 +19,6 @@ import { MultiSelect } from 'primeng/multiselect'; [(ngModel)]="selectedItems" optionLabel="label" [virtualScroll]="true" - [filter]="true" [virtualScrollItemSize]="43" class="multiselect-custom-virtual-scroll" placeholder="Select Cities" @@ -57,7 +56,6 @@ export class VirtualScrollDoc { [(ngModel)]="selectedItems" optionLabel="label" [virtualScroll]="true" - [filter]="true" [virtualScrollItemSize]="43" class="multiselect-custom-virtual-scroll" placeholder="Select Cities" @@ -70,8 +68,7 @@ export class VirtualScrollDoc {     `, - html: ` -
    + html: `
    `, - typescript: ` -import { Component, ViewChild } from '@angular/core'; + typescript: `import { Component, ViewChild } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MultiSelectModule } from 'primeng/multiselect'; import { MultiSelect } from 'primeng/multiselect'; @Component({ selector: 'multi-select-virtual-scroll-demo', - templateUrl: './multi-select-virtual-scroll-demo.html' + templateUrl: './multi-select-virtual-scroll-demo.html', + standalone: true, + imports: [FormsModule, MultiSelectModule] }) export class MultiSelectVirtualScrollDemo { @ViewChild('ms') ms: MultiSelect; diff --git a/src/app/showcase/doc/orderlist/accessibilitydoc.ts b/src/app/showcase/doc/orderlist/accessibilitydoc.ts index 03668ccdafa..04e4de417d4 100644 --- a/src/app/showcase/doc/orderlist/accessibilitydoc.ts +++ b/src/app/showcase/doc/orderlist/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -108,8 +108,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { html: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/orderlist/basicdoc.ts b/src/app/showcase/doc/orderlist/basicdoc.ts index 7f3e8506d1d..6a1c260041f 100644 --- a/src/app/showcase/doc/orderlist/basicdoc.ts +++ b/src/app/showcase/doc/orderlist/basicdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'basic-doc', @@ -10,7 +10,7 @@ import { ProductService } from '../../service/productservice';

    OrderList is used as a controlled input with value properties. Content of a list item needs to be defined with the pTemplate property that receives an object in the list as parameter.

    - +
    @@ -53,49 +53,71 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ` - -
    - -
    - {{ product.name }} -
    - - {{ product.category }} -
    -
    - {{ '$' + product.price }} -
    -     -    `, - - html: ` -
    - + basic: `
    - -
    - {{ product.name }} -
    - - {{ product.category }} -
    -
    - {{ '$' + product.price }} + +
    + {{ product.name }} +
    + + + {{ product.category }} + +
    +
    + + {{ '$' + product.price }} +
    +    `, + + html: `
    + + +
    + +
    + {{ product.name }} +
    + + + {{ product.category }} + +
    +
    + + {{ '$' + product.price }} + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { OrderListModule } from 'primeng/orderlist'; @Component({ selector: 'orderlist-basic-demo', - templateUrl: './orderlist-basic-demo.html' + templateUrl: './orderlist-basic-demo.html', + standalone: true, + imports: [OrderListModule], + providers: [ProductService] }) export class OrderlistBasicDemo implements OnInit { products!: Product[]; diff --git a/src/app/showcase/doc/orderlist/dragdropdoc.ts b/src/app/showcase/doc/orderlist/dragdropdoc.ts index 706b4336cc2..38f5d53d8a4 100644 --- a/src/app/showcase/doc/orderlist/dragdropdoc.ts +++ b/src/app/showcase/doc/orderlist/dragdropdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'drag-drop-doc', @@ -10,7 +10,7 @@ import { ProductService } from '../../service/productservice';

    Items can be reordered using drag and drop by enabling dragdrop property.

    - +
    @@ -53,49 +53,73 @@ export class DragDropDoc implements OnInit { } code: Code = { - basic: ` - -
    - -
    - {{ product.name }} -
    - - {{ product.category }} -
    -
    - {{ '$' + product.price }} -
    -     -    `, - - html: ` -
    - + basic: `
    - -
    - {{ product.name }} -
    - - {{ product.category }} -
    -
    - {{ '$' + product.price }} + +
    + {{ product.name }} +
    + + + {{ product.category }} + +
    +
    + + {{ '$' + product.price }} +
    +    `, + + html: `
    + + +
    + +
    + {{ product.name }} +
    + + + {{ product.category }} + +
    +
    + + {{ '$' + product.price }} + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { OrderListModule } from 'primeng/orderlist'; @Component({ selector: 'orderlist-drag-drop-demo', - templateUrl: './orderlist-drag-drop-demo.html' + templateUrl: './orderlist-drag-drop-demo.html', + standalone: true, + imports: [OrderListModule], + providers: [ProductService] }) export class OrderlistDragDropDemo implements OnInit { products!: Product[]; diff --git a/src/app/showcase/doc/orderlist/filterdoc.ts b/src/app/showcase/doc/orderlist/filterdoc.ts index 8bf85352089..763b9425f7b 100644 --- a/src/app/showcase/doc/orderlist/filterdoc.ts +++ b/src/app/showcase/doc/orderlist/filterdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'filter-doc', @@ -10,7 +10,7 @@ import { ProductService } from '../../service/productservice';

    Filter value is checked against the property of an object configured with the filterBy property

    - +
    @@ -53,49 +53,71 @@ export class FilterDoc implements OnInit { } code: Code = { - basic: ` - -
    - -
    - {{ product.name }} -
    - - {{ product.category }} -
    -
    - {{ '$' + product.price }} -
    -     -    `, - - html: ` -
    - + basic: `
    - -
    - {{ product.name }} -
    - - {{ product.category }} + +
    + {{ product.name }} +
    + + {{ product.category }} +
    -
    - {{ '$' + product.price }} + + {{ '$' + product.price }} +
    +`, + + html: `
    + + +
    + +
    + {{ product.name }} +
    + + {{ product.category }} +
    +
    + + {{ '$' + product.price }} + +
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { OrderListModule } from 'primeng/orderlist'; @Component({ selector: 'orderlist-filter-demo', - templateUrl: './orderlist-filter-demo.html' + templateUrl: './orderlist-filter-demo.html', + standalone: true, + imports: [OrderListModule], + providers: [ProductService] }) export class OrderlistFilterDemo implements OnInit { products!: Product[]; diff --git a/src/app/showcase/doc/orderlist/importdoc.ts b/src/app/showcase/doc/orderlist/importdoc.ts index 3e9d216994f..a620186bc0e 100644 --- a/src/app/showcase/doc/orderlist/importdoc.ts +++ b/src/app/showcase/doc/orderlist/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/orderlist/orderlistdoc.module.ts b/src/app/showcase/doc/orderlist/orderlistdoc.module.ts index d40b2b196de..f1298b6f97e 100644 --- a/src/app/showcase/doc/orderlist/orderlistdoc.module.ts +++ b/src/app/showcase/doc/orderlist/orderlistdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { OrderListModule } from 'primeng/orderlist'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { DragDropDoc } from './dragdropdoc'; import { FilterDoc } from './filterdoc'; diff --git a/src/app/showcase/doc/organizationchart/basicdoc.ts b/src/app/showcase/doc/organizationchart/basicdoc.ts index 79d1c0c4496..50bdc51e4be 100644 --- a/src/app/showcase/doc/organizationchart/basicdoc.ts +++ b/src/app/showcase/doc/organizationchart/basicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    OrganizationChart requires a collection of TreeNode instances as a value.

    - +
    ` @@ -49,20 +49,21 @@ export class BasicDoc { ]; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { OrganizationChartModule } from 'primeng/organizationchart'; @Component({ selector: 'organization-chart-basic-doc', templateUrl: './organization-chart-basic-doc.html', + standalone: true, + imports: [OrganizationChartModule] }) export class OrganizationChartBasicDoc { data: TreeNode[] = [ diff --git a/src/app/showcase/doc/organizationchart/colored.doc.ts b/src/app/showcase/doc/organizationchart/colored.doc.ts index 9bd08918872..3823de91c2a 100644 --- a/src/app/showcase/doc/organizationchart/colored.doc.ts +++ b/src/app/showcase/doc/organizationchart/colored.doc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'organization-chart-colored-demo', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    Styling a specific node is configured with class and style options of a TreeNode.

    - +
    @@ -81,36 +81,49 @@ export class ColoredDoc { ]; code: Code = { - basic: ` + basic: `
    - -
    {{ node.data.name }}
    -
    {{ node.data.title }}
    + +
    + {{ node.data.name }} +
    +
    + {{ node.data.title }} +
    `, - html: ` -
    - + html: `
    +
    - -
    {{ node.data.name }}
    -
    {{ node.data.title }}
    + +
    + {{ node.data.name }} +
    +
    + {{ node.data.title }} +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { OrganizationChartModule } from 'primeng/organizationchart'; @Component({ selector: 'organization-chart-colored-demo', templateUrl: './organization-chart-colored-demo.html', + standalone: true, + imports: [OrganizationChartModule] }) export class OrganizationChartColoredDemo { data: TreeNode[] = [ diff --git a/src/app/showcase/doc/organizationchart/importdoc.ts b/src/app/showcase/doc/organizationchart/importdoc.ts index c20d190eea6..01e5da7a85f 100644 --- a/src/app/showcase/doc/organizationchart/importdoc.ts +++ b/src/app/showcase/doc/organizationchart/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/organizationchart/organizationchartdoc.module.ts b/src/app/showcase/doc/organizationchart/organizationchartdoc.module.ts index d72c712295a..6a40583dd2c 100644 --- a/src/app/showcase/doc/organizationchart/organizationchartdoc.module.ts +++ b/src/app/showcase/doc/organizationchart/organizationchartdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { OrganizationChartModule } from 'primeng/organizationchart'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ColoredDoc } from './colored.doc'; diff --git a/src/app/showcase/doc/organizationchart/selectiondoc.ts b/src/app/showcase/doc/organizationchart/selectiondoc.ts index fec6976dbe7..cf3a7c1326b 100644 --- a/src/app/showcase/doc/organizationchart/selectiondoc.ts +++ b/src/app/showcase/doc/organizationchart/selectiondoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'selection-doc', @@ -11,7 +11,7 @@ import { Code } from '../../domain/code';

    - +
    @@ -76,36 +76,57 @@ export class SelectionDoc { ]; code: Code = { - basic: ` - -
    - -
    {{ node.data.name }}
    -
    {{ node.data.title }}
    -
    -     -    `, - - html: ` -
    - + basic: `
    - -
    {{ node.data.name }}
    -
    {{ node.data.title }}
    + +
    + {{ node.data.name }} +
    +
    + {{ node.data.title }} +
    +    `, + + html: `
    + + +
    + +
    + {{ node.data.name }} +
    +
    + {{ node.data.title }} +
    +
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { OrganizationChartModule } from 'primeng/organizationchart'; @Component({ selector: 'organization-chart-selection-demo', templateUrl: './organization-chart-selection-demo.html', + standalone: true, + imports: [OrganizationChartModule] }) export class OrganizationChartSelectionDemo { selectedNodes!: TreeNode[]; diff --git a/src/app/showcase/doc/organizationchart/templatedoc.ts b/src/app/showcase/doc/organizationchart/templatedoc.ts index b971aae4c85..8d062ede82d 100644 --- a/src/app/showcase/doc/organizationchart/templatedoc.ts +++ b/src/app/showcase/doc/organizationchart/templatedoc.ts @@ -1,6 +1,6 @@ import { Component, Input } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    Custom content instead of a node label is defined using the pTemplate property.

    - +
    @@ -64,36 +64,53 @@ export class TemplateDoc { ]; code: Code = { - basic: ` + basic: `
    - -
    {{ node.data.name }}
    -
    {{ node.label }}
    + +
    + {{ node.data.name }} +
    +
    + {{ node.label }} +
    `, - html: ` -
    - + html: `
    +
    - -
    {{ node.data.name }}
    -
    {{ node.label }}
    + +
    + {{ node.data.name }} +
    +
    + {{ node.label }} +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { OrganizationChartModule } from 'primeng/organizationchart'; @Component({ selector: 'organization-chart-template-demo', templateUrl: './organization-chart-template-demo.html', + standalone: true, + imports: [OrganizationChartModule] }) export class OrganizationChartTemplateDemo { data: TreeNode[] = [ diff --git a/src/app/showcase/doc/overlay/accessibilitydoc.ts b/src/app/showcase/doc/overlay/accessibilitydoc.ts index 17bc55fd772..abe4a4fc39e 100644 --- a/src/app/showcase/doc/overlay/accessibilitydoc.ts +++ b/src/app/showcase/doc/overlay/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/overlay/appendtodoc.ts b/src/app/showcase/doc/overlay/appendtodoc.ts index 0b814ee6496..83897e85313 100644 --- a/src/app/showcase/doc/overlay/appendtodoc.ts +++ b/src/app/showcase/doc/overlay/appendtodoc.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'appendto-doc', diff --git a/src/app/showcase/doc/overlay/autozindexdoc.ts b/src/app/showcase/doc/overlay/autozindexdoc.ts index 84d3bd8a07f..a4236119700 100644 --- a/src/app/showcase/doc/overlay/autozindexdoc.ts +++ b/src/app/showcase/doc/overlay/autozindexdoc.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { AppDocSectionTextComponent } from '../../layout/doc/app.docsectiontext.component'; +import { AppDocSectionTextComponent } from '@layout/doc/app.docsectiontext.component'; @Component({ selector: 'auto-zindex-doc', diff --git a/src/app/showcase/doc/overlay/basezindexdoc.ts b/src/app/showcase/doc/overlay/basezindexdoc.ts index be8cc52367f..55fab4e3a25 100644 --- a/src/app/showcase/doc/overlay/basezindexdoc.ts +++ b/src/app/showcase/doc/overlay/basezindexdoc.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { AppDocSectionTextComponent } from '../../layout/doc/app.docsectiontext.component'; +import { AppDocSectionTextComponent } from '@layout/doc/app.docsectiontext.component'; @Component({ selector: 'base-zindex-doc', diff --git a/src/app/showcase/doc/overlay/basicdoc.ts b/src/app/showcase/doc/overlay/basicdoc.ts index 92cd59dd793..3cecc5d39dc 100644 --- a/src/app/showcase/doc/overlay/basicdoc.ts +++ b/src/app/showcase/doc/overlay/basicdoc.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/overlay/eventsdoc.ts b/src/app/showcase/doc/overlay/eventsdoc.ts index 4ba8ab08163..970a8778181 100644 --- a/src/app/showcase/doc/overlay/eventsdoc.ts +++ b/src/app/showcase/doc/overlay/eventsdoc.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'events-doc', diff --git a/src/app/showcase/doc/overlay/hideonescapedoc.ts b/src/app/showcase/doc/overlay/hideonescapedoc.ts index 396509ea98e..cab1e2091c6 100644 --- a/src/app/showcase/doc/overlay/hideonescapedoc.ts +++ b/src/app/showcase/doc/overlay/hideonescapedoc.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { AppDocSectionTextComponent } from '../../layout/doc/app.docsectiontext.component'; +import { AppDocSectionTextComponent } from '@layout/doc/app.docsectiontext.component'; @Component({ selector: 'hide-on-escape-doc', diff --git a/src/app/showcase/doc/overlay/importdoc.ts b/src/app/showcase/doc/overlay/importdoc.ts index 3bcaa4c6856..ffb29c1f504 100644 --- a/src/app/showcase/doc/overlay/importdoc.ts +++ b/src/app/showcase/doc/overlay/importdoc.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/overlay/modedoc.ts b/src/app/showcase/doc/overlay/modedoc.ts index de3887b1a60..1ba8a9507e0 100644 --- a/src/app/showcase/doc/overlay/modedoc.ts +++ b/src/app/showcase/doc/overlay/modedoc.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'mode-doc', diff --git a/src/app/showcase/doc/overlay/overlaydoc.module.ts b/src/app/showcase/doc/overlay/overlaydoc.module.ts index 5016404a723..936dfe516ce 100644 --- a/src/app/showcase/doc/overlay/overlaydoc.module.ts +++ b/src/app/showcase/doc/overlay/overlaydoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ButtonModule } from 'primeng/button'; import { OverlayModule } from 'primeng/overlay'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { OverlayBasicDemo } from './basicdoc'; import { AppendToDoc } from './appendtodoc'; import { AutoZIndexDoc } from './autozindexdoc'; diff --git a/src/app/showcase/doc/overlay/responsivedoc.ts b/src/app/showcase/doc/overlay/responsivedoc.ts index ff1a66b1c3e..7d9baadab63 100644 --- a/src/app/showcase/doc/overlay/responsivedoc.ts +++ b/src/app/showcase/doc/overlay/responsivedoc.ts @@ -1,6 +1,6 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { Code } from '../../domain/code'; -import { AppDocSectionTextComponent } from '../../layout/doc/app.docsectiontext.component'; +import { Code } from '@domain/code'; +import { AppDocSectionTextComponent } from '@layout/doc/app.docsectiontext.component'; @Component({ selector: 'responsive-doc', diff --git a/src/app/showcase/doc/overlay/targetdoc.ts b/src/app/showcase/doc/overlay/targetdoc.ts index 0ce4ff784de..f059e3c9058 100644 --- a/src/app/showcase/doc/overlay/targetdoc.ts +++ b/src/app/showcase/doc/overlay/targetdoc.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'target-doc', diff --git a/src/app/showcase/doc/overlay/templatedoc.ts b/src/app/showcase/doc/overlay/templatedoc.ts index cfbdc03ffac..1e8bc399e65 100644 --- a/src/app/showcase/doc/overlay/templatedoc.ts +++ b/src/app/showcase/doc/overlay/templatedoc.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'overlay-template-demo', diff --git a/src/app/showcase/doc/overlay/transitionoptionsdoc.ts b/src/app/showcase/doc/overlay/transitionoptionsdoc.ts index 450a2063170..3cee001242c 100644 --- a/src/app/showcase/doc/overlay/transitionoptionsdoc.ts +++ b/src/app/showcase/doc/overlay/transitionoptionsdoc.ts @@ -1,5 +1,5 @@ import { Component, Input, ViewChild } from '@angular/core'; -import { AppDocSectionTextComponent } from '../../layout/doc/app.docsectiontext.component'; +import { AppDocSectionTextComponent } from '@layout/doc/app.docsectiontext.component'; @Component({ selector: 'transition-options-doc', diff --git a/src/app/showcase/doc/overlaypanel/basicdoc.ts b/src/app/showcase/doc/overlaypanel/basicdoc.ts index a35eccfec84..806f61d5559 100644 --- a/src/app/showcase/doc/overlaypanel/basicdoc.ts +++ b/src/app/showcase/doc/overlaypanel/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,36 +8,154 @@ import { Code } from '../../domain/code';

    OverlayPanel is accessed via its reference and visibility is controlled using toggle, show and hide methods with an event of the target.

    + - product +
    +
    + Share this document + + + + + + +
    +
    + Invite Member +
    + + +
    +
    +
    + Team Members +
      +
    • + +
      + {{ member.name }} +
      {{ member.email }}
      +
      +
      + {{ member.role }} + +
      +
      • +
    +
    +
    -
    ` }) export class BasicDoc { + members = [ + { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' } + ]; + code: Code = { - basic: ` - product - -`, + basic: ` + +
    +
    + Share this document + + + + + + +
    +
    + Invite Member +
    + + +
    +
    +
    + Team Members +
      +
    • + +
      + {{ member.name }} +
      {{ member.email }}
      +
      +
      + {{ member.role }} + +
      +
      • +
    +
    +
    +     `, - html: ` -
    + html: `
    + - product +
    +
    + Share this document + + + + + + +
    +
    + Invite Member +
    + + +
    +
    +
    + Team Members +
      +
    • + +
      + {{ member.name }} +
      {{ member.email }}
      +
      +
      + {{ member.role }} + +
      +
      • +
    +
    +
    -
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { OverlayPanelModule } from 'primeng/overlaypanel'; +import { InputGroupModule } from 'primeng/inputgroup'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; +import { ChipsModule } from 'primeng/chips'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'overlay-panel-basic-demo', - templateUrl: './overlay-panel-basic-demo.html' + templateUrl: './overlay-panel-basic-demo.html', + standalone: true, + imports: [OverlayPanelModule, InputGroupModule, InputGroupAddonModule, ButtonModule, InputTextModule, ChipsModule, CommonModule] }) -export class OverlayPanelBasicDemo {}` +export class OverlayPanelBasicDemo { + members = [ + { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' } + ]; +}` }; } diff --git a/src/app/showcase/doc/overlaypanel/datatabledoc.ts b/src/app/showcase/doc/overlaypanel/datatabledoc.ts index 535ed902f69..5bfa3e177a7 100644 --- a/src/app/showcase/doc/overlaypanel/datatabledoc.ts +++ b/src/app/showcase/doc/overlaypanel/datatabledoc.ts @@ -1,9 +1,9 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { MessageService } from 'primeng/api'; import { OverlayPanel } from 'primeng/overlaypanel'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; interface TableRowSelectEvent { originalEvent?: Event; @@ -19,8 +19,8 @@ interface TableRowSelectEvent {

    An example that displays a DataTable inside a popup to select an item.

    - - + +
    @@ -36,9 +36,9 @@ interface TableRowSelectEvent { - Name + Name Image - Price + Price @@ -77,80 +77,140 @@ export class DataTableDoc implements OnInit { } code: Code = { - basic: ` - + basic: ` +
    - +
    - {{ selectedProduct.name }} - {{ '$' + selectedProduct.price }} + + {{ selectedProduct.name }} + + + {{ '$' + selectedProduct.price }} +
    - {{ selectedProduct.category }} + + {{ selectedProduct.category }} +
    - - - - Name - Image - Price - - - - - {{ product.name }} - - {{ product.price }} - - + + + + + Name + + Image + + Price + + + + + + + {{ product.name }} + + + + + {{ product.price }} + + `, html: `
    - - + +
    - +
    - {{ selectedProduct.name }} - {{ '$' + selectedProduct.price }} + + {{ selectedProduct.name }} + + + {{ '$' + selectedProduct.price }} +
    - {{ selectedProduct.category }} + + {{ selectedProduct.category }} +
    - - - - Name - Image - Price - - - - - {{ product.name }} - - {{ product.price }} - - + + + + + Name + + Image + + Price + + + + + + + {{ product.name }} + + + + + {{ product.price }} + +
    `, - typescript: ` -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + typescript: `import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { MessageService } from 'primeng/api'; import { OverlayPanel } from 'primeng/overlaypanel'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { ToastModule } from 'primeng/toast'; +import { TableModule } from 'primeng/table'; +import { ButtonModule } from 'primeng/button'; interface TableRowSelectEvent { originalEvent?: Event; @@ -162,7 +222,9 @@ interface TableRowSelectEvent { @Component({ selector: 'overlay-panel-data-table-demo', templateUrl: './overlay-panel-data-table-demo.html', - providers: [ MessageService, ProductService ] + standalone: true, + imports: [OverlayPanelModule, ToastModule, TableModule, ButtonModule], + providers: [MessageService, ProductService] }) export class OverlayPanelDataTableDemo implements OnInit { diff --git a/src/app/showcase/doc/overlaypanel/importdoc.ts b/src/app/showcase/doc/overlaypanel/importdoc.ts index 42b7a132c07..1edae8c0057 100644 --- a/src/app/showcase/doc/overlaypanel/importdoc.ts +++ b/src/app/showcase/doc/overlaypanel/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/overlaypanel/overlaypaneldoc.module.ts b/src/app/showcase/doc/overlaypanel/overlaypaneldoc.module.ts index 56a2617191c..44c1613f463 100644 --- a/src/app/showcase/doc/overlaypanel/overlaypaneldoc.module.ts +++ b/src/app/showcase/doc/overlaypanel/overlaypaneldoc.module.ts @@ -5,8 +5,8 @@ import { OverlayPanelModule } from 'primeng/overlaypanel'; import { ButtonModule } from 'primeng/button'; import { TableModule } from 'primeng/table'; import { ToastModule } from 'primeng/toast'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; @@ -14,9 +14,12 @@ import { DataTableDoc } from './datatabledoc'; import { TemplateDoc } from './templatedoc'; import { TargetDoc } from './targetdoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { InputGroupModule } from 'primeng/inputgroup'; +import { InputGroupAddonModule } from 'primeng/inputgroupaddon'; +import { ChipsModule } from 'primeng/chips'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, OverlayPanelModule, ButtonModule, TableModule, ToastModule, AppDocModule], + imports: [CommonModule, AppCodeModule, RouterModule, OverlayPanelModule, ButtonModule, TableModule, ToastModule, AppDocModule, InputGroupModule, InputGroupAddonModule, ChipsModule], declarations: [BasicDoc, ImportDoc, StyleDoc, DataTableDoc, TemplateDoc, TargetDoc, AccessibilityDoc], exports: [AppDocModule] }) diff --git a/src/app/showcase/doc/overlaypanel/targetdoc.ts b/src/app/showcase/doc/overlaypanel/targetdoc.ts index f883eecdd14..8c6ea3bc915 100644 --- a/src/app/showcase/doc/overlaypanel/targetdoc.ts +++ b/src/app/showcase/doc/overlaypanel/targetdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'target-doc', diff --git a/src/app/showcase/doc/overlaypanel/templatedoc.ts b/src/app/showcase/doc/overlaypanel/templatedoc.ts index a0f34262625..950792d09b5 100644 --- a/src/app/showcase/doc/overlaypanel/templatedoc.ts +++ b/src/app/showcase/doc/overlaypanel/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', diff --git a/src/app/showcase/doc/paginator/basicdoc.ts b/src/app/showcase/doc/paginator/basicdoc.ts index e14a99f3569..4b1e36227e5 100644 --- a/src/app/showcase/doc/paginator/basicdoc.ts +++ b/src/app/showcase/doc/paginator/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface PageEvent { first: number; @@ -18,7 +18,7 @@ interface PageEvent {

    - +
    ` @@ -34,15 +34,24 @@ export class BasicDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PaginatorModule } from 'primeng/paginator'; interface PageEvent { first: number; @@ -53,7 +62,9 @@ interface PageEvent { @Component({ selector: 'paginator-basic-demo', - templateUrl: './paginator-basic-demo.html' + templateUrl: './paginator-basic-demo.html', + standalone: true, + imports: [PaginatorModule] }) export class PaginatorBasicDemo { first: number = 0; diff --git a/src/app/showcase/doc/paginator/currentpagereportdoc.ts b/src/app/showcase/doc/paginator/currentpagereportdoc.ts new file mode 100644 index 00000000000..eed63898310 --- /dev/null +++ b/src/app/showcase/doc/paginator/currentpagereportdoc.ts @@ -0,0 +1,100 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +interface PageEvent { + first: number; + rows: number; + page: number; + pageCount: number; +} + +@Component({ + selector: 'current-page-report-doc', + template: ` + +

    Current page report item in the template displays information about the pagination state. Default value is ({{ '{' }}currentPage{{ '}' }} of {{ '{' }}totalPages{{ '}' }}) whereas available placeholders are the following;

    +
      +
    • {{ '{' }}currentPage{{ '}' }}
      • +
    • {{ '{' }}totalPages{{ '}' }}
      • +
    • {{ '{' }}rows{{ '}' }}
      • +
    • {{ '{' }}first{{ '}' }}
      • +
    • {{ '{' }}last{{ '}' }}
      • +
    • {{ '{' }}totalRecords{{ '}' }}
      • +
    +     +
    + +
    + + ` +}) +export class CurrentPageReportDoc { + first: number = 0; + + rows: number = 10; + + onPageChange(event: PageEvent) { + this.first = event.first; + this.rows = event.rows; + } + + code: Code = { + basic: ``, + + html: `
    + +
    `, + + typescript: `import { Component } from '@angular/core'; +import { PaginatorModule } from 'primeng/paginator'; + +interface PageEvent { + first: number; + rows: number; + page: number; + pageCount: number; +} + +@Component({ + selector: 'paginator-current-page-report-demo', + templateUrl: './paginator-current-page-report-demo.html', + standalone: true, + imports: [PaginatorModule] +}) +export class PaginatorCurrentPageReportDemo { + first: number = 0; + + rows: number = 10; + + onPageChange(event: PageEvent) { + this.first = event.first; + this.rows = event.rows; + } +}` + }; +} diff --git a/src/app/showcase/doc/paginator/imagesdoc.ts b/src/app/showcase/doc/paginator/imagesdoc.ts index 5d9f7e3e695..9cb7c2bbe13 100644 --- a/src/app/showcase/doc/paginator/imagesdoc.ts +++ b/src/app/showcase/doc/paginator/imagesdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface PageEvent { first: number; diff --git a/src/app/showcase/doc/paginator/importdoc.ts b/src/app/showcase/doc/paginator/importdoc.ts index bea8aa65fe0..829346caa47 100644 --- a/src/app/showcase/doc/paginator/importdoc.ts +++ b/src/app/showcase/doc/paginator/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/paginator/localedoc.ts b/src/app/showcase/doc/paginator/localedoc.ts index ca961ba1f8a..8a371f22967 100644 --- a/src/app/showcase/doc/paginator/localedoc.ts +++ b/src/app/showcase/doc/paginator/localedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface PageEvent { first: number; @@ -17,15 +17,15 @@ interface PageEvent {
    - +
    - +
    - +
    @@ -43,30 +43,67 @@ export class LocaleDoc { code: Code = { basic: `
    - +
    +
    - +
    +
    - +
    `, - html: ` -
    - + html: `
    +
    +
    - +
    +
    - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PaginatorModule } from 'primeng/paginator'; interface PageEvent { first: number; @@ -77,7 +114,9 @@ interface PageEvent { @Component({ selector: 'paginator-locale-demo', - templateUrl: './paginator-locale-demo.html' + templateUrl: './paginator-locale-demo.html', + standalone: true, + imports: [PaginatorModule] }) export class PaginatorLocaleDemo { first: number = 0; diff --git a/src/app/showcase/doc/paginator/paginatordoc.module.ts b/src/app/showcase/doc/paginator/paginatordoc.module.ts index 317cf6fbca2..b7f41323a17 100644 --- a/src/app/showcase/doc/paginator/paginatordoc.module.ts +++ b/src/app/showcase/doc/paginator/paginatordoc.module.ts @@ -6,8 +6,8 @@ import { DividerModule } from 'primeng/divider'; import { DropdownModule } from 'primeng/dropdown'; import { PaginatorModule } from 'primeng/paginator'; import { SliderModule } from 'primeng/slider'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImagesDoc } from './imagesdoc'; @@ -15,10 +15,11 @@ import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { LocaleDoc } from './localedoc'; +import { CurrentPageReportDoc } from './currentpagereportdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, PaginatorModule, ButtonModule, DividerModule, SliderModule, RouterModule, DropdownModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, TemplateDoc, ImagesDoc, StyleDoc, AccessibilityDoc, LocaleDoc] + declarations: [ImportDoc, BasicDoc, TemplateDoc, ImagesDoc, StyleDoc, AccessibilityDoc, LocaleDoc, CurrentPageReportDoc] }) export class PaginatorDocModule {} diff --git a/src/app/showcase/doc/paginator/templatedoc.ts b/src/app/showcase/doc/paginator/templatedoc.ts index d61fa8c8322..3e0b0944988 100644 --- a/src/app/showcase/doc/paginator/templatedoc.ts +++ b/src/app/showcase/doc/paginator/templatedoc.ts @@ -17,19 +17,19 @@ interface PageEvent {
    - +
    - +
    - +
    - +
    Items per page: - +
    - +
    Items per page: - +
    - +
    - +
    - +
    Items per page: - +
    @@ -121,46 +121,49 @@ export class TemplateDoc {
    Items per page: - +
    `, - html: ` -
    + html: `
    - +
    - +
    - +
    - +
    Items per page: - +
    - +
    Items per page: - +
    `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { PaginatorModule } from 'primeng/paginator'; +import { ButtonModule } from 'primeng/button'; +import { DividerModule } from 'primeng/divider'; +import { SliderModule } from 'primeng/slider'; +import { FormsModule } from '@angular/forms'; + interface PageEvent { first: number; rows: number; @@ -170,7 +173,9 @@ interface PageEvent { @Component({ selector: 'paginator-template-demo', - templateUrl: './paginator-template-demo.html' + templateUrl: './paginator-template-demo.html', + standalone: true, + imports: [PaginatorModule, ButtonModule, DividerModule, SliderModule, FormsModule] }) export class PaginatorTemplateDemo { first1: number = 0; diff --git a/src/app/showcase/doc/panel/basicdoc.ts b/src/app/showcase/doc/panel/basicdoc.ts index 4e13b915ee1..5bc1b7f02a0 100644 --- a/src/app/showcase/doc/panel/basicdoc.ts +++ b/src/app/showcase/doc/panel/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -22,13 +22,11 @@ export class BasicDoc { 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. + Lorem ipsum dolor sit amet...

    `, - 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 @@ -37,12 +35,14 @@ export class BasicDoc {

    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PanelModule } from 'primeng/panel'; @Component({ selector: 'panel-basic-demo', - templateUrl: './panel-basic-demo.html' + templateUrl: './panel-basic-demo.html', + standalone: true, + imports: [PanelModule] }) export class PanelBasicDemo {}` }; diff --git a/src/app/showcase/doc/panel/importdoc.ts b/src/app/showcase/doc/panel/importdoc.ts index 0975d13367f..2f837d8cfb2 100644 --- a/src/app/showcase/doc/panel/importdoc.ts +++ b/src/app/showcase/doc/panel/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/panel/paneldoc.module.ts b/src/app/showcase/doc/panel/paneldoc.module.ts index 5aa7ae73ece..5e924138881 100644 --- a/src/app/showcase/doc/panel/paneldoc.module.ts +++ b/src/app/showcase/doc/panel/paneldoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; 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 { 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'; diff --git a/src/app/showcase/doc/panel/templatedoc.ts b/src/app/showcase/doc/panel/templatedoc.ts index b4be3f6a64d..0cc90357d7c 100644 --- a/src/app/showcase/doc/panel/templatedoc.ts +++ b/src/app/showcase/doc/panel/templatedoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -18,8 +18,8 @@ import { Code } from '../../domain/code';
    - - + +
    Updated 2 hours ago
    @@ -66,17 +66,24 @@ export class TemplateDoc implements OnInit { basic: `
    - - Amy Elsner + + + Amy Elsner +
    - - + +
    - Updated 2 hours ago + + Updated 2 hours ago +
    @@ -86,8 +93,7 @@ export class TemplateDoc implements OnInit {

    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet...

    `, @@ -95,17 +101,24 @@ export class TemplateDoc implements OnInit {
    - - Amy Elsner + + + Amy Elsner +
    - - + +
    - Updated 2 hours ago + + Updated 2 hours ago +
    @@ -121,12 +134,16 @@ export class TemplateDoc implements OnInit {
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { PanelModule } from 'primeng/panel'; +import { AvatarModule } from 'primeng/avatar'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'panel-template-demo', - templateUrl: './panel-template-demo.html' + templateUrl: './panel-template-demo.html', + standalone: true, + imports: [PanelModule, AvatarModule, ButtonModule] }) export class PanelTemplateDemo implements OnInit { items: { label?: string; icon?: string; separator?: boolean }[] = []; diff --git a/src/app/showcase/doc/panel/toggleabledoc.ts b/src/app/showcase/doc/panel/toggleabledoc.ts index c1b206e2217..c5daac471d0 100644 --- a/src/app/showcase/doc/panel/toggleabledoc.ts +++ b/src/app/showcase/doc/panel/toggleabledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'toggleable-doc', @@ -25,13 +25,11 @@ export class ToggleableDoc { 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. + Lorem ipsum dolor sit amet...

    `, - 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 @@ -40,12 +38,14 @@ export class ToggleableDoc {

    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PanelModule } from 'primeng/panel'; @Component({ selector: 'panel-toggleable-demo', - templateUrl: './panel-toggleable-demo.html' + templateUrl: './panel-toggleable-demo.html', + standalone: true, + imports: [PanelModule] }) export class PanelToggleableDemo {}` }; diff --git a/src/app/showcase/doc/panelmenu/basicdoc.ts b/src/app/showcase/doc/panelmenu/basicdoc.ts index 5a069862ac9..b9b11ae7568 100644 --- a/src/app/showcase/doc/panelmenu/basicdoc.ts +++ b/src/app/showcase/doc/panelmenu/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    PanelMenu requires a collection of menuitems as its model.

    - +
    ` @@ -20,141 +20,100 @@ export class BasicDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', - expanded: true, + label: 'Files', + icon: 'pi pi-file', items: [ { - label: 'New', - icon: 'pi pi-fw pi-plus', + label: 'Documents', + icon: 'pi pi-file', items: [ { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' + label: 'Invoices', + icon: 'pi pi-file-pdf', + items: [ + { + label: 'Pending', + icon: 'pi pi-stop' + }, + { + label: 'Paid', + icon: 'pi pi-check-circle' + } + ] }, { - label: 'Video', - icon: 'pi pi-fw pi-video' + label: 'Clients', + icon: 'pi pi-users' } ] }, { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' + label: 'Images', + icon: 'pi pi-image', + items: [ + { + label: 'Logos', + icon: 'pi pi-image' + } + ] } ] }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Cloud', + icon: 'pi pi-cloud', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' + label: 'Upload', + icon: 'pi pi-cloud-upload' }, { - label: 'Center', - icon: 'pi pi-fw pi-align-center' + label: 'Download', + icon: 'pi pi-cloud-download' }, { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' + label: 'Sync', + icon: 'pi pi-refresh' } ] }, { - label: 'Users', - icon: 'pi pi-fw pi-user', + label: 'Devices', + icon: 'pi pi-desktop', items: [ { - label: 'New', - icon: 'pi pi-fw pi-user-plus' + label: 'Phone', + icon: 'pi pi-mobile' }, { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' + label: 'Desktop', + icon: 'pi pi-desktop' }, { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - 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: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Tablet', + icon: 'pi pi-tablet' } ] } - ]; + ] } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { PanelMenuModule } from 'primeng/panelmenu'; @Component({ selector: 'panel-menu-basic-demo', - templateUrl: './panel-menu-basic-demo.html' + templateUrl: './panel-menu-basic-demo.html', + standalone: true, + imports: [PanelMenuModule] }) export class PanelMenuBasicDemo implements OnInit { items: MenuItem[]; @@ -162,123 +121,82 @@ export class PanelMenuBasicDemo implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', + label: 'Files', + icon: 'pi pi-file', items: [ { - label: 'New', - icon: 'pi pi-fw pi-plus', + label: 'Documents', + icon: 'pi pi-file', items: [ { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' + label: 'Invoices', + icon: 'pi pi-file-pdf', + items: [ + { + label: 'Pending', + icon: 'pi pi-stop' + }, + { + label: 'Paid', + icon: 'pi pi-check-circle' + } + ] }, { - label: 'Video', - icon: 'pi pi-fw pi-video' + label: 'Clients', + icon: 'pi pi-users' } ] }, { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - separator: true - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' + label: 'Images', + icon: 'pi pi-image', + items: [ + { + label: 'Logos', + icon: 'pi pi-image' + } + ] } ] }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Cloud', + icon: 'pi pi-cloud', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' - }, - { - label: 'Right', - icon: 'pi pi-fw pi-align-right' + label: 'Upload', + icon: 'pi pi-cloud-upload' }, { - label: 'Center', - icon: 'pi pi-fw pi-align-center' + label: 'Download', + icon: 'pi pi-cloud-download' }, { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' + label: 'Sync', + icon: 'pi pi-refresh' } ] }, { - label: 'Users', - icon: 'pi pi-fw pi-user', + label: 'Devices', + icon: 'pi pi-desktop', items: [ { - label: 'New', - icon: 'pi pi-fw pi-user-plus' + label: 'Phone', + icon: 'pi pi-mobile' }, { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' + label: 'Desktop', + icon: 'pi pi-desktop' }, { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - 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: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Tablet', + icon: 'pi pi-tablet' } ] } - ]; + ] } }` }; diff --git a/src/app/showcase/doc/panelmenu/commanddoc.ts b/src/app/showcase/doc/panelmenu/commanddoc.ts new file mode 100644 index 00000000000..c41e83bbbc7 --- /dev/null +++ b/src/app/showcase/doc/panelmenu/commanddoc.ts @@ -0,0 +1,169 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem, MessageService } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'command-doc', + template: ` + +

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

    +     +
    + + +
    + + `, + providers: [MessageService] +}) +export class CommandDoc implements OnInit { + items: MenuItem[]; + + constructor(private messageService: MessageService) {} + + ngOnInit() { + this.items = [ + { + label: 'Files', + 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: 'Search', + icon: 'pi pi-search', + command: () => { + this.messageService.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 }); + } + }, + { + label: 'Print', + icon: 'pi pi-print', + command: () => { + this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 }); + } + } + ] + }, + { + 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 }); + } + } + ] + }, + { + label: 'Sign Out', + icon: 'pi pi-sign-out', + command: () => { + this.messageService.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 }); + } + } + ]; + } + + code: Code = { + basic: ` +`, + + html: `
    + + +
    `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem, MessageService } from 'primeng/api'; +import { PanelMenuModule } from 'primeng/panelmenu'; +import { ToastModule } from 'primeng/toast'; + +@Component({ + selector: 'panel-menu-command-demo', + templateUrl: './panel-menu-command-demo.html', + standalone: true, + imports: [PanelMenuModule, ToastModule], + providers: [MessageService] +}) +export class PanelMenuCommandDemo implements OnInit { + items: MenuItem[]; + + constructor(private messageService: MessageService) {} + + ngOnInit() { + this.items = [ + { + label: 'Files', + 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: 'Search', + icon: 'pi pi-search', + command: () => { + this.messageService.add({ severity: 'warn', summary: 'Search Results', detail: 'No results found', life: 3000 }); + } + }, + { + label: 'Print', + icon: 'pi pi-print', + command: () => { + this.messageService.add({ severity: 'error', summary: 'Error', detail: 'No printer connected', life: 3000 }); + } + } + ] + }, + { + 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 }); + } + } + ] + }, + { + label: 'Sign Out', + icon: 'pi pi-sign-out', + command: () => { + this.messageService.add({ severity: 'info', summary: 'Signed out', detail: 'User logged out', life: 3000 }); + } + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/panelmenu/controlleddoc.ts b/src/app/showcase/doc/panelmenu/controlleddoc.ts new file mode 100644 index 00000000000..c47ea63178c --- /dev/null +++ b/src/app/showcase/doc/panelmenu/controlleddoc.ts @@ -0,0 +1,219 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'controlled-doc', + template: ` + +

    Menu items can be controlled programmatically.

    +     +
    + + +
    + + ` +}) +export class ControlledDoc implements OnInit { + items: MenuItem[]; + + ngOnInit() { + this.items = [ + { + key: '0', + label: 'Users', + icon: 'pi pi-users', + items: [ + { + key: '0_1', + label: 'New', + items: [ + { + key: '0_1_0', + label: 'Member' + }, + { + key: '0_1_1', + label: 'Group' + } + ] + }, + { + key: '0_2', + label: 'Search' + } + ] + }, + { + key: '1', + label: 'Tasks', + icon: 'pi pi-server', + items: [ + { + key: '1_0', + label: 'Add New' + }, + { + key: '1_1', + label: 'Pending' + }, + { + key: '1_2', + label: 'Overdue' + } + ] + }, + { + key: '2', + label: 'Calendar', + icon: 'pi pi-calendar', + items: [ + { + key: '2_0', + label: 'New Event' + }, + { + key: '2_1', + label: 'Today' + }, + { + key: '2_2', + label: 'This Week' + } + ] + } + ]; + } + + toggleAll() { + const expanded = !this.areAllItemsExpanded(); + this.items = this.toggleAllRecursive(this.items, expanded); + } + + private toggleAllRecursive(items: MenuItem[], expanded: boolean): MenuItem[] { + return items.map((menuItem) => { + menuItem.expanded = expanded; + if (menuItem.items) { + menuItem.items = this.toggleAllRecursive(menuItem.items, expanded); + } + return menuItem; + }); + } + + private areAllItemsExpanded(): boolean { + return this.items.every((menuItem) => menuItem.expanded); + } + + code: Code = { + basic: ` +`, + + html: `
    + + +
    `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { PanelMenuModule } from 'primeng/panelmenu'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'panel-menu-controlled-demo', + templateUrl: './panel-menu-controlled-demo.html', + standalone: true, + imports: [PanelMenuModule, ButtonModule] +}) +export class PanelMenuControlledDemo implements OnInit { + items: MenuItem[]; + + ngOnInit() { + this.items = [ + { + key: '0', + label: 'Users', + icon: 'pi pi-users', + items: [ + { + key: '0_1', + label: 'New', + items: [ + { + key: '0_1_0', + label: 'Member' + }, + { + key: '0_1_1', + label: 'Group' + } + ] + }, + { + key: '0_2', + label: 'Search' + } + ] + }, + { + key: '1', + label: 'Tasks', + icon: 'pi pi-server', + items: [ + { + key: '1_0', + label: 'Add New' + }, + { + key: '1_1', + label: 'Pending' + }, + { + key: '1_2', + label: 'Overdue' + } + ] + }, + { + key: '2', + label: 'Calendar', + icon: 'pi pi-calendar', + items: [ + { + key: '2_0', + label: 'New Event' + }, + { + key: '2_1', + label: 'Today' + }, + { + key: '2_2', + label: 'This Week' + } + ] + } + ]; + } + + toggleAll() { + const expanded = !this.areAllItemsExpanded(); + this.items = this.toggleAllRecursive(this.items, expanded); + } + + private toggleAllRecursive(items: MenuItem[], expanded: boolean): MenuItem[] { + return items.map((menuItem) => { + menuItem.expanded = expanded; + if (menuItem.items) { + menuItem.items = this.toggleAllRecursive(menuItem.items, expanded); + } + return menuItem; + }); + } + + private areAllItemsExpanded(): boolean { + return this.items.every((menuItem) => menuItem.expanded); + } +}` + }; +} diff --git a/src/app/showcase/doc/panelmenu/importdoc.ts b/src/app/showcase/doc/panelmenu/importdoc.ts index 6ae75269b3f..a3cbffebc29 100644 --- a/src/app/showcase/doc/panelmenu/importdoc.ts +++ b/src/app/showcase/doc/panelmenu/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/panelmenu/multipledoc.ts b/src/app/showcase/doc/panelmenu/multipledoc.ts index 21bd184120b..261a0b1db58 100644 --- a/src/app/showcase/doc/panelmenu/multipledoc.ts +++ b/src/app/showcase/doc/panelmenu/multipledoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'multiple-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

    Only one single root menuitem can be active by default, enable multiple property to be able to open more than one items.

    - +
    ` @@ -20,137 +20,100 @@ export class MultipleDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', + label: 'Files', + icon: 'pi pi-file', items: [ { - label: 'New', - icon: 'pi pi-fw pi-plus', + label: 'Documents', + icon: 'pi pi-file', items: [ { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' + label: 'Invoices', + icon: 'pi pi-file-pdf', + items: [ + { + label: 'Pending', + icon: 'pi pi-stop' + }, + { + label: 'Paid', + icon: 'pi pi-check-circle' + } + ] }, { - label: 'Video', - icon: 'pi pi-fw pi-video' + label: 'Clients', + icon: 'pi pi-users' } ] }, { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' + label: 'Images', + icon: 'pi pi-image', + items: [ + { + label: 'Logos', + icon: 'pi pi-image' + } + ] } ] }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Cloud', + icon: 'pi pi-cloud', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' + label: 'Upload', + icon: 'pi pi-cloud-upload' }, { - label: 'Right', - icon: 'pi pi-fw pi-align-right' + label: 'Download', + icon: 'pi pi-cloud-download' }, { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' + label: 'Sync', + icon: 'pi pi-refresh' } ] }, { - label: 'Users', - icon: 'pi pi-fw pi-user', + label: 'Devices', + icon: 'pi pi-desktop', items: [ { - label: 'New', - icon: 'pi pi-fw pi-user-plus' + label: 'Phone', + icon: 'pi pi-mobile' }, { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - 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: 'Desktop', + icon: 'pi pi-desktop' }, { - label: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Tablet', + icon: 'pi pi-tablet' } ] } - ]; + ] } code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { PanelMenuModule } from 'primeng/panelmenu'; @Component({ selector: 'panel-menu-multiple-demo', - templateUrl: './panel-menu-multiple-demo.html' + templateUrl: './panel-menu-multiple-demo.html', + standalone: true, + imports: [PanelMenuModule] }) export class PanelMenuMultipleDemo implements OnInit { items: MenuItem[]; @@ -158,120 +121,82 @@ export class PanelMenuMultipleDemo implements OnInit { ngOnInit() { this.items = [ { - label: 'File', - icon: 'pi pi-fw pi-file', + label: 'Files', + icon: 'pi pi-file', items: [ { - label: 'New', - icon: 'pi pi-fw pi-plus', + label: 'Documents', + icon: 'pi pi-file', items: [ { - label: 'Bookmark', - icon: 'pi pi-fw pi-bookmark' + label: 'Invoices', + icon: 'pi pi-file-pdf', + items: [ + { + label: 'Pending', + icon: 'pi pi-stop' + }, + { + label: 'Paid', + icon: 'pi pi-check-circle' + } + ] }, { - label: 'Video', - icon: 'pi pi-fw pi-video' + label: 'Clients', + icon: 'pi pi-users' } ] }, { - label: 'Delete', - icon: 'pi pi-fw pi-trash' - }, - { - label: 'Export', - icon: 'pi pi-fw pi-external-link' + label: 'Images', + icon: 'pi pi-image', + items: [ + { + label: 'Logos', + icon: 'pi pi-image' + } + ] } ] }, { - label: 'Edit', - icon: 'pi pi-fw pi-pencil', + label: 'Cloud', + icon: 'pi pi-cloud', items: [ { - label: 'Left', - icon: 'pi pi-fw pi-align-left' + label: 'Upload', + icon: 'pi pi-cloud-upload' }, { - label: 'Right', - icon: 'pi pi-fw pi-align-right' + label: 'Download', + icon: 'pi pi-cloud-download' }, { - label: 'Center', - icon: 'pi pi-fw pi-align-center' - }, - { - label: 'Justify', - icon: 'pi pi-fw pi-align-justify' + label: 'Sync', + icon: 'pi pi-refresh' } ] }, { - label: 'Users', - icon: 'pi pi-fw pi-user', + label: 'Devices', + icon: 'pi pi-desktop', items: [ { - label: 'New', - icon: 'pi pi-fw pi-user-plus' + label: 'Phone', + icon: 'pi pi-mobile' }, { - label: 'Delete', - icon: 'pi pi-fw pi-user-minus' + label: 'Desktop', + icon: 'pi pi-desktop' }, { - 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: 'Events', - icon: 'pi pi-fw pi-calendar', - 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: 'Archieve', - icon: 'pi pi-fw pi-calendar-times', - items: [ - { - label: 'Remove', - icon: 'pi pi-fw pi-calendar-minus' - } - ] + label: 'Tablet', + icon: 'pi pi-tablet' } ] } - ]; + ] } }` }; diff --git a/src/app/showcase/doc/panelmenu/panelmenudoc.module.ts b/src/app/showcase/doc/panelmenu/panelmenudoc.module.ts index 4a1025984ea..4b2dc3779aa 100644 --- a/src/app/showcase/doc/panelmenu/panelmenudoc.module.ts +++ b/src/app/showcase/doc/panelmenu/panelmenudoc.module.ts @@ -2,17 +2,24 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { PanelMenuModule } from 'primeng/panelmenu'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { MultipleDoc } from './multipledoc'; import { StyleDoc } from './styledoc'; +import { ControlledDoc } from './controlleddoc'; +import { ButtonModule } from 'primeng/button'; +import { TemplateDoc } from './templatedoc'; +import { BadgeModule } from 'primeng/badge'; +import { CommandDoc } from './commanddoc'; +import { ToastModule } from 'primeng/toast'; +import { RouterDoc } from './routerdoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, PanelMenuModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, MultipleDoc, StyleDoc, AccessibilityDoc], + imports: [CommonModule, AppCodeModule, RouterModule, PanelMenuModule, AppDocModule, ButtonModule, BadgeModule, ToastModule], + declarations: [BasicDoc, ImportDoc, MultipleDoc, ControlledDoc, TemplateDoc, CommandDoc, StyleDoc, AccessibilityDoc, RouterDoc], exports: [AppDocModule] }) export class PanelMenuDocModule {} diff --git a/src/app/showcase/doc/panelmenu/routerdoc.ts b/src/app/showcase/doc/panelmenu/routerdoc.ts new file mode 100644 index 00000000000..1cc14414057 --- /dev/null +++ b/src/app/showcase/doc/panelmenu/routerdoc.ts @@ -0,0 +1,202 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem, MessageService } 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 routerLink directive, an external link or programmatic navigation.

    +     +
    + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + + +
    + + {{ item.label }} + +
    +     +     +
    + + `, + providers: [MessageService] +}) +export class RouterDoc implements OnInit { + items: MenuItem[]; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { + label: 'Router', + icon: 'pi pi-palette', + items: [ + { + label: 'Installation', + icon: 'pi pi-eraser', + route: '/installation' + }, + { + label: 'Configuration', + icon: 'pi pi-heart', + route: '/configuration' + } + ] + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + items: [ + { + label: 'Angular', + icon: 'pi pi-star', + url: 'https://angular.io/' + }, + { + label: 'Vite.js', + icon: 'pi pi-bookmark', + 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, MessageService } from 'primeng/api'; +import { PanelMenuModule } from 'primeng/panelmenu'; +import { Router } from '@angular/router'; + +@Component({ + selector: 'panel-menu-router-demo', + templateUrl: './panel-menu-router-demo.html', + standalone: true, + imports: [PanelMenuModule], + providers: [MessageService] +}) +export class PanelMenuRouterDemo implements OnInit { + items: MenuItem[]; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { + label: 'Router', + icon: 'pi pi-palette', + items: [ + { + label: 'Installation', + icon: 'pi pi-eraser', + route: '/installation' + }, + { + label: 'Configuration', + icon: 'pi pi-heart', + route: '/configuration' + } + ] + }, + { + label: 'Programmatic', + icon: 'pi pi-link', + command: () => { + this.router.navigate(['/installation']); + } + }, + { + label: 'External', + icon: 'pi pi-home', + items: [ + { + label: 'Angular', + icon: 'pi pi-star', + url: 'https://angular.io/' + }, + { + label: 'Vite.js', + icon: 'pi pi-bookmark', + url: 'https://vitejs.dev/' + } + ] + } + ]; + } + +}` + }; +} diff --git a/src/app/showcase/doc/panelmenu/templatedoc.ts b/src/app/showcase/doc/panelmenu/templatedoc.ts new file mode 100644 index 00000000000..8437d34953b --- /dev/null +++ b/src/app/showcase/doc/panelmenu/templatedoc.ts @@ -0,0 +1,248 @@ +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'template-doc', + template: ` + +

    PanelMenu requires a collection of menuitems as its model.

    +     +
    + + + + + {{ item.label }} + + {{ item.shortcut }} + + + +
    + + ` +}) +export class TemplateDoc implements OnInit { + items: MenuItem[]; + + ngOnInit() { + this.items = [ + { + label: 'Mail', + icon: 'pi pi-envelope', + items: [ + { + label: 'Compose', + icon: 'pi pi-file-edit', + shortcut: '⌘+N' + }, + { + label: 'Inbox', + icon: 'pi pi-inbox', + badge: '5' + }, + { + label: 'Sent', + icon: 'pi pi-send', + shortcut: '⌘+S' + }, + { + label: 'Trash', + icon: 'pi pi-trash', + shortcut: '⌘+T' + } + ] + }, + { + label: 'Reports', + icon: 'pi pi-chart-bar', + shortcut: '⌘+R', + items: [ + { + label: 'Sales', + icon: 'pi pi-chart-line', + badge: '3' + }, + { + label: 'Products', + icon: 'pi pi-list', + badge: '6' + } + ] + }, + { + label: 'Profile', + icon: 'pi pi-user', + shortcut: '⌘+W', + items: [ + { + label: 'Settings', + icon: 'pi pi-cog', + shortcut: '⌘+O' + }, + { + label: 'Privacy', + icon: 'pi pi-shield', + shortcut: '⌘+P' + } + ] + } + ]; + } + + toggleAll() { + const expanded = !this.areAllItemsExpanded(); + this.items = this.toggleAllRecursive(this.items, expanded); + } + + private toggleAllRecursive(items: MenuItem[], expanded: boolean): MenuItem[] { + return items.map((menuItem) => { + menuItem.expanded = expanded; + if (menuItem.items) { + menuItem.items = this.toggleAllRecursive(menuItem.items, expanded); + } + return menuItem; + }); + } + + private areAllItemsExpanded(): boolean { + return this.items.every((menuItem) => menuItem.expanded); + } + + code: Code = { + basic: ` + + + + + {{ item.label }} + + + + {{ item.shortcut }} + + + +`, + + html: `
    + + + + + + {{ item.label }} + + + + {{ item.shortcut }} + + + + +
    `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { PanelMenuModule } from 'primeng/panelmenu'; +import { BadgeModule } from 'primeng/badge'; +import { RippleModule } from 'primeng/ripple'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'panel-menu-template-demo', + templateUrl: './panel-menu-template-demo.html', + standalone: true, + imports: [PanelMenuModule, BadgeModule, RippleModule, CommonModule] +}) +export class PanelMenuTemplateDemo implements OnInit { + items: MenuItem[]; + + ngOnInit() { + this.items = [ + { + label: 'Mail', + icon: 'pi pi-envelope', + items: [ + { + label: 'Compose', + icon: 'pi pi-file-edit', + shortcut: '⌘+N' + }, + { + label: 'Inbox', + icon: 'pi pi-inbox', + badge: '5' + }, + { + label: 'Sent', + icon: 'pi pi-send', + shortcut: '⌘+S' + }, + { + label: 'Trash', + icon: 'pi pi-trash', + shortcut: '⌘+T' + } + ] + }, + { + label: 'Reports', + icon: 'pi pi-chart-bar', + shortcut: '⌘+R', + items: [ + { + label: 'Sales', + icon: 'pi pi-chart-line', + badge: '3' + }, + { + label: 'Products', + icon: 'pi pi-list', + badge: '6' + } + ] + }, + { + label: 'Profile', + icon: 'pi pi-user', + shortcut: '⌘+W', + items: [ + { + label: 'Settings', + icon: 'pi pi-cog', + shortcut: '⌘+O' + }, + { + label: 'Privacy', + icon: 'pi pi-shield', + shortcut: '⌘+P' + } + ] + } + ]; + } + + toggleAll() { + const expanded = !this.areAllItemsExpanded(); + this.items = this.toggleAllRecursive(this.items, expanded); + } + + private toggleAllRecursive(items: MenuItem[], expanded: boolean): MenuItem[] { + return items.map((menuItem) => { + menuItem.expanded = expanded; + if (menuItem.items) { + menuItem.items = this.toggleAllRecursive(menuItem.items, expanded); + } + return menuItem; + }); + } + + private areAllItemsExpanded(): boolean { + return this.items.every((menuItem) => menuItem.expanded); + } + +}` + }; +} diff --git a/src/app/showcase/doc/password/accessibilitydoc.ts b/src/app/showcase/doc/password/accessibilitydoc.ts index 1a30d4619e1..a145d345047 100644 --- a/src/app/showcase/doc/password/accessibilitydoc.ts +++ b/src/app/showcase/doc/password/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -44,11 +44,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Password - + -` +` }; } diff --git a/src/app/showcase/doc/password/basicdoc.ts b/src/app/showcase/doc/password/basicdoc.ts index f8d8c25c1ba..5429133d4b7 100644 --- a/src/app/showcase/doc/password/basicdoc.ts +++ b/src/app/showcase/doc/password/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Two-way value binding is defined using ngModel.

    - +
    ` @@ -17,19 +17,21 @@ export class BasicDoc { value!: string; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PasswordModule } from 'primeng/password'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'password-basic-demo', - templateUrl: './password-basic-demo.html' + templateUrl: './password-basic-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule] }) export class PasswordBasicDemo { value!: string; diff --git a/src/app/showcase/doc/password/disableddoc.ts b/src/app/showcase/doc/password/disableddoc.ts index 216471e1405..30adc64dfcb 100644 --- a/src/app/showcase/doc/password/disableddoc.ts +++ b/src/app/showcase/doc/password/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

    - +
    ` @@ -17,19 +17,27 @@ export class DisabledDoc { value!: string; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PasswordModule } from 'primeng/password'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'password-disabled-demo', - templateUrl: './password-disabled-demo.html' + templateUrl: './password-disabled-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule] }) export class PasswordDisabledDemo { value!: string; diff --git a/src/app/showcase/doc/password/filleddoc.ts b/src/app/showcase/doc/password/filleddoc.ts new file mode 100644 index 00000000000..30d252f2c50 --- /dev/null +++ b/src/app/showcase/doc/password/filleddoc.ts @@ -0,0 +1,46 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'filled-doc', + template: ` + +

    Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

    +     +
    + +
    + + ` +}) +export class FilledDoc { + value!: string; + + code: Code = { + basic: ``, + + html: `
    + +
    `, + + typescript: `import { Component } from '@angular/core'; +import { PasswordModule } from 'primeng/password'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'password-filled-demo', + templateUrl: './password-filled-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule] +}) +export class PasswordFilledDemo { + value!: string; +}` + }; +} diff --git a/src/app/showcase/doc/password/floatlabeldoc.ts b/src/app/showcase/doc/password/floatlabeldoc.ts index 294b8f22538..74792e19f1a 100644 --- a/src/app/showcase/doc/password/floatlabeldoc.ts +++ b/src/app/showcase/doc/password/floatlabeldoc.ts @@ -1,17 +1,17 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'floatlabel-doc', template: ` -

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

    +

    A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
    - - + + - +
    ` @@ -20,25 +20,27 @@ export class FloatLabelDoc { value!: string; code: Code = { - basic: ` - + basic: ` + -`, +`, - html: ` -
    - - + html: `
    + + - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PasswordModule } from 'primeng/password'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'password-floatlabel-demo', - templateUrl: './password-floatlabel-demo.html' + templateUrl: './password-floatlabel-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule] }) export class PasswordFloatlabelDemo { value!: string; diff --git a/src/app/showcase/doc/password/importdoc.ts b/src/app/showcase/doc/password/importdoc.ts index bc183cb2ba4..9f4f93d583c 100644 --- a/src/app/showcase/doc/password/importdoc.ts +++ b/src/app/showcase/doc/password/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/password/invaliddoc.ts b/src/app/showcase/doc/password/invaliddoc.ts index eab388ef6d3..d58e10bca51 100644 --- a/src/app/showcase/doc/password/invaliddoc.ts +++ b/src/app/showcase/doc/password/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

    - +
    ` @@ -17,19 +17,21 @@ export class InvalidDoc { value!: string; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PasswordModule } from 'primeng/password'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'password-invalid-demo', - templateUrl: './password-invalid-demo.html' + templateUrl: './password-invalid-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule] }) export class PasswordInvalidDemo { value!: string; diff --git a/src/app/showcase/doc/password/localedoc.ts b/src/app/showcase/doc/password/localedoc.ts index c71bb363cd4..91af935dec5 100644 --- a/src/app/showcase/doc/password/localedoc.ts +++ b/src/app/showcase/doc/password/localedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'locale-doc', @@ -11,7 +11,7 @@ import { Code } from '../../domain/code';

    - +
    ` @@ -20,18 +20,31 @@ export class LocaleDoc { value!: string; code: Code = { - basic: ``, + basic: ``, html: `
    - +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PasswordModule } from 'primeng/password'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'password-locale-demo', - templateUrl: './password-locale-demo.html' + templateUrl: './password-locale-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule] }) export class PasswordLocaleDemo { value!: string; diff --git a/src/app/showcase/doc/password/meterdoc.ts b/src/app/showcase/doc/password/meterdoc.ts index 4caebb41e14..70ea2c3f7e9 100644 --- a/src/app/showcase/doc/password/meterdoc.ts +++ b/src/app/showcase/doc/password/meterdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'meter-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

    Strength meter is displayed as a popup while a value is being entered.

    - +
    ` @@ -17,19 +17,21 @@ export class MeterDoc { value!: string; code: Code = { - basic: ``, + basic: ``, - html: ` -
    - + html: `
    +
    `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PasswordModule } from 'primeng/password'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'password-meter-demo', - templateUrl: './password-meter-demo.html' + templateUrl: './password-meter-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule] }) export class PasswordMeterDemo { value!: string; diff --git a/src/app/showcase/doc/password/passworddoc.module.ts b/src/app/showcase/doc/password/passworddoc.module.ts index b5104a45522..9616a4f32a8 100644 --- a/src/app/showcase/doc/password/passworddoc.module.ts +++ b/src/app/showcase/doc/password/passworddoc.module.ts @@ -4,8 +4,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { DividerModule } from 'primeng/divider'; import { PasswordModule } from 'primeng/password'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DisabledDoc } from './disableddoc'; @@ -18,10 +18,12 @@ import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; import { TemplateDoc } from './templatedoc'; import { ToggleMaskDoc } from './togglemaskdoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { FilledDoc } from './filleddoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, PasswordModule, FormsModule, ReactiveFormsModule, DividerModule, RouterModule], + imports: [CommonModule, AppCodeModule, AppDocModule, PasswordModule, FormsModule, ReactiveFormsModule, DividerModule, RouterModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, MeterDoc, LocaleDoc, ToggleMaskDoc, TemplateDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, MeterDoc, LocaleDoc, ToggleMaskDoc, TemplateDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] }) export class PasswordDocModule {} diff --git a/src/app/showcase/doc/password/reactiveformsdoc.ts b/src/app/showcase/doc/password/reactiveformsdoc.ts index b14fca424b4..4e2d22cb644 100644 --- a/src/app/showcase/doc/password/reactiveformsdoc.ts +++ b/src/app/showcase/doc/password/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
    - +
    @@ -27,23 +27,24 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
    - + `, - html: ` -
    + html: `
    - +
    `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { PasswordModule } from 'primeng/password'; @Component({ selector: 'password-reactive-forms-demo', - templateUrl: './password-reactive-forms-demo.html' + templateUrl: './password-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, PasswordModule] }) export class PasswordReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/password/templatedoc.ts b/src/app/showcase/doc/password/templatedoc.ts index f64ee8aacef..ef842339367 100644 --- a/src/app/showcase/doc/password/templatedoc.ts +++ b/src/app/showcase/doc/password/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -13,7 +13,7 @@ import { Code } from '../../domain/code';
    Pick a password
    - +

    Suggestions

    • At least one lowercase
      • @@ -36,7 +36,7 @@ export class TemplateDoc {
      Pick a password
      - +

      Suggestions

      • At least one lowercase
        • @@ -47,14 +47,13 @@ export class TemplateDoc { `, - html: ` -
        + html: `
        Pick a password
         - +

        Suggestions

        • At least one lowercase
          • @@ -66,12 +65,16 @@ export class TemplateDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { PasswordModule } from 'primeng/password'; +import { DividerModule } from 'primeng/divider'; @Component({ selector: 'password-template-demo', - templateUrl: './password-template-demo.html' + templateUrl: './password-template-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule, DividerModule] }) export class PasswordTemplateDemo { value!: string; diff --git a/src/app/showcase/doc/password/togglemaskdoc.ts b/src/app/showcase/doc/password/togglemaskdoc.ts index 19f86a0b7d3..262facf3dff 100644 --- a/src/app/showcase/doc/password/togglemaskdoc.ts +++ b/src/app/showcase/doc/password/togglemaskdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'togglemask-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        When toggleMask is present, an icon is displayed to show the value as plain text.

        - +
        ` @@ -17,19 +17,21 @@ export class ToggleMaskDoc { value!: string; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { PasswordModule } from 'primeng/password'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'password-toggle-mask-demo', - templateUrl: './password-toggle-mask-demo.html' + templateUrl: './password-toggle-mask-demo.html', + standalone: true, + imports: [FormsModule, PasswordModule] }) export class PasswordToggleMaskDemo { value!: string; diff --git a/src/app/showcase/doc/picklist/accessibilitydoc.ts b/src/app/showcase/doc/picklist/accessibilitydoc.ts index 082bc0a492d..942ba2f2571 100644 --- a/src/app/showcase/doc/picklist/accessibilitydoc.ts +++ b/src/app/showcase/doc/picklist/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -108,8 +108,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { html: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/picklist/basicdoc.ts b/src/app/showcase/doc/picklist/basicdoc.ts index c51578d2964..24a8c9065b3 100644 --- a/src/app/showcase/doc/picklist/basicdoc.ts +++ b/src/app/showcase/doc/picklist/basicdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'basic-doc', @@ -58,51 +58,85 @@ export class BasicDoc { } code: Code = { - basic: ` - -
        - {item.name} -
        - {{ product.name }} -
        - - {{ product.category }} -
        -
        - {{ '$' + product.price }} -
        -         -        `, - - html: ` -
        - + basic: `
        - {item.name} + {item.name}
        {{ product.name }}
        - {{ product.category }} + + {{ product.category }} +
        - {{ '$' + product.price }} + + {{ '$' + product.price }} +
        +        `, + + html: `
        + + +
        + {item.name} +
        + + {{ product.name }} + +
        + + + {{ product.category }} + +
        +
        + + {{ '$' + product.price }} + +
        +
        `, - typescript: ` -import { ChangeDetectorRef, Component } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { ChangeDetectorRef, Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { PickListModule } from 'primeng/picklist'; @Component({ selector: 'picklist-basic-demo', - templateUrl: './picklist-basic-demo.html' + templateUrl: './picklist-basic-demo.html', + standalone: true, + imports: [PickListModule], + providers: [ProductService] }) export class PicklistBasicDemo { sourceProducts!: Product[]; diff --git a/src/app/showcase/doc/picklist/filterdoc.ts b/src/app/showcase/doc/picklist/filterdoc.ts index a317eb0dbcb..e16dd8fc024 100644 --- a/src/app/showcase/doc/picklist/filterdoc.ts +++ b/src/app/showcase/doc/picklist/filterdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'filter-doc', @@ -58,51 +58,93 @@ export class FilterDoc { } code: Code = { - basic: ` - -
        - {item.name} -
        - {{ product.name }} -
        - - {{ product.category }} -
        -
        - {{ '$' + product.price }} -
        -         -        `, - - html: ` -
        - + basic: `
        - {item.name} + {item.name}
        - {{ product.name }} + + {{ product.name }} +
        - {{ product.category }} + + {{ product.category }} +
        - {{ '$' + product.price }} + + {{ '$' + product.price }} +
        +        `, + + html: `
        + + +
        + {item.name} +
        + + {{ product.name }} + +
        + + + {{ product.category }} + +
        +
        + + {{ '$' + product.price }} + +
        +
        `, - typescript: ` -import { Component, ChangeDetectorRef } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, ChangeDetectorRef } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { PickListModule } from 'primeng/picklist'; @Component({ selector: 'picklist-filter-demo', - templateUrl: './picklist-filter-demo.html' + templateUrl: './picklist-filter-demo.html', + standalone: true, + imports: [PickListModule], + providers: [ProductService] }) export class PicklistFilterDemo { sourceProducts!: Product[]; diff --git a/src/app/showcase/doc/picklist/importdoc.ts b/src/app/showcase/doc/picklist/importdoc.ts index 52d72cb42fc..f2ab4751dcb 100644 --- a/src/app/showcase/doc/picklist/importdoc.ts +++ b/src/app/showcase/doc/picklist/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/picklist/picklistdoc.module.ts b/src/app/showcase/doc/picklist/picklistdoc.module.ts index 4bffca37b75..8dd62dcf291 100644 --- a/src/app/showcase/doc/picklist/picklistdoc.module.ts +++ b/src/app/showcase/doc/picklist/picklistdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { PickListModule } from 'primeng/picklist'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { FilterDoc } from './filterdoc'; diff --git a/src/app/showcase/doc/progressbar/accessibilitydoc.ts b/src/app/showcase/doc/progressbar/accessibilitydoc.ts index f1281d66a37..63888c33515 100644 --- a/src/app/showcase/doc/progressbar/accessibilitydoc.ts +++ b/src/app/showcase/doc/progressbar/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/progressbar/basicdoc.ts b/src/app/showcase/doc/progressbar/basicdoc.ts index 0f36a078e0c..dd1881e3185 100644 --- a/src/app/showcase/doc/progressbar/basicdoc.ts +++ b/src/app/showcase/doc/progressbar/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/progressbar/dynamicdoc.ts b/src/app/showcase/doc/progressbar/dynamicdoc.ts index 27baac5acc1..e48746f6458 100644 --- a/src/app/showcase/doc/progressbar/dynamicdoc.ts +++ b/src/app/showcase/doc/progressbar/dynamicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dynamic-doc', diff --git a/src/app/showcase/doc/progressbar/importdoc.ts b/src/app/showcase/doc/progressbar/importdoc.ts index 1f19ec41f4a..1d9f9c97419 100644 --- a/src/app/showcase/doc/progressbar/importdoc.ts +++ b/src/app/showcase/doc/progressbar/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/progressbar/indeterminatedoc.ts b/src/app/showcase/doc/progressbar/indeterminatedoc.ts index 3434dd88cf9..d63897635f2 100644 --- a/src/app/showcase/doc/progressbar/indeterminatedoc.ts +++ b/src/app/showcase/doc/progressbar/indeterminatedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'indeterminate-doc', diff --git a/src/app/showcase/doc/progressbar/progressbardoc.module.ts b/src/app/showcase/doc/progressbar/progressbardoc.module.ts index 151de7c64f2..f8a73e67761 100644 --- a/src/app/showcase/doc/progressbar/progressbardoc.module.ts +++ b/src/app/showcase/doc/progressbar/progressbardoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; 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 { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DynamicDoc } from './dynamicdoc'; diff --git a/src/app/showcase/doc/progressbar/templatedoc.ts b/src/app/showcase/doc/progressbar/templatedoc.ts index b31afd9b599..1b1286ed4c4 100644 --- a/src/app/showcase/doc/progressbar/templatedoc.ts +++ b/src/app/showcase/doc/progressbar/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', diff --git a/src/app/showcase/doc/progressspinner/accessibilitydoc.ts b/src/app/showcase/doc/progressspinner/accessibilitydoc.ts index f7699de41c0..18c8b5de5b7 100644 --- a/src/app/showcase/doc/progressspinner/accessibilitydoc.ts +++ b/src/app/showcase/doc/progressspinner/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/progressspinner/basicdoc.ts b/src/app/showcase/doc/progressspinner/basicdoc.ts index 195eef17982..dde4ac401c1 100644 --- a/src/app/showcase/doc/progressspinner/basicdoc.ts +++ b/src/app/showcase/doc/progressspinner/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/progressspinner/importdoc.ts b/src/app/showcase/doc/progressspinner/importdoc.ts index 9af76559f7c..d21c5aa4321 100644 --- a/src/app/showcase/doc/progressspinner/importdoc.ts +++ b/src/app/showcase/doc/progressspinner/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/progressspinner/progressspinnerdoc.module.ts b/src/app/showcase/doc/progressspinner/progressspinnerdoc.module.ts index d3fe7565c56..5a26fcc507e 100644 --- a/src/app/showcase/doc/progressspinner/progressspinnerdoc.module.ts +++ b/src/app/showcase/doc/progressspinner/progressspinnerdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ProgressSpinnerModule } from 'primeng/progressspinner'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { TemplateDoc } from './templatedoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/progressspinner/templatedoc.ts b/src/app/showcase/doc/progressspinner/templatedoc.ts index 510bbcc584c..086adb65619 100644 --- a/src/app/showcase/doc/progressspinner/templatedoc.ts +++ b/src/app/showcase/doc/progressspinner/templatedoc.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', diff --git a/src/app/showcase/doc/radiobutton/accessibilitydoc.ts b/src/app/showcase/doc/radiobutton/accessibilitydoc.ts index e6070baeb7f..039495681d9 100644 --- a/src/app/showcase/doc/radiobutton/accessibilitydoc.ts +++ b/src/app/showcase/doc/radiobutton/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -62,11 +62,11 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: ` - + Two - + -` +` }; } diff --git a/src/app/showcase/doc/radiobutton/disableddoc.ts b/src/app/showcase/doc/radiobutton/disableddoc.ts index a7f3906040f..7c7239e1698 100644 --- a/src/app/showcase/doc/radiobutton/disableddoc.ts +++ b/src/app/showcase/doc/radiobutton/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

        - +
        ` @@ -17,19 +17,21 @@ export class DisabledDoc { checked: any; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'radio-button-disabled-demo', - templateUrl: './radio-button-disabled-demo.html' + templateUrl: './radio-button-disabled-demo.html', + standalone: true, + imports: [FormsModule, RadioButtonModule] }) export class RadioButtonDisabledDemo { }` }; diff --git a/src/app/showcase/doc/radiobutton/dynamicdoc.ts b/src/app/showcase/doc/radiobutton/dynamicdoc.ts index 880adb12957..35cc47efd17 100644 --- a/src/app/showcase/doc/radiobutton/dynamicdoc.ts +++ b/src/app/showcase/doc/radiobutton/dynamicdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dynamic-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
        - +
        @@ -35,27 +35,41 @@ export class DynamicDoc implements OnInit { code: Code = { basic: `
        - - + +
        `, - html: ` -
        + html: `
        - - + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'radio-button-dynamic-demo', - templateUrl: './radio-button-dynamic-demo.html' + templateUrl: './radio-button-dynamic-demo.html', + standalone: true, + imports: [FormsModule, RadioButtonModule] }) export class RadioButtonDynamicDemo implements OnInit{ selectedCategory: any = null; diff --git a/src/app/showcase/doc/radiobutton/filleddoc.ts b/src/app/showcase/doc/radiobutton/filleddoc.ts new file mode 100644 index 00000000000..6078ac69a24 --- /dev/null +++ b/src/app/showcase/doc/radiobutton/filleddoc.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'filled-doc', + template: ` + +

        Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

        +         +
        + +
        + + ` +}) +export class FilledDoc { + checked: boolean = false; + + code: Code = { + basic: ``, + + html: `
        + +
        `, + + typescript: `import { Component } from '@angular/core'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'radio-button-filled-demo', + templateUrl: './radio-button-filled-demo.html', + standalone: true, + imports: [FormsModule, RadioButtonModule] +}) +export class RadioButtonFilledDemo { + checked: boolean = false; +}` + }; +} diff --git a/src/app/showcase/doc/radiobutton/groupdoc.ts b/src/app/showcase/doc/radiobutton/groupdoc.ts index 4c28cca4adf..2452de0f51d 100644 --- a/src/app/showcase/doc/radiobutton/groupdoc.ts +++ b/src/app/showcase/doc/radiobutton/groupdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'group-doc', @@ -10,21 +10,19 @@ import { Code } from '../../domain/code';
        - +
        - +
        - - +
        - - +
        @@ -38,57 +36,107 @@ export class GroupDoc { code: Code = { basic: `
        - - + +
        - - + +
        - - + +
        - - + +
        `, - html: ` -
        + html: `
        - - + +
        - - + +
        - - + +
        - - + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'radio-button-group-demo', - templateUrl: './radio-button-group-demo.html' + templateUrl: './radio-button-group-demo.html', + standalone: true, + imports: [FormsModule, RadioButtonModule] }) export class RadioButtonGroupDemo { ingredient!: string; diff --git a/src/app/showcase/doc/radiobutton/importdoc.ts b/src/app/showcase/doc/radiobutton/importdoc.ts index 8606cc478fc..1e9bb10684f 100644 --- a/src/app/showcase/doc/radiobutton/importdoc.ts +++ b/src/app/showcase/doc/radiobutton/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/radiobutton/invaliddoc.ts b/src/app/showcase/doc/radiobutton/invaliddoc.ts index 94e0da9ca5a..7b95c0b4e68 100644 --- a/src/app/showcase/doc/radiobutton/invaliddoc.ts +++ b/src/app/showcase/doc/radiobutton/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

        - +
        ` @@ -17,19 +17,21 @@ export class InvalidDoc { checked: any; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'radio-button-invalid-demo', - templateUrl: './radio-button-invalid-demo.html' + templateUrl: './radio-button-invalid-demo.html', + standalone: true, + imports: [FormsModule, RadioButtonModule] }) export class RadioButtonInvalidDemo { }` }; diff --git a/src/app/showcase/doc/radiobutton/radiobuttondoc.module.ts b/src/app/showcase/doc/radiobutton/radiobuttondoc.module.ts index 09944974dde..d454b82d6ae 100644 --- a/src/app/showcase/doc/radiobutton/radiobuttondoc.module.ts +++ b/src/app/showcase/doc/radiobutton/radiobuttondoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { RadioButtonModule } from 'primeng/radiobutton'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { DisabledDoc } from './disableddoc'; import { DynamicDoc } from './dynamicdoc'; @@ -13,10 +13,11 @@ import { ImportDoc } from './importdoc'; import { InvalidDoc } from './invaliddoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; +import { FilledDoc } from './filleddoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, RadioButtonModule, FormsModule, ReactiveFormsModule, RouterModule], exports: [AppDocModule], - declarations: [ImportDoc, GroupDoc, DynamicDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, GroupDoc, DynamicDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] }) export class RadioButtonDocModule {} diff --git a/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts b/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts index 0f552103e1d..dfedd7e719b 100644 --- a/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts +++ b/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -11,7 +11,7 @@ import { Code } from '../../domain/code';
        - +
        @@ -38,28 +38,39 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
        - - + +
        `, - html: ` -
        + html: `
        - - + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { RadioButtonModule } from 'primeng/radiobutton'; @Component({ selector: 'radio-button-reactive-forms-demo', - templateUrl: './radio-button-reactive-forms-demo.html' + templateUrl: './radio-button-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, RadioButtonModule], }) export class RadioButtonReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/rating/basicdoc.ts b/src/app/showcase/doc/rating/basicdoc.ts index a673ebf959e..4c92156f965 100644 --- a/src/app/showcase/doc/rating/basicdoc.ts +++ b/src/app/showcase/doc/rating/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        Two-way value binding is defined using ngModel.

        - +
        ` @@ -17,19 +17,21 @@ export class BasicDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RatingModule } from 'primeng/rating'; @Component({ selector: 'rating-basic-demo', - templateUrl: './rating-basic-demo.html' + templateUrl: './rating-basic-demo.html', + standalone: true, + imports: [FormsModule, RatingModule] }) export class RatingBasicDemo { value!: number; diff --git a/src/app/showcase/doc/rating/disableddoc.ts b/src/app/showcase/doc/rating/disableddoc.ts index af4da290e71..997e7bd5e67 100644 --- a/src/app/showcase/doc/rating/disableddoc.ts +++ b/src/app/showcase/doc/rating/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -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,19 +17,21 @@ export class DisabledDoc { value: number = 5; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RatingModule } from 'primeng/rating'; @Component({ selector: 'rating-disabled-demo', - templateUrl: './rating-disabled-demo.html' + templateUrl: './rating-disabled-demo.html', + standalone: true, + imports: [FormsModule, RatingModule] }) export class RatingDisabledDemo { value: number = 5; diff --git a/src/app/showcase/doc/rating/importdoc.ts b/src/app/showcase/doc/rating/importdoc.ts index 9f5fd6c1add..9db99c78ba3 100644 --- a/src/app/showcase/doc/rating/importdoc.ts +++ b/src/app/showcase/doc/rating/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/rating/numberofstarsdoc.ts b/src/app/showcase/doc/rating/numberofstarsdoc.ts index 8135b6cf1f3..e021464b25c 100644 --- a/src/app/showcase/doc/rating/numberofstarsdoc.ts +++ b/src/app/showcase/doc/rating/numberofstarsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'number-of-stars-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        Number of stars to display is defined with stars property.

        - +
        ` @@ -17,19 +17,21 @@ export class NumberOfStarsDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RatingModule } from 'primeng/rating'; @Component({ selector: 'rating-number-of-stars-demo', - templateUrl: './rating-number-of-stars-demo.html' + templateUrl: './rating-number-of-stars-demo.html', + standalone: true, + imports: [FormsModule, RatingModule] }) export class RatingNumberOfStarsDemo { value!: number; diff --git a/src/app/showcase/doc/rating/ratingdoc.module.ts b/src/app/showcase/doc/rating/ratingdoc.module.ts index 43124de3a83..99b736ba95d 100644 --- a/src/app/showcase/doc/rating/ratingdoc.module.ts +++ b/src/app/showcase/doc/rating/ratingdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { RatingModule } from 'primeng/rating'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/rating/reactiveformsdoc.ts b/src/app/showcase/doc/rating/reactiveformsdoc.ts index 084978e6621..6f7bd9b8584 100644 --- a/src/app/showcase/doc/rating/reactiveformsdoc.ts +++ b/src/app/showcase/doc/rating/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
        - +
        @@ -27,23 +27,24 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
        - + `, - html: ` -
        + html: `
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { RatingModule } from 'primeng/rating'; @Component({ selector: 'rating-reactive-forms-demo', - templateUrl: './rating-reactive-forms-demo.html' + templateUrl: './rating-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, RatingModule] }) export class RatingReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/rating/readonlydoc.ts b/src/app/showcase/doc/rating/readonlydoc.ts index 6a6bb6375a4..93de36175d6 100644 --- a/src/app/showcase/doc/rating/readonlydoc.ts +++ b/src/app/showcase/doc/rating/readonlydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'readonly-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        When readOnly present, value cannot be edited.

        - +
        ` @@ -17,19 +17,21 @@ export class ReadOnlyDoc { value: number = 5; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RatingModule } from 'primeng/rating'; @Component({ selector: 'rating-readonly-demo', - templateUrl: './rating-readonly-demo.html' + templateUrl: './rating-readonly-demo.html', + standalone: true, + imports: [FormsModule, RatingModule] }) export class RatingReadonlyDemo { value: number = 5; diff --git a/src/app/showcase/doc/rating/templatedoc.ts b/src/app/showcase/doc/rating/templatedoc.ts index 07e435c7af8..90e1034efe5 100644 --- a/src/app/showcase/doc/rating/templatedoc.ts +++ b/src/app/showcase/doc/rating/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -29,37 +29,57 @@ export class TemplateDoc { code: Code = { basic: ` - + - + - + `, - html: ` -
        + html: `
        - + - + - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RatingModule } from 'primeng/rating'; @Component({ selector: 'rating-template-demo', - templateUrl: './rating-template-demo.html' + templateUrl: './rating-template-demo.html', + standalone: true, + imports: [FormsModule, RatingModule] }) export class RatingTemplateDemo { value!: number; diff --git a/src/app/showcase/doc/rating/withoutcanceldoc.ts b/src/app/showcase/doc/rating/withoutcanceldoc.ts index 726f790b266..dae18469014 100644 --- a/src/app/showcase/doc/rating/withoutcanceldoc.ts +++ b/src/app/showcase/doc/rating/withoutcanceldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'without-cancel-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        A cancel icon is displayed to reset the value by default, set cancel as false to remove this option.

        - +
        ` @@ -17,19 +17,21 @@ export class WithoutCancelDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { RatingModule } from 'primeng/rating'; @Component({ selector: 'rating-without-cancel-demo', - templateUrl: './rating-without-cancel-demo.html' + templateUrl: './rating-without-cancel-demo.html', + standalone: true, + imports: [FormsModule, RatingModule] }) export class RatingWithoutCancelDemo { value!: number; diff --git a/src/app/showcase/doc/ripple/customdoc.ts b/src/app/showcase/doc/ripple/customdoc.ts index 0d25c74e4ef..60b3801813b 100644 --- a/src/app/showcase/doc/ripple/customdoc.ts +++ b/src/app/showcase/doc/ripple/customdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'custom-doc', diff --git a/src/app/showcase/doc/ripple/defaultdoc.ts b/src/app/showcase/doc/ripple/defaultdoc.ts index 955a30fd357..fdb866e468e 100644 --- a/src/app/showcase/doc/ripple/defaultdoc.ts +++ b/src/app/showcase/doc/ripple/defaultdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'default-doc', diff --git a/src/app/showcase/doc/ripple/importdoc.ts b/src/app/showcase/doc/ripple/importdoc.ts index 7c7a58dbcde..2ce76ecaa62 100644 --- a/src/app/showcase/doc/ripple/importdoc.ts +++ b/src/app/showcase/doc/ripple/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/ripple/rippledoc.module.ts b/src/app/showcase/doc/ripple/rippledoc.module.ts index fd0e2b00fbd..3d00a62cdb5 100644 --- a/src/app/showcase/doc/ripple/rippledoc.module.ts +++ b/src/app/showcase/doc/ripple/rippledoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { RippleModule } from 'primeng/ripple'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { CustomDoc } from './customdoc'; import { DefaultDoc } from './defaultdoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/scroller/basicdoc.ts b/src/app/showcase/doc/scroller/basicdoc.ts index e36617919ff..5b99aa7b5ab 100644 --- a/src/app/showcase/doc/scroller/basicdoc.ts +++ b/src/app/showcase/doc/scroller/basicdoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -29,28 +29,49 @@ export class BasicDoc { } code: Code = { - basic: ` - -
        {{ item }}
        -         -        `, - - html: ` -
        - + basic: ` -
        {{ item }}
        +
        + {{ item }} +
        +        `, + + html: `
        + + +
        + {{ item }} +
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ScrollerModule } from 'primeng/scroller'; @Component({ selector: 'scroller-basic-demo', templateUrl: './scroller-basic-demo.html', - styleUrls: ['./scroller-basic-demo.scss'] + styles: [ + \`:host ::ng-deep { + .p-scroller-viewport { + flex: none; + } + }\` + ], + standalone: true, + imports: [ScrollerModule] }) export class ScrollerBasicDemo implements OnInit { items!: string[]; diff --git a/src/app/showcase/doc/scroller/delaydoc.ts b/src/app/showcase/doc/scroller/delaydoc.ts index 9136794238a..1a7ff18e3ee 100644 --- a/src/app/showcase/doc/scroller/delaydoc.ts +++ b/src/app/showcase/doc/scroller/delaydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'delay-doc', @@ -44,59 +44,124 @@ export class DelayDoc { } code: Code = { - basic: ` - -
        {{ item }}
        -         + basic: ` + +
        + {{ item }} +
        +         - - -
        {{ item }}
        -         + + +
        + {{ item }} +
        +         - - -
        {{ item }}
        -         + + +
        + {{ item }} +
        +         `, - html: ` -
        + html: `
        No Delay - - -
        {{ item }}
        -         + + +
        + {{ item }} +
        +
        150ms - - -
        {{ item }}
        -         + + +
        + {{ item }} +
        +
        500ms - - -
        {{ item }}
        -         + + +
        + {{ item }} +
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ScrollerModule } from 'primeng/scroller'; @Component({ selector: 'scroller-delay-demo', templateUrl: './scroller-delay-demo.html', - styleUrls: ['./scroller-delay-demo.scss'] + styles: [ + \`:host ::ng-deep { + .p-scroller-viewport { + flex: none; + } + }\` + ], + standalone: true, + imports: [ScrollerModule] }) export class ScrollerDelayDemo implements OnInit { items!: string[]; diff --git a/src/app/showcase/doc/scroller/griddoc.ts b/src/app/showcase/doc/scroller/griddoc.ts index 8ce9d51ca65..65c2e5db992 100644 --- a/src/app/showcase/doc/scroller/griddoc.ts +++ b/src/app/showcase/doc/scroller/griddoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'grid-doc', @@ -31,31 +31,58 @@ export class GridDoc implements OnInit { } code: Code = { - basic: ` - -
        -
        {{ el }}
        -
        -         -        `, - - html: ` -
        - + basic: ` -
        -
        {{ el }}
        +
        +
        + {{ el }} +
        +`, + + html: `
        + + +
        +
        + {{ el }} +
        +
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ScrollerModule } from 'primeng/scroller'; @Component({ selector: 'scroller-grid-demo', templateUrl: './scroller-grid-demo.html', - styleUrls: ['./scroller-grid-demo.scss'] + styles: [ + \`:host ::ng-deep { + .p-scroller-viewport { + flex: none; + } + }\` + ], + standalone: true, + imports: [ScrollerModule] }) export class ScrollerGridDemo implements OnInit { items!: string[][]; diff --git a/src/app/showcase/doc/scroller/horizontaldoc.ts b/src/app/showcase/doc/scroller/horizontaldoc.ts index 084665c18c1..17caa1e08d5 100644 --- a/src/app/showcase/doc/scroller/horizontaldoc.ts +++ b/src/app/showcase/doc/scroller/horizontaldoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'horizontal-doc', @@ -26,28 +26,64 @@ export class HorizontalDoc { } code: Code = { - basic: ` - -
        {{ item }}
        -         -        `, - - html: ` -
        - + basic: ` -
        {{ item }}
        +
        + {{ item }} +
        +        `, + + html: `
        + + +
        + {{ item }} +
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ScrollerModule } from 'primeng/scroller'; @Component({ selector: 'scroller-horizontal-demo', templateUrl: './scroller-horizontal-demo.html', - styleUrls: ['./scroller-horizontal-demo.scss'] + styles: [ + \`:host ::ng-deep { + .p-scroller-viewport { + flex: none; + } + + .p-horizontal-scroll { + .p-scroller-content { + display: flex; + flex-direction: row; + } + } + }\` + ], + standalone: true, + imports: [ScrollerModule] }) export class ScrollerHorizontalDemo implements OnInit { items!: string[]; diff --git a/src/app/showcase/doc/scroller/importdoc.ts b/src/app/showcase/doc/scroller/importdoc.ts index ebf1efabc7c..b7c62e23515 100644 --- a/src/app/showcase/doc/scroller/importdoc.ts +++ b/src/app/showcase/doc/scroller/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/scroller/lazyloaddoc.ts b/src/app/showcase/doc/scroller/lazyloaddoc.ts index 5b9acc527a2..daeb31ce74e 100644 --- a/src/app/showcase/doc/scroller/lazyloaddoc.ts +++ b/src/app/showcase/doc/scroller/lazyloaddoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface LazyEvent { first: number; @@ -62,23 +62,50 @@ export class LazyLoadDoc { } code: Code = { - basic: ` - -
        {{ item }}
        -         -        `, - - html: ` -
        - + basic: ` -
        {{ item }}
        +
        + {{ item }} +
        +        `, + + html: `
        + + +
        + {{ item }} +
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ScrollerModule } from 'primeng/scroller'; interface LazyEvent { first: number; @@ -88,7 +115,15 @@ interface LazyEvent { @Component({ selector: 'scroller-lazy-load-demo', templateUrl: './scroller-lazy-load-demo.html', - styleUrls: ['./scroller-lazy-load-demo.scss'] + styles: [ + \`:host ::ng-deep { + .p-scroller-viewport { + flex: none; + } + }\` + ], + standalone: true, + imports: [ScrollerModule] }) export class ScrollerLazyLoadDemo implements OnInit { items!: string[]; diff --git a/src/app/showcase/doc/scroller/loaderdoc.ts b/src/app/showcase/doc/scroller/loaderdoc.ts index 3657a380f27..76b885e1eea 100644 --- a/src/app/showcase/doc/scroller/loaderdoc.ts +++ b/src/app/showcase/doc/scroller/loaderdoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'loader-doc', @@ -40,28 +40,61 @@ export class LoaderDoc { } code: Code = { - basic: ` - -
        {{ item }}
        -         -        `, - - html: ` -
        - + basic: ` -
        {{ item }}
        +
        + {{ item }} +
        +        `, + + html: `
        + + +
        + {{ item }} +
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ScrollerModule } from 'primeng/scroller'; @Component({ selector: 'scroller-loader-demo', templateUrl: './scroller-loader-demo.html', - styleUrls: ['./scroller-loader-demo.scss'] + styles: [ + \`:host ::ng-deep { + .p-scroller-viewport { + flex: none; + } + + p-skeleton { + width: 100%; + } + }\` + ], + standalone: true, + imports: [ScrollerModule] }) export class ScrollerLoaderDemo implements OnInit { items!: string[]; diff --git a/src/app/showcase/doc/scroller/programmaticdoc.ts b/src/app/showcase/doc/scroller/programmaticdoc.ts index 284f127b0af..4aaf77e5e5a 100644 --- a/src/app/showcase/doc/scroller/programmaticdoc.ts +++ b/src/app/showcase/doc/scroller/programmaticdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { Scroller } from 'primeng/scroller'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'programmatic-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

        Scrolling to a specific index can be done with the scrollToIndex function.

        - +
        {{ item }}
        @@ -33,30 +33,52 @@ export class ProgrammaticDoc implements OnInit { } code: Code = { - basic: ` - - -
        {{ item }}
        -         -        `, - - html: ` -
        - - + basic: ` + -
        {{ item }}
        +
        + {{ item }} +
        +        `, + + html: `
        + + + +
        + {{ item }} +
        +
        `, - typescript: ` -import { Component, OnInit, ViewChild } from '@angular/core'; + typescript: `import { Component, OnInit, ViewChild } from '@angular/core'; import { Scroller } from 'primeng/scroller'; +import { ScrollerModule } from 'primeng/scroller'; @Component({ selector: 'scroller-programmatic-demo', - templateUrl: './scroller-programmatic-demo.html' + templateUrl: './scroller-programmatic-demo.html', + standalone: true, + imports: [ScrollerModule] }) export class ScrollerProgrammaticDemo implements OnInit { @ViewChild('sc') sc!: Scroller; diff --git a/src/app/showcase/doc/scroller/scrollerdoc.module.ts b/src/app/showcase/doc/scroller/scrollerdoc.module.ts index 460931e787c..7d044857367 100644 --- a/src/app/showcase/doc/scroller/scrollerdoc.module.ts +++ b/src/app/showcase/doc/scroller/scrollerdoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { ScrollerModule } from 'primeng/scroller'; import { SkeletonModule } from 'primeng/skeleton'; import { SpinnerModule } from 'primeng/spinner'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { DelayDoc } from './delaydoc'; import { HorizontalDoc } from './horizontaldoc'; diff --git a/src/app/showcase/doc/scroller/scrolloptionsdoc.ts b/src/app/showcase/doc/scroller/scrolloptionsdoc.ts index b9713c1b335..5bcd80e85c9 100644 --- a/src/app/showcase/doc/scroller/scrolloptionsdoc.ts +++ b/src/app/showcase/doc/scroller/scrolloptionsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'options-doc', diff --git a/src/app/showcase/doc/scroller/templatedoc.ts b/src/app/showcase/doc/scroller/templatedoc.ts index 2715575bda8..7d2a4196b82 100644 --- a/src/app/showcase/doc/scroller/templatedoc.ts +++ b/src/app/showcase/doc/scroller/templatedoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -45,65 +45,147 @@ export class TemplateDoc { } code: Code = { - basic: ` - -
        -
        Item: {{item}}
        -
        Index: {{options.index}}
        -
        Count: {{options.count}}
        -
        First: {{options.first}}
        -
        Last: {{options.last}}
        -
        Even: {{options.even}}
        -
        Odd: {{options.odd}}
        -
        -         - -
        -
        -
        -
        -
        -
        -
        -
        -
        -         -        `, - html: ` -
        - + basic: `
        -
        Item: {{item}}
        -
        Index: {{options.index}}
        -
        Count: {{options.count}}
        -
        First: {{options.first}}
        -
        Last: {{options.last}}
        -
        Even: {{options.even}}
        -
        Odd: {{options.odd}}
        +
        + Item: {{item}} +
        +
        + Index: {{options.index}} +
        +
        + Count: {{options.count}} +
        +
        + First: {{options.first}} +
        +
        + Last: {{options.last}} +
        +
        + Even: {{options.even}} +
        +
        + Odd: {{options.odd}} +
        -
        -
        -
        -
        -
        -
        -
        +
        + +
        +
        + +
        +
        + +
        +
        + +
        +
        + +
        +
        + +
        +
        + +
        -         +        `, + html: `
        + + +
        +
        + Item: {{item}} +
        +
        + Index: {{options.index}} +
        +
        + Count: {{options.count}} +
        +
        + First: {{options.first}} +
        +
        + Last: {{options.last}} +
        +
        + Even: {{options.even}} +
        +
        + Odd: {{options.odd}} +
        +
        +         + +
        +
        + +
        +
        + < + /div> +
        + +
        +
        + +
        +
        + +
        +
        + +
        +
        + +
        +
        + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { ScrollerModule } from 'primeng/scroller'; +import { SkeletonModule } from 'primeng/skeleton'; @Component({ selector: 'scroller-template-demo', templateUrl: './scroller-template-demo.html', - styleUrls: ['./scroller-template-demo.scss'] + styles: [ + \`:host ::ng-deep { + .p-scroller-viewport { + flex: none; + } + + p-skeleton { + width: 100%; + } + }\` + ], + standalone: true, + imports: [ScrollerModule, SkeletonModule] }) export class ScrollerTemplateDemo implements OnInit { items!: string[]; diff --git a/src/app/showcase/doc/scrollpanel/basicdoc.ts b/src/app/showcase/doc/scrollpanel/basicdoc.ts index 731ff2ac9f7..f8ca8382df4 100644 --- a/src/app/showcase/doc/scrollpanel/basicdoc.ts +++ b/src/app/showcase/doc/scrollpanel/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -30,21 +30,17 @@ export class BasicDoc { 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. + Lorem ipsum dolor sit amet...

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

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

        `, - 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 @@ -61,12 +57,14 @@ export class BasicDoc {

        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { ScrollPanelModule } from 'primeng/scrollpanel'; @Component({ selector: 'scroll-panel-basic-demo', - templateUrl: './scroll-panel-basic-demo.html' + templateUrl: './scroll-panel-basic-demo.html', + standalone: true, + imports: [ScrollPanelModule] }) export class ScrollPanelBasicDemo {}` }; diff --git a/src/app/showcase/doc/scrollpanel/customdoc.ts b/src/app/showcase/doc/scrollpanel/customdoc.ts index f9740d1ac9e..14d0ec622ac 100644 --- a/src/app/showcase/doc/scrollpanel/customdoc.ts +++ b/src/app/showcase/doc/scrollpanel/customdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'custom-doc', @@ -62,8 +62,7 @@ export class CusstomDoc {

        `, - html: ` -
        + html: `
        @@ -102,12 +101,14 @@ export class CusstomDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { ScrollPanelModule } from 'primeng/scrollpanel'; @Component({ selector: 'scroll-panel-custom-demo', - templateUrl: './scroll-panel-custom-demo.html' + templateUrl: './scroll-panel-custom-demo.html', + standalone: true, + imports: [ScrollPanelModule] }) export class ScrollPanelCustomDemo {}` }; diff --git a/src/app/showcase/doc/scrollpanel/importdoc.ts b/src/app/showcase/doc/scrollpanel/importdoc.ts index c62b182e115..7f1c2ef8fdb 100644 --- a/src/app/showcase/doc/scrollpanel/importdoc.ts +++ b/src/app/showcase/doc/scrollpanel/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/scrollpanel/scrollpaneldoc.module.ts b/src/app/showcase/doc/scrollpanel/scrollpaneldoc.module.ts index 899e1a48365..74225384d62 100644 --- a/src/app/showcase/doc/scrollpanel/scrollpaneldoc.module.ts +++ b/src/app/showcase/doc/scrollpanel/scrollpaneldoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ScrollPanelModule } from 'primeng/scrollpanel'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { CusstomDoc } from './customdoc'; diff --git a/src/app/showcase/doc/scrolltop/basicdoc.ts b/src/app/showcase/doc/scrolltop/basicdoc.ts index 843c86d6b11..b49bc4d7d6e 100644 --- a/src/app/showcase/doc/scrolltop/basicdoc.ts +++ b/src/app/showcase/doc/scrolltop/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/scrolltop/elementdoc.ts b/src/app/showcase/doc/scrolltop/elementdoc.ts index 2263043d628..f7d3b540a09 100644 --- a/src/app/showcase/doc/scrolltop/elementdoc.ts +++ b/src/app/showcase/doc/scrolltop/elementdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'element-doc', diff --git a/src/app/showcase/doc/scrolltop/importdoc.ts b/src/app/showcase/doc/scrolltop/importdoc.ts index 20c7f05558c..97875934718 100644 --- a/src/app/showcase/doc/scrolltop/importdoc.ts +++ b/src/app/showcase/doc/scrolltop/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/scrolltop/scrolltopdoc.module.ts b/src/app/showcase/doc/scrolltop/scrolltopdoc.module.ts index 305c8033106..ed774c8697b 100644 --- a/src/app/showcase/doc/scrolltop/scrolltopdoc.module.ts +++ b/src/app/showcase/doc/scrolltop/scrolltopdoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ScrollTopModule } from 'primeng/scrolltop'; import { BasicDoc } from './basicdoc'; import { ElementDoc } from './elementdoc'; diff --git a/src/app/showcase/doc/selectbutton/basicdoc.ts b/src/app/showcase/doc/selectbutton/basicdoc.ts index b1dd93b7af8..bdd926d8b40 100644 --- a/src/app/showcase/doc/selectbutton/basicdoc.ts +++ b/src/app/showcase/doc/selectbutton/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        SelectButton requires a value to bind and a collection of options.

        - +
        ` @@ -22,19 +22,29 @@ export class BasicDoc { value: string = 'one-way'; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ selector: 'select-button-basic-demo', - templateUrl: './select-button-basic-demo.html' + templateUrl: './select-button-basic-demo.html', + standalone: true, + imports: [FormsModule, SelectButtonModule] }) export class SelectButtonBasicDemo { stateOptions: any[] = [{ label: 'One-Way', value: 'one-way' },{ label: 'Return', value: 'return' }]; diff --git a/src/app/showcase/doc/selectbutton/disableddoc.ts b/src/app/showcase/doc/selectbutton/disableddoc.ts index a55654c4f73..c587d65cb24 100644 --- a/src/app/showcase/doc/selectbutton/disableddoc.ts +++ b/src/app/showcase/doc/selectbutton/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -8,8 +8,8 @@ import { Code } from '../../domain/code';

        When disabled is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the optionDisabled property.

        - - + +
        ` @@ -30,21 +30,44 @@ export class DisabledDoc { value2: string = 'Option 1'; code: Code = { - basic: ` -`, + basic: ` - html: ` -
        - - +`, + + html: `
        + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ selector: 'select-button-disabled-demo', - templateUrl: './select-button-disabled-demo.html' + templateUrl: './select-button-disabled-demo.html', + standalone: true, + imports: [FormsModule, SelectButtonModule] }) export class SelectButtonDisabledDemo { stateOptions: any[] = [ diff --git a/src/app/showcase/doc/selectbutton/importdoc.ts b/src/app/showcase/doc/selectbutton/importdoc.ts index 5bd83016ec1..e94c382c501 100644 --- a/src/app/showcase/doc/selectbutton/importdoc.ts +++ b/src/app/showcase/doc/selectbutton/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/selectbutton/invaliddoc.ts b/src/app/showcase/doc/selectbutton/invaliddoc.ts index 1f3bc56e188..44f51b1ce9c 100644 --- a/src/app/showcase/doc/selectbutton/invaliddoc.ts +++ b/src/app/showcase/doc/selectbutton/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

        - +
        ` @@ -22,19 +22,31 @@ export class InvalidDoc { value: string = 'off'; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SelectButtonModule } from 'primeng/selectbutton'; + @Component({ selector: 'select-button-invalid-demo', - templateUrl: './select-button-invalid-demo.html' + templateUrl: './select-button-invalid-demo.html', + standalone: true, + imports: [FormsModule, SelectButtonModule] }) export class SelectButtonInvalidDemo { stateOptions: any[] = [{label: 'Off', value: 'off'}, {label: 'On', value: 'on'}]; diff --git a/src/app/showcase/doc/selectbutton/multipledoc.ts b/src/app/showcase/doc/selectbutton/multipledoc.ts index dc2efb579fe..915a60a9e35 100644 --- a/src/app/showcase/doc/selectbutton/multipledoc.ts +++ b/src/app/showcase/doc/selectbutton/multipledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'multiple-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array.

        - +
        ` @@ -23,19 +23,31 @@ export class MultipleDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ selector: 'select-button-multiple-demo', - templateUrl: './select-button-multiple-demo.html' + templateUrl: './select-button-multiple-demo.html', + standalone: true, + imports: [FormsModule, SelectButtonModule] }) export class SelectButtonMultipleDemo { value!: number; diff --git a/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts b/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts index 3ce1895bf54..c6c532933b4 100644 --- a/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts +++ b/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
        - +
        @@ -32,23 +32,32 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
        - + `, - html: ` -
        + html: `
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ selector: 'select-button-reactive-forms-demo', - templateUrl: './select-button-reactive-forms-demo.html' + templateUrl: './select-button-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, SelectButtonModule] }) export class SelectButtonReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/selectbutton/selectbuttondoc.module.ts b/src/app/showcase/doc/selectbutton/selectbuttondoc.module.ts index 387823a57bc..09fe068acc1 100644 --- a/src/app/showcase/doc/selectbutton/selectbuttondoc.module.ts +++ b/src/app/showcase/doc/selectbutton/selectbuttondoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { SelectButtonModule } from 'primeng/selectbutton'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DisabledDoc } from './disableddoc'; diff --git a/src/app/showcase/doc/selectbutton/templatedoc.ts b/src/app/showcase/doc/selectbutton/templatedoc.ts index d2416802049..c54ff7dbe9a 100644 --- a/src/app/showcase/doc/selectbutton/templatedoc.ts +++ b/src/app/showcase/doc/selectbutton/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -28,27 +28,35 @@ export class TemplateDoc { ]; code: Code = { - basic: ` - - - -`, - - html: ` -
        - + basic: ` +`, + + html: `
        + + + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SelectButtonModule } from 'primeng/selectbutton'; @Component({ selector: 'select-button-template-demo', - templateUrl: './select-button-template-demo.html' + templateUrl: './select-button-template-demo.html', + standalone: true, + imports: [FormsModule, SelectButtonModule] }) export class SelectButtonTemplateDemo { value: any; diff --git a/src/app/showcase/doc/sidebar/accessibilitydoc.ts b/src/app/showcase/doc/sidebar/accessibilitydoc.ts index 44873a49053..8da0d14f260 100644 --- a/src/app/showcase/doc/sidebar/accessibilitydoc.ts +++ b/src/app/showcase/doc/sidebar/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/sidebar/basicdoc.ts b/src/app/showcase/doc/sidebar/basicdoc.ts index c8ccb15d0fd..35422006da6 100644 --- a/src/app/showcase/doc/sidebar/basicdoc.ts +++ b/src/app/showcase/doc/sidebar/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -15,7 +15,7 @@ import { Code } from '../../domain/code'; consequat.

        - +
        ` @@ -27,14 +27,12 @@ export class BasicDoc { basic: `

        Sidebar

        - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet...

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

        Sidebar

        @@ -42,15 +40,18 @@ export class BasicDoc { Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SidebarModule } from 'primeng/sidebar'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'sidebar-basic-demo', - templateUrl: './sidebar-basic-demo.html' + templateUrl: './sidebar-basic-demo.html', + standalone: true, + imports: [SidebarModule, ButtonModule] }) export class SidebarBasicDemo { sidebarVisible: boolean = false; diff --git a/src/app/showcase/doc/sidebar/fullscreendoc.ts b/src/app/showcase/doc/sidebar/fullscreendoc.ts index 7a7696b9251..74afbcde5f5 100644 --- a/src/app/showcase/doc/sidebar/fullscreendoc.ts +++ b/src/app/showcase/doc/sidebar/fullscreendoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'full-screen-doc', @@ -9,9 +9,15 @@ import { Code } from '../../domain/code';
        -

        Full Screen Sidebar

        + + Sidebar + +

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

        - +
        ` @@ -21,24 +27,41 @@ export class FullScreenDoc { code: Code = { basic: ` -

        Full Screen Sidebar

        -         -`, + + + Sidebar + + +

        + Lorem ipsum dolor sit amet, consectetur adipiscing elit... +

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

        Full Screen Sidebar

        + + + Sidebar + + +

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

        - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SidebarModule } from 'primeng/sidebar'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'sidebar-full-screen-demo', - templateUrl: './sidebar-full-screen-demo.html' + templateUrl: './sidebar-full-screen-demo.html', + standalone: true, + imports: [SidebarModule, ButtonModule] }) export class SidebarFullScreenDemo { sidebarVisible: boolean = false; diff --git a/src/app/showcase/doc/sidebar/headlessdoc.ts b/src/app/showcase/doc/sidebar/headlessdoc.ts index 4ff386cbcad..84339200127 100644 --- a/src/app/showcase/doc/sidebar/headlessdoc.ts +++ b/src/app/showcase/doc/sidebar/headlessdoc.ts @@ -1,5 +1,5 @@ import { Component, ViewChild } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Sidebar } from 'primeng/sidebar'; @Component({ @@ -615,13 +615,19 @@ export class HeadlessDoc {
        `, - typescript: ` -import { Component, ViewChild } from '@angular/core'; + typescript: `import { Component, ViewChild } from '@angular/core'; +import { SidebarModule } from 'primeng/sidebar'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; +import { AvatarModule } from 'primeng/avatar'; +import { StyleClassModule } from 'primeng/styleclass'; import { Sidebar } from 'primeng/sidebar'; @Component({ selector: 'sidebar-headless-demo', - templateUrl: './sidebar-headless-demo.html' + templateUrl: './sidebar-headless-demo.html', + standalone: true, + imports: [SidebarModule, ButtonModule, RippleModule, AvatarModule, StyleClassModule] }) export class SidebarHeadlessDemo { @ViewChild('sidebarRef') sidebarRef!: Sidebar; diff --git a/src/app/showcase/doc/sidebar/importdoc.ts b/src/app/showcase/doc/sidebar/importdoc.ts index 0f5a4a27892..1552952d099 100644 --- a/src/app/showcase/doc/sidebar/importdoc.ts +++ b/src/app/showcase/doc/sidebar/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/sidebar/positiondoc.ts b/src/app/showcase/doc/sidebar/positiondoc.ts index e48630d5f69..bc07e85a796 100644 --- a/src/app/showcase/doc/sidebar/positiondoc.ts +++ b/src/app/showcase/doc/sidebar/positiondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'position-doc', @@ -24,10 +24,10 @@ import { Code } from '../../domain/code';

        Bottom Sidebar

        - - - - + + + +
        ` @@ -58,13 +58,28 @@ export class PositionDoc {

        Bottom Sidebar

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

        Left Sidebar

         @@ -81,18 +96,37 @@ export class PositionDoc {

        Bottom Sidebar

        - - - - + + + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SidebarModule } from 'primeng/sidebar'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'sidebar-position-demo', - templateUrl: './sidebar-position-demo.html' + templateUrl: './sidebar-position-demo.html', + standalone: true, + imports: [SidebarModule, ButtonModule] }) export class SidebarPositionDemo { sidebarVisible1: boolean = false; diff --git a/src/app/showcase/doc/sidebar/sidebardoc.module.ts b/src/app/showcase/doc/sidebar/sidebardoc.module.ts index 13709333737..9653a689073 100644 --- a/src/app/showcase/doc/sidebar/sidebardoc.module.ts +++ b/src/app/showcase/doc/sidebar/sidebardoc.module.ts @@ -5,8 +5,8 @@ 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 { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { TemplateDoc } from './templatedoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/sidebar/sizedoc.ts b/src/app/showcase/doc/sidebar/sizedoc.ts index bd17d2e2c82..974baf5dacc 100644 --- a/src/app/showcase/doc/sidebar/sizedoc.ts +++ b/src/app/showcase/doc/sidebar/sizedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'size-doc', @@ -9,12 +9,15 @@ import { Code } from '../../domain/code';
        + + Sidebar +

        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.

        - +
        ` @@ -24,30 +27,37 @@ export class SizeDoc { code: Code = { basic: ` + + Sidebar +

        - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipiscing elit...

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

        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.

        - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SidebarModule } from 'primeng/sidebar'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'sidebar-size-demo', - templateUrl: './sidebar-size-demo.html' + templateUrl: './sidebar-size-demo.html', + standalone: true, + imports: [SidebarModule, ButtonModule] }) export class SidebarSizeDemo { sidebarVisible: boolean = false; diff --git a/src/app/showcase/doc/sidebar/templatedoc.ts b/src/app/showcase/doc/sidebar/templatedoc.ts index f0595c64726..b9be615a029 100644 --- a/src/app/showcase/doc/sidebar/templatedoc.ts +++ b/src/app/showcase/doc/sidebar/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -9,11 +9,18 @@ import { Code } from '../../domain/code';
        - Header Content - Body Content - Footer 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. +

        - +
        ` @@ -23,28 +30,51 @@ export class TemplateDoc { code: Code = { basic: ` - Header Content - Body Content - Footer Content + +
        + + + Amy Elsner + +
        +         +

        + Lorem ipsum dolor sit amet... +

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

        - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SidebarModule } from 'primeng/sidebar'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'sidebar-template-demo', - templateUrl: './sidebar-template-demo.html' + templateUrl: './sidebar-template-demo.html', + standalone: true, + imports: [SidebarModule, ButtonModule] }) export class SidebarTemplateDemo { sidebarVisible: boolean = false; diff --git a/src/app/showcase/doc/skeleton/carddoc.ts b/src/app/showcase/doc/skeleton/carddoc.ts index d80a8e0f22b..086814b871e 100644 --- a/src/app/showcase/doc/skeleton/carddoc.ts +++ b/src/app/showcase/doc/skeleton/carddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'card-doc', diff --git a/src/app/showcase/doc/skeleton/datatabledoc.ts b/src/app/showcase/doc/skeleton/datatabledoc.ts index 7dcdd3fddd6..edffe29749d 100644 --- a/src/app/showcase/doc/skeleton/datatabledoc.ts +++ b/src/app/showcase/doc/skeleton/datatabledoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'datatable-doc', diff --git a/src/app/showcase/doc/skeleton/importdoc.ts b/src/app/showcase/doc/skeleton/importdoc.ts index de1cf05b34f..5967dfea3b9 100644 --- a/src/app/showcase/doc/skeleton/importdoc.ts +++ b/src/app/showcase/doc/skeleton/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/skeleton/listdoc.ts b/src/app/showcase/doc/skeleton/listdoc.ts index 4e38dddf124..20d861dd588 100644 --- a/src/app/showcase/doc/skeleton/listdoc.ts +++ b/src/app/showcase/doc/skeleton/listdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'list-doc', diff --git a/src/app/showcase/doc/skeleton/shapesdoc.ts b/src/app/showcase/doc/skeleton/shapesdoc.ts index 6bbf89aaccc..260e16d3a00 100644 --- a/src/app/showcase/doc/skeleton/shapesdoc.ts +++ b/src/app/showcase/doc/skeleton/shapesdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'shapes-doc', diff --git a/src/app/showcase/doc/skeleton/skeletondoc.module.ts b/src/app/showcase/doc/skeleton/skeletondoc.module.ts index 66d40db79f3..517917592a1 100644 --- a/src/app/showcase/doc/skeleton/skeletondoc.module.ts +++ b/src/app/showcase/doc/skeleton/skeletondoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { SkeletonModule } from 'primeng/skeleton'; import { TableModule } from 'primeng/table'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { CardDoc } from './carddoc'; import { DataTableDoc } from './datatabledoc'; diff --git a/src/app/showcase/doc/slider/accessibilitydoc.ts b/src/app/showcase/doc/slider/accessibilitydoc.ts index 332b63abc45..f36293d939c 100644 --- a/src/app/showcase/doc/slider/accessibilitydoc.ts +++ b/src/app/showcase/doc/slider/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -80,8 +80,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: `Number - + -` +` }; } diff --git a/src/app/showcase/doc/slider/basicdoc.ts b/src/app/showcase/doc/slider/basicdoc.ts index 1859c336a9c..d45b4774b35 100644 --- a/src/app/showcase/doc/slider/basicdoc.ts +++ b/src/app/showcase/doc/slider/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        Two-way binding is defined using the standard ngModel directive.

        - +
        ` @@ -17,19 +17,21 @@ export class BasicDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SliderModule } from 'primeng/slider'; @Component({ selector: 'slider-basic-demo', - templateUrl: './slider-basic-demo.html' + templateUrl: './slider-basic-demo.html', + standalone: true, + imports: [FormsModule, SliderModule] }) export class SliderBasicDemo { value!: number; diff --git a/src/app/showcase/doc/slider/importdoc.ts b/src/app/showcase/doc/slider/importdoc.ts index 1fd80a95f28..d8fc534d3c5 100644 --- a/src/app/showcase/doc/slider/importdoc.ts +++ b/src/app/showcase/doc/slider/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/slider/inputdoc.ts b/src/app/showcase/doc/slider/inputdoc.ts index 6cb342b0d27..7e935c6a369 100644 --- a/src/app/showcase/doc/slider/inputdoc.ts +++ b/src/app/showcase/doc/slider/inputdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'input-doc', @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';
        - - + +
        @@ -21,24 +21,27 @@ export class InputDoc { code: Code = { basic: `
        - - + +
        `, - html: ` -
        + html: `
        - - + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SliderModule } from 'primeng/slider'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'slider-input-demo', - templateUrl: './slider-input-demo.html' + templateUrl: './slider-input-demo.html', + standalone: true, + imports: [FormsModule, SliderModule, InputTextModule] }) export class SliderInputDemo { value: number = 50; diff --git a/src/app/showcase/doc/slider/rangedoc.ts b/src/app/showcase/doc/slider/rangedoc.ts index c52b3e1a4f2..90d13ef69c8 100644 --- a/src/app/showcase/doc/slider/rangedoc.ts +++ b/src/app/showcase/doc/slider/rangedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'range-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.

        - +
        ` @@ -17,19 +17,21 @@ export class RangeDoc { rangeValues: number[] = [20, 80]; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SliderModule } from 'primeng/slider'; @Component({ selector: 'slider-range-demo', - templateUrl: './slider-range-demo.html' + templateUrl: './slider-range-demo.html', + standalone: true, + imports: [FormsModule, SliderModule] }) export class SliderRangeDemo { rangeValues: number[] = [20, 80]; diff --git a/src/app/showcase/doc/slider/reactiveformsdoc.ts b/src/app/showcase/doc/slider/reactiveformsdoc.ts index 53b6c9f25ee..fe904aa7e33 100644 --- a/src/app/showcase/doc/slider/reactiveformsdoc.ts +++ b/src/app/showcase/doc/slider/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
        - +
        @@ -27,23 +27,24 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
        - + `, - html: ` -
        + html: `
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { SliderModule } from 'primeng/slider'; @Component({ selector: 'slider-reactive-forms-demo', - templateUrl: './slider-reactive-forms-demo.html' + templateUrl: './slider-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, SliderModule] }) export class SliderReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/slider/sliderdoc.module.ts b/src/app/showcase/doc/slider/sliderdoc.module.ts index c11d6ac9fc6..a037dd8ed89 100644 --- a/src/app/showcase/doc/slider/sliderdoc.module.ts +++ b/src/app/showcase/doc/slider/sliderdoc.module.ts @@ -4,8 +4,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { InputTextModule } from 'primeng/inputtext'; import { SliderModule } from 'primeng/slider'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/slider/stepdoc.ts b/src/app/showcase/doc/slider/stepdoc.ts index f17568f67d2..ed6f971765c 100644 --- a/src/app/showcase/doc/slider/stepdoc.ts +++ b/src/app/showcase/doc/slider/stepdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'step-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        Size of each movement is defined with the step property.

        - +
        ` @@ -17,19 +17,21 @@ export class StepDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SliderModule } from 'primeng/slider'; @Component({ selector: 'slider-step-demo', - templateUrl: './slider-step-demo.html' + templateUrl: './slider-step-demo.html', + standalone: true, + imports: [FormsModule, SliderModule] }) export class SliderStepDemo { value!: number; diff --git a/src/app/showcase/doc/slider/verticaldoc.ts b/src/app/showcase/doc/slider/verticaldoc.ts index d346db9ba42..f87d5046493 100644 --- a/src/app/showcase/doc/slider/verticaldoc.ts +++ b/src/app/showcase/doc/slider/verticaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'vertical-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        Default layout of slider is horizontal, use orientation property for the alternative vertical mode.

        - +
        ` @@ -17,19 +17,21 @@ export class VerticalDoc { value!: number; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { SliderModule } from 'primeng/slider'; + @Component({ selector: 'slider-vertical-demo', - templateUrl: './slider-vertical-demo.html' + templateUrl: './slider-vertical-demo.html', + standalone: true, + imports: [FormsModule, SliderModule] }) export class SliderVerticalDemo { value!: number; diff --git a/src/app/showcase/doc/speeddial/accessibilitydoc.ts b/src/app/showcase/doc/speeddial/accessibilitydoc.ts index f3aac43c120..12d38d2ebe8 100644 --- a/src/app/showcase/doc/speeddial/accessibilitydoc.ts +++ b/src/app/showcase/doc/speeddial/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/speeddial/circledoc.ts b/src/app/showcase/doc/speeddial/circledoc.ts index 298de7a12f4..de73fbd60be 100644 --- a/src/app/showcase/doc/speeddial/circledoc.ts +++ b/src/app/showcase/doc/speeddial/circledoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'circle-doc', diff --git a/src/app/showcase/doc/speeddial/customdoc.ts b/src/app/showcase/doc/speeddial/customdoc.ts index 7ca35e6b50d..d093ec48d81 100644 --- a/src/app/showcase/doc/speeddial/customdoc.ts +++ b/src/app/showcase/doc/speeddial/customdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'custom-doc', diff --git a/src/app/showcase/doc/speeddial/importdoc.ts b/src/app/showcase/doc/speeddial/importdoc.ts index 1a835cf0a4a..fa8ce564bc1 100644 --- a/src/app/showcase/doc/speeddial/importdoc.ts +++ b/src/app/showcase/doc/speeddial/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/speeddial/lineardoc.ts b/src/app/showcase/doc/speeddial/lineardoc.ts index 517ee2373e6..cacd6ac3876 100644 --- a/src/app/showcase/doc/speeddial/lineardoc.ts +++ b/src/app/showcase/doc/speeddial/lineardoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'linear-doc', diff --git a/src/app/showcase/doc/speeddial/maskdoc.ts b/src/app/showcase/doc/speeddial/maskdoc.ts index 8423b57a48a..9a03a7788ae 100644 --- a/src/app/showcase/doc/speeddial/maskdoc.ts +++ b/src/app/showcase/doc/speeddial/maskdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'mask-doc', diff --git a/src/app/showcase/doc/speeddial/quartercircledoc.ts b/src/app/showcase/doc/speeddial/quartercircledoc.ts index 198ecd55b20..f53b835d8f0 100644 --- a/src/app/showcase/doc/speeddial/quartercircledoc.ts +++ b/src/app/showcase/doc/speeddial/quartercircledoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'quarter-circle-doc', diff --git a/src/app/showcase/doc/speeddial/semicircledoc.ts b/src/app/showcase/doc/speeddial/semicircledoc.ts index b9fcde6158a..549490a0cef 100644 --- a/src/app/showcase/doc/speeddial/semicircledoc.ts +++ b/src/app/showcase/doc/speeddial/semicircledoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'semi-circle-doc', diff --git a/src/app/showcase/doc/speeddial/speeddialdoc.module.ts b/src/app/showcase/doc/speeddial/speeddialdoc.module.ts index 418af470c85..6dd6cae0b1b 100644 --- a/src/app/showcase/doc/speeddial/speeddialdoc.module.ts +++ b/src/app/showcase/doc/speeddial/speeddialdoc.module.ts @@ -4,8 +4,8 @@ import { MessagesModule } from 'primeng/messages'; import { SpeedDialModule } from 'primeng/speeddial'; import { ToastModule } from 'primeng/toast'; import { TooltipModule } from 'primeng/tooltip'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { CircleDoc } from './circledoc'; import { CustomDoc } from './customdoc'; diff --git a/src/app/showcase/doc/speeddial/tooltipdoc.ts b/src/app/showcase/doc/speeddial/tooltipdoc.ts index 6d252ff133d..6193bd57e1a 100644 --- a/src/app/showcase/doc/speeddial/tooltipdoc.ts +++ b/src/app/showcase/doc/speeddial/tooltipdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'tooltip-doc', diff --git a/src/app/showcase/doc/splitbutton/accessibilitydoc.ts b/src/app/showcase/doc/splitbutton/accessibilitydoc.ts index 74c399fc9f1..b2413d59881 100644 --- a/src/app/showcase/doc/splitbutton/accessibilitydoc.ts +++ b/src/app/showcase/doc/splitbutton/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/splitbutton/basicdoc.ts b/src/app/showcase/doc/splitbutton/basicdoc.ts index ef3ed9663ca..5c76f304973 100644 --- a/src/app/showcase/doc/splitbutton/basicdoc.ts +++ b/src/app/showcase/doc/splitbutton/basicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/splitbutton/disableddoc.ts b/src/app/showcase/doc/splitbutton/disableddoc.ts index c9cd3cdc876..670ad680f95 100644 --- a/src/app/showcase/doc/splitbutton/disableddoc.ts +++ b/src/app/showcase/doc/splitbutton/disableddoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', diff --git a/src/app/showcase/doc/splitbutton/importdoc.ts b/src/app/showcase/doc/splitbutton/importdoc.ts index ff1c439ac75..da54e0cfbd7 100644 --- a/src/app/showcase/doc/splitbutton/importdoc.ts +++ b/src/app/showcase/doc/splitbutton/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/splitbutton/nesteddoc.ts b/src/app/showcase/doc/splitbutton/nesteddoc.ts index e9c269b775c..6e786001a29 100644 --- a/src/app/showcase/doc/splitbutton/nesteddoc.ts +++ b/src/app/showcase/doc/splitbutton/nesteddoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'nested-doc', diff --git a/src/app/showcase/doc/splitbutton/outlineddoc.ts b/src/app/showcase/doc/splitbutton/outlineddoc.ts index 83c41e3d89b..9367ed93514 100644 --- a/src/app/showcase/doc/splitbutton/outlineddoc.ts +++ b/src/app/showcase/doc/splitbutton/outlineddoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'outlined-doc', diff --git a/src/app/showcase/doc/splitbutton/raiseddoc.ts b/src/app/showcase/doc/splitbutton/raiseddoc.ts index bd8b99ffb79..75a83f29af5 100644 --- a/src/app/showcase/doc/splitbutton/raiseddoc.ts +++ b/src/app/showcase/doc/splitbutton/raiseddoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'raised-doc', diff --git a/src/app/showcase/doc/splitbutton/raisedtextdoc.ts b/src/app/showcase/doc/splitbutton/raisedtextdoc.ts index 7f6c0d85f8c..07cc98608ee 100644 --- a/src/app/showcase/doc/splitbutton/raisedtextdoc.ts +++ b/src/app/showcase/doc/splitbutton/raisedtextdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'raised-text-doc', diff --git a/src/app/showcase/doc/splitbutton/roundeddoc.ts b/src/app/showcase/doc/splitbutton/roundeddoc.ts index 5eb263e9df8..cdc3afec1d5 100644 --- a/src/app/showcase/doc/splitbutton/roundeddoc.ts +++ b/src/app/showcase/doc/splitbutton/roundeddoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'rounded-doc', diff --git a/src/app/showcase/doc/splitbutton/severitydoc.ts b/src/app/showcase/doc/splitbutton/severitydoc.ts index c4fba3ebad7..620991017b3 100644 --- a/src/app/showcase/doc/splitbutton/severitydoc.ts +++ b/src/app/showcase/doc/splitbutton/severitydoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'severity-doc', diff --git a/src/app/showcase/doc/splitbutton/sizesdoc.ts b/src/app/showcase/doc/splitbutton/sizesdoc.ts index 9532b4e1396..4eb730f23b0 100644 --- a/src/app/showcase/doc/splitbutton/sizesdoc.ts +++ b/src/app/showcase/doc/splitbutton/sizesdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'sizes-doc', diff --git a/src/app/showcase/doc/splitbutton/splitbuttondoc.module.ts b/src/app/showcase/doc/splitbutton/splitbuttondoc.module.ts index 36af75b580c..d8ba8283c29 100644 --- a/src/app/showcase/doc/splitbutton/splitbuttondoc.module.ts +++ b/src/app/showcase/doc/splitbutton/splitbuttondoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { SplitButtonModule } from 'primeng/splitbutton'; import { ToastModule } from 'primeng/toast'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { DisabledDoc } from './disableddoc'; diff --git a/src/app/showcase/doc/splitbutton/textdoc.ts b/src/app/showcase/doc/splitbutton/textdoc.ts index 54697a93ecb..c94b2218c9e 100644 --- a/src/app/showcase/doc/splitbutton/textdoc.ts +++ b/src/app/showcase/doc/splitbutton/textdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'text-doc', diff --git a/src/app/showcase/doc/splitter/horizontaldoc.ts b/src/app/showcase/doc/splitter/horizontaldoc.ts index 3825385e73b..54ac4cbc726 100644 --- a/src/app/showcase/doc/splitter/horizontaldoc.ts +++ b/src/app/showcase/doc/splitter/horizontaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'horizontal-doc', @@ -24,31 +24,40 @@ export class HorizontalDoc { code: Code = { basic: ` -
        Panel 1
        +
        + Panel 1 +
        -
        Panel 2
        +
        + Panel 2 +
        `, - html: ` -
        + html: `
        -
        Panel 1
        +
        + Panel 1 +
        -
        Panel 2
        +
        + Panel 2 +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SplitterModule } from 'primeng/splitter'; @Component({ selector: 'splitter-horizontal-demo', - templateUrl: './splitter-horizontal-demo.html' + templateUrl: './splitter-horizontal-demo.html', + standalone: true, + imports: [SplitterModule] }) export class SplitterHorizontalDemo {}` }; diff --git a/src/app/showcase/doc/splitter/importdoc.ts b/src/app/showcase/doc/splitter/importdoc.ts index 75cf5aa0eab..5d11373e4c2 100644 --- a/src/app/showcase/doc/splitter/importdoc.ts +++ b/src/app/showcase/doc/splitter/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/splitter/nesteddoc.ts b/src/app/showcase/doc/splitter/nesteddoc.ts index 5190860c1e2..1a6e596ee1b 100644 --- a/src/app/showcase/doc/splitter/nesteddoc.ts +++ b/src/app/showcase/doc/splitter/nesteddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'nested-doc', @@ -36,62 +36,87 @@ import { Code } from '../../domain/code'; }) export class NestedDoc { code: Code = { - basic: ` - -
        Panel 1
        -         - - - -
        Panel 2
        -         - - - -
        Panel 3
        -         - -
        Panel 4
        -         -         -         -         -         -        `, - - html: ` -
        - + basic: ` -
        Panel 1
        +
        + Panel 1 +
        -
        Panel 2
        +
        + Panel 2 +
        -
        Panel 3
        +
        + Panel 3 +
        -
        Panel 4
        +
        + Panel 4 +
        +        `, + + html: `
        + + +
        + Panel 1 +
        +         + + + +
        + Panel 2 +
        +         + + + +
        + Panel 3 +
        +         + +
        + Panel 4 +
        +         +         +         +         +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SplitterModule } from 'primeng/splitter'; @Component({ selector: 'splitter-nested-demo', - templateUrl: './splitter-nested-demo.html' + templateUrl: './splitter-nested-demo.html', + standalone: true, + imports: [SplitterModule] }) export class SplitterNestedDemo {}` }; diff --git a/src/app/showcase/doc/splitter/sizedoc.ts b/src/app/showcase/doc/splitter/sizedoc.ts index 189e1705a83..c7926caaa05 100644 --- a/src/app/showcase/doc/splitter/sizedoc.ts +++ b/src/app/showcase/doc/splitter/sizedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'size-doc', @@ -22,33 +22,48 @@ import { Code } from '../../domain/code'; }) export class SizeDoc { code: Code = { - basic: ` + basic: ` -
        Panel 1
        +
        + Panel 1 +
        -
        Panel 2
        +
        + Panel 2 +
        `, - html: ` -
        - - -
        Panel 1
        -         - -
        Panel 2
        -         + html: `
        + + +
        + Panel 1 +
        +         + +
        + Panel 2 +
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SplitterModule } from 'primeng/splitter'; @Component({ selector: 'splitter-size-demo', - templateUrl: './splitter-size-demo.html' + templateUrl: './splitter-size-demo.html', + standalone: true, + imports: [SplitterModule] }) export class SplitterSizeDemo {}` }; diff --git a/src/app/showcase/doc/splitter/splitterdoc.module.ts b/src/app/showcase/doc/splitter/splitterdoc.module.ts index bed77cdc2ff..25813a2fb90 100644 --- a/src/app/showcase/doc/splitter/splitterdoc.module.ts +++ b/src/app/showcase/doc/splitter/splitterdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { SplitterModule } from 'primeng/splitter'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { HorizontalDoc } from './horizontaldoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/splitter/verticaldoc.ts b/src/app/showcase/doc/splitter/verticaldoc.ts index 1608480e641..254f1a509dc 100644 --- a/src/app/showcase/doc/splitter/verticaldoc.ts +++ b/src/app/showcase/doc/splitter/verticaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'vertical-doc', @@ -22,33 +22,48 @@ import { Code } from '../../domain/code'; }) export class VerticalDoc { code: Code = { - basic: ` - -
        Panel 1
        -         - -
        Panel 2
        -         -        `, - - html: ` -div class="card"> - + basic: ` -
        Panel 1
        +
        + Panel 1 +
        -
        Panel 2
        +
        + Panel 2 +
        +        `, + + html: `
        + + +
        + Panel 1 +
        +         + +
        + Panel 2 +
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { SplitterModule } from 'primeng/splitter'; @Component({ selector: 'splitter-vertical-demo', - templateUrl: './splitter-vertical-demo.html' + templateUrl: './splitter-vertical-demo.html', + standalone: true, + imports: [SplitterModule] }) export class SplitterVerticalDemo {}` }; diff --git a/src/app/showcase/doc/stepper/basicdoc.ts b/src/app/showcase/doc/stepper/basicdoc.ts index e70f39c5718..8fac48583ee 100644 --- a/src/app/showcase/doc/stepper/basicdoc.ts +++ b/src/app/showcase/doc/stepper/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -58,30 +58,50 @@ export class BasicDoc {
        -
        Content I
        +
        + Content I +
        -
        + +
        +
        -
        Content II
        +
        + Content II +
        - -
        + + +
        +
        -
        Content III
        +
        + Content III +
        -
        + +
        + `, @@ -90,40 +110,66 @@ export class BasicDoc {
        -
        Content I
        +
        + Content I +
        -
        + +
        +
        -
        Content II
        +
        + Content II +
        - -
        + + +
        +
        -
        Content III
        +
        + Content III +
        -
        + +
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { StepperModule } from 'primeng/stepper'; @Component({ selector: 'stepper-basic-demo', templateUrl: './stepper-basic-demo.html', + standalone: true, + imports: [ButtonModule, StepperModule], styles: [ \` .p-stepper { diff --git a/src/app/showcase/doc/stepper/importdoc.ts b/src/app/showcase/doc/stepper/importdoc.ts index 8e2e5d55cd0..9827e09a2f9 100644 --- a/src/app/showcase/doc/stepper/importdoc.ts +++ b/src/app/showcase/doc/stepper/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/stepper/lineardoc.ts b/src/app/showcase/doc/stepper/lineardoc.ts index e1aa670b860..7e8c89afb30 100644 --- a/src/app/showcase/doc/stepper/lineardoc.ts +++ b/src/app/showcase/doc/stepper/lineardoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'linear-doc', @@ -48,30 +48,39 @@ export class LinearDoc {
        -
        Content I
        +
        + Content I +
        -
        + +
        +
        -
        Content II
        +
        + Content II +
        -
        + +
        +
        -
        Content III
        +
        + Content III +
        -
        + +
        + `, @@ -80,40 +89,52 @@ export class LinearDoc {
        -
        Content I
        +
        + Content I +
        -
        + +
        +
        -
        Content II
        +
        + Content II +
        -
        + +
        +
        -
        Content III
        +
        + Content III +
        -
        + +
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { StepperModule } from 'primeng/stepper'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'stepper-linear-demo-demo', - templateUrl: './stepper-linear-demo-demo.html' + templateUrl: './stepper-linear-demo-demo.html', + standalone: true, + imports: [StepperModule, ButtonModule] }) export class StepperLinearDemo { }` diff --git a/src/app/showcase/doc/stepper/stepperdoc.module.ts b/src/app/showcase/doc/stepper/stepperdoc.module.ts index 6aac2de49ea..1068302afac 100644 --- a/src/app/showcase/doc/stepper/stepperdoc.module.ts +++ b/src/app/showcase/doc/stepper/stepperdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { StepperModule } from 'primeng/stepper'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/stepper/templatedoc.ts b/src/app/showcase/doc/stepper/templatedoc.ts index 3e1ebb934a5..62e7dcf717a 100644 --- a/src/app/showcase/doc/stepper/templatedoc.ts +++ b/src/app/showcase/doc/stepper/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -371,12 +371,28 @@ export class TemplateDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { StepperModule } from 'primeng/stepper'; +import { InputTextModule } from 'primeng/inputtext'; +import { ToggleButtonModule } from 'primeng/togglebutton'; +import { IconFieldModule } from 'primeng/iconfield'; +import { InputIconModule } from 'primeng/inputicon'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'stepper-template-demo', templateUrl: './stepper-template-demo.html', + standalone: true, + imports: [ + StepperModule, + ButtonModule, + InputTextModule, + ToggleButtonModule, + IconFieldModule, + InputIconModule, + CommonModule + ], styles: [ \` .p-stepper { diff --git a/src/app/showcase/doc/stepper/verticaldoc.ts b/src/app/showcase/doc/stepper/verticaldoc.ts index 9b837be92a6..b0d2713eb81 100644 --- a/src/app/showcase/doc/stepper/verticaldoc.ts +++ b/src/app/showcase/doc/stepper/verticaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'vertical-doc', @@ -51,27 +51,34 @@ export class VerticalDoc {
        Content I
        -
        +
        -
        Content II
        +
        + Content II +
        -
        + +
        +
        -
        Content III
        +
        + Content III +
        -
        + +
        + `, @@ -80,40 +87,52 @@ export class VerticalDoc {
        -
        Content I
        +
        + Content I +
        -
        + +
        +
        -
        Content II
        +
        + Content II +
        -
        + +
        +
        -
        Content III
        +
        + Content III +
        -
        + +
        +
        `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { StepperModule } from 'primeng/stepper'; +import { ButtonModule } from 'primeng/button'; + @Component({ selector: 'stepper-vertical-demo', - templateUrl: './stepper-vertical-demo.html' + templateUrl: './stepper-vertical-demo.html', + standalone: true, + imports: [StepperModule, ButtonModule] }) export class StepperVerticalDemo { }` diff --git a/src/app/showcase/doc/steps/basicdoc.ts b/src/app/showcase/doc/steps/basicdoc.ts index a724f0b72c4..4629c2339af 100644 --- a/src/app/showcase/doc/steps/basicdoc.ts +++ b/src/app/showcase/doc/steps/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

        Steps requires a collection of menuitems as its model.

        - +
        ` @@ -20,39 +20,33 @@ export class BasicDoc implements OnInit { ngOnInit() { this.items = [ { - label: 'Personal', - routerLink: 'personal' - }, - { - label: 'Seat', - routerLink: 'seat' + label: 'Personal Info' }, { - label: 'Payment', - routerLink: 'payment' + label: 'Reservation' }, { - label: 'Confirmation', - routerLink: 'confirmation' + label: 'Review' } - ]; + ] } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { StepsModule } from 'primeng/steps'; @Component({ selector: 'steps-basic-demo', - templateUrl: './steps-basic-demo.html' + templateUrl: './steps-basic-demo.html', + standalone: true, + imports: [StepsModule] }) export class StepsBasicDemo implements OnInit { items: MenuItem[] | undefined; diff --git a/src/app/showcase/doc/steps/confirmationdemo.ts b/src/app/showcase/doc/steps/confirmationdemo.ts index 8639fb31d20..9faae6296f5 100644 --- a/src/app/showcase/doc/steps/confirmationdemo.ts +++ b/src/app/showcase/doc/steps/confirmationdemo.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Router } from '@angular/router'; @Component({ diff --git a/src/app/showcase/doc/steps/controlleddoc.ts b/src/app/showcase/doc/steps/controlleddoc.ts new file mode 100644 index 00000000000..970861c7242 --- /dev/null +++ b/src/app/showcase/doc/steps/controlleddoc.ts @@ -0,0 +1,119 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'controlled-doc', + template: ` + +

        Steps can be controlled programmatically using activeIndex property.

        +         +
        +
        + + + +
        + +
        + + ` +}) +export class ControlledDoc implements OnInit { + items: MenuItem[] | undefined; + + active: number = 0; + + ngOnInit() { + this.items = [ + { + label: 'Personal Info' + }, + { + label: 'Reservation' + }, + { + label: 'Review' + } + ]; + } + + code: Code = { + basic: `
        + + + +
        +`, + + html: `
        +
        + + + +
        + +
        `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { StepsModule } from 'primeng/steps'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'steps-controlled-demo', + templateUrl: './steps-controlled-demo.html', + standalone: true, + imports: [StepsModule, ButtonModule] +}) +export class StepsControlledDemo implements OnInit { + items: MenuItem[] | undefined; + + active: number = 0; + + ngOnInit() { + this.items = [ + { + label: 'Personal Info' + }, + { + label: 'Reservation' + }, + { + label: 'Review' + } + ]; + } +}` + }; +} diff --git a/src/app/showcase/doc/steps/importdoc.ts b/src/app/showcase/doc/steps/importdoc.ts index 1c7334d3685..7d4484683a2 100644 --- a/src/app/showcase/doc/steps/importdoc.ts +++ b/src/app/showcase/doc/steps/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/steps/interactivedoc.ts b/src/app/showcase/doc/steps/interactivedoc.ts index a66abf0c959..39f6f71a3ba 100644 --- a/src/app/showcase/doc/steps/interactivedoc.ts +++ b/src/app/showcase/doc/steps/interactivedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'interactive-doc', @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';

        In order to add interactivity to the component, disable readonly and use a binding to activeIndex along with activeIndexChange to control the Steps.

        - - + +
        `, @@ -49,22 +49,32 @@ export class InteractiveDoc implements OnInit { } code: Code = { - basic: ` -`, + basic: ` +`, - html: ` -
        - - + html: `
        + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; +import { StepsModule } from 'primeng/steps'; +import { ToastModule } from 'primeng/toast'; @Component({ selector: 'steps-interactive-demo', templateUrl: './steps-interactive-demo.html', + standalone: true, + imports: [StepsModule, ToastModule], providers: [MessageService] }) export class StepsInteractiveDemo implements OnInit { diff --git a/src/app/showcase/doc/steps/paymentdemo.ts b/src/app/showcase/doc/steps/paymentdemo.ts index 7e0f3ca2c54..1dd8aae28a6 100644 --- a/src/app/showcase/doc/steps/paymentdemo.ts +++ b/src/app/showcase/doc/steps/paymentdemo.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Router } from '@angular/router'; @Component({ diff --git a/src/app/showcase/doc/steps/personaldemo.ts b/src/app/showcase/doc/steps/personaldemo.ts index bfd7e2e7eb3..acc893dfc30 100644 --- a/src/app/showcase/doc/steps/personaldemo.ts +++ b/src/app/showcase/doc/steps/personaldemo.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Router } from '@angular/router'; @Component({ diff --git a/src/app/showcase/doc/steps/routingdoc.ts b/src/app/showcase/doc/steps/routingdoc.ts index bb2b1eee2a5..9043cf4224b 100644 --- a/src/app/showcase/doc/steps/routingdoc.ts +++ b/src/app/showcase/doc/steps/routingdoc.ts @@ -1,8 +1,8 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; import { Subscription } from 'rxjs'; -import { Code } from '../../domain/code'; -import { TicketService } from '../../service/ticketservice'; +import { Code } from '@domain/code'; +import { TicketService } from '@service/ticketservice'; @Component({ selector: 'routing-doc', @@ -11,8 +11,8 @@ import { TicketService } from '../../service/ticketservice';

        Example below uses nested routes with Steps.

        - - + +
        @@ -58,28 +58,31 @@ export class RoutingDoc implements OnInit { } code: Code = { basic: `
        - - + +
        `, html: `
        - - + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Subscription } from 'rxjs'; +import { StepsModule } from 'primeng/steps'; +import { ToastModule } from 'primeng/toast'; @Component({ selector: 'steps-routing-demo', templateUrl: './steps-routing-demo.html', - providers: [MessageService] + standalone: true, + imports: [StepsModule, ToastModule], + providers: [MessageService, TicketService] }) export class StepsRoutingDemo implements OnInit { items: MenuItem[]; @@ -140,7 +143,7 @@ export class StepsRoutingDemo implements OnInit { path: 'src/app/demo/paymentdemo.ts', name: 'PaymentDemo', content: `import { Component, OnInit } from '@angular/core'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Router } from '@angular/router'; @Component({ @@ -206,7 +209,7 @@ export class PaymentDemo implements OnInit { path: 'src/app/demo/personaldemo.ts', name: 'PersonalDemo', content: `import { Component, OnInit } from '@angular/core'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Router } from '@angular/router'; @Component({ @@ -278,7 +281,7 @@ export class PersonalDemo implements OnInit { path: 'src/app/demo/seatdemo.ts', name: 'SeatDemo', content: `import { Component, OnInit } from '@angular/core'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Router } from '@angular/router'; @Component({ @@ -367,7 +370,7 @@ export class SeatDemo implements OnInit { path: 'src/app/demo/confirmationdemo.ts', name: 'ConfirmationDemo', content: `import { Component, OnInit } from '@angular/core'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Router } from '@angular/router'; @Component({ diff --git a/src/app/showcase/doc/steps/seatdemo.ts b/src/app/showcase/doc/steps/seatdemo.ts index 7f417356755..d88c01e4377 100644 --- a/src/app/showcase/doc/steps/seatdemo.ts +++ b/src/app/showcase/doc/steps/seatdemo.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { Router } from '@angular/router'; @Component({ diff --git a/src/app/showcase/doc/steps/stepsdoc.module.ts b/src/app/showcase/doc/steps/stepsdoc.module.ts index c0b4dbf2bac..266ed0614f5 100644 --- a/src/app/showcase/doc/steps/stepsdoc.module.ts +++ b/src/app/showcase/doc/steps/stepsdoc.module.ts @@ -8,8 +8,8 @@ import { CheckboxModule } from 'primeng/checkbox'; import { StepsModule } from 'primeng/steps'; import { ToastModule } from 'primeng/toast'; import { CardModule } from 'primeng/card'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ConfirmationDemo } from './confirmationdemo'; import { ImportDoc } from './importdoc'; @@ -19,13 +19,14 @@ import { PersonalDemo } from './personaldemo'; import { RoutingDoc } from './routingdoc'; import { SeatDemo } from './seatdemo'; import { StyleDoc } from './styledoc'; -import { TicketService } from '../../service/ticketservice'; +import { TicketService } from '@service/ticketservice'; import { AccessibilityDoc } from './accessibilitydoc'; import { ButtonModule } from 'primeng/button'; +import { ControlledDoc } from './controlleddoc'; @NgModule({ imports: [CommonModule, AppCodeModule, StepsModule, ToastModule, AppDocModule, FormsModule, DropdownModule, InputTextModule, InputMaskModule, CheckboxModule, CardModule, ButtonModule], - declarations: [BasicDoc, ImportDoc, StyleDoc, InteractiveDoc, ConfirmationDemo, PaymentDemo, PersonalDemo, SeatDemo, RoutingDoc, AccessibilityDoc], + declarations: [BasicDoc, ImportDoc, StyleDoc, InteractiveDoc, ConfirmationDemo, PaymentDemo, PersonalDemo, SeatDemo, RoutingDoc, ControlledDoc, AccessibilityDoc], exports: [AppDocModule], providers: [TicketService] }) diff --git a/src/app/showcase/doc/styleclass/animationdoc.ts b/src/app/showcase/doc/styleclass/animationdoc.ts index 807233f001c..64d8f4d228e 100644 --- a/src/app/showcase/doc/styleclass/animationdoc.ts +++ b/src/app/showcase/doc/styleclass/animationdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'animation-doc', diff --git a/src/app/showcase/doc/styleclass/importdoc.ts b/src/app/showcase/doc/styleclass/importdoc.ts index 850b6d581e4..73e7b161bcf 100644 --- a/src/app/showcase/doc/styleclass/importdoc.ts +++ b/src/app/showcase/doc/styleclass/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/styleclass/styleclassdoc.module.ts b/src/app/showcase/doc/styleclass/styleclassdoc.module.ts index 3fa29264669..4dd4865cb79 100644 --- a/src/app/showcase/doc/styleclass/styleclassdoc.module.ts +++ b/src/app/showcase/doc/styleclass/styleclassdoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ToggleClassDoc } from './toggleclassdoc'; import { ImportDoc } from './importdoc'; import { StyleClassModule } from 'primeng/styleclass'; diff --git a/src/app/showcase/doc/styleclass/toggleclassdoc.ts b/src/app/showcase/doc/styleclass/toggleclassdoc.ts index c304842379d..e14e61be053 100644 --- a/src/app/showcase/doc/styleclass/toggleclassdoc.ts +++ b/src/app/showcase/doc/styleclass/toggleclassdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'toggle-class-doc', diff --git a/src/app/showcase/doc/table/basicdoc.ts b/src/app/showcase/doc/table/basicdoc.ts index a3117e2c5e5..afc59a0279d 100644 --- a/src/app/showcase/doc/table/basicdoc.ts +++ b/src/app/showcase/doc/table/basicdoc.ts @@ -1,8 +1,7 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; - +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'basic-doc', template: ` @@ -64,8 +63,8 @@ export class BasicDoc { `, - html: ` -
        + + html: `
        @@ -85,15 +84,20 @@ export class BasicDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-basic-demo', - templateUrl: 'table-basic-demo.html' + templateUrl: 'table-basic-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) + export class TableBasicDemo implements OnInit { products!: Product[]; diff --git a/src/app/showcase/doc/table/celleditdoc.ts b/src/app/showcase/doc/table/celleditdoc.ts index 6b3f9dae977..1f4777bbb15 100644 --- a/src/app/showcase/doc/table/celleditdoc.ts +++ b/src/app/showcase/doc/table/celleditdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'cell-edit-doc', @@ -82,69 +82,23 @@ export class CellEditDoc { } code: Code = { - basic: ` - - - Code - Name - Inventory Status - Price - - - - - - - - - - - {{ product.code }} - - - - - - - - - - {{ product.name }} - - - - - - - - - - {{ product.inventoryStatus }} - - - - - - - - - - {{ product.price | currency: 'USD' }} - - - - - -`, - html: ` -
        - + basic: ` - Code - Name - Inventory Status - Price + + Code + + + Name + + + Inventory Status + + + Price + @@ -152,7 +106,10 @@ export class CellEditDoc { - + {{ product.code }} @@ -162,7 +119,11 @@ export class CellEditDoc { - + {{ product.name }} @@ -172,7 +133,9 @@ export class CellEditDoc { - + {{ product.inventoryStatus }} @@ -182,7 +145,9 @@ export class CellEditDoc { - + {{ product.price | currency: 'USD' }} @@ -191,16 +156,97 @@ export class CellEditDoc { +`, + html: `
        + + + + + Code + + + Name + + + Inventory Status + + + Price + + + + + + + + + + + + {{ product.code }} + + + + + + + + + + {{ product.name }} + + + + + + + + + + {{ product.inventoryStatus }} + + + + + + + + + + {{ product.price | currency: 'USD' }} + + + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'table-cell-edit-demo', - templateUrl: 'table-cell-edit-demo.html' + templateUrl: 'table-cell-edit-demo.html', + standalone: true, + imports: [TableModule, InputTextModule, CommonModule], + providers: [ProductService] }) export class TableCellEditDemo implements OnInit { products!: Product[]; diff --git a/src/app/showcase/doc/table/checkboxselectiondoc.ts b/src/app/showcase/doc/table/checkboxselectiondoc.ts index 531fc34e2e5..ca806606b3c 100644 --- a/src/app/showcase/doc/table/checkboxselectiondoc.ts +++ b/src/app/showcase/doc/table/checkboxselectiondoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'checkbox-selection-doc', @@ -14,7 +14,7 @@ import { ProductService } from '../../service/productservice'; - + Code Name @@ -25,7 +25,7 @@ import { ProductService } from '../../service/productservice'; - + {{ product.code }} {{ product.name }} @@ -54,38 +54,14 @@ export class CheckboxSelectionDoc { } code: Code = { - basic: ` - - - - - - Code - Name - Category - Quantity - - - - - - - - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - - -`, - html: ` -
        - + basic: ` - - - + Code Name Category @@ -95,7 +71,7 @@ export class CheckboxSelectionDoc { - + {{product.code}} {{product.name}} @@ -103,16 +79,48 @@ export class CheckboxSelectionDoc { {{product.quantity}} +`, + html: `
        + + + + + Code + Name + Category + Quantity + + + + + + + + {{product.code}} + {{product.name}} + {{product.category}} + {{product.quantity}} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-checkbox-selection-demo', - templateUrl: 'table-checkbox-selection-demo.html' + templateUrl: 'table-checkbox-selection-demo.html', + standalone: true, + imports: [TableModule, FormsModule, CommonModule], + providers: [ProductService] }) export class TableCheckboxSelectionDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/columngroupdoc.ts b/src/app/showcase/doc/table/columngroupdoc.ts index 498f082a0be..ed970295ef4 100644 --- a/src/app/showcase/doc/table/columngroupdoc.ts +++ b/src/app/showcase/doc/table/columngroupdoc.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'column-group-doc', @@ -129,8 +129,7 @@ export class ColumnGroupDoc {         `, - html: ` -
        + html: `
        @@ -166,12 +165,15 @@ export class ColumnGroupDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-column-group-demo', - templateUrl: 'table-column-group-demo.html' + templateUrl: 'table-column-group-demo.html', + standalone: true, + imports: [TableModule, CommonModule] }) export class TableColumnGroupDemo implements OnInit { sales!: any[]; diff --git a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts index ed9b29e73e6..3182c46de68 100644 --- a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts +++ b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'column-resize-expand-mode-doc', @@ -46,27 +46,12 @@ export class ColumnResizeExpandModeDoc { } code: Code = { - basic: ` - - - Code - Name - Category - Quantity - - - - - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - - -`, - html: ` -
        - + basic: ` Code @@ -83,16 +68,43 @@ export class ColumnResizeExpandModeDoc { {{product.quantity}} +`, + html: `
        + + + + Code + Name + Category + Quantity + + + + + {{product.code}} + {{product.name}} + {{product.category}} + {{product.quantity}} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; @Component({ selector: 'table-column-resize-expand-mode-demo', - templateUrl: 'table-column-resize-expand-mode-demo.html' + templateUrl: 'table-column-resize-expand-mode-demo.html', + standalone: true, + imports: [TableModule], + providers: [ProductService] }) export class TableColumnResizeExpandModeDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/columnresizefitmodedoc.ts b/src/app/showcase/doc/table/columnresizefitmodedoc.ts index d1a99c7db6c..0da94df7bdf 100644 --- a/src/app/showcase/doc/table/columnresizefitmodedoc.ts +++ b/src/app/showcase/doc/table/columnresizefitmodedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'column-resize-fit-mode-doc', @@ -46,27 +46,11 @@ export class ColumnResizeFitModeDoc { } code: Code = { - basic: ` - - - Code - Name - Category - Quantity - - - - - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - - -`, - html: ` -
        - + basic: ` Code @@ -83,16 +67,42 @@ export class ColumnResizeFitModeDoc { {{product.quantity}} +`, + html: `
        + + + + Code + Name + Category + Quantity + + + + + {{product.code}} + {{product.name}} + {{product.category}} + {{product.quantity}} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; @Component({ selector: 'table-column-resize-fit-mode-demo', - templateUrl: 'table-column-resize-fit-mode-demo.html' + templateUrl: 'table-column-resize-fit-mode-demo.html', + standalone: true, + imports: [TableModule], + providers: [ProductService] }) export class TableColumnResizeFitModeDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts index 9b41a32d585..cf1b113923f 100644 --- a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts +++ b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'column-resize-scrollable-mode-doc', @@ -43,51 +43,66 @@ export class ColumnResizeScrollableModeDoc { } code: Code = { - basic: ` - - - Name - Country - Company - Representative - - - - - {{customer.name}} - {{customer.country.name}} - {{customer.company}} - {{customer.representative.name}} - - + basic: ` + + + Name + Country + Company + Representative + + + + + {{customer.name}} + {{customer.country.name}} + {{customer.company}} + {{customer.representative.name}} + + `, - html: ` - - - - Name - Country - Company - Representative - - - - - {{customer.name}} - {{customer.country.name}} - {{customer.company}} - {{customer.representative.name}} - - + html: ` + + + Name + Country + Company + Representative + + + + + {{customer.name}} + {{customer.country.name}} + {{customer.company}} + {{customer.representative.name}} + + `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { HttpClientModule } from '@angular/common/http'; @Component({ selector: 'table-column-resize-scrollable-mode-demo', - templateUrl: 'table-column-resize-scrollable-mode-demo.html' + templateUrl: 'table-column-resize-scrollable-mode-demo.html', + standalone: true, + imports: [TableModule, HttpClientModule], + providers: [CustomerService] }) export class TableColumnResizeScrollableModeDemo implements OnInit{ customers!: Customer[]; diff --git a/src/app/showcase/doc/table/columnselectiondoc.ts b/src/app/showcase/doc/table/columnselectiondoc.ts index a31c438a7ef..6f28c4215eb 100644 --- a/src/app/showcase/doc/table/columnselectiondoc.ts +++ b/src/app/showcase/doc/table/columnselectiondoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'column-selection-doc', @@ -11,7 +11,7 @@ import { ProductService } from '../../service/productservice';
        - + @@ -59,7 +59,7 @@ export class ColumnSelectionDoc { } code: Code = { - basic: ` + basic: ` @@ -77,14 +77,19 @@ export class ColumnSelectionDoc { {{ product.category }} {{ product.quantity }} - + `, - html: ` -
        - + html: `
        + @@ -102,22 +107,33 @@ export class ColumnSelectionDoc { {{ product.category }} {{ product.quantity }} - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; import { MessageService } from 'primeng/api'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; +import { ToastModule } from 'primeng/toast'; +import { TableModule } from 'primeng/table'; @Component({ selector: 'table-column-selection-demo', templateUrl: 'table-column-selection-demo.html', - providers: [MessageService] + standalone: true, + imports: [ButtonModule, RippleModule, ToastModule, TableModule], + providers: [MessageService, ProductService] }) export class TableColumnSelectionDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts index 595a7bd31f4..01340ae52bc 100644 --- a/src/app/showcase/doc/table/columntoggledoc.ts +++ b/src/app/showcase/doc/table/columntoggledoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; interface Column { field: string; @@ -16,7 +16,7 @@ interface Column {
        - + @@ -65,34 +65,19 @@ export class ColumnToggleDoc { } code: Code = { - basic: ` - - - - - - Code - - {{col.header}} - - - - - - {{product.code}} - - {{product[col.field]}} - - - -`, - html: ` -
        - + basic: ` - + @@ -110,21 +95,57 @@ export class ColumnToggleDoc { +`, + html: `
        + + + + + + + Code + + {{col.header}} + + + + + + {{product.code}} + + {{product[col.field]}} + + +
        `, - typescript: ` -import { Component, OnInit, Input } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit, ChangeDetectorRef} from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { MultiSelectModule } from 'primeng/multiselect'; +import { CommonModule } from '@angular/common'; interface Column { field: string; header: string; } - @Component({ selector: 'table-column-toggle-demo', - templateUrl: 'table-column-toggle-demo.html' + templateUrl: 'table-column-toggle-demo.html', + standalone: true, + imports: [TableModule, MultiSelectModule, CommonModule], + providers: [ProductService] }) export class TableColumnToggleDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/contextmenudoc.ts b/src/app/showcase/doc/table/contextmenudoc.ts index a7ee92bad37..4390336f57b 100644 --- a/src/app/showcase/doc/table/contextmenudoc.ts +++ b/src/app/showcase/doc/table/contextmenudoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'context-menu-doc', @@ -15,7 +15,7 @@ import { ProductService } from '../../service/productservice';
        - + @@ -50,7 +50,7 @@ export class ContextMenuDoc { constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {} loadDemoData() { - this.productService.getProductsSmall().then((data) => { + this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); }); @@ -72,29 +72,13 @@ export class ContextMenuDoc { } code: Code = { - basic: ` - - - - Code - Name - Category - Price - - - - - {{product.code}} - {{product.name}} - {{product.category}} - {{product.price | currency: 'USD'}} - - -`, - html: ` -
        - - + basic: ` + Code @@ -111,18 +95,48 @@ export class ContextMenuDoc { {{product.price | currency: 'USD'}} +`, + html: `
        + + + + + Code + Name + Category + Price + + + + + {{product.code}} + {{product.name}} + {{product.category}} + {{product.price | currency: 'USD'}} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MessageService, MenuItem } from 'primeng/api'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { ContextMenuModule } from 'primeng/contextmenu'; +import { HttpClientModule } from '@angular/common/http'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-context-menu-demo', templateUrl: 'table-context-menu-demo.html', - providers: [MessageService] + standalone: true, + imports: [TableModule, ContextMenuModule, HttpClientModule, CommonModule], + providers: [MessageService, ProductService] }) export class TableContextMenuDemo implements OnInit{ products!: Product[]; @@ -134,7 +148,7 @@ export class TableContextMenuDemo implements OnInit{ constructor(private productService: ProductService, private messageService: MessageService) {} ngOnInit() { - this.productService.getProductsSmall().then((data) => (this.products = data)); + this.productService.getProductsMini().then((data) => (this.products = data)); this.items = [ { label: 'View', icon: 'pi pi-fw pi-search', command: () => this.viewProduct(this.selectedProduct) }, diff --git a/src/app/showcase/doc/table/controlledselectiondoc.ts b/src/app/showcase/doc/table/controlledselectiondoc.ts index c222793959b..8caf427c7d9 100644 --- a/src/app/showcase/doc/table/controlledselectiondoc.ts +++ b/src/app/showcase/doc/table/controlledselectiondoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'controlled-selection-doc', @@ -117,8 +117,8 @@ export class ControlledSelectionDoc {
        `, typescript: ` import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'table-controlled-selection-demo', diff --git a/src/app/showcase/doc/table/customersdoc.ts b/src/app/showcase/doc/table/customersdoc.ts index 3e51e80b810..4d1c856deaa 100644 --- a/src/app/showcase/doc/table/customersdoc.ts +++ b/src/app/showcase/doc/table/customersdoc.ts @@ -1,7 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer, Representative } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer, Representative } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { Table } from 'primeng/table'; @Component({ selector: 'customers-doc', @@ -26,37 +27,39 @@ import { CustomerService } from '../../service/customerservice'; [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']" > -
        - List of Customers - - - - +
        + + + + + + +
        - +
        Name - - + +
        Country - - + +
        Agent - +
        @@ -64,7 +67,7 @@ import { CustomerService } from '../../service/customerservice';
        - +
        @@ -79,26 +82,26 @@ import { CustomerService } from '../../service/customerservice';
        Date - - + +
        Balance - - + +
        Status - + - + - + @@ -108,10 +111,10 @@ import { CustomerService } from '../../service/customerservice';
        Activity - + - +
        {{ activityValues[0] }} {{ activityValues[1] }} @@ -126,7 +129,7 @@ import { CustomerService } from '../../service/customerservice'; - + Name @@ -152,14 +155,14 @@ import { CustomerService } from '../../service/customerservice'; Status - + Activity - + - + @@ -187,6 +190,8 @@ export class CustomersDoc { activityValues: number[] = [0, 100]; + searchValue: string | undefined; + constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} loadDemoData() { @@ -240,6 +245,11 @@ export class CustomersDoc { } } + clear(dt: Table) { + this.searchValue = ''; + dt.reset(); + } + code: Code = { basic: ` -
        - List of Customers - - - - +
        + + + + + + +
        - +
        Name - - + +
        Country - - + +
        Agent - +
        @@ -295,7 +307,7 @@ export class CustomersDoc {
        - +
        @@ -310,26 +322,26 @@ export class CustomersDoc {
        Date - - + +
        Balance - - + +
        Status - + - + - + @@ -339,10 +351,10 @@ export class CustomersDoc {
        Activity - + - +
        {{ activityValues[0] }} {{ activityValues[1] }} @@ -357,7 +369,7 @@ export class CustomersDoc { - + Name @@ -375,22 +387,22 @@ export class CustomersDoc { Date - {{ customer.date | date: 'MM/dd/yyyy' }} + {{ customer.date | date : 'MM/dd/yyyy' }} Balance - {{ customer.balance | currency: 'USD':'symbol' }} + {{ customer.balance | currency : 'USD' : 'symbol' }} Status - + Activity - + - + @@ -400,8 +412,7 @@ export class CustomersDoc { `, - html: ` -
        + html: `
        - -
        - List of Customers - + +
        + + + - - -
        -         - - - - - - -
        - Name - - -
        - - -
        - Country - - -
        - - -
        - Agent - - - -
        - Agent Picker -
        -         - - - -
        - - {{ option.name }} -
        -         -         -         -         -
        - - -
        - Date - - -
        - - -
        - Balance - - -
        - - -
        - Status - - - - - - - - - - -
        - - -
        - Activity - - - - -
        - {{ activityValues[0] }} - {{ activityValues[1] }} -
        -         -         -
        - - - -         - - - - - - - Name - {{ customer.name }} - - - Country - - {{ customer.country.name }} - - - Representative - - {{ customer.representative.name }} - - - Date - {{ customer.date | date: 'MM/dd/yyyy' }} - - - Balance - {{ customer.balance | currency: 'USD':'symbol' }} - - - Status - - - - Activity - - - - - - - - - - No customers found. - - + + + +
        +         + + + + + + +
        + Name + + +
        + + +
        + Country + + +
        + + +
        + Agent + + + +
        + Agent Picker +
        +         + + + +
        + + {{ option.name }} +
        +         +         +         +         +
        + + +
        + Date + + +
        + + +
        + Balance + + +
        + + +
        + Status + + + + + + + + + + +
        + + +
        + Activity + + + + +
        + {{ activityValues[0] }} + {{ activityValues[1] }} +
        +         +         +
        + + + +         + + + + + + + Name + {{ customer.name }} + + + Country + + {{ customer.country.name }} + + + Representative + + {{ customer.representative.name }} + + + Date + {{ customer.date | date : 'MM/dd/yyyy' }} + + + Balance + {{ customer.balance | currency : 'USD' : 'symbol' }} + + + Status + + + + Activity + + + + + + + + + + No customers found. + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer, Representative } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer, Representative } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { TagModule } from 'primeng/tag'; +import { ButtonModule } from 'primeng/button'; +import { InputIconModule } from 'primeng/inputicon'; +import { IconFieldModule } from 'primeng/iconfield'; +import { HttpClientModule } from '@angular/common/http'; +import { CommonModule } from '@angular/common'; +import { MultiSelectModule } from 'primeng/multiselect'; +import { InputTextModule } from 'primeng/inputtext'; +import { DropdownModule } from 'primeng/dropdown'; +import { SliderModule } from 'primeng/slider'; +import { ProgressBarModule } from 'primeng/progressbar'; @Component({ selector: 'table-customers-demo', templateUrl: 'table-customers-demo.html', - styleUrls: ['table-customers-demo.scss'] + standalone: true, + imports: [TableModule, TagModule, ButtonModule,IconFieldModule, InputIconModule, HttpClientModule, + CommonModule, MultiSelectModule, InputTextModule, DropdownModule, SliderModule, ProgressBarModule ], + providers: [CustomerService], + styles: [ + \` + :host ::ng-deep { + .p-paginator { + .p-paginator-current { + margin-left: auto; + } + } + + .p-progressbar { + height: .5rem; + background-color: #D8DADC; + + .p-progressbar-value { + background-color: #607D8B; + } + } + + .table-header { + display: flex; + justify-content: space-between; + } + + .p-calendar .p-datepicker { + min-width: 25rem; + + td { + font-weight: 400; + } + } + + .p-datatable.p-datatable-customers { + .p-datatable-header { + padding: 1rem; + text-align: left; + font-size: 1.5rem; + } + + .p-paginator { + padding: 1rem; + } + + .p-datatable-thead > tr > th { + text-align: left; + } + + .p-datatable-tbody > tr > td { + cursor: auto; + } + + .p-dropdown-label:not(.p-placeholder) { + text-transform: uppercase; + } + } + + .p-w-100 { + width: 100%; + } + + /* Responsive */ + .p-datatable-customers .p-datatable-tbody > tr > td .p-column-title { + display: none; + } + } + + @media screen and (max-width: 960px) { + :host ::ng-deep { + .p-datatable { + &.p-datatable-customers { + .p-datatable-thead > tr > th, + .p-datatable-tfoot > tr > td { + display: none !important; + } + + .p-datatable-tbody > tr { + border-bottom: 1px solid var(--layer-2); + + > td { + text-align: left; + width: 100%; + display: flex; + align-items: center; + border: 0 none; + + .p-column-title { + min-width: 30%; + display: inline-block; + font-weight: bold; + } + + p-progressbar { + width: 100%; + } + + &:last-child { + border-bottom: 1px solid var(--surface-d); + } + } + } + } + } + } + } + \` + ], }) export class TableCustomersDemo implements OnInit{ customers!: Customer[]; @@ -656,108 +788,7 @@ export class TableCustomersDemo implements OnInit{ balance: 70663 }, ...`, - scss: ` -:host ::ng-deep { - .p-paginator { - .p-paginator-current { - margin-left: auto; - } - } - - .p-progressbar { - height: .5rem; - background-color: #D8DADC; - - .p-progressbar-value { - background-color: #607D8B; - } - } - - .table-header { - display: flex; - justify-content: space-between; - } - - .p-calendar .p-datepicker { - min-width: 25rem; - - td { - font-weight: 400; - } - } - - .p-datatable.p-datatable-customers { - .p-datatable-header { - padding: 1rem; - text-align: left; - font-size: 1.5rem; - } - - .p-paginator { - padding: 1rem; - } - - .p-datatable-thead > tr > th { - text-align: left; - } - - .p-datatable-tbody > tr > td { - cursor: auto; - } - - .p-dropdown-label:not(.p-placeholder) { - text-transform: uppercase; - } - } - - .p-w-100 { - width: 100%; - } - - /* Responsive */ - .p-datatable-customers .p-datatable-tbody > tr > td .p-column-title { - display: none; - } -} - -@media screen and (max-width: 960px) { - :host ::ng-deep { - .p-datatable { - &.p-datatable-customers { - .p-datatable-thead > tr > th, - .p-datatable-tfoot > tr > td { - display: none !important; - } - - .p-datatable-tbody > tr { - border-bottom: 1px solid var(--layer-2); - - > td { - text-align: left; - width: 100%; - display: flex; - align-items: center; - border: 0 none; - - .p-column-title { - min-width: 30%; - display: inline-block; - font-weight: bold; - } - - p-progressbar { - width: 100%; - } - &:last-child { - border-bottom: 1px solid var(--surface-d); - } - } - } - } - } - } -}`, service: ['CustomerService'] }; diff --git a/src/app/showcase/doc/table/customsortdoc.ts b/src/app/showcase/doc/table/customsortdoc.ts index a40c58fb1b7..7c56b715a9a 100644 --- a/src/app/showcase/doc/table/customsortdoc.ts +++ b/src/app/showcase/doc/table/customsortdoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { SortEvent } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'custom-sort-doc', @@ -113,8 +113,8 @@ export class CustomSortDoc {
        `, typescript: ` import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; import { SortEvent } from 'primeng/api'; @Component({ diff --git a/src/app/showcase/doc/table/dynamicdoc.ts b/src/app/showcase/doc/table/dynamicdoc.ts index f8988ad6fea..5b3696a71aa 100644 --- a/src/app/showcase/doc/table/dynamicdoc.ts +++ b/src/app/showcase/doc/table/dynamicdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; interface Column { field: string; @@ -73,8 +73,7 @@ export class DynamicDoc { `, - html: ` -
        + html: `
        @@ -92,10 +91,11 @@ export class DynamicDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -104,7 +104,10 @@ interface Column { @Component({ selector: 'table-dynamic-demo', - templateUrl: 'table-dynamic-demo.html' + templateUrl: 'table-dynamic-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) export class TableDynamicDemo { products!: Product[]; diff --git a/src/app/showcase/doc/table/expandablerowgroupdoc.ts b/src/app/showcase/doc/table/expandablerowgroupdoc.ts index f053100861b..e139e52a189 100644 --- a/src/app/showcase/doc/table/expandablerowgroupdoc.ts +++ b/src/app/showcase/doc/table/expandablerowgroupdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'expandable-row-group-doc', @@ -48,7 +48,7 @@ import { CustomerService } from '../../service/customerservice'; {{ customer.company }} - + {{ customer.date }} @@ -107,55 +107,14 @@ export class ExpandableRowGroupDoc { } code: Code = { - basic: ` - - - Name - Country - Company - Status - Date - - - - - - - - {{customer.representative.name}} - - - - - - Total Customers - {{calculateCustomerTotal(customer.representative.name)}} - - - - - - {{customer.name}} - - - - {{customer.country.name}} - - - {{customer.company}} - - - - - - {{customer.date}} - - - -`, - html: ` -
        - + basic: ` Name @@ -168,8 +127,19 @@ export class ExpandableRowGroupDoc { - - + + {{customer.representative.name}} @@ -186,31 +156,124 @@ export class ExpandableRowGroupDoc { {{customer.name}} - + {{customer.country.name}} {{customer.company}} - + {{customer.date}} +`, + html: `
        + + + + Name + Country + Company + Status + Date + + + + + + + + {{customer.representative.name}} + + + + + + Total Customers + {{calculateCustomerTotal(customer.representative.name)}} + + + + + + {{customer.name}} + + + + {{customer.country.name}} + + + {{customer.company}} + + + + + + {{customer.date}} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { HttpClientModule } from '@angular/common/http'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'table-expandable-row-group-demo', templateUrl: 'table-expandable-row-group-demo.html', - styleUrls: ['table-expandable-row-group-demo.scss'] + standalone: true, + imports: [TableModule, HttpClientModule, ButtonModule, RippleModule, TagModule], + providers: [CustomerService], + styles: [ + \`:host ::ng-deep .p-rowgroup-footer td { + font-weight: 700; + } + + :host ::ng-deep .p-rowgroup-header { + span { + font-weight: 700; + } + + .p-row-toggler { + vertical-align: middle; + margin-right: .25rem; + } + }\` + ], }) export class TableExpandableRowGroupDemo implements OnInit{ customers!: Customer[]; diff --git a/src/app/showcase/doc/table/exportdoc.ts b/src/app/showcase/doc/table/exportdoc.ts index e0b5919e441..60f50fb4ee0 100644 --- a/src/app/showcase/doc/table/exportdoc.ts +++ b/src/app/showcase/doc/table/exportdoc.ts @@ -1,8 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import * as FileSaver from 'file-saver'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; interface Column { field: string; @@ -18,21 +17,14 @@ interface ExportColumn { @Component({ selector: 'export-doc', template: ` -

        - Table can export its data in CSV format using the built-in exportCSV() function. By default, all data is exported. If you'd like to export only the selection then pass a config object with selectionOnly property as true. - Note that columns should be dynamic for export functionality to work, and column objects must define field/header properties. -

        -

        PDF and EXCEL export are also available using 3rd party libraries such as jspdf. Example below demonstrates how to implement all three export options.

        +

        Table can export its data to CSV format.
        -
        - - - - +
        +
        @@ -82,68 +74,21 @@ export class ExportDoc { this.exportColumns = this.cols.map((col) => ({ title: col.header, dataKey: col.field })); } - exportPdf() { - import('jspdf').then((jsPDF) => { - import('jspdf-autotable').then((x) => { - const doc = new jsPDF.default('p', 'px', 'a4'); - (doc as any).autoTable(this.exportColumns, this.products); - doc.save('products.pdf'); - }); - }); - } - - exportExcel() { - import('xlsx').then((xlsx) => { - const worksheet = xlsx.utils.json_to_sheet(this.products); - const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] }; - const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' }); - this.saveAsExcelFile(excelBuffer, 'products'); - }); - } - - saveAsExcelFile(buffer: any, fileName: string): void { - let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; - let EXCEL_EXTENSION = '.xlsx'; - const data: Blob = new Blob([buffer], { - type: EXCEL_TYPE - }); - FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION); - } - code: Code = { - basic: ` - -
        - - - - -
        -         - - - - {{ col.header }} - - - - - - - {{ rowData[col.field] }} - - - -        `, - html: ` -
        - + basic: ` -
        - - - - +
        +
        @@ -160,13 +105,46 @@ export class ExportDoc { +`, + html: `
        + + +
        + +
        +         + + + + {{ col.header }} + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import * as FileSaver from 'file-saver'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; +import { ButtonModule } from 'primeng/button'; interface Column { field: string; @@ -181,7 +159,10 @@ interface ExportColumn { @Component({ selector: 'table-export-demo', - templateUrl: 'table-export-demo.html' + templateUrl: 'table-export-demo.html', + standalone: true, + imports: [TableModule, CommonModule, ButtonModule], + providers: [ProductService] }) export class TableExportDemo implements OnInit{ products!: Product[]; @@ -209,33 +190,6 @@ export class TableExportDemo implements OnInit{ this.exportColumns = this.cols.map((col) => ({ title: col.header, dataKey: col.field })); } - exportPdf() { - import('jspdf').then((jsPDF) => { - import('jspdf-autotable').then((x) => { - const doc = new jsPDF.default('p', 'px', 'a4'); - (doc as any).autoTable(this.exportColumns, this.products); - doc.save('products.pdf'); - }); - }); - } - - exportExcel() { - import('xlsx').then((xlsx) => { - const worksheet = xlsx.utils.json_to_sheet(this.products); - const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] }; - const excelBuffer: any = xlsx.write(workbook, { bookType: 'xlsx', type: 'array' }); - this.saveAsExcelFile(excelBuffer, 'products'); - }); - } - - saveAsExcelFile(buffer: any, fileName: string): void { - let EXCEL_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'; - let EXCEL_EXTENSION = '.xlsx'; - const data: Blob = new Blob([buffer], { - type: EXCEL_TYPE - }); - FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION); - } }`, data: `{ id: '1000', diff --git a/src/app/showcase/doc/table/filteradvanceddoc.ts b/src/app/showcase/doc/table/filteradvanceddoc.ts new file mode 100644 index 00000000000..0f33ebac7ef --- /dev/null +++ b/src/app/showcase/doc/table/filteradvanceddoc.ts @@ -0,0 +1,645 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { Table } from 'primeng/table'; +import { Code } from '../../domain/code'; +import { Customer, Representative } from '../../domain/customer'; +import { CustomerService } from '../../service/customerservice'; + +@Component({ + selector: 'filter-advanced-doc', + template: ` +

        Filters are displayed in an overlay.

        +         + +
        + + +
        + + + + + +
        +         + + + +
        + Name + +
        + + +
        + Country + +
        + + +
        + Agent + + +
        + Agent Picker +
        +         + + + +
        + + {{ option.name }} +
        +         +         +         +         +
        + + +
        + Date + +
        + + +
        + Balance + +
        + + +
        + Status + + + + + + + + + +
        + + +
        + Activity + + + +
        + 0 + {{ value[0] }} - {{ value[1] }} +
        +         +         +
        + + +
        + Verified + +
        + + +         + + + + {{ customer.name }} + + + + {{ customer.country.name }} + + + + {{ customer.representative.name }} + + + {{ customer.date | date : 'MM/dd/yyyy' }} + + + {{ customer.balance | currency : 'USD' : 'symbol' }} + + + + + + + + + + + + + + + No customers found. + + +         +
        +         + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class FilterAdvancedDoc { + customers!: Customer[]; + + representatives!: Representative[]; + + statuses!: any[]; + + loading: boolean = true; + + searchValue: string | undefined; + + activityValues: number[] = [0, 100]; + + constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} + + loadDemoData() { + this.customerService.getCustomersLarge().then((customers) => { + this.customers = customers; + this.loading = false; + + this.customers.forEach((customer) => (customer.date = new Date(customer.date))); + this.cd.markForCheck(); + }); + + this.representatives = [ + { name: 'Amy Elsner', image: 'amyelsner.png' }, + { name: 'Anna Fali', image: 'annafali.png' }, + { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, + { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, + { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, + { name: 'Onyama Limba', image: 'onyamalimba.png' }, + { name: 'Stephen Shaw', image: 'stephenshaw.png' }, + { name: 'Xuxue Feng', image: 'xuxuefeng.png' } + ]; + + this.statuses = [ + { label: 'Unqualified', value: 'unqualified' }, + { label: 'Qualified', value: 'qualified' }, + { label: 'New', value: 'new' }, + { label: 'Negotiation', value: 'negotiation' }, + { label: 'Renewal', value: 'renewal' }, + { label: 'Proposal', value: 'proposal' } + ]; + } + + clear(table: Table) { + table.clear(); + this.searchValue = ''; + } + + getSeverity(status: string) { + switch (status) { + case 'unqualified': + return 'danger'; + + case 'qualified': + return 'success'; + + case 'new': + return 'info'; + + case 'negotiation': + return 'warning'; + + case 'renewal': + return null; + } + } + + code: Code = { + basic: ` + +
        + + + + + +
        +         + + + +
        + Name + +
        + + +
        + Country + +
        + + +
        + Agent + + +
        + Agent Picker +
        +         + + + +
        + + {{ option.name }} +
        +         +         +         +         +
        + + +
        + Date + +
        + + +
        + Balance + +
        + + +
        + Status + + + + + + + + + +
        + + +
        + Activity + + + +
        + {{ activityValues[0] }} + {{ activityValues[1] }} +
        +         +         +
        + + +
        + Verified + +
        + + +         + + + + {{ customer.name }} + + + + {{ customer.country.name }} + + + + {{ customer.representative.name }} + + + {{ customer.date | date: 'MM/dd/yyyy' }} + + + {{ customer.balance | currency: 'USD':'symbol' }} + + + + + + + + + + + + + + + No customers found. + + +        `, + html: `
        + + +
        + + + + + +
        +         + + + +
        + Name + +
        + + +
        + Country + +
        + + +
        + Agent + + +
        + Agent Picker +
        +         + + + +
        + + {{ option.name }} +
        +         +         +         +         +
        + + +
        + Date + +
        + + +
        + Balance + +
        + + +
        + Status + + + + + + + + + +
        + + +
        + Activity + + + +
        + {{ activityValues[0] }} + {{ activityValues[1] }} +
        +         +         +
        + + +
        + Verified + +
        + + +         + + + + {{ customer.name }} + + + + {{ customer.country.name }} + + + + {{ customer.representative.name }} + + + {{ customer.date | date: 'MM/dd/yyyy' }} + + + {{ customer.balance | currency: 'USD':'symbol' }} + + + + + + + + + + + + + + + No customers found. + + +         +
        `, + typescript: `import { Component, OnInit } from '@angular/core'; +import { Table } from 'primeng/table'; +import { Customer, Representative } from '../domain/customer'; +import { CustomerService } from '../service/customerservice'; + +@Component({ + selector: 'table-filter-advanced-demo', + templateUrl: 'table-filter-advanced-demo.html', + standalone: true, + imports: [TableModule, HttpClientModule, CommonModule, InputTextModule, TagModule, + DropdownModule, MultiSelectModule, ProgressBarModule, ButtonModule ], + providers: [CustomerService] +}) +export class TableFilterAdvancedDemo implements OnInit { + customers!: Customer[]; + + representatives!: Representative[]; + + statuses!: any[]; + + loading: boolean = true; + + activityValues: number[] = [0, 100]; + + searchValue: string | undefined; + + constructor(private customerService: CustomerService) {} + + ngOnInit() { + this.customerService.getCustomersLarge().then((customers) => { + this.customers = customers; + this.loading = false; + + this.customers.forEach((customer) => (customer.date = new Date(customer.date))); + }); + + this.representatives = [ + { name: 'Amy Elsner', image: 'amyelsner.png' }, + { name: 'Anna Fali', image: 'annafali.png' }, + { name: 'Asiya Javayant', image: 'asiyajavayant.png' }, + { name: 'Bernardo Dominic', image: 'bernardodominic.png' }, + { name: 'Elwin Sharvill', image: 'elwinsharvill.png' }, + { name: 'Ioni Bowcher', image: 'ionibowcher.png' }, + { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' }, + { name: 'Onyama Limba', image: 'onyamalimba.png' }, + { name: 'Stephen Shaw', image: 'stephenshaw.png' }, + { name: 'Xuxue Feng', image: 'xuxuefeng.png' } + ]; + + this.statuses = [ + { label: 'Unqualified', value: 'unqualified' }, + { label: 'Qualified', value: 'qualified' }, + { label: 'New', value: 'new' }, + { label: 'Negotiation', value: 'negotiation' }, + { label: 'Renewal', value: 'renewal' }, + { label: 'Proposal', value: 'proposal' } + ]; + } + + clear(table: Table) { + table.clear(); + this.searchValue = '' + } + + getSeverity(status: string) { + switch (status.toLowerCase()) { + case 'unqualified': + return 'danger'; + + case 'qualified': + return 'success'; + + case 'new': + return 'info'; + + case 'negotiation': + return 'warning'; + + case 'renewal': + return null; + } + } +}`, + scss: ` +:host ::ng-deep { + .p-progressbar { + height: .5rem; + background-color: #D8DADC; + + .p-progressbar-value { + background-color: #607D8B; + } + } +}`, + data: `{ + id: 1000, + name: 'James Butt', + country: { + name: 'Algeria', + code: 'dz' + }, + company: 'Benton, John B Jr', + date: '2015-09-13', + status: 'unqualified', + verified: true, + activity: 17, + representative: { + name: 'Ioni Bowcher', + image: 'ionibowcher.png' + }, + balance: 70663 +}, +...`, + service: ['CustomerService'] + }; + + extFiles = [ + { + path: 'src/domain/customer.ts', + content: ` +export interface Country { + name?: string; + code?: string; +} + +export interface Representative { + name?: string; + image?: string; +} + +export interface Customer { + id?: number; + name?: string; + country?: Country; + company?: string; + date?: string | Date; + status?: string; + activity?: number; + representative?: Representative; + verified?: boolean; + balance?: number; +}` + } + ]; +} diff --git a/src/app/showcase/doc/table/filterrowdoc.ts b/src/app/showcase/doc/table/filterbasic.ts similarity index 60% rename from src/app/showcase/doc/table/filterrowdoc.ts rename to src/app/showcase/doc/table/filterbasic.ts index e3551e91b4d..4b34006cc92 100644 --- a/src/app/showcase/doc/table/filterrowdoc.ts +++ b/src/app/showcase/doc/table/filterbasic.ts @@ -1,13 +1,17 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Table } from 'primeng/table'; -import { Code } from '../../domain/code'; -import { Customer, Representative } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer, Representative } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ - selector: 'filter-row-doc', + selector: 'filter-basic-doc', template: ` -

        Filters are displayed inline within a separate row.

        +

        + Data filtering is enabled by defining the filters property referring to a DataTableFilterMeta instance. Each column to filter also requires filter to be enabled. Built-in filter element is a input field and using + filterElement, it is possible to customize the filtering with your own UI. +

        +

        The optional global filtering searches the data against a single value that is bound to the global key of the filters object. The fields to search against is defined with the globalFilterFields.
        @@ -16,20 +20,20 @@ import { CustomerService } from '../../service/customerservice'; [value]="customers" dataKey="id" [rows]="10" - [showCurrentPageReport]="true" [rowsPerPageOptions]="[10, 25, 50]" [loading]="loading" [paginator]="true" - currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']" [tableStyle]="{ 'min-width': '75rem' }" >
        - - + + + + - +
        @@ -42,15 +46,15 @@ import { CustomerService } from '../../service/customerservice'; - + - + - +
        @@ -64,9 +68,9 @@ import { CustomerService } from '../../service/customerservice'; - + - + @@ -91,7 +95,7 @@ import { CustomerService } from '../../service/customerservice'; {{ customer.representative.name }} - + @@ -106,10 +110,10 @@ import { CustomerService } from '../../service/customerservice';
        - `, + `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class FilterRowDoc { +export class FilterBasicDoc { customers!: Customer[]; representatives!: Representative[]; @@ -180,119 +184,28 @@ export class FilterRowDoc { code: Code = { basic: ` - -
        - - - - -
        -         - - - Name - Country - Agent - Status - Verified - - - - - - - - - - - - - -
        - - {{ option.name }} -
        -         -         -         -         - - - - - - - - - - - - - - - - -         - - - - {{ customer.name }} - - - - {{ customer.country.name }} - - - - {{ customer.representative.name }} - - - - - - - - - - - - No customers found. - - -        `, - html: ` -
        - + >
        - - - - + + + + + +
        @@ -305,21 +218,38 @@ export class FilterRowDoc { - + - + - - -
        - - {{ option.name }} -
        -         + + +
        + + {{ option.name }} +
        +         @@ -327,16 +257,23 @@ export class FilterRowDoc { - - - - + + + + - +         @@ -346,15 +283,28 @@ export class FilterRowDoc { {{ customer.name }} - - {{ customer.country.name }} + + + {{ customer.country.name }} + - - {{ customer.representative.name }} + + + {{ customer.representative.name }} + - + @@ -366,19 +316,169 @@ export class FilterRowDoc { No customers found. +        `, + html: `
        + + +
        + + + + + + +
        +         + + + Name + Country + Agent + Status + Verified + + + + + + + + + + + + + +
        + + + {{ option.name }} + +
        +         +         +         +         + + + + + + + + + + + + + + + + +         + + + + {{ customer.name }} + + + + + {{ customer.country.name }} + + + + + + {{ customer.representative.name }} + + + + + + + + + + + + + No customers found. + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { Table } from 'primeng/table'; -import { Customer, Representative } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Customer, Representative } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TagModule } from 'primeng/tag'; +import { IconFieldModule } from 'primeng/iconfield'; +import { InputIconModule } from 'primeng/inputicon'; +import { HttpClientModule } from '@angular/common/http'; +import { InputTextModule } from 'primeng/inputtext'; +import { MultiSelectModule } from 'primeng/multiselect'; +import { DropdownModule } from 'primeng/dropdown'; +import { CommonModule } from '@angular/common'; @Component({ - selector: 'table-filter-row-demo', - templateUrl: 'table-filter-row-demo.html' + selector: 'table-filter-basic-demo', + templateUrl: 'table-filter-basic-demo.html', + standalone: true, + imports: [TableModule, TagModule, IconFieldModule, InputTextModule, InputIconModule, MultiSelectModule, DropdownModule, HttpClientModule, CommonModule], + providers: [CustomerService] +}) +@Component({ + selector: 'table-filter-basic-demo', + templateUrl: 'table-filter-basic-demo.html' }) -export class TableFilterRowDemo implements OnInit { +export class TableFilterBasicDemo implements OnInit { customers!: Customer[]; representatives!: Representative[]; diff --git a/src/app/showcase/doc/table/filtermenudoc.ts b/src/app/showcase/doc/table/filtermenudoc.ts index e027dc53da7..a9ea69a6602 100644 --- a/src/app/showcase/doc/table/filtermenudoc.ts +++ b/src/app/showcase/doc/table/filtermenudoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Table } from 'primeng/table'; -import { Code } from '../../domain/code'; -import { Customer, Representative } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer, Representative } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'filter-menu-doc', @@ -56,7 +56,7 @@ import { CustomerService } from '../../service/customerservice';
        - +
        @@ -85,7 +85,7 @@ import { CustomerService } from '../../service/customerservice'; Status - + @@ -99,7 +99,7 @@ import { CustomerService } from '../../service/customerservice'; Activity - +
        0 {{ value[0] }} - {{ value[1] }} @@ -271,7 +271,7 @@ export class FilterMenuDoc {
        - +
        @@ -300,7 +300,7 @@ export class FilterMenuDoc { Status - + @@ -314,7 +314,7 @@ export class FilterMenuDoc { Activity - +
        {{ activityValues[0] }} {{ activityValues[1] }} @@ -414,7 +414,7 @@ export class FilterMenuDoc {
        - +
        @@ -443,7 +443,7 @@ export class FilterMenuDoc { Status - + @@ -457,7 +457,7 @@ export class FilterMenuDoc { Activity - +
        {{ activityValues[0] }} {{ activityValues[1] }} @@ -514,8 +514,8 @@ export class FilterMenuDoc { typescript: ` import { Component, OnInit } from '@angular/core'; import { Table } from 'primeng/table'; -import { Customer, Representative } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Customer, Representative } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'table-filter-menu-demo', diff --git a/src/app/showcase/doc/table/filtersorteditdoc.ts b/src/app/showcase/doc/table/filtersorteditdoc.ts new file mode 100644 index 00000000000..f3aab7644a7 --- /dev/null +++ b/src/app/showcase/doc/table/filtersorteditdoc.ts @@ -0,0 +1,369 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; + +@Component({ + selector: 'filter-sort-edit-doc', + template: ` +

        Cell Editing with Sorting and Filter

        +         + +
        + + + + Code + Name + Quantity + Price + + + + + + + + + + + + + + + + + + + + + + + + + {{ product.code }} + + + + + + + + + + {{ product.name }} + + + + + + + + + + {{ product.quantity }} + + + + + + + + + + {{ product.price | currency : 'USD' }} + + + + + + +
        +         + `, + changeDetection: ChangeDetectionStrategy.OnPush, + styles: [ + ` + :host ::ng-deep .p-cell-editing { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + ` + ] +}) +export class FilterSortEditDoc { + products!: Product[]; + + constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} + + loadDemoData() { + this.productService.getProductsMini().then((data) => { + this.products = data; + this.cd.markForCheck(); + }); + } + + onEdit(event) { + if (!this.isPositiveInteger(event.target.value)) { + event.stopPropagation(); + } + } + + isPositiveInteger(val) { + let str = String(val); + + str = str.trim(); + + if (!str) { + return false; + } + + str = str.replace(/^0+/, '') || '0'; + var n = Math.floor(Number(str)); + + return n !== Infinity && String(n) === str && n >= 0; + } + + code: Code = { + basic: ` + + + + Code + + + Name + + + Quantity + + + Price + + + + + + + + + + + + + + + + + + + + + + + + + + {{ product.code }} + + + + + + + + + + {{ product.name }} + + + + + + + + + + {{ product.quantity }} + + + + + + + + + + {{ product.price | currency : 'USD' }} + + + + + +`, + html: `
        + + + + + Code + + + Name + + + Quantity + + + Price + + + + + + + + + + + + + + + + + + + + + + + + + + {{ product.code }} + + + + + + + + + + {{ product.name }} + + + + + + + + + + {{ product.quantity }} + + + + + + + + + + {{ product.price | currency : 'USD' }} + + + + + + +
        `, + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; +import { InputTextModule } from 'primeng/inputtext'; + +@Component({ + selector: 'table-filter-sort-edit-demo', + templateUrl: 'table-filter-sort-edit-demo.html', + standalone: true, + imports: [TableModule, InputTextModule, CommonModule], + providers: [ProductService], + styles: [ + \`:host ::ng-deep .p-cell-editing { + padding-top: 0 !important; + padding-bottom: 0 !important; + }\` + ], +}) +export class TableFilterSortEditDemo implements OnInit { + products!: Product[]; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProductsMini().then((data) => { + this.products = data; + }); + } + + onEdit(event) { + if (!this.isPositiveInteger(event.target.value)) { + event.stopPropagation(); + } + } + + isPositiveInteger(val) { + let str = String(val); + + str = str.trim(); + + if (!str) { + return false; + } + + str = str.replace(/^0+/, '') || '0'; + var n = Math.floor(Number(str)); + + return n !== Infinity && String(n) === str && n >= 0; + } +}`, + data: `{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +...`, + + service: ['ProductService'] + }; + + extFiles = [ + { + path: 'src/domain/product.ts', + content: ` +export interface Product { + id?: string; + code?: string; + name?: string; + description?: string; + price?: number; + quantity?: number; + inventoryStatus?: string; + category?: string; + image?: string; + rating?: number; +}` + } + ]; +} diff --git a/src/app/showcase/doc/table/flexiblescrolldoc.ts b/src/app/showcase/doc/table/flexiblescrolldoc.ts index 3d40f29929e..c09c24446e2 100644 --- a/src/app/showcase/doc/table/flexiblescrolldoc.ts +++ b/src/app/showcase/doc/table/flexiblescrolldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'flexible-scroll-doc', @@ -63,68 +63,155 @@ export class FlexibleScrollDoc { code: Code = { basic: `
        - +
        - - - - - Name - Country - Company - Representative - - - - - {{customer.name}} - {{customer.country.name}} - {{customer.company}} - {{customer.representative.name}} - + + + + + + Name + + + Country + + + Company + + + Representative + + + + + + + {{customer.name}} + + + {{customer.country.name}} + + + {{customer.company}} + + + {{customer.representative.name}} + + + + + + - - - - `, - html: ` -
        + html: `
        - +
        - - - - - Name - Country - Company - Representative - - - - - {{customer.name}} - {{customer.country.name}} - {{customer.company}} - {{customer.representative.name}} - + + + + + + Name + + + Country + + + Company + + + Representative + + + + + + + {{customer.name}} + + + {{customer.country.name}} + + + {{customer.company}} + + + {{customer.representative.name}} + + + + + + - - - -
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { ButtonModule } from 'primeng/button'; +import { HttpClientModule } from '@angular/common/http'; @Component({ selector: 'table-flexible-scroll-demo', - templateUrl: 'table-flexible-scroll-demo.html' + templateUrl: 'table-flexible-scroll-demo.html', + standalone: true, + imports: [TableModule, DialogModule, ButtonModule, HttpClientModule], + providers: [CustomerService] }) export class TableFlexibleScrollDemo implements OnInit{ customers!: Customer[]; diff --git a/src/app/showcase/doc/table/frozencolumnsdoc.ts b/src/app/showcase/doc/table/frozencolumnsdoc.ts index 5e2aee183be..e76f1e59270 100644 --- a/src/app/showcase/doc/table/frozencolumnsdoc.ts +++ b/src/app/showcase/doc/table/frozencolumnsdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'frozen-columns-doc', @@ -10,7 +10,7 @@ import { CustomerService } from '../../service/customerservice';
        - + @@ -64,7 +64,12 @@ export class FrozenColumnsDoc { } code: Code = { - basic: ` + basic: ` @@ -94,9 +99,13 @@ export class FrozenColumnsDoc { `, - html: ` -
        - + html: `
        + @@ -127,14 +136,28 @@ export class FrozenColumnsDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { ToggleButtonModule } from 'primeng/togglebutton'; +import { FormsModule } from '@angular/forms'; +import { HttpClientModule } from '@angular/common/http'; @Component({ selector: 'table-frozen-columns-demo', - templateUrl: 'table-frozen-columns-demo.html' + templateUrl: 'table-frozen-columns-demo.html', + standalone: true, + imports: [TableModule, ToggleButtonModule, FormsModule, HttpClientModule], + providers: [CustomerService], + styles: [ + \`:host ::ng-deep .p-frozen-column { + font-weight: bold; + } + :host ::ng-deep .p-datatable-frozen-tbody { + font-weight: bold; + }\` + ], }) export class TableFrozenColumnsDemo implements OnInit{ balanceFrozen: boolean = false; diff --git a/src/app/showcase/doc/table/frozenrowsdoc.ts b/src/app/showcase/doc/table/frozenrowsdoc.ts index bd473bcf91c..4f167436390 100644 --- a/src/app/showcase/doc/table/frozenrowsdoc.ts +++ b/src/app/showcase/doc/table/frozenrowsdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'frozen-rows-doc', @@ -96,42 +96,12 @@ export class FrozenRowsDoc { } code: Code = { - basic: ` - - - Name - Country - Company - Representative - - - - - - {{customer.name}} - {{customer.country.name}} - {{customer.company}} - {{customer.representative.name}} - - - - - - - - {{customer.name}} - {{customer.country.name}} - {{customer.company}} - {{customer.representative.name}} - - - - - -`, - html: ` -
        - + basic: ` Name @@ -148,7 +118,14 @@ export class FrozenRowsDoc { {{customer.company}} {{customer.representative.name}} - + @@ -159,20 +136,88 @@ export class FrozenRowsDoc { {{customer.company}} {{customer.representative.name}} - + - +`, + html: `
        + + + + Name + Country + Company + Representative + + + + + + {{customer.name}} + {{customer.country.name}} + {{customer.company}} + {{customer.representative.name}} + + + + + + + + {{customer.name}} + {{customer.country.name}} + {{customer.company}} + {{customer.representative.name}} + + + + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; +import { HttpClientModule } from '@angular/common/http'; @Component({ selector: 'table-frozen-rows-demo', - templateUrl: 'table-frozen-rows-demo.html' + templateUrl: 'table-frozen-rows-demo.html', + standalone: true, + imports: [TableModule, ButtonModule, RippleModule, HttpClientModule], + providers: [CustomerService] }) export class TableFrozenRowsDemo implements OnInit{ unlockedCustomers!: Customer[]; diff --git a/src/app/showcase/doc/table/gridlinesdoc.ts b/src/app/showcase/doc/table/gridlinesdoc.ts index cea6a97d548..df3c71e0132 100644 --- a/src/app/showcase/doc/table/gridlinesdoc.ts +++ b/src/app/showcase/doc/table/gridlinesdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'gridlines-doc', @@ -11,7 +11,6 @@ import { ProductService } from '../../service/productservice';
        - Header Code @@ -28,7 +27,6 @@ import { ProductService } from '../../service/productservice'; {{ product.quantity }} - Footer
        @@ -48,30 +46,10 @@ export class GridlinesDoc { } code: Code = { - basic: ` - Header - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - Footer -`, - html: ` -
        - - Header + basic: ` Code @@ -88,17 +66,42 @@ export class GridlinesDoc { {{ product.quantity }} - Footer +`, + html: `
        + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-gridlines-demo', - templateUrl: 'table-gridlines-demo.html' + templateUrl: 'table-gridlines-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) export class TableGridlinesDemo { products!: Product[]; diff --git a/src/app/showcase/doc/table/horizontalandverticaldoc.ts b/src/app/showcase/doc/table/horizontalscrolldoc.ts similarity index 88% rename from src/app/showcase/doc/table/horizontalandverticaldoc.ts rename to src/app/showcase/doc/table/horizontalscrolldoc.ts index ed882e4c18b..eb3137edf89 100644 --- a/src/app/showcase/doc/table/horizontalandverticaldoc.ts +++ b/src/app/showcase/doc/table/horizontalscrolldoc.ts @@ -1,12 +1,12 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ - selector: 'horizontal-and-vertical-scroll-doc', + selector: 'horizontal-scroll-doc', template: ` -

        Horizontal and vertical scroll can be used together to enable double axis scrolling.

        +

        Horizontal scrollbar is displayed when table width exceeds the parent width.
        @@ -53,10 +53,10 @@ import { CustomerService } from '../../service/customerservice';
        - `, + `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class HorizontalAndVerticalScrollDoc { +export class HorizontalScrollDoc { customers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} @@ -114,8 +114,7 @@ export class HorizontalAndVerticalScrollDoc {         `, - html: ` -
        + html: `
        @@ -158,16 +157,20 @@ export class HorizontalAndVerticalScrollDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { HttpClientModule } from '@angular/common/http'; @Component({ - selector: 'table-horizontal-and-vertical-scroll-demo', - templateUrl: 'table-horizontal-and-vertical-scroll-demo.html' + selector: 'table-horizontal-scroll-demo', + templateUrl: 'table-horizontal-scroll-demo.html', + standalone: true, + imports: [TableModule, HttpClientModule], + providers: [CustomerService] }) -export class TableHorizontalAndVerticalScrollDemo implements OnInit{ +export class TableHorizontalScrollDemo implements OnInit{ customers!: Customer[]; constructor(private customerService: CustomerService) {} diff --git a/src/app/showcase/doc/table/importdoc.ts b/src/app/showcase/doc/table/importdoc.ts index 1685c6a4124..1e63bb67a28 100644 --- a/src/app/showcase/doc/table/importdoc.ts +++ b/src/app/showcase/doc/table/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/table/lazyloaddoc.ts b/src/app/showcase/doc/table/lazyloaddoc.ts index 75e5e32a85f..e33eb616fc2 100644 --- a/src/app/showcase/doc/table/lazyloaddoc.ts +++ b/src/app/showcase/doc/table/lazyloaddoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { LazyLoadEvent } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Customer, Representative } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer, Representative } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'lazy-load-doc', @@ -34,28 +34,28 @@ import { CustomerService } from '../../service/customerservice'; - Name - Country - Company - Representative + Name + Country + Company + Representative - + - + - + - + - +
        @@ -171,28 +171,36 @@ export class LazyLoadDoc implements OnInit { - Name - Country - Company - Representative + + Name + + + Country + + + Company + + + Representative + - + - + - + - + - +
        @@ -217,8 +225,7 @@ export class LazyLoadDoc implements OnInit { `, - html: ` -
        + html: `
        - Name - Country - Company - Representative + Name + Country + Company + Representative - + - + - + - + - +
        @@ -285,15 +292,20 @@ export class LazyLoadDoc implements OnInit {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { LazyLoadEvent } from 'primeng/api'; -import { Customer, Representative } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Customer, Representative } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { MultiSelectModule } from 'primeng/multiselect'; +import { HttpClientModule } from '@angular/common/http'; @Component({ selector: 'table-lazy-load-demo', - templateUrl: 'table-lazy-load-demo.html' + templateUrl: 'table-lazy-load-demo.html', + standalone: true, + imports: [TableModule, MultiSelectModule, HttpClientModule], + providers: [CustomerService] }) export class TableLazyLoadDemo implements OnInit{ customers!: Customer[]; diff --git a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts b/src/app/showcase/doc/table/multiplecolumnssortdoc.ts similarity index 56% rename from src/app/showcase/doc/table/multiplecolumnsortdoc.ts rename to src/app/showcase/doc/table/multiplecolumnssortdoc.ts index da846483de0..9b17e381547 100644 --- a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts +++ b/src/app/showcase/doc/table/multiplecolumnssortdoc.ts @@ -1,10 +1,10 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ - selector: 'multiple-column-sort-doc', + selector: 'multiple-columns-sort-doc', template: `

        Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.

        @@ -14,11 +14,10 @@ import { ProductService } from '../../service/productservice'; - Code - Name - Category - Quantity - Price + Code + Name + Category + Quantity @@ -27,17 +26,16 @@ import { ProductService } from '../../service/productservice'; {{ product.name }} {{ product.category }} {{ product.quantity }} - {{ product.price | currency : 'USD' }}
        - + `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class MultipleColumnSortDoc { +export class MultipleColumnsSortDoc { products: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} @@ -53,56 +51,71 @@ export class MultipleColumnSortDoc { basic: ` - Code - Name - Category - Quantity - Price + + Code + + + Name + + + Category + + + Quantity + - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - {{product.price | currency: 'USD'}} + { {product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} `, - html: ` -
        + html: `
        - Code - Name - Category - Quantity - Price + + Code + + + Name + + + Category + + + Quantity + - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - {{product.price | currency: 'USD'}} + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }}
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; @Component({ - selector: 'table-multiple-column-sort-demo', - templateUrl: 'table-multiple-column-sort-demo.html' + selector: 'table-multiple-columns-sort-demo', + templateUrl: 'table-multiple-columns-sort-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) -export class TableSingleColumnSortDemo implements OnInit { +export class TableSingleColumnsSortDemo implements OnInit { products: Product[]; constructor(private productService: ProductService) {} diff --git a/src/app/showcase/doc/table/multipleselectiondoc.ts b/src/app/showcase/doc/table/multipleselectiondoc.ts index 5454951dd65..4ba9331a501 100644 --- a/src/app/showcase/doc/table/multipleselectiondoc.ts +++ b/src/app/showcase/doc/table/multipleselectiondoc.ts @@ -1,24 +1,23 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'multiple-selection-doc', template: `

        - In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. Setting metaKeySelection property as false - enables multiple selection without meta key. + More than one row is selectable by setting selectionMode to multiple. By default in multiple selection mode, metaKey press (e.g. ⌘) is not necessary to add to existing selections. When the optional + metaKeySelection is present, behavior is changed in a way that selecting a new row requires meta key to be present. Note that in touch enabled devices, DataTable always ignores metaKey.

        -
        - - MetaKey +
        + +
        - - Multiple Selection with MetaKey + Code @@ -46,7 +45,7 @@ export class MultipleSelectionDoc { selectedProducts!: Product; - metaKeySelection: boolean = true; + metaKey: boolean = true; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} @@ -58,37 +57,17 @@ export class MultipleSelectionDoc { } code: Code = { - basic: `
        - - MetaKey + basic: `
        + +
        - - Multiple Selection with MetaKey - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - -`, - html: ` -
        -
        - - MetaKey -
        - - Multiple Selection with MetaKey + Code @@ -105,23 +84,58 @@ export class MultipleSelectionDoc { {{ product.quantity }} +`, + html: `
        +
        + + +
        + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-multiple-selection-demo', - templateUrl: 'table-multiple-selection-demo.html' + templateUrl: 'table-multiple-selection-demo.html', + standalone: true, + imports: [TableModule, InputSwitchModule, FormsModule, CommonModule], + providers: [ProductService] }) export class TableMultipleSelectionDemo implements OnInit{ products!: Product[]; selectedProducts!: Product; - metaKeySelection: boolean = true; + metaKey: boolean = true; constructor(private productService: ProductService) {} diff --git a/src/app/showcase/doc/table/pageonlyselectiondoc.ts b/src/app/showcase/doc/table/pageonlyselectiondoc.ts index e8f658eaa7b..9233b987d42 100644 --- a/src/app/showcase/doc/table/pageonlyselectiondoc.ts +++ b/src/app/showcase/doc/table/pageonlyselectiondoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'page-only-selection-doc', @@ -104,8 +104,8 @@ export class PageOnlySelectionDoc {
        `, typescript: ` import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'table-page-only-selection-demo', diff --git a/src/app/showcase/doc/table/paginatorbasicdoc.ts b/src/app/showcase/doc/table/paginatorbasicdoc.ts index 2b8a053aabd..eb82b33ff92 100644 --- a/src/app/showcase/doc/table/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/table/paginatorbasicdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'paginator-basic-doc', @@ -17,9 +17,7 @@ import { CustomerService } from '../../service/customerservice'; [value]="customers" [paginator]="true" [rows]="5" - [showCurrentPageReport]="true" [tableStyle]="{ 'min-width': '50rem' }" - currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[5, 10, 20]" > @@ -38,12 +36,6 @@ import { CustomerService } from '../../service/customerservice'; {{ customer.representative.name }} - - - - - -
        @@ -67,9 +59,7 @@ export class PaginatorBasicDoc { [value]="customers" [paginator]="true" [rows]="5" - [showCurrentPageReport]="true" [tableStyle]="{ 'min-width': '50rem' }" - currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [rowsPerPageOptions]="[5, 10, 20]" > @@ -88,22 +78,13 @@ export class PaginatorBasicDoc { {{ customer.representative.name }} - - - - - -         `, - html: ` -
        + html: `
        @@ -122,22 +103,20 @@ export class PaginatorBasicDoc { {{ customer.representative.name }} - - - - - -
        `, - typescript: ` -import { Component } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-paginator-basic-demo', - templateUrl: 'table-paginator-basic-demo.html' + templateUrl: 'table-paginator-basic-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) export class TablePaginatorBasicDemo { customers!: Customer[]; diff --git a/src/app/showcase/doc/table/paginatorlocaledoc.ts b/src/app/showcase/doc/table/paginatorlocaledoc.ts index b785093f45c..2eb877e5b29 100644 --- a/src/app/showcase/doc/table/paginatorlocaledoc.ts +++ b/src/app/showcase/doc/table/paginatorlocaledoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'paginator-locale-doc', @@ -132,8 +132,8 @@ export class PaginatorLocaleDoc {
        `, typescript: ` import { Component } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'table-paginator-locale-demo', diff --git a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts index 92166fb83da..f25e9832854 100644 --- a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts +++ b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'paginator-programmatic-doc', @@ -12,9 +12,9 @@ import { CustomerService } from '../../service/customerservice';
        - - - + + +
        - - - + + +
        - + - + `, - html: ` -
        - - - + html: `
        + + +
        - + - +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; +import { ButtonModule } from 'primeng/button'; +import { HttpClientModule } from '@angular/common/http'; @Component({ selector: 'table-paginator-programmatic-demo', - templateUrl: 'table-paginator-programmatic-demo.html' + templateUrl: 'table-paginator-programmatic-demo.html', + standalone: true, + imports: [TableModule, CommonModule, ButtonModule, HttpClientModule], + providers: [CustomerService] }) export class TablePaginatorProgrammaticDemo { customers!: Customer[]; diff --git a/src/app/showcase/doc/table/presortdoc.ts b/src/app/showcase/doc/table/presortdoc.ts new file mode 100644 index 00000000000..5b8e240dd28 --- /dev/null +++ b/src/app/showcase/doc/table/presortdoc.ts @@ -0,0 +1,174 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; + +@Component({ + selector: 'presort-doc', + template: ` +

        + Defining a default sortField and sortOrder displays data as sorted initially in single column sorting. In multiple sort mode, multiSortMeta should be used instead by providing an array of + DataTableSortMeta objects. +

        +         + +
        + + + + Code + Name + Price + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.price | currency : 'USD' }} + {{ product.category }} + {{ product.quantity }} + + + +
        +         + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class PreSortDoc { + products!: Product[]; + + constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} + + loadDemoData() { + this.productService.getProductsMini().then((data) => { + this.products = data; + this.cd.markForCheck(); + }); + } + + code: Code = { + basic: ` + + + + Code + + + Name + + + Price + + + Category + + + Quantity + + + + + + {{ product.code }} + {{ product.name }} + {{ product.price | currency : 'USD' }} + {{ product.category }} + {{ product.quantity }} + + +`, + html: `
        + + + + + Code + + + Name + + + Price + + + Category + + + Quantity + + + + + + {{ product.code }} + {{ product.name }} + {{ product.price | currency : 'USD' }} + {{ product.category }} + {{ product.quantity }} + + + +
        `, + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'table-presort-demo', + templateUrl: 'table-presort-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] +}) +export class TablePreSortDemo implements OnInit { + products!: Product[]; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProductsMini().then((data) => { + this.products = data; + }); + } +}`, + data: `{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +...`, + service: ['ProductService'] + }; + + extFiles = [ + { + path: 'src/domain/product.ts', + content: ` +export interface Product { + id?: string; + code?: string; + name?: string; + description?: string; + price?: number; + quantity?: number; + inventoryStatus?: string; + category?: string; + image?: string; + rating?: number; +}` + } + ]; +} diff --git a/src/app/showcase/doc/table/productsdoc.ts b/src/app/showcase/doc/table/productsdoc.ts index b32ac269184..c168322a5a2 100644 --- a/src/app/showcase/doc/table/productsdoc.ts +++ b/src/app/showcase/doc/table/productsdoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'products-doc', @@ -11,16 +11,16 @@ import { ProductService } from '../../service/productservice';
        - + - - + + - - + + @@ -49,33 +49,33 @@ import { ProductService } from '../../service/productservice'; - + - Name + Name Image - Price - Category - Reviews - Status + Price + Category + Reviews + Status - + {{ product.name }} {{ product.price | currency : 'USD' }} {{ product.category }} - + - + - - + + @@ -101,10 +101,10 @@ import { ProductService } from '../../service/productservice'; - + - +
        @@ -113,19 +113,19 @@ import { ProductService } from '../../service/productservice';
        - +
        - +
        - +
        - +
        @@ -134,22 +134,22 @@ import { ProductService } from '../../service/productservice';
        - +
        - +
        - - + + - +
        `, @@ -279,16 +279,36 @@ export class ProductsDoc { } code: Code = { - basic: ` + basic: ` - - + + - - + + @@ -310,59 +330,125 @@ export class ProductsDoc {
        Manage Products
        - +
        - + + + + Name + + + Image + + + Price + + + Category + + + Reviews + + + Status - Name - Image - Price - Category - Reviews - Status - + + + + {{ product.name }} - {{ product.name }} - - {{ product.price | currency: 'USD' }} - {{ product.category }} - - + - - + {{ product.price | currency : 'USD' }} + + + {{ product.category }} + + + + + + + + + + -
        In total there are {{ products ? products.length : 0 }} products.
        +
        + In total there are {{ products ? products.length : 0 }} products. +
        `, - html: ` -
        - + html: `
        + - - + + - - + + @@ -384,125 +470,264 @@ export class ProductsDoc {
        Manage Products
        - +
        - + + + + Name + + + Image + + + Price + + + Category + + + Reviews + + + Status - Name - Image - Price - Category - Reviews - Status - + + + + {{ product.name }} - {{ product.name }} - - {{ product.price | currency: 'USD' }} - {{ product.category }} - - + - - + {{ product.price | currency : 'USD' }} + + + {{ product.category }} + + + + + + + + + + -
        In total there are {{ products ? products.length : 0 }} products.
        +
        + In total there are {{ products ? products.length : 0 }} products. +
        -
        - - - -
        - - - Name is required. -
        -
        - - -
        - -
        - - - - - - - - - -
        -
        - -
        -
        - - + + + +
        + + + + Name is required. +
        -
        - - +
        + +
        -
        - - -
        -
        - - -
        -
        -
        -
        -
        - - -
        -
        - - -
        -
        - +
        + + + + + + + + + +
        - - - - - +
        + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        + + +
        +
        +
        -`, - typescript: ` -import { Component, OnInit } from '@angular/core'; +
        +
        + + +
        +
        + + +
        +
        + + + + + + + + + +
        `, + typescript: `import { Component, OnInit } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { DialogModule } from 'primeng/dialog'; +import { RippleModule } from 'primeng/ripple'; +import { ButtonModule } from 'primeng/button'; +import { ToastModule } from 'primeng/toast'; +import { ToolbarModule } from 'primeng/toolbar'; +import { ConfirmDialogModule } from 'primeng/confirmdialog'; +import { InputTextModule } from 'primeng/inputtext'; +import { InputTextareaModule } from 'primeng/inputtextarea'; +import { CommonModule } from '@angular/common'; +import { FileUploadModule } from 'primeng/fileupload'; +import { DropdownModule } from 'primeng/dropdown'; +import { TagModule } from 'primeng/tag'; +import { RadioButtonModule } from 'primeng/radiobutton'; +import { RatingModule } from 'primeng/rating'; +import { FormsModule } from '@angular/forms'; +import { InputNumberModule } from 'primeng/inputnumber'; @Component({ selector: 'table-products-demo', templateUrl: 'table-products-demo.html', - styleUrls: ['table-products-demo.scss'], - providers: [MessageService, ConfirmationService] + standalone: true, + imports: [TableModule, DialogModule, RippleModule, ButtonModule, ToastModule, ToolbarModule, ConfirmDialogModule, InputTextModule, InputTextareaModule, CommonModule, FileUploadModule, DropdownModule, TagModule, RadioButtonModule, RatingModule, InputTextModule, FormsModule, InputNumberModule], + providers: [MessageService, ConfirmationService, ProductService], + styles: [ + \`:host ::ng-deep .p-dialog .product-image { + width: 150px; + margin: 0 auto 2rem auto; + display: block; + }\` + ] }) export class TableProductsDemo implements OnInit{ productDialog: boolean = false; diff --git a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts index dccb0b788d8..2c6d617e566 100644 --- a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts +++ b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'radio-button-selection-doc', @@ -23,7 +23,7 @@ import { ProductService } from '../../service/productservice'; - + {{ product.code }} {{ product.name }} @@ -52,31 +52,11 @@ export class RadioButtonSelectionDoc { } code: Code = { - basic: ` - - - - Code - Name - Category - Quantity - - - - - - - - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - - -`, - html: ` -
        - + basic: ` @@ -89,7 +69,7 @@ export class RadioButtonSelectionDoc { - + {{product.code}} {{product.name}} @@ -97,16 +77,48 @@ export class RadioButtonSelectionDoc { {{product.quantity}} +`, + html: `
        + + + + + Code + Name + Category + Quantity + + + + + + + + {{product.code}} + {{product.name}} + {{product.category}} + {{product.quantity}} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-radio-button-selection-demo', - templateUrl: 'table-radio-button-selection-demo.html' + templateUrl: 'table-radio-button-selection-demo.html', + standalone: true, + imports: [TableModule, FormsModule, CommonModule], + providers: [ProductService] }) export class TableRadioButtonSelectionDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/removablesortdoc.ts b/src/app/showcase/doc/table/removablesortdoc.ts new file mode 100644 index 00000000000..397ec7e9f9d --- /dev/null +++ b/src/app/showcase/doc/table/removablesortdoc.ts @@ -0,0 +1,238 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { SortEvent } from 'primeng/api'; +import { Table } from 'primeng/table'; +@Component({ + selector: 'removable-sort-doc', + template: ` +

        The removable sort can be implemented using the customSort property.

        +         + +
        + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
        +         + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class RemovableSortDoc { + @ViewChild('dt') dt: Table; + + products: Product[]; + + initialValue: Product[]; + + isSorted: boolean = null; + + constructor(private productService: ProductService) {} + + loadDemoData() { + this.productService.getProductsMini().then((data) => { + this.products = data; + this.initialValue = [...data]; + }); + } + + customSort(event: SortEvent) { + if (this.isSorted == null || this.isSorted === undefined) { + this.isSorted = true; + this.sortTableData(event); + } else if (this.isSorted == true) { + this.isSorted = false; + this.sortTableData(event); + } else if (this.isSorted == false) { + this.isSorted = null; + this.products = [...this.initialValue]; + this.dt.reset(); + } + } + + sortTableData(event) { + event.data.sort((data1, data2) => { + let value1 = data1[event.field]; + let value2 = data2[event.field]; + let result = null; + if (value1 == null && value2 != null) result = -1; + else if (value1 != null && value2 == null) result = 1; + else if (value1 == null && value2 == null) result = 0; + else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2); + else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; + + return event.order * result; + }); + } + + code: Code = { + basic: ` + + + + Code + + + Name + + + Category + + + Quantity + + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + +`, + + html: `
        + + + + + Code + + + Name + + + Category + + + Quantity + + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
        `, + typescript: `import { Component, OnInit, ViewChild } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; +import { TableModule } from 'primeng/table'; +import { Table } from 'primeng/table'; +import { SortEvent } from 'primeng/api'; + +@Component({ + selector: 'table-removable-sort-demo', + templateUrl: 'table-removable-sort-demo.html', + standalone: true, + imports: [TableModule], + providers: [ProductService] +}) + +export class TableRemovableSortDemo implements OnInit { + @ViewChild('dt') dt: Table; + + products: Product[]; + + initialValue: Product[]; + + isSorted: boolean = null; + + constructor(private productService: ProductService) {} + + ngOnInit() { + this.productService.getProductsMini().then((data) => { + this.products = data; + this.initialValue = [...data]; + }); + } + + customSort(event: SortEvent) { + if (this.isSorted == null || this.isSorted === undefined) { + this.isSorted = true; + this.sortTableData(event); + } else if (this.isSorted == true) { + this.isSorted = false; + this.sortTableData(event); + } else if (this.isSorted == false) { + this.isSorted = null; + this.products = [...this.initialValue]; + this.dt.reset(); + } + } + + sortTableData(event) { + event.data.sort((data1, data2) => { + let value1 = data1[event.field]; + let value2 = data2[event.field]; + let result = null; + if (value1 == null && value2 != null) result = -1; + else if (value1 != null && value2 == null) result = 1; + else if (value1 == null && value2 == null) result = 0; + else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2); + else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; + + return event.order * result; + }); + } +}`, + data: `{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5 +}, +...`, + service: ['ProductService'] + }; + + extFiles = [ + { + path: 'src/domain/product.ts', + content: ` +export interface Product { + id?: string; + code?: string; + name?: string; + description?: string; + price?: number; + quantity?: number; + inventoryStatus?: string; + category?: string; + image?: string; + rating?: number; +}` + } + ]; +} diff --git a/src/app/showcase/doc/table/reorderdoc.ts b/src/app/showcase/doc/table/reorderdoc.ts index 9c26405f5c6..4d74ec47261 100644 --- a/src/app/showcase/doc/table/reorderdoc.ts +++ b/src/app/showcase/doc/table/reorderdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; interface Column { field: string; @@ -52,7 +52,7 @@ export class ReorderDoc { constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} loadDemoData() { - this.productService.getProductsSmall().then((data) => { + this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); }); @@ -66,29 +66,11 @@ export class ReorderDoc { } code: Code = { - basic: ` - - - - - {{col.header}} - - - - - - - - - - {{rowData[col.field]}} - - - -`, - html: ` -
        - + basic: ` @@ -97,22 +79,56 @@ export class ReorderDoc { - - - - - - - {{rowData[col.field]}} - - + + + + + + + {{rowData[col.field]}} + + +`, + html: `
        + + + + + + {{col.header}} + + + + + + + + + + {{rowData[col.field]}} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -121,7 +137,10 @@ interface Column { @Component({ selector: 'table-reorder-demo', - templateUrl: 'table-reorder-demo.html' + templateUrl: 'table-reorder-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) export class TableReorderDemo implements OnInit{ products!: Product[]; @@ -131,7 +150,7 @@ export class TableReorderDemo implements OnInit{ constructor(private productService: ProductService) {} ngOnInit() { - this.productService.getProductsSmall().then((data) => (this.products = data)); + this.productService.getProductsMini().then((data) => (this.products = data)); this.cols = [ { field: 'code', header: 'Code' }, diff --git a/src/app/showcase/doc/table/responsivescrolldoc.ts b/src/app/showcase/doc/table/responsivescrolldoc.ts index 07b21435b2c..ac9ac696e04 100644 --- a/src/app/showcase/doc/table/responsivescrolldoc.ts +++ b/src/app/showcase/doc/table/responsivescrolldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; interface Column { field: string; @@ -34,9 +34,9 @@ interface Column { {{ product.category }} {{ product.quantity }} - + - +         @@ -93,17 +93,28 @@ export class ResponsiveScrollDoc { - {{product.name}} - {{product.price | currency:'USD'}} - {{product.category}} - {{product.quantity}} - - + + {{product.name}} + + + {{product.price | currency:'USD'}} + + + {{product.category}} + + + {{product.quantity}} + + + + + + + `, - html: ` -
        + html: `
        @@ -117,20 +128,35 @@ export class ResponsiveScrollDoc { - {{product.name}} - {{product.price | currency:'USD'}} - {{product.category}} - {{product.quantity}} - - + + {{product.name}} + + + {{product.price | currency:'USD'}} + + + {{product.category}} + + + {{product.quantity}} + + + + + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { TagModule } from 'primeng/tag'; +import { RatingModule } from 'primeng/rating'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -139,7 +165,10 @@ interface Column { @Component({ selector: 'table-responsive-scroll-demo', - templateUrl: 'table-responsive-scroll-demo.html' + templateUrl: 'table-responsive-scroll-demo.html', + standalone: true, + imports: [TableModule, TagModule, RatingModule, CommonModule], + providers: [ProductService] }) export class TableResponsiveScrollDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/responsivestackdoc.ts b/src/app/showcase/doc/table/responsivestackdoc.ts index 767f1120ea0..b40137716a3 100644 --- a/src/app/showcase/doc/table/responsivestackdoc.ts +++ b/src/app/showcase/doc/table/responsivestackdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; interface Column { field: string; @@ -35,8 +35,8 @@ interface Column { Price{{ product.price | currency : 'USD' }} Category{{ product.category }} Quantity{{ product.quantity }} - - Reviews + + Reviews @@ -80,30 +80,51 @@ export class ResponsiveStackDoc { } code: Code = { - basic: ` - - - Name - Price - Category - Quantity - Status - Reviews - - - - - Name{{product.name}} - Price{{product.price | currency:'USD'}} - Category{{product.category}} - Quantity{{product.quantity}} - - Reviews - - + basic: ` + + + Name + Price + Category + Quantity + Status + Reviews + + + + + + Name{{product.name}} + + + Price{{product.price | currency:'USD'}} + + + Category{{product.category}} + + + Quantity{{product.quantity}} + + + + + + Reviews + + + + `, - html: ` -
        + html: `
        @@ -117,20 +138,41 @@ export class ResponsiveStackDoc { - Name{{product.name}} - Price{{product.price | currency:'USD'}} - Category{{product.category}} - Quantity{{product.quantity}} - - Reviews + + Name{{product.name}} + + + Price{{product.price | currency:'USD'}} + + + Category{{product.category}} + + + Quantity{{product.quantity}} + + + + + + Reviews + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { TagModule } from 'primeng/tag'; +import { RatingModule } from 'primeng/rating'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -140,7 +182,9 @@ interface Column { @Component({ selector: 'table-responsive-stack-demo', templateUrl: 'table-responsive-stack-demo.html', - styleUrls: ['table-responsive-stack-demo.scss'] + standalone: true, + imports: [TableModule, TagModule, RatingModule, CommonModule], + providers: [ProductService] }) export class TableResponsiveStackDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/roweditdoc.ts b/src/app/showcase/doc/table/roweditdoc.ts index 82fb996497d..266792b83b5 100644 --- a/src/app/showcase/doc/table/roweditdoc.ts +++ b/src/app/showcase/doc/table/roweditdoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { MessageService, SelectItem } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'row-edit-doc', @@ -59,10 +59,10 @@ import { ProductService } from '../../service/productservice'; - + - {{ product.inventoryStatus }} + @@ -132,6 +132,17 @@ export class RowEditDoc { delete this.clonedProducts[product.id as string]; } + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warning'; + case 'OUTOFSTOCK': + return 'danger'; + } + } + code: Code = { basic: ` @@ -149,7 +160,10 @@ export class RowEditDoc { - + {{product.code}} @@ -159,7 +173,10 @@ export class RowEditDoc { - + {{product.name}} @@ -169,17 +186,26 @@ export class RowEditDoc { - + - {{product.inventoryStatus}} + - + {{product.price | currency: 'USD'}} @@ -188,16 +214,41 @@ export class RowEditDoc {
        - - - + + +
        `, - html: ` -
        + html: `
        @@ -214,7 +265,9 @@ export class RowEditDoc { - + {{product.code}} @@ -224,7 +277,10 @@ export class RowEditDoc { - + {{product.name}} @@ -234,17 +290,25 @@ export class RowEditDoc { - + - {{product.inventoryStatus}} + - + {{product.price | currency: 'USD'}} @@ -252,26 +316,60 @@ export class RowEditDoc { -
        - - - -
        +
        + + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MessageService, SelectItem } from 'primeng/api'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { ToastModule } from 'primeng/toast'; +import { CommonModule } from '@angular/common'; +import { TagModule } from 'primeng/tag'; +import { DropdownModule } from 'primeng/dropdown'; +import { ButtonModule } from 'primeng/button'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'table-row-edit-demo', templateUrl: 'table-row-edit-demo.html', - providers: [MessageService] + standalone: true, + imports: [TableModule, ToastModule, CommonModule, TagModule, DropdownModule, ButtonModule, InputTextModule], + providers: [MessageService, ProductService] }) export class TableRowEditDemo implements OnInit{ @@ -312,6 +410,17 @@ export class TableRowEditDemo implements OnInit{ this.products[index] = this.clonedProducts[product.id as string]; delete this.clonedProducts[product.id as string]; } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warning'; + case 'OUTOFSTOCK': + return 'danger'; + } + } }`, data: `{ id: '1000', diff --git a/src/app/showcase/doc/table/rowexpanddoc.ts b/src/app/showcase/doc/table/rowexpanddoc.ts deleted file mode 100644 index 3726895a4ae..00000000000 --- a/src/app/showcase/doc/table/rowexpanddoc.ts +++ /dev/null @@ -1,342 +0,0 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; - -@Component({ - selector: 'row-expand-doc', - template: ` -

        - Row expansion allows displaying detailed content for a particular row. To use this feature, add a template named rowexpansion and use the pRowToggler directive whose value is the row data instance on an element of your choice - whose click event toggles the expansion. This enables providing your custom UI such as buttons, links and so on. Example below uses an anchor with an icon as a toggler. Setting pRowTogglerDisabled as true disables the toggle - event for the element. -

        -         - -
        - - - - - Name - Image - Price - Category - Reviews - Status - - - - - - - - {{ product.name }} - - {{ product.price | currency : 'USD' }} - {{ product.category }} - - - - - - - - - -
        - - - - Id - Customer - Date - Amount - Status - - - - - - {{ order.id }} - {{ order.customer }} - {{ order.date }} - {{ order.amount | currency : 'USD' }} - - - - - - - - - There are no order for this product yet. - - - -
        - - -         -         -
        -         - `, - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class RowExpandDoc { - products!: Product[]; - - constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - - loadDemoData() { - this.productService.getProductsWithOrdersSmall().then((data) => { - this.products = data; - this.cd.markForCheck(); - }); - } - - getSeverity(status: string) { - switch (status) { - case 'INSTOCK': - return 'success'; - case 'LOWSTOCK': - return 'warning'; - case 'OUTOFSTOCK': - return 'danger'; - } - } - - getStatusSeverity(status: string) { - switch (status) { - case 'PENDING': - return 'warning'; - case 'DELIVERED': - return 'success'; - case 'CANCELLED': - return 'danger'; - } - } - - code: Code = { - basic: ` - - - - Name - Image - Price - Category - Reviews - Status - - - - - - - - {{ product.name }} - - {{ product.price | currency: 'USD' }} - {{ product.category }} - - - - - - - - - -
        - - - - Id - Customer - Date - Amount - Status - - - - - - {{ order.id }} - {{ order.customer }} - {{ order.date }} - {{ order.amount | currency: 'USD' }} - - - - - - - - - There are no order for this product yet. - - - -
        - - -         -        `, - html: ` -
        - - - - - Name - Image - Price - Category - Reviews - Status - - - - - - - - {{ product.name }} - - {{ product.price | currency: 'USD' }} - {{ product.category }} - - - - - - - - - -
        - - - - Id - Customer - Date - Amount - Status - - - - - - {{ order.id }} - {{ order.customer }} - {{ order.date }} - {{ order.amount | currency: 'USD' }} - - - - - - - - - There are no order for this product yet. - - - -
        - - -         -         -
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; - -@Component({ - selector: 'table-row-expand-demo', - templateUrl: 'table-row-expand-demo.html', - styleUrls: ['table-row-expand-demo.scss'] -}) -export class TableRowExpandDemo implements OnInit{ - products!: Product[]; - - constructor(private productService: ProductService) {} - - ngOnInit() { - this.productService.getProductsWithOrdersSmall().then((data) => (this.products = data)); - } - - getSeverity(status: string) { - switch (status) { - case 'INSTOCK': - return 'success'; - case 'LOWSTOCK': - return 'warning'; - case 'OUTOFSTOCK': - return 'danger'; - } - } - - getStatusSeverity(status: string){ - switch (status) { - case 'PENDING': - return 'warning'; - case 'DELIVERED': - return 'success'; - case 'CANCELLED': - return 'danger' - } - } -}`, - data: `{ - id: '1000', - code: 'f230fh0g3', - name: 'Bamboo Watch', - description: 'Product Description', - image: 'bamboo-watch.jpg', - price: 65, - category: 'Accessories', - quantity: 24, - inventoryStatus: 'INSTOCK', - rating: 5, - orders: [ - { - id: '1000-0', - productCode: 'f230fh0g3', - date: '2020-09-13', - amount: 65, - quantity: 1, - customer: 'David James', - status: 'PENDING' - }, - ... - ] -}, -...`, - 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/table/rowexpansiondoc.ts b/src/app/showcase/doc/table/rowexpansiondoc.ts new file mode 100644 index 00000000000..bcd8fe4311f --- /dev/null +++ b/src/app/showcase/doc/table/rowexpansiondoc.ts @@ -0,0 +1,410 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { MessageService } from 'primeng/api'; +import { TableRowCollapseEvent, TableRowExpandEvent } from 'primeng/table'; + +@Component({ + selector: 'row-expansion-doc', + template: ` +

        + Row expansion allows displaying detailed content for a particular row. To use this feature, add a template named rowexpansion and use the pRowToggler directive whose value is the row data instance on an element of your choice + whose click event toggles the expansion. This enables providing your custom UI such as buttons, links and so on. Example below uses an anchor with an icon as a toggler. Setting pRowTogglerDisabled as true disables the toggle + event for the element. +

        +         + +
        + + + +
        + + +
        +         + + + + Name + Image + Price + Category + Reviews + Status + + + + + + + + {{ product.name }} + + {{ product.price | currency : 'USD' }} + {{ product.category }} + + + + + + + + + +
        + + + + Id + Customer + Date + Amount + Status + + + + + + {{ order.id }} + {{ order.customer }} + {{ order.date }} + {{ order.amount | currency : 'USD' }} + + + + + + + + + There are no order for this product yet. + + + +
        + + +         +         +
        +         + `, + changeDetection: ChangeDetectionStrategy.OnPush, + providers: [MessageService] +}) +export class RowExpansionDoc { + products!: Product[]; + + expandedRows = {}; + + constructor(private productService: ProductService, private cd: ChangeDetectorRef, private messageService: MessageService) {} + + loadDemoData() { + this.productService.getProductsWithOrdersSmall().then((data) => { + this.products = data; + this.cd.markForCheck(); + }); + } + + expandAll() { + this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {}); + } + + collapseAll() { + this.expandedRows = {}; + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warning'; + case 'OUTOFSTOCK': + return 'danger'; + } + } + + getStatusSeverity(status: string) { + switch (status) { + case 'PENDING': + return 'warning'; + case 'DELIVERED': + return 'success'; + case 'CANCELLED': + return 'danger'; + } + } + + onRowExpand(event: TableRowExpandEvent) { + this.messageService.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 }); + } + + onRowCollapse(event: TableRowCollapseEvent) { + this.messageService.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 }); + } + + code: Code = { + basic: ` + + +
        + + +
        +         + + + + Name + Image + Price + Category + Reviews + Status + + + + + + + + {{ product.name }} + + {{ product.price | currency : 'USD' }} + {{ product.category }} + + + + + + + + + +
        + + + + Id + Customer + Date + Amount + Status + + + + + + {{ order.id }} + {{ order.customer }} + {{ order.date }} + {{ order.amount | currency : 'USD' }} + + + + + + + + + There are no order for this product yet. + + + +
        + + +         +        `, + html: `
        + + + +
        + + +
        +         + + + + Name + Image + Price + Category + Reviews + Status + + + + + + + + {{ product.name }} + + {{ product.price | currency : 'USD' }} + {{ product.category }} + + + + + + + + + +
        + + + + Id + Customer + Date + Amount + Status + + + + + + {{ order.id }} + {{ order.customer }} + {{ order.date }} + {{ order.amount | currency : 'USD' }} + + + + + + + + + There are no order for this product yet. + + + +
        + + +         +         +
        `, + typescript: `import { Component, OnInit } from '@angular/core'; +import { TableModule } from 'primeng/table'; +import { Product } from '@domain/product'; +import { TagModule } from 'primeng/tag'; +import { RatingModule } from 'primeng/rating'; +import { CommonModule } from '@angular/common'; +import { ButtonModule } from 'primeng/button'; +import { ProductService } from '@service/productservice'; +import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { TableRowCollapseEvent, TableRowExpandEvent } from 'primeng/table'; + +@Component({ + selector: 'table-row-expansion-demo', + templateUrl: 'table-row-expansion-demo.html', + standalone: true, + imports: [TableModule, TagModule, ToastModule, RatingModule, ButtonModule, CommonModule], + providers: [ProductService, MessageService] +}) +export class TableRowExpansionDemo implements OnInit{ + products!: Product[]; + + expandedRows = {}; + + constructor(private productService: ProductService, private messageService: MessageService) {} + + ngOnInit() { + this.productService.getProductsWithOrdersSmall().then((data) => (this.products = data)); + } + + expandAll() { + this.expandedRows = this.products.reduce((acc, p) => (acc[p.id] = true) && acc, {}); + } + + collapseAll() { + this.expandedRows = {}; + } + + getSeverity(status: string) { + switch (status) { + case 'INSTOCK': + return 'success'; + case 'LOWSTOCK': + return 'warning'; + case 'OUTOFSTOCK': + return 'danger'; + } + } + + getStatusSeverity(status: string) { + switch (status) { + case 'PENDING': + return 'warning'; + case 'DELIVERED': + return 'success'; + case 'CANCELLED': + return 'danger'; + } + } + + onRowExpand(event: TableRowExpandEvent) { + this.messageService.add({ severity: 'info', summary: 'Product Expanded', detail: event.data.name, life: 3000 }); + } + + onRowCollapse(event: TableRowCollapseEvent) { + this.messageService.add({ severity: 'success', summary: 'Product Collapsed', detail: event.data.name, life: 3000 }); + } +}`, + data: `{ + id: '1000', + code: 'f230fh0g3', + name: 'Bamboo Watch', + description: 'Product Description', + image: 'bamboo-watch.jpg', + price: 65, + category: 'Accessories', + quantity: 24, + inventoryStatus: 'INSTOCK', + rating: 5, + orders: [ + { + id: '1000-0', + productCode: 'f230fh0g3', + date: '2020-09-13', + amount: 65, + quantity: 1, + customer: 'David James', + status: 'PENDING' + }, + ... + ] +}, +...`, + 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/table/rowspangroupingdoc.ts b/src/app/showcase/doc/table/rowspangroupingdoc.ts index 6a919ca0d2b..290014783c1 100644 --- a/src/app/showcase/doc/table/rowspangroupingdoc.ts +++ b/src/app/showcase/doc/table/rowspangroupingdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'rowspan-grouping-doc', @@ -40,7 +40,7 @@ import { CustomerService } from '../../service/customerservice'; {{ customer.company }} - + {{ customer.date }} @@ -99,47 +99,13 @@ export class RowspanGroupingDoc { } code: Code = { - basic: ` - - - # - Representative - Name - Country - Company - Status - Date - - - - - {{rowIndex}} - - - {{customer.representative.name}} - - - {{customer.name}} - - - - {{customer.country.name}} - - - {{customer.company}} - - - - - - {{customer.date}} - - - -`, - html: ` -
        - + basic: ` # @@ -151,41 +117,115 @@ export class RowspanGroupingDoc { Date - - - {{rowIndex}} - - - {{customer.representative.name}} - - - {{customer.name}} - - - - {{customer.country.name}} - - - {{customer.company}} - - - - - - {{customer.date}} - - + + + {{rowIndex}} + + + {{customer.representative.name}} + + + {{customer.name}} + + + + {{customer.country.name}} + + + {{customer.company}} + + + + + + {{customer.date}} + + +`, + html: `
        + + + + # + Representative + Name + Country + Company + Status + Date + + + + + {{rowIndex}} + + + {{customer.representative.name}} + + + {{customer.name}} + + + + {{customer.country.name}} + + + {{customer.company}} + + + + + + {{customer.date}} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { HttpClientModule } from '@angular/common/http'; +import { TagModule } from 'primeng/tag'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-rowspan-grouping-demo', - templateUrl: 'table-rowspan-grouping-demo.html' + templateUrl: 'table-rowspan-grouping-demo.html', + standalone: true, + imports: [TableModule, HttpClientModule, TagModule, CommonModule], + providers: [CustomerService] }) export class TableRowspanGroupingDemo implements OnInit{ customers!: Customer[]; diff --git a/src/app/showcase/doc/table/selectioneventsdoc.ts b/src/app/showcase/doc/table/selectioneventsdoc.ts index 3363e441ee5..14017cf577f 100644 --- a/src/app/showcase/doc/table/selectioneventsdoc.ts +++ b/src/app/showcase/doc/table/selectioneventsdoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'selection-events-doc', @@ -11,7 +11,7 @@ import { ProductService } from '../../service/productservice';
        - + @@ -59,31 +59,15 @@ export class SelectionEventsDoc { } code: Code = { - basic: ` - - - - Code - Name - Category - Quantity - - - - - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - - -`, - html: ` -
        - - + basic: ` + Code @@ -100,18 +84,48 @@ export class SelectionEventsDoc { {{product.quantity}} +`, + html: `
        + + + + + Code + Name + Category + Quantity + + + + + {{product.code}} + {{product.name}} + {{product.category}} + {{product.quantity}} + +
        `, - typescript: ` -import { Component, Input, OnInit } from '@angular/core'; + typescript: `import { Component, Input, OnInit } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { ToastModule } from 'primeng/toast'; @Component({ selector: 'table-selection-events-demo', templateUrl: 'table-selection-events-demo.html', - providers: [MessageService] + standalone:true, + imports: [TableModule, ToastModule], + providers: [MessageService, ProductService] }) export class TableSelectionEventsDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/singlecolumnsortdoc.ts b/src/app/showcase/doc/table/singlecolumnsortdoc.ts index d6393b44975..65e94e6e042 100644 --- a/src/app/showcase/doc/table/singlecolumnsortdoc.ts +++ b/src/app/showcase/doc/table/singlecolumnsortdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'single-column-sort-doc', @@ -17,11 +17,10 @@ import { ProductService } from '../../service/productservice'; - Code - Name - Category - Quantity - Price + Code + Name + Category + Quantity @@ -30,7 +29,6 @@ import { ProductService } from '../../service/productservice'; {{ product.name }} {{ product.category }} {{ product.quantity }} - {{ product.price | currency : 'USD' }} @@ -55,54 +53,69 @@ export class SingleColumnSortDoc { basic: ` - Code - Name - Category - Quantity - Price + + Code + + + Name + + + Category + + + Quantity + - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - {{product.price | currency: 'USD'}} + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} `, - html: ` -
        + html: `
        - Code - Name - Category - Quantity - Price + + Code + + + Name + + + Category + + + Quantity + - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - {{product.price | currency: 'USD'}} + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }}
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-single-column-sort-demo', - templateUrl: 'table-single-column-sort-demo.html' + templateUrl: 'table-single-column-sort-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) export class TableSingleColumnSortDemo implements OnInit { products!: Product[]; diff --git a/src/app/showcase/doc/table/singleselectiondoc.ts b/src/app/showcase/doc/table/singleselectiondoc.ts index ae0e9741aaf..e9e290a077f 100644 --- a/src/app/showcase/doc/table/singleselectiondoc.ts +++ b/src/app/showcase/doc/table/singleselectiondoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'single-selection-doc', @@ -17,7 +17,11 @@ import { ProductService } from '../../service/productservice';
        - +
        + + +
        + Code @@ -45,6 +49,8 @@ export class SingleSelectionDoc { selectedProduct!: Product; + metaKey: boolean = true; + constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} loadDemoData() { @@ -55,27 +61,37 @@ export class SingleSelectionDoc { } code: Code = { - basic: ` - - - Code - Name - Category - Quantity - - - - - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - - -`, - html: ` -
        - + basic: ` + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + `, + + html: `
        +
        + + +
        + Code @@ -86,28 +102,36 @@ export class SingleSelectionDoc { - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }}
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-single-selection-demo', - templateUrl: 'table-single-selection-demo.html' + templateUrl: 'table-single-selection-demo.html', + standalone: true, + imports: [TableModule, InputSwitchModule, FormsModule, CommonModule], + providers: [ProductService] }) export class TableSingleSelectionDemo implements OnInit{ products!: Product[]; selectedProduct!: Product; + metaKey: boolean = true; + constructor(private productService: ProductService) {} ngOnInit() { diff --git a/src/app/showcase/doc/table/sizedoc.ts b/src/app/showcase/doc/table/sizedoc.ts index b828c9691fa..33781c3446d 100644 --- a/src/app/showcase/doc/table/sizedoc.ts +++ b/src/app/showcase/doc/table/sizedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'size-doc', @@ -11,7 +11,7 @@ import { ProductService } from '../../service/productservice';
        - +
        @@ -60,7 +60,12 @@ export class SizeDoc { code: Code = { basic: `
        - +
        @@ -80,10 +85,14 @@ export class SizeDoc { `, - html: ` -
        + html: `
        - +
        @@ -104,14 +113,19 @@ export class SizeDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { SelectButtonModule } from 'primeng/selectbutton'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-size-demo', - templateUrl: 'table-size-demo.html' + templateUrl: 'table-size-demo.html', + standalone: true, + imports: [TableModule, SelectButtonModule, CommonModule], + providers: [ProductService] }) export class TableSizeDemo { products!: Product[]; diff --git a/src/app/showcase/doc/table/statefuldoc.ts b/src/app/showcase/doc/table/statefuldoc.ts index b900ea0b9ad..e1d18c9bbf5 100644 --- a/src/app/showcase/doc/table/statefuldoc.ts +++ b/src/app/showcase/doc/table/statefuldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'stateful-doc', @@ -14,27 +14,33 @@ import { CustomerService } from '../../service/customerservice';
        - + + + + + + + + + - Name - Country - Representative - Status - - - - - - - - - - - - - - + Name + Country + Representative + Status @@ -55,7 +61,7 @@ import { CustomerService } from '../../service/customerservice'; Status - + @@ -77,7 +83,7 @@ import { CustomerService } from '../../service/customerservice'; Status - + @@ -126,102 +132,205 @@ export class StatefulDoc { } code: Code = { - basic: ` - - - Name - Country - Representative - Status - - - - - - - - - - - - - - - - - - - - Name - {{customer.name}} - - - Country - - {{customer.country.name}} - - - Representative - - {{customer.representative.name}} - - - Status - - - - - - - No customers found. - - + basic: ` + + + + + + + + + + + + Name + + + Country + + + Representative + + + Status + + + + + + + Name + {{ customer.name }} + + + Country + + {{ customer.country.name }} + + + Representative + + {{ customer.representative.name }} + + + Status + + + + + + + + Name + {{ customer.name }} + + + Country + + {{ customer.country.name }} + + + Representative + + {{ customer.representative.name }} + + + Status + + + + + + + No customers found. + + `, html: `
        - + + + + + + + + + - Name - Country - Representative - Status + + Name + + + Country + + + Representative + + + Status + + + + + + + Name + {{ customer.name }} + + + Country + + {{ customer.country.name }} + + + Representative + + {{ customer.representative.name }} + + + Status + + - - - - - - - - - - - - - - Name - {{customer.name}} + {{ customer.name }} Country - - {{customer.country.name}} + + {{ customer.country.name }} Representative - - {{customer.representative.name}} + + {{ customer.representative.name }} Status - + @@ -232,15 +341,22 @@ export class StatefulDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { HttpClientModule } from '@angular/common/http'; +import { InputTextModule } from 'primeng/inputtext'; +import { IconFieldModule } from 'primeng/iconfield'; +import { InputIconModule } from 'primeng/inputicon'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'table-stateful-demo', templateUrl: 'table-stateful-demo.html', - styleUrls: ['table-stateful-demo.scss'] + standalone: true, + imports: [TableModule, HttpClientModule, InputTextModule, TagModule, IconFieldModule, InputIconModule], + providers: [CustomerService] }) export class TableStatefulDemo implements OnInit{ customers!: Customer[]; diff --git a/src/app/showcase/doc/table/stripeddoc.ts b/src/app/showcase/doc/table/stripeddoc.ts index 173dd8b3920..acaf93ab987 100644 --- a/src/app/showcase/doc/table/stripeddoc.ts +++ b/src/app/showcase/doc/table/stripeddoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'striped-doc', @@ -46,27 +46,10 @@ export class StripedDoc { } code: Code = { - basic: ` - - - Code - Name - Category - Quantity - - - - - {{product.code}} - {{product.name}} - {{product.category}} - {{product.quantity}} - - -`, - html: ` -
        - + basic: ` Code @@ -83,16 +66,42 @@ export class StripedDoc { {{product.quantity}} +`, + html: `
        + + + + Code + Name + Category + Quantity + + + + + {{product.code}} + {{product.name}} + {{product.category}} + {{product.quantity}} + +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-striped-demo', - templateUrl: 'table-striped-demo.html' + templateUrl: 'table-striped-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) export class TableStripedDemo { products!: Product[]; diff --git a/src/app/showcase/doc/table/styledoc.ts b/src/app/showcase/doc/table/styledoc.ts index 8155d893a46..c44ca09e885 100644 --- a/src/app/showcase/doc/table/styledoc.ts +++ b/src/app/showcase/doc/table/styledoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; @Component({ selector: 'style-doc', @@ -95,8 +95,7 @@ export class StyleDoc {         `, - html: ` -
        + html: `
        @@ -120,15 +119,39 @@ export class StyleDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'table-style-demo', templateUrl: 'table-style-demo.html', - styleUrls: ['table-style-demo.scss'] + styles: [ + \`.outofstock { + font-weight: 700; + color: #ff5252; + text-decoration: line-through; + } + + .lowstock { + font-weight: 700; + color: #ffa726; + } + + .instock { + font-weight: 700; + color: #66bb6a; + } + + :host ::ng-deep .row-accessories { + background-color: rgba(0, 0, 0, 0.15) !important; + }\` + ], + standalone: true, + imports: [TableModule, CommonModule], + providers: [ProductService] }) export class TableStyleDemo implements OnInit{ products!: Product[]; diff --git a/src/app/showcase/doc/table/subheadergroupingdoc.ts b/src/app/showcase/doc/table/subheadergroupingdoc.ts index 72d68b02d64..925a5db1806 100644 --- a/src/app/showcase/doc/table/subheadergroupingdoc.ts +++ b/src/app/showcase/doc/table/subheadergroupingdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'subheader-grouping-doc', @@ -49,7 +49,7 @@ import { CustomerService } from '../../service/customerservice'; {{ customer.company }} - + {{ customer.date }} @@ -108,53 +108,15 @@ export class SubheaderGroupingDoc { } code: Code = { - basic: ` - - - Name - Country - Company - Status - Date - - - - - - - {{customer.representative.name}} - - - - - - Total Customers: {{calculateCustomerTotal(customer.representative.name)}} - - - - - - {{customer.name}} - - - - {{customer.country.name}} - - - {{customer.company}} - - - - - - {{customer.date}} - - - -`, - html: ` -
        - + basic: ` Name @@ -167,14 +129,20 @@ export class SubheaderGroupingDoc { - + {{customer.representative.name}} - Total Customers: {{calculateCustomerTotal(customer.representative.name)}} + + Total Customers: {{calculateCustomerTotal(customer.representative.name)}} + @@ -183,30 +151,100 @@ export class SubheaderGroupingDoc { {{customer.name}} - + {{customer.country.name}} {{customer.company}} - + {{customer.date}} +`, + html: `
        + + + + Name + Country + Company + Status + Date + + + + + + + {{customer.representative.name}} + + + + + + + Total Customers: {{calculateCustomerTotal(customer.representative.name)}} + + + + + + + {{customer.name}} + + + + {{customer.country.name}} + + + {{customer.company}} + + + + + + {{customer.date}} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { HttpClientModule } from '@angular/common/http'; +import { TagModule } from 'primeng/tag'; @Component({ selector: 'table-subheader-grouping-demo', - templateUrl: 'table-subheader-grouping-demo.html' + templateUrl: 'table-subheader-grouping-demo.html', + standalone: true, + imports: [TableModule, HttpClientModule, TagModule], + providers: [CustomerService] }) export class TableSubheaderGroupingDemo implements OnInit{ customers!: Customer[]; diff --git a/src/app/showcase/doc/table/tabledoc.module.ts b/src/app/showcase/doc/table/tabledoc.module.ts index 5bc4c656249..f2b3a5d86e9 100644 --- a/src/app/showcase/doc/table/tabledoc.module.ts +++ b/src/app/showcase/doc/table/tabledoc.module.ts @@ -27,7 +27,9 @@ import { ToggleButtonModule } from 'primeng/togglebutton'; import { ToolbarModule } from 'primeng/toolbar'; import { TooltipModule } from 'primeng/tooltip'; import { AppCodeModule } from 'src/app/showcase/layout/doc/app.code.component'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { IconFieldModule } from 'primeng/iconfield'; +import { InputIconModule } from 'primeng/inputicon'; import { ContextMenuDoc } from './contextmenudoc'; import { BasicDoc } from './basicdoc'; import { CellEditDoc } from './celleditdoc'; @@ -44,13 +46,13 @@ import { DynamicDoc } from './dynamicdoc'; import { ExpandableRowGroupDoc } from './expandablerowgroupdoc'; import { ExportDoc } from './exportdoc'; import { FilterMenuDoc } from './filtermenudoc'; -import { FilterRowDoc } from './filterrowdoc'; +import { FilterBasicDoc } from './filterbasic'; import { FlexibleScrollDoc } from './flexiblescrolldoc'; import { FrozenColumnsDoc } from './frozencolumnsdoc'; import { FrozenRowsDoc } from './frozenrowsdoc'; import { GridlinesDoc } from './gridlinesdoc'; import { ImportDoc } from './importdoc'; -import { HorizontalAndVerticalScrollDoc } from './horizontalandverticaldoc'; +import { HorizontalScrollDoc } from './horizontalscrolldoc'; import { LazyLoadDoc } from './lazyloaddoc'; import { MultipleSelectionDoc } from './multipleselectiondoc'; import { PageOnlySelectionDoc } from './pageonlyselectiondoc'; @@ -62,10 +64,9 @@ import { ReorderDoc } from './reorderdoc'; import { ResponsiveScrollDoc } from './responsivescrolldoc'; import { ResponsiveStackDoc } from './responsivestackdoc'; import { RowEditDoc } from './roweditdoc'; -import { RowExpandDoc } from './rowexpanddoc'; import { RowspanGroupingDoc } from './rowspangroupingdoc'; import { SingleColumnSortDoc } from './singlecolumnsortdoc'; -import { MultipleColumnSortDoc } from './multiplecolumnsortdoc'; +import { MultipleColumnsSortDoc } from './multiplecolumnssortdoc'; import { SingleSelectionDoc } from './singleselectiondoc'; import { SizeDoc } from './sizedoc'; import { StatefulDoc } from './statefuldoc'; @@ -82,6 +83,11 @@ import { SelectionEventsDoc } from './selectioneventsdoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { PaginatorLocaleDoc } from './paginatorlocaledoc'; import { DeferredDemo } from '../../demo/deferreddemo'; +import { PreSortDoc } from './presortdoc'; +import { RowExpansionDoc } from './rowexpansiondoc'; +import { FilterSortEditDoc } from './filtersorteditdoc'; +import { RemovableSortDoc } from './removablesortdoc'; +import { FilterAdvancedDoc } from './filteradvanceddoc'; @NgModule({ imports: [ @@ -114,7 +120,9 @@ import { DeferredDemo } from '../../demo/deferreddemo'; SelectButtonModule, AppCodeModule, AppDocModule, - DeferredDemo + DeferredDemo, + IconFieldModule, + InputIconModule, ], declarations: [ ImportDoc, @@ -136,12 +144,13 @@ import { DeferredDemo } from '../../demo/deferreddemo'; ExpandableRowGroupDoc, ExportDoc, FilterMenuDoc, - FilterRowDoc, + FilterBasicDoc, + FilterAdvancedDoc, FlexibleScrollDoc, FrozenColumnsDoc, FrozenRowsDoc, GridlinesDoc, - HorizontalAndVerticalScrollDoc, + HorizontalScrollDoc, LazyLoadDoc, MultipleSelectionDoc, PageOnlySelectionDoc, @@ -155,10 +164,11 @@ import { DeferredDemo } from '../../demo/deferreddemo'; ResponsiveScrollDoc, ResponsiveStackDoc, RowEditDoc, - RowExpandDoc, + FilterSortEditDoc, + RowExpansionDoc, RowspanGroupingDoc, SingleColumnSortDoc, - MultipleColumnSortDoc, + MultipleColumnsSortDoc, SingleSelectionDoc, SizeDoc, StatefulDoc, @@ -172,7 +182,9 @@ import { DeferredDemo } from '../../demo/deferreddemo'; StylingDoc, SelectionEventsDoc, AccessibilityDoc, - PaginatorLocaleDoc + PaginatorLocaleDoc, + PreSortDoc, + RemovableSortDoc ], exports: [AppDocModule] }) diff --git a/src/app/showcase/doc/table/templatedoc.ts b/src/app/showcase/doc/table/templatedoc.ts index 8200e98ad42..d799b51e1b1 100644 --- a/src/app/showcase/doc/table/templatedoc.ts +++ b/src/app/showcase/doc/table/templatedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; +import { Code } from '@domain/code'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; interface Column { field: string; @@ -19,7 +19,7 @@ interface Column {
        Products - +
        @@ -38,9 +38,9 @@ interface Column { {{ product.price | currency : 'USD' }} {{ product.category }} - + - + @@ -90,7 +90,7 @@ export class TemplateDoc {
        Products - +
        @@ -109,8 +109,8 @@ export class TemplateDoc { {{product.price | currency:'USD'}} {{product.category}} - - + + @@ -119,13 +119,12 @@ export class TemplateDoc {
        `, - html: ` -
        + html: `
        Products - +
        @@ -144,8 +143,8 @@ export class TemplateDoc { {{product.price | currency:'USD'}} {{product.category}} - - + + @@ -155,14 +154,21 @@ export class TemplateDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Product } from '../../domain/product'; -import { ProductService } from '../../service/productservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Product } from '@domain/product'; +import { ProductService } from '@service/productservice'; +import { TableModule } from 'primeng/table'; +import { TagModule } from 'primeng/tag'; +import { RatingModule } from 'primeng/rating'; +import { CommonModule } from '@angular/common'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'table-template-demo', - templateUrl: 'table-template-demo.html' + templateUrl: 'table-template-demo.html', + standalone: true, + imports: [TableModule, TagModule, RatingModule, ButtonModule, CommonModule], + providers: [ProductService] }) export class TableTemplateDemo implements OnInit { products!: Product[]; diff --git a/src/app/showcase/doc/table/verticalscrolldoc.ts b/src/app/showcase/doc/table/verticalscrolldoc.ts index 58659e26fa0..543b0fa7015 100644 --- a/src/app/showcase/doc/table/verticalscrolldoc.ts +++ b/src/app/showcase/doc/table/verticalscrolldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; +import { Code } from '@domain/code'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; @Component({ selector: 'vertical-scroll-doc', @@ -19,7 +19,7 @@ import { CustomerService } from '../../service/customerservice'; Representative - + {{ customer.name }} {{ customer.country.name }} @@ -46,27 +46,11 @@ export class VerticalScrollDoc { } code: Code = { - basic: ` - - - Name - Country - Company - Representative - - - - - {{customer.name}} - {{customer.country.name}} - {{customer.company}} - {{customer.representative.name}} - - -`, - html: ` -
        - + basic: ` Name @@ -83,16 +67,43 @@ export class VerticalScrollDoc { {{customer.representative.name}} +`, + html: `
        + + + + Name + Country + Company + Representative + + + + + {{customer.name}} + {{customer.country.name}} + {{customer.company}} + {{customer.representative.name}} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Customer } from '../../domain/customer'; -import { CustomerService } from '../../service/customerservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Customer } from '@domain/customer'; +import { CustomerService } from '@service/customerservice'; +import { TableModule } from 'primeng/table'; +import { HttpClientModule } from '@angular/common/http'; @Component({ selector: 'table-vertical-scroll-demo', - templateUrl: 'table-vertical-scroll-demo.html' + templateUrl: 'table-vertical-scroll-demo.html', + standalone: true, + imports: [TableModule, HttpClientModule], + providers: [CustomerService] }) export class TableVerticalScrollDemo implements OnInit{ customers!: Customer[]; diff --git a/src/app/showcase/doc/table/virtualscrolldoc.ts b/src/app/showcase/doc/table/virtualscrolldoc.ts index 031f648cc3d..c9628bdab99 100644 --- a/src/app/showcase/doc/table/virtualscrolldoc.ts +++ b/src/app/showcase/doc/table/virtualscrolldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { Car } from '../../domain/car'; -import { Code } from '../../domain/code'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { Code } from '@domain/code'; +import { CarService } from '@service/carservice'; interface Column { field: string; @@ -18,7 +18,7 @@ interface Column {
        - + @@ -62,25 +62,13 @@ export class VirtualScrollDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - {{ rowData[col.field] }} - - - -`, - html: ` -
        - + basic: ` @@ -95,12 +83,36 @@ export class VirtualScrollDoc { +`, + html: `
        + + + + + {{ col.header }} + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { Car } from '../../domain/car'; -import { CarService } from '../../service/carservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { Car } from '@domain/car'; +import { CarService } from '@service/carservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -109,7 +121,10 @@ interface Column { @Component({ selector: 'table-virtual-scroll-demo', - templateUrl: 'table-virtual-scroll-demo.html' + templateUrl: 'table-virtual-scroll-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [CarService] }) export class TableVirtualScrollDemo implements OnInit{ cars!: Car[]; diff --git a/src/app/showcase/doc/table/virtualscrolllazydoc.ts b/src/app/showcase/doc/table/virtualscrolllazydoc.ts index e24c8847528..a0894a1bef7 100644 --- a/src/app/showcase/doc/table/virtualscrolllazydoc.ts +++ b/src/app/showcase/doc/table/virtualscrolllazydoc.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { LazyLoadEvent } from 'primeng/api'; -import { Car } from '../../domain/car'; -import { Code } from '../../domain/code'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { Code } from '@domain/code'; +import { CarService } from '@service/carservice'; interface Column { field: string; @@ -19,7 +19,7 @@ interface Column {
        - + @@ -37,7 +37,7 @@ interface Column { - + @@ -84,34 +84,16 @@ export class VirtualScrollLazyDoc { } code: Code = { - basic: ` - - - - {{col.header}} - - - - - - - {{rowData[col.field]}} - - - - - - - - - - -`, - html: ` -
        - + basic: ` @@ -129,17 +111,51 @@ export class VirtualScrollLazyDoc { - + +`, + html: `
        + + + + + {{col.header}} + + + + + + + {{rowData[col.field]}} + + + + + + + + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { LazyLoadEvent } from 'primeng/api'; -import { Car } from '../../domain/car'; -import { CarService } from '../../service/carservice'; +import { Car } from '@domain/car'; +import { CarService } from '@service/carservice'; +import { TableModule } from 'primeng/table'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -148,7 +164,10 @@ interface Column { @Component({ selector: 'table-virtual-scroll-lazy-demo', - templateUrl: 'table-virtual-scroll-lazy-demo.html' + templateUrl: 'table-virtual-scroll-lazy-demo.html', + standalone: true, + imports: [TableModule, CommonModule], + providers: [CarService] }) export class TableVirtualScrollLazyDemo implements OnInit{ cars!: Car[]; diff --git a/src/app/showcase/doc/tabmenu/activedoc.ts b/src/app/showcase/doc/tabmenu/activedoc.ts index 92419eadbb0..ad757109359 100644 --- a/src/app/showcase/doc/tabmenu/activedoc.ts +++ b/src/app/showcase/doc/tabmenu/activedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'active-doc', diff --git a/src/app/showcase/doc/tabmenu/basicdoc.ts b/src/app/showcase/doc/tabmenu/basicdoc.ts index 6be07328958..c491827eae5 100644 --- a/src/app/showcase/doc/tabmenu/basicdoc.ts +++ b/src/app/showcase/doc/tabmenu/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

        TabMenu requires a collection of menuitems as its model.

        - +
        ` @@ -19,41 +19,40 @@ export class BasicDoc implements OnInit { ngOnInit() { this.items = [ - { label: 'Home', icon: 'pi pi-fw pi-home' }, - { label: 'Calendar', icon: 'pi pi-fw pi-calendar' }, - { label: 'Edit', icon: 'pi pi-fw pi-pencil' }, - { label: 'Documentation', icon: 'pi pi-fw pi-file' }, - { label: 'Settings', icon: 'pi pi-fw pi-cog' } - ]; + { label: 'Dashboard', icon: 'pi pi-home' }, + { label: 'Transactions', icon: 'pi pi-chart-line' }, + { label: 'Products', icon: 'pi pi-list' }, + { label: 'Messages', icon: 'pi pi-inbox' } + ] } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { TabMenuModule } from 'primeng/tabmenu'; @Component({ selector: 'tab-menu-basic-demo', - templateUrl: './tab-menu-basic-demo.html' + templateUrl: './tab-menu-basic-demo.html', + standalone: true, + imports: [TabMenuModule] }) export class TabMenuBasicDemo implements OnInit { items: MenuItem[] | undefined; ngOnInit() { this.items = [ - { label: 'Home', icon: 'pi pi-fw pi-home' }, - { label: 'Calendar', icon: 'pi pi-fw pi-calendar' }, - { label: 'Edit', icon: 'pi pi-fw pi-pencil' }, - { label: 'Documentation', icon: 'pi pi-fw pi-file' }, - { label: 'Settings', icon: 'pi pi-fw pi-cog' } - ]; + { label: 'Dashboard', icon: 'pi pi-home' }, + { label: 'Transactions', icon: 'pi pi-chart-line' }, + { label: 'Products', icon: 'pi pi-list' }, + { label: 'Messages', icon: 'pi pi-inbox' } + ] } }` }; diff --git a/src/app/showcase/doc/tabmenu/commanddoc.ts b/src/app/showcase/doc/tabmenu/commanddoc.ts new file mode 100644 index 00000000000..44954ebe17f --- /dev/null +++ b/src/app/showcase/doc/tabmenu/commanddoc.ts @@ -0,0 +1,118 @@ +import { Component, OnInit } from '@angular/core'; +import { MenuItem, MessageService } from 'primeng/api'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'command-doc', + template: ` + +

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

        +         +
        + + +
        + + `, + providers: [MessageService] +}) +export class CommandDoc implements OnInit { + items: MenuItem[] | undefined; + + constructor(private messageService: MessageService) {} + + ngOnInit() { + this.items = [ + { + label: 'Dashboard', + icon: 'pi pi-home', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 }); + } + }, + { + label: 'Transactions', + icon: 'pi pi-chart-line', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 }); + } + }, + { + label: 'Products', + icon: 'pi pi-list', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 }); + } + }, + { + label: 'Messages', + icon: 'pi pi-inbox', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 }); + } + } + ]; + } + + code: Code = { + basic: ` +`, + + html: `
        + + +
        `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem, MessageService } from 'primeng/api'; +import { TabMenuModule } from 'primeng/tabmenu'; +import { ToastModule } from 'primeng/toast'; + +@Component({ + selector: 'tab-menu-command-demo', + templateUrl: './tab-menu-command-demo.html', + standalone: true, + imports: [TabMenuModule, ToastModule], + providers: [MessageService] +}) +export class TabMenuCommandDemo implements OnInit { + items: MenuItem[] | undefined; + + constructor(private messageService: MessageService) {} + + ngOnInit() { + this.items = [ + { + label: 'Dashboard', + icon: 'pi pi-home', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Selected', detail: 'Dashboard', life: 3000 }); + } + }, + { + label: 'Transactions', + icon: 'pi pi-chart-line', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Selected', detail: 'Transactions', life: 3000 }); + } + }, + { + label: 'Products', + icon: 'pi pi-list', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Selected', detail: 'Products', life: 3000 }); + } + }, + { + label: 'Messages', + icon: 'pi pi-inbox', + command: () => { + this.messageService.add({ severity: 'success', summary: 'Selected', detail: 'Messages', life: 3000 }); + } + } + ]; + } + +}` + }; +} diff --git a/src/app/showcase/doc/tabmenu/controlleddoc.ts b/src/app/showcase/doc/tabmenu/controlleddoc.ts index 69b7c63a6cf..0ee456245b1 100644 --- a/src/app/showcase/doc/tabmenu/controlleddoc.ts +++ b/src/app/showcase/doc/tabmenu/controlleddoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'controlled-doc', @@ -9,8 +9,12 @@ import { Code } from '../../domain/code';

        For controlled mode, use activeItem property along with activeItemChange event are needed to manage the active item.

        - - +
        + + + +
        +
        ` @@ -22,11 +26,9 @@ export class ControlledDoc implements OnInit { ngOnInit() { this.items = [ - { label: 'Home', icon: 'pi pi-fw pi-home' }, - { label: 'Calendar', icon: 'pi pi-fw pi-calendar' }, - { label: 'Edit', icon: 'pi pi-fw pi-pencil' }, - { label: 'Documentation', icon: 'pi pi-fw pi-file' }, - { label: 'Settings', icon: 'pi pi-fw pi-cog' } + { label: 'Dashboard', icon: 'pi pi-home' }, + { label: 'Transactions', icon: 'pi pi-chart-line' }, + { label: 'Products', icon: 'pi pi-list' }, ]; this.activeItem = this.items[0]; @@ -36,27 +38,68 @@ export class ControlledDoc implements OnInit { this.activeItem = event; } - activateLast() { - this.activeItem = (this.items as MenuItem[])[(this.items as MenuItem[]).length - 1]; - } - code: Code = { - basic: ` -`, - - html: ` -
        - - + basic: `
        + + + +
        +`, + + html: `
        +
        + + + +
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { TabMenuModule } from 'primeng/tabmenu'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'tab-menu-controlled-demo', - templateUrl: './tab-menu-controlled-demo.html' + templateUrl: './tab-menu-controlled-demo.html', + standalone: true, + imports: [TabMenuModule, ButtonModule] }) export class TabMenuControlledDemo implements OnInit { items: MenuItem[] | undefined; @@ -65,11 +108,9 @@ export class TabMenuControlledDemo implements OnInit { ngOnInit() { this.items = [ - { label: 'Home', icon: 'pi pi-fw pi-home' }, - { label: 'Calendar', icon: 'pi pi-fw pi-calendar' }, - { label: 'Edit', icon: 'pi pi-fw pi-pencil' }, - { label: 'Documentation', icon: 'pi pi-fw pi-file' }, - { label: 'Settings', icon: 'pi pi-fw pi-cog' } + { label: 'Dashboard', icon: 'pi pi-home' }, + { label: 'Transactions', icon: 'pi pi-chart-line' }, + { label: 'Products', icon: 'pi pi-list' }, ]; this.activeItem = this.items[0]; @@ -78,10 +119,6 @@ export class TabMenuControlledDemo implements OnInit { onActiveItemChange(event: MenuItem) { this.activeItem = event; } - - activateLast() { - this.activeItem = (this.items as MenuItem[])[(this.items as MenuItem[]).length - 1]; - } }`, module: ` diff --git a/src/app/showcase/doc/tabmenu/importdoc.ts b/src/app/showcase/doc/tabmenu/importdoc.ts index e57544adf9f..95e70996aae 100644 --- a/src/app/showcase/doc/tabmenu/importdoc.ts +++ b/src/app/showcase/doc/tabmenu/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/tabmenu/routerdoc.ts b/src/app/showcase/doc/tabmenu/routerdoc.ts new file mode 100644 index 00000000000..3c79606ba99 --- /dev/null +++ b/src/app/showcase/doc/tabmenu/routerdoc.ts @@ -0,0 +1,130 @@ +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 directive, an external link or programmatic navigation.

        +         +
        + + + + + + {{ item.label }} + + + + + + {{ item.label }} + + + + +
        + + ` +}) +export class RouterDoc implements OnInit { + items: MenuItem[] | undefined; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' }, + { + label: 'Programmatic', + icon: 'pi pi-palette', + command: () => { + this.router.navigate(['/theming']); + } + }, + { label: 'External', icon: 'pi pi-link', url: 'https://angular.io/' } + ]; + } + + code: Code = { + basic: ` + + + + + + {{ item.label }} + + + + + + + + {{ item.label }} + + + + +`, + + html: `
        + + + + + + + {{ item.label }} + + + + + + + + {{ item.label }} + + + + + +
        `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { MenuItem } from 'primeng/api'; +import { Router } from '@angular/router'; +import { TabMenuModule } from 'primeng/tabmenu'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'tab-menu-router-demo', + templateUrl: './tab-menu-router-demo.html', + standalone: true, + imports: [TabMenuModule, CommonModule] +}) +export class TabMenuRouterDemo implements OnInit { + items: MenuItem[] | undefined; + + constructor(private router: Router) {} + + ngOnInit() { + this.items = [ + { label: 'Router Link', icon: 'pi pi-home', route: '/tabmenu' }, + { + label: 'Programmatic', + icon: 'pi pi-palette', + command: () => { + this.router.navigate(['/theming']); + } + }, + { label: 'External', icon: 'pi pi-link', url: 'https://angular.io/' } + ]; + } + +}` + }; +} diff --git a/src/app/showcase/doc/tabmenu/scrollabledoc.ts b/src/app/showcase/doc/tabmenu/scrollabledoc.ts index d562032b510..5c4fb0fe7f6 100644 --- a/src/app/showcase/doc/tabmenu/scrollabledoc.ts +++ b/src/app/showcase/doc/tabmenu/scrollabledoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'scrollable-doc', diff --git a/src/app/showcase/doc/tabmenu/tabmenudoc.module.ts b/src/app/showcase/doc/tabmenu/tabmenudoc.module.ts index 8fad35d700c..64bb406392a 100644 --- a/src/app/showcase/doc/tabmenu/tabmenudoc.module.ts +++ b/src/app/showcase/doc/tabmenu/tabmenudoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { TabMenuModule } from 'primeng/tabmenu'; import { ButtonModule } from 'primeng/button'; import { RippleModule } from 'primeng/ripple'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ActiveDoc } from './activedoc'; import { BasicDoc } from './basicdoc'; import { ControlledDoc } from './controlleddoc'; @@ -14,10 +14,13 @@ import { StyleDoc } from './styledoc'; import { ScrollableDoc } from './scrollabledoc'; import { TemplateDoc } from './templatedoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { CommandDoc } from './commanddoc'; +import { ToastModule } from 'primeng/toast'; +import { RouterDoc } from './routerdoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, TabMenuModule, ButtonModule, RippleModule, AppDocModule], - declarations: [BasicDoc, ScrollableDoc, ImportDoc, StyleDoc, ControlledDoc, ActiveDoc, TemplateDoc, AccessibilityDoc], + imports: [CommonModule, AppCodeModule, RouterModule, TabMenuModule, ButtonModule, RippleModule, AppDocModule, ToastModule], + declarations: [BasicDoc, ScrollableDoc, ImportDoc, StyleDoc, ControlledDoc, ActiveDoc, TemplateDoc, CommandDoc, RouterDoc, AccessibilityDoc], exports: [AppDocModule] }) export class TabMenuDocModule {} diff --git a/src/app/showcase/doc/tabmenu/templatedoc.ts b/src/app/showcase/doc/tabmenu/templatedoc.ts index 67a692aaa36..be01bf7dd7d 100644 --- a/src/app/showcase/doc/tabmenu/templatedoc.ts +++ b/src/app/showcase/doc/tabmenu/templatedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'tab-menu-template-demo', @@ -11,15 +11,9 @@ import { Code } from '../../domain/code';
        - -
        - - {{ item.label }} -
        -
        - {{ item.shortcut }} - -
        +         + + {{ item.name }}         @@ -33,58 +27,54 @@ export class TemplateDoc implements OnInit { activeItem: MenuItem | undefined; ngOnInit() { - this.items = [ - { label: 'Home', icon: 'pi pi-fw pi-home' }, - { label: 'Calendar', icon: 'pi pi-fw pi-calendar' }, - { label: 'Edit', icon: 'pi pi-fw pi-pencil' }, - { label: 'Documentation', icon: 'pi pi-fw pi-file' }, - { label: 'Settings', icon: 'pi pi-fw pi-cog' } - ]; - - this.activeItem = this.items[0]; + (this.items = [ + { name: 'Amy Elsner', image: 'amyelsner.png' }, + { name: 'Anna Fali', image: 'annafali.png' }, + { name: 'Asiya Javayant', image: 'asiyajavayant.png' } + ]), + (this.activeItem = this.items[0]); } code: Code = { basic: ` - -
        - - {{ item.label }} -
        -
        - {{ item.shortcut }} - -
        +         + + + {{ item.name }} +         `, - html: ` -
        + html: `
        - -
        - - {{ item.label }} -
        -
        - {{ item.shortcut }} - -
        +         + + + {{ item.name }} +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { MenuItem } from 'primeng/api'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { TabMenuModule } from 'primeng/tabmenu'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'tab-menu-template-demo', - templateUrl: './tab-menu-template-demo.html' + templateUrl: './tab-menu-template-demo.html', + standalone: true, + imports: [TabMenuModule, RippleModule] }) export class TabMenuTemplateDemo implements OnInit { items: MenuItem[] | undefined; diff --git a/src/app/showcase/doc/tabview/basicdoc.ts b/src/app/showcase/doc/tabview/basicdoc.ts index 0f0ff38a546..7e88535bd1a 100644 --- a/src/app/showcase/doc/tabview/basicdoc.ts +++ b/src/app/showcase/doc/tabview/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -37,26 +37,22 @@ export class BasicDoc { 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. + Lorem ipsum dolor sit amet...

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

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

        `, - html: ` -
        + html: `

        @@ -79,12 +75,14 @@ export class BasicDoc {

        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TabViewModule } from 'primeng/tabview'; @Component({ selector: 'tab-view-basic-demo', - templateUrl: './tab-view-basic-demo.html' + templateUrl: './tab-view-basic-demo.html', + standalone: true, + imports: [TabViewModule] }) export class TabViewBasicDemo {}` }; diff --git a/src/app/showcase/doc/tabview/closabledoc.ts b/src/app/showcase/doc/tabview/closabledoc.ts index 81206b9760a..443b2812f94 100644 --- a/src/app/showcase/doc/tabview/closabledoc.ts +++ b/src/app/showcase/doc/tabview/closabledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'closable-doc', @@ -37,26 +37,22 @@ export class ClosableDoc { 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. + Lorem ipsum dolor sit amet, consectetur adipiscing elit...

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

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

        `, - html: ` -
        + html: `

        @@ -79,12 +75,14 @@ export class ClosableDoc {

        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TabViewModule } from 'primeng/tabview'; @Component({ selector: 'tab-view-closable-demo', - templateUrl: './tab-view-closable-demo.html' + templateUrl: './tab-view-closable-demo.html', + standalone: true, + imports: [TabViewModule] }) export class TabViewClosableDemo {}` }; diff --git a/src/app/showcase/doc/tabview/controlleddoc.ts b/src/app/showcase/doc/tabview/controlleddoc.ts index afcd64577f3..7bec4f129ff 100644 --- a/src/app/showcase/doc/tabview/controlleddoc.ts +++ b/src/app/showcase/doc/tabview/controlleddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'controlled-doc', @@ -9,9 +9,9 @@ import { Code } from '../../domain/code';
        - - - + + +
        @@ -42,37 +42,64 @@ export class ControlledDoc { 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. + Lorem ipsum dolor sit amet, consectetur adipiscing elit...

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

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

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

        @@ -95,12 +122,15 @@ export class ControlledDoc {

        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { ButtonModule } from 'primeng/button'; +import { TabViewModule } from 'primeng/tabview'; @Component({ selector: 'tab-view-controlled-demo', - templateUrl: './tab-view-controlled-demo.html' + templateUrl: './tab-view-controlled-demo.html', + standalone: true, + imports: [ButtonModule, TabViewModule] }) export class TabViewControlledDemo { activeIndex: number = 0; diff --git a/src/app/showcase/doc/tabview/customtemplatedoc.ts b/src/app/showcase/doc/tabview/customtemplatedoc.ts index 98d6566deaa..3bf5d518471 100644 --- a/src/app/showcase/doc/tabview/customtemplatedoc.ts +++ b/src/app/showcase/doc/tabview/customtemplatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -11,8 +11,10 @@ import { Code } from '../../domain/code'; - - Header I +
        + + 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 @@ -21,8 +23,10 @@ import { Code } from '../../domain/code'; - - Header II +

        + + 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 @@ -31,9 +35,11 @@ import { Code } from '../../domain/code'; - - Header III - +

        + + 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 @@ -50,80 +56,113 @@ export class TemplateDoc { basic: ` - - Header I +

        + + + 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. + Lorem ipsum dolor sit amet...

        - - Header II +
        + + + 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. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...

        - - Header III - +
        + + + 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. + At vero eos et accusamus et iusto odio dignissimos...

        `, - html: ` -
        + html: `
        - - Header I +
        + + + 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. + Lorem ipsum dolor sit amet, consectetur adipiscing elit...

        - - Header II +
        + + + 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. + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...

        - - Header III - +
        + + + 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. + At vero eos et accusamus et iusto odio dignissimos...

        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TabViewModule } from 'primeng/tabview'; +import { BadgeModule } from 'primeng/badge'; +import { AvatarModule } from 'primeng/avatar'; @Component({ selector: 'tab-view-template-demo', - templateUrl: './tab-view-template-demo.html' + templateUrl: './tab-view-template-demo.html', + standalone: true, + imports: [TabViewModule, BadgeModule, AvatarModule] }) export class TabViewTemplateDemo {}` }; diff --git a/src/app/showcase/doc/tabview/disableddoc.ts b/src/app/showcase/doc/tabview/disableddoc.ts index fcd545c113d..5bd0c77a201 100644 --- a/src/app/showcase/doc/tabview/disableddoc.ts +++ b/src/app/showcase/doc/tabview/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -27,7 +27,7 @@ import { Code } from '../../domain/code'; 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,27 +38,23 @@ export class DisabledDoc { 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. + Lorem ipsum dolor sit amet, consectetur adipiscing elit...

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

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

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

        @@ -78,16 +74,18 @@ export class DisabledDoc { qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

        - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TabViewModule } from 'primeng/tabview'; @Component({ selector: 'tab-view-disabled-demo', - templateUrl: './tab-view-disabled-demo.html' + templateUrl: './tab-view-disabled-demo.html', + standalone: true, + imports: [TabViewModule] }) export class TabViewDisabledDemo {}` }; diff --git a/src/app/showcase/doc/tabview/dynamicdoc.ts b/src/app/showcase/doc/tabview/dynamicdoc.ts index 1b9611a12ca..faded60fef1 100644 --- a/src/app/showcase/doc/tabview/dynamicdoc.ts +++ b/src/app/showcase/doc/tabview/dynamicdoc.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'dynamic-doc', @@ -49,12 +49,15 @@ export class DynamicDoc implements OnInit {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { TabViewModule } from 'primeng/tabview'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'tab-view-basic-demo', - templateUrl: './tab-view-basic-demo.html' + templateUrl: './tab-view-basic-demo.html', + standalone: true, + imports: [TabViewModule, CommonModule] }) export class TabViewBasicDemo imlements onInit { tabs: { title: string, content: string }[] = []; diff --git a/src/app/showcase/doc/tabview/importdoc.ts b/src/app/showcase/doc/tabview/importdoc.ts index 08f03d3d09b..41a4aaa76b9 100644 --- a/src/app/showcase/doc/tabview/importdoc.ts +++ b/src/app/showcase/doc/tabview/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/tabview/lazydoc.ts b/src/app/showcase/doc/tabview/lazydoc.ts index f4de408f692..fe833adb4ac 100644 --- a/src/app/showcase/doc/tabview/lazydoc.ts +++ b/src/app/showcase/doc/tabview/lazydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'lazy-doc', @@ -48,12 +48,14 @@ export class LazyDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TabViewModule } from 'primeng/tabview'; @Component({ selector: 'tab-view-lazy-demo', - templateUrl: './tab-view-lazy-demo.html' + templateUrl: './tab-view-lazy-demo.html', + standalone: true, + imports: [TabViewModule] }) export class TabViewLazyDemo {}` }; diff --git a/src/app/showcase/doc/tabview/scrollabledoc.ts b/src/app/showcase/doc/tabview/scrollabledoc.ts index 0e1630b1237..4fa5075905a 100644 --- a/src/app/showcase/doc/tabview/scrollabledoc.ts +++ b/src/app/showcase/doc/tabview/scrollabledoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'scrollable-doc', @@ -29,8 +29,7 @@ export class ScrollableDoc { `, - html: ` -
        + html: `

        {{ tab.content }}

        @@ -38,12 +37,15 @@ export class ScrollableDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TabViewModule } from 'primeng/tabview'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'tab-view-scrollable-demo', - templateUrl: './tab-view-scrollable-demo.html' + templateUrl: './tab-view-scrollable-demo.html', + standalone: true, + imports: [TabViewModule, CommonModule] }) export class TabViewScrollableDemo { activeIndex: number = 0; diff --git a/src/app/showcase/doc/tabview/tabviewdoc.module.ts b/src/app/showcase/doc/tabview/tabviewdoc.module.ts index cfb081dd424..72a1dfe5948 100644 --- a/src/app/showcase/doc/tabview/tabviewdoc.module.ts +++ b/src/app/showcase/doc/tabview/tabviewdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { TabViewModule } from 'primeng/tabview'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +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'; @@ -16,9 +16,11 @@ import { ScrollableDoc } from './scrollabledoc'; import { LazyDoc } from './lazydoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; +import { AvatarModule } from 'primeng/avatar'; +import { BadgeModule } from 'primeng/badge'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, TabViewModule, RouterModule, ButtonModule], + imports: [CommonModule, AppCodeModule, AppDocModule, TabViewModule, RouterModule, ButtonModule, AvatarModule, BadgeModule], exports: [AppDocModule], declarations: [ImportDoc, BasicDoc, ControlledDoc, DynamicDoc, DisabledDoc, TemplateDoc, ClosableDoc, ScrollableDoc, LazyDoc, StyleDoc, AccessibilityDoc] }) diff --git a/src/app/showcase/doc/tag/basicdoc.ts b/src/app/showcase/doc/tag/basicdoc.ts index 035ef1d1c25..b35294674cd 100644 --- a/src/app/showcase/doc/tag/basicdoc.ts +++ b/src/app/showcase/doc/tag/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/tag/icondoc.ts b/src/app/showcase/doc/tag/icondoc.ts index 9b235966335..c936a7c56c1 100644 --- a/src/app/showcase/doc/tag/icondoc.ts +++ b/src/app/showcase/doc/tag/icondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'icon-doc', diff --git a/src/app/showcase/doc/tag/importdoc.ts b/src/app/showcase/doc/tag/importdoc.ts index 032722984b7..2720d0465c8 100644 --- a/src/app/showcase/doc/tag/importdoc.ts +++ b/src/app/showcase/doc/tag/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/tag/pilldoc.ts b/src/app/showcase/doc/tag/pilldoc.ts index cccbc8dcfcf..bef27c3b0fd 100644 --- a/src/app/showcase/doc/tag/pilldoc.ts +++ b/src/app/showcase/doc/tag/pilldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'pill-doc', diff --git a/src/app/showcase/doc/tag/severitydoc.ts b/src/app/showcase/doc/tag/severitydoc.ts index d1d6c16a93a..872ca3bfe77 100644 --- a/src/app/showcase/doc/tag/severitydoc.ts +++ b/src/app/showcase/doc/tag/severitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'severity-doc', diff --git a/src/app/showcase/doc/tag/tagdoc.module.ts b/src/app/showcase/doc/tag/tagdoc.module.ts index 607eb162e4f..3c34fb707e1 100644 --- a/src/app/showcase/doc/tag/tagdoc.module.ts +++ b/src/app/showcase/doc/tag/tagdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { TagModule } from 'primeng/tag'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { StyleDoc } from './styledoc'; import { BasicDoc } from './basicdoc'; import { IconDoc } from './icondoc'; diff --git a/src/app/showcase/doc/tag/templatedoc.ts b/src/app/showcase/doc/tag/templatedoc.ts index ae018647250..516467c69fb 100644 --- a/src/app/showcase/doc/tag/templatedoc.ts +++ b/src/app/showcase/doc/tag/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'tag-template-demo', diff --git a/src/app/showcase/doc/terminal/basicdoc.ts b/src/app/showcase/doc/terminal/basicdoc.ts index 0cfda858e2b..62eca32b78a 100644 --- a/src/app/showcase/doc/terminal/basicdoc.ts +++ b/src/app/showcase/doc/terminal/basicdoc.ts @@ -1,7 +1,7 @@ import { Component, OnDestroy } from '@angular/core'; import { TerminalService } from 'primeng/terminal'; import { Subscription } from 'rxjs'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/terminal/importdoc.ts b/src/app/showcase/doc/terminal/importdoc.ts index fd12f327da8..34645791dd3 100644 --- a/src/app/showcase/doc/terminal/importdoc.ts +++ b/src/app/showcase/doc/terminal/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/terminal/terminaldoc.module.ts b/src/app/showcase/doc/terminal/terminaldoc.module.ts index c537579f9e5..041769788a5 100644 --- a/src/app/showcase/doc/terminal/terminaldoc.module.ts +++ b/src/app/showcase/doc/terminal/terminaldoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { TerminalModule } from 'primeng/terminal'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/theming/builtinthemesdoc.ts b/src/app/showcase/doc/theming/builtinthemesdoc.ts index ff65a2f433f..25a382be853 100644 --- a/src/app/showcase/doc/theming/builtinthemesdoc.ts +++ b/src/app/showcase/doc/theming/builtinthemesdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'builtin-themes-doc', diff --git a/src/app/showcase/doc/theming/customthemedoc.ts b/src/app/showcase/doc/theming/customthemedoc.ts index f54618e1f04..2d3b06ca637 100644 --- a/src/app/showcase/doc/theming/customthemedoc.ts +++ b/src/app/showcase/doc/theming/customthemedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'custom-theme-doc', diff --git a/src/app/showcase/doc/theming/primeflexdoc.ts b/src/app/showcase/doc/theming/primeflexdoc.ts index 546b29fc612..c1653e523e0 100644 --- a/src/app/showcase/doc/theming/primeflexdoc.ts +++ b/src/app/showcase/doc/theming/primeflexdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'primeflex-doc', diff --git a/src/app/showcase/doc/theming/scalingdoc.ts b/src/app/showcase/doc/theming/scalingdoc.ts index 645023639df..e832e8aa6c0 100644 --- a/src/app/showcase/doc/theming/scalingdoc.ts +++ b/src/app/showcase/doc/theming/scalingdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'scaling-doc', diff --git a/src/app/showcase/doc/theming/scopedcssdoc.ts b/src/app/showcase/doc/theming/scopedcssdoc.ts index dc3627f67a5..994d265a54b 100644 --- a/src/app/showcase/doc/theming/scopedcssdoc.ts +++ b/src/app/showcase/doc/theming/scopedcssdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'scoped-css-doc', diff --git a/src/app/showcase/doc/theming/themingdoc.module.ts b/src/app/showcase/doc/theming/themingdoc.module.ts index 03934cb1b36..5e53a6f1482 100644 --- a/src/app/showcase/doc/theming/themingdoc.module.ts +++ b/src/app/showcase/doc/theming/themingdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { ButtonModule } from 'primeng/button'; import { PanelModule } from 'primeng/panel'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ArchitectureDoc } from './architecturedoc'; import { BuiltInThemesDoc } from './builtinthemesdoc'; import { CSSVariablesDoc } from './cssvariablesdoc'; diff --git a/src/app/showcase/doc/tieredmenu/basicdoc.ts b/src/app/showcase/doc/tieredmenu/basicdoc.ts index 07494695db6..ce1144de33e 100644 --- a/src/app/showcase/doc/tieredmenu/basicdoc.ts +++ b/src/app/showcase/doc/tieredmenu/basicdoc.ts @@ -9,7 +9,7 @@ import { Code } from '../../domain/code';

        TieredMenu requires a collection of menuitems as its model.

        - +
        ` @@ -90,19 +90,21 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, html: `
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { TieredMenuModule } from 'primeng/tieredmenu'; @Component({ selector: 'tiered-menu-basic-demo', - templateUrl: './tiered-menu-basic-demo.html' + templateUrl: './tiered-menu-basic-demo.html', + standalone: true, + imports: [TieredMenuModule] }) export class TieredMenuBasicDemo implements OnInit { items: MenuItem[] | undefined; diff --git a/src/app/showcase/doc/tieredmenu/commanddoc.ts b/src/app/showcase/doc/tieredmenu/commanddoc.ts index b10a0ba19e8..0c628361bf4 100644 --- a/src/app/showcase/doc/tieredmenu/commanddoc.ts +++ b/src/app/showcase/doc/tieredmenu/commanddoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { MessageService } from 'primeng/api'; @Component({ @@ -10,15 +10,18 @@ import { MessageService } from 'primeng/api';

        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; + + items: MenuItem[] | undefined; + + constructor(private messageService: MessageService) {} + ngOnInit() { this.items = [ { @@ -75,27 +78,33 @@ export class CommandDoc implements OnInit { } code: Code = { - basic: ` -`, + basic: ` +`, html: `
        - - + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; import { MessageService } from 'primeng/api'; +import { TieredMenuModule } from 'primeng/tieredmenu'; +import { ToastModule } from 'primeng/toast'; @Component({ selector: 'tiered-menu-command-demo', - templateUrl: './tiered-menu-command-demo.html' + templateUrl: './tiered-menu-command-demo.html', + standalone: true, + imports: [TieredMenuModule, ToastModule], + providers: [MessageService] }) export class TieredMenuCommandDemo implements OnInit { - constructor(private messageService: MessageService) {} + items: MenuItem[] | undefined; + constructor(private messageService: MessageService) {} + ngOnInit() { this.items = [ { diff --git a/src/app/showcase/doc/tieredmenu/importdoc.ts b/src/app/showcase/doc/tieredmenu/importdoc.ts index de278d654ae..3e5cbc6c266 100644 --- a/src/app/showcase/doc/tieredmenu/importdoc.ts +++ b/src/app/showcase/doc/tieredmenu/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/tieredmenu/popupdoc.ts b/src/app/showcase/doc/tieredmenu/popupdoc.ts index e0222f2c10a..358e7fa63e0 100644 --- a/src/app/showcase/doc/tieredmenu/popupdoc.ts +++ b/src/app/showcase/doc/tieredmenu/popupdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'popup-doc', @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';

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

        - - + +
        ` @@ -91,21 +91,24 @@ export class PopupDoc implements OnInit { } code: Code = { - basic: ` -`, + basic: ` +`, html: `
        - - + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { TieredMenuModule } from 'primeng/tieredmenu'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'tiered-menu-popup-demo', - templateUrl: './tiered-menu-popup-demo.html' + templateUrl: './tiered-menu-popup-demo.html', + standalone: true, + imports: [TieredMenuModule, ButtonModule] }) export class TieredMenuPopupDemo implements OnInit { items: MenuItem[] | undefined; diff --git a/src/app/showcase/doc/tieredmenu/routerdoc.ts b/src/app/showcase/doc/tieredmenu/routerdoc.ts index 21498873998..0c135abe614 100644 --- a/src/app/showcase/doc/tieredmenu/routerdoc.ts +++ b/src/app/showcase/doc/tieredmenu/routerdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; import { Router } from '@angular/router'; @Component({ @@ -41,9 +41,11 @@ import { Router } from '@angular/router'; ` }) export class RouterDoc implements OnInit { - constructor(private router: Router) {} + items: MenuItem[] | undefined; + constructor(private router: Router) {} + ngOnInit() { this.items = [ { @@ -113,7 +115,7 @@ export class RouterDoc implements OnInit {         `, html: `
        - + @@ -141,19 +143,24 @@ export class RouterDoc implements OnInit {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; import { Router } from '@angular/router'; +import { TieredMenuModule } from 'primeng/tieredmenu'; +import { CommonModule } from '@angular/common'; @Component({ selector: 'tiered-menu-router-demo', - templateUrl: './tiered-menu-router-demo.html' + templateUrl: './tiered-menu-router-demo.html', + standalone: true, + imports: [TieredMenuModule, CommonModule] }) export class TieredMenuRouterDemo implements OnInit { - constructor(private router: Router) {} + items: MenuItem[] | undefined; + constructor(private router: Router) {} + ngOnInit() { this.items = [ { diff --git a/src/app/showcase/doc/tieredmenu/templatedoc.ts b/src/app/showcase/doc/tieredmenu/templatedoc.ts index 3a8d26c2605..d3799c89a91 100644 --- a/src/app/showcase/doc/tieredmenu/templatedoc.ts +++ b/src/app/showcase/doc/tieredmenu/templatedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -14,7 +14,7 @@ import { Code } from '../../domain/code'; {{ item.label }} - + {{ item.shortcut }} @@ -111,38 +111,47 @@ export class TemplateDoc implements OnInit { code: Code = { basic: ` - - - - {{ item.label }} - - {{ item.shortcut }} - - - -`, - - html: `
        - {{ item.label }} - - {{ item.shortcut }} + + + {{ item.shortcut }} + +`, + + html: `
        + + + + + {{ item.label }} + + + {{ item.shortcut }} + + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { TieredMenuModule } from 'primeng/tieredmenu'; +import { BadgeModule } from 'primeng/badge'; +import { CommonModule } from '@angular/common'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'tiered-menu-template-demo', - templateUrl: './tiered-menu-template-demo.html' + templateUrl: './tiered-menu-template-demo.html', + standalone: true, + imports: [TieredMenuModule, BadgeModule, RippleModule, CommonModule] }) export class TieredMenuTemplateDemo implements OnInit { items: MenuItem[] | undefined; diff --git a/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts b/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts index e954c29f593..4b3bf568b55 100644 --- a/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts +++ b/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; 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 { 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'; @@ -16,9 +16,10 @@ import { RouterDoc } from './routerdoc'; import { StyleDoc } from './styledoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { MessageService } from 'primeng/api'; +import { FloatLabelModule } from 'primeng/floatlabel'; @NgModule({ - imports: [CommonModule, AppCodeModule, RouterModule, TieredMenuModule, ButtonModule, AppDocModule, BadgeModule, ToastModule], + imports: [CommonModule, AppCodeModule, RouterModule, TieredMenuModule, ButtonModule, AppDocModule, BadgeModule, ToastModule, FloatLabelModule], declarations: [BasicDoc, ImportDoc, PopupDoc, StyleDoc, AccessibilityDoc, TemplateDoc, CommandDoc, RouterDoc], exports: [AppDocModule], providers: [MessageService] diff --git a/src/app/showcase/doc/timeline/alignmentdoc.ts b/src/app/showcase/doc/timeline/alignmentdoc.ts index dc7bc6d071d..0023174d6e9 100644 --- a/src/app/showcase/doc/timeline/alignmentdoc.ts +++ b/src/app/showcase/doc/timeline/alignmentdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface EventItem { status?: string; @@ -68,8 +68,7 @@ export class AlignmentDoc { `, - html: ` -
        + html: `
        {{ event.status }} @@ -87,8 +86,8 @@ export class AlignmentDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TimelineModule } from 'primeng/timeline'; interface EventItem { status?: string; @@ -100,7 +99,9 @@ interface EventItem { @Component({ selector: 'timeline-alignment-demo', - templateUrl: './timeline-alignment-demo.html' + templateUrl: './timeline-alignment-demo.html', + standalone: true, + imports: [TimelineModule] }) export class TimelineAlignmentDemo { events: EventItem[]; diff --git a/src/app/showcase/doc/timeline/basicdoc.ts b/src/app/showcase/doc/timeline/basicdoc.ts index 296ba6ea2e7..5119f3a558f 100644 --- a/src/app/showcase/doc/timeline/basicdoc.ts +++ b/src/app/showcase/doc/timeline/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -39,8 +39,7 @@ export class BasicDoc { `, - html: ` -
        + html: `
        {{ event.status }} @@ -48,12 +47,14 @@ export class BasicDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TimelineModule } from 'primeng/timeline'; @Component({ selector: 'timeline-basic-demo', - templateUrl: './timeline-basic-demo.html' + templateUrl: './timeline-basic-demo.html', + standalone: true, + imports: [TimelineModule] }) export class TimelineBasicDemo { events: any[]; diff --git a/src/app/showcase/doc/timeline/horizontaldoc.ts b/src/app/showcase/doc/timeline/horizontaldoc.ts index 6e7f5d2e852..f99c001e60f 100644 --- a/src/app/showcase/doc/timeline/horizontaldoc.ts +++ b/src/app/showcase/doc/timeline/horizontaldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'horizontal-doc', @@ -52,11 +52,12 @@ export class HorizontalDoc { {{ event }} -   + +   + `, - html: ` -
        + html: `
        {{ event }} @@ -71,16 +72,20 @@ export class HorizontalDoc { {{ event }} -   + +   +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TimelineModule } from 'primeng/timeline'; @Component({ selector: 'timeline-horizontal-demo', - templateUrl: './timeline-horizontal-demo.html' + templateUrl: './timeline-horizontal-demo.html', + standalone: true, + imports: [TimelineModule] }) export class TimelineHorizontalDemo { events: string[]; diff --git a/src/app/showcase/doc/timeline/importdoc.ts b/src/app/showcase/doc/timeline/importdoc.ts index a93c5874174..4dce0fd6f5a 100644 --- a/src/app/showcase/doc/timeline/importdoc.ts +++ b/src/app/showcase/doc/timeline/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/timeline/oppositedoc.ts b/src/app/showcase/doc/timeline/oppositedoc.ts index a58755bf82d..a784c00a461 100644 --- a/src/app/showcase/doc/timeline/oppositedoc.ts +++ b/src/app/showcase/doc/timeline/oppositedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface EventItem { status?: string; @@ -50,8 +50,7 @@ export class OppositeDoc { `, - html: ` -
        + html: `
        {{ event.date }} @@ -62,8 +61,8 @@ export class OppositeDoc {
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TimelineModule } from 'primeng/timeline'; interface EventItem { status?: string; @@ -75,7 +74,9 @@ interface EventItem { @Component({ selector: 'timeline-opposite-demo', - templateUrl: './timeline-opposite-demo.html' + templateUrl: './timeline-opposite-demo.html', + standalone: true, + imports: [TimelineModule] }) export class TimelineOppositeDemo { events: EventItem[]; diff --git a/src/app/showcase/doc/timeline/templatedoc.ts b/src/app/showcase/doc/timeline/templatedoc.ts index 244347e0de1..ed42147ab6a 100644 --- a/src/app/showcase/doc/timeline/templatedoc.ts +++ b/src/app/showcase/doc/timeline/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface EventItem { status?: string; @@ -29,7 +29,7 @@ interface EventItem { Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

        - + @@ -52,45 +52,60 @@ export class TemplateDoc { code: Code = { basic: ` - - + + - +

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

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

        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

        - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TimelineModule } from 'primeng/timeline'; +import { CardModule } from 'primeng/card'; +import { ButtonModule } from 'primeng/button'; interface EventItem { status?: string; @@ -102,7 +117,9 @@ interface EventItem { @Component({ selector: 'timeline-template-demo', - templateUrl: './timeline-template-demo.html' + templateUrl: './timeline-template-demo.html', + standalone: true, + imports: [TimelineModule, CardModule, ButtonModule] }) export class TimelineTemplateDemo { events: EventItem[]; diff --git a/src/app/showcase/doc/timeline/timelinedoc.module.ts b/src/app/showcase/doc/timeline/timelinedoc.module.ts index e4ffcd05c92..3e4a504a866 100644 --- a/src/app/showcase/doc/timeline/timelinedoc.module.ts +++ b/src/app/showcase/doc/timeline/timelinedoc.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { TimelineModule } from 'primeng/timeline'; import { ImportDoc } from './importdoc'; import { BasicDoc } from './basicdoc'; diff --git a/src/app/showcase/doc/toast/animationdoc.ts b/src/app/showcase/doc/toast/animationdoc.ts index 2c85def428f..35bca011b12 100644 --- a/src/app/showcase/doc/toast/animationdoc.ts +++ b/src/app/showcase/doc/toast/animationdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'animation-doc', @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';

        Transition of the animations can be customized using the showTransitionOptions, hideTransitionOptions, showTransformOptions and hideTransformOptions properties.

        - - + +
        `, @@ -24,20 +24,31 @@ export class AnimationDoc { } code: Code = { - basic: ` -`, - html: ` -
        - - + basic: ` +`, + html: `
        + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-animation-demo', templateUrl: './toast-animation-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastAnimationDemo { diff --git a/src/app/showcase/doc/toast/basicdoc.ts b/src/app/showcase/doc/toast/basicdoc.ts index 1cf766c6439..2ba76023ea2 100644 --- a/src/app/showcase/doc/toast/basicdoc.ts +++ b/src/app/showcase/doc/toast/basicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -12,8 +12,8 @@ import { Code } from '../../domain/code';

        - - + +
        `, @@ -27,20 +27,23 @@ export class BasicDoc { } code: Code = { - basic: ` -`, - html: ` -
        - - + basic: ` +`, + html: `
        + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-basic-demo', templateUrl: './toast-basic-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastBasicDemo { diff --git a/src/app/showcase/doc/toast/cleardoc.ts b/src/app/showcase/doc/toast/cleardoc.ts index 9b47269f77f..3cf36209fb4 100644 --- a/src/app/showcase/doc/toast/cleardoc.ts +++ b/src/app/showcase/doc/toast/cleardoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'clear-doc', @@ -12,9 +12,9 @@ import { Code } from '../../domain/code';

        - - - + + +
        `, @@ -32,22 +32,39 @@ export class ClearDoc { } code: Code = { - basic: ` - -`, - html: ` -
        - - - + basic: ` + +`, + html: `
        + + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-clear-demo', templateUrl: './toast-clear-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastClearDemo { diff --git a/src/app/showcase/doc/toast/headlessdoc.ts b/src/app/showcase/doc/toast/headlessdoc.ts index 3e514df3396..c97d6fca735 100644 --- a/src/app/showcase/doc/toast/headlessdoc.ts +++ b/src/app/showcase/doc/toast/headlessdoc.ts @@ -1,6 +1,6 @@ import { ChangeDetectorRef, Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'headless-doc', @@ -17,32 +17,32 @@ import { Code } from '../../domain/code';

        {{ message.summary }}

        {{ message.detail }}

        - +
        - - + +
        - +
        `, providers: [MessageService] }) export class HeadlessDoc { - constructor(private messageService: MessageService, private cdr: ChangeDetectorRef) {} - visible: boolean = false; progress: number = 0; interval = null; + constructor(private messageService: MessageService, private cdr: ChangeDetectorRef) {} + showConfirm() { if (!this.visible) { this.messageService.add({ key: 'confirm', sticky: true, severity: 'custom', summary: 'Uploading your files.' }); @@ -72,59 +72,105 @@ export class HeadlessDoc { } code: Code = { - basic: ` - -
        - -
        -

        {{ message.summary }}

        -

        {{ message.detail }}

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

        + {{ message.summary }} +

        +

        + {{ message.detail }} +

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

        {{ message.summary }}

        -

        {{ message.detail }}

        -
        - - -
        -
        - - -
        -
        -
        -         + + +
        + +
        +

        + {{ message.summary }} +

        +

        + {{ message.detail }} +

        +
        + + +
        +
        + + +
        +
        +
        +         - +
        `, - typescript: ` -import { ChangeDetectorRef, Component } from '@angular/core'; + typescript: `import { ChangeDetectorRef, Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; +import { ProgressBarModule } from 'primeng/progressbar'; @Component({ selector: 'toast-headless-demo', templateUrl: './toast-headless-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule, ProgressBarModule], providers: [MessageService] -}) +}) export class ToastHeadlessDemo { - constructor(private messageService: MessageService,private cdr:ChangeDetectorRef) {} visible: boolean = false; @@ -132,6 +178,8 @@ export class ToastHeadlessDemo { interval = null; + constructor(private messageService: MessageService, private cdr: ChangeDetectorRef) {} + showConfirm() { if (!this.visible) { this.messageService.add({ key: 'confirm', sticky: true, severity: 'custom', summary: 'Uploading your files.' }); @@ -151,7 +199,7 @@ export class ToastHeadlessDemo { this.progress = 100; clearInterval(this.interval); } - this.cdr.detectChanges() + this.cdr.markForCheck(); }, 1000); } } diff --git a/src/app/showcase/doc/toast/importdoc.ts b/src/app/showcase/doc/toast/importdoc.ts index f2bef25c6f8..838e3cf75f6 100644 --- a/src/app/showcase/doc/toast/importdoc.ts +++ b/src/app/showcase/doc/toast/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/toast/lifedoc.ts b/src/app/showcase/doc/toast/lifedoc.ts index 86b593cec15..c42256eac22 100644 --- a/src/app/showcase/doc/toast/lifedoc.ts +++ b/src/app/showcase/doc/toast/lifedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'life-doc', @@ -9,9 +9,9 @@ import { Code } from '../../domain/code';

        A toast disappears after 3000ms by default, set the life option on either the message or toast to override this.

        - - - + + +
        `, @@ -29,22 +29,37 @@ export class LifeDoc { } code: Code = { - basic: ` - -`, - html: ` -
        - - - + basic: ` + +`, + html: `
        + + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-life-demo', templateUrl: './toast-life-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastLifeDemo { diff --git a/src/app/showcase/doc/toast/multipledoc.ts b/src/app/showcase/doc/toast/multipledoc.ts index fb03fa30268..e65b3dd9cf5 100644 --- a/src/app/showcase/doc/toast/multipledoc.ts +++ b/src/app/showcase/doc/toast/multipledoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'toast-multiple-demo', @@ -9,8 +9,8 @@ import { Code } from '../../domain/code';

        Multiple toasts are displayed by passing an array to the showAll method of the messageService.

        - - + +
        `, @@ -23,25 +23,37 @@ export class MultipleDoc { this.messageService.addAll([ { severity: 'success', summary: 'Message 1', detail: 'Message Content' }, { severity: 'info', summary: 'Message 2', detail: 'Message Content' }, - { severity: 'warn', summary: 'Message 3', detail: 'Message Content' } + { severity: 'warn', summary: 'Message 3', detail: 'Message Content' }, + { severity: 'error', summary: 'Message 4', detail: 'Message Content' } ]); } code: Code = { - basic: ` -`, - html: ` -
        - - + basic: ` +`, + html: `
        + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-multiple-demo', templateUrl: './toast-multiple-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastMultipleDemo { @@ -51,7 +63,8 @@ export class ToastMultipleDemo { this.messageService.addAll([ { severity: 'success', summary: 'Message 1', detail: 'Message Content' }, { severity: 'info', summary: 'Message 2', detail: 'Message Content' }, - { severity: 'warn', summary: 'Message 3', detail: 'Message Content' } + { severity: 'warn', summary: 'Message 3', detail: 'Message Content' }, + { severity: 'error', summary: 'Message 4', detail: 'Message Content' } ]); } }` diff --git a/src/app/showcase/doc/toast/positiondoc.ts b/src/app/showcase/doc/toast/positiondoc.ts index f43bd6dae5a..3d424fbf372 100644 --- a/src/app/showcase/doc/toast/positiondoc.ts +++ b/src/app/showcase/doc/toast/positiondoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'position-doc', @@ -9,12 +9,13 @@ import { Code } from '../../domain/code';

        Location of the toast is customized with the position property. Valid values are top-left, top-center, top-right, bottom-left, bottom-center, bottom-right and center.

        - - - - - - + + + + + + +
        `, @@ -24,57 +25,84 @@ export class PositionDoc { constructor(private messageService: MessageService) {} showTopLeft() { - this.messageService.add({ key: 'tl', severity: 'info', summary: 'Info', detail: 'Message Content' }); + this.messageService.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', key: 'tl', life: 3000 }); } - showTopCenter() { - this.messageService.add({ key: 'tc', severity: 'warn', summary: 'Warn', detail: 'Message Content' }); + showBottomLeft() { + this.messageService.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', key: 'bl', life: 3000 }); } - showBottomCenter() { - this.messageService.add({ key: 'bc', severity: 'success', summary: 'Success', detail: 'Message Content' }); + showBottomRight() { + this.messageService.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', key: 'br', life: 3000 }); } code: Code = { - basic: ` - - - - -`, + basic: ` + + + + + +`, - html: ` -
        - - - - - - + html: `
        + + + + + + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-position-demo', templateUrl: './toast-position-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastPositionDemo { constructor(private messageService: MessageService) {} showTopLeft() { - this.messageService.add({ key: 'tl', severity: 'info', summary: 'Info', detail: 'Message Content' }); + this.messageService.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', key: 'tl', life: 3000 }); } - showTopCenter() { - this.messageService.add({ key: 'tc', severity: 'warn', summary: 'Warn', detail: 'Message Content' }); + showBottomLeft() { + this.messageService.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', key: 'bl', life: 3000 }); } - showBottomCenter() { - this.messageService.add({ key: 'bc', severity: 'success', summary: 'Success', detail: 'Message Content' }); + showBottomRight() { + this.messageService.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', key: 'br', life: 3000 }); } }` }; diff --git a/src/app/showcase/doc/toast/responsivedoc.ts b/src/app/showcase/doc/toast/responsivedoc.ts index 557aca68c15..828232c234a 100644 --- a/src/app/showcase/doc/toast/responsivedoc.ts +++ b/src/app/showcase/doc/toast/responsivedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'responsive-doc', @@ -12,8 +12,8 @@ import { Code } from '../../domain/code';

        - - + +
        `, @@ -27,20 +27,23 @@ export class ResponsiveDoc { } code: Code = { - basic: ` -`, - html: ` -
        - - + basic: ` +`, + html: `
        + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-responsive-demo', templateUrl: './toast-responsive-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastResponsiveDemo { diff --git a/src/app/showcase/doc/toast/severitydoc.ts b/src/app/showcase/doc/toast/severitydoc.ts index 509d798cfa3..c6e92efc932 100644 --- a/src/app/showcase/doc/toast/severitydoc.ts +++ b/src/app/showcase/doc/toast/severitydoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'severity-doc', @@ -12,11 +12,11 @@ import { Code } from '../../domain/code';

        - - - - - + + + + +
        `, @@ -42,26 +42,69 @@ export class SeverityDoc { } code: Code = { - basic: ` - - - -`, - html: ` -
        - - - - - + basic: ` + + + +`, + html: `
        + + + + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-severity-demo', templateUrl: './toast-severity-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastSeverityDemo { diff --git a/src/app/showcase/doc/toast/stickydoc.ts b/src/app/showcase/doc/toast/stickydoc.ts index da13a164e97..3056c301265 100644 --- a/src/app/showcase/doc/toast/stickydoc.ts +++ b/src/app/showcase/doc/toast/stickydoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'sticky-doc', @@ -9,10 +9,10 @@ import { Code } from '../../domain/code';

        A toast disappears after the time defined by the life option, set sticky option true on the message to override this and not hide the toast automatically.

        - +
        - - + +
        @@ -31,26 +31,43 @@ export class StickyDoc { } code: Code = { - basic: ` + basic: `
        - - + +
        `, - html: ` -
        - + html: `
        +
        - - + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-sticky-demo', templateUrl: './toast-sticky-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastStickyDemo { diff --git a/src/app/showcase/doc/toast/targetdoc.ts b/src/app/showcase/doc/toast/targetdoc.ts index c858b04f4ed..4deb9075d9f 100644 --- a/src/app/showcase/doc/toast/targetdoc.ts +++ b/src/app/showcase/doc/toast/targetdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'target-doc', @@ -9,10 +9,10 @@ import { Code } from '../../domain/code';

        A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the key property so that toast and the message can match.

        - - - - + + + +
        `, @@ -32,24 +32,41 @@ export class TargetDoc { } code: Code = { - basic: ` - - -`, - html: ` -
        - - - - + basic: ` + + +`, + html: `
        + + + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; @Component({ selector: 'toast-target-demo', templateUrl: './toast-target-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule], providers: [MessageService] }) export class ToastTargetDemo { diff --git a/src/app/showcase/doc/toast/templatedoc.ts b/src/app/showcase/doc/toast/templatedoc.ts index a91205b4213..c74b9cf5f58 100644 --- a/src/app/showcase/doc/toast/templatedoc.ts +++ b/src/app/showcase/doc/toast/templatedoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -17,11 +17,11 @@ import { Code } from '../../domain/code'; Amy Elsner
        {{ message.summary }}
        - +
        - +
        `, @@ -50,41 +50,66 @@ export class TemplateDoc { } code: Code = { - basic: ` + basic: `
        - - Amy Elsner + + + Amy Elsner +
        -
        {{ message.summary }}
        - +
        + {{ message.summary }} +
        +
        -         -`, +         +`, html: `
        - - -
        -
        - - Amy Elsner + + +
        +
        + + + Amy Elsner + +
        +
        + {{ message.summary }} +
        +
        -
        {{ message.summary }}
        - -
        - + - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; +import { ToastModule } from 'primeng/toast'; +import { ButtonModule } from 'primeng/button'; +import { RippleModule } from 'primeng/ripple'; +import { AvatarModule } from 'primeng/avatar'; @Component({ selector: 'toast-template-demo', templateUrl: './toast-template-demo.html', + standalone: true, + imports: [ToastModule, ButtonModule, RippleModule, AvatarModule], providers: [MessageService] }) export class ToastTemplateDemo { diff --git a/src/app/showcase/doc/toast/toastdoc.module.ts b/src/app/showcase/doc/toast/toastdoc.module.ts index fe2b1cc974f..b7beb55e070 100644 --- a/src/app/showcase/doc/toast/toastdoc.module.ts +++ b/src/app/showcase/doc/toast/toastdoc.module.ts @@ -5,8 +5,8 @@ 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 { 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'; diff --git a/src/app/showcase/doc/togglebutton/accessibilitydoc.ts b/src/app/showcase/doc/togglebutton/accessibilitydoc.ts index 4796c0fe4b1..3739ac201df 100644 --- a/src/app/showcase/doc/togglebutton/accessibilitydoc.ts +++ b/src/app/showcase/doc/togglebutton/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -45,8 +45,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: `Remember Me - + -` +` }; } diff --git a/src/app/showcase/doc/togglebutton/basicdoc.ts b/src/app/showcase/doc/togglebutton/basicdoc.ts index d28ee033808..b87f0447801 100644 --- a/src/app/showcase/doc/togglebutton/basicdoc.ts +++ b/src/app/showcase/doc/togglebutton/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        Two-way binding to a boolean property is defined using the standard ngModel directive.

        - +
        ` @@ -17,19 +17,27 @@ export class BasicDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ selector: 'toggle-button-basic-demo', - templateUrl: './toggle-button-basic-demo.html' + templateUrl: './toggle-button-basic-demo.html', + standalone: true, + imports: [FormsModule, ToggleButtonModule] }) export class ToggleButtonBasicDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/togglebutton/customizeddoc.ts b/src/app/showcase/doc/togglebutton/customizeddoc.ts index 4d4d4ae6820..79e8090ff43 100644 --- a/src/app/showcase/doc/togglebutton/customizeddoc.ts +++ b/src/app/showcase/doc/togglebutton/customizeddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'customized-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        Icons and Labels can be customized using onLabel, offLabel, onIcon and offIcon properties.

        - +
        ` @@ -17,19 +17,39 @@ export class CustomizedDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ selector: 'toggle-button-customized-demo', - templateUrl: './toggle-button-customized-demo.html' + templateUrl: './toggle-button-customized-demo.html', + standalone: true, + imports: [FormsModule, ToggleButtonModule] }) export class ToggleButtonCustomizedDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/togglebutton/disableddoc.ts b/src/app/showcase/doc/togglebutton/disableddoc.ts index 636f9f33a11..5ed6f2ddc58 100644 --- a/src/app/showcase/doc/togglebutton/disableddoc.ts +++ b/src/app/showcase/doc/togglebutton/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

        - +
        ` @@ -17,18 +17,37 @@ export class DisabledDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, html: `
        - +
        `, - typescript: ` -import { Component } from '@angular/core'; - + typescript: `import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { ToggleButtonModule } from 'primeng/togglebutton'; + @Component({ selector: 'toggle-button-disabled-demo', - templateUrl: './toggle-button-disabled-demo.html' + templateUrl: './toggle-button-disabled-demo.html', + standalone: true, + imports: [FormsModule, ToggleButtonModule] }) export class ToggleButtonDisabledDemo { checked: boolean = false; diff --git a/src/app/showcase/doc/togglebutton/importdoc.ts b/src/app/showcase/doc/togglebutton/importdoc.ts index c500606091f..d2ada31ede4 100644 --- a/src/app/showcase/doc/togglebutton/importdoc.ts +++ b/src/app/showcase/doc/togglebutton/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts b/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts index 8c8ccb4c520..5d5e6e8ec1f 100644 --- a/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts +++ b/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
        - +
        @@ -27,23 +27,30 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
        - + `, - html: ` -
        + html: `
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { ToggleButtonModule } from 'primeng/togglebutton'; @Component({ selector: 'toggle-button-reactive-forms-demo', - templateUrl: './toggle-button-reactive-forms-demo.html' + templateUrl: './toggle-button-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, ToggleButtonModule] }) export class ToggleButtonReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/togglebutton/togglebuttondoc.module.ts b/src/app/showcase/doc/togglebutton/togglebuttondoc.module.ts index d7cc7762517..c4a0b6c21ad 100644 --- a/src/app/showcase/doc/togglebutton/togglebuttondoc.module.ts +++ b/src/app/showcase/doc/togglebutton/togglebuttondoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { ToggleButtonModule } from 'primeng/togglebutton'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { CustomizedDoc } from './customizeddoc'; diff --git a/src/app/showcase/doc/toolbar/accessibilitydoc.ts b/src/app/showcase/doc/toolbar/accessibilitydoc.ts index 77aed28b9bf..8598d125412 100644 --- a/src/app/showcase/doc/toolbar/accessibilitydoc.ts +++ b/src/app/showcase/doc/toolbar/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', diff --git a/src/app/showcase/doc/toolbar/basicdoc.ts b/src/app/showcase/doc/toolbar/basicdoc.ts index 0b85769eec0..94de71e1ddc 100644 --- a/src/app/showcase/doc/toolbar/basicdoc.ts +++ b/src/app/showcase/doc/toolbar/basicdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -11,9 +11,9 @@ import { Code } from '../../domain/code';
        - - - + + +
        @@ -22,7 +22,7 @@ import { Code } from '../../domain/code';
        - +
        @@ -48,9 +48,9 @@ export class BasicDoc implements OnInit { code: Code = { basic: `
        - - - + + +
        @@ -59,16 +59,16 @@ export class BasicDoc implements OnInit {
        - +
        `, html: `
        - - - + + +
        @@ -77,18 +77,23 @@ export class BasicDoc implements OnInit {
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem } from 'primeng/api'; +import { ToolbarModule } from 'primeng/toolbar'; +import { ButtonModule } from 'primeng/button'; +import { SplitButtonModule } from 'primeng/splitbutton'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'toolbar-basic-demo', - templateUrl: './toolbar-basic-demo.html' + templateUrl: './toolbar-basic-demo.html', + standalone: true, + imports: [ToolbarModule, ButtonModule, SplitButtonModule, InputTextModule] }) export class ToolbarBasicDemo implements OnInit { items: MenuItem[] | undefined; diff --git a/src/app/showcase/doc/toolbar/importdoc.ts b/src/app/showcase/doc/toolbar/importdoc.ts index 6577718f252..7a04f8a865a 100644 --- a/src/app/showcase/doc/toolbar/importdoc.ts +++ b/src/app/showcase/doc/toolbar/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/toolbar/templatedoc.ts b/src/app/showcase/doc/toolbar/templatedoc.ts index a6e3060dd1d..ed408697d63 100644 --- a/src/app/showcase/doc/toolbar/templatedoc.ts +++ b/src/app/showcase/doc/toolbar/templatedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -32,52 +32,80 @@ import { Code } from '../../domain/code'; }) export class TemplateDoc { code: Code = { - basic: ` + basic: `
        - - - + + +
        - - Amy Elsner + + + Amy Elsner +
        `, html: `
        - +
        - - - + + +
        - - Amy Elsner + + + Amy Elsner +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { ToolbarModule } from 'primeng/toolbar'; +import { AvatarModule } from 'primeng/avatar'; +import { SharedModule } from 'primeng/api'; @Component({ selector: 'toolbar-template-demo', - templateUrl: './toolbar-template-demo.html' + templateUrl: './toolbar-template-demo.html', + standalone: true, + imports: [ToolbarModule, AvatarModule, SharedModule] }) export class ToolbarTemplateDemo { diff --git a/src/app/showcase/doc/toolbar/toolbardoc.module.ts b/src/app/showcase/doc/toolbar/toolbardoc.module.ts index f634ab2ef93..8fde0071737 100644 --- a/src/app/showcase/doc/toolbar/toolbardoc.module.ts +++ b/src/app/showcase/doc/toolbar/toolbardoc.module.ts @@ -6,8 +6,8 @@ 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'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; diff --git a/src/app/showcase/doc/tooltip/autohidedoc.ts b/src/app/showcase/doc/tooltip/autohidedoc.ts index 6e1de2ed7c4..ab0be385376 100644 --- a/src/app/showcase/doc/tooltip/autohidedoc.ts +++ b/src/app/showcase/doc/tooltip/autohidedoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'auto-hide-doc', @@ -16,21 +16,41 @@ import { Code } from '../../domain/code'; }) export class AutoHideDoc { code: Code = { - basic: ` -`, + basic: ` +`, - html: ` -
        - - + html: `
        + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TooltipModule } from 'primeng/tooltip'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'tooltip-auto-hide-demo', - templateUrl: './tooltip-auto-hide-demo.html' + templateUrl: './tooltip-auto-hide-demo.html', + standalone: true, + imports: [TooltipModule, InputTextModule] }) export class TooltipAutoHideDemo {}` }; diff --git a/src/app/showcase/doc/tooltip/basicdoc.ts b/src/app/showcase/doc/tooltip/basicdoc.ts index c5a6afa3c46..f8cca0058c1 100644 --- a/src/app/showcase/doc/tooltip/basicdoc.ts +++ b/src/app/showcase/doc/tooltip/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', diff --git a/src/app/showcase/doc/tooltip/customdoc.ts b/src/app/showcase/doc/tooltip/customdoc.ts new file mode 100644 index 00000000000..f8ede1ca1b1 --- /dev/null +++ b/src/app/showcase/doc/tooltip/customdoc.ts @@ -0,0 +1,60 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'custom-doc', + template: ` + +

        Tooltip can use either a string or a TemplateRef.

        +         +
        + + +
        + PrimeNG rocks! +
        +         +
        + + ` +}) +export class CustomDoc { + code: Code = { + basic: ` + +
        + PrimeNG rocks! +
        +        `, + + html: `
        + + +
        + PrimeNG rocks! +
        +         +
        `, + typescript: `import { Component } from '@angular/core'; +import { TooltipModule } from 'primeng/tooltip'; +import { ButtonModule } from 'primeng/button'; + +@Component({ + selector: 'tooltip-custom-demo', + templateUrl: './tooltip-custom-demo.html', + standalone: true, + imports: [TooltipModule, ButtonModule] +}) +export class TooltipCustomDemo { + +}` + }; +} diff --git a/src/app/showcase/doc/tooltip/delaydoc.ts b/src/app/showcase/doc/tooltip/delaydoc.ts index 2b9b3d3741f..478d06b8499 100644 --- a/src/app/showcase/doc/tooltip/delaydoc.ts +++ b/src/app/showcase/doc/tooltip/delaydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'delay-doc', @@ -8,25 +8,36 @@ 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: `
        - +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TooltipModule } from 'primeng/tooltip'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'tooltip-delay-demo', - templateUrl: './tooltip-delay-demo.html' + templateUrl: './tooltip-delay-demo.html', + standalone: true, + imports: [TooltipModule, ButtonModule] }) export class TooltipDelayDemo {}` }; diff --git a/src/app/showcase/doc/tooltip/eventdoc.ts b/src/app/showcase/doc/tooltip/eventdoc.ts index d0cec6d1f63..c9d5d46ae0f 100644 --- a/src/app/showcase/doc/tooltip/eventdoc.ts +++ b/src/app/showcase/doc/tooltip/eventdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'event-doc', @@ -15,19 +15,31 @@ import { Code } from '../../domain/code'; }) export class EventDoc { code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TooltipModule } from 'primeng/tooltip'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'tooltip-event-demo', - templateUrl: './tooltip-event-demo.html' + templateUrl: './tooltip-event-demo.html', + standalone: true, + imports: [TooltipModule, InputTextModule] }) export class TooltipEventDemo {}` }; diff --git a/src/app/showcase/doc/tooltip/importdoc.ts b/src/app/showcase/doc/tooltip/importdoc.ts index 7365558d563..af4c556d6d6 100644 --- a/src/app/showcase/doc/tooltip/importdoc.ts +++ b/src/app/showcase/doc/tooltip/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/tooltip/optionsdoc.ts b/src/app/showcase/doc/tooltip/optionsdoc.ts index 9dc0d655f63..41874c77940 100644 --- a/src/app/showcase/doc/tooltip/optionsdoc.ts +++ b/src/app/showcase/doc/tooltip/optionsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'options-doc', @@ -22,19 +22,31 @@ export class OptionsDoc { }; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TooltipModule } from 'primeng/tooltip'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'tooltip-options-demo', - templateUrl: './tooltip-options-demo.html' + templateUrl: './tooltip-options-demo.html', + standalone: true, + imports: [TooltipModule, InputTextModule] }) export class TooltipOptionsDemo { tooltipOptions = { diff --git a/src/app/showcase/doc/tooltip/positiondoc.ts b/src/app/showcase/doc/tooltip/positiondoc.ts index 2fedcad69f3..2851e1644af 100644 --- a/src/app/showcase/doc/tooltip/positiondoc.ts +++ b/src/app/showcase/doc/tooltip/positiondoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'position-doc', @@ -18,25 +18,67 @@ import { Code } from '../../domain/code'; }) export class PositionDoc { code: Code = { - basic: ` - - -`, + basic: ` + + +`, - html: ` -
        - - - - + html: `
        + + + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TooltipModule } from 'primeng/tooltip'; +import { InputTextModule } from 'primeng/inputtext'; @Component({ selector: 'tooltip-position-demo', - templateUrl: './tooltip-position-demo.html' + templateUrl: './tooltip-position-demo.html', + standalone: true, + imports: [TooltipModule, InputTextModule] }) export class TooltipPositionDemo {}` }; diff --git a/src/app/showcase/doc/tooltip/templatedoc.ts b/src/app/showcase/doc/tooltip/templatedoc.ts deleted file mode 100644 index bd306becdb4..00000000000 --- a/src/app/showcase/doc/tooltip/templatedoc.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; - -@Component({ - selector: 'template-doc', - template: ` - -

        Tooltip can use either a string or a TemplateRef.

        -         -
        - - -
        - - PrimeNG rocks! -
        -         -
        - - ` -}) -export class TemplateDoc { - code: Code = { - basic: ` - -
        - - PrimeNG rocks! -
        -        `, - - html: `
        - - -
        - - PrimeNG rocks! -
        -         -
        `, - typescript: ` -import { Component } from '@angular/core'; - -@Component({ - selector: 'tooltip-template-demo', - templateUrl: './tooltip-template-demo.html' -}) -export class TooltipTemplateDemo { - -}` - }; -} diff --git a/src/app/showcase/doc/tooltip/tooltipdoc.module.ts b/src/app/showcase/doc/tooltip/tooltipdoc.module.ts index 35531984cfb..f570b2b61f4 100644 --- a/src/app/showcase/doc/tooltip/tooltipdoc.module.ts +++ b/src/app/showcase/doc/tooltip/tooltipdoc.module.ts @@ -4,8 +4,8 @@ import { RouterModule } from '@angular/router'; import { TooltipModule } from 'primeng/tooltip'; import { ButtonModule } from 'primeng/button'; import { InputTextModule } from 'primeng/inputtext'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { BasicDoc } from './basicdoc'; import { ImportDoc } from './importdoc'; import { StyleDoc } from './styledoc'; @@ -15,11 +15,11 @@ import { AutoHideDoc } from './autohidedoc'; import { DelayDoc } from './delaydoc'; import { OptionsDoc } from './optionsdoc'; import { AccessibilityDoc } from './accessibilitydoc'; -import { TemplateDoc } from './templatedoc'; +import { CustomDoc } from './customdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, RouterModule, TooltipModule, ButtonModule, InputTextModule, AppDocModule], - declarations: [BasicDoc, ImportDoc, StyleDoc, PositionDoc, EventDoc, AutoHideDoc, DelayDoc, TemplateDoc, OptionsDoc, AccessibilityDoc], + declarations: [BasicDoc, ImportDoc, StyleDoc, PositionDoc, EventDoc, AutoHideDoc, DelayDoc, CustomDoc, OptionsDoc, AccessibilityDoc], exports: [AppDocModule] }) export class TooltipDocModule {} diff --git a/src/app/showcase/doc/tree/basicdoc.ts b/src/app/showcase/doc/tree/basicdoc.ts index e761f4b4dca..36a25973cf6 100644 --- a/src/app/showcase/doc/tree/basicdoc.ts +++ b/src/app/showcase/doc/tree/basicdoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'basic-doc', @@ -10,7 +10,7 @@ import { NodeService } from '../../service/nodeservice';

        Tree component requires an array of TreeNode objects as its value.

        - +
        ` @@ -25,21 +25,23 @@ export class BasicDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-basic-demo', - templateUrl: './tree-basic-demo.html' + templateUrl: './tree-basic-demo.html', + standalone: true, + imports: [TreeModule], + providers: [NodeService] }) export class TreeBasicDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/checkboxdoc.ts b/src/app/showcase/doc/tree/checkboxdoc.ts index 91fbcff9a46..bedaa7825a6 100644 --- a/src/app/showcase/doc/tree/checkboxdoc.ts +++ b/src/app/showcase/doc/tree/checkboxdoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'checkbox-doc', @@ -10,7 +10,7 @@ import { NodeService } from '../../service/nodeservice';

        Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

        - +
        ` @@ -27,21 +27,31 @@ export class CheckboxDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-checkbox-demo', - templateUrl: './tree-checkbox-demo.html' + templateUrl: './tree-checkbox-demo.html', + standalone: true, + imports: [TreeModule], + providers: [NodeService] }) export class TreeCheckboxDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/contextmenudoc.ts b/src/app/showcase/doc/tree/contextmenudoc.ts index e80fb64a40e..5fbca6ef47b 100644 --- a/src/app/showcase/doc/tree/contextmenudoc.ts +++ b/src/app/showcase/doc/tree/contextmenudoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService, TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'context-menu-doc', @@ -10,9 +10,9 @@ import { NodeService } from '../../service/nodeservice';

        Tree requires a collection of TreeNode instances as a value.

        - - - + + +
        `, @@ -45,26 +45,39 @@ export class ContextMenuDoc implements OnInit { } code: Code = { - basic: ` - -`, - - html: ` -
        - - - + basic: ` + +`, + + html: `
        + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService, TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; +import { ContextMenuModule } from 'primeng/contextmenu'; +import { ToastModule } from 'primeng/toast'; @Component({ selector: 'tree-context-menu-demo', templateUrl: './tree-context-menu-demo.html', - providers:[MessageService] + standalone: true, + imports: [TreeModule, ContextMenuModule, ToastModule], + providers: [MessageService, NodeService] }) export class TreeContextMenuDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/controlleddoc.ts b/src/app/showcase/doc/tree/controlleddoc.ts index 845ff2e0cd0..afc13c05f55 100644 --- a/src/app/showcase/doc/tree/controlleddoc.ts +++ b/src/app/showcase/doc/tree/controlleddoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'controlled-doc', @@ -11,10 +11,10 @@ import { NodeService } from '../../service/nodeservice';
        - - + +
        - +
        ` @@ -51,28 +51,44 @@ export class ControlledDoc implements OnInit { code: Code = { basic: `
        - - + +
        -`, +`, - html: ` -
        + html: `
        - - + +
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'tree-controlled-demo', - templateUrl: './tree-controlled-demo.html' + templateUrl: './tree-controlled-demo.html', + standalone: true, + imports: [TreeModule, ButtonModule], + providers: [NodeService] }) export class TreeControlledDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/dragdropdoc.ts b/src/app/showcase/doc/tree/dragdropdoc.ts index 78735388146..60061d1de59 100644 --- a/src/app/showcase/doc/tree/dragdropdoc.ts +++ b/src/app/showcase/doc/tree/dragdropdoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { TreeDragDropService, TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'drag-drop-doc', @@ -10,7 +10,7 @@ import { NodeService } from '../../service/nodeservice';

        Nodes can be reordered within the same tree and also can be transferred between other trees using drag&drop.

        - +
        `, @@ -26,22 +26,35 @@ export class DragDropDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeDragDropService, TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-drag-drop-demo', templateUrl: './tree-drag-drop-demo.html', - providers: [TreeDragDropService] + standalone: true, + imports: [TreeModule], + providers: [TreeDragDropService, NodeService] }) export class TreeDragDropDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/eventdoc.ts b/src/app/showcase/doc/tree/eventdoc.ts index a8f99b7f5eb..a7e0fc8ed2e 100644 --- a/src/app/showcase/doc/tree/eventdoc.ts +++ b/src/app/showcase/doc/tree/eventdoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { MessageService, TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'event-doc', @@ -10,7 +10,7 @@ import { NodeService } from '../../service/nodeservice';

        An event is provided for each type of user interaction such as expand, collapse and selection.

        - + + />
        `, @@ -54,25 +54,41 @@ export class EventDoc implements OnInit { } code: Code = { - basic: ``, - - html: ` -
        - - + basic: ``, + + html: `
        + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MessageService, TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; +import { ToastModule } from 'primeng/toast'; @Component({ selector: 'tree-events-demo', templateUrl: './tree-events-demo.html', - providers: [MessageService] + standalone: true, + imports: [TreeModule, ToastModule], + providers: [MessageService, NodeService] }) export class TreeEventsDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/filterdoc.ts b/src/app/showcase/doc/tree/filterdoc.ts index 6382cccad50..4e30f50ac70 100644 --- a/src/app/showcase/doc/tree/filterdoc.ts +++ b/src/app/showcase/doc/tree/filterdoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'filter-doc', @@ -14,8 +14,8 @@ import { NodeService } from '../../service/nodeservice';

        - - + +
        ` @@ -30,23 +30,43 @@ export class FilterDoc implements OnInit { } code: Code = { - basic: ` -`, + basic: ` +`, - html: ` -
        - - + html: `
        + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-filter-demo', - templateUrl: './tree-filter-demo.html' + templateUrl: './tree-filter-demo.html', + standalone: true, + imports: [TreeModule], + providers: [NodeService] }) export class TreeFilterDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/importdoc.ts b/src/app/showcase/doc/tree/importdoc.ts index f042c7631bc..cd1c9f6dfd6 100644 --- a/src/app/showcase/doc/tree/importdoc.ts +++ b/src/app/showcase/doc/tree/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/tree/lazydoc.ts b/src/app/showcase/doc/tree/lazydoc.ts index 33241753d1f..518a819748c 100644 --- a/src/app/showcase/doc/tree/lazydoc.ts +++ b/src/app/showcase/doc/tree/lazydoc.ts @@ -1,15 +1,25 @@ import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'lazy-demo', template: ` -

        Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using loading property and onNodeExpand method.

        +

        + Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using loading property and onNodeExpand method. Default value of loadingMode is mask and also + icon is available. +

        -
        - +
        +
        + + +
        +
        + + +
        ` @@ -19,13 +29,18 @@ export class LazyDoc implements OnInit { nodes!: TreeNode[]; + nodes2!: TreeNode[]; + constructor(private cd: ChangeDetectorRef) {} ngOnInit() { this.loading = true; + this.nodes2 = this.initiateNodes2(); + setTimeout(() => { this.nodes = this.initiateNodes(); this.loading = false; + this.nodes2.map((node) => (node.loading = false)); this.cd.markForCheck(); }, 2000); } @@ -50,51 +65,132 @@ export class LazyDoc implements OnInit { ]; } - nodeExpand(event: any) { + initiateNodes2(): TreeNode[] { + return [ + { + key: '0', + label: 'Node 0', + leaf: false, + loading: true + }, + { + key: '1', + label: 'Node 1', + leaf: false, + loading: true + }, + { + key: '2', + label: 'Node 2', + leaf: false, + loading: true + } + ]; + } + + onNodeExpand(event: any) { if (!event.node.children) { this.loading = true; + setTimeout(() => { - event.node.children = []; + let _node = { ...event.node }; + _node.children = []; + for (let i = 0; i < 3; i++) { - event.node.children.push({ + _node.children.push({ key: event.node.key + '-' + i, - label: 'Node ' + event.node.key + '-' + i, - leaf: false + label: 'Lazy ' + event.node.label + '-' + i }); } + + this.nodes[parseInt(event.node.key, 10)] = _node; + this.loading = false; this.cd.markForCheck(); }, 500); } } + onNodeExpand2(event: any) { + if (!event.node.children) { + event.node.loading = true; + + setTimeout(() => { + let _node = { ...event.node }; + _node.children = []; + + for (let i = 0; i < 3; i++) { + _node.children.push({ + key: event.node.key + '-' + i, + label: 'Lazy ' + event.node.label + '-' + i + }); + } + + const key = parseInt(_node.key, 10); + this.nodes2[key] = { ..._node, loading: false }; + this.cd.markForCheck(); + }, 500); + } + } + code: Code = { - basic: ``, + basic: ` +`, - html: ` -
        - + html: `
        +
        + + +
        +
        + + +
        `, typescript: `import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-lazy-demo', - templateUrl: './tree-lazy-demo.html' + templateUrl: './tree-lazy-demo.html', + standalone: true, + imports: [TreeModule] }) export class TreeLazyDemo implements OnInit { loading: boolean = false; nodes!: TreeNode[]; + nodes2!: TreeNode[]; + constructor(private cd: ChangeDetectorRef) {} ngOnInit() { this.loading = true; + this.nodes2 = this.initiateNodes2(); + setTimeout(() => { this.nodes = this.initiateNodes(); this.loading = false; + this.nodes2.map((node) => (node.loading = false)); this.cd.markForCheck(); }, 2000); } @@ -119,23 +215,73 @@ export class TreeLazyDemo implements OnInit { ]; } - nodeExpand(event: any) { + initiateNodes2(): TreeNode[] { + return [ + { + key: '0', + label: 'Node 0', + leaf: false, + loading: true + }, + { + key: '1', + label: 'Node 1', + leaf: false, + loading: true + }, + { + key: '2', + label: 'Node 2', + leaf: false, + loading: true + } + ]; + } + + onNodeExpand(event: any) { if (!event.node.children) { this.loading = true; + setTimeout(() => { - event.node.children = []; + let _node = { ...event.node }; + _node.children = []; + for (let i = 0; i < 3; i++) { - event.node.children.push({ + _node.children.push({ key: event.node.key + '-' + i, - label: 'Node ' + event.node.key + '-' + i, - leaf: false + label: 'Lazy ' + event.node.label + '-' + i }); } + + this.nodes[parseInt(event.node.key, 10)] = _node; + this.loading = false; this.cd.markForCheck(); }, 500); } } + + onNodeExpand2(event: any) { + if (!event.node.children) { + event.node.loading = true; + + setTimeout(() => { + let _node = { ...event.node }; + _node.children = []; + + for (let i = 0; i < 3; i++) { + _node.children.push({ + key: event.node.key + '-' + i, + label: 'Lazy ' + event.node.label + '-' + i + }); + } + + const key = parseInt(_node.key, 10); + this.nodes2[key] = { ..._node, loading: false }; + this.cd.markForCheck(); + }, 500); + } + } }`, data: `{ diff --git a/src/app/showcase/doc/tree/multipledoc.ts b/src/app/showcase/doc/tree/multipledoc.ts index 6c123b56d48..d016f39acdb 100644 --- a/src/app/showcase/doc/tree/multipledoc.ts +++ b/src/app/showcase/doc/tree/multipledoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'multiple-doc', @@ -15,10 +15,10 @@ import { NodeService } from '../../service/nodeservice';
        - +
        - +
        ` @@ -38,28 +38,42 @@ export class MultipleDoc implements OnInit { code: Code = { basic: `
        - +
        -`, +`, - html: ` -
        + html: `
        - +
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'tree-multiple-demo', - templateUrl: './tree-multiple-demo.html' + templateUrl: './tree-multiple-demo.html', + standalone: true, + imports: [TreeModule, InputSwitchModule, FormsModule], + providers: [NodeService] }) export class TreeMultipleDemo implements OnInit { metaKeySelection: boolean = false; diff --git a/src/app/showcase/doc/tree/singledoc.ts b/src/app/showcase/doc/tree/singledoc.ts index bfd7f39fb11..be22c8c577b 100644 --- a/src/app/showcase/doc/tree/singledoc.ts +++ b/src/app/showcase/doc/tree/singledoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'single-doc', @@ -10,7 +10,7 @@ import { NodeService } from '../../service/nodeservice';

        Single node selection is configured by setting selectionMode as single along with selection properties to manage the selection value binding.

        - +
        ` @@ -27,21 +27,31 @@ export class SingleDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-single-demo', - templateUrl: './tree-single-demo.html' + templateUrl: './tree-single-demo.html', + standalone: true, + imports: [TreeModule], + providers: [NodeService] }) export class TreeSingleDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/templatedoc.ts b/src/app/showcase/doc/tree/templatedoc.ts index 9082519c7de..5c17a8899a7 100644 --- a/src/app/showcase/doc/tree/templatedoc.ts +++ b/src/app/showcase/doc/tree/templatedoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'template-doc', @@ -52,18 +52,21 @@ export class TemplateDoc implements OnInit { code: Code = { basic: ` - {{ node.label }} + + {{ node.label }} + {{ node.label }} `, - html: ` -
        + html: `
        - {{ node.label }} + + {{ node.label }} + {{ node.label }} @@ -71,13 +74,15 @@ export class TemplateDoc implements OnInit {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-template-demo', - templateUrl: './tree-template-demo.html' + templateUrl: './tree-template-demo.html', + standalone: true, + imports: [TreeModule] }) export class TreeTemplateDemo implements OnInit { nodes!: TreeNode[]; diff --git a/src/app/showcase/doc/tree/treedoc.module.ts b/src/app/showcase/doc/tree/treedoc.module.ts index afe234ab19e..1224377c6fb 100644 --- a/src/app/showcase/doc/tree/treedoc.module.ts +++ b/src/app/showcase/doc/tree/treedoc.module.ts @@ -6,8 +6,8 @@ import { ContextMenuModule } from 'primeng/contextmenu'; import { InputSwitchModule } from 'primeng/inputswitch'; import { ToastModule } from 'primeng/toast'; import { TreeModule } from 'primeng/tree'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { CheckboxDoc } from './checkboxdoc'; diff --git a/src/app/showcase/doc/tree/virtualscrolldoc.ts b/src/app/showcase/doc/tree/virtualscrolldoc.ts index 44a700cb768..3ecf45a5728 100644 --- a/src/app/showcase/doc/tree/virtualscrolldoc.ts +++ b/src/app/showcase/doc/tree/virtualscrolldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'virtual-scroll-doc', @@ -10,7 +10,7 @@ import { NodeService } from '../../service/nodeservice';

        VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.

        - +
        ` @@ -38,21 +38,33 @@ export class VirtualScrollDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + typescript: `import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-virtual-scroll-demo', - templateUrl: './tree-virtual-scroll-demo.html' + templateUrl: './tree-virtual-scroll-demo.html', + standalone: true, + imports: [TreeModule], + providers: [NodeService] }) export class TreeVirtualScrollDemo implements OnInit { loading: boolean = false; diff --git a/src/app/showcase/doc/tree/virtualscrolllazydoc.ts b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts index 6fde95d7ca0..02eb6b1c334 100644 --- a/src/app/showcase/doc/tree/virtualscrolllazydoc.ts +++ b/src/app/showcase/doc/tree/virtualscrolllazydoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'lazy-virtual-scroll-doc', @@ -10,7 +10,7 @@ import { NodeService } from '../../service/nodeservice';

        VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.

        - +
        ` @@ -56,20 +56,39 @@ export class LazyVirtualScrollDoc implements OnInit { } code: Code = { - basic: ``, + basic: ``, html: `
        - +
        `, - typescript: ` -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; + typescript: `import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeModule } from 'primeng/tree'; @Component({ selector: 'tree-virtual-scroll-lazy-demo', - templateUrl: './tree-virtual-scroll-lazy-demo.html' + templateUrl: './tree-virtual-scroll-lazy-demo.html', + standalone: true, + imports: [TreeModule], + providers: [NodeService] }) export class TreeVirtualScrollLazyDemo implements OnInit { loading: boolean = false; diff --git a/src/app/showcase/doc/treeselect/accessibilitydoc.ts b/src/app/showcase/doc/treeselect/accessibilitydoc.ts index 76c561803e4..f5899dfb74f 100644 --- a/src/app/showcase/doc/treeselect/accessibilitydoc.ts +++ b/src/app/showcase/doc/treeselect/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -182,8 +182,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: `Options - + -` +` }; } diff --git a/src/app/showcase/doc/treeselect/basicdoc.ts b/src/app/showcase/doc/treeselect/basicdoc.ts index 2db58b69c2a..044a82e5de3 100644 --- a/src/app/showcase/doc/treeselect/basicdoc.ts +++ b/src/app/showcase/doc/treeselect/basicdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'basic-doc', @@ -10,7 +10,7 @@ import { NodeService } from '../../service/nodeservice';

        In single selection mode, value binding should be the key value of a node.

        - +
        ` @@ -25,21 +25,34 @@ export class BasicDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; @Component({ selector: 'tree-select-basic-demo', - templateUrl: './tree-select-basic-demo.html' -}) + templateUrl: './tree-select-basic-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule], + providers: [NodeService] + }) export class TreeSelectBasicDemo { nodes!: any[]; diff --git a/src/app/showcase/doc/treeselect/checkboxdoc.ts b/src/app/showcase/doc/treeselect/checkboxdoc.ts index 8fb72f46dd5..be953c2a4f8 100644 --- a/src/app/showcase/doc/treeselect/checkboxdoc.ts +++ b/src/app/showcase/doc/treeselect/checkboxdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'checkbox-doc', @@ -9,7 +9,7 @@ import { NodeService } from '../../service/nodeservice';

        Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox.

        - +
        ` @@ -24,20 +24,39 @@ export class CheckboxDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; @Component({ selector: 'tree-select-checkbox-demo', - templateUrl: './tree-select-checkbox-demo.html' + templateUrl: './tree-select-checkbox-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule], + providers: [NodeService] }) export class TreeSelectCheckboxDemo { nodes!: any[]; diff --git a/src/app/showcase/doc/treeselect/disableddoc.ts b/src/app/showcase/doc/treeselect/disableddoc.ts index f156d0c3c87..cd369889114 100644 --- a/src/app/showcase/doc/treeselect/disableddoc.ts +++ b/src/app/showcase/doc/treeselect/disableddoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'disabled-doc', @@ -9,7 +9,7 @@ import { NodeService } from '../../service/nodeservice';

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

        - +
        ` @@ -24,20 +24,35 @@ export class DisabledDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; @Component({ selector: 'tree-select-disabled-demo', - templateUrl: './tree-select-disabled-demo.html' + templateUrl: './tree-select-disabled-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule], + providers: [NodeService] }) export class TreeSelectDisabledDemo { nodes!: any[]; diff --git a/src/app/showcase/doc/treeselect/filleddoc.ts b/src/app/showcase/doc/treeselect/filleddoc.ts new file mode 100644 index 00000000000..9c4c8019f50 --- /dev/null +++ b/src/app/showcase/doc/treeselect/filleddoc.ts @@ -0,0 +1,98 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; + +@Component({ + selector: 'filled-doc', + template: ` + +

        Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

        +         +
        + +
        + + ` +}) +export class FilledDoc { + nodes!: any[]; + + selectedNodes: any; + + constructor(private nodeService: NodeService) { + this.nodeService.getFiles().then((files) => (this.nodes = files)); + } + + code: Code = { + basic: ``, + + html: `
        + +
        `, + + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; + +@Component({ + selector: 'tree-select-filled-demo', + templateUrl: './tree-select-filled-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule], + providers: [NodeService] + }) +export class TreeSelectFilledDemo { + nodes!: any[]; + + selectedNodes: any; + + constructor(private nodeService: NodeService) { + this.nodeService.getFiles().then((files) => (this.nodes = files)); + } +}`, + + service: ['NodeService'], + + data: ` + /* NodeService */ +{ + key: '0', + label: 'Documents', + data: 'Documents Folder', + icon: 'pi pi-fw pi-inbox', + children: [ + { + key: '0-0', + label: 'Work', + data: 'Work Folder', + icon: 'pi pi-fw pi-cog', + children: [ + { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' }, + { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' } + ] + }, + { + key: '0-1', + label: 'Home', + data: 'Home Folder', + icon: 'pi pi-fw pi-home', + children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }] + } + ] +}, +...` + }; +} diff --git a/src/app/showcase/doc/treeselect/filterdoc.ts b/src/app/showcase/doc/treeselect/filterdoc.ts index 5828cbce9cb..d9d66755560 100644 --- a/src/app/showcase/doc/treeselect/filterdoc.ts +++ b/src/app/showcase/doc/treeselect/filterdoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'filter-doc', @@ -13,7 +13,7 @@ import { NodeService } from '../../service/nodeservice';

        - +
        ` @@ -28,20 +28,37 @@ export class FilterDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; @Component({ selector: 'tree-select-filter-demo', - templateUrl: './tree-select-filter-demo.html' + templateUrl: './tree-select-filter-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule], + providers: [NodeService] }) export class TreeSelectFilterDemo { nodes!: any[]; diff --git a/src/app/showcase/doc/treeselect/floatlabeldoc.ts b/src/app/showcase/doc/treeselect/floatlabeldoc.ts index b0c77335465..0536cb16889 100644 --- a/src/app/showcase/doc/treeselect/floatlabeldoc.ts +++ b/src/app/showcase/doc/treeselect/floatlabeldoc.ts @@ -1,18 +1,18 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'floatlabel-doc', template: ` -

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

        +

        A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.
        - - - - + + + +
        ` @@ -27,26 +27,42 @@ export class FloatLabelDoc { } code: Code = { - basic: ` - - -`, + basic: ` + + +`, - html: ` -
        - - - - + html: `
        + + + +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; +import { FloatLabelModule } from 'primeng/floatlabel'; @Component({ selector: 'tree-select-floatlabel-demo', - templateUrl: './tree-select-floatlabel-demo.html' + templateUrl: './tree-select-floatlabel-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule, FloatLabelModule], + providers: [NodeService] }) export class TreeSelectFloatlabelDemo { nodes!: any[]; diff --git a/src/app/showcase/doc/treeselect/importdoc.ts b/src/app/showcase/doc/treeselect/importdoc.ts index c5e34c5e659..1cb909b16b2 100644 --- a/src/app/showcase/doc/treeselect/importdoc.ts +++ b/src/app/showcase/doc/treeselect/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/treeselect/invaliddoc.ts b/src/app/showcase/doc/treeselect/invaliddoc.ts index a51c6987dac..84f8aeee57a 100644 --- a/src/app/showcase/doc/treeselect/invaliddoc.ts +++ b/src/app/showcase/doc/treeselect/invaliddoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'invalid-doc', @@ -9,7 +9,7 @@ import { NodeService } from '../../service/nodeservice';

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

        - +
        ` @@ -24,20 +24,33 @@ export class InvalidDoc { } code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; @Component({ selector: 'tree-select-invalid-demo', - templateUrl: './tree-select-invalid-demo.html' + templateUrl: './tree-select-invalid-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule], + providers: [NodeService] }) export class TreeSelectInvalidDemo { nodes!: any[]; diff --git a/src/app/showcase/doc/treeselect/multipledoc.ts b/src/app/showcase/doc/treeselect/multipledoc.ts index f9cab49decd..d56a09c8541 100644 --- a/src/app/showcase/doc/treeselect/multipledoc.ts +++ b/src/app/showcase/doc/treeselect/multipledoc.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'multiple-doc', @@ -14,7 +14,7 @@ import { NodeService } from '../../service/nodeservice';
        - +
        ` @@ -37,20 +37,37 @@ export class MultipleDoc { }; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; @Component({ selector: 'tree-select-multiple-demo', - templateUrl: './tree-select-multiple-demo.html' + templateUrl: './tree-select-multiple-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule], + providers: [NodeService] }) export class TreeSelectMultipleDemo { nodes!: any[]; diff --git a/src/app/showcase/doc/treeselect/reactiveformsdoc.ts b/src/app/showcase/doc/treeselect/reactiveformsdoc.ts index 4ebf14d1b2a..d8072964d55 100644 --- a/src/app/showcase/doc/treeselect/reactiveformsdoc.ts +++ b/src/app/showcase/doc/treeselect/reactiveformsdoc.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'reactive-forms-doc', @@ -11,7 +11,7 @@ import { NodeService } from '../../service/nodeservice';
        - +
        @@ -34,24 +34,35 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
        - + `, - html: ` -
        + html: `
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'tree-select-reactive-forms-demo', - templateUrl: './tree-select-reactive-forms-demo.html' + templateUrl: './tree-select-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, TreeSelectModule], + providers: [NodeService] }) export class TreeSelectReactiveFormsDemo implements OnInit { nodes!: any[]; diff --git a/src/app/showcase/doc/treeselect/treeselectdoc.module.ts b/src/app/showcase/doc/treeselect/treeselectdoc.module.ts index bccbc3e1cc9..02c68e9035e 100644 --- a/src/app/showcase/doc/treeselect/treeselectdoc.module.ts +++ b/src/app/showcase/doc/treeselect/treeselectdoc.module.ts @@ -3,8 +3,8 @@ import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { TreeSelectModule } from 'primeng/treeselect'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { AccessibilityDoc } from './accessibilitydoc'; import { BasicDoc } from './basicdoc'; import { CheckboxDoc } from './checkboxdoc'; @@ -17,10 +17,12 @@ import { MultipleDoc } from './multipledoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; import { StyleDoc } from './styledoc'; import { VirtualScrollDoc } from './virtualscrolldoc'; +import { FloatLabelModule } from 'primeng/floatlabel'; +import { FilledDoc } from './filleddoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, TreeSelectModule, FormsModule, ReactiveFormsModule, RouterModule], + imports: [CommonModule, AppCodeModule, AppDocModule, TreeSelectModule, FormsModule, ReactiveFormsModule, RouterModule, FloatLabelModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, MultipleDoc, CheckboxDoc, VirtualScrollDoc, FilterDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, MultipleDoc, CheckboxDoc, VirtualScrollDoc, FilterDoc, FloatLabelDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] }) export class TreeSelectDocModule {} diff --git a/src/app/showcase/doc/treeselect/virtualscrolldoc.ts b/src/app/showcase/doc/treeselect/virtualscrolldoc.ts index 88ce446daac..aa15ddb526c 100644 --- a/src/app/showcase/doc/treeselect/virtualscrolldoc.ts +++ b/src/app/showcase/doc/treeselect/virtualscrolldoc.ts @@ -1,6 +1,6 @@ import { Component, Input } from '@angular/core'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'virtual-scroll-doc', @@ -37,18 +37,44 @@ export class VirtualScrollDoc { } code: Code = { - basic: ``, - html: ` -
        - + basic: ``, + + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; -import { NodeService } from '../../service/nodeservice'; + typescript: `import { Component } from '@angular/core'; +import { NodeService } from '@service/nodeservice'; +import { FormsModule } from '@angular/forms'; +import { TreeSelectModule } from 'primeng/treeselect'; @Component({ selector: 'tree-select-virtual-scroll-demo', - templateUrl: './tree-select-virtual-scroll-demo.html' + templateUrl: './tree-select-virtual-scroll-demo.html', + standalone: true, + imports: [FormsModule, TreeSelectModule], + providers: [NodeService] }) export class TreeSelectVirtualScrollDemo { nodes!: any[]; diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts index 5064119b525..a746dc9f25f 100644 --- a/src/app/showcase/doc/treetable/basicdoc.ts +++ b/src/app/showcase/doc/treetable/basicdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'basic-doc', @@ -21,7 +21,7 @@ import { NodeService } from '../../service/nodeservice'; - + {{ rowData.name }} {{ rowData.size }} @@ -58,7 +58,7 @@ export class BasicDoc { - + {{ rowData.name }} {{ rowData.size }} @@ -67,8 +67,7 @@ export class BasicDoc { `, - html: ` -
        + html: `
        @@ -80,7 +79,7 @@ export class BasicDoc { - + {{ rowData.name }} {{ rowData.size }} @@ -90,14 +89,17 @@ export class BasicDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; @Component({ selector: 'tree-table-basic-demo', - templateUrl: './tree-table-basic-demo.html' + templateUrl: './tree-table-basic-demo.html', + standalone: true, + imports: [TreeTableModule], + providers: [NodeService] }) export class TreeTableBasicDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/columngroupdoc.ts b/src/app/showcase/doc/treetable/columngroupdoc.ts index 93cfa4a7929..b1edfd527da 100644 --- a/src/app/showcase/doc/treetable/columngroupdoc.ts +++ b/src/app/showcase/doc/treetable/columngroupdoc.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'column-group-doc', @@ -27,7 +27,7 @@ import { Code } from '../../domain/code'; - + {{ rowData.brand }} {{ rowData.lastYearSale }} @@ -196,7 +196,7 @@ export class ColumnGroupDoc { - + {{ rowData.brand }} {{ rowData.lastYearSale }} @@ -214,8 +214,7 @@ export class ColumnGroupDoc { `, - html: ` -
        + html: `
        @@ -236,7 +235,7 @@ export class ColumnGroupDoc { - + {{ rowData.brand }} {{ rowData.lastYearSale }} @@ -255,13 +254,15 @@ export class ColumnGroupDoc {
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { TreeTableModule } from 'primeng/treetable'; @Component({ selector: 'tree-table-column-group-demo', - templateUrl: './tree-table-column-group-demo.html' + templateUrl: './tree-table-column-group-demo.html', + standalone: true, + imports: [TreeTableModule] }) export class TreeTableColumnGroupDemo implements OnInit { sales!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts index a906b0c81ea..db60826048e 100644 --- a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts +++ b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -27,7 +27,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -56,27 +56,11 @@ export class ResizeExpandDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -87,18 +71,42 @@ export class ResizeExpandDoc { - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -107,7 +115,10 @@ interface Column { @Component({ selector: 'tree-table-resize-expand-demo', - templateUrl: './tree-table-resize-expand-demo.html' + templateUrl: './tree-table-resize-expand-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableResizeExpandDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/src/app/showcase/doc/treetable/columnresizefitdoc.ts index 35f1e15550c..3a3937f8655 100644 --- a/src/app/showcase/doc/treetable/columnresizefitdoc.ts +++ b/src/app/showcase/doc/treetable/columnresizefitdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -27,7 +27,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -56,27 +56,11 @@ export class ResizeFitDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -87,18 +71,42 @@ export class ResizeFitDoc { - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -107,7 +115,10 @@ interface Column { @Component({ selector: 'tree-table-resize-fit-demo', - templateUrl: './tree-table-resize-fit-demo.html' + templateUrl: './tree-table-resize-fit-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableResizeFitDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts index a6f3eab9485..dca4bdae5aa 100644 --- a/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts +++ b/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -32,7 +32,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -61,32 +61,12 @@ export class ResizeScrollableDoc { } code: Code = { - basic: ` - - - - - - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -102,18 +82,48 @@ export class ResizeScrollableDoc { - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -122,7 +132,10 @@ interface Column { @Component({ selector: 'tree-table-resize-scrollable-demo', - templateUrl: './tree-table-resize-scrollable-demo.html' + templateUrl: './tree-table-resize-scrollable-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableResizeScrollableDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/columntoggledoc.ts b/src/app/showcase/doc/treetable/columntoggledoc.ts index 019e54459a1..4c87aad2b67 100644 --- a/src/app/showcase/doc/treetable/columntoggledoc.ts +++ b/src/app/showcase/doc/treetable/columntoggledoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -19,7 +19,7 @@ interface Column {
        - +
        @@ -32,7 +32,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -66,35 +66,20 @@ export class ColumnToggleDoc { } code: Code = { - basic: ` - -
        - -
        -         - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -        `, - - html: ` -
        - + basic: `
        - +
        @@ -107,18 +92,55 @@ export class ColumnToggleDoc { - + {{ rowData[col.field] }} +        `, + + html: `
        + + +
        + +
        +         + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { MultiSelectModule } from 'primeng/multiselect'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -127,7 +149,10 @@ interface Column { @Component({ selector: 'tree-table-column-toggle-demo', - templateUrl: './tree-table-column-toggle-demo.html' + templateUrl: './tree-table-column-toggle-demo.html', + standalone: true, + imports: [TreeTableModule, MultiSelectModule, CommonModule], + providers: [NodeService] }) export class TreeTableColumnToggleDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/conditionalstyledoc.ts b/src/app/showcase/doc/treetable/conditionalstyledoc.ts index d393d6c39dc..7fdaf226bdc 100644 --- a/src/app/showcase/doc/treetable/conditionalstyledoc.ts +++ b/src/app/showcase/doc/treetable/conditionalstyledoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -27,7 +27,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -56,27 +56,11 @@ export class ConditionalStyleDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -86,19 +70,47 @@ export class ConditionalStyleDoc { - - - {{ rowData[col.field] }} + + + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -107,7 +119,10 @@ interface Column { @Component({ selector: 'tree-table-conditional-style-demo', - templateUrl: './tree-table-conditional-style-demo.html' + templateUrl: './tree-table-conditional-style-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableConditionalStyleDemo implements OnInit{ files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/contextmenudoc.ts b/src/app/showcase/doc/treetable/contextmenudoc.ts index 9a8c033f9ca..df13a252b93 100644 --- a/src/app/showcase/doc/treetable/contextmenudoc.ts +++ b/src/app/showcase/doc/treetable/contextmenudoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { MenuItem, MessageService, TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -15,7 +15,7 @@ interface Column {

        TreeTable has exclusive integration with ContextMenu using the contextMenu event to open a menu on right click alont with contextMenuSelection properties to control the selection via the menu.

        - + @@ -28,14 +28,14 @@ interface Column { - + {{ rowData[col.field] }} - +
        `, @@ -78,33 +78,16 @@ export class ContextMenuDoc { } code: Code = { - basic: ` - - - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - - - -`, - - html: ` -
        - - - + basic: ` + + @@ -115,20 +98,53 @@ export class ContextMenuDoc { - + {{ rowData[col.field] }} + + +`, + + html: `
        + + + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + + - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MenuItem, MessageService, TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { ToastModule } from 'primeng/toast'; +import { ContextMenuModule } from 'primeng/contextmenu'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -137,8 +153,10 @@ interface Column { @Component({ selector: 'tree-table-context-menu-demo', - templateUrl: './tree-table-context-menu-demo.html' - providers: [MessageService] + templateUrl: './tree-table-context-menu-demo.html', + standalone: true, + imports: [TreeTableModule, ToastModule, ContextMenuModule, CommonModule], + providers: [MessageService, NodeService] }) export class TreeTableContextMenuDemo implements OnInit{ files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/controlleddoc.ts b/src/app/showcase/doc/treetable/controlleddoc.ts index f5d5613827d..6711db051b0 100644 --- a/src/app/showcase/doc/treetable/controlleddoc.ts +++ b/src/app/showcase/doc/treetable/controlleddoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'controlled-doc', @@ -9,7 +9,7 @@ import { NodeService } from '../../service/nodeservice';

        Expansion state is controlled with expandedKeys property.

        - + @@ -22,7 +22,7 @@ import { NodeService } from '../../service/nodeservice'; - + {{ rowData.name }} {{ rowData.size }} @@ -56,7 +56,7 @@ export class ControlledDoc { } code: Code = { - basic: ` + basic: ` @@ -68,7 +68,7 @@ export class ControlledDoc { - + {{ rowData.name }} {{ rowData.size }} @@ -78,7 +78,7 @@ export class ControlledDoc { `, html: `
        - + @@ -90,7 +90,7 @@ export class ControlledDoc { - + {{ rowData.name }} {{ rowData.size }} @@ -100,15 +100,18 @@ export class ControlledDoc {
        `, - typescript: ` -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; + typescript: `import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; - +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { ButtonModule } from 'primeng/button'; @Component({ selector: 'tree-table-controlled-demo', - templateUrl: './tree-table-controlled-demo.html' + templateUrl: './tree-table-controlled-demo.html', + standalone: true, + imports: [TreeTableModule, ButtonModule], + providers: [NodeService] }) export class TreeTableControlledDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts index 8d6f673f299..32d5d51917e 100644 --- a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts +++ b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -27,7 +27,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -66,14 +66,13 @@ export class DynamicColumnsDoc { - + {{ rowData[col.field] }}         `, - html: ` -
        + html: `
        @@ -85,17 +84,18 @@ export class DynamicColumnsDoc { - + {{ rowData[col.field] }}
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -104,7 +104,10 @@ interface Column { @Component({ selector: 'tree-table-dynamic-columns-demo', - templateUrl: './tree-table-dynamic-columns-demo.html' + templateUrl: './tree-table-dynamic-columns-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableDynamicColumnsDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/src/app/showcase/doc/treetable/editdoc.ts index 40864426e36..bfbf1b515bc 100644 --- a/src/app/showcase/doc/treetable/editdoc.ts +++ b/src/app/showcase/doc/treetable/editdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -27,7 +27,7 @@ interface Column { - + @@ -61,32 +61,11 @@ export class EditDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - - - - - {{ rowData[col.field] }} - - - - -`, - - html: ` -
        - + basic: ` @@ -97,23 +76,56 @@ export class EditDoc { - + - {{ rowData[col.field] }} + + {{ rowData[col.field] }} + +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + + + + + + {{ rowData[col.field] }} + + + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -122,7 +134,10 @@ interface Column { @Component({ selector: 'tree-table-edit-demo', - templateUrl: './tree-table-edit-demo.html' + templateUrl: './tree-table-edit-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableEditDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/filterdoc.ts b/src/app/showcase/doc/treetable/filterdoc.ts index 832b02f2ef0..b9550c9d76e 100644 --- a/src/app/showcase/doc/treetable/filterdoc.ts +++ b/src/app/showcase/doc/treetable/filterdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -19,7 +19,7 @@ interface Column {
        - +
        @@ -46,7 +46,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -87,55 +87,28 @@ export class FilterDoc { } code: Code = { - basic: ` - - - -
        -
        - - -
        -
        -         - - - - {{ col.header }} - - - - - - - - - - - - - {{ rowData[col.field] }} - - - - - - No data found. - - -        `, - - html: ` -
        -
        - -
        - + basic: ` + +
        - +
        @@ -147,14 +120,17 @@ export class FilterDoc { - + - + {{ rowData[col.field] }} @@ -164,13 +140,73 @@ export class FilterDoc { No data found. +        `, + + html: `
        +
        + +
        + + +
        +
        + + +
        +
        +         + + + + {{ col.header }} + + + + + + + + + + + + + {{ rowData[col.field] }} + + + + + + No data found. + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { SelectButtonModule } from 'primeng/selectbutton'; +import { FormsModule } from '@angular/forms'; +import { InputTextModule } from 'primeng/inputtext'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -179,7 +215,10 @@ interface Column { @Component({ selector: 'tree-table-filter-demo', - templateUrl: './tree-table-filter-demo.html' + templateUrl: './tree-table-filter-demo.html', + standalone: true, + imports: [TreeTableModule, SelectButtonModule, FormsModule, InputTextModule, CommonModule], + providers: [NodeService] }) export class TreeTableFilterDemo implements OnInit{ filterMode = 'lenient'; diff --git a/src/app/showcase/doc/treetable/flexiblescrolldoc.ts b/src/app/showcase/doc/treetable/flexiblescrolldoc.ts new file mode 100644 index 00000000000..b1af22f4d37 --- /dev/null +++ b/src/app/showcase/doc/treetable/flexiblescrolldoc.ts @@ -0,0 +1,179 @@ +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; +import { TreeNode } from 'primeng/api'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; + +@Component({ + selector: 'flexible-scroll-doc', + template: ` +

        + Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data + viewport adjusts itself according to the size changes. +

        +         +
        + + + + + + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + + + + + + + + + +
        + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class ScrollFlexibleDoc { + files!: TreeNode[]; + + dialogVisible: boolean = false; + + constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {} + + loadDemoData() { + this.nodeService.getFilesystem().then((files) => { + this.files = files; + this.cd.markForCheck(); + }); + } + + code: Code = { + basic: ` + + + + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + + {{ rowData.size }} + + + {{ rowData.type }} + + + + + + + + +`, + + html: `
        + + + + + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + + {{ rowData.size }} + + + {{ rowData.type }} + + + + + + + + + +
        `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { TreeNode } from 'primeng/api'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { ButtonModule } from 'primeng/button'; +import { DialogModule } from 'primeng/dialog'; + +@Component({ + selector: 'tree-table-flexible-scroll-demo', + templateUrl: './tree-table-flexible-scroll-demo.html', + standalone: true, + imports: [TreeTableModule, ButtonModule, DialogModule], + providers: [NodeService] +}) +export class TreeTableFlexibleScrollDemo implements OnInit { + files!: TreeNode[]; + + dialogVisible: boolean = false; + + constructor(private nodeService: NodeService) {} + + ngOnInit() { + this.nodeService.getFilesystem().then((files) => { + this.files = files; + }); + } +}`, + + service: ['NodeService'] + }; +} diff --git a/src/app/showcase/doc/treetable/gridlinesdoc.ts b/src/app/showcase/doc/treetable/gridlinesdoc.ts index 12762a929b4..7bedf2e4f12 100644 --- a/src/app/showcase/doc/treetable/gridlinesdoc.ts +++ b/src/app/showcase/doc/treetable/gridlinesdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'gridlines-doc', @@ -22,7 +22,7 @@ import { NodeService } from '../../service/nodeservice'; - + {{ rowData.name }} {{ rowData.size }} @@ -32,7 +32,7 @@ import { NodeService } from '../../service/nodeservice';
        - + `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -46,30 +46,11 @@ export class GridlinesDoc { } code: Code = { - basic: ` - - - - Name - Size - Type - - - - - - - {{ rowData.name }} - - {{ rowData.size }} - {{ rowData.type }} - - -`, - - html: ` -
        - + basic: ` Name @@ -80,24 +61,51 @@ export class GridlinesDoc { - + {{ rowData.name }} {{ rowData.size }} {{ rowData.type }} +`, + + html: `
        + + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; @Component({ selector: 'tree-table-gridlines-demo', - templateUrl: './tree-table-gridlines-demo.html' + templateUrl: './tree-table-gridlines-demo.html', + standalone: true, + imports: [TreeTableModule], + providers: [NodeService] }) export class TreeTableGridlinesDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/importdoc.ts b/src/app/showcase/doc/treetable/importdoc.ts index a521180ecea..3bd51211aa9 100644 --- a/src/app/showcase/doc/treetable/importdoc.ts +++ b/src/app/showcase/doc/treetable/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/treetable/lazyloaddoc.ts b/src/app/showcase/doc/treetable/lazyloaddoc.ts index c84c270db93..1cd8eb0aedc 100644 --- a/src/app/showcase/doc/treetable/lazyloaddoc.ts +++ b/src/app/showcase/doc/treetable/lazyloaddoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -46,7 +46,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -133,27 +133,18 @@ export class LazyLoadDoc implements OnInit { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -164,18 +155,48 @@ export class LazyLoadDoc implements OnInit { - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; + typescript: `import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -184,7 +205,9 @@ interface Column { @Component({ selector: 'tree-table-lazy-load-demo', - templateUrl: './tree-table-lazy-load-demo.html' + templateUrl: './tree-table-lazy-load-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule] }) export class TreeTableLazyLoadDemo implements OnInit{ files!: TreeNode[]; @@ -195,7 +218,7 @@ export class TreeTableLazyLoadDemo implements OnInit{ loading: boolean = false; - constructor(private nodeService: NodeService, private cd: ChangeDetectorRef) {} + constructor(private cd: ChangeDetectorRef) {} ngOnInit() { this.cols = [ diff --git a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts index 0803d2d80b8..de7a934e7df 100644 --- a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface Column { field: string; @@ -9,9 +9,12 @@ interface Column { @Component({ selector: 'paginator-basic-doc', - template: `
        + template: ` +

        Pagination is enabled by adding paginator property and defining rows per page.

        +         +
        - + @@ -22,7 +25,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -68,27 +71,14 @@ export class PaginatorBasicDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -99,17 +89,44 @@ export class PaginatorBasicDoc { - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -118,7 +135,9 @@ interface Column { @Component({ selector: 'tree-table-paginator-basic-demo', - templateUrl: './tree-table-paginator-basic-demo.html' + templateUrl: './tree-table-paginator-basic-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule] }) export class TreeTablePaginatorBasicDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts index fed44fa4d34..0aca53953f8 100644 --- a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts +++ b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface Column { field: string; @@ -11,7 +11,7 @@ interface Column { selector: 'paginator-locale-doc', template: ` -

        paginator localization information such as page numbers and rows per page options are defined with the paginatorLocale property which defaults to the user locale.

        +

        Paginator localization information such as page numbers and rows per page options are defined with the paginatorLocale property which defaults to the user locale.
        @@ -26,7 +26,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -74,27 +74,14 @@ export class PaginatorLocaleDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -105,17 +92,44 @@ export class PaginatorLocaleDoc { - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -124,9 +138,11 @@ interface Column { @Component({ selector: 'tree-table-paginator-locale-demo', - templateUrl: './tree-table-paginator-locale-demo.html' + templateUrl: './tree-table-paginator-locale-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule] }) -export class TreeTablePaginatorlocaleDemo implements OnInit { +export class TreeTablePaginatorLocaleDemo implements OnInit { files!: TreeNode[]; cols!: Column[]; diff --git a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts index 8918b091864..b2969ca87ee 100644 --- a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts +++ b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; interface Column { field: string; @@ -29,17 +29,17 @@ interface Column { - + {{ rowData[col.field] }} - + - +         @@ -84,33 +84,13 @@ export class PaginatorTemplateDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - - - - - - - -`, - - html: ` -
        - + basic: ` @@ -121,23 +101,56 @@ export class PaginatorTemplateDoc { - + {{ rowData[col.field] }} - + - + +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + + + + + + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; +import { TreeTableModule } from 'primeng/treetable'; +import { ButtonModule } from 'primeng/button'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -146,7 +159,9 @@ interface Column { @Component({ selector: 'tree-table-paginator-template-demo', - templateUrl: './tree-table-paginator-template-demo.html' + templateUrl: './tree-table-paginator-template-demo.html', + standalone: true, + imports: [TreeTableModule, ButtonModule, CommonModule] }) export class TreeTablePaginatorTemplateDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/reorderdoc.ts b/src/app/showcase/doc/treetable/reorderdoc.ts index f92baf3d02e..f8bd378b73d 100644 --- a/src/app/showcase/doc/treetable/reorderdoc.ts +++ b/src/app/showcase/doc/treetable/reorderdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -98,7 +98,7 @@ export class ReorderDoc { typescript: ` import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; diff --git a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts index 93bbbc282c8..6219b2e147a 100644 --- a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts +++ b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -39,7 +39,7 @@ interface Column { - + {{ rowData.name }} @@ -83,39 +83,15 @@ export class FrozenColumnsDoc { } code: Code = { - basic: ` - - - - - - - - - {{ col.header }} - - - - - - - {{ rowData[col.field] }} - - - - - - - - {{ rowData.name }} - - - -`, - - html: ` -
        - + basic: ` @@ -138,18 +114,58 @@ export class FrozenColumnsDoc { - + {{ rowData.name }} +`, + + html: `
        + + + + + + + + + + {{ col.header }} + + + + + + + {{ rowData[col.field] }} + + + + + + + + {{ rowData.name }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -158,7 +174,10 @@ interface Column { @Component({ selector: 'tree-table-scroll-frozen-columns-demo', - templateUrl: './tree-table-scroll-frozen-columns-demo.html' + templateUrl: './tree-table-scroll-frozen-columns-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableScrollFrozenColumnsDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts index 7f60ce0da51..46916c8fcd1 100644 --- a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts +++ b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -16,7 +16,7 @@ interface Column {
        - + @@ -112,7 +112,7 @@ export class ScrollHorizontalDoc { typescript: ` import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; diff --git a/src/app/showcase/doc/treetable/scrollverticaldoc.ts b/src/app/showcase/doc/treetable/scrollverticaldoc.ts index 90de479227b..cd10c97a997 100644 --- a/src/app/showcase/doc/treetable/scrollverticaldoc.ts +++ b/src/app/showcase/doc/treetable/scrollverticaldoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -27,7 +27,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -56,27 +56,13 @@ export class ScrollVerticalDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -87,18 +73,44 @@ export class ScrollVerticalDoc { - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -107,7 +119,10 @@ interface Column { @Component({ selector: 'tree-table-scroll-vertical-demo', - templateUrl: './tree-table-scroll-vertical-demo.html' + templateUrl: './tree-table-scroll-vertical-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableScrollVerticalDemo implements OnInit{ files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts index 5f5cf2f1899..39abefe7981 100644 --- a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts +++ b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -38,8 +38,8 @@ interface Column { - - + + {{ rowData[col.field] }} @@ -99,8 +99,7 @@ export class SelectionCheckboxDoc {         `, - html: ` -
        + html: `
        @@ -118,19 +117,19 @@ export class SelectionCheckboxDoc { - - + + {{ rowData[col.field] }} - -
        `, +        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -139,7 +138,10 @@ interface Column { @Component({ selector: 'tree-table-selection-checkbox-demo', - templateUrl: './tree-table-selection-checkbox-demo.html' + templateUrl: './tree-table-selection-checkbox-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableSelectionCheckboxDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/selectioneventscdoc.ts b/src/app/showcase/doc/treetable/selectioneventscdoc.ts index 9467905b22c..c5f643b439f 100644 --- a/src/app/showcase/doc/treetable/selectioneventscdoc.ts +++ b/src/app/showcase/doc/treetable/selectioneventscdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { MessageService, TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -20,7 +20,7 @@ interface NodeEvent {

        TreeTable provides onNodeSelect and onNodeUnselect events to listen selection events.

        - + - + {{ rowData[col.field] }} @@ -84,28 +84,16 @@ export class SelectionEventsDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - - + basic: ` @@ -116,18 +104,49 @@ export class SelectionEventsDoc { - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { MessageService, TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { ToastModule } from 'primeng/toast'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -142,7 +161,9 @@ interface NodeEvent { @Component({ selector: 'tree-table-selection-events-demo', templateUrl: './tree-table-selection-events-demo.html', - providers: [MessageService] + standalone: true, + imports: [TreeTableModule, ToastModule, CommonModule], + providers: [MessageService, NodeService] }) export class TreeTableSelectionEventsDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/selectionmultipledoc.ts b/src/app/showcase/doc/treetable/selectionmultipledoc.ts index 76ca3b5d958..9702be8c1c2 100644 --- a/src/app/showcase/doc/treetable/selectionmultipledoc.ts +++ b/src/app/showcase/doc/treetable/selectionmultipledoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -19,7 +19,7 @@ interface Column {
        - + Metakey
        @@ -34,7 +34,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -68,32 +68,16 @@ export class SelectionMultipleDoc { } code: Code = { - basic: ` - - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        -
        - - Metakey -
        - + basic: ` + @@ -104,18 +88,52 @@ export class SelectionMultipleDoc { - + {{ rowData[col.field] }} +`, + + html: `
        +
        + + Metakey +
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -124,7 +142,10 @@ interface Column { @Component({ selector: 'tree-table-selection-multiple-demo', - templateUrl: './tree-table-selection-multiple-demo.html' + templateUrl: './tree-table-selection-multiple-demo.html', + standalone: true, + imports: [TreeTableModule, InputSwitchModule, FormsModule, CommonModule], + providers: [NodeService] }) export class TreeTableSelectionMultipleDemo implements OnInit { metaKeySelection: boolean = true; diff --git a/src/app/showcase/doc/treetable/selectionsingledoc.ts b/src/app/showcase/doc/treetable/selectionsingledoc.ts index e9d628625eb..a6f8f03ae19 100644 --- a/src/app/showcase/doc/treetable/selectionsingledoc.ts +++ b/src/app/showcase/doc/treetable/selectionsingledoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -20,7 +20,7 @@ interface Column {
        - + Metakey
        @@ -35,7 +35,7 @@ interface Column { - + {{ rowData[col.field] }} @@ -69,27 +69,14 @@ export class SelectionSingleDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` @@ -100,22 +87,63 @@ export class SelectionSingleDoc { - + {{ rowData[col.field] }} +`, + + html: `
        +
        + + Metakey +
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +interface Column { + field: string; + header: string; +} @Component({ selector: 'tree-table-selection-single-demo', - templateUrl: './tree-table-selection-single-demo.html' + templateUrl: './tree-table-selection-single-demo.html', + standalone: true, + imports: [TreeTableModule, InputSwitchModule, FormsModule, CommonModule], + providers: [NodeService] }) export class TreeTableSelectionSingleDemo implements OnInit { metaKeySelection: boolean = true; diff --git a/src/app/showcase/doc/treetable/sizedoc.ts b/src/app/showcase/doc/treetable/sizedoc.ts index e4af5fe7314..a766b56864d 100644 --- a/src/app/showcase/doc/treetable/sizedoc.ts +++ b/src/app/showcase/doc/treetable/sizedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; @Component({ selector: 'size-doc', @@ -11,7 +11,7 @@ import { NodeService } from '../../service/nodeservice';
        - +
        @@ -25,7 +25,7 @@ import { NodeService } from '../../service/nodeservice'; - + {{ rowData.name }} {{ rowData.size }} @@ -35,7 +35,7 @@ import { NodeService } from '../../service/nodeservice';
        - + `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -59,33 +59,19 @@ export class SizeDoc { } code: Code = { - basic: ` -
        - + basic: `
        +
        - - - - Name - Size - Type - - - - - - - {{ rowData.name }} - - {{ rowData.size }} - {{ rowData.type }} - - -`, - - html: ` -
        - + Name @@ -96,24 +82,62 @@ export class SizeDoc { - + {{ rowData.name }} {{ rowData.size }} {{ rowData.type }} +`, + + html: `
        +
        + +
        + + + + Name + Size + Type + + + + + + + {{ rowData.name }} + + {{ rowData.size }} + {{ rowData.type }} + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { SelectButtonModule } from 'primeng/selectbutton'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'tree-table-size-demo', - templateUrl: './tree-table-size-demo.html' + templateUrl: './tree-table-size-demo.html', + standalone: true, + imports: [TreeTableModule, SelectButtonModule, FormsModule], + providers: [NodeService] }) export class TreeTableSizeDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts b/src/app/showcase/doc/treetable/sortmultiplecolumnsdoc.ts similarity index 62% rename from src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts rename to src/app/showcase/doc/treetable/sortmultiplecolumnsdoc.ts index ad515268691..5b978f99202 100644 --- a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts +++ b/src/app/showcase/doc/treetable/sortmultiplecolumnsdoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -9,7 +9,7 @@ interface Column { } @Component({ - selector: 'sort-multiple-column-doc', + selector: 'sort-multiple-columns-doc', template: `

        Multiple columns can be sorted by defining sortMode as multiple. This mode requires metaKey (e.g. ⌘) to be pressed when clicking a header.

        @@ -21,14 +21,14 @@ interface Column { {{ col.header }} - + - + {{ rowData[col.field] }} @@ -36,11 +36,11 @@ interface Column {
        - + `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class SortMultipleColumnDoc { +export class SortMultipleColumnsDoc { files!: TreeNode[]; cols!: Column[]; @@ -58,51 +58,61 @@ export class SortMultipleColumnDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` {{ col.header }} - + - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -110,10 +120,13 @@ interface Column { } @Component({ - selector: 'tree-table-sort-multiple-column-demo', - templateUrl: './tree-table-sort-multiple-column-demo.html', + selector: 'tree-table-sort-multiple-columns-demo', + templateUrl: './tree-table-sort-multiple-columns-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) -export class TreeTableSortMultipleColumnDemo implements OnInit { +export class TreeTableSortMultipleColumnsDemo implements OnInit { files!: TreeNode[]; cols!: Column[]; diff --git a/src/app/showcase/doc/treetable/sortremovabledoc.ts b/src/app/showcase/doc/treetable/sortremovabledoc.ts new file mode 100644 index 00000000000..9590c2a3847 --- /dev/null +++ b/src/app/showcase/doc/treetable/sortremovabledoc.ts @@ -0,0 +1,215 @@ +import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core'; +import { SortEvent, TreeNode } from 'primeng/api'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; +import { TreeTable } from 'primeng/treetable'; + +interface Column { + field: string; + header: string; +} + +@Component({ + selector: 'sort-removable-doc', + template: ` + +

        The removable sort can be implemented using the customSort property.

        +         +
        + + + + + + {{ col.header }} + + + + + + + + + {{ rowData[col.field] }} + + + + + +
        + + `, + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class SortRemovableDoc { + @ViewChild('tt') tt: TreeTable; + + metaKeySelection: boolean = true; + + files!: TreeNode[]; + + initialValue: TreeNode[]; + + selectedNode!: TreeNode; + + cols!: Column[]; + + isSorted: boolean = null; + + constructor(private nodeService: NodeService) {} + + loadDemoData() { + this.nodeService.getFilesystem().then((files) => { + this.files = files; + this.initialValue = [...files]; + }); + + this.cols = [ + { field: 'name', header: 'Name' }, + { field: 'size', header: 'Size' }, + { field: 'type', header: 'Type' } + ]; + } + customSort(event: SortEvent) { + if (this.isSorted == null || this.isSorted === undefined) { + this.isSorted = true; + this.sortTableData(event); + } else if (this.isSorted == true) { + this.isSorted = false; + this.sortTableData(event); + } else if (this.isSorted == false) { + this.isSorted = null; + this.files = [...this.initialValue]; + this.tt.reset(); + } + } + + sortTableData(event) { + event.data.sort((data1, data2) => { + let value1 = data1.data[event.field]; + let value2 = data2.data[event.field]; + let result = null; + if (value1 == null && value2 != null) result = -1; + else if (value1 != null && value2 == null) result = 1; + else if (value1 == null && value2 == null) result = 0; + else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2); + else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; + + return event.order * result; + }); + } + + code: Code = { + basic: ` + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + + +`, + + html: `
        +
        + + Metakey +
        + + + + + {{ col.header }} + + + + + + + + {{ rowData[col.field] }} + + + + +
        `, + + typescript: `import { Component, OnInit } from '@angular/core'; +import { TreeNode } from 'primeng/api'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { FormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +interface Column { + field: string; + header: string; +} + +@Component({ + selector: 'tree-table-sort-removable-demo', + templateUrl: './tree-table-sort-removable-demo.html', + standalone: true, + imports: [TreeTableModule, InputSwitchModule, FormsModule, CommonModule], + providers: [NodeService] +}) +export class TreeTableSortRemovableDemo implements OnInit { + metaKeySelection: boolean = true; + + files!: TreeNode[]; + + selectedNode!: TreeNode; + + cols!: Column[]; + + constructor(private nodeService: NodeService) {} + + ngOnInit() { + this.nodeService.getFilesystem().then((files) => (this.files = files)); + + this.cols = [ + { field: 'name', header: 'Name' }, + { field: 'size', header: 'Size' }, + { field: 'type', header: 'Type' } + ]; + } +}`, + + service: ['NodeService'] + }; +} diff --git a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts index b5bb657c741..9b06276b461 100644 --- a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts +++ b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -21,14 +21,14 @@ interface Column { {{ col.header }} - + - + {{ rowData[col.field] }} @@ -58,51 +58,59 @@ export class SortSingleColumnDoc { } code: Code = { - basic: ` - - - - {{ col.header }} - - - - - - - - - {{ rowData[col.field] }} - - - -`, - - html: ` -
        - + basic: ` {{ col.header }} - + - + {{ rowData[col.field] }} +`, + + html: `
        + + + + + {{ col.header }} + + + + + + + + + {{ rowData[col.field] }} + + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -111,7 +119,10 @@ interface Column { @Component({ selector: 'tree-table-sort-single-column-demo', - templateUrl: './tree-table-sort-single-column-demo.html' + templateUrl: './tree-table-sort-single-column-demo.html', + standalone: true, + imports: [TreeTableModule, CommonModule], + providers: [NodeService] }) export class TreeTableSortSingleColumnDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/templatedoc.ts b/src/app/showcase/doc/treetable/templatedoc.ts index b9130123515..ccad21874d9 100644 --- a/src/app/showcase/doc/treetable/templatedoc.ts +++ b/src/app/showcase/doc/treetable/templatedoc.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { Code } from '../../domain/code'; -import { NodeService } from '../../service/nodeservice'; +import { Code } from '@domain/code'; +import { NodeService } from '@service/nodeservice'; interface Column { field: string; @@ -28,18 +28,18 @@ interface Column { - + {{ rowData[col.field] }} - - + +
        - +
        @@ -78,18 +78,18 @@ export class TemplateDoc { - + {{ rowData[col.field] }} - - + +
        - +
        `, @@ -107,27 +107,29 @@ export class TemplateDoc { - + {{ rowData[col.field] }} - - + +
        - +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; + typescript: `import { Component, OnInit } from '@angular/core'; import { TreeNode } from 'primeng/api'; -import { NodeService } from '../../service/nodeservice'; +import { NodeService } from '@service/nodeservice'; +import { ButtonModule } from 'primeng/button'; +import { TreeTableModule } from 'primeng/treetable'; +import { CommonModule } from '@angular/common'; interface Column { field: string; @@ -136,7 +138,10 @@ interface Column { @Component({ selector: 'tree-table-template-demo', - templateUrl: './tree-table-template-demo.html' + templateUrl: './tree-table-template-demo.html', + standalone: true, + imports: [TreeTableModule, ButtonModule, CommonModule], + providers: [NodeService] }) export class TreeTableTemplateDemo implements OnInit { files!: TreeNode[]; diff --git a/src/app/showcase/doc/treetable/treetabledoc.module.ts b/src/app/showcase/doc/treetable/treetabledoc.module.ts index 444d1835514..957f7c2766f 100644 --- a/src/app/showcase/doc/treetable/treetabledoc.module.ts +++ b/src/app/showcase/doc/treetable/treetabledoc.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { TreeTableModule } from 'primeng/treetable'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppDocModule } from '@layout/doc/app.doc.module'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { ButtonModule } from 'primeng/button'; import { BasicDoc } from './basicdoc'; import { TemplateDoc } from './templatedoc'; @@ -12,7 +12,6 @@ import { PaginatorBasicDoc } from './paginatorbasicdoc'; import { PaginatorTemplateDoc } from './paginatortemplatedoc'; import { RouterModule } from '@angular/router'; import { SortSingleColumnDoc } from './sortsinglecolumndoc'; -import { SortMultipleColumnDoc } from './sortmultiplecolumndoc'; import { FilterDoc } from './filterdoc'; import { InputTextModule } from 'primeng/inputtext'; import { SelectButtonModule } from 'primeng/selectbutton'; @@ -45,9 +44,13 @@ import { SizeDoc } from './sizedoc'; import { GridlinesDoc } from './gridlinesdoc'; import { ControlledDoc } from './controlleddoc'; import { DeferredDemo } from '../../demo/deferreddemo'; +import { SortMultipleColumnsDoc } from './sortmultiplecolumnsdoc'; +import { ScrollFlexibleDoc } from './flexiblescrolldoc'; +import { DialogModule } from 'primeng/dialog'; +import { SortRemovableDoc } from './sortremovabledoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, TreeTableModule, ButtonModule, RouterModule, InputTextModule, SelectButtonModule, FormsModule, InputSwitchModule, ToastModule, MultiSelectModule, ContextMenuModule, DeferredDemo], + imports: [CommonModule, AppCodeModule, AppDocModule, TreeTableModule, ButtonModule, RouterModule, InputTextModule, SelectButtonModule, FormsModule, InputSwitchModule, ToastModule, MultiSelectModule, ContextMenuModule, DialogModule, DeferredDemo], exports: [AppDocModule], declarations: [ ImportDoc, @@ -57,7 +60,8 @@ import { DeferredDemo } from '../../demo/deferreddemo'; PaginatorBasicDoc, PaginatorTemplateDoc, SortSingleColumnDoc, - SortMultipleColumnDoc, + SortMultipleColumnsDoc, + SortRemovableDoc, FilterDoc, SelectionSingleDoc, SelectionMultipleDoc, @@ -68,6 +72,7 @@ import { DeferredDemo } from '../../demo/deferreddemo'; EditDoc, ScrollVerticalDoc, ScrollHorizontalDoc, + ScrollFlexibleDoc, FrozenColumnsDoc, ResizeFitDoc, ResizeExpandDoc, diff --git a/src/app/showcase/doc/tristatecheckbox/accessibilitydoc.ts b/src/app/showcase/doc/tristatecheckbox/accessibilitydoc.ts index 0286ec500f5..44670c964c3 100644 --- a/src/app/showcase/doc/tristatecheckbox/accessibilitydoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/accessibilitydoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'accessibility-doc', @@ -51,8 +51,8 @@ import { Code } from '../../domain/code'; export class AccessibilityDoc { code: Code = { basic: `Remember Me - + -` +` }; } diff --git a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts index 4a5c7148f82..c6d9e762df8 100644 --- a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'basic-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

        A model can be bound using the standard ngModel directive.

        - +
        @@ -18,20 +18,22 @@ export class BasicDoc { value: boolean | null = null; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'tri-state-checkbox-basic-demo', - templateUrl: './tri-state-checkbox-basic-demo.html' + templateUrl: './tri-state-checkbox-basic-demo.html', + standalone: true, + imports: [FormsModule, TriStateCheckboxModule] }) export class TriStateCheckboxBasicDemo { value: boolean | null = null; diff --git a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts index 75a5d381ea9..7f85e6fcf2a 100644 --- a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'disabled-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

        - +
        @@ -18,20 +18,22 @@ export class DisabledDoc { value!: string; code: Code = { - basic: ``, + basic: ``, - html: ` -
        - + html: `
        +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'tri-state-checkbox-disabled-demo', - templateUrl: './tri-state-checkbox-disabled-demo.html' + templateUrl: './tri-state-checkbox-disabled-demo.html', + standalone: true, + imports: [FormsModule, TriStateCheckboxModule] }) export class TriStateCheckboxDisabledDemo { value!: string; diff --git a/src/app/showcase/doc/tristatecheckbox/filleddoc.ts b/src/app/showcase/doc/tristatecheckbox/filleddoc.ts new file mode 100644 index 00000000000..51facf91ef1 --- /dev/null +++ b/src/app/showcase/doc/tristatecheckbox/filleddoc.ts @@ -0,0 +1,49 @@ +import { Component } from '@angular/core'; +import { Code } from '@domain/code'; + +@Component({ + selector: 'filled-doc', + template: ` + +

        Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

        +         +
        + +
        + + ` +}) +export class FilledDoc { + value: boolean | null = null; + + code: Code = { + basic: ``, + + html: `
        + + +
        `, + + typescript: `import { Component } from '@angular/core'; +import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; +import { FormsModule } from '@angular/forms'; + +@Component({ + selector: 'tri-state-checkbox-filled-demo', + templateUrl: './tri-state-checkbox-filled-demo.html', + standalone: true, + imports: [FormsModule, TriStateCheckboxModule] +}) +export class TriStateCheckboxFilledDemo { + value: boolean | null = null; +}` + }; +} diff --git a/src/app/showcase/doc/tristatecheckbox/importdoc.ts b/src/app/showcase/doc/tristatecheckbox/importdoc.ts index 359c734dfa9..682847d92c8 100644 --- a/src/app/showcase/doc/tristatecheckbox/importdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/importdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'import-doc', diff --git a/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts b/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts index 5ba39a33a97..5d59e3443db 100644 --- a/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/invaliddoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'invalid-doc', @@ -8,7 +8,7 @@ import { Code } from '../../domain/code';

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

        - +
        @@ -18,20 +18,33 @@ export class InvalidDoc { value: boolean | null = null; code: Code = { - basic: ` -`, + basic: ` +`, html: `
        - - + +
        `, - typescript: ` -import { Component } from '@angular/core'; + typescript: `import { Component } from '@angular/core'; +import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; +import { FormsModule } from '@angular/forms'; @Component({ selector: 'tri-state-checkbox-invalid-demo', - templateUrl: './tri-state-checkbox-invalid-demo.html' + templateUrl: './tri-state-checkbox-invalid-demo.html', + standalone: true, + imports: [FormsModule, TriStateCheckboxModule] }) export class TriStateCheckboxInvalidDemo { value: boolean | null = null; diff --git a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts index ce55dea5628..0cdb09b2318 100644 --- a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ selector: 'reactive-forms-doc', @@ -10,7 +10,7 @@ import { Code } from '../../domain/code';
        - +
        @@ -28,25 +28,34 @@ export class ReactiveFormsDoc implements OnInit { code: Code = { basic: `
        - - + + `, - html: ` -
        + html: `
        - - + +
        `, - typescript: ` -import { Component, OnInit } from '@angular/core'; -import { FormControl, FormGroup } from '@angular/forms'; + typescript: `import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; +import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; @Component({ selector: 'tri-state-checkbox-reactive-forms-demo', - templateUrl: './tri-state-checkbox-reactive-forms-demo.html' + templateUrl: './tri-state-checkbox-reactive-forms-demo.html', + standalone: true, + imports: [ReactiveFormsModule, TriStateCheckboxModule] }) export class TriStateCheckboxReactiveFormsDemo implements OnInit { formGroup!: FormGroup; diff --git a/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts b/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts index 9a4c7bd473c..ee8211a8d4b 100644 --- a/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts +++ b/src/app/showcase/doc/tristatecheckbox/tristatecheckboxdoc.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +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'; @@ -12,10 +12,11 @@ import { StyleDoc } from './styledoc'; import { RouterModule } from '@angular/router'; import { AccessibilityDoc } from './accessibilitydoc'; import { ReactiveFormsDoc } from './reactiveformsdoc'; +import { FilledDoc } from './filleddoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, TriStateCheckboxModule, FormsModule, ReactiveFormsModule, RouterModule], exports: [AppDocModule], - declarations: [ImportDoc, BasicDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc] + declarations: [ImportDoc, BasicDoc, InvalidDoc, DisabledDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, FilledDoc] }) export class TristatecheckboxDocModule {} diff --git a/src/app/showcase/layout/app.component.spec.ts b/src/app/showcase/layout/app.component.spec.ts index 3178c6abc39..97150fec21a 100644 --- a/src/app/showcase/layout/app.component.spec.ts +++ b/src/app/showcase/layout/app.component.spec.ts @@ -4,12 +4,12 @@ import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule } from '@angular/common/http'; -import { AppConfigService } from '../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; import { AppConfigComponent } from './config/app.config.component'; import { AppFooterComponent } from './footer/app.footer.component'; import { AppMenuComponent } from './menu/app.menu.component'; import { AppTopBarComponent } from './topbar/app.topbar.component'; -import { JsonService } from '../service/jsonservice'; +import { JsonService } from '@service/jsonservice'; import { AutoCompleteModule } from 'primeng/autocomplete'; describe('AppComponent', () => { diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index e1a9b2b4d64..00c250bf6a5 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -4,15 +4,15 @@ import { Component, Inject, OnInit, PLATFORM_ID, Renderer2, afterNextRender } fr import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NavigationEnd, Router, RouterOutlet } from '@angular/router'; import { PrimeNGConfig } from 'primeng/api'; -import { LandingComponent } from '../pages/landing/landing.component'; -import { AppConfigService } from '../service/appconfigservice'; -import { CarService } from '../service/carservice'; -import { CountryService } from '../service/countryservice'; -import { CustomerService } from '../service/customerservice'; -import { EventService } from '../service/eventservice'; -import { NodeService } from '../service/nodeservice'; -import { PhotoService } from '../service/photoservice'; -import { ProductService } from '../service/productservice'; +import { LandingComponent } from '@pages/landing/landing.component'; +import { AppConfigService } from '@service/appconfigservice'; +import { CarService } from '@service/carservice'; +import { CountryService } from '@service/countryservice'; +import { CustomerService } from '@service/customerservice'; +import { EventService } from '@service/eventservice'; +import { NodeService } from '@service/nodeservice'; +import { PhotoService } from '@service/photoservice'; +import { ProductService } from '@service/productservice'; import { AppMainComponent } from './app.main.component'; import { AppConfigComponent } from './config/app.config.component'; import { AppMenuComponent } from './menu/app.menu.component'; diff --git a/src/app/showcase/layout/app.main.component.ts b/src/app/showcase/layout/app.main.component.ts index 4d3ea671fb6..bf9bb532c63 100644 --- a/src/app/showcase/layout/app.main.component.ts +++ b/src/app/showcase/layout/app.main.component.ts @@ -2,7 +2,7 @@ import { CommonModule, DOCUMENT, IMAGE_CONFIG } from '@angular/common'; import { Component, Inject } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { DomHandler } from 'primeng/dom'; -import { AppConfigService } from '../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; import { AppConfigComponent } from './config/app.config.component'; import { AppFooterComponent } from './footer/app.footer.component'; import { AppMenuComponent } from './menu/app.menu.component'; @@ -36,10 +36,6 @@ export class AppMainComponent { return this.configService.state.newsActive; } - get isInputFilled(): boolean { - return this.configService.config().inputStyle === 'filled'; - } - get isDarkMode(): boolean { return this.configService.config().darkMode; } @@ -59,7 +55,6 @@ export class AppMainComponent { get containerClass() { return { 'layout-news-active': this.isNewsActive, - 'p-input-filled': this.isInputFilled, 'p-ripple-disabled': this.isRippleDisabled, 'layout-dark': this.isDarkMode, 'layout-light': !this.isDarkMode diff --git a/src/app/showcase/layout/app.routes.ts b/src/app/showcase/layout/app.routes.ts index 2411f8ee7ea..0dcfed47219 100644 --- a/src/app/showcase/layout/app.routes.ts +++ b/src/app/showcase/layout/app.routes.ts @@ -1,5 +1,5 @@ import { Routes } from '@angular/router'; -import { LandingComponent } from '../pages/landing/landing.component'; +import { LandingComponent } from '@pages/landing/landing.component'; import { AppMainComponent } from './app.main.component'; export const routes: Routes = [ @@ -10,120 +10,120 @@ export const routes: Routes = [ children: [ { path: '', redirectTo: 'installation', pathMatch: 'full' }, { path: 'accessibility', redirectTo: 'guides/accessibility', pathMatch: 'full' }, - { path: 'installation', loadChildren: () => import('../pages/installation/installation.module').then((m) => m.InstallationModule) }, - { path: 'configuration', loadChildren: () => import('../pages/configuration/configurationdemo.module').then((m) => m.ConfigurationDemoModule) }, - { path: 'playground', loadChildren: () => import('../pages/playground/playground.module').then((m) => m.PlaygroundModule) }, - { path: 'roadmap', loadChildren: () => import('../pages/roadmap/roadmap.module').then((m) => m.RoadmapModule) }, - { path: 'team', loadChildren: () => import('../pages/team/team.module').then((m) => m.TeamModule) }, - { path: 'partners', loadChildren: () => import('../pages/partners/partners.module').then((m) => m.PartnersModule) }, - { path: 'theming', loadChildren: () => import('../pages/theming/theming.module').then((m) => m.ThemingModule) }, - { path: 'icons', loadChildren: () => import('../pages/icons/iconsdemo.module').then((m) => m.IconsDemoModule) }, - { path: 'customicons', loadChildren: () => import('../pages/customicons/customiconsdemo.module').then((m) => m.CustomIconsDemoModule) }, - { path: 'accordion', loadChildren: () => import('../pages/accordion/accordiondemo.module').then((m) => m.AccordionDemoModule) }, - { path: 'avatar', loadChildren: () => import('../pages/avatar/avatardemo.module').then((m) => m.AvatarDemoModule) }, - { path: 'autocomplete', loadChildren: () => import('../pages/autocomplete/autocompletedemo.module').then((m) => m.AutoCompleteDemoModule) }, - { path: 'blockui', loadChildren: () => import('../pages/blockui/blockuidemo.module').then((m) => m.BlockUIDemoModule) }, - { path: 'badge', loadChildren: () => import('../pages/badge/badgedemo.module').then((m) => m.BadgeDemoModule) }, - { path: 'breadcrumb', loadChildren: () => import('../pages/breadcrumb/breadcrumbdemo.module').then((m) => m.BreadcrumbDemoModule) }, - { path: 'button', loadChildren: () => import('../pages/button/buttondemo.module').then((m) => m.ButtonDemoModule) }, - { path: 'calendar', loadChildren: () => import('../pages/calendar/calendardemo.module').then((m) => m.CalendarDemoModule) }, - { path: 'card', loadChildren: () => import('../pages/card/carddemo.module').then((m) => m.CardDemoModule) }, - { path: 'cascadeselect', loadChildren: () => import('../pages/cascadeselect/cascadeselectdemo.module').then((m) => m.CascadeSelectDemoModule) }, - { path: 'carousel', loadChildren: () => import('../pages/carousel/carouseldemo.module').then((m) => m.CarouselDemoModule) }, - { path: 'chart', loadChildren: () => import('../pages/chart/chartdemo.module').then((m) => m.ChartDemoModule) }, - { path: 'checkbox', loadChildren: () => import('../pages/checkbox/checkboxdemo.module').then((m) => m.CheckboxDemoModule) }, - { path: 'chip', loadChildren: () => import('../pages/chip/chipdemo.module').then((m) => m.ChipDemoModule) }, - { path: 'chips', loadChildren: () => import('../pages/chips/chipsdemo.module').then((m) => m.ChipsDemoModule) }, - { path: 'colorpicker', loadChildren: () => import('../pages/colorpicker/colorpickerdemo.module').then((m) => m.ColorPickerDemoModule) }, - { path: 'colors', loadChildren: () => import('../pages/colors/colorsdemo.module').then((m) => m.ColorsDemoModule) }, - { path: 'confirmdialog', loadChildren: () => import('../pages/confirmdialog/confirmdialogdemo.module').then((m) => m.ConfirmDialogDemoModule) }, - { path: 'confirmpopup', loadChildren: () => import('../pages/confirmpopup/confirmpopupdemo.module').then((m) => m.ConfirmPopupDemoModule) }, - { path: 'contextmenu', loadChildren: () => import('../pages/contextmenu/contextmenudemo.module').then((m) => m.ContextMenuDemoModule) }, - { path: 'dataview', loadChildren: () => import('../pages/dataview/dataviewdemo.module').then((m) => m.DataViewDemoModule) }, - { path: 'defer', loadChildren: () => import('../pages/defer/deferdemo.module').then((m) => m.DeferDemoModule) }, - { path: 'dialog', loadChildren: () => import('../pages/dialog/dialogdemo.module').then((m) => m.DialogDemoModule) }, - { path: 'dock', loadChildren: () => import('../pages/dock/dockdemo.module').then((m) => m.DockDemoModule) }, - { path: 'divider', loadChildren: () => import('../pages/divider/dividerdemo.module').then((m) => m.DividerDemoModule) }, - { path: 'dynamicdialog', loadChildren: () => import('../pages/dynamicdialog/dynamicdialogdemo.module').then((m) => m.DynamicDialogDemoModule) }, - { path: 'dragdrop', loadChildren: () => import('../pages/dragdrop/dragdropdemo.module').then((m) => m.DragDropDemoModule) }, - { path: 'dropdown', loadChildren: () => import('../pages/dropdown/dropdowndemo.module').then((m) => m.DropdownDemoModule) }, - { path: 'iconfield', loadChildren: () => import('../pages/iconfield/iconfielddemo.module').then((m) => m.IconFieldDemoModule) }, - { path: 'editor', loadChildren: () => import('../pages/editor/editordemo.module').then((m) => m.EditorDemoModule) }, - { path: 'floatlabel', loadChildren: () => import('../pages/floatlabel/floatlabeldemo.module').then((m) => m.FloatLabelDemoModule) }, - { path: 'fieldset', loadChildren: () => import('../pages/fieldset/fieldsetdemo.module').then((m) => m.FieldsetDemoModule) }, - { path: 'fileupload', loadChildren: () => import('../pages/fileupload/fileuploaddemo.module').then((m) => m.FileUploadDemoModule) }, - { path: 'filterservice', loadChildren: () => import('../pages/filterservice/filterservicedemo.module').then((m) => m.FilterServiceDemoModule) }, - { path: 'focustrap', loadChildren: () => import('../pages/focustrap/focustrapdemo.module').then((m) => m.FocusTrapDemoModule) }, - { path: 'galleria', loadChildren: () => import('../pages/galleria/galleriademo.module').then((m) => m.GalleriaDemoModule) }, - { path: 'image', loadChildren: () => import('../pages/image/imagedemo.module').then((m) => m.ImageDemoModule) }, - { path: 'inplace', loadChildren: () => import('../pages/inplace/inplacedemo.module').then((m) => m.InplaceDemoModule) }, - { path: 'metergroup', loadChildren: () => import('../pages/metergroup/metergroupdemo.module').then((m) => m.MeterGroupDemoModule) }, - { path: 'inputmask', loadChildren: () => import('../pages/inputmask/inputmaskdemo.module').then((m) => m.InputMaskDemoModule) }, - { path: 'inputnumber', loadChildren: () => import('../pages/inputnumber/inputnumberdemo.module').then((m) => m.InputNumberDemoModule) }, - { path: 'inputotp', loadChildren: () => import('../pages/inputotp/inputotpdemo.module').then((m) => m.InputOtpDemoModule) }, - { path: 'inputswitch', loadChildren: () => import('../pages/inputswitch/inputswitchdemo.module').then((m) => m.InputSwitchDemoModule) }, - { path: 'inputtext', loadChildren: () => import('../pages/inputtext/inputtextdemo.module').then((m) => m.InputTextDemoModule) }, - { path: 'inputgroup', loadChildren: () => import('../pages/inputgroup/inputgroupdemo.module').then((m) => m.InputGroupDemoModule) }, - { path: 'inputtextarea', loadChildren: () => import('../pages/inputtextarea/inputtextareademo.module').then((m) => m.InputTextareaDemoModule) }, - { path: 'knob', loadChildren: () => import('../pages/knob/knobdemo.module').then((m) => m.KnobDemoModule) }, - { path: 'keyfilter', loadChildren: () => import('../pages/keyfilter/keyfilterdemo.module').then((m) => m.KeyFilterDemoModule) }, - { path: 'listbox', loadChildren: () => import('../pages/listbox/listboxdemo.module').then((m) => m.ListboxDemoModule) }, - { path: 'lts', loadChildren: () => import('../pages/lts/lts.module').then((m) => m.LTSModule) }, - { path: 'megamenu', loadChildren: () => import('../pages/megamenu/megamenudemo.module').then((m) => m.MegaMenuDemoModule) }, - { path: 'menu', loadChildren: () => import('../pages/menu/menudemo.module').then((m) => m.MenuDemoModule) }, - { path: 'menubar', loadChildren: () => import('../pages/menubar/menubardemo.module').then((m) => m.MenubarDemoModule) }, - { path: 'messages', loadChildren: () => import('../pages/messages/messagesdemo.module').then((m) => m.MessagesDemoModule) }, - { path: 'multiselect', loadChildren: () => import('../pages/multiselect/multiselectdemo.module').then((m) => m.MultiSelectDemoModule) }, - { path: 'orderlist', loadChildren: () => import('../pages/orderlist/orderlistdemo.module').then((m) => m.OrderListDemoModule) }, - { path: 'organizationchart', loadChildren: () => import('../pages/organizationchart/organizationchartdemo.module').then((m) => m.OrganizationChartDemoModule) }, - { path: 'overlaypanel', loadChildren: () => import('../pages/overlaypanel/overlaypaneldemo.module').then((m) => m.OverlayPanelDemoModule) }, - { path: 'paginator', loadChildren: () => import('../pages/paginator/paginatordemo.module').then((m) => m.PaginatorDemoModule) }, - { path: 'panel', loadChildren: () => import('../pages/panel/paneldemo.module').then((m) => m.PanelDemoModule) }, - { path: 'panelmenu', loadChildren: () => import('../pages/panelmenu/panelmenudemo.module').then((m) => m.PanelMenuDemoModule) }, - { path: 'password', loadChildren: () => import('../pages/password/passworddemo.module').then((m) => m.PasswordDemoModule) }, - { path: 'picklist', loadChildren: () => import('../pages/picklist/picklistdemo.module').then((m) => m.PickListDemoModule) }, - { path: 'progressbar', loadChildren: () => import('../pages/progressbar/progressbardemo.module').then((m) => m.ProgressBarDemoModule) }, - { path: 'progressspinner', loadChildren: () => import('../pages/progressspinner/progressspinnerdemo.module').then((m) => m.ProgressSpinnerDemoModule) }, - { path: 'radiobutton', loadChildren: () => import('../pages/radiobutton/radiobuttondemo.module').then((m) => m.RadioButtonDemoModule) }, - { path: 'rating', loadChildren: () => import('../pages/rating/ratingdemo.module').then((m) => m.RatingDemoModule) }, - { path: 'ripple', loadChildren: () => import('../pages/ripple/rippledemo.module').then((m) => m.RippleDemoModule) }, - { path: 'scrollpanel', loadChildren: () => import('../pages/scrollpanel/scrollpaneldemo.module').then((m) => m.ScrollPanelDemoModule) }, - { path: 'scrolltop', loadChildren: () => import('../pages/scrolltop/scrolltopdemo.module').then((m) => m.ScrollTopDemoModule) }, - { path: 'selectbutton', loadChildren: () => import('../pages/selectbutton/selectbuttondemo.module').then((m) => m.SelectButtonDemoModule) }, - { path: 'sidebar', loadChildren: () => import('../pages/sidebar/sidebardemo.module').then((m) => m.SidebarDemoModule) }, - { path: 'skeleton', loadChildren: () => import('../pages/skeleton/skeletondemo.module').then((m) => m.SkeletonDemoModule) }, - { path: 'slider', loadChildren: () => import('../pages/slider/sliderdemo.module').then((m) => m.SliderDemoModule) }, - { path: 'speeddial', loadChildren: () => import('../pages/speeddial/speeddialdemo.module').then((m) => m.SpeedDialDemoModule) }, - { path: 'splitbutton', loadChildren: () => import('../pages/splitbutton/splitbuttondemo.module').then((m) => m.SplitButtonDemoModule) }, - { path: 'splitter', loadChildren: () => import('../pages/splitter/splitterdemo.module').then((m) => m.SplitterDemoModule) }, - { path: 'stepper', loadChildren: () => import('../pages/stepper/stepperdemo.module').then((m) => m.StepperDemoModule) }, - { path: 'steps', loadChildren: () => import('../pages/steps/stepsdemo.module').then((m) => m.StepsDemoModule) }, - { path: 'support', loadChildren: () => import('../pages/support/support.module').then((m) => m.SupportModule) }, - { path: 'styleclass', loadChildren: () => import('../pages/styleclass/styleclassdemo.module').then((m) => m.StyleClassDemoModule) }, - { path: 'tag', loadChildren: () => import('../pages/tag/tagdemo.module').then((m) => m.TagDemoModule) }, - { path: 'table', loadChildren: () => import('../pages/table/tabledemo.module').then((m) => m.TableDemoModule) }, - { path: 'tabmenu', loadChildren: () => import('../pages/tabmenu/tabmenudemo.module').then((m) => m.TabMenuDemoModule) }, - { path: 'tabview', loadChildren: () => import('../pages/tabview/tabviewdemo.module').then((m) => m.TabViewDemoModule) }, - { path: 'terminal', loadChildren: () => import('../pages/terminal/terminaldemo.module').then((m) => m.TerminalDemoModule) }, - { path: 'tieredmenu', loadChildren: () => import('../pages/tieredmenu/tieredmenudemo.module').then((m) => m.TieredMenuDemoModule) }, - { path: 'timeline', loadChildren: () => import('../pages/timeline/timelinedemo.module').then((m) => m.TimelineDemoModule) }, - { path: 'toast', loadChildren: () => import('../pages/toast/toastdemo.module').then((m) => m.ToastDemoModule) }, - { path: 'togglebutton', loadChildren: () => import('../pages/togglebutton/togglebuttondemo.module').then((m) => m.ToggleButtonDemoModule) }, - { path: 'toolbar', loadChildren: () => import('../pages/toolbar/toolbardemo.module').then((m) => m.ToolbarDemoModule) }, - { path: 'tooltip', loadChildren: () => import('../pages/tooltip/tooltipdemo.module').then((m) => m.TooltipDemoModule) }, - { path: 'tree', loadChildren: () => import('../pages/tree/treedemo.module').then((m) => m.TreeDemoModule) }, - { path: 'treeselect', loadChildren: () => import('../pages/treeselect/treeselectdemo.module').then((m) => m.TreeSelectDemoModule) }, - { path: 'treetable', loadChildren: () => import('../pages/treetable/treetabledemo.module').then((m) => m.TreeTableDemoModule) }, - { path: 'tristatecheckbox', loadChildren: () => import('../pages/tristatecheckbox/tristatecheckboxdemo.module').then((m) => m.TriStateCheckboxDemoModule) }, - { path: 'scroller', loadChildren: () => import('../pages/scroller/scrollerdemo.module').then((m) => m.ScrollerDemoModule) }, - { path: 'uikit', loadChildren: () => import('../pages/uikit/uikit.module').then((m) => m.UIKitModule) }, - { path: 'autofocus', loadChildren: () => import('../pages/autofocus/autofocusdemo.module').then((m) => m.AutoFocusDemoModule) }, - { path: 'overlay', loadChildren: () => import('../pages/overlay/overlaydemo.module').then((m) => m.OverlayDemoModule) }, - { path: 'animateonscroll', loadChildren: () => import('../pages/animate/animateonscrolldemo.module').then((m) => m.AnimateOnScrollDemoModule) }, - { path: 'templates', loadChildren: () => import('../pages/templates/templates.module').then((m) => m.TemplatesModule) }, - { path: 'guides', loadChildren: () => import('../pages/guides/guides.module').then((m) => m.GuidesModule) } + { path: 'autocomplete', loadChildren: () => import('@pages/autocomplete/routes') }, + { path: 'installation', loadChildren: () => import('@pages/installation/installation.module').then((m) => m.InstallationModule) }, + { path: 'configuration', loadChildren: () => import('@pages/configuration/configurationdemo.module').then((m) => m.ConfigurationDemoModule) }, + { path: 'playground', loadChildren: () => import('@pages/playground/playground.module').then((m) => m.PlaygroundModule) }, + { path: 'roadmap', loadChildren: () => import('@pages/roadmap/roadmap.module').then((m) => m.RoadmapModule) }, + { path: 'team', loadChildren: () => import('@pages/team/team.module').then((m) => m.TeamModule) }, + { path: 'partners', loadChildren: () => import('@pages/partners/partners.module').then((m) => m.PartnersModule) }, + { path: 'theming', loadChildren: () => import('@pages/theming/theming.module').then((m) => m.ThemingModule) }, + { path: 'icons', loadChildren: () => import('@pages/icons/iconsdemo.module').then((m) => m.IconsDemoModule) }, + { path: 'customicons', loadChildren: () => import('@pages/customicons/customiconsdemo.module').then((m) => m.CustomIconsDemoModule) }, + { path: 'accordion', loadChildren: () => import('@pages/accordion/routes') }, + { path: 'avatar', loadChildren: () => import('@pages/avatar/avatardemo.module').then((m) => m.AvatarDemoModule) }, + { path: 'blockui', loadChildren: () => import('@pages/blockui/blockuidemo.module').then((m) => m.BlockUIDemoModule) }, + { path: 'badge', loadChildren: () => import('@pages/badge/badgedemo.module').then((m) => m.BadgeDemoModule) }, + { path: 'breadcrumb', loadChildren: () => import('@pages/breadcrumb/breadcrumbdemo.module').then((m) => m.BreadcrumbDemoModule) }, + { path: 'button', loadChildren: () => import('@pages/button/buttondemo.module').then((m) => m.ButtonDemoModule) }, + { path: 'calendar', loadChildren: () => import('@pages/calendar/calendardemo.module').then((m) => m.CalendarDemoModule) }, + { path: 'card', loadChildren: () => import('@pages/card/carddemo.module').then((m) => m.CardDemoModule) }, + { path: 'cascadeselect', loadChildren: () => import('@pages/cascadeselect/cascadeselectdemo.module').then((m) => m.CascadeSelectDemoModule) }, + { path: 'carousel', loadChildren: () => import('@pages/carousel/carouseldemo.module').then((m) => m.CarouselDemoModule) }, + { path: 'chart', loadChildren: () => import('@pages/chart/chartdemo.module').then((m) => m.ChartDemoModule) }, + { path: 'checkbox', loadChildren: () => import('@pages/checkbox/checkboxdemo.module').then((m) => m.CheckboxDemoModule) }, + { path: 'chip', loadChildren: () => import('@pages/chip/chipdemo.module').then((m) => m.ChipDemoModule) }, + { path: 'chips', loadChildren: () => import('@pages/chips/chipsdemo.module').then((m) => m.ChipsDemoModule) }, + { path: 'colorpicker', loadChildren: () => import('@pages/colorpicker/colorpickerdemo.module').then((m) => m.ColorPickerDemoModule) }, + { path: 'colors', loadChildren: () => import('@pages/colors/colorsdemo.module').then((m) => m.ColorsDemoModule) }, + { path: 'confirmdialog', loadChildren: () => import('@pages/confirmdialog/confirmdialogdemo.module').then((m) => m.ConfirmDialogDemoModule) }, + { path: 'confirmpopup', loadChildren: () => import('@pages/confirmpopup/confirmpopupdemo.module').then((m) => m.ConfirmPopupDemoModule) }, + { path: 'contextmenu', loadChildren: () => import('@pages/contextmenu/contextmenudemo.module').then((m) => m.ContextMenuDemoModule) }, + { path: 'dataview', loadChildren: () => import('@pages/dataview/dataviewdemo.module').then((m) => m.DataViewDemoModule) }, + { path: 'defer', loadChildren: () => import('@pages/defer/deferdemo.module').then((m) => m.DeferDemoModule) }, + { path: 'dialog', loadChildren: () => import('@pages/dialog/dialogdemo.module').then((m) => m.DialogDemoModule) }, + { path: 'dock', loadChildren: () => import('@pages/dock/dockdemo.module').then((m) => m.DockDemoModule) }, + { path: 'divider', loadChildren: () => import('@pages/divider/dividerdemo.module').then((m) => m.DividerDemoModule) }, + { path: 'dynamicdialog', loadChildren: () => import('@pages/dynamicdialog/dynamicdialogdemo.module').then((m) => m.DynamicDialogDemoModule) }, + { path: 'dragdrop', loadChildren: () => import('@pages/dragdrop/dragdropdemo.module').then((m) => m.DragDropDemoModule) }, + { path: 'dropdown', loadChildren: () => import('@pages/dropdown/dropdowndemo.module').then((m) => m.DropdownDemoModule) }, + { path: 'iconfield', loadChildren: () => import('@pages/iconfield/iconfielddemo.module').then((m) => m.IconFieldDemoModule) }, + { path: 'editor', loadChildren: () => import('@pages/editor/editordemo.module').then((m) => m.EditorDemoModule) }, + { path: 'floatlabel', loadChildren: () => import('@pages/floatlabel/floatlabeldemo.module').then((m) => m.FloatLabelDemoModule) }, + { path: 'fieldset', loadChildren: () => import('@pages/fieldset/fieldsetdemo.module').then((m) => m.FieldsetDemoModule) }, + { path: 'fileupload', loadChildren: () => import('@pages/fileupload/fileuploaddemo.module').then((m) => m.FileUploadDemoModule) }, + { path: 'filterservice', loadChildren: () => import('@pages/filterservice/filterservicedemo.module').then((m) => m.FilterServiceDemoModule) }, + { path: 'focustrap', loadChildren: () => import('@pages/focustrap/focustrapdemo.module').then((m) => m.FocusTrapDemoModule) }, + { path: 'galleria', loadChildren: () => import('@pages/galleria/galleriademo.module').then((m) => m.GalleriaDemoModule) }, + { path: 'image', loadChildren: () => import('@pages/image/imagedemo.module').then((m) => m.ImageDemoModule) }, + { path: 'inplace', loadChildren: () => import('@pages/inplace/inplacedemo.module').then((m) => m.InplaceDemoModule) }, + { path: 'metergroup', loadChildren: () => import('@pages/metergroup/metergroupdemo.module').then((m) => m.MeterGroupDemoModule) }, + { path: 'inputmask', loadChildren: () => import('@pages/inputmask/inputmaskdemo.module').then((m) => m.InputMaskDemoModule) }, + { path: 'inputnumber', loadChildren: () => import('@pages/inputnumber/inputnumberdemo.module').then((m) => m.InputNumberDemoModule) }, + { path: 'inputotp', loadChildren: () => import('@pages/inputotp/inputotpdemo.module').then((m) => m.InputOtpDemoModule) }, + { path: 'inputswitch', loadChildren: () => import('@pages/inputswitch/inputswitchdemo.module').then((m) => m.InputSwitchDemoModule) }, + { path: 'inputtext', loadChildren: () => import('@pages/inputtext/inputtextdemo.module').then((m) => m.InputTextDemoModule) }, + { path: 'inputgroup', loadChildren: () => import('@pages/inputgroup/inputgroupdemo.module').then((m) => m.InputGroupDemoModule) }, + { path: 'inputtextarea', loadChildren: () => import('@pages/inputtextarea/inputtextareademo.module').then((m) => m.InputTextareaDemoModule) }, + { path: 'knob', loadChildren: () => import('@pages/knob/knobdemo.module').then((m) => m.KnobDemoModule) }, + { path: 'keyfilter', loadChildren: () => import('@pages/keyfilter/keyfilterdemo.module').then((m) => m.KeyFilterDemoModule) }, + { path: 'listbox', loadChildren: () => import('@pages/listbox/listboxdemo.module').then((m) => m.ListboxDemoModule) }, + { path: 'lts', loadChildren: () => import('@pages/lts/lts.module').then((m) => m.LTSModule) }, + { path: 'megamenu', loadChildren: () => import('@pages/megamenu/megamenudemo.module').then((m) => m.MegaMenuDemoModule) }, + { path: 'menu', loadChildren: () => import('@pages/menu/menudemo.module').then((m) => m.MenuDemoModule) }, + { path: 'menubar', loadChildren: () => import('@pages/menubar/menubardemo.module').then((m) => m.MenubarDemoModule) }, + { path: 'messages', loadChildren: () => import('@pages/messages/messagesdemo.module').then((m) => m.MessagesDemoModule) }, + { path: 'multiselect', loadChildren: () => import('@pages/multiselect/multiselectdemo.module').then((m) => m.MultiSelectDemoModule) }, + { path: 'orderlist', loadChildren: () => import('@pages/orderlist/orderlistdemo.module').then((m) => m.OrderListDemoModule) }, + { path: 'organizationchart', loadChildren: () => import('@pages/organizationchart/organizationchartdemo.module').then((m) => m.OrganizationChartDemoModule) }, + { path: 'overlaypanel', loadChildren: () => import('@pages/overlaypanel/overlaypaneldemo.module').then((m) => m.OverlayPanelDemoModule) }, + { path: 'paginator', loadChildren: () => import('@pages/paginator/paginatordemo.module').then((m) => m.PaginatorDemoModule) }, + { path: 'panel', loadChildren: () => import('@pages/panel/paneldemo.module').then((m) => m.PanelDemoModule) }, + { path: 'panelmenu', loadChildren: () => import('@pages/panelmenu/panelmenudemo.module').then((m) => m.PanelMenuDemoModule) }, + { path: 'password', loadChildren: () => import('@pages/password/passworddemo.module').then((m) => m.PasswordDemoModule) }, + { path: 'picklist', loadChildren: () => import('@pages/picklist/picklistdemo.module').then((m) => m.PickListDemoModule) }, + { path: 'progressbar', loadChildren: () => import('@pages/progressbar/progressbardemo.module').then((m) => m.ProgressBarDemoModule) }, + { path: 'progressspinner', loadChildren: () => import('@pages/progressspinner/progressspinnerdemo.module').then((m) => m.ProgressSpinnerDemoModule) }, + { path: 'radiobutton', loadChildren: () => import('@pages/radiobutton/radiobuttondemo.module').then((m) => m.RadioButtonDemoModule) }, + { path: 'rating', loadChildren: () => import('@pages/rating/ratingdemo.module').then((m) => m.RatingDemoModule) }, + { path: 'ripple', loadChildren: () => import('@pages/ripple/rippledemo.module').then((m) => m.RippleDemoModule) }, + { path: 'scrollpanel', loadChildren: () => import('@pages/scrollpanel/scrollpaneldemo.module').then((m) => m.ScrollPanelDemoModule) }, + { path: 'scrolltop', loadChildren: () => import('@pages/scrolltop/scrolltopdemo.module').then((m) => m.ScrollTopDemoModule) }, + { path: 'selectbutton', loadChildren: () => import('@pages/selectbutton/selectbuttondemo.module').then((m) => m.SelectButtonDemoModule) }, + { path: 'sidebar', loadChildren: () => import('@pages/sidebar/sidebardemo.module').then((m) => m.SidebarDemoModule) }, + { path: 'skeleton', loadChildren: () => import('@pages/skeleton/skeletondemo.module').then((m) => m.SkeletonDemoModule) }, + { path: 'slider', loadChildren: () => import('@pages/slider/sliderdemo.module').then((m) => m.SliderDemoModule) }, + { path: 'speeddial', loadChildren: () => import('@pages/speeddial/speeddialdemo.module').then((m) => m.SpeedDialDemoModule) }, + { path: 'splitbutton', loadChildren: () => import('@pages/splitbutton/splitbuttondemo.module').then((m) => m.SplitButtonDemoModule) }, + { path: 'splitter', loadChildren: () => import('@pages/splitter/splitterdemo.module').then((m) => m.SplitterDemoModule) }, + { path: 'stepper', loadChildren: () => import('@pages/stepper/stepperdemo.module').then((m) => m.StepperDemoModule) }, + { path: 'steps', loadChildren: () => import('@pages/steps/stepsdemo.module').then((m) => m.StepsDemoModule) }, + { path: 'support', loadChildren: () => import('@pages/support/support.module').then((m) => m.SupportModule) }, + { path: 'styleclass', loadChildren: () => import('@pages/styleclass/styleclassdemo.module').then((m) => m.StyleClassDemoModule) }, + { path: 'tag', loadChildren: () => import('@pages/tag/tagdemo.module').then((m) => m.TagDemoModule) }, + { path: 'table', loadChildren: () => import('@pages/table/tabledemo.module').then((m) => m.TableDemoModule) }, + { path: 'tabmenu', loadChildren: () => import('@pages/tabmenu/tabmenudemo.module').then((m) => m.TabMenuDemoModule) }, + { path: 'tabview', loadChildren: () => import('@pages/tabview/tabviewdemo.module').then((m) => m.TabViewDemoModule) }, + { path: 'terminal', loadChildren: () => import('@pages/terminal/terminaldemo.module').then((m) => m.TerminalDemoModule) }, + { path: 'tieredmenu', loadChildren: () => import('@pages/tieredmenu/tieredmenudemo.module').then((m) => m.TieredMenuDemoModule) }, + { path: 'timeline', loadChildren: () => import('@pages/timeline/timelinedemo.module').then((m) => m.TimelineDemoModule) }, + { path: 'toast', loadChildren: () => import('@pages/toast/toastdemo.module').then((m) => m.ToastDemoModule) }, + { path: 'togglebutton', loadChildren: () => import('@pages/togglebutton/togglebuttondemo.module').then((m) => m.ToggleButtonDemoModule) }, + { path: 'toolbar', loadChildren: () => import('@pages/toolbar/toolbardemo.module').then((m) => m.ToolbarDemoModule) }, + { path: 'tooltip', loadChildren: () => import('@pages/tooltip/tooltipdemo.module').then((m) => m.TooltipDemoModule) }, + { path: 'tree', loadChildren: () => import('@pages/tree/treedemo.module').then((m) => m.TreeDemoModule) }, + { path: 'treeselect', loadChildren: () => import('@pages/treeselect/treeselectdemo.module').then((m) => m.TreeSelectDemoModule) }, + { path: 'treetable', loadChildren: () => import('@pages/treetable/treetabledemo.module').then((m) => m.TreeTableDemoModule) }, + { path: 'tristatecheckbox', loadChildren: () => import('@pages/tristatecheckbox/tristatecheckboxdemo.module').then((m) => m.TriStateCheckboxDemoModule) }, + { path: 'scroller', loadChildren: () => import('@pages/scroller/scrollerdemo.module').then((m) => m.ScrollerDemoModule) }, + { path: 'uikit', loadChildren: () => import('@pages/uikit/uikit.module').then((m) => m.UIKitModule) }, + { path: 'autofocus', loadChildren: () => import('@pages/autofocus/autofocusdemo.module').then((m) => m.AutoFocusDemoModule) }, + { path: 'overlay', loadChildren: () => import('@pages/overlay/overlaydemo.module').then((m) => m.OverlayDemoModule) }, + { path: 'animateonscroll', loadChildren: () => import('@pages/animate/animateonscrolldemo.module').then((m) => m.AnimateOnScrollDemoModule) }, + { path: 'templates', loadChildren: () => import('@pages/templates/templates.module').then((m) => m.TemplatesModule) }, + { path: 'guides', loadChildren: () => import('@pages/guides/guides.module').then((m) => m.GuidesModule) } ] }, - { path: 'notfound', loadChildren: () => import('../pages/notfound/notfound.module').then((m) => m.NotFoundModule) }, + { path: 'notfound', loadChildren: () => import('@pages/notfound/notfound.module').then((m) => m.NotFoundModule) }, { path: '**', redirectTo: '/notfound' } ]; diff --git a/src/app/showcase/layout/config/app.config.component.html b/src/app/showcase/layout/config/app.config.component.html index 0bb6988a48b..662064b5a80 100644 --- a/src/app/showcase/layout/config/app.config.component.html +++ b/src/app/showcase/layout/config/app.config.component.html @@ -18,17 +18,17 @@
        Input Style -
        Ripple Effect - +
        Dark Mode - +
        diff --git a/src/app/showcase/layout/config/app.config.component.ts b/src/app/showcase/layout/config/app.config.component.ts index 6345016f6b3..ed0dca045b8 100644 --- a/src/app/showcase/layout/config/app.config.component.ts +++ b/src/app/showcase/layout/config/app.config.component.ts @@ -6,7 +6,8 @@ import { InputSwitchModule, InputSwitchChangeEvent } from 'primeng/inputswitch'; import { RadioButtonModule } from 'primeng/radiobutton'; import { SelectButtonChangeEvent, SelectButtonModule } from 'primeng/selectbutton'; import { SidebarModule } from 'primeng/sidebar'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; +import { PrimeNGConfig } from 'primeng/api'; @Component({ selector: 'app-config', @@ -27,7 +28,7 @@ export class AppConfigComponent { @Output() onDarkModeSwitch = new EventEmitter(); - constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private configService: AppConfigService) {} + constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private configService: AppConfigService, private config: PrimeNGConfig) {} get isActive(): boolean { return this.configService.state.configActive; @@ -42,10 +43,10 @@ export class AppConfigComponent { } get inputStyle(): string { - return this.configService.config().inputStyle; + return this.config.inputStyle(); } - set inputStyle(val: string) { - this.configService.config.update((config) => ({ ...config, inputStyle: val })); + set inputStyle(val: 'outlined' | 'filled') { + this.config.inputStyle.set(val); } get ripple(): boolean { diff --git a/src/app/showcase/layout/doc/app.code.component.ts b/src/app/showcase/layout/doc/app.code.component.ts index a3cb0c12991..68f25e489e5 100644 --- a/src/app/showcase/layout/doc/app.code.component.ts +++ b/src/app/showcase/layout/doc/app.code.component.ts @@ -96,7 +96,7 @@ export class AppCodeComponent { @Input({ transform: booleanAttribute }) hideCodeSandbox: boolean = false; - @Input({ transform: booleanAttribute }) hideStackBlitz: boolean = false; + @Input({ transform: booleanAttribute }) hideStackBlitz: boolean = true; @ViewChild('codeElement') codeElement: ElementRef; @@ -152,6 +152,25 @@ export class AppCodeComponent { openStackBlitz() { if (this.code) { + if (this.code.typescript) { + const str = this.code.typescript; + const importModuleStatement = "import { ImportsModule } from './imports';"; + + if (!str.includes(importModuleStatement)) { + let modifiedCodeWithImportsModule = str.replace(/import\s+{[^{}]*}\s+from\s+'[^']+';[\r\n]*/g, (match) => { + if (match.includes('Module') && !match.includes('ReactiveFormsModule')) { + return ''; + } + return match; + }); + + modifiedCodeWithImportsModule = modifiedCodeWithImportsModule.replace(/\bimports:\s*\[[^\]]*\]/, 'imports: [ImportsModule]'); + + const finalModifiedCode = modifiedCodeWithImportsModule.replace(/import\s+\{[^{}]*\}\s+from\s+'@angular\/core';/, (match) => match + '\n' + importModuleStatement); + + this.code.typescript = finalModifiedCode; + } + } useStackBlitz({ code: this.code, selector: this.selector, extFiles: this.extFiles, routeFiles: this.routeFiles }); } } diff --git a/src/app/showcase/layout/doc/app.doc.component.ts b/src/app/showcase/layout/doc/app.doc.component.ts index fde8da282dc..2eb1c3ac0f3 100644 --- a/src/app/showcase/layout/doc/app.doc.component.ts +++ b/src/app/showcase/layout/doc/app.doc.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; import { Router } from '@angular/router'; -import { Doc } from '../../domain/doc'; +import { Doc } from '@domain/doc'; import { Title, Meta } from '@angular/platform-browser'; @Component({ diff --git a/src/app/showcase/layout/doc/app.docapitable.component.ts b/src/app/showcase/layout/doc/app.docapitable.component.ts index b7d19005b63..2e68fe71ab3 100644 --- a/src/app/showcase/layout/doc/app.docapitable.component.ts +++ b/src/app/showcase/layout/doc/app.docapitable.component.ts @@ -1,7 +1,7 @@ import { Location } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input, ViewContainerRef, booleanAttribute, numberAttribute } from '@angular/core'; import { Router } from '@angular/router'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'app-docapitable', diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts index 53417a1f953..98bb51719c5 100644 --- a/src/app/showcase/layout/doc/codeeditor/templates.ts +++ b/src/app/showcase/layout/doc/codeeditor/templates.ts @@ -160,32 +160,6 @@ module.exports = function (config) { }); };`; -const polyfills_ts = `/** -* This file includes polyfills needed by Angular and is loaded before the app. -* You can add your own extra polyfills to this file. -* -* This file is divided into 2 sections: -* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. -* 2. Application imports. Files imported after ZoneJS that should be loaded before your main -* file. -* -* The current setup is for so-called "evergreen" browsers; the last versions of browsers that -* automatically update themselves. This includes recent versions of Safari, Chrome (including -* Opera), Edge on the desktop, and iOS and Chrome on mobile. -* -* Learn more in https://angular.io/guide/browser-support -*/ - -/*************************************************************************************************** -* BROWSER POLYFILLS -*/ - -import 'zone.js'; - -/*************************************************************************************************** -* APPLICATION IMPORTS -*/ -`; const test_ts = ` // This file is required by karma.conf.js and loads recursively all the .spec and framework files @@ -224,45 +198,7 @@ max_line_length = off trim_trailing_whitespace = false `; -const main_ts = ` -import { enableProdMode } from '@angular/core'; -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; - -import { AppModule } from './app/app.module'; -import { environment } from './environments/environment'; - -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic().bootstrapModule(AppModule) - .catch(err => console.error(err)); -`; - -const environment_ts = ` -// This file can be replaced during build by using the \`fileReplacements\` array. -// \`ng build\` replaces \`environment.ts\` with \`environment.prod.ts\`. -// The list of file replacements can be found in \`angular.json\`. - -export const environment = { - production: false -}; - -/* - * For easier debugging in development mode, you can import the following file - * to ignore zone related error stack frames such as \`zone.run\`, \`zoneDelegate.invokeTask\`. - * - * This import should be commented out in production mode because it will have a negative impact - * on performance if an error is thrown. - */ -// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.`; -const environment_prod_ts = ` -export const environment = { - production: true -};`; - -const angular_json = ` -{ +const angular_json = `{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "cli": { @@ -290,12 +226,10 @@ const angular_json = ` "outputPath": "dist/example-app", "index": "src/index.html", "main": "src/main.ts", - "polyfills": "src/polyfills.ts", + "polyfills": ["zone.js"], "tsConfig": "tsconfig.app.json", "inlineStyleLanguage": "scss", - "assets": [ - "src/assets" - ], + "assets": ["src/assets"], "styles": [ "src/styles.scss", "node_modules/primeicons/primeicons.css", @@ -321,12 +255,6 @@ const angular_json = ` "maximumError": "4kb" } ], - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.prod.ts" - } - ], "outputHashing": "all" }, "development": { @@ -344,10 +272,10 @@ const angular_json = ` "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { - "browserTarget": "example-app:build:production" + "buildTarget": "example-app:build:production" }, "development": { - "browserTarget": "example-app:build:development" + "buildTarget": "example-app:build:development" } }, "defaultConfiguration": "development" @@ -362,17 +290,13 @@ const angular_json = ` "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", - "polyfills": "src/polyfills.ts", + "polyfills": ["zone.js"], "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "inlineStyleLanguage": "scss", - "assets": [ - "src/assets" - ], + "assets": ["src/assets"], "stylePreprocessorOptions": { - "includePaths": [ - "node_modules/" - ] + "includePaths": ["node_modules/"] }, "styles": [ "src/styles.scss", @@ -393,9 +317,8 @@ const angular_json = ` } } } - }, - "defaultProject": "example-app" -}`; + } + }`; const tsconfig_app_json = `{ "extends": "./tsconfig.json", @@ -404,8 +327,7 @@ const tsconfig_app_json = `{ "types": [] }, "files": [ - "src/main.ts", - "src/polyfills.ts" + "src/main.ts" ], "include": [ "src/**/*.d.ts" @@ -430,7 +352,11 @@ const tsconfig_json = `{ "lib": [ "es2022", "dom" - ] + ], + "paths": { + "@domain/*": ["src/domain/*"], + "@service/*": ["src/service/*"] + } } }`; @@ -444,8 +370,7 @@ const tsconfig_spec_json = `{ ] }, "files": [ - "test.ts", - "polyfills.ts" + "test.ts" ], "include": [ "**/*.spec.ts", @@ -453,32 +378,6 @@ const tsconfig_spec_json = `{ ] }`; -const browserlistrc = ` -# This file is used by the build system to adjust CSS and JS output to support the specified browsers below. -# For additional information regarding the format and rule options, please see: -# https://github.com/browserslist/browserslist#queries - -# You can see what browsers were selected by your queries by running: -# npx browserslist - -[production] -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR - -[library] -last 1 Chrome version -last 1 Firefox version -last 2 Edge major versions -last 2 Safari major versions -last 2 iOS major versions -Firefox ESR -not ios_saf 15.2-15.3 -not safari 15.2-15.3`; - const getAngularApp = (props: Props = {}) => { const { code, extFiles, routeFiles, selector } = props; const dependencies = getDependencies(); @@ -491,222 +390,318 @@ const getAngularApp = (props: Props = {}) => { 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'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { RouterModule } from '@angular/router'; -import { HttpClientModule } from '@angular/common/http'; -import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -${routeImports} - -// Import PrimeNG modules -import { AccordionModule } from 'primeng/accordion'; -import { AutoCompleteModule } from 'primeng/autocomplete'; -import { AvatarModule } from 'primeng/avatar'; -import { AvatarGroupModule } from 'primeng/avatargroup'; -import { BadgeModule } from 'primeng/badge'; -import { BreadcrumbModule } from 'primeng/breadcrumb'; -import { ButtonModule } from 'primeng/button'; -import { CalendarModule } from 'primeng/calendar'; -import { CarouselModule } from 'primeng/carousel'; -import { CascadeSelectModule } from 'primeng/cascadeselect'; -import { ChartModule } from 'primeng/chart'; -import { CheckboxModule } from 'primeng/checkbox'; -import { ChipModule } from 'primeng/chip'; -import { ChipsModule } from 'primeng/chips'; -import { ConfirmDialogModule } from 'primeng/confirmdialog'; -import { ConfirmPopupModule } from 'primeng/confirmpopup'; -import { ColorPickerModule } from 'primeng/colorpicker'; -import { ContextMenuModule } from 'primeng/contextmenu'; -import { DataViewModule } from 'primeng/dataview'; -import { VirtualScrollerModule } from 'primeng/virtualscroller'; -import { DialogModule } from 'primeng/dialog'; -import { DividerModule } from 'primeng/divider'; -import { DockModule } from 'primeng/dock'; -import { DragDropModule } from 'primeng/dragdrop'; -import { DropdownModule } from 'primeng/dropdown'; -import { DynamicDialogModule } from 'primeng/dynamicdialog'; -import { EditorModule } from 'primeng/editor'; -import { FieldsetModule } from 'primeng/fieldset'; -import { FileUploadModule } from 'primeng/fileupload'; -import { GalleriaModule } from 'primeng/galleria'; -import { InplaceModule } from 'primeng/inplace'; -import { InputMaskModule } from 'primeng/inputmask'; -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 { InputOtpModule } from 'primeng/inputotp' -import { ImageModule } from 'primeng/image'; -import { KnobModule } from 'primeng/knob'; -import { ListboxModule } from 'primeng/listbox'; -import { MegaMenuModule } from 'primeng/megamenu'; -import { MenuModule } from 'primeng/menu'; -import { MenubarModule } from 'primeng/menubar'; -import { MessageModule } from 'primeng/message'; -import { MessagesModule } from 'primeng/messages'; -import { MultiSelectModule } from 'primeng/multiselect'; -import { MeterGroupModule } from 'primeng/metergroup'; -import { OrderListModule } from 'primeng/orderlist'; -import { OrganizationChartModule } from 'primeng/organizationchart'; -import { OverlayPanelModule } from 'primeng/overlaypanel'; -import { PaginatorModule } from 'primeng/paginator'; -import { PanelModule } from 'primeng/panel'; -import { PanelMenuModule } from 'primeng/panelmenu'; -import { PasswordModule } from 'primeng/password'; -import { PickListModule } from 'primeng/picklist'; -import { ProgressBarModule } from 'primeng/progressbar'; -import { RadioButtonModule } from 'primeng/radiobutton'; -import { RatingModule } from 'primeng/rating'; -import { ScrollerModule } from 'primeng/scroller'; -import { ScrollPanelModule } from 'primeng/scrollpanel'; -import { ScrollTopModule } from 'primeng/scrolltop'; -import { SelectButtonModule } from 'primeng/selectbutton'; -import { SidebarModule } from 'primeng/sidebar'; -import { SkeletonModule } from 'primeng/skeleton'; -import { SlideMenuModule } from 'primeng/slidemenu'; -import { SliderModule } from 'primeng/slider'; -import { SpeedDialModule } from 'primeng/speeddial'; -import { SpinnerModule } from 'primeng/spinner'; -import { SplitButtonModule } from 'primeng/splitbutton'; -import { SplitterModule } from 'primeng/splitter'; -import { StepperModule } from 'primeng/stepper'; -import { StepsModule } from 'primeng/steps'; -import { TabMenuModule } from 'primeng/tabmenu'; -import { TableModule } from 'primeng/table'; -import { TabViewModule } from 'primeng/tabview'; -import { TagModule } from 'primeng/tag'; -import { TerminalModule } from 'primeng/terminal'; -import { TieredMenuModule } from 'primeng/tieredmenu'; -import { TimelineModule } from 'primeng/timeline'; -import { ToastModule } from 'primeng/toast'; -import { ToggleButtonModule } from 'primeng/togglebutton'; -import { ToolbarModule } from 'primeng/toolbar'; -import { TooltipModule } from 'primeng/tooltip'; -import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; -import { TreeModule } from 'primeng/tree'; -import { TreeSelectModule } from 'primeng/treeselect'; -import { TreeTableModule } from 'primeng/treetable'; -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({ - imports: [ - AvatarModule, - AvatarGroupModule, - BrowserModule, - FormsModule, - HttpClientModule, - ReactiveFormsModule, - BrowserAnimationsModule, - AccordionModule, - AutoCompleteModule, - BadgeModule, - BreadcrumbModule, - BlockUIModule, - ButtonModule, - CalendarModule, - CarouselModule, - CascadeSelectModule, - ChartModule, - CheckboxModule, - ChipsModule, - ChipModule, - ColorPickerModule, - ConfirmDialogModule, - ConfirmPopupModule, - ContextMenuModule, - VirtualScrollerModule, - DataViewModule, - DialogModule, - DividerModule, - DockModule, - DragDropModule, - DropdownModule, - DynamicDialogModule, - EditorModule, - FieldsetModule, - FileUploadModule, - GalleriaModule, - InplaceModule, - InputMaskModule, - InputSwitchModule, - InputTextModule, - InputTextareaModule, - InputNumberModule, - InputGroupModule, - InputGroupAddonModule, - InputOtpModule, - ImageModule, - KnobModule, - ListboxModule, - MegaMenuModule, - MenuModule, - MenubarModule, - MessageModule, - MessagesModule, - MultiSelectModule, - MeterGroupModule, - OrganizationChartModule, - OrderListModule, - OverlayPanelModule, - PaginatorModule, - PanelModule, - PanelMenuModule, - PasswordModule, - PickListModule, - ProgressSpinnerModule, - ProgressBarModule, - RadioButtonModule, - RatingModule, - SelectButtonModule, - SidebarModule, - ScrollerModule, - ScrollPanelModule, - ScrollTopModule, - SkeletonModule, - SlideMenuModule, - SliderModule, - SpeedDialModule, - SpinnerModule, - SplitterModule, - StepperModule, - SplitButtonModule, - StepsModule, - TableModule, - TabMenuModule, - TabViewModule, - TagModule, - TerminalModule, - TieredMenuModule, - TimelineModule, - ToastModule, - ToggleButtonModule, - ToolbarModule, - TooltipModule, - TriStateCheckboxModule, - TreeModule, - TreeSelectModule, - TreeTableModule, - AnimateModule, - CardModule, - RippleModule, - StyleClassModule, - ${routerModule}], - declarations: [ ${declarations} ], - bootstrap: [ ${componentName} ], - providers: [ ${providers} ] -}) - -export class AppModule {}`; + const imports_ts = `// Import PrimeNG modules + import { AccordionModule } from 'primeng/accordion'; + import { AutoCompleteModule } from 'primeng/autocomplete'; + import { AvatarModule } from 'primeng/avatar'; + import { AvatarGroupModule } from 'primeng/avatargroup'; + import { BadgeModule } from 'primeng/badge'; + import { BreadcrumbModule } from 'primeng/breadcrumb'; + import { ButtonModule } from 'primeng/button'; + import { CalendarModule } from 'primeng/calendar'; + import { CarouselModule } from 'primeng/carousel'; + import { CascadeSelectModule } from 'primeng/cascadeselect'; + import { ChartModule } from 'primeng/chart'; + import { CheckboxModule } from 'primeng/checkbox'; + import { ChipModule } from 'primeng/chip'; + import { ChipsModule } from 'primeng/chips'; + import { ConfirmDialogModule } from 'primeng/confirmdialog'; + import { ConfirmPopupModule } from 'primeng/confirmpopup'; + import { ColorPickerModule } from 'primeng/colorpicker'; + import { ContextMenuModule } from 'primeng/contextmenu'; + import { DataViewModule } from 'primeng/dataview'; + import { VirtualScrollerModule } from 'primeng/virtualscroller'; + import { DialogModule } from 'primeng/dialog'; + import { DividerModule } from 'primeng/divider'; + import { DockModule } from 'primeng/dock'; + import { DragDropModule } from 'primeng/dragdrop'; + import { DropdownModule } from 'primeng/dropdown'; + import { DynamicDialogModule } from 'primeng/dynamicdialog'; + import { EditorModule } from 'primeng/editor'; + import { FieldsetModule } from 'primeng/fieldset'; + import { FileUploadModule } from 'primeng/fileupload'; + import { GalleriaModule } from 'primeng/galleria'; + import { InplaceModule } from 'primeng/inplace'; + import { InputMaskModule } from 'primeng/inputmask'; + 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 { InputOtpModule } from 'primeng/inputotp'; + import { ImageModule } from 'primeng/image'; + import { KnobModule } from 'primeng/knob'; + import { ListboxModule } from 'primeng/listbox'; + import { MegaMenuModule } from 'primeng/megamenu'; + import { MenuModule } from 'primeng/menu'; + import { MenubarModule } from 'primeng/menubar'; + import { MessageModule } from 'primeng/message'; + import { MessagesModule } from 'primeng/messages'; + import { MultiSelectModule } from 'primeng/multiselect'; + import { MeterGroupModule } from 'primeng/metergroup'; + import { OrderListModule } from 'primeng/orderlist'; + import { OrganizationChartModule } from 'primeng/organizationchart'; + import { OverlayPanelModule } from 'primeng/overlaypanel'; + import { PaginatorModule } from 'primeng/paginator'; + import { PanelModule } from 'primeng/panel'; + import { PanelMenuModule } from 'primeng/panelmenu'; + import { PasswordModule } from 'primeng/password'; + import { PickListModule } from 'primeng/picklist'; + import { ProgressBarModule } from 'primeng/progressbar'; + import { RadioButtonModule } from 'primeng/radiobutton'; + import { RatingModule } from 'primeng/rating'; + import { ScrollerModule } from 'primeng/scroller'; + import { ScrollPanelModule } from 'primeng/scrollpanel'; + import { ScrollTopModule } from 'primeng/scrolltop'; + import { SelectButtonModule } from 'primeng/selectbutton'; + import { SidebarModule } from 'primeng/sidebar'; + import { SkeletonModule } from 'primeng/skeleton'; + import { SlideMenuModule } from 'primeng/slidemenu'; + import { SliderModule } from 'primeng/slider'; + import { SpeedDialModule } from 'primeng/speeddial'; + import { SpinnerModule } from 'primeng/spinner'; + import { SplitButtonModule } from 'primeng/splitbutton'; + import { SplitterModule } from 'primeng/splitter'; + import { StepperModule } from 'primeng/stepper'; + import { StepsModule } from 'primeng/steps'; + import { TabMenuModule } from 'primeng/tabmenu'; + import { TableModule } from 'primeng/table'; + import { TabViewModule } from 'primeng/tabview'; + import { TagModule } from 'primeng/tag'; + import { TerminalModule } from 'primeng/terminal'; + import { TieredMenuModule } from 'primeng/tieredmenu'; + import { TimelineModule } from 'primeng/timeline'; + import { ToastModule } from 'primeng/toast'; + import { ToggleButtonModule } from 'primeng/togglebutton'; + import { ToolbarModule } from 'primeng/toolbar'; + import { TooltipModule } from 'primeng/tooltip'; + import { TriStateCheckboxModule } from 'primeng/tristatecheckbox'; + import { TreeModule } from 'primeng/tree'; + import { TreeSelectModule } from 'primeng/treeselect'; + import { TreeTableModule } from 'primeng/treetable'; + 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 { FloatLabelModule } from 'primeng/floatlabel'; + import { IconFieldModule } from 'primeng/iconfield'; + import { InputIconModule } from 'primeng/inputicon'; + import { StyleClassModule } from 'primeng/styleclass'; + import { FormsModule, ReactiveFormsModule } from '@angular/forms'; + import { HttpClientModule } from '@angular/common/http'; + import { NgModule } from '@angular/core'; + ${serviceImports} + + @NgModule({ + imports: [ + AvatarModule, + AvatarGroupModule, + FormsModule, + HttpClientModule, + ReactiveFormsModule, + AccordionModule, + AutoCompleteModule, + BadgeModule, + BreadcrumbModule, + BlockUIModule, + ButtonModule, + CalendarModule, + CarouselModule, + CascadeSelectModule, + ChartModule, + CheckboxModule, + ChipsModule, + ChipModule, + ColorPickerModule, + ConfirmDialogModule, + ConfirmPopupModule, + ContextMenuModule, + VirtualScrollerModule, + DataViewModule, + DialogModule, + DividerModule, + DockModule, + DragDropModule, + DropdownModule, + DynamicDialogModule, + EditorModule, + FieldsetModule, + FileUploadModule, + GalleriaModule, + InplaceModule, + InputMaskModule, + InputSwitchModule, + InputTextModule, + InputTextareaModule, + InputNumberModule, + InputGroupModule, + InputGroupAddonModule, + InputOtpModule, + ImageModule, + KnobModule, + ListboxModule, + MegaMenuModule, + MenuModule, + MenubarModule, + MessageModule, + MessagesModule, + MultiSelectModule, + MeterGroupModule, + OrganizationChartModule, + OrderListModule, + OverlayPanelModule, + PaginatorModule, + PanelModule, + PanelMenuModule, + PasswordModule, + PickListModule, + ProgressSpinnerModule, + ProgressBarModule, + RadioButtonModule, + RatingModule, + SelectButtonModule, + SidebarModule, + ScrollerModule, + ScrollPanelModule, + ScrollTopModule, + SkeletonModule, + SlideMenuModule, + SliderModule, + SpeedDialModule, + SpinnerModule, + SplitterModule, + StepperModule, + SplitButtonModule, + StepsModule, + TableModule, + TabMenuModule, + TabViewModule, + TagModule, + TerminalModule, + TieredMenuModule, + TimelineModule, + ToastModule, + ToggleButtonModule, + ToolbarModule, + TooltipModule, + TriStateCheckboxModule, + TreeModule, + TreeSelectModule, + TreeTableModule, + AnimateModule, + CardModule, + RippleModule, + StyleClassModule, + ], + exports: [ + AvatarModule, + AvatarGroupModule, + FormsModule, + HttpClientModule, + ReactiveFormsModule, + AccordionModule, + AutoCompleteModule, + BadgeModule, + BreadcrumbModule, + BlockUIModule, + ButtonModule, + CalendarModule, + CarouselModule, + CascadeSelectModule, + ChartModule, + CheckboxModule, + ChipsModule, + ChipModule, + ColorPickerModule, + ConfirmDialogModule, + ConfirmPopupModule, + ContextMenuModule, + VirtualScrollerModule, + DataViewModule, + DialogModule, + DividerModule, + DockModule, + DragDropModule, + DropdownModule, + DynamicDialogModule, + EditorModule, + FieldsetModule, + FileUploadModule, + GalleriaModule, + InplaceModule, + InputMaskModule, + InputSwitchModule, + InputTextModule, + InputTextareaModule, + InputNumberModule, + InputGroupModule, + InputGroupAddonModule, + InputOtpModule, + ImageModule, + KnobModule, + ListboxModule, + MegaMenuModule, + MenuModule, + MenubarModule, + MessageModule, + MessagesModule, + MultiSelectModule, + MeterGroupModule, + OrganizationChartModule, + OrderListModule, + OverlayPanelModule, + PaginatorModule, + PanelModule, + PanelMenuModule, + PasswordModule, + PickListModule, + ProgressSpinnerModule, + ProgressBarModule, + RadioButtonModule, + RatingModule, + SelectButtonModule, + SidebarModule, + ScrollerModule, + ScrollPanelModule, + ScrollTopModule, + SkeletonModule, + SlideMenuModule, + SliderModule, + SpeedDialModule, + SpinnerModule, + SplitterModule, + StepperModule, + SplitButtonModule, + StepsModule, + TableModule, + TabMenuModule, + TabViewModule, + TagModule, + TerminalModule, + TieredMenuModule, + TimelineModule, + ToastModule, + ToggleButtonModule, + ToolbarModule, + TooltipModule, + TriStateCheckboxModule, + TreeModule, + TreeSelectModule, + TreeTableModule, + AnimateModule, + CardModule, + RippleModule, + StyleClassModule, + FloatLabelModule, + IconFieldModule, + InputIconModule + ], + providers: [ ${providers} ] + }) + export class ImportsModule {} + `; const index_html = ` @@ -727,19 +722,23 @@ export class AppModule {}`; `; + const main_ts = `import { bootstrapApplication } from '@angular/platform-browser'; + import { ${componentName} } from './app/${selector}'; + import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; + + bootstrapApplication(${componentName}, { + providers: [provideAnimationsAsync()], + }).catch((err) => console.error(err));`; + const defaultFiles = { 'src/main.ts': { content: main_ts }, - 'src/polyfills.ts': { content: polyfills_ts }, 'src/test.ts': { content: test_ts }, 'tsconfig.json': { content: tsconfig_json }, 'tsconfig.app.json': { content: tsconfig_app_json }, 'tsconfig.spec.json': { content: tsconfig_spec_json }, '.editorconfig': { content: editorconfig }, - 'src/environments/environment.ts': { content: environment_ts }, - 'src/environments/environment.prod.ts': { content: environment_prod_ts }, 'angular.json': { content: angular_json }, - '.browserslistrc': { content: browserlistrc }, - 'src/app/app.module.ts': { content: app_module_ts }, + 'src/app/imports.ts': { content: imports_ts }, 'src/index.html': { content: index_html }, 'src/karma.conf.js': { content: karma_conf_js }, 'src/styles.scss': { content: staticStyles.global }, @@ -764,9 +763,9 @@ export class AppModule {}`; } } }, - [`src/app/demo/${selector}.html`]: { content: code.html.trim() }, - [`src/app/demo/${selector}.ts`]: { content: code.typescript.trim() }, - [`src/app/demo/${selector}.scss`]: { content: code.scss ? code.scss.trim() : '' }, + + [`src/app/${selector}.ts`]: { content: code.typescript.trim() }, + [`src/app/${selector}.html`]: { content: code.html.trim() }, ...defaultFiles, ...externalFiles, ..._routeFiles diff --git a/src/app/showcase/layout/menu/app.menu.component.ts b/src/app/showcase/layout/menu/app.menu.component.ts index cd63303ebe4..3b9f9995779 100644 --- a/src/app/showcase/layout/menu/app.menu.component.ts +++ b/src/app/showcase/layout/menu/app.menu.component.ts @@ -6,7 +6,7 @@ import { DomHandler } from 'primeng/dom'; import { StyleClassModule } from 'primeng/styleclass'; import { Subscription } from 'rxjs'; import { default as MenuData } from 'src/assets/showcase/data/menu.json'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; import { AppMenuItemComponent } from './app.menuitem.component'; export interface MenuItem { diff --git a/src/app/showcase/layout/news/app.news.component.ts b/src/app/showcase/layout/news/app.news.component.ts index ad892d0995e..3180a3f34e5 100644 --- a/src/app/showcase/layout/news/app.news.component.ts +++ b/src/app/showcase/layout/news/app.news.component.ts @@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, afterNextRender import { FormsModule } from '@angular/forms'; import { StyleClassModule } from 'primeng/styleclass'; import News from '../../data/news.json'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'app-news', diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts index e993e36cca1..24a8d0c0649 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.ts +++ b/src/app/showcase/layout/topbar/app.topbar.component.ts @@ -6,7 +6,7 @@ import docsearch from '@docsearch/js'; import { DomHandler } from 'primeng/dom'; import { StyleClassModule } from 'primeng/styleclass'; import Versions from '../../data/versions.json'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'app-topbar', diff --git a/src/app/showcase/pages/accordion/accordiondemo-routing.module.ts b/src/app/showcase/pages/accordion/accordiondemo-routing.module.ts deleted file mode 100755 index 299ce71d26e..00000000000 --- a/src/app/showcase/pages/accordion/accordiondemo-routing.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { AccordionDemo } from './accordiondemo'; - -@NgModule({ - imports: [RouterModule.forChild([{ path: '', component: AccordionDemo }])], - exports: [RouterModule] -}) -export class AccordionDemoRoutingModule {} diff --git a/src/app/showcase/pages/accordion/accordiondemo.html b/src/app/showcase/pages/accordion/accordiondemo.html deleted file mode 100644 index 94c54c63a80..00000000000 --- a/src/app/showcase/pages/accordion/accordiondemo.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/showcase/pages/accordion/accordiondemo.module.ts b/src/app/showcase/pages/accordion/accordiondemo.module.ts deleted file mode 100755 index 136da7edb46..00000000000 --- a/src/app/showcase/pages/accordion/accordiondemo.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { AccordionDocModule } from '../../doc/accordion/accordiondoc.module'; -import { AccordionDemo } from './accordiondemo'; -import { AccordionDemoRoutingModule } from './accordiondemo-routing.module'; - -@NgModule({ - imports: [CommonModule, AccordionDemoRoutingModule, AccordionDocModule], - declarations: [AccordionDemo] -}) -export class AccordionDemoModule {} diff --git a/src/app/showcase/pages/accordion/accordiondemo.scss b/src/app/showcase/pages/accordion/accordiondemo.scss deleted file mode 100644 index 7cfe0589cba..00000000000 --- a/src/app/showcase/pages/accordion/accordiondemo.scss +++ /dev/null @@ -1,4 +0,0 @@ -:host ::ng-deep .p-accordion p { - line-height: 1.5; - margin: 0; -} \ No newline at end of file diff --git a/src/app/showcase/pages/accordion/accordiondemo.ts b/src/app/showcase/pages/accordion/accordiondemo.ts deleted file mode 100755 index 23073faef82..00000000000 --- a/src/app/showcase/pages/accordion/accordiondemo.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/accordion/accessibilitydoc'; -import { BasicDoc } from '../../doc/accordion/basicdoc'; -import { ControlledDoc } from '../../doc/accordion/controlleddoc'; -import { DisabledDoc } from '../../doc/accordion/disableddoc'; -import { ImportDoc } from '../../doc/accordion/importdoc'; -import { MultipleDoc } from '../../doc/accordion/multipledoc'; -import { StyleDoc } from '../../doc/accordion/styledoc'; -import { TemplateDoc } from '../../doc/accordion/templatedoc'; - -@Component({ - templateUrl: './accordiondemo.html', - styleUrls: ['./accordiondemo.scss'] -}) -export class AccordionDemo { - docs = [ - { - id: 'import', - label: 'Import', - component: ImportDoc - }, - { - id: 'basic', - label: 'Basic', - component: BasicDoc - }, - { - id: 'multiple', - label: 'Multiple', - component: MultipleDoc - }, - { - id: 'disabled', - label: 'Disabled', - component: DisabledDoc - }, - { - id: 'controlled', - label: 'Controlled', - component: ControlledDoc - }, - { - id: 'template', - label: 'Template', - component: TemplateDoc - }, - { - id: 'style', - label: 'Style', - component: StyleDoc - }, - { - id: 'accessibility', - label: 'Accessibility', - component: AccessibilityDoc - } - ]; -} diff --git a/src/app/showcase/pages/accordion/index.ts b/src/app/showcase/pages/accordion/index.ts new file mode 100755 index 00000000000..980f41c4d9e --- /dev/null +++ b/src/app/showcase/pages/accordion/index.ts @@ -0,0 +1,70 @@ +import { Component } from '@angular/core'; +import { AccessibilityDoc } from '@doc/accordion/accessibilitydoc'; +import { BasicDoc } from '@doc/accordion/basicdoc'; +import { ControlledDoc } from '@doc/accordion/controlleddoc'; +import { DisabledDoc } from '@doc/accordion/disableddoc'; +import { ImportDoc } from '@doc/accordion/importdoc'; +import { MultipleDoc } from '@doc/accordion/multipledoc'; +import { StyleDoc } from '@doc/accordion/styledoc'; +import { TemplateDoc } from '@doc/accordion/templatedoc'; +import { AccordionDocModule } from '@doc/accordion/accordiondoc.module'; +import { DynamicDoc } from '@doc/accordion/dynamicdoc'; + +@Component({ + template: ``, + imports: [AccordionDocModule], + standalone: true, + styles: `:host ::ng-deep .p-accordion p { + line-height: 1.5; + margin: 0; + }` +}) +export class AccordionDemo { + docs = [ + { + id: 'import', + label: 'Import', + component: ImportDoc + }, + { + id: 'basic', + label: 'Basic', + component: BasicDoc + }, + { + id: 'dynamic', + label: 'Dynamic', + component: DynamicDoc + }, + { + id: 'multiple', + label: 'Multiple', + component: MultipleDoc + }, + { + id: 'disabled', + label: 'Disabled', + component: DisabledDoc + }, + { + id: 'controlled', + label: 'Controlled', + component: ControlledDoc + }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, + { + id: 'style', + label: 'Style', + component: StyleDoc + }, + { + id: 'accessibility', + label: 'Accessibility', + component: AccessibilityDoc + } + ]; +} diff --git a/src/app/showcase/pages/accordion/routes.ts b/src/app/showcase/pages/accordion/routes.ts new file mode 100644 index 00000000000..38ab4457b34 --- /dev/null +++ b/src/app/showcase/pages/accordion/routes.ts @@ -0,0 +1,8 @@ +import { AccordionDemo } from './'; + +export default [ + { + path: '', + component: AccordionDemo + } +]; diff --git a/src/app/showcase/pages/animate/animateonscrolldemo.module.ts b/src/app/showcase/pages/animate/animateonscrolldemo.module.ts index 6799a65e560..b9d3a368d55 100755 --- a/src/app/showcase/pages/animate/animateonscrolldemo.module.ts +++ b/src/app/showcase/pages/animate/animateonscrolldemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { AnimateOnScrollDocModule } from '../../doc/animateonscroll/animateonscrolldoc.module'; +import { AnimateOnScrollDocModule } from '@doc/animateonscroll/animateonscrolldoc.module'; import { AnimateOnScrollDemoRoutingModule } from './animateonscrolldemo-routing.module'; import { AnimateOnScrollDemo } from './animateonscrolldemo'; diff --git a/src/app/showcase/pages/animate/animateonscrolldemo.ts b/src/app/showcase/pages/animate/animateonscrolldemo.ts index 299d2d4aaa3..0ffa9c7ae1b 100755 --- a/src/app/showcase/pages/animate/animateonscrolldemo.ts +++ b/src/app/showcase/pages/animate/animateonscrolldemo.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/animateonscroll/importdoc'; -import { BasicDoc } from '../../doc/animateonscroll/basicdoc'; -import { AccessibilityDoc } from '../../doc/animateonscroll/accessibilitydoc'; +import { ImportDoc } from '@doc/animateonscroll/importdoc'; +import { BasicDoc } from '@doc/animateonscroll/basicdoc'; +import { AccessibilityDoc } from '@doc/animateonscroll/accessibilitydoc'; @Component({ templateUrl: './animateonscrolldemo.html' diff --git a/src/app/showcase/pages/autocomplete/autocompletedemo.html b/src/app/showcase/pages/autocomplete/autocompletedemo.html deleted file mode 100755 index d55f4192a2f..00000000000 --- a/src/app/showcase/pages/autocomplete/autocompletedemo.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/showcase/pages/autocomplete/autocompletedemo.module.ts b/src/app/showcase/pages/autocomplete/autocompletedemo.module.ts deleted file mode 100755 index d19b26bf80d..00000000000 --- a/src/app/showcase/pages/autocomplete/autocompletedemo.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { AutoCompleteDocModule } from '../../doc/autocomplete/autocompletedoc.module'; - -import { AutoCompleteDemo } from './autocompletedemo'; -import { AutoCompleteDemoRoutingModule } from './autocompletedemo-routing.module'; - -@NgModule({ - imports: [CommonModule, AutoCompleteDemoRoutingModule, AutoCompleteDocModule], - declarations: [AutoCompleteDemo] -}) -export class AutoCompleteDemoModule {} diff --git a/src/app/showcase/pages/autocomplete/autocompletedemo.ts b/src/app/showcase/pages/autocomplete/index.ts similarity index 50% rename from src/app/showcase/pages/autocomplete/autocompletedemo.ts rename to src/app/showcase/pages/autocomplete/index.ts index 4739348a277..0c28140e800 100755 --- a/src/app/showcase/pages/autocomplete/autocompletedemo.ts +++ b/src/app/showcase/pages/autocomplete/index.ts @@ -1,21 +1,27 @@ -import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/autocomplete/basicdoc'; -import { GroupedDoc } from '../../doc/autocomplete/groupeddoc'; -import { ImportDoc } from '../../doc/autocomplete/importdoc'; -import { MultipleDoc } from '../../doc/autocomplete/multipledoc'; -import { StyleDoc } from '../../doc/autocomplete/styledoc'; -import { TemplateDoc } from '../../doc/autocomplete/templatedoc'; -import { VirtualScrollDoc } from '../../doc/autocomplete/virtualscrolldoc'; -import { AccessibilityDoc } from '../../doc/autocomplete/accessibilitydoc'; -import { DropdownDoc } from '../../doc/autocomplete/dropdowndoc'; -import { ForceSelectionDoc } from '../../doc/autocomplete/forceselectiondoc'; -import { ObjectsDoc } from '../../doc/autocomplete/objectsdoc'; -import { ReactiveFormsDoc } from '../../doc/autocomplete/reactiveformsdoc'; -import { FloatLabelDoc } from '../../doc/autocomplete/floatlabeldoc'; -import { DisabledDoc } from '../../doc/autocomplete/disableddoc'; -import { InvalidDoc } from '../../doc/autocomplete/invaliddoc'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { BasicDoc } from '@doc/autocomplete/basicdoc'; +import { GroupDoc } from '@doc/autocomplete/groupdoc'; +import { ImportDoc } from '@doc/autocomplete/importdoc'; +import { MultipleDoc } from '@doc/autocomplete/multipledoc'; +import { StyleDoc } from '@doc/autocomplete/styledoc'; +import { TemplateDoc } from '@doc/autocomplete/templatedoc'; +import { VirtualScrollDoc } from '@doc/autocomplete/virtualscrolldoc'; +import { AccessibilityDoc } from '@doc/autocomplete/accessibilitydoc'; +import { DropdownDoc } from '@doc/autocomplete/dropdowndoc'; +import { ForceSelectionDoc } from '@doc/autocomplete/forceselectiondoc'; +import { ObjectsDoc } from '@doc/autocomplete/objectsdoc'; +import { ReactiveFormsDoc } from '@doc/autocomplete/reactiveformsdoc'; +import { FloatLabelDoc } from '@doc/autocomplete/floatlabeldoc'; +import { DisabledDoc } from '@doc/autocomplete/disableddoc'; +import { InvalidDoc } from '@doc/autocomplete/invaliddoc'; +import { AutoCompleteDocModule } from '@doc/autocomplete/autocompletedoc.module'; +import { FilledDoc } from '@doc/autocomplete/filleddoc'; + @Component({ - templateUrl: './autocompletedemo.html' + template: ``, + standalone: true, + imports: [AutoCompleteDocModule], + changeDetection: ChangeDetectionStrategy.OnPush }) export class AutoCompleteDemo { docs = [ @@ -50,9 +56,9 @@ export class AutoCompleteDemo { component: TemplateDoc }, { - id: 'grouped', - label: 'Grouped', - component: GroupedDoc + id: 'group', + label: 'Group', + component: GroupDoc }, { id: 'forceselection', @@ -74,6 +80,11 @@ export class AutoCompleteDemo { label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'disabled', label: 'Disabled', diff --git a/src/app/showcase/pages/autocomplete/routes.ts b/src/app/showcase/pages/autocomplete/routes.ts new file mode 100644 index 00000000000..2491f259622 --- /dev/null +++ b/src/app/showcase/pages/autocomplete/routes.ts @@ -0,0 +1,8 @@ +import { AutoCompleteDemo } from './'; + +export default [ + { + path: '', + component: AutoCompleteDemo + } +]; diff --git a/src/app/showcase/pages/autocomplete/autocompletedemo-routing.module.ts b/src/app/showcase/pages/autocomplete/routing.ts similarity index 82% rename from src/app/showcase/pages/autocomplete/autocompletedemo-routing.module.ts rename to src/app/showcase/pages/autocomplete/routing.ts index 10704e879be..e09425721d1 100755 --- a/src/app/showcase/pages/autocomplete/autocompletedemo-routing.module.ts +++ b/src/app/showcase/pages/autocomplete/routing.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { AutoCompleteDemo } from './autocompletedemo'; +import { AutoCompleteDemo } from '.'; @NgModule({ imports: [RouterModule.forChild([{ path: '', component: AutoCompleteDemo }])], diff --git a/src/app/showcase/pages/autofocus/autofocusdemo.module.ts b/src/app/showcase/pages/autofocus/autofocusdemo.module.ts index e83a8229dfa..29dd2558ab4 100644 --- a/src/app/showcase/pages/autofocus/autofocusdemo.module.ts +++ b/src/app/showcase/pages/autofocus/autofocusdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { AutoFocusDocModule } from '../../doc/autofocus/autofocusdoc.module'; +import { AutoFocusDocModule } from '@doc/autofocus/autofocusdoc.module'; import { AutoFocusDemoRoutingModule } from './autofocusdemo-routing.module'; import { AutoFocusDemo } from './autofocusdemo'; diff --git a/src/app/showcase/pages/autofocus/autofocusdemo.ts b/src/app/showcase/pages/autofocus/autofocusdemo.ts index ce884ac18b7..8a9dbcc3e66 100644 --- a/src/app/showcase/pages/autofocus/autofocusdemo.ts +++ b/src/app/showcase/pages/autofocus/autofocusdemo.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/autofocus/importdoc'; -import { BasicDoc } from '../../doc/autofocus/basicdoc'; +import { ImportDoc } from '@doc/autofocus/importdoc'; +import { BasicDoc } from '@doc/autofocus/basicdoc'; @Component({ selector: 'autofocusdemo', diff --git a/src/app/showcase/pages/avatar/avatardemo.module.ts b/src/app/showcase/pages/avatar/avatardemo.module.ts index f19072c35c6..2bb2368154d 100755 --- a/src/app/showcase/pages/avatar/avatardemo.module.ts +++ b/src/app/showcase/pages/avatar/avatardemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { AvatarDocModule } from '../../doc/avatar/avatardoc.module'; +import { AvatarDocModule } from '@doc/avatar/avatardoc.module'; import { AvatarDemo } from './avatardemo'; import { AvatarDemoRoutingModule } from './avatardemo-routing.module'; diff --git a/src/app/showcase/pages/avatar/avatardemo.ts b/src/app/showcase/pages/avatar/avatardemo.ts index 45ddca0ce6c..e577179a34b 100755 --- a/src/app/showcase/pages/avatar/avatardemo.ts +++ b/src/app/showcase/pages/avatar/avatardemo.ts @@ -1,16 +1,16 @@ import { Component } from '@angular/core'; import { ImportDoc } from 'src/app/showcase/doc/avatar/importdoc'; import { LabelDoc } from 'src/app/showcase/doc/avatar/labeldoc'; -import { GroupDoc } from '../../doc/avatar/avatargroupdoc'; -import { AvatarStyleDoc } from '../../doc/avatar/avatarstyledoc'; -import { AvatarGroupStyleDoc } from '../../doc/avatar/avatargroupstyledoc'; -import { IconDoc } from '../../doc/avatar/icondoc'; -import { ImageDoc } from '../../doc/avatar/imagedoc'; -import { ShapeDoc } from '../../doc/avatar/shapedoc'; -import { SizeDoc } from '../../doc/avatar/sizedoc'; -import { BadgeDoc } from '../../doc/avatar/badgedoc'; -import { TemplateDoc } from '../../doc/avatar/templatedoc'; -import { AccessibilityDoc } from '../../doc/avatar/accessibilitydoc'; +import { GroupDoc } from '@doc/avatar/avatargroupdoc'; +import { AvatarStyleDoc } from '@doc/avatar/avatarstyledoc'; +import { AvatarGroupStyleDoc } from '@doc/avatar/avatargroupstyledoc'; +import { IconDoc } from '@doc/avatar/icondoc'; +import { ImageDoc } from '@doc/avatar/imagedoc'; +import { ShapeDoc } from '@doc/avatar/shapedoc'; +import { SizeDoc } from '@doc/avatar/sizedoc'; +import { BadgeDoc } from '@doc/avatar/badgedoc'; +import { TemplateDoc } from '@doc/avatar/templatedoc'; +import { AccessibilityDoc } from '@doc/avatar/accessibilitydoc'; @Component({ templateUrl: './avatardemo.html' diff --git a/src/app/showcase/pages/badge/badgedemo.module.ts b/src/app/showcase/pages/badge/badgedemo.module.ts index d1b8f7c026e..f0bbc57ea21 100644 --- a/src/app/showcase/pages/badge/badgedemo.module.ts +++ b/src/app/showcase/pages/badge/badgedemo.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { BadgeDemo } from './badgedemo'; -import { BadgeDocModule } from '../../doc/badge/badgedoc.module'; +import { BadgeDocModule } from '@doc/badge/badgedoc.module'; import { BadgeDemoRoutingModule } from './badgedemo-routing.module'; @NgModule({ diff --git a/src/app/showcase/pages/badge/badgedemo.ts b/src/app/showcase/pages/badge/badgedemo.ts index b4af1800805..dca295ad288 100644 --- a/src/app/showcase/pages/badge/badgedemo.ts +++ b/src/app/showcase/pages/badge/badgedemo.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/badge/importdoc'; -import { SizeDoc } from '../../doc/badge/sizedoc'; -import { BasicDoc } from '../../doc/badge/basicdoc'; -import { ButtonDoc } from '../../doc/badge/buttondoc'; -import { DirectiveDoc } from '../../doc/badge/directivedoc'; -import { PositionDoc } from '../../doc/badge/positiondoc'; -import { SeverityDoc } from '../../doc/badge/severitydoc'; -import { StyleDoc } from '../../doc/badge/styledoc'; -import { AccessibilityDoc } from '../../doc/badge/accessibilitydoc'; +import { ImportDoc } from '@doc/badge/importdoc'; +import { SizeDoc } from '@doc/badge/sizedoc'; +import { BasicDoc } from '@doc/badge/basicdoc'; +import { ButtonDoc } from '@doc/badge/buttondoc'; +import { DirectiveDoc } from '@doc/badge/directivedoc'; +import { PositionDoc } from '@doc/badge/positiondoc'; +import { SeverityDoc } from '@doc/badge/severitydoc'; +import { StyleDoc } from '@doc/badge/styledoc'; +import { AccessibilityDoc } from '@doc/badge/accessibilitydoc'; @Component({ templateUrl: './badgedemo.html' diff --git a/src/app/showcase/pages/blockui/blockuidemo.module.ts b/src/app/showcase/pages/blockui/blockuidemo.module.ts index 3e89344ee5c..c450dbd2f16 100755 --- a/src/app/showcase/pages/blockui/blockuidemo.module.ts +++ b/src/app/showcase/pages/blockui/blockuidemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { BlockUIDocModule } from '../../doc/blockui/blockuidoc.module'; +import { BlockUIDocModule } from '@doc/blockui/blockuidoc.module'; import { BlockUIDemo } from './blockuidemo'; import { BlockUIDemoRoutingModule } from './blockuidemo-routing.module'; diff --git a/src/app/showcase/pages/blockui/blockuidemo.ts b/src/app/showcase/pages/blockui/blockuidemo.ts index 38fca3dbb51..8d9cd7c9eeb 100755 --- a/src/app/showcase/pages/blockui/blockuidemo.ts +++ b/src/app/showcase/pages/blockui/blockuidemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/blockui/accessibilitydoc'; -import { BasicDoc } from '../../doc/blockui/basicdoc'; -import { DocumentDoc } from '../../doc/blockui/documentdoc'; -import { ImportDoc } from '../../doc/blockui/importdoc'; -import { StyleDoc } from '../../doc/blockui/styledoc'; +import { AccessibilityDoc } from '@doc/blockui/accessibilitydoc'; +import { BasicDoc } from '@doc/blockui/basicdoc'; +import { DocumentDoc } from '@doc/blockui/documentdoc'; +import { ImportDoc } from '@doc/blockui/importdoc'; +import { StyleDoc } from '@doc/blockui/styledoc'; @Component({ templateUrl: './blockuidemo.html', diff --git a/src/app/showcase/pages/breadcrumb/breadcrumbdemo.module.ts b/src/app/showcase/pages/breadcrumb/breadcrumbdemo.module.ts index 60c22cc4bf4..9d3d93b28c7 100755 --- a/src/app/showcase/pages/breadcrumb/breadcrumbdemo.module.ts +++ b/src/app/showcase/pages/breadcrumb/breadcrumbdemo.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { BreadcrumbDemo } from './breadcrumbdemo'; import { BreadcrumbDemoRoutingModule } from './breadcrumbdemo-routing.module'; -import { BreadcrumbDocModule } from '../../doc/breadcrumb/breadcrumbdoc.module'; +import { BreadcrumbDocModule } from '@doc/breadcrumb/breadcrumbdoc.module'; @NgModule({ imports: [CommonModule, BreadcrumbDemoRoutingModule, BreadcrumbDocModule], diff --git a/src/app/showcase/pages/breadcrumb/breadcrumbdemo.ts b/src/app/showcase/pages/breadcrumb/breadcrumbdemo.ts index 0fa2e967d9a..0ab0b8b878a 100755 --- a/src/app/showcase/pages/breadcrumb/breadcrumbdemo.ts +++ b/src/app/showcase/pages/breadcrumb/breadcrumbdemo.ts @@ -1,8 +1,10 @@ import { Component } from '@angular/core'; -import { StyleDoc } from '../../doc/breadcrumb/styledoc'; -import { BasicDoc } from '../../doc/breadcrumb/basicdoc'; -import { ImportDoc } from '../../doc/breadcrumb/importdoc'; -import { AccessibilityDoc } from '../../doc/breadcrumb/accessibilitydoc'; +import { StyleDoc } from '@doc/breadcrumb/styledoc'; +import { BasicDoc } from '@doc/breadcrumb/basicdoc'; +import { ImportDoc } from '@doc/breadcrumb/importdoc'; +import { AccessibilityDoc } from '@doc/breadcrumb/accessibilitydoc'; +import { TemplateDoc } from '@doc/breadcrumb/templatedoc'; +import { RouterDoc } from '@doc/breadcrumb/routerdoc'; @Component({ templateUrl: './breadcrumbdemo.html' @@ -15,10 +17,20 @@ export class BreadcrumbDemo { component: ImportDoc }, { - basic: 'basic', + id: 'basic', label: 'Basic', component: BasicDoc }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, + { + id: 'router', + label: 'Router', + component: RouterDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/button/buttondemo.module.ts b/src/app/showcase/pages/button/buttondemo.module.ts index a84b5ce1a8f..8c4c38427a0 100755 --- a/src/app/showcase/pages/button/buttondemo.module.ts +++ b/src/app/showcase/pages/button/buttondemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ButtonDocModule } from '../../doc/button/buttondoc.module'; +import { ButtonDocModule } from '@doc/button/buttondoc.module'; import { ButtonDemo } from './buttondemo'; import { ButtonDemoRoutingModule } from './buttondemo-routing.module'; diff --git a/src/app/showcase/pages/button/buttondemo.ts b/src/app/showcase/pages/button/buttondemo.ts index 06e296ea3cc..7148b0cd09e 100755 --- a/src/app/showcase/pages/button/buttondemo.ts +++ b/src/app/showcase/pages/button/buttondemo.ts @@ -1,24 +1,24 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/button/accessibilitydoc'; -import { BadgeDoc } from '../../doc/button/badgedoc'; -import { BasicDoc } from '../../doc/button/basicdoc'; -import { DirectiveDoc } from '../../doc/button/directivedoc'; -import { DisabledDoc } from '../../doc/button/disableddoc'; -import { IconsDoc } from '../../doc/button/iconsdoc'; -import { IconOnlyDoc } from '../../doc/button/iconsonlydoc'; -import { ImportDoc } from '../../doc/button/importdoc'; -import { LinkDoc } from '../../doc/button/linkdoc'; -import { LoadingDoc } from '../../doc/button/loadingdoc'; -import { OutlinedDoc } from '../../doc/button/outlineddoc'; -import { RaisedDoc } from '../../doc/button/raiseddoc'; -import { RaisedTextDoc } from '../../doc/button/raisedtextdoc'; -import { RoundedDoc } from '../../doc/button/roundeddoc'; -import { SeverityDoc } from '../../doc/button/severitydoc'; -import { SizesDoc } from '../../doc/button/sizesdoc'; -import { StyleDoc } from '../../doc/button/styledoc'; -import { TemplateDoc } from '../../doc/button/templatedoc'; -import { TextDoc } from '../../doc/button/textdoc'; -import { ButtonGroupDoc } from '../../doc/button/buttongroupdoc'; +import { AccessibilityDoc } from '@doc/button/accessibilitydoc'; +import { BadgeDoc } from '@doc/button/badgedoc'; +import { BasicDoc } from '@doc/button/basicdoc'; +import { DirectiveDoc } from '@doc/button/directivedoc'; +import { DisabledDoc } from '@doc/button/disableddoc'; +import { IconsDoc } from '@doc/button/iconsdoc'; +import { IconOnlyDoc } from '@doc/button/iconsonlydoc'; +import { ImportDoc } from '@doc/button/importdoc'; +import { LinkDoc } from '@doc/button/linkdoc'; +import { LoadingDoc } from '@doc/button/loadingdoc'; +import { OutlinedDoc } from '@doc/button/outlineddoc'; +import { RaisedDoc } from '@doc/button/raiseddoc'; +import { RaisedTextDoc } from '@doc/button/raisedtextdoc'; +import { RoundedDoc } from '@doc/button/roundeddoc'; +import { SeverityDoc } from '@doc/button/severitydoc'; +import { SizesDoc } from '@doc/button/sizesdoc'; +import { StyleDoc } from '@doc/button/styledoc'; +import { TemplateDoc } from '@doc/button/templatedoc'; +import { TextDoc } from '@doc/button/textdoc'; +import { ButtonGroupDoc } from '@doc/button/buttongroupdoc'; @Component({ templateUrl: './buttondemo.html' }) diff --git a/src/app/showcase/pages/calendar/calendardemo.module.ts b/src/app/showcase/pages/calendar/calendardemo.module.ts index 733851e8071..c4ec36a80e7 100755 --- a/src/app/showcase/pages/calendar/calendardemo.module.ts +++ b/src/app/showcase/pages/calendar/calendardemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { CalendarDocModule } from '../../doc/calendar/calendardoc.module'; +import { CalendarDocModule } from '@doc/calendar/calendardoc.module'; import { CalendarDemo } from './calendardemo'; import { CalendarDemoRoutingModule } from './calendardemo-routing.module'; diff --git a/src/app/showcase/pages/calendar/calendardemo.ts b/src/app/showcase/pages/calendar/calendardemo.ts index 1776b2517fa..a2c5a08b97a 100755 --- a/src/app/showcase/pages/calendar/calendardemo.ts +++ b/src/app/showcase/pages/calendar/calendardemo.ts @@ -1,31 +1,27 @@ import { Component } from '@angular/core'; -import { IconDoc } from '../../doc/calendar/icondoc'; -import { BasicDoc } from '../../doc/calendar/basicdoc'; -import { FormatDoc } from '../../doc/calendar/formatdoc'; -import { ImportDoc } from '../../doc/calendar/importdoc'; -import { LocaleDoc } from '../../doc/calendar/localedoc'; -import { MinMaxDoc } from '../../doc/calendar/minmaxdox'; -import { MultipleDoc } from '../../doc/calendar/multipledoc'; -import { RangeDoc } from '../../doc/calendar/rangedoc'; -import { ButtonBarDoc } from '../../doc/calendar/buttonbardoc'; -import { TimeDoc } from '../../doc/calendar/timedoc'; -import { MonthDoc } from '../../doc/calendar/monthdoc'; -import { YearDoc } from '../../doc/calendar/yeardoc'; -import { MultipleMonthDoc } from '../../doc/calendar/multiplemonths.doc'; -import { TemplateDoc } from '../../doc/calendar/templatedoc'; -import { InlineDoc } from '../../doc/calendar/inlinedoc'; -import { TouchUIDoc } from '../../doc/calendar/touchuidoc'; -import { DateTemplateDoc } from '../../doc/calendar/datetemplatedoc'; -import { PropsDoc } from '../../doc/calendar/propsdoc'; -import { StyleDoc } from '../../doc/calendar/styledoc'; -import { TemplatesDoc } from '../../doc/calendar/templatesdoc'; -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'; +import { IconDoc } from '@doc/calendar/icondoc'; +import { BasicDoc } from '@doc/calendar/basicdoc'; +import { FormatDoc } from '@doc/calendar/formatdoc'; +import { ImportDoc } from '@doc/calendar/importdoc'; +import { LocaleDoc } from '@doc/calendar/localedoc'; +import { MinMaxDoc } from '@doc/calendar/minmaxdox'; +import { MultipleDoc } from '@doc/calendar/multipledoc'; +import { RangeDoc } from '@doc/calendar/rangedoc'; +import { ButtonBarDoc } from '@doc/calendar/buttonbardoc'; +import { TimeDoc } from '@doc/calendar/timedoc'; +import { MonthDoc } from '@doc/calendar/monthdoc'; +import { YearDoc } from '@doc/calendar/yeardoc'; +import { MultipleMonthDoc } from '@doc/calendar/multiplemonths.doc'; +import { InlineDoc } from '@doc/calendar/inlinedoc'; +import { TouchUIDoc } from '@doc/calendar/touchuidoc'; +import { DateTemplateDoc } from '@doc/calendar/datetemplatedoc'; +import { StyleDoc } from '@doc/calendar/styledoc'; +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'; +import { FilledDoc } from '@doc/calendar/filleddoc'; @Component({ templateUrl: './calendardemo.html' }) @@ -101,11 +97,6 @@ export class CalendarDemo { label: 'Multiple Months', component: MultipleMonthDoc }, - { - id: 'customcontent', - label: 'Custom Content', - component: TemplateDoc - }, { id: 'datetemplate', label: 'Date Template', @@ -126,6 +117,11 @@ export class CalendarDemo { label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/card/carddemo.module.ts b/src/app/showcase/pages/card/carddemo.module.ts index bef5eccbe21..ae0989ee18c 100755 --- a/src/app/showcase/pages/card/carddemo.module.ts +++ b/src/app/showcase/pages/card/carddemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { CardDocModule } from '../../doc/card/carddoc.module'; +import { CardDocModule } from '@doc/card/carddoc.module'; import { CardDemo } from './carddemo'; import { CardDemoRoutingModule } from './carddemo-routing.module'; diff --git a/src/app/showcase/pages/card/carddemo.ts b/src/app/showcase/pages/card/carddemo.ts index fb312d2b8a9..3d665ce8b78 100755 --- a/src/app/showcase/pages/card/carddemo.ts +++ b/src/app/showcase/pages/card/carddemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/card/accessibilitydoc'; -import { AdvancedDoc } from '../../doc/card/advanceddoc'; -import { BasicDoc } from '../../doc/card/basicdoc'; -import { ImportDoc } from '../../doc/card/importdoc'; -import { StyleDoc } from '../../doc/card/styledoc'; +import { AccessibilityDoc } from '@doc/card/accessibilitydoc'; +import { AdvancedDoc } from '@doc/card/advanceddoc'; +import { BasicDoc } from '@doc/card/basicdoc'; +import { ImportDoc } from '@doc/card/importdoc'; +import { StyleDoc } from '@doc/card/styledoc'; @Component({ templateUrl: './carddemo.html' diff --git a/src/app/showcase/pages/carousel/carouseldemo.module.ts b/src/app/showcase/pages/carousel/carouseldemo.module.ts index 99844f097b1..a1306adcaaf 100755 --- a/src/app/showcase/pages/carousel/carouseldemo.module.ts +++ b/src/app/showcase/pages/carousel/carouseldemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { CarouselDocModule } from '../../doc/carousel/carouseldoc.module'; +import { CarouselDocModule } from '@doc/carousel/carouseldoc.module'; import { CarouselDemo } from './carouseldemo'; import { CarouselDemoRoutingModule } from './carouseldemo-routing.module'; diff --git a/src/app/showcase/pages/carousel/carouseldemo.ts b/src/app/showcase/pages/carousel/carouseldemo.ts index 8f1381dd256..e39654182b6 100755 --- a/src/app/showcase/pages/carousel/carouseldemo.ts +++ b/src/app/showcase/pages/carousel/carouseldemo.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/carousel/importdoc'; -import { BasicDoc } from '../../doc/carousel/basicdoc'; -import { StyleDoc } from '../../doc/carousel/styledoc'; -import { CircularDoc } from '../../doc/carousel/circulardoc'; -import { NumScrollDoc } from '../../doc/carousel/numscrolldoc'; -import { ResponsiveDoc } from '../../doc/carousel/responsivedoc'; -import { VerticalDoc } from '../../doc/carousel/verticaldoc'; -import { TemplateDoc } from '../../doc/carousel/templatedoc'; -import { AccessibilityDoc } from '../../doc/carousel/accessibilitydoc'; +import { ImportDoc } from '@doc/carousel/importdoc'; +import { BasicDoc } from '@doc/carousel/basicdoc'; +import { StyleDoc } from '@doc/carousel/styledoc'; +import { CircularDoc } from '@doc/carousel/circulardoc'; +import { NumScrollDoc } from '@doc/carousel/numscrolldoc'; +import { ResponsiveDoc } from '@doc/carousel/responsivedoc'; +import { VerticalDoc } from '@doc/carousel/verticaldoc'; +import { TemplateDoc } from '@doc/carousel/templatedoc'; +import { AccessibilityDoc } from '@doc/carousel/accessibilitydoc'; @Component({ templateUrl: './carouseldemo.html', diff --git a/src/app/showcase/pages/cascadeselect/cascadeselectdemo.module.ts b/src/app/showcase/pages/cascadeselect/cascadeselectdemo.module.ts index 7fbc5f1001f..77783918bc0 100644 --- a/src/app/showcase/pages/cascadeselect/cascadeselectdemo.module.ts +++ b/src/app/showcase/pages/cascadeselect/cascadeselectdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { CascadeSelectDocModule } from '../../doc/cascadeselect/cascasdeselectdoc.module'; +import { CascadeSelectDocModule } from '@doc/cascadeselect/cascasdeselectdoc.module'; import { CascadeSelectDemo } from './cascadeselectdemo'; import { CascadeSelectDemoRoutingModule } from './cascadeselectdemo-routing.module'; diff --git a/src/app/showcase/pages/cascadeselect/cascadeselectdemo.ts b/src/app/showcase/pages/cascadeselect/cascadeselectdemo.ts index 2b9355e3bf4..56f60f425c1 100644 --- a/src/app/showcase/pages/cascadeselect/cascadeselectdemo.ts +++ b/src/app/showcase/pages/cascadeselect/cascadeselectdemo.ts @@ -1,13 +1,15 @@ import { Component } from '@angular/core'; -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'; +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'; +import { FilledDoc } from '@doc/cascadeselect/filleddoc'; +import { LoadingDoc } from '@doc/cascadeselect/loadingdoc'; @Component({ templateUrl: './cascadeselectdemo.html' @@ -34,11 +36,21 @@ export class CascadeSelectDemo { label: 'Template', component: TemplateDoc }, + { + id: 'loading', + label: 'Loading', + component: LoadingDoc + }, { id: 'float-label', label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/chart/chartdemo.module.ts b/src/app/showcase/pages/chart/chartdemo.module.ts index 460cd7e6711..db4822b6675 100755 --- a/src/app/showcase/pages/chart/chartdemo.module.ts +++ b/src/app/showcase/pages/chart/chartdemo.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ChartModule } from 'primeng/chart'; -import { ChartDocModule } from '../../doc/chart/chartdoc.module'; +import { ChartDocModule } from '@doc/chart/chartdoc.module'; import { ChartDemo } from './chartdemo'; import { ChartDemoRoutingModule } from './chartdemo-routing.module'; diff --git a/src/app/showcase/pages/chart/chartdemo.ts b/src/app/showcase/pages/chart/chartdemo.ts index d9d849e6b3a..ba3715e7223 100755 --- a/src/app/showcase/pages/chart/chartdemo.ts +++ b/src/app/showcase/pages/chart/chartdemo.ts @@ -1,21 +1,21 @@ import { Component } from '@angular/core'; -import { ChartjsDoc } from '../../doc/chart/chartjsdoc'; -import { ImportDoc } from '../../doc/chart/importdoc'; -import { BasicDoc } from '../../doc/chart/basicdoc'; -import { PieDoc } from '../../doc/chart/piedoc'; -import { DoughnutDoc } from '../../doc/chart/doughnutdoc'; -import { ComboDoc } from '../../doc/chart/combodoc'; -import { HorizontalBarDoc } from '../../doc/chart/horizontalbardoc'; -import { LineDoc } from '../../doc/chart/linedoc'; -import { MultiAxisDoc } from '../../doc/chart/multiaxisdoc'; -import { PolarAreaDoc } from '../../doc/chart/polarareadoc'; -import { RadarDoc } from '../../doc/chart/radardoc'; -import { StackedBarDoc } from '../../doc/chart/stackedbardoc'; -import { VerticalBarDoc } from '../../doc/chart/verticalbardoc'; -import { LineStyleDoc } from '../../doc/chart/linestyledoc'; -import { PropsDoc } from '../../doc/chart/propsdoc'; -import { MethodsDoc } from '../../doc/chart/methodsdoc'; -import { AccessibilityDoc } from '../../doc/chart/accessibilitydoc'; +import { ChartjsDoc } from '@doc/chart/chartjsdoc'; +import { ImportDoc } from '@doc/chart/importdoc'; +import { BasicDoc } from '@doc/chart/basicdoc'; +import { PieDoc } from '@doc/chart/piedoc'; +import { DoughnutDoc } from '@doc/chart/doughnutdoc'; +import { ComboDoc } from '@doc/chart/combodoc'; +import { HorizontalBarDoc } from '@doc/chart/horizontalbardoc'; +import { LineDoc } from '@doc/chart/linedoc'; +import { MultiAxisDoc } from '@doc/chart/multiaxisdoc'; +import { PolarAreaDoc } from '@doc/chart/polarareadoc'; +import { RadarDoc } from '@doc/chart/radardoc'; +import { StackedBarDoc } from '@doc/chart/stackedbardoc'; +import { VerticalBarDoc } from '@doc/chart/verticalbardoc'; +import { LineStyleDoc } from '@doc/chart/linestyledoc'; +import { PropsDoc } from '@doc/chart/propsdoc'; +import { MethodsDoc } from '@doc/chart/methodsdoc'; +import { AccessibilityDoc } from '@doc/chart/accessibilitydoc'; @Component({ templateUrl: './chartdemo.html' diff --git a/src/app/showcase/pages/checkbox/checkboxdemo.module.ts b/src/app/showcase/pages/checkbox/checkboxdemo.module.ts index d82911b37b8..5d9d580c5a6 100755 --- a/src/app/showcase/pages/checkbox/checkboxdemo.module.ts +++ b/src/app/showcase/pages/checkbox/checkboxdemo.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { CheckboxModule } from 'primeng/checkbox'; -import { CheckboxDocModule } from '../../doc/checkbox/checkboxdoc.module'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; +import { CheckboxDocModule } from '@doc/checkbox/checkboxdoc.module'; +import { AppDocModule } from '@layout/doc/app.doc.module'; import { CheckboxDemo } from './checkboxdemo'; import { CheckboxDemoRoutingModule } from './checkboxdemo-routing.module'; diff --git a/src/app/showcase/pages/checkbox/checkboxdemo.ts b/src/app/showcase/pages/checkbox/checkboxdemo.ts index d1a72e4e702..4566fc9baf2 100755 --- a/src/app/showcase/pages/checkbox/checkboxdemo.ts +++ b/src/app/showcase/pages/checkbox/checkboxdemo.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; -import { LabelDoc } from '../../doc/checkbox/labeldoc'; -import { BasicDoc } from '../../doc/checkbox/basicdoc'; -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'; +import { BasicDoc } from '@doc/checkbox/basicdoc'; +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'; +import { FilledDoc } from '@doc/checkbox/filleddoc'; @Component({ templateUrl: './checkboxdemo.html' @@ -35,11 +35,6 @@ export class CheckboxDemo { label: 'Group', component: MultipleDoc }, - { - id: 'label', - label: 'Label', - component: LabelDoc - }, { id: 'dynamic', label: 'Dynamic', @@ -50,6 +45,11 @@ export class CheckboxDemo { label: 'Invalid', component: InvalidDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'disabled', label: 'Disabled', diff --git a/src/app/showcase/pages/chip/chipdemo.module.ts b/src/app/showcase/pages/chip/chipdemo.module.ts index ce9b93947e6..ee7670d3dda 100644 --- a/src/app/showcase/pages/chip/chipdemo.module.ts +++ b/src/app/showcase/pages/chip/chipdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ChipDocModule } from '../../doc/chip/chipdoc.module'; +import { ChipDocModule } from '@doc/chip/chipdoc.module'; import { ChipDemo } from './chipdemo'; import { ChipDemoRoutingModule } from './chipdemo-routing.module'; diff --git a/src/app/showcase/pages/chip/chipdemo.ts b/src/app/showcase/pages/chip/chipdemo.ts index 2947c4be55a..db0363deb23 100644 --- a/src/app/showcase/pages/chip/chipdemo.ts +++ b/src/app/showcase/pages/chip/chipdemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { IconDoc } from '../../doc/chip/icondoc'; -import { ImageDoc } from '../../doc/chip/imagedoc'; -import { ImportDoc } from '../../doc/chip/importdoc'; -import { TemplateDoc } from '../../doc/chip/templatedoc'; -import { BasicDoc } from '../../doc/chip/basicdoc'; -import { StyleDoc } from '../../doc/chip/styledoc'; -import { AccessibilityDoc } from '../../doc/chip/accessibilitydoc'; +import { IconDoc } from '@doc/chip/icondoc'; +import { ImageDoc } from '@doc/chip/imagedoc'; +import { ImportDoc } from '@doc/chip/importdoc'; +import { TemplateDoc } from '@doc/chip/templatedoc'; +import { BasicDoc } from '@doc/chip/basicdoc'; +import { StyleDoc } from '@doc/chip/styledoc'; +import { AccessibilityDoc } from '@doc/chip/accessibilitydoc'; @Component({ templateUrl: './chipdemo.html', diff --git a/src/app/showcase/pages/chips/chipsdemo.module.ts b/src/app/showcase/pages/chips/chipsdemo.module.ts index 0a8fe85226f..13f96df6dee 100755 --- a/src/app/showcase/pages/chips/chipsdemo.module.ts +++ b/src/app/showcase/pages/chips/chipsdemo.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { ChipsModule } from 'primeng/chips'; -import { ChipsDocModule } from '../../doc/chips/chipsdoc.module'; +import { ChipsDocModule } from '@doc/chips/chipsdoc.module'; import { ChipsDemo } from './chipsdemo'; import { ChipsDemoRoutingModule } from './chipsdemo-routing.module'; diff --git a/src/app/showcase/pages/chips/chipsdemo.ts b/src/app/showcase/pages/chips/chipsdemo.ts index 930ea4c3784..efeb46f46ea 100755 --- a/src/app/showcase/pages/chips/chipsdemo.ts +++ b/src/app/showcase/pages/chips/chipsdemo.ts @@ -1,13 +1,16 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/chips/importdoc'; -import { BasicDoc } from '../../doc/chips/basicdoc'; -import { CommaSeparatorDoc } from '../../doc/chips/commaseparator.doc'; -import { RegexpSeparatorDoc } from '../../doc/chips/regexpseparator.doc'; -import { TemplateDoc } from '../../doc/chips/templatedoc'; -import { StyleDoc } from '../../doc/chips/styledoc'; -import { AccessibilityDoc } from '../../doc/chips/accessibilitydoc'; -import { ReactiveFormsDoc } from '../../doc/chips/reactiveformsdoc'; -import { MaxValuesDoc } from '../../doc/chips/maxvaluesdoc'; +import { ImportDoc } from '@doc/chips/importdoc'; +import { BasicDoc } from '@doc/chips/basicdoc'; +import { SeparatorDoc } from '@doc/chips/separatordoc'; +import { TemplateDoc } from '@doc/chips/templatedoc'; +import { StyleDoc } from '@doc/chips/styledoc'; +import { AccessibilityDoc } from '@doc/chips/accessibilitydoc'; +import { ReactiveFormsDoc } from '@doc/chips/reactiveformsdoc'; +import { MaxValuesDoc } from '@doc/chips/maxvaluesdoc'; +import { FilledDoc } from '@doc/chips/filleddoc'; +import { FloatLabelDoc } from '@doc/chips/floatlabeldoc'; +import { InvalidDoc } from '@doc/chips/invaliddoc'; +import { DisabledDoc } from '@doc/chips/disableddoc'; @Component({ templateUrl: './chipsdemo.html' @@ -35,20 +38,35 @@ export class ChipsDemo { component: MaxValuesDoc }, { - id: 'commaseparator', - label: 'Comma Separator', - component: CommaSeparatorDoc - }, - { - id: 'regexpseparator', - label: 'RegExp Separator', - component: RegexpSeparatorDoc + id: 'separator', + label: 'Separator', + component: SeparatorDoc }, { id: 'template', label: 'Template', component: TemplateDoc }, + { + id: 'floatlabel', + label: 'Float Label', + component: FloatLabelDoc + }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, + { + id: 'invalid', + label: 'Invalid', + component: InvalidDoc + }, + { + id: 'disabled', + label: 'Disabled', + component: DisabledDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/colorpicker/colorpickerdemo.module.ts b/src/app/showcase/pages/colorpicker/colorpickerdemo.module.ts index 60ea906e9b7..11cc964d470 100755 --- a/src/app/showcase/pages/colorpicker/colorpickerdemo.module.ts +++ b/src/app/showcase/pages/colorpicker/colorpickerdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ColorPickerDocModule } from '../../doc/colorpicker/colorpickerdoc.module'; +import { ColorPickerDocModule } from '@doc/colorpicker/colorpickerdoc.module'; import { ColorPickerDemo } from './colorpickerdemo'; import { ColorPickerDemoRoutingModule } from './colorpickerdemo-routing.module'; diff --git a/src/app/showcase/pages/colorpicker/colorpickerdemo.ts b/src/app/showcase/pages/colorpicker/colorpickerdemo.ts index 12b50c48fe6..a46e18b14b7 100755 --- a/src/app/showcase/pages/colorpicker/colorpickerdemo.ts +++ b/src/app/showcase/pages/colorpicker/colorpickerdemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { InlineDoc } from '../../doc/colorpicker/inlinedoc'; -import { BasicDoc } from '../../doc/colorpicker/basicdoc'; -import { ImportDoc } from '../../doc/colorpicker/importdoc'; -import { FormatDoc } from '../../doc/colorpicker/formatdoc'; -import { DisabledDoc } from '../../doc/colorpicker/disableddoc'; -import { StyleDoc } from '../../doc/colorpicker/styledoc'; -import { AccessibilityDoc } from '../../doc/colorpicker/accessibilitydoc'; -import { ReactiveFormsDoc } from '../../doc/colorpicker/reactiveformsdoc'; +import { InlineDoc } from '@doc/colorpicker/inlinedoc'; +import { BasicDoc } from '@doc/colorpicker/basicdoc'; +import { ImportDoc } from '@doc/colorpicker/importdoc'; +import { FormatDoc } from '@doc/colorpicker/formatdoc'; +import { DisabledDoc } from '@doc/colorpicker/disableddoc'; +import { StyleDoc } from '@doc/colorpicker/styledoc'; +import { AccessibilityDoc } from '@doc/colorpicker/accessibilitydoc'; +import { ReactiveFormsDoc } from '@doc/colorpicker/reactiveformsdoc'; @Component({ templateUrl: './colorpickerdemo.html' diff --git a/src/app/showcase/pages/colors/colors.component.ts b/src/app/showcase/pages/colors/colors.component.ts index 568f1e95f48..140c22bd1ea 100755 --- a/src/app/showcase/pages/colors/colors.component.ts +++ b/src/app/showcase/pages/colors/colors.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { OverviewDoc } from '../../doc/colors/overviewdoc'; -import { PaletteDoc } from '../../doc/colors/palettedoc'; -import { SurfacesDoc } from '../../doc/colors/surfacesdoc'; +import { OverviewDoc } from '@doc/colors/overviewdoc'; +import { PaletteDoc } from '@doc/colors/palettedoc'; +import { SurfacesDoc } from '@doc/colors/surfacesdoc'; @Component({ templateUrl: './colors.component.html' diff --git a/src/app/showcase/pages/colors/colorsdemo.module.ts b/src/app/showcase/pages/colors/colorsdemo.module.ts index 23bb0e78433..e846204fdcf 100755 --- a/src/app/showcase/pages/colors/colorsdemo.module.ts +++ b/src/app/showcase/pages/colors/colorsdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ColorsDocModule } from '../../doc/colors/colorsdoc.module'; +import { ColorsDocModule } from '@doc/colors/colorsdoc.module'; import { ColorsDemoRoutingModule } from './colors-routing.module'; import { ColorsDemoComponent } from './colors.component'; diff --git a/src/app/showcase/pages/configuration/configurationdemo.component.ts b/src/app/showcase/pages/configuration/configurationdemo.component.ts index 96066a6a3f7..57f4b109a92 100644 --- a/src/app/showcase/pages/configuration/configurationdemo.component.ts +++ b/src/app/showcase/pages/configuration/configurationdemo.component.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { FilterModeDoc } from '../../doc/configuration/filtermodedoc'; -import { ImportDoc } from '../../doc/configuration/importdoc'; -import { ApiDoc } from '../../doc/configuration/locale/apidoc'; -import { NgxTranslateDoc } from '../../doc/configuration/locale/ngx-translatedoc'; -import { RepositoryDoc } from '../../doc/configuration/locale/repositorydoc'; -import { SetLocaleDoc } from '../../doc/configuration/locale/setlocaledoc'; -import { RippleDoc } from '../../doc/configuration/rippledoc'; -import { ZIndexDoc } from '../../doc/configuration/zindexdoc'; +import { FilterModeDoc } from '@doc/configuration/filtermodedoc'; +import { ImportDoc } from '@doc/configuration/importdoc'; +import { ApiDoc } from '@doc/configuration/locale/apidoc'; +import { NgxTranslateDoc } from '@doc/configuration/locale/ngx-translatedoc'; +import { RepositoryDoc } from '@doc/configuration/locale/repositorydoc'; +import { SetLocaleDoc } from '@doc/configuration/locale/setlocaledoc'; +import { RippleDoc } from '@doc/configuration/rippledoc'; +import { ZIndexDoc } from '@doc/configuration/zindexdoc'; @Component({ selector: 'configuration', diff --git a/src/app/showcase/pages/configuration/configurationdemo.module.ts b/src/app/showcase/pages/configuration/configurationdemo.module.ts index dad9f8a274a..2d91bf2ae0f 100644 --- a/src/app/showcase/pages/configuration/configurationdemo.module.ts +++ b/src/app/showcase/pages/configuration/configurationdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ConfigurationDocModule } from '../../doc/configuration/configurationdoc.module'; +import { ConfigurationDocModule } from '@doc/configuration/configurationdoc.module'; import { ConfigurationDemoRoutingModule } from './configurationdemo-routing.module'; import { ConfigurationDemoComponent } from './configurationdemo.component'; diff --git a/src/app/showcase/pages/confirmdialog/confirmdialogdemo.module.ts b/src/app/showcase/pages/confirmdialog/confirmdialogdemo.module.ts index b3b3a983792..197e3ed6e4b 100755 --- a/src/app/showcase/pages/confirmdialog/confirmdialogdemo.module.ts +++ b/src/app/showcase/pages/confirmdialog/confirmdialogdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ConfirmDialogDocModule } from '../../doc/confirmdialog/confirmdialogdoc.module'; +import { ConfirmDialogDocModule } from '@doc/confirmdialog/confirmdialogdoc.module'; import { ConfirmDialogDemo } from './confirmdialogdemo'; import { ConfirmDialogDemoRoutingModule } from './confirmdialogdemo-routing.module'; diff --git a/src/app/showcase/pages/confirmdialog/confirmdialogdemo.ts b/src/app/showcase/pages/confirmdialog/confirmdialogdemo.ts index 346d703c8a5..c05c10ae3a3 100755 --- a/src/app/showcase/pages/confirmdialog/confirmdialogdemo.ts +++ b/src/app/showcase/pages/confirmdialog/confirmdialogdemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/confirmdialog/basicdoc'; -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'; +import { BasicDoc } from '@doc/confirmdialog/basicdoc'; +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({ templateUrl: './confirmdialogdemo.html' diff --git a/src/app/showcase/pages/confirmpopup/confirmpopupdemo.module.ts b/src/app/showcase/pages/confirmpopup/confirmpopupdemo.module.ts index 3fb0dee7af2..ceda70a769c 100755 --- a/src/app/showcase/pages/confirmpopup/confirmpopupdemo.module.ts +++ b/src/app/showcase/pages/confirmpopup/confirmpopupdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ConfirmPopupDocModule } from '../../doc/confirmpopup/confirmpopupdoc.module'; +import { ConfirmPopupDocModule } from '@doc/confirmpopup/confirmpopupdoc.module'; import { ConfirmPopupDemo } from './confirmpopupdemo'; import { ConfirmPopupDemoRoutingModule } from './confirmpopupdemo-routing.module'; diff --git a/src/app/showcase/pages/confirmpopup/confirmpopupdemo.ts b/src/app/showcase/pages/confirmpopup/confirmpopupdemo.ts index 73759e8a441..4a2f17dab07 100755 --- a/src/app/showcase/pages/confirmpopup/confirmpopupdemo.ts +++ b/src/app/showcase/pages/confirmpopup/confirmpopupdemo.ts @@ -1,10 +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'; +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' }) diff --git a/src/app/showcase/pages/contextmenu/contextmenudemo.module.ts b/src/app/showcase/pages/contextmenu/contextmenudemo.module.ts index ad098c84c5b..74e58523a99 100755 --- a/src/app/showcase/pages/contextmenu/contextmenudemo.module.ts +++ b/src/app/showcase/pages/contextmenu/contextmenudemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ContextMenuDocModule } from '../../doc/contextmenu/contextmenudoc.module'; +import { ContextMenuDocModule } from '@doc/contextmenu/contextmenudoc.module'; import { ContextMenuDemo } from './contextmenudemo'; import { ContextMenuDemoRoutingModule } from './contextmenudemo-routing.module'; diff --git a/src/app/showcase/pages/contextmenu/contextmenudemo.ts b/src/app/showcase/pages/contextmenu/contextmenudemo.ts index 2d52556bd18..a6f1422be71 100755 --- a/src/app/showcase/pages/contextmenu/contextmenudemo.ts +++ b/src/app/showcase/pages/contextmenu/contextmenudemo.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/contextmenu/accessibilitydoc'; -import { BasicDoc } from '../../doc/contextmenu/basicdoc'; -import { DocumentDoc } from '../../doc/contextmenu/documentdoc'; -import { ImportDoc } from '../../doc/contextmenu/importdoc'; -import { StyleDoc } from '../../doc/contextmenu/styledoc'; +import { AccessibilityDoc } from '@doc/contextmenu/accessibilitydoc'; +import { BasicDoc } from '@doc/contextmenu/basicdoc'; +import { CommandDoc } from '@doc/contextmenu/commanddoc'; +import { DocumentDoc } from '@doc/contextmenu/documentdoc'; +import { ImportDoc } from '@doc/contextmenu/importdoc'; +import { RouterDoc } from '@doc/contextmenu/routerdoc'; +import { StyleDoc } from '@doc/contextmenu/styledoc'; +import { TableDoc } from '@doc/contextmenu/tabledoc'; +import { TemplateDoc } from '@doc/contextmenu/templatedoc'; @Component({ templateUrl: './contextmenudemo.html' @@ -25,6 +29,26 @@ export class ContextMenuDemo { label: 'Document', component: DocumentDoc }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, + { + id: 'command', + label: 'Command', + component: CommandDoc + }, + { + id: 'router', + label: 'Router', + component: RouterDoc + }, + { + id: 'table', + label: 'Table', + component: TableDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/customicons/customiconsdemo.component.ts b/src/app/showcase/pages/customicons/customiconsdemo.component.ts index fdd1a72fa80..7ff5dcfffa3 100755 --- a/src/app/showcase/pages/customicons/customiconsdemo.component.ts +++ b/src/app/showcase/pages/customicons/customiconsdemo.component.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; -import { FontAwesomeDoc } from '../../doc/customicons/fontawesomedoc'; -import { ImageDoc } from '../../doc/customicons/imagedoc'; -import { MaterialDoc } from '../../doc/customicons/materialdoc'; -import { SVGDoc } from '../../doc/customicons/svgdoc'; +import { FontAwesomeDoc } from '@doc/customicons/fontawesomedoc'; +import { ImageDoc } from '@doc/customicons/imagedoc'; +import { MaterialDoc } from '@doc/customicons/materialdoc'; +import { SVGDoc } from '@doc/customicons/svgdoc'; @Component({ templateUrl: './customiconsdemo.component.html' diff --git a/src/app/showcase/pages/customicons/customiconsdemo.module.ts b/src/app/showcase/pages/customicons/customiconsdemo.module.ts index 6328b189088..99fb46f7220 100755 --- a/src/app/showcase/pages/customicons/customiconsdemo.module.ts +++ b/src/app/showcase/pages/customicons/customiconsdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { CustomIconsDocModule } from '../../doc/customicons/customicons.module'; +import { CustomIconsDocModule } from '@doc/customicons/customicons.module'; import { CustomIconsDemoRoutingModule } from './customiconsdemo-routing.module'; import { CustomIconsDemoComponent } from './customiconsdemo.component'; diff --git a/src/app/showcase/pages/dataview/dataviewdemo.module.ts b/src/app/showcase/pages/dataview/dataviewdemo.module.ts index ddc63aa5acf..1e87ea6aaf2 100755 --- a/src/app/showcase/pages/dataview/dataviewdemo.module.ts +++ b/src/app/showcase/pages/dataview/dataviewdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DataViewDocModule } from '../../doc/dataview/dataviewdoc.module'; +import { DataViewDocModule } from '@doc/dataview/dataviewdoc.module'; import { DataViewDemo } from './dataviewdemo'; import { DataViewDemoRoutingModule } from './dataviewdemo-routing.module'; diff --git a/src/app/showcase/pages/dataview/dataviewdemo.ts b/src/app/showcase/pages/dataview/dataviewdemo.ts index eacbce447f5..12383d5746a 100755 --- a/src/app/showcase/pages/dataview/dataviewdemo.ts +++ b/src/app/showcase/pages/dataview/dataviewdemo.ts @@ -1,11 +1,12 @@ import { Component } from '@angular/core'; -import { StyleDoc } from '../../doc/dataview/styledoc'; -import { BasicDoc } from '../../doc/dataview/basicdoc'; -import { ImportDoc } from '../../doc/dataview/importdoc'; -import { LayoutDoc } from '../../doc/dataview/layoutdoc'; -import { PaginationDoc } from '../../doc/dataview/paginationdoc'; -import { SortingDoc } from '../../doc/dataview/sortingdoc'; -import { AccessibilityDoc } from '../../doc/dataview/accessibilitydoc'; +import { StyleDoc } from '@doc/dataview/styledoc'; +import { BasicDoc } from '@doc/dataview/basicdoc'; +import { ImportDoc } from '@doc/dataview/importdoc'; +import { LayoutDoc } from '@doc/dataview/layoutdoc'; +import { PaginationDoc } from '@doc/dataview/paginationdoc'; +import { SortingDoc } from '@doc/dataview/sortingdoc'; +import { AccessibilityDoc } from '@doc/dataview/accessibilitydoc'; +import { LoadingDoc } from '@doc/dataview/loadingdoc'; @Component({ templateUrl: './dataviewdemo.html', @@ -38,6 +39,11 @@ export class DataViewDemo { label: 'Layout', component: LayoutDoc }, + { + id: 'loading', + label: 'Loading', + component: LoadingDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/defer/deferdemo.module.ts b/src/app/showcase/pages/defer/deferdemo.module.ts index 3becd5d236d..35fb3197a62 100755 --- a/src/app/showcase/pages/defer/deferdemo.module.ts +++ b/src/app/showcase/pages/defer/deferdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DeferDocModule } from '../../doc/defer/deferdoc.module'; +import { DeferDocModule } from '@doc/defer/deferdoc.module'; import { DeferDemo } from './deferdemo'; import { DeferDemoRoutingModule } from './deferdemo-routing.module'; diff --git a/src/app/showcase/pages/defer/deferdemo.ts b/src/app/showcase/pages/defer/deferdemo.ts index 43747b12449..e0382497fe9 100755 --- a/src/app/showcase/pages/defer/deferdemo.ts +++ b/src/app/showcase/pages/defer/deferdemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; import { MessageService } from 'primeng/api'; -import { BasicDoc } from '../../doc/defer/basicdoc'; -import { ImportDoc } from '../../doc/defer/importdoc'; -import { DataTableDoc } from '../../doc/defer/datatabledoc'; -import { CarService } from '../../service/carservice'; +import { BasicDoc } from '@doc/defer/basicdoc'; +import { ImportDoc } from '@doc/defer/importdoc'; +import { DataTableDoc } from '@doc/defer/datatabledoc'; +import { CarService } from '@service/carservice'; import { Car } from '../domain/car'; @Component({ diff --git a/src/app/showcase/pages/dialog/dialogdemo.module.ts b/src/app/showcase/pages/dialog/dialogdemo.module.ts index a95ba764303..07a1a6865b6 100755 --- a/src/app/showcase/pages/dialog/dialogdemo.module.ts +++ b/src/app/showcase/pages/dialog/dialogdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DialogDocModule } from '../../doc/dialog/dialogdoc.module'; +import { DialogDocModule } from '@doc/dialog/dialogdoc.module'; import { DialogDemo } from './dialogdemo'; import { DialogDemoRoutingModule } from './dialogdemo-routing.module'; diff --git a/src/app/showcase/pages/dialog/dialogdemo.ts b/src/app/showcase/pages/dialog/dialogdemo.ts index 87606347c2d..80b77399476 100755 --- a/src/app/showcase/pages/dialog/dialogdemo.ts +++ b/src/app/showcase/pages/dialog/dialogdemo.ts @@ -1,16 +1,17 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/dialog/basicdoc'; -import { ImportDoc } from '../../doc/dialog/importdoc'; -import { LongContentDoc } from '../../doc/dialog/longcontentdoc'; -import { StyleDoc } from '../../doc/dialog/styledoc'; -import { ResponsiveDoc } from '../../doc/dialog/responsivedoc'; -import { PositionDoc } from '../../doc/dialog/positiondoc'; -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'; +import { BasicDoc } from '@doc/dialog/basicdoc'; +import { ImportDoc } from '@doc/dialog/importdoc'; +import { LongContentDoc } from '@doc/dialog/longcontentdoc'; +import { StyleDoc } from '@doc/dialog/styledoc'; +import { ResponsiveDoc } from '@doc/dialog/responsivedoc'; +import { PositionDoc } from '@doc/dialog/positiondoc'; +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'; +import { WithoutModalDoc } from '@doc/dialog/withoutmodaldoc'; @Component({ templateUrl: './dialogdemo.html' @@ -28,19 +29,9 @@ export class DialogDemo { component: BasicDoc }, { - id: 'longcontent', - label: 'Long Content', - component: LongContentDoc - }, - { - id: 'modal', - label: 'Modal', - component: ModalDoc - }, - { - id: 'responsive', - label: 'Responsive', - component: ResponsiveDoc + id: 'template', + label: 'Template', + component: TemplateDoc }, { id: 'position', @@ -53,14 +44,19 @@ export class DialogDemo { component: MaximizableDoc }, { - id: 'custom', - label: 'Custom Content', - component: TemplateDoc + id: 'longcontent', + label: 'Long Content', + component: LongContentDoc }, { - id: 'overlaysinside', - label: 'Overlays Inside', - component: OverlaysInsideDoc + id: 'withoutmodal', + label: 'Without Modal', + component: WithoutModalDoc + }, + { + id: 'responsive', + label: 'Responsive', + component: ResponsiveDoc }, { id: 'headless', diff --git a/src/app/showcase/pages/divider/dividerdemo.module.ts b/src/app/showcase/pages/divider/dividerdemo.module.ts index 5728155f473..85646cf94f8 100644 --- a/src/app/showcase/pages/divider/dividerdemo.module.ts +++ b/src/app/showcase/pages/divider/dividerdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DividerDocModule } from '../../doc/divider/dividerdoc.module'; +import { DividerDocModule } from '@doc/divider/dividerdoc.module'; import { DividerDemo } from './dividerdemo'; import { TagDemoRoutingModule } from './dividerdemo-routing.module'; diff --git a/src/app/showcase/pages/divider/dividerdemo.ts b/src/app/showcase/pages/divider/dividerdemo.ts index 5913e098013..4f252dcdda8 100644 --- a/src/app/showcase/pages/divider/dividerdemo.ts +++ b/src/app/showcase/pages/divider/dividerdemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/divider/accessibilitydoc'; -import { BasicDoc } from '../../doc/divider/basicdoc'; -import { ContentDoc } from '../../doc/divider/contentdoc'; -import { ImportDoc } from '../../doc/divider/importdoc'; -import { LoginDoc } from '../../doc/divider/logindoc'; -import { StyleDoc } from '../../doc/divider/styledoc'; -import { TypeDoc } from '../../doc/divider/typedoc'; -import { VerticalDoc } from '../../doc/divider/verticaldoc'; +import { AccessibilityDoc } from '@doc/divider/accessibilitydoc'; +import { BasicDoc } from '@doc/divider/basicdoc'; +import { ContentDoc } from '@doc/divider/contentdoc'; +import { ImportDoc } from '@doc/divider/importdoc'; +import { LoginDoc } from '@doc/divider/logindoc'; +import { StyleDoc } from '@doc/divider/styledoc'; +import { TypeDoc } from '@doc/divider/typedoc'; +import { VerticalDoc } from '@doc/divider/verticaldoc'; @Component({ templateUrl: './dividerdemo.html' @@ -28,16 +28,16 @@ export class DividerDemo { label: 'Type', component: TypeDoc }, - { - id: 'content', - label: 'Content', - component: ContentDoc - }, { id: 'vertical', label: 'Vertical', component: VerticalDoc }, + { + id: 'content', + label: 'Content', + component: ContentDoc + }, { id: 'login', label: 'Login', diff --git a/src/app/showcase/pages/dock/dockdemo.module.ts b/src/app/showcase/pages/dock/dockdemo.module.ts index 3747c37226d..94fadc622ed 100755 --- a/src/app/showcase/pages/dock/dockdemo.module.ts +++ b/src/app/showcase/pages/dock/dockdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DockDocModule } from '../../doc/dock/dockdoc.module'; +import { DockDocModule } from '@doc/dock/dockdoc.module'; import { DockDemo } from './dockdemo'; import { DockDemoRoutingModule } from './dockdemo-routing.module'; diff --git a/src/app/showcase/pages/dock/dockdemo.ts b/src/app/showcase/pages/dock/dockdemo.ts index f0cb85aad33..083e0680496 100755 --- a/src/app/showcase/pages/dock/dockdemo.ts +++ b/src/app/showcase/pages/dock/dockdemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { StyleDoc } from '../../doc/dock/styledoc'; -import { AdvancedDoc } from '../../doc/dock/advanceddoc'; -import { BasicDoc } from '../../doc/dock/basicdoc'; -import { ImportDoc } from '../../doc/dock/importdoc'; -import { AccessibilityDoc } from '../../doc/dock/accessibilitydoc'; +import { StyleDoc } from '@doc/dock/styledoc'; +import { AdvancedDoc } from '@doc/dock/advanceddoc'; +import { BasicDoc } from '@doc/dock/basicdoc'; +import { ImportDoc } from '@doc/dock/importdoc'; +import { AccessibilityDoc } from '@doc/dock/accessibilitydoc'; @Component({ templateUrl: './dockdemo.html', diff --git a/src/app/showcase/pages/dragdrop/dragdropdemo.module.ts b/src/app/showcase/pages/dragdrop/dragdropdemo.module.ts index c2dfbbf1fab..0b67875c284 100755 --- a/src/app/showcase/pages/dragdrop/dragdropdemo.module.ts +++ b/src/app/showcase/pages/dragdrop/dragdropdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DragDropDocModule } from '../../doc/dragdrop/dragdropdoc.module'; +import { DragDropDocModule } from '@doc/dragdrop/dragdropdoc.module'; import { DragDropDemo } from './dragdropdemo'; import { DragDropDemoRoutingModule } from './dragdropdemo-routing.module'; diff --git a/src/app/showcase/pages/dragdrop/dragdropdemo.ts b/src/app/showcase/pages/dragdrop/dragdropdemo.ts index e478317dd4e..7a80fb3a44f 100755 --- a/src/app/showcase/pages/dragdrop/dragdropdemo.ts +++ b/src/app/showcase/pages/dragdrop/dragdropdemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/dragdrop/importdoc'; -import { BasicDoc } from '../../doc/dragdrop/basicdoc'; -import { DataTableDoc } from '../../doc/dragdrop/datatabledoc'; -import { DropIndicatorDoc } from '../../doc/dragdrop/dropindicatordoc'; -import { DragHandleDoc } from '../../doc/dragdrop/draghandledoc'; +import { ImportDoc } from '@doc/dragdrop/importdoc'; +import { BasicDoc } from '@doc/dragdrop/basicdoc'; +import { DataTableDoc } from '@doc/dragdrop/datatabledoc'; +import { DropIndicatorDoc } from '@doc/dragdrop/dropindicatordoc'; +import { DragHandleDoc } from '@doc/dragdrop/draghandledoc'; @Component({ templateUrl: './dragdropdemo.html', diff --git a/src/app/showcase/pages/dropdown/dropdowndemo.module.ts b/src/app/showcase/pages/dropdown/dropdowndemo.module.ts index 9a1772701f2..3e42eaef6a9 100755 --- a/src/app/showcase/pages/dropdown/dropdowndemo.module.ts +++ b/src/app/showcase/pages/dropdown/dropdowndemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DropdownDocModule } from '../../doc/dropdown/dropdowndoc.module'; +import { DropdownDocModule } from '@doc/dropdown/dropdowndoc.module'; import { DropdownDemo } from './dropdowndemo'; import { DropdownDemoRoutingModule } from './dropdowndemo-routing.module'; diff --git a/src/app/showcase/pages/dropdown/dropdowndemo.ts b/src/app/showcase/pages/dropdown/dropdowndemo.ts index b14331b1a96..2b20efb8533 100755 --- a/src/app/showcase/pages/dropdown/dropdowndemo.ts +++ b/src/app/showcase/pages/dropdown/dropdowndemo.ts @@ -1,19 +1,23 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/dropdown/basicdoc'; -import { DisabledDoc } from '../../doc/dropdown/disableddoc'; -import { EditableDoc } from '../../doc/dropdown/editabledoc'; -import { FilterDoc } from '../../doc/dropdown/filterdoc'; -import { GroupDoc } from '../../doc/dropdown/groupdoc'; -import { ImportDoc } from '../../doc/dropdown/importdoc'; -import { TemplateDoc } from '../../doc/dropdown/templatedoc'; -import { VirtualScrollDoc } from '../../doc/dropdown/virtualscrolldoc'; -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'; -import { CustomFilterDoc } from '../../doc/dropdown/customfilterdoc'; +import { BasicDoc } from '@doc/dropdown/basicdoc'; +import { DisabledDoc } from '@doc/dropdown/disableddoc'; +import { EditableDoc } from '@doc/dropdown/editabledoc'; +import { FilterDoc } from '@doc/dropdown/filterdoc'; +import { GroupDoc } from '@doc/dropdown/groupdoc'; +import { ImportDoc } from '@doc/dropdown/importdoc'; +import { TemplateDoc } from '@doc/dropdown/templatedoc'; +import { VirtualScrollDoc } from '@doc/dropdown/virtualscrolldoc'; +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'; +import { CustomFilterDoc } from '@doc/dropdown/customfilterdoc'; +import { CheckmarkDoc } from '@doc/dropdown/checkmarkdoc'; +import { ClearIconDoc } from '@doc/dropdown/clearicondoc'; +import { LoadingStateDoc } from '@doc/dropdown/loadingstatedoc'; +import { FilledDoc } from '@doc/dropdown/filleddoc'; @Component({ templateUrl: './dropdowndemo.html', @@ -36,6 +40,11 @@ export class DropdownDemo { label: 'Reactive Forms', component: ReactiveFormsDoc }, + { + id: 'checkmark', + label: 'Checkmark', + component: CheckmarkDoc + }, { id: 'editable', label: 'Editable', @@ -67,6 +76,16 @@ export class DropdownDemo { } ] }, + { + id: 'clearicon', + label: 'Clear Icon', + component: ClearIconDoc + }, + { + id: 'loadingstate', + label: 'Loading State', + component: LoadingStateDoc + }, { id: 'virtualscroll', @@ -79,9 +98,14 @@ export class DropdownDemo { component: LazyVirtualScrollDoc }, { - id: 'disabled', - label: 'Disabled', - component: DisabledDoc + id: 'floatlabel', + label: 'Float Label', + component: FloatLabelDoc + }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc }, { id: 'invalid', @@ -89,9 +113,9 @@ export class DropdownDemo { component: InvalidDoc }, { - id: 'floatlabel', - label: 'Float Label', - component: FloatLabelDoc + id: 'disabled', + label: 'Disabled', + component: DisabledDoc }, { id: 'style', diff --git a/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.module.ts b/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.module.ts index 1391db93a94..67f6dd0d8fa 100755 --- a/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.module.ts +++ b/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { DynamicDialogDocModule } from '../../doc/dynamicdialog/dynamicdialogdoc.module'; +import { DynamicDialogDocModule } from '@doc/dynamicdialog/dynamicdialogdoc.module'; import { DynamicDialogDemo } from './dynamicdialogdemo'; import { DynamicDialogDemoRoutingModule } from './dynamicdialogdemo-routing.module'; diff --git a/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.ts b/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.ts index ff498b68af4..cc004e19091 100755 --- a/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.ts +++ b/src/app/showcase/pages/dynamicdialog/dynamicdialogdemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { OpenDoc } from '../../doc/dynamicdialog/opendoc'; -import { ImportDoc } from '../../doc/dynamicdialog/importdoc'; -import { StyleDoc } from '../../doc/dynamicdialog/styledoc'; -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 { CustomizationDoc } from '../../doc/dynamicdialog/customizationdoc'; +import { OpenDoc } from '@doc/dynamicdialog/opendoc'; +import { ImportDoc } from '@doc/dynamicdialog/importdoc'; +import { StyleDoc } from '@doc/dynamicdialog/styledoc'; +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 { CustomizationDoc } from '@doc/dynamicdialog/customizationdoc'; @Component({ templateUrl: './dynamicdialogdemo.html' diff --git a/src/app/showcase/pages/editor/editordemo.module.ts b/src/app/showcase/pages/editor/editordemo.module.ts index 3c62d893e51..a183fdd217e 100755 --- a/src/app/showcase/pages/editor/editordemo.module.ts +++ b/src/app/showcase/pages/editor/editordemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { EditorDocModule } from '../../doc/editor/editordoc.module'; +import { EditorDocModule } from '@doc/editor/editordoc.module'; import { EditorDemo } from './editordemo'; import { EditorDemoRoutingModule } from './editordemo-routing.module'; diff --git a/src/app/showcase/pages/editor/editordemo.ts b/src/app/showcase/pages/editor/editordemo.ts index e38bd53745c..7775b10a228 100755 --- a/src/app/showcase/pages/editor/editordemo.ts +++ b/src/app/showcase/pages/editor/editordemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/editor/accessibilitydoc'; -import { BasicDoc } from '../../doc/editor/basicdoc'; -import { CustomToolbarDoc } from '../../doc/editor/customtoolbardoc'; -import { ImportDoc } from '../../doc/editor/importdoc'; -import { QuillDoc } from '../../doc/editor/quilldoc'; -import { ReactiveFormsDoc } from '../../doc/editor/reactiveformsdoc'; -import { ReadOnlyDoc } from '../../doc/editor/readonlydoc'; -import { StyleDoc } from '../../doc/editor/styledoc'; +import { AccessibilityDoc } from '@doc/editor/accessibilitydoc'; +import { BasicDoc } from '@doc/editor/basicdoc'; +import { CustomToolbarDoc } from '@doc/editor/customtoolbardoc'; +import { ImportDoc } from '@doc/editor/importdoc'; +import { QuillDoc } from '@doc/editor/quilldoc'; +import { ReactiveFormsDoc } from '@doc/editor/reactiveformsdoc'; +import { ReadOnlyDoc } from '@doc/editor/readonlydoc'; +import { StyleDoc } from '@doc/editor/styledoc'; @Component({ templateUrl: './editordemo.html' diff --git a/src/app/showcase/pages/fieldset/fieldsetdemo.module.ts b/src/app/showcase/pages/fieldset/fieldsetdemo.module.ts index cf3d58037f4..8badeb19d88 100755 --- a/src/app/showcase/pages/fieldset/fieldsetdemo.module.ts +++ b/src/app/showcase/pages/fieldset/fieldsetdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { FieldsetDocModule } from '../../doc/fieldset/fieldsetdoc.module'; +import { FieldsetDocModule } from '@doc/fieldset/fieldsetdoc.module'; import { FieldsetDemo } from './fieldsetdemo'; import { FieldsetDemoRoutingModule } from './fieldsetdemo-routing.module'; diff --git a/src/app/showcase/pages/fieldset/fieldsetdemo.ts b/src/app/showcase/pages/fieldset/fieldsetdemo.ts index 763397a72e1..69d42ff60b3 100755 --- a/src/app/showcase/pages/fieldset/fieldsetdemo.ts +++ b/src/app/showcase/pages/fieldset/fieldsetdemo.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/fieldset/importdoc'; -import { BasicDoc } from '../../doc/fieldset/basicdoc'; -import { ToggleableDoc } from '../../doc/fieldset/toggleabledoc'; -import { TemplateDoc } from '../../doc/fieldset/templatedoc'; -import { StyleDoc } from '../../doc/fieldset/styledoc'; -import { AccessibilityDoc } from '../../doc/fieldset/accessibilitydoc'; +import { ImportDoc } from '@doc/fieldset/importdoc'; +import { BasicDoc } from '@doc/fieldset/basicdoc'; +import { ToggleableDoc } from '@doc/fieldset/toggleabledoc'; +import { TemplateDoc } from '@doc/fieldset/templatedoc'; +import { StyleDoc } from '@doc/fieldset/styledoc'; +import { AccessibilityDoc } from '@doc/fieldset/accessibilitydoc'; @Component({ templateUrl: './fieldsetdemo.html' diff --git a/src/app/showcase/pages/fileupload/fileuploaddemo.module.ts b/src/app/showcase/pages/fileupload/fileuploaddemo.module.ts index d78bd055d8e..21ceb5a219d 100755 --- a/src/app/showcase/pages/fileupload/fileuploaddemo.module.ts +++ b/src/app/showcase/pages/fileupload/fileuploaddemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { FileUploadDocModule } from '../../doc/fileupload/fileuploaddoc.module'; +import { FileUploadDocModule } from '@doc/fileupload/fileuploaddoc.module'; import { FileUploadDemo } from './fileuploaddemo'; import { FileUploadDemoRoutingModule } from './fileuploaddemo-routing.module'; diff --git a/src/app/showcase/pages/fileupload/fileuploaddemo.ts b/src/app/showcase/pages/fileupload/fileuploaddemo.ts index 0dca53e9a7e..db69b0192de 100755 --- a/src/app/showcase/pages/fileupload/fileuploaddemo.ts +++ b/src/app/showcase/pages/fileupload/fileuploaddemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { AdvancedDoc } from '../../doc/fileupload/advanceddoc'; -import { AutoDoc } from '../../doc/fileupload/autodoc'; -import { BasicDoc } from '../../doc/fileupload/basicdoc'; -import { ImportDoc } from '../../doc/fileupload/importdoc'; -import { StyleDoc } from '../../doc/fileupload/styledoc'; -import { TemplateDoc } from '../../doc/fileupload/templatedoc'; -import { AccessibilityDoc } from '../../doc/fileupload/accessibilitydoc'; +import { AdvancedDoc } from '@doc/fileupload/advanceddoc'; +import { AutoDoc } from '@doc/fileupload/autodoc'; +import { BasicDoc } from '@doc/fileupload/basicdoc'; +import { ImportDoc } from '@doc/fileupload/importdoc'; +import { StyleDoc } from '@doc/fileupload/styledoc'; +import { TemplateDoc } from '@doc/fileupload/templatedoc'; +import { AccessibilityDoc } from '@doc/fileupload/accessibilitydoc'; @Component({ templateUrl: './fileuploaddemo.html' @@ -27,11 +27,11 @@ export class FileUploadDemo { label: 'Auto', component: AutoDoc }, - { - id: 'template', - label: 'Template', - component: TemplateDoc - }, + // { + // id: 'template', + // label: 'Template', + // component: TemplateDoc + // }, { id: 'advanced', label: 'Advanced', diff --git a/src/app/showcase/pages/filterservice/filterservicedemo.module.ts b/src/app/showcase/pages/filterservice/filterservicedemo.module.ts index 4864be83d6e..f5987fdec2c 100755 --- a/src/app/showcase/pages/filterservice/filterservicedemo.module.ts +++ b/src/app/showcase/pages/filterservice/filterservicedemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { FilterServiceDocModule } from '../../doc/filterservice/filterservicedoc.module'; +import { FilterServiceDocModule } from '@doc/filterservice/filterservicedoc.module'; import { FilterServiceDemoRoutingModule } from './filterservice-routing.module'; import { FilterServiceDemo } from './filterservicedemo'; diff --git a/src/app/showcase/pages/filterservice/filterservicedemo.ts b/src/app/showcase/pages/filterservice/filterservicedemo.ts index ad073bcb17c..a7350106cc2 100755 --- a/src/app/showcase/pages/filterservice/filterservicedemo.ts +++ b/src/app/showcase/pages/filterservice/filterservicedemo.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { ApiDoc } from '../../doc/filterservice/apidoc'; -import { BuiltInConstraintsDoc } from '../../doc/filterservice/builtinconstraintsdoc'; -import { CustomConstraintsDoc } from '../../doc/filterservice/customconstraintsdoc'; -import { ImportDoc } from '../../doc/filterservice/importdoc'; -import { UsageDoc } from '../../doc/filterservice/usagedoc'; -import { TableIntegrationDoc } from '../../doc/filterservice/tableintegrationdoc'; +import { ApiDoc } from '@doc/filterservice/apidoc'; +import { BuiltInConstraintsDoc } from '@doc/filterservice/builtinconstraintsdoc'; +import { CustomConstraintsDoc } from '@doc/filterservice/customconstraintsdoc'; +import { ImportDoc } from '@doc/filterservice/importdoc'; +import { UsageDoc } from '@doc/filterservice/usagedoc'; +import { TableIntegrationDoc } from '@doc/filterservice/tableintegrationdoc'; @Component({ templateUrl: './filterservicedemo.html' diff --git a/src/app/showcase/pages/floatlabel/floatlabeldemo.module.ts b/src/app/showcase/pages/floatlabel/floatlabeldemo.module.ts index 71a9722a796..2a8ba4b9e33 100755 --- a/src/app/showcase/pages/floatlabel/floatlabeldemo.module.ts +++ b/src/app/showcase/pages/floatlabel/floatlabeldemo.module.ts @@ -3,7 +3,7 @@ import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { FloatLabelDemo } from './floatlabeldemo'; import { FloatLabelDemoRoutingModule } from './floatlabeldemo-routing.module'; -import { FloatLabelDocModule } from '../../doc/floatlabel/floatlabeldoc.module'; +import { FloatLabelDocModule } from '@doc/floatlabel/floatlabeldoc.module'; @NgModule({ imports: [CommonModule, FloatLabelDemoRoutingModule, FormsModule, FloatLabelDocModule], diff --git a/src/app/showcase/pages/floatlabel/floatlabeldemo.ts b/src/app/showcase/pages/floatlabel/floatlabeldemo.ts index 7f1ebde2750..8aa95aff5e3 100755 --- a/src/app/showcase/pages/floatlabel/floatlabeldemo.ts +++ b/src/app/showcase/pages/floatlabel/floatlabeldemo.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/floatlabel/importdoc'; -import { BasicDoc } from '../../doc/floatlabel/basicdoc'; -import { StyleDoc } from '../../doc/floatlabel/styledoc'; -import { AccessibilityDoc } from '../../doc/floatlabel/accessibilitydoc'; +import { ImportDoc } from '@doc/floatlabel/importdoc'; +import { BasicDoc } from '@doc/floatlabel/basicdoc'; +import { StyleDoc } from '@doc/floatlabel/styledoc'; +import { AccessibilityDoc } from '@doc/floatlabel/accessibilitydoc'; @Component({ templateUrl: './floatlabeldemo.html' }) diff --git a/src/app/showcase/pages/focustrap/focustrapdemo.module.ts b/src/app/showcase/pages/focustrap/focustrapdemo.module.ts index ca101dddb8e..c360d725406 100755 --- a/src/app/showcase/pages/focustrap/focustrapdemo.module.ts +++ b/src/app/showcase/pages/focustrap/focustrapdemo.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { FocusTrapDocModule } from '../../doc/focustrap/focustrapdoc.module'; +import { FocusTrapDocModule } from '@doc/focustrap/focustrapdoc.module'; import { FocusTrapDemo } from './focustrapdemo'; import { FocusTrapDemoRoutingModule } from './focustrapdemo-routing.module'; diff --git a/src/app/showcase/pages/focustrap/focustrapdemo.ts b/src/app/showcase/pages/focustrap/focustrapdemo.ts index f036feab2b0..96f07efeb2b 100755 --- a/src/app/showcase/pages/focustrap/focustrapdemo.ts +++ b/src/app/showcase/pages/focustrap/focustrapdemo.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/focustrap/basicdoc'; -import { ImportDoc } from '../../doc/focustrap/importdoc'; +import { BasicDoc } from '@doc/focustrap/basicdoc'; +import { ImportDoc } from '@doc/focustrap/importdoc'; @Component({ templateUrl: './focustrapdemo.html' diff --git a/src/app/showcase/pages/galleria/galleriademo.module.ts b/src/app/showcase/pages/galleria/galleriademo.module.ts index 90dd129e1fe..de9b4af8952 100755 --- a/src/app/showcase/pages/galleria/galleriademo.module.ts +++ b/src/app/showcase/pages/galleria/galleriademo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { GalleriaDocModule } from '../../doc/galleria/galleriadoc.module'; +import { GalleriaDocModule } from '@doc/galleria/galleriadoc.module'; import { GalleriaDemo } from './galleriademo'; import { GalleriaDemoRoutingModule } from './galleriademo-routing.module'; diff --git a/src/app/showcase/pages/galleria/galleriademo.ts b/src/app/showcase/pages/galleria/galleriademo.ts index be8efd91ee5..0fdae838e13 100755 --- a/src/app/showcase/pages/galleria/galleriademo.ts +++ b/src/app/showcase/pages/galleria/galleriademo.ts @@ -1,25 +1,25 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/galleria/accessibilitydoc'; -import { AdvancedDoc } from '../../doc/galleria/advanceddoc'; -import { AutoPlayDoc } from '../../doc/galleria/autoplaydoc'; -import { BasicDoc } from '../../doc/galleria/basicdoc'; -import { CaptionDoc } from '../../doc/galleria/captiondoc'; -import { ControlledDoc } from '../../doc/galleria/controlleddoc'; -import { FullScreenTemplateDoc } from '../../doc/galleria/fullscreen/customcontentdoc'; -import { WithoutThumbnailsDoc } from '../../doc/galleria/fullscreen/withoutthumbnailsdoc'; -import { WithThumbnailsDoc } from '../../doc/galleria/fullscreen/withthumbnailsdoc'; -import { ImportDoc } from '../../doc/galleria/importdoc'; -import { ClickEventDoc } from '../../doc/galleria/indicator/clickeventdoc'; -import { HoverEventDoc } from '../../doc/galleria/indicator/hovereventdoc'; -import { PositionedDoc } from '../../doc/galleria/indicator/positioneddoc'; -import { TemplateDoc } from '../../doc/galleria/indicator/templatedoc'; -import { HoverDoc } from '../../doc/galleria/navigator/hoverdoc'; -import { IndicatorsDoc } from '../../doc/galleria/navigator/indicatorsdoc'; -import { ItemThumbnailsDoc } from '../../doc/galleria/navigator/itemthumbnailsdoc'; -import { ItemWithoutThumbnailsDoc } from '../../doc/galleria/navigator/itemwithoutthumbnailsdoc'; -import { ResponsiveDoc } from '../../doc/galleria/responsivedoc'; -import { StyleDoc } from '../../doc/galleria/styledoc'; -import { ThumbnailDoc } from '../../doc/galleria/thumbnaildoc'; +import { AccessibilityDoc } from '@doc/galleria/accessibilitydoc'; +import { AdvancedDoc } from '@doc/galleria/advanceddoc'; +import { AutoPlayDoc } from '@doc/galleria/autoplaydoc'; +import { BasicDoc } from '@doc/galleria/basicdoc'; +import { CaptionDoc } from '@doc/galleria/captiondoc'; +import { ControlledDoc } from '@doc/galleria/controlleddoc'; +import { FullScreenTemplateDoc } from '@doc/galleria/fullscreen/customcontentdoc'; +import { WithoutThumbnailsDoc } from '@doc/galleria/fullscreen/withoutthumbnailsdoc'; +import { WithThumbnailsDoc } from '@doc/galleria/fullscreen/withthumbnailsdoc'; +import { ImportDoc } from '@doc/galleria/importdoc'; +import { ClickEventDoc } from '@doc/galleria/indicator/clickeventdoc'; +import { HoverEventDoc } from '@doc/galleria/indicator/hovereventdoc'; +import { PositionedDoc } from '@doc/galleria/indicator/positioneddoc'; +import { TemplateDoc } from '@doc/galleria/indicator/templatedoc'; +import { HoverDoc } from '@doc/galleria/navigator/hoverdoc'; +import { IndicatorsDoc } from '@doc/galleria/navigator/indicatorsdoc'; +import { ItemThumbnailsDoc } from '@doc/galleria/navigator/itemthumbnailsdoc'; +import { ItemWithoutThumbnailsDoc } from '@doc/galleria/navigator/itemwithoutthumbnailsdoc'; +import { ResponsiveDoc } from '@doc/galleria/responsivedoc'; +import { StyleDoc } from '@doc/galleria/styledoc'; +import { ThumbnailDoc } from '@doc/galleria/thumbnaildoc'; @Component({ templateUrl: './galleriademo.html', diff --git a/src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.ts b/src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.ts index 8828f693c4b..a48e491fe74 100644 --- a/src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.ts +++ b/src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { ColorsDoc } from '../../../doc/guides/accessibility/colorsdoc'; -import { FormControlsDoc } from '../../../doc/guides/accessibility/formcontrolsdoc'; -import { IntroductionDoc } from '../../../doc/guides/accessibility/introductiondoc'; -import { SemanticHTMLDoc } from '../../../doc/guides/accessibility/semantichtmldoc'; -import { WAIARIADoc } from '../../../doc/guides/accessibility/waiariadoc'; -import { WCAGDoc } from '../../../doc/guides/accessibility/wcagdoc'; +import { ColorsDoc } from '@doc/guides/accessibility/colorsdoc'; +import { FormControlsDoc } from '@doc/guides/accessibility/formcontrolsdoc'; +import { IntroductionDoc } from '@doc/guides/accessibility/introductiondoc'; +import { SemanticHTMLDoc } from '@doc/guides/accessibility/semantichtmldoc'; +import { WAIARIADoc } from '@doc/guides/accessibility/waiariadoc'; +import { WCAGDoc } from '@doc/guides/accessibility/wcagdoc'; @Component({ selector: 'accessibility', diff --git a/src/app/showcase/pages/guides/guides.module.ts b/src/app/showcase/pages/guides/guides.module.ts index 6575d59a95d..a1b965f37f6 100644 --- a/src/app/showcase/pages/guides/guides.module.ts +++ b/src/app/showcase/pages/guides/guides.module.ts @@ -4,7 +4,7 @@ import { AccessibilityDemoComponent } from './accessibility/accessibilitydemo.co import { GuidesRoutingModule } from './guides-routing.module'; import { TemplateUpdateDemoComponent } from './templateupdate/templateupdatedemo.component'; import { CssLayerDemoComponent } from './csslayer/csslayerdemo.component'; -import { GuidesDocModule } from '../../doc/guides/guidesdoc.module'; +import { GuidesDocModule } from '@doc/guides/guidesdoc.module'; @NgModule({ imports: [CommonModule, GuidesRoutingModule, GuidesDocModule], diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.module.ts b/src/app/showcase/pages/iconfield/iconfielddemo.module.ts index 042a60a8216..32e929dab3c 100755 --- a/src/app/showcase/pages/iconfield/iconfielddemo.module.ts +++ b/src/app/showcase/pages/iconfield/iconfielddemo.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { IconFieldDemo } from './iconfielddemo'; -import { IconFieldDocModule } from '../../doc/iconfield/iconfielddoc.module'; +import { IconFieldDocModule } from '@doc/iconfield/iconfielddoc.module'; import { IconFieldDemoRoutingModule } from './iconfielddemo-routing.module'; @NgModule({ diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.ts b/src/app/showcase/pages/iconfield/iconfielddemo.ts index ec7f1c5f208..c274c0f0ba1 100755 --- a/src/app/showcase/pages/iconfield/iconfielddemo.ts +++ b/src/app/showcase/pages/iconfield/iconfielddemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/iconfield/importdoc'; -import { BasicDoc } from '../../doc/iconfield/basicdoc'; -import { TemplateDoc } from '../../doc/iconfield/templatedoc'; -import { StyleDoc } from '../../doc/iconfield/styledoc'; -import { AccessibilityDoc } from '../../doc/iconfield/accessibilitydoc'; +import { ImportDoc } from '@doc/iconfield/importdoc'; +import { BasicDoc } from '@doc/iconfield/basicdoc'; +import { TemplateDoc } from '@doc/iconfield/templatedoc'; +import { StyleDoc } from '@doc/iconfield/styledoc'; +import { AccessibilityDoc } from '@doc/iconfield/accessibilitydoc'; @Component({ templateUrl: './iconfielddemo.html', diff --git a/src/app/showcase/pages/icons/iconsdemo.component.ts b/src/app/showcase/pages/icons/iconsdemo.component.ts index 9a7d16bd3e1..e3eb31e9317 100755 --- a/src/app/showcase/pages/icons/iconsdemo.component.ts +++ b/src/app/showcase/pages/icons/iconsdemo.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/icons/basicdoc'; -import { ColorDoc } from '../../doc/icons/colordoc'; -import { ConstantsDoc } from '../../doc/icons/constantsdoc'; -import { DownloadDoc } from '../../doc/icons/downloaddoc'; -import { ImportDoc } from '../../doc/icons/importdoc'; -import { ListDoc } from '../../doc/icons/listdoc'; -import { SizeDoc } from '../../doc/icons/sizedoc'; -import { SpinDoc } from '../../doc/icons/spindoc'; -import { FigmaDoc } from '../../doc/icons/figmadoc'; +import { BasicDoc } from '@doc/icons/basicdoc'; +import { ColorDoc } from '@doc/icons/colordoc'; +import { ConstantsDoc } from '@doc/icons/constantsdoc'; +import { DownloadDoc } from '@doc/icons/downloaddoc'; +import { ImportDoc } from '@doc/icons/importdoc'; +import { ListDoc } from '@doc/icons/listdoc'; +import { SizeDoc } from '@doc/icons/sizedoc'; +import { SpinDoc } from '@doc/icons/spindoc'; +import { FigmaDoc } from '@doc/icons/figmadoc'; @Component({ templateUrl: './iconsdemo.component.html', diff --git a/src/app/showcase/pages/icons/iconsdemo.module.ts b/src/app/showcase/pages/icons/iconsdemo.module.ts index f5cf7d3f106..20470431cc9 100755 --- a/src/app/showcase/pages/icons/iconsdemo.module.ts +++ b/src/app/showcase/pages/icons/iconsdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { IconsDocModule } from '../../doc/icons/icons.module'; +import { IconsDocModule } from '@doc/icons/icons.module'; import { IconsDemoRoutingModule } from './iconsdemo-routing.module'; import { IconsDemoComponent } from './iconsdemo.component'; diff --git a/src/app/showcase/pages/image/imagedemo.module.ts b/src/app/showcase/pages/image/imagedemo.module.ts index a973040b382..7376e77729f 100755 --- a/src/app/showcase/pages/image/imagedemo.module.ts +++ b/src/app/showcase/pages/image/imagedemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ImageDocModule } from '../../doc/Image/imagedoc.module'; +import { ImageDocModule } from '@doc/Image/imagedoc.module'; import { ImageDemo } from './imagedemo'; import { ImageDemoRoutingModule } from './imagedemo-routing.module'; diff --git a/src/app/showcase/pages/image/imagedemo.ts b/src/app/showcase/pages/image/imagedemo.ts index fe3ef29e6ba..c59d4d8f5dc 100755 --- a/src/app/showcase/pages/image/imagedemo.ts +++ b/src/app/showcase/pages/image/imagedemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/Image/accessibilitydoc'; -import { BasicDoc } from '../../doc/Image/basicdoc'; -import { ImportDoc } from '../../doc/Image/importdoc'; -import { PreviewDoc } from '../../doc/Image/previewdoc'; -import { PreviewImageSourceDoc } from '../../doc/Image/previewimagesourcedoc'; -import { StyleDoc } from '../../doc/Image/styledoc'; -import { TemplateDoc } from '../../doc/Image/templatedoc'; +import { AccessibilityDoc } from '@doc/Image/accessibilitydoc'; +import { BasicDoc } from '@doc/Image/basicdoc'; +import { ImportDoc } from '@doc/Image/importdoc'; +import { PreviewDoc } from '@doc/Image/previewdoc'; +import { PreviewImageSourceDoc } from '@doc/Image/previewimagesourcedoc'; +import { StyleDoc } from '@doc/Image/styledoc'; +import { TemplateDoc } from '@doc/Image/templatedoc'; @Component({ templateUrl: './imagedemo.html' diff --git a/src/app/showcase/pages/inplace/inplacedemo.module.ts b/src/app/showcase/pages/inplace/inplacedemo.module.ts index a03264a21fa..0dd762a27e7 100755 --- a/src/app/showcase/pages/inplace/inplacedemo.module.ts +++ b/src/app/showcase/pages/inplace/inplacedemo.module.ts @@ -1,8 +1,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { InplaceModule } from 'primeng/inplace'; -import { InplaceDocModule } from '../../doc/inplace/inplacedoc.module'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; +import { InplaceDocModule } from '@doc/inplace/inplacedoc.module'; +import { AppDocModule } from '@layout/doc/app.doc.module'; import { InplaceDemo } from './inplacedemo'; import { InplaceDemoRoutingModule } from './inplacedemo-routing.module'; diff --git a/src/app/showcase/pages/inplace/inplacedemo.ts b/src/app/showcase/pages/inplace/inplacedemo.ts index b8c0e6cce9b..ad1a696ee84 100755 --- a/src/app/showcase/pages/inplace/inplacedemo.ts +++ b/src/app/showcase/pages/inplace/inplacedemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { ImageDoc } from '../../doc/inplace/imagedoc'; -import { StyleDoc } from '../../doc/inplace/styledoc'; -import { BasicDoc } from '../../doc/inplace/basicdoc'; -import { DataDoc } from '../../doc/inplace/datadoc'; -import { ImportDoc } from '../../doc/inplace/importdoc'; -import { InputDoc } from '../../doc/inplace/inputdoc'; -import { AccessibilityDoc } from '../../doc/inplace/accessibilitydoc'; +import { ImageDoc } from '@doc/inplace/imagedoc'; +import { StyleDoc } from '@doc/inplace/styledoc'; +import { BasicDoc } from '@doc/inplace/basicdoc'; +import { DataDoc } from '@doc/inplace/datadoc'; +import { ImportDoc } from '@doc/inplace/importdoc'; +import { InputDoc } from '@doc/inplace/inputdoc'; +import { AccessibilityDoc } from '@doc/inplace/accessibilitydoc'; @Component({ templateUrl: './inplacedemo.html' diff --git a/src/app/showcase/pages/inputgroup/inputgroupdemo.module.ts b/src/app/showcase/pages/inputgroup/inputgroupdemo.module.ts index 339466cde37..b3338743e54 100755 --- a/src/app/showcase/pages/inputgroup/inputgroupdemo.module.ts +++ b/src/app/showcase/pages/inputgroup/inputgroupdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { InputGroupDocModule } from '../../doc/inputgroup/inputgroupddoc.module'; +import { InputGroupDocModule } from '@doc/inputgroup/inputgroupddoc.module'; import { InputGroupDemo } from './inputgroupdemo'; import { InputGroupDemoRoutingModule } from './inputgroupdemo-routing.module'; diff --git a/src/app/showcase/pages/inputgroup/inputgroupdemo.ts b/src/app/showcase/pages/inputgroup/inputgroupdemo.ts index 55d6f52cf48..24dfc532a07 100755 --- a/src/app/showcase/pages/inputgroup/inputgroupdemo.ts +++ b/src/app/showcase/pages/inputgroup/inputgroupdemo.ts @@ -1,9 +1,10 @@ import { Component } from '@angular/core'; -import { MultipleDoc } from '../../doc/inputgroup/multipledoc'; -import { BasicDoc } from '../../doc/inputgroup/basicdoc'; -import { ImportDoc } from '../../doc/inputgroup/importdoc'; -import { ButtonDoc } from '../../doc/inputgroup/buttondoc'; -import { CheckboxDoc } from '../../doc/inputgroup/checkboxdoc'; +import { MultipleDoc } from '@doc/inputgroup/multipledoc'; +import { BasicDoc } from '@doc/inputgroup/basicdoc'; +import { ImportDoc } from '@doc/inputgroup/importdoc'; +import { ButtonDoc } from '@doc/inputgroup/buttondoc'; +import { CheckboxDoc } from '@doc/inputgroup/checkboxdoc'; +import { AccessibilityDoc } from '@doc/inputgroup/accessibilitydoc'; @Component({ templateUrl: './inputgroupdemo.html' @@ -32,8 +33,13 @@ export class InputGroupDemo { }, { id: 'checkbox', - label: 'Checkbox & RadioButton', + label: 'Check & Radio', component: CheckboxDoc + }, + { + id: 'accessibility', + label: 'Accessibility', + component: AccessibilityDoc } ]; } diff --git a/src/app/showcase/pages/inputmask/inputmaskdemo.module.ts b/src/app/showcase/pages/inputmask/inputmaskdemo.module.ts index 14c63099bd7..9b00376ad47 100755 --- a/src/app/showcase/pages/inputmask/inputmaskdemo.module.ts +++ b/src/app/showcase/pages/inputmask/inputmaskdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { InputMaskDocModule } from '../../doc/inputmask/inputmaskdoc.module'; +import { InputMaskDocModule } from '@doc/inputmask/inputmaskdoc.module'; import { InputMaskDemo } from './inputmaskdemo'; import { InputMaskDemoRoutingModule } from './inputmaskdemo-routing.module'; diff --git a/src/app/showcase/pages/inputmask/inputmaskdemo.ts b/src/app/showcase/pages/inputmask/inputmaskdemo.ts index 0b6bcaf0706..0a67e711d7f 100755 --- a/src/app/showcase/pages/inputmask/inputmaskdemo.ts +++ b/src/app/showcase/pages/inputmask/inputmaskdemo.ts @@ -1,15 +1,16 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/inputmask/accessibilitydoc'; -import { BasicDoc } from '../../doc/inputmask/basicdoc'; -import { DisabledDoc } from '../../doc/inputmask/disableddoc'; -import { FloatlabelDoc } from '../../doc/inputmask/floatlabeldoc'; -import { ImportDoc } from '../../doc/inputmask/importdoc'; -import { InvalidDoc } from '../../doc/inputmask/invaliddoc'; -import { MaskDoc } from '../../doc/inputmask/maskdoc'; -import { OptionalDoc } from '../../doc/inputmask/optionaldoc'; -import { ReactiveFormsDoc } from '../../doc/inputmask/reactiveformsdoc'; -import { SlotCharDoc } from '../../doc/inputmask/slotchardoc'; -import { StyleDoc } from '../../doc/inputmask/styledoc'; +import { AccessibilityDoc } from '@doc/inputmask/accessibilitydoc'; +import { BasicDoc } from '@doc/inputmask/basicdoc'; +import { DisabledDoc } from '@doc/inputmask/disableddoc'; +import { FilledDoc } from '@doc/inputmask/filleddoc'; +import { FloatlabelDoc } from '@doc/inputmask/floatlabeldoc'; +import { ImportDoc } from '@doc/inputmask/importdoc'; +import { InvalidDoc } from '@doc/inputmask/invaliddoc'; +import { MaskDoc } from '@doc/inputmask/maskdoc'; +import { OptionalDoc } from '@doc/inputmask/optionaldoc'; +import { ReactiveFormsDoc } from '@doc/inputmask/reactiveformsdoc'; +import { SlotCharDoc } from '@doc/inputmask/slotchardoc'; +import { StyleDoc } from '@doc/inputmask/styledoc'; @Component({ templateUrl: './inputmaskdemo.html' @@ -36,31 +37,36 @@ export class InputMaskDemo { label: 'Mask', component: MaskDoc }, - { - id: 'slotchar', - label: 'Slot Char', - component: SlotCharDoc - }, { id: 'optional', label: 'Optional', component: OptionalDoc }, + { + id: 'slotchar', + label: 'Slot Char', + component: SlotCharDoc + }, { id: 'floatlabel', label: 'FloatLabel', component: FloatlabelDoc }, { - id: 'disabled', - label: 'Disabled', - component: DisabledDoc + id: 'filled', + label: 'Filled', + component: FilledDoc }, { id: 'invalid', label: 'Invalid', component: InvalidDoc }, + { + id: 'disabled', + label: 'Disabled', + component: DisabledDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/inputnumber/inputnumberdemo.module.ts b/src/app/showcase/pages/inputnumber/inputnumberdemo.module.ts index 4df6a3d5ea8..ad28db87a04 100755 --- a/src/app/showcase/pages/inputnumber/inputnumberdemo.module.ts +++ b/src/app/showcase/pages/inputnumber/inputnumberdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { InputNumberDocModule } from '../../doc/inputnumber/inputnumberdoc.module'; +import { InputNumberDocModule } from '@doc/inputnumber/inputnumberdoc.module'; import { InputNumberDemo } from './inputnumberdemo'; import { InputNumberDemoRoutingModule } from './inputnumberdemo-routing.module'; diff --git a/src/app/showcase/pages/inputnumber/inputnumberdemo.ts b/src/app/showcase/pages/inputnumber/inputnumberdemo.ts index a0ebbc869b5..245ceca6a7c 100755 --- a/src/app/showcase/pages/inputnumber/inputnumberdemo.ts +++ b/src/app/showcase/pages/inputnumber/inputnumberdemo.ts @@ -1,17 +1,17 @@ import { Component, ViewEncapsulation } from '@angular/core'; -import { LocaleDoc } from '../../doc/inputnumber/localedoc'; -import { ImportDoc } from '../../doc/inputnumber/importdoc'; -import { NumeralsDoc } from '../../doc/inputnumber/numeralsdoc'; -import { CurrencyDoc } from '../../doc/inputnumber/currencydoc'; -import { PrefixSuffixDoc } from '../../doc/inputnumber/prefixsuffixdoc'; -import { ButtonsDoc } from '../../doc/inputnumber/buttonsdoc'; -import { VerticalDoc } from '../../doc/inputnumber/verticaldoc'; -import { FloatlabelDoc } from '../../doc/inputnumber/floatlabeldoc'; -import { InvalidDoc } from '../../doc/inputnumber/invaliddoc'; -import { DisabledDoc } from '../../doc/inputnumber/disableddoc'; -import { StyleDoc } from '../../doc/inputnumber/styledoc'; -import { AccessibilityDoc } from '../../doc/inputnumber/accessibilitydoc'; -import { ReactiveFormsDoc } from '../../doc/inputnumber/reactiveformsdoc'; +import { LocaleDoc } from '@doc/inputnumber/localedoc'; +import { ImportDoc } from '@doc/inputnumber/importdoc'; +import { NumeralsDoc } from '@doc/inputnumber/numeralsdoc'; +import { CurrencyDoc } from '@doc/inputnumber/currencydoc'; +import { PrefixSuffixDoc } from '@doc/inputnumber/prefixsuffixdoc'; +import { ButtonsDoc } from '@doc/inputnumber/buttonsdoc'; +import { VerticalDoc } from '@doc/inputnumber/verticaldoc'; +import { FloatlabelDoc } from '@doc/inputnumber/floatlabeldoc'; +import { InvalidDoc } from '@doc/inputnumber/invaliddoc'; +import { DisabledDoc } from '@doc/inputnumber/disableddoc'; +import { StyleDoc } from '@doc/inputnumber/styledoc'; +import { AccessibilityDoc } from '@doc/inputnumber/accessibilitydoc'; +import { ReactiveFormsDoc } from '@doc/inputnumber/reactiveformsdoc'; @Component({ templateUrl: './inputnumberdemo.html', @@ -25,8 +25,8 @@ export class InputNumberDemo { component: ImportDoc }, { - id: 'numeral', - label: 'Numeral', + id: 'numerals', + label: 'Numerals', component: NumeralsDoc }, { diff --git a/src/app/showcase/pages/inputotp/inputotpdemo.module.ts b/src/app/showcase/pages/inputotp/inputotpdemo.module.ts index 30841cc2b65..0c8eb53b078 100755 --- a/src/app/showcase/pages/inputotp/inputotpdemo.module.ts +++ b/src/app/showcase/pages/inputotp/inputotpdemo.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { InputOtpDemo } from './inputotpdemo'; import { InputOtpDemoRoutingModule } from './inputotpdemo-routing.module'; -import { InputOtpDocModule } from '../../doc/inputotp/inputotpdoc.module'; +import { InputOtpDocModule } from '@doc/inputotp/inputotpdoc.module'; @NgModule({ imports: [CommonModule, InputOtpDemoRoutingModule, InputOtpDocModule], diff --git a/src/app/showcase/pages/inputotp/inputotpdemo.ts b/src/app/showcase/pages/inputotp/inputotpdemo.ts index 7b9f5bf5a7c..0653b2179a7 100755 --- a/src/app/showcase/pages/inputotp/inputotpdemo.ts +++ b/src/app/showcase/pages/inputotp/inputotpdemo.ts @@ -1,11 +1,11 @@ import { Component, ViewEncapsulation } from '@angular/core'; -import { ImportDoc } from '../../doc/inputotp/importdoc'; -import { BasicDoc } from '../../doc/inputotp/basicdoc'; -import { MaskDoc } from '../../doc/inputotp/maskdoc'; -import { IntegerOnlyDoc } from '../../doc/inputotp/integeronlydoc'; -import { TemplateDoc } from '../../doc/inputotp/templatedoc'; -import { SampleDoc } from '../../doc/inputotp/sampledoc'; -import { AccessibilityDoc } from '../../doc/inputotp/accessibilitydoc'; +import { ImportDoc } from '@doc/inputotp/importdoc'; +import { BasicDoc } from '@doc/inputotp/basicdoc'; +import { MaskDoc } from '@doc/inputotp/maskdoc'; +import { IntegerOnlyDoc } from '@doc/inputotp/integeronlydoc'; +import { TemplateDoc } from '@doc/inputotp/templatedoc'; +import { SampleDoc } from '@doc/inputotp/sampledoc'; +import { AccessibilityDoc } from '@doc/inputotp/accessibilitydoc'; @Component({ templateUrl: './inputotp.html', diff --git a/src/app/showcase/pages/inputswitch/inputswitchdemo.module.ts b/src/app/showcase/pages/inputswitch/inputswitchdemo.module.ts index 45d6a85cdc7..8359533190a 100755 --- a/src/app/showcase/pages/inputswitch/inputswitchdemo.module.ts +++ b/src/app/showcase/pages/inputswitch/inputswitchdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { InputSwitchDocModule } from '../../doc/inputswitch/inputswitchdoc.module'; +import { InputSwitchDocModule } from '@doc/inputswitch/inputswitchdoc.module'; import { InputSwitchDemo } from './inputswitchdemo'; import { InputSwitchDemoRoutingModule } from './inputswitchdemo-routing.module'; diff --git a/src/app/showcase/pages/inputswitch/inputswitchdemo.ts b/src/app/showcase/pages/inputswitch/inputswitchdemo.ts index 2dfb14ba8a0..f586155984e 100755 --- a/src/app/showcase/pages/inputswitch/inputswitchdemo.ts +++ b/src/app/showcase/pages/inputswitch/inputswitchdemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/inputswitch/basicdoc'; -import { ImportDoc } from '../../doc/inputswitch/importdoc'; -import { DisabledDoc } from '../../doc/inputswitch/disableddoc'; -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'; +import { BasicDoc } from '@doc/inputswitch/basicdoc'; +import { ImportDoc } from '@doc/inputswitch/importdoc'; +import { DisabledDoc } from '@doc/inputswitch/disableddoc'; +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' }) @@ -32,16 +32,16 @@ export class InputSwitchDemo { label: 'Preselection', component: PreselectionDoc }, - { - id: 'disabled', - label: 'Disabled', - component: DisabledDoc - }, { id: 'invalid', label: 'Invalid', component: InvalidDoc }, + { + id: 'disabled', + label: 'Disabled', + component: DisabledDoc + }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/inputtext/inputtextdemo.html b/src/app/showcase/pages/inputtext/inputtextdemo.html index 11c05171dee..fbeec366a6e 100755 --- a/src/app/showcase/pages/inputtext/inputtextdemo.html +++ b/src/app/showcase/pages/inputtext/inputtextdemo.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/showcase/pages/inputtext/inputtextdemo.module.ts b/src/app/showcase/pages/inputtext/inputtextdemo.module.ts index 2901ebdd8e6..ae8e4027ffa 100755 --- a/src/app/showcase/pages/inputtext/inputtextdemo.module.ts +++ b/src/app/showcase/pages/inputtext/inputtextdemo.module.ts @@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputTextModule } from 'primeng/inputtext'; -import { InputtextDocModule } from '../../doc/inputtext/inputtextdoc.module'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; +import { InputtextDocModule } from '@doc/inputtext/inputtextdoc.module'; +import { AppDocModule } from '@layout/doc/app.doc.module'; import { InputTextDemo } from './inputtextdemo'; import { InputTextDemoRoutingModule } from './inputtextdemo-routing.module'; diff --git a/src/app/showcase/pages/inputtext/inputtextdemo.ts b/src/app/showcase/pages/inputtext/inputtextdemo.ts index e74c82dc0f3..bc87142ae06 100755 --- a/src/app/showcase/pages/inputtext/inputtextdemo.ts +++ b/src/app/showcase/pages/inputtext/inputtextdemo.ts @@ -6,11 +6,12 @@ import { IconsDoc } from 'src/app/showcase/doc/inputtext/iconsdoc'; import { ImportDoc } from 'src/app/showcase/doc/inputtext/importdoc'; import { InvalidDoc } from 'src/app/showcase/doc/inputtext/invaliddoc'; import { SizesDoc } from 'src/app/showcase/doc/inputtext/sizesdoc'; -import { AccessibilityDoc } from '../../doc/inputtext/accessibilitydoc'; -import { BasicDoc } from '../../doc/inputtext/basicdoc'; -import { KeyFilterDoc } from '../../doc/inputtext/keyfilterdoc'; -import { ReactiveFormsDoc } from '../../doc/inputtext/reactiveformsdoc'; -import { StyleDoc } from '../../doc/inputtext/styledoc'; +import { AccessibilityDoc } from '@doc/inputtext/accessibilitydoc'; +import { BasicDoc } from '@doc/inputtext/basicdoc'; +import { KeyFilterDoc } from '@doc/inputtext/keyfilterdoc'; +import { ReactiveFormsDoc } from '@doc/inputtext/reactiveformsdoc'; +import { StyleDoc } from '@doc/inputtext/styledoc'; +import { FilledDoc } from '@doc/inputtext/filleddoc'; @Component({ templateUrl: './inputtextdemo.html', @@ -33,21 +34,6 @@ export class InputTextDemo { label: 'Reactive Forms', component: ReactiveFormsDoc }, - { - id: 'icons', - label: 'Icons', - component: IconsDoc - }, - { - id: 'keyfilter', - label: 'Key Filter', - component: KeyFilterDoc - }, - { - id: 'sizes', - label: 'Sizes', - component: SizesDoc - }, { id: 'helptext', label: 'Help Text', @@ -58,6 +44,11 @@ export class InputTextDemo { label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/inputtextarea/inputtextareademo.module.ts b/src/app/showcase/pages/inputtextarea/inputtextareademo.module.ts index c5052bc816c..6377fe87394 100755 --- a/src/app/showcase/pages/inputtextarea/inputtextareademo.module.ts +++ b/src/app/showcase/pages/inputtextarea/inputtextareademo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { InputtextareaDocModule } from '../../doc/inputtextarea/inputtextareadoc.module'; +import { InputtextareaDocModule } from '@doc/inputtextarea/inputtextareadoc.module'; import { InputTextareaDemo } from './inputtextareademo'; import { InputTextareaDemoRoutingModule } from './inputtextareademo-routing.module'; diff --git a/src/app/showcase/pages/inputtextarea/inputtextareademo.ts b/src/app/showcase/pages/inputtextarea/inputtextareademo.ts index 90dc452d501..da181c11553 100755 --- a/src/app/showcase/pages/inputtextarea/inputtextareademo.ts +++ b/src/app/showcase/pages/inputtextarea/inputtextareademo.ts @@ -1,14 +1,15 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/inputtextarea/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/inputtextarea/accessibilitydoc'; -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'; +import { ReactiveFormsDoc } from '@doc/inputtextarea/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/inputtextarea/accessibilitydoc'; +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'; +import { FilledDoc } from '@doc/inputtextarea/filleddoc'; @Component({ templateUrl: './inputtextareademo.html' @@ -35,16 +36,16 @@ export class InputTextareaDemo { label: 'AutoResize', component: AutoResizeDoc }, - { - id: 'keyfilter', - label: 'Key Filter', - component: KeyfilterDoc - }, { id: 'floatlabel', label: 'Float Label', component: FloatlabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/installation/installation.module.ts b/src/app/showcase/pages/installation/installation.module.ts index 392088c5f62..e1d06dd3cc0 100755 --- a/src/app/showcase/pages/installation/installation.module.ts +++ b/src/app/showcase/pages/installation/installation.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { InstallationRoutingModule } from './installation-routing.module'; import { InstallationComponent } from './installation'; -import { InstallationDocModule } from '../../doc/installation/installationdoc.module'; +import { InstallationDocModule } from '@doc/installation/installationdoc.module'; @NgModule({ imports: [CommonModule, InstallationRoutingModule, InstallationDocModule], diff --git a/src/app/showcase/pages/installation/installation.ts b/src/app/showcase/pages/installation/installation.ts index 987634e3c09..aefffce03ed 100755 --- a/src/app/showcase/pages/installation/installation.ts +++ b/src/app/showcase/pages/installation/installation.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { AnimationsDoc } from '../../doc/installation/animationsdoc'; -import { DownloadDoc } from '../../doc/installation/downloaddoc'; -import { ExamplesDoc } from '../../doc/installation/examplesdoc'; -import { StylesDoc } from '../../doc/installation/stylesdoc'; -import { UsageDoc } from '../../doc/installation/usagedoc'; -import { VideosDoc } from '../../doc/installation/videos/videosdoc'; +import { AnimationsDoc } from '@doc/installation/animationsdoc'; +import { DownloadDoc } from '@doc/installation/downloaddoc'; +import { ExamplesDoc } from '@doc/installation/examplesdoc'; +import { StylesDoc } from '@doc/installation/stylesdoc'; +import { UsageDoc } from '@doc/installation/usagedoc'; +import { VideosDoc } from '@doc/installation/videos/videosdoc'; @Component({ templateUrl: './installation.html' diff --git a/src/app/showcase/pages/keyfilter/keyfilterdemo.module.ts b/src/app/showcase/pages/keyfilter/keyfilterdemo.module.ts index 6675a67f5a6..1bb54118fe4 100755 --- a/src/app/showcase/pages/keyfilter/keyfilterdemo.module.ts +++ b/src/app/showcase/pages/keyfilter/keyfilterdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { KeyFilterDocModule } from '../../doc/keyfilter/keyfilterdoc.module'; +import { KeyFilterDocModule } from '@doc/keyfilter/keyfilterdoc.module'; import { KeyFilterDemo } from './keyfilterdemo'; import { KeyFilterDemoRoutingModule } from './keyfilterdemo-routing.module'; diff --git a/src/app/showcase/pages/keyfilter/keyfilterdemo.ts b/src/app/showcase/pages/keyfilter/keyfilterdemo.ts index 2bd03230140..4e1d89f299c 100755 --- a/src/app/showcase/pages/keyfilter/keyfilterdemo.ts +++ b/src/app/showcase/pages/keyfilter/keyfilterdemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/keyfilter/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/keyfilter/accessibilitydoc'; -import { ImportDoc } from '../../doc/keyfilter/importdoc'; -import { PresetsDoc } from '../../doc/keyfilter/presetsdoc'; -import { RegexDoc } from '../../doc/keyfilter/regexdoc'; +import { ReactiveFormsDoc } from '@doc/keyfilter/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/keyfilter/accessibilitydoc'; +import { ImportDoc } from '@doc/keyfilter/importdoc'; +import { PresetsDoc } from '@doc/keyfilter/presetsdoc'; +import { RegexDoc } from '@doc/keyfilter/regexdoc'; @Component({ templateUrl: './keyfilterdemo.html' diff --git a/src/app/showcase/pages/knob/knobdemo.module.ts b/src/app/showcase/pages/knob/knobdemo.module.ts index 41c1021c560..a33c1e1a32e 100644 --- a/src/app/showcase/pages/knob/knobdemo.module.ts +++ b/src/app/showcase/pages/knob/knobdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { KnobDocModule } from '../../doc/knob/knobdoc.module'; +import { KnobDocModule } from '@doc/knob/knobdoc.module'; import { KnobDemo } from './knobdemo'; import { KnobDemoRoutingModule } from './knobdemo-routing.module'; diff --git a/src/app/showcase/pages/knob/knobdemo.ts b/src/app/showcase/pages/knob/knobdemo.ts index 083b9c9f538..00b16095e5a 100644 --- a/src/app/showcase/pages/knob/knobdemo.ts +++ b/src/app/showcase/pages/knob/knobdemo.ts @@ -1,18 +1,18 @@ import { Component } from '@angular/core'; -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'; -import { ReadonlyDoc } from '../../doc/knob/readonlydoc'; -import { SizeDoc } from '../../doc/knob/sizedoc'; -import { StepDoc } from '../../doc/knob/stepdoc'; -import { StrokeDoc } from '../../doc/knob/strokedoc'; -import { StyleDoc } from '../../doc/knob/styledoc'; -import { TemplateDoc } from '../../doc/knob/templatedoc'; +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'; +import { ReadonlyDoc } from '@doc/knob/readonlydoc'; +import { SizeDoc } from '@doc/knob/sizedoc'; +import { StepDoc } from '@doc/knob/stepdoc'; +import { StrokeDoc } from '@doc/knob/strokedoc'; +import { StyleDoc } from '@doc/knob/styledoc'; +import { TemplateDoc } from '@doc/knob/templatedoc'; @Component({ templateUrl: './knobdemo.html' diff --git a/src/app/showcase/pages/landing/featuressection.component.ts b/src/app/showcase/pages/landing/featuressection.component.ts index a402299fa95..7124865d63b 100644 --- a/src/app/showcase/pages/landing/featuressection.component.ts +++ b/src/app/showcase/pages/landing/featuressection.component.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'features-section', diff --git a/src/app/showcase/pages/landing/herosection.component.ts b/src/app/showcase/pages/landing/herosection.component.ts index 45295c9c546..5dbb96134f2 100644 --- a/src/app/showcase/pages/landing/herosection.component.ts +++ b/src/app/showcase/pages/landing/herosection.component.ts @@ -15,7 +15,7 @@ import { SelectButtonModule } from 'primeng/selectbutton'; import { SliderModule } from 'primeng/slider'; import { TabMenuModule } from 'primeng/tabmenu'; import { Subscription, debounceTime } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'hero-section', diff --git a/src/app/showcase/pages/landing/landing.component.ts b/src/app/showcase/pages/landing/landing.component.ts index c17234f4901..33597afc2e0 100644 --- a/src/app/showcase/pages/landing/landing.component.ts +++ b/src/app/showcase/pages/landing/landing.component.ts @@ -3,7 +3,7 @@ import { Component, OnInit, afterNextRender } from '@angular/core'; import { Meta, Title } from '@angular/platform-browser'; import { AppNewsComponent } from '../../layout/news/app.news.component'; import { AppTopBarComponent } from '../../layout/topbar/app.topbar.component'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; import { BlockSectionComponent } from './blocksection.component'; import { FeaturesSectionComponent } from './featuressection.component'; import { FooterSectionComponent } from './footersection.component'; diff --git a/src/app/showcase/pages/landing/templatesection.component.ts b/src/app/showcase/pages/landing/templatesection.component.ts index abae8c2a40a..23fb79bfaba 100644 --- a/src/app/showcase/pages/landing/templatesection.component.ts +++ b/src/app/showcase/pages/landing/templatesection.component.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'templates-section', diff --git a/src/app/showcase/pages/landing/themesection.component.ts b/src/app/showcase/pages/landing/themesection.component.ts index 85439bfe67f..f4e3bdc9096 100644 --- a/src/app/showcase/pages/landing/themesection.component.ts +++ b/src/app/showcase/pages/landing/themesection.component.ts @@ -4,10 +4,10 @@ import { ButtonModule } from 'primeng/button'; import { ProgressBarModule } from 'primeng/progressbar'; import { Table, TableModule } from 'primeng/table'; import { TagModule } from 'primeng/tag'; -import { Customer } from '../../domain/customer'; +import { Customer } from '@domain/customer'; import { AppComponent } from '../../layout/app.component'; -import { AppConfigService } from '../../service/appconfigservice'; -import { CustomerService } from '../../service/customerservice'; +import { AppConfigService } from '@service/appconfigservice'; +import { CustomerService } from '@service/customerservice'; import { Subscription } from 'rxjs'; @Component({ diff --git a/src/app/showcase/pages/landing/userssection.component.ts b/src/app/showcase/pages/landing/userssection.component.ts index 6eddb660048..c0a93fcc55b 100644 --- a/src/app/showcase/pages/landing/userssection.component.ts +++ b/src/app/showcase/pages/landing/userssection.component.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ selector: 'users-section', diff --git a/src/app/showcase/pages/listbox/listboxdemo.module.ts b/src/app/showcase/pages/listbox/listboxdemo.module.ts index 7c8ac1fe43c..8b145f9b63c 100755 --- a/src/app/showcase/pages/listbox/listboxdemo.module.ts +++ b/src/app/showcase/pages/listbox/listboxdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ListboxDocModule } from '../../doc/listbox/listboxdoc.module'; +import { ListboxDocModule } from '@doc/listbox/listboxdoc.module'; import { ListboxDemo } from './listboxdemo'; import { ListboxDemoRoutingModule } from './listboxdemo-routing.module'; diff --git a/src/app/showcase/pages/listbox/listboxdemo.ts b/src/app/showcase/pages/listbox/listboxdemo.ts index 8860d3e3aa6..34bfced3586 100755 --- a/src/app/showcase/pages/listbox/listboxdemo.ts +++ b/src/app/showcase/pages/listbox/listboxdemo.ts @@ -1,16 +1,16 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/listbox/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/listbox/accessibilitydoc'; -import { BasicDoc } from '../../doc/listbox/basicdoc'; -import { DisabledDoc } from '../../doc/listbox/disableddoc'; -import { FilterDoc } from '../../doc/listbox/filterdoc'; -import { GroupDoc } from '../../doc/listbox/groupdoc'; -import { ImportDoc } from '../../doc/listbox/importdoc'; -import { InvalidDoc } from '../../doc/listbox/invaliddoc'; -import { MultipleDoc } from '../../doc/listbox/multipledoc'; -import { StyleDoc } from '../../doc/listbox/styledoc'; -import { TemplateDoc } from '../../doc/listbox/templatedoc'; -import { VirtualScrollDoc } from '../../doc/listbox/virtualscrolldoc'; +import { ReactiveFormsDoc } from '@doc/listbox/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/listbox/accessibilitydoc'; +import { BasicDoc } from '@doc/listbox/basicdoc'; +import { DisabledDoc } from '@doc/listbox/disableddoc'; +import { FilterDoc } from '@doc/listbox/filterdoc'; +import { GroupDoc } from '@doc/listbox/groupdoc'; +import { ImportDoc } from '@doc/listbox/importdoc'; +import { InvalidDoc } from '@doc/listbox/invaliddoc'; +import { MultipleDoc } from '@doc/listbox/multipledoc'; +import { StyleDoc } from '@doc/listbox/styledoc'; +import { TemplateDoc } from '@doc/listbox/templatedoc'; +import { VirtualScrollDoc } from '@doc/listbox/virtualscrolldoc'; @Component({ templateUrl: './listboxdemo.html' @@ -37,11 +37,6 @@ export class ListboxDemo { label: 'Multiple', component: MultipleDoc }, - { - id: 'template', - label: 'Template', - component: TemplateDoc - }, { id: 'group', label: 'Group', @@ -52,6 +47,16 @@ export class ListboxDemo { label: 'Filter', component: FilterDoc }, + { + id: 'template', + label: 'Template', + component: TemplateDoc + }, + { + id: 'virtualscroll', + label: 'Virtual Scroll', + component: VirtualScrollDoc + }, { id: 'invalid', label: 'Invalid', @@ -62,11 +67,6 @@ export class ListboxDemo { label: 'Disabled', component: DisabledDoc }, - { - id: 'virtualscroll', - label: 'Virtual Scroll', - component: VirtualScrollDoc - }, { id: 'style', label: 'Style', diff --git a/src/app/showcase/pages/lts/lts.component.ts b/src/app/showcase/pages/lts/lts.component.ts index b2f002ac22c..3dd917ff60b 100755 --- a/src/app/showcase/pages/lts/lts.component.ts +++ b/src/app/showcase/pages/lts/lts.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { Meta, Title } from '@angular/platform-browser'; -import { Code } from '../../domain/code'; +import { Code } from '@domain/code'; @Component({ templateUrl: './lts.component.html' diff --git a/src/app/showcase/pages/lts/lts.module.ts b/src/app/showcase/pages/lts/lts.module.ts index fd621206f81..99daaede8cc 100755 --- a/src/app/showcase/pages/lts/lts.module.ts +++ b/src/app/showcase/pages/lts/lts.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { TagModule } from 'primeng/tag'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; +import { AppCodeModule } from '@layout/doc/app.code.component'; import { LTSRoutingModule } from './lts-routing.module'; import { LTSComponent } from './lts.component'; diff --git a/src/app/showcase/pages/megamenu/megamenudemo.module.ts b/src/app/showcase/pages/megamenu/megamenudemo.module.ts index 3b63ff698ae..4ee175eebd5 100755 --- a/src/app/showcase/pages/megamenu/megamenudemo.module.ts +++ b/src/app/showcase/pages/megamenu/megamenudemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MegaMenuDocModule } from '../../doc/megamenu/megamenudoc.module'; +import { MegaMenuDocModule } from '@doc/megamenu/megamenudoc.module'; import { MegaMenuDemo } from './megamenudemo'; import { MegaMenuDemoRoutingModule } from './megamenudemo-routing.module'; diff --git a/src/app/showcase/pages/megamenu/megamenudemo.ts b/src/app/showcase/pages/megamenu/megamenudemo.ts index 826c31dd657..8f02337b89a 100755 --- a/src/app/showcase/pages/megamenu/megamenudemo.ts +++ b/src/app/showcase/pages/megamenu/megamenudemo.ts @@ -1,10 +1,12 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/megamenu/importdoc'; -import { BasicDoc } from '../../doc/megamenu/basicdoc'; -import { StyleDoc } from '../../doc/megamenu/styledoc'; -import { TemplateDoc } from '../../doc/megamenu/templatedoc'; -import { VerticalDoc } from '../../doc/megamenu/verticaldoc'; -import { AccessibilityDoc } from '../../doc/megamenu/accessibilitydoc'; +import { ImportDoc } from '@doc/megamenu/importdoc'; +import { BasicDoc } from '@doc/megamenu/basicdoc'; +import { StyleDoc } from '@doc/megamenu/styledoc'; +import { TemplateDoc } from '@doc/megamenu/templatedoc'; +import { VerticalDoc } from '@doc/megamenu/verticaldoc'; +import { AccessibilityDoc } from '@doc/megamenu/accessibilitydoc'; +import { CommandDoc } from '@doc/megamenu/commanddoc'; +import { RouterDoc } from '@doc/megamenu/routerdoc'; @Component({ templateUrl: './megamenudemo.html', @@ -40,6 +42,16 @@ export class MegaMenuDemo { 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/menu/menudemo.module.ts b/src/app/showcase/pages/menu/menudemo.module.ts index b3c5142b514..145a80a3851 100755 --- a/src/app/showcase/pages/menu/menudemo.module.ts +++ b/src/app/showcase/pages/menu/menudemo.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { MenuDemo } from './menudemo'; -import { MenuDocModule } from '../../doc/menu/menudoc.module'; +import { MenuDocModule } from '@doc/menu/menudoc.module'; import { MenuDemoRoutingModule } from './menudemo-routing.module'; @NgModule({ diff --git a/src/app/showcase/pages/menu/menudemo.ts b/src/app/showcase/pages/menu/menudemo.ts index 4aeffefabb8..17eb91c35ef 100755 --- a/src/app/showcase/pages/menu/menudemo.ts +++ b/src/app/showcase/pages/menu/menudemo.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/menu/basicdoc'; -import { CustomContentDoc } from '../../doc/menu/customdoc'; -import { CommandDoc } from '../../doc/menu/commanddoc'; -import { GroupDoc } from '../../doc/menu/groupdoc'; -import { ImportDoc } from '../../doc/menu/importdoc'; -import { NavigationDoc } from '../../doc/menu/navigationdoc'; -import { PopupDoc } from '../../doc/menu/popupdoc'; -import { StyleDoc } from '../../doc/menu/styledoc'; -import { AccessibilityDoc } from '../../doc/menu/accessibilitydoc'; +import { BasicDoc } from '@doc/menu/basicdoc'; +import { TemplateDoc } from '@doc/menu/templatedoc'; +import { CommandDoc } from '@doc/menu/commanddoc'; +import { GroupDoc } from '@doc/menu/groupdoc'; +import { ImportDoc } from '@doc/menu/importdoc'; +import { RouterDoc } from '@doc/menu/routerdoc'; +import { PopupDoc } from '@doc/menu/popupdoc'; +import { StyleDoc } from '@doc/menu/styledoc'; +import { AccessibilityDoc } from '@doc/menu/accessibilitydoc'; @Component({ templateUrl: './menudemo.html' @@ -35,20 +35,20 @@ export class MenuDemo { component: PopupDoc }, { - id: 'custom', - label: 'Custom Content', - component: CustomContentDoc - }, - { - id: 'navigation', - label: 'Navigation', - component: NavigationDoc + 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/menubar/menubardemo.module.ts b/src/app/showcase/pages/menubar/menubardemo.module.ts index 4ec76fdeec1..bab18dd0ad4 100755 --- a/src/app/showcase/pages/menubar/menubardemo.module.ts +++ b/src/app/showcase/pages/menubar/menubardemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MenubarDocModule } from '../../doc/menubar/menubardoc.module'; +import { MenubarDocModule } from '@doc/menubar/menubardoc.module'; import { MenubarDemo } from './menubardemo'; import { MenubarDemoRoutingModule } from './menubardemo-routing.module'; diff --git a/src/app/showcase/pages/menubar/menubardemo.ts b/src/app/showcase/pages/menubar/menubardemo.ts index 056e4c282f8..2c1410f021d 100755 --- a/src/app/showcase/pages/menubar/menubardemo.ts +++ b/src/app/showcase/pages/menubar/menubardemo.ts @@ -1,9 +1,11 @@ import { Component } from '@angular/core'; -import { TemplateDoc } from '../../doc/menubar/templatedoc'; -import { BasicDoc } from '../../doc/menubar/basicdoc'; -import { ImportDoc } from '../../doc/menubar/importdoc'; -import { StyleDoc } from '../../doc/menubar/styledoc'; -import { AccessibilityDoc } from '../../doc/menubar/accessibilitydoc'; +import { TemplateDoc } from '@doc/menubar/templatedoc'; +import { BasicDoc } from '@doc/menubar/basicdoc'; +import { ImportDoc } from '@doc/menubar/importdoc'; +import { StyleDoc } from '@doc/menubar/styledoc'; +import { AccessibilityDoc } from '@doc/menubar/accessibilitydoc'; +import { CommandDoc } from '@doc/menubar/commanddoc'; +import { RouterDoc } from '@doc/menubar/routerdoc'; @Component({ templateUrl: './menubardemo.html' @@ -25,6 +27,16 @@ export class MenubarDemo { 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/messages/messagesdemo.module.ts b/src/app/showcase/pages/messages/messagesdemo.module.ts index fb686b23c81..f31212562d7 100755 --- a/src/app/showcase/pages/messages/messagesdemo.module.ts +++ b/src/app/showcase/pages/messages/messagesdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MessagesDocModule } from '../../doc/messages/messagesdoc.module'; +import { MessagesDocModule } from '@doc/messages/messagesdoc.module'; import { MessagesDemo } from './messagesdemo'; import { MessagesDemoRoutingModule } from './messagesdemo-routing.module'; diff --git a/src/app/showcase/pages/messages/messagesdemo.ts b/src/app/showcase/pages/messages/messagesdemo.ts index e4ebe527a5c..3b1b781e633 100755 --- a/src/app/showcase/pages/messages/messagesdemo.ts +++ b/src/app/showcase/pages/messages/messagesdemo.ts @@ -1,16 +1,15 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/messages/importdoc'; -import { BasicDoc } from '../../doc/messages/basicdoc'; -import { MessagesStyleDoc } from '../../doc/messages/messagesstyledoc'; -import { MessageStyleDoc } from '../../doc/messages/messagestyledoc'; -import { ClosableDoc } from '../../doc/messages/closabledoc'; -import { InlineDoc } from '../../doc/messages/inlinedoc'; -import { DynamicDoc } from '../../doc/messages/dynamicdoc'; -import { StaticDoc } from '../../doc/messages/staticdoc'; -import { ServiceDoc } from '../../doc/messages/servicedoc'; -import { AnimationDoc } from '../../doc/messages/animationdoc'; -import { SeverityDoc } from '../../doc/messages/severitydoc'; -import { AccessibilityDoc } from '../../doc/messages/accessibilitydoc'; +import { ImportDoc } from '@doc/messages/importdoc'; +import { BasicDoc } from '@doc/messages/basicdoc'; +import { MessagesStyleDoc } from '@doc/messages/messagesstyledoc'; +import { MessageStyleDoc } from '@doc/messages/messagestyledoc'; +import { ClosableDoc } from '@doc/messages/closabledoc'; +import { DynamicDoc } from '@doc/messages/dynamicdoc'; +import { StaticDoc } from '@doc/messages/staticdoc'; +import { AnimationDoc } from '@doc/messages/animationdoc'; +import { SeverityDoc } from '@doc/messages/severitydoc'; +import { AccessibilityDoc } from '@doc/messages/accessibilitydoc'; +import { ServiceDoc } from '@doc/messages/servicedoc'; @Component({ templateUrl: './messagesdemo.html' @@ -28,15 +27,20 @@ export class MessagesDemo { component: BasicDoc }, { - id: 'closable', - label: 'Closable', - component: ClosableDoc + id: 'severity', + label: 'Severity', + component: SeverityDoc }, { id: 'dynamic', label: 'Dynamic', component: DynamicDoc }, + { + id: 'closable', + label: 'Closable', + component: ClosableDoc + }, { id: 'service', label: 'Message Service', @@ -47,16 +51,6 @@ export class MessagesDemo { label: 'Static Content', component: StaticDoc }, - { - id: 'inline', - label: 'Inline', - component: InlineDoc - }, - { - id: 'severity', - label: 'Severity', - component: SeverityDoc - }, { id: 'animation', label: 'Animation', diff --git a/src/app/showcase/pages/metergroup/metergroupdemo.module.ts b/src/app/showcase/pages/metergroup/metergroupdemo.module.ts index 0e84db99afd..60c43136944 100755 --- a/src/app/showcase/pages/metergroup/metergroupdemo.module.ts +++ b/src/app/showcase/pages/metergroup/metergroupdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MeterGroupDocModule } from '../../doc/metergroup/metergroupdoc.module'; +import { MeterGroupDocModule } from '@doc/metergroup/metergroupdoc.module'; import { MeterGroupDemo } from './metergroupdemo'; import { MeterGroupDemoRoutingModule } from './metergroupdemo-routing.module'; diff --git a/src/app/showcase/pages/metergroup/metergroupdemo.ts b/src/app/showcase/pages/metergroup/metergroupdemo.ts index 7935a1a07b7..6ae0ac4f48a 100755 --- a/src/app/showcase/pages/metergroup/metergroupdemo.ts +++ b/src/app/showcase/pages/metergroup/metergroupdemo.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/metergroup/importdoc'; -import { BasicDoc } from '../../doc/metergroup/basicdoc'; -import { MultipleDoc } from '../../doc/metergroup/multipledoc'; -import { IconDoc } from '../../doc/metergroup/icondoc'; -import { LabelDoc } from '../../doc/metergroup/labeldoc'; -import { VerticalDoc } from '../../doc/metergroup/verticaldoc'; -import { MinMaxDoc } from '../../doc/metergroup/minmaxdoc'; -import { TemplateDoc } from '../../doc/metergroup/templatedoc'; -import { StyleDoc } from '../../doc/metergroup/styledoc'; -import { AccessibilityDoc } from '../../doc/metergroup/accessibilitydoc'; +import { ImportDoc } from '@doc/metergroup/importdoc'; +import { BasicDoc } from '@doc/metergroup/basicdoc'; +import { MultipleDoc } from '@doc/metergroup/multipledoc'; +import { IconDoc } from '@doc/metergroup/icondoc'; +import { LabelDoc } from '@doc/metergroup/labeldoc'; +import { VerticalDoc } from '@doc/metergroup/verticaldoc'; +import { MinMaxDoc } from '@doc/metergroup/minmaxdoc'; +import { TemplateDoc } from '@doc/metergroup/templatedoc'; +import { StyleDoc } from '@doc/metergroup/styledoc'; +import { AccessibilityDoc } from '@doc/metergroup/accessibilitydoc'; @Component({ templateUrl: './metergroupdemo.html' }) diff --git a/src/app/showcase/pages/multiselect/multiselectdemo.module.ts b/src/app/showcase/pages/multiselect/multiselectdemo.module.ts index 3b290fce3c9..02c58c54109 100755 --- a/src/app/showcase/pages/multiselect/multiselectdemo.module.ts +++ b/src/app/showcase/pages/multiselect/multiselectdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { MultiSelectDocModule } from '../../doc/multiselect/multiselectdoc.module'; +import { MultiSelectDocModule } from '@doc/multiselect/multiselectdoc.module'; import { MultiSelectDemo } from './multiselectdemo'; import { MultiSelectDemoRoutingModule } from './multiselectdemo-routing.module'; diff --git a/src/app/showcase/pages/multiselect/multiselectdemo.ts b/src/app/showcase/pages/multiselect/multiselectdemo.ts index 002565a2cf3..706a10b130d 100755 --- a/src/app/showcase/pages/multiselect/multiselectdemo.ts +++ b/src/app/showcase/pages/multiselect/multiselectdemo.ts @@ -1,17 +1,19 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/multiselect/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/multiselect/accessibilitydoc'; -import { BasicDoc } from '../../doc/multiselect/basicdoc'; -import { ChipsDoc } from '../../doc/multiselect/chipsdoc'; -import { DisabledDoc } from '../../doc/multiselect/disableddoc'; -import { FilterDoc } from '../../doc/multiselect/filterdoc'; -import { FloatLabelDoc } from '../../doc/multiselect/floatlabeldoc'; -import { GroupDoc } from '../../doc/multiselect/groupdoc'; -import { ImportDoc } from '../../doc/multiselect/importdoc'; -import { InvalidDoc } from '../../doc/multiselect/invaliddoc'; -import { StyleDoc } from '../../doc/multiselect/styledoc'; -import { TemplateDoc } from '../../doc/multiselect/templatedoc'; -import { VirtualScrollDoc } from '../../doc/multiselect/virtualscrolldoc'; +import { ReactiveFormsDoc } from '@doc/multiselect/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/multiselect/accessibilitydoc'; +import { BasicDoc } from '@doc/multiselect/basicdoc'; +import { ChipsDoc } from '@doc/multiselect/chipsdoc'; +import { DisabledDoc } from '@doc/multiselect/disableddoc'; +import { FilterDoc } from '@doc/multiselect/filterdoc'; +import { FloatLabelDoc } from '@doc/multiselect/floatlabeldoc'; +import { GroupDoc } from '@doc/multiselect/groupdoc'; +import { ImportDoc } from '@doc/multiselect/importdoc'; +import { InvalidDoc } from '@doc/multiselect/invaliddoc'; +import { StyleDoc } from '@doc/multiselect/styledoc'; +import { TemplateDoc } from '@doc/multiselect/templatedoc'; +import { VirtualScrollDoc } from '@doc/multiselect/virtualscrolldoc'; +import { LoadingStateDoc } from '@doc/multiselect/loadingstatedoc'; +import { FilledDoc } from '@doc/multiselect/filleddoc'; @Component({ templateUrl: './multiselectdemo.html', @@ -54,6 +56,11 @@ export class MultiSelectDemo { label: 'Filter', component: FilterDoc }, + { + id: 'loadingstate', + label: 'Loading State', + component: LoadingStateDoc + }, { id: 'virtualscroll', label: 'VirtualScroll', @@ -64,6 +71,11 @@ export class MultiSelectDemo { label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/orderlist/orderlistdemo.module.ts b/src/app/showcase/pages/orderlist/orderlistdemo.module.ts index 1c0c2016dc5..3a56195c6e9 100755 --- a/src/app/showcase/pages/orderlist/orderlistdemo.module.ts +++ b/src/app/showcase/pages/orderlist/orderlistdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { OrderlistDocModule } from '../../doc/orderlist/orderlistdoc.module'; +import { OrderlistDocModule } from '@doc/orderlist/orderlistdoc.module'; import { OrderListDemo } from './orderlistdemo'; import { OrderListDemoRoutingModule } from './orderlistdemo-routing.module'; diff --git a/src/app/showcase/pages/orderlist/orderlistdemo.ts b/src/app/showcase/pages/orderlist/orderlistdemo.ts index 32614c18177..3961a219b28 100755 --- a/src/app/showcase/pages/orderlist/orderlistdemo.ts +++ b/src/app/showcase/pages/orderlist/orderlistdemo.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { FilterDoc } from '../../doc/orderlist/filterdoc'; -import { BasicDoc } from '../../doc/orderlist/basicdoc'; -import { ImportDoc } from '../../doc/orderlist/importdoc'; -import { DragDropDoc } from '../../doc/orderlist/dragdropdoc'; -import { StyleDoc } from '../../doc/orderlist/styledoc'; -import { AccessibilityDoc } from '../../doc/orderlist/accessibilitydoc'; +import { FilterDoc } from '@doc/orderlist/filterdoc'; +import { BasicDoc } from '@doc/orderlist/basicdoc'; +import { ImportDoc } from '@doc/orderlist/importdoc'; +import { DragDropDoc } from '@doc/orderlist/dragdropdoc'; +import { StyleDoc } from '@doc/orderlist/styledoc'; +import { AccessibilityDoc } from '@doc/orderlist/accessibilitydoc'; @Component({ templateUrl: './orderlistdemo.html', diff --git a/src/app/showcase/pages/organizationchart/organizationchartdemo.module.ts b/src/app/showcase/pages/organizationchart/organizationchartdemo.module.ts index 6cd9d287502..c1235de6180 100755 --- a/src/app/showcase/pages/organizationchart/organizationchartdemo.module.ts +++ b/src/app/showcase/pages/organizationchart/organizationchartdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { OrganizationChartDocModule } from '../../doc/organizationchart/organizationchartdoc.module'; +import { OrganizationChartDocModule } from '@doc/organizationchart/organizationchartdoc.module'; import { OrganizationChartDemo } from './organizationchartdemo'; import { OrganizationChartDemoRoutingModule } from './organizationchartdemo-routing.module'; diff --git a/src/app/showcase/pages/organizationchart/organizationchartdemo.ts b/src/app/showcase/pages/organizationchart/organizationchartdemo.ts index 0ee16fa6627..eaa709d5da9 100755 --- a/src/app/showcase/pages/organizationchart/organizationchartdemo.ts +++ b/src/app/showcase/pages/organizationchart/organizationchartdemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { TemplateDoc } from '../../doc/organizationchart/templatedoc'; -import { BasicDoc } from '../../doc/organizationchart/basicdoc'; -import { ImportDoc } from '../../doc/organizationchart/importdoc'; -import { SelectionDoc } from '../../doc/organizationchart/selectiondoc'; -import { ColoredDoc } from '../../doc/organizationchart/colored.doc'; -import { StyleDoc } from '../../doc/organizationchart/styledoc'; -import { AccessibilityDoc } from '../../doc/organizationchart/accessibilitydoc'; +import { TemplateDoc } from '@doc/organizationchart/templatedoc'; +import { BasicDoc } from '@doc/organizationchart/basicdoc'; +import { ImportDoc } from '@doc/organizationchart/importdoc'; +import { SelectionDoc } from '@doc/organizationchart/selectiondoc'; +import { ColoredDoc } from '@doc/organizationchart/colored.doc'; +import { StyleDoc } from '@doc/organizationchart/styledoc'; +import { AccessibilityDoc } from '@doc/organizationchart/accessibilitydoc'; @Component({ templateUrl: './organizationchartdemo.html', diff --git a/src/app/showcase/pages/overlay/overlaydemo.module.ts b/src/app/showcase/pages/overlay/overlaydemo.module.ts index 6ce4ab11800..f2873c93e37 100755 --- a/src/app/showcase/pages/overlay/overlaydemo.module.ts +++ b/src/app/showcase/pages/overlay/overlaydemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { OverlayDocModule } from '../../doc/overlay/overlaydoc.module'; +import { OverlayDocModule } from '@doc/overlay/overlaydoc.module'; import { OverlayDemo } from './overlaydemo'; import { OverlayDemoRoutingModule } from './overlaydemo-routing.module'; diff --git a/src/app/showcase/pages/overlay/overlaydemo.ts b/src/app/showcase/pages/overlay/overlaydemo.ts index 839cd506fc8..97276416ef9 100644 --- a/src/app/showcase/pages/overlay/overlaydemo.ts +++ b/src/app/showcase/pages/overlay/overlaydemo.ts @@ -1,18 +1,18 @@ import { Component } from '@angular/core'; -import { OverlayBasicDemo } from '../../doc/overlay/basicdoc'; -import { AppendToDoc } from '../../doc/overlay/appendtodoc'; -import { AutoZIndexDoc } from '../../doc/overlay/autozindexdoc'; -import { BaseZIndexDoc } from '../../doc/overlay/basezindexdoc'; -import { EventsDoc } from '../../doc/overlay/eventsdoc'; -import { HideOnEscapeDoc } from '../../doc/overlay/hideonescapedoc'; -import { ImportDoc } from '../../doc/overlay/importdoc'; -import { ModeDoc } from '../../doc/overlay/modedoc'; -import { ResponsiveDoc } from '../../doc/overlay/responsivedoc'; -import { StyleDoc } from '../../doc/overlay/styledoc'; -import { TargetDoc } from '../../doc/overlay/targetdoc'; -import { OverlayTemplateDemo } from '../../doc/overlay/templatedoc'; -import { TransitionOptionsDoc } from '../../doc/overlay/transitionoptionsdoc'; -import { AccessibilityDoc } from '../../doc/overlay/accessibilitydoc'; +import { OverlayBasicDemo } from '@doc/overlay/basicdoc'; +import { AppendToDoc } from '@doc/overlay/appendtodoc'; +import { AutoZIndexDoc } from '@doc/overlay/autozindexdoc'; +import { BaseZIndexDoc } from '@doc/overlay/basezindexdoc'; +import { EventsDoc } from '@doc/overlay/eventsdoc'; +import { HideOnEscapeDoc } from '@doc/overlay/hideonescapedoc'; +import { ImportDoc } from '@doc/overlay/importdoc'; +import { ModeDoc } from '@doc/overlay/modedoc'; +import { ResponsiveDoc } from '@doc/overlay/responsivedoc'; +import { StyleDoc } from '@doc/overlay/styledoc'; +import { TargetDoc } from '@doc/overlay/targetdoc'; +import { OverlayTemplateDemo } from '@doc/overlay/templatedoc'; +import { TransitionOptionsDoc } from '@doc/overlay/transitionoptionsdoc'; +import { AccessibilityDoc } from '@doc/overlay/accessibilitydoc'; @Component({ templateUrl: './overlaydemo.html' diff --git a/src/app/showcase/pages/overlaypanel/overlaypaneldemo.module.ts b/src/app/showcase/pages/overlaypanel/overlaypaneldemo.module.ts index bb42588ddbb..02f4883df0f 100755 --- a/src/app/showcase/pages/overlaypanel/overlaypaneldemo.module.ts +++ b/src/app/showcase/pages/overlaypanel/overlaypaneldemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { OverlayPanelDocModule } from '../../doc/overlaypanel/overlaypaneldoc.module'; +import { OverlayPanelDocModule } from '@doc/overlaypanel/overlaypaneldoc.module'; import { OverlayPanelDemo } from './overlaypaneldemo'; import { OverlayPanelDemoRoutingModule } from './overlaypaneldemo-routing.module'; diff --git a/src/app/showcase/pages/overlaypanel/overlaypaneldemo.ts b/src/app/showcase/pages/overlaypanel/overlaypaneldemo.ts index 535d105b7c5..45bf43fc935 100755 --- a/src/app/showcase/pages/overlaypanel/overlaypaneldemo.ts +++ b/src/app/showcase/pages/overlaypanel/overlaypaneldemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/overlaypanel/basicdoc'; -import { ImportDoc } from '../../doc/overlaypanel/importdoc'; -import { StyleDoc } from '../../doc/overlaypanel/styledoc'; -import { DataTableDoc } from '../../doc/overlaypanel/datatabledoc'; -import { TemplateDoc } from '../../doc/overlaypanel/templatedoc'; -import { TargetDoc } from '../../doc/overlaypanel/targetdoc'; -import { AccessibilityDoc } from '../../doc/overlaypanel/accessibilitydoc'; +import { BasicDoc } from '@doc/overlaypanel/basicdoc'; +import { ImportDoc } from '@doc/overlaypanel/importdoc'; +import { StyleDoc } from '@doc/overlaypanel/styledoc'; +import { DataTableDoc } from '@doc/overlaypanel/datatabledoc'; +import { TemplateDoc } from '@doc/overlaypanel/templatedoc'; +import { TargetDoc } from '@doc/overlaypanel/targetdoc'; +import { AccessibilityDoc } from '@doc/overlaypanel/accessibilitydoc'; @Component({ templateUrl: './overlaypaneldemo.html' @@ -22,16 +22,6 @@ export class OverlayPanelDemo { label: 'Basic', component: BasicDoc }, - { - id: 'target', - label: 'Target', - component: TargetDoc - }, - { - id: 'template', - label: 'Template', - component: TemplateDoc - }, { id: 'datatable', label: 'DataTable', diff --git a/src/app/showcase/pages/paginator/paginatordemo.module.ts b/src/app/showcase/pages/paginator/paginatordemo.module.ts index 004c6b5cff4..e93d4052164 100755 --- a/src/app/showcase/pages/paginator/paginatordemo.module.ts +++ b/src/app/showcase/pages/paginator/paginatordemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { PaginatorDocModule } from '../../doc/paginator/paginatordoc.module'; +import { PaginatorDocModule } from '@doc/paginator/paginatordoc.module'; import { PaginatorDemo } from './paginatordemo'; import { PaginatorDemoRoutingModule } from './paginatordemo-routing.module'; diff --git a/src/app/showcase/pages/paginator/paginatordemo.ts b/src/app/showcase/pages/paginator/paginatordemo.ts index 62d78a8785f..58f558feed3 100755 --- a/src/app/showcase/pages/paginator/paginatordemo.ts +++ b/src/app/showcase/pages/paginator/paginatordemo.ts @@ -1,11 +1,12 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/paginator/accessibilitydoc'; -import { BasicDoc } from '../../doc/paginator/basicdoc'; -import { ImagesDoc } from '../../doc/paginator/imagesdoc'; -import { ImportDoc } from '../../doc/paginator/importdoc'; -import { StyleDoc } from '../../doc/paginator/styledoc'; -import { TemplateDoc } from '../../doc/paginator/templatedoc'; -import { LocaleDoc } from '../../doc/paginator/localedoc'; +import { AccessibilityDoc } from '@doc/paginator/accessibilitydoc'; +import { BasicDoc } from '@doc/paginator/basicdoc'; +import { ImagesDoc } from '@doc/paginator/imagesdoc'; +import { ImportDoc } from '@doc/paginator/importdoc'; +import { StyleDoc } from '@doc/paginator/styledoc'; +import { TemplateDoc } from '@doc/paginator/templatedoc'; +import { LocaleDoc } from '@doc/paginator/localedoc'; +import { CurrentPageReportDoc } from '@doc/paginator/currentpagereportdoc'; @Component({ templateUrl: './paginatordemo.html', @@ -34,9 +35,9 @@ export class PaginatorDemo { component: TemplateDoc }, { - id: 'images', - label: 'Images', - component: ImagesDoc + id: 'current-page-report', + label: 'Current Page Report', + component: CurrentPageReportDoc }, { id: 'style', diff --git a/src/app/showcase/pages/panel/paneldemo.module.ts b/src/app/showcase/pages/panel/paneldemo.module.ts index c67d9245cc5..4cb89656f68 100755 --- a/src/app/showcase/pages/panel/paneldemo.module.ts +++ b/src/app/showcase/pages/panel/paneldemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { PanelDocModule } from '../../doc/panel/paneldoc.module'; +import { PanelDocModule } from '@doc/panel/paneldoc.module'; import { PanelDemo } from './paneldemo'; import { PanelDemoRoutingModule } from './paneldemo-routing.module'; diff --git a/src/app/showcase/pages/panel/paneldemo.ts b/src/app/showcase/pages/panel/paneldemo.ts index fda5096e45c..ebe3df384d9 100755 --- a/src/app/showcase/pages/panel/paneldemo.ts +++ b/src/app/showcase/pages/panel/paneldemo.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { TemplateDoc } from '../../doc/panel/templatedoc'; -import { BasicDoc } from '../../doc/panel/basicdoc'; -import { ImportDoc } from '../../doc/panel/importdoc'; -import { ToggleableDoc } from '../../doc/panel/toggleabledoc'; -import { StyleDoc } from '../../doc/panel/styledoc'; -import { AccessibilityDoc } from '../../doc/panel/accessibilitydoc'; +import { TemplateDoc } from '@doc/panel/templatedoc'; +import { BasicDoc } from '@doc/panel/basicdoc'; +import { ImportDoc } from '@doc/panel/importdoc'; +import { ToggleableDoc } from '@doc/panel/toggleabledoc'; +import { StyleDoc } from '@doc/panel/styledoc'; +import { AccessibilityDoc } from '@doc/panel/accessibilitydoc'; @Component({ templateUrl: './paneldemo.html' diff --git a/src/app/showcase/pages/panelmenu/panelmenudemo.module.ts b/src/app/showcase/pages/panelmenu/panelmenudemo.module.ts index c4f1703c051..9bc479fd65d 100755 --- a/src/app/showcase/pages/panelmenu/panelmenudemo.module.ts +++ b/src/app/showcase/pages/panelmenu/panelmenudemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { PanelMenuDocModule } from '../../doc/panelmenu/panelmenudoc.module'; +import { PanelMenuDocModule } from '@doc/panelmenu/panelmenudoc.module'; import { PanelMenuDemo } from './panelmenudemo'; import { PanelMenuDemoRoutingModule } from './panelmenudemo-routing.module'; diff --git a/src/app/showcase/pages/panelmenu/panelmenudemo.ts b/src/app/showcase/pages/panelmenu/panelmenudemo.ts index b26344c7886..c7826b3ef89 100755 --- a/src/app/showcase/pages/panelmenu/panelmenudemo.ts +++ b/src/app/showcase/pages/panelmenu/panelmenudemo.ts @@ -1,9 +1,13 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/panelmenu/basicdoc'; -import { ImportDoc } from '../../doc/panelmenu/importdoc'; -import { StyleDoc } from '../../doc/panelmenu/styledoc'; -import { MultipleDoc } from '../../doc/panelmenu/multipledoc'; -import { AccessibilityDoc } from '../../doc/panelmenu/accessibilitydoc'; +import { BasicDoc } from '@doc/panelmenu/basicdoc'; +import { ImportDoc } from '@doc/panelmenu/importdoc'; +import { StyleDoc } from '@doc/panelmenu/styledoc'; +import { MultipleDoc } from '@doc/panelmenu/multipledoc'; +import { AccessibilityDoc } from '@doc/panelmenu/accessibilitydoc'; +import { ControlledDoc } from '@doc/panelmenu/controlleddoc'; +import { TemplateDoc } from '@doc/panelmenu/templatedoc'; +import { CommandDoc } from '@doc/panelmenu/commanddoc'; +import { RouterDoc } from '@doc/panelmenu/routerdoc'; @Component({ templateUrl: './panelmenudemo.html' @@ -25,6 +29,26 @@ export class PanelMenuDemo { label: 'Multiple', component: MultipleDoc }, + { + id: 'controlled', + label: 'Controlled', + component: ControlledDoc + }, + { + 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/password/passworddemo.module.ts b/src/app/showcase/pages/password/passworddemo.module.ts index 7a40be8520e..0d96a9f7c14 100755 --- a/src/app/showcase/pages/password/passworddemo.module.ts +++ b/src/app/showcase/pages/password/passworddemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { PasswordDocModule } from '../../doc/password/passworddoc.module'; +import { PasswordDocModule } from '@doc/password/passworddoc.module'; import { PasswordDemo } from './passworddemo'; import { PasswordDemoRoutingModule } from './passworddemo-routing.module'; diff --git a/src/app/showcase/pages/password/passworddemo.ts b/src/app/showcase/pages/password/passworddemo.ts index cb6a7e0fc4d..3a0e18c35f0 100755 --- a/src/app/showcase/pages/password/passworddemo.ts +++ b/src/app/showcase/pages/password/passworddemo.ts @@ -1,16 +1,17 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/password/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/password/accessibilitydoc'; -import { BasicDoc } from '../../doc/password/basicdoc'; -import { DisabledDoc } from '../../doc/password/disableddoc'; -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'; +import { ReactiveFormsDoc } from '@doc/password/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/password/accessibilitydoc'; +import { BasicDoc } from '@doc/password/basicdoc'; +import { DisabledDoc } from '@doc/password/disableddoc'; +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'; +import { FilledDoc } from '@doc/password/filleddoc'; @Component({ templateUrl: './passworddemo.html' @@ -57,6 +58,11 @@ export class PasswordDemo { label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/picklist/picklistdemo.module.ts b/src/app/showcase/pages/picklist/picklistdemo.module.ts index 1786e6f723f..64079e15c0d 100755 --- a/src/app/showcase/pages/picklist/picklistdemo.module.ts +++ b/src/app/showcase/pages/picklist/picklistdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { PicklistDocModule } from '../../doc/picklist/picklistdoc.module'; +import { PicklistDocModule } from '@doc/picklist/picklistdoc.module'; import { PickListDemo } from './picklistdemo'; import { PickListDemoRoutingModule } from './picklistdemo-routing.module'; diff --git a/src/app/showcase/pages/picklist/picklistdemo.ts b/src/app/showcase/pages/picklist/picklistdemo.ts index 272e9c71892..8dbe976f5e5 100755 --- a/src/app/showcase/pages/picklist/picklistdemo.ts +++ b/src/app/showcase/pages/picklist/picklistdemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { FilterDoc } from '../../doc/picklist/filterdoc'; -import { BasicDoc } from '../../doc/picklist/basicdoc'; -import { ImportDoc } from '../../doc/picklist/importdoc'; -import { StyleDoc } from '../../doc/picklist/styledoc'; -import { AccessibilityDoc } from '../../doc/picklist/accessibilitydoc'; +import { FilterDoc } from '@doc/picklist/filterdoc'; +import { BasicDoc } from '@doc/picklist/basicdoc'; +import { ImportDoc } from '@doc/picklist/importdoc'; +import { StyleDoc } from '@doc/picklist/styledoc'; +import { AccessibilityDoc } from '@doc/picklist/accessibilitydoc'; @Component({ templateUrl: './picklistdemo.html', diff --git a/src/app/showcase/pages/progressbar/progressbardemo.module.ts b/src/app/showcase/pages/progressbar/progressbardemo.module.ts index 5cc9b909adb..936c5e02e69 100755 --- a/src/app/showcase/pages/progressbar/progressbardemo.module.ts +++ b/src/app/showcase/pages/progressbar/progressbardemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ProgressBarDocModule } from '../../doc/progressbar/progressbardoc.module'; +import { ProgressBarDocModule } from '@doc/progressbar/progressbardoc.module'; import { ProgressBarDemo } from './progressbardemo'; import { ProgressBarDemoRoutingModule } from './progressbardemo-routing.module'; diff --git a/src/app/showcase/pages/progressbar/progressbardemo.ts b/src/app/showcase/pages/progressbar/progressbardemo.ts index 25a06212856..6451a8341e2 100755 --- a/src/app/showcase/pages/progressbar/progressbardemo.ts +++ b/src/app/showcase/pages/progressbar/progressbardemo.ts @@ -1,11 +1,11 @@ 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'; +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'; @Component({ templateUrl: './progressbardemo.html' diff --git a/src/app/showcase/pages/progressspinner/progressspinnerdemo.module.ts b/src/app/showcase/pages/progressspinner/progressspinnerdemo.module.ts index 88a3bb2ec28..93cf9f59a0e 100755 --- a/src/app/showcase/pages/progressspinner/progressspinnerdemo.module.ts +++ b/src/app/showcase/pages/progressspinner/progressspinnerdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ProgressSpinnerDocModule } from '../../doc/progressspinner/progressspinnerdoc.module'; +import { ProgressSpinnerDocModule } from '@doc/progressspinner/progressspinnerdoc.module'; import { ProgressSpinnerDemo } from './progressspinnerdemo'; import { ProgressSpinnerDemoRoutingModule } from './progressspinnerdemo-routing.module'; diff --git a/src/app/showcase/pages/progressspinner/progressspinnerdemo.ts b/src/app/showcase/pages/progressspinner/progressspinnerdemo.ts index 2cfd69cfdeb..69cc012092c 100755 --- a/src/app/showcase/pages/progressspinner/progressspinnerdemo.ts +++ b/src/app/showcase/pages/progressspinner/progressspinnerdemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/progressspinner/importdoc'; -import { BasicDoc } from '../../doc/progressspinner/basicdoc'; -import { StyleDoc } from '../../doc/progressspinner/styledoc'; -import { TemplateDoc } from '../../doc/progressspinner/templatedoc'; -import { AccessibilityDoc } from '../../doc/progressspinner/accessibilitydoc'; +import { ImportDoc } from '@doc/progressspinner/importdoc'; +import { BasicDoc } from '@doc/progressspinner/basicdoc'; +import { StyleDoc } from '@doc/progressspinner/styledoc'; +import { TemplateDoc } from '@doc/progressspinner/templatedoc'; +import { AccessibilityDoc } from '@doc/progressspinner/accessibilitydoc'; @Component({ templateUrl: './progressspinnerdemo.html', diff --git a/src/app/showcase/pages/radiobutton/radiobuttondemo.module.ts b/src/app/showcase/pages/radiobutton/radiobuttondemo.module.ts index 061699a11ad..269bf21ab72 100755 --- a/src/app/showcase/pages/radiobutton/radiobuttondemo.module.ts +++ b/src/app/showcase/pages/radiobutton/radiobuttondemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { RadioButtonDocModule } from '../../doc/radiobutton/radiobuttondoc.module'; +import { RadioButtonDocModule } from '@doc/radiobutton/radiobuttondoc.module'; import { RadioButtonDemo } from './radiobuttondemo'; import { RadioButtonDemoRoutingModule } from './radiobuttondemo-routing.module'; diff --git a/src/app/showcase/pages/radiobutton/radiobuttondemo.ts b/src/app/showcase/pages/radiobutton/radiobuttondemo.ts index 9e54b4b78bd..ddd674ca637 100755 --- a/src/app/showcase/pages/radiobutton/radiobuttondemo.ts +++ b/src/app/showcase/pages/radiobutton/radiobuttondemo.ts @@ -1,12 +1,13 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/radiobutton/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/radiobutton/accessibilitydoc'; -import { DisabledDoc } from '../../doc/radiobutton/disableddoc'; -import { DynamicDoc } from '../../doc/radiobutton/dynamicdoc'; -import { GroupDoc } from '../../doc/radiobutton/groupdoc'; -import { ImportDoc } from '../../doc/radiobutton/importdoc'; -import { InvalidDoc } from '../../doc/radiobutton/invaliddoc'; -import { StyleDoc } from '../../doc/radiobutton/styledoc'; +import { ReactiveFormsDoc } from '@doc/radiobutton/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/radiobutton/accessibilitydoc'; +import { DisabledDoc } from '@doc/radiobutton/disableddoc'; +import { DynamicDoc } from '@doc/radiobutton/dynamicdoc'; +import { GroupDoc } from '@doc/radiobutton/groupdoc'; +import { ImportDoc } from '@doc/radiobutton/importdoc'; +import { InvalidDoc } from '@doc/radiobutton/invaliddoc'; +import { StyleDoc } from '@doc/radiobutton/styledoc'; +import { FilledDoc } from '@doc/radiobutton/filleddoc'; @Component({ templateUrl: './radiobuttondemo.html' @@ -33,6 +34,11 @@ export class RadioButtonDemo { label: 'Reactive Forms', component: ReactiveFormsDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/rating/ratingdemo.module.ts b/src/app/showcase/pages/rating/ratingdemo.module.ts index 6743c3775a8..c8f118d2e6c 100755 --- a/src/app/showcase/pages/rating/ratingdemo.module.ts +++ b/src/app/showcase/pages/rating/ratingdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { RatingDocModule } from '../../doc/rating/ratingdoc.module'; +import { RatingDocModule } from '@doc/rating/ratingdoc.module'; import { RatingDemo } from './ratingdemo'; import { RatingDemoRoutingModule } from './ratingdemo-routing.module'; diff --git a/src/app/showcase/pages/rating/ratingdemo.ts b/src/app/showcase/pages/rating/ratingdemo.ts index 8fbd95451f5..b937e316add 100755 --- a/src/app/showcase/pages/rating/ratingdemo.ts +++ b/src/app/showcase/pages/rating/ratingdemo.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; -import { DisabledDoc } from '../../doc/rating/disableddoc'; -import { BasicDoc } from '../../doc/rating/basicdoc'; -import { ImportDoc } from '../../doc/rating/importdoc'; -import { NumberOfStarsDoc } from '../../doc/rating/numberofstarsdoc'; -import { ReadOnlyDoc } from '../../doc/rating/readonlydoc'; -import { TemplateDoc } from '../../doc/rating/templatedoc'; -import { WithoutCancelDoc } from '../../doc/rating/withoutcanceldoc'; -import { StyleDoc } from '../../doc/rating/styledoc'; -import { AccessibilityDoc } from '../../doc/rating/accessibilitydoc'; -import { ReactiveFormsDoc } from '../../doc/rating/reactiveformsdoc'; +import { DisabledDoc } from '@doc/rating/disableddoc'; +import { BasicDoc } from '@doc/rating/basicdoc'; +import { ImportDoc } from '@doc/rating/importdoc'; +import { NumberOfStarsDoc } from '@doc/rating/numberofstarsdoc'; +import { ReadOnlyDoc } from '@doc/rating/readonlydoc'; +import { TemplateDoc } from '@doc/rating/templatedoc'; +import { WithoutCancelDoc } from '@doc/rating/withoutcanceldoc'; +import { StyleDoc } from '@doc/rating/styledoc'; +import { AccessibilityDoc } from '@doc/rating/accessibilitydoc'; +import { ReactiveFormsDoc } from '@doc/rating/reactiveformsdoc'; @Component({ templateUrl: './ratingdemo.html' diff --git a/src/app/showcase/pages/ripple/rippledemo.module.ts b/src/app/showcase/pages/ripple/rippledemo.module.ts index 266430c5565..53a78ad9416 100644 --- a/src/app/showcase/pages/ripple/rippledemo.module.ts +++ b/src/app/showcase/pages/ripple/rippledemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { RippleDocModule } from '../../doc/ripple/rippledoc.module'; +import { RippleDocModule } from '@doc/ripple/rippledoc.module'; import { RippleDemo } from './rippledemo'; import { RippleDemoRoutingModule } from './rippledemo-routing.module'; diff --git a/src/app/showcase/pages/ripple/rippledemo.ts b/src/app/showcase/pages/ripple/rippledemo.ts index d6344f890d8..05fd44cfc34 100644 --- a/src/app/showcase/pages/ripple/rippledemo.ts +++ b/src/app/showcase/pages/ripple/rippledemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/ripple/importdoc'; -import { StyleDoc } from '../../doc/ripple/styledoc'; -import { CustomDoc } from '../../doc/ripple/customdoc'; -import { DefaultDoc } from '../../doc/ripple/defaultdoc'; -import { AccessibilityDoc } from '../../doc/ripple/accessibilitydoc'; +import { ImportDoc } from '@doc/ripple/importdoc'; +import { StyleDoc } from '@doc/ripple/styledoc'; +import { CustomDoc } from '@doc/ripple/customdoc'; +import { DefaultDoc } from '@doc/ripple/defaultdoc'; +import { AccessibilityDoc } from '@doc/ripple/accessibilitydoc'; @Component({ templateUrl: './rippledemo.html', styleUrls: ['./rippledemo.scss'] diff --git a/src/app/showcase/pages/scroller/scrollerdemo.module.ts b/src/app/showcase/pages/scroller/scrollerdemo.module.ts index 0e0bb6702ef..3b0e689873a 100644 --- a/src/app/showcase/pages/scroller/scrollerdemo.module.ts +++ b/src/app/showcase/pages/scroller/scrollerdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ScrollerDocModule } from '../../doc/scroller/scrollerdoc.module'; +import { ScrollerDocModule } from '@doc/scroller/scrollerdoc.module'; import { ScrollerDemo } from './scrollerdemo'; import { ScrollerDemoRoutingModule } from './scrollerdemo-routing.module'; diff --git a/src/app/showcase/pages/scroller/scrollerdemo.ts b/src/app/showcase/pages/scroller/scrollerdemo.ts index d4d47359e23..31b4430514b 100644 --- a/src/app/showcase/pages/scroller/scrollerdemo.ts +++ b/src/app/showcase/pages/scroller/scrollerdemo.ts @@ -1,16 +1,16 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/scroller/basicdoc'; -import { DelayDoc } from '../../doc/scroller/delaydoc'; -import { HorizontalDoc } from '../../doc/scroller/horizontaldoc'; -import { GridDoc } from '../../doc/scroller/griddoc'; -import { ImportDoc } from '../../doc/scroller/importdoc'; -import { LazyLoadDoc } from '../../doc/scroller/lazyloaddoc'; -import { LoaderDoc } from '../../doc/scroller/loaderdoc'; -import { ScrollOptionsDoc } from '../../doc/scroller/scrolloptionsdoc'; -import { StyleDoc } from '../../doc/scroller/styledoc'; -import { TemplateDoc } from '../../doc/scroller/templatedoc'; -import { ProgrammaticDoc } from '../../doc/scroller/programmaticdoc'; -import { AccessibilityDoc } from '../../doc/scroller/accessibilitydoc'; +import { BasicDoc } from '@doc/scroller/basicdoc'; +import { DelayDoc } from '@doc/scroller/delaydoc'; +import { HorizontalDoc } from '@doc/scroller/horizontaldoc'; +import { GridDoc } from '@doc/scroller/griddoc'; +import { ImportDoc } from '@doc/scroller/importdoc'; +import { LazyLoadDoc } from '@doc/scroller/lazyloaddoc'; +import { LoaderDoc } from '@doc/scroller/loaderdoc'; +import { ScrollOptionsDoc } from '@doc/scroller/scrolloptionsdoc'; +import { StyleDoc } from '@doc/scroller/styledoc'; +import { TemplateDoc } from '@doc/scroller/templatedoc'; +import { ProgrammaticDoc } from '@doc/scroller/programmaticdoc'; +import { AccessibilityDoc } from '@doc/scroller/accessibilitydoc'; @Component({ templateUrl: './scrollerdemo.html', diff --git a/src/app/showcase/pages/scrollpanel/scrollpaneldemo.module.ts b/src/app/showcase/pages/scrollpanel/scrollpaneldemo.module.ts index 5c029d0ea8d..1ac0e66115a 100755 --- a/src/app/showcase/pages/scrollpanel/scrollpaneldemo.module.ts +++ b/src/app/showcase/pages/scrollpanel/scrollpaneldemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ScrollPanelDocModule } from '../../doc/scrollpanel/scrollpaneldoc.module'; +import { ScrollPanelDocModule } from '@doc/scrollpanel/scrollpaneldoc.module'; import { ScrollPanelDemo } from './scrollpaneldemo'; import { ScrollPanelDemoRoutingModule } from './scrollpaneldemo-routing.module'; diff --git a/src/app/showcase/pages/scrollpanel/scrollpaneldemo.ts b/src/app/showcase/pages/scrollpanel/scrollpaneldemo.ts index b40c99f3894..c8947549fb6 100755 --- a/src/app/showcase/pages/scrollpanel/scrollpaneldemo.ts +++ b/src/app/showcase/pages/scrollpanel/scrollpaneldemo.ts @@ -1,9 +1,9 @@ import { Component, ViewEncapsulation } from '@angular/core'; -import { BasicDoc } from '../../doc/scrollpanel/basicdoc'; -import { ImportDoc } from '../../doc/scrollpanel/importdoc'; -import { CusstomDoc } from '../../doc/scrollpanel/customdoc'; -import { StyleDoc } from '../../doc/scrollpanel/styledoc'; -import { AccessibilityDoc } from '../../doc/scrollpanel/accessibilitydoc'; +import { BasicDoc } from '@doc/scrollpanel/basicdoc'; +import { ImportDoc } from '@doc/scrollpanel/importdoc'; +import { CusstomDoc } from '@doc/scrollpanel/customdoc'; +import { StyleDoc } from '@doc/scrollpanel/styledoc'; +import { AccessibilityDoc } from '@doc/scrollpanel/accessibilitydoc'; @Component({ templateUrl: './scrollpaneldemo.html', diff --git a/src/app/showcase/pages/scrolltop/scrolltopdemo.module.ts b/src/app/showcase/pages/scrolltop/scrolltopdemo.module.ts index a22455695f1..45ed026f033 100644 --- a/src/app/showcase/pages/scrolltop/scrolltopdemo.module.ts +++ b/src/app/showcase/pages/scrolltop/scrolltopdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ScrollTopDocModule } from '../../doc/scrolltop/scrolltopdoc.module'; +import { ScrollTopDocModule } from '@doc/scrolltop/scrolltopdoc.module'; import { ScrollTopDemo } from './scrolltopdemo'; import { ScrollTopDemoRoutingModule } from './scrolltopdemo-routing.module'; diff --git a/src/app/showcase/pages/scrolltop/scrolltopdemo.ts b/src/app/showcase/pages/scrolltop/scrolltopdemo.ts index ef161c3114c..669baf4c9d7 100644 --- a/src/app/showcase/pages/scrolltop/scrolltopdemo.ts +++ b/src/app/showcase/pages/scrolltop/scrolltopdemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/scrolltop/importdoc'; -import { BasicDoc } from '../../doc/scrolltop/basicdoc'; -import { StyleDoc } from '../../doc/scrolltop/styledoc'; -import { ElementDoc } from '../../doc/scrolltop/elementdoc'; -import { AccessibilityDoc } from '../../doc/scrolltop/accessibilitydoc'; +import { ImportDoc } from '@doc/scrolltop/importdoc'; +import { BasicDoc } from '@doc/scrolltop/basicdoc'; +import { StyleDoc } from '@doc/scrolltop/styledoc'; +import { ElementDoc } from '@doc/scrolltop/elementdoc'; +import { AccessibilityDoc } from '@doc/scrolltop/accessibilitydoc'; @Component({ templateUrl: './scrolltopdemo.html', diff --git a/src/app/showcase/pages/selectbutton/selectbuttondemo.module.ts b/src/app/showcase/pages/selectbutton/selectbuttondemo.module.ts index af483366677..f51c24715ba 100755 --- a/src/app/showcase/pages/selectbutton/selectbuttondemo.module.ts +++ b/src/app/showcase/pages/selectbutton/selectbuttondemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SelectButtonDocModule } from '../../doc/selectbutton/selectbuttondoc.module'; +import { SelectButtonDocModule } from '@doc/selectbutton/selectbuttondoc.module'; import { SelectButtonDemo } from './selectbuttondemo'; import { SelectButtonDemoRoutingModule } from './selectbuttondemo-routing.module'; diff --git a/src/app/showcase/pages/selectbutton/selectbuttondemo.ts b/src/app/showcase/pages/selectbutton/selectbuttondemo.ts index 7d0e4dc03ad..d4dba65956d 100755 --- a/src/app/showcase/pages/selectbutton/selectbuttondemo.ts +++ b/src/app/showcase/pages/selectbutton/selectbuttondemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/selectbutton/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/selectbutton/accessibilitydoc'; -import { BasicDoc } from '../../doc/selectbutton/basicdoc'; -import { DisabledDoc } from '../../doc/selectbutton/disableddoc'; -import { ImportDoc } from '../../doc/selectbutton/importdoc'; -import { InvalidDoc } from '../../doc/selectbutton/invaliddoc'; -import { MultipleDoc } from '../../doc/selectbutton/multipledoc'; -import { TemplateDoc } from '../../doc/selectbutton/templatedoc'; +import { ReactiveFormsDoc } from '@doc/selectbutton/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/selectbutton/accessibilitydoc'; +import { BasicDoc } from '@doc/selectbutton/basicdoc'; +import { DisabledDoc } from '@doc/selectbutton/disableddoc'; +import { ImportDoc } from '@doc/selectbutton/importdoc'; +import { InvalidDoc } from '@doc/selectbutton/invaliddoc'; +import { MultipleDoc } from '@doc/selectbutton/multipledoc'; +import { TemplateDoc } from '@doc/selectbutton/templatedoc'; @Component({ templateUrl: './selectbuttondemo.html' diff --git a/src/app/showcase/pages/sidebar/sidebardemo.module.ts b/src/app/showcase/pages/sidebar/sidebardemo.module.ts index 7e77459ce09..162d1199c11 100755 --- a/src/app/showcase/pages/sidebar/sidebardemo.module.ts +++ b/src/app/showcase/pages/sidebar/sidebardemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SidebarDocModule } from '../../doc/sidebar/sidebardoc.module'; +import { SidebarDocModule } from '@doc/sidebar/sidebardoc.module'; import { SidebarDemo } from './sidebardemo'; import { SidebarDemoRoutingModule } from './sidebardemo-routing.module'; diff --git a/src/app/showcase/pages/sidebar/sidebardemo.ts b/src/app/showcase/pages/sidebar/sidebardemo.ts index bbd60da4963..d49d12a9cc4 100755 --- a/src/app/showcase/pages/sidebar/sidebardemo.ts +++ b/src/app/showcase/pages/sidebar/sidebardemo.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/sidebar/basicdoc'; -import { TemplateDoc } from '../../doc/sidebar/templatedoc'; -import { ImportDoc } from '../../doc/sidebar/importdoc'; -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'; +import { BasicDoc } from '@doc/sidebar/basicdoc'; +import { TemplateDoc } from '@doc/sidebar/templatedoc'; +import { ImportDoc } from '@doc/sidebar/importdoc'; +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({ templateUrl: './sidebardemo.html' @@ -29,16 +29,16 @@ export class SidebarDemo { label: 'Position', component: PositionDoc }, - { - id: 'fullscreen', - label: 'Full Screen', - component: FullScreenDoc - }, { id: 'size', label: 'Size', component: SizeDoc }, + { + id: 'fullscreen', + label: 'Full Screen', + component: FullScreenDoc + }, { id: 'template', label: 'Template', diff --git a/src/app/showcase/pages/skeleton/skeletondemo.module.ts b/src/app/showcase/pages/skeleton/skeletondemo.module.ts index fd582baa5e2..03b8a834ec0 100644 --- a/src/app/showcase/pages/skeleton/skeletondemo.module.ts +++ b/src/app/showcase/pages/skeleton/skeletondemo.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SkeletonDocModule } from '../../doc/skeleton/skeletondoc.module'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; +import { SkeletonDocModule } from '@doc/skeleton/skeletondoc.module'; +import { AppDocModule } from '@layout/doc/app.doc.module'; import { SkeletonDemo } from './skeletondemo'; import { SkeletonDemoRoutingModule } from './skeletondemo-routing.module'; diff --git a/src/app/showcase/pages/skeleton/skeletondemo.ts b/src/app/showcase/pages/skeleton/skeletondemo.ts index 3c9b08cd79f..c0cdf8b305a 100644 --- a/src/app/showcase/pages/skeleton/skeletondemo.ts +++ b/src/app/showcase/pages/skeleton/skeletondemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { StyleDoc } from '../../doc/skeleton/styledoc'; -import { CardDoc } from '../../doc/skeleton/carddoc'; -import { DataTableDoc } from '../../doc/skeleton/datatabledoc'; -import { ImportDoc } from '../../doc/skeleton/importdoc'; -import { ListDoc } from '../../doc/skeleton/listdoc'; -import { ShapesDoc } from '../../doc/skeleton/shapesdoc'; -import { AccessibilityDoc } from '../../doc/skeleton/accessibilitydoc'; +import { StyleDoc } from '@doc/skeleton/styledoc'; +import { CardDoc } from '@doc/skeleton/carddoc'; +import { DataTableDoc } from '@doc/skeleton/datatabledoc'; +import { ImportDoc } from '@doc/skeleton/importdoc'; +import { ListDoc } from '@doc/skeleton/listdoc'; +import { ShapesDoc } from '@doc/skeleton/shapesdoc'; +import { AccessibilityDoc } from '@doc/skeleton/accessibilitydoc'; @Component({ templateUrl: './skeletondemo.html', diff --git a/src/app/showcase/pages/slider/sliderdemo.module.ts b/src/app/showcase/pages/slider/sliderdemo.module.ts index 6428d17ae67..707832b6a77 100755 --- a/src/app/showcase/pages/slider/sliderdemo.module.ts +++ b/src/app/showcase/pages/slider/sliderdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SliderDocModule } from '../../doc/slider/sliderdoc.module'; +import { SliderDocModule } from '@doc/slider/sliderdoc.module'; import { SliderDemo } from './sliderdemo'; import { SliderDemoRoutingModule } from './sliderdemo-routing.module'; diff --git a/src/app/showcase/pages/slider/sliderdemo.ts b/src/app/showcase/pages/slider/sliderdemo.ts index b7bc22f8d53..5e936c03072 100755 --- a/src/app/showcase/pages/slider/sliderdemo.ts +++ b/src/app/showcase/pages/slider/sliderdemo.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/slider/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/slider/accessibilitydoc'; -import { BasicDoc } from '../../doc/slider/basicdoc'; -import { ImportDoc } from '../../doc/slider/importdoc'; -import { InputDoc } from '../../doc/slider/inputdoc'; -import { RangeDoc } from '../../doc/slider/rangedoc'; -import { StepDoc } from '../../doc/slider/stepdoc'; -import { StyleDoc } from '../../doc/slider/styledoc'; -import { VerticalDoc } from '../../doc/slider/verticaldoc'; +import { ReactiveFormsDoc } from '@doc/slider/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/slider/accessibilitydoc'; +import { BasicDoc } from '@doc/slider/basicdoc'; +import { ImportDoc } from '@doc/slider/importdoc'; +import { InputDoc } from '@doc/slider/inputdoc'; +import { RangeDoc } from '@doc/slider/rangedoc'; +import { StepDoc } from '@doc/slider/stepdoc'; +import { StyleDoc } from '@doc/slider/styledoc'; +import { VerticalDoc } from '@doc/slider/verticaldoc'; @Component({ templateUrl: './sliderdemo.html', diff --git a/src/app/showcase/pages/speeddial/speeddialdemo.module.ts b/src/app/showcase/pages/speeddial/speeddialdemo.module.ts index 677152cb461..b600a0992e3 100755 --- a/src/app/showcase/pages/speeddial/speeddialdemo.module.ts +++ b/src/app/showcase/pages/speeddial/speeddialdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SpeedDialDocModule } from '../../doc/speeddial/speeddialdoc.module'; +import { SpeedDialDocModule } from '@doc/speeddial/speeddialdoc.module'; import { SpeedDialDemo } from './speeddialdemo'; import { SpeedDialDemoRoutingModule } from './speeddialdemo-routing.module'; diff --git a/src/app/showcase/pages/speeddial/speeddialdemo.ts b/src/app/showcase/pages/speeddial/speeddialdemo.ts index 9143ad489cb..a7d94fee87b 100755 --- a/src/app/showcase/pages/speeddial/speeddialdemo.ts +++ b/src/app/showcase/pages/speeddial/speeddialdemo.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/speeddial/accessibilitydoc'; -import { CircleDoc } from '../../doc/speeddial/circledoc'; -import { CustomDoc } from '../../doc/speeddial/customdoc'; -import { ImportDoc } from '../../doc/speeddial/importdoc'; -import { LinearDoc } from '../../doc/speeddial/lineardoc'; -import { MaskDoc } from '../../doc/speeddial/maskdoc'; -import { QuarterCircleDoc } from '../../doc/speeddial/quartercircledoc'; -import { SemiCircleDoc } from '../../doc/speeddial/semicircledoc'; -import { StyleDoc } from '../../doc/speeddial/styledoc'; -import { TooltipDoc } from '../../doc/speeddial/tooltipdoc'; +import { AccessibilityDoc } from '@doc/speeddial/accessibilitydoc'; +import { CircleDoc } from '@doc/speeddial/circledoc'; +import { CustomDoc } from '@doc/speeddial/customdoc'; +import { ImportDoc } from '@doc/speeddial/importdoc'; +import { LinearDoc } from '@doc/speeddial/lineardoc'; +import { MaskDoc } from '@doc/speeddial/maskdoc'; +import { QuarterCircleDoc } from '@doc/speeddial/quartercircledoc'; +import { SemiCircleDoc } from '@doc/speeddial/semicircledoc'; +import { StyleDoc } from '@doc/speeddial/styledoc'; +import { TooltipDoc } from '@doc/speeddial/tooltipdoc'; @Component({ templateUrl: './speeddialdemo.html', diff --git a/src/app/showcase/pages/splitbutton/splitbuttondemo.module.ts b/src/app/showcase/pages/splitbutton/splitbuttondemo.module.ts index f6505ed76f2..78fc9c3d223 100755 --- a/src/app/showcase/pages/splitbutton/splitbuttondemo.module.ts +++ b/src/app/showcase/pages/splitbutton/splitbuttondemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SplitButtonDocModule } from '../../doc/splitbutton/splitbuttondoc.module'; +import { SplitButtonDocModule } from '@doc/splitbutton/splitbuttondoc.module'; import { SplitButtonDemo } from './splitbuttondemo'; import { SplitButtonDemoRoutingModule } from './splitbuttondemo-routing.module'; diff --git a/src/app/showcase/pages/splitbutton/splitbuttondemo.ts b/src/app/showcase/pages/splitbutton/splitbuttondemo.ts index 5e5330a3a94..92ea58ef84b 100755 --- a/src/app/showcase/pages/splitbutton/splitbuttondemo.ts +++ b/src/app/showcase/pages/splitbutton/splitbuttondemo.ts @@ -1,17 +1,17 @@ import { Component } from '@angular/core'; -import { TextDoc } from '../../doc/splitbutton/textdoc'; -import { BasicDoc } from '../../doc/splitbutton/basicdoc'; -import { ImportDoc } from '../../doc/splitbutton/importdoc'; -import { NestedDoc } from '../../doc/splitbutton/nesteddoc'; -import { RaisedDoc } from '../../doc/splitbutton/raiseddoc'; -import { RoundedDoc } from '../../doc/splitbutton/roundeddoc'; -import { SeverityDoc } from '../../doc/splitbutton/severitydoc'; -import { RaisedTextDoc } from '../../doc/splitbutton/raisedtextdoc'; -import { OutlinedDoc } from '../../doc/splitbutton/outlineddoc'; -import { SizesDoc } from '../../doc/splitbutton/sizesdoc'; -import { DisabledDoc } from '../../doc/splitbutton/disableddoc'; -import { StyleDoc } from '../../doc/splitbutton/styledoc'; -import { AccessibilityDoc } from '../../doc/splitbutton/accessibilitydoc'; +import { TextDoc } from '@doc/splitbutton/textdoc'; +import { BasicDoc } from '@doc/splitbutton/basicdoc'; +import { ImportDoc } from '@doc/splitbutton/importdoc'; +import { NestedDoc } from '@doc/splitbutton/nesteddoc'; +import { RaisedDoc } from '@doc/splitbutton/raiseddoc'; +import { RoundedDoc } from '@doc/splitbutton/roundeddoc'; +import { SeverityDoc } from '@doc/splitbutton/severitydoc'; +import { RaisedTextDoc } from '@doc/splitbutton/raisedtextdoc'; +import { OutlinedDoc } from '@doc/splitbutton/outlineddoc'; +import { SizesDoc } from '@doc/splitbutton/sizesdoc'; +import { DisabledDoc } from '@doc/splitbutton/disableddoc'; +import { StyleDoc } from '@doc/splitbutton/styledoc'; +import { AccessibilityDoc } from '@doc/splitbutton/accessibilitydoc'; @Component({ templateUrl: './splitbuttondemo.html' diff --git a/src/app/showcase/pages/splitter/splitterdemo.module.ts b/src/app/showcase/pages/splitter/splitterdemo.module.ts index 04e567158f1..e8cc2b3a337 100644 --- a/src/app/showcase/pages/splitter/splitterdemo.module.ts +++ b/src/app/showcase/pages/splitter/splitterdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SplitterDocModule } from '../../doc/splitter/splitterdoc.module'; +import { SplitterDocModule } from '@doc/splitter/splitterdoc.module'; import { SplitterDemo } from './splitterdemo'; import { SplitterDemoRoutingModule } from './splitterdemo-routing.module'; diff --git a/src/app/showcase/pages/splitter/splitterdemo.ts b/src/app/showcase/pages/splitter/splitterdemo.ts index c4a81e30d2b..6636d0783f1 100644 --- a/src/app/showcase/pages/splitter/splitterdemo.ts +++ b/src/app/showcase/pages/splitter/splitterdemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -import { SizeDoc } from '../../doc/splitter/sizedoc'; -import { HorizontalDoc } from '../../doc/splitter/horizontaldoc'; -import { ImportDoc } from '../../doc/splitter/importdoc'; -import { VerticalDoc } from '../../doc/splitter/verticaldoc'; -import { NestedDoc } from '../../doc/splitter/nesteddoc'; -import { StyleDoc } from '../../doc/splitter/styledoc'; -import { AccessibilityDoc } from '../../doc/splitter/accessibilitydoc'; +import { SizeDoc } from '@doc/splitter/sizedoc'; +import { HorizontalDoc } from '@doc/splitter/horizontaldoc'; +import { ImportDoc } from '@doc/splitter/importdoc'; +import { VerticalDoc } from '@doc/splitter/verticaldoc'; +import { NestedDoc } from '@doc/splitter/nesteddoc'; +import { StyleDoc } from '@doc/splitter/styledoc'; +import { AccessibilityDoc } from '@doc/splitter/accessibilitydoc'; @Component({ templateUrl: './splitterdemo.html' diff --git a/src/app/showcase/pages/stepper/stepperdemo.module.ts b/src/app/showcase/pages/stepper/stepperdemo.module.ts index 18cc44388da..47e89c3fbaf 100755 --- a/src/app/showcase/pages/stepper/stepperdemo.module.ts +++ b/src/app/showcase/pages/stepper/stepperdemo.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { StepperDemo } from './stepperdemo'; import { StepperDemoRoutingModule } from './stepperdemo-routing.module'; -import { StepperDocModule } from '../../doc/stepper/stepperdoc.module'; +import { StepperDocModule } from '@doc/stepper/stepperdoc.module'; @NgModule({ imports: [CommonModule, StepperDemoRoutingModule, StepperDocModule], declarations: [StepperDemo] diff --git a/src/app/showcase/pages/stepper/stepperdemo.ts b/src/app/showcase/pages/stepper/stepperdemo.ts index fa9a9f5f711..68546880c3e 100755 --- a/src/app/showcase/pages/stepper/stepperdemo.ts +++ b/src/app/showcase/pages/stepper/stepperdemo.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/stepper/importdoc'; -import { BasicDoc } from '../../doc/stepper/basicdoc'; -import { VerticalDoc } from '../../doc/stepper/verticaldoc'; -import { LinearDoc } from '../../doc/stepper/lineardoc'; -import { TemplateDoc } from '../../doc/stepper/templatedoc'; -import { AccessibilityDoc } from '../../doc/stepper/accessibilitydoc'; +import { ImportDoc } from '@doc/stepper/importdoc'; +import { BasicDoc } from '@doc/stepper/basicdoc'; +import { VerticalDoc } from '@doc/stepper/verticaldoc'; +import { LinearDoc } from '@doc/stepper/lineardoc'; +import { TemplateDoc } from '@doc/stepper/templatedoc'; +import { AccessibilityDoc } from '@doc/stepper/accessibilitydoc'; @Component({ templateUrl: './stepperdemo.html' }) diff --git a/src/app/showcase/pages/steps/stepsdemo-routing.module.ts b/src/app/showcase/pages/steps/stepsdemo-routing.module.ts index 16e6c8073fc..57c7f6cfd3c 100755 --- a/src/app/showcase/pages/steps/stepsdemo-routing.module.ts +++ b/src/app/showcase/pages/steps/stepsdemo-routing.module.ts @@ -1,9 +1,9 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { ConfirmationDemo } from '../../doc/steps/confirmationdemo'; -import { PaymentDemo } from '../../doc/steps/paymentdemo'; -import { PersonalDemo } from '../../doc/steps/personaldemo'; -import { SeatDemo } from '../../doc/steps/seatdemo'; +import { ConfirmationDemo } from '@doc/steps/confirmationdemo'; +import { PaymentDemo } from '@doc/steps/paymentdemo'; +import { PersonalDemo } from '@doc/steps/personaldemo'; +import { SeatDemo } from '@doc/steps/seatdemo'; import { StepsDemo } from './stepsdemo'; @NgModule({ diff --git a/src/app/showcase/pages/steps/stepsdemo.module.ts b/src/app/showcase/pages/steps/stepsdemo.module.ts index e00a8f5c84c..b814d518cd3 100755 --- a/src/app/showcase/pages/steps/stepsdemo.module.ts +++ b/src/app/showcase/pages/steps/stepsdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { StepsDocModule } from '../../doc/steps/stepsdoc.module'; +import { StepsDocModule } from '@doc/steps/stepsdoc.module'; import { StepsDemo } from './stepsdemo'; import { StepsDemoRoutingModule } from './stepsdemo-routing.module'; diff --git a/src/app/showcase/pages/steps/stepsdemo.ts b/src/app/showcase/pages/steps/stepsdemo.ts index 741fa6755fe..59f51dac619 100755 --- a/src/app/showcase/pages/steps/stepsdemo.ts +++ b/src/app/showcase/pages/steps/stepsdemo.ts @@ -1,10 +1,11 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/steps/basicdoc'; -import { ImportDoc } from '../../doc/steps/importdoc'; -import { InteractiveDoc } from '../../doc/steps/interactivedoc'; -import { StyleDoc } from '../../doc/steps/styledoc'; -import { RoutingDoc } from '../../doc/steps/routingdoc'; -import { AccessibilityDoc } from '../../doc/steps/accessibilitydoc'; +import { BasicDoc } from '@doc/steps/basicdoc'; +import { ImportDoc } from '@doc/steps/importdoc'; +import { InteractiveDoc } from '@doc/steps/interactivedoc'; +import { StyleDoc } from '@doc/steps/styledoc'; +import { RoutingDoc } from '@doc/steps/routingdoc'; +import { AccessibilityDoc } from '@doc/steps/accessibilitydoc'; +import { ControlledDoc } from '@doc/steps/controlleddoc'; @Component({ templateUrl: './stepsdemo.html', @@ -22,6 +23,11 @@ export class StepsDemo { label: 'Basic', component: BasicDoc }, + { + id: 'controlled', + label: 'Controlled', + component: ControlledDoc + }, { id: 'interactive', label: 'Interactive', diff --git a/src/app/showcase/pages/styleclass/styleclassdemo.module.ts b/src/app/showcase/pages/styleclass/styleclassdemo.module.ts index 4fbaa7d2f64..d416ff74db5 100755 --- a/src/app/showcase/pages/styleclass/styleclassdemo.module.ts +++ b/src/app/showcase/pages/styleclass/styleclassdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { StyleClassDocModule } from '../../doc/styleclass/styleclassdoc.module'; +import { StyleClassDocModule } from '@doc/styleclass/styleclassdoc.module'; import { StyleClassDemo } from './styleclassdemo'; import { StyleClassDemoRoutingModule } from './styleclassdemo-routing.module'; diff --git a/src/app/showcase/pages/styleclass/styleclassdemo.ts b/src/app/showcase/pages/styleclass/styleclassdemo.ts index 8d9378ae577..047597f3b71 100755 --- a/src/app/showcase/pages/styleclass/styleclassdemo.ts +++ b/src/app/showcase/pages/styleclass/styleclassdemo.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/styleclass/importdoc'; -import { AnimationDoc } from '../../doc/styleclass/animationdoc'; -import { ToggleClassDoc } from '../../doc/styleclass/toggleclassdoc'; +import { ImportDoc } from '@doc/styleclass/importdoc'; +import { AnimationDoc } from '@doc/styleclass/animationdoc'; +import { ToggleClassDoc } from '@doc/styleclass/toggleclassdoc'; @Component({ templateUrl: './styleclassdemo.html' diff --git a/src/app/showcase/pages/table/tabledemo.module.ts b/src/app/showcase/pages/table/tabledemo.module.ts index 04ca7996d76..452689a77e3 100755 --- a/src/app/showcase/pages/table/tabledemo.module.ts +++ b/src/app/showcase/pages/table/tabledemo.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { TableDemo } from './tabledemo'; import { TableDemoRoutingModule } from './tabledemo-routing.module'; -import { TableDocModule } from '../../doc/table/tabledoc.module'; +import { TableDocModule } from '@doc/table/tabledoc.module'; @NgModule({ imports: [CommonModule, TableDemoRoutingModule, TableDocModule], diff --git a/src/app/showcase/pages/table/tabledemo.ts b/src/app/showcase/pages/table/tabledemo.ts index 8e8ba61b0aa..d4339e1b8a5 100755 --- a/src/app/showcase/pages/table/tabledemo.ts +++ b/src/app/showcase/pages/table/tabledemo.ts @@ -1,57 +1,56 @@ import { Component } from '@angular/core'; -import { ContextMenuDoc } from '../../doc/table/contextmenudoc'; -import { BasicDoc } from '../../doc/table/basicdoc'; -import { CellEditDoc } from '../../doc/table/celleditdoc'; -import { CheckboxSelectionDoc } from '../../doc/table/checkboxselectiondoc'; -import { ColumnGroupDoc } from '../../doc/table/columngroupdoc'; -import { ColumnResizeExpandModeDoc } from '../../doc/table/columnresizeexpandmodedoc'; -import { ColumnResizeScrollableModeDoc } from '../../doc/table/columnresizescrollablemodedoc'; -import { ColumnSelectionDoc } from '../../doc/table/columnselectiondoc'; -import { ColumnToggleDoc } from '../../doc/table/columntoggledoc'; -import { ControlledSelectionDoc } from '../../doc/table/controlledselectiondoc'; -import { CustomersDoc } from '../../doc/table/customersdoc'; -import { CustomSortDoc } from '../../doc/table/customsortdoc'; -import { DynamicDoc } from '../../doc/table/dynamicdoc'; -import { ExpandableRowGroupDoc } from '../../doc/table/expandablerowgroupdoc'; -import { ExportDoc } from '../../doc/table/exportdoc'; -import { FilterMenuDoc } from '../../doc/table/filtermenudoc'; -import { FilterRowDoc } from '../../doc/table/filterrowdoc'; -import { FlexibleScrollDoc } from '../../doc/table/flexiblescrolldoc'; -import { FrozenColumnsDoc } from '../../doc/table/frozencolumnsdoc'; -import { FrozenRowsDoc } from '../../doc/table/frozenrowsdoc'; -import { GridlinesDoc } from '../../doc/table/gridlinesdoc'; -import { ImportDoc } from '../../doc/table/importdoc'; -import { HorizontalAndVerticalScrollDoc } from '../../doc/table/horizontalandverticaldoc'; -import { LazyLoadDoc } from '../../doc/table/lazyloaddoc'; -import { MultipleSelectionDoc } from '../../doc/table/multipleselectiondoc'; -import { PageOnlySelectionDoc } from '../../doc/table/pageonlyselectiondoc'; -import { PaginatorBasicDoc } from '../../doc/table/paginatorbasicdoc'; -import { PaginatorProgrammaticDoc } from '../../doc/table/paginatorprogrammaticdoc'; -import { ProductsDoc } from '../../doc/table/productsdoc'; -import { RadioButtonSelectionDoc } from '../../doc/table/radiobuttonselectiondoc'; -import { ReorderDoc } from '../../doc/table/reorderdoc'; -import { ResponsiveScrollDoc } from '../../doc/table/responsivescrolldoc'; -import { ResponsiveStackDoc } from '../../doc/table/responsivestackdoc'; -import { RowEditDoc } from '../../doc/table/roweditdoc'; -import { RowExpandDoc } from '../../doc/table/rowexpanddoc'; -import { RowspanGroupingDoc } from '../../doc/table/rowspangroupingdoc'; -import { SingleColumnSortDoc } from '../../doc/table/singlecolumnsortdoc'; -import { MultipleColumnSortDoc } from '../../doc/table/multiplecolumnsortdoc'; -import { SingleSelectionDoc } from '../../doc/table/singleselectiondoc'; -import { SizeDoc } from '../../doc/table/sizedoc'; -import { StatefulDoc } from '../../doc/table/statefuldoc'; -import { StripedDoc } from '../../doc/table/stripeddoc'; -import { StyleDoc } from '../../doc/table/styledoc'; -import { SubheaderGroupingDoc } from '../../doc/table/subheadergroupingdoc'; -import { TemplateDoc } from '../../doc/table/templatedoc'; -import { VerticalScrollDoc } from '../../doc/table/verticalscrolldoc'; -import { VirtualScrollDoc } from '../../doc/table/virtualscrolldoc'; -import { VirtualScrollLazyDoc } from '../../doc/table/virtualscrolllazydoc'; -import { ColumnResizeFitModeDoc } from '../../doc/table/columnresizefitmodedoc'; -import { SelectionEventsDoc } from '../../doc/table/selectioneventsdoc'; -import { StylingDoc } from '../../doc/table/stylingdoc'; -import { AccessibilityDoc } from '../../doc/table/accessibilitydoc'; -import { PaginatorLocaleDoc } from '../../doc/table/paginatorlocaledoc'; +import { ContextMenuDoc } from '@doc/table/contextmenudoc'; +import { BasicDoc } from '@doc/table/basicdoc'; +import { CellEditDoc } from '@doc/table/celleditdoc'; +import { CheckboxSelectionDoc } from '@doc/table/checkboxselectiondoc'; +import { ColumnGroupDoc } from '@doc/table/columngroupdoc'; +import { ColumnResizeExpandModeDoc } from '@doc/table/columnresizeexpandmodedoc'; +import { ColumnResizeScrollableModeDoc } from '@doc/table/columnresizescrollablemodedoc'; +import { ColumnSelectionDoc } from '@doc/table/columnselectiondoc'; +import { ColumnToggleDoc } from '@doc/table/columntoggledoc'; +import { CustomersDoc } from '@doc/table/customersdoc'; +import { DynamicDoc } from '@doc/table/dynamicdoc'; +import { ExpandableRowGroupDoc } from '@doc/table/expandablerowgroupdoc'; +import { ExportDoc } from '@doc/table/exportdoc'; +import { FilterBasicDoc } from '@doc/table/filterbasic'; +import { FlexibleScrollDoc } from '@doc/table/flexiblescrolldoc'; +import { FrozenColumnsDoc } from '@doc/table/frozencolumnsdoc'; +import { FrozenRowsDoc } from '@doc/table/frozenrowsdoc'; +import { GridlinesDoc } from '@doc/table/gridlinesdoc'; +import { ImportDoc } from '@doc/table/importdoc'; +import { HorizontalScrollDoc } from '@doc/table/horizontalscrolldoc'; +import { LazyLoadDoc } from '@doc/table/lazyloaddoc'; +import { MultipleSelectionDoc } from '@doc/table/multipleselectiondoc'; +import { PaginatorBasicDoc } from '@doc/table/paginatorbasicdoc'; +import { PaginatorProgrammaticDoc } from '@doc/table/paginatorprogrammaticdoc'; +import { ProductsDoc } from '@doc/table/productsdoc'; +import { RadioButtonSelectionDoc } from '@doc/table/radiobuttonselectiondoc'; +import { ReorderDoc } from '@doc/table/reorderdoc'; +import { ResponsiveScrollDoc } from '@doc/table/responsivescrolldoc'; +import { ResponsiveStackDoc } from '@doc/table/responsivestackdoc'; +import { RowEditDoc } from '@doc/table/roweditdoc'; +import { RowExpansionDoc } from '@doc/table/rowexpansiondoc'; +import { RowspanGroupingDoc } from '@doc/table/rowspangroupingdoc'; +import { SingleColumnSortDoc } from '@doc/table/singlecolumnsortdoc'; +import { MultipleColumnsSortDoc } from '@doc/table/multiplecolumnssortdoc'; +import { SingleSelectionDoc } from '@doc/table/singleselectiondoc'; +import { SizeDoc } from '@doc/table/sizedoc'; +import { StatefulDoc } from '@doc/table/statefuldoc'; +import { StripedDoc } from '@doc/table/stripeddoc'; +import { StyleDoc } from '@doc/table/styledoc'; +import { SubheaderGroupingDoc } from '@doc/table/subheadergroupingdoc'; +import { TemplateDoc } from '@doc/table/templatedoc'; +import { VerticalScrollDoc } from '@doc/table/verticalscrolldoc'; +import { VirtualScrollDoc } from '@doc/table/virtualscrolldoc'; +import { VirtualScrollLazyDoc } from '@doc/table/virtualscrolllazydoc'; +import { ColumnResizeFitModeDoc } from '@doc/table/columnresizefitmodedoc'; +import { SelectionEventsDoc } from '@doc/table/selectioneventsdoc'; +import { StylingDoc } from '@doc/table/stylingdoc'; +import { AccessibilityDoc } from '@doc/table/accessibilitydoc'; +import { PreSortDoc } from '@doc/table/presortdoc'; +import { FilterSortEditDoc } from '@doc/table/filtersorteditdoc'; +import { RemovableSortDoc } from '@doc/table/removablesortdoc'; +import { FilterAdvancedDoc } from '@doc/table/filteradvanceddoc'; @Component({ templateUrl: './tabledemo.html', @@ -124,11 +123,6 @@ export class TableDemo { label: 'Basic', component: PaginatorBasicDoc }, - { - id: 'paginator-locale', - label: 'Locale', - component: PaginatorLocaleDoc - }, { id: 'paginator-programmatic', label: 'Programmatic', @@ -146,14 +140,19 @@ export class TableDemo { component: SingleColumnSortDoc }, { - id: 'multiple-column-sort', - label: 'Multiple Column', - component: MultipleColumnSortDoc + id: 'multiple-columns-sort', + label: 'Multiple Columns', + component: MultipleColumnsSortDoc + }, + { + id: 'pre-sort', + label: 'Presort', + component: PreSortDoc }, { - id: 'custom-sort', - label: 'Custom Sort', - component: CustomSortDoc + id: 'removable-sort', + label: 'Removable', + component: RemovableSortDoc } ] }, @@ -162,14 +161,14 @@ export class TableDemo { label: 'Filter', children: [ { - id: 'filter-menu', - label: 'Filter Menu', - component: FilterMenuDoc + id: 'filter-basic', + label: 'Basic', + component: FilterBasicDoc }, { - id: 'filter-row', - label: 'Filter Row', - component: FilterRowDoc + id: 'filter-advanced', + label: 'Advanced', + component: FilterAdvancedDoc } ] }, @@ -179,33 +178,23 @@ export class TableDemo { children: [ { id: 'single-selection', - label: 'Single Selection', + label: 'Single', component: SingleSelectionDoc }, { id: 'multiple-selection', - label: 'Multiple Selection', + label: 'Multiple', component: MultipleSelectionDoc }, - { - id: 'checkbox-selection', - label: 'Checkbox Selection', - component: CheckboxSelectionDoc - }, { id: 'radio-button-selection', - label: 'Radio Button Selection', + label: 'RadioButton', component: RadioButtonSelectionDoc }, { - id: 'controlled-selection', - label: 'Controlled Selection', - component: ControlledSelectionDoc - }, - { - id: 'page-only-selection', - label: 'Page Only Selection', - component: PageOnlySelectionDoc + id: 'checkbox-selection', + label: 'Checkbox', + component: CheckboxSelectionDoc }, { id: 'selection-events', @@ -220,23 +209,28 @@ export class TableDemo { component: ColumnSelectionDoc }, { - id: 'row-expand', - label: 'Row Expand', - component: RowExpandDoc + id: 'row-expansion', + label: 'Row Expansion', + component: RowExpansionDoc }, { id: 'Edit', label: 'Edit', children: [ + { + id: 'cell-edit', + label: 'Cell', + component: CellEditDoc + }, { id: 'row-edit', - label: 'Row Edit', + label: 'Row', component: RowEditDoc }, { - id: 'cell-edit', - label: 'Cell Edit', - component: CellEditDoc + id: 'filter-sort-edit', + label: 'Filter & Sort Cell Edit', + component: FilterSortEditDoc } ] }, @@ -251,19 +245,19 @@ export class TableDemo { children: [ { id: 'vertical-scroll', - label: 'Vertical Scroll', + label: 'Vertical', component: VerticalScrollDoc }, - { - id: 'horizontal-and-vertical-scroll', - label: 'Horizontal and Vertical Scroll', - component: HorizontalAndVerticalScrollDoc - }, { id: 'flex-scroll', - label: 'Flex Scroll', + label: 'Flexible', component: FlexibleScrollDoc }, + { + id: 'horizontal-scroll', + label: 'Horizontal', + component: HorizontalScrollDoc + }, { id: 'frozen-rows', label: 'Frozen Rows', diff --git a/src/app/showcase/pages/tabmenu/tabmenudemo.module.ts b/src/app/showcase/pages/tabmenu/tabmenudemo.module.ts index 982212a96be..c8266ba0b43 100755 --- a/src/app/showcase/pages/tabmenu/tabmenudemo.module.ts +++ b/src/app/showcase/pages/tabmenu/tabmenudemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TabMenuDocModule } from '../../doc/tabmenu/tabmenudoc.module'; +import { TabMenuDocModule } from '@doc/tabmenu/tabmenudoc.module'; import { TabMenuDemo } from './tabmenudemo'; import { TabMenuDemoRoutingModule } from './tabmenudemo-routing.module'; diff --git a/src/app/showcase/pages/tabmenu/tabmenudemo.ts b/src/app/showcase/pages/tabmenu/tabmenudemo.ts index 2457fb33e56..32918522f9a 100755 --- a/src/app/showcase/pages/tabmenu/tabmenudemo.ts +++ b/src/app/showcase/pages/tabmenu/tabmenudemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { ControlledDoc } from '../../doc/tabmenu/controlleddoc'; -import { ActiveDoc } from '../../doc/tabmenu/activedoc'; -import { BasicDoc } from '../../doc/tabmenu/basicdoc'; -import { ImportDoc } from '../../doc/tabmenu/importdoc'; -import { StyleDoc } from '../../doc/tabmenu/styledoc'; -import { ScrollableDoc } from '../../doc/tabmenu/scrollabledoc'; -import { TemplateDoc } from '../../doc/tabmenu/templatedoc'; -import { AccessibilityDoc } from '../../doc/tabmenu/accessibilitydoc'; +import { ControlledDoc } from '@doc/tabmenu/controlleddoc'; +import { BasicDoc } from '@doc/tabmenu/basicdoc'; +import { ImportDoc } from '@doc/tabmenu/importdoc'; +import { StyleDoc } from '@doc/tabmenu/styledoc'; +import { TemplateDoc } from '@doc/tabmenu/templatedoc'; +import { AccessibilityDoc } from '@doc/tabmenu/accessibilitydoc'; +import { CommandDoc } from '@doc/tabmenu/commanddoc'; +import { RouterDoc } from '@doc/tabmenu/routerdoc'; @Component({ templateUrl: './tabmenudemo.html' @@ -23,26 +23,26 @@ export class TabMenuDemo { label: 'Basic', component: BasicDoc }, - { - id: 'active', - label: 'Active Item', - component: ActiveDoc - }, { id: 'controlled', label: 'Controlled', component: ControlledDoc }, - { - id: 'scrollable', - label: 'Scrollable', - component: ScrollableDoc - }, { 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/tabview/tabviewdemo.module.ts b/src/app/showcase/pages/tabview/tabviewdemo.module.ts index 340fa625616..fcbc490ca4e 100755 --- a/src/app/showcase/pages/tabview/tabviewdemo.module.ts +++ b/src/app/showcase/pages/tabview/tabviewdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TabViewDocModule } from '../../doc/tabview/tabviewdoc.module'; +import { TabViewDocModule } from '@doc/tabview/tabviewdoc.module'; import { TabViewDemo } from './tabviewdemo'; import { TabViewDemoRoutingModule } from './tabviewdemo-routing.module'; diff --git a/src/app/showcase/pages/tabview/tabviewdemo.ts b/src/app/showcase/pages/tabview/tabviewdemo.ts index bb98a34679a..2c5f39b517b 100755 --- a/src/app/showcase/pages/tabview/tabviewdemo.ts +++ b/src/app/showcase/pages/tabview/tabviewdemo.ts @@ -1,15 +1,15 @@ 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'; +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'; @Component({ templateUrl: './tabviewdemo.html', diff --git a/src/app/showcase/pages/tag/tagdemo.module.ts b/src/app/showcase/pages/tag/tagdemo.module.ts index a9231fa70d2..26fb2d5eed6 100644 --- a/src/app/showcase/pages/tag/tagdemo.module.ts +++ b/src/app/showcase/pages/tag/tagdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TagDocModule } from '../../doc/tag/tagdoc.module'; +import { TagDocModule } from '@doc/tag/tagdoc.module'; import { TagDemo } from './tagdemo'; import { TagDemoRoutingModule } from './tagdemo-routing.module'; diff --git a/src/app/showcase/pages/tag/tagdemo.ts b/src/app/showcase/pages/tag/tagdemo.ts index 7e2f54e49d6..76feaa08b64 100644 --- a/src/app/showcase/pages/tag/tagdemo.ts +++ b/src/app/showcase/pages/tag/tagdemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { IconDoc } from '../../doc/tag/icondoc'; -import { ImportDoc } from '../../doc/tag/importdoc'; -import { SeverityDoc } from '../../doc/tag/severitydoc'; -import { BasicDoc } from '../../doc/tag/basicdoc'; -import { StyleDoc } from '../../doc/tag/styledoc'; -import { PillDoc } from '../../doc/tag/pilldoc'; -import { TemplateDoc } from '../../doc/tag/templatedoc'; -import { AccessibilityDoc } from '../../doc/tag/accessibilitydoc'; +import { IconDoc } from '@doc/tag/icondoc'; +import { ImportDoc } from '@doc/tag/importdoc'; +import { SeverityDoc } from '@doc/tag/severitydoc'; +import { BasicDoc } from '@doc/tag/basicdoc'; +import { StyleDoc } from '@doc/tag/styledoc'; +import { PillDoc } from '@doc/tag/pilldoc'; +import { TemplateDoc } from '@doc/tag/templatedoc'; +import { AccessibilityDoc } from '@doc/tag/accessibilitydoc'; @Component({ templateUrl: './tagdemo.html' diff --git a/src/app/showcase/pages/terminal/terminaldemo.module.ts b/src/app/showcase/pages/terminal/terminaldemo.module.ts index c07ec67c45b..268d827342f 100755 --- a/src/app/showcase/pages/terminal/terminaldemo.module.ts +++ b/src/app/showcase/pages/terminal/terminaldemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TerminalDocModule } from '../../doc/terminal/terminaldoc.module'; +import { TerminalDocModule } from '@doc/terminal/terminaldoc.module'; import { TerminalDemo } from './terminaldemo'; import { TerminalDemoRoutingModule } from './terminaldemo-routing.module'; diff --git a/src/app/showcase/pages/terminal/terminaldemo.ts b/src/app/showcase/pages/terminal/terminaldemo.ts index 0ea6ba72a69..b67eb13d7ee 100755 --- a/src/app/showcase/pages/terminal/terminaldemo.ts +++ b/src/app/showcase/pages/terminal/terminaldemo.ts @@ -1,8 +1,8 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/terminal/basicdoc'; -import { StyleDoc } from '../../doc/terminal/styledoc'; -import { ImportDoc } from '../../doc/terminal/importdoc'; -import { AccessibilityDoc } from '../../doc/terminal/accessibilitydoc'; +import { BasicDoc } from '@doc/terminal/basicdoc'; +import { StyleDoc } from '@doc/terminal/styledoc'; +import { ImportDoc } from '@doc/terminal/importdoc'; +import { AccessibilityDoc } from '@doc/terminal/accessibilitydoc'; @Component({ templateUrl: './terminaldemo.html' diff --git a/src/app/showcase/pages/theming/theming.component.ts b/src/app/showcase/pages/theming/theming.component.ts index e143da9aec4..75a2f836b74 100755 --- a/src/app/showcase/pages/theming/theming.component.ts +++ b/src/app/showcase/pages/theming/theming.component.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; -import { ArchitectureDoc } from '../../doc/theming/architecturedoc'; -import { BuiltInThemesDoc } from '../../doc/theming/builtinthemesdoc'; -import { CSSVariablesDoc } from '../../doc/theming/cssvariablesdoc'; -import { CustomThemeDoc } from '../../doc/theming/customthemedoc'; -import { PrimeFlexDoc } from '../../doc/theming/primeflexdoc'; -import { ScalingDoc } from '../../doc/theming/scalingdoc'; -import { ScopedCSSDoc } from '../../doc/theming/scopedcssdoc'; -import { SwitchThemesDoc } from '../../doc/theming/switchthemesdoc'; -import { UtilsDoc } from '../../doc/theming/utilsdoc'; +import { ArchitectureDoc } from '@doc/theming/architecturedoc'; +import { BuiltInThemesDoc } from '@doc/theming/builtinthemesdoc'; +import { CSSVariablesDoc } from '@doc/theming/cssvariablesdoc'; +import { CustomThemeDoc } from '@doc/theming/customthemedoc'; +import { PrimeFlexDoc } from '@doc/theming/primeflexdoc'; +import { ScalingDoc } from '@doc/theming/scalingdoc'; +import { ScopedCSSDoc } from '@doc/theming/scopedcssdoc'; +import { SwitchThemesDoc } from '@doc/theming/switchthemesdoc'; +import { UtilsDoc } from '@doc/theming/utilsdoc'; @Component({ templateUrl: './theming.component.html', diff --git a/src/app/showcase/pages/theming/theming.module.ts b/src/app/showcase/pages/theming/theming.module.ts index 47a18671385..f10fbcbc544 100755 --- a/src/app/showcase/pages/theming/theming.module.ts +++ b/src/app/showcase/pages/theming/theming.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ThemingDocModule } from '../../doc/theming/themingdoc.module'; +import { ThemingDocModule } from '@doc/theming/themingdoc.module'; import { ThemingRoutingModule } from './theming-routing.module'; import { ThemingComponent } from './theming.component'; diff --git a/src/app/showcase/pages/tieredmenu/tieredmenudemo.module.ts b/src/app/showcase/pages/tieredmenu/tieredmenudemo.module.ts index b1fefeb9271..87cdfdbcbc2 100755 --- a/src/app/showcase/pages/tieredmenu/tieredmenudemo.module.ts +++ b/src/app/showcase/pages/tieredmenu/tieredmenudemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TieredMenuDocModule } from '../../doc/tieredmenu/tieredmenudoc.module'; +import { TieredMenuDocModule } from '@doc/tieredmenu/tieredmenudoc.module'; import { TieredMenuDemo } from './tieredmenudemo'; import { TieredMenuDemoRoutingModule } from './tieredmenudemo-routing.module'; diff --git a/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts b/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts index 761e54f9a7e..2bf5837cf82 100755 --- a/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts +++ b/src/app/showcase/pages/tieredmenu/tieredmenudemo.ts @@ -1,12 +1,12 @@ 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'; +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'; @Component({ templateUrl: './tieredmenudemo.html' diff --git a/src/app/showcase/pages/timeline/timelinedemo.module.ts b/src/app/showcase/pages/timeline/timelinedemo.module.ts index 3a5aca5eb4f..8203b32b299 100755 --- a/src/app/showcase/pages/timeline/timelinedemo.module.ts +++ b/src/app/showcase/pages/timeline/timelinedemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TimelineDocModule } from '../../doc/timeline/timelinedoc.module'; +import { TimelineDocModule } from '@doc/timeline/timelinedoc.module'; import { TimelineDemo } from './timelinedemo'; import { TimelineDemoRoutingModule } from './timelinedemo-routing.module'; diff --git a/src/app/showcase/pages/timeline/timelinedemo.ts b/src/app/showcase/pages/timeline/timelinedemo.ts index 23e9dbe453f..f503c923406 100755 --- a/src/app/showcase/pages/timeline/timelinedemo.ts +++ b/src/app/showcase/pages/timeline/timelinedemo.ts @@ -1,12 +1,12 @@ import { Component } from '@angular/core'; -import { TemplateDoc } from '../../doc/timeline/templatedoc'; -import { AlignmentDoc } from '../../doc/timeline/alignmentdoc'; -import { BasicDoc } from '../../doc/timeline/basicdoc'; -import { ImportDoc } from '../../doc/timeline/importdoc'; -import { OppositeDoc } from '../../doc/timeline/oppositedoc'; -import { HorizontalDoc } from '../../doc/timeline/horizontaldoc'; -import { StyleDoc } from '../../doc/timeline/styledoc'; -import { AccessibilityDoc } from '../../doc/timeline/accessibilitydoc'; +import { TemplateDoc } from '@doc/timeline/templatedoc'; +import { AlignmentDoc } from '@doc/timeline/alignmentdoc'; +import { BasicDoc } from '@doc/timeline/basicdoc'; +import { ImportDoc } from '@doc/timeline/importdoc'; +import { OppositeDoc } from '@doc/timeline/oppositedoc'; +import { HorizontalDoc } from '@doc/timeline/horizontaldoc'; +import { StyleDoc } from '@doc/timeline/styledoc'; +import { AccessibilityDoc } from '@doc/timeline/accessibilitydoc'; @Component({ templateUrl: './timelinedemo.html' diff --git a/src/app/showcase/pages/toast/toastdemo.module.ts b/src/app/showcase/pages/toast/toastdemo.module.ts index 49730f0c0ae..4aff917cee2 100755 --- a/src/app/showcase/pages/toast/toastdemo.module.ts +++ b/src/app/showcase/pages/toast/toastdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ToastDocModule } from '../../doc/toast/toastdoc.module'; +import { ToastDocModule } from '@doc/toast/toastdoc.module'; import { ToastDemo } from './toastdemo'; import { ToastDemoRoutingModule } from './toastdemo-routing.module'; diff --git a/src/app/showcase/pages/toast/toastdemo.ts b/src/app/showcase/pages/toast/toastdemo.ts index 2a5ddda7fbd..5bef5b5611d 100755 --- a/src/app/showcase/pages/toast/toastdemo.ts +++ b/src/app/showcase/pages/toast/toastdemo.ts @@ -1,19 +1,19 @@ import { Component } from '@angular/core'; -import { AccessibilityDoc } from '../../doc/toast/accessibilitydoc'; -import { AnimationDoc } from '../../doc/toast/animationdoc'; -import { BasicDoc } from '../../doc/toast/basicdoc'; -import { ClearDoc } from '../../doc/toast/cleardoc'; -import { ImportDoc } from '../../doc/toast/importdoc'; -import { LifeDoc } from '../../doc/toast/lifedoc'; -import { MultipleDoc } from '../../doc/toast/multipledoc'; -import { PositionDoc } from '../../doc/toast/positiondoc'; -import { ResponsiveDoc } from '../../doc/toast/responsivedoc'; -import { SeverityDoc } from '../../doc/toast/severitydoc'; -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'; +import { AccessibilityDoc } from '@doc/toast/accessibilitydoc'; +import { AnimationDoc } from '@doc/toast/animationdoc'; +import { BasicDoc } from '@doc/toast/basicdoc'; +import { ClearDoc } from '@doc/toast/cleardoc'; +import { ImportDoc } from '@doc/toast/importdoc'; +import { LifeDoc } from '@doc/toast/lifedoc'; +import { MultipleDoc } from '@doc/toast/multipledoc'; +import { PositionDoc } from '@doc/toast/positiondoc'; +import { ResponsiveDoc } from '@doc/toast/responsivedoc'; +import { SeverityDoc } from '@doc/toast/severitydoc'; +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' diff --git a/src/app/showcase/pages/togglebutton/togglebuttondemo.module.ts b/src/app/showcase/pages/togglebutton/togglebuttondemo.module.ts index 74da5d29683..09707c0ed47 100755 --- a/src/app/showcase/pages/togglebutton/togglebuttondemo.module.ts +++ b/src/app/showcase/pages/togglebutton/togglebuttondemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ToggleButtonDocModule } from '../../doc/togglebutton/togglebuttondoc.module'; +import { ToggleButtonDocModule } from '@doc/togglebutton/togglebuttondoc.module'; import { ToggleButtonDemo } from './togglebuttondemo'; import { ToggleButtonDemoRoutingModule } from './togglebuttondemo-routing.module'; diff --git a/src/app/showcase/pages/togglebutton/togglebuttondemo.ts b/src/app/showcase/pages/togglebutton/togglebuttondemo.ts index 3bb22095a5b..c39be1fa4d4 100755 --- a/src/app/showcase/pages/togglebutton/togglebuttondemo.ts +++ b/src/app/showcase/pages/togglebutton/togglebuttondemo.ts @@ -1,11 +1,11 @@ import { Component } from '@angular/core'; -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'; +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'; @Component({ templateUrl: './togglebuttondemo.html' diff --git a/src/app/showcase/pages/toolbar/toolbardemo.module.ts b/src/app/showcase/pages/toolbar/toolbardemo.module.ts index d20d210474c..90ca22c0626 100755 --- a/src/app/showcase/pages/toolbar/toolbardemo.module.ts +++ b/src/app/showcase/pages/toolbar/toolbardemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { ToolbarDocModule } from '../../doc/toolbar/toolbardoc.module'; +import { ToolbarDocModule } from '@doc/toolbar/toolbardoc.module'; import { ToolbarDemo } from './toolbardemo'; import { ToolbarDemoRoutingModule } from './toolbardemo-routing.module'; diff --git a/src/app/showcase/pages/toolbar/toolbardemo.ts b/src/app/showcase/pages/toolbar/toolbardemo.ts index 1fd22ed9c93..db18e9609f4 100755 --- a/src/app/showcase/pages/toolbar/toolbardemo.ts +++ b/src/app/showcase/pages/toolbar/toolbardemo.ts @@ -1,9 +1,9 @@ import { Component } from '@angular/core'; -import { StyleDoc } from '../../doc/toolbar/styledoc'; -import { ImportDoc } from '../../doc/toolbar/importdoc'; -import { BasicDoc } from '../../doc/toolbar/basicdoc'; -import { TemplateDoc } from '../../doc/toolbar/templatedoc'; -import { AccessibilityDoc } from '../../doc/toolbar/accessibilitydoc'; +import { StyleDoc } from '@doc/toolbar/styledoc'; +import { ImportDoc } from '@doc/toolbar/importdoc'; +import { BasicDoc } from '@doc/toolbar/basicdoc'; +import { TemplateDoc } from '@doc/toolbar/templatedoc'; +import { AccessibilityDoc } from '@doc/toolbar/accessibilitydoc'; @Component({ templateUrl: './toolbardemo.html' diff --git a/src/app/showcase/pages/tooltip/tooltipdemo.module.ts b/src/app/showcase/pages/tooltip/tooltipdemo.module.ts index 91c45754f56..912cc5c4c06 100755 --- a/src/app/showcase/pages/tooltip/tooltipdemo.module.ts +++ b/src/app/showcase/pages/tooltip/tooltipdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TooltipDocModule } from '../../doc/tooltip/tooltipdoc.module'; +import { TooltipDocModule } from '@doc/tooltip/tooltipdoc.module'; import { TooltipDemo } from './tooltipdemo'; import { TooltipDemoRoutingModule } from './tooltipdemo-routing.module'; diff --git a/src/app/showcase/pages/tooltip/tooltipdemo.ts b/src/app/showcase/pages/tooltip/tooltipdemo.ts index 38115ce4c83..0aa9c50722c 100755 --- a/src/app/showcase/pages/tooltip/tooltipdemo.ts +++ b/src/app/showcase/pages/tooltip/tooltipdemo.ts @@ -1,14 +1,14 @@ import { Component } from '@angular/core'; -import { BasicDoc } from '../../doc/tooltip/basicdoc'; -import { ImportDoc } from '../../doc/tooltip/importdoc'; -import { StyleDoc } from '../../doc/tooltip/styledoc'; -import { PositionDoc } from '../../doc/tooltip/positiondoc'; -import { EventDoc } from '../../doc/tooltip/eventdoc'; -import { AutoHideDoc } from '../../doc/tooltip/autohidedoc'; -import { DelayDoc } from '../../doc/tooltip/delaydoc'; -import { OptionsDoc } from '../../doc/tooltip/optionsdoc'; -import { AccessibilityDoc } from '../../doc/tooltip/accessibilitydoc'; -import { TemplateDoc } from '../../doc/tooltip/templatedoc'; +import { BasicDoc } from '@doc/tooltip/basicdoc'; +import { ImportDoc } from '@doc/tooltip/importdoc'; +import { StyleDoc } from '@doc/tooltip/styledoc'; +import { PositionDoc } from '@doc/tooltip/positiondoc'; +import { EventDoc } from '@doc/tooltip/eventdoc'; +import { AutoHideDoc } from '@doc/tooltip/autohidedoc'; +import { DelayDoc } from '@doc/tooltip/delaydoc'; +import { OptionsDoc } from '@doc/tooltip/optionsdoc'; +import { AccessibilityDoc } from '@doc/tooltip/accessibilitydoc'; +import { CustomDoc } from '@doc/tooltip/customdoc'; @Component({ templateUrl: './tooltipdemo.html' @@ -20,16 +20,6 @@ export class TooltipDemo { label: 'Import', component: ImportDoc }, - { - id: 'basic', - label: 'Basic', - component: BasicDoc - }, - { - id: 'template', - label: 'Template', - component: TemplateDoc - }, { id: 'position', label: 'Position', @@ -37,7 +27,7 @@ export class TooltipDemo { }, { id: 'event', - label: 'Events', + label: 'Event', component: EventDoc }, { @@ -50,6 +40,11 @@ export class TooltipDemo { label: 'Delay', component: DelayDoc }, + { + id: 'custom', + label: 'Custom', + component: CustomDoc + }, { id: 'options', label: 'Tooltip Options', diff --git a/src/app/showcase/pages/tree/treedemo.module.ts b/src/app/showcase/pages/tree/treedemo.module.ts index 6f86d38be8f..167ccc1fe22 100755 --- a/src/app/showcase/pages/tree/treedemo.module.ts +++ b/src/app/showcase/pages/tree/treedemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TreeDocModule } from '../../doc/tree/treedoc.module'; +import { TreeDocModule } from '@doc/tree/treedoc.module'; import { TreeDemo } from './treedemo'; import { TreeDemoRoutingModule } from './treedemo-routing.module'; diff --git a/src/app/showcase/pages/tree/treedemo.ts b/src/app/showcase/pages/tree/treedemo.ts index e2db2f19d7e..0c6d75ebec5 100644 --- a/src/app/showcase/pages/tree/treedemo.ts +++ b/src/app/showcase/pages/tree/treedemo.ts @@ -1,20 +1,20 @@ import { Component, OnInit } from '@angular/core'; -import { ImportDoc } from '../../doc/tree/importdoc'; -import { BasicDoc } from '../../doc/tree/basicdoc'; -import { ControlledDoc } from '../../doc/tree/controlleddoc'; -import { SingleDoc } from '../../doc/tree/singledoc'; -import { MultipleDoc } from '../../doc/tree/multipledoc'; -import { CheckboxDoc } from '../../doc/tree/checkboxdoc'; -import { EventDoc } from '../../doc/tree/eventdoc'; -import { LazyDoc } from '../../doc/tree/lazydoc'; -import { TemplateDoc } from '../../doc/tree/templatedoc'; -import { DragDropDoc } from '../../doc/tree/dragdropdoc'; -import { ContextMenuDoc } from '../../doc/tree/contextmenudoc'; -import { FilterDoc } from '../../doc/tree/filterdoc'; -import { StyleDoc } from '../../doc/tree/styledoc'; -import { AccessibilityDoc } from '../../doc/tree/accessibilitydoc'; -import { VirtualScrollDoc } from '../../doc/tree/virtualscrolldoc'; -import { LazyVirtualScrollDoc } from '../../doc/tree/virtualscrolllazydoc'; +import { ImportDoc } from '@doc/tree/importdoc'; +import { BasicDoc } from '@doc/tree/basicdoc'; +import { ControlledDoc } from '@doc/tree/controlleddoc'; +import { SingleDoc } from '@doc/tree/singledoc'; +import { MultipleDoc } from '@doc/tree/multipledoc'; +import { CheckboxDoc } from '@doc/tree/checkboxdoc'; +import { EventDoc } from '@doc/tree/eventdoc'; +import { LazyDoc } from '@doc/tree/lazydoc'; +import { TemplateDoc } from '@doc/tree/templatedoc'; +import { DragDropDoc } from '@doc/tree/dragdropdoc'; +import { ContextMenuDoc } from '@doc/tree/contextmenudoc'; +import { FilterDoc } from '@doc/tree/filterdoc'; +import { StyleDoc } from '@doc/tree/styledoc'; +import { AccessibilityDoc } from '@doc/tree/accessibilitydoc'; +import { VirtualScrollDoc } from '@doc/tree/virtualscrolldoc'; +import { LazyVirtualScrollDoc } from '@doc/tree/virtualscrolllazydoc'; @Component({ templateUrl: './treedemo.html' diff --git a/src/app/showcase/pages/treeselect/treeselectdemo.module.ts b/src/app/showcase/pages/treeselect/treeselectdemo.module.ts index e86d9624c4e..06412ca4441 100644 --- a/src/app/showcase/pages/treeselect/treeselectdemo.module.ts +++ b/src/app/showcase/pages/treeselect/treeselectdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TreeSelectDocModule } from '../../doc/treeselect/treeselectdoc.module'; +import { TreeSelectDocModule } from '@doc/treeselect/treeselectdoc.module'; import { TreeSelectDemo } from './treeselectdemo'; import { TreeSelectDemoRoutingModule } from './treeselectdemo-routing.module'; diff --git a/src/app/showcase/pages/treeselect/treeselectdemo.ts b/src/app/showcase/pages/treeselect/treeselectdemo.ts index ce3d7a9ede4..3264c971760 100644 --- a/src/app/showcase/pages/treeselect/treeselectdemo.ts +++ b/src/app/showcase/pages/treeselect/treeselectdemo.ts @@ -1,16 +1,17 @@ import { Component } from '@angular/core'; -import { ReactiveFormsDoc } from '../../doc/treeselect/reactiveformsdoc'; -import { AccessibilityDoc } from '../../doc/treeselect/accessibilitydoc'; -import { BasicDoc } from '../../doc/treeselect/basicdoc'; -import { CheckboxDoc } from '../../doc/treeselect/checkboxdoc'; -import { DisabledDoc } from '../../doc/treeselect/disableddoc'; -import { FilterDoc } from '../../doc/treeselect/filterdoc'; -import { FloatLabelDoc } from '../../doc/treeselect/floatlabeldoc'; -import { ImportDoc } from '../../doc/treeselect/importdoc'; -import { InvalidDoc } from '../../doc/treeselect/invaliddoc'; -import { MultipleDoc } from '../../doc/treeselect/multipledoc'; -import { StyleDoc } from '../../doc/treeselect/styledoc'; -import { VirtualScrollDoc } from '../../doc/treeselect/virtualscrolldoc'; +import { ReactiveFormsDoc } from '@doc/treeselect/reactiveformsdoc'; +import { AccessibilityDoc } from '@doc/treeselect/accessibilitydoc'; +import { BasicDoc } from '@doc/treeselect/basicdoc'; +import { CheckboxDoc } from '@doc/treeselect/checkboxdoc'; +import { DisabledDoc } from '@doc/treeselect/disableddoc'; +import { FilterDoc } from '@doc/treeselect/filterdoc'; +import { FloatLabelDoc } from '@doc/treeselect/floatlabeldoc'; +import { ImportDoc } from '@doc/treeselect/importdoc'; +import { InvalidDoc } from '@doc/treeselect/invaliddoc'; +import { MultipleDoc } from '@doc/treeselect/multipledoc'; +import { StyleDoc } from '@doc/treeselect/styledoc'; +import { VirtualScrollDoc } from '@doc/treeselect/virtualscrolldoc'; +import { FilledDoc } from '@doc/treeselect/filleddoc'; @Component({ templateUrl: './treeselectdemo.html' @@ -57,6 +58,11 @@ export class TreeSelectDemo { label: 'Float Label', component: FloatLabelDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/treetable/treetabledemo.module.ts b/src/app/showcase/pages/treetable/treetabledemo.module.ts index 2365cabf8a2..f79fa79a3d4 100755 --- a/src/app/showcase/pages/treetable/treetabledemo.module.ts +++ b/src/app/showcase/pages/treetable/treetabledemo.module.ts @@ -1,7 +1,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { SortSingleColumnDoc } from '../../doc/treetable/sortsinglecolumndoc'; -import { TreeTableDocModule } from '../../doc/treetable/treetabledoc.module'; +import { SortSingleColumnDoc } from '@doc/treetable/sortsinglecolumndoc'; +import { TreeTableDocModule } from '@doc/treetable/treetabledoc.module'; import { TreeTableDemo } from './treetabledemo'; import { TreeTableDemoRoutingModule } from './treetabledemo-routing.module'; diff --git a/src/app/showcase/pages/treetable/treetabledemo.ts b/src/app/showcase/pages/treetable/treetabledemo.ts index 90315121b83..580a06b30e2 100755 --- a/src/app/showcase/pages/treetable/treetabledemo.ts +++ b/src/app/showcase/pages/treetable/treetabledemo.ts @@ -1,36 +1,38 @@ import { Component } from '@angular/core'; -import { ImportDoc } from '../../doc/treetable/importdoc'; -import { BasicDoc } from '../../doc/treetable/basicdoc'; -import { DynamicColumnsDoc } from '../../doc/treetable/dynamiccolumnsdoc'; -import { TemplateDoc } from '../../doc/treetable/templatedoc'; -import { PaginatorBasicDoc } from '../../doc/treetable/paginatorbasicdoc'; -import { PaginatorTemplateDoc } from '../../doc/treetable/paginatortemplatedoc'; -import { SortSingleColumnDoc } from '../../doc/treetable/sortsinglecolumndoc'; -import { SortMultipleColumnDoc } from '../../doc/treetable/sortmultiplecolumndoc'; -import { FilterDoc } from '../../doc/treetable/filterdoc'; -import { SelectionSingleDoc } from '../../doc/treetable/selectionsingledoc'; -import { SelectionMultipleDoc } from '../../doc/treetable/selectionmultipledoc'; -import { SelectionCheckboxDoc } from '../../doc/treetable/selectioncheckboxdoc'; -import { SelectionEventsDoc } from '../../doc/treetable/selectioneventscdoc'; -import { ColumnGroupDoc } from '../../doc/treetable/columngroupdoc'; -import { LazyLoadDoc } from '../../doc/treetable/lazyloaddoc'; -import { EditDoc } from '../../doc/treetable/editdoc'; -import { ScrollVerticalDoc } from '../../doc/treetable/scrollverticaldoc'; -import { ScrollHorizontalDoc } from '../../doc/treetable/scrollhorizontaldoc'; -import { FrozenColumnsDoc } from '../../doc/treetable/scrollfrozencolumnsdoc'; -import { ResizeFitDoc } from '../../doc/treetable/columnresizefitdoc'; -import { ResizeExpandDoc } from '../../doc/treetable/columnresizeexpanddoc'; -import { ReorderDoc } from '../../doc/treetable/reorderdoc'; -import { ColumnToggleDoc } from '../../doc/treetable/columntoggledoc'; -import { ConditionalStyleDoc } from '../../doc/treetable/conditionalstyledoc'; -import { ContextMenuDoc } from '../../doc/treetable/contextmenudoc'; -import { StyleDoc } from '../../doc/treetable/styledoc'; -import { AccessibilityDoc } from '../../doc/treetable/accessibilitydoc'; -import { PaginatorLocaleDoc } from '../../doc/treetable/paginatorlocaledoc'; -import { ResizeScrollableDoc } from '../../doc/treetable/columnresizescrollabledoc'; -import { SizeDoc } from '../../doc/treetable/sizedoc'; -import { GridlinesDoc } from '../../doc/treetable/gridlinesdoc'; -import { ControlledDoc } from '../../doc/treetable/controlleddoc'; +import { ImportDoc } from '@doc/treetable/importdoc'; +import { BasicDoc } from '@doc/treetable/basicdoc'; +import { DynamicColumnsDoc } from '@doc/treetable/dynamiccolumnsdoc'; +import { TemplateDoc } from '@doc/treetable/templatedoc'; +import { PaginatorBasicDoc } from '@doc/treetable/paginatorbasicdoc'; +import { PaginatorTemplateDoc } from '@doc/treetable/paginatortemplatedoc'; +import { SortSingleColumnDoc } from '@doc/treetable/sortsinglecolumndoc'; +import { FilterDoc } from '@doc/treetable/filterdoc'; +import { SelectionSingleDoc } from '@doc/treetable/selectionsingledoc'; +import { SelectionMultipleDoc } from '@doc/treetable/selectionmultipledoc'; +import { SelectionCheckboxDoc } from '@doc/treetable/selectioncheckboxdoc'; +import { SelectionEventsDoc } from '@doc/treetable/selectioneventscdoc'; +import { ColumnGroupDoc } from '@doc/treetable/columngroupdoc'; +import { LazyLoadDoc } from '@doc/treetable/lazyloaddoc'; +import { EditDoc } from '@doc/treetable/editdoc'; +import { ScrollVerticalDoc } from '@doc/treetable/scrollverticaldoc'; +import { ScrollHorizontalDoc } from '@doc/treetable/scrollhorizontaldoc'; +import { FrozenColumnsDoc } from '@doc/treetable/scrollfrozencolumnsdoc'; +import { ResizeFitDoc } from '@doc/treetable/columnresizefitdoc'; +import { ResizeExpandDoc } from '@doc/treetable/columnresizeexpanddoc'; +import { ReorderDoc } from '@doc/treetable/reorderdoc'; +import { ColumnToggleDoc } from '@doc/treetable/columntoggledoc'; +import { ConditionalStyleDoc } from '@doc/treetable/conditionalstyledoc'; +import { ContextMenuDoc } from '@doc/treetable/contextmenudoc'; +import { StyleDoc } from '@doc/treetable/styledoc'; +import { AccessibilityDoc } from '@doc/treetable/accessibilitydoc'; +import { PaginatorLocaleDoc } from '@doc/treetable/paginatorlocaledoc'; +import { ResizeScrollableDoc } from '@doc/treetable/columnresizescrollabledoc'; +import { SizeDoc } from '@doc/treetable/sizedoc'; +import { GridlinesDoc } from '@doc/treetable/gridlinesdoc'; +import { ControlledDoc } from '@doc/treetable/controlleddoc'; +import { SortMultipleColumnsDoc } from '@doc/treetable/sortmultiplecolumnsdoc'; +import { ScrollFlexibleDoc } from '@doc/treetable/flexiblescrolldoc'; +import { SortRemovableDoc } from '@doc/treetable/sortremovabledoc'; @Component({ templateUrl: './treetabledemo.html' @@ -103,10 +105,15 @@ export class TreeTableDemo { component: SortSingleColumnDoc }, { - id: 'sortmultiplecolumn', - label: 'Multiple Column', - component: SortMultipleColumnDoc + id: 'sortmultiplecolumns', + label: 'Multiple Columns', + component: SortMultipleColumnsDoc } + // { + // id: 'sortremovable', + // label: 'Removable Sort', + // component: SortRemovableDoc + // } ] }, { @@ -164,6 +171,11 @@ export class TreeTableDemo { label: 'Vertical', component: ScrollVerticalDoc }, + { + id: 'flexible', + label: 'Flexible', + component: ScrollFlexibleDoc + }, { id: 'horizontal', label: 'Horizontal', diff --git a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.module.ts b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.module.ts index 2d5f40308a1..da0072d09a2 100755 --- a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.module.ts +++ b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.module.ts @@ -1,6 +1,6 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { TristatecheckboxDocModule } from '../../doc/tristatecheckbox/tristatecheckboxdoc.module'; +import { TristatecheckboxDocModule } from '@doc/tristatecheckbox/tristatecheckboxdoc.module'; import { TriStateCheckboxDemo } from './tristatecheckboxdemo'; import { TriStateCheckboxDemoRoutingModule } from './tristatecheckboxdemo-routing.module'; diff --git a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts index 7c03a427837..2c76160a328 100755 --- a/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts +++ b/src/app/showcase/pages/tristatecheckbox/tristatecheckboxdemo.ts @@ -1,11 +1,12 @@ 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'; -import { AccessibilityDoc } from '../../doc/tristatecheckbox/accessibilitydoc'; -import { ReactiveFormsDoc } from '../../doc/tristatecheckbox/reactiveformsdoc'; +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'; +import { AccessibilityDoc } from '@doc/tristatecheckbox/accessibilitydoc'; +import { ReactiveFormsDoc } from '@doc/tristatecheckbox/reactiveformsdoc'; +import { FilledDoc } from '@doc/tristatecheckbox/filleddoc'; @Component({ templateUrl: './tristatecheckboxdemo.html' @@ -27,6 +28,11 @@ export class TriStateCheckboxDemo { label: 'Reactive Forms', component: ReactiveFormsDoc }, + { + id: 'filled', + label: 'Filled', + component: FilledDoc + }, { id: 'invalid', label: 'Invalid', diff --git a/src/app/showcase/pages/uikit/uikit.component.ts b/src/app/showcase/pages/uikit/uikit.component.ts index 3e73387cd4e..7a509abff99 100755 --- a/src/app/showcase/pages/uikit/uikit.component.ts +++ b/src/app/showcase/pages/uikit/uikit.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { Meta, Title } from '@angular/platform-browser'; import { Subscription } from 'rxjs'; -import { AppConfigService } from '../../service/appconfigservice'; +import { AppConfigService } from '@service/appconfigservice'; @Component({ templateUrl: './uikit.component.html', diff --git a/src/app/showcase/service/appconfigservice.ts b/src/app/showcase/service/appconfigservice.ts index 83c4d67f7f0..cae81dcc0d8 100644 --- a/src/app/showcase/service/appconfigservice.ts +++ b/src/app/showcase/service/appconfigservice.ts @@ -11,7 +11,6 @@ export class AppConfigService { _config: AppConfig = { theme: 'aura-light-blue', darkMode: false, - inputStyle: 'outlined', ripple: true, scale: 14, tableTheme: 'lara-light-blue' diff --git a/src/app/showcase/service/productservice.ts b/src/app/showcase/service/productservice.ts index 3f45cf4126c..253aae60235 100755 --- a/src/app/showcase/service/productservice.ts +++ b/src/app/showcase/service/productservice.ts @@ -1,7 +1,7 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import { Product } from '../domain/product'; +import { Product } from '@domain/product'; @Injectable() export class ProductService { @@ -1254,7 +1254,7 @@ export class ProductService { } getProductsWithOrdersSmall() { - return Promise.resolve(this.getProductsData().slice(0, 10)); + return Promise.resolve(this.getProductsWithOrdersData().slice(0, 10)); } generatePrduct(): Product { diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index 09e77788189..0cb931b02cc 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-cascadeselect-panel { background: #1e1e1e; @@ -851,6 +860,18 @@ background: #2396f2; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #64B5F6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #2396f2; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown.p-variant-filled { + background-color: #383838; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-dropdown-panel { background: #1e1e1e; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #383838; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #383838; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #383838; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #383838; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #383838; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #2396f2; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #383838; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #383838; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #64B5F6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #2396f2; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #383838; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #64B5F6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #2396f2; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #64B5F6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #2396f2; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #93cbf9; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index 1eb57c6a707..8a2ce3a4390 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-cascadeselect-panel { background: #1e1e1e; @@ -851,6 +860,18 @@ background: #54b358; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81C784; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #54b358; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown.p-variant-filled { + background-color: #383838; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-dropdown-panel { background: #1e1e1e; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #383838; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #383838; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #383838; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #383838; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #383838; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #54b358; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #383838; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #383838; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #81C784; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #54b358; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #383838; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81C784; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #54b358; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81C784; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #54b358; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #a7d8a9; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 95891cbfdcb..90737497572 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-cascadeselect-panel { background: #1e1e1e; @@ -851,6 +860,18 @@ background: #ffc50c; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFD54F; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #ffc50c; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown.p-variant-filled { + background-color: #383838; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-dropdown-panel { background: #1e1e1e; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #383838; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #383838; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #383838; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #383838; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #383838; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #ffc50c; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #383838; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #383838; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #FFD54F; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffc50c; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #383838; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFD54F; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #ffc50c; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFD54F; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #ffc50c; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #ffe284; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 4a18883af90..fa46c6eac52 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-cascadeselect-panel { background: #1e1e1e; @@ -851,6 +860,18 @@ background: #a241b2; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #BA68C8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #a241b2; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown.p-variant-filled { + background-color: #383838; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-dropdown-panel { background: #1e1e1e; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #383838; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #383838; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #383838; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #383838; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #383838; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #383838; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #383838; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #383838; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #a241b2; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #383838; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #383838; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #BA68C8; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #a241b2; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #383838; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #383838; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #383838; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #BA68C8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #a241b2; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #383838; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #BA68C8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #383838; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #a241b2; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #cf95d9; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/aura-dark-amber/theme.css b/src/assets/components/themes/aura-dark-amber/theme.css index 9aa6f98496e..081ab8b9b65 100644 --- a/src/assets/components/themes/aura-dark-amber/theme.css +++ b/src/assets/components/themes/aura-dark-amber/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #fcd34d; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #fbbf24; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #fcd34d; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #fcd34d; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #fbbf24; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #fcd34d; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(251, 191, 36, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #fbbf24; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #fcd34d; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-blue/theme.css b/src/assets/components/themes/aura-dark-blue/theme.css index 27b7273fcdf..09b73236a8a 100644 --- a/src/assets/components/themes/aura-dark-blue/theme.css +++ b/src/assets/components/themes/aura-dark-blue/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #93c5fd; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #60a5fa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #93c5fd; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #93c5fd; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #60a5fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #93c5fd; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #60a5fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #93c5fd; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-cyan/theme.css b/src/assets/components/themes/aura-dark-cyan/theme.css index b7a76b35fe0..f52b90a22af 100644 --- a/src/assets/components/themes/aura-dark-cyan/theme.css +++ b/src/assets/components/themes/aura-dark-cyan/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #67e8f9; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #22d3ee; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #67e8f9; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #67e8f9; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #22d3ee; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #67e8f9; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(34, 211, 238, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #22d3ee; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #67e8f9; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-green/theme.css b/src/assets/components/themes/aura-dark-green/theme.css index 30266583674..6fb58df18b3 100644 --- a/src/assets/components/themes/aura-dark-green/theme.css +++ b/src/assets/components/themes/aura-dark-green/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #6ee7b7; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #34d399; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #6ee7b7; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #6ee7b7; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #34d399; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #6ee7b7; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(52, 211, 153, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #34d399; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #6ee7b7; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-indigo/theme.css b/src/assets/components/themes/aura-dark-indigo/theme.css index 90c01cd942e..50e6939f846 100644 --- a/src/assets/components/themes/aura-dark-indigo/theme.css +++ b/src/assets/components/themes/aura-dark-indigo/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #a5b4fc; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #818cf8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #a5b4fc; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #a5b4fc; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #818cf8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #a5b4fc; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(129, 140, 248, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #818cf8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #a5b4fc; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-lime/theme.css b/src/assets/components/themes/aura-dark-lime/theme.css index 6c4330d431e..b764c5e964f 100644 --- a/src/assets/components/themes/aura-dark-lime/theme.css +++ b/src/assets/components/themes/aura-dark-lime/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #bef264; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a3e635; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #bef264; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #bef264; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a3e635; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #bef264; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(163, 230, 53, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a3e635; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #bef264; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-noir/theme.css b/src/assets/components/themes/aura-dark-noir/theme.css index e793ec4e12c..478f67a95ce 100644 --- a/src/assets/components/themes/aura-dark-noir/theme.css +++ b/src/assets/components/themes/aura-dark-noir/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #f4f4f5; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #fafafa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #f4f4f5; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #f4f4f5; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #fafafa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #f4f4f5; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(250, 250, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #fafafa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #f4f4f5; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-pink/theme.css b/src/assets/components/themes/aura-dark-pink/theme.css index b3f79a65d59..ae00558780b 100644 --- a/src/assets/components/themes/aura-dark-pink/theme.css +++ b/src/assets/components/themes/aura-dark-pink/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #f9a8d4; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #f472b6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #f9a8d4; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #f9a8d4; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #f472b6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #f9a8d4; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(244, 114, 182, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #f472b6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #f9a8d4; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-purple/theme.css b/src/assets/components/themes/aura-dark-purple/theme.css index 037a80b4877..af177af4607 100644 --- a/src/assets/components/themes/aura-dark-purple/theme.css +++ b/src/assets/components/themes/aura-dark-purple/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #c4b5fd; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a78bfa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #c4b5fd; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #c4b5fd; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a78bfa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #c4b5fd; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(167, 139, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a78bfa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #c4b5fd; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-dark-teal/theme.css b/src/assets/components/themes/aura-dark-teal/theme.css index dc304639cf9..e6134ecc99d 100644 --- a/src/assets/components/themes/aura-dark-teal/theme.css +++ b/src/assets/components/themes/aura-dark-teal/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-cascadeselect-panel { background: #18181b; @@ -868,6 +877,18 @@ background: #5eead4; color: #020617; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2dd4bf; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #5eead4; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-dropdown-panel { background: #18181b; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #27272a; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #27272a; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #27272a; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #27272a; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #27272a; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #27272a; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #020617; color: #5eead4; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #27272a; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #020617; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #020617; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #27272a; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #27272a; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2dd4bf; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #5eead4; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #ffffff; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2dd4bf; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #27272a; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #5eead4; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6354,7 +6467,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-amber/theme.css b/src/assets/components/themes/aura-light-amber/theme.css index 305aecd28cd..02c926f3877 100644 --- a/src/assets/components/themes/aura-light-amber/theme.css +++ b/src/assets/components/themes/aura-light-amber/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #d97706; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #f59e0b; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #d97706; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #d97706; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #f59e0b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #d97706; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #fffbeb; color: #b45309; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #f59e0b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #d97706; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-blue/theme.css b/src/assets/components/themes/aura-light-blue/theme.css index ff66b5c29cd..ddb5c0644a1 100644 --- a/src/assets/components/themes/aura-light-blue/theme.css +++ b/src/assets/components/themes/aura-light-blue/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #2563eb; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3B82F6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #2563eb; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #2563eb; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3B82F6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #2563eb; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EFF6FF; color: #1D4ED8; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3B82F6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #2563eb; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-cyan/theme.css b/src/assets/components/themes/aura-light-cyan/theme.css index 5de64bcc01f..ebb5dd7017d 100644 --- a/src/assets/components/themes/aura-light-cyan/theme.css +++ b/src/assets/components/themes/aura-light-cyan/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #0891b2; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #06b6d4; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #0891b2; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #0891b2; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #06b6d4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0891b2; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #ecfeff; color: #0e7490; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #06b6d4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0891b2; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-green/theme.css b/src/assets/components/themes/aura-light-green/theme.css index bd137ed62e8..250e0a9c7be 100644 --- a/src/assets/components/themes/aura-light-green/theme.css +++ b/src/assets/components/themes/aura-light-green/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #059669; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #10b981; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #059669; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #059669; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #10b981; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #059669; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #ecfdf5; color: #047857; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #10b981; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #059669; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-indigo/theme.css b/src/assets/components/themes/aura-light-indigo/theme.css index f2bc1a8a25c..b9461f83f6b 100644 --- a/src/assets/components/themes/aura-light-indigo/theme.css +++ b/src/assets/components/themes/aura-light-indigo/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #4F46E5; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #6366F1; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #4F46E5; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #4F46E5; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #6366F1; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #4F46E5; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EEF2FF; color: #4338CA; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #6366F1; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #4F46E5; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-lime/theme.css b/src/assets/components/themes/aura-light-lime/theme.css index f92aeeb8662..24bc095397b 100644 --- a/src/assets/components/themes/aura-light-lime/theme.css +++ b/src/assets/components/themes/aura-light-lime/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #65a30d; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #84cc16; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #65a30d; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #65a30d; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #84cc16; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #65a30d; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #f7fee7; color: #4d7c0f; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #84cc16; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #65a30d; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-noir/theme.css b/src/assets/components/themes/aura-light-noir/theme.css index 74ee3d9c609..06eeb4fac45 100644 --- a/src/assets/components/themes/aura-light-noir/theme.css +++ b/src/assets/components/themes/aura-light-noir/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #0f172a; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #020617; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #0f172a; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1196,6 +1226,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1215,6 +1255,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1708,6 +1776,18 @@ background: #ffffff; color: #0f172a; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1943,6 +2023,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3495,6 +3584,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #020617; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0f172a; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #020617; color: #ffffff; @@ -3692,6 +3793,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #020617; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0f172a; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6364,7 +6477,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-pink/theme.css b/src/assets/components/themes/aura-light-pink/theme.css index add2c61c1d7..af670fec5dd 100644 --- a/src/assets/components/themes/aura-light-pink/theme.css +++ b/src/assets/components/themes/aura-light-pink/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #db2777; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #ec4899; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #db2777; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #db2777; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #ec4899; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #db2777; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #fdf2f8; color: #be185d; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #ec4899; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #db2777; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-purple/theme.css b/src/assets/components/themes/aura-light-purple/theme.css index 8b5028ac74b..954539d3885 100644 --- a/src/assets/components/themes/aura-light-purple/theme.css +++ b/src/assets/components/themes/aura-light-purple/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #7C3AED; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8B5CF6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #7C3AED; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #7C3AED; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8B5CF6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #7C3AED; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F5F3FF; color: #6D28D9; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8B5CF6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #7C3AED; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/aura-light-teal/theme.css b/src/assets/components/themes/aura-light-teal/theme.css index afc0e5e5483..08e6a24db2c 100644 --- a/src/assets/components/themes/aura-light-teal/theme.css +++ b/src/assets/components/themes/aura-light-teal/theme.css @@ -754,6 +754,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f87171; } + .p-cascadeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -870,6 +879,18 @@ background: #0d9488; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #14b8a6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #0d9488; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f87171; @@ -1009,6 +1030,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f87171; } + .p-dropdown.p-variant-filled { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1192,6 +1222,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f87171; } @@ -1211,6 +1251,16 @@ right: 3.25rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8fafc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1289,6 +1339,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f87171; } + .p-inputtext.p-variant-filled { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1505,6 +1564,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1704,6 +1772,18 @@ background: #ffffff; color: #0d9488; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8fafc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f87171; @@ -1935,6 +2015,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8fafc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f87171; @@ -3487,6 +3576,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #14b8a6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0d9488; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #f0fdfa; color: #0f766e; @@ -3684,6 +3785,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #334155; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #14b8a6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8fafc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0d9488; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid var(--p-focus-ring-color); outline-offset: -0.15rem; @@ -6356,7 +6469,7 @@ font-size: 1rem; } } -@layer primevue { +@layer primeng { .p-accordion .p-accordion-header .p-accordion-header-link { border-radius: 6px !important; flex-direction: row-reverse; diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index 18833e65c46..c8036898246 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f19ea6; } + .p-cascadeselect.p-variant-filled { + background-color: #3f4b5b; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } .p-cascadeselect-panel { background: #2a323d; @@ -851,6 +860,18 @@ background: #1dadff; color: #151515; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8dd0ff; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #3f4b5b; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #1dadff; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f19ea6; } + .p-dropdown.p-variant-filled { + background-color: #3f4b5b; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } .p-dropdown-panel { background: #2a323d; @@ -1177,6 +1207,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #3f4b5b; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f19ea6; } @@ -1196,6 +1236,16 @@ right: 3.107rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #3f4b5b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #3f4b5b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #3f4b5b; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f19ea6; } + .p-inputtext.p-variant-filled { + background-color: #3f4b5b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #3f4b5b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #3f4b5b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3f4b5b; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1689,6 +1757,18 @@ background: #1dadff; color: #151515; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #3f4b5b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #3f4b5b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #8dd0ff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #1dadff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f19ea6; @@ -1928,6 +2008,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #3f4b5b; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f19ea6; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8dd0ff; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #3f4b5b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #1dadff; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #8dd0ff; color: #151515; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8dd0ff; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #3f4b5b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #1dadff; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #e3f3fe; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index 32b2023b588..ac9899101de 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f19ea6; } + .p-cascadeselect.p-variant-filled { + background-color: #3f4b5b; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } .p-cascadeselect-panel { background: #2a323d; @@ -851,6 +860,18 @@ background: #9954bb; color: #151515; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #c298d8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #3f4b5b; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #9954bb; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f19ea6; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f19ea6; } + .p-dropdown.p-variant-filled { + background-color: #3f4b5b; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } .p-dropdown-panel { background: #2a323d; @@ -1177,6 +1207,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #3f4b5b; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f19ea6; } @@ -1196,6 +1236,16 @@ right: 3.107rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #3f4b5b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #3f4b5b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #3f4b5b; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f19ea6; } + .p-inputtext.p-variant-filled { + background-color: #3f4b5b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #3f4b5b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #3f4b5b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3f4b5b; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1689,6 +1757,18 @@ background: #9954bb; color: #151515; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #3f4b5b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #3f4b5b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #c298d8; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #9954bb; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f19ea6; @@ -1928,6 +2008,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #3f4b5b; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #3f4b5b; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #3f4b5b; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f19ea6; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #c298d8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #3f4b5b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9954bb; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #c298d8; color: #151515; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3f4b5b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #c298d8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #3f4b5b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9954bb; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #f0e6f5; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 58c620ef6f6..2d1b961dea5 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #dc3545; } + .p-cascadeselect.p-variant-filled { + background-color: #efefef; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #efefef; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #0062cc; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007bff; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #efefef; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #0062cc; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #dc3545; } + .p-dropdown.p-variant-filled { + background-color: #efefef; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #efefef; + } .p-dropdown-panel { background: #ffffff; @@ -1177,6 +1207,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #efefef; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #efefef; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #dc3545; } @@ -1196,6 +1236,16 @@ right: 3.107rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #efefef; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #efefef; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #efefef; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #dc3545; } + .p-inputtext.p-variant-filled { + background-color: #efefef; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #efefef; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #efefef; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #efefef; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #efefef; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1689,6 +1757,18 @@ background: #0062cc; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #efefef; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #efefef; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #007bff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #0062cc; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #dc3545; @@ -1928,6 +2008,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #efefef; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #efefef; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dc3545; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #212529; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007bff; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #efefef; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0062cc; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007bff; color: #ffffff; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #212529; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007bff; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #efefef; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0062cc; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid rgba(38, 143, 255, 0.5); outline-offset: -0.15rem; diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index 5128f82075e..70d8c305b56 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #dc3545; } + .p-cascadeselect.p-variant-filled { + background-color: #efefef; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #efefef; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #68329e; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #883cae; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #efefef; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #68329e; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #dc3545; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #dc3545; } + .p-dropdown.p-variant-filled { + background-color: #efefef; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #efefef; + } .p-dropdown-panel { background: #ffffff; @@ -1177,6 +1207,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #efefef; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #efefef; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #dc3545; } @@ -1196,6 +1236,16 @@ right: 3.107rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #efefef; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #efefef; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #efefef; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #dc3545; } + .p-inputtext.p-variant-filled { + background-color: #efefef; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #efefef; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #efefef; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #efefef; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #efefef; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1689,6 +1757,18 @@ background: #68329e; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #efefef; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #efefef; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #883cae; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #68329e; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #dc3545; @@ -1928,6 +2008,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #efefef; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #efefef; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #efefef; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #dc3545; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #212529; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #883cae; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #efefef; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #68329e; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #883cae; color: #ffffff; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #212529; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #efefef; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #883cae; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #efefef; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #68329e; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid rgba(136, 60, 174, 0.5); outline-offset: -0.15rem; diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index b30e6ccaaf0..5b5348f55d9 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a4252c; } + .p-cascadeselect.p-variant-filled { + background-color: #faf9f8; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #faf9f8; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #faf9f8; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #005a9e; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #faf9f8; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #0078d4; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #faf9f8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #005a9e; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a4252c; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #a4252c; } + .p-dropdown.p-variant-filled { + background-color: #faf9f8; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #faf9f8; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #faf9f8; + } .p-dropdown-panel { background: #ffffff; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #faf9f8; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #faf9f8; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #faf9f8; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a4252c; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #faf9f8; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #faf9f8; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #faf9f8; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #a4252c; } + .p-inputtext.p-variant-filled { + background-color: #faf9f8; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #faf9f8; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #faf9f8; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-multiselect.p-variant-filled { + background: #faf9f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #faf9f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #faf9f8; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #ffffff; color: #005a9e; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #faf9f8; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #faf9f8; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a4252c; @@ -1916,6 +1996,15 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-treeselect.p-variant-filled { + background-color: #faf9f8; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #faf9f8; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #faf9f8; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a4252c; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #323130; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #faf9f8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #0078d4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #faf9f8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #005a9e; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #edebe9; color: #323130; @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #323130; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #faf9f8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #0078d4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #faf9f8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #005a9e; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #605e5c; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index 9d7a128356d..43699e89b8c 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-cascadeselect-panel { background: #1f2937; @@ -868,6 +877,18 @@ background: #bfdbfe; color: #030712; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #60a5fa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #bfdbfe; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-dropdown-panel { background: #1f2937; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #424b57; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #424b57; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #bfdbfe; color: #030712; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #424b57; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #60a5fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #bfdbfe; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #60a5fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #bfdbfe; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(96, 165, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #60a5fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #bfdbfe; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid rgba(96, 165, 250, 0.2); outline-offset: -0.15rem; diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index 53e3842d446..be22d31d912 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-cascadeselect-panel { background: #1f2937; @@ -868,6 +877,18 @@ background: #c7d2fe; color: #030712; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #818cf8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #c7d2fe; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-dropdown-panel { background: #1f2937; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #424b57; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #424b57; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #c7d2fe; color: #030712; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #424b57; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #818cf8; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #c7d2fe; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #818cf8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #c7d2fe; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(129, 140, 248, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #818cf8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #c7d2fe; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid rgba(129, 140, 248, 0.2); outline-offset: -0.15rem; diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 681c66ab3be..d03f1a677e6 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-cascadeselect-panel { background: #1f2937; @@ -868,6 +877,18 @@ background: #ddd6fe; color: #030712; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a78bfa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #ddd6fe; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-dropdown-panel { background: #1f2937; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #424b57; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #424b57; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #ddd6fe; color: #030712; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #424b57; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #a78bfa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ddd6fe; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a78bfa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #ddd6fe; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(167, 139, 250, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #a78bfa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #ddd6fe; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid rgba(167, 139, 250, 0.2); outline-offset: -0.15rem; diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 67bc533cbd8..405bd976600 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #fca5a5; } + .p-cascadeselect.p-variant-filled { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-cascadeselect-panel { background: #1f2937; @@ -868,6 +877,18 @@ background: #99f6e4; color: #030712; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2dd4bf; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #99f6e4; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #fca5a5; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #fca5a5; } + .p-dropdown.p-variant-filled { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-dropdown-panel { background: #1f2937; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #424b57; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #424b57; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #fca5a5; } @@ -1209,6 +1249,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #424b57; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #424b57; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #424b57; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #fca5a5; } + .p-inputtext.p-variant-filled { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #424b57; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #424b57; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #424b57; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #99f6e4; color: #030712; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #424b57; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #424b57; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #2dd4bf; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #99f6e4; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #fca5a5; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #424b57; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #424b57; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #fca5a5; @@ -3485,6 +3574,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2dd4bf; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #99f6e4; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(45, 212, 191, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3682,6 +3783,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #424b57; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2dd4bf; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #424b57; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #99f6e4; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid rgba(45, 212, 191, 0.2); outline-offset: -0.15rem; diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index ca096c4216a..f391c71312e 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -868,6 +877,18 @@ background: #1D4ED8; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3B82F6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #1D4ED8; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown.p-variant-filled { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } @@ -1209,6 +1249,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #1D4ED8; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #3B82F6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #1D4ED8; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; @@ -3436,6 +3525,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4b5563; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3B82F6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #1D4ED8; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EFF6FF; color: #1D4ED8; @@ -3633,6 +3734,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4b5563; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3B82F6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #1D4ED8; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #BFDBFE; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index 72f3b291d40..7e018de4a8d 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -868,6 +877,18 @@ background: #4338CA; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #6366F1; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #4338CA; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown.p-variant-filled { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } @@ -1209,6 +1249,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #4338CA; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #6366F1; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #4338CA; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; @@ -3436,6 +3525,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4b5563; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #6366F1; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #4338CA; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #EEF2FF; color: #4338CA; @@ -3633,6 +3734,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4b5563; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #6366F1; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #4338CA; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #C7D2FE; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 4c23ca21afe..0854b9a41fa 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -868,6 +877,18 @@ background: #6D28D9; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8B5CF6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #6D28D9; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown.p-variant-filled { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } @@ -1209,6 +1249,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #6D28D9; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #8B5CF6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #6D28D9; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; @@ -3436,6 +3525,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4b5563; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8B5CF6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #6D28D9; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F5F3FF; color: #6D28D9; @@ -3633,6 +3734,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4b5563; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #8B5CF6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #6D28D9; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #DDD6FE; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index dca0ed820fc..b62112eedf1 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -752,6 +752,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e24c4c; } + .p-cascadeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -868,6 +877,18 @@ background: #0f766e; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #14b8a6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #0f766e; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e24c4c; @@ -1007,6 +1028,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e24c4c; } + .p-dropdown.p-variant-filled { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1190,6 +1220,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e24c4c; } @@ -1209,6 +1249,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f3f4f6; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f3f4f6; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1287,6 +1337,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e24c4c; } + .p-inputtext.p-variant-filled { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1503,6 +1562,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1702,6 +1770,18 @@ background: #0f766e; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f3f4f6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f3f4f6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #14b8a6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #0f766e; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e24c4c; @@ -1933,6 +2013,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f3f4f6; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e24c4c; @@ -3436,6 +3525,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4b5563; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #14b8a6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0f766e; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #f0fdfa; color: #0f766e; @@ -3633,6 +3734,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4b5563; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f3f4f6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #14b8a6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f3f4f6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0f766e; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #99f6e4; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 7fcaf413024..aaa7498d250 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect.p-variant-filled { + background-color: #4b4b4b; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-cascadeselect-panel { background: #323232; @@ -851,6 +860,18 @@ background: #FFCA28; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFE082; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #FFCA28; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown.p-variant-filled { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-dropdown-panel { background: #323232; @@ -1177,6 +1207,16 @@ right: 0.429rem; } + .p-inputmask.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } @@ -1196,6 +1236,16 @@ right: 2.786rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #4b4b4b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #4b4b4b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #4b4b4b; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; @@ -1689,6 +1757,18 @@ background: #FFCA28; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #FFE082; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #FFCA28; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; @@ -1928,6 +2008,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #4b4b4b; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFE082; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #FFCA28; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #FFE082; color: #212529; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFE082; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #FFCA28; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid white; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index dedf302c42c..706a35a625f 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect.p-variant-filled { + background-color: #4b4b4b; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-cascadeselect-panel { background: #323232; @@ -851,6 +860,18 @@ background: #29B6F6; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81D4FA; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #29B6F6; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown.p-variant-filled { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-dropdown-panel { background: #323232; @@ -1177,6 +1207,16 @@ right: 0.429rem; } + .p-inputmask.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } @@ -1196,6 +1236,16 @@ right: 2.786rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #4b4b4b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #4b4b4b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #4b4b4b; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; @@ -1689,6 +1757,18 @@ background: #29B6F6; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #81D4FA; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #29B6F6; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; @@ -1928,6 +2008,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #4b4b4b; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81D4FA; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #29B6F6; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #81D4FA; color: #212529; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81D4FA; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #29B6F6; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid white; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index 5f104d0035f..d14fbb75a23 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect.p-variant-filled { + background-color: #4b4b4b; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-cascadeselect-panel { background: #323232; @@ -851,6 +860,18 @@ background: #9CCC65; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #C5E1A5; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #9CCC65; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown.p-variant-filled { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-dropdown-panel { background: #323232; @@ -1177,6 +1207,16 @@ right: 0.429rem; } + .p-inputmask.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } @@ -1196,6 +1236,16 @@ right: 2.786rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #4b4b4b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #4b4b4b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #4b4b4b; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; @@ -1689,6 +1757,18 @@ background: #9CCC65; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #C5E1A5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #9CCC65; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; @@ -1928,6 +2008,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #4b4b4b; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #C5E1A5; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9CCC65; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #C5E1A5; color: #212529; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #C5E1A5; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9CCC65; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid white; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index c4da1d33b73..a313f86a499 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e57373; } + .p-cascadeselect.p-variant-filled { + background-color: #4b4b4b; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-cascadeselect-panel { background: #323232; @@ -851,6 +860,18 @@ background: #EC407A; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #F48FB1; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #EC407A; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e57373; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e57373; } + .p-dropdown.p-variant-filled { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-dropdown-panel { background: #323232; @@ -1177,6 +1207,16 @@ right: 0.429rem; } + .p-inputmask.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e57373; } @@ -1196,6 +1236,16 @@ right: 2.786rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #4b4b4b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #4b4b4b; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #4b4b4b; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e57373; } + .p-inputtext.p-variant-filled { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #4b4b4b; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; @@ -1689,6 +1757,18 @@ background: #EC407A; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #4b4b4b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #4b4b4b; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #F48FB1; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #EC407A; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e57373; @@ -1928,6 +2008,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #4b4b4b; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #4b4b4b; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #4b4b4b; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e57373; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #F48FB1; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #EC407A; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F48FB1; color: #212529; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #dedede; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #4b4b4b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #F48FB1; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #4b4b4b; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #EC407A; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid white; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index 2d11b5760f9..de7b7d55573 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -758,6 +758,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-cascadeselect-panel { background: #2b2b2b; @@ -874,6 +883,18 @@ background: #CE93D8; color: #121212; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #CE93D8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #CE93D8; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-dropdown-panel { background: #2b2b2b; @@ -1196,6 +1226,16 @@ right: 1rem; } + .p-inputmask.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } @@ -1215,6 +1255,16 @@ right: 4rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: rgba(255, 255, 255, 0.06); + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; @@ -1708,6 +1776,18 @@ background: #121212; color: #CE93D8; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #121212; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #121212; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; @@ -1939,6 +2019,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; @@ -3491,6 +3580,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #CE93D8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #CE93D8; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.16); color: #CE93D8; @@ -3688,6 +3789,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #CE93D8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #CE93D8; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid transparent; outline-offset: -0.15rem; @@ -6937,11 +7050,10 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } - - .p-input-filled .p-checkbox .p-checkbox-box { + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-checkbox.p-variant-filled .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } @@ -7058,6 +7170,18 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-dropdown.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown-item .p-ink { background-color: rgba(206, 147, 216, 0.16); diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index ccad0b135af..5e01633fd05 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -758,6 +758,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-cascadeselect-panel { background: #2b2b2b; @@ -874,6 +883,18 @@ background: #9FA8DA; color: #121212; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9FA8DA; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #9FA8DA; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-dropdown-panel { background: #2b2b2b; @@ -1196,6 +1226,16 @@ right: 1rem; } + .p-inputmask.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } @@ -1215,6 +1255,16 @@ right: 4rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: rgba(255, 255, 255, 0.06); + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; @@ -1708,6 +1776,18 @@ background: #121212; color: #9FA8DA; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #121212; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #121212; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; @@ -1939,6 +2019,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; @@ -3491,6 +3580,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9FA8DA; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9FA8DA; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; @@ -3688,6 +3789,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9FA8DA; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9FA8DA; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid transparent; outline-offset: -0.15rem; @@ -6937,11 +7050,10 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } - - .p-input-filled .p-checkbox .p-checkbox-box { + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-checkbox.p-variant-filled .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } @@ -7058,6 +7170,18 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-dropdown.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown-item .p-ink { background-color: rgba(159, 168, 218, 0.16); diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index 446c5478976..94aba2d682e 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -758,6 +758,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect.p-variant-filled { + background-color: #f5f5f5; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-cascadeselect-panel { background: #ffffff; @@ -874,6 +883,18 @@ background: #673AB7; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #673AB7; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #673AB7; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown.p-variant-filled { + background-color: #f5f5f5; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-dropdown-panel { background: #ffffff; @@ -1196,6 +1226,16 @@ right: 1rem; } + .p-inputmask.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } @@ -1215,6 +1255,16 @@ right: 4rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f5f5f5; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #ececec; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #dcdcdc; + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #b00020; } + .p-inputtext.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; @@ -1708,6 +1776,18 @@ background: #ffffff; color: #673AB7; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; @@ -1939,6 +2019,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #f5f5f5; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; @@ -3491,6 +3580,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #673AB7; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #673AB7; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.12); color: #673AB7; @@ -3688,6 +3789,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #673AB7; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #673AB7; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid transparent; outline-offset: -0.15rem; @@ -6937,11 +7050,10 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } - - .p-input-filled .p-checkbox .p-checkbox-box { + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-checkbox.p-variant-filled .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } @@ -7058,6 +7170,18 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown-item .p-ink { background-color: rgba(103, 58, 183, 0.16); diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index 374cbe6b006..d695f1957a2 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -758,6 +758,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect.p-variant-filled { + background-color: #f5f5f5; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-cascadeselect-panel { background: #ffffff; @@ -874,6 +883,18 @@ background: #3F51B5; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3F51B5; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #3F51B5; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown.p-variant-filled { + background-color: #f5f5f5; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-dropdown-panel { background: #ffffff; @@ -1196,6 +1226,16 @@ right: 1rem; } + .p-inputmask.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } @@ -1215,6 +1255,16 @@ right: 4rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f5f5f5; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #ececec; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #dcdcdc; + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #b00020; } + .p-inputtext.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.875rem 0.875rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.5rem 1rem; @@ -1708,6 +1776,18 @@ background: #ffffff; color: #3F51B5; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; @@ -1939,6 +2019,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #f5f5f5; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; @@ -3491,6 +3580,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3F51B5; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #3F51B5; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.12); color: #3F51B5; @@ -3688,6 +3789,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3F51B5; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #3F51B5; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid transparent; outline-offset: -0.15rem; @@ -6937,11 +7050,10 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } - - .p-input-filled .p-checkbox .p-checkbox-box { + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-checkbox.p-variant-filled .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } @@ -7058,6 +7170,18 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown-item .p-ink { background-color: rgba(63, 81, 181, 0.16); diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 89a30c565bb..1c4fe4d2dec 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -758,6 +758,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-cascadeselect-panel { background: #2b2b2b; @@ -874,6 +883,18 @@ background: #CE93D8; color: #121212; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #CE93D8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #CE93D8; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-dropdown-panel { background: #2b2b2b; @@ -1196,6 +1226,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } @@ -1215,6 +1255,16 @@ right: 3.5rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: rgba(255, 255, 255, 0.06); + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1708,6 +1776,18 @@ background: #121212; color: #CE93D8; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #121212; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #121212; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; @@ -1939,6 +2019,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; @@ -3491,6 +3580,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #CE93D8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #CE93D8; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(206, 147, 216, 0.16); color: #CE93D8; @@ -3688,6 +3789,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #CE93D8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #CE93D8; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid transparent; outline-offset: -0.15rem; @@ -6937,11 +7050,10 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(206, 147, 216, 0.12); } - - .p-input-filled .p-checkbox .p-checkbox-box { + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-checkbox.p-variant-filled .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } @@ -7058,6 +7170,18 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8, inset 0 0 0 1px #CE93D8; } + .p-dropdown.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown-item .p-ink { background-color: rgba(206, 147, 216, 0.16); diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 529be807857..cd290b4f476 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -758,6 +758,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44435; } + .p-cascadeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-cascadeselect-panel { background: #2b2b2b; @@ -874,6 +883,18 @@ background: #9FA8DA; color: #121212; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9FA8DA; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #9FA8DA; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44435; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f44435; } + .p-dropdown.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-dropdown-panel { background: #2b2b2b; @@ -1196,6 +1226,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44435; } @@ -1215,6 +1255,16 @@ right: 3.5rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: rgba(255, 255, 255, 0.06); + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f44435; } + .p-inputtext.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 0.1); + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1708,6 +1776,18 @@ background: #121212; color: #9FA8DA; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #121212; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #121212; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44435; @@ -1939,6 +2019,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: rgba(255, 255, 255, 0.06); + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: rgba(255, 255, 255, 0.1); + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44435; @@ -3491,6 +3580,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9FA8DA; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9FA8DA; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(159, 168, 218, 0.16); color: #9FA8DA; @@ -3688,6 +3789,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: rgba(255, 255, 255, 0.06); + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9FA8DA; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9FA8DA; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid transparent; outline-offset: -0.15rem; @@ -6937,11 +7050,10 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(159, 168, 218, 0.12); } - - .p-input-filled .p-checkbox .p-checkbox-box { + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #1e1e1e; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-checkbox.p-variant-filled .p-checkbox-box:not(.p-disabled):hover { background-color: #1e1e1e; } @@ -7058,6 +7170,18 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA, inset 0 0 0 1px #9FA8DA; } + .p-dropdown.p-variant-filled { + background: rgba(255, 255, 255, 0.06); + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: rgba(255, 255, 255, 0.08); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: rgba(255, 255, 255, 0.1); + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown-item .p-ink { background-color: rgba(159, 168, 218, 0.16); diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index ea5736e6b00..8eb44771a76 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -758,6 +758,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect.p-variant-filled { + background-color: #f5f5f5; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-cascadeselect-panel { background: #ffffff; @@ -874,6 +883,18 @@ background: #673AB7; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #673AB7; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #673AB7; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown.p-variant-filled { + background-color: #f5f5f5; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-dropdown-panel { background: #ffffff; @@ -1196,6 +1226,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } @@ -1215,6 +1255,16 @@ right: 3.5rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f5f5f5; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #ececec; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #dcdcdc; + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #b00020; } + .p-inputtext.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1708,6 +1776,18 @@ background: #ffffff; color: #673AB7; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; @@ -1939,6 +2019,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #f5f5f5; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; @@ -3491,6 +3580,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #673AB7; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #673AB7; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(103, 58, 183, 0.12); color: #673AB7; @@ -3688,6 +3789,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #673AB7; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #673AB7; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid transparent; outline-offset: -0.15rem; @@ -6937,11 +7050,10 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(103, 58, 183, 0.12); } - - .p-input-filled .p-checkbox .p-checkbox-box { + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-checkbox.p-variant-filled .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } @@ -7058,6 +7170,18 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7, inset 0 0 0 1px #673AB7; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown-item .p-ink { background-color: rgba(103, 58, 183, 0.16); diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index 8f2301146b0..bd78608a683 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -758,6 +758,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #b00020; } + .p-cascadeselect.p-variant-filled { + background-color: #f5f5f5; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-cascadeselect-panel { background: #ffffff; @@ -874,6 +883,18 @@ background: #3F51B5; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3F51B5; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #3F51B5; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #b00020; @@ -1013,6 +1034,15 @@ .p-dropdown.p-invalid.p-component { border-color: #b00020; } + .p-dropdown.p-variant-filled { + background-color: #f5f5f5; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-dropdown-panel { background: #ffffff; @@ -1196,6 +1226,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #b00020; } @@ -1215,6 +1255,16 @@ right: 3.5rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f5f5f5; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #ececec; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #dcdcdc; + } + .p-inputotp { display: flex; align-items: center; @@ -1293,6 +1343,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #b00020; } + .p-inputtext.p-variant-filled { + background-color: #f5f5f5; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1509,6 +1568,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #f5f5f5; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1708,6 +1776,18 @@ background: #ffffff; color: #3F51B5; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f5f5f5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #ececec; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #ffffff; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffffff; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #b00020; @@ -1939,6 +2019,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #f5f5f5; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #ececec; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #dcdcdc; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #b00020; @@ -3491,6 +3580,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3F51B5; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #3F51B5; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(63, 81, 181, 0.12); color: #3F51B5; @@ -3688,6 +3789,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(0, 0, 0, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f5f5f5; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #3F51B5; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #ececec; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #3F51B5; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid transparent; outline-offset: -0.15rem; @@ -6937,11 +7050,10 @@ .p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused { box-shadow: 0 0 1px 10px rgba(63, 81, 181, 0.12); } - - .p-input-filled .p-checkbox .p-checkbox-box { + .p-checkbox.p-variant-filled .p-checkbox-box { background-color: #ffffff; } - .p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover { + .p-checkbox.p-variant-filled .p-checkbox-box:not(.p-disabled):hover { background-color: #ffffff; } @@ -7058,6 +7170,18 @@ .p-dropdown:not(.p-disabled).p-focus { box-shadow: inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5, inset 0 0 0 1px #3F51B5; } + .p-dropdown.p-variant-filled { + background: #f5f5f5; + } + .p-dropdown.p-variant-filled:not(.p-disabled):hover { + background-color: #ececec; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus { + background-color: #dcdcdc; + } + .p-dropdown.p-variant-filled:not(.p-disabled).p-focus .p-inputtext { + background-color: transparent; + } .p-dropdown-item .p-ink { background-color: rgba(63, 81, 181, 0.16); diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index 9291d53a2f2..44973294d7e 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -761,6 +761,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #bf616a; } + .p-cascadeselect.p-variant-filled { + background-color: #eceff4; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #eceff4; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -877,6 +886,18 @@ background: #81a1c1; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #eceff4; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #5e81ac; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #eceff4; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #81a1c1; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #bf616a; @@ -1016,6 +1037,15 @@ .p-dropdown.p-invalid.p-component { border-color: #bf616a; } + .p-dropdown.p-variant-filled { + background-color: #eceff4; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #eceff4; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1199,6 +1229,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #eceff4; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #eceff4; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #bf616a; } @@ -1218,6 +1258,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #eceff4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #eceff4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1296,6 +1346,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #bf616a; } + .p-inputtext.p-variant-filled { + background-color: #eceff4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #eceff4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1512,6 +1571,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-multiselect.p-variant-filled { + background: #eceff4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #eceff4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1711,6 +1779,18 @@ background: #81a1c1; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #eceff4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #eceff4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #5e81ac; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #81a1c1; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #bf616a; @@ -1942,6 +2022,15 @@ border-top-right-radius: 4px; border-bottom-right-radius: 4px; } + .p-treeselect.p-variant-filled { + background-color: #eceff4; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #eceff4; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #bf616a; @@ -3445,6 +3534,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4c566a; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #eceff4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #5e81ac; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #eceff4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #81a1c1; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #d8dee9; color: #2e3440; @@ -3642,6 +3743,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #4c566a; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #eceff4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #5e81ac; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #eceff4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #81a1c1; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #c0d0e0; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index e4303d8c7ed..499db1549a0 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #d8222f; } + .p-cascadeselect.p-variant-filled { + background-color: #f2f4f8; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f2f4f8; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #0e5d9a; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f4f8; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #1174c0; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f2f4f8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #0e5d9a; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #d8222f; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #d8222f; } + .p-dropdown.p-variant-filled { + background-color: #f2f4f8; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f2f4f8; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1173,6 +1203,16 @@ right: 0.25rem; } + .p-inputmask.p-variant-filled { + background-color: #f2f4f8; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f2f4f8; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #d8222f; } @@ -1192,6 +1232,16 @@ right: 2.607rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f2f4f8; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f2f4f8; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #d8222f; } + .p-inputtext.p-variant-filled { + background-color: #f2f4f8; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f2f4f8; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.21875rem 0.21875rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + .p-multiselect.p-variant-filled { + background: #f2f4f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f4f8; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.125rem 0.25rem; @@ -1685,6 +1753,18 @@ background: #0e5d9a; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f2f4f8; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f2f4f8; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #1174c0; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #0e5d9a; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #d8222f; @@ -1916,6 +1996,15 @@ border-top-right-radius: 1px; border-bottom-right-radius: 1px; } + .p-treeselect.p-variant-filled { + background-color: #f2f4f8; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f2f4f8; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #d8222f; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #343a3f; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f4f8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #1174c0; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f2f4f8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0e5d9a; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #44a1d9; color: #ffffff; @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #343a3f; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f4f8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #1174c0; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f2f4f8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0e5d9a; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #90c9f5; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 3b616400594..3edc30a74fa 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect.p-variant-filled { + background-color: #f4f4f4; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #005b9f; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown.p-variant-filled { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-dropdown-panel { background: #ffffff; @@ -1173,6 +1203,16 @@ right: 0.429rem; } + .p-inputmask.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } @@ -1192,6 +1232,16 @@ right: 2.786rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; @@ -1685,6 +1753,18 @@ background: #005b9f; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #007ad9; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #005b9f; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #f4f4f4; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #e02365; color: #ffffff; @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #8dcdff; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index 2425f636eb4..3c611959a37 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect.p-variant-filled { + background-color: #f4f4f4; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #005b9f; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown.p-variant-filled { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-dropdown-panel { background: #ffffff; @@ -1177,6 +1207,16 @@ right: 0.429rem; } + .p-inputmask.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } @@ -1196,6 +1236,16 @@ right: 2.786rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; @@ -1689,6 +1757,18 @@ background: #005b9f; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #007ad9; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #005b9f; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; @@ -1928,6 +2008,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #f4f4f4; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007ad9; color: #ffffff; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #8dcdff; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index ae75281603e..5c2aa474a8e 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #a80000; } + .p-cascadeselect.p-variant-filled { + background-color: #f4f4f4; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #005b9f; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #a80000; @@ -994,6 +1015,15 @@ .p-dropdown.p-invalid.p-component { border-color: #a80000; } + .p-dropdown.p-variant-filled { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-dropdown-panel { background: #ffffff; @@ -1177,6 +1207,16 @@ right: 0.429rem; } + .p-inputmask.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #a80000; } @@ -1196,6 +1236,16 @@ right: 2.786rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + .p-inputotp { display: flex; align-items: center; @@ -1274,6 +1324,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #a80000; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1490,6 +1549,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; @@ -1689,6 +1757,18 @@ background: #005b9f; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #007ad9; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #005b9f; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #a80000; @@ -1928,6 +2008,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #f4f4f4; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #a80000; @@ -3431,6 +3520,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #007ad9; color: #ffffff; @@ -3628,6 +3729,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #333333; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #007ad9; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #005b9f; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #8dcdff; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index 18e28a508da..d73cf164aa0 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #e7a3a3; } + .p-cascadeselect.p-variant-filled { + background-color: #f4f4f4; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #617c8a; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #7b95a3; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #617c8a; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #e7a3a3; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #e7a3a3; } + .p-dropdown.p-variant-filled { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-dropdown-panel { background: #ffffff; @@ -1173,6 +1203,16 @@ right: 0.429rem; } + .p-inputmask.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #e7a3a3; } @@ -1192,6 +1232,16 @@ right: 2.786rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f4f4f4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f4f4f4; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f4f4f4; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #e7a3a3; } + .p-inputtext.p-variant-filled { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.375375rem 0.375375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-multiselect.p-variant-filled { + background: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f4f4f4; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.2145rem 0.429rem; @@ -1685,6 +1753,18 @@ background: #617c8a; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f4f4f4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #7b95a3; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #617c8a; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #e7a3a3; @@ -1916,6 +1996,15 @@ border-top-right-radius: 2px; border-bottom-right-radius: 2px; } + .p-treeselect.p-variant-filled { + background-color: #f4f4f4; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f4f4f4; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #f4f4f4; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #e7a3a3; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #666666; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #7b95a3; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #617c8a; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #afd3c8; color: #385048; @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #666666; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f4f4f4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #7b95a3; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f4f4f4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #617c8a; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #e4e9ec; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index bee78ef1cf6..af0f0a298c4 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #0b7ad1; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2196F3; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #0b7ad1; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown.p-variant-filled { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8f9fa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8f9fa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #0b7ad1; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8f9fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #2196F3; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #0b7ad1; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2196F3; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0b7ad1; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #E3F2FD; color: #495057; @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #2196F3; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #0b7ad1; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #a6d5fa; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index d6cac28963e..f157f70274b 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #3d8c40; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #4CAF50; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #3d8c40; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown.p-variant-filled { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8f9fa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8f9fa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #3d8c40; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8f9fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #4CAF50; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #3d8c40; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #4CAF50; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #3d8c40; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #E8F5E9; color: #495057; @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #4CAF50; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #3d8c40; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #b7e0b8; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index b2b1762e158..2fa5b54788d 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #d29d00; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFC107; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #d29d00; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown.p-variant-filled { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8f9fa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8f9fa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #d29d00; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8f9fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #FFC107; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #d29d00; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFC107; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #d29d00; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #FFF3E0; color: #495057; @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFC107; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #d29d00; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #ffe69c; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index b6b3d3c9dae..3fbcf5a8575 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f44336; } + .p-cascadeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -851,6 +860,18 @@ background: #7d1f8d; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9C27B0; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #7d1f8d; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f44336; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f44336; } + .p-dropdown.p-variant-filled { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f44336; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f8f9fa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f8f9fa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f44336; } + .p-inputtext.p-variant-filled { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #7d1f8d; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f8f9fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f8f9fa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #9C27B0; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #7d1f8d; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f44336; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f8f9fa; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f44336; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9C27B0; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #7d1f8d; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #F3E5F5; color: #495057; @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #495057; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f8f9fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9C27B0; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f8f9fa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #7d1f8d; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #df9eea; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index 345334fcb7f..aa8e2746dde 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -757,6 +757,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ff9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #3e4053; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #3e4053; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #3e4053; + } .p-cascadeselect-panel { background: #282936; @@ -873,6 +882,18 @@ background: #9378f4; color: #1c1d26; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3e4053; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #b19df7; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #3e4053; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #9378f4; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff9a9a; @@ -1012,6 +1033,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ff9a9a; } + .p-dropdown.p-variant-filled { + background-color: #3e4053; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #3e4053; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #3e4053; + } .p-dropdown-panel { background: #282936; @@ -1195,6 +1225,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #3e4053; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #3e4053; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #3e4053; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ff9a9a; } @@ -1214,6 +1254,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #3e4053; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #3e4053; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #3e4053; + } + .p-inputotp { display: flex; align-items: center; @@ -1292,6 +1342,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ff9a9a; } + .p-inputtext.p-variant-filled { + background-color: #3e4053; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #3e4053; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #3e4053; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1508,6 +1567,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #3e4053; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #3e4053; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #3e4053; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1707,6 +1775,18 @@ background: #9378f4; color: #1c1d26; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #3e4053; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #3e4053; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #b19df7; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #9378f4; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ff9a9a; @@ -1938,6 +2018,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #3e4053; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #3e4053; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #3e4053; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ff9a9a; @@ -3441,6 +3530,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3e4053; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #b19df7; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #3e4053; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9378f4; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(177, 157, 247, 0.16); color: #b19df7; @@ -3638,6 +3739,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #3e4053; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #b19df7; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #3e4053; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #9378f4; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #e0d8fc; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index f2eae269fc1..03793f689c2 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -757,6 +757,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ff6767; } + .p-cascadeselect.p-variant-filled { + background-color: #f6f9fc; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f6f9fc; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -873,6 +882,18 @@ background: #5935f1; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f6f9fc; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #7254f3; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f6f9fc; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #5935f1; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ff6767; @@ -1012,6 +1033,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ff6767; } + .p-dropdown.p-variant-filled { + background-color: #f6f9fc; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f6f9fc; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1195,6 +1225,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f6f9fc; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f6f9fc; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ff6767; } @@ -1214,6 +1254,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f6f9fc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f6f9fc; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1292,6 +1342,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ff6767; } + .p-inputtext.p-variant-filled { + background-color: #f6f9fc; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f6f9fc; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1508,6 +1567,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f6f9fc; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f6f9fc; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1707,6 +1775,18 @@ background: #5935f1; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f6f9fc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f6f9fc; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #7254f3; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #5935f1; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ff6767; @@ -1938,6 +2018,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f6f9fc; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f6f9fc; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ff6767; @@ -3441,6 +3530,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #043d75; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f6f9fc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #7254f3; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f6f9fc; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #5935f1; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #e2dcfc; color: #7254f3; @@ -3638,6 +3739,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #043d75; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f6f9fc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #7254f3; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f6f9fc; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #5935f1; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #c7bbfa; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index 48d9f6a72f3..a2af0fd5cbb 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -771,6 +771,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f0a9a7; } + .p-cascadeselect.p-variant-filled { + background-color: #fafafa; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #fafafa; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-cascadeselect-panel { background: #ffffff; @@ -887,6 +896,18 @@ background: #4f46e5; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #fafafa; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #4f46e5; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #fafafa; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #4f46e5; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f0a9a7; @@ -1026,6 +1047,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f0a9a7; } + .p-dropdown.p-variant-filled { + background-color: #fafafa; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #fafafa; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-dropdown-panel { background: #ffffff; @@ -1209,6 +1239,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #fafafa; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #fafafa; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #ffffff; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f0a9a7; } @@ -1228,6 +1268,16 @@ right: 3.75rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #fafafa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #fafafa; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #ffffff; + } + .p-inputotp { display: flex; align-items: center; @@ -1306,6 +1356,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f0a9a7; } + .p-inputtext.p-variant-filled { + background-color: #fafafa; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #fafafa; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #ffffff; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.65625rem 0.65625rem; @@ -1522,6 +1581,15 @@ border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-multiselect.p-variant-filled { + background: #fafafa; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #fafafa; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #ffffff; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.375rem 0.75rem; @@ -1721,6 +1789,18 @@ background: #4f46e5; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #fafafa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #fafafa; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #4f46e5; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #4f46e5; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f0a9a7; @@ -1952,6 +2032,15 @@ border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } + .p-treeselect.p-variant-filled { + background-color: #fafafa; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #fafafa; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #ffffff; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f0a9a7; @@ -3455,6 +3544,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #3f3f46; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #fafafa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #4f46e5; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #fafafa; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #4f46e5; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #eef2ff; color: #312e81; @@ -3652,6 +3753,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #3f3f46; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #fafafa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #4f46e5; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #fafafa; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #4f46e5; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #6366f1; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index b7b7d12ef31..eabb76cace2 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-cascadeselect-panel { background: #1f2d40; @@ -851,6 +860,18 @@ background: #2396f2; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #64B5F6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #2396f2; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown.p-variant-filled { + background-color: #304562; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-dropdown-panel { background: #1f2d40; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #304562; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #304562; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #304562; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #304562; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #304562; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #2396f2; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #304562; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #304562; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #64B5F6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #2396f2; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #304562; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #64B5F6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #2396f2; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(100, 181, 246, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #64B5F6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #2396f2; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #93cbf9; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 9f579806e96..1870b3ae83d 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-cascadeselect-panel { background: #1f2d40; @@ -851,6 +860,18 @@ background: #54b358; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81C784; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #54b358; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown.p-variant-filled { + background-color: #304562; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-dropdown-panel { background: #1f2d40; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #304562; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #304562; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #304562; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #304562; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #304562; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #54b358; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #304562; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #304562; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #81C784; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #54b358; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #304562; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81C784; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #54b358; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(129, 199, 132, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #81C784; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #54b358; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #a7d8a9; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 2355511f532..3a40b55f10d 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-cascadeselect-panel { background: #1f2d40; @@ -851,6 +860,18 @@ background: #ffc50c; color: #212529; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFD54F; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #ffc50c; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown.p-variant-filled { + background-color: #304562; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-dropdown-panel { background: #1f2d40; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #304562; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #304562; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #304562; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #304562; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #304562; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #ffc50c; color: #212529; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #304562; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #304562; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #FFD54F; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #ffc50c; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #304562; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFD54F; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #ffc50c; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(255, 213, 79, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #FFD54F; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #ffc50c; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #ffe284; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index 045d11788ed..0ea7330fb16 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -735,6 +735,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #ef9a9a; } + .p-cascadeselect.p-variant-filled { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-cascadeselect-panel { background: #1f2d40; @@ -851,6 +860,18 @@ background: #a241b2; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #BA68C8; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #a241b2; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #ef9a9a; @@ -990,6 +1011,15 @@ .p-dropdown.p-invalid.p-component { border-color: #ef9a9a; } + .p-dropdown.p-variant-filled { + background-color: #304562; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-dropdown-panel { background: #1f2d40; @@ -1173,6 +1203,16 @@ right: 0.5rem; } + .p-inputmask.p-variant-filled { + background-color: #304562; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #304562; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #ef9a9a; } @@ -1192,6 +1232,16 @@ right: 2.857rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #304562; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #304562; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #304562; + } + .p-inputotp { display: flex; align-items: center; @@ -1270,6 +1320,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #ef9a9a; } + .p-inputtext.p-variant-filled { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #304562; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.4375rem; @@ -1486,6 +1545,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-multiselect.p-variant-filled { + background: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #304562; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #304562; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.5rem; @@ -1685,6 +1753,18 @@ background: #a241b2; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #304562; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #304562; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #BA68C8; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #a241b2; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #ef9a9a; @@ -1916,6 +1996,15 @@ border-top-right-radius: 3px; border-bottom-right-radius: 3px; } + .p-treeselect.p-variant-filled { + background-color: #304562; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #304562; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #304562; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #ef9a9a; @@ -3419,6 +3508,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #BA68C8; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #a241b2; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(186, 104, 200, 0.16); color: rgba(255, 255, 255, 0.87); @@ -3616,6 +3717,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #304562; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #BA68C8; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #304562; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #a241b2; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #cf95d9; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index 4b04ea01ec5..89ebd06bc1d 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -765,6 +765,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f78c79; } + .p-cascadeselect.p-variant-filled { + background-color: #263238; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #263238; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #263238; + } .p-cascadeselect-panel { background: #161d21; @@ -881,6 +890,18 @@ background: #7f93de; color: #121212; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #263238; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9eade6; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #263238; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #7f93de; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f78c79; @@ -1020,6 +1041,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f78c79; } + .p-dropdown.p-variant-filled { + background-color: #263238; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #263238; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #263238; + } .p-dropdown-panel { background: #161d21; @@ -1203,6 +1233,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #263238; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #263238; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #263238; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f78c79; } @@ -1222,6 +1262,16 @@ right: 3.607rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #263238; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #263238; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #263238; + } + .p-inputotp { display: flex; align-items: center; @@ -1300,6 +1350,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f78c79; } + .p-inputtext.p-variant-filled { + background-color: #263238; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #263238; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #263238; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1516,6 +1575,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #263238; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #263238; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #263238; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1715,6 +1783,18 @@ background: #7f93de; color: #121212; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #263238; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #263238; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #9eade6; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #7f93de; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f78c79; @@ -1946,6 +2026,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #263238; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #263238; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #263238; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f78c79; @@ -3449,6 +3538,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #263238; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9eade6; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #263238; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #7f93de; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: rgba(158, 173, 230, 0.16); color: #9eade6; @@ -3646,6 +3747,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: rgba(255, 255, 255, 0.87); } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #263238; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #9eade6; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #263238; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #7f93de; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #9eade6; outline-offset: -0.15rem; diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index 7405c400b2b..570b85a584c 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -766,6 +766,15 @@ .p-cascadeselect.p-invalid.p-component { border-color: #f88c79; } + .p-cascadeselect.p-variant-filled { + background-color: #f2f2f2; + } + .p-cascadeselect.p-variant-filled:enabled:hover { + background-color: #f2f2f2; + } + .p-cascadeselect.p-variant-filled:enabled:focus { + background-color: #f2f2f2; + } .p-cascadeselect-panel { background: #ffffff; @@ -882,6 +891,18 @@ background: #3c5ece; color: #ffffff; } + .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f2f2; + } + .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #5472d4; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box:hover { + background-color: #f2f2f2; + } + .p-checkbox.p-variant-filled:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { + background: #3c5ece; + } p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box { border-color: #f88c79; @@ -1021,6 +1042,15 @@ .p-dropdown.p-invalid.p-component { border-color: #f88c79; } + .p-dropdown.p-variant-filled { + background-color: #f2f2f2; + } + .p-dropdown.p-variant-filled:enabled:hover { + background-color: #f2f2f2; + } + .p-dropdown.p-variant-filled:enabled:focus { + background-color: #f2f2f2; + } .p-dropdown-panel { background: #ffffff; @@ -1204,6 +1234,16 @@ right: 0.75rem; } + .p-inputmask.p-variant-filled { + background-color: #f2f2f2; + } + .p-inputmask.p-variant-filled:enabled:hover { + background-color: #f2f2f2; + } + .p-inputmask.p-variant-filled:enabled:focus { + background-color: #f2f2f2; + } + p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext { border-color: #f88c79; } @@ -1223,6 +1263,16 @@ right: 3.607rem; } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input { + background-color: #f2f2f2; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:hover { + background-color: #f2f2f2; + } + p-inputnumber.p-inputnumber.p-variant-filled > .p-inputnumber-input:enabled:focus { + background-color: #f2f2f2; + } + .p-inputotp { display: flex; align-items: center; @@ -1301,6 +1351,15 @@ .p-inputtext.ng-dirty.ng-invalid { border-color: #f88c79; } + .p-inputtext.p-variant-filled { + background-color: #f2f2f2; + } + .p-inputtext.p-variant-filled:enabled:hover { + background-color: #f2f2f2; + } + .p-inputtext.p-variant-filled:enabled:focus { + background-color: #f2f2f2; + } .p-inputtext.p-inputtext-sm { font-size: 0.875rem; padding: 0.4375rem 0.65625rem; @@ -1517,6 +1576,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-multiselect.p-variant-filled { + background: #f2f2f2; + } + .p-multiselect.p-variant-filled:not(.p-disabled):hover { + background-color: #f2f2f2; + } + .p-multiselect.p-variant-filled:not(.p-disabled).p-focus { + background-color: #f2f2f2; + } .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label { padding: 0.25rem 0.75rem; @@ -1716,6 +1784,18 @@ background: #3c5ece; color: #ffffff; } + .p-radiobutton.p-variant-filled .p-radiobutton-box { + background-color: #f2f2f2; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box:not(.p-disabled):hover { + background-color: #f2f2f2; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight { + background: #5472d4; + } + .p-radiobutton.p-variant-filled .p-radiobutton-box.p-highlight:not(.p-disabled):hover { + background: #3c5ece; + } p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box { border-color: #f88c79; @@ -1947,6 +2027,15 @@ border-top-right-radius: 6px; border-bottom-right-radius: 6px; } + .p-treeselect.p-variant-filled { + background-color: #f2f2f2; + } + .p-treeselect.p-variant-filled:enabled:hover { + background-color: #f2f2f2; + } + .p-treeselect.p-variant-filled:enabled:focus { + background-color: #f2f2f2; + } p-treeselect.ng-invalid.ng-dirty > .p-treeselect { border-color: #f88c79; @@ -3450,6 +3539,18 @@ .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox .p-indeterminate .p-checkbox-icon { color: #6c6c6c; } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f2f2; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #5472d4; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f2f2f2; + } + .p-tree .p-tree-container .p-treenode .p-treenode-content .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #3c5ece; + } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { background: #ced6f1; color: #585858; @@ -3647,6 +3748,18 @@ .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox .p-indeterminate .p-checkbox-icon { color: #6c6c6c; } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box { + background-color: #f2f2f2; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled .p-checkbox-box.p-highlight { + background: #5472d4; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box:hover { + background-color: #f2f2f2; + } + .p-treetable .p-treetable-tbody > tr > td p-treetablecheckbox .p-checkbox.p-variant-filled:not(.p-disabled) .p-checkbox-box.p-highlight:hover { + background: #3c5ece; + } .p-treetable .p-treetable-tbody > tr:focus-visible { outline: 0.15rem solid #bbc7ee; outline-offset: -0.15rem; diff --git a/tsconfig.json b/tsconfig.json index 2dd98783b21..3052e9d9d89 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,12 @@ "resolveJsonModule": true, "esModuleInterop": true, "paths": { - "primeng/*": ["src/app/components/*/public_api"] + "primeng/*": ["src/app/components/*/public_api"], + "@pages/*": ["src/app/showcase/pages/*"], + "@doc/*": ["src/app/showcase/doc/*"], + "@domain/*": ["src/app/showcase/domain/*"], + "@service/*": ["src/app/showcase/service/*"], + "@layout/*": ["src/app/showcase/layout/*"] } }, "exclude": ["node_modules", "**/node_modules/*", "src/app/components/**/*spec.ts"],