@@ -121,12 +121,12 @@ export class FrozenRowsDoc {
{{customer.company}}
{{customer.representative.name}}
-
@@ -140,13 +140,13 @@ export class FrozenRowsDoc {
{{customer.company}}
{{customer.representative.name}}
-
@@ -155,11 +155,11 @@ export class FrozenRowsDoc {
`,
html: `
-
@@ -177,12 +177,12 @@ export class FrozenRowsDoc {
{{customer.company}}
{{customer.representative.name}}
-
@@ -196,13 +196,13 @@ export class FrozenRowsDoc {
{{customer.company}}
{{customer.representative.name}}
-
@@ -212,8 +212,8 @@ export class FrozenRowsDoc {
`,
typescript: `import { Component, OnInit } from '@angular/core';
-import { Customer } from '@domain/customer';
-import { CustomerService } from '@service/customerservice';
+import { Customer } from '@/domain/customer';
+import { CustomerService } from '@/service/customerservice';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { RippleModule } from 'primeng/ripple';
diff --git a/apps/showcase/doc/table/gridlinesdoc.ts b/apps/showcase/doc/table/gridlinesdoc.ts
new file mode 100644
index 00000000000..a5c5ce2842a
--- /dev/null
+++ b/apps/showcase/doc/table/gridlinesdoc.ts
@@ -0,0 +1,154 @@
+import { Code } from '@/domain/code';
+import { Product } from '@/domain/product';
+import { ProductService } from '@/service/productservice';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+
+@Component({
+ selector: 'gridlines-doc',
+ template: `
+ Enabling showGridlines displays borders between cells.
+
+
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+
+
+
+ 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 }}
+
+
+
+
+
+ Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging , sorting and filtering happens. Sample here loads
+ the data from remote datasource efficiently using lazy loading. Also, the implementation of checkbox selection in lazy tables is left entirely to the user. Since the table component does not know what will happen to the data on
+ the next page or whether there are instant data changes, the selection array can be implemented in several ways. One of them is as in the example below.
+
+
+
+
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ option.name }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+
+
+
+ Name
+
+ Country
+
+ Company
+
+ Representative
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ option.name }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+ `,
+ html: `
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ option.name }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+ Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page. For server side pagination, see the lazy loading
+ example.
+
+
+
+
+
+
+
+ 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: `
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+ paginator localization information such as page numbers and rows per page options are defined with the
+ paginatorLocale property which defaults to the user locale.
+
+
+
+
+
+
+
+ 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: `
+
+
+
+
+ Name
+ Country
+ Company
+ Representative
+
+
+
+
+ {{ customer.name }}
+ {{ customer.country.name }}
+ {{ customer.company }}
+ {{ customer.representative.name }}
+
+
+
+
+
+
+
+
+
+ Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding
+ reorderableColumns property.
+
+
+ Similarly, adding reorderableRows property enables draggable rows. For the drag handle a column needs to have rowReorder property and onRowReorder callback is required to control the state of the rows after
+ reorder completes.
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+
+
+
+
+ {{col.header}}
+
+
+
+
+
+
+
+
+ {{rowData[col.field]}}
+
+
+
+ `,
+ html: `
+
+
+
+
+ {{col.header}}
+
+
+
+
+
+
+
+
+ {{rowData[col.field]}}
+
+
+
+
+
+ In addition to a regular table, alternatives with alternative sizes are available.
+
+
+
+
+
+
+
+ Code
+ Name
+ Category
+ Quantity
+
+
+
+
+ {{ product.code }}
+ {{ product.name }}
+ {{ product.category }}
+ {{ product.quantity }}
+
+
+
+
+
+
+
+ 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 }}
+
+
+
+
+ Custom content at header , body and footer sections are supported via templating.
+
+
+
+
+
+
+
+
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+
+
+ {{ product.name }}
+
+
+ {{ product.price | currency: 'USD' }}
+ {{ product.category }}
+
+
+
+
+ In total there are {{ products ? products.length : 0 }} products.
+
+
+
+
+
+
+
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+
+
+ {{ product.name }}
+
+
+ {{ product.price | currency: 'USD' }}
+ {{ product.category }}
+
+
+
+
+ In total there are {{ products ? products.length : 0 }} products.
+ `,
+ html: `
+
+
+
+
+
+
+ Name
+ Image
+ Price
+ Category
+ Reviews
+ Status
+
+
+
+
+ {{ product.name }}
+
+
+ {{ product.price | currency: 'USD' }}
+ {{ product.category }}
+
+
+
+
+ In total there are {{ products ? products.length : 0 }} products.
+
+
+
+ VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also
+ suggested to use the same virtualScrollItemSize value on the tr element inside the body template.
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+ `,
+ html: `
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+
+ VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also
+ suggested to use the same virtualScrollItemSize value on the tr element inside the body template.
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+ {{ rowData[col.field] }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{col.header}}
+
+
+
+
+
+
+ {{rowData[col.field]}}
+
+
+
+
+
+
+
+
+
+ `,
+ html: `
+
+
+
+
+ {{col.header}}
+
+
+
+
+
+
+ {{rowData[col.field]}}
+
+
+
+
+
+
+
+
+
+
+
+ Tabs is defined using TabList , Tab , TabPanels and TabPanel components. Tab and TabPanel components are associated with their value properties
+
+
+
+
+ Header I
+ Header II
+ Header III
+
+
+
+
+ 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.
+
+
+
+
+
+
+ Header I
+ Header II
+ Header III
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+ dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+ modi.
+
+
+
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+ atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+ sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+ facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+ impedit quo minus.
+
+
+
+ `,
+
+ html: `
+
+
+ Header I
+ Header II
+ Header III
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+ dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+ modi.
+
+
+
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+ atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+ sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+ facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+ impedit quo minus.
+
+
+
+
+
+ Tabs can be controlled programmatically using value property as a model.
+
+
+
+
+
+ Header I
+ Header II
+ Header III
+
+
+
+
+ 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.
+
+
+
+
+
+
+ Header I
+ Header II
+ Header III
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+ laborum.
+
+
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
+ enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
+ qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
+
+
+
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
+ corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
+ culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
+ expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
+
+
+
+ `,
+
+ html: `
+
+
+
+ Header I
+ Header II
+ Header III
+
+
+
+
+ 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.
+
+
+
+
+
+ Enabling disabled property of a Tab prevents user interaction.
+
+
+
+
+ Header I
+ Header II
+ Header III
+ Header IV
+
+
+
+
+ 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.
+
+
+
+
+
+
+ Header I
+ Header II
+ Header III
+ Header IV
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+ dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+ modi.
+
+
+
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+ atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+ sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+ facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+ impedit quo minus.
+
+
+
+ `,
+
+ html: `
+
+
+ Header I
+ Header II
+ Header III
+ Header IV
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.
+
+
+
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+ aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
+ dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
+ modi.
+
+
+
+
+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
+ atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
+ sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
+ facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
+ impedit quo minus.
+
+
+
+
+
+ Tabs can be generated dynamically using the standard @for block.
+
+
+
+
+ @for (tab of tabs; track tab.value) {
+ {{ tab.title }}
+ }
+
+
+ @for (tab of tabs; track tab.value) {
+
+ {{ tab.content }}
+
+ }
+
+
+
+
+ @for (tab of tabs; track tab.value) {
+ {{ tab.title }}
+ }
+
+
+ @for (tab of tabs; track tab.value) {
+
+ {{ tab.content }}
+
+ }
+
+ `,
+
+ html: `
+
+
+ @for (tab of tabs; track tab.value) {
+ {{ tab.title }}
+ }
+
+
+ @for (tab of tabs; track tab.value) {
+
+ {{ tab.content }}
+
+ }
+
+
+
+ Label of the tag is defined with the value property.
+
+
+
+ A font icon next to the value can be displayed with the icon property.
+
+
+
+ Severity defines the color of the tag, possible values are success , info , warn and danger in addition to the default theme color.
+
+
+
+ Children of the component are passed as the content for templating.
+
+
+
+
+
+
Italy
+
+
+
+
+
+ Italy
+
+
`,
+ html: `
+
+
+
+
+ Italy
+
+
+
+ The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives.
+
+
+ Animations
+
+
+
+
+ Class
+ Property
+
+
+
+
+ animate-fadein
+ fadein 0.15s linear
+
+
+ animate-fadeout
+ fadeout 0.15s linear
+
+
+ animate-slidedown
+ slidedown 0.45s ease-in-out
+
+
+ animate-slideup
+ slideup 0.45s cubic-bezier(0, 1, 0, 1)
+
+
+ animate-scalein
+ scalein 0.15s linear
+
+
+ animate-fadeinleft
+ fadeinleft 0.15s linear
+
+
+ animate-fadeoutleft
+ fadeoutleft 0.15s linear
+
+
+ animate-fadeinright
+ fadeinright 0.15s linear
+
+
+ animate-fadeoutright
+ fadeoutright 0.15s linear
+
+
+ animate-fadeinup
+ fadeinup 0.15s linear
+
+
+ animate-fadeoutup
+ fadeoutup 0.15s linear
+
+
+ animate-fadeindown
+ fadeindown 0.15s linear
+
+
+ animate-fadeoutup
+ fadeoutup 0.15s linear
+
+
+ animate-width
+ width 0.15s linear
+
+
+ animate-flip
+ flip 0.15s linear
+
+
+ animate-flipup
+ flipup 0.15s linear
+
+
+ animate-flipleft
+ fadein 0.15s linear
+
+
+ animate-flipright
+ flipright 0.15s linear
+
+
+ animate-zoomin
+ zoomin 0.15s linear
+
+
+ animate-zoomindown
+ zoomindown 0.15s linear
+
+
+ animate-zoominleft
+ zoominleft 0.15s linear
+
+
+ animate-zoominright
+ zoominright 0.15s linear
+
+
+ animate-zoominup
+ zoominup 0.15s linear
+
+
+
+
Animation Duration
+
+
+
+
+ Class
+ Property
+
+
+
+
+ animate-duration-0
+ animation-duration: 0s
+
+
+ animate-duration-75
+ animation-duration: 75ms
+
+
+ animate-duration-100
+ animation-duration: 100ms
+
+
+ animate-duration-200
+ animation-duration: 200ms
+
+
+ animate-duration-300
+ animation-duration: 300ms
+
+
+ animate-duration-400
+ animation-duration: 400ms
+
+
+ animate-duration-500
+ animation-duration: 500ms
+
+
+ animate-duration-700
+ animation-duration: 700ms
+
+
+ animate-duration-1000
+ animation-duration: 1000ms
+
+
+ animate-duration-2000
+ animation-duration: 2000ms
+
+
+ animate-duration-3000
+ animation-duration: 300ms
+
+
+
+
Animation Delay
+
+
+
+
+ Class
+ Property
+
+
+
+
+ animate-delay-none
+ animation-duration: 0s
+
+
+ animate-delay-75
+ animation-delay: 75ms
+
+
+ animate-delay-100
+ animation-delay: 100ms
+
+
+ animate-delay-150
+ animation-delay: 150ms
+
+
+ animate-delay-200
+ animation-delay: 200ms
+
+
+ animate-delay-300
+ animation-delay: 300ms
+
+
+ animate-delay-400
+ animation-delay: 400ms
+
+
+ animate-delay-500
+ animation-delay: 500ms
+
+
+ animate-delay-700
+ animation-delay: 700ms
+
+
+ animate-delay-1000
+ animation-delay: 1000ms
+
+
+
+
Iteration Count
+
+
+
+
+ Class
+ Property
+
+
+
+
+ animate-infinite
+ animation-iteration-count: infinite
+
+
+ animate-once
+ animation-iteration-count: 1
+
+
+ animate-twice
+ animation-iteration-count: 2
+
+
+
+
Direction
+
+
+
+
+ Class
+ Property
+
+
+
+
+ animate-normal
+ animation-direction: normal
+
+
+ animate-reverse
+ animation-direction: reverse
+
+
+ animate-alternate
+ animation-direction: alternate
+
+
+ animate-alternate-reverse
+ animation-direction: alternate-reverse
+
+
+
+
Timing Function
+
+
+
+
+ Class
+ Property
+
+
+
+
+ animate-ease-linear
+ animation-timing-function: linear
+
+
+ animate-ease-in
+ animation-timing-function: cubic-bezier(0.4, 0, 1, 1)
+
+
+ animate-ease-out
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1)
+
+
+ animate-ease-in-out
+ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
+
+
+
+
Fill Mode
+
+
+
+
+ Class
+ Property
+
+
+
+
+ animate-fill-none
+ animation-fill-mode: normal
+
+
+ animate-fill-forwards
+ animation-fill-mode: forwards
+
+
+ animate-fill-backwards
+ animation-fill-mode: backwards
+
+
+ animate-fill-both
+ animation-fill-mode: both
+
+
+
+
Play State
+
+
+
+
+ Class
+ Property
+
+
+
+
+ animate-running
+ animation-play-state: running
+
+
+ animate-paused
+ animation-play-state: paused
+
+
+
+
Backface Visibility State
+
+
+
+
+ Class
+ Property
+
+
+
+
+ backface-visible
+ backface-visibility: visible
+
+
+ backface-hidden
+ backface-visibility: hidden
+
+
+
+
+ A headless PrimeNG dialog with a custom UI.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Username
+
+
+ Password
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Username
+
+
+ Password
+
+
+
+ `
+ };
+}
diff --git a/apps/showcase/src/app/showcase/doc/tailwind/overridedoc.ts b/apps/showcase/doc/tailwind/overridedoc.ts
similarity index 98%
rename from apps/showcase/src/app/showcase/doc/tailwind/overridedoc.ts
rename to apps/showcase/doc/tailwind/overridedoc.ts
index 519b3266f3e..942ab055198 100644
--- a/apps/showcase/src/app/showcase/doc/tailwind/overridedoc.ts
+++ b/apps/showcase/doc/tailwind/overridedoc.ts
@@ -1,5 +1,5 @@
+import { Code } from '@/domain/code';
import { Component } from '@angular/core';
-import { Code } from '@domain/code';
@Component({
selector: 'override-doc',
diff --git a/apps/showcase/src/app/showcase/doc/tailwind/overviewdoc.ts b/apps/showcase/doc/tailwind/overviewdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/tailwind/overviewdoc.ts
rename to apps/showcase/doc/tailwind/overviewdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/tailwind/plugindoc.ts b/apps/showcase/doc/tailwind/plugindoc.ts
similarity index 97%
rename from apps/showcase/src/app/showcase/doc/tailwind/plugindoc.ts
rename to apps/showcase/doc/tailwind/plugindoc.ts
index dd1cf4e7de4..b5732475fb8 100644
--- a/apps/showcase/src/app/showcase/doc/tailwind/plugindoc.ts
+++ b/apps/showcase/doc/tailwind/plugindoc.ts
@@ -1,5 +1,5 @@
+import { Code } from '@/domain/code';
import { Component } from '@angular/core';
-import { Code } from '@domain/code';
@Component({
selector: 'plugin-doc',
diff --git a/apps/showcase/src/app/showcase/doc/tailwind/tailwinddoc.module.ts b/apps/showcase/doc/tailwind/tailwinddoc.module.ts
similarity index 90%
rename from apps/showcase/src/app/showcase/doc/tailwind/tailwinddoc.module.ts
rename to apps/showcase/doc/tailwind/tailwinddoc.module.ts
index fd59c8c8d21..96483d5486f 100644
--- a/apps/showcase/src/app/showcase/doc/tailwind/tailwinddoc.module.ts
+++ b/apps/showcase/doc/tailwind/tailwinddoc.module.ts
@@ -1,24 +1,24 @@
+import { AppCodeModule } from '@/components/doc/app.code.component';
+import { AppDocModule } from '@/components/doc/app.doc.module';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { Button } from 'primeng/button';
-import { Tag } from 'primeng/tag';
-import { AppDocModule } from '@layout/doc/app.doc.module';
-import { AppCodeModule } from '@layout/doc/app.code.component';
-import { OverviewDoc } from './overviewdoc';
-import { PluginDoc } from './plugindoc';
-import { ExtensionsDoc } from './extensionsdoc';
-import { OverrideDoc } from './overridedoc';
-import { ColorPaletteDoc } from './colorpalettedoc';
-import { FormDoc } from './formdoc';
+import { DatePicker } from 'primeng/datepicker';
+import { Dialog } from 'primeng/dialog';
import { InputText } from 'primeng/inputtext';
import { Select } from 'primeng/select';
-import { DatePicker } from 'primeng/datepicker';
-import { FormsModule } from '@angular/forms';
+import { Tag } from 'primeng/tag';
import { Textarea } from 'primeng/textarea';
-import { HeadlessDoc } from './headlessdoc';
-import { Dialog } from 'primeng/dialog';
import { AnimationsDoc } from './animationsdoc';
+import { ColorPaletteDoc } from './colorpalettedoc';
+import { ExtensionsDoc } from './extensionsdoc';
+import { FormDoc } from './formdoc';
+import { HeadlessDoc } from './headlessdoc';
+import { OverrideDoc } from './overridedoc';
+import { OverviewDoc } from './overviewdoc';
+import { PluginDoc } from './plugindoc';
@NgModule({
imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, Tag, Button, InputText, Textarea, Select, DatePicker, FormsModule, Dialog],
diff --git a/apps/showcase/src/app/showcase/doc/terminal/accessibilitydoc.ts b/apps/showcase/doc/terminal/accessibilitydoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/terminal/accessibilitydoc.ts
rename to apps/showcase/doc/terminal/accessibilitydoc.ts
diff --git a/apps/showcase/doc/terminal/basicdoc.ts b/apps/showcase/doc/terminal/basicdoc.ts
new file mode 100644
index 00000000000..53c8bcda0c7
--- /dev/null
+++ b/apps/showcase/doc/terminal/basicdoc.ts
@@ -0,0 +1,76 @@
+import { Code } from '@/domain/code';
+import { Component, OnDestroy } from '@angular/core';
+import { TerminalService } from 'primeng/terminal';
+import { Subscription } from 'rxjs';
+
+@Component({
+ selector: 'basic-doc',
+ template: `
+
+ Commands are processed using observables via the TerminalService . Import this service into your component and subscribe to commandHandler to process commands by sending replies with sendResponse function.
+
+
+
Enter "date " to display the current date, "greet {0} " for a message and "random " to get a random number.
+
+
Enter "date " to display the current date,
+"greet {0} " for a message and "random "
+to get a random number.
+
+
Enter "date " to display the current date,
+ "greet {0} " for a message and "random "
+ to get a random number.
+
+
+
+ Screen Reader
+
+ Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby ,
+ aria-label props.
+
+
+
+
+
+
Keyboard Support
+
+
+
+
+ Key
+ Function
+
+
+
+
+
+ tab
+
+ Moves focus to the input.
+
+
+
+
+
Address 1
+
+
+Address 2
+
+
+`
+ };
+}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/autoresizedoc.ts b/apps/showcase/doc/textarea/autoresizedoc.ts
similarity index 96%
rename from apps/showcase/src/app/showcase/doc/textarea/autoresizedoc.ts
rename to apps/showcase/doc/textarea/autoresizedoc.ts
index 2a6f0ac4a51..31f88bd6d08 100644
--- a/apps/showcase/src/app/showcase/doc/textarea/autoresizedoc.ts
+++ b/apps/showcase/doc/textarea/autoresizedoc.ts
@@ -1,5 +1,5 @@
+import { Code } from '@/domain/code';
import { Component } from '@angular/core';
-import { Code } from '@domain/code';
@Component({
selector: 'autoresize-doc',
diff --git a/apps/showcase/doc/textarea/basicdoc.ts b/apps/showcase/doc/textarea/basicdoc.ts
new file mode 100644
index 00000000000..a005145c10e
--- /dev/null
+++ b/apps/showcase/doc/textarea/basicdoc.ts
@@ -0,0 +1,41 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'basic-doc',
+ template: `
+
+ Textarea is applied to an input field with pTextarea directive.
+
+
+
+
+
+
+
`,
+
+ typescript: `import { Component } from '@angular/core';
+import { Textarea } from 'primeng/textearea';;
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'input-textarea-basic-demo',
+ templateUrl: './input-textarea-basic-demo.html',
+ standalone: true,
+ imports: [FormsModule, Textarea]
+})
+
+export class InputTextareaBasicDemo {
+ value!: string;
+}`
+ };
+}
diff --git a/apps/showcase/doc/textarea/disableddoc.ts b/apps/showcase/doc/textarea/disableddoc.ts
new file mode 100644
index 00000000000..b14a97807a3
--- /dev/null
+++ b/apps/showcase/doc/textarea/disableddoc.ts
@@ -0,0 +1,37 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'disabled-doc',
+ template: `
+
+ When disabled is present, the element cannot be edited and focused.
+
+
+
+
+
+
+
`,
+
+ typescript: `import { Component } from '@angular/core';
+import { Textarea } from 'primeng/textearea';;
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'input-textarea-disabled-demo',
+ templateUrl: './input-textarea-disabled-demo.html',
+ standalone: true,
+ imports: [FormsModule, Textarea]
+})
+export class InputTextareaDisabledDemo {
+}`
+ };
+}
diff --git a/apps/showcase/doc/textarea/filleddoc.ts b/apps/showcase/doc/textarea/filleddoc.ts
new file mode 100644
index 00000000000..a801088c0ed
--- /dev/null
+++ b/apps/showcase/doc/textarea/filleddoc.ts
@@ -0,0 +1,41 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@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.
+
+
+
+
+
+
+
`,
+
+ typescript: `import { Component } from '@angular/core';
+import { Textarea } from 'primeng/textearea';;
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'input-textarea-filled-demo',
+ templateUrl: './input-textarea-filled-demo.html',
+ standalone: true,
+ imports: [FormsModule, Textarea]
+})
+
+export class InputTextareaFilledDemo {
+ value!: string;
+}`
+ };
+}
diff --git a/apps/showcase/doc/textarea/floatlabeldoc.ts b/apps/showcase/doc/textarea/floatlabeldoc.ts
new file mode 100644
index 00000000000..2b1a9b9f68a
--- /dev/null
+++ b/apps/showcase/doc/textarea/floatlabeldoc.ts
@@ -0,0 +1,91 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'floatlabel-doc',
+ template: `
+
+
+ A floating label appears on top of the input field when focused. Visit
+ FloatLabel documentation for more information.
+
+
+
+
+
+ Over Label
+
+
+
+
+ In Label
+
+
+
+
+ On Label
+
+
+
+ Over Label
+
+
+
+
+ In Label
+
+
+
+
+ On Label
+ `,
+
+ html: `
+
+
+ Over Label
+
+
+
+
+ In Label
+
+
+
+
+ On Label
+
+
+ IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+
+
+
+
+ Description
+ `,
+
+ html: ``,
+
+ typescript: `import { Component } from '@angular/core';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { FormsModule } from '@angular/forms';
+import { IftaLabelModule } from 'primeng/iftalabel';
+
+@Component({
+ selector: ': 'input-textarea-iftalabel-demo',
+ templateUrl: './: 'input-textarea-iftalabel-demo.html',
+ standalone: true,
+ imports: [FormsModule, InputTextareaModule, IftaLabelModule]
+})
+export class TextareaIftaLabelDemo {
+ value: string = '';
+}`
+ };
+}
diff --git a/apps/showcase/doc/textarea/importdoc.ts b/apps/showcase/doc/textarea/importdoc.ts
new file mode 100644
index 00000000000..ce363c56b7b
--- /dev/null
+++ b/apps/showcase/doc/textarea/importdoc.ts
@@ -0,0 +1,12 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'text-area-import-doc',
+ template: `
+ Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+
+
+
+
+
+
+
`,
+
+ typescript: `import { Component } from '@angular/core';
+import { Textarea } from 'primeng/textearea';;
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'input-textarea-invalid-demo',
+ templateUrl: './input-textarea-invalid-demo.html',
+ standalone: true,
+ imports: [FormsModule, Textarea]
+})
+export class InputTextareaInvalidDemo {
+ value!: string;
+}`
+ };
+}
diff --git a/apps/showcase/doc/textarea/keyfilterdoc.ts b/apps/showcase/doc/textarea/keyfilterdoc.ts
new file mode 100644
index 00000000000..7016900f015
--- /dev/null
+++ b/apps/showcase/doc/textarea/keyfilterdoc.ts
@@ -0,0 +1,47 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'key-filter-doc',
+ template: `
+
+ InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
+
+
+
+
+
+
+
`,
+
+ typescript: `import { Component } from '@angular/core';
+import { Textarea } from 'primeng/textearea';;
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector:'input-textarea-key-filter-demo',
+ templateUrl: './input-textarea-key-filter-demo.html',
+ standalone: true,
+ imports: [FormsModule, Textarea]
+})
+export class InputTextareaKeyFilterDemo {
+}`
+ };
+}
diff --git a/apps/showcase/doc/textarea/reactiveformsdoc.ts b/apps/showcase/doc/textarea/reactiveformsdoc.ts
new file mode 100644
index 00000000000..57bc5510913
--- /dev/null
+++ b/apps/showcase/doc/textarea/reactiveformsdoc.ts
@@ -0,0 +1,59 @@
+import { Code } from '@/domain/code';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+ selector: 'reactive-forms-doc',
+ template: `
+
+ Textarea can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+
+
+
+
+ (null)
+ });
+ }
+
+ code: Code = {
+ basic: ``,
+
+ html: `
+
+
`,
+
+ typescript: `import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Textarea } from 'primeng/textearea';;
+
+@Component({
+ selector: 'input-textarea-reactive-forms-demo',
+ templateUrl: './input-textarea-reactive-forms-demo.html',
+ standalone: true,
+ imports: [ReactiveFormsModule, Textarea],
+})
+export class InputTextareaReactiveFormsDemo implements OnInit {
+ formGroup!: FormGroup;
+
+ ngOnInit() {
+ this.formGroup = new FormGroup({
+ text: new FormControl(null)
+ });
+ }
+}`
+ };
+}
diff --git a/apps/showcase/doc/textarea/sizesdoc.ts b/apps/showcase/doc/textarea/sizesdoc.ts
new file mode 100644
index 00000000000..d08a8c97ee0
--- /dev/null
+++ b/apps/showcase/doc/textarea/sizesdoc.ts
@@ -0,0 +1,55 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'sizes-doc',
+ template: `
+
+ Textarea provides small and large sizes as alternatives to the base.
+
+
+
+
+
+
+
+
+
+
+
`,
+
+ typescript: `import { Component } from '@angular/core';
+import { Textarea } from 'primeng/textearea';;
+import { FormsModule } from '@angular/forms';
+
+@Component({
+ selector: 'input-textarea-sizes-demo',
+ templateUrl: './input-textarea-sizes-demo.html',
+ standalone: true,
+ imports: [FormsModule, Textarea]
+})
+
+export class InputTextareaSizesDemo {
+ value1!: string;
+
+ value2!: string;
+
+ value3!: string;
+}`
+ };
+}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/styledoc.ts b/apps/showcase/doc/textarea/styledoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/textarea/styledoc.ts
rename to apps/showcase/doc/textarea/styledoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/textarea/texteareadoc.module.ts b/apps/showcase/doc/textarea/texteareadoc.module.ts
similarity index 91%
rename from apps/showcase/src/app/showcase/doc/textarea/texteareadoc.module.ts
rename to apps/showcase/doc/textarea/texteareadoc.module.ts
index 8280fd9c75c..c355f695e10 100644
--- a/apps/showcase/src/app/showcase/doc/textarea/texteareadoc.module.ts
+++ b/apps/showcase/doc/textarea/texteareadoc.module.ts
@@ -1,27 +1,27 @@
+import { AppCodeModule } from '@/components/doc/app.code.component';
+import { AppDocModule } from '@/components/doc/app.doc.module';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { IftaLabelModule } from 'primeng/iftalabel';
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 { TextareaModule } from 'primeng/textarea';
import { AccessibilityDoc } from './accessibilitydoc';
import { AutoResizeDoc } from './autoresizedoc';
import { BasicDoc } from './basicdoc';
import { DisabledDoc } from './disableddoc';
+import { FilledDoc } from './filleddoc';
import { FloatlabelDoc } from './floatlabeldoc';
-import { InvalidDoc } from './invaliddoc';
+import { IftaLabelDoc } from './iftalabeldoc';
import { ImportDoc } from './importdoc';
+import { InvalidDoc } from './invaliddoc';
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';
-import { TextareaModule } from 'primeng/textarea';
-import { IftaLabelModule } from 'primeng/iftalabel';
-import { IftaLabelDoc } from './iftalabeldoc';
import { SizesDoc } from './sizesdoc';
+import { StyleDoc } from './styledoc';
@NgModule({
imports: [CommonModule, AppCodeModule, InputTextModule, FormsModule, ReactiveFormsModule, TextareaModule, AppDocModule, KeyFilterModule, FloatLabelModule, RouterModule, IftaLabelModule],
diff --git a/apps/showcase/src/app/showcase/doc/theming/architecturedoc.ts b/apps/showcase/doc/theming/architecturedoc.ts
similarity index 98%
rename from apps/showcase/src/app/showcase/doc/theming/architecturedoc.ts
rename to apps/showcase/doc/theming/architecturedoc.ts
index 0d0efeef87f..800d70dd42f 100644
--- a/apps/showcase/src/app/showcase/doc/theming/architecturedoc.ts
+++ b/apps/showcase/doc/theming/architecturedoc.ts
@@ -1,5 +1,4 @@
import { Component } from '@angular/core';
-import { Code } from '@domain/code';
@Component({
selector: 'architecture-doc',
diff --git a/apps/showcase/src/app/showcase/doc/theming/bootstrapdoc.ts b/apps/showcase/doc/theming/bootstrapdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/bootstrapdoc.ts
rename to apps/showcase/doc/theming/bootstrapdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/casedoc.ts b/apps/showcase/doc/theming/casedoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/casedoc.ts
rename to apps/showcase/doc/theming/casedoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/colorsdoc.ts b/apps/showcase/doc/theming/colorsdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/colorsdoc.ts
rename to apps/showcase/doc/theming/colorsdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/componentdoc.ts b/apps/showcase/doc/theming/componentdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/componentdoc.ts
rename to apps/showcase/doc/theming/componentdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/darkmodedoc.ts b/apps/showcase/doc/theming/darkmodedoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/darkmodedoc.ts
rename to apps/showcase/doc/theming/darkmodedoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/definepresetdoc.ts b/apps/showcase/doc/theming/definepresetdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/definepresetdoc.ts
rename to apps/showcase/doc/theming/definepresetdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/dtdoc.ts b/apps/showcase/doc/theming/dtdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/dtdoc.ts
rename to apps/showcase/doc/theming/dtdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/focusringdoc.ts b/apps/showcase/doc/theming/focusringdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/focusringdoc.ts
rename to apps/showcase/doc/theming/focusringdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/fontdoc.ts b/apps/showcase/doc/theming/fontdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/fontdoc.ts
rename to apps/showcase/doc/theming/fontdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/formsdoc.ts b/apps/showcase/doc/theming/formsdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/formsdoc.ts
rename to apps/showcase/doc/theming/formsdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/librariesdoc.ts b/apps/showcase/doc/theming/librariesdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/librariesdoc.ts
rename to apps/showcase/doc/theming/librariesdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/noirdoc.ts b/apps/showcase/doc/theming/noirdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/noirdoc.ts
rename to apps/showcase/doc/theming/noirdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/optionsdoc.ts b/apps/showcase/doc/theming/optionsdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/optionsdoc.ts
rename to apps/showcase/doc/theming/optionsdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/palettedoc.ts b/apps/showcase/doc/theming/palettedoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/palettedoc.ts
rename to apps/showcase/doc/theming/palettedoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/presetsdoc.ts b/apps/showcase/doc/theming/presetsdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/presetsdoc.ts
rename to apps/showcase/doc/theming/presetsdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/primarydoc.ts b/apps/showcase/doc/theming/primarydoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/primarydoc.ts
rename to apps/showcase/doc/theming/primarydoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/resetdoc.ts b/apps/showcase/doc/theming/resetdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/resetdoc.ts
rename to apps/showcase/doc/theming/resetdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/reversedkeysdoc.ts b/apps/showcase/doc/theming/reversedkeysdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/reversedkeysdoc.ts
rename to apps/showcase/doc/theming/reversedkeysdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/scaledoc.ts b/apps/showcase/doc/theming/scaledoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/scaledoc.ts
rename to apps/showcase/doc/theming/scaledoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/scopedtokensdoc.ts b/apps/showcase/doc/theming/scopedtokensdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/scopedtokensdoc.ts
rename to apps/showcase/doc/theming/scopedtokensdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/specifitydoc.ts b/apps/showcase/doc/theming/specifitydoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/specifitydoc.ts
rename to apps/showcase/doc/theming/specifitydoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/surfacedoc.ts b/apps/showcase/doc/theming/surfacedoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/surfacedoc.ts
rename to apps/showcase/doc/theming/surfacedoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/tailwinddoc.ts b/apps/showcase/doc/theming/tailwinddoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/tailwinddoc.ts
rename to apps/showcase/doc/theming/tailwinddoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/themedoc.ts b/apps/showcase/doc/theming/themedoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/themedoc.ts
rename to apps/showcase/doc/theming/themedoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/themingdoc.module.ts b/apps/showcase/doc/theming/themingdoc.module.ts
similarity index 96%
rename from apps/showcase/src/app/showcase/doc/theming/themingdoc.module.ts
rename to apps/showcase/doc/theming/themingdoc.module.ts
index 8b746d99d76..14c80229eef 100644
--- a/apps/showcase/src/app/showcase/doc/theming/themingdoc.module.ts
+++ b/apps/showcase/doc/theming/themingdoc.module.ts
@@ -1,14 +1,14 @@
+import { AppCodeModule } from '@/components/doc/app.code.component';
+import { AppDocModule } from '@/components/doc/app.doc.module';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { 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 { ArchitectureDoc } from './architecturedoc';
import { TabsModule } from 'primeng/tabs';
import { ToggleSwitch } from 'primeng/toggleswitch';
-import { FormsModule } from '@angular/forms';
+import { ArchitectureDoc } from './architecturedoc';
import { BootstrapDoc } from './bootstrapdoc';
import { CaseDoc } from './casedoc';
import { ColorsDoc } from './colorsdoc';
@@ -30,13 +30,13 @@ import { ReversedKeysDoc } from './reversedkeysdoc';
import { ScaleDoc } from './scaledoc';
import { ScopedTokensDoc } from './scopedtokensdoc';
import { SpecificityDoc } from './specifitydoc';
+import { SurfaceDoc } from './surfacedoc';
import { TailwindDoc } from './tailwinddoc';
import { ThemeDoc } from './themedoc';
import { UpdatePresetDoc } from './updatepresetdoc';
import { UpdatePrimaryPaletteDoc } from './updateprimarypalettedoc';
import { UpdateSurfacePaletteDoc } from './updatesurfacepalettedoc';
import { UsePresetDoc } from './usepresetdoc';
-import { SurfaceDoc } from './surfacedoc';
@NgModule({
imports: [CommonModule, RouterModule, TabsModule, AppCodeModule, AppDocModule, ButtonModule, PanelModule, ToggleSwitch, FormsModule],
diff --git a/apps/showcase/src/app/showcase/doc/theming/updatepresetdoc.ts b/apps/showcase/doc/theming/updatepresetdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/updatepresetdoc.ts
rename to apps/showcase/doc/theming/updatepresetdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/updateprimarypalettedoc.ts b/apps/showcase/doc/theming/updateprimarypalettedoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/updateprimarypalettedoc.ts
rename to apps/showcase/doc/theming/updateprimarypalettedoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/updatesurfacepalettedoc.ts b/apps/showcase/doc/theming/updatesurfacepalettedoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/updatesurfacepalettedoc.ts
rename to apps/showcase/doc/theming/updatesurfacepalettedoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/theming/usepresetdoc.ts b/apps/showcase/doc/theming/usepresetdoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/theming/usepresetdoc.ts
rename to apps/showcase/doc/theming/usepresetdoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/tieredmenu/accessibilitydoc.ts b/apps/showcase/doc/tieredmenu/accessibilitydoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/tieredmenu/accessibilitydoc.ts
rename to apps/showcase/doc/tieredmenu/accessibilitydoc.ts
diff --git a/apps/showcase/doc/tieredmenu/basicdoc.ts b/apps/showcase/doc/tieredmenu/basicdoc.ts
new file mode 100644
index 00000000000..6d50fda7db5
--- /dev/null
+++ b/apps/showcase/doc/tieredmenu/basicdoc.ts
@@ -0,0 +1,185 @@
+import { Code } from '@/domain/code';
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+ selector: 'basic-doc',
+ template: `
+
+ TieredMenu requires a collection of menuitems as its model .
+
+
+
+ The command property defines the callback to run when an item is activated by click or a key event.
+
+
+
+ Popup mode is enabled by adding popup property and calling toggle method with an event of the target.
+
+
+
+ Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TieredMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.
+
+
+
+
+
+
+ `,
+
+ html: ``,
+
+ typescript: `import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { TieredMenu } from 'primeng/tieredmenu';
+import { BadgeModule } from 'primeng/badge';
+import { CommonModule } from '@angular/common';
+import { Ripple } from 'primeng/ripple';
+
+@Component({
+ selector: 'tiered-menu-template-demo',
+ templateUrl: './tiered-menu-template-demo.html',
+ standalone: true,
+ imports: [TieredMenu, BadgeModule, Ripple, CommonModule]
+})
+export class TieredMenuTemplateDemo implements OnInit {
+ items: MenuItem[] | undefined;
+
+ ngOnInit() {
+ this.items = [
+ {
+ label: 'File',
+ icon: 'pi pi-file',
+ items: [
+ {
+ label: 'New',
+ icon: 'pi pi-plus',
+ items: [
+ {
+ label: 'Document',
+ icon: 'pi pi-file',
+ shortcut: '⌘+N'
+ },
+ {
+ label: 'Image',
+ icon: 'pi pi-image',
+ shortcut: '⌘+I'
+ },
+ {
+ label: 'Video',
+ icon: 'pi pi-video',
+ shortcut: '⌘+L'
+ }
+ ]
+ },
+ {
+ label: 'Open',
+ icon: 'pi pi-folder-open',
+ shortcut: '⌘+O'
+ },
+ {
+ label: 'Print',
+ icon: 'pi pi-print',
+ shortcut: '⌘+P'
+ }
+ ]
+ },
+ {
+ label: 'Edit',
+ icon: 'pi pi-file-edit',
+ items: [
+ {
+ label: 'Copy',
+ icon: 'pi pi-copy',
+ shortcut: '⌘+C'
+ },
+ {
+ label: 'Delete',
+ icon: 'pi pi-times',
+ shortcut: '⌘+D'
+ }
+ ]
+ },
+ {
+ label: 'Search',
+ icon: 'pi pi-search',
+ shortcut: '⌘+S'
+ },
+ {
+ separator: true
+ },
+ {
+ label: 'Share',
+ icon: 'pi pi-share-alt',
+ items: [
+ {
+ label: 'Slack',
+ icon: 'pi pi-slack',
+ badge: '2'
+ },
+ {
+ label: 'Whatsapp',
+ icon: 'pi pi-whatsapp',
+ badge: '3'
+ }
+ ]
+ }
+ ]
+ }
+}`
+ };
+}
diff --git a/apps/showcase/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts b/apps/showcase/doc/tieredmenu/tieredmenudoc.module.ts
similarity index 89%
rename from apps/showcase/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts
rename to apps/showcase/doc/tieredmenu/tieredmenudoc.module.ts
index 23fc2120739..4b91b301d3a 100644
--- a/apps/showcase/src/app/showcase/doc/tieredmenu/tieredmenudoc.module.ts
+++ b/apps/showcase/doc/tieredmenu/tieredmenudoc.module.ts
@@ -1,22 +1,22 @@
+import { AppCodeModule } from '@/components/doc/app.code.component';
+import { AppDocModule } from '@/components/doc/app.doc.module';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
-import { TieredMenu } 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 { MessageService } from 'primeng/api';
import { BadgeModule } from 'primeng/badge';
+import { ButtonModule } from 'primeng/button';
+import { FloatLabel } from 'primeng/floatlabel';
+import { TieredMenu } from 'primeng/tieredmenu';
import { ToastModule } from 'primeng/toast';
+import { AccessibilityDoc } from './accessibilitydoc';
import { BasicDoc } from './basicdoc';
+import { CommandDoc } from './commanddoc';
import { ImportDoc } from './importdoc';
import { PopupDoc } from './popupdoc';
-import { TemplateDoc } from './templatedoc';
-import { CommandDoc } from './commanddoc';
import { RouterDoc } from './routerdoc';
import { StyleDoc } from './styledoc';
-import { AccessibilityDoc } from './accessibilitydoc';
-import { MessageService } from 'primeng/api';
-import { FloatLabel } from 'primeng/floatlabel';
+import { TemplateDoc } from './templatedoc';
@NgModule({
imports: [CommonModule, AppCodeModule, RouterModule, TieredMenu, ButtonModule, AppDocModule, BadgeModule, ToastModule, FloatLabel],
diff --git a/apps/showcase/src/app/showcase/doc/timeline/accessibilitydoc.ts b/apps/showcase/doc/timeline/accessibilitydoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/timeline/accessibilitydoc.ts
rename to apps/showcase/doc/timeline/accessibilitydoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/timeline/alignmentdoc.ts b/apps/showcase/doc/timeline/alignmentdoc.ts
similarity index 99%
rename from apps/showcase/src/app/showcase/doc/timeline/alignmentdoc.ts
rename to apps/showcase/doc/timeline/alignmentdoc.ts
index 4a8d27a1d57..010cbfe23a1 100644
--- a/apps/showcase/src/app/showcase/doc/timeline/alignmentdoc.ts
+++ b/apps/showcase/doc/timeline/alignmentdoc.ts
@@ -1,5 +1,5 @@
+import { Code } from '@/domain/code';
import { Component } from '@angular/core';
-import { Code } from '@domain/code';
interface EventItem {
status?: string;
diff --git a/apps/showcase/doc/timeline/basicdoc.ts b/apps/showcase/doc/timeline/basicdoc.ts
new file mode 100644
index 00000000000..02c2e75f0d7
--- /dev/null
+++ b/apps/showcase/doc/timeline/basicdoc.ts
@@ -0,0 +1,72 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'basic-doc',
+ template: `
+
+
+ Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. Example below is a sample events array that
+ is used throughout the documentation.
+
+
+
+
+
+ {{ event.status }}
+
+
+
+
+ {{ event.status }}
+
+ `,
+
+ html: `
+
+
+ {{ event.status }}
+
+
+
+ TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative.
+
+
+
+
+ {{ event }}
+
+
+
+
+ {{ event }}
+
+
+
+
+ {{ event }}
+
+
+
+
+ {{ event }}
+
+
+
+
+
+ {{ event }}
+
+
+
+
+
+ {{ event }}
+
+
+
+
+ `,
+
+ html: `
+
+
+ {{ event }}
+
+
+
+
+ {{ event }}
+
+
+
+
+ {{ event }}
+
+
+
+
+
+
+ Sample implementation with custom content and styled markers.
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+ neque quas!
+
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
+ neque quas!
+
+
+
+ `,
+
+ 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!
+
+
+
+
+
+ Transition of the animations can be customized using the showTransitionOptions , hideTransitionOptions , showTransformOptions and hideTransformOptions properties.
+
+
+
+
+ Toasts are displayed by calling the add and addAll method provided by the messageService . A single toast is specified by the Message interface that defines various properties such as severity ,
+ summary and detail .
+
+
+
+
+ Headless mode allows you to customize the entire user interface instead of the default elements.
+
+
+
+
+
+
+ {{ message.summary }}
+
+
+
+
{{ progress }}% uploaded
+
+
+
+
+
+
+
+
+ {{ message.summary }}
+
+
+
+
{{ progress }}% uploaded
+
+
+
+
+
+
+
+
+ {{ message.summary }}
+
+
+
+
{{ progress }}% uploaded
+
+
+
+
+
+ A toast disappears after 3000ms by default, set the life option on either the message or toast to override this.
+
+
+
+ Multiple toasts are displayed by passing an array to the showAll method of the messageService .
+
+
+
+ Location of the toast is customized with the position property. Valid values are top-left , top-center , top-right , bottom-left , bottom-center , bottom-right and center .
+
+
+
+
+ Toast styling can be adjusted per screen size with the breakpoints option. The value of breakpoints
+ should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px.
+
+
+
+
+
+ The severity option specifies the type of the message. There are four types of messages: success , info , warn and error . The severity of the message is used to display the icon and the color of the
+ toast.
+
+
+
+
+
+ A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the
+ key property so that toast and the message can match.
+
+
+
+
+ Templating allows customizing the content where the message instance is available as the implicit variable.
+
+
+
+
+
+
+
{{ message.summary }}
+
+
+
+
+
+
+
+
+
+ {{ message.summary }}
+
+
+
+
+
+
+
+
+
+
+ {{ message.summary }}
+
+
+
+
+
+
+
+ Screen Reader
+
+ ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with ariaLabelledBy or ariaLabel props, it is highly
+ suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
+ does not change related to state.
+
+
+
+
+
+
Keyboard Support
+
+
+
+
+ Key
+ Function
+
+
+
+
+
+ tab
+
+ Moves focus to the button.
+
+
+
+ space
+
+ Toggles the checked state.
+
+
+
+
+
Remember Me
+
+ Two-way binding to a boolean property is defined using the standard ngModel directive.
+
+
+
+ When disabled is present, the element cannot be edited and focused.
+
+
+
+ Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+
+
+
+ ToggleButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+
+
+ (false)
+ });
+ }
+
+ code: Code = {
+ basic: ``,
+
+ html: ``,
+
+ typescript: `import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ToggleButton } from 'primeng/togglebutton';
+
+@Component({
+ selector: 'toggle-button-reactive-forms-demo',
+ templateUrl: './toggle-button-reactive-forms-demo.html',
+ standalone: true,
+ imports: [ReactiveFormsModule, ToggleButton]
+})
+export class ToggleButtonReactiveFormsDemo implements OnInit {
+ formGroup!: FormGroup;
+
+ ngOnInit() {
+ this.formGroup = new FormGroup({
+ checked: new FormControl(false)
+ });
+ }
+}`
+ };
+}
diff --git a/apps/showcase/doc/togglebutton/sizesdoc.ts b/apps/showcase/doc/togglebutton/sizesdoc.ts
new file mode 100644
index 00000000000..46a2a3317d1
--- /dev/null
+++ b/apps/showcase/doc/togglebutton/sizesdoc.ts
@@ -0,0 +1,54 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'sizes-doc',
+ template: `
+
+ ToggleButton provides small and large sizes as alternatives to the base.
+
+
+
+
+ Screen Reader
+
+ InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with
+ inputId prop or using ariaLabelledBy , ariaLabel props.
+
+
+
+
+
+
Keyboard Support
+
+
+
+
+ Key
+ Function
+
+
+
+
+
+ tab
+
+ Moves focus to the switch.
+
+
+
+ space
+
+ Toggles the checked state.
+
+
+
+
+
Remember Me
+Remember Me
+
+ Two-way value binding is defined using ngModel .
+
+
+
+ When disabled is present, the element cannot be edited and focused.
+
+
+
+ Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+
+
+
+ ToggleSwitch can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+
+
+ (false)
+ });
+ }
+}`
+ };
+}
diff --git a/apps/showcase/src/app/showcase/doc/toggleswitch/styledoc.ts b/apps/showcase/doc/toggleswitch/styledoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/toggleswitch/styledoc.ts
rename to apps/showcase/doc/toggleswitch/styledoc.ts
diff --git a/apps/showcase/doc/toolbar/accessibilitydoc.ts b/apps/showcase/doc/toolbar/accessibilitydoc.ts
new file mode 100644
index 00000000000..9b5c6cccf79
--- /dev/null
+++ b/apps/showcase/doc/toolbar/accessibilitydoc.ts
@@ -0,0 +1,25 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'toolbar-accessibility-doc',
+ template: `
+
+ Screen Reader
+
+ Toolbar uses toolbar role for the root element, aria-orientation is not included as it defaults to horizontal . Any valid attribute is passed to the root element so you may add additional properties like
+ aria-labelledby and aria-labelled to define the element if required.
+
+ Keyboard Support
+ Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.
+
+
+ Content
+ `
+ };
+}
diff --git a/apps/showcase/doc/toolbar/basicdoc.ts b/apps/showcase/doc/toolbar/basicdoc.ts
new file mode 100644
index 00000000000..a264b2be598
--- /dev/null
+++ b/apps/showcase/doc/toolbar/basicdoc.ts
@@ -0,0 +1,120 @@
+import { Code } from '@/domain/code';
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+ selector: 'basic-doc',
+ template: `
+
+
+ Toolbar is a grouping component for buttons and other content. Its content can be placed inside the
+ start , center and end sections.
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: ``,
+
+ typescript: `import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Toolbar } from 'primeng/toolbar';
+import { ButtonModule } from 'primeng/button';
+import { SplitButton } from 'primeng/splitbutton';
+import { InputTextModule } from 'primeng/inputtext';
+import { IconField } from 'primeng/iconfield';
+import { InputIcon } from 'primeng/inputicon';
+
+@Component({
+ selector: 'toolbar-basic-demo',
+ templateUrl: './toolbar-basic-demo.html',
+ standalone: true,
+ imports: [Toolbar, ButtonModule, SplitButton, InputTextModule, IconField, InputIcon]
+})
+export class ToolbarBasicDemo implements OnInit {
+ items: MenuItem[] | undefined;
+
+ ngOnInit() {
+ this.items = [
+ {
+ label: 'Update',
+ icon: 'pi pi-refresh'
+ },
+ {
+ label: 'Delete',
+ icon: 'pi pi-times'
+ }
+ ];
+ }
+}`
+ };
+}
diff --git a/apps/showcase/doc/toolbar/customdoc.ts b/apps/showcase/doc/toolbar/customdoc.ts
new file mode 100644
index 00000000000..b1b52e95a9c
--- /dev/null
+++ b/apps/showcase/doc/toolbar/customdoc.ts
@@ -0,0 +1,179 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'custom-doc',
+ template: `
+
+ Content can also be placed using the start , center and end templates.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tooltip can use either a string or a TemplateRef .
+
+
+
+
+
+
+
+
+
+
+
+
PrimeNG rocks!
+
+
+
+
+
+
PrimeNG rocks!
+
`,
+
+ html: `
+
+
+
+
+
+
+
+
+
+
PrimeNG rocks!
+
+
+ Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
+
+
+
+ Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.
+
+
+
+
+
`,
+
+ typescript: `import { Component } from '@angular/core';
+import { Tooltip } from 'primeng/tooltip';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+ selector: 'tooltip-event-demo',
+ templateUrl: './tooltip-event-demo.html',
+ standalone: true,
+ imports: [Tooltip, InputTextModule]
+})
+export class TooltipEventDemo {}`
+ };
+}
diff --git a/apps/showcase/doc/tooltip/importdoc.ts b/apps/showcase/doc/tooltip/importdoc.ts
new file mode 100644
index 00000000000..9885391aba2
--- /dev/null
+++ b/apps/showcase/doc/tooltip/importdoc.ts
@@ -0,0 +1,12 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'tooltip-import-doc',
+ template: `
+ Position of the tooltip is specified using tooltipPosition attribute. Valid values are top , bottom , right and left . Default position of the tooltip is right .
+
+
+
+
+
`,
+
+ typescript: `import { Component } from '@angular/core';
+import { Tooltip } from 'primeng/tooltip';
+import { InputTextModule } from 'primeng/inputtext';
+
+@Component({
+ selector: 'tooltip-position-demo',
+ templateUrl: './tooltip-position-demo.html',
+ standalone: true,
+ imports: [Tooltip, InputTextModule]
+})
+export class TooltipPositionDemo {}`
+ };
+}
diff --git a/apps/showcase/src/app/showcase/doc/tooltip/styledoc.ts b/apps/showcase/doc/tooltip/styledoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/tooltip/styledoc.ts
rename to apps/showcase/doc/tooltip/styledoc.ts
diff --git a/apps/showcase/src/app/showcase/doc/tooltip/tooltipdoc.module.ts b/apps/showcase/doc/tooltip/tooltipdoc.module.ts
similarity index 88%
rename from apps/showcase/src/app/showcase/doc/tooltip/tooltipdoc.module.ts
rename to apps/showcase/doc/tooltip/tooltipdoc.module.ts
index a7677afd1f7..0265b387ed2 100644
--- a/apps/showcase/src/app/showcase/doc/tooltip/tooltipdoc.module.ts
+++ b/apps/showcase/doc/tooltip/tooltipdoc.module.ts
@@ -1,20 +1,20 @@
+import { AppCodeModule } from '@/components/doc/app.code.component';
+import { AppDocModule } from '@/components/doc/app.doc.module';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
-import { Tooltip } 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 { ImportDoc } from './importdoc';
-import { StyleDoc } from './styledoc';
-import { PositionDoc } from './positiondoc';
-import { EventDoc } from './eventdoc';
+import { Tooltip } from 'primeng/tooltip';
+import { AccessibilityDoc } from './accessibilitydoc';
import { AutoHideDoc } from './autohidedoc';
+import { CustomDoc } from './customdoc';
import { DelayDoc } from './delaydoc';
+import { EventDoc } from './eventdoc';
+import { ImportDoc } from './importdoc';
import { OptionsDoc } from './optionsdoc';
-import { AccessibilityDoc } from './accessibilitydoc';
-import { CustomDoc } from './customdoc';
+import { PositionDoc } from './positiondoc';
+import { StyleDoc } from './styledoc';
@NgModule({
imports: [CommonModule, AppCodeModule, RouterModule, Tooltip, ButtonModule, InputTextModule, AppDocModule],
diff --git a/apps/showcase/src/app/showcase/doc/tree/accessibilitydoc.ts b/apps/showcase/doc/tree/accessibilitydoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/tree/accessibilitydoc.ts
rename to apps/showcase/doc/tree/accessibilitydoc.ts
diff --git a/apps/showcase/doc/tree/basicdoc.ts b/apps/showcase/doc/tree/basicdoc.ts
new file mode 100644
index 00000000000..18de02a4c0c
--- /dev/null
+++ b/apps/showcase/doc/tree/basicdoc.ts
@@ -0,0 +1,86 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+ selector: 'basic-doc',
+ template: `
+
+ Tree component requires an array of TreeNode objects as its value .
+
+
+
+ Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox .
+
+
+
+ Tree requires a collection of TreeNode instances as a value.
+
+
+
+ Tree requires a collection of TreeNode instances as a value .
+
+
+
+ Nodes can be reordered within the same tree and also can be transferred between other trees using drag&drop.
+
+
+
+ An event is provided for each type of user interaction such as expand, collapse and selection.
+
+
+
+
+ Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
+ filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included.
+ On the other hand, in strict mode when the query matches a node, filtering continues on all descendants.
+
+
+
+
+
+ Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using
+ loading property and onNodeExpand method. Default value of loadingMode is mask and also icon is available.
+
+
+
+
+
+ More than one node is selectable by setting selectionMode to multiple . By default in multiple selection mode, metaKey press (e.g. ⌘ ) is necessary to add to existing selections however this can be configured with
+ disabling the metaKeySelection property. Note that in touch enabled devices, Tree always ignores metaKey.
+
+ In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.
+
+
+
+ Custom node content instead of a node label is defined with the pTemplate property.
+
+
+
+
+
+ {{ node.label }}
+
+
+
+ {{ node.label }}
+
+ `,
+
+ html: ``,
+
+ 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',
+ standalone: true,
+ imports: [TreeModule]
+})
+export class TreeTemplateDemo implements OnInit {
+ nodes!: TreeNode[];
+
+ ngOnInit() {
+ this.nodes = [
+ {
+ key: '0',
+ label: 'Introduction',
+ children: [
+ { key: '0-0', label: 'What is Angular', data: 'https://angular.io', type: 'url' },
+ { key: '0-1', label: 'Getting Started', data: 'https://angular.io/guide/setup-local', type: 'url' },
+ { key: '0-2', label: 'Learn and Explore', data: 'https://angular.io/guide/architecture', type: 'url' },
+ { key: '0-3', label: 'Take a Look', data: 'https://angular.io/start', type: 'url' }
+ ]
+ },
+ {
+ key: '1',
+ label: 'Components In-Depth',
+ children: [
+ { key: '1-0', label: 'Component Registration', data: 'https://angular.io/guide/component-interaction', type: 'url' },
+ { key: '1-1', label: 'User Input', data: 'https://angular.io/guide/user-input', type: 'url' },
+ { key: '1-2', label: 'Hooks', data: 'https://angular.io/guide/lifecycle-hooks', type: 'url' },
+ { key: '1-3', label: 'Attribute Directives', data: 'https://angular.io/guide/attribute-directives', type: 'url' }
+ ]
+ }
+ ];
+ }
+}`
+ };
+}
diff --git a/apps/showcase/src/app/showcase/doc/tree/treedoc.module.ts b/apps/showcase/doc/tree/treedoc.module.ts
similarity index 91%
rename from apps/showcase/src/app/showcase/doc/tree/treedoc.module.ts
rename to apps/showcase/doc/tree/treedoc.module.ts
index 19a5c5cfa79..11638e888dd 100644
--- a/apps/showcase/src/app/showcase/doc/tree/treedoc.module.ts
+++ b/apps/showcase/doc/tree/treedoc.module.ts
@@ -1,12 +1,13 @@
+import { AppCodeModule } from '@/components/doc/app.code.component';
+import { AppDocModule } from '@/components/doc/app.doc.module';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ButtonModule } from 'primeng/button';
import { ContextMenuModule } from 'primeng/contextmenu';
import { ToastModule } from 'primeng/toast';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
import { TreeModule } from 'primeng/tree';
-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';
@@ -22,7 +23,6 @@ import { SingleDoc } from './singledoc';
import { TemplateDoc } from './templatedoc';
import { VirtualScrollDoc } from './virtualscrolldoc';
import { LazyVirtualScrollDoc } from './virtualscrolllazydoc';
-import { ToggleSwitchModule } from 'primeng/toggleswitch';
@NgModule({
imports: [CommonModule, AppCodeModule, AppDocModule, TreeModule, ButtonModule, FormsModule, ToastModule, ContextMenuModule, ToggleSwitchModule],
diff --git a/apps/showcase/doc/tree/virtualscrolldoc.ts b/apps/showcase/doc/tree/virtualscrolldoc.ts
new file mode 100644
index 00000000000..2c4e2c52a69
--- /dev/null
+++ b/apps/showcase/doc/tree/virtualscrolldoc.ts
@@ -0,0 +1,116 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+ selector: 'virtual-scroll-doc',
+ template: `
+
+ VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.
+
+
+
+ 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.
+
+
+
+
+ Screen Reader
+
+ Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes.
+ The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup.
+
+
+ The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label ,
+ aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected . Checkbox and toggle icons are hidden from screen readers as their parent element with
+ treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are
+ calculated implicitly and added to each treeitem.
+
+
+ If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.
+
+
+
+
+
Closed State Keyboard Support
+
+
+
+
+ Key
+ Function
+
+
+
+
+
+ tab
+
+ Moves focus to the treeselect element.
+
+
+
+ space
+
+ Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.
+
+
+
+ down arrow
+
+ Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
+
+
+
+
+
+
Popup Keyboard Support
+
+
+
+
+ Key
+ Function
+
+
+
+
+
+ tab
+
+ Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.
+
+
+ shift + tab Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.
+
+
+
+ enter
+
+ Selects the focused option, closes the popup if selection mode is single.
+
+
+
+ space
+
+ Selects the focused option, closes the popup if selection mode is single.
+
+
+
+ escape
+
+ Closes the popup, moves focus to the treeselect element.
+
+
+
+ down arrow
+
+ Moves focus to the next treenode.
+
+
+
+ up arrow
+
+ Moves focus to the previous treenode.
+
+
+
+ right arrow
+
+ If node is closed, opens the node otherwise moves focus to the first child node.
+
+
+
+ left arrow
+
+ If node is open, closes the node otherwise moves focus to the parent node.
+
+
+
+
+
+
Filter Input Keyboard Support
+
+
+
+
+ Key
+ Function
+
+
+
+
+
+ enter
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+ escape
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+
+
+
Close Button Keyboard Support
+
+
+
+
+ Key
+ Function
+
+
+
+
+
+ enter
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+ space
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+ escape
+
+ Closes the popup and moves focus to the treeselect element.
+
+
+
+
+
Options
+
+ TreeSelect is used as a controlled component with ng-model directive along with an options collection. Internally Tree component is used so the options model is based on TreeNode API.
+ In single selection mode, value binding should be the key value of a node.
+
+
+
+ Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox .
+
+
+
+ When disabled is present, the element cannot be edited and focused.
+
+
+
+ Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
+
+
+
+
+ Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
+ filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included.
+ On the other hand, in strict mode when the query matches a node, filtering continues on all descendants.
+
+
+
+
+
+ A floating label appears on top of the input field when focused. Visit
+ FloatLabel documentation for more information.
+
+
+
+
+ Over Label
+
+
+
+ In Label
+
+
+
+ On Label
+
+
+ Over Label
+
+
+
+ In Label
+
+
+
+ On Label
+ `,
+
+ html: `
+
+ Over Label
+
+
+
+ In Label
+
+
+
+ On Label
+
+
+ IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+
+
+
+ File
+ `,
+
+ html: ``,
+
+ typescript: `import { Component } from '@angular/core';
+import { NodeService } from '@/service/nodeservice';
+import { FormsModule } from '@angular/forms';
+import { TreeSelectModule } from 'primeng/treeselect';
+import { IftaLabelModule } from 'primeng/iftalabel';
+
+@Component({
+ selector: 'tree-select-iftalabel-demo',
+ templateUrl: './tree-select-iftalabel-demo.html',
+ standalone: true,
+ imports: [FormsModule, TreeSelectModule, IftaLabelModule],
+ providers: [NodeService]
+})
+export class TreeSelectIftaLabelDemo {
+ nodes!: any[];
+
+ selectedValue: 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' }]
+ }
+ ]
+},
+...`
+ };
+
+ constructor(private nodeService: NodeService) {
+ this.nodeService.getFiles().then((files) => (this.nodes = files));
+ }
+}
diff --git a/apps/showcase/doc/treeselect/importdoc.ts b/apps/showcase/doc/treeselect/importdoc.ts
new file mode 100644
index 00000000000..2a9750f5201
--- /dev/null
+++ b/apps/showcase/doc/treeselect/importdoc.ts
@@ -0,0 +1,12 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'tree-select-import-doc',
+ template: `
+ Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
+
+
+
+
+ Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using
+ loading property and onNodeExpand method.
+
+
+
+
+
+ More than one node is selectable by setting selectionMode to multiple . By default in multiple selection mode, metaKey press (e.g. ⌘ ) is necessary to add to existing selections however this can be configured with
+ disabling the metaKeySelection property. Note that in touch enabled devices, TreeSelect always ignores metaKey.
+
+ In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.
+
+
+ TreeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
+
+
+
+ TreeSelect provides small and large sizes as alternatives to the base.
+
+
+
+ TreeSelect offers multiple templates for customization through templating.
+
+
+
+
+
+
+ Available Files
+
+
+
+
+
+
+
+
+
+ Available Files
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+ Available Files
+
+
+
+
+
+
+
+ VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance
+ issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item.
+
+
+
+
+ TreeTable requires a collection of TreeNode instances as a value components as children for the representation.
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ `,
+
+ html: `
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
+
+
+
+
+ Brand
+ Sale Rate
+
+
+ Sales
+ Profits
+
+
+ Last Year
+ This Year
+ Last Year
+ This Year
+
+
+
+
+
+
+ {{ rowData.lastYearSale }}
+ {{ rowData.thisYearSale }}
+ {{ rowData.lastYearProfit }}
+ {{ rowData.thisYearProfit }}
+
+
+
+
+ Totals
+ $3,283,772
+ $2,126,925
+
+
+
+
+
+
+
+ Brand
+ Sale Rate
+
+
+ Sales
+ Profits
+
+
+ Last Year
+ This Year
+ Last Year
+ This Year
+
+
+
+
+
+
+ {{ rowData.lastYearSale }}
+ {{ rowData.thisYearSale }}
+ {{ rowData.lastYearProfit }}
+ {{ rowData.thisYearProfit }}
+
+
+
+
+ Totals
+ $3,283,772
+ $2,126,925
+
+
+ `,
+
+ html: `
+
+
+
+ Brand
+ Sale Rate
+
+
+ Sales
+ Profits
+
+
+ Last Year
+ This Year
+ Last Year
+ This Year
+
+
+
+
+
+
+ {{ rowData.lastYearSale }}
+ {{ rowData.thisYearSale }}
+ {{ rowData.lastYearProfit }}
+ {{ rowData.thisYearProfit }}
+
+
+
+
+ Totals
+ $3,283,772
+ $2,126,925
+
+
+
+
@@ -79,10 +79,10 @@ export class ResizeExpandDoc {
`,
html: `
-
@@ -104,7 +104,7 @@ export class ResizeExpandDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/apps/showcase/doc/treetable/columnresizefitdoc.ts
similarity index 92%
rename from apps/showcase/src/app/showcase/doc/treetable/columnresizefitdoc.ts
rename to apps/showcase/doc/treetable/columnresizefitdoc.ts
index c15a39e9a1b..69e93d02750 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/columnresizefitdoc.ts
+++ b/apps/showcase/doc/treetable/columnresizefitdoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -56,10 +56,10 @@ export class ResizeFitDoc {
}
code: Code = {
- basic: `
@@ -79,10 +79,10 @@ export class ResizeFitDoc {
`,
html: `
-
@@ -104,7 +104,7 @@ export class ResizeFitDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts b/apps/showcase/doc/treetable/columnresizescrollabledoc.ts
similarity index 92%
rename from apps/showcase/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
rename to apps/showcase/doc/treetable/columnresizescrollabledoc.ts
index 3a9e72a61c6..3aa21275759 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/columnresizescrollabledoc.ts
+++ b/apps/showcase/doc/treetable/columnresizescrollabledoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -61,11 +61,11 @@ export class ResizeScrollableDoc {
}
code: Code = {
- basic: `
@@ -90,11 +90,11 @@ export class ResizeScrollableDoc {
`,
html: `
-
@@ -121,7 +121,7 @@ export class ResizeScrollableDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
diff --git a/apps/showcase/doc/treetable/columntoggledoc.ts b/apps/showcase/doc/treetable/columntoggledoc.ts
new file mode 100644
index 00000000000..792510c7915
--- /dev/null
+++ b/apps/showcase/doc/treetable/columntoggledoc.ts
@@ -0,0 +1,181 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+interface Column {
+ field: string;
+ header: string;
+}
+
+@Component({
+ selector: 'column-toggle-doc',
+ template: `
+
+ Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
@@ -70,8 +70,8 @@ export class ConditionalStyleDoc {
-
-
@@ -95,8 +95,8 @@ export class ConditionalStyleDoc {
-
+ 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.
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Expansion state is controlled with expandedKeys property.
+
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ `,
+
+ html: `
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
@@ -91,10 +91,10 @@ export class EditDoc {
`,
html: `
-
@@ -123,7 +123,7 @@ export class EditDoc {
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';
diff --git a/apps/showcase/doc/treetable/filterdoc.ts b/apps/showcase/doc/treetable/filterdoc.ts
new file mode 100644
index 00000000000..7930af2dc16
--- /dev/null
+++ b/apps/showcase/doc/treetable/filterdoc.ts
@@ -0,0 +1,251 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+interface Column {
+ field: string;
+ header: string;
+}
+
+@Component({
+ selector: 'filter-doc',
+ template: `
+
+
+ The filterMode specifies the filtering strategy, in lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in
+ strict mode when the query matches a node, filtering continues on all descendants. A general filled called filterGlobal is also provided to search all columns that support filtering.
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data found.
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data found.
+
+
+ `,
+
+ html: `
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No data found.
+
+
+
+
+
+ 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.size }}
+ {{ rowData.type }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+
+ {{ rowData.size }}
+
+
+ {{ rowData.type }}
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+
+ {{ rowData.size }}
+
+
+ {{ rowData.type }}
+
+
+
+
+
+
+
+
+
+
+ Enabling showGridlines displays grid lines.
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
+
`,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class GridlinesDoc {
+ files!: TreeNode[];
+
+ constructor(private nodeService: NodeService) {}
+
+ loadDemoData() {
+ this.nodeService.getFilesystem().then((files) => (this.files = files));
+ }
+
+ code: Code = {
+ basic: `
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ `,
+
+ html: `
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
+
+ Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging , sorting and filtering occurs. Sample below
+ imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
+
+
+ Enabling the lazy property and assigning the logical number of rows to totalRecords by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually
+ records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
+
+ In addition, only the root elements should be loaded, children can be loaded on demand using onNodeExpand callback.
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+ Pagination is enabled by adding paginator property and defining rows per page.
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+ Paginator localization information such as page numbers and rows per page options are defined with the
+ paginatorLocale property which defaults to the user locale.
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
@@ -115,12 +115,12 @@ export class PaginatorTemplateDoc {
`,
html: `
-
diff --git a/apps/showcase/doc/treetable/reorderdoc.ts b/apps/showcase/doc/treetable/reorderdoc.ts
new file mode 100644
index 00000000000..d228d4da145
--- /dev/null
+++ b/apps/showcase/doc/treetable/reorderdoc.ts
@@ -0,0 +1,131 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+interface Column {
+ field: string;
+ header: string;
+}
+
+@Component({
+ selector: 'reorder-doc',
+ template: `
+
+ Order of the columns can be changed using drag and drop when reorderableColumns is present.
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+
+
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
@@ -122,14 +122,14 @@ export class FrozenColumnsDoc {
`,
html: `
-
@@ -163,7 +163,7 @@ export class FrozenColumnsDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts b/apps/showcase/doc/treetable/scrollhorizontaldoc.ts
similarity index 97%
rename from apps/showcase/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
rename to apps/showcase/doc/treetable/scrollhorizontaldoc.ts
index 569a4158b83..fa0cc425c34 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts
+++ b/apps/showcase/doc/treetable/scrollhorizontaldoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -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/apps/showcase/src/app/showcase/doc/treetable/scrollverticaldoc.ts b/apps/showcase/doc/treetable/scrollverticaldoc.ts
similarity index 91%
rename from apps/showcase/src/app/showcase/doc/treetable/scrollverticaldoc.ts
rename to apps/showcase/doc/treetable/scrollverticaldoc.ts
index f693e01f702..59ac34b4c4c 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/scrollverticaldoc.ts
+++ b/apps/showcase/doc/treetable/scrollverticaldoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -56,12 +56,12 @@ export class ScrollVerticalDoc {
}
code: Code = {
- basic: `
@@ -81,12 +81,12 @@ export class ScrollVerticalDoc {
`,
html: `
-
@@ -108,7 +108,7 @@ export class ScrollVerticalDoc {
typescript: `import { Component, OnInit } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { NodeService } from '@service/nodeservice';
+import { NodeService } from '@/service/nodeservice';
import { TreeTableModule } from 'primeng/treetable';
import { CommonModule } from '@angular/common';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts b/apps/showcase/doc/treetable/selectioncheckboxdoc.ts
similarity index 91%
rename from apps/showcase/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
rename to apps/showcase/doc/treetable/selectioncheckboxdoc.ts
index 580f1286005..ba2308d33a9 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts
+++ b/apps/showcase/doc/treetable/selectioncheckboxdoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -78,13 +78,13 @@ export class SelectionCheckboxDoc {
}
code: Code = {
- basic: `
@@ -105,13 +105,13 @@ export class SelectionCheckboxDoc {
`,
html: `
-
@@ -133,7 +133,7 @@ export class SelectionCheckboxDoc {
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';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/selectioneventscdoc.ts b/apps/showcase/doc/treetable/selectioneventscdoc.ts
similarity index 89%
rename from apps/showcase/src/app/showcase/doc/treetable/selectioneventscdoc.ts
rename to apps/showcase/doc/treetable/selectioneventscdoc.ts
index 0775a52fe34..8c309e85d9a 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/selectioneventscdoc.ts
+++ b/apps/showcase/doc/treetable/selectioneventscdoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MessageService, TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -87,15 +87,15 @@ export class SelectionEventsDoc {
}
code: Code = {
- basic: `
@@ -116,15 +116,15 @@ export class SelectionEventsDoc {
html: `
-
@@ -146,7 +146,7 @@ export class SelectionEventsDoc {
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';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/selectionmultipledoc.ts b/apps/showcase/doc/treetable/selectionmultipledoc.ts
similarity index 90%
rename from apps/showcase/src/app/showcase/doc/treetable/selectionmultipledoc.ts
rename to apps/showcase/doc/treetable/selectionmultipledoc.ts
index 419eac4fc52..fad33fb96ec 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/selectionmultipledoc.ts
+++ b/apps/showcase/doc/treetable/selectionmultipledoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -69,14 +69,14 @@ export class SelectionMultipleDoc {
code: Code = {
basic: `
@@ -100,14 +100,14 @@ export class SelectionMultipleDoc {
Metakey
-
@@ -129,7 +129,7 @@ export class SelectionMultipleDoc {
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 { ToggleSwitchModule } from 'primeng/toggleswitch';
import { FormsModule } from '@angular/forms';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/selectionsingledoc.ts b/apps/showcase/doc/treetable/selectionsingledoc.ts
similarity index 91%
rename from apps/showcase/src/app/showcase/doc/treetable/selectionsingledoc.ts
rename to apps/showcase/doc/treetable/selectionsingledoc.ts
index 62694d4fb71..ff93f645122 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/selectionsingledoc.ts
+++ b/apps/showcase/doc/treetable/selectionsingledoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -69,13 +69,13 @@ export class SelectionSingleDoc {
}
code: Code = {
- basic: `
@@ -99,13 +99,13 @@ export class SelectionSingleDoc {
Metakey
-
@@ -127,7 +127,7 @@ export class SelectionSingleDoc {
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 { ToggleSwitchModule } from 'primeng/toggleswitch';
import { FormsModule } from '@angular/forms';
diff --git a/apps/showcase/doc/treetable/sizedoc.ts b/apps/showcase/doc/treetable/sizedoc.ts
new file mode 100644
index 00000000000..41e2e229f94
--- /dev/null
+++ b/apps/showcase/doc/treetable/sizedoc.ts
@@ -0,0 +1,163 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+@Component({
+ selector: 'size-doc',
+ template: `
+
+ In addition to a regular treetable, alternatives with alternative sizes are available. Add p-treetable-sm class to reduce the size of treetable or p-treetable-lg to enlarge it.
+
+
+
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
+
`,
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SizeDoc {
+ files!: TreeNode[];
+
+ sizes!: any[];
+
+ selectedSize: any = '';
+
+ constructor(private nodeService: NodeService) {}
+
+ loadDemoData() {
+ this.nodeService.getFilesystem().then((files) => (this.files = files));
+
+ this.sizes = [
+ { name: 'Small', class: 'p-treetable-sm' },
+ { name: 'Normal', class: '' },
+ { name: 'Large', class: 'p-treetable-lg' }
+ ];
+ }
+
+ code: Code = {
+ basic: `
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+ `,
+
+ html: `
+
+
+
+
+ Name
+ Size
+ Type
+
+
+
+
+
+
+ {{ rowData.size }}
+ {{ rowData.type }}
+
+
+
+
@@ -83,11 +83,11 @@ export class SortMultipleColumnsDoc {
`,
html: `
-
@@ -110,7 +110,7 @@ export class SortMultipleColumnsDoc {
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';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/sortremovabledoc.ts b/apps/showcase/doc/treetable/sortremovabledoc.ts
similarity index 98%
rename from apps/showcase/src/app/showcase/doc/treetable/sortremovabledoc.ts
rename to apps/showcase/doc/treetable/sortremovabledoc.ts
index 3b0f8cb3a1d..205f2c4fd3e 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/sortremovabledoc.ts
+++ b/apps/showcase/doc/treetable/sortremovabledoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
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 {
@@ -178,7 +178,7 @@ export class SortRemovableDoc {
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 { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts b/apps/showcase/doc/treetable/sortsinglecolumndoc.ts
similarity index 93%
rename from apps/showcase/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts
rename to apps/showcase/doc/treetable/sortsinglecolumndoc.ts
index d42a6582700..f55a0c674fa 100644
--- a/apps/showcase/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts
+++ b/apps/showcase/doc/treetable/sortsinglecolumndoc.ts
@@ -1,7 +1,7 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
interface Column {
field: string;
@@ -58,10 +58,10 @@ export class SortSingleColumnDoc {
}
code: Code = {
- basic: `
@@ -82,10 +82,10 @@ export class SortSingleColumnDoc {
`,
html: `
-
@@ -108,7 +108,7 @@ export class SortSingleColumnDoc {
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';
diff --git a/apps/showcase/src/app/showcase/doc/treetable/styledoc.ts b/apps/showcase/doc/treetable/styledoc.ts
similarity index 100%
rename from apps/showcase/src/app/showcase/doc/treetable/styledoc.ts
rename to apps/showcase/doc/treetable/styledoc.ts
diff --git a/apps/showcase/doc/treetable/templatedoc.ts b/apps/showcase/doc/treetable/templatedoc.ts
new file mode 100644
index 00000000000..e73779ef4de
--- /dev/null
+++ b/apps/showcase/doc/treetable/templatedoc.ts
@@ -0,0 +1,166 @@
+import { Code } from '@/domain/code';
+import { NodeService } from '@/service/nodeservice';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+
+interface Column {
+ field: string;
+ header: string;
+}
+
+@Component({
+ selector: 'template-doc',
+ template: `
+
+ Custom content at caption , header , body and summary sections are supported via templating.
+
+
+
+
+ File Viewer
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ File Viewer
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+
+ html: `
+
+ File Viewer
+
+
+ {{ col.header }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Community Versions
+
+ Angular is a fast paced technology with a new major version every 6 months. PrimeNG release cycle is aligned with Angular and every 6 months a new major PrimeNG version is released as open source that is compatible with the
+ latest Angular core. The maintenance releases of the latest PrimeNG version are provided as free and open source for the following 6 months until the new major Angular version is ready.
+
+
+
+
LTS Versions
+
+ Majority of the existing applications prefer to remain at a previous version due to stability requirements instead of upgrading to the latest version immediately. PrimeNG LTS is a support service to provide a license for the
+ finest compatible version suited to you. LTS covers the prior two versions from the latest release, this means up to 18 months of almost bi-weekly releases to bring the latest defect fixes and security updates to your project.
+ As an example, when PrimeNG moves to Angular 18, v17 and v16 will move to LTS support whereas STS (short term support) versions of PrimeNG 18 will be open source under MIT license for at least 6 months until Angular/PrimeNG 19
+ is released.
+
+
+
+
+
Version Support
+
+ STS means open source short term support whereas LTS stands for commercial long term support. Legacy versions are only supported by
+ PrimeNG PRO.
+
+
+
+
+
+
+ Version
+ Status
+ End of STS
+ End of LTS
+
+
+
+
+
+
+ STS
+ After v18 release
+ After v20 release
+
+
+
+
+ LTS
+ After v17 release
+ After v19 release
+
+
+
+
+ LTS
+ After v16 release
+ After v18 release
+
+
+
+
+ Legacy
+ After v15 release
+ After v17 release
+
+
+
+
+ Legacy
+ After v14 release
+ After v16 release
+
+
+
+
+ Legacy
+ After v13 release
+ After v15 release
+
+
+
+
+
+
+
LTS License
+
+
+
+
+ Security
+
+
+ PrimeNG comes with a commitment to provide long-term support, including regular security updates to keep your system protected against emerging threats.
+
+
+
+
+ Maintenance
+
+
+ We understand the importance of maintaining a stable and reliable software system. Our team will provide ongoing maintenance to ensure that the software continues to function seamlessly and efficiently.
+
+
+
+
+ Enhancements
+
+
+ We are dedicated to continuously improving PrimeNG to meet the evolving needs of our users. As part of our long-term support, we will provide regular updates and enhancements to add new features and functionality.
+
+
+
+
+
+
Pricing
+
Choose the right plan for your business.
+
View License Details
+
+
+
+
+
+
Basic License
+
Annual
+
+
+
+
+
+ Expires After 1 Year
+
+
+ Warning Message at Runtime After Expiry
+
+
+ Eligible for 1 Major Version
+
+
+ Unlimited Developers
+
+
+ Unlimited Projects
+
+
+
+
Buy Now
+
+
+
+
+
+
+
+
Extended License
+
Perpetual
+
+
+
+
+
+ No Expiry
+
+
+ No Warning Message at Runtime
+
+
+ Eligible for 1 Major Version
+
+
+ Unlimited Developers
+
+
+ Unlimited Projects
+
+
+
+
Buy Now
+
+
+
+
+
+
+
Usage
+
+ LTS versions require a license key and a pass key to be verified at your main app component or main.ts before bootstrap process. The keys would be available at
+ PrimeStore
+ under LTS Licenses section.
+
+
+
+
+
Frequently Asked Questions
+
+
+
Do I have to purchase a license for PrimeNG?
+
No, only the versions that have the -lts suffix required a paid license. Any other version is open source under MIT license.
+
+
Is LTS License mandatory to use PrimeNG?
+
No, LTS is totally optional if you cannot update to latest Angular immediately and still would like to receive updates for your version.
+
+
How long is the duration of the LTS license?
+
Duration is 1 year for Basic License, for Extended License there is no limit.
+
+
What happens after the LTS license duration ends?
+
+ A message will be displayed at the application screen and license needs to be renewed at PrimeStore. This only applies to Basic License as Extended License has no time limit.
+
+
+
Is a license bound to a specific major version?
+
Yes, a license key is tied to the major version such as 15 and same license key cannot be used on another major version like 14.
+
+
How can I assign my LTS license to a version?
+
At PrimeStore, there is an "Assign" feature that activates your license by selecting a version.
+
+
+
Does the license renew automatically?
+
No, renewal should be done manually at PrimeStore.
+
+
How are LTS and Community versions differentiated at NPM?
+
LTS releases have -lts suffix such as 14.2.4-lts .
+
+
Is the license per organization, per developer or per cpu/server?
+
LTS license is per organization, there is no limit on the number of developers, projects or hardware.
+
+
Can subsidiary companies share the license of a parent company?
+
No, license owner needs to be a separate entity as a result each company requires a separate license.
+
+
Does LTS provide a support contact?
+
No, PrimeNG PRO is the service where response of PrimeTek engineers is secured within 1 business day.
+
+
+
Can LTS releases be used in open source projects?
+
No, this means violation of the license as keys cannot be shared.
+
+
Does PRO provide access to the LTS releases?
+
Yes, PRO users are granted a basic license.
+
+
What is the difference between LTS and PRO?
+
+ PrimeNG PRO is a premium support service delivered via an exclusive JIRA instance where support engineers of PrimeTek provide assistance within 1 business day to the raised tickets. LTS on the other hand provides a license
+ to utilize the long term support versions.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
UP-TO-DATE
+
Best Features of Figma
+
PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles, variables and interactive components. It'll always follow the best practices.
+
+
+
+ Auto Layout
+
+
+ Variants
+
+
+ Variables and Styles
+
+
+ Interactive Components
+
+
+ Boolean, Instance Swap and Text Properties
+
+
+ Nested Instances
+
+
+
+
+
+
+
ENTERPRISE GRADE
+
Powerful System
+
Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.
+
+
+
+ Numerous Components
+
+
+ Icon Library
+
+
+ Easy Customization
+
+
+ Atomic Approach
+
+
+
+
+
+
+
+
+
+
+
+
+
DARK MODE
+
Two Themes
+
PrimeOne is designed based on Aura Light and Aura Dark themes. Easily change the themes of your designs using Figma's Swap Library feature or Tokens Studio Sets.
+
+
+
+ Aura Light
+
+
+ Aura Dark
+
+
+
+
+
+
+
TOKENS STUDIO
+
Tokens Support
+
Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.
+
+
+
+ Countless Design Tokens
+
+
+ Light and Dark Sets
+
+
+ Well Documented
+
+
+ Primitive, Semantic and Component Tokens
+
+
+
+
+
+
+
+
+
+
+
+
+
Pricing
+
Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.
+
View License Details
+
+
+
+
+
+
Single Designer
+
For individual designers
+
+
+ $99
+ $49
+
+
+
+
+ 1 Designer
+
+
+ Auto Layout & Variants
+
+
+ Interactive Components
+
+
+ Tokens Studio Support
+
+
+ Lifetime Support
+
+
+ Use on Unlimited Projects
+
+
+
+
Buy Now
+
+
+
+
+
+
+
+
Team
+
For small teams
+
+
+
+
+
+ Up to 5 Designers
+
+
+ Auto Layout & Variants
+
+
+ Interactive Components
+
+
+ Tokens Studio Support
+
+
+ Lifetime Support
+
+
+ Use on Unlimited Projects
+
+
+
+
Buy Now
+
+
+
+
+
+
+
+
Enterprise
+
For large teams
+
+
+ EXCLUSIVE DEALS
+
+
+
+
+ Unlimited Designers
+
+
+ Auto Layout & Variants
+
+
+ Interactive Components
+
+
+ Tokens Studio Support
+
+
+ Lifetime Support
+
+
+ Use on Unlimited Projects
+
+
+
+
Contact Us
+
+
+
+
+
+
+
+
Frequently Asked Questions
+
+
+
What do I get when I purchase a license?
+
You'll be able to download two Figma files for light and dark themes.
+
+
Is there a recurring fee or is the license perpetual?
+
UI Kit license is perpetual so requires one time payment, not subscription based.
+
+
Can I use UI Kit license for commercial projects?
+
Yes, your license allows you to sell your projects that utilize the UI Kit implementations.
+
+
Can I create multiple projects for multiple clients?
+
There is no limit, you are able to use UI Kit in multiple projects for multiple clients.
+
+
+
We're a reseller, are we able to purchase a license on behalf of our client?
+
+ Yes, after the purchase, please
+ contact us so we can transfer the license to your client.
+
+
+
Does the enterprise license include contractors within the organization?
+
Yes, contractors are also able to use the UI Kit within your company.
+
+
Can subsidiary company of a larger organization share the enterprise license?
+
No, enterprise license is per company so each subsidiary company needs to purchase a separate license.
+
+
What does "free updates" mean?
+
All updates will be totally free of charge for existing customers for an unlimited period.
+
+
+
How can I get support?
+
+ Support is provided by PrimeTek via
+ a dedicated forum channel monitored
+ by PrimeTek support staff.
+
+
+
What does lifetime support mean?
+
Support service at the forum does not have a time limit.
+
+
Can I include UI Kit in an open source project?
+
Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.
+
+
+
+
- Image is used as the native img element and supports all properties that the native element has. For multiple image, see Galleria.
-
-
-
- An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
- Accordion is defined using AccordionPanel , AccordionHeader and AccordionContent components. Each AccordionPanel must contain a unique value property to specify the active item.
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
- Header III
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
- Header III
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
- `,
-
- html: `
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
- Header III
-
-
-At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
- Panels can be controlled programmatically using value property as a model.
-
-
-
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
- `,
-
- html: `
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
- Enabling disabled property of an AccordionTab prevents user interaction.
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
- Header IV
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
- Header IV
-
- `,
-
- html: `
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
- Header IV
-
-
-
- AccordionPanel can be generated dynamically using the standard @for block.
-
-
-
-
- @for (tab of tabs; track tab.title) {
-
- {{ tab.title }}
-
- {{ tab.content }}
-
-
- }
-
-
-
- @for (tab of tabs; track tab.title) {
-
- {{ tab.title }}
-
- {{ tab.content }}
-
-
- }
- `,
-
- html: `
-
- @for (tab of tabs; track tab.title) {
-
- {{ tab.title }}
-
- {{ tab.content }}
-
-
- }
-
-
- Only one tab at a time can be active by default, enabling multiple property changes this behavior to allow multiple tabs. In this case activeIndex needs to be an array.
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
- `,
-
- html: `
-
-
- Header I
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Header II
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- Header III
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
- Accordion is customized with toggleicon template.
-
-
-
-
-
-
- @if (active) {
-
-
- Amy Elsner
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
-
-
- @if (active) {
-
-
- Onyama Limba
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
-
- @if (active) {
-
-
- 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.
-
-
-
-
-
-
-
-
- @if (active) {
-
-
- Amy Elsner
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
-
-
- @if (active) {
-
-
- Onyama Limba
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
-
- @if (active) {
-
-
- Ioni Bowcher
-
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
- `,
-
- html: `
-
-
-
-
- @if (active) {
-
-
- Amy Elsner
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
-
-
- @if (active) {
-
-
- Onyama Limba
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
-
- @if (active) {
-
-
- 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.
-
-
-
-
-
- Animation classes are defined with the enterClass and leaveClass properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.
-
-
-
- Scroll Down
-
-
-
-
-
- fade-in
-
-
-
- fade-left
-
-
-
- fade-right
-
-
-
- zoom
-
-
-
- flip-left
-
-
-
- flip-y
-
-
-
- scalein
-
-
- Scroll Down
-
-
-
-
-
- fade-in
-
-
-
- fade-left
-
-
-
- fade-right
-
-
-
- zoom
-
-
-
- flip-left
-
-
-
- flip-y
-
-
-
- scalein
-
`,
- html: `
-
- Scroll Down
-
-
-
-
-
- fade-in
-
-
-
- fade-left
-
-
-
- fade-right
-
-
-
- zoom
-
-
-
- flip-left
-
-
-
- flip-y
-
-
-
- scalein
-
-
- Screen Reader
-
- Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props. The input element has combobox role in addition to
- aria-autocomplete , aria-haspopup and aria-expanded attributes. The relation between the input and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct
- screen reader which option to read during keyboard navigation within the popup list.
-
- In multiple mode, chip list uses listbox role whereas each chip has the option role with aria-label set to the label of the chip.
-
- The popup list has an id that refers to the aria-controls attribute of the input element and uses listbox as the role. Each list item has option role and an id to match the aria-activedescendant of the
- input element.
-
-
-
- Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the input element when popup is not visible. If the popup is open and an item is highlighted then popup gets closed, item gets selected and focus moves to the next focusable element.
-
-
-
- up arrow
-
- Highlights the previous item if popup is visible.
-
-
-
- down arrow
-
- Highlights the next item if popup is visible.
-
-
-
- enter
-
- Selects the highlighted item and closes the popup if popup is visible.
-
-
-
- home
-
- Highlights the first item if popup is visible.
-
-
-
- end
-
- Highlights the last item if popup is visible.
-
-
-
- escape
-
- Hides the popup.
-
-
-
-
Chips Input Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- backspace
-
- Deletes the previous chip if the input field is empty.
-
-
-
- left arrow
-
- Moves focus to the previous chip if available and input field is empty.
-
-
-
-
Chip Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- left arrow
-
- Moves focus to the previous chip if available.
-
-
-
- right arrow
-
- Moves focus to the next chip, if there is none then input field receives the focus.
-
-
-
- backspace
-
- Deletes the chips and adds focus to the input field.
-
-
-
-
Username
-Email
-
-
- AutoComplete uses ngModel for two-way binding, requires a list of suggestions and a completeMethod to query for the results. The completeMethod gets the query text as event.query property and should update the
- suggestions with the search results.
-
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Option grouping is enabled when group property is set to true . group template is available to customize the option groups. All templates get the option instance as the default local template variable.
-
-
-
-
-
-
-
{{ group.label }}
-
-
-
-
-
-
-
{{ group.label }}
-
- `,
-
- html: `
-
-
-
-
-
{{ group.label }}
-
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- Identifier
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { AutoCompleteModule } from 'primeng/autocomplete';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-interface AutoCompleteCompleteEvent {
- originalEvent: Event;
- query: string;
-}
-
-@Component({
- selector: 'autocomplete-ifta-label-demo',
- templateUrl: './autocomplete-ifta-label-demo.html',
- standalone: true,
- imports: [FormsModule, AutoCompleteModule, IftaLabelModule]
-})
-export class AutocompleteIftaLabelDemo {
- items: any[] | undefined;
-
- value: any;
-
- search(event: AutoCompleteCompleteEvent) {
- this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
- }
-}`
- };
-
- search(event: AutoCompleteCompleteEvent) {
- this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
- }
-}
diff --git a/apps/showcase/src/app/showcase/doc/autocomplete/importdoc.ts b/apps/showcase/src/app/showcase/doc/autocomplete/importdoc.ts
deleted file mode 100644
index 1566084d587..00000000000
--- a/apps/showcase/src/app/showcase/doc/autocomplete/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'autocomplete-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array.
-
-
-
With Typeahead
-
-
-
Without Typeahead
-
-
With Typeahead
-Without Typeahead
-
-
With Typeahead
-
-
-
Without Typeahead
-
-
- AutoComplete can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- AutoComplete provides small and large sizes as alternatives to the base.
-
-
-
- AutoComplete offers multiple templates for customization through templating.
-
-
-
-
-
-
-
{{ country.name }}
-
-
- Available Countries
-
-
-
-
-
-
-
-
-
-
{{ country.name }}
-
-
- Available Countries
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
{{ country.name }}
-
-
- Available Countries
-
-
-
-
-
-
-
- Virtual scrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable virtual scrolling to avoid
- performance issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item.
-
-
-
-
- AutoFocus is applied to any focusable input element on initial load. It's disabled by default and needs to be enabled manually.
-
-
-
-
-
`,
- typescript: `import { Component } from '@angular/core';
-import { AutoFocus } from 'primeng/autofocus';
-import { InputTextModule } from 'primeng/inputtext';
-
-@Component({
- selector: 'auto-focus-basic-demo',
- templateUrl: './auto-focus-basic-demo.html',
- standalone: true,
- imports: [AutoFocus, InputTextModule]
-})
-export class AutoFocusBasicDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/autofocus/importdoc.ts b/apps/showcase/src/app/showcase/doc/autofocus/importdoc.ts
deleted file mode 100644
index 12d22d6c483..00000000000
--- a/apps/showcase/src/app/showcase/doc/autofocus/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'auto-focus-import-doc',
- template: `
- A badge can be added to an Avatar with the Badge directive.
-
-
-
- A font icon is displayed as an Avatar with the icon property.
-
-
-
- `,
-
- html: ``,
- typescript: `import { Component } from '@angular/core';
-import { AvatarModule } from 'primeng/avatar';
-import { OverlayBadgeModule } from 'primeng/overlaybadge';
-
-@Component({
- selector: 'avatar-icon-demo',
- templateUrl: './avatar-icon-demo.html',
- standalone: true,
- imports: [AvatarModule, OverlayBadgeModule]
-})
-export class AvatarIconDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/avatar/imagedoc.ts b/apps/showcase/src/app/showcase/doc/avatar/imagedoc.ts
deleted file mode 100644
index c98d9383682..00000000000
--- a/apps/showcase/src/app/showcase/doc/avatar/imagedoc.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'avatar-image-demo',
- template: `
-
- Use the image property to display an image as an Avatar.
-
-
-
-
-
-
- A letter Avatar is defined with the label property.
-
-
-
- `,
-
- html: ``,
- typescript: `import { Component } from '@angular/core';
-import { AvatarModule } from 'primeng/avatar';
-import { OverlayBadgeModule } from 'primeng/overlaybadge';
-
-@Component({
- selector: 'avatar-label-demo',
- templateUrl: './avatar-label-demo.html',
- standalone: true,
- imports: [AvatarModule, OverlayBadgeModule]
-})
-export class AvatarLabelDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/avatar/sizedoc.ts b/apps/showcase/src/app/showcase/doc/avatar/sizedoc.ts
deleted file mode 100644
index 5cfee333ef7..00000000000
--- a/apps/showcase/src/app/showcase/doc/avatar/sizedoc.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'avatar-size-demo',
- template: `
-
- size property defines the size of the Avatar with large and xlarge as possible values.
-
-
-
- Content can easily be customized with the dynamic content instead of using the built-in modes.
-
-
-
- Content
- `,
- html: ``,
- typescript: `import { Component } from '@angular/core';
-import { Avatar } from 'primeng/avatar';
-
-@Component({
- selector: 'avatar-template-demo',
- templateUrl: './avatar-template-demo.html',
- standalone: true,
- imports: [Avatar]
-})
-export class AvatarTemplateDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/badge/basicdoc.ts b/apps/showcase/src/app/showcase/doc/badge/basicdoc.ts
deleted file mode 100644
index f776a96650f..00000000000
--- a/apps/showcase/src/app/showcase/doc/badge/basicdoc.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'badge-basic-demo',
- template: `
-
- Content of the badge is specified using the value property.
-
-
-
- Buttons have built-in support for badges to display a badge inline.
-
-
-
-
-
- Content of the badge is specified using the value property.
-
-
-
-
-
`,
- typescript: `import { Component } from '@angular/core';
-import { BadgeModule } from 'primeng/badge';
-
-@Component({
- selector: 'badge-directive-demo',
- templateUrl: './badge-directive-demo.html',
- standalone: true,
- imports: [BadgeModule]
-})
-export class BadgeDirectiveDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/badge/importdoc.ts b/apps/showcase/src/app/showcase/doc/badge/importdoc.ts
deleted file mode 100644
index 8afe62531d5..00000000000
--- a/apps/showcase/src/app/showcase/doc/badge/importdoc.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'badge-import-doc',
- template: `
- A Badge can be positioned at the top right corner of an element by adding p-overlay-badge style class to the element and embedding the badge inside.
-
-
-
-
-
`,
- typescript: `import { Component } from '@angular/core';
-import { BadgeModule } from 'primeng/badge';
-
-@Component({
- selector: 'badge-position-demo',
- templateUrl: './badge-position-demo.html',
- standalone: true,
- imports: [BadgeModule]
-})
-export class BadgePositionDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/badge/severitydoc.ts b/apps/showcase/src/app/showcase/doc/badge/severitydoc.ts
deleted file mode 100644
index c73e3040ad4..00000000000
--- a/apps/showcase/src/app/showcase/doc/badge/severitydoc.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'badge-severity-demo',
- template: `
-
- Severity defines the color of the badge, possible values are success , info , warn and danger
-
-
-
- Badge sizes are adjusted with the badgeSize property that accepts small , large and xlarge as the possible alternatives to the default size. Currently sizes only apply to component mode.
-
-
-
- The element to block should be placed as a child of BlockUI and blocked property is required to control the state.
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
- 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.
-
-
- If the target element is not specified, BlockUI blocks the document by default.
-
-
-
- Breadcrumb provides contextual information about page hierarchy.
-
-
-
- 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 }}
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Breadcrumb } from 'primeng/breadcrumb';
-import { RouterModule } from '@angular/router';
-
-@Component({
- selector: 'breadcrumb-router-demo',
- templateUrl: './breadcrumb-router-demo.html',
- standalone: true,
- imports: [Breadcrumb, RouterModule]
-})
-export class BreadcrumbRouterDemo implements OnInit {
- items: MenuItem[] | undefined;
-
- home: MenuItem | undefined;
-
- ngOnInit() {
- this.items = [{ icon: 'pi pi-home', route: '/installation' }, { label: 'Components' }, { label: 'Form' }, { label: 'InputText', route: '/inputtext' }];
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/breadcrumb/templatedoc.ts b/apps/showcase/src/app/showcase/doc/breadcrumb/templatedoc.ts
deleted file mode 100644
index fe27201531e..00000000000
--- a/apps/showcase/src/app/showcase/doc/breadcrumb/templatedoc.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-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.
-
-
-
-
-
-
-
- /
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Breadcrumb } from 'primeng/breadcrumb';
-import { RouterModule } from '@angular/router';
-
-@Component({
- selector: 'breadcrumb-template-demo',
- templateUrl: './breadcrumb-template-demo.html',
- standalone: true,
- imports: [Breadcrumb, RouterModule]
-})
-export class BreadcrumbTemplateDemo implements OnInit {
- items: MenuItem[] | undefined;
-
- home: MenuItem | undefined;
-
- ngOnInit() {
- this.items = [{ icon: 'pi pi-sitemap' }, { icon: 'pi pi-book' }, { icon: 'pi pi-wallet' }, { icon: 'pi pi-shopping-bag' }, { icon: 'pi pi-calculator' }];
-
- this.home = { icon: 'pi pi-home' };
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/button/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/button/accessibilitydoc.ts
deleted file mode 100644
index dd9e9733e63..00000000000
--- a/apps/showcase/src/app/showcase/doc/button/accessibilitydoc.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'button-accessibility-doc',
- template: `
-
- Screen Reader
-
- Button component renders a native button element that implicitly includes any passed prop. Text to describe the button is defined with the aria-label prop, if not present label prop is used as the value. If the button is
- icon only or custom templating is used, it is recommended to use aria-label so that screen readers would be able to read the element properly.
-
-
-
- Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the button.
-
-
-
- enter
-
- Activates the button.
-
-
-
- space
-
- Activates the button.
-
-
-
-
- Youtube
- `
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/button/badgedoc.ts b/apps/showcase/src/app/showcase/doc/button/badgedoc.ts
deleted file mode 100644
index 410aefc86e6..00000000000
--- a/apps/showcase/src/app/showcase/doc/button/badgedoc.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'button-badge-demo',
- template: `
-
- Buttons have built-in badge support with badge and badgeClass properties.
-
-
-
- Text to display on a button is defined with the label property.
-
-
-
-
- Button can also be used as directive using pButton along with pButtonLabel and pButtonIcon helper directives. In contrary of p-button component, pButton directive does not utilize ripple effect, use
- pRipple directive to enable ripple.
-
-
-
-
- label
-
-
-
- label
- `,
-
- html: `
-
- label
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { RippleModule } from 'primeng/ripple';
-
-@Component({
- selector: 'button-directive-demo',
- templateUrl: './button-directive-demo.html',
- standalone: true,
- imports: [ButtonModule, RippleModule]
-})
-export class ButtonDirectiveDemo { }`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/button/disableddoc.ts b/apps/showcase/src/app/showcase/doc/button/disableddoc.ts
deleted file mode 100644
index 09e06f17a0b..00000000000
--- a/apps/showcase/src/app/showcase/doc/button/disableddoc.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'button-disabled-demo',
- template: `
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Icon of a button is specified with icon property and position is configured using iconPos attribute.
-
-
-
- Busy state is controlled with the loading property.
-
-
-
- Outlined buttons display a border without a background initially.
-
-
-
- Raised buttons display a shadow to indicate elevation.
-
-
-
- Text buttons can be displayed as raised for elevation.
-
-
-
- Rounded buttons have a circular border radius.
-
-
-
- Severity defines the type of button.
-
-
-
- Button provides small and large sizes as alternatives to the standard.
-
-
-
- Custom content inside a button is defined as children.
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
- Text buttons are displayed as textual elements.
-
-
-
-
-
Screen Reader
-
- A card can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so if you
- require to use one of the landmark roles like region , you may use the role property.
-
-
-
Keyboard Support
-
Component does not include any interactive elements.
-
`
-})
-export class AccessibilityDoc {
- code: Code = {
- html: `
- Content
- `
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/card/advanceddoc.ts b/apps/showcase/src/app/showcase/doc/card/advanceddoc.ts
deleted file mode 100644
index 54c8ceda491..00000000000
--- a/apps/showcase/src/app/showcase/doc/card/advanceddoc.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'card-advanced-demo',
- template: `
-
- Card content can be customized further with subHeader , header and footer properties.
-
-
-
-
-
- Advanced Card
- Card subtitle
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque
- quas!
-
-
-
-
-
-
-
-
- Advanced Card
- Card subtitle
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
- quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
-
-
-
-
- `,
-
- html: `
-
-
-
- Advanced Card
- Card subtitle
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
- quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
-
-
-
-
-
-
- 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!
-
-
-
-
- Lorem ipsum dolor sit amet...
-
- `,
-
- 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!
-
-
-
- Carousel requires a collection of items as its value along with a template to render each item.
-
-
-
-
-
-
-
-
-
-
-
-
{{ product.name }}
-
-
{{ '$' + product.price }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ product.name }}
-
-
-
- {{ '$' + product.price }}
-
-
-
-
-
- `,
- html: `
-
-
-
-
-
-
-
-
-
-
- {{ product.name }}
-
-
-
- {{ '$' + product.price }}
-
-
-
-
-
-
-
-
- Carousel supports specific configuration per screen size with the responsiveOptions property that takes an array of objects where each object defines the max-width breakpoint , numVisible for the number of items
- items per page and numScroll for number of items to scroll. When responsiveOptions is defined, the numScroll
- and
- numVisible properties of the Carousel are used as default when there is breakpoint that applies.
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ product.name }}
-
-
{{ '$' + product.price }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ product.name }}
-
-
-
- {{ '$' + product.price }}
-
-
-
-
-
- `,
- html: `
-
-
-
-
-
-
-
-
-
-
- {{ product.name }}
-
-
-
- {{ '$' + product.price }}
-
-
-
-
-
-
-
- Custom content projection is available using the header and footer templates.
-
-
-
-
- Header content
-
-
-
-
-
-
-
-
-
-
{{ product.name }}
-
-
{{ '$' + product.price }}
-
-
-
-
-
- Footer content
-
-
-
-
- Header content
-
-
-
-
-
-
-
-
-
-
- {{ product.name }}
-
-
-
- {{ '$' + product.price }}
-
-
-
-
-
-
- Footer content
-
- `,
- html: `
-
-
- Header content
-
-
-
-
-
-
-
-
-
-
{{ product.name }}
-
-
- {{ '$' + product.price }}
-
-
-
-
-
-
- Footer content
-
-
-
- To create a vertical Carousel, orientation needs to be set to vertical along with a verticalViewPortHeight .
-
-
-
-
-
-
-
-
-
-
-
-
{{ product.name }}
-
-
{{ '$' + product.price }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ product.name }}
-
-
-
- {{ '$' + product.price }}
-
-
-
-
-
- `,
- html: `
-
-
-
-
-
-
-
-
-
-
{{ product.name }}
-
-
- {{ '$' + product.price }}
-
-
-
-
-
-
-
- Screen Reader
-
- Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The cascadeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes.
- The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup.
-
-
- The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label ,
- aria-selected and aria-expanded attributes. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are calculated implicitly and
- added to each treeitem.
-
-
-
- Closed State Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the cascadeselect element.
-
-
-
- space
-
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
-
-
- down arrow
-
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
-
-
-
Popup Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Hides the popup and moves focus to the next tabbable element.
-
-
- shift + tab Hides the popup and moves focus to the previous tabbable element.
-
-
-
- enter
-
- Selects the focused option and closes the popup.
-
-
-
- space
-
- Selects the focused option and closes the popup.
-
-
-
- escape
-
- Closes the popup, moves focus to the cascadeselect element.
-
-
-
- down arrow
-
- Moves focus to the next option.
-
-
-
- up arrow
-
- Moves focus to the previous option.
-
-
-
- right arrow
-
- If option is closed, opens the option otherwise moves focus to the first child option.
-
-
-
- left arrow
-
- If option is open, closes the option otherwise moves focus to the parent option.
-
-
-
-
Options
-
-
- CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy.
- optionGroupLabel is used for the text of a category and optionGroupChildren is to define the children of the category. Note that order of the optionGroupChildren matters and it should correspond to the data
- hierarchy.
-
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
-
- City
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { CascadeSelectModule } from 'primeng/cascadeselect';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-@Component({
- selector: 'cascade-select-ifta-label-demo',
- templateUrl: './cascade-select-ifta-label-demo.html',
- standalone: true,
- imports: [FormsModule, CascadeSelectModule, IftaLabelModule]
-})
-export class CascadeSelectIftaLabelDemo implements OnInit {
-
- countries: any[] | undefined;
-
- selectedCity: any;
-
- ngOnInit() {
- this.countries = [
- {
- name: 'Australia',
- code: 'AU',
- states: [
- {
- name: 'New South Wales',
- cities: [
- { cname: 'Sydney', code: 'A-SY' },
- { cname: 'Newcastle', code: 'A-NE' },
- { cname: 'Wollongong', code: 'A-WO' }
- ]
- },
- {
- name: 'Queensland',
- cities: [
- { cname: 'Brisbane', code: 'A-BR' },
- { cname: 'Townsville', code: 'A-TO' }
- ]
- }
- ]
- },
- {
- name: 'Canada',
- code: 'CA',
- states: [
- {
- name: 'Quebec',
- cities: [
- { cname: 'Montreal', code: 'C-MO' },
- { cname: 'Quebec City', code: 'C-QU' }
- ]
- },
- {
- name: 'Ontario',
- cities: [
- { cname: 'Ottawa', code: 'C-OT' },
- { cname: 'Toronto', code: 'C-TO' }
- ]
- }
- ]
- },
- {
- name: 'United States',
- code: 'US',
- states: [
- {
- name: 'California',
- cities: [
- { cname: 'Los Angeles', code: 'US-LA' },
- { cname: 'San Diego', code: 'US-SD' },
- { cname: 'San Francisco', code: 'US-SF' }
- ]
- },
- {
- name: 'Florida',
- cities: [
- { cname: 'Jacksonville', code: 'US-JA' },
- { cname: 'Miami', code: 'US-MI' },
- { cname: 'Tampa', code: 'US-TA' },
- { cname: 'Orlando', code: 'US-OR' }
- ]
- },
- {
- name: 'Texas',
- cities: [
- { cname: 'Austin', code: 'US-AU' },
- { cname: 'Dallas', code: 'US-DA' },
- { cname: 'Houston', code: 'US-HO' }
- ]
- }
- ]
- }
- ];
- }
-}`
- };
-
- ngOnInit() {
- this.countries = [
- {
- name: 'Australia',
- code: 'AU',
- states: [
- {
- name: 'New South Wales',
- cities: [
- { cname: 'Sydney', code: 'A-SY' },
- { cname: 'Newcastle', code: 'A-NE' },
- { cname: 'Wollongong', code: 'A-WO' }
- ]
- },
- {
- name: 'Queensland',
- cities: [
- { cname: 'Brisbane', code: 'A-BR' },
- { cname: 'Townsville', code: 'A-TO' }
- ]
- }
- ]
- },
- {
- name: 'Canada',
- code: 'CA',
- states: [
- {
- name: 'Quebec',
- cities: [
- { cname: 'Montreal', code: 'C-MO' },
- { cname: 'Quebec City', code: 'C-QU' }
- ]
- },
- {
- name: 'Ontario',
- cities: [
- { cname: 'Ottawa', code: 'C-OT' },
- { cname: 'Toronto', code: 'C-TO' }
- ]
- }
- ]
- },
- {
- name: 'United States',
- code: 'US',
- states: [
- {
- name: 'California',
- cities: [
- { cname: 'Los Angeles', code: 'US-LA' },
- { cname: 'San Diego', code: 'US-SD' },
- { cname: 'San Francisco', code: 'US-SF' }
- ]
- },
- {
- name: 'Florida',
- cities: [
- { cname: 'Jacksonville', code: 'US-JA' },
- { cname: 'Miami', code: 'US-MI' },
- { cname: 'Tampa', code: 'US-TA' },
- { cname: 'Orlando', code: 'US-OR' }
- ]
- },
- {
- name: 'Texas',
- cities: [
- { cname: 'Austin', code: 'US-AU' },
- { cname: 'Dallas', code: 'US-DA' },
- { cname: 'Houston', code: 'US-HO' }
- ]
- }
- ]
- }
- ];
- }
-}
diff --git a/apps/showcase/src/app/showcase/doc/cascadeselect/importdoc.ts b/apps/showcase/src/app/showcase/doc/cascadeselect/importdoc.ts
deleted file mode 100644
index 1e12cb08d0e..00000000000
--- a/apps/showcase/src/app/showcase/doc/cascadeselect/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'cascade-select-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- Loading state can be used loading property.
-
-
-
- CascadeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- (null)
- });
-
- 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 { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { CascadeSelect } from 'primeng/cascadeselect';
-
-@Component({
- selector: 'cascade-select-reactive-forms-demo',
- templateUrl: './cascade-select-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, CascadeSelect]
-})
-export class CascadeSelectReactiveFormsDemo implements OnInit {
- countries: any[] | undefined;
-
- selectedCity: any;
-
- formGroup: FormGroup | undefined;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- selectedCity: new FormControl(null)
- });
-
- this.countries = [
- {
- name: 'Australia',
- code: 'AU',
- states: [
- {
- name: 'New South Wales',
- cities: [
- { cname: 'Sydney', code: 'A-SY' },
- { cname: 'Newcastle', code: 'A-NE' },
- { cname: 'Wollongong', code: 'A-WO' }
- ]
- },
- {
- name: 'Queensland',
- cities: [
- { cname: 'Brisbane', code: 'A-BR' },
- { cname: 'Townsville', code: 'A-TO' }
- ]
- }
- ]
- },
- {
- name: 'Canada',
- code: 'CA',
- states: [
- {
- name: 'Quebec',
- cities: [
- { cname: 'Montreal', code: 'C-MO' },
- { cname: 'Quebec City', code: 'C-QU' }
- ]
- },
- {
- name: 'Ontario',
- cities: [
- { cname: 'Ottawa', code: 'C-OT' },
- { cname: 'Toronto', code: 'C-TO' }
- ]
- }
- ]
- },
- {
- name: 'United States',
- code: 'US',
- states: [
- {
- name: 'California',
- cities: [
- { cname: 'Los Angeles', code: 'US-LA' },
- { cname: 'San Diego', code: 'US-SD' },
- { cname: 'San Francisco', code: 'US-SF' }
- ]
- },
- {
- name: 'Florida',
- cities: [
- { cname: 'Jacksonville', code: 'US-JA' },
- { cname: 'Miami', code: 'US-MI' },
- { cname: 'Tampa', code: 'US-TA' },
- { cname: 'Orlando', code: 'US-OR' }
- ]
- },
- {
- name: 'Texas',
- cities: [
- { cname: 'Austin', code: 'US-AU' },
- { cname: 'Dallas', code: 'US-DA' },
- { cname: 'Houston', code: 'US-HO' }
- ]
- }
- ]
- }
- ];
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/cascadeselect/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/cascadeselect/sizesdoc.ts
deleted file mode 100644
index ed4563dd164..00000000000
--- a/apps/showcase/src/app/showcase/doc/cascadeselect/sizesdoc.ts
+++ /dev/null
@@ -1,212 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'cascade-select-sizes-demo',
- template: `
-
- CascadeSelect provides small and large sizes as alternatives to the base.
-
-
-
-
- Label of an option is used as the display text of an item by default, for custom content support define an
- option template that gets the option instance as a parameter. In addition value , dropdownicon , loadingicon , and optiongroupicon slots are provided for further customization.
-
-
-
-
-
-
-
-
-
-
{{ option.cname || option.name }}
-
-
-
-
-
- Available Countries
-
-
-
-
-
-
-
-
-
-
-
-
{{ option.cname || option.name }}
-
-
-
-
-
- Available Countries
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
{{ option.cname || option.name }}
-
-
-
-
-
- Available Countries
-
-
-
-
-
-
-
-
-
Screen Reader
-
- Chart components internally use canvas element, refer to the
- Chart.js accessibility
- guide for more information. The canvas element can be customized with canvasProps property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be
- able to provide fallback content like a table.
-
-
-
-
-
- A chart is configured with 3 properties; type , data and options . Chart type is defined using the type property that accepts pie , doughtnut , line , bar , radar and
- polarArea as a value. The data defines datasets represented with the chart and the options provide numerous customization options to customize the presentation.
-
-
-
-
-
- Screen Reader
-
- Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using
- ariaLabelledBy , ariaLabel props.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the checkbox.
-
-
-
- space
-
- Toggles the checked state.
-
-
-
-
-
Remember Me
-Remember Me
-
- Binary checkbox is used as a controlled input with ngModel and binary properties.
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Checkboxes can be generated using a list of values.
-
-
-
-
-
-
{{ category.name }}
-
-
-
-
-
{{ category.name }}
-
-
-
-
-
{{ category.name }}
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
- When indeterminate is present, the checkbox masks the actual value visually.
-
-
-
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- The label attribute provides a label text for the checkbox. This label is also clickable and toggles the checked state.
-
-
-
- Multiple checkboxes can be grouped together.
-
-
-
- Checkbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- (null)
- });
- }
-
- code: Code = {
- basic: ``,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { Checkbox } from 'primeng/checkbox';
-
-@Component({
- selector: 'checkbox-reactive-forms-demo',
- templateUrl: './checkbox-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, Checkbox]
-})
-export class CheckboxReactiveFormsDemo implements OnInit{
- formGroup: FormGroup | undefined;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- city: new FormControl(null)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/checkbox/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/checkbox/sizesdoc.ts
deleted file mode 100644
index 2214149b479..00000000000
--- a/apps/showcase/src/app/showcase/doc/checkbox/sizesdoc.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'checkbox-sizes-demo',
- template: `
-
- Checkbox provides small and large sizes as alternatives to the base.
-
-
-
-
- A basic chip with a text is created with the label property. In addition when removable is added, a delete icon is displayed to remove a chip, the optional onRemove event is available to get notified when a chip
- is hidden.
-
-
-
-
- A font icon next to the label can be displayed with the icon property.
-
-
-
- The image property is used to display an image like an avatar.
-
-
-
- Content can easily be customized with the dynamic content instead of using the built-in modes.
-
-
-
-
- P
-
-
- PRIME
-
- `,
- html: `
-
-
- P
-
-
- PRIME
-
-
-
- ColorPicker is used as a controlled input with ngModel property.
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Default color format to use in value binding is hex and other possible values can be rgb and hsb using the format property.
-
-
-
-
-
RGB
-
-
{{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}
-
-
-
HSB
-
-
{{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}
-
-
-
-
-
RGB
-
-
{{ 'r:' + colorRGB.r + ' g:' + colorRGB.g + ' b:' + colorRGB.b }}
-
-
-
HSB
-
-
{{ 'h:' + colorHSB.h + ' s:' + colorHSB.s + ' b:' + colorHSB.b }}
-
-
- ColorPicker is displayed as a popup by default, add inline property to customize this behavior.
-
-
-
- ColorPicker can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- Configuration is managed by the PrimeNGConfig instance imported from primeng/api and injected via dependency injection.
-
-
-
- Screen Reader
-
- ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default
- behavior. In addition aria-modal is added since focus is kept within the popup.
-
-
- It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding
- tabIndex would be necessary.
-
-
- When confirm function is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is
- defined.
-
-
- If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly.
-
- Overlay Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- tab Moves focus to the next the focusable element within the popup.
-
-
- shift + tab Moves focus to the previous the focusable element within the popup.
-
-
- escape Closes the popup and moves focus to the trigger.
-
-
-
-
Buttons Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- enter Triggers the action, closes the popup and moves focus to the trigger.
-
-
- space Triggers the action, closes the popup and moves focus to the trigger.
-
-
-
-
-
- ConfirmDialog is defined using p-confirmDialog tag and an instance of ConfirmationService is required to display it bycalling confirm method.
-
-
-
- Headless mode allows you to customize the entire user interface instead of the default elements.
-
-
-
-
-
-
-
-
-
{{ message.header }}
-
{{ message.message }}
-
-
-
-
-
-
-
-
-
-
{{ message.header }}
-
{{ message.message }}
-
-
-
-
-
-
-
-
-
-
-
{{ message.header }}
-
{{ message.message }}
-
-
-
-
-
- The position property of the confirm options is used to display a Dialog at all edges and corners of the screen.
-
-
-
-
- Properties of the dialog are defined in two ways, message , icon , header properties can either be defined using confirm method or declaratively on p-confirmDialog ng-template by header , message ,
- icon and footer templates. If these values are unlikely to change then declarative approach would be useful, still properties defined in a ng-template can be overridden with confirm method call.
-
-
- In addition, buttons at footer section can be customized by passing your own UI, important note to make confirmation work with a custom UI is defining a local ng-template variable for the dialog and assign accept()-reject() methods to
- your own buttons.
-
-
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
- ConfirmPopup is defined using p-confirmPopup tag and an instance of ConfirmationService is required to display it bycalling confirm method.
-
-
-
- Headless mode allows you to customize the entire user interface instead of the default elements.
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
-
- Content section can be customized using content template.
-
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
-
-
-
-
-
{{ message.message }}
-
-
-
-
-
- ContextMenu can be attached to a particular element whose local template variable name is defined using the
- target property.
-
-
-
-
-
-
-
-
-
- The function to invoke when an item is clicked is defined using the command property.
-
-
-
-
-
-
-
-
{{ user.name }}
-
-
-
-
-
-
-
-
-
{{ user.name }}
-
-
-
-
-
-
-
-
-
-
{{ user.name }}
-
-
-
-
-
- Setting global property to true attaches the context menu to the document.
-
-
-
Right-Click anywhere on this page to view the global ContextMenu.
-
-
-
Right-Click anywhere on this page to view the global ContextMenu.
-
-
- Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ContextMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.
-
-
-
-
-
-
-
-
{{ product.name }}
-
- {{ product.category }}
-
-
-
${{ product.price }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ product.name }}
-
- {{ product.category }}
-
-
-
${{ product.price }}
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
{{ product.name }}
-
- {{ product.category }}
-
-
-
${{ product.price }}
-
-
-
-
-
-
-
-
-
- Any type of image can be used as an icon.
-
-
-
-
- `
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/dataview/basicdoc.ts b/apps/showcase/src/app/showcase/doc/dataview/basicdoc.ts
deleted file mode 100644
index 4d6233bccb7..00000000000
--- a/apps/showcase/src/app/showcase/doc/dataview/basicdoc.ts
+++ /dev/null
@@ -1,291 +0,0 @@
-import { Component, inject, signal } from '@angular/core';
-import { Code } from '@domain/code';
-import { Product } from '@domain/product';
-import { ProductService } from '@service/productservice';
-
-@Component({
- selector: 'data-view-basic-demo',
- template: `
-
- DataView requires a value to display along with a list template that receives an object in the collection to return content.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ item.category }}
-
{{ item.name }}
-
-
-
- {{ item.rating }}
-
-
-
-
-
{{ '$' + item.price }}
-
-
-
-
-
-
-
-
([]);
-
- productService = inject(ProductService);
- code: Code = {
- basic: `
-
-
-
-
-
-
-
-
-
-
-
-
{{ item.category }}
-
{{ item.name }}
-
-
-
- {{
- item.rating
- }}
-
-
-
-
-
{{
- '$' + item.price
- }}
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ item.category }}
-
{{ item.name }}
-
-
-
- {{
- item.rating
- }}
-
-
-
-
-
{{
- '$' + item.price
- }}
-
-
-
-
-
-
-
-
([]);
-
- productService = inject(ProductService);
- ngOnInit() {
- this.productService.getProducts().then((data) => {
- const d = data.slice(0, 5);
- this.products.set([...d])
- });
- }
-
- getSeverity(product: Product) {
- switch (product.inventoryStatus) {
- case 'INSTOCK':
- return 'success';
-
- case 'LOWSTOCK':
- return 'warn';
-
- case 'OUTOFSTOCK':
- return 'danger';
-
- default:
- return null;
- }
- }
-
-}`,
-
- data: `
-/* ProductService */
-{
- id: '1000',
- code: 'f230fh0g3',
- name: 'Bamboo Watch',
- description: 'Product Description',
- image: 'bamboo-watch.jpg',
- price: 65,
- category: 'Accessories',
- quantity: 24,
- inventoryStatus: 'INSTOCK',
- rating: 5
-},
-...`,
-
- service: ['ProductService']
- };
-
- getSeverity(product: Product) {
- switch (product.inventoryStatus) {
- case 'INSTOCK':
- return 'success';
-
- case 'LOWSTOCK':
- return 'warn';
-
- case 'OUTOFSTOCK':
- return 'danger';
-
- default:
- return null;
- }
- }
-
- ngOnInit() {
- this.productService.getProducts().then((data) => {
- const d = data.slice(0, 5);
- this.products.set([...d]);
- });
- }
-
- extFiles = [
- {
- path: 'src/domain/product.ts',
- content: `
-export interface Product {
- id?: string;
- code?: string;
- name?: string;
- description?: string;
- price?: number;
- quantity?: number;
- inventoryStatus?: string;
- category?: string;
- image?: string;
- rating?: number;
-}`
- }
- ];
-}
diff --git a/apps/showcase/src/app/showcase/doc/dataview/importdoc.ts b/apps/showcase/src/app/showcase/doc/dataview/importdoc.ts
deleted file mode 100644
index 4c672afbe11..00000000000
--- a/apps/showcase/src/app/showcase/doc/dataview/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'data-view-import-doc',
- template: `
- While data is being loaded. Skeleton component may be used to indicate the busy state.
-
-
- ([]);
-
- options: string[] = ['list', 'grid'];
-
- constructor(private productService: ProductService) {}
- code: Code = {
- basic: `
-
-
-
-
-
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { Product } from '@domain/product';
-import { ProductService } from '@service/productservice';
-import { DataView } from 'primeng/dataview';
-import { CommonModule } from '@angular/common';
-import { Skeleton } from 'primeng/skeleton';
-import { SelectButton } from 'primeng/selectbutton';
-import { signal } from '@angular/core';
-
-@Component({
- selector: 'data-view-loading-demo',
- templateUrl: './data-view-loading-demo.html',
- standalone: true,
- imports: [DataView, CommonModule, Skeleton, SelectButton],
- providers: [ProductService]
-})
-export class DataViewLoadingDemo {
- layout: string = 'grid';
-
- products = signal([]);
-
- options: string[] = ['list', 'grid'];
-
- constructor(private productService: ProductService) {}
-
- ngOnInit() {
- this.productService.getProducts().then((data) => (this.products.set([...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']
- };
-
- 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);
- }
-
- ngOnInit() {
- this.productService.getProducts().then((data) => this.products.set([...data.slice(0, 12)]));
- }
-
- extFiles = [
- {
- path: 'src/domain/product.ts',
- content: `
-export interface Product {
- id?: string;
- code?: string;
- name?: string;
- description?: string;
- price?: number;
- quantity?: number;
- inventoryStatus?: string;
- category?: string;
- image?: string;
- rating?: number;
-}`
- }
- ];
-}
diff --git a/apps/showcase/src/app/showcase/doc/datepicker/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/datepicker/accessibilitydoc.ts
deleted file mode 100644
index cf66d3d15fa..00000000000
--- a/apps/showcase/src/app/showcase/doc/datepicker/accessibilitydoc.ts
+++ /dev/null
@@ -1,241 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'date-picker-accessibility-doc',
- template: `
-
- Screen Reader
-
- Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby , aria-label props. The input element has combobox role in addition to
- aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup.
-
-
- The optional DatePicker button requires includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the
- chooseDate
- key of the aria property from the locale API. This label is also used for the aria-label of the popup as well. When there is a value selected, it is formatted and appended to the label to be
- able to notify users about the current value.
-
-
-
- Popup has a dialog role along with aria-modal and aria-label . The navigation buttons at the header has an aria-label retrieved from the prevYear , nextYear , prevMonth ,
- nextMonth ,prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys.
-
-
-
- Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value.
- Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute.
-
-
-
- Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour , nextHour , prevMinute , nextMinute , prevSecond , nextSecond , am and
- pm keys.
-
-
- DatePicker also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.
-
-
-
-
-
Choose Date Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- space
-
- Opens popup and moves focus to the selected date, if there is none focuses on today.
-
-
-
- enter
-
- Opens popup and moves focus to the selected date, if there is none focuses on today.
-
-
-
-
-
-
Popup Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- escape
-
- Closes the popup and moves focus to the input element.
-
-
-
- tab
-
- Moves focus to the next focusable element within the popup.
-
-
- shift + tab Moves focus to the next focusable element within the popup.
-
-
-
-
-
-
Header Buttons Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Triggers the button action.
-
-
-
- space
-
- Triggers the button action.
-
-
-
-
-
-
Date Grid Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Selects the date, closes the popup and moves focus to the input element.
-
-
-
- space
-
- Selects the date, closes the popup and moves focus to the input element.
-
-
-
- up arrow
-
- Moves focus to the same day of the previous week.
-
-
-
- down arrow
-
- Moves focus to the same day of the next week.
-
-
-
- right arrow
-
- Moves focus to the next day.
-
-
-
- left arrow
-
- Moves focus to the previous day.
-
-
-
- home
-
- Moves focus to the first day of the current week.
-
-
-
- end
-
- Moves focus to the last day of the current week.
-
-
-
- page up
-
- Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.
-
-
- shift + page up Changes the date to previous year in date picker mode. Has no effect in month or year picker
-
-
-
- page down
-
- Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.
-
-
- shift + page down Changes the date to next year in date picker mode. Has no effect in month or year picker
-
-
-
-
-
-
Footer Buttons Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Triggers the button action.
-
-
-
- space
-
- Triggers the button action.
-
-
-
-
-
Date
-Date
-
- Two-way value binding is defined using the standard ngModel directive referencing to a Date property.
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Default date format is mm/dd/yy which can be customized using the dateFormat property. Following options can be a part of the format.
-
- d - day of month (no leading zero)dd - day of month (two digit)o - day of the year (no leading zeros)oo - day of the year (three digit)D - day name shortDD - day name longm - month of year (no leading zero)mm - month of year (two digit)M - month name shortMM - month name longy - year (two digit)yy - year (four digit)@ - Unix timestamp (ms since 01/01/1970)! - Windows ticks (100ns since 01/01/0001)'...' - literal text'' - single quoteanything else - literal text
-
-
-
- An additional icon is displayed next to the input field when showIcon is present.
-
-
-
-
-
-
-
-
Custom Icon
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
Custom Icon
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { DatePickerModule } from 'primeng/datepicker';
-import { FormsModule } from '@angular/forms';
-import { FluidModule } from 'primeng/fluid';
-
-@Component({
- selector: 'datepicker-icon-demo',
- templateUrl: './datepicker-icon-demo.html',
- standalone: true,
- imports: [DatePickerModule, FormsModule, FluidModule]
-})
-export class DatePickerIconDemo {
- date1: Date | undefined;
-
- date2: Date | undefined;
-
- date3: Date | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/datepicker/iftalabeldoc.ts b/apps/showcase/src/app/showcase/doc/datepicker/iftalabeldoc.ts
deleted file mode 100644
index 52012c92bc4..00000000000
--- a/apps/showcase/src/app/showcase/doc/datepicker/iftalabeldoc.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'datepicker-ifta-label-demo',
- template: `
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- DatePicker is displayed as a popup by default, add inline property to customize this behavior.
-
-
-
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- In order to choose multiple dates, set selectionMode as multiple . In this mode, the value binding should be an array.
-
-
-
- A range of dates can be selected by defining selectionMode as range , in this case the bound value would be an array with two values where first date is the start of the range and second date is the end.
-
-
-
- DatePicker can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- (null)
- });
- }
-
- code: Code = {
- basic: ``,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { DatePicker } from 'primeng/datepicker';
-
-@Component({
- selector: 'datepicker-reactive-forms-demo',
- templateUrl: './datepicker-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, DatePicker]
-})
-export class DatePickerReactiveFormsDemo {
- formGroup: FormGroup | undefined;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- date: new FormControl(null)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/datepicker/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/datepicker/sizesdoc.ts
deleted file mode 100644
index ad9d2ca7276..00000000000
--- a/apps/showcase/src/app/showcase/doc/datepicker/sizesdoc.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'datepicker-sizes-demo',
- template: `
-
- DatePicker provides small and large sizes as alternatives to the base.
-
-
-
- Calendar UI accepts custom content using header and footer templates.
-
-
-
- Header
- Footer
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-
-@Component({
- selector: 'calendar-template-demo',
- templateUrl: './calendar-template-demo.html'
-})
-export class CalendarTemplateDemo {
- date: Date[] | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/defer/basicdoc.ts b/apps/showcase/src/app/showcase/doc/defer/basicdoc.ts
deleted file mode 100644
index c253e3a4602..00000000000
--- a/apps/showcase/src/app/showcase/doc/defer/basicdoc.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Component } from '@angular/core';
-import { MessageService } from 'primeng/api';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.
-
-
-
Content is not loaded yet, scroll down to initialize it.
-
-
-
-
-
-
-
-
-
-
- Content is not loaded yet, scroll down to initialize it.
-
-
-
-
-
-
-
- Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.
-
-
-
Table is not loaded yet, scroll down to initialize it.
-
-
-
-
-
-
-
- Vin
- Year
- Brand
- Color
-
-
-
-
- {{ car.vin }}
- {{ car.year }}
- {{ car.brand }}
- {{ car.color }}
-
-
-
-
-
-
-
-
-
-
- Vin
- Year
- Brand
- Color
-
-
-
-
- {{car.vin}}
- {{car.year}}
- {{car.brand}}
- {{car.color}}
-
-
-
-
-
-
- Table is not loaded yet, scroll down to initialize it.
-
-
-
-
-
-
-
-
- Vin
- Year
- Brand
- Color
-
-
-
-
- {{car.vin}}
- {{car.year}}
- {{car.brand}}
- {{car.color}}
-
-
-
-
-
-
-
- Screen Reader
-
- Dialog component uses dialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In
- addition aria-modal is added since focus is kept within the popup.
-
-
- It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding
- tabIndex would be necessary.
-
- Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
-
- Close element is a button with an aria-label that refers to the aria.close property of the locale API by default, you may usecloseButtonProps to customize the element
- and override the default aria-label .
-
-
- Overlay Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- tab Moves focus to the next the focusable element within the dialog.
-
-
- shift + tab Moves focus to the previous the focusable element within the dialog.
-
-
- escape Closes the dialog if closeOnEscape is true.
-
-
-
-
Close Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- enter Closes the dialog.
-
-
- space Closes the dialog.
-
-
-
-
-
- Content
- `
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/dialog/basicdoc.ts b/apps/showcase/src/app/showcase/doc/dialog/basicdoc.ts
deleted file mode 100644
index e7c9e3d0abf..00000000000
--- a/apps/showcase/src/app/showcase/doc/dialog/basicdoc.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'dialog-basic-demo',
- template: `
-
- Dialog is used as a container and visibility is controlled with visible property.
-
-
-
- Update your information.
-
- Username
-
-
- Email
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { Dialog } from 'primeng/dialog';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-
-@Component({
- selector: 'dialog-basic-demo',
- templateUrl: './dialog-basic-demo.html',
- standalone: true,
- imports: [Dialog, ButtonModule, InputTextModule]
-})
-export class DialogBasicDemo {
- visible: boolean = false;
-
- showDialog() {
- this.visible = true;
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/dialog/headlessdoc.ts b/apps/showcase/src/app/showcase/doc/dialog/headlessdoc.ts
deleted file mode 100644
index 06f7107f27a..00000000000
--- a/apps/showcase/src/app/showcase/doc/dialog/headlessdoc.ts
+++ /dev/null
@@ -1,338 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'dialog-headless-demo',
- template: `
-
- Headless mode allows you to customize the entire user interface instead of the default elements.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Username
-
-
- Password
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Username
-
-
- Password
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
- Username
-
-
- Password
-
-
-
-
-
- The position property is used to display a Dialog at all edges and corners of the screen.
-
-
-
-
-
-
- Update your information.
-
- Username
-
-
- Email
-
-
-
-
- Update your information.
-
- Username
-
-
- Email
-
-
- `,
-
- html: `
-
-
-
-
- Update your information.
-
- Username
-
-
- Email
-
-
-
-
-
- Dialog width can be adjusted per screen size with the breakpoints option where a key defines the max-width for the breakpoint and value for the corresponding width. When no breakpoint matches width defined in
- style property is used.
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
- Lorem ipsum dolor sit amet...
-
- `,
-
- 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.
-
-
-
- Dialog can be customized using header and footer templates.
-
-
-
-
-
-
- Update your information.
-
-
- Username
-
-
-
- Email
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { Dialog } 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',
- standalone: true,
- imports: [Dialog, ButtonModule, InputTextModule, AvatarModule]
-})
-export class DialogTemplateDemo {
- visible: boolean = false;
-
- showDialog() {
- this.visible = true;
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/divider/basicdoc.ts b/apps/showcase/src/app/showcase/doc/divider/basicdoc.ts
deleted file mode 100644
index 325f5e1b910..00000000000
--- a/apps/showcase/src/app/showcase/doc/divider/basicdoc.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'divider-basic-demo',
- template: `
-
- Divider is basically placed between the items to separate.
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
-
- Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
- voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-
-
- Lorem ipsum dolor sit amet...
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
-
-
- At vero eos et accusamus et iusto odio dignissimos...
-
-
- Temporibus autem quibusdam et aut officiis...
-
`,
-
- html: `
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
- Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
- voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien. Morbi dapibus luctus odio.
-
-
- Vertical divider is enabled by setting the layout property as vertical .
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
- Lorem ipsum dolor sit amet...
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
-
-
- At vero eos et accusamus et iusto odio dignissimos...
-
`,
-
- html: `
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
- voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
- Dock requires a collection of menuitems as its model . Default location is bottom and other sides are also available when defined with the position property. Content of the dock component is defined by
- item template.
-
-
-
-
-
-
-
- Fri 13:07
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Fri 13:07
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
- Fri 13:07
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
`,
-
- 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 { 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';
-import { TooltipModule } from 'primeng/tooltip';
-
-@Component({
- selector: 'dock-advanced-demo',
- templateUrl: './dock-advanced-demo.html',
- imports: [DockModule, MenubarModule, ToastModule, DialogModule, TreeModule, TerminalModule, GalleriaModule, TooltipModule],
- 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;
-
- displayFinder: boolean | undefined;
-
- displayGalleria: boolean | undefined;
-
- dockItems: MenuItem[] | undefined;
-
- menubarItems: any[] | undefined;
-
- responsiveOptions: any[] | undefined;
-
- images: any[] | undefined;
-
- nodes: any[] | undefined;
-
- subscription: Subscription | undefined;
-
- constructor(private galleriaService: PhotoService, private nodeService: NodeService, private messageService: MessageService, private terminalService: TerminalService) {}
-
- ngOnInit() {
- this.dockItems = [
- {
- label: 'Finder',
- tooltipOptions: {
- tooltipLabel: 'Finder',
- tooltipPosition: 'top',
- positionTop: -15,
- positionLeft: 15,
- showDelay: 1000
- },
- icon: 'https://primefaces.org/cdn/primeng/images/dock/finder.svg',
- command: () => {
- this.displayFinder = true;
- }
- },
- {
- label: 'Terminal',
- tooltipOptions: {
- tooltipLabel: 'Terminal',
- tooltipPosition: 'top',
- positionTop: -15,
- positionLeft: 15,
- showDelay: 1000
- },
- icon: 'https://primefaces.org/cdn/primeng/images/dock/terminal.svg',
- command: () => {
- this.displayTerminal = true;
- }
- },
- {
- label: 'App Store',
- tooltipOptions: {
- tooltipLabel: 'App Store',
- tooltipPosition: 'top',
- positionTop: -15,
- positionLeft: 15,
- showDelay: 1000
- },
- icon: 'https://primefaces.org/cdn/primeng/images/dock/appstore.svg',
- command: () => {
- this.messageService.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', key: 'tc' });
- }
- },
- {
- label: 'Safari',
- tooltipOptions: {
- tooltipLabel: 'Safari',
- tooltipPosition: 'top',
- positionTop: -15,
- positionLeft: 15,
- showDelay: 1000
- },
- icon: 'https://primefaces.org/cdn/primeng/images/dock/safari.svg',
- command: () => {
- this.messageService.add({ severity: 'warn', summary: 'Safari has stopped working', key: 'tc' });
- }
- },
- {
- label: 'Photos',
- tooltipOptions: {
- tooltipLabel: 'Photos',
- tooltipPosition: 'top',
- positionTop: -15,
- positionLeft: 15,
- showDelay: 1000
- },
- icon: 'https://primefaces.org/cdn/primeng/images/dock/photos.svg',
- command: () => {
- this.displayGalleria = true;
- }
- },
- {
- label: 'GitHub',
- tooltipOptions: {
- tooltipLabel: 'GitHub',
- tooltipPosition: 'top',
- positionTop: -15,
- positionLeft: 15,
- showDelay: 1000
- },
- icon: 'https://primefaces.org/cdn/primeng/images/dock/github.svg'
- },
- {
- label: 'Trash',
- tooltipOptions: {
- tooltipLabel: 'Trash',
- tooltipPosition: 'top',
- positionTop: -15,
- positionLeft: 15,
- showDelay: 1000
- },
- icon: 'https://primefaces.org/cdn/primeng/images/dock/trash.png',
- command: () => {
- this.messageService.add({ severity: 'info', summary: 'Empty Trash', key: 'tc' });
- }
- }
- ];
-
- this.menubarItems = [
- {
- label: 'Finder',
- styleClass: 'menubar-root'
- },
- {
- label: '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',
- 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',
- 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',
- 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: 'Quit'
- }
- ];
-
- this.responsiveOptions = [
- {
- breakpoint: '1024px',
- numVisible: 3
- },
- {
- breakpoint: '768px',
- numVisible: 2
- },
- {
- breakpoint: '560px',
- numVisible: 1
- }
- ];
-
- this.subscription = this.terminalService.commandHandler.subscribe((command) => this.commandHandler(command));
-
- this.galleriaService.getImages().then((data) => (this.images = data));
- this.nodeService.getFiles().then((data) => (this.nodes = data));
- }
-
- commandHandler(text: any) {
- let response;
- let argsIndex = text.indexOf(' ');
- let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
-
- switch (command) {
- case 'date':
- response = 'Today is ' + new Date().toDateString();
- break;
-
- case 'greet':
- response = 'Hola ' + text.substring(argsIndex + 1) + '!';
- break;
-
- case 'random':
- response = Math.floor(Math.random() * 100);
- break;
-
- default:
- response = 'Unknown command: ' + command;
- break;
- }
-
- if (response) {
- this.terminalService.sendResponse(response as string);
- }
- }
-
- ngOnDestroy() {
- if (this.subscription) {
- this.subscription.unsubscribe();
- }
- }
-}`,
- scss: `
-: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);
- }
- }
-}`,
- service: ['PhotoService', 'NodeService']
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/dock/basicdoc.ts b/apps/showcase/src/app/showcase/doc/dock/basicdoc.ts
deleted file mode 100644
index 9dc8263fb35..00000000000
--- a/apps/showcase/src/app/showcase/doc/dock/basicdoc.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'dock-basic-demo',
- template: `
-
-
- Dock requires a collection of menuitems as its model . Default location is bottom and other sides are also available when defined with the position property. Content of the dock component is defined by
- item template.
-
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class BasicDoc implements OnInit {
- items: MenuItem[] | undefined;
-
- position: string = 'bottom';
-
- positionOptions = [
- {
- label: 'Bottom',
- value: 'bottom'
- },
- {
- label: 'Top',
- value: 'top'
- },
- {
- label: 'Left',
- value: 'left'
- },
- {
- label: 'Right',
- value: 'right'
- }
- ];
-
- ngOnInit() {
- this.items = [
- {
- label: 'Finder',
- icon: 'https://primefaces.org/cdn/primeng/images/dock/finder.svg'
- },
- {
- label: 'App Store',
- icon: 'https://primefaces.org/cdn/primeng/images/dock/appstore.svg'
- },
- {
- label: 'Photos',
- icon: 'https://primefaces.org/cdn/primeng/images/dock/photos.svg'
- },
- {
- label: 'Trash',
- icon: 'https://primefaces.org/cdn/primeng/images/dock/trash.png'
- }
- ];
- }
-
- code: Code = {
- basic: `
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Dock } from 'primeng/dock';
-import { RadioButton } from 'primeng/radiobutton';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'dock-basic-demo',
- 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: [Dock, RadioButton, CommonModule, FormsModule]
-})
-export class DockBasicDemo implements OnInit {
- items: MenuItem[] | undefined;
-
- position: string = 'bottom';
-
- positionOptions = [
- {
- label: 'Bottom',
- value: 'bottom'
- },
- {
- label: 'Top',
- value: 'top'
- },
- {
- label: 'Left',
- value: 'left'
- },
- {
- label: 'Right',
- value: 'right'
- }
- ];
-
- ngOnInit() {
- this.items = [
- {
- label: 'Finder',
- icon: 'https://primefaces.org/cdn/primeng/images/dock/finder.svg'
- },
- {
- label: 'App Store',
- icon: 'https://primefaces.org/cdn/primeng/images/dock/appstore.svg'
- },
- {
- label: 'Photos',
- icon: 'https://primefaces.org/cdn/primeng/images/dock/photos.svg'
- },
- {
- label: 'Trash',
- icon: 'https://primefaces.org/cdn/primeng/images/dock/trash.png'
- }
- ];
- }
-}`,
-
- scss: `
-: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;
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/dock/importdoc.ts b/apps/showcase/src/app/showcase/doc/dock/importdoc.ts
deleted file mode 100644
index 9c0c70f50b3..00000000000
--- a/apps/showcase/src/app/showcase/doc/dock/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'dock-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { Dock } from 'primeng/dock';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/dragdrop/basicdoc.ts b/apps/showcase/src/app/showcase/doc/dragdrop/basicdoc.ts
deleted file mode 100644
index 487595d9106..00000000000
--- a/apps/showcase/src/app/showcase/doc/dragdrop/basicdoc.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-import { Product } from '@domain/product';
-
-@Component({
- selector: 'drag-drop-basic-demo',
- template: `
-
-
- pDraggable and pDroppable are attached to a target element to add drag-drop behavior. The value of a Directive attribute is required and it defines the scope to match draggables with droppables. Droppable scope can also
- be an array to accept multiple droppables.
-
-
-
-
-
-
- {{ product.name }}
-
-
-
-
-
Drop Zone
-
-
- {{ product.name }}
-
-
-
-
-
- `
-})
-export class BasicDoc implements OnInit {
- availableProducts: Product[] | undefined;
-
- selectedProducts: Product[] | undefined;
-
- draggedProduct: Product | undefined | null;
-
- ngOnInit() {
- this.selectedProducts = [];
- this.availableProducts = [
- { id: '1', name: 'Black Watch' },
- { id: '2', name: 'Bamboo Watch' }
- ];
- }
-
- dragStart(product: Product) {
- this.draggedProduct = product;
- }
-
- drop() {
- if (this.draggedProduct) {
- let draggedProductIndex = this.findIndex(this.draggedProduct);
- this.selectedProducts = [...(this.selectedProducts as Product[]), this.draggedProduct];
- this.availableProducts = this.availableProducts?.filter((val, i) => i != draggedProductIndex);
- this.draggedProduct = null;
- }
- }
-
- dragEnd() {
- this.draggedProduct = null;
- }
-
- findIndex(product: Product) {
- let index = -1;
- for (let i = 0; i < (this.availableProducts as Product[]).length; i++) {
- if (product.id === (this.availableProducts as Product[])[i].id) {
- index = i;
- break;
- }
- }
- return index;
- }
-
- code: Code = {
- basic: `
-
`,
- html: `
`,
- 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',
- styles: [
- \`:host ::ng-deep {
- [pDraggable] {
- cursor: move;
- }
- }\`
- ],
- standalone: true,
- imports: [DragDropModule, CommonModule]
-})
-export class DragDropBasicDemo implements OnInit {
- availableProducts: Product[] | undefined;
-
- selectedProducts: Product[] | undefined;
-
- draggedProduct: Product | undefined | null;
-
- ngOnInit() {
- this.selectedProducts = [];
- this.availableProducts = [
- {id:'1', name: 'Black Watch'},
- {id:'2', name: 'Bamboo Watch'}
- ]
- }
-
- dragStart(product: Product) {
- this.draggedProduct = product;
- }
-
- drop() {
- if (this.draggedProduct) {
- let draggedProductIndex = this.findIndex(this.draggedProduct);
- this.selectedProducts = [...(this.selectedProducts as Product[]), this.draggedProduct];
- this.availableProducts = this.availableProducts?.filter((val, i) => i != draggedProductIndex);
- this.draggedProduct = null;
- }
- }
-
- dragEnd() {
- this.draggedProduct = null;
- }
-
- findIndex(product: Product) {
- let index = -1;
- for (let i = 0; i < (this.availableProducts as Product[]).length; i++) {
- if (product.id === (this.availableProducts as Product[])[i].id) {
- index = i;
- break;
- }
- }
- return index;
- }
-}`,
- scss: `
-:host ::ng-deep {
- [pDraggable] {
- cursor: move;
- }
-}`,
- service: ['ProductService']
- };
-
- extFiles = [
- {
- path: 'src/domain/product.ts',
- content: `
-export interface Product {
- id?: string;
- code?: string;
- name?: string;
- description?: string;
- price?: number;
- quantity?: number;
- inventoryStatus?: string;
- category?: string;
- image?: string;
- rating?: number;
-}`
- }
- ];
-}
diff --git a/apps/showcase/src/app/showcase/doc/dragdrop/datatabledoc.ts b/apps/showcase/src/app/showcase/doc/dragdrop/datatabledoc.ts
deleted file mode 100644
index e6733052ec8..00000000000
--- a/apps/showcase/src/app/showcase/doc/dragdrop/datatabledoc.ts
+++ /dev/null
@@ -1,426 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-import { Product } from '@domain/product';
-import { ProductService } from '@service/productservice';
-
-@Component({
- selector: 'drag-drop-data-table-demo',
- template: `
-
- Drag and Drop to Table
-
-
-
-
-
-
-
-
-
-
{{ product.name }}
- {{ product.category }}
-
-
-
{{ product.price }}
-
-
-
-
-
-
-
-
-
- ID
- Category
- Name
- Price
-
-
-
-
- {{ product.id }}
- {{ product.category }}
- {{ product.name }}
- {{ product.price }}
-
-
-
-
-
-
- `
-})
-export class DataTableDoc implements OnInit {
- availableProducts: Product[] | undefined;
-
- selectedProducts: Product[] | undefined;
-
- draggedProduct: Product | undefined | null;
-
- constructor(private productService: ProductService) {}
-
- ngOnInit() {
- this.selectedProducts = [];
- this.productService.getProductsSmall().then((products) => (this.availableProducts = products));
- }
-
- dragStart(product: Product) {
- this.draggedProduct = product;
- }
-
- drop() {
- if (this.draggedProduct) {
- let draggedProductIndex = this.findIndex(this.draggedProduct);
- this.selectedProducts = [...(this.selectedProducts as Product[]), this.draggedProduct];
- this.availableProducts = this.availableProducts?.filter((val, i) => i != draggedProductIndex);
- this.draggedProduct = null;
- }
- }
-
- dragEnd() {
- this.draggedProduct = null;
- }
-
- findIndex(product: Product) {
- let index = -1;
- for (let i = 0; i < (this.availableProducts as Product[]).length; i++) {
- if (product.id === (this.availableProducts as Product[])[i].id) {
- index = i;
- break;
- }
- }
- return index;
- }
-
- getSeverity(status: string) {
- switch (status) {
- case 'INSTOCK':
- return 'success';
- case 'LOWSTOCK':
- return 'warn';
- case 'OUTOFSTOCK':
- return 'danger';
- }
- }
-
- code: Code = {
- basic: `
-
-
-
-
-
-
-
-
- {{product.name}}
-
-
- {{product.category}}
-
-
-
-
- {{product.price}}
-
-
-
-
-
-
-
-
-
-
-
- ID
-
-
- Category
-
-
- Name
-
-
- Price
-
-
-
-
-
-
- {{product.id}}
-
-
- {{product.category}}
-
-
- {{product.name}}
-
-
- {{product.price}}
-
-
-
-
-
-
`,
- html: `
-
-
-
-
-
-
-
-
- {{product.name}}
-
-
- {{product.category}}
-
-
-
-
- {{product.price}}
-
-
-
-
-
-
-
-
-
-
-
- ID
-
-
- Category
-
-
- Name
-
-
- 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';
-import { DragDropModule } from 'primeng/dragdrop';
-import { TableModule } from 'primeng/table';
-import { CommonModule } from '@angular/common';
-import { Tag } from 'primeng/tag';
-
-@Component({
- selector: 'drag-drop-data-table-demo',
- templateUrl: './drag-drop-data-table-demo.html',
- 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, Tag, CommonModule],
- providers: [ProductService]
-})
-export class DragDropDataTableDemo implements OnInit {
- availableProducts: Product[] | undefined;
-
- selectedProducts: Product[] | undefined;
-
- draggedProduct: Product | undefined | null;
-
- constructor(private productService: ProductService) {}
-
- ngOnInit() {
- this.selectedProducts = [];
- this.productService.getProductsSmall().then((products) => (this.availableProducts = products));
- }
-
- dragStart(product: Product) {
- this.draggedProduct = product;
- }
-
- drop() {
- if (this.draggedProduct) {
- let draggedProductIndex = this.findIndex(this.draggedProduct);
- this.selectedProducts = [...(this.selectedProducts as Product[]), this.draggedProduct];
- this.availableProducts = this.availableProducts?.filter((val, i) => i != draggedProductIndex);
- this.draggedProduct = null;
- }
- }
-
- dragEnd() {
- this.draggedProduct = null;
- }
-
- findIndex(product: Product) {
- let index = -1;
- for (let i = 0; i < (this.availableProducts as Product[]).length; i++) {
- if (product.id === (this.availableProducts as Product[])[i].id) {
- index = i;
- break;
- }
- }
- return index;
- }
-
- getSeverity(status: string) {
- switch (status) {
- case 'INSTOCK':
- return 'success';
- case 'LOWSTOCK':
- return 'warn';
- case 'OUTOFSTOCK':
- 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
-},
-...`,
- service: ['ProductService']
- };
-
- extFiles = [
- {
- path: 'src/domain/product.ts',
- content: `
-export interface Product {
- id?: string;
- code?: string;
- name?: string;
- description?: string;
- price?: number;
- quantity?: number;
- inventoryStatus?: string;
- category?: string;
- image?: string;
- rating?: number;
-}`
- }
- ];
-}
diff --git a/apps/showcase/src/app/showcase/doc/dragdrop/importdoc.ts b/apps/showcase/src/app/showcase/doc/dragdrop/importdoc.ts
deleted file mode 100644
index 93a182d3a8e..00000000000
--- a/apps/showcase/src/app/showcase/doc/dragdrop/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'drag-drop-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { DragDropModule } from 'primeng/dragdrop';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/drawer/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/drawer/accessibilitydoc.ts
deleted file mode 100644
index 5eaea0ab865..00000000000
--- a/apps/showcase/src/app/showcase/doc/drawer/accessibilitydoc.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'drawer-accessibility-doc',
- template: `
-
- Screen Reader
-
- Drawer component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In
- addition aria-modal is added since focus is kept within the drawer when opened.
-
-
- It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding
- tabIndex would be necessary.
-
- Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
-
- Overlay Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- tab Moves focus to the next the focusable element within the drawer.
-
-
- shift + tab Moves focus to the previous the focusable element within the drawer.
-
-
- escape Closes the dialog if closeOnEscape is true.
-
-
-
-
Close Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- enter Closes the drawer.
-
-
- space Closes the drawer.
-
-
-
-
- `
-})
-export class AccessibilityDoc {
- code: Code = {
- html: `
-
- content
- `
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/drawer/basicdoc.ts b/apps/showcase/src/app/showcase/doc/drawer/basicdoc.ts
deleted file mode 100644
index 0aac1384dcf..00000000000
--- a/apps/showcase/src/app/showcase/doc/drawer/basicdoc.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- Drawer is used as a container and visibility is controlled with a binding to visible .
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
-
-
- `
-})
-export class BasicDoc {
- visible: boolean = false;
-
- 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.
-
-
-
`,
-
- 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.
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { DrawerModule } from 'primeng/drawer';
-import { ButtonModule } from 'primeng/button';
-
-@Component({
- selector: 'drawer-basic-demo',
- templateUrl: './drawer-basic-demo.html',
- standalone: true,
- imports: [DrawerModule, ButtonModule]
-})
-export class DrawerBasicDemo {
- visible: boolean = false;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/drawer/headlessdoc.ts b/apps/showcase/src/app/showcase/doc/drawer/headlessdoc.ts
deleted file mode 100644
index 49996f3164d..00000000000
--- a/apps/showcase/src/app/showcase/doc/drawer/headlessdoc.ts
+++ /dev/null
@@ -1,660 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import { Code } from '@domain/code';
-import { Drawer } from 'primeng/drawer';
-
-@Component({
- selector: 'headless-doc',
- template: `
-
- Headless mode allows you to customize the entire user interface instead of the default elements.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Your Logo
-
-
-
-
-
-
-
-
- FAVORITES
-
-
-
-
-
-
-
- APPLICATION
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class HeadlessDoc {
- @ViewChild('drawerRef') drawerRef!: Drawer;
-
- closeCallback(e): void {
- this.drawerRef.close(e);
- }
-
- visible: boolean = false;
-
- code: Code = {
- basic: `
-
-
-
-
-
-
- Your Logo
-
-
-
-
-
-
-
-
- FAVORITES
-
-
-
-
-
-
-
- APPLICATION
-
-
-
-
-
-
-
-
-
`,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
- Your Logo
-
-
-
-
-
-
-
-
- FAVORITES
-
-
-
-
-
-
-
- APPLICATION
-
-
-
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component, ViewChild } from '@angular/core';
-import { DrawerModule } from 'primeng/drawer';
-import { ButtonModule } from 'primeng/button';
-import { Ripple } from 'primeng/ripple';
-import { AvatarModule } from 'primeng/avatar';
-import { StyleClass } from 'primeng/styleclass';
-import { Drawer } from 'primeng/drawer';
-
-@Component({
- selector: 'drawer-headless-demo',
- templateUrl: './drawer-headless-demo.html',
- standalone: true,
- imports: [DrawerModule, ButtonModule, Ripple, AvatarModule, StyleClass]
-})
-export class DrawerHeadlessDemo {
- @ViewChild('drawerRef') drawerRef!: Drawer;
-
- closeCallback(e): void {
- this.drawerRef.close(e);
- }
-
- visible: boolean = false;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/drawer/importdoc.ts b/apps/showcase/src/app/showcase/doc/drawer/importdoc.ts
deleted file mode 100644
index 0efd35ea1fc..00000000000
--- a/apps/showcase/src/app/showcase/doc/drawer/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'drawer-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { DrawerModule } from 'primeng/drawer';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/drawer/positiondoc.ts b/apps/showcase/src/app/showcase/doc/drawer/positiondoc.ts
deleted file mode 100644
index 6fb510dfcb7..00000000000
--- a/apps/showcase/src/app/showcase/doc/drawer/positiondoc.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'position-doc',
- template: `
-
- Drawer location is configured with the position property that can take left , right , top and bottom as a value.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
-
-
- `
-})
-export class PositionDoc {
- visible1: boolean = false;
-
- visible2: boolean = false;
-
- visible3: boolean = false;
-
- visible4: boolean = false;
-
- 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.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
`,
-
- 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.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
- et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { DrawerModule } from 'primeng/drawer';
-import { ButtonModule } from 'primeng/button';
-
-@Component({
- selector: 'drawer-position-demo',
- templateUrl: './drawer-position-demo.html',
- standalone: true,
- imports: [DrawerModule, ButtonModule]
-})
-export class DrawerPositionDemo {
- visible1: boolean = false;
-
- visible2: boolean = false;
-
- visible3: boolean = false;
-
- visible4: boolean = false;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/drawer/sizedoc.ts b/apps/showcase/src/app/showcase/doc/drawer/sizedoc.ts
deleted file mode 100644
index 39a37aea4b8..00000000000
--- a/apps/showcase/src/app/showcase/doc/drawer/sizedoc.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'size-doc',
- template: `
-
- Drawer dimension can be defined with style or class properties, this responsive example utilizes Tailwind.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
-
-
- `
-})
-export class SizeDoc {
- visible: boolean = false;
-
- code: Code = {
- basic: `
-
- 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.
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { DrawerModule } from 'primeng/drawer';
-import { ButtonModule } from 'primeng/button';
-
-@Component({
- selector: 'drawer-size-demo',
- templateUrl: './drawer-size-demo.html',
- standalone: true,
- imports: [DrawerModule, ButtonModule]
-})
-export class DrawerSizeDemo {
- visible: boolean = false;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/drawer/templatedoc.ts b/apps/showcase/src/app/showcase/doc/drawer/templatedoc.ts
deleted file mode 100644
index cc6bd20e33a..00000000000
--- a/apps/showcase/src/app/showcase/doc/drawer/templatedoc.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'template-doc',
- template: `
-
- Drawer is customizable by header , content , footer templates.
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat.
-
-
-
-
-
-
-
-
-
- `
-})
-export class TemplateDoc {
- visible: boolean = false;
-
- code: Code = {
- basic: `
-
-
-
-
- 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.
-
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { DrawerModule } from 'primeng/drawer';
-import { ButtonModule } from 'primeng/button';
-
-@Component({
- selector: 'drawer-template-demo',
- templateUrl: './drawer-template-demo.html',
- standalone: true,
- imports: [DrawerModule, ButtonModule]
-})
-export class DrawerTemplateDemo {
- visible: boolean = false;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/dynamicdialog/importdoc.ts b/apps/showcase/src/app/showcase/doc/dynamicdialog/importdoc.ts
deleted file mode 100644
index 0d3980db23a..00000000000
--- a/apps/showcase/src/app/showcase/doc/dynamicdialog/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'dynamic-dialog-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { DynamicDialog } from 'primeng/dynamicdialog';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/dynamicdialog/usagedoc.ts b/apps/showcase/src/app/showcase/doc/dynamicdialog/usagedoc.ts
deleted file mode 100644
index 5b970f93a98..00000000000
--- a/apps/showcase/src/app/showcase/doc/dynamicdialog/usagedoc.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component } from '@angular/core';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'usage-doc',
- template: `
-
- To use dynamic dialog, a reference should be declared as DynamicDialogRef after the DialogService injected into the component.
-
-
- `,
- providers: [DialogService]
-})
-export class UsageDoc {
- ref: DynamicDialogRef | undefined;
-
- constructor(public dialogService: DialogService) {}
-
- code: Code = {
- typescript: `
-import { Component, OnDestroy } from '@angular/core';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { Product } from '@domain/product';
-import { ProductListDemo } from './productlistdemo';
-
-@Component({
- templateUrl: './dynamicdialogdemo.html',
- providers: [DialogService]
-})
-export class DynamicDialogDemo implements OnDestroy {
-
- ref: DynamicDialogRef | undefined;
-
- constructor(public dialogService: DialogService) {}
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/editor/basicdoc.ts b/apps/showcase/src/app/showcase/doc/editor/basicdoc.ts
deleted file mode 100644
index 8b216636667..00000000000
--- a/apps/showcase/src/app/showcase/doc/editor/basicdoc.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'editor-basic-demo',
- template: `
-
- A model can be bound using the standard ngModel directive.
-
-
-
- `
-})
-export class BasicDoc {
- text: string | undefined;
-
- code: Code = {
- basic: `
`,
-
- html: `
`,
-
- typescript: `import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { Editor } from 'primeng/editor';
-
-@Component({
- selector: 'editor-basic-demo',
- templateUrl: './editor-basic-demo.html',
- standalone: true,
- imports: [FormsModule, Editor]
-})
-export class EditorBasicDemo {
- text: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/editor/importdoc.ts b/apps/showcase/src/app/showcase/doc/editor/importdoc.ts
deleted file mode 100644
index 621729081ec..00000000000
--- a/apps/showcase/src/app/showcase/doc/editor/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'editor-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { Editor } from 'primeng/editor';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/editor/reactiveformsdoc.ts b/apps/showcase/src/app/showcase/doc/editor/reactiveformsdoc.ts
deleted file mode 100644
index 4859440e248..00000000000
--- a/apps/showcase/src/app/showcase/doc/editor/reactiveformsdoc.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'reactive-forms-doc',
- template: `
-
- Editor can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- `
-})
-export class ReactiveFormsDoc implements OnInit {
- formGroup: FormGroup | undefined;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- text: new FormControl()
- });
- }
-
- code: Code = {
- basic: `
`,
-
- html: `
`,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { Editor } from 'primeng/editor';
-
-@Component({
- selector: 'editor-reactive-forms-demo',
- templateUrl: './editor-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, Editor],
- })
-export class EditorReactiveFormsDemo implements OnInit {
- formGroup: FormGroup | undefined;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- text: new FormControl()
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/editor/readonlydoc.ts b/apps/showcase/src/app/showcase/doc/editor/readonlydoc.ts
deleted file mode 100644
index 8e6a4db8d4a..00000000000
--- a/apps/showcase/src/app/showcase/doc/editor/readonlydoc.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'editor-readonly-demo',
- template: `
-
- When readonly is present, the value cannot be edited.
-
-
-
- `
-})
-export class ReadOnlyDoc {
- text: string = 'Always bet on Prime!';
-
- code: Code = {
- basic: `
`,
-
- html: `
`,
-
- typescript: `import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { Editor } from 'primeng/editor';
-
-@Component({
- selector: 'editor-readonly-demo',
- templateUrl: './editor-readonly-demo.html',
- standalone: true,
- imports: [FormsModule, Editor]
-})
-export class EditorReadonlyDemo {
- text: string = 'Always bet on Prime!';
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fieldset/basicdoc.ts b/apps/showcase/src/app/showcase/doc/fieldset/basicdoc.ts
deleted file mode 100644
index 2b851368a87..00000000000
--- a/apps/showcase/src/app/showcase/doc/fieldset/basicdoc.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'fieldset-basic-demo',
- template: `
-
- PrimeIcons is available at npm, run the following command to download it to your project.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
- `
-})
-export class BasicDoc {
- code: Code = {
- basic: `
-
- 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';
-import { FieldsetModule } from 'primeng/fieldset';
-
-@Component({
- selector: 'fieldset-basic-demo',
- templateUrl: './fieldset-basic-demo.html',
- standalone: true,
- imports: [FieldsetModule]
-})
-export class FieldsetBasicDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fieldset/importdoc.ts b/apps/showcase/src/app/showcase/doc/fieldset/importdoc.ts
deleted file mode 100644
index 31967fd14c5..00000000000
--- a/apps/showcase/src/app/showcase/doc/fieldset/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'fieldset-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { Fieldset } from 'primeng/fieldset';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fieldset/templatedoc.ts b/apps/showcase/src/app/showcase/doc/fieldset/templatedoc.ts
deleted file mode 100644
index 6c6f6c30133..00000000000
--- a/apps/showcase/src/app/showcase/doc/fieldset/templatedoc.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'fieldset-template-demo',
- template: `
-
- Header section can also be defined with custom content instead of primitive values.
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
- `
-})
-export class TemplateDoc {
- code: Code = {
- basic: `
-
-
-
-
- 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';
-import { FieldsetModule } from 'primeng/fieldset';
-import { AvatarModule } from 'primeng/avatar';
-
-@Component({
- selector: 'fieldset-template-demo',
- templateUrl: './fieldset-template-demo.html',
- standalone: true,
- imports: [FieldsetModule, AvatarModule]
-})
-export class FieldsetTemplateDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fieldset/toggleabledoc.ts b/apps/showcase/src/app/showcase/doc/fieldset/toggleabledoc.ts
deleted file mode 100644
index e2d40388f0f..00000000000
--- a/apps/showcase/src/app/showcase/doc/fieldset/toggleabledoc.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'fieldset-toggleable-demo',
- template: `
-
- Content of the fieldset can be expanded and collapsed using toggleable option, default state is defined with collapsed option.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
- `
-})
-export class ToggleableDoc {
- code: Code = {
- basic: `
-
- 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';
-import { FieldsetModule } from 'primeng/fieldset';
-
-@Component({
- selector: 'fieldset-toggleable-demo',
- templateUrl: './fieldset-toggleable-demo.html',
- standalone: true,
- imports: [FieldsetModule]
-})
-export class FieldsetToggleableDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fileupload/advanceddoc.ts b/apps/showcase/src/app/showcase/doc/fileupload/advanceddoc.ts
deleted file mode 100644
index 59262b9f6cf..00000000000
--- a/apps/showcase/src/app/showcase/doc/fileupload/advanceddoc.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Component } from '@angular/core';
-import { MessageService } from 'primeng/api';
-import { Code } from '@domain/code';
-
-interface UploadEvent {
- originalEvent: Event;
- files: File[];
-}
-
-@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 to here to upload.
-
-
-
- {{ file.name }} - {{ file.size }} bytes
-
-
-
-
-
- `,
- providers: [MessageService]
-})
-export class AdvancedDoc {
- uploadedFiles: any[] = [];
-
- constructor(private messageService: MessageService) {}
-
- onUpload(event: UploadEvent) {
- for (let file of event.files) {
- this.uploadedFiles.push(file);
- }
-
- this.messageService.add({ severity: 'info', summary: 'File Uploaded', detail: '' });
- }
-
- code: Code = {
- basic: `
-
- Drag and drop files to here to upload.
-
-
-
- {{ file.name }} - {{ file.size }} bytes
-
-
- `,
- html: `
-
-
-
- Drag and drop files to here to upload.
-
-
-
- {{ file.name }} - {{ file.size }} bytes
-
-
-
-
`,
- typescript: `import { Component } from '@angular/core';
-import { MessageService } from 'primeng/api';
-import { FileUpload } from 'primeng/fileupload';
-import { ToastModule } from 'primeng/toast';
-import { CommonModule } from '@angular/common';
-
-interface UploadEvent {
- originalEvent: Event;
- files: File[];
-}
-
-@Component({
- selector: 'file-upload-advanced-demo',
- templateUrl: './file-upload-advanced-demo.html',
- standalone: true,
- imports: [FileUpload, ToastModule, CommonModule],
- providers: [MessageService]
-})
-export class FileUploadAdvancedDemo {
- uploadedFiles: any[] = [];
-
- constructor(private messageService: MessageService) {}
-
- onUpload(event:UploadEvent) {
- for(let file of event.files) {
- this.uploadedFiles.push(file);
- }
-
- this.messageService.add({severity: 'info', summary: 'File Uploaded', detail: ''});
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fileupload/basicdoc.ts b/apps/showcase/src/app/showcase/doc/fileupload/basicdoc.ts
deleted file mode 100644
index dc5e416c1ee..00000000000
--- a/apps/showcase/src/app/showcase/doc/fileupload/basicdoc.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Component } from '@angular/core';
-import { MessageService } from 'primeng/api';
-import { Code } from '@domain/code';
-
-interface UploadEvent {
- originalEvent: Event;
- files: File[];
-}
-
-@Component({
- selector: 'file-upload-basic-demo',
- template: `
-
- FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.
-
-
-
- `,
- providers: [MessageService]
-})
-export class BasicDoc {
- constructor(private messageService: MessageService) {}
-
- onUpload(event: UploadEvent) {
- this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
- }
-
- code: Code = {
- basic: `
-
`,
- html: `
`,
- typescript: `import { Component } from '@angular/core';
-import { MessageService } from 'primeng/api';
-import { FileUpload } from 'primeng/fileupload';
-import { ToastModule } from 'primeng/toast';
-import { ButtonModule } from 'primeng/button';
-
-interface UploadEvent {
- originalEvent: Event;
- files: File[];
-}
-
-@Component({
- selector: 'file-upload-basic-demo',
- templateUrl: './file-upload-basic-demo.html',
- standalone: true,
- imports: [FileUpload, ToastModule, ButtonModule],
- providers: [MessageService]
-})
-export class FileUploadBasicDemo {
- constructor(private messageService: MessageService) {}
-
- onUpload(event: UploadEvent) {
- this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fileupload/customdoc.ts b/apps/showcase/src/app/showcase/doc/fileupload/customdoc.ts
deleted file mode 100644
index 285db13986f..00000000000
--- a/apps/showcase/src/app/showcase/doc/fileupload/customdoc.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Component } from '@angular/core';
-import { MessageService } from 'primeng/api';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'file-upload-custom-demo',
- template: `
-
- FileUpload basic mode provides a simpler UI as an alternative to default advanced mode.
-
-
-
- `,
- providers: [MessageService]
-})
-export class CustomDoc {
- constructor(private messageService: MessageService) {}
-
- async customUploader(event) {
- const file = event.files[0];
- const reader = new FileReader();
- let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
-
- reader.readAsDataURL(blob);
-
- reader.onloadend = function () {
- const base64data = reader.result;
- };
-
- this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
- }
-
- code: Code = {
- basic: `
`,
- html: `
-
`,
- typescript: `
-import { Component, Input } from '@angular/core';
-import { MessageService } from 'primeng/api';
-
-@Component({
- selector: 'file-upload-custom-demo',
- templateUrl: './file-upload-custom-demo.html',
- providers: [MessageService]
-})
-export class CustomDoc {
-
- constructor(private messageService: MessageService) {}
-
- async customUploader(event) {
- const file = event.files[0];
- const reader = new FileReader();
- let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
-
- reader.readAsDataURL(blob);
-
- reader.onloadend = function () {
- const base64data = reader.result;
- };
-
- this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fileupload/importdoc.ts b/apps/showcase/src/app/showcase/doc/fileupload/importdoc.ts
deleted file mode 100644
index b9b45a73f39..00000000000
--- a/apps/showcase/src/app/showcase/doc/fileupload/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'file-upload-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { FileUpload } from 'primeng/fileupload';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fileupload/templatedoc.ts b/apps/showcase/src/app/showcase/doc/fileupload/templatedoc.ts
deleted file mode 100644
index 90bcc027794..00000000000
--- a/apps/showcase/src/app/showcase/doc/fileupload/templatedoc.ts
+++ /dev/null
@@ -1,478 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-import { MessageService, PrimeNGConfig } from 'primeng/api';
-
-@Component({
- selector: 'file-upload-template-demo',
- template: `
-
-
- Uploader UI is customizable using a ng-template called file that gets the File instance as the implicit variable. Second ng-template named content can be used to place custom
- content inside the content section which would be useful to implement a user interface to manage the uploaded files such as removing them. This template gets the selected files as the implicit variable. Third and final ng-template
- option is toolbar to display custom content at toolbar.
-
-
-
-
-
-
-
-
- {{ totalSize }}B / 1Mb
-
-
-
-
-
-
Pending
-
-
-
-
-
-
{{ file.name }}
-
{{ formatSize(file.size) }}
-
-
-
-
-
-
-
Completed
-
-
-
-
-
-
{{ file.name }}
-
{{ formatSize(file.size) }}
-
-
-
-
-
-
-
-
-
-
Drag and drop files to here to upload.
-
-
-
-
- `,
- providers: [MessageService]
-})
-export class TemplateDoc {
- files = [];
-
- totalSize: number = 0;
-
- totalSizePercent: number = 0;
-
- constructor(
- private config: PrimeNGConfig,
- private messageService: MessageService
- ) {}
-
- choose(event, callback) {
- callback();
- }
-
- onRemoveTemplatingFile(event, file, removeFileCallback, index) {
- removeFileCallback(event, index);
- this.totalSize -= parseInt(this.formatSize(file.size));
- this.totalSizePercent = this.totalSize / 10;
- }
-
- onClearTemplatingUpload(clear) {
- clear();
- this.totalSize = 0;
- this.totalSizePercent = 0;
- }
-
- onTemplatedUpload() {
- this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
- }
-
- onSelectedFiles(event) {
- this.files = event.currentFiles;
- this.files.forEach((file) => {
- this.totalSize += parseInt(this.formatSize(file.size));
- });
- this.totalSizePercent = this.totalSize / 10;
- }
-
- uploadEvent(callback) {
- callback();
- }
-
- formatSize(bytes) {
- const k = 1024;
- const dm = 3;
- const sizes = this.config.translation.fileSizeTypes;
- if (bytes === 0) {
- return `0 ${sizes[0]}`;
- }
-
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-
- return `${formattedSize} ${sizes[i]}`;
- }
-
- code: Code = {
- basic: `
-
-
-
-
-
- {{ totalSize }}B / 1Mb
-
-
-
-
-
-
Pending
-
-
-
-
-
-
{{ file.name }}
-
{{ formatSize(file.size) }}
-
-
-
-
-
-
-
Completed
-
-
-
-
-
-
{{ file.name }}
-
{{ formatSize(file.size) }}
-
-
-
-
-
-
-
-
-
-
-
Drag and drop files to here to upload.
-
- `,
- html: `
-
-
-
-
-
-
- {{ totalSize }}B / 1Mb
-
-
-
-
-
-
Pending
-
-
-
-
-
-
{{ file.name }}
-
{{ formatSize(file.size) }}
-
-
-
-
-
-
-
Completed
-
-
-
-
-
-
{{ file.name }}
-
{{ formatSize(file.size) }}
-
-
-
-
-
-
-
-
-
-
-
Drag and drop files to here to upload.
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { MessageService, PrimeNGConfig} from 'primeng/api';
-import { FileUpload } from 'primeng/fileupload';
-import { ButtonModule } from 'primeng/button';
-import { CommonModule } from '@angular/common';
-import { BadgeModule } from 'primeng/badge';
-import { HttpClientModule } from '@angular/common/http';
-import { ProgressBar } from 'primeng/progressbar';
-import { ToastModule } from 'primeng/toast';
-
-@Component({
- selector: 'file-upload-template-demo',
- templateUrl: './file-upload-template-demo.html',
- standalone: true,
- imports: [FileUpload, ButtonModule, BadgeModule, ProgressBar, ToastModule, HttpClientModule, CommonModule],
- providers: [MessageService]
-})
-export class FileUploadTemplateDemo {
- files = [];
-
- totalSize : number = 0;
-
- totalSizePercent : number = 0;
-
- constructor(private config: PrimeNGConfig, private messageService: MessageService) {}
-
- choose(event, callback) {
- callback();
- }
-
- onRemoveTemplatingFile(event, file, removeFileCallback, index) {
- removeFileCallback(event, index);
- this.totalSize -= parseInt(this.formatSize(file.size));
- this.totalSizePercent = this.totalSize / 10;
- }
-
- onClearTemplatingUpload(clear) {
- clear();
- this.totalSize = 0;
- this.totalSizePercent = 0;
- }
-
- onTemplatedUpload() {
- this.messageService.add({ severity: 'info', summary: 'Success', detail: 'File Uploaded', life: 3000 });
- }
-
- onSelectedFiles(event) {
- this.files = event.currentFiles;
- this.files.forEach((file) => {
- this.totalSize += parseInt(this.formatSize(file.size));
- });
- this.totalSizePercent = this.totalSize / 10;
- }
-
- uploadEvent(callback) {
- callback();
- }
-
- formatSize(bytes) {
- const k = 1024;
- const dm = 3;
- const sizes = this.config.translation.fileSizeTypes;
- if (bytes === 0) {
- return \`0 \${sizes[0]}\`;
- }
-
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- const formattedSize = parseFloat((bytes / Math.pow(k, i)).toFixed(dm));
-
- return \`\${formattedSize} \${sizes[i]}\`;
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/filterservice/importdoc.ts b/apps/showcase/src/app/showcase/doc/filterservice/importdoc.ts
deleted file mode 100644
index 678299235ae..00000000000
--- a/apps/showcase/src/app/showcase/doc/filterservice/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'filter-service-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { FilterService } from 'primeng/api';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/filterservice/usagedoc.ts b/apps/showcase/src/app/showcase/doc/filterservice/usagedoc.ts
deleted file mode 100644
index 8762a1ee16a..00000000000
--- a/apps/showcase/src/app/showcase/doc/filterservice/usagedoc.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'usage-doc',
- template: `
-
- FilterService needs to be injected into your component. Filters are accessed with FilterService.filters .
-
-
- `
-})
-export class UsageDoc {
- code: Code = {
- typescript: `export class FilterServiceDemo implements OnInit {
-
- constructor(private filterService: FilterService) {}
-
- ngOnInit() {
- const value = 'PrimeNG';
-
- this.filterService.filters.equals(value, 'NG'); //false
- this.filterService.filters.equals(value, 8); //false
- this.filterService.filters.equals(value, new Date()); //false
- this.filterService.filters.contains(value, 'NG'); //true
- this.filterService.filters.startsWith(value, 'NG'); //false
- this.filterService.filters.endsWith(value, 'NG'); //true
- this.filterService.filters.lt(10, 20); //true
- this.filterService.filters.gt(50, 20); //true
- this.filterService.filters.in(value, ['PrimeFaces', 'PrimeNG']); //true
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/floatlabel/basicdoc.ts b/apps/showcase/src/app/showcase/doc/floatlabel/basicdoc.ts
deleted file mode 100644
index 6e5717f9f82..00000000000
--- a/apps/showcase/src/app/showcase/doc/floatlabel/basicdoc.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- FloatLabel is used by wrapping the input and its label.
-
-
-
- `
-})
-export class BasicDoc {
- value: string | undefined;
-
- code: Code = {
- basic: `
- Username
- `,
-
- html: `
`,
-
- typescript: `import { Component } from '@angular/core';
-import { FloatLabelModule } from "primeng/floatlabel"
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'float-label-basic-demo',
- templateUrl: './float-label-basic-demo.html',
- standalone: true,
- imports: [FloatLabelModule, InputTextModule, FormsModule]
-})
-export class FloatLabelBasicDemo {
- value: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/floatlabel/importdoc.ts b/apps/showcase/src/app/showcase/doc/floatlabel/importdoc.ts
deleted file mode 100644
index ac7be559c83..00000000000
--- a/apps/showcase/src/app/showcase/doc/floatlabel/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'float-label-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { FloatLabel } from 'primeng/floatlabel';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/floatlabel/invaliddoc.ts b/apps/showcase/src/app/showcase/doc/floatlabel/invaliddoc.ts
deleted file mode 100644
index 876aa6026df..00000000000
--- a/apps/showcase/src/app/showcase/doc/floatlabel/invaliddoc.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'invalid-doc',
- template: `
-
- When the form element is invalid, the label is also highlighted.
-
-
-
- `
-})
-export class InvalidDoc {
- value1: string | undefined;
-
- value2: string | undefined;
-
- value3: string | undefined;
-
- code: Code = {
- basic: `
- Username
-
-
-
- Username
-
-
-
- Username
- `,
-
- html: `
`,
-
- typescript: `import { Component } from '@angular/core';
-import { FloatLabelModule } from "primeng/floatlabel"
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'float-label-invalid-demo',
- templateUrl: './float-label-invalid-demo.html',
- standalone: true,
- imports: [FloatLabelModule, InputTextModule, FormsModule]
-})
-export class FloatLabelInvalidDemo {
- value1: string | undefined;
-
- value2: string | undefined;
-
- value3: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fluid/basicdoc.ts b/apps/showcase/src/app/showcase/doc/fluid/basicdoc.ts
deleted file mode 100644
index bde160486ee..00000000000
--- a/apps/showcase/src/app/showcase/doc/fluid/basicdoc.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
-
- Components with the fluid option like InputText have the ability to span the full width of their component. Enabling the fluid for each component individually may be cumbersome so wrap the content with
- Fluid to instead for an easier alternative.
-
- Any component that has the fluid property can be nested inside the Fluid component. The fluid property of a child component has higher precedence than the fluid container as shown in the last sample.
-
-
-
- Non-Fluid
-
-
- Fluid Prop
-
-
- Fluid Container
-
-
-
-
- `
-})
-export class BasicDoc {
- code: Code = {
- basic: `
- Non-Fluid
-
-
- Fluid Prop
-
-
- Fluid Container
-
- `,
-
- html: `
-
- Non-Fluid
-
-
- Fluid Prop
-
-
- Fluid Container
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Fluid } from 'primeng/fluid';
-
-@Component({
- selector: 'fluid-basic-demo',
- templateUrl: './fluid-basic-demo.html',
- standalone: true,
- imports: [Fluid]
-})
-export class FluidBasicDemo {
-
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/fluid/importdoc.ts b/apps/showcase/src/app/showcase/doc/fluid/importdoc.ts
deleted file mode 100644
index 0af50cc1f30..00000000000
--- a/apps/showcase/src/app/showcase/doc/fluid/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'fluid-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { Fluid } from 'primeng/fluid';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/focustrap/basicdoc.ts b/apps/showcase/src/app/showcase/doc/focustrap/basicdoc.ts
deleted file mode 100644
index 34d7bf1ba4e..00000000000
--- a/apps/showcase/src/app/showcase/doc/focustrap/basicdoc.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'focus-trap-basic-demo',
- template: `
-
- FocusTrap is applied to a container element with the pFocusTrap directive.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
I agree to the terms and conditions.
-
-
-
-
-
-
- `
-})
-export class BasicDoc {
- name: string = '';
-
- email: string = '';
-
- accept: boolean = false;
-
- code: Code = {
- basic: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
I agree to the terms and conditions.
-
-
-
-
`,
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
I agree to the terms and conditions.
-
-
-
-
`,
- typescript: `import { Component } from '@angular/core';
-import { FocusTrapModule } from 'primeng/focustrap';
-import { ButtonModule } from 'primeng/button';
-import { FormsModule } from '@angular/forms';
-import { InputTextModule } from 'primeng/inputtext';
-import { CheckboxModule } from 'primeng/checkbox';
-import { IconFieldModule } from 'primeng/iconfield';
-import { InputIconModule } from 'primeng/inputicon';
-import { AutoFocusModule } from 'primeng/autofocus';
-
-@Component({
- selector: 'focus-trap-basic-demo',
- templateUrl: './focus-trap-basic-demo.html',
- standalone: true,
- imports: [FocusTrapModule, ButtonModule, FormsModule, InputTextModule, CheckboxModule, IconFieldModule, InputIconModule, AutoFocusModule]
-})
-export class FocusTrapBasicDemo {
- name: string = '';
-
- email: string = '';
-
- accept: boolean = false;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/focustrap/importdoc.ts b/apps/showcase/src/app/showcase/doc/focustrap/importdoc.ts
deleted file mode 100644
index 6dda3db6fe3..00000000000
--- a/apps/showcase/src/app/showcase/doc/focustrap/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'focus-trap-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { FocusTrap } from 'primeng/focustrap';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/galleria/advanceddoc.ts b/apps/showcase/src/app/showcase/doc/galleria/advanceddoc.ts
deleted file mode 100644
index be80b70ff5a..00000000000
--- a/apps/showcase/src/app/showcase/doc/galleria/advanceddoc.ts
+++ /dev/null
@@ -1,410 +0,0 @@
-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';
-
-@Component({
- selector: 'galleria-advanced-doc',
- template: `
-
- Galleria can be extended further to implement complex requirements.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class AdvancedDoc implements OnInit, OnDestroy {
- images: any[] | undefined;
-
- showThumbnails: boolean | undefined;
-
- fullscreen: boolean = false;
-
- activeIndex: number = 0;
-
- onFullScreenListener: any;
-
- @ViewChild('galleria') galleria: Galleria | undefined;
-
- constructor(
- @Inject(PLATFORM_ID) private platformId: any,
- private photoService: PhotoService,
- private cd: ChangeDetectorRef
- ) {}
-
- responsiveOptions: any[] = [
- {
- breakpoint: '1300px',
- numVisible: 4
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
-
- ngOnInit() {
- this.photoService.getImages().then((images) => (this.images = images));
- this.bindDocumentListeners();
- }
-
- onThumbnailButtonClick() {
- this.showThumbnails = !this.showThumbnails;
- }
-
- toggleFullScreen() {
- if (this.fullscreen) {
- this.closePreviewFullScreen();
- } else {
- this.openPreviewFullScreen();
- }
-
- this.cd.detach();
- }
-
- openPreviewFullScreen() {
- let elem = this.galleria?.element.nativeElement.querySelector('.p-galleria');
- if (elem.requestFullscreen) {
- elem.requestFullscreen();
- } else if (elem['mozRequestFullScreen']) {
- /* Firefox */
- elem['mozRequestFullScreen']();
- } else if (elem['webkitRequestFullscreen']) {
- /* Chrome, Safari & Opera */
- elem['webkitRequestFullscreen']();
- } else if (elem['msRequestFullscreen']) {
- /* IE/Edge */
- elem['msRequestFullscreen']();
- }
- }
-
- onFullScreenChange() {
- this.fullscreen = !this.fullscreen;
- this.cd.detectChanges();
- this.cd.reattach();
- }
-
- closePreviewFullScreen() {
- if (isPlatformBrowser(this.platformId)) {
- if (document.exitFullscreen) {
- document.exitFullscreen();
- } else if (document['mozCancelFullScreen']) {
- document['mozCancelFullScreen']();
- } else if (document['webkitExitFullscreen']) {
- document['webkitExitFullscreen']();
- } else if (document['msExitFullscreen']) {
- document['msExitFullscreen']();
- }
- }
- }
-
- bindDocumentListeners() {
- if (isPlatformBrowser(this.platformId)) {
- this.onFullScreenListener = this.onFullScreenChange.bind(this);
- document.addEventListener('fullscreenchange', this.onFullScreenListener);
- document.addEventListener('mozfullscreenchange', this.onFullScreenListener);
- document.addEventListener('webkitfullscreenchange', this.onFullScreenListener);
- document.addEventListener('msfullscreenchange', this.onFullScreenListener);
- }
- }
-
- unbindDocumentListeners() {
- if (isPlatformBrowser(this.platformId)) {
- document.removeEventListener('fullscreenchange', this.onFullScreenListener);
- document.removeEventListener('mozfullscreenchange', this.onFullScreenListener);
- document.removeEventListener('webkitfullscreenchange', this.onFullScreenListener);
- document.removeEventListener('msfullscreenchange', this.onFullScreenListener);
- this.onFullScreenListener = null;
- }
- }
-
- ngOnDestroy() {
- this.unbindDocumentListeners();
- }
-
- galleriaClass() {
- return `custom-galleria ${this.fullscreen ? 'fullscreen' : ''}`;
- }
-
- fullScreenIcon() {
- return `pi ${this.fullscreen ? 'pi-window-minimize' : 'pi-window-maximize'}`;
- }
-
- code: Code = {
- basic: `
-
-
-
-
-
-
-
-
-
- `,
- html: `
-
-
-
-
-
-
-
-
-
-
- `,
- typescript: `import { ChangeDetectorRef, Component, OnInit, OnDestroy, ViewChild, PLATFORM_ID, Inject } from '@angular/core';
-import { Galleria } from 'primeng/galleria';
-import { PhotoService } from '@service/photoservice';
-
-@Component({
- selector: 'galleria-advanced-demo',
- templateUrl: './galleria-advanced-demo.html',
- 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 {
-
- images: any[] | undefined;
-
- showThumbnails: boolean | undefined;
-
- fullscreen: boolean = false;
-
- activeIndex: number = 0;
-
- onFullScreenListener: any;
-
- @ViewChild('galleria') galleria: Galleria | undefined;
-
- constructor(@Inject(PLATFORM_ID) private platformId: any, private photoService: PhotoService, private cd: ChangeDetectorRef) {}
-
- responsiveOptions: any[] = [
- {
- breakpoint: '1300px',
- numVisible: 4
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
-
- ngOnInit() {
- this.photoService.getImages().then((images) => (this.images = images));
- this.bindDocumentListeners();
- }
-
- onThumbnailButtonClick() {
- this.showThumbnails = !this.showThumbnails;
- }
-
- toggleFullScreen() {
- if (this.fullscreen) {
- this.closePreviewFullScreen();
- } else {
- this.openPreviewFullScreen();
- }
-
- this.cd.detach();
- }
-
- openPreviewFullScreen() {
- let elem = this.galleria?.element.nativeElement.querySelector('.p-galleria');
- if (elem.requestFullscreen) {
- elem.requestFullscreen();
- } else if (elem['mozRequestFullScreen']) {
- /* Firefox */
- elem['mozRequestFullScreen']();
- } else if (elem['webkitRequestFullscreen']) {
- /* Chrome, Safari & Opera */
- elem['webkitRequestFullscreen']();
- } else if (elem['msRequestFullscreen']) {
- /* IE/Edge */
- elem['msRequestFullscreen']();
- }
- }
-
- onFullScreenChange() {
- this.fullscreen = !this.fullscreen;
- this.cd.detectChanges();
- this.cd.reattach();
- }
-
- closePreviewFullScreen() {
- if (document.exitFullscreen) {
- document.exitFullscreen();
- } else if (document['mozCancelFullScreen']) {
- document['mozCancelFullScreen']();
- } else if (document['webkitExitFullscreen']) {
- document['webkitExitFullscreen']();
- } else if (document['msExitFullscreen']) {
- document['msExitFullscreen']();
- }
- }
-
- bindDocumentListeners() {
- this.onFullScreenListener = this.onFullScreenChange.bind(this);
- document.addEventListener('fullscreenchange', this.onFullScreenListener);
- document.addEventListener('mozfullscreenchange', this.onFullScreenListener);
- document.addEventListener('webkitfullscreenchange', this.onFullScreenListener);
- document.addEventListener('msfullscreenchange', this.onFullScreenListener);
- }
-
- unbindDocumentListeners() {
- document.removeEventListener('fullscreenchange', this.onFullScreenListener);
- document.removeEventListener('mozfullscreenchange', this.onFullScreenListener);
- document.removeEventListener('webkitfullscreenchange', this.onFullScreenListener);
- document.removeEventListener('msfullscreenchange', this.onFullScreenListener);
- this.onFullScreenListener = null;
- }
-
- ngOnDestroy() {
- this.unbindDocumentListeners();
- }
-
- galleriaClass() {
- return \`custom-galleria \${this.fullscreen ? 'fullscreen' : ''}\`;
- }
-
- fullScreenIcon() {
- return \`pi \${this.fullscreen ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
- }
-}`,
- data: `
-/* PhotoService */
-{
- itemImageSrc: 'https://primeng.org/images/galleria/galleria1.jpg',
- thumbnailImageSrc: 'https://primeng.org/images/galleria/galleria1s.jpg',
- alt: 'Description for Image 1',
- title: 'Title 1'
-},
-...`,
-
- service: ['PhotoService']
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/galleria/basicdoc.ts b/apps/showcase/src/app/showcase/doc/galleria/basicdoc.ts
deleted file mode 100644
index e08ecf70c24..00000000000
--- a/apps/showcase/src/app/showcase/doc/galleria/basicdoc.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-import { PhotoService } from '@service/photoservice';
-
-@Component({
- selector: 'galleria-basic-demo',
- template: `
-
- Galleria requires a value as a collection of images, item template for the higher resolution image and thumbnail template to display as a thumbnail.
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class BasicDoc implements OnInit {
- images: any[] | undefined;
-
- responsiveOptions: any[] | undefined;
-
- constructor(private photoService: PhotoService) {}
-
- code: Code = {
- basic: `
-
-
-
-
- `,
- html: `
-
-
-
-
-
-
-
`,
- 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',
- standalone: true,
- imports: [GalleriaModule],
- providers: [PhotoService]
-})
-export class GalleriaBasicDemo implements OnInit {
- images: any[] | undefined;
-
- responsiveOptions: any[] | undefined;
-
- constructor(private photoService: PhotoService) {}
-
- ngOnInit() {
- this.photoService.getImages().then((images) => (this.images = images));
- this.responsiveOptions = [
- {
- breakpoint: '1300px',
- numVisible: 4
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
- }
-}`,
- data: `
-/* PhotoService */
-{
- itemImageSrc: 'https://primeng.org/images/galleria/galleria1.jpg',
- thumbnailImageSrc: 'https://primeng.org/images/galleria/galleria1s.jpg',
- alt: 'Description for Image 1',
- title: 'Title 1'
-},
-...`,
- service: ['PhotoService']
- };
-
- ngOnInit() {
- this.photoService.getImages().then((images) => (this.images = images));
- this.responsiveOptions = [
- {
- breakpoint: '1300px',
- numVisible: 4
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
- }
-}
diff --git a/apps/showcase/src/app/showcase/doc/galleria/controlleddoc.ts b/apps/showcase/src/app/showcase/doc/galleria/controlleddoc.ts
deleted file mode 100644
index 81b0db20ac8..00000000000
--- a/apps/showcase/src/app/showcase/doc/galleria/controlleddoc.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-import { PhotoService } from '@service/photoservice';
-
-@Component({
- selector: 'galleria-controlled-demo',
- template: `
-
- Galleria can be controlled programmatically using the activeIndex property.
-
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class ControlledDoc implements OnInit {
- images: any[] | undefined;
-
- get activeIndex(): number {
- return this._activeIndex;
- }
-
- set activeIndex(newValue) {
- if (this.images && 0 <= newValue && newValue <= this.images.length - 1) {
- this._activeIndex = newValue;
- }
- }
-
- _activeIndex: number = 2;
-
- responsiveOptions: any[] = [
- {
- breakpoint: '1300px',
- numVisible: 4
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
-
- constructor(private photoService: PhotoService) {}
-
- ngOnInit() {
- this.photoService.getImages().then((images) => (this.images = images));
- }
-
- next() {
- this.activeIndex++;
- }
-
- prev() {
- this.activeIndex--;
- }
-
- code: Code = {
- basic: `
-
-
-
-
-
- `,
- html: `
-
-
-
-
-
-
-
-
`,
- 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',
- standalone: true,
- imports: [GalleriaModule, ButtonModule],
- providers: [PhotoService]
-})
-export class GalleriaControlledDemo implements OnInit {
- images: any[] | undefined;
-
- get activeIndex(): number {
- return this._activeIndex;
- }
-
- set activeIndex(newValue) {
- if (this.images && 0 <= newValue && newValue <= this.images.length - 1) {
- this._activeIndex = newValue;
- }
- }
-
- _activeIndex: number = 2;
-
- responsiveOptions: any[] = [
- {
- breakpoint: '1300px',
- numVisible: 4
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
-
- constructor(private photoService: PhotoService) {}
-
- ngOnInit() {
- this.photoService.getImages().then((images) => (this.images = images));
- }
-
- next() {
- this.activeIndex++;
- }
-
- prev() {
- this.activeIndex--;
- }
-}`,
- data: `
-/* PhotoService */
-{
- itemImageSrc: 'https://primeng.org/images/galleria/galleria1.jpg',
- thumbnailImageSrc: 'https://primeng.org/images/galleria/galleria1s.jpg',
- alt: 'Description for Image 1',
- title: 'Title 1'
-},
-...`,
- service: ['PhotoService']
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/galleria/importdoc.ts b/apps/showcase/src/app/showcase/doc/galleria/importdoc.ts
deleted file mode 100644
index dda1bc18383..00000000000
--- a/apps/showcase/src/app/showcase/doc/galleria/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'galleria-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { GalleriaModule } from 'primeng/galleria';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/galleria/indicator/templatedoc.ts b/apps/showcase/src/app/showcase/doc/galleria/indicator/templatedoc.ts
deleted file mode 100644
index 1210026861d..00000000000
--- a/apps/showcase/src/app/showcase/doc/galleria/indicator/templatedoc.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-import { PhotoService } from '@service/photoservice';
-
-@Component({
- selector: 'template-doc',
- template: `
-
- Indicator content can be customized with the indicator template.
-
-
-
-
-
-
-
- {{ index + 1 }}
-
-
-
-
-
- `
-})
-export class TemplateDoc implements OnInit {
- images: any[] | undefined;
-
- responsiveOptions: any[] = [
- {
- breakpoint: '1300px',
- numVisible: 4
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
-
- constructor(private photoService: PhotoService) {}
-
- ngOnInit() {
- this.photoService.getImages().then((images) => {
- this.images = images;
- });
- }
-
- code: Code = {
- basic: `
-
-
-
-
- {{ index + 1 }}
-
-
- `,
- html: `
-
-
-
-
-
-
- {{index + 1}}
-
-
-
-
`,
- typescript: `
-import { Component, OnInit } from '@angular/core';
-import { PhotoService } from '@service/photoservice';
-
-@Component({
- selector: 'galleria-indicator-template-demo',
- templateUrl: './galleria-indicator-template-demo.html'
-})
-export class GalleriaIndicatorTemplateDemo implements OnInit {
- images: any[] | undefined;
-
- constructor(private photoService: PhotoService) {}
-
- ngOnInit() {
- this.photoService.getImages().then((images) => {
- this.images = images;
- });
- }
-}`,
- data: `
-/* PhotoService */
-{
- itemImageSrc: 'https://primeng.org/images/galleria/galleria1.jpg',
- thumbnailImageSrc: 'https://primeng.org/images/galleria/galleria1s.jpg',
- alt: 'Description for Image 1',
- title: 'Title 1'
-},
-...`,
- service: ['PhotoService']
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/galleria/responsivedoc.ts b/apps/showcase/src/app/showcase/doc/galleria/responsivedoc.ts
deleted file mode 100644
index b4472610800..00000000000
--- a/apps/showcase/src/app/showcase/doc/galleria/responsivedoc.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-import { PhotoService } from '@service/photoservice';
-
-@Component({
- selector: 'galleria-responsive-demo',
- template: `
-
- Galleria responsiveness is defined with the responsiveOptions property.
-
-
-
-
-
-
-
-
-
-
- `
-})
-export class ResponsiveDoc implements OnInit {
- images: any[] | undefined;
-
- responsiveOptions: any[] = [
- {
- breakpoint: '1300px',
- numVisible: 4
- },
- {
- breakpoint: '575px',
- numVisible: 1
- }
- ];
-
- constructor(private photoService: PhotoService) {}
-
- ngOnInit() {
- this.photoService.getImages().then((images) => (this.images = images));
- }
-
- code: Code = {
- basic: `
-
-
-
-
- `,
- html: `
-
-
-
-
-
-
-
`,
- 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',
- standalone: true,
- imports: [GalleriaModule],
- providers: [PhotoService]
-})
-export class GalleriaResponsiveDemo implements OnInit {
- images: any[] | undefined;
-
- responsiveOptions: any[] = [
- {
- breakpoint: '1300px',
- numVisible: 4,
- },
- {
- breakpoint: '575px',
- numVisible: 1,
- },
- ];
-
-
- constructor(private photoService: PhotoService) {}
-
- ngOnInit() {
- this.photoService.getImages().then((images) => (this.images = images));
- }
-}`,
- data: `
-/* PhotoService */
-{
- itemImageSrc: 'https://primeng.org/images/galleria/galleria1.jpg',
- thumbnailImageSrc: 'https://primeng.org/images/galleria/galleria1s.jpg',
- alt: 'Description for Image 1',
- title: 'Title 1'
-},
-...`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/iconfield/basicdoc.ts b/apps/showcase/src/app/showcase/doc/iconfield/basicdoc.ts
deleted file mode 100644
index e961b6e794a..00000000000
--- a/apps/showcase/src/app/showcase/doc/iconfield/basicdoc.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
-
- A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property
- that the default value is right and also left option is available.
-
-
-
-
- `
-})
-export class BasicDoc {
- code: Code = {
- basic: `
-
-
- `,
-
- html: `
`,
-
- typescript: `import { Component } from '@angular/core';
-import { InputIcon } from 'primeng/inputicon';
-import { IconField } from 'primeng/iconfield';
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'iconfield-basic-demo',
- templateUrl: './iconfield-basic-demo.html',
- standalone: true,
- imports: [InputIcon, IconField, InputTextModule, FormsModule]
-})
-export class IconfieldBasicDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/iconfield/floatlabeldoc.ts b/apps/showcase/src/app/showcase/doc/iconfield/floatlabeldoc.ts
deleted file mode 100644
index 8fb168051e3..00000000000
--- a/apps/showcase/src/app/showcase/doc/iconfield/floatlabeldoc.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'float-label-doc',
- template: `
-
- FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
-
-
-
- `
-})
-export class FloatLabelDoc {
- value1: string | undefined;
-
- value2: string | undefined;
-
- value3: string | undefined;
-
- code: Code = {
- basic: `
-
-
- Over Label
-
-
-
-
-
- In Label
-
-
-
-
-
- On Label
- `,
-
- html: `
`,
-
- 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';
-import { FloatLabelModule } from 'primeng/floatlabel';
-
-@Component({
- selector: 'iconfield-float-label-demo',
- templateUrl: './iconfield-float-label-demo.html',
- standalone: true,
- imports: [InputIconModule, IconFieldModule, InputTextModule, FloatLabelModule, FormsModule]
-})
-export class IconFieldFloatLabelDemo {
- value1: string | undefined;
-
- value2: string | undefined;
-
- value3: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/iconfield/iftalabeldoc.ts b/apps/showcase/src/app/showcase/doc/iconfield/iftalabeldoc.ts
deleted file mode 100644
index 966c9d2b390..00000000000
--- a/apps/showcase/src/app/showcase/doc/iconfield/iftalabeldoc.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'ifta-label-doc',
- template: `
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- `
-})
-export class IftaLabelDoc {
- value: string | undefined;
-
- code: Code = {
- basic: `
-
-
- Username
- `,
-
- html: `
`,
-
- 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';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-@Component({
- selector: 'iconfield-ifta-label-demo',
- templateUrl: './iconfield-ifta-label-demo.html',
- standalone: true,
- imports: [InputIconModule, IconFieldModule, InputTextModule, IftaLabelModule, FormsModule]
-})
-export class IconFieldIftaLabelDemo {
- value: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/iconfield/importdoc.ts b/apps/showcase/src/app/showcase/doc/iconfield/importdoc.ts
deleted file mode 100644
index a69a1ad0b56..00000000000
--- a/apps/showcase/src/app/showcase/doc/iconfield/importdoc.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'icon-field-import-doc',
- template: `
`
-})
-export class ImportDoc {
- code: Code = {
- typescript: `import { IconField } from 'primeng/iconfield';
-import { InputIcon } from 'primeng/inputicon';`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/iconfield/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/iconfield/sizesdoc.ts
deleted file mode 100644
index 8102402f803..00000000000
--- a/apps/showcase/src/app/showcase/doc/iconfield/sizesdoc.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'sizes-doc',
- template: `
-
-
- A group is created by wrapping the input and icon with the IconField component. Each icon is defined as a child of InputIcon component. In addition, position of the icon can be changed using iconPosition property
- that the default value is right and also left option is available.
-
-
-
-
- `
-})
-export class SizesDoc {
- value1 = null;
-
- value2 = null;
-
- value3 = null;
-
- code: Code = {
- basic: `
-
-
-
-
-
-
- `,
-
- html: `
`,
-
- typescript: `import { Component } from '@angular/core';
-import { InputIcon } from 'primeng/inputicon';
-import { IconField } from 'primeng/iconfield';
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'iconfield-sizes-demo',
- templateUrl: './iconfield-sizes-demo.html',
- standalone: true,
- imports: [InputIcon, IconField, InputTextModule, FormsModule]
-})
-export class IconfieldSizesDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/iconfield/templatedoc.ts b/apps/showcase/src/app/showcase/doc/iconfield/templatedoc.ts
deleted file mode 100644
index ed763e14cfa..00000000000
--- a/apps/showcase/src/app/showcase/doc/iconfield/templatedoc.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'template-doc',
- template: `
-
- An eye icon is displayed by default when the image is hovered in preview mode. Use the indicator template for custom content.
-
-
-
- `
-})
-export class TemplateDoc {
- code: Code = {
- basic: `
-
-
-
-
- `,
-
- html: `
`,
-
- typescript: `import { Component } from '@angular/core';
-import { InputIcon } from 'primeng/inputicon';
-import { IconField } from 'primeng/iconfield';
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'iconfield-template-demo',
- templateUrl: './iconfield-template-demo.html',
- standalone: true,
- imports: [InputIcon, IconField, InputTextModule, FormsModule]
-})
-export class IconFieldTemplateDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/icons/basicdoc.ts b/apps/showcase/src/app/showcase/doc/icons/basicdoc.ts
deleted file mode 100644
index d25787f85b2..00000000000
--- a/apps/showcase/src/app/showcase/doc/icons/basicdoc.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- PrimeIcons use the pi pi-{icon} syntax such as pi pi-check . A standalone icon can be displayed using an element such as i or span
-
-
-
-
- `
-})
-export class BasicDoc {
- code: Code = {
- basic: `
-
-
-
`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/icons/colordoc.ts b/apps/showcase/src/app/showcase/doc/icons/colordoc.ts
deleted file mode 100644
index a4de5bef825..00000000000
--- a/apps/showcase/src/app/showcase/doc/icons/colordoc.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'color-doc',
- template: `
-
- Icon color is defined with the color property which is inherited from parent by default.
-
-
-
-
- `
-})
-export class ColorDoc {
- code: Code = {
- basic: `
-
-
-
`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/icons/downloaddoc.ts b/apps/showcase/src/app/showcase/doc/icons/downloaddoc.ts
deleted file mode 100644
index 5d5d9b004ab..00000000000
--- a/apps/showcase/src/app/showcase/doc/icons/downloaddoc.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'download-doc',
- template: `
-
- PrimeIcons is available at npm, run the following command to download it to your project.
-
-
- `
-})
-export class DownloadDoc {
- code: Code = {
- command: `npm install primeicons`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/icons/importdoc.ts b/apps/showcase/src/app/showcase/doc/icons/importdoc.ts
deleted file mode 100644
index 359df959afa..00000000000
--- a/apps/showcase/src/app/showcase/doc/icons/importdoc.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'import-doc',
- template: `
-
- CSS file of the icon library needs to be imported in styles.scss of your application.
-
-
- `
-})
-export class ImportDoc {
- code: Code = {
- scss: `@import "primeicons/primeicons.css";`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/icons/listdoc.ts b/apps/showcase/src/app/showcase/doc/icons/listdoc.ts
deleted file mode 100644
index 910a07bb824..00000000000
--- a/apps/showcase/src/app/showcase/doc/icons/listdoc.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Component } from '@angular/core';
-import { default as IconData } from '@data/icons.json';
-
-@Component({
- selector: 'list-doc',
- template: `
-
-
- Here is the full list of PrimeIcons. More icons will be added periodically and you may also
- request new icons at the issue tracker.
-
-
-
-
-
-
-
-
-
pi-{{ icon.properties.name }}
-
-
-
- `
-})
-export class ListDoc {
- icons: any;
-
- filteredIcons: any[];
-
- selectedIcon: any;
-
- ngOnInit() {
- this.icons = IconData.icons.sort((icon1, icon2) => {
- if (icon1.properties.name < icon2.properties.name) return -1;
- else if (icon1.properties.name < icon2.properties.name) return 1;
- else return 0;
- });
- this.filteredIcons = IconData.icons;
- }
-
- onFilter(event: KeyboardEvent): void {
- let searchText = (
event.target).value;
- let sanitizedInput = searchText?.replace(/[^\w\s]/gi, '').replace(/\s/g, '');
-
- if (!searchText) {
- this.filteredIcons = this.icons;
- } else {
- this.filteredIcons = this.icons.filter((icon) => {
- return (
- icon.icon.tags.some((tag) =>
- tag
- .replace(/[^\w\s]/gi, '')
- .replace(/\s/g, '')
- .includes(sanitizedInput.toLowerCase())
- ) ||
- icon.properties.name
- .replace(/[^\w\s]/gi, '')
- .replace(/\s/g, '')
- .toLowerCase()
- .includes(sanitizedInput.toLowerCase())
- );
- });
- }
- }
-}
diff --git a/apps/showcase/src/app/showcase/doc/icons/sizedoc.ts b/apps/showcase/src/app/showcase/doc/icons/sizedoc.ts
deleted file mode 100644
index be156b12348..00000000000
--- a/apps/showcase/src/app/showcase/doc/icons/sizedoc.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'size-doc',
- template: `
-
- Size of an icon is controlled with the font-size property of the element.
-
-
-
-
- IftaLabel is used by wrapping the input and its label.
-
-
-
- Username
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { IftaLabelModule } from 'primeng/iftalabel';
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'ifta-label-basic-demo',
- templateUrl: './ifta-label-basic-demo.html',
- standalone: true,
- imports: [IftaLabelModule, InputTextModule, FormsModule]
-})
-export class IftaLabelBasicDemo {
- value: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/iftalabel/importdoc.ts b/apps/showcase/src/app/showcase/doc/iftalabel/importdoc.ts
deleted file mode 100644
index 7cdf6a160a9..00000000000
--- a/apps/showcase/src/app/showcase/doc/iftalabel/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'ifta-label-import-doc',
- template: `
- When the form element is invalid, the label is also highlighted.
-
-
-
- Username
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { IftaLabelModule } from 'primeng/iftalabel';
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'ifta-label-invalid-demo',
- templateUrl: './ifta-label-invalid-demo.html',
- standalone: true,
- imports: [IftaLabelModule, InputTextModule, FormsModule]
-})
-export class IftaLabelInvalidDemo {
- value: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inplace/basicdoc.ts b/apps/showcase/src/app/showcase/doc/inplace/basicdoc.ts
deleted file mode 100644
index debf831154a..00000000000
--- a/apps/showcase/src/app/showcase/doc/inplace/basicdoc.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- Inplace component requires display and content templates to define the content of each state.
-
-
-
-
- View Content
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
- View Content
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit...
-
-
- `,
- html: `
-
-
- View Content
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
- Any content such as an image can be placed inside an Inplace.
-
-
-
-
-
- View Photo
-
-
-
-
-
-
-
-
- View Photo
-
-
-
-
- `,
- html: `
-
-
-
- View Photo
-
-
-
-
-
-
-
- Inplace can be used within a form to display a value as read only before making it editable. The
- closable property adds a close button next to the content to switch back to read only mode.
-
-
-
-
-
- Click to Edit
-
-
-
-
-
- `,
- html: ``,
- typescript: `import { Component } from '@angular/core';
-import { InplaceModule } from 'primeng/inplace';
-import { InputTextModule } from 'primeng/inputtext';
-import { AutoFocusModule } from 'primeng/autofocus';
-
-@Component({
- selector: 'inplace-input-demo',
- templateUrl: './inplace-input-demo.html',
- standalone: true,
- imports: [InplaceModule, InputTextModule, AutoFocusModule]
-})
-export class InplaceInputDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inplace/lazydoc.ts b/apps/showcase/src/app/showcase/doc/inplace/lazydoc.ts
deleted file mode 100644
index b3ed9100450..00000000000
--- a/apps/showcase/src/app/showcase/doc/inplace/lazydoc.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-import { Product } from '@domain/product';
-import { ProductService } from '@service/productservice';
-
-@Component({
- selector: 'lazy-doc',
- template: `
-
- Using the onActivate event, data can be loaded in a lazy manner before displaying it in a table.
-
-
-
-
- View Data
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
-
-
-
- View Data
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
- `,
- html: `
-
-
- View Data
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
-
-
- A group is created by wrapping the input and add-ons with the p-inputgroup component. Each add-on element is defined as a child of p-inputgroup-addon component.
-
-
-
-
-
-
-
-
- $
- .00
-
-
-
- www
-
-
-
-
-
- `,
-
- html: ``,
-
- 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 { SelectModule } from 'primeng/select';
-import { InputNumberModule } from 'primeng/inputnumber';
-
-interface City {
- name: string;
- code: string;
-}
-
-@Component({
- selector: 'input-group-basic-demo',
- templateUrl: './input-group-basic-demo.html',
- standalone: true,
- imports: [FormsModule, InputGroupModule, InputGroupAddonModule, InputTextModule, SelectModule, InputNumberModule]
-})
-export class InputGroupBasicDemo {
- text1: string | undefined;
-
- text2: string | undefined;
-
- number: string | undefined;
-
- selectedCity: City | undefined;
-
- cities: City[] = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' },
- ];
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputgroup/buttondoc.ts b/apps/showcase/src/app/showcase/doc/inputgroup/buttondoc.ts
deleted file mode 100644
index bb2a4ce1b74..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputgroup/buttondoc.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-import { MenuItem } from 'primeng/api';
-
-@Component({
- selector: 'button-doc',
- template: `
-
- Buttons can be placed at either side of an input element.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { InputGroup } from 'primeng/inputgroup';
-import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
-import { InputTextModule } from 'primeng/inputtext';
-import { ButtonModule } from 'primeng/button';
-import { MenuModule } from 'primeng/menu';
-import { MenuItem } from 'primeng/api';
-
-@Component({
- selector: 'input-group-button-demo',
- templateUrl: './input-group-button-demo.html',
- standalone: true,
- imports: [FormsModule, InputGroup, InputGroupAddonModule, InputTextModule, ButtonModule, MenuModule]
-})
-export class InputGroupButtonDemo {
- items: MenuItem[] | undefined;
-
- ngOnInit() {
- this.items = [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }];
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputgroup/checkboxdoc.ts b/apps/showcase/src/app/showcase/doc/inputgroup/checkboxdoc.ts
deleted file mode 100644
index c47418cda33..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputgroup/checkboxdoc.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'checkbox-doc',
- template: `
-
- Checkbox and RadioButton components can be combined with an input element under the same group.
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { InputGroup } from 'primeng/inputgroup';
-import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
-import { InputTextModule } from 'primeng/inputtext';
-import { Checkbox } from 'primeng/checkbox';
-import { RadioButton } from 'primeng/radiobutton';
-
-@Component({
- selector: 'input-group-checkbox-demo',
- templateUrl: './input-group-checkbox-demo.html',
- standalone: true,
- imports: [FormsModule, InputGroup, InputGroupAddonModule, InputTextModule, Checkbox, RadioButton]
-})
-export class InputGroupCheckboxDemo {
- radioValue1: boolean = false;
-
- checked1: boolean = false;
-
- checked2: boolean = false;
-
- category: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputgroup/floatlabeldoc.ts b/apps/showcase/src/app/showcase/doc/inputgroup/floatlabeldoc.ts
deleted file mode 100644
index 03346b41742..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputgroup/floatlabeldoc.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'float-label-doc',
- template: `
-
-
- FloatLabel visually integrates a label with its form element. Visit
- FloatLabel documentation for more information.
-
-
-
-
-
-
-
- Over Label
-
-
-
-
- $
-
- In Label
-
- .00
-
-
-
- www
-
- On Label
-
- `,
-
- html: ``,
-
- 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 { InputNumberModule } from 'primeng/inputnumber';
-import { FloatLabelModule } from 'primeng/floatlabel';
-
-@Component({
- selector: 'input-group-float-label-demo',
- templateUrl: './input-group-float-label-demo.html',
- standalone: true,
- imports: [FormsModule, InputGroupModule, InputGroupAddonModule, InputTextModule, FloatLabelModule]
-})
-export class InputGroupFloatLabelDemo {
- value1: string | undefined;
-
- value2: string | undefined;
-
- value3: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputgroup/iftalabeldoc.ts b/apps/showcase/src/app/showcase/doc/inputgroup/iftalabeldoc.ts
deleted file mode 100644
index 49932544961..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputgroup/iftalabeldoc.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'ifta-label-doc',
- template: `
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
-
-
-
- Price
-
-
-
-
-
-
- Price
-
- `,
-
- html: `
-
-
-
-
- Price
-
-
-
- Multiple add-ons can be placed inside the same group.
-
-
-
-
-
-
-
- $
- .00
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { InputGroup } 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',
- standalone: true,
- imports: [FormsModule, InputGroup, InputGroupAddonModule, InputTextModule]
-})
-export class InputGroupMultipleDemo {
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputmask/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/inputmask/accessibilitydoc.ts
deleted file mode 100644
index 931b39ef5f5..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputmask/accessibilitydoc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'input-mask-accessibility-doc',
- template: `
-
- Screen Reader
-
- InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy ,
- ariaLabel props.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the input.
-
-
-
-
-
Date
-Phone
-
- InputMask is used as a controlled input with ngModel properties.
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
- FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- SSN
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { InputMaskModule } from 'primeng/inputmask';
-import { FormsModule } from '@angular/forms';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-@Component({
- selector: 'input-mask-iftalabel-demo',
- templateUrl: './input-mask-iftalabel-demo.html',
- standalone: true,
- imports: [FormsModule, InputMaskModule, IftaLabelModule]
-})
-export class InputMaskIftaLabelDemo {
- value: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputmask/importdoc.ts b/apps/showcase/src/app/showcase/doc/inputmask/importdoc.ts
deleted file mode 100644
index 49c112524d6..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputmask/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'input-mask-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
-
- Mask format can be a combination of the following definitions; a for alphabetic characters, 9 for numeric characters and * for alphanumberic characters. In addition, formatting characters like ( ,
- ) , - are also accepted.
-
-
-
-
-
-
-
- SSN
-Phone
-Serial Number
-
-
-
-
- `,
-
- typescript: `import { Component } from '@angular/core';
-import { InputMask } from 'primeng/inputmask';
-import { FormsModule } from '@angular/forms';
-import { Fluid } from 'primeng/fluid';
-
-@Component({
- selector: 'input-mask-mask-demo',
- templateUrl: './input-mask-mask-demo.html',
- standalone: true,
- imports: [FormsModule, InputMask, Fluid]
-})
-export class InputMaskMaskDemo {
- value1: string | undefined;
-
- value2: string | undefined;
-
- value3: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputmask/reactiveformsdoc.ts b/apps/showcase/src/app/showcase/doc/inputmask/reactiveformsdoc.ts
deleted file mode 100644
index 1cecb0481cf..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputmask/reactiveformsdoc.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'reactive-forms-doc',
- template: `
-
- InputMask can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- (null)
- });
- }
-
- code: Code = {
- basic: `(null)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputmask/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/inputmask/sizesdoc.ts
deleted file mode 100644
index 6d6a9fed688..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputmask/sizesdoc.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'sizes-doc',
- template: `
-
- InputMask provides small and large sizes as alternatives to the base.
-
-
-
-
- Screen Reader
-
- Value to describe the component can either be provided via label tag combined with inputId prop or using ariaLabelledBy , ariaLabel props. The input element uses spinbutton role in addition to the
- aria-valuemin , aria-valuemax and aria-valuenow attributes.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the input.
-
-
-
- up arrow
-
- Increments the value.
-
-
-
- down arrow
-
- Decrements the value.
-
-
-
- home
-
- Set the minimum value if provided.
-
-
-
- end
-
- Set the maximum value if provided.
-
-
-
-
-
Price
-Number
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- Price
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { InputNumberModule } from 'primeng/inputnumber';
-import { FormsModule } from '@angular/forms';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-@Component({
- selector: 'input-number-ifta-label-demo',
- templateUrl: './input-number-ifta-label-demo.html',
- standalone: true,
- imports: [FormsModule, InputNumberModule, IftaLabelModule]
-})
-export class InputNumberIftaLabelDemo {
- value: number | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputnumber/importdoc.ts b/apps/showcase/src/app/showcase/doc/inputnumber/importdoc.ts
deleted file mode 100644
index fef09ed5c3b..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputnumber/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'input-number-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale.
-
-
-
-
-
United States Locale
-
-
-
-
-
-
- United States Locale
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { InputNumber } from 'primeng/inputnumber';
-import { FormsModule } from '@angular/forms';
-import { Fluid } from 'primeng/fluid';
-
-@Component({
- selector: 'input-number-locale-demo',
- templateUrl: './input-number-locale-demo.html',
- standalone: true,
- imports: [FormsModule, InputNumber, Fluid]
-})
-export class InputNumberLocaleDemo {
- value1: number = 151351;
-
- value2: number = 115744;
-
- value3: number = 635524;
-
- value4: number = 732762;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts b/apps/showcase/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts
deleted file mode 100644
index c77fe79abca..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'reactive-forms-doc',
- template: `
-
- InputNumber can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- InputNumber provides small and large sizes as alternatives to the base.
-
-
-
- Buttons can also placed vertically by setting buttonLayout as vertical .
-
-
-
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { InputNumber } from 'primeng/inputnumber';
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'input-number-vertical-demo',
- templateUrl: './input-number-vertical-demo.html',
- standalone: true,
- imports: [FormsModule, InputNumber]
-})
-export class InputNumberVerticalDemo {
- value1: number = 50;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputotp/basicdoc.ts b/apps/showcase/src/app/showcase/doc/inputotp/basicdoc.ts
deleted file mode 100644
index 9d408dea83f..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputotp/basicdoc.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- 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.
-
-
-
- Enable the mask option to hide the values in the input fields.
-
-
-
- InputOtp provides small and large sizes as alternatives to the base.
-
-
-
- Define a template with your own UI elements with bindings to the provided events and attributes to replace the default design.
-
-
-
-
-
- `,
-
- html: ``,
-
- 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 {
- width: 40px;
- font-size: 36px;
- border: 0 none;
- appearance: none;
- text-align: center;
- transition: all 0.2s;
- background: transparent;
- border-bottom: 2px solid var(--p-inputtext-border-color);
- border-radius: 0px;
- }
-
- .custom-otp-input:focus {
- outline: 0 none;
- border-bottom-color: var(--p-primary-color);
- }
- \`
- ],
-})
-
-export class InputOtpTemplateDemo {
- value: any;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/accessibilitydoc.ts
deleted file mode 100644
index 605f8b658ca..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/accessibilitydoc.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'input-text-accessibility-doc',
- template: `
-
- Screen Reader
-
- InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby ,
- aria-label props.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the input.
-
-
-
-
-
Firstname
-Lastname
-
- InputText is used as a controlled input with ngModel property.
-
-
-
-
-
`,
-
- 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',
- standalone: true,
- imports: [FormsModule, InputTextModule]
-})
-export class InputTextBasicDemo {
- value: string;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/disableddoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/disableddoc.ts
deleted file mode 100644
index 17685197783..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/disableddoc.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'disabled-doc',
- template: `
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
-
-
`,
-
- 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',
- standalone: true,
- imports: [FormsModule, InputTextModule]
-})
-export class InputTextDisabledDemo {
- value: string | undefined = "Disabled"
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/filleddoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/filleddoc.ts
deleted file mode 100644
index 3ecc0d69f82..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/filleddoc.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-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.
-
-
-
-
-
`,
-
- 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/apps/showcase/src/app/showcase/doc/inputtext/floatlabeldoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/floatlabeldoc.ts
deleted file mode 100644
index e811d1412f9..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/floatlabeldoc.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'floatlabel-doc',
- template: `
-
-
- FloatLabel visually integrates a label with its form element. Visit
- FloatLabel documentation for more information.
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-import { FloatLabel } from 'primeng/floatlabel';
-
-@Component({
- selector: 'input-text-floatlabel-demo',
- templateUrl: './input-text-floatlabel-demo.html',
- standalone: true,
- imports: [FormsModule, InputTextModule, FloatLabel]
-})
-export class InputTextFloatlabelDemo {
- value1: string | undefined;
-
- value2: string | undefined;
-
- value3: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/iconsdoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/iconsdoc.ts
deleted file mode 100644
index 2c7e1f00de9..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/iconsdoc.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'icons-doc',
- template: `
-
-
- Icons can be placed inside an input element by wrapping both the input and the icon with an element that has either
- .p-input-icon-left or p-input-icon-right class.
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
`,
-
- typescript: `
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'input-text-icons-demo',
- templateUrl: './input-text-icons-demo.html'
-})
-export class InputTextIconsDemo {
- value: string | undefined;
-
- value2: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/iftalabeldoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/iftalabeldoc.ts
deleted file mode 100644
index 73e753e5864..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/iftalabeldoc.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'iftalabel-doc',
- template: `
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- Username
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { InputTextModule } from 'primeng/inputtext';
-import { FormsModule } from '@angular/forms';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-@Component({
- selector: 'input-text-iftalabel-demo',
- templateUrl: './input-text-iftalabel-demo.html',
- standalone: true,
- imports: [FormsModule, InputTextModule, IftaLabelModule]
-})
-export class InputTextIftaLabelDemo {
- value: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/importdoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/importdoc.ts
deleted file mode 100644
index f90e2626e8e..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/importdoc.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'input-text-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
-
-
`,
-
- 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',
- standalone: true,
- imports: [FormsModule, InputTextModule]
-})
-export class InputTextInvalidDemo {
- value: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/keyfilterdoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/keyfilterdoc.ts
deleted file mode 100644
index 55edfdcd929..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/keyfilterdoc.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'key-filter-doc',
- template: `
-
- InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
-
-
-
-
-
`,
-
- typescript: `
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'input-text-key-filter-demo',
- templateUrl: './input-text-key-filter-demo.html'
-})
-export class InputTextKeyFilterDemo {
- value: number | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/reactiveformsdoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/reactiveformsdoc.ts
deleted file mode 100644
index ac28dcadc84..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/reactiveformsdoc.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'reactive-forms-doc',
- template: `
-
- InputText can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
-
- (null)
- });
- }
-
- code: Code = {
- basic: `
-
`,
-
- 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',
- standalone: true,
- imports: [ReactiveFormsModule, InputTextModule]
-})
-export class InputTextReactiveFormsDemo implements OnInit {
- formGroup: FormGroup | undefined;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- text: new FormControl(null)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/inputtext/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/inputtext/sizesdoc.ts
deleted file mode 100644
index 658ab655b18..00000000000
--- a/apps/showcase/src/app/showcase/doc/inputtext/sizesdoc.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'sizes-doc',
- template: `
-
- InputText provides small and large sizes as alternatives to the standard.
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { InputTextModule } from 'primeng/inputtext';
-
-@Component({
- selector: 'input-text-sizes-demo',
- templateUrl: './input-text-sizes-demo.html',
- standalone: true,
- imports: [FormsModule, InputTextModule]
-})
-export class InputTextSizesDemo {
- value1: string | undefined;
-
- value2: string | undefined;
-
- value3: string | undefined;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/installation/animationsdoc.ts b/apps/showcase/src/app/showcase/doc/installation/animationsdoc.ts
deleted file mode 100644
index 6da7148fbdc..00000000000
--- a/apps/showcase/src/app/showcase/doc/installation/animationsdoc.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'animations-doc',
- template: `
-
-
- Various components utilize Angular animations to enhance the user experience. To enable animations in your application, you must import the BrowserAnimationsModule . If you prefer to disable animations globally, you can import
- NoopAnimationsModule instead.
-
- Starting from Angular 17, you can also use the provideAnimationsAsync function for configuring animations in a more efficient way, especially in larger applications where optimizing load times is crucial.
-
-
-
- PrimeNG is available for download on the npm registry.
-
-
- KeyFilter can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
-
-
-
-
`,
-
- 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',
- standalone: true,
- imports: [ReactiveFormsModule, InputTextModule]
-})
-export class KeyFilterReactiveFormsDemo implements OnInit {
- formGroup!: FormGroup;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- value: new FormControl(1234)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/knob/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/knob/accessibilitydoc.ts
deleted file mode 100644
index f38a4dfa765..00000000000
--- a/apps/showcase/src/app/showcase/doc/knob/accessibilitydoc.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'knob-accessibility-doc',
- template: `
-
- Screen Reader
-
- Knob element component uses slider role in addition to the aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and
- ariaLabel props.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the slider.
-
-
-
-
- left arrow
- down arrow
-
-
- Decrements the value.
-
-
-
-
- right arrow
- up arrow
-
-
- Increments the value.
-
-
-
- home
-
- Set the minimum value.
-
-
-
- end
-
- Set the maximum value.
-
-
-
- page up
-
- Increments the value by 10 steps.
-
-
-
- page down
-
- Decrements the value by 10 steps.
-
-
-
-
-
Number
-
- Knob is an input component and used with the standard ngModel directive.
-
-
-
- Colors are customized with the textColor , rangeColor and valueColor properties.
-
-
-
- When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
-
-
-
- Boundaries are configured with the min and max properties whose defaults are 0 and 100 respectively.
-
-
-
- Knob can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- When readonly present, value cannot be edited.
-
-
-
- Diameter of the knob is defined in pixels using the size property.
-
-
-
- Size of each movement is defined with the step property.
-
-
-
- Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder .
-
-
-
-
- Screen Reader
-
- Value to describe the component can be provided ariaLabelledBy or ariaLabel props. The list element has a listbox role with the aria-multiselectable attribute that sets to true when multiple selection is
- enabled. Each list item has an option role with aria-selected and aria-disabled as their attributes.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the first selected option, if there is none then first option receives the focus.
-
-
-
- up arrow
-
- Moves focus to the previous option.
-
-
-
- down arrow
-
- Moves focus to the next option.
-
-
-
- enter
-
- Toggles the selected state of the focused option.
-
-
-
- space
-
- Toggles the selected state of the focused option.
-
-
-
- home
-
- Moves focus to the first option.
-
-
-
- end
-
- Moves focus to the last option.
-
-
- shift + down arrow Moves focus to the next option and toggles the selection state.
-
-
- shift + up arrow Moves focus to the previous option and toggles the selection state.
-
-
- shift + space Selects the items between the most recently selected option and the focused option.
-
-
- control + shift + home Selects the focused options and all the options up to the first one.
-
-
- control + shift + end Selects the focused options and all the options down to the last one.
-
-
- control + a Selects all options.
-
-
-
-
-
Options
-
-
- Listbox is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively.
- Default property name for the optionLabel is label and value for the optionValue . If optionValue is omitted and the object has no value property, the object itself becomes the value of an
- option. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary.
-
-
-
-
- An alternative way to highlight the selected option is displaying a checkmark instead.
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- ListBox provides built-in filtering that is enabled by adding the filter property.
-
-
-
- Options can be grouped when a nested data structures is provided.
-
-
-
-
-
-
-
{{ group.label }}
-
-
-
-
-
-
-
{{ group.label }}
-
- `,
-
- html: `
-
-
-
-
-
{{ group.label }}
-
-
-
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
-
- ListBox allows choosing a single item by default, enable multiple property to choose more than one. When the optional metaKeySelection is present, behavior is changed in a way that selecting a new item requires meta key
- to be present.
-
-
-
-
- Listbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- (null)
- });
- }
-
- code: Code = {
- basic: ``,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { Listbox } from 'primeng/listbox';
-
-interface City {
- name: string,
- code: string
-}
-
-@Component({
- selector: 'listbox-reactive-forms-demo',
- templateUrl: './listbox-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, Listbox]
-})
-export class ListboxReactiveFormsDemo implements OnInit {
- cities!: City[];
-
- formGroup!: FormGroup;
-
- ngOnInit() {
- this.cities = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- this.formGroup = new FormGroup({
- selectedCity: new FormControl(null)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/listbox/templatedoc.ts b/apps/showcase/src/app/showcase/doc/listbox/templatedoc.ts
deleted file mode 100644
index 09a325d1d37..00000000000
--- a/apps/showcase/src/app/showcase/doc/listbox/templatedoc.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-
-interface Country {
- name: string;
- code: string;
-}
-
-@Component({
- selector: 'template-doc',
- template: `
-
- Custom content for an option is displayed with the pTemplate property that takes an option as a parameter.
-
-
-
-
-
-
-
{{ country.name }}
-
-
-
-
-
-
-
{{ country.name }}
-
- `,
-
- html: `
-
-
-
-
-
{{ country.name }}
-
-
-
-
- VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance
- issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item.
-
-
-
-
- MegaMenu requires a collection of menuitems as its model .
-
-
-
- The command property of a menuitem defines the callback to run when an item is activated by click or a key event.
-
-
- Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
-
-
-
-
-
-
-
-
-
-
- `
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/megamenu/templatedoc.ts b/apps/showcase/src/app/showcase/doc/megamenu/templatedoc.ts
deleted file mode 100644
index be2836ca741..00000000000
--- a/apps/showcase/src/app/showcase/doc/megamenu/templatedoc.ts
+++ /dev/null
@@ -1,347 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MegaMenuItem } from 'primeng/api';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'template-doc',
- template: `
-
- Custom content can be placed between p-megamenu tags. Megamenu should be horizontal for custom content.
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.label }}
-
-
-
-
-
- {{ item.label }}
- {{ item.subtext }}
-
-
-
-
-
{{ item.subtext }}
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MegaMenuItem } from 'primeng/api';
-import { MegaMenu } 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',
- standalone: true,
- imports: [MegaMenu, ButtonModule, CommonModule, AvatarModule]
-})
-export class MegaMenuTemplateDemo implements OnInit {
- items: MegaMenuItem[] | undefined;
-
- ngOnInit() {
- this.items = [
- {
- label: 'Company',
- root: true,
- items: [
- [
- {
- 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' }
- ]
- }
- ],
- [
- {
- 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' }
- ]
- }
- ],
- [
- {
- 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' }
- ]
- }
- ],
- [
- {
- items: [{ image: 'https://primefaces.org/cdn/primeng/images/uikit/uikit-system.png', label: 'GET STARTED', subtext: 'Build spectacular apps in no time.' }]
- }
- ]
- ]
- },
- {
- label: 'Resources',
- root: true
- },
- {
- label: 'Contact',
- root: true
- }
- ];
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/megamenu/verticaldoc.ts b/apps/showcase/src/app/showcase/doc/megamenu/verticaldoc.ts
deleted file mode 100644
index d4cba187f07..00000000000
--- a/apps/showcase/src/app/showcase/doc/megamenu/verticaldoc.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MegaMenuItem } from 'primeng/api';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'vertical-doc',
- template: `
-
- Layout of the MegaMenu is changed with the orientation property that accepts horizontal and vertical as options.
-
-
-
- Menu requires a collection of menuitems as its model .
-
-
-
- The function to invoke when an item is clicked is defined using the command property.
-
-
-
- Menu supports one level of nesting by defining children with items property.
-
-
-
- Popup mode is enabled by setting popup property to true and calling toggle method with an event of the target.
-
-
-
-
- Navigation is specified using url property for external links and with routerLink for internal ones. If a menuitem has an active route, p-menuitem-link-active style class is added as an indicator. Active route link can
- be configured with routerLinkActiveOptions property of MenuItem API.
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Router } from '@angular/router';
-import { Menu } from 'primeng/menu';
-
-@Component({
- selector: 'menu-router-demo',
- templateUrl: './menu-router-demo.html',
- standalone: true,
- imports: [Menu]
-})
-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/apps/showcase/src/app/showcase/doc/menu/templatedoc.ts b/apps/showcase/src/app/showcase/doc/menu/templatedoc.ts
deleted file mode 100644
index 9d3712e98ec..00000000000
--- a/apps/showcase/src/app/showcase/doc/menu/templatedoc.ts
+++ /dev/null
@@ -1,344 +0,0 @@
-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 }}
-
-
-
-
-
-
-
- Amy Elsner
- Admin
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- PRIMEAPP
-
-
-
-
- {{ item.label }}
-
-
-
-
-
-
-
- Amy Elsner
- Admin
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
- PRIMEAPP
-
-
-
- {{ item.label }}
-
-
-
-
-
-
-
- Amy Elsner
- Admin
-
-
-
-
-
- Menubar requires nested menuitems as its model.
-
-
-
- The command property defines the callback to run when an item is activated by click or a key event.
-
-
-
- Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Custom content can be placed inside the menubar using the start and end templates.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Message component requires a content to display.
-
-
- Message Content `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { Message } from 'primeng/message';
-
-@Component({
- selector: 'message-basic-demo',
- templateUrl: './message-basic-demo.html',
- standalone: true,
- imports: [Message]
-})
-export class MessageBasicDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/message/dynamicdoc.ts b/apps/showcase/src/app/showcase/doc/message/dynamicdoc.ts
deleted file mode 100644
index e0498c8ddb9..00000000000
--- a/apps/showcase/src/app/showcase/doc/message/dynamicdoc.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Component, signal } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'dynamic-doc',
- template: `
-
- Multiple messages can be displayed using the standard for block.
-
-
-
-
- @for (message of messages(); track message; let first = $first) {
-
- }
-
-
([]);
-
- code: Code = {
- basic: `
-
- @for (message of messages(); track message; let first = $first) {
-
- }
-
-
-
- @for (message of messages(); track message; let first = $first) {
-
- }
-
-
([]);
-
- addMessages() {
- this.messages.set([
- { severity: 'info', content: 'Dynamic Info Message' },
- { severity: 'success', content: 'Dynamic Success Message' },
- { severity: 'warn', content: 'Dynamic Warn Message' },
- ]);
- }
-
- clearMessages() {
- this.messages.set([]);
- }
-}`
- };
-
- clearMessages() {
- this.messages.set([]);
- }
-
- addMessages() {
- this.messages.set([
- { severity: 'info', content: 'Dynamic Info Message' },
- { severity: 'success', content: 'Dynamic Success Message' },
- { severity: 'warn', content: 'Dynamic Warn Message' }
- ]);
- }
-}
diff --git a/apps/showcase/src/app/showcase/doc/message/icondoc.ts b/apps/showcase/src/app/showcase/doc/message/icondoc.ts
deleted file mode 100644
index 73258923891..00000000000
--- a/apps/showcase/src/app/showcase/doc/message/icondoc.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'icon-doc',
- template: `
-
- The severity option specifies the type of the message.
-
-
-
-
-
-
- How may I help you?
-
-
-
-
- How may I help you?
- `,
- html: `
-
-
-
-
- How may I help you?
-
-
- Messages can disappear automatically by defined the life in milliseconds.
-
-
-
- @if (visible()) {
-
Auto disappear message
- }
-
Auto disappear message `,
-
- html: `
-
- @if (visible()) {
-
Auto disappear message
- }
-
- Configure the variant value as outlined for messages with borders and no background.
-
-
-
Success Message
-
Info Message
-
Warn Message
-
Error Message
-
Secondary Message
-
Contrast Message
-
Success Message
-Info Message
-Warn Message
-Error Message
-Secondary Message
-Contrast Message `,
-
- html: `
-
Success Message
-
Info Message
-
Warn Message
-
Error Message
-
Secondary Message
-
Contrast Message
-
- The severity option specifies the type of the message.
-
-
-
Success Message
-
Info Message
-
Warn Message
-
Error Message
-
Secondary Message
-
Contrast Message
-
Success Message
-Info Message
-Warn Message
-Error Message
-Secondary Message
-Contrast Message `,
- html: `
-
Success Message
-
Info Message
-
Warn Message
-
Error Message
-
Secondary Message
-
Contrast Message
-
- Message provides small and large sizes as alternatives to the base.
-
-
-
Small Message
-
Normal Message
-
Large Message
-
Small Message
-Normal Message
-Large Message `,
-
- html: `
-
Small Message
-
Normal Message
-
Large Message
-
- MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem .
-
-
-
- Icons can be displayed next to the labels instead of the default marker.
-
-
-
-
- The position of the labels relative to the meters is defined using the labelPosition property. The default orientation of the labels is horizontal, and the vertical alternative is available through the
- labelOrientation option.
-
-
-
-
- Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively.
-
-
-
- Adding more items to the array displays the meters in a group.
-
-
-
- MeterGroup provides templating support for labels, meter items, and content around the meters.
-
-
-
-
-
-
-
-
-
- {{ meterItem.label }}
- {{ meterItem.value }}%
-
-
-
-
-
-
-
-
-
-
- Storage
- {{ totalPercent }}%
- 1TB
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ meterItem.label }}
- {{ meterItem.value }}%
-
-
-
-
-
-
-
-
-
-
- Storage
- {{ totalPercent }}%
- 1TB
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
- {{ meterItem.label }}
- {{ meterItem.value }}%
-
-
-
-
-
-
-
-
-
-
- Storage
- {{ totalPercent }}%
- 1TB
-
-
-
-
-
-
-
- Layout of the MeterGroup is configured with the orientation property that accepts either horizontal or vertical as available options.
-
-
-
-
- Screen Reader
-
- Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The multiselect component has a combobox role in addition to aria-haspopup and aria-expanded attributes.
- The relation between the combobox and the popup is created with aria-controls attribute that refers to the id of the popup listbox.
-
- The popup listbox uses listbox as the role with aria-multiselectable enabled. Each list item has an option role along with aria-label , aria-selected and aria-disabled attributes.
-
-
- Checkbox component at the header uses a hidden native checkbox element internally that is only visible to screen readers. Value to read is defined with the selectAll and unselectAll keys of the aria property from
- the locale API.
-
-
- If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element.
-
- Close button uses close key of the aria property from the locale API as the aria-label by default, this can be overriden with the closeButtonProps .
-
-
-
-
-
Closed State Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the multiselect element.
-
-
-
- space
-
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
-
-
- down arrow
-
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
-
-
- up arrow
-
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
-
-
-
-
-
Popup Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.
-
-
- shift + tab Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.
-
-
-
- enter
-
- Toggles the selection state of the focused option.
-
-
-
- space
-
- Toggles the selection state of the focused option.
-
-
-
- escape
-
- Closes the popup, moves focus to the multiselect element.
-
-
-
- down arrow
-
- Moves focus to the next option, if there is none then visual focus does not change.
-
-
-
- up arrow
-
- Moves focus to the previous option, if there is none then visual focus does not change.
-
-
-
- home
-
- Moves focus to the first option.
-
-
-
- end
-
- Moves focus to the last option.
-
-
-
- any printable character
-
- Moves focus to the option whose label starts with the characters being typed if dropdown is not editable.
-
-
-
-
-
-
Toggle All Checkbox Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- space
-
- Toggles the checked state.
-
-
-
- escape
-
- Closes the popup.
-
-
-
-
-
-
Filter Input Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Closes the popup and moves focus to the multiselect element.
-
-
-
- escape
-
- Closes the popup and moves focus to the multiselect element.
-
-
-
-
-
-
Close Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Closes the popup and moves focus to the multiselect element.
-
-
-
- space
-
- Closes the popup and moves focus to the multiselect element.
-
-
-
- escape
-
- Closes the popup and moves focus to the multiselect element.
-
-
-
-
-
Options
-
-
- MultiSelect is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively.
- Default property name for the optionLabel is label and value for the optionValue . If optionValue is omitted and the object has no value property, the object itself becomes the value of an
- option. Note that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary.
-
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
- MultiSelect provides built-in filtering that is enabled by adding the filter property.
-
-
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Options can be grouped when a nested data structures is provided.
-
-
-
-
-
-
-
{{ group.label }}
-
-
-
-
-
-
-
{{ group.label }}
-
- `,
-
- html: `
-
-
-
-
-
{{ group.label }}
-
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- Cities
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MultiSelectModule } from 'primeng/multiselect';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-interface City {
- name: string,
- code: string
-}
-
-@Component({
- selector: 'multi-select-iftalabel-demo',
- templateUrl: './multi-select-iftalabel-demo.html',
- standalone: true,
- imports: [FormsModule, MultiSelectModule, IftaLabelModule]
-})
-export class MultiSelectIftalabelDemo 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' },
- ];
- }
-}`
- };
-
- 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/apps/showcase/src/app/showcase/doc/multiselect/importdoc.ts b/apps/showcase/src/app/showcase/doc/multiselect/importdoc.ts
deleted file mode 100644
index c0a27a80d94..00000000000
--- a/apps/showcase/src/app/showcase/doc/multiselect/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'multi-select-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- Loading state can be used loading property.
-
-
-
- MultiSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- ([{ name: 'Istanbul', code: 'IST' }])
- });
- }
-
- code: Code = {
- basic: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-
-interface City {
- name: string,
- code: string
-}
-
-@Component({
- selector: 'multi-select-reactive-forms-demo',
- templateUrl: './multi-select-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, MultiSelectModule]
-})
-export class MultiSelectReactiveFormsDemo implements OnInit {
- cities!: City[];
-
- formGroup!: FormGroup;
-
- ngOnInit() {
- this.cities = [
- { name: 'New York', code: 'NY' },
- { name: 'Rome', code: 'RM' },
- { name: 'London', code: 'LDN' },
- { name: 'Istanbul', code: 'IST' },
- { name: 'Paris', code: 'PRS' }
- ];
-
- this.formGroup = new FormGroup({
- selectedCities: new FormControl([{ name: 'Istanbul', code: 'IST' }])
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/multiselect/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/multiselect/sizesdoc.ts
deleted file mode 100644
index b844fb8ea2c..00000000000
--- a/apps/showcase/src/app/showcase/doc/multiselect/sizesdoc.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-
-interface City {
- name: string;
- code: string;
-}
-
-@Component({
- selector: 'sizes-doc',
- template: `
-
- MultiSelect provides small and large sizes as alternatives to the base.
-
-
-
- Available options and the selected options support templating with pTemplate properties respectively. In addition, header, footer and filter sections can be templated as well.
-
-
-
-
-
-
-
{{ country.name }}
-
-
-
-
-
-
- Available Countries
-
-
-
-
-
-
-
-
-
-
{{ country.name }}
-
-
-
-
-
-
- Available Countries
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
{{ country.name }}
-
-
-
-
-
-
- Available Countries
-
-
-
-
-
-
-
- VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance
- issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item.
-
-
-
-
-
-
- `,
-
- html: ``,
-
- 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',
- standalone: true,
- imports: [FormsModule, MultiSelectModule]
-})
-export class MultiSelectVirtualScrollDemo {
- @ViewChild('ms') ms: MultiSelect;
-
- items = Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i }))
-
- selectedItems!: any[];
-
- selectAll: boolean = false;
-
- onSelectAllChange(event) {
- this.selectedItems = event.checked ? [...this.ms.visibleOptions()] : [];
- this.selectAll = event.checked;
- }
-
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/orderlist/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/orderlist/accessibilitydoc.ts
deleted file mode 100644
index 7b678355695..00000000000
--- a/apps/showcase/src/app/showcase/doc/orderlist/accessibilitydoc.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'order-list-accessibility-doc',
- template: `
- Screen Reader
-
- Value to describe the source listbox and target listbox can be provided with sourceListProps and targetListProps by passing aria-labelledby or aria-label props. The list elements has a listbox role with
- the aria-multiselectable attribute. Each list item has an option role with aria-selected and aria-disabled as their attributes.
-
-
- Controls buttons are button elements with an aria-label that refers to the aria.moveTop , aria.moveUp , aria.moveDown , aria.moveBottom ,aria.moveTo , aria.moveAllTo ,
- aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps , moveUpButtonProps , moveDownButtonProps ,
- moveToButtonProps , moveAllToButtonProps , moveFromButtonProps , moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.
-
-
- OrderList Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- tab Moves focus to the first selected option, if there is none then first option receives the focus.
-
-
- up arrow Moves focus to the previous option.
-
-
- down arrow Moves focus to the next option.
-
-
- enter Toggles the selected state of the focused option.
-
-
- space Toggles the selected state of the focused option.
-
-
- home Moves focus to the first option.
-
-
- end Moves focus to the last option.
-
-
- shift + down arrow Moves focus to the next option and toggles the selection state.
-
-
- shift + up arrow Moves focus to the previous option and toggles the selection state.
-
-
- shift + space Selects the items between the most recently selected option and the focused option.
-
-
- control + shift + home Selects the focused options and all the options up to the first one.
-
-
- control + shift + end Selects the focused options and all the options down to the first one.
-
-
- control + a Selects all options.
-
-
-
-
Buttons Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- enter Executes button action.
-
-
- space Executes button action.
-
-
-
-
`
-})
-export class AccessibilityDoc {
- code: Code = {
- html: `Options
-
- 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.
-
-
-
-
- {{ option.name }}
-
-
-
-
- {{ option.name }}
-
- `,
-
- html: `
-
-
- {{ option.name }}
-
-
-
- Items can be reordered using drag and drop by enabling dragdrop property. Depends on @angular/cdk package.
-
-
-
-
-
-
-
-
{{ product.name }}
-
- {{ product.category }}
-
-
-
{{ '$' + product.price }}
-
-
-
-
-
-
-
-
{{ product.name }}
-
-
- {{ product.category }}
-
-
-
-
- {{ '$' + product.price }}
-
-
- `,
-
- html: `
-
-
-
-
-
-
{{ product.name }}
-
-
- {{ product.category }}
-
-
-
-
- {{ '$' + product.price }}
-
-
-
-
- Filter value is checked against the property of an object configured with the filterBy property
-
-
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
-
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
- `,
-
- html: `
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
-
-
- For custom content support define an option template that gets the item instance as a parameter. In addition header template is provided for further customization.
-
-
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
-
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
- `,
-
- html: `
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
-
-
- OrganizationChart requires a collection of TreeNode instances as a value .
-
-
-
- Custom content instead of a node label is defined using the pTemplate property.
-
-
-
-
-
-
-
{{ node.label }}
-
-
-
-
-
-
-
{{ node.label }}
-
- `,
-
- html: `
-
-
-
-
-
{{ node.label }}
-
-
-
-
- Screen Reader
-
- Overlay component uses dialog role and since any attribute is passed to the root element you may define attributes like aria-label or aria-labelledby to describe the popup contents. In addition
- aria-modal is added since focus is kept within the popup.
-
-
- It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding
- tabIndex would be necessary. Overlay adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined.
-
- Overlay Keyboard Support
-
- When the popup gets opened, the first focusable element receives the focus and this can be customized by adding
- autofocus to an element within the popup.
-
-
-
-
-
- Key
- Function
-
-
-
-
- tab Moves focus to the next the focusable element within the popup.
-
-
- shift + tab Moves focus to the previous the focusable element within the popup.
-
-
- escape Closes the popup and moves focus to the trigger.
-
-
-
-
Close Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- enter Closes the popup and moves focus to the trigger.
-
-
- space Closes the popup and moves focus to the trigger.
-
-
-
-
-
- The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.
- `
-})
-export class AutoZIndexDoc {}
diff --git a/apps/showcase/src/app/showcase/doc/overlay/basezindexdoc.ts b/apps/showcase/src/app/showcase/doc/overlay/basezindexdoc.ts
deleted file mode 100644
index 55fab4e3a25..00000000000
--- a/apps/showcase/src/app/showcase/doc/overlay/basezindexdoc.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { AppDocSectionTextComponent } from '@layout/doc/app.docsectiontext.component';
-
-@Component({
- selector: 'base-zindex-doc',
- template: `
- The baseZIndex is base zIndex value to use in layering. Its default value is 0.
- `
-})
-export class BaseZIndexDoc {}
diff --git a/apps/showcase/src/app/showcase/doc/overlay/basicdoc.ts b/apps/showcase/src/app/showcase/doc/overlay/basicdoc.ts
deleted file mode 100644
index f8c05ae7979..00000000000
--- a/apps/showcase/src/app/showcase/doc/overlay/basicdoc.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
- Overlay is a container to display content in an overlay window. All the options mentioned above can be used as props for this component.
-
-
-
- Content
- `,
- html: `
-`,
- typescript: `
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'overlay-basic-demo',
- templateUrl: './overlay-basic-demo.html'
-})
-export class OverlayBasicDemo {
- overlayVisible: boolean = false;
-
- toggle() {
- this.overlayVisible = !this.overlayVisible;
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/overlay/hideonescapedoc.ts b/apps/showcase/src/app/showcase/doc/overlay/hideonescapedoc.ts
deleted file mode 100644
index cab1e2091c6..00000000000
--- a/apps/showcase/src/app/showcase/doc/overlay/hideonescapedoc.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component, Input, ViewChild } from '@angular/core';
-import { AppDocSectionTextComponent } from '@layout/doc/app.docsectiontext.component';
-
-@Component({
- selector: 'hide-on-escape-doc',
- template: `
- The hideOnEscape determines to hide the overlay when escape key pressed. Accepts boolean, default value is false .
- `
-})
-export class HideOnEscapeDoc {}
diff --git a/apps/showcase/src/app/showcase/doc/overlay/importdoc.ts b/apps/showcase/src/app/showcase/doc/overlay/importdoc.ts
deleted file mode 100644
index ffb29c1f504..00000000000
--- a/apps/showcase/src/app/showcase/doc/overlay/importdoc.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'import-doc',
- template: `
- It is the option used to determine in which mode it should appear according to the given media or breakpoint .
-
- Valid values of the direction property would be;
-
-
- center (default)
- top
- top-start
- top-end
- bottom
- bottom-start
- bottom-end
- left
- left-start
- left-end
- right
- right-start
- right-end
-
-
- The target is used to detect the element that will be used to position the overlay. Valid values would be;
-
-
-
- @prev (default)
- @next
- @parent
- @grandparent
- Use CSS selector
- Use () => HTMLElement
-
-
- Content can be customized with the content template.
-
-
-
-
- Content - {{ option.mode }}
-
-
-
- Content - {{option.mode}}
-
- `,
- html: `
-
-
-
-
- Content - {{option.mode}}
-
-
-
- Transition options of the show or hide animation. The default value of showTransitionOptions is '.12s cubic-bezier(0, 0, 0.2, 1)' and the default value of hideTransitionOptions is '.1s linear'.
- `
-})
-export class TransitionOptionsDoc {}
diff --git a/apps/showcase/src/app/showcase/doc/paginator/basicdoc.ts b/apps/showcase/src/app/showcase/doc/paginator/basicdoc.ts
deleted file mode 100644
index e6333c8fa2c..00000000000
--- a/apps/showcase/src/app/showcase/doc/paginator/basicdoc.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-interface PageEvent {
- first: number;
- rows: number;
- page: number;
- pageCount: number;
-}
-
-@Component({
- selector: 'basic-doc',
- template: `
-
-
- Paginator is used as a controlled component with first , rows and onPageChange properties to manage the first index and number of records to display per page. Total number of records need to be with
- totalRecords property. Default template includes a dropdown to change the rows so rowsPerPageOptions is also necessary for the dropdown options.
-
-
-
-
- Templating allows overriding the default content of the UI elements by defining callbacks using the element name.
-
-
-
- A simple Panel is created with a header property along with the content as children.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
- Lorem ipsum dolor sit amet...
-
- `,
-
- 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.
-
-
-
- Header and Footers sections can be customized using header and footer templates.
-
-
-
-
-
-
-
-
-
-
Updated 2 hours ago
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
-
-
-
-
-
-
Updated 2 hours ago
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
- occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
Updated 2 hours ago
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
- aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
- aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
- occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
- Content of the panel can be expanded and collapsed using toggleable option, default state is defined with collapsed option. By default, toggle icon is used to toggle the contents whereas setting toggler to "header" enables
- clicking anywhere in the header to trigger a toggle.
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
-
- Lorem ipsum dolor sit amet...
-
- `,
-
- 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.
-
-
-
- PanelMenu requires a collection of menuitems as its model .
-
-
-
- The command property defines the callback to run when an item is activated by click or a key event.
-
-
-
- Menu items can be controlled programmatically.
-
-
-
- Only one single root menuitem can be active by default, enable multiple property to be able to open more than one items.
-
-
-
- Items with navigation are defined with templating to be able to use a routerLink directive, an external link or programmatic navigation.
-
-
-
-
-
-
- {{ item.label }}
-
-
-
-
- {{ item.label }}
-
-
-
- {{ item.label }}
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MenuItem, MessageService } from 'primeng/api';
-import { PanelMenu } from 'primeng/panelmenu';
-import { Router } from '@angular/router';
-
-@Component({
- selector: 'panel-menu-router-demo',
- templateUrl: './panel-menu-router-demo.html',
- standalone: true,
- imports: [PanelMenu],
- 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/apps/showcase/src/app/showcase/doc/panelmenu/templatedoc.ts b/apps/showcase/src/app/showcase/doc/panelmenu/templatedoc.ts
deleted file mode 100644
index c929ccd864d..00000000000
--- a/apps/showcase/src/app/showcase/doc/panelmenu/templatedoc.ts
+++ /dev/null
@@ -1,252 +0,0 @@
-import { 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 }}
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { PanelMenu } from 'primeng/panelmenu';
-import { BadgeModule } from 'primeng/badge';
-import { Ripple } from 'primeng/ripple';
-import { CommonModule } from '@angular/common';
-
-@Component({
- selector: 'panel-menu-template-demo',
- templateUrl: './panel-menu-template-demo.html',
- standalone: true,
- imports: [PanelMenu, BadgeModule, Ripple, CommonModule]
-})
-export class PanelMenuTemplateDemo implements OnInit {
- items: MenuItem[];
-
- ngOnInit() {
- this.items = [
- {
- label: 'Mail',
- icon: 'pi pi-envelope',
- badge: '5',
- 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/apps/showcase/src/app/showcase/doc/password/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/password/accessibilitydoc.ts
deleted file mode 100644
index 65722572009..00000000000
--- a/apps/showcase/src/app/showcase/doc/password/accessibilitydoc.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'password-accessibility-doc',
- template: `
-
- Screen Reader
-
- Value to describe the component can either be provided via label tag combined with id prop or using ariaLabelledBy , ariaLabel props. Screen reader is notified about the changes to the strength of the
- password using a section that has aria-live while typing.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the input.
-
-
-
- escape
-
- Hides the strength meter if open.
-
-
-
-
-
Password
-Password
-
- Two-way value binding is defined using ngModel .
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- Password
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { PasswordModule } from 'primeng/password';
-import { FormsModule } from '@angular/forms';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-@Component({
- selector: 'password-iftalabel-demo',
- templateUrl: './password-iftalabel-demo.html',
- standalone: true,
- imports: [FormsModule, PasswordModule, IftaLabelModule]
-})
-export class PasswordIftaLabelDemo {
- value!: string;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/password/importdoc.ts b/apps/showcase/src/app/showcase/doc/password/importdoc.ts
deleted file mode 100644
index b614db17878..00000000000
--- a/apps/showcase/src/app/showcase/doc/password/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'password-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
-
- Labels are translated at component level by promptLabel , weakLabel , mediumLabel and strongLabel properties. In order to apply global translations for all Password components in the application, refer to the
- locale
-
-
-
-
- Password can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- Password provides small and large sizes as alternatives to the base.
-
-
-
- 3 templates are included to customize the overlay. These are header , content and footer . Note that content overrides the default meter.
-
-
-
-
- Pick a password
-
-
-
- At least one lowercase
- At least one uppercase
- At least one numeric
- Minimum 8 characters
-
-
-
-
-
- Pick a password
-
-
-
- At least one lowercase
- At least one uppercase
- At least one numeric
- Minimum 8 characters
-
-
- `,
-
- html: `
-
-
- Pick a password
-
-
-
- At least one lowercase
- At least one uppercase
- At least one numeric
- Minimum 8 characters
-
-
-
-
- Screen Reader
-
- Value to describe the source listbox and target listbox can be provided with ariaLabelledBy or ariaLabel props. The list elements has a listbox role with the aria-multiselectable attribute. Each list item has
- an option role with aria-selected and aria-disabled as their attributes.
-
-
- Controls buttons are button elements with an aria-label that refers to the aria.moveTop , aria.moveUp , aria.moveDown , aria.moveBottom ,aria.moveTo , aria.moveAllTo ,
- aria.moveFrom and aria.moveAllFrom properties of the locale API by default, alternatively you may usemoveTopButtonProps , moveUpButtonProps , moveDownButtonProps ,
- moveToButtonProps , moveAllToButtonProps , moveFromButtonProps , moveFromButtonProps and moveAllFromButtonProps to customize the buttons like overriding the default aria-label attributes.
-
-
- PickList Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- tab Moves focus to the first selected option, if there is none then first option receives the focus.
-
-
- up arrow Moves focus to the previous option.
-
-
- down arrow Moves focus to the next option.
-
-
- enter Toggles the selected state of the focused option.
-
-
- space Toggles the selected state of the focused option.
-
-
- home Moves focus to the first option.
-
-
- end Moves focus to the last option.
-
-
- shift + down arrow Moves focus to the next option and toggles the selection state.
-
-
- shift + up arrow Moves focus to the previous option and toggles the selection state.
-
-
- shift + space Selects the items between the most recently selected option and the focused option.
-
-
- control + shift + home Selects the focused options and all the options up to the first one.
-
-
- control + shift + end Selects the focused options and all the options down to the first one.
-
-
- control + a Selects all options.
-
-
-
-
Buttons Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
- enter Executes button action.
-
-
- space Executes button action.
-
-
-
-
`
-})
-export class AccessibilityDoc {
- code: Code = {
- html: `Options
-
-
- PickList is used as a controlled input with source and target properties. Content of a list item needs to be defined with the pTemplate property that receives an object in the list as parameter. Drag & drop
- functionality depends on @angular/cdk package.
-
-
-
-
-
- {{ item.name }}
-
-
-
-
- {{ item.name }}
-
- `,
-
- html: `
-
-
- {{ item.name }}
-
-
-
- Filter value is checked against the property of an object configured with the filterBy property.
-
-
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
-
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
- `,
-
- html: `
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
-
-
- For custom content support define an option template that gets the item instance as a parameter. In addition sourceheader and targetheader templates are provided for further customization.
-
-
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
-
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
- `,
-
- html: `
-
-
-
-
-
- {{ option.name }}
- {{ option.category }}
-
-
{{ '$' + option.price }}
-
-
-
- Popover is accessed via its reference and visibility is controlled using toggle , show and hide methods with an event of the target.
-
-
-
-
-
-
-
Share this document
-
-
-
-
-
-
-
-
Team Members
-
-
-
-
{{ member.name }}
-
{{ member.email }}
-
- {{ member.role }}
-
-
-
-
-
-
-
-
-
Share this document
-
-
-
-
-
-
-
-
Team Members
-
-
-
-
{{ member.name }}
-
{{ member.email }}
-
- {{ member.role }}
-
-
-
-
-
`,
-
- html: `
-
-
-
-
-
Share this document
-
-
-
-
-
-
-
-
Team Members
-
-
-
-
{{ member.name }}
-
{{ member.email }}
-
- {{ member.role }}
-
-
-
-
-
-
- Place the Popover outside of the data iteration components to avoid rendering it multiple times.
-
-
-
-
-
- Id
- Code
- Name
- Price
- Image
- Details
-
-
-
-
- {{ product.id }}
- {{ product.code }}
- {{ product.name }}
- $ {{ product.price }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ selectedProduct.category }}
-
{{ selectedProduct.name }}
-
-
-
- {{ selectedProduct.rating }}
-
-
-
-
-
-
-
-
-
-
- Id
- Code
- Name
- Price
- Image
- Details
-
-
-
-
- {{ product.id }}
- {{ product.code }}
- {{ product.name }}
- $ {{ product.price }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{
- selectedProduct.category
- }}
-
{{ selectedProduct.name }}
-
-
-
- {{ selectedProduct.rating }}
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
- Id
- Code
- Name
- Price
- Image
- Details
-
-
-
-
- {{ product.id }}
- {{ product.code }}
- {{ product.name }}
- $ {{ product.price }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{
- selectedProduct.category
- }}
-
{{ selectedProduct.name }}
-
-
-
- {{ selectedProduct.rating }}
-
-
-
-
-
-
-
-
-
- show method takes two parameters, first one is the event and it is mandatory. By default the target component to align the overlay is the event target, if you'd like to align it to another element, provide it as the second
- parameter target .
-
-
-
-
-
- Target Element
-
-
-
-
- Target Element
-
-
- `,
-
- html: `
-
-
-
- Target Element
-
-
-
-
- Content of the OverlayPanel is defined by content template.
-
-
-
-
- Custom Content
-
-
-
-
-
- Custom Content
-
-
-
-
-
- Custom Content
-
-
-
-
-
- Screen Reader
-
- ProgressBar components uses progressbar role along with aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined usingaria-labelledby and
- aria-label props.
-
-
-
-
-
-
Keyboard Support
-
Not applicable.
-
Status
-
- ProgressBar is used with the value property.
-
-
-
- Value is reactive so updating it dynamically changes the bar as well.
-
-
-
- For progresses with no value to track, set the mode property to indeterminate .
-
-
-
- content template allows displaying custom content inside the progressbar.
-
-
-
-
- {{ value }}/100
-
-
-
-
- {{value}}/100
-
- `,
- html: `
-
-
- {{value}}/100
-
-
-
-
- Screen Reader
- ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.
-
-
-
-
-
Keyboard Support
-
Component does not include any interactive elements.
-
- An infinite spin animation is displayed by default.
-
-
-
- ProgressSpinner can be customized with styling property like styleClass , strokeWidth and fill .
-
-
-
-
- Screen Reader
-
- RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using
- ariaLabelledBy , ariaLabel props.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.
-
-
-
-
- left arrow
- up arrow
-
-
- Moves focus to the previous radio button, if there is none then last radio button receives the focus.
-
-
-
-
- right arrow
- down arrow
-
-
- Moves focus to the next radio button, if there is none then first radio button receives the focus.
-
-
-
- space
-
- If the focused radio button is unchecked, changes the state to checked.
-
-
-
-
-
One
-Two
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- RadioButtons can be generated using a list of values.
-
-
-
-
-
-
{{ category.name }}
-
-
-
-
-
-
{{ category.name }}
-
-
-
-
-
-
{{ category.name }}
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
- RadioButton is used as a controlled input with value and ngModel properties.
-
-
-
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- RadioButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- RadioButton provides small and large sizes as alternatives to the base.
-
-
-
- Two-way value binding is defined using ngModel .
-
-
-
- When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
-
-
-
- Rating can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- When readOnly present, value cannot be edited.
-
-
-
- Templating allows customizing the content where the icon instance is available as the implicit variable.
-
-
-
-
-
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { Rating } from 'primeng/rating';
-
-@Component({
- selector: 'rating-template-demo',
- templateUrl: './rating-template-demo.html',
- standalone: true,
- imports: [FormsModule, Rating]
-})
-export class RatingTemplateDemo {
- value!: number;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/ripple/customdoc.ts b/apps/showcase/src/app/showcase/doc/ripple/customdoc.ts
deleted file mode 100644
index e502ef872f0..00000000000
--- a/apps/showcase/src/app/showcase/doc/ripple/customdoc.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'custom-doc',
- template: `
-
- Styling Demo Content.
-
-
-
Ripple option at the
-
-
-
Green
-
Orange
-
Purple
-
-
- Green
-
-
- Orange
-
-
- Purple
-
`,
- html: `
-
- Green
-
-
- Orange
-
-
- Purple
-
-
-
- VirtualScroller requires items as the data to display, itemSize for the dimensions of an item and item template are required on component. In addition, an initial array is required based on the total number of
- items to display. Size of the viewport is configured using scrollWidth , scrollHeight properties directly or with CSS width and height styles.
-
-
-
-
-
-
- {{ item }}
-
-
-
-
-
-
- {{ item }}
-
-
- `,
-
- html: `
-
-
-
- {{ item }}
-
-
-
-
- Scroll delay is adjusted by using delay property.
-
-
-
-
No Delay
-
-
-
- {{ item }}
-
-
-
-
-
-
150ms
-
-
-
- {{ item }}
-
-
-
-
-
-
500ms
-
-
-
- {{ item }}
-
-
-
-
-
-
-
- {{ item }}
-
-
-
-
-
-
-
- {{ item }}
-
-
-
-
-
-
-
- {{ item }}
-
-
- `,
-
- html: `
-
-
No Delay
-
-
-
- {{ item }}
-
-
-
-
-
-
150ms
-
-
-
- {{ item }}
-
-
-
-
-
-
500ms
-
-
-
- {{ item }}
-
-
-
-
-
- Setting orientation to horizontal enables scrolling horizontally. In this case, the itemSize should refer to the width of an item.
-
-
-
-
-
- {{ item }}
-
-
-
-
-
-
- {{ item }}
-
-
- `,
-
- html: `
-
-
-
- {{ item }}
-
-
-
-
-
- Lazy mode is handy to deal with large datasets where instead of loading the entire data, small chunks of data are loaded on demand by invoking onLazyLoad callback everytime scrolling requires a new chunk. To implement lazy loading,
- enable
- lazy attribute, initialize your data as a placeholder with a length and finally implement a method callback using onLazyLoad that actually loads a chunk from a datasource. onLazyLoad gets an event object that contains
- information about the chunk of data to load such as the index and number of items to load. Notice that a new template called loadingItem is also required to display as a placeholder while the new items are being loaded.
-
-
-
-
-
-
- {{ item }}
-
-
-
-
-
-
- {{ item }}
-
-
- `,
-
- html: `
-
-
-
- {{ item }}
-
-
-
-
- Scroller content is customizable by using ng-template . Valid values are content , item , loader and loadericon
-
-
-
-
-
-
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}}
-
-
-
- `,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { Scroller } from 'primeng/scroller';
-import { Skeleton } from 'primeng/skeleton';
-
-@Component({
- selector: 'scroller-template-demo',
- templateUrl: './scroller-template-demo.html',
- styles: [
- \`:host ::ng-deep {
- .p-scroller-viewport {
- flex: none;
- }
-
- p-skeleton {
- width: 100%;
- }
- }\`
- ],
- standalone: true,
- imports: [Scroller, Skeleton]
-})
-export class ScrollerTemplateDemo implements OnInit {
- items!: string[];
-
- ngOnInit() {
- this.items = Array.from({ length: 1000 }).map((_, i) => \`Item #\${i}\`);
- }
-}`,
- scss: `
-:host ::ng-deep {
- .p-scroller-viewport {
- flex: none;
- }
-
- p-skeleton {
- width: 100%;
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/scrollpanel/basicdoc.ts b/apps/showcase/src/app/showcase/doc/scrollpanel/basicdoc.ts
deleted file mode 100644
index 73482bca226..00000000000
--- a/apps/showcase/src/app/showcase/doc/scrollpanel/basicdoc.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- ScrollPanel is defined using dimensions for the scrollable viewport.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
- Lorem ipsum dolor sit amet...
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
-
-
- At vero eos et accusamus et iusto odio dignissimos...
-
- `,
-
- 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.
-
-
-
- Scrollbar visuals can be styled for a unified look across different platforms.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
- ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
- officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit...
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
-
-
- At vero eos et accusamus et iusto odio dignissimos...
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit...
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
-
-
- At vero eos et accusamus et iusto odio dignissimos...
-
- `,
-
- 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.
-
-
- 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.
-
-
-
- ScrollTop listens window scroll by default.
-
-
-
Scroll down the page to display the ScrollTo component.
-
-
-
-
Scroll down the page to display the ScrollTo component.
-
-
-
-
- Screen Reader
-
- Value to describe the component can either be provided with ariaLabelledBy or ariaLabel props. The select element has a combobox role in addition to aria-haspopup and aria-expanded attributes. If the
- editable option is enabled aria-autocomplete is also added. The relation between the combobox and the popup is created with aria-controls and aria-activedescendant attribute is used to instruct screen reader which
- option to read during keyboard navigation within the popup list.
-
-
- The popup list has an id that refers to the aria-controls attribute of the combobox element and uses listbox as the role. Each list item has an option role, an id to match the
- aria-activedescendant of the input element along with aria-label , aria-selected and aria-disabled attributes.
-
-
- If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.
-
-
-
-
-
Closed State Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the select element.
-
-
-
- space
-
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
-
-
- down arrow
-
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
-
-
- up arrow
-
- Opens the popup and moves visual focus to the selected option, if there is none then last option receives the focus.
-
-
-
-
-
-
Popup Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.
-
-
- shift + tab Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.
-
-
-
- enter
-
- Selects the focused option and closes the popup.
-
-
-
- space
-
- Selects the focused option and closes the popup.
-
-
-
- escape
-
- Closes the popup, moves focus to the select element.
-
-
-
- down arrow
-
- Moves focus to the next option, if there is none then visual focus does not change.
-
-
-
- up arrow
-
- Moves focus to the previous option, if there is none then visual focus does not change.
-
-
-
- right arrow
-
- If the select is editable, removes the visual focus from the current option and moves input cursor to one character left.
-
-
-
- left arrow
-
- If the select is editable, removes the visual focus from the current option and moves input cursor to one character right.
-
-
-
- home
-
- If the select is editable, moves input cursor at the end, if not then moves focus to the first option.
-
-
-
- end
-
- If the select is editable, moves input cursor at the beginning, if not then moves focus to the last option.
-
-
-
- any printable character
-
- Moves focus to the option whose label starts with the characters being typed if select is not editable.
-
-
-
-
-
-
Filter Input Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Closes the popup and moves focus to the select element.
-
-
-
- escape
-
- Closes the popup and moves focus to the select element.
-
-
-
-
-
Options
-
-
- Select is used as a controlled component with ngModel property along with an options collection. Label and value of an option are defined with the optionLabel and optionValue properties respectively. Note
- that, when options are simple primitive values such as a string array, no optionLabel and optionValue would be necessary.
-
-
-
-
- An alternative way to highlight the selected option is displaying a checkmark instead.
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
- Select provides built-in filtering that is enabled by adding the filter property.
-
-
-
-
-
-
{{ selectedOption.name }}
-
-
-
-
-
-
-
-
-
-
{{ selectedOption.name }}
-
-
-
-
-
{{ country.name }}
-
- `,
-
- html: `
-
-
-
-
-
{{ selectedOption.name }}
-
-
-
-
-
{{ country.name }}
-
-
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Options can be grouped when a nested data structures is provided.
-
-
-
-
-
-
-
{{ group.label }}
-
-
-
-
-
-
-
{{ group.label }}
-
- `,
-
- html: `
-
-
-
-
-
{{ group.label }}
-
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- City
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { SelectModule } from 'primeng/select';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-interface City {
- name: string;
- code: string;
-}
-
-@Component({
- selector: 'select-iftalabel-demo',
- templateUrl: './select-iftalabel-demo.html',
- standalone: true,
- imports: [FormsModule, SelectModule, IftaLabelModule]
-})
-export class SelectIftaLabelDemo 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' },
- ];
- }
-}`
- };
-
- 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/apps/showcase/src/app/showcase/doc/select/importdoc.ts b/apps/showcase/src/app/showcase/doc/select/importdoc.ts
deleted file mode 100644
index 559559ab19a..00000000000
--- a/apps/showcase/src/app/showcase/doc/select/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'select-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- Loading state can be used loading property.
-
-
-
- Select can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- (null)
- });
- }
-
- code: Code = {
- basic: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { Select } from 'primeng/select';
-
-interface City {
- name: string;
- code: string;
-}
-
-@Component({
- selector: 'select-reactive-forms-demo',
- templateUrl: './select-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, Select]
-})
-export class SelectReactiveFormsDemo implements OnInit {
- cities: City[] | undefined;
-
- formGroup: FormGroup | 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' }
- ];
-
- this.formGroup = new FormGroup({
- selectedCity: new FormControl(null)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/select/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/select/sizesdoc.ts
deleted file mode 100644
index 1afbfe89e17..00000000000
--- a/apps/showcase/src/app/showcase/doc/select/sizesdoc.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-
-interface City {
- name: string;
- code: string;
-}
-
-@Component({
- selector: 'select-size-demo',
- template: `
-
- Select provides small and large sizes as alternatives to the base.
-
-
-
-
- Both the selected option and the options list can be templated to provide customizated representation. Use
- selectedItem template to customize the selected label display and the item template to change the content of the options in the select panel. In addition when grouping is enabled, group template is available to
- customize the option groups. All templates get the option instance as the default local template variable.
-
-
-
-
-
-
-
-
{{ selectedOption.name }}
-
-
-
-
-
{{ country.name }}
-
-
-
-
- Available Countries
-
-
-
-
-
-
-
-
-
-
{{ selectedOption.name }}
-
-
-
-
-
{{ country.name }}
-
-
-
-
- Available Countries
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
{{ selectedOption.name }}
-
-
-
-
-
{{ country.name }}
-
-
-
-
- Available Countries
-
-
-
-
-
-
-
- VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance
- issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item.
-
-
-
-
- SelectButton requires a value to bind and a collection of options.
-
-
-
- When disabled is present, the element cannot be edited and focused entirely. Certain options can also be disabled using the optionDisabled property.
-
-
-
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- SelectButton allows selecting only one item by default and setting multiple option enables choosing more than one item. In multiple case, model property should be an array.
-
-
-
- SelectButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- SelectButton provides small and large sizes as alternatives to the base.
-
-
-
- For custom content support define a ng-template with pTemplate where the local ng-template variable refers to an option in the options collection.
-
-
-
-
-
- `,
-
- html: ``,
-
- 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',
- standalone: true,
- imports: [FormsModule, SelectButtonModule]
-})
-export class SelectButtonTemplateDemo {
- value: any;
-
- justifyOptions: any[] = [
- { icon: 'pi pi-align-left', justify: 'Left' },
- { icon: 'pi pi-align-right', justify: 'Right' },
- { icon: 'pi pi-align-center', justify: 'Center' },
- { icon: 'pi pi-align-justify', justify: 'Justify' }
- ];
-
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/skeleton/datatabledoc.ts b/apps/showcase/src/app/showcase/doc/skeleton/datatabledoc.ts
deleted file mode 100644
index abbf89a9136..00000000000
--- a/apps/showcase/src/app/showcase/doc/skeleton/datatabledoc.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'datatable-doc',
- template: `
-
- Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
-
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
-
-
- `,
- html: `
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
-
-
-
-
- Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Screen Reader
-
- Slider element component uses slider role on the handle in addition to the aria-orientation , aria-valuemin , aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined
- using ariaLabelledBy and ariaLabel props.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the slider.
-
-
-
-
- left arrow
- up arrow
-
-
- Decrements the value.
-
-
-
-
- right arrow
- down arrow
-
-
- Increments the value.
-
-
-
- home
-
- Set the minimum value.
-
-
-
- end
-
- Set the maximum value.
-
-
-
- page up
-
- Increments the value by 10 steps.
-
-
-
- page down
-
- Decrements the value by 10 steps.
-
-
-
-
-
Number
-
- Two-way binding is defined using the standard ngModel directive.
-
-
-
- Image filter implementation using multiple sliders.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slider is connected to an input field using two-way binding.
-
-
-
- When range property is present, slider provides two handles to define two values. In range mode, value should be an array instead of a single value.
-
-
-
- Slider can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- Size of each movement is defined with the step property.
-
-
-
- Default layout of slider is horizontal , use orientation property for the alternative vertical mode.
-
-
-
- Screen Reader
-
- SpeedDial component renders a native button element that implicitly includes any passed prop. Text to describe the button can be defined with the aria-labelledby or aria-label props. Addititonally the button includes
- includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button.
-
-
- The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the button.
-
-
- Menu Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Toggles the visibility of the menu.
-
-
-
- space
-
- Toggles the visibility of the menu.
-
-
-
- down arrow
-
- Opens the menu and moves focus to the first item.
-
-
-
- up arrow
-
- Opens the menu and moves focus to the last item.
-
-
-
-
Menu Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Activates the menuitem, closes the menu and sets focus on the menu button.
-
-
-
- escape
-
- Closes the menu and sets focus on the menu button.
-
-
-
- arrow keys
-
- Navigates between the menu items.
-
-
-
- home
-
- Moves focus to the first item.
-
-
-
- end
-
- Moves focus to the last item.
-
-
-
-
- SpeedDial items are defined with the model property based on MenuModel API. Default orientation of the items is linear and direction property is used to define the position of the items related to the button.
-
-
-
- Adding mask property displays a modal layer behind the popup items.
-
-
-
-
- SpeedDial offers item customization with the item template that receives the menuitem instance from the model as a parameter. The button has its own button template, additional template named icon is provided to
- embed icon content for default button.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.label }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.label }}
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.label }}
-
-
-
-
-
-
- Screen Reader
-
- SplitButton component renders two native button elements, main button uses the label property to define aria-label by default which can be customized with buttonProps . Dropdown button requires an explicit definition to
- describe it using menuButtonProps option and also includes aria-haspopup , aria-expanded for states along with aria-controls to define the relation between the popup and the button.
-
-
- The popup overlay uses menu role on the list and each action item has a menuitem role with an aria-label as the menuitem label. The id of the menu refers to the aria-controls of the dropdown button.
-
-
- Main Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Activates the button.
-
-
-
- space
-
- Activates the button.
-
-
-
-
Menu Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Toggles the visibility of the menu.
-
-
-
- space
-
- Toggles the visibility of the menu.
-
-
-
- down arrow
-
- Opens the menu and moves focus to the first item.
-
-
-
- up arrow
-
- Opens the menu and moves focus to the last item.
-
-
-
-
Menu Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Actives the menuitem, closes the menu and sets focus on the menu button.
-
-
-
- escape
-
- Closes the menu and sets focus on the menu button.
-
-
-
- down arrow
-
- Moves focus to the next item, if it is the last one then first item receives the focus.
-
-
-
- up arrow
-
- Moves focus to the previous item, if it is the first one then last item receives the focus.
-
-
-
- home
-
- Moves focus to the first item.
-
-
-
- end
-
- Moves focus to the last item.
-
-
-
-
- SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
-
-
-
-
- When the disabled attribute is present, the element is uneditable and unfocused. Additionally, the disabled states of the button and menu button can be handled independently. The button is disabled when buttonDisabled is
- present, and the menu button is disabled when menuButtonDisabled is present.
-
-
-
-
- The buttons and menuitems have support to display icons.
-
-
-
- SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
-
-
-
- Outlined buttons display a border without a background initially.
-
-
-
- Raised buttons display a shadow to indicate elevation.
-
-
-
- Text buttons can be displayed as raised as well for elevation.
-
-
-
- Rounded buttons have a circular border radius.
-
-
-
- The severity property defines the type of button.
-
-
-
- SplitButton provides small and large sizes as alternatives to the standard.
-
-
-
- SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.
-
-
-
-
-
-
- PrimeNG
-
-
-
-
-
-
- PrimeNG
-
-
- `,
-
- html: `
-
-
-
-
- PrimeNG
-
-
-
-
- Text buttons are displayed as textual elements.
-
-
-
- Splitter requires two SplitterPanel components as children which are displayed horizontally by default.
-
-
-
-
- Panel 1
-
-
- Panel 2
-
-
-
-
- Panel 1
-
-
- Panel 2
-
- `,
-
- html: `
-
-
- Panel 1
-
-
- Panel 2
-
-
-
- Splitters can be combined to create advanced layouts.
-
-
-
-
- Panel 1
-
-
-
-
- Panel 2
-
-
-
-
- Panel 3
-
-
- Panel 4
-
-
-
-
-
-
-
-
-
- Panel 1
-
-
-
-
-
-
- Panel 2
-
-
-
-
-
-
- Panel 3
-
-
-
-
- Panel 4
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
- Panel 1
-
-
-
-
-
-
- Panel 2
-
-
-
-
-
-
- Panel 3
-
-
-
-
- Panel 4
-
-
-
-
-
-
-
-
- When no panelSizes are defined, panels are split 50/50, use the panelSizes property to give relative widths e.g. [25, 75].
-
-
-
-
- Panel 1
-
-
- Panel 2
-
-
-
-
- Panel 1
-
-
- Panel 2
-
- `,
-
- html: `
-
-
- Panel 1
-
-
- Panel 2
-
-
-
- Panels are displayed as stacked by setting the layout to vertical .
-
-
-
-
- Panel 1
-
-
- Panel 2
-
-
-
-
- Panel 1
-
-
- Panel 2
-
- `,
-
- html: `
-
-
- Panel 1
-
-
- Panel 2
-
-
-
- Stepper consists of a combination of StepList , Step , StepPanels and StepPanel components. The value property is essential for associating Step and StepPanel with each other.
-
-
-
-
- Header I
- Header II
- Header II
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Header I
- Header II
- Header II
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
- Header I
- Header II
- Header II
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- When linear property is set to true, current step must be completed in order to move to the next step.
-
-
-
-
- Header I
- Header II
- Header II
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Header I
- Header II
- Header II
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
- Header I
- Header II
- Header II
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Stepper provides various templating options to customize the default UI design.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Create your account
-
-
-
-
-
-
-
-
-
-
Choose your interests
-
-
-
-
-
-
-
-
Account created successfully
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Create your account
-
-
-
-
-
-
-
-
-
-
Choose your interests
-
-
-
-
-
-
-
-
Account created successfully
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Create your account
-
-
-
-
-
-
-
-
-
-
Choose your interests
-
-
-
-
-
-
-
-
Account created successfully
-
-
-
-
-
-
-
-
- Layout of the Stepper is configured with the orientation property that accepts horizontal and vertical as available options.
-
-
-
-
- Header I
-
-
-
-
-
-
-
-
-
- Header II
-
-
-
-
-
-
-
-
-
- Header III
-
-
-
-
-
-
-
-
-
-
- Header I
-
-
-
-
-
-
-
-
-
- Header II
-
-
-
-
-
-
-
-
-
- Header III
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
- Header I
-
-
-
-
-
-
-
-
-
- Header II
-
-
-
-
-
-
-
-
-
- Header III
-
-
-
-
-
-
-
-
-
- Steps requires a collection of menuitems as its model .
-
-
-
- Steps can be controlled programmatically using activeIndex property.
-
-
-
-
- Classes to apply during enter and leave animations are specified using the enterFromClass , enterActiveClass , enterToClass , leaveFromClass , leaveActiveClass ,leaveToClass properties. In addition
- in case the target is an overlay, hideOnOutsideClick would be handy to hide the target if outside of the popup is clicked, or enable hideOnEscape to close the popup by listening escape key.
-
-
-
-
- DataTable requires a collection to display along with column components for the representation of the data.
-
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
-
-
-
- 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 }}
-
-
-
-
- Columns can be grouped using rowspan and colspan properties.
-
-
-
-
-
-
- Product
- Sale Rate
-
-
- Sales
- Profits
-
-
- Last Year
- This Year
- Last Year
- This Year
-
-
-
-
- {{ sale.product }}
- {{ sale.lastYearSale }}%
- {{ sale.thisYearSale }}%
- {{ sale.lastYearProfit | currency: 'USD' }}
- {{ sale.thisYearProfit | currency: 'USD' }}
-
-
-
-
- Totals
- {{ lastYearTotal | currency: 'USD' }}
- {{ thisYearTotal | currency: 'USD' }}
-
-
-
-
-
-
-
- Product
- Sale Rate
-
-
- Sales
- Profits
-
-
- Last Year
- This Year
- Last Year
- This Year
-
-
-
-
- {{sale.product}}
- {{sale.lastYearSale}}%
- {{sale.thisYearSale}}%
- {{sale.lastYearProfit | currency: 'USD'}}
- {{sale.thisYearProfit | currency: 'USD'}}
-
-
-
-
- Totals
- {{lastYearTotal | currency: 'USD'}}
- {{thisYearTotal | currency: 'USD'}}
-
-
- `,
- html: `
-
-
-
- Product
- Sale Rate
-
-
- Sales
- Profits
-
-
- Last Year
- This Year
- Last Year
- This Year
-
-
-
-
- {{sale.product}}
- {{sale.lastYearSale}}%
- {{sale.thisYearSale}}%
- {{sale.lastYearProfit | currency: 'USD'}}
- {{sale.thisYearProfit | currency: 'USD'}}
-
-
-
-
- Totals
- {{lastYearTotal | currency: 'USD'}}
- {{thisYearTotal | currency: 'USD'}}
-
-
-
-
- This demo uses a multiselect component to implement toggleable columns.
-
-
-
-
-
-
-
-
- Code
-
- {{ col.header }}
-
-
-
-
-
- {{ product.code }}
-
- {{ product[col.field] }}
-
-
-
-
-
-
-
-
-
-
- Code
-
- {{col.header}}
-
-
-
-
-
- {{product.code}}
-
- {{product[col.field]}}
-
-
-
- `,
- html: `
-
-
-
-
-
- Code
-
- {{col.header}}
-
-
-
-
-
- {{product.code}}
-
- {{product[col.field]}}
-
-
-
-
-
-
- Table has exclusive integration with contextmenu component. In order to attach a menu to a table, add pContextMenuRow directive to the rows that can be selected with context menu, define a local template variable for the
- menu and bind it to the contextMenu property of the table. This enables displaying the menu whenever a row is right clicked. Optional pContextMenuRowIndex property is available to access the row index. A separate
- contextMenuSelection property is used to get a hold of the right clicked row. For dynamic columns, setting pContextMenuRowDisabled property as true disables context menu for that particular row.
-
-
-
-
-
-
-
-
- Code
- Name
- Category
- Price
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.price | currency: 'USD' }}
-
-
-
-
-
-
-
-
- Code
- Name
- Category
- Price
-
-
-
-
- {{product.code}}
- {{product.name}}
- {{product.category}}
- {{product.price |Â currency: 'USD'}}
-
-
-
-
-
-
-
-
- Code
- Name
- Category
- Price
-
-
-
-
- {{product.code}}
- {{product.name}}
- {{product.category}}
- {{product.price |Â currency: 'USD'}}
-
-
-
-
-
- Columns can be defined dynamically using the *ngFor directive.
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
- `,
- html: `
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
-
- 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
- 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: `
-
-
-
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
-
-
- Enabling showGridlines displays borders between cells.
-
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
-
-
-
- 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 }}
-
-
-
-
-
- Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking onLazyLoad callback everytime paging , sorting and filtering happens. Sample here loads
- the data from remote datasource efficiently using lazy loading. Also, the implementation of checkbox selection in lazy tables is left entirely to the user. Since the table component does not know what will happen to the data on
- the next page or whether there are instant data changes, the selection array can be implemented in several ways. One of them is as in the example below.
-
-
-
-
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ option.name }}
-
-
-
-
-
-
-
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
-
-
-
- Name
-
- Country
-
- Company
-
- Representative
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ option.name }}
-
-
-
-
-
-
-
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
- `,
- html: `
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ option.name }}
-
-
-
-
-
-
-
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
- Pagination is enabled by setting paginator property to true and defining a rows property to specify the number of rows per page. For server side pagination, see the lazy loading
- example.
-
-
-
-
-
-
-
- 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: `
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
- paginator localization information such as page numbers and rows per page options are defined with the
- paginatorLocale property which defaults to the user locale.
-
-
-
-
-
-
-
- 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: `
-
-
-
-
- Name
- Country
- Company
- Representative
-
-
-
-
- {{ customer.name }}
- {{ customer.country.name }}
- {{ customer.company }}
- {{ customer.representative.name }}
-
-
-
-
-
-
-
-
-
- Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding
- reorderableColumns property.
-
-
- Similarly, adding reorderableRows property enables draggable rows. For the drag handle a column needs to have rowReorder property and onRowReorder callback is required to control the state of the rows after
- reorder completes.
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
-
-
-
-
- {{col.header}}
-
-
-
-
-
-
-
-
- {{rowData[col.field]}}
-
-
-
- `,
- html: `
-
-
-
-
- {{col.header}}
-
-
-
-
-
-
-
-
- {{rowData[col.field]}}
-
-
-
-
-
- In addition to a regular table, alternatives with alternative sizes are available.
-
-
-
-
-
-
-
- Code
- Name
- Category
- Quantity
-
-
-
-
- {{ product.code }}
- {{ product.name }}
- {{ product.category }}
- {{ product.quantity }}
-
-
-
-
-
-
-
- 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 }}
-
-
-
-
- Custom content at header , body and footer sections are supported via templating.
-
-
-
-
-
-
-
-
-
- Name
- Image
- Price
- Category
- Reviews
- Status
-
-
-
-
- {{ product.name }}
-
-
- {{ product.price | currency: 'USD' }}
- {{ product.category }}
-
-
-
-
- In total there are {{ products ? products.length : 0 }} products.
-
-
-
-
-
-
-
-
- Name
- Image
- Price
- Category
- Reviews
- Status
-
-
-
-
- {{ product.name }}
-
-
- {{ product.price | currency: 'USD' }}
- {{ product.category }}
-
-
-
-
- In total there are {{ products ? products.length : 0 }} products.
- `,
- html: `
-
-
-
-
-
-
- Name
- Image
- Price
- Category
- Reviews
- Status
-
-
-
-
- {{ product.name }}
-
-
- {{ product.price | currency: 'USD' }}
- {{ product.category }}
-
-
-
-
- In total there are {{ products ? products.length : 0 }} products.
-
-
-
- VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also
- suggested to use the same virtualScrollItemSize value on the tr element inside the body template.
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
- `,
- html: `
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
-
- VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also
- suggested to use the same virtualScrollItemSize value on the tr element inside the body template.
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
- {{ rowData[col.field] }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{col.header}}
-
-
-
-
-
-
- {{rowData[col.field]}}
-
-
-
-
-
-
-
-
-
- `,
- html: `
-
-
-
-
- {{col.header}}
-
-
-
-
-
-
- {{rowData[col.field]}}
-
-
-
-
-
-
-
-
-
-
-
- Tabs is defined using TabList , Tab , TabPanels and TabPanel components. Tab and TabPanel components are associated with their value properties
-
-
-
-
- Header I
- Header II
- Header III
-
-
-
-
- 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.
-
-
-
-
-
-
- Header I
- Header II
- Header III
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
- anim id est laborum.
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
- dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
- modi.
-
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
- atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
- sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
- facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
- impedit quo minus.
-
-
-
- `,
-
- html: `
-
-
- Header I
- Header II
- Header III
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
- anim id est laborum.
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
- dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
- modi.
-
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
- atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
- sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
- facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
- impedit quo minus.
-
-
-
-
-
- Tabs can be controlled programmatically using value property as a model.
-
-
-
-
-
- Header I
- Header II
- Header III
-
-
-
-
- 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.
-
-
-
-
-
-
- Header I
- Header II
- Header III
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
- consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
- pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
- laborum.
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
-
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
- corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
- culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et
- expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
-
-
-
- `,
-
- html: `
-
-
-
- Header I
- Header II
- Header III
-
-
-
-
- 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.
-
-
-
-
-
- Enabling disabled property of a Tab prevents user interaction.
-
-
-
-
- Header I
- Header II
- Header III
- Header IV
-
-
-
-
- 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.
-
-
-
-
-
-
- Header I
- Header II
- Header III
- Header IV
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
- anim id est laborum.
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
- dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
- modi.
-
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
- atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
- sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
- facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
- impedit quo minus.
-
-
-
- `,
-
- html: `
-
-
- Header I
- Header II
- Header III
- Header IV
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
- ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
- anim id est laborum.
-
-
-
-
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
- aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
- dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
- modi.
-
-
-
-
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
- atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
- sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
- facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
- impedit quo minus.
-
-
-
-
-
- Tabs can be generated dynamically using the standard @for block.
-
-
-
-
- @for (tab of tabs; track tab.value) {
- {{ tab.title }}
- }
-
-
- @for (tab of tabs; track tab.value) {
-
- {{ tab.content }}
-
- }
-
-
-
-
- @for (tab of tabs; track tab.value) {
- {{ tab.title }}
- }
-
-
- @for (tab of tabs; track tab.value) {
-
- {{ tab.content }}
-
- }
-
- `,
-
- html: `
-
-
- @for (tab of tabs; track tab.value) {
- {{ tab.title }}
- }
-
-
- @for (tab of tabs; track tab.value) {
-
- {{ tab.content }}
-
- }
-
-
-
- Label of the tag is defined with the value property.
-
-
-
- A font icon next to the value can be displayed with the icon property.
-
-
-
- Severity defines the color of the tag, possible values are success , info , warn and danger in addition to the default theme color.
-
-
-
- Children of the component are passed as the content for templating.
-
-
-
-
-
-
Italy
-
-
-
-
-
- Italy
-
-
`,
- html: `
-
-
-
-
- Italy
-
-
-
- The plugin also adds extended animation utilities that can be used with the styleclass and animateonscroll directives.
-
-
- Animations
-
-
-
-
- Class
- Property
-
-
-
-
- animate-fadein
- fadein 0.15s linear
-
-
- animate-fadeout
- fadeout 0.15s linear
-
-
- animate-slidedown
- slidedown 0.45s ease-in-out
-
-
- animate-slideup
- slideup 0.45s cubic-bezier(0, 1, 0, 1)
-
-
- animate-scalein
- scalein 0.15s linear
-
-
- animate-fadeinleft
- fadeinleft 0.15s linear
-
-
- animate-fadeoutleft
- fadeoutleft 0.15s linear
-
-
- animate-fadeinright
- fadeinright 0.15s linear
-
-
- animate-fadeoutright
- fadeoutright 0.15s linear
-
-
- animate-fadeinup
- fadeinup 0.15s linear
-
-
- animate-fadeoutup
- fadeoutup 0.15s linear
-
-
- animate-fadeindown
- fadeindown 0.15s linear
-
-
- animate-fadeoutup
- fadeoutup 0.15s linear
-
-
- animate-width
- width 0.15s linear
-
-
- animate-flip
- flip 0.15s linear
-
-
- animate-flipup
- flipup 0.15s linear
-
-
- animate-flipleft
- fadein 0.15s linear
-
-
- animate-flipright
- flipright 0.15s linear
-
-
- animate-zoomin
- zoomin 0.15s linear
-
-
- animate-zoomindown
- zoomindown 0.15s linear
-
-
- animate-zoominleft
- zoominleft 0.15s linear
-
-
- animate-zoominright
- zoominright 0.15s linear
-
-
- animate-zoominup
- zoominup 0.15s linear
-
-
-
-
Animation Duration
-
-
-
-
- Class
- Property
-
-
-
-
- animate-duration-0
- animation-duration: 0s
-
-
- animate-duration-75
- animation-duration: 75ms
-
-
- animate-duration-100
- animation-duration: 100ms
-
-
- animate-duration-200
- animation-duration: 200ms
-
-
- animate-duration-300
- animation-duration: 300ms
-
-
- animate-duration-400
- animation-duration: 400ms
-
-
- animate-duration-500
- animation-duration: 500ms
-
-
- animate-duration-700
- animation-duration: 700ms
-
-
- animate-duration-1000
- animation-duration: 1000ms
-
-
- animate-duration-2000
- animation-duration: 2000ms
-
-
- animate-duration-3000
- animation-duration: 300ms
-
-
-
-
Animation Delay
-
-
-
-
- Class
- Property
-
-
-
-
- animate-delay-none
- animation-duration: 0s
-
-
- animate-delay-75
- animation-delay: 75ms
-
-
- animate-delay-100
- animation-delay: 100ms
-
-
- animate-delay-150
- animation-delay: 150ms
-
-
- animate-delay-200
- animation-delay: 200ms
-
-
- animate-delay-300
- animation-delay: 300ms
-
-
- animate-delay-400
- animation-delay: 400ms
-
-
- animate-delay-500
- animation-delay: 500ms
-
-
- animate-delay-700
- animation-delay: 700ms
-
-
- animate-delay-1000
- animation-delay: 1000ms
-
-
-
-
Iteration Count
-
-
-
-
- Class
- Property
-
-
-
-
- animate-infinite
- animation-iteration-count: infinite
-
-
- animate-once
- animation-iteration-count: 1
-
-
- animate-twice
- animation-iteration-count: 2
-
-
-
-
Direction
-
-
-
-
- Class
- Property
-
-
-
-
- animate-normal
- animation-direction: normal
-
-
- animate-reverse
- animation-direction: reverse
-
-
- animate-alternate
- animation-direction: alternate
-
-
- animate-alternate-reverse
- animation-direction: alternate-reverse
-
-
-
-
Timing Function
-
-
-
-
- Class
- Property
-
-
-
-
- animate-ease-linear
- animation-timing-function: linear
-
-
- animate-ease-in
- animation-timing-function: cubic-bezier(0.4, 0, 1, 1)
-
-
- animate-ease-out
- animation-timing-function: cubic-bezier(0, 0, 0.2, 1)
-
-
- animate-ease-in-out
- animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
-
-
-
-
Fill Mode
-
-
-
-
- Class
- Property
-
-
-
-
- animate-fill-none
- animation-fill-mode: normal
-
-
- animate-fill-forwards
- animation-fill-mode: forwards
-
-
- animate-fill-backwards
- animation-fill-mode: backwards
-
-
- animate-fill-both
- animation-fill-mode: both
-
-
-
-
Play State
-
-
-
-
- Class
- Property
-
-
-
-
- animate-running
- animation-play-state: running
-
-
- animate-paused
- animation-play-state: paused
-
-
-
-
Backface Visibility State
-
-
-
-
- Class
- Property
-
-
-
-
- backface-visible
- backface-visibility: visible
-
-
- backface-hidden
- backface-visibility: hidden
-
-
-
-
- A headless PrimeNG dialog with a custom UI.
-
-
-
-
-
-
-
-
-
-
-
-
-
- Username
-
-
- Password
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Username
-
-
- Password
-
-
-
- `
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/terminal/basicdoc.ts b/apps/showcase/src/app/showcase/doc/terminal/basicdoc.ts
deleted file mode 100644
index f162d8de203..00000000000
--- a/apps/showcase/src/app/showcase/doc/terminal/basicdoc.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Component, OnDestroy } from '@angular/core';
-import { TerminalService } from 'primeng/terminal';
-import { Subscription } from 'rxjs';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- Commands are processed using observables via the TerminalService . Import this service into your component and subscribe to commandHandler to process commands by sending replies with sendResponse function.
-
-
-
Enter "date " to display the current date, "greet {0} " for a message and "random " to get a random number.
-
-
Enter "date " to display the current date,
-"greet {0} " for a message and "random "
-to get a random number.
-
-
Enter "date " to display the current date,
- "greet {0} " for a message and "random "
- to get a random number.
-
-
-
- Screen Reader
-
- Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby ,
- aria-label props.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the input.
-
-
-
-
-
Address 1
-
-
-Address 2
-
-
-`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/basicdoc.ts b/apps/showcase/src/app/showcase/doc/textarea/basicdoc.ts
deleted file mode 100644
index 0971e8c3439..00000000000
--- a/apps/showcase/src/app/showcase/doc/textarea/basicdoc.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- Textarea is applied to an input field with pTextarea directive.
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Textarea } from 'primeng/textearea';;
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'input-textarea-basic-demo',
- templateUrl: './input-textarea-basic-demo.html',
- standalone: true,
- imports: [FormsModule, Textarea]
-})
-
-export class InputTextareaBasicDemo {
- value!: string;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/disableddoc.ts b/apps/showcase/src/app/showcase/doc/textarea/disableddoc.ts
deleted file mode 100644
index eaf9afcf724..00000000000
--- a/apps/showcase/src/app/showcase/doc/textarea/disableddoc.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'disabled-doc',
- template: `
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Textarea } from 'primeng/textearea';;
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'input-textarea-disabled-demo',
- templateUrl: './input-textarea-disabled-demo.html',
- standalone: true,
- imports: [FormsModule, Textarea]
-})
-export class InputTextareaDisabledDemo {
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/filleddoc.ts b/apps/showcase/src/app/showcase/doc/textarea/filleddoc.ts
deleted file mode 100644
index 0e1bfc0f1e7..00000000000
--- a/apps/showcase/src/app/showcase/doc/textarea/filleddoc.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-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.
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Textarea } from 'primeng/textearea';;
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'input-textarea-filled-demo',
- templateUrl: './input-textarea-filled-demo.html',
- standalone: true,
- imports: [FormsModule, Textarea]
-})
-
-export class InputTextareaFilledDemo {
- value!: string;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/floatlabeldoc.ts b/apps/showcase/src/app/showcase/doc/textarea/floatlabeldoc.ts
deleted file mode 100644
index de365225bd3..00000000000
--- a/apps/showcase/src/app/showcase/doc/textarea/floatlabeldoc.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'floatlabel-doc',
- template: `
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
-
- Over Label
-
-
-
-
- In Label
-
-
-
-
- On Label
-
-
-
- Over Label
-
-
-
-
- In Label
-
-
-
-
- On Label
- `,
-
- html: `
-
-
- Over Label
-
-
-
-
- In Label
-
-
-
-
- On Label
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
-
- Description
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { InputTextareaModule } from 'primeng/inputtextarea';
-import { FormsModule } from '@angular/forms';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-@Component({
- selector: ': 'input-textarea-iftalabel-demo',
- templateUrl: './: 'input-textarea-iftalabel-demo.html',
- standalone: true,
- imports: [FormsModule, InputTextareaModule, IftaLabelModule]
-})
-export class TextareaIftaLabelDemo {
- value: string = '';
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/importdoc.ts b/apps/showcase/src/app/showcase/doc/textarea/importdoc.ts
deleted file mode 100644
index cf5bea2406f..00000000000
--- a/apps/showcase/src/app/showcase/doc/textarea/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'text-area-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Textarea } from 'primeng/textearea';;
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'input-textarea-invalid-demo',
- templateUrl: './input-textarea-invalid-demo.html',
- standalone: true,
- imports: [FormsModule, Textarea]
-})
-export class InputTextareaInvalidDemo {
- value!: string;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/keyfilterdoc.ts b/apps/showcase/src/app/showcase/doc/textarea/keyfilterdoc.ts
deleted file mode 100644
index 22fa9a229c2..00000000000
--- a/apps/showcase/src/app/showcase/doc/textarea/keyfilterdoc.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'key-filter-doc',
- template: `
-
- InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Textarea } from 'primeng/textearea';;
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector:'input-textarea-key-filter-demo',
- templateUrl: './input-textarea-key-filter-demo.html',
- standalone: true,
- imports: [FormsModule, Textarea]
-})
-export class InputTextareaKeyFilterDemo {
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/reactiveformsdoc.ts b/apps/showcase/src/app/showcase/doc/textarea/reactiveformsdoc.ts
deleted file mode 100644
index 40c3f193597..00000000000
--- a/apps/showcase/src/app/showcase/doc/textarea/reactiveformsdoc.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'reactive-forms-doc',
- template: `
-
- Textarea can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
-
- (null)
- });
- }
-
- code: Code = {
- basic: ``,
-
- html: `
-
-
`,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { Textarea } from 'primeng/textearea';;
-
-@Component({
- selector: 'input-textarea-reactive-forms-demo',
- templateUrl: './input-textarea-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, Textarea],
-})
-export class InputTextareaReactiveFormsDemo implements OnInit {
- formGroup!: FormGroup;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- text: new FormControl(null)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/textarea/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/textarea/sizesdoc.ts
deleted file mode 100644
index 8dfe71aa4d4..00000000000
--- a/apps/showcase/src/app/showcase/doc/textarea/sizesdoc.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'sizes-doc',
- template: `
-
- Textarea provides small and large sizes as alternatives to the base.
-
-
-
-
-
-
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Textarea } from 'primeng/textearea';;
-import { FormsModule } from '@angular/forms';
-
-@Component({
- selector: 'input-textarea-sizes-demo',
- templateUrl: './input-textarea-sizes-demo.html',
- standalone: true,
- imports: [FormsModule, Textarea]
-})
-
-export class InputTextareaSizesDemo {
- value1!: string;
-
- value2!: string;
-
- value3!: string;
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/tieredmenu/basicdoc.ts b/apps/showcase/src/app/showcase/doc/tieredmenu/basicdoc.ts
deleted file mode 100644
index 45d76146b73..00000000000
--- a/apps/showcase/src/app/showcase/doc/tieredmenu/basicdoc.ts
+++ /dev/null
@@ -1,185 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- TieredMenu requires a collection of menuitems as its model .
-
-
-
- The command property defines the callback to run when an item is activated by click or a key event.
-
-
-
- Popup mode is enabled by adding popup property and calling toggle method with an event of the target.
-
-
-
- Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- TieredMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.
-
-
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { TieredMenu } from 'primeng/tieredmenu';
-import { BadgeModule } from 'primeng/badge';
-import { CommonModule } from '@angular/common';
-import { Ripple } from 'primeng/ripple';
-
-@Component({
- selector: 'tiered-menu-template-demo',
- templateUrl: './tiered-menu-template-demo.html',
- standalone: true,
- imports: [TieredMenu, BadgeModule, Ripple, CommonModule]
-})
-export class TieredMenuTemplateDemo implements OnInit {
- items: MenuItem[] | undefined;
-
- ngOnInit() {
- this.items = [
- {
- label: 'File',
- icon: 'pi pi-file',
- items: [
- {
- label: 'New',
- icon: 'pi pi-plus',
- items: [
- {
- label: 'Document',
- icon: 'pi pi-file',
- shortcut: '⌘+N'
- },
- {
- label: 'Image',
- icon: 'pi pi-image',
- shortcut: '⌘+I'
- },
- {
- label: 'Video',
- icon: 'pi pi-video',
- shortcut: '⌘+L'
- }
- ]
- },
- {
- label: 'Open',
- icon: 'pi pi-folder-open',
- shortcut: '⌘+O'
- },
- {
- label: 'Print',
- icon: 'pi pi-print',
- shortcut: '⌘+P'
- }
- ]
- },
- {
- label: 'Edit',
- icon: 'pi pi-file-edit',
- items: [
- {
- label: 'Copy',
- icon: 'pi pi-copy',
- shortcut: '⌘+C'
- },
- {
- label: 'Delete',
- icon: 'pi pi-times',
- shortcut: '⌘+D'
- }
- ]
- },
- {
- label: 'Search',
- icon: 'pi pi-search',
- shortcut: '⌘+S'
- },
- {
- separator: true
- },
- {
- label: 'Share',
- icon: 'pi pi-share-alt',
- items: [
- {
- label: 'Slack',
- icon: 'pi pi-slack',
- badge: '2'
- },
- {
- label: 'Whatsapp',
- icon: 'pi pi-whatsapp',
- badge: '3'
- }
- ]
- }
- ]
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/timeline/basicdoc.ts b/apps/showcase/src/app/showcase/doc/timeline/basicdoc.ts
deleted file mode 100644
index f5214e055d2..00000000000
--- a/apps/showcase/src/app/showcase/doc/timeline/basicdoc.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
-
- Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. Example below is a sample events array that
- is used throughout the documentation.
-
-
-
-
-
- {{ event.status }}
-
-
-
-
- {{ event.status }}
-
- `,
-
- html: `
-
-
- {{ event.status }}
-
-
-
- TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative.
-
-
-
-
- {{ event }}
-
-
-
-
- {{ event }}
-
-
-
-
- {{ event }}
-
-
-
-
- {{ event }}
-
-
-
-
-
- {{ event }}
-
-
-
-
-
- {{ event }}
-
-
-
-
- `,
-
- html: `
-
-
- {{ event }}
-
-
-
-
- {{ event }}
-
-
-
-
- {{ event }}
-
-
-
-
-
-
- Sample implementation with custom content and styled markers.
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
- neque quas!
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
- neque quas!
-
-
-
- `,
-
- 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!
-
-
-
-
-
- Transition of the animations can be customized using the showTransitionOptions , hideTransitionOptions , showTransformOptions and hideTransformOptions properties.
-
-
-
-
- Toasts are displayed by calling the add and addAll method provided by the messageService . A single toast is specified by the Message interface that defines various properties such as severity ,
- summary and detail .
-
-
-
-
- Headless mode allows you to customize the entire user interface instead of the default elements.
-
-
-
-
-
-
- {{ message.summary }}
-
-
-
-
{{ progress }}% uploaded
-
-
-
-
-
-
-
-
- {{ message.summary }}
-
-
-
-
{{ progress }}% uploaded
-
-
-
-
-
-
-
-
- {{ message.summary }}
-
-
-
-
{{ progress }}% uploaded
-
-
-
-
-
- A toast disappears after 3000ms by default, set the life option on either the message or toast to override this.
-
-
-
- Multiple toasts are displayed by passing an array to the showAll method of the messageService .
-
-
-
- Location of the toast is customized with the position property. Valid values are top-left , top-center , top-right , bottom-left , bottom-center , bottom-right and center .
-
-
-
-
- Toast styling can be adjusted per screen size with the breakpoints option. The value of breakpoints
- should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px.
-
-
-
-
-
- The severity option specifies the type of the message. There are four types of messages: success , info , warn and error . The severity of the message is used to display the icon and the color of the
- toast.
-
-
-
-
-
- A page may have multiple toast components, in case you'd like to target a specific message to a particular toast, use the
- key property so that toast and the message can match.
-
-
-
-
- Templating allows customizing the content where the message instance is available as the implicit variable.
-
-
-
-
-
-
-
{{ message.summary }}
-
-
-
-
-
-
-
-
-
- {{ message.summary }}
-
-
-
-
-
-
-
-
-
-
- {{ message.summary }}
-
-
-
-
-
-
-
- Screen Reader
-
- ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with ariaLabelledBy or ariaLabel props, it is highly
- suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
- does not change related to state.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the button.
-
-
-
- space
-
- Toggles the checked state.
-
-
-
-
-
Remember Me
-
- Two-way binding to a boolean property is defined using the standard ngModel directive.
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- ToggleButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- (false)
- });
- }
-
- code: Code = {
- basic: ``,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { ToggleButton } from 'primeng/togglebutton';
-
-@Component({
- selector: 'toggle-button-reactive-forms-demo',
- templateUrl: './toggle-button-reactive-forms-demo.html',
- standalone: true,
- imports: [ReactiveFormsModule, ToggleButton]
-})
-export class ToggleButtonReactiveFormsDemo implements OnInit {
- formGroup!: FormGroup;
-
- ngOnInit() {
- this.formGroup = new FormGroup({
- checked: new FormControl(false)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/togglebutton/sizesdoc.ts b/apps/showcase/src/app/showcase/doc/togglebutton/sizesdoc.ts
deleted file mode 100644
index 8797e57c988..00000000000
--- a/apps/showcase/src/app/showcase/doc/togglebutton/sizesdoc.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'sizes-doc',
- template: `
-
- ToggleButton provides small and large sizes as alternatives to the base.
-
-
-
-
- Screen Reader
-
- InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with
- inputId prop or using ariaLabelledBy , ariaLabel props.
-
-
-
-
-
-
Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the switch.
-
-
-
- space
-
- Toggles the checked state.
-
-
-
-
-
Remember Me
-Remember Me
-
- Two-way value binding is defined using ngModel .
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
- ToggleSwitch can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
- (false)
- });
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/toolbar/accessibilitydoc.ts b/apps/showcase/src/app/showcase/doc/toolbar/accessibilitydoc.ts
deleted file mode 100644
index 00f9125a45d..00000000000
--- a/apps/showcase/src/app/showcase/doc/toolbar/accessibilitydoc.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'toolbar-accessibility-doc',
- template: `
-
- Screen Reader
-
- Toolbar uses toolbar role for the root element, aria-orientation is not included as it defaults to horizontal . Any valid attribute is passed to the root element so you may add additional properties like
- aria-labelledby and aria-labelled to define the element if required.
-
- Keyboard Support
- Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.
-
-
- Content
- `
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/toolbar/basicdoc.ts b/apps/showcase/src/app/showcase/doc/toolbar/basicdoc.ts
deleted file mode 100644
index 582b573e1aa..00000000000
--- a/apps/showcase/src/app/showcase/doc/toolbar/basicdoc.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
-
- Toolbar is a grouping component for buttons and other content. Its content can be placed inside the
- start , center and end sections.
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: ``,
-
- typescript: `import { Component, OnInit } from '@angular/core';
-import { MenuItem } from 'primeng/api';
-import { Toolbar } from 'primeng/toolbar';
-import { ButtonModule } from 'primeng/button';
-import { SplitButton } from 'primeng/splitbutton';
-import { InputTextModule } from 'primeng/inputtext';
-import { IconField } from 'primeng/iconfield';
-import { InputIcon } from 'primeng/inputicon';
-
-@Component({
- selector: 'toolbar-basic-demo',
- templateUrl: './toolbar-basic-demo.html',
- standalone: true,
- imports: [Toolbar, ButtonModule, SplitButton, InputTextModule, IconField, InputIcon]
-})
-export class ToolbarBasicDemo implements OnInit {
- items: MenuItem[] | undefined;
-
- ngOnInit() {
- this.items = [
- {
- label: 'Update',
- icon: 'pi pi-refresh'
- },
- {
- label: 'Delete',
- icon: 'pi pi-times'
- }
- ];
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/toolbar/customdoc.ts b/apps/showcase/src/app/showcase/doc/toolbar/customdoc.ts
deleted file mode 100644
index c5ef54bf2c0..00000000000
--- a/apps/showcase/src/app/showcase/doc/toolbar/customdoc.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'custom-doc',
- template: `
-
- Content can also be placed using the start , center and end templates.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Tooltip can use either a string or a TemplateRef .
-
-
-
-
-
-
-
-
-
-
-
-
PrimeNG rocks!
-
-
-
-
-
-
PrimeNG rocks!
-
`,
-
- html: `
-
-
-
-
-
-
-
-
-
-
PrimeNG rocks!
-
-
- Adding delays to the show and hide events are defined with showDelay and hideDelay options respectively.
-
-
-
- Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Tooltip } from 'primeng/tooltip';
-import { InputTextModule } from 'primeng/inputtext';
-
-@Component({
- selector: 'tooltip-event-demo',
- templateUrl: './tooltip-event-demo.html',
- standalone: true,
- imports: [Tooltip, InputTextModule]
-})
-export class TooltipEventDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/tooltip/importdoc.ts b/apps/showcase/src/app/showcase/doc/tooltip/importdoc.ts
deleted file mode 100644
index a78e8ab8c1a..00000000000
--- a/apps/showcase/src/app/showcase/doc/tooltip/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'tooltip-import-doc',
- template: `
- Position of the tooltip is specified using tooltipPosition attribute. Valid values are top , bottom , right and left . Default position of the tooltip is right .
-
-
-
-
-
`,
-
- typescript: `import { Component } from '@angular/core';
-import { Tooltip } from 'primeng/tooltip';
-import { InputTextModule } from 'primeng/inputtext';
-
-@Component({
- selector: 'tooltip-position-demo',
- templateUrl: './tooltip-position-demo.html',
- standalone: true,
- imports: [Tooltip, InputTextModule]
-})
-export class TooltipPositionDemo {}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/tree/basicdoc.ts b/apps/showcase/src/app/showcase/doc/tree/basicdoc.ts
deleted file mode 100644
index 83a9cad92a7..00000000000
--- a/apps/showcase/src/app/showcase/doc/tree/basicdoc.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
-
-@Component({
- selector: 'basic-doc',
- template: `
-
- Tree component requires an array of TreeNode objects as its value .
-
-
-
- Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox .
-
-
-
- Tree requires a collection of TreeNode instances as a value.
-
-
-
- Tree requires a collection of TreeNode instances as a value .
-
-
-
- Nodes can be reordered within the same tree and also can be transferred between other trees using drag&drop.
-
-
-
- An event is provided for each type of user interaction such as expand, collapse and selection.
-
-
-
-
- Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
- filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included.
- On the other hand, in strict mode when the query matches a node, filtering continues on all descendants.
-
-
-
-
-
- Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using
- loading property and onNodeExpand method. Default value of loadingMode is mask and also icon is available.
-
-
-
-
-
- More than one node is selectable by setting selectionMode to multiple . By default in multiple selection mode, metaKey press (e.g. ⌘ ) is necessary to add to existing selections however this can be configured with
- disabling the metaKeySelection property. Note that in touch enabled devices, Tree always ignores metaKey.
-
- In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.
-
-
-
- Custom node content instead of a node label is defined with the pTemplate property.
-
-
-
-
-
- {{ node.label }}
-
-
-
- {{ node.label }}
-
- `,
-
- html: ``,
-
- 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',
- standalone: true,
- imports: [TreeModule]
-})
-export class TreeTemplateDemo implements OnInit {
- nodes!: TreeNode[];
-
- ngOnInit() {
- this.nodes = [
- {
- key: '0',
- label: 'Introduction',
- children: [
- { key: '0-0', label: 'What is Angular', data: 'https://angular.io', type: 'url' },
- { key: '0-1', label: 'Getting Started', data: 'https://angular.io/guide/setup-local', type: 'url' },
- { key: '0-2', label: 'Learn and Explore', data: 'https://angular.io/guide/architecture', type: 'url' },
- { key: '0-3', label: 'Take a Look', data: 'https://angular.io/start', type: 'url' }
- ]
- },
- {
- key: '1',
- label: 'Components In-Depth',
- children: [
- { key: '1-0', label: 'Component Registration', data: 'https://angular.io/guide/component-interaction', type: 'url' },
- { key: '1-1', label: 'User Input', data: 'https://angular.io/guide/user-input', type: 'url' },
- { key: '1-2', label: 'Hooks', data: 'https://angular.io/guide/lifecycle-hooks', type: 'url' },
- { key: '1-3', label: 'Attribute Directives', data: 'https://angular.io/guide/attribute-directives', type: 'url' }
- ]
- }
- ];
- }
-}`
- };
-}
diff --git a/apps/showcase/src/app/showcase/doc/tree/virtualscrolldoc.ts b/apps/showcase/src/app/showcase/doc/tree/virtualscrolldoc.ts
deleted file mode 100644
index 90557cc8c8e..00000000000
--- a/apps/showcase/src/app/showcase/doc/tree/virtualscrolldoc.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { TreeNode } from 'primeng/api';
-import { Code } from '@domain/code';
-import { NodeService } from '@service/nodeservice';
-
-@Component({
- selector: 'virtual-scroll-doc',
- template: `
-
- VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality.
-
-
-
- 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.
-
-
-
-
- Screen Reader
-
- Value to describe the component can either be provided with ariaLabelledby or ariaLabel props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes.
- The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup.
-
-
- The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label ,
- aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected . Checkbox and toggle icons are hidden from screen readers as their parent element with
- treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize , aria-posinset and aria-level attributes are
- calculated implicitly and added to each treeitem.
-
-
- If filtering is enabled, filterInputProps can be defined to give aria-* props to the filter input element.
-
-
-
-
-
Closed State Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the treeselect element.
-
-
-
- space
-
- Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus.
-
-
-
- down arrow
-
- Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus.
-
-
-
-
-
-
Popup Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- tab
-
- Moves focus to the next focusable element in the popup, if there is none then first focusable element receives the focus.
-
-
- shift + tab Moves focus to the previous focusable element in the popup, if there is none then last focusable element receives the focus.
-
-
-
- enter
-
- Selects the focused option, closes the popup if selection mode is single.
-
-
-
- space
-
- Selects the focused option, closes the popup if selection mode is single.
-
-
-
- escape
-
- Closes the popup, moves focus to the treeselect element.
-
-
-
- down arrow
-
- Moves focus to the next treenode.
-
-
-
- up arrow
-
- Moves focus to the previous treenode.
-
-
-
- right arrow
-
- If node is closed, opens the node otherwise moves focus to the first child node.
-
-
-
- left arrow
-
- If node is open, closes the node otherwise moves focus to the parent node.
-
-
-
-
-
-
Filter Input Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Closes the popup and moves focus to the treeselect element.
-
-
-
- escape
-
- Closes the popup and moves focus to the treeselect element.
-
-
-
-
-
-
Close Button Keyboard Support
-
-
-
-
- Key
- Function
-
-
-
-
-
- enter
-
- Closes the popup and moves focus to the treeselect element.
-
-
-
- space
-
- Closes the popup and moves focus to the treeselect element.
-
-
-
- escape
-
- Closes the popup and moves focus to the treeselect element.
-
-
-
-
-
Options
-
- TreeSelect is used as a controlled component with ng-model directive along with an options collection. Internally Tree component is used so the options model is based on TreeNode API.
- In single selection mode, value binding should be the key value of a node.
-
-
-
- Selection of multiple nodes via checkboxes is enabled by configuring selectionMode as checkbox .
-
-
-
- When disabled is present, the element cannot be edited and focused.
-
-
-
- Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
-
-
-
-
- Filtering is enabled by adding the filter property, by default label property of a node is used to compare against the value in the text field, in order to customize which field(s) should be used during search define
- filterBy property. In addition filterMode specifies the filtering strategy. In lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included.
- On the other hand, in strict mode when the query matches a node, filtering continues on all descendants.
-
-
-
-
-
- A floating label appears on top of the input field when focused. Visit
- FloatLabel documentation for more information.
-
-
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
- `,
-
- html: `
-
- Over Label
-
-
-
- In Label
-
-
-
- On Label
-
-
- IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
-
-
-
- File
- `,
-
- html: ``,
-
- typescript: `import { Component } from '@angular/core';
-import { NodeService } from '@service/nodeservice';
-import { FormsModule } from '@angular/forms';
-import { TreeSelectModule } from 'primeng/treeselect';
-import { IftaLabelModule } from 'primeng/iftalabel';
-
-@Component({
- selector: 'tree-select-iftalabel-demo',
- templateUrl: './tree-select-iftalabel-demo.html',
- standalone: true,
- imports: [FormsModule, TreeSelectModule, IftaLabelModule],
- providers: [NodeService]
-})
-export class TreeSelectIftaLabelDemo {
- nodes!: any[];
-
- selectedValue: 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' }]
- }
- ]
-},
-...`
- };
-
- constructor(private nodeService: NodeService) {
- this.nodeService.getFiles().then((files) => (this.nodes = files));
- }
-}
diff --git a/apps/showcase/src/app/showcase/doc/treeselect/importdoc.ts b/apps/showcase/src/app/showcase/doc/treeselect/importdoc.ts
deleted file mode 100644
index 1208f532b05..00000000000
--- a/apps/showcase/src/app/showcase/doc/treeselect/importdoc.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Code } from '@domain/code';
-
-@Component({
- selector: 'tree-select-import-doc',
- template: `
- Invalid state style is added using the ng-invalid and ng-dirty class to indicate a failed validation.
-
-
-
-
- Lazy loading is useful when dealing with huge datasets, in this example nodes are dynamically loaded on demand using
- loading property and onNodeExpand method.
-
-
-
-
-
- More than one node is selectable by setting selectionMode to multiple . By default in multiple selection mode, metaKey press (e.g. ⌘ ) is necessary to add to existing selections however this can be configured with
- disabling the metaKeySelection property. Note that in touch enabled devices, TreeSelect always ignores metaKey.
-
- In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.
-
-
- TreeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
-
-
-
- TreeSelect provides small and large sizes as alternatives to the base.
-
-
-
- TreeSelect offers multiple templates for customization through templating.
-
-
-
-
-
-
- Available Files
-
-
-
-
-
-
-
-
-
- Available Files
-
-
-
-
- `,
-
- html: `
-
-
-
-
- Available Files
-
-
-
-
-
-
-
- VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance
- issues. Usage is simple as setting virtualScroll property to true and defining virtualScrollItemSize to specify the height of an item.
-
-
-
-
- TreeTable requires a collection of TreeNode instances as a value components as children for the representation.
-
-
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
- `,
-
- html: `
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
-
-
-
-
-
- Brand
- Sale Rate
-
-
- Sales
- Profits
-
-
- Last Year
- This Year
- Last Year
- This Year
-
-
-
-
-
-
- {{ rowData.lastYearSale }}
- {{ rowData.thisYearSale }}
- {{ rowData.lastYearProfit }}
- {{ rowData.thisYearProfit }}
-
-
-
-
- Totals
- $3,283,772
- $2,126,925
-
-
-
-
-
-
-
- Brand
- Sale Rate
-
-
- Sales
- Profits
-
-
- Last Year
- This Year
- Last Year
- This Year
-
-
-
-
-
-
- {{ rowData.lastYearSale }}
- {{ rowData.thisYearSale }}
- {{ rowData.lastYearProfit }}
- {{ rowData.thisYearProfit }}
-
-
-
-
- Totals
- $3,283,772
- $2,126,925
-
-
- `,
-
- html: `
-
-
-
- Brand
- Sale Rate
-
-
- Sales
- Profits
-
-
- Last Year
- This Year
- Last Year
- This Year
-
-
-
-
-
-
- {{ rowData.lastYearSale }}
- {{ rowData.thisYearSale }}
- {{ rowData.lastYearProfit }}
- {{ rowData.thisYearProfit }}
-
-
-
-
- Totals
- $3,283,772
- $2,126,925
-
-
-
-
- Column visibility based on a condition can be implemented with dynamic columns, in this sample a MultiSelect is used to manage the visible columns.
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Expansion state is controlled with expandedKeys property.
-
-
-
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
- `,
-
- html: `
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
-
-
- The filterMode specifies the filtering strategy, in lenient mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand, in
- strict mode when the query matches a node, filtering continues on all descendants. A general filled called filterGlobal is also provided to search all columns that support filtering.
-
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No data found.
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No data found.
-
-
- `,
-
- html: `
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No data found.
-
-
-
-
-
- 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.size }}
- {{ rowData.type }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
-
- {{ rowData.size }}
-
-
- {{ rowData.type }}
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
-
- {{ rowData.size }}
-
-
- {{ rowData.type }}
-
-
-
-
-
-
-
-
-
-
- Enabling showGridlines displays grid lines.
-
-
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
-
-
`,
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class GridlinesDoc {
- files!: TreeNode[];
-
- constructor(private nodeService: NodeService) {}
-
- loadDemoData() {
- this.nodeService.getFilesystem().then((files) => (this.files = files));
- }
-
- code: Code = {
- basic: `
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
- `,
-
- html: `
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
-
-
- Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking corresponding callbacks everytime paging , sorting and filtering occurs. Sample below
- imitates lazy loading data from a remote datasource using an in-memory list and timeouts to mimic network connection.
-
-
- Enabling the lazy property and assigning the logical number of rows to totalRecords by doing a projection query are the key elements of the implementation so that paginator displays the UI assuming there are actually
- records of totalRecords size although in reality they are not present on page, only the records that are displayed on the current page exist.
-
- In addition, only the root elements should be loaded, children can be loaded on demand using onNodeExpand callback.
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
- Pagination is enabled by adding paginator property and defining rows per page.
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
- Paginator localization information such as page numbers and rows per page options are defined with the
- paginatorLocale property which defaults to the user locale.
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
- Order of the columns can be changed using drag and drop when reorderableColumns is present.
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
-
-
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
- In addition to a regular treetable, alternatives with alternative sizes are available. Add p-treetable-sm class to reduce the size of treetable or p-treetable-lg to enlarge it.
-
-
-
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
-
-
`,
- changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class SizeDoc {
- files!: TreeNode[];
-
- sizes!: any[];
-
- selectedSize: any = '';
-
- constructor(private nodeService: NodeService) {}
-
- loadDemoData() {
- this.nodeService.getFilesystem().then((files) => (this.files = files));
-
- this.sizes = [
- { name: 'Small', class: 'p-treetable-sm' },
- { name: 'Normal', class: '' },
- { name: 'Large', class: 'p-treetable-lg' }
- ];
- }
-
- code: Code = {
- basic: `
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
- `,
-
- html: `
-
-
-
-
- Name
- Size
- Type
-
-
-
-
-
-
- {{ rowData.size }}
- {{ rowData.type }}
-
-
-
-
- Custom content at caption , header , body and summary sections are supported via templating.
-
-
-
-
- File Viewer
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- File Viewer
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- `,
-
- html: `
-
- File Viewer
-
-
- {{ col.header }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Community Versions
-
- Angular is a fast paced technology with a new major version every 6 months. PrimeNG release cycle is aligned with Angular and every 6 months a new major PrimeNG version is released as open source that is compatible with the
- latest Angular core. The maintenance releases of the latest PrimeNG version are provided as free and open source for the following 6 months until the new major Angular version is ready.
-
-
-
-
LTS Versions
-
- Majority of the existing applications prefer to remain at a previous version due to stability requirements instead of upgrading to the latest version immediately. PrimeNG LTS is a support service to provide a license for the
- finest compatible version suited to you. LTS covers the prior two versions from the latest release, this means up to 18 months of almost bi-weekly releases to bring the latest defect fixes and security updates to your project.
- As an example, when PrimeNG moves to Angular 18, v17 and v16 will move to LTS support whereas STS (short term support) versions of PrimeNG 18 will be open source under MIT license for at least 6 months until Angular/PrimeNG 19
- is released.
-
-
-
-
-
Version Support
-
- STS means open source short term support whereas LTS stands for commercial long term support. Legacy versions are only supported by
- PrimeNG PRO.
-
-
-
-
-
-
- Version
- Status
- End of STS
- End of LTS
-
-
-
-
-
-
- STS
- After v18 release
- After v20 release
-
-
-
-
- LTS
- After v17 release
- After v19 release
-
-
-
-
- LTS
- After v16 release
- After v18 release
-
-
-
-
- Legacy
- After v15 release
- After v17 release
-
-
-
-
- Legacy
- After v14 release
- After v16 release
-
-
-
-
- Legacy
- After v13 release
- After v15 release
-
-
-
-
-
-
-
LTS License
-
-
-
-
- Security
-
-
- PrimeNG comes with a commitment to provide long-term support, including regular security updates to keep your system protected against emerging threats.
-
-
-
-
- Maintenance
-
-
- We understand the importance of maintaining a stable and reliable software system. Our team will provide ongoing maintenance to ensure that the software continues to function seamlessly and efficiently.
-
-
-
-
- Enhancements
-
-
- We are dedicated to continuously improving PrimeNG to meet the evolving needs of our users. As part of our long-term support, we will provide regular updates and enhancements to add new features and functionality.
-
-
-
-
-
-
Pricing
-
Choose the right plan for your business.
-
View License Details
-
-
-
-
-
-
Basic License
-
Annual
-
-
-
-
-
- Expires After 1 Year
-
-
- Warning Message at Runtime After Expiry
-
-
- Eligible for 1 Major Version
-
-
- Unlimited Developers
-
-
- Unlimited Projects
-
-
-
-
Buy Now
-
-
-
-
-
-
-
-
Extended License
-
Perpetual
-
-
-
-
-
- No Expiry
-
-
- No Warning Message at Runtime
-
-
- Eligible for 1 Major Version
-
-
- Unlimited Developers
-
-
- Unlimited Projects
-
-
-
-
Buy Now
-
-
-
-
-
-
-
Usage
-
- LTS versions require a license key and a pass key to be verified at your main app component or main.ts before bootstrap process. The keys would be available at
- PrimeStore
- under LTS Licenses section.
-
-
-
-
-
Frequently Asked Questions
-
-
-
Do I have to purchase a license for PrimeNG?
-
No, only the versions that have the -lts suffix required a paid license. Any other version is open source under MIT license.
-
-
Is LTS License mandatory to use PrimeNG?
-
No, LTS is totally optional if you cannot update to latest Angular immediately and still would like to receive updates for your version.
-
-
How long is the duration of the LTS license?
-
Duration is 1 year for Basic License, for Extended License there is no limit.
-
-
What happens after the LTS license duration ends?
-
- A message will be displayed at the application screen and license needs to be renewed at PrimeStore. This only applies to Basic License as Extended License has no time limit.
-
-
-
Is a license bound to a specific major version?
-
Yes, a license key is tied to the major version such as 15 and same license key cannot be used on another major version like 14.
-
-
How can I assign my LTS license to a version?
-
At PrimeStore, there is an "Assign" feature that activates your license by selecting a version.
-
-
-
Does the license renew automatically?
-
No, renewal should be done manually at PrimeStore.
-
-
How are LTS and Community versions differentiated at NPM?
-
LTS releases have -lts suffix such as 14.2.4-lts .
-
-
Is the license per organization, per developer or per cpu/server?
-
LTS license is per organization, there is no limit on the number of developers, projects or hardware.
-
-
Can subsidiary companies share the license of a parent company?
-
No, license owner needs to be a separate entity as a result each company requires a separate license.
-
-
Does LTS provide a support contact?
-
No, PrimeNG PRO is the service where response of PrimeTek engineers is secured within 1 business day.
-
-
-
Can LTS releases be used in open source projects?
-
No, this means violation of the license as keys cannot be shared.
-
-
Does PRO provide access to the LTS releases?
-
Yes, PRO users are granted a basic license.
-
-
What is the difference between LTS and PRO?
-
- PrimeNG PRO is a premium support service delivered via an exclusive JIRA instance where support engineers of PrimeTek provide assistance within 1 business day to the raised tickets. LTS on the other hand provides a license
- to utilize the long term support versions.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
UP-TO-DATE
-
Best Features of Figma
-
PrimeOne for Figma uses the latest powerful features like components, variants, auto layout, styles, variables and interactive components. It'll always follow the best practices.
-
-
-
- Auto Layout
-
-
- Variants
-
-
- Variables and Styles
-
-
- Interactive Components
-
-
- Boolean, Instance Swap and Text Properties
-
-
- Nested Instances
-
-
-
-
-
-
-
ENTERPRISE GRADE
-
Powerful System
-
Save countless hours on every project with a carefully designed system that uses Prime UI Suite components. Start producing design results in no time.
-
-
-
- Numerous Components
-
-
- Icon Library
-
-
- Easy Customization
-
-
- Atomic Approach
-
-
-
-
-
-
-
-
-
-
-
-
-
DARK MODE
-
Two Themes
-
PrimeOne is designed based on Aura Light and Aura Dark themes. Easily change the themes of your designs using Figma's Swap Library feature or Tokens Studio Sets.
-
-
-
- Aura Light
-
-
- Aura Dark
-
-
-
-
-
-
-
TOKENS STUDIO
-
Tokens Support
-
Empower yourself with unprecedented control over your designs. Tokens Studio integration unlocks a whole new level of flexibility, allowing you to create and manage design tokens seamlessly.
-
-
-
- Countless Design Tokens
-
-
- Light and Dark Sets
-
-
- Well Documented
-
-
- Primitive, Semantic and Component Tokens
-
-
-
-
-
-
-
-
-
-
-
-
-
Pricing
-
Choose the right plan for your business. Whether you are an individual or a member of a team, UI Kit is available for affordable prices.
-
View License Details
-
-
-
-
-
-
Single Designer
-
For individual designers
-
-
- $99
- $49
-
-
-
-
- 1 Designer
-
-
- Auto Layout & Variants
-
-
- Interactive Components
-
-
- Tokens Studio Support
-
-
- Lifetime Support
-
-
- Use on Unlimited Projects
-
-
-
-
Buy Now
-
-
-
-
-
-
-
-
Team
-
For small teams
-
-
-
-
-
- Up to 5 Designers
-
-
- Auto Layout & Variants
-
-
- Interactive Components
-
-
- Tokens Studio Support
-
-
- Lifetime Support
-
-
- Use on Unlimited Projects
-
-
-
-
Buy Now
-
-
-
-
-
-
-
-
Enterprise
-
For large teams
-
-
- EXCLUSIVE DEALS
-
-
-
-
- Unlimited Designers
-
-
- Auto Layout & Variants
-
-
- Interactive Components
-
-
- Tokens Studio Support
-
-
- Lifetime Support
-
-
- Use on Unlimited Projects
-
-
-
-
Contact Us
-
-
-
-
-
-
-
-
Frequently Asked Questions
-
-
-
What do I get when I purchase a license?
-
You'll be able to download two Figma files for light and dark themes.
-
-
Is there a recurring fee or is the license perpetual?
-
UI Kit license is perpetual so requires one time payment, not subscription based.
-
-
Can I use UI Kit license for commercial projects?
-
Yes, your license allows you to sell your projects that utilize the UI Kit implementations.
-
-
Can I create multiple projects for multiple clients?
-
There is no limit, you are able to use UI Kit in multiple projects for multiple clients.
-
-
-
We're a reseller, are we able to purchase a license on behalf of our client?
-
- Yes, after the purchase, please
- contact us so we can transfer the license to your client.
-
-
-
Does the enterprise license include contractors within the organization?
-
Yes, contractors are also able to use the UI Kit within your company.
-
-
Can subsidiary company of a larger organization share the enterprise license?
-
No, enterprise license is per company so each subsidiary company needs to purchase a separate license.
-
-
What does "free updates" mean?
-
All updates will be totally free of charge for existing customers for an unlimited period.
-
-
-
How can I get support?
-
- Support is provided by PrimeTek via
- a dedicated forum channel monitored
- by PrimeTek support staff.
-
-
-
What does lifetime support mean?
-
Support service at the forum does not have a time limit.
-
-
Can I include UI Kit in an open source project?
-
Due to the license, it is not possible to use the UI Kit in an open source project where the design files are publicly available.
-
-
-
-
+ 
+ {{ group.label }}
+ 
+ 
+