diff --git a/src/app/showcase/doc/Image/basicdoc.ts b/src/app/showcase/doc/Image/basicdoc.ts index 55b9349acc5..8f96f260f87 100644 --- a/src/app/showcase/doc/Image/basicdoc.ts +++ b/src/app/showcase/doc/Image/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Image is used as the native img element and supports all properties that the native element has. For multiple image, see Galleria.

 diff --git a/src/app/showcase/doc/Image/importdoc.ts b/src/app/showcase/doc/Image/importdoc.ts index e9bf92c17e4..31a5cd02c06 100644 --- a/src/app/showcase/doc/Image/importdoc.ts +++ b/src/app/showcase/doc/Image/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/Image/previewdoc.ts b/src/app/showcase/doc/Image/previewdoc.ts index 2c7c5da5789..1e218686ee8 100644 --- a/src/app/showcase/doc/Image/previewdoc.ts +++ b/src/app/showcase/doc/Image/previewdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'image-preview-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/Image/previewimagesourcedoc.ts b/src/app/showcase/doc/Image/previewimagesourcedoc.ts index 82ca05186f8..148d2fea8b9 100644 --- a/src/app/showcase/doc/Image/previewimagesourcedoc.ts +++ b/src/app/showcase/doc/Image/previewimagesourcedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'image-preview-source-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/Image/styledoc.ts b/src/app/showcase/doc/Image/styledoc.ts index d041f1701ae..ea828eafa1d 100644 --- a/src/app/showcase/doc/Image/styledoc.ts +++ b/src/app/showcase/doc/Image/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/Image/templatedoc.ts b/src/app/showcase/doc/Image/templatedoc.ts index f257d58a929..c85be30d5ac 100644 --- a/src/app/showcase/doc/Image/templatedoc.ts +++ b/src/app/showcase/doc/Image/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/accessibility/colorsdoc.ts b/src/app/showcase/doc/accessibility/colorsdoc.ts index d0dd82fc36b..9c062d5cc62 100644 --- a/src/app/showcase/doc/accessibility/colorsdoc.ts +++ b/src/app/showcase/doc/accessibility/colorsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'colors-doc', - template: `
+ template: `

Colors on a web page should aim a contrast ratio of at least 4.5:1 and consider a selection of colors that do not cause vibration.

Good Contrast

diff --git a/src/app/showcase/doc/accessibility/formcontrolsdoc.ts b/src/app/showcase/doc/accessibility/formcontrolsdoc.ts index 0a74cea6fd9..2cb96accff4 100644 --- a/src/app/showcase/doc/accessibility/formcontrolsdoc.ts +++ b/src/app/showcase/doc/accessibility/formcontrolsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'form-controls-doc', - template: `
+ template: `

Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used diff --git a/src/app/showcase/doc/accessibility/introductiondoc.ts b/src/app/showcase/doc/accessibility/introductiondoc.ts index 2f9b261214d..edee7e8318f 100644 --- a/src/app/showcase/doc/accessibility/introductiondoc.ts +++ b/src/app/showcase/doc/accessibility/introductiondoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'introduction-doc', - template: `

+ template: `

Accessibility is a major concern of the Prime UI libraries and PrimeNG is no exception. PrimeTek teams have initiated a significant process to review and enhance the diff --git a/src/app/showcase/doc/accessibility/semantichtmldoc.ts b/src/app/showcase/doc/accessibility/semantichtmldoc.ts index 7c7a230d7e8..624a2ebe928 100644 --- a/src/app/showcase/doc/accessibility/semantichtmldoc.ts +++ b/src/app/showcase/doc/accessibility/semantichtmldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'semantic-html-doc', - template: `

+ template: `

HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular diff --git a/src/app/showcase/doc/accessibility/waiariadoc.ts b/src/app/showcase/doc/accessibility/waiariadoc.ts index e7cb15dfb40..a66e36f04d8 100644 --- a/src/app/showcase/doc/accessibility/waiariadoc.ts +++ b/src/app/showcase/doc/accessibility/waiariadoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'wai-aria-doc', - template: `

+ template: `

ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as diff --git a/src/app/showcase/doc/accessibility/wcagdoc.ts b/src/app/showcase/doc/accessibility/wcagdoc.ts index 75912d0100b..3e4d96e3705 100644 --- a/src/app/showcase/doc/accessibility/wcagdoc.ts +++ b/src/app/showcase/doc/accessibility/wcagdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'wcag-doc', - template: `

+ template: `

WCAG refers to Web Content Accessibility Guideline, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide diff --git a/src/app/showcase/doc/accordion/basicdoc.ts b/src/app/showcase/doc/accordion/basicdoc.ts index e7c4521b149..e4a8687ce45 100644 --- a/src/app/showcase/doc/accordion/basicdoc.ts +++ b/src/app/showcase/doc/accordion/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `

+ template: `

Accordion consists of one or more AccordionTab elements which are collapsed by default. Tab to expand initially can be defined with the activeIndex property.

 diff --git a/src/app/showcase/doc/accordion/controlleddoc.ts b/src/app/showcase/doc/accordion/controlleddoc.ts index 5debc211896..9f2fc7a4865 100644 --- a/src/app/showcase/doc/accordion/controlleddoc.ts +++ b/src/app/showcase/doc/accordion/controlleddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'controlled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/accordion/disableddoc.ts b/src/app/showcase/doc/accordion/disableddoc.ts index 8c2e1aa2509..d79f6cb5835 100644 --- a/src/app/showcase/doc/accordion/disableddoc.ts +++ b/src/app/showcase/doc/accordion/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

Enabling disabled property of an AccordionTab prevents user interaction.

 diff --git a/src/app/showcase/doc/accordion/importdoc.ts b/src/app/showcase/doc/accordion/importdoc.ts index 147d2183aca..ad8ff5cca23 100644 --- a/src/app/showcase/doc/accordion/importdoc.ts +++ b/src/app/showcase/doc/accordion/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/accordion/multipledoc.ts b/src/app/showcase/doc/accordion/multipledoc.ts index 5a1d2e58484..70bc40b21d1 100644 --- a/src/app/showcase/doc/accordion/multipledoc.ts +++ b/src/app/showcase/doc/accordion/multipledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'multiple-doc', - template: `
+ template: `

Only one tab at a time can be active by default, enabling multiple property changes this behavior to allow multiple tabs. In this case activeIndex needs to be an array.

 diff --git a/src/app/showcase/doc/accordion/styledoc.ts b/src/app/showcase/doc/accordion/styledoc.ts index 824d12d51f9..76cdd38a1d6 100644 --- a/src/app/showcase/doc/accordion/styledoc.ts +++ b/src/app/showcase/doc/accordion/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/accordion/templatedoc.ts b/src/app/showcase/doc/accordion/templatedoc.ts index 6069cf59a11..857bfe1b9b2 100644 --- a/src/app/showcase/doc/accordion/templatedoc.ts +++ b/src/app/showcase/doc/accordion/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

AccordionTab is customized header and content templates.

 diff --git a/src/app/showcase/doc/animate/basicdoc.ts b/src/app/showcase/doc/animate/basicdoc.ts index af606a56c12..c0ec19716b6 100644 --- a/src/app/showcase/doc/animate/basicdoc.ts +++ b/src/app/showcase/doc/animate/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Animate uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes enterClass and leaveClass properties to simply add animation class during scroll or page load to manage elements diff --git a/src/app/showcase/doc/animate/importdoc.ts b/src/app/showcase/doc/animate/importdoc.ts index 8ee8e999392..ea16ff77eb3 100644 --- a/src/app/showcase/doc/animate/importdoc.ts +++ b/src/app/showcase/doc/animate/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/autocomplete/basicdoc.ts b/src/app/showcase/doc/autocomplete/basicdoc.ts index 4c5de7a8d28..825d63f4281 100644 --- a/src/app/showcase/doc/autocomplete/basicdoc.ts +++ b/src/app/showcase/doc/autocomplete/basicdoc.ts @@ -8,7 +8,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'basic-doc', - template: `
+ template: `

AutoComplete uses ngModel for two-way binding, requires a list of suggestions and a completeMethod to query for the results. The completeMethod gets the query text as event.query property and should update the diff --git a/src/app/showcase/doc/autocomplete/dropdowndoc.ts b/src/app/showcase/doc/autocomplete/dropdowndoc.ts index 106cd76e7da..6f09d4f3683 100644 --- a/src/app/showcase/doc/autocomplete/dropdowndoc.ts +++ b/src/app/showcase/doc/autocomplete/dropdowndoc.ts @@ -10,7 +10,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'dropdown-doc', - template: `

+ template: `

Enabling dropdown property displays a button next to the input field where click behavior of the button is defined using dropdownMode property that takes blank or current as possible diff --git a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts index 4a4bf812566..15a5346737f 100644 --- a/src/app/showcase/doc/autocomplete/forceselectiondoc.ts +++ b/src/app/showcase/doc/autocomplete/forceselectiondoc.ts @@ -9,7 +9,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'force-selection-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/autocomplete/groupeddoc.ts b/src/app/showcase/doc/autocomplete/groupeddoc.ts index 368399bad49..dde4c6fc3ea 100644 --- a/src/app/showcase/doc/autocomplete/groupeddoc.ts +++ b/src/app/showcase/doc/autocomplete/groupeddoc.ts @@ -9,7 +9,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'grouped-doc', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/autocomplete/importdoc.ts b/src/app/showcase/doc/autocomplete/importdoc.ts index 9b57e53253e..1fa573e61a7 100644 --- a/src/app/showcase/doc/autocomplete/importdoc.ts +++ b/src/app/showcase/doc/autocomplete/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/autocomplete/multipledoc.ts b/src/app/showcase/doc/autocomplete/multipledoc.ts index b583b6bd458..f703c55e0ac 100644 --- a/src/app/showcase/doc/autocomplete/multipledoc.ts +++ b/src/app/showcase/doc/autocomplete/multipledoc.ts @@ -9,7 +9,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-multiple-demo', - template: `
+ template: `

Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array.

 diff --git a/src/app/showcase/doc/autocomplete/objectsdoc.ts b/src/app/showcase/doc/autocomplete/objectsdoc.ts index b6e844d3140..60c1448aa0e 100644 --- a/src/app/showcase/doc/autocomplete/objectsdoc.ts +++ b/src/app/showcase/doc/autocomplete/objectsdoc.ts @@ -9,7 +9,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-objects-demo', - template: `
+ template: `

AutoComplete can also work with objects using the field property that defines the label to display as a suggestion. The value passed to the model would still be the object instance of a suggestion. Here is an example with a diff --git a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts index 3b8cfad816d..d0df6b8aeb4 100644 --- a/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts +++ b/src/app/showcase/doc/autocomplete/reactiveformsdoc.ts @@ -10,7 +10,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'reactive-forms-doc', - template: `

+ template: `

AutoComplete can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/autocomplete/styledoc.ts b/src/app/showcase/doc/autocomplete/styledoc.ts index 9e7205e77d4..2fee65c9ce3 100644 --- a/src/app/showcase/doc/autocomplete/styledoc.ts +++ b/src/app/showcase/doc/autocomplete/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/autocomplete/templatedoc.ts b/src/app/showcase/doc/autocomplete/templatedoc.ts index 3e72b38c78a..32c0489ba2e 100644 --- a/src/app/showcase/doc/autocomplete/templatedoc.ts +++ b/src/app/showcase/doc/autocomplete/templatedoc.ts @@ -10,7 +10,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-template-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts index 34ad5fc3e98..fc93f806645 100644 --- a/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts +++ b/src/app/showcase/doc/autocomplete/virtualscrolldoc.ts @@ -8,7 +8,7 @@ interface AutoCompleteCompleteEvent { @Component({ selector: 'autocomplete-virtual-scroll-demo', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/autofocus/basicdoc.ts b/src/app/showcase/doc/autofocus/basicdoc.ts index 25cc9be64cc..193a954b4da 100644 --- a/src/app/showcase/doc/autofocus/basicdoc.ts +++ b/src/app/showcase/doc/autofocus/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'auto-focus-basic-demo', - template: `

+ template: `

AutoFocus is applied to any focusable input element on initial load. It's disabled by default and needs to be enabled manually.

 diff --git a/src/app/showcase/doc/autofocus/importdoc.ts b/src/app/showcase/doc/autofocus/importdoc.ts index 9fa40216ce7..a00bdb74904 100644 --- a/src/app/showcase/doc/autofocus/importdoc.ts +++ b/src/app/showcase/doc/autofocus/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/avatar/avatargroupdoc.ts b/src/app/showcase/doc/avatar/avatargroupdoc.ts index 8015723587b..c7fa660f5f5 100644 --- a/src/app/showcase/doc/avatar/avatargroupdoc.ts +++ b/src/app/showcase/doc/avatar/avatargroupdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'avatar-group-demo', - template: `
+ template: `

Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.

 diff --git a/src/app/showcase/doc/avatar/avatargroupstyledoc.ts b/src/app/showcase/doc/avatar/avatargroupstyledoc.ts index 6352f624b5d..5a96227e47d 100644 --- a/src/app/showcase/doc/avatar/avatargroupstyledoc.ts +++ b/src/app/showcase/doc/avatar/avatargroupstyledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'avatarstyle-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/avatar/avatarstyledoc.ts b/src/app/showcase/doc/avatar/avatarstyledoc.ts index 17e7df46880..84e6cc0249f 100644 --- a/src/app/showcase/doc/avatar/avatarstyledoc.ts +++ b/src/app/showcase/doc/avatar/avatarstyledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'avatarstyle-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/avatar/badgedoc.ts b/src/app/showcase/doc/avatar/badgedoc.ts index 6d06c48346f..0b518cdc91c 100644 --- a/src/app/showcase/doc/avatar/badgedoc.ts +++ b/src/app/showcase/doc/avatar/badgedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'avatar-badge-demo', - template: `
+ template: `

A badge can be added to an Avatar with the Badge directive.

 diff --git a/src/app/showcase/doc/avatar/icondoc.ts b/src/app/showcase/doc/avatar/icondoc.ts index b3f936bfa5c..cb139710929 100644 --- a/src/app/showcase/doc/avatar/icondoc.ts +++ b/src/app/showcase/doc/avatar/icondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'avatar-icon-demo', - template: `
+ template: `

A font icon is displayed as an Avatar with the icon property.

 diff --git a/src/app/showcase/doc/avatar/imagedoc.ts b/src/app/showcase/doc/avatar/imagedoc.ts index 8e988257ee2..375d5925997 100644 --- a/src/app/showcase/doc/avatar/imagedoc.ts +++ b/src/app/showcase/doc/avatar/imagedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'avatar-image-demo', - template: `
+ template: `

Use the image property to display an image as an Avatar.

 diff --git a/src/app/showcase/doc/avatar/importdoc.ts b/src/app/showcase/doc/avatar/importdoc.ts index 438055e772d..89291dfcce3 100644 --- a/src/app/showcase/doc/avatar/importdoc.ts +++ b/src/app/showcase/doc/avatar/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/avatar/labeldoc.ts b/src/app/showcase/doc/avatar/labeldoc.ts index e10c3c6be84..27fbc3fa541 100644 --- a/src/app/showcase/doc/avatar/labeldoc.ts +++ b/src/app/showcase/doc/avatar/labeldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'avatar-label-demo', - template: `
+ template: `

A letter Avatar is defined with the label property.

 diff --git a/src/app/showcase/doc/avatar/shapedoc.ts b/src/app/showcase/doc/avatar/shapedoc.ts index 96b54def3b1..330e1680e6c 100644 --- a/src/app/showcase/doc/avatar/shapedoc.ts +++ b/src/app/showcase/doc/avatar/shapedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'avatar-shape-demo', - template: `
+ template: `

Avatar comes in two different styles specified with the shape property, square is the default and circle is the alternative.

 diff --git a/src/app/showcase/doc/avatar/sizedoc.ts b/src/app/showcase/doc/avatar/sizedoc.ts index 293000db1bc..276c1e68332 100644 --- a/src/app/showcase/doc/avatar/sizedoc.ts +++ b/src/app/showcase/doc/avatar/sizedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'avatar-size-demo', - template: `
+ template: `

size property defines the size of the Avatar with large and xlarge as possible values.

 diff --git a/src/app/showcase/doc/avatar/templatedoc.ts b/src/app/showcase/doc/avatar/templatedoc.ts index 6db00c71c3f..62ea441442b 100644 --- a/src/app/showcase/doc/avatar/templatedoc.ts +++ b/src/app/showcase/doc/avatar/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'avatar-template-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/badge/basicdoc.ts b/src/app/showcase/doc/badge/basicdoc.ts index e66d8a1a9d0..93736346c25 100644 --- a/src/app/showcase/doc/badge/basicdoc.ts +++ b/src/app/showcase/doc/badge/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'badge-basic-demo', - template: `
+ template: `

Content of the badge is specified using the value property.

 diff --git a/src/app/showcase/doc/badge/buttondoc.ts b/src/app/showcase/doc/badge/buttondoc.ts index e7d16f9f21c..95b24997dd5 100644 --- a/src/app/showcase/doc/badge/buttondoc.ts +++ b/src/app/showcase/doc/badge/buttondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'badge-button-demo', - template: `
+ template: `

Buttons have built-in support for badges to display a badge inline.

 diff --git a/src/app/showcase/doc/badge/directivedoc.ts b/src/app/showcase/doc/badge/directivedoc.ts index 2ef8284a0ab..ad8d748c28c 100644 --- a/src/app/showcase/doc/badge/directivedoc.ts +++ b/src/app/showcase/doc/badge/directivedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'badge-directive-demo', - template: `
+ template: `

Content of the badge is specified using the value property.

 diff --git a/src/app/showcase/doc/badge/importdoc.ts b/src/app/showcase/doc/badge/importdoc.ts index 296efde66fd..34ec0b2e13f 100644 --- a/src/app/showcase/doc/badge/importdoc.ts +++ b/src/app/showcase/doc/badge/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/badge/positiondoc.ts b/src/app/showcase/doc/badge/positiondoc.ts index 56fcc9b5a8a..333c84fea8e 100644 --- a/src/app/showcase/doc/badge/positiondoc.ts +++ b/src/app/showcase/doc/badge/positiondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'badge-position-demo', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/badge/severitydoc.ts b/src/app/showcase/doc/badge/severitydoc.ts index 5e347925dba..41400565ef9 100644 --- a/src/app/showcase/doc/badge/severitydoc.ts +++ b/src/app/showcase/doc/badge/severitydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'badge-severity-demo', - template: `
+ template: `

Severity defines the color of the badge, possible values are success, info, warning and danger

 diff --git a/src/app/showcase/doc/badge/sizedoc.ts b/src/app/showcase/doc/badge/sizedoc.ts index b8b15159d6c..08b68903d29 100644 --- a/src/app/showcase/doc/badge/sizedoc.ts +++ b/src/app/showcase/doc/badge/sizedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'badge-size-demo', - template: `
+ template: `

Badge sizes are adjusted with the size property that accepts large and xlarge as the possible alternatives to the default size. Currently sizes only apply to component mode.

 diff --git a/src/app/showcase/doc/badge/styledoc.ts b/src/app/showcase/doc/badge/styledoc.ts index e60d558d8a3..4dd824b689c 100644 --- a/src/app/showcase/doc/badge/styledoc.ts +++ b/src/app/showcase/doc/badge/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/blockui/basicdoc.ts b/src/app/showcase/doc/blockui/basicdoc.ts index 76c815e088c..0de02de166f 100644 --- a/src/app/showcase/doc/blockui/basicdoc.ts +++ b/src/app/showcase/doc/blockui/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'block-ui-basic-demo', - template: `
+ template: `

The element to block should be placed as a child of BlockUI and blocked property is required to control the state.

 diff --git a/src/app/showcase/doc/blockui/documentdoc.ts b/src/app/showcase/doc/blockui/documentdoc.ts index b570f79665e..fd01e31614e 100644 --- a/src/app/showcase/doc/blockui/documentdoc.ts +++ b/src/app/showcase/doc/blockui/documentdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'block-ui-document-demo', - template: `
+ template: `

Enabling fullScreen property controls the document.

 diff --git a/src/app/showcase/doc/blockui/importdoc.ts b/src/app/showcase/doc/blockui/importdoc.ts index aea0d86adb9..574b618d5d7 100644 --- a/src/app/showcase/doc/blockui/importdoc.ts +++ b/src/app/showcase/doc/blockui/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `

Content of the badge is specified using the value property.

 diff --git a/src/app/showcase/doc/blockui/styledoc.ts b/src/app/showcase/doc/blockui/styledoc.ts index b5af2574713..2fbaba1c33b 100644 --- a/src/app/showcase/doc/blockui/styledoc.ts +++ b/src/app/showcase/doc/blockui/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/breadcrumb/basicdoc.ts b/src/app/showcase/doc/breadcrumb/basicdoc.ts index 781ccd5f1d8..2dbe81b04f5 100644 --- a/src/app/showcase/doc/breadcrumb/basicdoc.ts +++ b/src/app/showcase/doc/breadcrumb/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'breadcrumb-basic-demo', - template: `
+ template: `

Breadcrumb provides contextual information about page hierarchy.

 diff --git a/src/app/showcase/doc/breadcrumb/importdoc.ts b/src/app/showcase/doc/breadcrumb/importdoc.ts index 73596709e34..e34acf624c5 100644 --- a/src/app/showcase/doc/breadcrumb/importdoc.ts +++ b/src/app/showcase/doc/breadcrumb/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/breadcrumb/styledoc.ts b/src/app/showcase/doc/breadcrumb/styledoc.ts index 816e63eab35..ef52f8db710 100644 --- a/src/app/showcase/doc/breadcrumb/styledoc.ts +++ b/src/app/showcase/doc/breadcrumb/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/button/badgedoc.ts b/src/app/showcase/doc/button/badgedoc.ts index f80215fc500..92831bc2e7d 100644 --- a/src/app/showcase/doc/button/badgedoc.ts +++ b/src/app/showcase/doc/button/badgedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-badge-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/button/basicdoc.ts b/src/app/showcase/doc/button/basicdoc.ts index ea661ddb72d..1993d9ee1e8 100644 --- a/src/app/showcase/doc/button/basicdoc.ts +++ b/src/app/showcase/doc/button/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-basic-demo', - template: `
+ template: `

Text to display on a button is defined with the label property.

 diff --git a/src/app/showcase/doc/button/buttonsetdoc.ts b/src/app/showcase/doc/button/buttonsetdoc.ts index 7e0dac500e9..eb38f44efde 100644 --- a/src/app/showcase/doc/button/buttonsetdoc.ts +++ b/src/app/showcase/doc/button/buttonsetdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-set-demo', - template: `
+ template: `

Multiple buttons are grouped when wrapped inside an element with p-buttonset class.

 diff --git a/src/app/showcase/doc/button/directivedoc.ts b/src/app/showcase/doc/button/directivedoc.ts index 1d8358e9667..775239c4f3d 100644 --- a/src/app/showcase/doc/button/directivedoc.ts +++ b/src/app/showcase/doc/button/directivedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-directive-demo', - template: `
+ template: `

Button can also be used as directive using pButton. In contrary of p-button component, pButton directive does not utilize ripple effect, use pRipple directive to enable ripple.

 diff --git a/src/app/showcase/doc/button/disableddoc.ts b/src/app/showcase/doc/button/disableddoc.ts index 6feced2253d..a112880c952 100644 --- a/src/app/showcase/doc/button/disableddoc.ts +++ b/src/app/showcase/doc/button/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-disabled-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/button/iconsdoc.ts b/src/app/showcase/doc/button/iconsdoc.ts index 81f6670ec41..306e298f36b 100644 --- a/src/app/showcase/doc/button/iconsdoc.ts +++ b/src/app/showcase/doc/button/iconsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-icons-demo', - template: `
+ template: `

Icon of a button is specified with icon property and position is configured using iconPos attribute.

 diff --git a/src/app/showcase/doc/button/iconsonlydoc.ts b/src/app/showcase/doc/button/iconsonlydoc.ts index 13354917639..e861644aaf5 100644 --- a/src/app/showcase/doc/button/iconsonlydoc.ts +++ b/src/app/showcase/doc/button/iconsonlydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-icon-only-demo', - template: `
+ template: `

Buttons can have icons without labels.

 diff --git a/src/app/showcase/doc/button/importdoc.ts b/src/app/showcase/doc/button/importdoc.ts index 3b4103f055b..f6feb06ee37 100644 --- a/src/app/showcase/doc/button/importdoc.ts +++ b/src/app/showcase/doc/button/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/button/linkdoc.ts b/src/app/showcase/doc/button/linkdoc.ts index 4cdfe74b1b9..a47a883b029 100644 --- a/src/app/showcase/doc/button/linkdoc.ts +++ b/src/app/showcase/doc/button/linkdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-link-demo', - template: `
+ template: `

A button can be rendered as a link as well.

 diff --git a/src/app/showcase/doc/button/loadingdoc.ts b/src/app/showcase/doc/button/loadingdoc.ts index 7e6081c3367..b475a2cf500 100644 --- a/src/app/showcase/doc/button/loadingdoc.ts +++ b/src/app/showcase/doc/button/loadingdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-loading-demo', - template: `
+ template: `

Busy state is controlled with the loading property.

 diff --git a/src/app/showcase/doc/button/outlineddoc.ts b/src/app/showcase/doc/button/outlineddoc.ts index 5aa5b83184a..4cccd274810 100644 --- a/src/app/showcase/doc/button/outlineddoc.ts +++ b/src/app/showcase/doc/button/outlineddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-outlined-demo', - template: `
+ template: `

Outlined buttons display a border without a background initially.

 diff --git a/src/app/showcase/doc/button/raiseddoc.ts b/src/app/showcase/doc/button/raiseddoc.ts index fc4855cb956..5d485a01e19 100644 --- a/src/app/showcase/doc/button/raiseddoc.ts +++ b/src/app/showcase/doc/button/raiseddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-raised-demo', - template: `
+ template: `

Raised buttons display a shadow to indicate elevation.

 diff --git a/src/app/showcase/doc/button/raisedtextdoc.ts b/src/app/showcase/doc/button/raisedtextdoc.ts index 316b89f6c16..eb11437d3d5 100644 --- a/src/app/showcase/doc/button/raisedtextdoc.ts +++ b/src/app/showcase/doc/button/raisedtextdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-raisedtext-demo', - template: `
+ template: `

Text buttons can be displayed as raised for elevation.

 diff --git a/src/app/showcase/doc/button/roundeddoc.ts b/src/app/showcase/doc/button/roundeddoc.ts index fa9d9efea49..a93f4e472ff 100644 --- a/src/app/showcase/doc/button/roundeddoc.ts +++ b/src/app/showcase/doc/button/roundeddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-rounded-demo', - template: `
+ template: `

Rounded buttons have a circular border radius.

 diff --git a/src/app/showcase/doc/button/severitydoc.ts b/src/app/showcase/doc/button/severitydoc.ts index b34b99155a1..b47b987c63d 100644 --- a/src/app/showcase/doc/button/severitydoc.ts +++ b/src/app/showcase/doc/button/severitydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-severity-demo', - template: `
+ template: `

Severity defines the type of button.

 diff --git a/src/app/showcase/doc/button/sizesdoc.ts b/src/app/showcase/doc/button/sizesdoc.ts index 5f981350b95..d6191afd751 100644 --- a/src/app/showcase/doc/button/sizesdoc.ts +++ b/src/app/showcase/doc/button/sizesdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-sizes-demo', - template: `
+ template: `

Button provides small and large sizes as alternatives to the standard.

 diff --git a/src/app/showcase/doc/button/styledoc.ts b/src/app/showcase/doc/button/styledoc.ts index fa4c0764578..fb37d4cb8f7 100644 --- a/src/app/showcase/doc/button/styledoc.ts +++ b/src/app/showcase/doc/button/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/button/templatedoc.ts b/src/app/showcase/doc/button/templatedoc.ts index c5c7cd5a9cb..b5cf4d6fe22 100644 --- a/src/app/showcase/doc/button/templatedoc.ts +++ b/src/app/showcase/doc/button/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-template-demo', - template: `
+ template: `

Custom content inside a button is defined as children.

 diff --git a/src/app/showcase/doc/button/textdoc.ts b/src/app/showcase/doc/button/textdoc.ts index 040358f5cc6..159338b0516 100644 --- a/src/app/showcase/doc/button/textdoc.ts +++ b/src/app/showcase/doc/button/textdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-text-demo', - template: `
+ template: `

Text buttons are displayed as textual elements.

 diff --git a/src/app/showcase/doc/calendar/basicdoc.ts b/src/app/showcase/doc/calendar/basicdoc.ts index 69330a1e552..a5976567e31 100644 --- a/src/app/showcase/doc/calendar/basicdoc.ts +++ b/src/app/showcase/doc/calendar/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-basic-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/calendar/buttonbardoc.ts b/src/app/showcase/doc/calendar/buttonbardoc.ts index e72b02abc03..b97f23f84f6 100644 --- a/src/app/showcase/doc/calendar/buttonbardoc.ts +++ b/src/app/showcase/doc/calendar/buttonbardoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-buttonbar-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/calendar/datetemplatedoc.ts b/src/app/showcase/doc/calendar/datetemplatedoc.ts index eb578611416..61fde1495a6 100644 --- a/src/app/showcase/doc/calendar/datetemplatedoc.ts +++ b/src/app/showcase/doc/calendar/datetemplatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-datetemplate-demo', - template: `
+ template: `

Custom content can be placed inside date cells with the ng-template property that takes a Date as a parameter.

 diff --git a/src/app/showcase/doc/calendar/eventsdoc.ts b/src/app/showcase/doc/calendar/eventsdoc.ts index 7386f366f0c..a193b741ec7 100644 --- a/src/app/showcase/doc/calendar/eventsdoc.ts +++ b/src/app/showcase/doc/calendar/eventsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'events-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/calendar/formatdoc.ts b/src/app/showcase/doc/calendar/formatdoc.ts index b5ae659a879..7d3c36dea2c 100644 --- a/src/app/showcase/doc/calendar/formatdoc.ts +++ b/src/app/showcase/doc/calendar/formatdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-format-demo', - template: `
+ template: `

Default date format is mm/dd/yy which can be customized using the dateFormat property. Following options can be a part of the format.

    diff --git a/src/app/showcase/doc/calendar/icondoc.ts b/src/app/showcase/doc/calendar/icondoc.ts index a0723bb0a3d..00379598408 100644 --- a/src/app/showcase/doc/calendar/icondoc.ts +++ b/src/app/showcase/doc/calendar/icondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-icon-demo', - template: `
    + template: `

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

     diff --git a/src/app/showcase/doc/calendar/importdoc.ts b/src/app/showcase/doc/calendar/importdoc.ts index 2fe09e5da5c..f1307fa9e3f 100644 --- a/src/app/showcase/doc/calendar/importdoc.ts +++ b/src/app/showcase/doc/calendar/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
    + template: `
    ` diff --git a/src/app/showcase/doc/calendar/inlinedoc.ts b/src/app/showcase/doc/calendar/inlinedoc.ts index 9f053057fc3..48408a3e06f 100644 --- a/src/app/showcase/doc/calendar/inlinedoc.ts +++ b/src/app/showcase/doc/calendar/inlinedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-inline-demo', - template: `
    + template: `

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

     diff --git a/src/app/showcase/doc/calendar/localedoc.ts b/src/app/showcase/doc/calendar/localedoc.ts index 6a945a43d23..f00fe98ae2d 100644 --- a/src/app/showcase/doc/calendar/localedoc.ts +++ b/src/app/showcase/doc/calendar/localedoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'calendar-local-demo', - template: `
    + template: `

    Locale for different languages and formats is defined globally, refer to the PrimeNG Locale configuration for more information.

     diff --git a/src/app/showcase/doc/calendar/methodsdoc.ts b/src/app/showcase/doc/calendar/methodsdoc.ts index c9fefb92c9b..ce2738484d4 100644 --- a/src/app/showcase/doc/calendar/methodsdoc.ts +++ b/src/app/showcase/doc/calendar/methodsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'methods-doc', - template: `
    + template: `
diff --git a/src/app/showcase/doc/calendar/monthdoc.ts b/src/app/showcase/doc/calendar/monthdoc.ts index 76506a5daea..bf0262d2f68 100644 --- a/src/app/showcase/doc/calendar/monthdoc.ts +++ b/src/app/showcase/doc/calendar/monthdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-month-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/calendar/multipledoc.ts b/src/app/showcase/doc/calendar/multipledoc.ts index 87ef30c2bef..e23c8c9bcd6 100644 --- a/src/app/showcase/doc/calendar/multipledoc.ts +++ b/src/app/showcase/doc/calendar/multipledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-multiple-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/calendar/multiplemonths.doc.ts b/src/app/showcase/doc/calendar/multiplemonths.doc.ts index 7f41615ede3..3fdd7560988 100644 --- a/src/app/showcase/doc/calendar/multiplemonths.doc.ts +++ b/src/app/showcase/doc/calendar/multiplemonths.doc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-multiplemonths-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/calendar/propsdoc.ts b/src/app/showcase/doc/calendar/propsdoc.ts index 07b0abd6993..4711cd7a969 100644 --- a/src/app/showcase/doc/calendar/propsdoc.ts +++ b/src/app/showcase/doc/calendar/propsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'props-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/calendar/rangedoc.ts b/src/app/showcase/doc/calendar/rangedoc.ts index 0f1cb193b5b..c9cdca20e2f 100644 --- a/src/app/showcase/doc/calendar/rangedoc.ts +++ b/src/app/showcase/doc/calendar/rangedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-range-demo', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/calendar/reactiveformsdoc.ts b/src/app/showcase/doc/calendar/reactiveformsdoc.ts index d76b9489eb6..0d3e17c763f 100644 --- a/src/app/showcase/doc/calendar/reactiveformsdoc.ts +++ b/src/app/showcase/doc/calendar/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

Calendar can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/calendar/styledoc.ts b/src/app/showcase/doc/calendar/styledoc.ts index e3886c3523d..70fd2f75b97 100644 --- a/src/app/showcase/doc/calendar/styledoc.ts +++ b/src/app/showcase/doc/calendar/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/calendar/templatedoc.ts b/src/app/showcase/doc/calendar/templatedoc.ts index b5d2163afa6..e9b62bb3e8d 100644 --- a/src/app/showcase/doc/calendar/templatedoc.ts +++ b/src/app/showcase/doc/calendar/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-template-demo', - template: `
+ template: `

Calendar UI accepts custom content using header and footer templates.

 diff --git a/src/app/showcase/doc/calendar/templatesdoc.ts b/src/app/showcase/doc/calendar/templatesdoc.ts index f2a81dc5f58..d5eaaa60773 100644 --- a/src/app/showcase/doc/calendar/templatesdoc.ts +++ b/src/app/showcase/doc/calendar/templatesdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'templates-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/calendar/timedoc.ts b/src/app/showcase/doc/calendar/timedoc.ts index b65e019b0c6..4e667b6996e 100644 --- a/src/app/showcase/doc/calendar/timedoc.ts +++ b/src/app/showcase/doc/calendar/timedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-time-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/calendar/touchuidoc.ts b/src/app/showcase/doc/calendar/touchuidoc.ts index 26ab571cd10..af8e6432385 100644 --- a/src/app/showcase/doc/calendar/touchuidoc.ts +++ b/src/app/showcase/doc/calendar/touchuidoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-touchui-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/calendar/yeardoc.ts b/src/app/showcase/doc/calendar/yeardoc.ts index d155f14cfa7..bda1ed1ae78 100644 --- a/src/app/showcase/doc/calendar/yeardoc.ts +++ b/src/app/showcase/doc/calendar/yeardoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'calendar-year-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/card/advanceddoc.ts b/src/app/showcase/doc/card/advanceddoc.ts index 4c1916e38f6..d04068a6e6b 100644 --- a/src/app/showcase/doc/card/advanceddoc.ts +++ b/src/app/showcase/doc/card/advanceddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'card-advanced-demo', - template: `
+ template: `

Card content can be customized further with subHeader, header and footer properties.

 diff --git a/src/app/showcase/doc/card/basicdoc.ts b/src/app/showcase/doc/card/basicdoc.ts index 7cb98e8b918..c2711f5a08c 100644 --- a/src/app/showcase/doc/card/basicdoc.ts +++ b/src/app/showcase/doc/card/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'card-basic-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/card/importdoc.ts b/src/app/showcase/doc/card/importdoc.ts index b06f141c89e..738a8cedabb 100644 --- a/src/app/showcase/doc/card/importdoc.ts +++ b/src/app/showcase/doc/card/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/card/styledoc.ts b/src/app/showcase/doc/card/styledoc.ts index 257ea48cb99..aa73bff31ae 100644 --- a/src/app/showcase/doc/card/styledoc.ts +++ b/src/app/showcase/doc/card/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/carousel/basicdoc.ts b/src/app/showcase/doc/carousel/basicdoc.ts index 7d8273f9bc3..d709f0d492a 100644 --- a/src/app/showcase/doc/carousel/basicdoc.ts +++ b/src/app/showcase/doc/carousel/basicdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'carousel-basic-demo', - template: `
+ template: `

Carousel requires a collection of items as its value along with a template to render each item.

 diff --git a/src/app/showcase/doc/carousel/circulardoc.ts b/src/app/showcase/doc/carousel/circulardoc.ts index d0f80f1b9f8..f77b17dbd40 100644 --- a/src/app/showcase/doc/carousel/circulardoc.ts +++ b/src/app/showcase/doc/carousel/circulardoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'carousel-circular-demo', - template: `
+ template: `

When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling circular property needs to be added which is enabled automatically in auto play mode.

 diff --git a/src/app/showcase/doc/carousel/importdoc.ts b/src/app/showcase/doc/carousel/importdoc.ts index 773c3c090ca..6c90a0e450b 100644 --- a/src/app/showcase/doc/carousel/importdoc.ts +++ b/src/app/showcase/doc/carousel/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/carousel/numscrolldoc.ts b/src/app/showcase/doc/carousel/numscrolldoc.ts index d36ef531df0..bd6ec49fe32 100644 --- a/src/app/showcase/doc/carousel/numscrolldoc.ts +++ b/src/app/showcase/doc/carousel/numscrolldoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'carousel-num-scroll-demo', - template: `
+ template: `

Number of items to scroll is specified with the numScroll option.

 diff --git a/src/app/showcase/doc/carousel/responsivedoc.ts b/src/app/showcase/doc/carousel/responsivedoc.ts index 0ded94bd15e..d12baed264a 100644 --- a/src/app/showcase/doc/carousel/responsivedoc.ts +++ b/src/app/showcase/doc/carousel/responsivedoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'responsive-doc', - template: `
+ template: `

Carousel supports specific configuration per screen size with the responsiveOptions property that takes an array of objects where each object defines the max-width breakpoint, numVisible for the number of items diff --git a/src/app/showcase/doc/carousel/styledoc.ts b/src/app/showcase/doc/carousel/styledoc.ts index 3566845ecc0..2c251df58a9 100644 --- a/src/app/showcase/doc/carousel/styledoc.ts +++ b/src/app/showcase/doc/carousel/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `

+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/carousel/templatedoc.ts b/src/app/showcase/doc/carousel/templatedoc.ts index 0378509f686..cb9ae25da7c 100644 --- a/src/app/showcase/doc/carousel/templatedoc.ts +++ b/src/app/showcase/doc/carousel/templatedoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'carousel-template-demo', - template: `
+ template: `

Custom content projection is available using the header and footer templates.

 diff --git a/src/app/showcase/doc/carousel/verticaldoc.ts b/src/app/showcase/doc/carousel/verticaldoc.ts index 2e667196a3d..7ae6567f5f3 100644 --- a/src/app/showcase/doc/carousel/verticaldoc.ts +++ b/src/app/showcase/doc/carousel/verticaldoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'carousel-vertical-demo', - template: `
+ template: `

To create a vertical Carousel, orientation needs to be set to vertical along with a verticalViewPortHeight.

 diff --git a/src/app/showcase/doc/cascadeselect/basicdoc.ts b/src/app/showcase/doc/cascadeselect/basicdoc.ts index b6d0f69a18a..afe379360b8 100644 --- a/src/app/showcase/doc/cascadeselect/basicdoc.ts +++ b/src/app/showcase/doc/cascadeselect/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'cascade-select-basic-demo', - template: `
+ template: `

CascadeSelect requires a value to bind and a collection of arbitrary objects with a nested hierarchy. optionGroupLabel is used for the text of a category and optionGroupChildren is to define the children of the category. diff --git a/src/app/showcase/doc/cascadeselect/importdoc.ts b/src/app/showcase/doc/cascadeselect/importdoc.ts index 98bc4a91a8a..03e7dcda326 100644 --- a/src/app/showcase/doc/cascadeselect/importdoc.ts +++ b/src/app/showcase/doc/cascadeselect/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts b/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts index 9a7753a080b..548c4d70564 100644 --- a/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts +++ b/src/app/showcase/doc/cascadeselect/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

CascadeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/cascadeselect/styledoc.ts b/src/app/showcase/doc/cascadeselect/styledoc.ts index ebbd4101d1e..adfdb68e471 100644 --- a/src/app/showcase/doc/cascadeselect/styledoc.ts +++ b/src/app/showcase/doc/cascadeselect/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

diff --git a/src/app/showcase/doc/cascadeselect/templatedoc.ts b/src/app/showcase/doc/cascadeselect/templatedoc.ts index 57d868a897c..9173c86e370 100644 --- a/src/app/showcase/doc/cascadeselect/templatedoc.ts +++ b/src/app/showcase/doc/cascadeselect/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'cascade-select-template-demo', - template: `
+ template: `

CascadeSelect is used as a controlled component with ngModel property along with an options collection. To define the label of a group optionGroupLabel property is needed and also optionGroupChildren is diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts index 93ec2962d25..dbbafcf7b59 100644 --- a/src/app/showcase/doc/chart/basicdoc.ts +++ b/src/app/showcase/doc/chart/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-basic-demo', - template: `

+ template: `

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 diff --git a/src/app/showcase/doc/chart/chartjsdoc.ts b/src/app/showcase/doc/chart/chartjsdoc.ts index 6296d58b18b..f5d2de94a79 100644 --- a/src/app/showcase/doc/chart/chartjsdoc.ts +++ b/src/app/showcase/doc/chart/chartjsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chartjs-doc', - template: `

+ template: `

To begin with, first you must install the charts.js package using npm and then include it in your project. An example with CLI would be;

 diff --git a/src/app/showcase/doc/chart/combodoc.ts b/src/app/showcase/doc/chart/combodoc.ts index 83c4c0eccf2..d2ebcc52b7f 100644 --- a/src/app/showcase/doc/chart/combodoc.ts +++ b/src/app/showcase/doc/chart/combodoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-combo-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/doughnutdoc.ts b/src/app/showcase/doc/chart/doughnutdoc.ts index ae52c63f22a..b6378303020 100644 --- a/src/app/showcase/doc/chart/doughnutdoc.ts +++ b/src/app/showcase/doc/chart/doughnutdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-doughnut-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/horizontalbardoc.ts b/src/app/showcase/doc/chart/horizontalbardoc.ts index 710c9168857..e7298f3ff36 100644 --- a/src/app/showcase/doc/chart/horizontalbardoc.ts +++ b/src/app/showcase/doc/chart/horizontalbardoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-horizontal-bar-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/importdoc.ts b/src/app/showcase/doc/chart/importdoc.ts index 3020e31b235..23347b6f4ad 100644 --- a/src/app/showcase/doc/chart/importdoc.ts +++ b/src/app/showcase/doc/chart/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/chart/linedoc.ts b/src/app/showcase/doc/chart/linedoc.ts index 5a92f868f53..34cc1d36870 100644 --- a/src/app/showcase/doc/chart/linedoc.ts +++ b/src/app/showcase/doc/chart/linedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-line-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/linestyledoc.ts b/src/app/showcase/doc/chart/linestyledoc.ts index 4da2e0ee5ac..140c7bca86f 100644 --- a/src/app/showcase/doc/chart/linestyledoc.ts +++ b/src/app/showcase/doc/chart/linestyledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-line-style-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/methodsdoc.ts b/src/app/showcase/doc/chart/methodsdoc.ts index 91f300e7e55..ac72f7c87b6 100644 --- a/src/app/showcase/doc/chart/methodsdoc.ts +++ b/src/app/showcase/doc/chart/methodsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'methods-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/chart/multiaxisdoc.ts b/src/app/showcase/doc/chart/multiaxisdoc.ts index 60395ba3ca8..6142ba4b1c2 100644 --- a/src/app/showcase/doc/chart/multiaxisdoc.ts +++ b/src/app/showcase/doc/chart/multiaxisdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-multi-axis-demo', - template: `
+ template: `

Multiple axes can be added using the scales option.

 diff --git a/src/app/showcase/doc/chart/piedoc.ts b/src/app/showcase/doc/chart/piedoc.ts index 90a24813b1e..9f90ad58e4d 100644 --- a/src/app/showcase/doc/chart/piedoc.ts +++ b/src/app/showcase/doc/chart/piedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-pie-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/polarareadoc.ts b/src/app/showcase/doc/chart/polarareadoc.ts index 55cc962cfe3..36cd310fb6e 100644 --- a/src/app/showcase/doc/chart/polarareadoc.ts +++ b/src/app/showcase/doc/chart/polarareadoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-polar-area-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/propsdoc.ts b/src/app/showcase/doc/chart/propsdoc.ts index 9f7ca7521a0..aa05b65f9ba 100644 --- a/src/app/showcase/doc/chart/propsdoc.ts +++ b/src/app/showcase/doc/chart/propsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'props-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/chart/radardoc.ts b/src/app/showcase/doc/chart/radardoc.ts index 1f2413b4a74..248e507d299 100644 --- a/src/app/showcase/doc/chart/radardoc.ts +++ b/src/app/showcase/doc/chart/radardoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-radar-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/stackedbardoc.ts b/src/app/showcase/doc/chart/stackedbardoc.ts index aa85b86eddf..84675dda12f 100644 --- a/src/app/showcase/doc/chart/stackedbardoc.ts +++ b/src/app/showcase/doc/chart/stackedbardoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-stacked-bar-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chart/verticalbardoc.ts b/src/app/showcase/doc/chart/verticalbardoc.ts index 486b24d8293..caac8563636 100644 --- a/src/app/showcase/doc/chart/verticalbardoc.ts +++ b/src/app/showcase/doc/chart/verticalbardoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chart-vertical-bar-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/checkbox/basicdoc.ts b/src/app/showcase/doc/checkbox/basicdoc.ts index 69916c6ebcb..0b07d5714cc 100644 --- a/src/app/showcase/doc/checkbox/basicdoc.ts +++ b/src/app/showcase/doc/checkbox/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'checkbox-basic-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/checkbox/disableddoc.ts b/src/app/showcase/doc/checkbox/disableddoc.ts index 5a47cc74bbd..6e99fcf04fa 100644 --- a/src/app/showcase/doc/checkbox/disableddoc.ts +++ b/src/app/showcase/doc/checkbox/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'checkbox-disabled-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/checkbox/dynamicdoc.ts b/src/app/showcase/doc/checkbox/dynamicdoc.ts index 0083e4869e1..bd2336630ff 100644 --- a/src/app/showcase/doc/checkbox/dynamicdoc.ts +++ b/src/app/showcase/doc/checkbox/dynamicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'checkbox-dynamic-demo', - template: `
+ template: `

Checkboxes can be generated using a list of values.

 diff --git a/src/app/showcase/doc/checkbox/importdoc.ts b/src/app/showcase/doc/checkbox/importdoc.ts index 3608ef26afc..0ea8b84930b 100644 --- a/src/app/showcase/doc/checkbox/importdoc.ts +++ b/src/app/showcase/doc/checkbox/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/checkbox/labeldoc.ts b/src/app/showcase/doc/checkbox/labeldoc.ts index 9d626c545ba..e5e330a338a 100644 --- a/src/app/showcase/doc/checkbox/labeldoc.ts +++ b/src/app/showcase/doc/checkbox/labeldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'checkbox-label-demo', - template: `
+ template: `

The label attribute provides a label text for the checkbox. This label is also clickable and toggles the checked state.

 diff --git a/src/app/showcase/doc/checkbox/multipledoc.ts b/src/app/showcase/doc/checkbox/multipledoc.ts index 6b9a3ee98d8..3f56564e85d 100644 --- a/src/app/showcase/doc/checkbox/multipledoc.ts +++ b/src/app/showcase/doc/checkbox/multipledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'checkbox-multiple-demo', - template: `
+ template: `

Multiple checkboxes can be grouped together.

 diff --git a/src/app/showcase/doc/checkbox/reactiveformsdoc.ts b/src/app/showcase/doc/checkbox/reactiveformsdoc.ts index 2aa87676d63..539f88b7ddf 100644 --- a/src/app/showcase/doc/checkbox/reactiveformsdoc.ts +++ b/src/app/showcase/doc/checkbox/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

Checkbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/checkbox/styledoc.ts b/src/app/showcase/doc/checkbox/styledoc.ts index a303b9b822b..b4fd580c152 100644 --- a/src/app/showcase/doc/checkbox/styledoc.ts +++ b/src/app/showcase/doc/checkbox/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/chip/basicdoc.ts b/src/app/showcase/doc/chip/basicdoc.ts index e7a8646d7b6..61c7e9ec1e3 100644 --- a/src/app/showcase/doc/chip/basicdoc.ts +++ b/src/app/showcase/doc/chip/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chip-basic-demo', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/chip/icondoc.ts b/src/app/showcase/doc/chip/icondoc.ts index 5b885c7c5dd..e7da7e49b9b 100644 --- a/src/app/showcase/doc/chip/icondoc.ts +++ b/src/app/showcase/doc/chip/icondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chip-icon-demo', - template: `

+ template: `

A font icon next to the label can be displayed with the icon property.

 diff --git a/src/app/showcase/doc/chip/imagedoc.ts b/src/app/showcase/doc/chip/imagedoc.ts index 607ac01ff78..74aaa2c748a 100644 --- a/src/app/showcase/doc/chip/imagedoc.ts +++ b/src/app/showcase/doc/chip/imagedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chip-image-demo', - template: `
+ template: `

The image property is used to display an image like an avatar.

 diff --git a/src/app/showcase/doc/chip/importdoc.ts b/src/app/showcase/doc/chip/importdoc.ts index f72f9b6b3e8..20ade8f32f2 100644 --- a/src/app/showcase/doc/chip/importdoc.ts +++ b/src/app/showcase/doc/chip/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/chip/styledoc.ts b/src/app/showcase/doc/chip/styledoc.ts index 9e5c442bb24..41be82df138 100644 --- a/src/app/showcase/doc/chip/styledoc.ts +++ b/src/app/showcase/doc/chip/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/chip/templatedoc.ts b/src/app/showcase/doc/chip/templatedoc.ts index a385402ba78..6ad53050aa1 100644 --- a/src/app/showcase/doc/chip/templatedoc.ts +++ b/src/app/showcase/doc/chip/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chip-template-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chips/basicdoc.ts b/src/app/showcase/doc/chips/basicdoc.ts index 7a686c98cf1..6d04d49a454 100644 --- a/src/app/showcase/doc/chips/basicdoc.ts +++ b/src/app/showcase/doc/chips/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chips-basic-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chips/commaseperator.doc.ts b/src/app/showcase/doc/chips/commaseperator.doc.ts index 04b81fd3b22..f00394b26d9 100644 --- a/src/app/showcase/doc/chips/commaseperator.doc.ts +++ b/src/app/showcase/doc/chips/commaseperator.doc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chips-comma-seperator-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chips/importdoc.ts b/src/app/showcase/doc/chips/importdoc.ts index 5e444d2e871..2cd85554dea 100644 --- a/src/app/showcase/doc/chips/importdoc.ts +++ b/src/app/showcase/doc/chips/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/chips/reactiveformsdoc.ts b/src/app/showcase/doc/chips/reactiveformsdoc.ts index 00f0897ef41..f078c554bca 100644 --- a/src/app/showcase/doc/chips/reactiveformsdoc.ts +++ b/src/app/showcase/doc/chips/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

Chips can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/chips/regexpseperator.doc.ts b/src/app/showcase/doc/chips/regexpseperator.doc.ts index 5bc20040286..421a817d196 100644 --- a/src/app/showcase/doc/chips/regexpseperator.doc.ts +++ b/src/app/showcase/doc/chips/regexpseperator.doc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chips-reg-exp-seperator-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/chips/styledoc.ts b/src/app/showcase/doc/chips/styledoc.ts index 295b034e8d8..a97394926e9 100644 --- a/src/app/showcase/doc/chips/styledoc.ts +++ b/src/app/showcase/doc/chips/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/chips/templatedoc.ts b/src/app/showcase/doc/chips/templatedoc.ts index 87a7d6e0d07..60a69c45891 100644 --- a/src/app/showcase/doc/chips/templatedoc.ts +++ b/src/app/showcase/doc/chips/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'chips-template-demo', - template: `
+ template: `

A chip is customized using a ng-template element where the value is passed as the implicit variable.

 diff --git a/src/app/showcase/doc/colorpicker/basicdoc.ts b/src/app/showcase/doc/colorpicker/basicdoc.ts index 5df9744a0c4..d216f91b876 100644 --- a/src/app/showcase/doc/colorpicker/basicdoc.ts +++ b/src/app/showcase/doc/colorpicker/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'color-picker-basic-demo', - template: `
+ template: `

ColorPicker is used as a controlled input with ngModel property.

 diff --git a/src/app/showcase/doc/colorpicker/disableddoc.ts b/src/app/showcase/doc/colorpicker/disableddoc.ts index 641d789fa7e..281f56ba41f 100644 --- a/src/app/showcase/doc/colorpicker/disableddoc.ts +++ b/src/app/showcase/doc/colorpicker/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'color-picker-disabled-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/colorpicker/formatdoc.ts b/src/app/showcase/doc/colorpicker/formatdoc.ts index cf4c4d7edab..8d07bd52eb5 100644 --- a/src/app/showcase/doc/colorpicker/formatdoc.ts +++ b/src/app/showcase/doc/colorpicker/formatdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'color-picker-format-demo', - template: `
+ template: `

Default color format to use in value binding is hex and other possible values can be rgb and hsb using the format property.

 diff --git a/src/app/showcase/doc/colorpicker/importdoc.ts b/src/app/showcase/doc/colorpicker/importdoc.ts index e41543d87f0..2018cbd6388 100644 --- a/src/app/showcase/doc/colorpicker/importdoc.ts +++ b/src/app/showcase/doc/colorpicker/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/colorpicker/inlinedoc.ts b/src/app/showcase/doc/colorpicker/inlinedoc.ts index 07847dbbbdc..e72c1211bb2 100644 --- a/src/app/showcase/doc/colorpicker/inlinedoc.ts +++ b/src/app/showcase/doc/colorpicker/inlinedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'color-picker-inline-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts b/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts index c45e11f554a..ba08f00bceb 100644 --- a/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts +++ b/src/app/showcase/doc/colorpicker/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

ColorPicker can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/colorpicker/styledoc.ts b/src/app/showcase/doc/colorpicker/styledoc.ts index 9371032465c..a6f0c706505 100644 --- a/src/app/showcase/doc/colorpicker/styledoc.ts +++ b/src/app/showcase/doc/colorpicker/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/colors/overviewdoc.ts b/src/app/showcase/doc/colors/overviewdoc.ts index 7bac7e06b93..d718ace62ce 100644 --- a/src/app/showcase/doc/colors/overviewdoc.ts +++ b/src/app/showcase/doc/colors/overviewdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'overview-doc', - template: `
+ template: `

Colors are exported as CSS variables and used with the standard var syntax such as var(--text-color). Following is the list of general variables used in a theme.

 diff --git a/src/app/showcase/doc/colors/palettedoc.ts b/src/app/showcase/doc/colors/palettedoc.ts index d03516d24fb..4e3c0e7b137 100644 --- a/src/app/showcase/doc/colors/palettedoc.ts +++ b/src/app/showcase/doc/colors/palettedoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'palette-doc', - template: `
+ template: `

Colors palette consists of 13 main colors where each color provides tints/shades from 50 to 900.

 diff --git a/src/app/showcase/doc/colors/surfacesdoc.ts b/src/app/showcase/doc/colors/surfacesdoc.ts index b6dc4535d9a..2768dea730c 100644 --- a/src/app/showcase/doc/colors/surfacesdoc.ts +++ b/src/app/showcase/doc/colors/surfacesdoc.ts @@ -5,7 +5,7 @@ import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'surfaces-doc', - template: `
+ template: `

Surface palette is used when designing the layers such as headers, content, footers, overlays and dividers. Surface palette varies between 0 - 900 and named surfaces are also available.

 diff --git a/src/app/showcase/doc/configuration/filtermodedoc.ts b/src/app/showcase/doc/configuration/filtermodedoc.ts index afe4838d6ca..aa30650a4e8 100644 --- a/src/app/showcase/doc/configuration/filtermodedoc.ts +++ b/src/app/showcase/doc/configuration/filtermodedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'filter-mode-doc', - template: `
+ template: `

Default filter modes to display on DataTable filter menus.

 diff --git a/src/app/showcase/doc/configuration/importdoc.ts b/src/app/showcase/doc/configuration/importdoc.ts index ced52c7d6aa..7843a6c45d9 100644 --- a/src/app/showcase/doc/configuration/importdoc.ts +++ b/src/app/showcase/doc/configuration/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `

Configuration is managed by the PrimeNGConfig instance imported from primeng/api and injected via dependency injection.

 diff --git a/src/app/showcase/doc/configuration/locale/apidoc.ts b/src/app/showcase/doc/configuration/locale/apidoc.ts index 866f0d38ecf..e870657da31 100644 --- a/src/app/showcase/doc/configuration/locale/apidoc.ts +++ b/src/app/showcase/doc/configuration/locale/apidoc.ts @@ -4,7 +4,7 @@ import { AppDocSectionTextComponent } from 'src/app/showcase/layout/doc/docsecti @Component({ selector: 'api-doc', template: ` -
+

Configuration is managed by the Locale API imported from primeng/config.

diff --git a/src/app/showcase/doc/configuration/locale/ngx-translatedoc.ts b/src/app/showcase/doc/configuration/locale/ngx-translatedoc.ts index 02711228482..848d0ffab0c 100644 --- a/src/app/showcase/doc/configuration/locale/ngx-translatedoc.ts +++ b/src/app/showcase/doc/configuration/locale/ngx-translatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../../domain/code'; @Component({ selector: 'ngx-translate-doc', - template: `
+ template: `

i18n API can easily be integrated with 3rd party libraries such as ngx-translate that even allows dynamically changing the language in the application.

 diff --git a/src/app/showcase/doc/configuration/locale/repositorydoc.ts b/src/app/showcase/doc/configuration/locale/repositorydoc.ts index dfa3794ff7a..96dab57e27e 100644 --- a/src/app/showcase/doc/configuration/locale/repositorydoc.ts +++ b/src/app/showcase/doc/configuration/locale/repositorydoc.ts @@ -3,7 +3,7 @@ import { AppDocSectionTextComponent } from 'src/app/showcase/layout/doc/docsecti @Component({ selector: 'repository-doc', - template: `
+ template: `

Ready to use settings for locales are available at the community supported PrimeLocale repository. We'd appreciate if you could contribute to this repository with pull requests diff --git a/src/app/showcase/doc/configuration/locale/setlocaledoc.ts b/src/app/showcase/doc/configuration/locale/setlocaledoc.ts index 5c28cc11aac..0c445769523 100644 --- a/src/app/showcase/doc/configuration/locale/setlocaledoc.ts +++ b/src/app/showcase/doc/configuration/locale/setlocaledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../../domain/code'; @Component({ selector: 'set-locale-doc', - template: `

+ template: `

A translation is applied using the PrimeNGConfig instance so begin with injecting it. A common location is the application root to initialize the default language used by the components. English is the default language and diff --git a/src/app/showcase/doc/configuration/rippledoc.ts b/src/app/showcase/doc/configuration/rippledoc.ts index 30f25621680..19a57ba7fc0 100644 --- a/src/app/showcase/doc/configuration/rippledoc.ts +++ b/src/app/showcase/doc/configuration/rippledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'ripple-doc', - template: `

+ template: `

Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled globally by injecting PrimeNGConfig.

 diff --git a/src/app/showcase/doc/configuration/zindexdoc.ts b/src/app/showcase/doc/configuration/zindexdoc.ts index 6eaf104784b..cd57a5ed1f1 100644 --- a/src/app/showcase/doc/configuration/zindexdoc.ts +++ b/src/app/showcase/doc/configuration/zindexdoc.ts @@ -4,7 +4,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'zindex-doc', - template: `
+ template: `

ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom diff --git a/src/app/showcase/doc/confirmdialog/basicdoc.ts b/src/app/showcase/doc/confirmdialog/basicdoc.ts index dd225cf2ec9..5dba0e70116 100644 --- a/src/app/showcase/doc/confirmdialog/basicdoc.ts +++ b/src/app/showcase/doc/confirmdialog/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'confirm-dialog-basic-demo', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/confirmdialog/importdoc.ts b/src/app/showcase/doc/confirmdialog/importdoc.ts index 71ce3b0333b..ff4cff90be5 100644 --- a/src/app/showcase/doc/confirmdialog/importdoc.ts +++ b/src/app/showcase/doc/confirmdialog/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/confirmdialog/positiondoc.ts b/src/app/showcase/doc/confirmdialog/positiondoc.ts index 6a78c0800e9..28f3cc0fee2 100644 --- a/src/app/showcase/doc/confirmdialog/positiondoc.ts +++ b/src/app/showcase/doc/confirmdialog/positiondoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'confirm-dialog-position-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/confirmdialog/styledoc.ts b/src/app/showcase/doc/confirmdialog/styledoc.ts index b66063e1d53..2f8c501e599 100644 --- a/src/app/showcase/doc/confirmdialog/styledoc.ts +++ b/src/app/showcase/doc/confirmdialog/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/confirmdialog/templatedoc.ts b/src/app/showcase/doc/confirmdialog/templatedoc.ts index fc6d31eb1da..7d8ccf323c0 100644 --- a/src/app/showcase/doc/confirmdialog/templatedoc.ts +++ b/src/app/showcase/doc/confirmdialog/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'confirm-dialog-template-demo', - template: `
+ template: `

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 and diff --git a/src/app/showcase/doc/confirmpopup/basicdoc.ts b/src/app/showcase/doc/confirmpopup/basicdoc.ts index 84fb72558d4..2067c0f1874 100644 --- a/src/app/showcase/doc/confirmpopup/basicdoc.ts +++ b/src/app/showcase/doc/confirmpopup/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'confirm-popup-basic-demo', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/confirmpopup/confirmationapidoc.ts b/src/app/showcase/doc/confirmpopup/confirmationapidoc.ts index fd82ccca5bf..4c00b374c8b 100644 --- a/src/app/showcase/doc/confirmpopup/confirmationapidoc.ts +++ b/src/app/showcase/doc/confirmpopup/confirmationapidoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'confirmationapi-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/confirmpopup/importdoc.ts b/src/app/showcase/doc/confirmpopup/importdoc.ts index 30904259877..096fd2f5cb6 100644 --- a/src/app/showcase/doc/confirmpopup/importdoc.ts +++ b/src/app/showcase/doc/confirmpopup/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/confirmpopup/propsdoc.ts b/src/app/showcase/doc/confirmpopup/propsdoc.ts index 469390035bf..e6267aeed5b 100644 --- a/src/app/showcase/doc/confirmpopup/propsdoc.ts +++ b/src/app/showcase/doc/confirmpopup/propsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'props-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/confirmpopup/styledoc.ts b/src/app/showcase/doc/confirmpopup/styledoc.ts index 43a4e44b353..f324fa5b978 100644 --- a/src/app/showcase/doc/confirmpopup/styledoc.ts +++ b/src/app/showcase/doc/confirmpopup/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/confirmpopup/templatesdoc.ts b/src/app/showcase/doc/confirmpopup/templatesdoc.ts index d676913ee73..11e625e4f59 100644 --- a/src/app/showcase/doc/confirmpopup/templatesdoc.ts +++ b/src/app/showcase/doc/confirmpopup/templatesdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'templates-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/contextmenu/basicdoc.ts b/src/app/showcase/doc/contextmenu/basicdoc.ts index f0111c70a9e..2b023d47017 100644 --- a/src/app/showcase/doc/contextmenu/basicdoc.ts +++ b/src/app/showcase/doc/contextmenu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'context-menu-basic-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/contextmenu/documentdoc.ts b/src/app/showcase/doc/contextmenu/documentdoc.ts index 060ef751493..5f86fa159b2 100644 --- a/src/app/showcase/doc/contextmenu/documentdoc.ts +++ b/src/app/showcase/doc/contextmenu/documentdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'context-menu-document-demo', - template: `
+ template: `

Setting global property to true attaches the context menu to the document.

 diff --git a/src/app/showcase/doc/contextmenu/importdoc.ts b/src/app/showcase/doc/contextmenu/importdoc.ts index e9b7c36e272..2cede6cbe4a 100644 --- a/src/app/showcase/doc/contextmenu/importdoc.ts +++ b/src/app/showcase/doc/contextmenu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/contextmenu/styledoc.ts b/src/app/showcase/doc/contextmenu/styledoc.ts index 5d2aa7bd830..0cb52a10a35 100644 --- a/src/app/showcase/doc/contextmenu/styledoc.ts +++ b/src/app/showcase/doc/contextmenu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/contextmenu/triggereventdoc.ts b/src/app/showcase/doc/contextmenu/triggereventdoc.ts index da42aed8d78..34e97f636da 100644 --- a/src/app/showcase/doc/contextmenu/triggereventdoc.ts +++ b/src/app/showcase/doc/contextmenu/triggereventdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'context-menu-trigger-event-demo', - template: `
+ template: `

Trigger event of context menu can be replaced by a different event with triggerEvent property. Default value of triggerEvent is contextmenu.

 diff --git a/src/app/showcase/doc/customicons/fontawesomedoc.ts b/src/app/showcase/doc/customicons/fontawesomedoc.ts index 35e72b10347..6051926e7bb 100644 --- a/src/app/showcase/doc/customicons/fontawesomedoc.ts +++ b/src/app/showcase/doc/customicons/fontawesomedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'fontawesome-doc', - template: `
+ template: `

Font Awesome is a popular icon library with a wide range of icons.

 diff --git a/src/app/showcase/doc/customicons/imagedoc.ts b/src/app/showcase/doc/customicons/imagedoc.ts index e8f50f6d80e..9a87f6945cc 100644 --- a/src/app/showcase/doc/customicons/imagedoc.ts +++ b/src/app/showcase/doc/customicons/imagedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'image-doc', - template: `
+ template: `

Any type of image can be used as an icon.

 diff --git a/src/app/showcase/doc/customicons/materialdoc.ts b/src/app/showcase/doc/customicons/materialdoc.ts index 78de115328e..e00a502c8b6 100644 --- a/src/app/showcase/doc/customicons/materialdoc.ts +++ b/src/app/showcase/doc/customicons/materialdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'material-doc', - template: `
+ template: `

Material icons is the official icon library based on Google Material Design.

 diff --git a/src/app/showcase/doc/customicons/svgdoc.ts b/src/app/showcase/doc/customicons/svgdoc.ts index 7677ca43e5d..f64c41b30a3 100644 --- a/src/app/showcase/doc/customicons/svgdoc.ts +++ b/src/app/showcase/doc/customicons/svgdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'svg-doc', - template: `
+ template: `

Inline SVGs are embedded inside the dom.

 diff --git a/src/app/showcase/doc/dataview/basicdoc.ts b/src/app/showcase/doc/dataview/basicdoc.ts index dd84dd2f0e2..1c3ec860cc1 100644 --- a/src/app/showcase/doc/dataview/basicdoc.ts +++ b/src/app/showcase/doc/dataview/basicdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'data-view-basic-demo', - template: `
+ template: `

DataView requires a value to display along with an pTemplate that receives an object in the collection to return content. The root element should have the PrimeFlex Grid classes e.g. col-12 to define how items are diff --git a/src/app/showcase/doc/dataview/importdoc.ts b/src/app/showcase/doc/dataview/importdoc.ts index 4b85b009e5c..ecd4c9446bf 100644 --- a/src/app/showcase/doc/dataview/importdoc.ts +++ b/src/app/showcase/doc/dataview/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/dataview/layoutdoc.ts b/src/app/showcase/doc/dataview/layoutdoc.ts index f31ce9b2af4..e23741203be 100644 --- a/src/app/showcase/doc/dataview/layoutdoc.ts +++ b/src/app/showcase/doc/dataview/layoutdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'data-view-layout-demo', - template: `
+ template: `

DataView supports list and grid display modes defined with the layout property. The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you diff --git a/src/app/showcase/doc/dataview/paginationdoc.ts b/src/app/showcase/doc/dataview/paginationdoc.ts index cf6d34a1f87..97536fca368 100644 --- a/src/app/showcase/doc/dataview/paginationdoc.ts +++ b/src/app/showcase/doc/dataview/paginationdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'data-view-pagination-demo', - template: `

+ template: `

Pagination is enabled with the paginator and rows properties. Refer to the Paginator for more information about customizing the paginator.

 diff --git a/src/app/showcase/doc/dataview/primeflexdoc.ts b/src/app/showcase/doc/dataview/primeflexdoc.ts index f3657abb9ac..9e3ea6359dc 100644 --- a/src/app/showcase/doc/dataview/primeflexdoc.ts +++ b/src/app/showcase/doc/dataview/primeflexdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'primeflex-doc', - template: `
+ template: `

DataView depends on PrimeFlex Grid functionality so it needs to be installed and imported.

 diff --git a/src/app/showcase/doc/dataview/sortingdoc.ts b/src/app/showcase/doc/dataview/sortingdoc.ts index ac35de7ba0c..63fd8b437ed 100644 --- a/src/app/showcase/doc/dataview/sortingdoc.ts +++ b/src/app/showcase/doc/dataview/sortingdoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'data-view-sorting-demo', - template: `
+ template: `

Built-in sorting is controlled by bindings sortField and sortField properties from a custom UI.

 diff --git a/src/app/showcase/doc/dataview/styledoc.ts b/src/app/showcase/doc/dataview/styledoc.ts index 01ed2141f7a..ab940a94d11 100644 --- a/src/app/showcase/doc/dataview/styledoc.ts +++ b/src/app/showcase/doc/dataview/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/defer/basicdoc.ts b/src/app/showcase/doc/defer/basicdoc.ts index 2b901b08c49..180d897f8bb 100644 --- a/src/app/showcase/doc/defer/basicdoc.ts +++ b/src/app/showcase/doc/defer/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.

 diff --git a/src/app/showcase/doc/defer/datatabledoc.ts b/src/app/showcase/doc/defer/datatabledoc.ts index c23f5daa129..1af82a51d8e 100644 --- a/src/app/showcase/doc/defer/datatabledoc.ts +++ b/src/app/showcase/doc/defer/datatabledoc.ts @@ -6,7 +6,7 @@ import { CarService } from '../../service/carservice'; @Component({ selector: 'datatable-doc', - template: `
+ template: `

Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.

 diff --git a/src/app/showcase/doc/defer/importdoc.ts b/src/app/showcase/doc/defer/importdoc.ts index f172909c1b9..b241148e4aa 100644 --- a/src/app/showcase/doc/defer/importdoc.ts +++ b/src/app/showcase/doc/defer/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/dialog/basicdoc.ts b/src/app/showcase/doc/dialog/basicdoc.ts index 940f7243499..2b84a224ce1 100644 --- a/src/app/showcase/doc/dialog/basicdoc.ts +++ b/src/app/showcase/doc/dialog/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dialog-basic-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/dialog/importdoc.ts b/src/app/showcase/doc/dialog/importdoc.ts index 9c13810f566..2efa4225d16 100644 --- a/src/app/showcase/doc/dialog/importdoc.ts +++ b/src/app/showcase/doc/dialog/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/dialog/longcontentdoc.ts b/src/app/showcase/doc/dialog/longcontentdoc.ts index 00bb14a41e5..943045896c8 100644 --- a/src/app/showcase/doc/dialog/longcontentdoc.ts +++ b/src/app/showcase/doc/dialog/longcontentdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dialog-long-content-demo', - template: `
+ template: `

Dialog automatically displays a scroller when content exceeeds viewport.

 diff --git a/src/app/showcase/doc/dialog/maximizabledoc.ts b/src/app/showcase/doc/dialog/maximizabledoc.ts index f12b44edb9a..c7a9343f9c6 100644 --- a/src/app/showcase/doc/dialog/maximizabledoc.ts +++ b/src/app/showcase/doc/dialog/maximizabledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dialog-maximizable-demo', - template: `
+ template: `

Setting maximizable property to true enables the full screen mode.

 diff --git a/src/app/showcase/doc/dialog/modaldoc.ts b/src/app/showcase/doc/dialog/modaldoc.ts index 7c9912e3023..c385335f86f 100644 --- a/src/app/showcase/doc/dialog/modaldoc.ts +++ b/src/app/showcase/doc/dialog/modaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dialog-modal-demo', - template: `
+ template: `

Mask layer behind the Dialog can be turned on by setting the modal property to true.

 diff --git a/src/app/showcase/doc/dialog/overlaysinsidedoc.ts b/src/app/showcase/doc/dialog/overlaysinsidedoc.ts index 845369e1877..1cfc147fce8 100644 --- a/src/app/showcase/doc/dialog/overlaysinsidedoc.ts +++ b/src/app/showcase/doc/dialog/overlaysinsidedoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'dialog-overlays-inside-demo', - template: `
+ template: `

When dialog includes other components with overlays such as dropdown, the overlay part cannot exceed dialog boundaries due to overflow. In order to solve this, you can either append the overlay to the body by using diff --git a/src/app/showcase/doc/dialog/positiondoc.ts b/src/app/showcase/doc/dialog/positiondoc.ts index f429ff11a60..d02fdd56b33 100644 --- a/src/app/showcase/doc/dialog/positiondoc.ts +++ b/src/app/showcase/doc/dialog/positiondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dialog-position-demo', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/dialog/responsivedoc.ts b/src/app/showcase/doc/dialog/responsivedoc.ts index b77fe689b90..aa6fac7df88 100644 --- a/src/app/showcase/doc/dialog/responsivedoc.ts +++ b/src/app/showcase/doc/dialog/responsivedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dialog-responsive-demo', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/dialog/styledoc.ts b/src/app/showcase/doc/dialog/styledoc.ts index 2104796fc10..9d133e07e2d 100644 --- a/src/app/showcase/doc/dialog/styledoc.ts +++ b/src/app/showcase/doc/dialog/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `

+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/dialog/templatedoc.ts b/src/app/showcase/doc/dialog/templatedoc.ts index daaa59354d4..4a8249ee427 100644 --- a/src/app/showcase/doc/dialog/templatedoc.ts +++ b/src/app/showcase/doc/dialog/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dialog-template-demo', - template: `
+ template: `

Dialog can be customized using header and footer templates.

 diff --git a/src/app/showcase/doc/divider/basicdoc.ts b/src/app/showcase/doc/divider/basicdoc.ts index d8edb30d2b1..1b496d20112 100644 --- a/src/app/showcase/doc/divider/basicdoc.ts +++ b/src/app/showcase/doc/divider/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'divider-basic-demo', - template: `
+ template: `

Divider is basically placed between the items to separate.

 diff --git a/src/app/showcase/doc/divider/contentdoc.ts b/src/app/showcase/doc/divider/contentdoc.ts index 65caf6a3ade..20bc1a56b8b 100644 --- a/src/app/showcase/doc/divider/contentdoc.ts +++ b/src/app/showcase/doc/divider/contentdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'divider-content-demo', - template: `
+ template: `

Children are rendered within the boundaries of the divider where location of the content is configured with the align property. In horizontal layout, alignment options are left, center and right whereas vertical diff --git a/src/app/showcase/doc/divider/importdoc.ts b/src/app/showcase/doc/divider/importdoc.ts index 0798c532029..df02abbbe8c 100644 --- a/src/app/showcase/doc/divider/importdoc.ts +++ b/src/app/showcase/doc/divider/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/divider/logindoc.ts b/src/app/showcase/doc/divider/logindoc.ts index 48f2f8b9c57..85cea886c37 100644 --- a/src/app/showcase/doc/divider/logindoc.ts +++ b/src/app/showcase/doc/divider/logindoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'divider-login-demo', - template: `
+ template: `

Sample implementation of a login form using a divider with content.

 diff --git a/src/app/showcase/doc/divider/styledoc.ts b/src/app/showcase/doc/divider/styledoc.ts index 91b02b7fd20..bd81dd1d787 100644 --- a/src/app/showcase/doc/divider/styledoc.ts +++ b/src/app/showcase/doc/divider/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/divider/typedoc.ts b/src/app/showcase/doc/divider/typedoc.ts index e012fc2f8ea..f96f4a3a60a 100644 --- a/src/app/showcase/doc/divider/typedoc.ts +++ b/src/app/showcase/doc/divider/typedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'divider-type-demo', - template: `
+ template: `

Style of the border is configured with the type property that can either be solid, dotted or dashed.

 diff --git a/src/app/showcase/doc/divider/verticaldoc.ts b/src/app/showcase/doc/divider/verticaldoc.ts index 32157c41b5a..5d6cec2cb65 100644 --- a/src/app/showcase/doc/divider/verticaldoc.ts +++ b/src/app/showcase/doc/divider/verticaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'divider-vertical-demo', - template: `
+ template: `

Vertical divider is enabled by setting the layout property as vertical.

 diff --git a/src/app/showcase/doc/dock/advanceddoc.ts b/src/app/showcase/doc/dock/advanceddoc.ts index bafbec95fac..878702d953c 100644 --- a/src/app/showcase/doc/dock/advanceddoc.ts +++ b/src/app/showcase/doc/dock/advanceddoc.ts @@ -8,7 +8,7 @@ import { PhotoService } from '../../service/photoservice'; @Component({ selector: 'dock-advanced-demo', - template: `
+ 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 diff --git a/src/app/showcase/doc/dock/basicdoc.ts b/src/app/showcase/doc/dock/basicdoc.ts index 6e2419631f3..5255985b2df 100644 --- a/src/app/showcase/doc/dock/basicdoc.ts +++ b/src/app/showcase/doc/dock/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dock-basic-demo', - template: `

+ 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 diff --git a/src/app/showcase/doc/dock/importdoc.ts b/src/app/showcase/doc/dock/importdoc.ts index 164b9edd728..962a8e7dc95 100644 --- a/src/app/showcase/doc/dock/importdoc.ts +++ b/src/app/showcase/doc/dock/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/dock/styledoc.ts b/src/app/showcase/doc/dock/styledoc.ts index 6e1c713a04f..26f8fafb33a 100644 --- a/src/app/showcase/doc/dock/styledoc.ts +++ b/src/app/showcase/doc/dock/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/dragdrop/basicdoc.ts b/src/app/showcase/doc/dragdrop/basicdoc.ts index c9d587638dc..99cf337b232 100644 --- a/src/app/showcase/doc/dragdrop/basicdoc.ts +++ b/src/app/showcase/doc/dragdrop/basicdoc.ts @@ -4,7 +4,7 @@ import { Product } from '../../domain/product'; @Component({ selector: 'drag-drop-basic-demo', - template: `
+ 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 diff --git a/src/app/showcase/doc/dragdrop/datatabledoc.ts b/src/app/showcase/doc/dragdrop/datatabledoc.ts index 2347ce9019f..cf341d619f8 100644 --- a/src/app/showcase/doc/dragdrop/datatabledoc.ts +++ b/src/app/showcase/doc/dragdrop/datatabledoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'drag-drop-data-table-demo', - template: `

+ template: `

Drag and Drop to Table

 diff --git a/src/app/showcase/doc/dragdrop/draghandledoc.ts b/src/app/showcase/doc/dragdrop/draghandledoc.ts index d2bc9a735c1..9d0650957bc 100644 --- a/src/app/showcase/doc/dragdrop/draghandledoc.ts +++ b/src/app/showcase/doc/dragdrop/draghandledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'drag-drop-drag-handle-demo', - template: `
+ template: `

dragHandle is used to restrict dragging unless mousedown occurs on the specified element. Panel below can only be dragged using its header.

 diff --git a/src/app/showcase/doc/dragdrop/dropindicatordoc.ts b/src/app/showcase/doc/dragdrop/dropindicatordoc.ts index 3f7c3f2a74e..146ce710e66 100644 --- a/src/app/showcase/doc/dragdrop/dropindicatordoc.ts +++ b/src/app/showcase/doc/dragdrop/dropindicatordoc.ts @@ -4,7 +4,7 @@ import { Product } from '../../domain/product'; @Component({ selector: 'drag-drop-drop-indicator-demo', - template: `
+ template: `

When a suitable draggable enters a droppable area, the area gets p-draggable-enter class that can be used to style the droppable section.

 diff --git a/src/app/showcase/doc/dragdrop/importdoc.ts b/src/app/showcase/doc/dragdrop/importdoc.ts index 25fedf488ba..c50f1cc65d8 100644 --- a/src/app/showcase/doc/dragdrop/importdoc.ts +++ b/src/app/showcase/doc/dragdrop/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/dropdown/basicdoc.ts b/src/app/showcase/doc/dropdown/basicdoc.ts index 6c69b8d81e8..58feebdaa03 100644 --- a/src/app/showcase/doc/dropdown/basicdoc.ts +++ b/src/app/showcase/doc/dropdown/basicdoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'dropdown-basic-demo', - template: `
+ template: `

Dropdown 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. diff --git a/src/app/showcase/doc/dropdown/disableddoc.ts b/src/app/showcase/doc/dropdown/disableddoc.ts index ff13209e575..d01bb67899b 100644 --- a/src/app/showcase/doc/dropdown/disableddoc.ts +++ b/src/app/showcase/doc/dropdown/disableddoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'dropdown-disabled-demo', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/dropdown/editabledoc.ts b/src/app/showcase/doc/dropdown/editabledoc.ts index b86a50ed45f..cdaa99080d1 100644 --- a/src/app/showcase/doc/dropdown/editabledoc.ts +++ b/src/app/showcase/doc/dropdown/editabledoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'dropdown-editable-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/dropdown/filterdoc.ts b/src/app/showcase/doc/dropdown/filterdoc.ts index 0c60986f216..1761cfcce11 100644 --- a/src/app/showcase/doc/dropdown/filterdoc.ts +++ b/src/app/showcase/doc/dropdown/filterdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dropdown-filter-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/dropdown/floatlabeldoc.ts b/src/app/showcase/doc/dropdown/floatlabeldoc.ts index 378c7f95963..cb96aedd1d2 100644 --- a/src/app/showcase/doc/dropdown/floatlabeldoc.ts +++ b/src/app/showcase/doc/dropdown/floatlabeldoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'dropdown-floatlabel-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/dropdown/groupdoc.ts b/src/app/showcase/doc/dropdown/groupdoc.ts index 4df4521d9da..60d1e5a4da7 100644 --- a/src/app/showcase/doc/dropdown/groupdoc.ts +++ b/src/app/showcase/doc/dropdown/groupdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dropdown-group-demo', - template: `
+ template: `

Options can be grouped when a nested data structures is provided.

 diff --git a/src/app/showcase/doc/dropdown/importdoc.ts b/src/app/showcase/doc/dropdown/importdoc.ts index 41427725d75..c10ac9b1d28 100644 --- a/src/app/showcase/doc/dropdown/importdoc.ts +++ b/src/app/showcase/doc/dropdown/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/dropdown/reactiveformsdoc.ts b/src/app/showcase/doc/dropdown/reactiveformsdoc.ts index a2bdc3f7ded..e456d5ad3fc 100644 --- a/src/app/showcase/doc/dropdown/reactiveformsdoc.ts +++ b/src/app/showcase/doc/dropdown/reactiveformsdoc.ts @@ -9,7 +9,7 @@ interface City { @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

Dropdown can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/dropdown/styledoc.ts b/src/app/showcase/doc/dropdown/styledoc.ts index ed4873b730f..21b561c5272 100644 --- a/src/app/showcase/doc/dropdown/styledoc.ts +++ b/src/app/showcase/doc/dropdown/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/dropdown/templatedoc.ts b/src/app/showcase/doc/dropdown/templatedoc.ts index 320123e52d1..e8b1b2af2d4 100644 --- a/src/app/showcase/doc/dropdown/templatedoc.ts +++ b/src/app/showcase/doc/dropdown/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dropdown-template-demo', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/dropdown/virtualscrolldoc.ts b/src/app/showcase/doc/dropdown/virtualscrolldoc.ts index 50269b01051..40dd53888b8 100644 --- a/src/app/showcase/doc/dropdown/virtualscrolldoc.ts +++ b/src/app/showcase/doc/dropdown/virtualscrolldoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dropdown-virtualscroll-demo', - template: `

+ template: `

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 diff --git a/src/app/showcase/doc/dynamicdialog/basicdoc.ts b/src/app/showcase/doc/dynamicdialog/basicdoc.ts index 1f76b4c82c9..b4b760d5a37 100644 --- a/src/app/showcase/doc/dynamicdialog/basicdoc.ts +++ b/src/app/showcase/doc/dynamicdialog/basicdoc.ts @@ -7,7 +7,7 @@ import { ProductListDemo } from './productlistdemo'; @Component({ selector: 'dynamic-dialog-basic-demo', - template: `

+ template: `

Dynamic dialogs require an instance of a DialogService that is responsible for displaying a dialog with a component as its content. Since the dynamically loaded content is not defined at build time, a configuration is necessary diff --git a/src/app/showcase/doc/dynamicdialog/closedoc.ts b/src/app/showcase/doc/dynamicdialog/closedoc.ts index d4bb3abbeed..2ce6f45e918 100644 --- a/src/app/showcase/doc/dynamicdialog/closedoc.ts +++ b/src/app/showcase/doc/dynamicdialog/closedoc.ts @@ -7,7 +7,7 @@ import { ProductListDemo } from './productlistdemo'; @Component({ selector: 'close-doc', - template: `

+ template: `

Most of the time, requirement is returning a value from the dialog. DialogRef's close method is used for this purpose where the parameter passed will be available at the onClose event at the caller. Here is an example on how to diff --git a/src/app/showcase/doc/dynamicdialog/importdoc.ts b/src/app/showcase/doc/dynamicdialog/importdoc.ts index 55f17a19d4b..c94affb6e11 100644 --- a/src/app/showcase/doc/dynamicdialog/importdoc.ts +++ b/src/app/showcase/doc/dynamicdialog/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/dynamicdialog/opendoc.ts b/src/app/showcase/doc/dynamicdialog/opendoc.ts index 4b482c0b5d3..d5407002bd0 100644 --- a/src/app/showcase/doc/dynamicdialog/opendoc.ts +++ b/src/app/showcase/doc/dynamicdialog/opendoc.ts @@ -5,7 +5,7 @@ import { ProductListDemo } from './productlistdemo'; @Component({ selector: 'open-doc', - template: `
+ template: `

The open method of the DialogService is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog.

 diff --git a/src/app/showcase/doc/dynamicdialog/passingdatadoc.ts b/src/app/showcase/doc/dynamicdialog/passingdatadoc.ts index ad1436aa594..4c51da67527 100644 --- a/src/app/showcase/doc/dynamicdialog/passingdatadoc.ts +++ b/src/app/showcase/doc/dynamicdialog/passingdatadoc.ts @@ -5,7 +5,7 @@ import { ProductListDemo } from './productlistdemo'; @Component({ selector: 'passingdata-doc', - template: `
+ template: `

In case you need to pass data to the component that is dynamically loaded, use the data property that can be access using the DynamicDialogConfig class. In additon, the loaded component can also control the Dialog using the diff --git a/src/app/showcase/doc/dynamicdialog/styledoc.ts b/src/app/showcase/doc/dynamicdialog/styledoc.ts index e1a9377c699..351e186f1f0 100644 --- a/src/app/showcase/doc/dynamicdialog/styledoc.ts +++ b/src/app/showcase/doc/dynamicdialog/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `

+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/dynamicdialog/usagedoc.ts b/src/app/showcase/doc/dynamicdialog/usagedoc.ts index 558e21770ef..478a39ef037 100644 --- a/src/app/showcase/doc/dynamicdialog/usagedoc.ts +++ b/src/app/showcase/doc/dynamicdialog/usagedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'usage-doc', - template: `
+ template: `

To use dynamic dialog, a reference should be declared as DynamicDialogRef after the DialogService injected into the component.

 diff --git a/src/app/showcase/doc/editor/basicdoc.ts b/src/app/showcase/doc/editor/basicdoc.ts index fc8cbd3e3b7..cf24f9ad0be 100644 --- a/src/app/showcase/doc/editor/basicdoc.ts +++ b/src/app/showcase/doc/editor/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'editor-basic-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/editor/customtoolbardoc.ts b/src/app/showcase/doc/editor/customtoolbardoc.ts index bc51563d66b..a7a0518b998 100644 --- a/src/app/showcase/doc/editor/customtoolbardoc.ts +++ b/src/app/showcase/doc/editor/customtoolbardoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'editor-customtoolbar-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/editor/importdoc.ts b/src/app/showcase/doc/editor/importdoc.ts index 1166fd1b5cc..be5b43f3cd1 100644 --- a/src/app/showcase/doc/editor/importdoc.ts +++ b/src/app/showcase/doc/editor/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/editor/quilldoc.ts b/src/app/showcase/doc/editor/quilldoc.ts index f68390ab596..6824200acd5 100644 --- a/src/app/showcase/doc/editor/quilldoc.ts +++ b/src/app/showcase/doc/editor/quilldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'quill-doc', - template: `
+ template: `

Editor uses Quill editor underneath so it needs to be installed as a dependency.

 diff --git a/src/app/showcase/doc/editor/reactiveformsdoc.ts b/src/app/showcase/doc/editor/reactiveformsdoc.ts index 81cec8d9708..f4a5e9d5635 100644 --- a/src/app/showcase/doc/editor/reactiveformsdoc.ts +++ b/src/app/showcase/doc/editor/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/editor/readonlydoc.ts b/src/app/showcase/doc/editor/readonlydoc.ts index 89bb413bc0f..3af8f80e12a 100644 --- a/src/app/showcase/doc/editor/readonlydoc.ts +++ b/src/app/showcase/doc/editor/readonlydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'editor-readonly-demo', - template: `
+ template: `

When readonly is present, the value cannot be edited.

 diff --git a/src/app/showcase/doc/editor/styledoc.ts b/src/app/showcase/doc/editor/styledoc.ts index 86c3c0b011c..689df336770 100644 --- a/src/app/showcase/doc/editor/styledoc.ts +++ b/src/app/showcase/doc/editor/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/fieldset/basicdoc.ts b/src/app/showcase/doc/fieldset/basicdoc.ts index e7a077e3eb7..2b6943ade15 100644 --- a/src/app/showcase/doc/fieldset/basicdoc.ts +++ b/src/app/showcase/doc/fieldset/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'fieldset-basic-demo', - template: `
+ template: `

PrimeIcons is available at npm, run the following command to download it to your project.

 diff --git a/src/app/showcase/doc/fieldset/importdoc.ts b/src/app/showcase/doc/fieldset/importdoc.ts index 58e4f6005ab..d3bb022e373 100644 --- a/src/app/showcase/doc/fieldset/importdoc.ts +++ b/src/app/showcase/doc/fieldset/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/fieldset/styledoc.ts b/src/app/showcase/doc/fieldset/styledoc.ts index 59a5b8f3116..b37fb308e90 100644 --- a/src/app/showcase/doc/fieldset/styledoc.ts +++ b/src/app/showcase/doc/fieldset/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/fieldset/templatedoc.ts b/src/app/showcase/doc/fieldset/templatedoc.ts index b18acbbafaf..b640799f10b 100644 --- a/src/app/showcase/doc/fieldset/templatedoc.ts +++ b/src/app/showcase/doc/fieldset/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'fieldset-template-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/fieldset/toggleabledoc.ts b/src/app/showcase/doc/fieldset/toggleabledoc.ts index 72f262a678c..8ea7e190478 100644 --- a/src/app/showcase/doc/fieldset/toggleabledoc.ts +++ b/src/app/showcase/doc/fieldset/toggleabledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'fieldset-toggleable-demo', - template: `
+ template: `

Content of the fieldset can be expanded and collapsed using toggleable option, default state is defined with collapsed option.

 diff --git a/src/app/showcase/doc/fileupload/advanceddoc.ts b/src/app/showcase/doc/fileupload/advanceddoc.ts index ff83ef3377a..ae37bf4056f 100644 --- a/src/app/showcase/doc/fileupload/advanceddoc.ts +++ b/src/app/showcase/doc/fileupload/advanceddoc.ts @@ -9,7 +9,7 @@ interface UploadEvent { @Component({ selector: 'file-upload-advanced-demo', - template: `
+ template: `
diff --git a/src/app/showcase/doc/fileupload/autodoc.ts b/src/app/showcase/doc/fileupload/autodoc.ts index 787bdcb5c96..49176aab59b 100644 --- a/src/app/showcase/doc/fileupload/autodoc.ts +++ b/src/app/showcase/doc/fileupload/autodoc.ts @@ -9,7 +9,7 @@ interface UploadEvent { @Component({ selector: 'file-upload-auto-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/fileupload/basicdoc.ts b/src/app/showcase/doc/fileupload/basicdoc.ts index a0ad3071fda..8cb437d60eb 100644 --- a/src/app/showcase/doc/fileupload/basicdoc.ts +++ b/src/app/showcase/doc/fileupload/basicdoc.ts @@ -9,7 +9,7 @@ interface UploadEvent { @Component({ selector: 'file-upload-basic-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/fileupload/customdoc.ts b/src/app/showcase/doc/fileupload/customdoc.ts index ec2296e0459..a6ef4e1bd00 100644 --- a/src/app/showcase/doc/fileupload/customdoc.ts +++ b/src/app/showcase/doc/fileupload/customdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'file-upload-custom-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/fileupload/importdoc.ts b/src/app/showcase/doc/fileupload/importdoc.ts index ca285ec24d1..03ddb514e27 100644 --- a/src/app/showcase/doc/fileupload/importdoc.ts +++ b/src/app/showcase/doc/fileupload/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'file-upload-import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/fileupload/styledoc.ts b/src/app/showcase/doc/fileupload/styledoc.ts index 71ec8a3322e..cbe83404ab4 100644 --- a/src/app/showcase/doc/fileupload/styledoc.ts +++ b/src/app/showcase/doc/fileupload/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/fileupload/templatedoc.ts b/src/app/showcase/doc/fileupload/templatedoc.ts index 074bd54067a..c262189b90e 100644 --- a/src/app/showcase/doc/fileupload/templatedoc.ts +++ b/src/app/showcase/doc/fileupload/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'file-upload-template-demo', - template: `
+ 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 diff --git a/src/app/showcase/doc/filterservice/apidoc.ts b/src/app/showcase/doc/filterservice/apidoc.ts index 1f0c392501c..fa61a46d642 100644 --- a/src/app/showcase/doc/filterservice/apidoc.ts +++ b/src/app/showcase/doc/filterservice/apidoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'api-doc', - template: `

+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/filterservice/builtinconstraintsdoc.ts b/src/app/showcase/doc/filterservice/builtinconstraintsdoc.ts index b7b05e109f1..b1f392b0ce5 100644 --- a/src/app/showcase/doc/filterservice/builtinconstraintsdoc.ts +++ b/src/app/showcase/doc/filterservice/builtinconstraintsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'built-in-constraints-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/filterservice/customconstraintsdoc.ts b/src/app/showcase/doc/filterservice/customconstraintsdoc.ts index 13246318e51..2e21f3f2af5 100644 --- a/src/app/showcase/doc/filterservice/customconstraintsdoc.ts +++ b/src/app/showcase/doc/filterservice/customconstraintsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'custom-constraints-doc', - template: `
+ template: `

FilterService can be extended by adding new constraints using the register function.

 diff --git a/src/app/showcase/doc/filterservice/importdoc.ts b/src/app/showcase/doc/filterservice/importdoc.ts index af2d240cb4f..8ed31b59484 100644 --- a/src/app/showcase/doc/filterservice/importdoc.ts +++ b/src/app/showcase/doc/filterservice/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/filterservice/tableintegrationdoc.ts b/src/app/showcase/doc/filterservice/tableintegrationdoc.ts index 2efc3dd2967..5cc74604eab 100644 --- a/src/app/showcase/doc/filterservice/tableintegrationdoc.ts +++ b/src/app/showcase/doc/filterservice/tableintegrationdoc.ts @@ -6,7 +6,7 @@ import { CarService } from '../../service/carservice'; @Component({ selector: 'filter-service-table-integration-demo', - template: `
+ template: `

A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.

 diff --git a/src/app/showcase/doc/filterservice/usagedoc.ts b/src/app/showcase/doc/filterservice/usagedoc.ts index 1f155da4c0e..fbefdb95ba7 100644 --- a/src/app/showcase/doc/filterservice/usagedoc.ts +++ b/src/app/showcase/doc/filterservice/usagedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'usage-doc', - template: `
+ template: `

FilterService needs to be injected into your component. Filters are accessed with FilterService.filters.

 diff --git a/src/app/showcase/doc/focustrap/basicdoc.ts b/src/app/showcase/doc/focustrap/basicdoc.ts index e269f793eff..24fd8eb0a2f 100644 --- a/src/app/showcase/doc/focustrap/basicdoc.ts +++ b/src/app/showcase/doc/focustrap/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'focus-trap-basic-demo', - template: `
+ template: `

FocusTrap is applied to a container element with the pFocusTrap directive.

 diff --git a/src/app/showcase/doc/focustrap/importdoc.ts b/src/app/showcase/doc/focustrap/importdoc.ts index 91f60658b05..1509174acd2 100644 --- a/src/app/showcase/doc/focustrap/importdoc.ts +++ b/src/app/showcase/doc/focustrap/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/galleria/advanceddoc.ts b/src/app/showcase/doc/galleria/advanceddoc.ts index a25a75cb482..a989bcd9caa 100644 --- a/src/app/showcase/doc/galleria/advanceddoc.ts +++ b/src/app/showcase/doc/galleria/advanceddoc.ts @@ -6,7 +6,7 @@ import { PhotoService } from '../../service/photoservice'; @Component({ selector: 'galleria-advanced-doc', - template: `
+ template: `

Galleria can be extended further to implement complex requirements.

 diff --git a/src/app/showcase/doc/galleria/autoplaydoc.ts b/src/app/showcase/doc/galleria/autoplaydoc.ts index bf74103d53b..debefb4b489 100644 --- a/src/app/showcase/doc/galleria/autoplaydoc.ts +++ b/src/app/showcase/doc/galleria/autoplaydoc.ts @@ -4,7 +4,7 @@ import { PhotoService } from '../../service/photoservice'; @Component({ selector: 'galleria-autoplay-demo', - template: `
+ template: `

A slideshow implementation is defined by adding circular and autoPlay properties.

 diff --git a/src/app/showcase/doc/galleria/basicdoc.ts b/src/app/showcase/doc/galleria/basicdoc.ts index b66d9f80a7d..6b07d143fb8 100644 --- a/src/app/showcase/doc/galleria/basicdoc.ts +++ b/src/app/showcase/doc/galleria/basicdoc.ts @@ -4,7 +4,7 @@ import { PhotoService } from '../../service/photoservice'; @Component({ selector: 'galleria-basic-demo', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/galleria/captiondoc.ts b/src/app/showcase/doc/galleria/captiondoc.ts index f920c5606bb..99805c56869 100644 --- a/src/app/showcase/doc/galleria/captiondoc.ts +++ b/src/app/showcase/doc/galleria/captiondoc.ts @@ -4,7 +4,7 @@ import { PhotoService } from '../../service/photoservice'; @Component({ selector: 'galleria-caption-demo', - template: `
+ template: `

Description of an image is specified with the caption template.

 diff --git a/src/app/showcase/doc/galleria/controlleddoc.ts b/src/app/showcase/doc/galleria/controlleddoc.ts index ea5bc656041..38d267df8d6 100644 --- a/src/app/showcase/doc/galleria/controlleddoc.ts +++ b/src/app/showcase/doc/galleria/controlleddoc.ts @@ -4,7 +4,7 @@ import { PhotoService } from '../../service/photoservice'; @Component({ selector: 'galleria-controlled-demo', - template: `
+ template: `

Galleria can be controlled programmatically using the activeIndex property.

 diff --git a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts index c09bc83390f..191dc782efd 100644 --- a/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts +++ b/src/app/showcase/doc/galleria/fullscreen/customcontentdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'template-doc', - template: `
+ template: `

Using activeIndex, Galleria is displayed with a specific initial image.

 diff --git a/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts b/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts index 77f42d867cc..66e62229f2f 100644 --- a/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'without-thumbnails-doc', - template: `
+ template: `

Thumbnails can also be hidden in full screen mode.

 diff --git a/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts b/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts index 6179a5aae38..d45ca517b23 100644 --- a/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'with-thumbnails-doc', - template: `
+ template: `

Full screen mode is enabled by adding fullScreen property.

 diff --git a/src/app/showcase/doc/galleria/importdoc.ts b/src/app/showcase/doc/galleria/importdoc.ts index c5daf73e72b..040f7a1fcb0 100644 --- a/src/app/showcase/doc/galleria/importdoc.ts +++ b/src/app/showcase/doc/galleria/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts b/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts index 4a1d081f0ef..5f3e8d3ffe6 100644 --- a/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts +++ b/src/app/showcase/doc/galleria/indicator/clickeventdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'click-event-doc', - template: `
+ template: `

Indicators are displayed at the bottom by enabling showIndicators property and interacted with the click event by default.

 diff --git a/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts b/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts index cb7ef0614ca..4c31602b45f 100644 --- a/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts +++ b/src/app/showcase/doc/galleria/indicator/hovereventdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'hover-event-doc', - template: `
+ template: `

Indicators can be activated on hover instead of click if changeItemOnIndicatorHover is added.

 diff --git a/src/app/showcase/doc/galleria/indicator/positioneddoc.ts b/src/app/showcase/doc/galleria/indicator/positioneddoc.ts index ab827e902e4..95e61204565 100644 --- a/src/app/showcase/doc/galleria/indicator/positioneddoc.ts +++ b/src/app/showcase/doc/galleria/indicator/positioneddoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'positioned-doc', - template: `
+ template: `

Indicators can be placed at four different sides using the indicatorsPosition property. In addition, enabling showIndicatorsOnItem moves the indicators inside the image section. indicatorsPosition set to diff --git a/src/app/showcase/doc/galleria/indicator/templatedoc.ts b/src/app/showcase/doc/galleria/indicator/templatedoc.ts index c9463a9b634..c9e4f6b2c4f 100644 --- a/src/app/showcase/doc/galleria/indicator/templatedoc.ts +++ b/src/app/showcase/doc/galleria/indicator/templatedoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'template-doc', - template: `

+ template: `

Indicator content can be customized with the indicator template.

 diff --git a/src/app/showcase/doc/galleria/navigator/hoverdoc.ts b/src/app/showcase/doc/galleria/navigator/hoverdoc.ts index 1a377f7fae4..8015a3a6bf6 100644 --- a/src/app/showcase/doc/galleria/navigator/hoverdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/hoverdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'hover-doc', - template: `
+ template: `

Navigators are displayed on hover only if showItemNavigatorsOnHover is enabled.

 diff --git a/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts b/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts index 7bcb58fe68b..93361822940 100644 --- a/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/indicatorsdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'indicators-doc', - template: `
+ template: `

Navigators and Indicators can be combined as well.

 diff --git a/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts b/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts index 1484d88e723..73f9092bfc7 100644 --- a/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/itemthumbnailsdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'itemthumbnails-doc', - template: `
+ template: `

Add showItemNavigators to display navigator elements and the left and right side.

 diff --git a/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts b/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts index cbe829ba878..72bc8a4692a 100644 --- a/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts +++ b/src/app/showcase/doc/galleria/navigator/itemwithoutthumbnailsdoc.ts @@ -5,7 +5,7 @@ import { PhotoService } from '../../../service/photoservice'; @Component({ selector: 'itemwithoutthumbnails-doc', - template: `
+ template: `

Simple example with indicators only.

 diff --git a/src/app/showcase/doc/galleria/responsivedoc.ts b/src/app/showcase/doc/galleria/responsivedoc.ts index 90a46d98816..ccf5fdb7126 100644 --- a/src/app/showcase/doc/galleria/responsivedoc.ts +++ b/src/app/showcase/doc/galleria/responsivedoc.ts @@ -4,7 +4,7 @@ import { PhotoService } from '../../service/photoservice'; @Component({ selector: 'galleria-responsive-demo', - template: `
+ template: `

Galleria responsiveness is defined with the responsiveOptions property.

 diff --git a/src/app/showcase/doc/galleria/styledoc.ts b/src/app/showcase/doc/galleria/styledoc.ts index 687bc10be1a..7b22f7a5613 100644 --- a/src/app/showcase/doc/galleria/styledoc.ts +++ b/src/app/showcase/doc/galleria/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/galleria/thumbnaildoc.ts b/src/app/showcase/doc/galleria/thumbnaildoc.ts index 213c1b76c95..41904c46a92 100644 --- a/src/app/showcase/doc/galleria/thumbnaildoc.ts +++ b/src/app/showcase/doc/galleria/thumbnaildoc.ts @@ -4,7 +4,7 @@ import { PhotoService } from '../../service/photoservice'; @Component({ selector: 'galleria-thumbnail-demo', - template: `
+ template: `

Galleria can be controlled programmatically using the activeIndex property.

 diff --git a/src/app/showcase/doc/icons/basicdoc.ts b/src/app/showcase/doc/icons/basicdoc.ts index bf9edf388f7..bbc1e0d630b 100644 --- a/src/app/showcase/doc/icons/basicdoc.ts +++ b/src/app/showcase/doc/icons/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ 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

 diff --git a/src/app/showcase/doc/icons/colordoc.ts b/src/app/showcase/doc/icons/colordoc.ts index c6c0f009906..b5d5a45bf8f 100644 --- a/src/app/showcase/doc/icons/colordoc.ts +++ b/src/app/showcase/doc/icons/colordoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'color-doc', - template: `
+ template: `

Icon color is defined with the color property which is inherited from parent by default.

 diff --git a/src/app/showcase/doc/icons/constantsdoc.ts b/src/app/showcase/doc/icons/constantsdoc.ts index fcdd4962bbf..37c25d5b1f2 100644 --- a/src/app/showcase/doc/icons/constantsdoc.ts +++ b/src/app/showcase/doc/icons/constantsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'prime-icons-constants-demo', - template: `
+ template: `

Constants API is available to reference icons easily when used programmatically.

 diff --git a/src/app/showcase/doc/icons/downloaddoc.ts b/src/app/showcase/doc/icons/downloaddoc.ts index 25e38218a7b..e18689243f8 100644 --- a/src/app/showcase/doc/icons/downloaddoc.ts +++ b/src/app/showcase/doc/icons/downloaddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'download-doc', - template: `
+ template: `

PrimeIcons is available at npm, run the following command to download it to your project.

 diff --git a/src/app/showcase/doc/icons/importdoc.ts b/src/app/showcase/doc/icons/importdoc.ts index e23ebc85e46..c0aec17c639 100644 --- a/src/app/showcase/doc/icons/importdoc.ts +++ b/src/app/showcase/doc/icons/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `

CSS file of the icon library needs to be imported in styles.scss of your application.

 diff --git a/src/app/showcase/doc/icons/listdoc.ts b/src/app/showcase/doc/icons/listdoc.ts index bdba2a76b2f..5e562a3afab 100644 --- a/src/app/showcase/doc/icons/listdoc.ts +++ b/src/app/showcase/doc/icons/listdoc.ts @@ -3,7 +3,7 @@ import { IconService } from '../../service/iconservice'; @Component({ selector: 'list-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/icons/sizedoc.ts b/src/app/showcase/doc/icons/sizedoc.ts index c7985f6662e..e87e4b49e47 100644 --- a/src/app/showcase/doc/icons/sizedoc.ts +++ b/src/app/showcase/doc/icons/sizedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'size-doc', - template: `
+ template: `

Size of an icon is controlled with the font-size property of the element.

 diff --git a/src/app/showcase/doc/icons/spindoc.ts b/src/app/showcase/doc/icons/spindoc.ts index 353e4c9df98..4f170b673cd 100644 --- a/src/app/showcase/doc/icons/spindoc.ts +++ b/src/app/showcase/doc/icons/spindoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'spin-doc', - template: `
+ template: `

Special pi-spin class applies infinite rotation to an icon.

 diff --git a/src/app/showcase/doc/inplace/basicdoc.ts b/src/app/showcase/doc/inplace/basicdoc.ts index 8e2e3b26571..77ee0a10d39 100644 --- a/src/app/showcase/doc/inplace/basicdoc.ts +++ b/src/app/showcase/doc/inplace/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Inplace component requires display and content templates to define the content of each state.

 diff --git a/src/app/showcase/doc/inplace/datadoc.ts b/src/app/showcase/doc/inplace/datadoc.ts index 74bc016410b..685ea107c50 100644 --- a/src/app/showcase/doc/inplace/datadoc.ts +++ b/src/app/showcase/doc/inplace/datadoc.ts @@ -5,7 +5,7 @@ import { CarService } from '../../service/carservice'; @Component({ selector: 'data-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/inplace/imagedoc.ts b/src/app/showcase/doc/inplace/imagedoc.ts index ae8869fac60..3b9abe5edf9 100644 --- a/src/app/showcase/doc/inplace/imagedoc.ts +++ b/src/app/showcase/doc/inplace/imagedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'image-doc', - template: `
+ template: `

Any content such as an image can be placed inside an Inplace.

 diff --git a/src/app/showcase/doc/inplace/importdoc.ts b/src/app/showcase/doc/inplace/importdoc.ts index 701be2c199e..bed81cf0103 100644 --- a/src/app/showcase/doc/inplace/importdoc.ts +++ b/src/app/showcase/doc/inplace/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/inplace/inputdoc.ts b/src/app/showcase/doc/inplace/inputdoc.ts index eebd26efedc..aebbb837e31 100644 --- a/src/app/showcase/doc/inplace/inputdoc.ts +++ b/src/app/showcase/doc/inplace/inputdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'input-doc', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/inplace/styledoc.ts b/src/app/showcase/doc/inplace/styledoc.ts index d814054efd2..c90e86867b9 100644 --- a/src/app/showcase/doc/inplace/styledoc.ts +++ b/src/app/showcase/doc/inplace/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts index f1218d47150..8ef30db16b2 100644 --- a/src/app/showcase/doc/inputgroup/basicdoc.ts +++ b/src/app/showcase/doc/inputgroup/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

An InputGroup is created by wrapping the input and add-ons inside an element with a p-inputgroup class where add-ons also should be inside an element with .p-inputgroup-addon class

 diff --git a/src/app/showcase/doc/inputgroup/buttondoc.ts b/src/app/showcase/doc/inputgroup/buttondoc.ts index c3169b05811..7d9a766831c 100644 --- a/src/app/showcase/doc/inputgroup/buttondoc.ts +++ b/src/app/showcase/doc/inputgroup/buttondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'button-doc', - template: `
+ template: `

Buttons can be placed at either side of an input element.

 diff --git a/src/app/showcase/doc/inputgroup/checkboxdoc.ts b/src/app/showcase/doc/inputgroup/checkboxdoc.ts index 4a524d1209e..7532a77ead1 100644 --- a/src/app/showcase/doc/inputgroup/checkboxdoc.ts +++ b/src/app/showcase/doc/inputgroup/checkboxdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'checkbox-doc', - template: `
+ template: `

Checkbox and RadioButton components can be combined with an input element under the same group.

 diff --git a/src/app/showcase/doc/inputgroup/importdoc.ts b/src/app/showcase/doc/inputgroup/importdoc.ts index f879eef0d63..a76e7d94af5 100644 --- a/src/app/showcase/doc/inputgroup/importdoc.ts +++ b/src/app/showcase/doc/inputgroup/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/inputgroup/multipledoc.ts b/src/app/showcase/doc/inputgroup/multipledoc.ts index 6cecc268301..1d112b4427f 100644 --- a/src/app/showcase/doc/inputgroup/multipledoc.ts +++ b/src/app/showcase/doc/inputgroup/multipledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'multiple-doc', - template: `
+ template: `

Multiple add-ons can be placed inside the same group.

 diff --git a/src/app/showcase/doc/inputmask/basicdoc.ts b/src/app/showcase/doc/inputmask/basicdoc.ts index c90388df05c..682f0b17113 100644 --- a/src/app/showcase/doc/inputmask/basicdoc.ts +++ b/src/app/showcase/doc/inputmask/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

InputMask is used as a controlled input with ngModel properties.

 diff --git a/src/app/showcase/doc/inputmask/disableddoc.ts b/src/app/showcase/doc/inputmask/disableddoc.ts index 916ec82644e..f94f2a37841 100644 --- a/src/app/showcase/doc/inputmask/disableddoc.ts +++ b/src/app/showcase/doc/inputmask/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputmask/floatlabeldoc.ts b/src/app/showcase/doc/inputmask/floatlabeldoc.ts index 63d3da42f7e..cdba214cc54 100644 --- a/src/app/showcase/doc/inputmask/floatlabeldoc.ts +++ b/src/app/showcase/doc/inputmask/floatlabeldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'floatlabel-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputmask/importdoc.ts b/src/app/showcase/doc/inputmask/importdoc.ts index 4193cb97662..242f66cc10b 100644 --- a/src/app/showcase/doc/inputmask/importdoc.ts +++ b/src/app/showcase/doc/inputmask/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/inputmask/invaliddoc.ts b/src/app/showcase/doc/inputmask/invaliddoc.ts index d5c477a89cb..2e7696f6952 100644 --- a/src/app/showcase/doc/inputmask/invaliddoc.ts +++ b/src/app/showcase/doc/inputmask/invaliddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'invalid-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputmask/maskdoc.ts b/src/app/showcase/doc/inputmask/maskdoc.ts index 2b447d955c6..a7cd5861861 100644 --- a/src/app/showcase/doc/inputmask/maskdoc.ts +++ b/src/app/showcase/doc/inputmask/maskdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'input-mask-mask-demo', - template: `
+ template: `

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 ( , diff --git a/src/app/showcase/doc/inputmask/optionaldoc.ts b/src/app/showcase/doc/inputmask/optionaldoc.ts index 2420fed7df9..7b63403b722 100644 --- a/src/app/showcase/doc/inputmask/optionaldoc.ts +++ b/src/app/showcase/doc/inputmask/optionaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'optional-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/inputmask/reactiveformsdoc.ts b/src/app/showcase/doc/inputmask/reactiveformsdoc.ts index b68fcb60d88..5d18ff88b03 100644 --- a/src/app/showcase/doc/inputmask/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputmask/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/inputmask/slotchardoc.ts b/src/app/showcase/doc/inputmask/slotchardoc.ts index eacf0887c65..f2547232ccf 100644 --- a/src/app/showcase/doc/inputmask/slotchardoc.ts +++ b/src/app/showcase/doc/inputmask/slotchardoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'slot-char-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputmask/styledoc.ts b/src/app/showcase/doc/inputmask/styledoc.ts index d0534c5406f..8cca44125c2 100644 --- a/src/app/showcase/doc/inputmask/styledoc.ts +++ b/src/app/showcase/doc/inputmask/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Styling is same as inputtext component, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/inputnumber/buttonsdoc.ts b/src/app/showcase/doc/inputnumber/buttonsdoc.ts index c2d36065192..ca05f019ab4 100644 --- a/src/app/showcase/doc/inputnumber/buttonsdoc.ts +++ b/src/app/showcase/doc/inputnumber/buttonsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'buttons-doc', - template: `
+ template: `

Spinner buttons is enabled using the showButtons options and layout is defined with the buttonLayout. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, diff --git a/src/app/showcase/doc/inputnumber/currencydoc.ts b/src/app/showcase/doc/inputnumber/currencydoc.ts index bfdd0e94501..905d9332590 100644 --- a/src/app/showcase/doc/inputnumber/currencydoc.ts +++ b/src/app/showcase/doc/inputnumber/currencydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'currency-doc', - template: `

+ template: `

Currency formatting is specified by setting the mode option to currency and currency property. In addition currencyDisplay option allows how the currency is displayed, valid values are "symbol" (default) or diff --git a/src/app/showcase/doc/inputnumber/disableddoc.ts b/src/app/showcase/doc/inputnumber/disableddoc.ts index 226f990d236..f88b7de746c 100644 --- a/src/app/showcase/doc/inputnumber/disableddoc.ts +++ b/src/app/showcase/doc/inputnumber/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/inputnumber/floatlabeldoc.ts b/src/app/showcase/doc/inputnumber/floatlabeldoc.ts index 26a005805f4..07ef59159d5 100644 --- a/src/app/showcase/doc/inputnumber/floatlabeldoc.ts +++ b/src/app/showcase/doc/inputnumber/floatlabeldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'float-label-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputnumber/importdoc.ts b/src/app/showcase/doc/inputnumber/importdoc.ts index e5d11be241b..9ff47a53b7a 100644 --- a/src/app/showcase/doc/inputnumber/importdoc.ts +++ b/src/app/showcase/doc/inputnumber/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/inputnumber/invaliddoc.ts b/src/app/showcase/doc/inputnumber/invaliddoc.ts index 6296cdc8133..4f0bf65c409 100644 --- a/src/app/showcase/doc/inputnumber/invaliddoc.ts +++ b/src/app/showcase/doc/inputnumber/invaliddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'invalid-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputnumber/localedoc.ts b/src/app/showcase/doc/inputnumber/localedoc.ts index 6e4dccfd9ac..394c5ed4b32 100644 --- a/src/app/showcase/doc/inputnumber/localedoc.ts +++ b/src/app/showcase/doc/inputnumber/localedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'locale-doc', - template: `
+ template: `

Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale.

 diff --git a/src/app/showcase/doc/inputnumber/numeralsdoc.ts b/src/app/showcase/doc/inputnumber/numeralsdoc.ts index 1feee832d35..bc15ac7e0b1 100644 --- a/src/app/showcase/doc/inputnumber/numeralsdoc.ts +++ b/src/app/showcase/doc/inputnumber/numeralsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'numerals-doc', - template: `
+ template: `

InputNumber is used as a controlled input with ngModel property.

 diff --git a/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts b/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts index 4f061f8fa92..f882b78c3de 100644 --- a/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts +++ b/src/app/showcase/doc/inputnumber/prefixsuffixdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'prefix-suffix-doc', - template: `
+ template: `

Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.

 diff --git a/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts b/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts index bb0d00552ab..2f5c4709f23 100644 --- a/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputnumber/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/inputnumber/styledoc.ts b/src/app/showcase/doc/inputnumber/styledoc.ts index 6a7f162b6de..cbce53009f3 100644 --- a/src/app/showcase/doc/inputnumber/styledoc.ts +++ b/src/app/showcase/doc/inputnumber/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/inputnumber/verticaldoc.ts b/src/app/showcase/doc/inputnumber/verticaldoc.ts index 36ea676783d..be2e0c6ae2a 100644 --- a/src/app/showcase/doc/inputnumber/verticaldoc.ts +++ b/src/app/showcase/doc/inputnumber/verticaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'vertical-doc', - template: `
+ template: `

Buttons can also placed vertically by setting buttonLayout as vertical.

 diff --git a/src/app/showcase/doc/inputswitch/basicdoc.ts b/src/app/showcase/doc/inputswitch/basicdoc.ts index 90af15de9c6..906ca337cb4 100644 --- a/src/app/showcase/doc/inputswitch/basicdoc.ts +++ b/src/app/showcase/doc/inputswitch/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Two-way value binding is defined using ngModel.

 diff --git a/src/app/showcase/doc/inputswitch/disableddoc.ts b/src/app/showcase/doc/inputswitch/disableddoc.ts index ee1e5eed0b2..33d33dc97b0 100644 --- a/src/app/showcase/doc/inputswitch/disableddoc.ts +++ b/src/app/showcase/doc/inputswitch/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputswitch/importdoc.ts b/src/app/showcase/doc/inputswitch/importdoc.ts index acd909a19c5..191f475202f 100644 --- a/src/app/showcase/doc/inputswitch/importdoc.ts +++ b/src/app/showcase/doc/inputswitch/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/inputswitch/preselectiondoc.ts b/src/app/showcase/doc/inputswitch/preselectiondoc.ts index 6831cc14802..9086eca5f29 100644 --- a/src/app/showcase/doc/inputswitch/preselectiondoc.ts +++ b/src/app/showcase/doc/inputswitch/preselectiondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'preselection-doc', - template: `
+ template: `

Enabling ngModel property displays the component as active initially.

 diff --git a/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts b/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts index 32748f35ac8..628841334ad 100644 --- a/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputswitch/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

InputSwitch can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/inputswitch/styledoc.ts b/src/app/showcase/doc/inputswitch/styledoc.ts index 8d5265e6cdb..2b1a10d9dd0 100644 --- a/src/app/showcase/doc/inputswitch/styledoc.ts +++ b/src/app/showcase/doc/inputswitch/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/inputtext/basicdoc.ts b/src/app/showcase/doc/inputtext/basicdoc.ts index 9d4ab1f55c4..d8ce64460ac 100644 --- a/src/app/showcase/doc/inputtext/basicdoc.ts +++ b/src/app/showcase/doc/inputtext/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

InputText is used as a controlled input with ngModel properties.

 diff --git a/src/app/showcase/doc/inputtext/disableddoc.ts b/src/app/showcase/doc/inputtext/disableddoc.ts index 293473921ce..603c4bf4d3b 100644 --- a/src/app/showcase/doc/inputtext/disableddoc.ts +++ b/src/app/showcase/doc/inputtext/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputtext/floatlabeldoc.ts b/src/app/showcase/doc/inputtext/floatlabeldoc.ts index 55f43fc59d1..2403b6ea258 100644 --- a/src/app/showcase/doc/inputtext/floatlabeldoc.ts +++ b/src/app/showcase/doc/inputtext/floatlabeldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'floatlabel-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputtext/helptextdoc.ts b/src/app/showcase/doc/inputtext/helptextdoc.ts index ece35eef7d2..cb99e57d156 100644 --- a/src/app/showcase/doc/inputtext/helptextdoc.ts +++ b/src/app/showcase/doc/inputtext/helptextdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'helptext-doc', - template: `
+ template: `

An advisory text can be defined with the semantic small tag.

 diff --git a/src/app/showcase/doc/inputtext/iconsdoc.ts b/src/app/showcase/doc/inputtext/iconsdoc.ts index d7f8a04df76..85348042670 100644 --- a/src/app/showcase/doc/inputtext/iconsdoc.ts +++ b/src/app/showcase/doc/inputtext/iconsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'icons-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/inputtext/importdoc.ts b/src/app/showcase/doc/inputtext/importdoc.ts index 41210b9efc2..f1566fb632d 100644 --- a/src/app/showcase/doc/inputtext/importdoc.ts +++ b/src/app/showcase/doc/inputtext/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/inputtext/invaliddoc.ts b/src/app/showcase/doc/inputtext/invaliddoc.ts index cbeec1c9601..18f377dd687 100644 --- a/src/app/showcase/doc/inputtext/invaliddoc.ts +++ b/src/app/showcase/doc/inputtext/invaliddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'invalid-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputtext/keyfilterdoc.ts b/src/app/showcase/doc/inputtext/keyfilterdoc.ts index be2be8e64cf..8908f895797 100644 --- a/src/app/showcase/doc/inputtext/keyfilterdoc.ts +++ b/src/app/showcase/doc/inputtext/keyfilterdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'key-filter-doc', - template: `
+ template: `

InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.

 diff --git a/src/app/showcase/doc/inputtext/reactiveformsdoc.ts b/src/app/showcase/doc/inputtext/reactiveformsdoc.ts index e29557a1b86..7288f4ea249 100644 --- a/src/app/showcase/doc/inputtext/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputtext/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/inputtext/sizesdoc.ts b/src/app/showcase/doc/inputtext/sizesdoc.ts index 8bb0e5cdfb1..289da8cfa1f 100644 --- a/src/app/showcase/doc/inputtext/sizesdoc.ts +++ b/src/app/showcase/doc/inputtext/sizesdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'sizes-doc', - template: `
+ template: `

Apply .p-inputtext-sm to reduce the size of the input element or .p-inputtext-lg to enlarge it.

 diff --git a/src/app/showcase/doc/inputtext/styledoc.ts b/src/app/showcase/doc/inputtext/styledoc.ts index 47daa928c44..46a280c62d5 100644 --- a/src/app/showcase/doc/inputtext/styledoc.ts +++ b/src/app/showcase/doc/inputtext/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/inputtextarea/autoresizedoc.ts b/src/app/showcase/doc/inputtextarea/autoresizedoc.ts index 0f7aeb451cb..81342d7740e 100644 --- a/src/app/showcase/doc/inputtextarea/autoresizedoc.ts +++ b/src/app/showcase/doc/inputtextarea/autoresizedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'autoresize-doc', - template: `
+ template: `

When autoResize is enabled, textarea grows instead of displaying a scrollbar.

 diff --git a/src/app/showcase/doc/inputtextarea/basicdoc.ts b/src/app/showcase/doc/inputtextarea/basicdoc.ts index fd80b66e521..b731497d660 100644 --- a/src/app/showcase/doc/inputtextarea/basicdoc.ts +++ b/src/app/showcase/doc/inputtextarea/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

InputTextarea is applied to an input field with pInputTextarea directive.

 diff --git a/src/app/showcase/doc/inputtextarea/disableddoc.ts b/src/app/showcase/doc/inputtextarea/disableddoc.ts index 1eb2f107ba9..38197c40d8f 100644 --- a/src/app/showcase/doc/inputtextarea/disableddoc.ts +++ b/src/app/showcase/doc/inputtextarea/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts b/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts index 3d3153af24e..d30139dd72c 100644 --- a/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts +++ b/src/app/showcase/doc/inputtextarea/floatlabeldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'floatlabel-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/inputtextarea/importdoc.ts b/src/app/showcase/doc/inputtextarea/importdoc.ts index 1ca7385cce5..3ce359e3a94 100644 --- a/src/app/showcase/doc/inputtextarea/importdoc.ts +++ b/src/app/showcase/doc/inputtextarea/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts b/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts index c4acd164f32..b8c9e4432b0 100644 --- a/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts +++ b/src/app/showcase/doc/inputtextarea/keyfilterdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'key-filter-doc', - template: `
+ template: `

InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information.

 diff --git a/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts b/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts index 92ec9a61a12..3d363805697 100644 --- a/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts +++ b/src/app/showcase/doc/inputtextarea/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

InputTextarea can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/inputtextarea/styledoc.ts b/src/app/showcase/doc/inputtextarea/styledoc.ts index 2465f9e87ce..585f5372b4a 100644 --- a/src/app/showcase/doc/inputtextarea/styledoc.ts +++ b/src/app/showcase/doc/inputtextarea/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/installation/animationsdoc.ts b/src/app/showcase/doc/installation/animationsdoc.ts index d0fe239b9e1..185607eb2e5 100644 --- a/src/app/showcase/doc/installation/animationsdoc.ts +++ b/src/app/showcase/doc/installation/animationsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'animations-doc', - template: `
+ template: `

Various components utilize Angular animations to improve the user experience. Animations have their own module BrowserAnimationsModule is required to be imported in your application. If you prefer to disable animations diff --git a/src/app/showcase/doc/installation/downloaddoc.ts b/src/app/showcase/doc/installation/downloaddoc.ts index fc348487825..f7fd92c111e 100644 --- a/src/app/showcase/doc/installation/downloaddoc.ts +++ b/src/app/showcase/doc/installation/downloaddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'download-doc', - template: `

+ template: `

PrimeNG is available for download at npm.

 diff --git a/src/app/showcase/doc/installation/examplesdoc.ts b/src/app/showcase/doc/installation/examplesdoc.ts index 139a28cc0d6..53635a66158 100644 --- a/src/app/showcase/doc/installation/examplesdoc.ts +++ b/src/app/showcase/doc/installation/examplesdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'examples-doc', - template: `
+ template: `

An example start with Angular CLI is available at github.

 diff --git a/src/app/showcase/doc/installation/stylesdoc.ts b/src/app/showcase/doc/installation/stylesdoc.ts index 8a8d22fb9b5..96a8b8c22e0 100644 --- a/src/app/showcase/doc/installation/stylesdoc.ts +++ b/src/app/showcase/doc/installation/stylesdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'styles-doc', - template: `
+ template: `

Theme and Core styles are the necessary css files of the components, visit the Themes section for the complete list of available themes to choose from. Styles can either be imported at diff --git a/src/app/showcase/doc/installation/usagedoc.ts b/src/app/showcase/doc/installation/usagedoc.ts index efe38c94696..d00ae0af620 100644 --- a/src/app/showcase/doc/installation/usagedoc.ts +++ b/src/app/showcase/doc/installation/usagedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'usage-doc', - template: `

+ template: `

Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.

 diff --git a/src/app/showcase/doc/installation/videos/videosdoc.ts b/src/app/showcase/doc/installation/videos/videosdoc.ts index c99d8772d40..5e083c98c0d 100644 --- a/src/app/showcase/doc/installation/videos/videosdoc.ts +++ b/src/app/showcase/doc/installation/videos/videosdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'videos-doc', - template: `
+ template: `

Angular CLI is the recommended way to build Angular applications with PrimeNG.

 diff --git a/src/app/showcase/doc/keyfilter/importdoc.ts b/src/app/showcase/doc/keyfilter/importdoc.ts index f03511bbe74..c6b4ddd6814 100644 --- a/src/app/showcase/doc/keyfilter/importdoc.ts +++ b/src/app/showcase/doc/keyfilter/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/keyfilter/presetsdoc.ts b/src/app/showcase/doc/keyfilter/presetsdoc.ts index 8334161fdf3..bc90bc1262c 100644 --- a/src/app/showcase/doc/keyfilter/presetsdoc.ts +++ b/src/app/showcase/doc/keyfilter/presetsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'presets-doc', - template: `
+ template: `

KeyFilter provides various presets configured with the pKeyFilter property.

 diff --git a/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts b/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts index d9089bff038..15ec1cfa3eb 100644 --- a/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts +++ b/src/app/showcase/doc/keyfilter/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

KeyFilter can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/keyfilter/regexdoc.ts b/src/app/showcase/doc/keyfilter/regexdoc.ts index 67ad2443479..ab89026e7e6 100644 --- a/src/app/showcase/doc/keyfilter/regexdoc.ts +++ b/src/app/showcase/doc/keyfilter/regexdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reg-exp-demo', - template: `
+ template: `

In addition to the presets, a regular expression can be configured for customization.

 diff --git a/src/app/showcase/doc/knob/basicdoc.ts b/src/app/showcase/doc/knob/basicdoc.ts index afc363ea0db..1987153d1cc 100644 --- a/src/app/showcase/doc/knob/basicdoc.ts +++ b/src/app/showcase/doc/knob/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/knob/colordoc.ts b/src/app/showcase/doc/knob/colordoc.ts index 5e316d78271..8cea71765a0 100644 --- a/src/app/showcase/doc/knob/colordoc.ts +++ b/src/app/showcase/doc/knob/colordoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'color-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/knob/disableddoc.ts b/src/app/showcase/doc/knob/disableddoc.ts index d1175154816..9c2e79f0d12 100644 --- a/src/app/showcase/doc/knob/disableddoc.ts +++ b/src/app/showcase/doc/knob/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/knob/importdoc.ts b/src/app/showcase/doc/knob/importdoc.ts index 8fb1c86964f..36851f95c11 100644 --- a/src/app/showcase/doc/knob/importdoc.ts +++ b/src/app/showcase/doc/knob/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/knob/minmaxdoc.ts b/src/app/showcase/doc/knob/minmaxdoc.ts index 36bef7c3a55..e1a20ad1d7c 100644 --- a/src/app/showcase/doc/knob/minmaxdoc.ts +++ b/src/app/showcase/doc/knob/minmaxdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'min-max-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/knob/reactiveformsdoc.ts b/src/app/showcase/doc/knob/reactiveformsdoc.ts index fecf8eef3ef..007b1d0b55a 100644 --- a/src/app/showcase/doc/knob/reactiveformsdoc.ts +++ b/src/app/showcase/doc/knob/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

Knob can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/knob/readonlydoc.ts b/src/app/showcase/doc/knob/readonlydoc.ts index 858d93b8c46..8e12ef95743 100644 --- a/src/app/showcase/doc/knob/readonlydoc.ts +++ b/src/app/showcase/doc/knob/readonlydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'readonly-doc', - template: `
+ template: `

When readonly present, value cannot be edited.

 diff --git a/src/app/showcase/doc/knob/sizedoc.ts b/src/app/showcase/doc/knob/sizedoc.ts index feaf45f0f31..710c1ba5ffc 100644 --- a/src/app/showcase/doc/knob/sizedoc.ts +++ b/src/app/showcase/doc/knob/sizedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'size-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/knob/stepdoc.ts b/src/app/showcase/doc/knob/stepdoc.ts index 3fab36db84b..db8587a5375 100644 --- a/src/app/showcase/doc/knob/stepdoc.ts +++ b/src/app/showcase/doc/knob/stepdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'step-doc', - template: `
+ template: `

Size of each movement is defined with the step property.

 diff --git a/src/app/showcase/doc/knob/strokedoc.ts b/src/app/showcase/doc/knob/strokedoc.ts index 03c260ca473..7cc11a1c18b 100644 --- a/src/app/showcase/doc/knob/strokedoc.ts +++ b/src/app/showcase/doc/knob/strokedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'stroke-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/knob/styledoc.ts b/src/app/showcase/doc/knob/styledoc.ts index 45ed1151ac5..3383399c5da 100644 --- a/src/app/showcase/doc/knob/styledoc.ts +++ b/src/app/showcase/doc/knob/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/knob/templatedoc.ts b/src/app/showcase/doc/knob/templatedoc.ts index fd930f51bb2..45bbadbefe7 100644 --- a/src/app/showcase/doc/knob/templatedoc.ts +++ b/src/app/showcase/doc/knob/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/listbox/basicdoc.ts b/src/app/showcase/doc/listbox/basicdoc.ts index 707637e6beb..afb266a67d6 100644 --- a/src/app/showcase/doc/listbox/basicdoc.ts +++ b/src/app/showcase/doc/listbox/basicdoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'basic-doc', - template: `
+ template: `

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. diff --git a/src/app/showcase/doc/listbox/disableddoc.ts b/src/app/showcase/doc/listbox/disableddoc.ts index b574b4d0c20..b18c26a66f9 100644 --- a/src/app/showcase/doc/listbox/disableddoc.ts +++ b/src/app/showcase/doc/listbox/disableddoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'disabled-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/listbox/filterdoc.ts b/src/app/showcase/doc/listbox/filterdoc.ts index 923b3864252..a8de5784222 100644 --- a/src/app/showcase/doc/listbox/filterdoc.ts +++ b/src/app/showcase/doc/listbox/filterdoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'filter-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/listbox/groupdoc.ts b/src/app/showcase/doc/listbox/groupdoc.ts index 22eec0e0d98..db5e5bf8794 100644 --- a/src/app/showcase/doc/listbox/groupdoc.ts +++ b/src/app/showcase/doc/listbox/groupdoc.ts @@ -9,7 +9,7 @@ interface Country { @Component({ selector: 'group-doc', - template: `
+ template: `

Options can be grouped when a nested data structures is provided.

 diff --git a/src/app/showcase/doc/listbox/importdoc.ts b/src/app/showcase/doc/listbox/importdoc.ts index 4f9fe188f2a..f5c0bc2edb8 100644 --- a/src/app/showcase/doc/listbox/importdoc.ts +++ b/src/app/showcase/doc/listbox/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/listbox/invaliddoc.ts b/src/app/showcase/doc/listbox/invaliddoc.ts index 6097b31d5de..9f909dc58cd 100644 --- a/src/app/showcase/doc/listbox/invaliddoc.ts +++ b/src/app/showcase/doc/listbox/invaliddoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'listbox-invalid-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/listbox/multipledoc.ts b/src/app/showcase/doc/listbox/multipledoc.ts index 52ce75e6a9e..a8d4738d6c2 100644 --- a/src/app/showcase/doc/listbox/multipledoc.ts +++ b/src/app/showcase/doc/listbox/multipledoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'multiple-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/listbox/reactiveformsdoc.ts b/src/app/showcase/doc/listbox/reactiveformsdoc.ts index 7847580f374..f950d304e78 100644 --- a/src/app/showcase/doc/listbox/reactiveformsdoc.ts +++ b/src/app/showcase/doc/listbox/reactiveformsdoc.ts @@ -9,7 +9,7 @@ interface City { @Component({ selector: 'reactive-forms-doc', - template: `

+ template: `

Listbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/listbox/styledoc.ts b/src/app/showcase/doc/listbox/styledoc.ts index 9ae200e4d3b..689e0f60e1b 100644 --- a/src/app/showcase/doc/listbox/styledoc.ts +++ b/src/app/showcase/doc/listbox/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/listbox/templatedoc.ts b/src/app/showcase/doc/listbox/templatedoc.ts index 4952e4ccfce..94e552775d2 100644 --- a/src/app/showcase/doc/listbox/templatedoc.ts +++ b/src/app/showcase/doc/listbox/templatedoc.ts @@ -8,7 +8,7 @@ interface Country { @Component({ selector: 'template-doc', - template: `
+ template: `

Custom content for an option is displayed with the pTemplate property that takes an option as a parameter.

 diff --git a/src/app/showcase/doc/megamenu/basicdoc.ts b/src/app/showcase/doc/megamenu/basicdoc.ts index f4554f92259..896db85e144 100644 --- a/src/app/showcase/doc/megamenu/basicdoc.ts +++ b/src/app/showcase/doc/megamenu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

MegaMenu requires a collection of menuitems as its model.

 diff --git a/src/app/showcase/doc/megamenu/importdoc.ts b/src/app/showcase/doc/megamenu/importdoc.ts index 9bb7f416a16..8dc9874be3d 100644 --- a/src/app/showcase/doc/megamenu/importdoc.ts +++ b/src/app/showcase/doc/megamenu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/megamenu/styledoc.ts b/src/app/showcase/doc/megamenu/styledoc.ts index 5ac0ef0fac8..0448c91638c 100644 --- a/src/app/showcase/doc/megamenu/styledoc.ts +++ b/src/app/showcase/doc/megamenu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/megamenu/templatedoc.ts b/src/app/showcase/doc/megamenu/templatedoc.ts index b6887694b93..8907d422e1a 100644 --- a/src/app/showcase/doc/megamenu/templatedoc.ts +++ b/src/app/showcase/doc/megamenu/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/megamenu/verticaldoc.ts b/src/app/showcase/doc/megamenu/verticaldoc.ts index df59dbc2b5f..7eb3cb3570e 100644 --- a/src/app/showcase/doc/megamenu/verticaldoc.ts +++ b/src/app/showcase/doc/megamenu/verticaldoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'vertical-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/menu/basicdoc.ts b/src/app/showcase/doc/menu/basicdoc.ts index 09f8a4288f3..7c597308caf 100644 --- a/src/app/showcase/doc/menu/basicdoc.ts +++ b/src/app/showcase/doc/menu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Menu requires a collection of menuitems as its model.

 diff --git a/src/app/showcase/doc/menu/commanddoc.ts b/src/app/showcase/doc/menu/commanddoc.ts index 52a598270dd..b0672dab7e5 100644 --- a/src/app/showcase/doc/menu/commanddoc.ts +++ b/src/app/showcase/doc/menu/commanddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'command-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/menu/customdoc.ts b/src/app/showcase/doc/menu/customdoc.ts index 00a0671e10e..d9c70e79794 100644 --- a/src/app/showcase/doc/menu/customdoc.ts +++ b/src/app/showcase/doc/menu/customdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'custom-content-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/menu/groupdoc.ts b/src/app/showcase/doc/menu/groupdoc.ts index 70e73b2be7b..4d8c73085ae 100644 --- a/src/app/showcase/doc/menu/groupdoc.ts +++ b/src/app/showcase/doc/menu/groupdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'menu-group-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/menu/importdoc.ts b/src/app/showcase/doc/menu/importdoc.ts index fa8d8210e2d..0a95db84436 100644 --- a/src/app/showcase/doc/menu/importdoc.ts +++ b/src/app/showcase/doc/menu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/menu/navigationdoc.ts b/src/app/showcase/doc/menu/navigationdoc.ts index c4c8bd2b837..fa67903f5b2 100644 --- a/src/app/showcase/doc/menu/navigationdoc.ts +++ b/src/app/showcase/doc/menu/navigationdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'navigation-doc', - template: `
+ template: `

Navigation is specified using url property for external links and with routerLink for internal ones. If a menuitem has an active route, p-menuitem-link-active style class is added as an indicator. Active route link can diff --git a/src/app/showcase/doc/menu/popupdoc.ts b/src/app/showcase/doc/menu/popupdoc.ts index 0ec1969a728..b66506e3e56 100644 --- a/src/app/showcase/doc/menu/popupdoc.ts +++ b/src/app/showcase/doc/menu/popupdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'popup-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/menu/styledoc.ts b/src/app/showcase/doc/menu/styledoc.ts index 5a18d6d01ec..0c999dfc5eb 100644 --- a/src/app/showcase/doc/menu/styledoc.ts +++ b/src/app/showcase/doc/menu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/menubar/basicdoc.ts b/src/app/showcase/doc/menubar/basicdoc.ts index e64a422d02e..45066babcbd 100644 --- a/src/app/showcase/doc/menubar/basicdoc.ts +++ b/src/app/showcase/doc/menubar/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Menubar requires nested menuitems as its model.

 diff --git a/src/app/showcase/doc/menubar/importdoc.ts b/src/app/showcase/doc/menubar/importdoc.ts index 696a630462c..5db1ac84ac0 100644 --- a/src/app/showcase/doc/menubar/importdoc.ts +++ b/src/app/showcase/doc/menubar/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/menubar/styledoc.ts b/src/app/showcase/doc/menubar/styledoc.ts index d325642ae6d..ec10d204d84 100644 --- a/src/app/showcase/doc/menubar/styledoc.ts +++ b/src/app/showcase/doc/menubar/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/menubar/templatedoc.ts b/src/app/showcase/doc/menubar/templatedoc.ts index a3c831713af..d048c330842 100644 --- a/src/app/showcase/doc/menubar/templatedoc.ts +++ b/src/app/showcase/doc/menubar/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'menubar-template-demo', - template: `
+ template: `

Custom content can be placed inside the menubar using the start and end templates.

 diff --git a/src/app/showcase/doc/messages/animationdoc.ts b/src/app/showcase/doc/messages/animationdoc.ts index e806e159697..3bfc32d685c 100644 --- a/src/app/showcase/doc/messages/animationdoc.ts +++ b/src/app/showcase/doc/messages/animationdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'animation-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/messages/basicdoc.ts b/src/app/showcase/doc/messages/basicdoc.ts index 7ad23e227b1..c3eb712d031 100644 --- a/src/app/showcase/doc/messages/basicdoc.ts +++ b/src/app/showcase/doc/messages/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

A single message is specified by Message interface in PrimeNG that defines the id, severity, summary and detail as the properties. Messages to display can either be defined using the value property diff --git a/src/app/showcase/doc/messages/closabledoc.ts b/src/app/showcase/doc/messages/closabledoc.ts index bc14630056d..eb5ca369c5a 100644 --- a/src/app/showcase/doc/messages/closabledoc.ts +++ b/src/app/showcase/doc/messages/closabledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'closable-doc', - template: `

+ template: `

Messages are closable by default resulting in a close icon being displayed on top right corner. In order to disable closable messages, set closable to false. Note that in this case two-way binding is not necessary diff --git a/src/app/showcase/doc/messages/dynamicdoc.ts b/src/app/showcase/doc/messages/dynamicdoc.ts index daf12135c59..14a23358fbd 100644 --- a/src/app/showcase/doc/messages/dynamicdoc.ts +++ b/src/app/showcase/doc/messages/dynamicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'messages-dynamic-demo', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/messages/importdoc.ts b/src/app/showcase/doc/messages/importdoc.ts index f3705f17197..d75c84ea040 100644 --- a/src/app/showcase/doc/messages/importdoc.ts +++ b/src/app/showcase/doc/messages/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-demo', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/messages/inlinedoc.ts b/src/app/showcase/doc/messages/inlinedoc.ts index acbaeac9ba8..d09cca3d123 100644 --- a/src/app/showcase/doc/messages/inlinedoc.ts +++ b/src/app/showcase/doc/messages/inlinedoc.ts @@ -1,10 +1,9 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { Message } from 'primeng/api'; +import { Component, Input } from '@angular/core'; import { Code } from '../../domain/code'; @Component({ selector: 'messages-inline-demo', - template: `
+ template: `

p-message component is used to display inline messages mostly within forms.

 diff --git a/src/app/showcase/doc/messages/messagesstyledoc.ts b/src/app/showcase/doc/messages/messagesstyledoc.ts index f8dcf30950c..a333a11228a 100644 --- a/src/app/showcase/doc/messages/messagesstyledoc.ts +++ b/src/app/showcase/doc/messages/messagesstyledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'messagesstyle-demo', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

diff --git a/src/app/showcase/doc/messages/messagestyledoc.ts b/src/app/showcase/doc/messages/messagestyledoc.ts index 9b68bdcbace..202f562e5bc 100644 --- a/src/app/showcase/doc/messages/messagestyledoc.ts +++ b/src/app/showcase/doc/messages/messagestyledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'messagestyle-demo', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

diff --git a/src/app/showcase/doc/messages/servicedoc.ts b/src/app/showcase/doc/messages/servicedoc.ts index 7a7f6ed5ccc..963f1f33e94 100644 --- a/src/app/showcase/doc/messages/servicedoc.ts +++ b/src/app/showcase/doc/messages/servicedoc.ts @@ -1,10 +1,10 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { Message, MessageService } from 'primeng/api'; +import { Component, Input } from '@angular/core'; +import { MessageService } from 'primeng/api'; import { Code } from '../../domain/code'; @Component({ selector: 'service-doc', - template: `
+ template: `

MessageService alternative does not require a value binding to an array. In order to use this service, import the class and define it as a provider in a component higher up in the component tree such as application instance itself so diff --git a/src/app/showcase/doc/messages/severitydoc.ts b/src/app/showcase/doc/messages/severitydoc.ts index 94da18873fa..9687ff75652 100644 --- a/src/app/showcase/doc/messages/severitydoc.ts +++ b/src/app/showcase/doc/messages/severitydoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'severity-doc', - template: `

+ template: `

The severity option specifies the type of the message.

 diff --git a/src/app/showcase/doc/messages/staticdoc.ts b/src/app/showcase/doc/messages/staticdoc.ts index d8f06acf704..9ee1c40a7ed 100644 --- a/src/app/showcase/doc/messages/staticdoc.ts +++ b/src/app/showcase/doc/messages/staticdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'static-doc', - template: `
+ template: `

Alternative way to provide the content for the messages is templating. In this case value property and message service is ignored and only static is displayed.

 diff --git a/src/app/showcase/doc/multiselect/basicdoc.ts b/src/app/showcase/doc/multiselect/basicdoc.ts index 83daf398702..ea5997d2700 100644 --- a/src/app/showcase/doc/multiselect/basicdoc.ts +++ b/src/app/showcase/doc/multiselect/basicdoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'basic-doc', - template: `
+ template: `

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. diff --git a/src/app/showcase/doc/multiselect/chipsdoc.ts b/src/app/showcase/doc/multiselect/chipsdoc.ts index eadf1caa27f..0a640f8d7d0 100644 --- a/src/app/showcase/doc/multiselect/chipsdoc.ts +++ b/src/app/showcase/doc/multiselect/chipsdoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'chips-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/multiselect/disableddoc.ts b/src/app/showcase/doc/multiselect/disableddoc.ts index c97df246c18..3725608ba04 100644 --- a/src/app/showcase/doc/multiselect/disableddoc.ts +++ b/src/app/showcase/doc/multiselect/disableddoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/multiselect/filterdoc.ts b/src/app/showcase/doc/multiselect/filterdoc.ts index 97cf029f6fe..ac4c1fae32f 100644 --- a/src/app/showcase/doc/multiselect/filterdoc.ts +++ b/src/app/showcase/doc/multiselect/filterdoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'filter-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/multiselect/floatlabeldoc.ts b/src/app/showcase/doc/multiselect/floatlabeldoc.ts index 42729cf526b..fa4302268cf 100644 --- a/src/app/showcase/doc/multiselect/floatlabeldoc.ts +++ b/src/app/showcase/doc/multiselect/floatlabeldoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'floatlabel-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/multiselect/groupdoc.ts b/src/app/showcase/doc/multiselect/groupdoc.ts index 4d12a015d44..986a8726d7e 100644 --- a/src/app/showcase/doc/multiselect/groupdoc.ts +++ b/src/app/showcase/doc/multiselect/groupdoc.ts @@ -9,7 +9,7 @@ interface City { @Component({ selector: 'group-doc', - template: `
+ template: `

Options can be grouped when a nested data structures is provided.

 diff --git a/src/app/showcase/doc/multiselect/importdoc.ts b/src/app/showcase/doc/multiselect/importdoc.ts index 715865dc342..3393b40e83a 100644 --- a/src/app/showcase/doc/multiselect/importdoc.ts +++ b/src/app/showcase/doc/multiselect/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/multiselect/invaliddoc.ts b/src/app/showcase/doc/multiselect/invaliddoc.ts index 63e03b2efec..d1067cbe956 100644 --- a/src/app/showcase/doc/multiselect/invaliddoc.ts +++ b/src/app/showcase/doc/multiselect/invaliddoc.ts @@ -8,7 +8,7 @@ interface City { @Component({ selector: 'invalid-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/multiselect/reactiveformsdoc.ts b/src/app/showcase/doc/multiselect/reactiveformsdoc.ts index 1a75993dc34..f15a45cb4da 100644 --- a/src/app/showcase/doc/multiselect/reactiveformsdoc.ts +++ b/src/app/showcase/doc/multiselect/reactiveformsdoc.ts @@ -9,7 +9,7 @@ interface City { @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

MultiSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/multiselect/styledoc.ts b/src/app/showcase/doc/multiselect/styledoc.ts index 91e51806cce..9341910c9cf 100644 --- a/src/app/showcase/doc/multiselect/styledoc.ts +++ b/src/app/showcase/doc/multiselect/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/multiselect/templatedoc.ts b/src/app/showcase/doc/multiselect/templatedoc.ts index c6194322d35..62bb01b0491 100644 --- a/src/app/showcase/doc/multiselect/templatedoc.ts +++ b/src/app/showcase/doc/multiselect/templatedoc.ts @@ -8,7 +8,7 @@ interface Country { @Component({ selector: 'template-doc', - template: `
+ template: `

Available options and the selected options support templating with pTemplate properties respectively. In addition, header, footer and filter sections can be templated as well.

 diff --git a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts index 361dd30bc31..61efb5fa1d5 100644 --- a/src/app/showcase/doc/multiselect/virtualscrolldoc.ts +++ b/src/app/showcase/doc/multiselect/virtualscrolldoc.ts @@ -8,7 +8,7 @@ interface Country { @Component({ selector: 'virtual-scroll-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/orderlist/basicdoc.ts b/src/app/showcase/doc/orderlist/basicdoc.ts index 11510ccbefb..c0549e699e7 100644 --- a/src/app/showcase/doc/orderlist/basicdoc.ts +++ b/src/app/showcase/doc/orderlist/basicdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'basic-doc', - template: `

+ template: `

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.

 diff --git a/src/app/showcase/doc/orderlist/dragdropdoc.ts b/src/app/showcase/doc/orderlist/dragdropdoc.ts index 44bccc319c4..b0fb1851b14 100644 --- a/src/app/showcase/doc/orderlist/dragdropdoc.ts +++ b/src/app/showcase/doc/orderlist/dragdropdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'drag-drop-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/orderlist/filterdoc.ts b/src/app/showcase/doc/orderlist/filterdoc.ts index b68438009cd..1defedc941a 100644 --- a/src/app/showcase/doc/orderlist/filterdoc.ts +++ b/src/app/showcase/doc/orderlist/filterdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'filter-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/orderlist/importdoc.ts b/src/app/showcase/doc/orderlist/importdoc.ts index 0ad4dd9de05..44f6a8e9e28 100644 --- a/src/app/showcase/doc/orderlist/importdoc.ts +++ b/src/app/showcase/doc/orderlist/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/orderlist/styledoc.ts b/src/app/showcase/doc/orderlist/styledoc.ts index d4e3500c647..5e2a6319f71 100644 --- a/src/app/showcase/doc/orderlist/styledoc.ts +++ b/src/app/showcase/doc/orderlist/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/organizationchart/basicdoc.ts b/src/app/showcase/doc/organizationchart/basicdoc.ts index beee3d241d8..e11b1a3020c 100644 --- a/src/app/showcase/doc/organizationchart/basicdoc.ts +++ b/src/app/showcase/doc/organizationchart/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

OrganizationChart requires a collection of TreeNode instances as a value.

 diff --git a/src/app/showcase/doc/organizationchart/colored.doc.ts b/src/app/showcase/doc/organizationchart/colored.doc.ts index 3dcff464945..6296712ffe8 100644 --- a/src/app/showcase/doc/organizationchart/colored.doc.ts +++ b/src/app/showcase/doc/organizationchart/colored.doc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'organization-chart-colored-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/organizationchart/importdoc.ts b/src/app/showcase/doc/organizationchart/importdoc.ts index 1365ebf1203..049b7ba6c94 100644 --- a/src/app/showcase/doc/organizationchart/importdoc.ts +++ b/src/app/showcase/doc/organizationchart/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/organizationchart/selectiondoc.ts b/src/app/showcase/doc/organizationchart/selectiondoc.ts index faa9670831e..0cda5d02223 100644 --- a/src/app/showcase/doc/organizationchart/selectiondoc.ts +++ b/src/app/showcase/doc/organizationchart/selectiondoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'selection-doc', - template: `
+ template: `

Nodes can be selected by defining selectionMode along with a value binding with selection properties. By default only one node can be selected, set selectionMode as multiple to select more than one. diff --git a/src/app/showcase/doc/organizationchart/styledoc.ts b/src/app/showcase/doc/organizationchart/styledoc.ts index 3088ccae0cf..06a29f614df 100644 --- a/src/app/showcase/doc/organizationchart/styledoc.ts +++ b/src/app/showcase/doc/organizationchart/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `

+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/organizationchart/templatedoc.ts b/src/app/showcase/doc/organizationchart/templatedoc.ts index 0c09c082e79..fea7df665d6 100644 --- a/src/app/showcase/doc/organizationchart/templatedoc.ts +++ b/src/app/showcase/doc/organizationchart/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/overlay/appendtodoc.ts b/src/app/showcase/doc/overlay/appendtodoc.ts index 7a80c2c9360..91612ceeba3 100644 --- a/src/app/showcase/doc/overlay/appendtodoc.ts +++ b/src/app/showcase/doc/overlay/appendtodoc.ts @@ -4,7 +4,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'appendto-doc', - template: `
+ template: `

Overlay can be mounted into its location, body or DOM element instance using this option.

 diff --git a/src/app/showcase/doc/overlay/autozindexdoc.ts b/src/app/showcase/doc/overlay/autozindexdoc.ts index c995d46b294..ea6eea4392a 100644 --- a/src/app/showcase/doc/overlay/autozindexdoc.ts +++ b/src/app/showcase/doc/overlay/autozindexdoc.ts @@ -3,7 +3,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'auto-zindex-doc', - template: `
+ template: `

The autoZIndex determines whether to automatically manage layering. Its default value is 'false'.

 diff --git a/src/app/showcase/doc/overlay/basezindexdoc.ts b/src/app/showcase/doc/overlay/basezindexdoc.ts index c90a744df69..242a72e1c93 100644 --- a/src/app/showcase/doc/overlay/basezindexdoc.ts +++ b/src/app/showcase/doc/overlay/basezindexdoc.ts @@ -3,7 +3,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'base-zindex-doc', - template: `
+ template: `

The baseZIndex is base zIndex value to use in layering. Its default value is 0.

 diff --git a/src/app/showcase/doc/overlay/basicdoc.ts b/src/app/showcase/doc/overlay/basicdoc.ts index d5cf0b74d05..4bfc3e09594 100644 --- a/src/app/showcase/doc/overlay/basicdoc.ts +++ b/src/app/showcase/doc/overlay/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/overlay/eventsdoc.ts b/src/app/showcase/doc/overlay/eventsdoc.ts index d67d1ca469f..d073d0f83b8 100644 --- a/src/app/showcase/doc/overlay/eventsdoc.ts +++ b/src/app/showcase/doc/overlay/eventsdoc.ts @@ -4,7 +4,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'events-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/overlay/hideonescapedoc.ts b/src/app/showcase/doc/overlay/hideonescapedoc.ts index 1d3999fa09a..e39c3e4657b 100644 --- a/src/app/showcase/doc/overlay/hideonescapedoc.ts +++ b/src/app/showcase/doc/overlay/hideonescapedoc.ts @@ -3,7 +3,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'hide-on-escape-doc', - template: `
+ template: `

The hideOnEscape determines to hide the overlay when escape key pressed. Accepts boolean, default value is false.

 diff --git a/src/app/showcase/doc/overlay/importdoc.ts b/src/app/showcase/doc/overlay/importdoc.ts index 2d535b33cf1..2caceb4c257 100644 --- a/src/app/showcase/doc/overlay/importdoc.ts +++ b/src/app/showcase/doc/overlay/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/overlay/modedoc.ts b/src/app/showcase/doc/overlay/modedoc.ts index 9b0cc06273e..2152d4b23f3 100644 --- a/src/app/showcase/doc/overlay/modedoc.ts +++ b/src/app/showcase/doc/overlay/modedoc.ts @@ -4,7 +4,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'mode-doc', - template: `
+ template: `

It has two valid values; overlay and modal. In overlay mode, a container element is opened like overlaypanel or dropdown's panel. In modal mode, the container element behaves like popup. This behaviour is similar to a diff --git a/src/app/showcase/doc/overlay/responsivedoc.ts b/src/app/showcase/doc/overlay/responsivedoc.ts index 78ddea88803..da329cfa7e4 100644 --- a/src/app/showcase/doc/overlay/responsivedoc.ts +++ b/src/app/showcase/doc/overlay/responsivedoc.ts @@ -4,7 +4,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'responsive-doc', - template: `

+ template: `

It is the option used to determine in which mode it should appear according to the given media or breakpoint.

 diff --git a/src/app/showcase/doc/overlay/styledoc.ts b/src/app/showcase/doc/overlay/styledoc.ts index c4c37edef4a..49066963912 100644 --- a/src/app/showcase/doc/overlay/styledoc.ts +++ b/src/app/showcase/doc/overlay/styledoc.ts @@ -3,7 +3,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'style-doc', - template: `
+ template: `

The style and styleClass are used to define styles that will be added to all overlay components. In addition, it can be used in contentStyle and contentStyleClass classes.

 diff --git a/src/app/showcase/doc/overlay/targetdoc.ts b/src/app/showcase/doc/overlay/targetdoc.ts index d47456882cc..1c1ba3fe52a 100644 --- a/src/app/showcase/doc/overlay/targetdoc.ts +++ b/src/app/showcase/doc/overlay/targetdoc.ts @@ -4,7 +4,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'target-doc', - template: `
+ template: `

The target is used to detect the element that will be used to position the overlay. Valid values would be;

 diff --git a/src/app/showcase/doc/overlay/templatedoc.ts b/src/app/showcase/doc/overlay/templatedoc.ts index 80b3011509c..aa764091d79 100644 --- a/src/app/showcase/doc/overlay/templatedoc.ts +++ b/src/app/showcase/doc/overlay/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'overlay-template-demo', - template: `
+ template: `

Content can be customized with the content template.

 diff --git a/src/app/showcase/doc/overlay/transitionoptionsdoc.ts b/src/app/showcase/doc/overlay/transitionoptionsdoc.ts index 7f584c60dc7..c8e2ad4843b 100644 --- a/src/app/showcase/doc/overlay/transitionoptionsdoc.ts +++ b/src/app/showcase/doc/overlay/transitionoptionsdoc.ts @@ -3,7 +3,7 @@ import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app. @Component({ selector: 'transition-options-doc', - template: `
+ template: `

Transition options of the show or hide animation. The default value of showTransitionOptions is '.12s cubic-bezier(0, 0, 0.2, 1)' and the default value of hideTransitionOptions is '.1s linear'.

 diff --git a/src/app/showcase/doc/overlaypanel/basicdoc.ts b/src/app/showcase/doc/overlaypanel/basicdoc.ts index 92d0bbeb368..4ed931eab2e 100644 --- a/src/app/showcase/doc/overlaypanel/basicdoc.ts +++ b/src/app/showcase/doc/overlaypanel/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/overlaypanel/datatabledoc.ts b/src/app/showcase/doc/overlaypanel/datatabledoc.ts index ded51bc61cd..72004772ea3 100644 --- a/src/app/showcase/doc/overlaypanel/datatabledoc.ts +++ b/src/app/showcase/doc/overlaypanel/datatabledoc.ts @@ -14,7 +14,7 @@ interface TableRowSelectEvent { @Component({ selector: 'data-table-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/overlaypanel/importdoc.ts b/src/app/showcase/doc/overlaypanel/importdoc.ts index 4d8f86a7585..6dbef2e28d8 100644 --- a/src/app/showcase/doc/overlaypanel/importdoc.ts +++ b/src/app/showcase/doc/overlaypanel/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/overlaypanel/styledoc.ts b/src/app/showcase/doc/overlaypanel/styledoc.ts index 4069cd4154f..4ef58e7b0be 100644 --- a/src/app/showcase/doc/overlaypanel/styledoc.ts +++ b/src/app/showcase/doc/overlaypanel/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/overlaypanel/targetdoc.ts b/src/app/showcase/doc/overlaypanel/targetdoc.ts index f82bbb60746..ec02ae76771 100644 --- a/src/app/showcase/doc/overlaypanel/targetdoc.ts +++ b/src/app/showcase/doc/overlaypanel/targetdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'target-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/overlaypanel/templatedoc.ts b/src/app/showcase/doc/overlaypanel/templatedoc.ts index d3017d29eac..1286bedb19f 100644 --- a/src/app/showcase/doc/overlaypanel/templatedoc.ts +++ b/src/app/showcase/doc/overlaypanel/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `

+ template: `

Content of the OverlayPanel is defined by content template.

 diff --git a/src/app/showcase/doc/paginator/basicdoc.ts b/src/app/showcase/doc/paginator/basicdoc.ts index 941d225610c..ebdca28d5f4 100644 --- a/src/app/showcase/doc/paginator/basicdoc.ts +++ b/src/app/showcase/doc/paginator/basicdoc.ts @@ -10,7 +10,7 @@ interface PageEvent { @Component({ selector: 'basic-doc', - template: `
+ 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 diff --git a/src/app/showcase/doc/paginator/imagesdoc.ts b/src/app/showcase/doc/paginator/imagesdoc.ts index bb9020120db..2c7155ba2a5 100644 --- a/src/app/showcase/doc/paginator/imagesdoc.ts +++ b/src/app/showcase/doc/paginator/imagesdoc.ts @@ -10,7 +10,7 @@ interface PageEvent { @Component({ selector: 'images-doc', - template: `

+ template: `

Sample image gallery implementation using paginator.

 diff --git a/src/app/showcase/doc/paginator/importdoc.ts b/src/app/showcase/doc/paginator/importdoc.ts index ddb76ef1838..969f7e98544 100644 --- a/src/app/showcase/doc/paginator/importdoc.ts +++ b/src/app/showcase/doc/paginator/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/paginator/localedoc.ts b/src/app/showcase/doc/paginator/localedoc.ts index eea0b1c80d6..74d003204ae 100644 --- a/src/app/showcase/doc/paginator/localedoc.ts +++ b/src/app/showcase/doc/paginator/localedoc.ts @@ -10,7 +10,7 @@ interface PageEvent { @Component({ selector: 'locale-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/paginator/styledoc.ts b/src/app/showcase/doc/paginator/styledoc.ts index 24161e50b5d..e8b24f94e0b 100644 --- a/src/app/showcase/doc/paginator/styledoc.ts +++ b/src/app/showcase/doc/paginator/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/paginator/templatedoc.ts b/src/app/showcase/doc/paginator/templatedoc.ts index bff3058b2b7..8f44e4f511e 100644 --- a/src/app/showcase/doc/paginator/templatedoc.ts +++ b/src/app/showcase/doc/paginator/templatedoc.ts @@ -10,7 +10,7 @@ interface PageEvent { @Component({ selector: 'template-doc', - template: `
+ template: `

Templating allows overriding the default content of the UI elements by defining callbacks using the element name.

 diff --git a/src/app/showcase/doc/panel/basicdoc.ts b/src/app/showcase/doc/panel/basicdoc.ts index 4c27ad67200..d68a019c182 100644 --- a/src/app/showcase/doc/panel/basicdoc.ts +++ b/src/app/showcase/doc/panel/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/panel/importdoc.ts b/src/app/showcase/doc/panel/importdoc.ts index 0d222d100c8..03772e192e0 100644 --- a/src/app/showcase/doc/panel/importdoc.ts +++ b/src/app/showcase/doc/panel/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/panel/styledoc.ts b/src/app/showcase/doc/panel/styledoc.ts index f57e3c22bfc..7b834270658 100644 --- a/src/app/showcase/doc/panel/styledoc.ts +++ b/src/app/showcase/doc/panel/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/panel/templatedoc.ts b/src/app/showcase/doc/panel/templatedoc.ts index efa039a9edb..ebd94a218df 100644 --- a/src/app/showcase/doc/panel/templatedoc.ts +++ b/src/app/showcase/doc/panel/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/panel/toggleabledoc.ts b/src/app/showcase/doc/panel/toggleabledoc.ts index 32c0793ba5b..ebe6f08f5eb 100644 --- a/src/app/showcase/doc/panel/toggleabledoc.ts +++ b/src/app/showcase/doc/panel/toggleabledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'toggleable-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/panelmenu/basicdoc.ts b/src/app/showcase/doc/panelmenu/basicdoc.ts index cb30aa8371c..c92266f877b 100644 --- a/src/app/showcase/doc/panelmenu/basicdoc.ts +++ b/src/app/showcase/doc/panelmenu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `

+ template: `

PanelMenu requires a collection of menuitems as its model.

 diff --git a/src/app/showcase/doc/panelmenu/importdoc.ts b/src/app/showcase/doc/panelmenu/importdoc.ts index 3b3cc90a223..63cee48cc4f 100644 --- a/src/app/showcase/doc/panelmenu/importdoc.ts +++ b/src/app/showcase/doc/panelmenu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/panelmenu/multipledoc.ts b/src/app/showcase/doc/panelmenu/multipledoc.ts index 550a37c9208..c1f794b0d60 100644 --- a/src/app/showcase/doc/panelmenu/multipledoc.ts +++ b/src/app/showcase/doc/panelmenu/multipledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'multiple-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/panelmenu/styledoc.ts b/src/app/showcase/doc/panelmenu/styledoc.ts index 344be20fcd4..2660e0bc2c2 100644 --- a/src/app/showcase/doc/panelmenu/styledoc.ts +++ b/src/app/showcase/doc/panelmenu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/password/basicdoc.ts b/src/app/showcase/doc/password/basicdoc.ts index aacc3058dc8..9a0fd1a6632 100644 --- a/src/app/showcase/doc/password/basicdoc.ts +++ b/src/app/showcase/doc/password/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Two-way value binding is defined using ngModel.

 diff --git a/src/app/showcase/doc/password/disableddoc.ts b/src/app/showcase/doc/password/disableddoc.ts index 79f42141335..0ebe28586d1 100644 --- a/src/app/showcase/doc/password/disableddoc.ts +++ b/src/app/showcase/doc/password/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/password/floatlabeldoc.ts b/src/app/showcase/doc/password/floatlabeldoc.ts index b0b28107083..84343e87a54 100644 --- a/src/app/showcase/doc/password/floatlabeldoc.ts +++ b/src/app/showcase/doc/password/floatlabeldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'floatlabel-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/password/importdoc.ts b/src/app/showcase/doc/password/importdoc.ts index 974a58bcbca..99eceaca916 100644 --- a/src/app/showcase/doc/password/importdoc.ts +++ b/src/app/showcase/doc/password/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/password/invaliddoc.ts b/src/app/showcase/doc/password/invaliddoc.ts index 09df2554ca1..c954e02807e 100644 --- a/src/app/showcase/doc/password/invaliddoc.ts +++ b/src/app/showcase/doc/password/invaliddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'invalid-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/password/meterdoc.ts b/src/app/showcase/doc/password/meterdoc.ts index 84c1720d8dd..a610e860ea8 100644 --- a/src/app/showcase/doc/password/meterdoc.ts +++ b/src/app/showcase/doc/password/meterdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'meter-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/password/reactiveformsdoc.ts b/src/app/showcase/doc/password/reactiveformsdoc.ts index f59e6b8e662..e2cad243428 100644 --- a/src/app/showcase/doc/password/reactiveformsdoc.ts +++ b/src/app/showcase/doc/password/reactiveformsdoc.ts @@ -1,10 +1,10 @@ import { Component, Input, OnInit } from '@angular/core'; -import { Code } from '../../domain/code'; import { FormControl, FormGroup } from '@angular/forms'; +import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

Password can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/password/styledoc.ts b/src/app/showcase/doc/password/styledoc.ts index 5aba49111c8..33b735b0b6e 100644 --- a/src/app/showcase/doc/password/styledoc.ts +++ b/src/app/showcase/doc/password/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/password/templatedoc.ts b/src/app/showcase/doc/password/templatedoc.ts index f6a12414b7f..eea58da624a 100644 --- a/src/app/showcase/doc/password/templatedoc.ts +++ b/src/app/showcase/doc/password/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

3 templates are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.

 diff --git a/src/app/showcase/doc/password/togglemaskdoc.ts b/src/app/showcase/doc/password/togglemaskdoc.ts index a58da65e406..fc084d7b586 100644 --- a/src/app/showcase/doc/password/togglemaskdoc.ts +++ b/src/app/showcase/doc/password/togglemaskdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'togglemask-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/picklist/basicdoc.ts b/src/app/showcase/doc/picklist/basicdoc.ts index 83c043c1b53..7ad99503f03 100644 --- a/src/app/showcase/doc/picklist/basicdoc.ts +++ b/src/app/showcase/doc/picklist/basicdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/picklist/filterdoc.ts b/src/app/showcase/doc/picklist/filterdoc.ts index d20dfa4f1e2..95af8a59194 100644 --- a/src/app/showcase/doc/picklist/filterdoc.ts +++ b/src/app/showcase/doc/picklist/filterdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'filter-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/picklist/importdoc.ts b/src/app/showcase/doc/picklist/importdoc.ts index 227aa0a4400..f712abdceac 100644 --- a/src/app/showcase/doc/picklist/importdoc.ts +++ b/src/app/showcase/doc/picklist/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/picklist/styledoc.ts b/src/app/showcase/doc/picklist/styledoc.ts index 98787f71290..8c8c1acdde8 100644 --- a/src/app/showcase/doc/picklist/styledoc.ts +++ b/src/app/showcase/doc/picklist/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/picklist/templatesdoc.ts b/src/app/showcase/doc/picklist/templatesdoc.ts index 73b1858b899..482c111e73d 100644 --- a/src/app/showcase/doc/picklist/templatesdoc.ts +++ b/src/app/showcase/doc/picklist/templatesdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'templates-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/progressbar/basicdoc.ts b/src/app/showcase/doc/progressbar/basicdoc.ts index 6cf1405fa74..770829fae32 100644 --- a/src/app/showcase/doc/progressbar/basicdoc.ts +++ b/src/app/showcase/doc/progressbar/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

ProgressBar is used with the value property.

 diff --git a/src/app/showcase/doc/progressbar/dynamicdoc.ts b/src/app/showcase/doc/progressbar/dynamicdoc.ts index c3dd0595146..d7533585cbb 100644 --- a/src/app/showcase/doc/progressbar/dynamicdoc.ts +++ b/src/app/showcase/doc/progressbar/dynamicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dynamic-doc', - template: `
+ template: `

Value is reactive so updating it dynamically changes the bar as well.

 diff --git a/src/app/showcase/doc/progressbar/importdoc.ts b/src/app/showcase/doc/progressbar/importdoc.ts index d59377b8a32..a5df4998b12 100644 --- a/src/app/showcase/doc/progressbar/importdoc.ts +++ b/src/app/showcase/doc/progressbar/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/progressbar/indeterminatedoc.ts b/src/app/showcase/doc/progressbar/indeterminatedoc.ts index 8da21f2590e..494770b6248 100644 --- a/src/app/showcase/doc/progressbar/indeterminatedoc.ts +++ b/src/app/showcase/doc/progressbar/indeterminatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'indeterminate-doc', - template: `
+ template: `

For progresses with no value to track, set the mode property to indeterminate.

 diff --git a/src/app/showcase/doc/progressbar/styledoc.ts b/src/app/showcase/doc/progressbar/styledoc.ts index cd54349ba78..fb9a5e1ed95 100644 --- a/src/app/showcase/doc/progressbar/styledoc.ts +++ b/src/app/showcase/doc/progressbar/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/progressspinner/basicdoc.ts b/src/app/showcase/doc/progressspinner/basicdoc.ts index da97207c3fa..275b09de87b 100644 --- a/src/app/showcase/doc/progressspinner/basicdoc.ts +++ b/src/app/showcase/doc/progressspinner/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

An infinite spin animation is displayed by default.

 diff --git a/src/app/showcase/doc/progressspinner/importdoc.ts b/src/app/showcase/doc/progressspinner/importdoc.ts index 9b89d9dc2ae..45187a71bdd 100644 --- a/src/app/showcase/doc/progressspinner/importdoc.ts +++ b/src/app/showcase/doc/progressspinner/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/progressspinner/styledoc.ts b/src/app/showcase/doc/progressspinner/styledoc.ts index 3172acdbda7..172b5c0449b 100644 --- a/src/app/showcase/doc/progressspinner/styledoc.ts +++ b/src/app/showcase/doc/progressspinner/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/progressspinner/templatedoc.ts b/src/app/showcase/doc/progressspinner/templatedoc.ts index 4818eeec283..aa3f7358a0d 100644 --- a/src/app/showcase/doc/progressspinner/templatedoc.ts +++ b/src/app/showcase/doc/progressspinner/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/radiobutton/disableddoc.ts b/src/app/showcase/doc/radiobutton/disableddoc.ts index aa28d117d45..1cb4d32f567 100644 --- a/src/app/showcase/doc/radiobutton/disableddoc.ts +++ b/src/app/showcase/doc/radiobutton/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/radiobutton/dynamicdoc.ts b/src/app/showcase/doc/radiobutton/dynamicdoc.ts index eabef0a0ac9..4b0077df2b8 100644 --- a/src/app/showcase/doc/radiobutton/dynamicdoc.ts +++ b/src/app/showcase/doc/radiobutton/dynamicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'dynamic-doc', - template: `
+ template: `

RadioButtons can be generated using a list of values.

 diff --git a/src/app/showcase/doc/radiobutton/groupdoc.ts b/src/app/showcase/doc/radiobutton/groupdoc.ts index d6ae412bf55..fb23dfc476a 100644 --- a/src/app/showcase/doc/radiobutton/groupdoc.ts +++ b/src/app/showcase/doc/radiobutton/groupdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'group-doc', - template: `
+ template: `

RadioButton is used as a controlled input with value and ngModel properties.

 diff --git a/src/app/showcase/doc/radiobutton/importdoc.ts b/src/app/showcase/doc/radiobutton/importdoc.ts index 6955897de79..d742d91ce84 100644 --- a/src/app/showcase/doc/radiobutton/importdoc.ts +++ b/src/app/showcase/doc/radiobutton/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/radiobutton/invaliddoc.ts b/src/app/showcase/doc/radiobutton/invaliddoc.ts index dfb4201f375..d0289a3e28f 100644 --- a/src/app/showcase/doc/radiobutton/invaliddoc.ts +++ b/src/app/showcase/doc/radiobutton/invaliddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'invalid-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts b/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts index 5cf1bbd83ff..bb92f1bc85e 100644 --- a/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts +++ b/src/app/showcase/doc/radiobutton/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

RadioButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/radiobutton/styledoc.ts b/src/app/showcase/doc/radiobutton/styledoc.ts index ffbb24ba6ba..3d0d1ce4e35 100644 --- a/src/app/showcase/doc/radiobutton/styledoc.ts +++ b/src/app/showcase/doc/radiobutton/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/rating/basicdoc.ts b/src/app/showcase/doc/rating/basicdoc.ts index 0fec332a937..463cfbdbabf 100644 --- a/src/app/showcase/doc/rating/basicdoc.ts +++ b/src/app/showcase/doc/rating/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Two-way value binding is defined using ngModel.

 diff --git a/src/app/showcase/doc/rating/disableddoc.ts b/src/app/showcase/doc/rating/disableddoc.ts index d30e233775b..8b90692c0b3 100644 --- a/src/app/showcase/doc/rating/disableddoc.ts +++ b/src/app/showcase/doc/rating/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/rating/importdoc.ts b/src/app/showcase/doc/rating/importdoc.ts index 732e2b04b94..44e508d1cc8 100644 --- a/src/app/showcase/doc/rating/importdoc.ts +++ b/src/app/showcase/doc/rating/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/rating/numberofstarsdoc.ts b/src/app/showcase/doc/rating/numberofstarsdoc.ts index 2cac46e7cea..d63fb2fadf9 100644 --- a/src/app/showcase/doc/rating/numberofstarsdoc.ts +++ b/src/app/showcase/doc/rating/numberofstarsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'number-of-stars-doc', - template: `
+ template: `

Number of stars to display is defined with stars property.

 diff --git a/src/app/showcase/doc/rating/reactiveformsdoc.ts b/src/app/showcase/doc/rating/reactiveformsdoc.ts index 632d4538383..a8f0eb3e400 100644 --- a/src/app/showcase/doc/rating/reactiveformsdoc.ts +++ b/src/app/showcase/doc/rating/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

Rating can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/rating/readonlydoc.ts b/src/app/showcase/doc/rating/readonlydoc.ts index 46b52bcb201..1f1182d4dd9 100644 --- a/src/app/showcase/doc/rating/readonlydoc.ts +++ b/src/app/showcase/doc/rating/readonlydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'readonly-doc', - template: `
+ template: `

When readOnly present, value cannot be edited.

 diff --git a/src/app/showcase/doc/rating/styledoc.ts b/src/app/showcase/doc/rating/styledoc.ts index f885fd87da9..23a68ee21d6 100644 --- a/src/app/showcase/doc/rating/styledoc.ts +++ b/src/app/showcase/doc/rating/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/rating/templatedoc.ts b/src/app/showcase/doc/rating/templatedoc.ts index 5861d944c01..4e00f581801 100644 --- a/src/app/showcase/doc/rating/templatedoc.ts +++ b/src/app/showcase/doc/rating/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

Templating allows customizing the content where the icon instance is available as the implicit variable.

 diff --git a/src/app/showcase/doc/rating/withoutcanceldoc.ts b/src/app/showcase/doc/rating/withoutcanceldoc.ts index 595713314e5..b8ea1dc2a6c 100644 --- a/src/app/showcase/doc/rating/withoutcanceldoc.ts +++ b/src/app/showcase/doc/rating/withoutcanceldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'without-cancel-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/ripple/customdoc.ts b/src/app/showcase/doc/ripple/customdoc.ts index 6f6b99f25dc..610acd3a00a 100644 --- a/src/app/showcase/doc/ripple/customdoc.ts +++ b/src/app/showcase/doc/ripple/customdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'custom-doc', - template: `
+ template: `

Styling Demo Content.

 diff --git a/src/app/showcase/doc/ripple/defaultdoc.ts b/src/app/showcase/doc/ripple/defaultdoc.ts index b5c9b9368f5..1448b4ecac6 100644 --- a/src/app/showcase/doc/ripple/defaultdoc.ts +++ b/src/app/showcase/doc/ripple/defaultdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'default-doc', - template: `
+ template: `

Default Demo Content.

 diff --git a/src/app/showcase/doc/ripple/importdoc.ts b/src/app/showcase/doc/ripple/importdoc.ts index 1ed9feed01f..53b75a65e70 100644 --- a/src/app/showcase/doc/ripple/importdoc.ts +++ b/src/app/showcase/doc/ripple/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/ripple/styledoc.ts b/src/app/showcase/doc/ripple/styledoc.ts index 1f211b79f19..f2033f75be6 100644 --- a/src/app/showcase/doc/ripple/styledoc.ts +++ b/src/app/showcase/doc/ripple/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/scroller/basicdoc.ts b/src/app/showcase/doc/scroller/basicdoc.ts index 8ae59ccb7eb..0638aa2e5fd 100644 --- a/src/app/showcase/doc/scroller/basicdoc.ts +++ b/src/app/showcase/doc/scroller/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Scroller 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 diff --git a/src/app/showcase/doc/scroller/delaydoc.ts b/src/app/showcase/doc/scroller/delaydoc.ts index 712a873d953..c9550d60968 100644 --- a/src/app/showcase/doc/scroller/delaydoc.ts +++ b/src/app/showcase/doc/scroller/delaydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'delay-doc', - template: `

+ template: `

Scroll delay is adjusted by using delay property.

 diff --git a/src/app/showcase/doc/scroller/griddoc.ts b/src/app/showcase/doc/scroller/griddoc.ts index 626e7dd6660..7d849b87edd 100644 --- a/src/app/showcase/doc/scroller/griddoc.ts +++ b/src/app/showcase/doc/scroller/griddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'grid-doc', - template: `
+ template: `

Scrolling can be enabled vertically and horizontally when orientation is set as both. In this mode, itemSize should be an array where first value is the height of an item and second is the width.

 diff --git a/src/app/showcase/doc/scroller/horizontaldoc.ts b/src/app/showcase/doc/scroller/horizontaldoc.ts index b0238faa67c..556ab407d51 100644 --- a/src/app/showcase/doc/scroller/horizontaldoc.ts +++ b/src/app/showcase/doc/scroller/horizontaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'horizontal-doc', - template: `
+ template: `

Setting orientation to horizontal enables scrolling horizontally. In this case, the itemSize should refer to the width of an item.

 diff --git a/src/app/showcase/doc/scroller/importdoc.ts b/src/app/showcase/doc/scroller/importdoc.ts index a873fc8e0b1..e54ff673089 100644 --- a/src/app/showcase/doc/scroller/importdoc.ts +++ b/src/app/showcase/doc/scroller/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/scroller/lazyloaddoc.ts b/src/app/showcase/doc/scroller/lazyloaddoc.ts index 9cfc2284732..38d6cd1ea58 100644 --- a/src/app/showcase/doc/scroller/lazyloaddoc.ts +++ b/src/app/showcase/doc/scroller/lazyloaddoc.ts @@ -7,7 +7,7 @@ interface LazyEvent { } @Component({ selector: 'lazy-load-doc', - template: `
+ template: `

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, diff --git a/src/app/showcase/doc/scroller/loaderdoc.ts b/src/app/showcase/doc/scroller/loaderdoc.ts index 323375bee73..ac303fff676 100644 --- a/src/app/showcase/doc/scroller/loaderdoc.ts +++ b/src/app/showcase/doc/scroller/loaderdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'loader-doc', - template: `

+ template: `

Busy state is enabled by adding showLoader property which blocks the UI with a modal by default. Alternatively, loader template can be used to customize items e.g. with Skeleton.

 diff --git a/src/app/showcase/doc/scroller/programmaticdoc.ts b/src/app/showcase/doc/scroller/programmaticdoc.ts index dc3ba0baf95..f8da67a51b1 100644 --- a/src/app/showcase/doc/scroller/programmaticdoc.ts +++ b/src/app/showcase/doc/scroller/programmaticdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'programmatic-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/scroller/scrolloptionsdoc.ts b/src/app/showcase/doc/scroller/scrolloptionsdoc.ts index 3264ad6983a..ec18821e0bc 100644 --- a/src/app/showcase/doc/scroller/scrolloptionsdoc.ts +++ b/src/app/showcase/doc/scroller/scrolloptionsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'options-doc', - template: `
+ template: `

The properties of scroller component can be used like an object in it.

 diff --git a/src/app/showcase/doc/scroller/styledoc.ts b/src/app/showcase/doc/scroller/styledoc.ts index b25c52ccab0..5d4ad3fd826 100644 --- a/src/app/showcase/doc/scroller/styledoc.ts +++ b/src/app/showcase/doc/scroller/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/scroller/templatedoc.ts b/src/app/showcase/doc/scroller/templatedoc.ts index 24715e87cec..a270740bf27 100644 --- a/src/app/showcase/doc/scroller/templatedoc.ts +++ b/src/app/showcase/doc/scroller/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

Scroller content is customizable by using ng-template. Valid values are content, item, loader and loadericon

 diff --git a/src/app/showcase/doc/scrollpanel/basicdoc.ts b/src/app/showcase/doc/scrollpanel/basicdoc.ts index 2ed61ba8333..3f9bdf107cf 100644 --- a/src/app/showcase/doc/scrollpanel/basicdoc.ts +++ b/src/app/showcase/doc/scrollpanel/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

ScrollPanel is defined using dimensions for the scrollable viewport.

 diff --git a/src/app/showcase/doc/scrollpanel/customdoc.ts b/src/app/showcase/doc/scrollpanel/customdoc.ts index da796c274bc..2a7804664dc 100644 --- a/src/app/showcase/doc/scrollpanel/customdoc.ts +++ b/src/app/showcase/doc/scrollpanel/customdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'custom-doc', - template: `
+ template: `

Scrollbar visuals can be styled for a unified look across different platforms.

 diff --git a/src/app/showcase/doc/scrollpanel/importdoc.ts b/src/app/showcase/doc/scrollpanel/importdoc.ts index 747c898db34..8bde01e9664 100644 --- a/src/app/showcase/doc/scrollpanel/importdoc.ts +++ b/src/app/showcase/doc/scrollpanel/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/scrollpanel/styledoc.ts b/src/app/showcase/doc/scrollpanel/styledoc.ts index 566c0aac129..cea0e96e4e6 100644 --- a/src/app/showcase/doc/scrollpanel/styledoc.ts +++ b/src/app/showcase/doc/scrollpanel/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/scrolltop/basicdoc.ts b/src/app/showcase/doc/scrolltop/basicdoc.ts index 14473b3604a..6a0e7a33366 100644 --- a/src/app/showcase/doc/scrolltop/basicdoc.ts +++ b/src/app/showcase/doc/scrolltop/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

ScrollTop listens window scroll by default.

 diff --git a/src/app/showcase/doc/scrolltop/elementdoc.ts b/src/app/showcase/doc/scrolltop/elementdoc.ts index 876c984973b..c694879b202 100644 --- a/src/app/showcase/doc/scrolltop/elementdoc.ts +++ b/src/app/showcase/doc/scrolltop/elementdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'element-doc', - template: `
+ template: `

Setting the target property to parent binds ScrollTop to its parent element that has scrolling content.

 diff --git a/src/app/showcase/doc/scrolltop/importdoc.ts b/src/app/showcase/doc/scrolltop/importdoc.ts index 9f71ba24d51..ff4ec263f7b 100644 --- a/src/app/showcase/doc/scrolltop/importdoc.ts +++ b/src/app/showcase/doc/scrolltop/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/scrolltop/styledoc.ts b/src/app/showcase/doc/scrolltop/styledoc.ts index ca3d468f0ad..bc91a51ec25 100644 --- a/src/app/showcase/doc/scrolltop/styledoc.ts +++ b/src/app/showcase/doc/scrolltop/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/selectbutton/basicdoc.ts b/src/app/showcase/doc/selectbutton/basicdoc.ts index 6766ca917bd..7aa5c87460c 100644 --- a/src/app/showcase/doc/selectbutton/basicdoc.ts +++ b/src/app/showcase/doc/selectbutton/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/selectbutton/disableddoc.ts b/src/app/showcase/doc/selectbutton/disableddoc.ts index 5fc6b132667..8b9628b94dc 100644 --- a/src/app/showcase/doc/selectbutton/disableddoc.ts +++ b/src/app/showcase/doc/selectbutton/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/selectbutton/importdoc.ts b/src/app/showcase/doc/selectbutton/importdoc.ts index e2b8b4b4166..33ef678298e 100644 --- a/src/app/showcase/doc/selectbutton/importdoc.ts +++ b/src/app/showcase/doc/selectbutton/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/selectbutton/invaliddoc.ts b/src/app/showcase/doc/selectbutton/invaliddoc.ts index 3912bcea0c4..a7161c788b7 100644 --- a/src/app/showcase/doc/selectbutton/invaliddoc.ts +++ b/src/app/showcase/doc/selectbutton/invaliddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'invalid-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/selectbutton/multipledoc.ts b/src/app/showcase/doc/selectbutton/multipledoc.ts index 38c449df92c..58293415236 100644 --- a/src/app/showcase/doc/selectbutton/multipledoc.ts +++ b/src/app/showcase/doc/selectbutton/multipledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'multiple-doc', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts b/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts index e79b3104938..e863ec24a22 100644 --- a/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts +++ b/src/app/showcase/doc/selectbutton/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

SelectButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/selectbutton/templatedoc.ts b/src/app/showcase/doc/selectbutton/templatedoc.ts index 82237d8c6c8..31445426b1d 100644 --- a/src/app/showcase/doc/selectbutton/templatedoc.ts +++ b/src/app/showcase/doc/selectbutton/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

For custom content support define a ng-template with pTemplate where the local ng-template variable refers to an option in the options collection.

 diff --git a/src/app/showcase/doc/sidebar/basicdoc.ts b/src/app/showcase/doc/sidebar/basicdoc.ts index 2f113e9530d..af67bf7a298 100644 --- a/src/app/showcase/doc/sidebar/basicdoc.ts +++ b/src/app/showcase/doc/sidebar/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Sidebar is used as a container and visibility is controlled with a binding to visible.

 diff --git a/src/app/showcase/doc/sidebar/fullscreendoc.ts b/src/app/showcase/doc/sidebar/fullscreendoc.ts index a4c09bf402e..ec2632e697b 100644 --- a/src/app/showcase/doc/sidebar/fullscreendoc.ts +++ b/src/app/showcase/doc/sidebar/fullscreendoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'full-screen-doc', - template: `
+ template: `

Sidebar can cover the whole page when fullScreen property is enabled.

 diff --git a/src/app/showcase/doc/sidebar/importdoc.ts b/src/app/showcase/doc/sidebar/importdoc.ts index dc30439761d..e6e305912e6 100644 --- a/src/app/showcase/doc/sidebar/importdoc.ts +++ b/src/app/showcase/doc/sidebar/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/sidebar/positiondoc.ts b/src/app/showcase/doc/sidebar/positiondoc.ts index e88556d7c91..ee915921e19 100644 --- a/src/app/showcase/doc/sidebar/positiondoc.ts +++ b/src/app/showcase/doc/sidebar/positiondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'position-doc', - template: `
+ template: `

Sidebar location is configured with the position property that can take left, right, top and bottom as a value.

 diff --git a/src/app/showcase/doc/sidebar/sizedoc.ts b/src/app/showcase/doc/sidebar/sizedoc.ts index adaf063e13a..484430f30f7 100644 --- a/src/app/showcase/doc/sidebar/sizedoc.ts +++ b/src/app/showcase/doc/sidebar/sizedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'size-doc', - template: `
+ template: `

Sidebar dimension can be defined with style or styleClass properties which can also be responsive when used with a CSS utility library like PrimeFlex.

 diff --git a/src/app/showcase/doc/sidebar/styledoc.ts b/src/app/showcase/doc/sidebar/styledoc.ts index 3a325d0461c..adfb4e0438b 100644 --- a/src/app/showcase/doc/sidebar/styledoc.ts +++ b/src/app/showcase/doc/sidebar/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/sidebar/templatedoc.ts b/src/app/showcase/doc/sidebar/templatedoc.ts index 3df08b1b743..4bba9ebe212 100644 --- a/src/app/showcase/doc/sidebar/templatedoc.ts +++ b/src/app/showcase/doc/sidebar/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

Sidebar is customizable by header, content, footer templates.

 diff --git a/src/app/showcase/doc/skeleton/carddoc.ts b/src/app/showcase/doc/skeleton/carddoc.ts index 961f507bf50..624d65361f0 100644 --- a/src/app/showcase/doc/skeleton/carddoc.ts +++ b/src/app/showcase/doc/skeleton/carddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'card-doc', - template: `
+ template: `

Sample Card implementation using different Skeleton components and PrimeFlex CSS utilities.

 diff --git a/src/app/showcase/doc/skeleton/datatabledoc.ts b/src/app/showcase/doc/skeleton/datatabledoc.ts index 2a6f76e47e6..8036d53b45d 100644 --- a/src/app/showcase/doc/skeleton/datatabledoc.ts +++ b/src/app/showcase/doc/skeleton/datatabledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'datatable-doc', - template: `
+ template: `

Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.

 diff --git a/src/app/showcase/doc/skeleton/importdoc.ts b/src/app/showcase/doc/skeleton/importdoc.ts index 8d3fe21ba00..d4c3dfaa17c 100644 --- a/src/app/showcase/doc/skeleton/importdoc.ts +++ b/src/app/showcase/doc/skeleton/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/skeleton/listdoc.ts b/src/app/showcase/doc/skeleton/listdoc.ts index ec7cd7bb974..11361fdefff 100644 --- a/src/app/showcase/doc/skeleton/listdoc.ts +++ b/src/app/showcase/doc/skeleton/listdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'list-doc', - template: `
+ template: `

Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.

 diff --git a/src/app/showcase/doc/skeleton/shapesdoc.ts b/src/app/showcase/doc/skeleton/shapesdoc.ts index 4c13204bc59..77b20e971d4 100644 --- a/src/app/showcase/doc/skeleton/shapesdoc.ts +++ b/src/app/showcase/doc/skeleton/shapesdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'shapes-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/skeleton/styledoc.ts b/src/app/showcase/doc/skeleton/styledoc.ts index d3d9dc99441..5f5db553e90 100644 --- a/src/app/showcase/doc/skeleton/styledoc.ts +++ b/src/app/showcase/doc/skeleton/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/slidemenu/basicdoc.ts b/src/app/showcase/doc/slidemenu/basicdoc.ts index d83cdb132d1..a58ced0ade1 100644 --- a/src/app/showcase/doc/slidemenu/basicdoc.ts +++ b/src/app/showcase/doc/slidemenu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

SlideMenu requires a collection of menuitems as its model along with viewportHeight and menuWidth.

 diff --git a/src/app/showcase/doc/slidemenu/importdoc.ts b/src/app/showcase/doc/slidemenu/importdoc.ts index c90a91c9000..964080f3bda 100644 --- a/src/app/showcase/doc/slidemenu/importdoc.ts +++ b/src/app/showcase/doc/slidemenu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/slidemenu/popupdoc.ts b/src/app/showcase/doc/slidemenu/popupdoc.ts index 46e76adb020..fe29a5d91f0 100644 --- a/src/app/showcase/doc/slidemenu/popupdoc.ts +++ b/src/app/showcase/doc/slidemenu/popupdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'popup-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/slidemenu/styledoc.ts b/src/app/showcase/doc/slidemenu/styledoc.ts index 228299f404e..19c5dd9bc32 100644 --- a/src/app/showcase/doc/slidemenu/styledoc.ts +++ b/src/app/showcase/doc/slidemenu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/slider/basicdoc.ts b/src/app/showcase/doc/slider/basicdoc.ts index ddc9de85207..c98e4cc5d60 100644 --- a/src/app/showcase/doc/slider/basicdoc.ts +++ b/src/app/showcase/doc/slider/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/slider/importdoc.ts b/src/app/showcase/doc/slider/importdoc.ts index 63c23a35270..61035339444 100644 --- a/src/app/showcase/doc/slider/importdoc.ts +++ b/src/app/showcase/doc/slider/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/slider/inputdoc.ts b/src/app/showcase/doc/slider/inputdoc.ts index 52a5907a524..3f5d1362feb 100644 --- a/src/app/showcase/doc/slider/inputdoc.ts +++ b/src/app/showcase/doc/slider/inputdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'input-doc', - template: `
+ template: `

Slider is connected to an input field using two-way binding.

 diff --git a/src/app/showcase/doc/slider/rangedoc.ts b/src/app/showcase/doc/slider/rangedoc.ts index aae25c754e4..8f49487d927 100644 --- a/src/app/showcase/doc/slider/rangedoc.ts +++ b/src/app/showcase/doc/slider/rangedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'range-doc', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/slider/reactiveformsdoc.ts b/src/app/showcase/doc/slider/reactiveformsdoc.ts index fc4aff60fc0..73583b08253 100644 --- a/src/app/showcase/doc/slider/reactiveformsdoc.ts +++ b/src/app/showcase/doc/slider/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

Slider can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/slider/stepdoc.ts b/src/app/showcase/doc/slider/stepdoc.ts index b7acffb9dc8..380d808c7cd 100644 --- a/src/app/showcase/doc/slider/stepdoc.ts +++ b/src/app/showcase/doc/slider/stepdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'step-doc', - template: `
+ template: `

Size of each movement is defined with the step property.

 diff --git a/src/app/showcase/doc/slider/styledoc.ts b/src/app/showcase/doc/slider/styledoc.ts index 478dc526438..d1dca9f4fd9 100644 --- a/src/app/showcase/doc/slider/styledoc.ts +++ b/src/app/showcase/doc/slider/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/slider/verticaldoc.ts b/src/app/showcase/doc/slider/verticaldoc.ts index 3f7cdcab7f0..d48455fd4af 100644 --- a/src/app/showcase/doc/slider/verticaldoc.ts +++ b/src/app/showcase/doc/slider/verticaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'vertical-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/speeddial/circledoc.ts b/src/app/showcase/doc/speeddial/circledoc.ts index f54fb4ff756..079330a56ec 100644 --- a/src/app/showcase/doc/speeddial/circledoc.ts +++ b/src/app/showcase/doc/speeddial/circledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'circle-doc', - template: `
+ template: `

Items can be displayed around the button when type is set to circle. Additional radius property defines the radius of the circle.

 diff --git a/src/app/showcase/doc/speeddial/customdoc.ts b/src/app/showcase/doc/speeddial/customdoc.ts index 4c4a3fdf1b6..edeb1add922 100644 --- a/src/app/showcase/doc/speeddial/customdoc.ts +++ b/src/app/showcase/doc/speeddial/customdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'custom-doc', - template: `
+ template: `

SpeedDial sample with an outlined button, custom icons and transitionDelay.

 diff --git a/src/app/showcase/doc/speeddial/importdoc.ts b/src/app/showcase/doc/speeddial/importdoc.ts index de86f386be2..ffe23e85254 100644 --- a/src/app/showcase/doc/speeddial/importdoc.ts +++ b/src/app/showcase/doc/speeddial/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/speeddial/lineardoc.ts b/src/app/showcase/doc/speeddial/lineardoc.ts index a8cfca65bdd..3a5846ef437 100644 --- a/src/app/showcase/doc/speeddial/lineardoc.ts +++ b/src/app/showcase/doc/speeddial/lineardoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'linear-doc', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/speeddial/maskdoc.ts b/src/app/showcase/doc/speeddial/maskdoc.ts index 2907c9b3261..0dc69b5b69b 100644 --- a/src/app/showcase/doc/speeddial/maskdoc.ts +++ b/src/app/showcase/doc/speeddial/maskdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'mask-doc', - template: `
+ template: `

Adding mask property displays a modal layer behind the popup items.

 diff --git a/src/app/showcase/doc/speeddial/quartercircledoc.ts b/src/app/showcase/doc/speeddial/quartercircledoc.ts index b6761675369..ae4487bdc9b 100644 --- a/src/app/showcase/doc/speeddial/quartercircledoc.ts +++ b/src/app/showcase/doc/speeddial/quartercircledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'quarter-circle-doc', - template: `
+ template: `

When type is defined as quarter-circle, items are displayed in a half-circle around the button.

 diff --git a/src/app/showcase/doc/speeddial/semicircledoc.ts b/src/app/showcase/doc/speeddial/semicircledoc.ts index d5b3cfa89fd..0191bcbf1c7 100644 --- a/src/app/showcase/doc/speeddial/semicircledoc.ts +++ b/src/app/showcase/doc/speeddial/semicircledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'semi-circle-doc', - template: `
+ template: `

When type is defined as semi-circle, items are displayed in a half-circle around the button.

 diff --git a/src/app/showcase/doc/speeddial/styledoc.ts b/src/app/showcase/doc/speeddial/styledoc.ts index 73ac91e6200..172be7581cf 100644 --- a/src/app/showcase/doc/speeddial/styledoc.ts +++ b/src/app/showcase/doc/speeddial/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/speeddial/tooltipdoc.ts b/src/app/showcase/doc/speeddial/tooltipdoc.ts index fb9cf3f8893..90720ca6cf9 100644 --- a/src/app/showcase/doc/speeddial/tooltipdoc.ts +++ b/src/app/showcase/doc/speeddial/tooltipdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'tooltip-doc', - template: `
+ template: `

Items display a tooltip on hover when a standalone Tooltip is present with a target that matches the items.

 diff --git a/src/app/showcase/doc/splitbutton/basicdoc.ts b/src/app/showcase/doc/splitbutton/basicdoc.ts index 576349312da..e457e4872ea 100644 --- a/src/app/showcase/doc/splitbutton/basicdoc.ts +++ b/src/app/showcase/doc/splitbutton/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.

 diff --git a/src/app/showcase/doc/splitbutton/disableddoc.ts b/src/app/showcase/doc/splitbutton/disableddoc.ts index a525d9305e4..3b2ad179723 100644 --- a/src/app/showcase/doc/splitbutton/disableddoc.ts +++ b/src/app/showcase/doc/splitbutton/disableddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/splitbutton/importdoc.ts b/src/app/showcase/doc/splitbutton/importdoc.ts index 80f964ff0b0..7a590acaefe 100644 --- a/src/app/showcase/doc/splitbutton/importdoc.ts +++ b/src/app/showcase/doc/splitbutton/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/splitbutton/nesteddoc.ts b/src/app/showcase/doc/splitbutton/nesteddoc.ts index 846b3664528..db756688e9a 100644 --- a/src/app/showcase/doc/splitbutton/nesteddoc.ts +++ b/src/app/showcase/doc/splitbutton/nesteddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'nested-doc', - template: `
+ template: `

SplitButton has a default action button and a collection of additional options defined by the model property based on MenuModel API.

 diff --git a/src/app/showcase/doc/splitbutton/outlineddoc.ts b/src/app/showcase/doc/splitbutton/outlineddoc.ts index 4200dcdc10e..b4f423c6d03 100644 --- a/src/app/showcase/doc/splitbutton/outlineddoc.ts +++ b/src/app/showcase/doc/splitbutton/outlineddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'outlined-doc', - template: `
+ template: `

Outlined buttons display a border without a background initially.

 diff --git a/src/app/showcase/doc/splitbutton/raiseddoc.ts b/src/app/showcase/doc/splitbutton/raiseddoc.ts index c38f63a1890..80d2ee9ad04 100644 --- a/src/app/showcase/doc/splitbutton/raiseddoc.ts +++ b/src/app/showcase/doc/splitbutton/raiseddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'raised-doc', - template: `
+ template: `

Raised buttons display a shadow to indicate elevation.

 diff --git a/src/app/showcase/doc/splitbutton/raisedtextdoc.ts b/src/app/showcase/doc/splitbutton/raisedtextdoc.ts index 46141c83ce8..d2e013e2d9e 100644 --- a/src/app/showcase/doc/splitbutton/raisedtextdoc.ts +++ b/src/app/showcase/doc/splitbutton/raisedtextdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'raised-text-doc', - template: `
+ template: `

Text buttons can be displayed as raised as well for elevation.

 diff --git a/src/app/showcase/doc/splitbutton/roundeddoc.ts b/src/app/showcase/doc/splitbutton/roundeddoc.ts index 510f3e1078b..091c0533cae 100644 --- a/src/app/showcase/doc/splitbutton/roundeddoc.ts +++ b/src/app/showcase/doc/splitbutton/roundeddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'rounded-doc', - template: `
+ template: `

Rounded buttons have a circular border radius.

 diff --git a/src/app/showcase/doc/splitbutton/severitydoc.ts b/src/app/showcase/doc/splitbutton/severitydoc.ts index 00458fe63de..d065da9469a 100644 --- a/src/app/showcase/doc/splitbutton/severitydoc.ts +++ b/src/app/showcase/doc/splitbutton/severitydoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'severity-doc', - template: `
+ template: `

Severity defines the type of button.

 diff --git a/src/app/showcase/doc/splitbutton/sizesdoc.ts b/src/app/showcase/doc/splitbutton/sizesdoc.ts index 74449b3c480..cff570bf97e 100644 --- a/src/app/showcase/doc/splitbutton/sizesdoc.ts +++ b/src/app/showcase/doc/splitbutton/sizesdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'sizes-doc', - template: `
+ template: `

SplitButton provides small and large sizes as alternatives to the standard.

 diff --git a/src/app/showcase/doc/splitbutton/styledoc.ts b/src/app/showcase/doc/splitbutton/styledoc.ts index cd6ccf73729..6469f296d16 100644 --- a/src/app/showcase/doc/splitbutton/styledoc.ts +++ b/src/app/showcase/doc/splitbutton/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/splitbutton/textdoc.ts b/src/app/showcase/doc/splitbutton/textdoc.ts index 8badbf1ef2a..003ad106840 100644 --- a/src/app/showcase/doc/splitbutton/textdoc.ts +++ b/src/app/showcase/doc/splitbutton/textdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'text-doc', - template: `
+ template: `

Text buttons are displayed as textual elements.

 diff --git a/src/app/showcase/doc/splitter/horizontaldoc.ts b/src/app/showcase/doc/splitter/horizontaldoc.ts index 12829356e06..0d97fdf8430 100644 --- a/src/app/showcase/doc/splitter/horizontaldoc.ts +++ b/src/app/showcase/doc/splitter/horizontaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'horizontal-doc', - template: `
+ template: `

Splitter requires two SplitterPanel components as children which are displayed horizontally by default.

 diff --git a/src/app/showcase/doc/splitter/importdoc.ts b/src/app/showcase/doc/splitter/importdoc.ts index 35b05f54758..490e963c057 100644 --- a/src/app/showcase/doc/splitter/importdoc.ts +++ b/src/app/showcase/doc/splitter/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/splitter/nesteddoc.ts b/src/app/showcase/doc/splitter/nesteddoc.ts index 2d3582a6453..5335a6c22d0 100644 --- a/src/app/showcase/doc/splitter/nesteddoc.ts +++ b/src/app/showcase/doc/splitter/nesteddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'nested-doc', - template: `
+ template: `

Splitters can be combined to create advanced layouts.

 diff --git a/src/app/showcase/doc/splitter/sizedoc.ts b/src/app/showcase/doc/splitter/sizedoc.ts index a198a94d388..748a2f7a1c2 100644 --- a/src/app/showcase/doc/splitter/sizedoc.ts +++ b/src/app/showcase/doc/splitter/sizedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'size-doc', - template: `
+ template: `

When no panelSizes are defined, panels are split 50/50, use the panelSizes property to give relative widths e.g. [25, 75].

 diff --git a/src/app/showcase/doc/splitter/styledoc.ts b/src/app/showcase/doc/splitter/styledoc.ts index 3fe113104e2..6347907dc9c 100644 --- a/src/app/showcase/doc/splitter/styledoc.ts +++ b/src/app/showcase/doc/splitter/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/splitter/verticaldoc.ts b/src/app/showcase/doc/splitter/verticaldoc.ts index f8cb4228881..c7bfd20770f 100644 --- a/src/app/showcase/doc/splitter/verticaldoc.ts +++ b/src/app/showcase/doc/splitter/verticaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'vertical-doc', - template: `
+ template: `

Panels are displayed as stacked by setting the layout to vertical.

 diff --git a/src/app/showcase/doc/steps/basicdoc.ts b/src/app/showcase/doc/steps/basicdoc.ts index 450b352fedc..75c8626eeba 100644 --- a/src/app/showcase/doc/steps/basicdoc.ts +++ b/src/app/showcase/doc/steps/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Steps requires a collection of menuitems as its model.

 diff --git a/src/app/showcase/doc/steps/importdoc.ts b/src/app/showcase/doc/steps/importdoc.ts index a421fffab54..9d0051ad93d 100644 --- a/src/app/showcase/doc/steps/importdoc.ts +++ b/src/app/showcase/doc/steps/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/steps/interactivedoc.ts b/src/app/showcase/doc/steps/interactivedoc.ts index 2337f7cd5d7..439060b0ed1 100644 --- a/src/app/showcase/doc/steps/interactivedoc.ts +++ b/src/app/showcase/doc/steps/interactivedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'interactive-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/steps/routingdoc.ts b/src/app/showcase/doc/steps/routingdoc.ts index 23e62580d89..71483d259ea 100644 --- a/src/app/showcase/doc/steps/routingdoc.ts +++ b/src/app/showcase/doc/steps/routingdoc.ts @@ -1,12 +1,12 @@ import { Component, Input, OnInit } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; -import { TicketService } from '../../service/ticketservice'; -import { Code } from '../../domain/code'; import { Subscription } from 'rxjs'; +import { Code } from '../../domain/code'; +import { TicketService } from '../../service/ticketservice'; @Component({ selector: 'routing-doc', - template: `
+ template: `

Example below uses nested routes with Steps.

 diff --git a/src/app/showcase/doc/steps/styledoc.ts b/src/app/showcase/doc/steps/styledoc.ts index 51aa7151b96..8e2f1c9e02c 100644 --- a/src/app/showcase/doc/steps/styledoc.ts +++ b/src/app/showcase/doc/steps/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/styleclass/animationdoc.ts b/src/app/showcase/doc/styleclass/animationdoc.ts index e040bd410c5..fb4777d3a81 100644 --- a/src/app/showcase/doc/styleclass/animationdoc.ts +++ b/src/app/showcase/doc/styleclass/animationdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'animation-doc', - template: `
+ template: `

Classes to apply during enter and leave animations are specified using the enterClass, enterActiveClass, enterToClass, leaveClass, leaveActiveClass,leaveToClassproperties. In addition in case diff --git a/src/app/showcase/doc/styleclass/importdoc.ts b/src/app/showcase/doc/styleclass/importdoc.ts index 85e3f3735e5..2b045186734 100644 --- a/src/app/showcase/doc/styleclass/importdoc.ts +++ b/src/app/showcase/doc/styleclass/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/styleclass/toggleclassdoc.ts b/src/app/showcase/doc/styleclass/toggleclassdoc.ts index d3b4091ce8e..6983d8aa193 100644 --- a/src/app/showcase/doc/styleclass/toggleclassdoc.ts +++ b/src/app/showcase/doc/styleclass/toggleclassdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'toggle-class-doc', - template: `
+ template: `

StyleClass has two modes, toggleClass to simply add-remove a class and enter/leave animations. The target element to change the styling is defined with the selector property that accepts any valid CSS selector or diff --git a/src/app/showcase/doc/table/basicdoc.ts b/src/app/showcase/doc/table/basicdoc.ts index 63b0a5094bd..f2dff1a9c5a 100644 --- a/src/app/showcase/doc/table/basicdoc.ts +++ b/src/app/showcase/doc/table/basicdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'basic-doc', - template: `

+ template: `

DataTable requires a collection to display along with column components for the representation of the data.

 diff --git a/src/app/showcase/doc/table/celleditdoc.ts b/src/app/showcase/doc/table/celleditdoc.ts index 3ff587b2220..3cf9d1ebcc7 100644 --- a/src/app/showcase/doc/table/celleditdoc.ts +++ b/src/app/showcase/doc/table/celleditdoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'cell-edit-doc', - template: `
+ template: `

In-cell editing is enabled by adding pEditableColumn directive to an editable cell that has a p-cellEditor helper component to define the input-output templates for the edit and view modes respectively.

 diff --git a/src/app/showcase/doc/table/checkboxselectiondoc.ts b/src/app/showcase/doc/table/checkboxselectiondoc.ts index ed04a4eff25..540e63efe26 100644 --- a/src/app/showcase/doc/table/checkboxselectiondoc.ts +++ b/src/app/showcase/doc/table/checkboxselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'checkbox-selection-doc', - template: `
+ template: `

Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as multiple.

 diff --git a/src/app/showcase/doc/table/columngroupdoc.ts b/src/app/showcase/doc/table/columngroupdoc.ts index 3941951e2bb..4a082a8ff21 100644 --- a/src/app/showcase/doc/table/columngroupdoc.ts +++ b/src/app/showcase/doc/table/columngroupdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'column-group-doc', - template: `
+ template: `

Columns can be grouped using rowspan and colspan properties.

 diff --git a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts index 0735cf595be..3daa04b8b66 100644 --- a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts +++ b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'column-resize-expand-mode-doc', - template: `
+ template: `

Setting columnResizeMode as expand changes the table width as well.

 diff --git a/src/app/showcase/doc/table/columnresizefitmodedoc.ts b/src/app/showcase/doc/table/columnresizefitmodedoc.ts index 9157a145894..86166387443 100644 --- a/src/app/showcase/doc/table/columnresizefitmodedoc.ts +++ b/src/app/showcase/doc/table/columnresizefitmodedoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'column-resize-fit-mode-doc', - template: `
+ template: `

Columns can be resized using drag drop by setting the resizableColumns to true. Fit mode is the default one and the overall table width does not change when a column is resized.

 diff --git a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts index eedaac99e4b..c2686a91b4b 100644 --- a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts +++ b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'column-resize-scrollable-mode-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/table/columnselectiondoc.ts b/src/app/showcase/doc/table/columnselectiondoc.ts index dedebd0d7ae..e91e6f657db 100644 --- a/src/app/showcase/doc/table/columnselectiondoc.ts +++ b/src/app/showcase/doc/table/columnselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'column-selection-doc', - template: `
+ template: `

Selection using custom elements.

 diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts index 224f46435af..0ff4e66de2e 100644 --- a/src/app/showcase/doc/table/columntoggledoc.ts +++ b/src/app/showcase/doc/table/columntoggledoc.ts @@ -9,7 +9,7 @@ interface Column { } @Component({ selector: 'column-toggle-doc', - template: `
+ template: `

This demo uses a multiselect component to implement toggleable columns.

 diff --git a/src/app/showcase/doc/table/contextmenudoc.ts b/src/app/showcase/doc/table/contextmenudoc.ts index b07c7b8dcd3..6113f60ae23 100644 --- a/src/app/showcase/doc/table/contextmenudoc.ts +++ b/src/app/showcase/doc/table/contextmenudoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'context-menu-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/table/controlledselectiondoc.ts b/src/app/showcase/doc/table/controlledselectiondoc.ts index 9769336a914..66fa61b4b5d 100644 --- a/src/app/showcase/doc/table/controlledselectiondoc.ts +++ b/src/app/showcase/doc/table/controlledselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'controlled-selection-doc', - template: `

+ template: `

Row selection can be controlled by utilizing rowSelectable and disabled properties.

 diff --git a/src/app/showcase/doc/table/customersdoc.ts b/src/app/showcase/doc/table/customersdoc.ts index 044be2c8fcc..cdf3b8190b3 100644 --- a/src/app/showcase/doc/table/customersdoc.ts +++ b/src/app/showcase/doc/table/customersdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'customers-doc', - template: `
+ template: `

DataTable with selection, pagination, filtering, sorting and templating.

 diff --git a/src/app/showcase/doc/table/customsortdoc.ts b/src/app/showcase/doc/table/customsortdoc.ts index c4ec5e075ee..346b2b4a6ed 100644 --- a/src/app/showcase/doc/table/customsortdoc.ts +++ b/src/app/showcase/doc/table/customsortdoc.ts @@ -7,7 +7,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'custom-sort-doc', - template: `
+ template: `

Instead of using the built-in sorting algorithm a custom sort can be attached by enabling customSort property and defining a sortFunction implementation. This function gets a SortEvent instance that provides the data to sort, diff --git a/src/app/showcase/doc/table/dynamicdoc.ts b/src/app/showcase/doc/table/dynamicdoc.ts index 8d6ad9d6d01..b60b3609eb3 100644 --- a/src/app/showcase/doc/table/dynamicdoc.ts +++ b/src/app/showcase/doc/table/dynamicdoc.ts @@ -9,7 +9,7 @@ interface Column { } @Component({ selector: 'dynamic-doc', - template: `

+ template: `

Columns can be defined dynamically using the *ngFor directive.

 diff --git a/src/app/showcase/doc/table/expandablerowgroupdoc.ts b/src/app/showcase/doc/table/expandablerowgroupdoc.ts index a9c7b113ec6..d77798f7b33 100644 --- a/src/app/showcase/doc/table/expandablerowgroupdoc.ts +++ b/src/app/showcase/doc/table/expandablerowgroupdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'expandable-row-group-doc', - template: `
+ template: `

When expandableRowGroups is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the expandedRows and onRowToggle properties.

 diff --git a/src/app/showcase/doc/table/exportdoc.ts b/src/app/showcase/doc/table/exportdoc.ts index db1eebe64f6..1730e897d09 100644 --- a/src/app/showcase/doc/table/exportdoc.ts +++ b/src/app/showcase/doc/table/exportdoc.ts @@ -17,7 +17,7 @@ interface ExportColumn { @Component({ selector: 'export-doc', - template: `
+ template: `

Table can export its data in CSV format using the built-in exportCSV() function. By default, all data is exported. If you'd like to export only the selection then pass a config object with selectionOnly property as true. diff --git a/src/app/showcase/doc/table/filtermenudoc.ts b/src/app/showcase/doc/table/filtermenudoc.ts index 35db9e91242..b1a0d5556e3 100644 --- a/src/app/showcase/doc/table/filtermenudoc.ts +++ b/src/app/showcase/doc/table/filtermenudoc.ts @@ -7,7 +7,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'filter-menu-doc', - template: `

+ template: `

Filters are displayed in an overlay.

 diff --git a/src/app/showcase/doc/table/filterrowdoc.ts b/src/app/showcase/doc/table/filterrowdoc.ts index fd3edda46ce..77b261f7fa1 100644 --- a/src/app/showcase/doc/table/filterrowdoc.ts +++ b/src/app/showcase/doc/table/filterrowdoc.ts @@ -7,7 +7,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'filter-row-doc', - template: `
+ template: `

Filters are displayed inline within a separate row.

 diff --git a/src/app/showcase/doc/table/flexiblescrolldoc.ts b/src/app/showcase/doc/table/flexiblescrolldoc.ts index 24ee42bee74..ce7cee14cb1 100644 --- a/src/app/showcase/doc/table/flexiblescrolldoc.ts +++ b/src/app/showcase/doc/table/flexiblescrolldoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'flexible-scroll-doc', - template: `
+ template: `

Flex scroll feature makes the scrollable viewport section dynamic instead of a fixed value so that it can grow or shrink relative to the parent size of the table. Click the button below to display a maximizable Dialog where data diff --git a/src/app/showcase/doc/table/frozencolumnsdoc.ts b/src/app/showcase/doc/table/frozencolumnsdoc.ts index b01f5bc8250..e2d8151b069 100644 --- a/src/app/showcase/doc/table/frozencolumnsdoc.ts +++ b/src/app/showcase/doc/table/frozencolumnsdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'frozen-columns-doc', - template: `

+ template: `

Certain columns can be frozen by using the pFrozenColumn directive of the table component. In addition, alignFrozen is available to define whether the column should be fixed on the left or right.

 diff --git a/src/app/showcase/doc/table/frozenrowsdoc.ts b/src/app/showcase/doc/table/frozenrowsdoc.ts index 3c70377bfd4..1214efb1942 100644 --- a/src/app/showcase/doc/table/frozenrowsdoc.ts +++ b/src/app/showcase/doc/table/frozenrowsdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'frozen-rows-doc', - template: `
+ template: `

Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property.

 diff --git a/src/app/showcase/doc/table/gridlinesdoc.ts b/src/app/showcase/doc/table/gridlinesdoc.ts index 4d0d3b44a7f..1a9cb458910 100644 --- a/src/app/showcase/doc/table/gridlinesdoc.ts +++ b/src/app/showcase/doc/table/gridlinesdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'gridlines-doc', - template: `
+ template: `

Adding p-datatable-gridlines class displays grid lines.

 diff --git a/src/app/showcase/doc/table/horizontalandverticaldoc.ts b/src/app/showcase/doc/table/horizontalandverticaldoc.ts index 13e9015988a..63b2960265b 100644 --- a/src/app/showcase/doc/table/horizontalandverticaldoc.ts +++ b/src/app/showcase/doc/table/horizontalandverticaldoc.ts @@ -5,7 +5,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'horizontal-and-vertical-scroll-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/table/importdoc.ts b/src/app/showcase/doc/table/importdoc.ts index 5cbed363fda..16d59216a39 100644 --- a/src/app/showcase/doc/table/importdoc.ts +++ b/src/app/showcase/doc/table/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/table/lazyloaddoc.ts b/src/app/showcase/doc/table/lazyloaddoc.ts index e973589fc1c..637205f565d 100644 --- a/src/app/showcase/doc/table/lazyloaddoc.ts +++ b/src/app/showcase/doc/table/lazyloaddoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'lazy-load-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts index 8f8b769ef28..b52c1308dcb 100644 --- a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts +++ b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'single-column-sort-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/table/multipleselectiondoc.ts b/src/app/showcase/doc/table/multipleselectiondoc.ts index dd4de22ec85..f5c54b27ad2 100644 --- a/src/app/showcase/doc/table/multipleselectiondoc.ts +++ b/src/app/showcase/doc/table/multipleselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'multiple-selection-doc', - template: `
+ template: `

In multiple mode, selection binding should be an array. For touch enabled devices, selection is managed by tapping and for other devices metakey or shiftkey are required. Setting metaKeySelection property as false diff --git a/src/app/showcase/doc/table/pageonlyselectiondoc.ts b/src/app/showcase/doc/table/pageonlyselectiondoc.ts index 427da9ff75d..d76962835a0 100644 --- a/src/app/showcase/doc/table/pageonlyselectiondoc.ts +++ b/src/app/showcase/doc/table/pageonlyselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'page-only-selection-doc', - template: `

+ template: `
diff --git a/src/app/showcase/doc/table/paginatorbasicdoc.ts b/src/app/showcase/doc/table/paginatorbasicdoc.ts index 2117baa644c..ca09c29d29d 100644 --- a/src/app/showcase/doc/table/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/table/paginatorbasicdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'paginator-basic-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/table/paginatorlocaledoc.ts b/src/app/showcase/doc/table/paginatorlocaledoc.ts index 540cab64a72..03733b324b3 100644 --- a/src/app/showcase/doc/table/paginatorlocaledoc.ts +++ b/src/app/showcase/doc/table/paginatorlocaledoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'paginator-locale-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts index 6602f81ad3c..61e3b276022 100644 --- a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts +++ b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'paginator-programmatic-doc', - template: `
+ template: `

Paginator can also be controlled via model using a binding to the first property where changes trigger a pagination.

 diff --git a/src/app/showcase/doc/table/productsdoc.ts b/src/app/showcase/doc/table/productsdoc.ts index 92924f87629..ac02b4f3b57 100644 --- a/src/app/showcase/doc/table/productsdoc.ts +++ b/src/app/showcase/doc/table/productsdoc.ts @@ -7,7 +7,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'products-doc', - template: `
+ template: `

CRUD implementation example with a Dialog.

 diff --git a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts index 9c212380def..a677025b1a4 100644 --- a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts +++ b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'radio-button-selection-doc', - template: `
+ template: `

Single selection can also be handled using radio buttons.

 diff --git a/src/app/showcase/doc/table/reorderdoc.ts b/src/app/showcase/doc/table/reorderdoc.ts index 2d28f17828a..72041b36d25 100644 --- a/src/app/showcase/doc/table/reorderdoc.ts +++ b/src/app/showcase/doc/table/reorderdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'reorder-doc', - template: `
+ template: `

Order of the columns and rows can be changed using drag and drop. Column reordering is configured by adding reorderableColumns property.

diff --git a/src/app/showcase/doc/table/responsivescrolldoc.ts b/src/app/showcase/doc/table/responsivescrolldoc.ts index c7ebf5ba963..75197139903 100644 --- a/src/app/showcase/doc/table/responsivescrolldoc.ts +++ b/src/app/showcase/doc/table/responsivescrolldoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'responsive-scroll-doc', - template: `

+ template: `

When there is not enough space for the table to fit all the content efficiently, table displays a horizontal scrollbar. It is suggested to give a min-width to the table to avoid design issues due wrapping of cell contents.

Following table displays a horizontal scrollbar when viewport is smaller than 50rem.

diff --git a/src/app/showcase/doc/table/responsivestackdoc.ts b/src/app/showcase/doc/table/responsivestackdoc.ts index 100ab744a9c..83afc998b23 100644 --- a/src/app/showcase/doc/table/responsivestackdoc.ts +++ b/src/app/showcase/doc/table/responsivestackdoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'responsive-stack-doc', - template: `
+ template: `

In stack layout, columns are displayed as stacked after a certain breakpoint. Default is '960px' as max-width. This feature is enabled by setting responsiveLayout to stack and adding an element with diff --git a/src/app/showcase/doc/table/roweditdoc.ts b/src/app/showcase/doc/table/roweditdoc.ts index 9eb19dd85d0..923e7232343 100644 --- a/src/app/showcase/doc/table/roweditdoc.ts +++ b/src/app/showcase/doc/table/roweditdoc.ts @@ -7,7 +7,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'row-edit-doc', - template: `

+ template: `

Row editing toggles the visibility of all the editors in the row at once and provides additional options to save and cancel editing. Row editing functionality is enabled by setting the editMode to "row" on table, defining a diff --git a/src/app/showcase/doc/table/rowexpanddoc.ts b/src/app/showcase/doc/table/rowexpanddoc.ts index f70b87a4c9c..5f391a99d96 100644 --- a/src/app/showcase/doc/table/rowexpanddoc.ts +++ b/src/app/showcase/doc/table/rowexpanddoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'row-expand-doc', - template: `

+ template: `

Row expansion allows displaying detailed content for a particular row. To use this feature, add a template named rowexpansion and use the pRowToggler directive whose value is the row data instance on an element of your choice diff --git a/src/app/showcase/doc/table/rowspangroupingdoc.ts b/src/app/showcase/doc/table/rowspangroupingdoc.ts index ae05ffd10c9..3e6b8621f22 100644 --- a/src/app/showcase/doc/table/rowspangroupingdoc.ts +++ b/src/app/showcase/doc/table/rowspangroupingdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'rowspan-grouping-doc', - template: `

+ template: `

When rowGroupMode is configured to be rowspan, the grouping column spans multiple rows.

 diff --git a/src/app/showcase/doc/table/selectioneventsdoc.ts b/src/app/showcase/doc/table/selectioneventsdoc.ts index 7fd3701d34c..2b4e2bef040 100644 --- a/src/app/showcase/doc/table/selectioneventsdoc.ts +++ b/src/app/showcase/doc/table/selectioneventsdoc.ts @@ -7,7 +7,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'selection-events-doc', - template: `
+ template: `

Table provides onRowSelect and onRowUnselect events to listen selection events.

 diff --git a/src/app/showcase/doc/table/singlecolumnsortdoc.ts b/src/app/showcase/doc/table/singlecolumnsortdoc.ts index badb1e8c26f..b8e3a5f8b02 100644 --- a/src/app/showcase/doc/table/singlecolumnsortdoc.ts +++ b/src/app/showcase/doc/table/singlecolumnsortdoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'single-column-sort-doc', - template: `
+ template: `

A column can be made sortable by adding the pSortableColumn directive whose value is the field to sort against and a sort indicator via p-sortIcon component. For dynamic columns, setting diff --git a/src/app/showcase/doc/table/singleselectiondoc.ts b/src/app/showcase/doc/table/singleselectiondoc.ts index 8b35ed4dc7c..65b01732f4b 100644 --- a/src/app/showcase/doc/table/singleselectiondoc.ts +++ b/src/app/showcase/doc/table/singleselectiondoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'single-selection-doc', - template: `

+ template: `

Single row selection is enabled by defining selectionMode as single along with a value binding using selection property. When available, it is suggested to provide a unique identifier of a row with diff --git a/src/app/showcase/doc/table/sizedoc.ts b/src/app/showcase/doc/table/sizedoc.ts index 9d650a498f7..c42e5d6b4a8 100644 --- a/src/app/showcase/doc/table/sizedoc.ts +++ b/src/app/showcase/doc/table/sizedoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'size-doc', - template: `

+ template: `

In addition to a regular table, alternatives with alternative sizes are available.

 diff --git a/src/app/showcase/doc/table/statefuldoc.ts b/src/app/showcase/doc/table/statefuldoc.ts index 7e3b1e23da0..2eaa1f25fb4 100644 --- a/src/app/showcase/doc/table/statefuldoc.ts +++ b/src/app/showcase/doc/table/statefuldoc.ts @@ -5,7 +5,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'stateful-doc', - template: `
+ template: `

Stateful table allows keeping the state such as page, sort and filtering either at local storage or session storage so that when the page is visited again, table would render the data using the last settings.

diff --git a/src/app/showcase/doc/table/stripeddoc.ts b/src/app/showcase/doc/table/stripeddoc.ts index 2773dc74b0d..9c3d8077ef5 100644 --- a/src/app/showcase/doc/table/stripeddoc.ts +++ b/src/app/showcase/doc/table/stripeddoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'striped-doc', - template: `

+ template: `

Adding p-datatable-striped class displays striped rows.

 diff --git a/src/app/showcase/doc/table/styledoc.ts b/src/app/showcase/doc/table/styledoc.ts index ea26ab58dc5..877eca53901 100644 --- a/src/app/showcase/doc/table/styledoc.ts +++ b/src/app/showcase/doc/table/styledoc.ts @@ -5,7 +5,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'style-doc', - template: `
+ template: `

Certain rows or cells can easily be styled based on conditions.

 diff --git a/src/app/showcase/doc/table/stylingdoc.ts b/src/app/showcase/doc/table/stylingdoc.ts index 5712546611f..b9ac93e5f35 100644 --- a/src/app/showcase/doc/table/stylingdoc.ts +++ b/src/app/showcase/doc/table/stylingdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'styling-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/table/subheadergroupingdoc.ts b/src/app/showcase/doc/table/subheadergroupingdoc.ts index 23f408a0530..ca21c4149e6 100644 --- a/src/app/showcase/doc/table/subheadergroupingdoc.ts +++ b/src/app/showcase/doc/table/subheadergroupingdoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'subheader-grouping-doc', - template: `
+ template: `

Rows are grouped with the groupRowsBy property. When rowGroupMode is set as subheader, a header and footer can be displayed for each group. The content of a group header is provided with groupheader and diff --git a/src/app/showcase/doc/table/templatedoc.ts b/src/app/showcase/doc/table/templatedoc.ts index e26f96fd286..0fd75b6c2f3 100644 --- a/src/app/showcase/doc/table/templatedoc.ts +++ b/src/app/showcase/doc/table/templatedoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'template-doc', - template: `

+ template: `

Custom content at header, body and footer sections are supported via templating.

 diff --git a/src/app/showcase/doc/table/verticalscrolldoc.ts b/src/app/showcase/doc/table/verticalscrolldoc.ts index 7ea823e2292..76b4f2ec41e 100644 --- a/src/app/showcase/doc/table/verticalscrolldoc.ts +++ b/src/app/showcase/doc/table/verticalscrolldoc.ts @@ -6,7 +6,7 @@ import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'vertical-scroll-doc', - template: `
+ template: `

Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.

 diff --git a/src/app/showcase/doc/table/virtualscrolldoc.ts b/src/app/showcase/doc/table/virtualscrolldoc.ts index a4568108c08..efa48f4f8e5 100644 --- a/src/app/showcase/doc/table/virtualscrolldoc.ts +++ b/src/app/showcase/doc/table/virtualscrolldoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'virtual-scroll-doc', - template: `
+ template: `

VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also diff --git a/src/app/showcase/doc/table/virtualscrolllazydoc.ts b/src/app/showcase/doc/table/virtualscrolllazydoc.ts index bcef23bd765..09ae89f963b 100644 --- a/src/app/showcase/doc/table/virtualscrolllazydoc.ts +++ b/src/app/showcase/doc/table/virtualscrolllazydoc.ts @@ -12,7 +12,7 @@ interface Column { @Component({ selector: 'virtual-scroll-lazy-doc', - template: `

+ template: `

VirtualScroller is a performance-approach to handle huge data efficiently. Setting virtualScroll property as true and providing a virtualScrollItemSize in pixels would be enough to enable this functionality. It is also diff --git a/src/app/showcase/doc/tabmenu/activedoc.ts b/src/app/showcase/doc/tabmenu/activedoc.ts index d3001726bbc..666e1f63ee0 100644 --- a/src/app/showcase/doc/tabmenu/activedoc.ts +++ b/src/app/showcase/doc/tabmenu/activedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'active-doc', - template: `

+ template: `

By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.

 diff --git a/src/app/showcase/doc/tabmenu/basicdoc.ts b/src/app/showcase/doc/tabmenu/basicdoc.ts index 8f43d795d92..59d11e9842a 100644 --- a/src/app/showcase/doc/tabmenu/basicdoc.ts +++ b/src/app/showcase/doc/tabmenu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

TabMenu requires a collection of menuitems as its model.

 diff --git a/src/app/showcase/doc/tabmenu/controlleddoc.ts b/src/app/showcase/doc/tabmenu/controlleddoc.ts index 60fe823d894..5a0831b1d5b 100644 --- a/src/app/showcase/doc/tabmenu/controlleddoc.ts +++ b/src/app/showcase/doc/tabmenu/controlleddoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'controlled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tabmenu/importdoc.ts b/src/app/showcase/doc/tabmenu/importdoc.ts index 6251cc0bdd7..0e05b805042 100644 --- a/src/app/showcase/doc/tabmenu/importdoc.ts +++ b/src/app/showcase/doc/tabmenu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/tabmenu/scrollabledoc.ts b/src/app/showcase/doc/tabmenu/scrollabledoc.ts index 72e12942088..3efd50d10b8 100644 --- a/src/app/showcase/doc/tabmenu/scrollabledoc.ts +++ b/src/app/showcase/doc/tabmenu/scrollabledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'scrollable-doc', - template: `
+ template: `

Setting scrollable property to true enables scrolling if content overflows.

 diff --git a/src/app/showcase/doc/tabmenu/styledoc.ts b/src/app/showcase/doc/tabmenu/styledoc.ts index 47b6f8bd5de..46ed6b32a85 100644 --- a/src/app/showcase/doc/tabmenu/styledoc.ts +++ b/src/app/showcase/doc/tabmenu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/tabmenu/templatedoc.ts b/src/app/showcase/doc/tabmenu/templatedoc.ts index 80d66829945..0392adca5d6 100644 --- a/src/app/showcase/doc/tabmenu/templatedoc.ts +++ b/src/app/showcase/doc/tabmenu/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'tab-menu-template-demo', - template: `
+ template: `

TabMenu supports templating via the item template which gets the menuitem instance and the index.

 diff --git a/src/app/showcase/doc/tabview/basicdoc.ts b/src/app/showcase/doc/tabview/basicdoc.ts index f4a20277c48..738c3f90cf4 100644 --- a/src/app/showcase/doc/tabview/basicdoc.ts +++ b/src/app/showcase/doc/tabview/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

TabView consists of one or more TabPanel elements.

 diff --git a/src/app/showcase/doc/tabview/closabledoc.ts b/src/app/showcase/doc/tabview/closabledoc.ts index 25e315845e0..0d4b81837c7 100644 --- a/src/app/showcase/doc/tabview/closabledoc.ts +++ b/src/app/showcase/doc/tabview/closabledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'closable-doc', - template: `
+ template: `

When closable is enabled, a close icon is displayed to hide the tab.

 diff --git a/src/app/showcase/doc/tabview/controlleddoc.ts b/src/app/showcase/doc/tabview/controlleddoc.ts index 71c7a00ea4b..efe9b938a87 100644 --- a/src/app/showcase/doc/tabview/controlleddoc.ts +++ b/src/app/showcase/doc/tabview/controlleddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'controlled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tabview/customtemplatedoc.ts b/src/app/showcase/doc/tabview/customtemplatedoc.ts index 1b0febe2376..e3cb3531928 100644 --- a/src/app/showcase/doc/tabview/customtemplatedoc.ts +++ b/src/app/showcase/doc/tabview/customtemplatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

Header of a tab supports templating to place custom html content instead of strings as well.

 diff --git a/src/app/showcase/doc/tabview/disableddoc.ts b/src/app/showcase/doc/tabview/disableddoc.ts index 46f1014371b..88a9903c28d 100644 --- a/src/app/showcase/doc/tabview/disableddoc.ts +++ b/src/app/showcase/doc/tabview/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

Setting disabled property to true of a TabPanel prevents user interaction.

 diff --git a/src/app/showcase/doc/tabview/importdoc.ts b/src/app/showcase/doc/tabview/importdoc.ts index 93764786382..0462e48a029 100644 --- a/src/app/showcase/doc/tabview/importdoc.ts +++ b/src/app/showcase/doc/tabview/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/tabview/scrollabledoc.ts b/src/app/showcase/doc/tabview/scrollabledoc.ts index 1a6f64ba52c..3ad5bb550b0 100644 --- a/src/app/showcase/doc/tabview/scrollabledoc.ts +++ b/src/app/showcase/doc/tabview/scrollabledoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'scrollable-doc', - template: `
+ template: `

Adding scrollable property displays navigational buttons at each side to scroll between tabs.

 diff --git a/src/app/showcase/doc/tabview/styledoc.ts b/src/app/showcase/doc/tabview/styledoc.ts index a7dca40f390..8dc282bc156 100644 --- a/src/app/showcase/doc/tabview/styledoc.ts +++ b/src/app/showcase/doc/tabview/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/tag/basicdoc.ts b/src/app/showcase/doc/tag/basicdoc.ts index 944458564e2..7be18789e85 100644 --- a/src/app/showcase/doc/tag/basicdoc.ts +++ b/src/app/showcase/doc/tag/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Label of the tag is defined with the value property.

 diff --git a/src/app/showcase/doc/tag/icondoc.ts b/src/app/showcase/doc/tag/icondoc.ts index 7e44d67b4a5..98373dd6ab3 100644 --- a/src/app/showcase/doc/tag/icondoc.ts +++ b/src/app/showcase/doc/tag/icondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'icon-doc', - template: `
+ template: `

A font icon next to the value can be displayed with the icon property.

 diff --git a/src/app/showcase/doc/tag/importdoc.ts b/src/app/showcase/doc/tag/importdoc.ts index 72ff8c33640..7b540bcb6f3 100644 --- a/src/app/showcase/doc/tag/importdoc.ts +++ b/src/app/showcase/doc/tag/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/tag/pilldoc.ts b/src/app/showcase/doc/tag/pilldoc.ts index 11fced70af0..e2b57985a1a 100644 --- a/src/app/showcase/doc/tag/pilldoc.ts +++ b/src/app/showcase/doc/tag/pilldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'pill-doc', - template: `
+ template: `

Enabling rounded, displays a tag as a pill.

 diff --git a/src/app/showcase/doc/tag/severitydoc.ts b/src/app/showcase/doc/tag/severitydoc.ts index 864ff05e63e..e65b16cdc35 100644 --- a/src/app/showcase/doc/tag/severitydoc.ts +++ b/src/app/showcase/doc/tag/severitydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'severity-doc', - template: `
+ template: `

Severity defines the color of the tag, possible values are success, info, warning and danger in addition to the default theme color.

 diff --git a/src/app/showcase/doc/tag/styledoc.ts b/src/app/showcase/doc/tag/styledoc.ts index 00e75a255ce..c30217c0c14 100644 --- a/src/app/showcase/doc/tag/styledoc.ts +++ b/src/app/showcase/doc/tag/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/tag/templatedoc.ts b/src/app/showcase/doc/tag/templatedoc.ts index 647bd1b07fd..fc3518f88c6 100644 --- a/src/app/showcase/doc/tag/templatedoc.ts +++ b/src/app/showcase/doc/tag/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'tag-template-demo', - template: `
+ template: `

Children of the component are passed as the content for templating.

 diff --git a/src/app/showcase/doc/terminal/basicdoc.ts b/src/app/showcase/doc/terminal/basicdoc.ts index 86001c42949..964f56730c5 100644 --- a/src/app/showcase/doc/terminal/basicdoc.ts +++ b/src/app/showcase/doc/terminal/basicdoc.ts @@ -1,11 +1,11 @@ import { Component, Input, OnDestroy } from '@angular/core'; -import { Code } from '../../domain/code'; import { TerminalService } from 'primeng/terminal'; import { Subscription } from 'rxjs'; +import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/terminal/importdoc.ts b/src/app/showcase/doc/terminal/importdoc.ts index 4decbec6544..2660b0fd8fc 100644 --- a/src/app/showcase/doc/terminal/importdoc.ts +++ b/src/app/showcase/doc/terminal/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/terminal/styledoc.ts b/src/app/showcase/doc/terminal/styledoc.ts index 9122583dec2..a9e9b418e19 100644 --- a/src/app/showcase/doc/terminal/styledoc.ts +++ b/src/app/showcase/doc/terminal/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/theming/architecturedoc.ts b/src/app/showcase/doc/theming/architecturedoc.ts index f3e1dd08d25..70871c2527d 100644 --- a/src/app/showcase/doc/theming/architecturedoc.ts +++ b/src/app/showcase/doc/theming/architecturedoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'architecture-doc', - template: `
+ template: `

Note: In upcoming versions, theming architecture will be redesigned to utilize CSS variables instead of SCSS variables in a backward compatible way for a dynamic approach. In addition, a new diff --git a/src/app/showcase/doc/theming/builtinthemesdoc.ts b/src/app/showcase/doc/theming/builtinthemesdoc.ts index b0308355fb0..a92cb3efc67 100644 --- a/src/app/showcase/doc/theming/builtinthemesdoc.ts +++ b/src/app/showcase/doc/theming/builtinthemesdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'builtin-themes-doc', - template: `

+ template: `

PrimeNG ships with various free themes to choose from. The list below states all the available themes in the npm distribution with import paths. For a live preview, use the configurator diff --git a/src/app/showcase/doc/theming/cssvariablesdoc.ts b/src/app/showcase/doc/theming/cssvariablesdoc.ts index 6c76a7f1620..7438fe33cb2 100644 --- a/src/app/showcase/doc/theming/cssvariablesdoc.ts +++ b/src/app/showcase/doc/theming/cssvariablesdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'css-variables-doc', - template: `

+ template: `

Each PrimeNG theme exports numerous CSS variables, refer to Colors page for more details.

 diff --git a/src/app/showcase/doc/theming/customthemedoc.ts b/src/app/showcase/doc/theming/customthemedoc.ts index bd2a218d214..7dd6b461a74 100644 --- a/src/app/showcase/doc/theming/customthemedoc.ts +++ b/src/app/showcase/doc/theming/customthemedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'custom-theme-doc', - template: `
+ template: `

Themes are created with SASS using the primeng-sass-theme project available at github. This repository contains all the scss files for the components and the diff --git a/src/app/showcase/doc/theming/primeflexdoc.ts b/src/app/showcase/doc/theming/primeflexdoc.ts index 31b6b3a1887..123ab54292c 100644 --- a/src/app/showcase/doc/theming/primeflexdoc.ts +++ b/src/app/showcase/doc/theming/primeflexdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'primeflex-doc', - template: `

+ template: `

PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well. PrimeNG can be used with any CSS utility library like bootstrap and tailwind diff --git a/src/app/showcase/doc/theming/scalingdoc.ts b/src/app/showcase/doc/theming/scalingdoc.ts index 987f2ce83dd..626a32f8c56 100644 --- a/src/app/showcase/doc/theming/scalingdoc.ts +++ b/src/app/showcase/doc/theming/scalingdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'scaling-doc', - template: `

+ template: `

PrimeNG utilizes rem units to make sure the components blend in with the rest of your UI perfectly. This also enables scaling, for example changing the size of the components is easy as configuring the font size of your document. Code diff --git a/src/app/showcase/doc/theming/scopedcssdoc.ts b/src/app/showcase/doc/theming/scopedcssdoc.ts index 2bf763dd8d3..f3b482f7123 100644 --- a/src/app/showcase/doc/theming/scopedcssdoc.ts +++ b/src/app/showcase/doc/theming/scopedcssdoc.ts @@ -16,7 +16,7 @@ import { Code } from '../../domain/code'; } ` ], - template: `

+ template: `

Theming styles the components globally, in case you require to change the style of a certain component use ::ng-deep.

 diff --git a/src/app/showcase/doc/theming/switchthemesdoc.ts b/src/app/showcase/doc/theming/switchthemesdoc.ts index 0db90b79a43..08d526e36d6 100644 --- a/src/app/showcase/doc/theming/switchthemesdoc.ts +++ b/src/app/showcase/doc/theming/switchthemesdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'switch-themes-doc', - template: `
+ template: `

Themes can be switched on-the-fly so that users of your app can choose their own theme. We have created a video tutorial that goes through the steps.

 diff --git a/src/app/showcase/doc/theming/utilsdoc.ts b/src/app/showcase/doc/theming/utilsdoc.ts index 080035bb219..a148a335119 100644 --- a/src/app/showcase/doc/theming/utilsdoc.ts +++ b/src/app/showcase/doc/theming/utilsdoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'utils-doc', - template: `
+ template: `

A couple of utility classes are provided as a solution to common requirements.

 diff --git a/src/app/showcase/doc/tieredmenu/basicdoc.ts b/src/app/showcase/doc/tieredmenu/basicdoc.ts index c5c488e7a98..8d0f353fe08 100644 --- a/src/app/showcase/doc/tieredmenu/basicdoc.ts +++ b/src/app/showcase/doc/tieredmenu/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

TieredMenu requires a collection of menuitems as its model.

 diff --git a/src/app/showcase/doc/tieredmenu/importdoc.ts b/src/app/showcase/doc/tieredmenu/importdoc.ts index 8e6b34c092f..f31982cba48 100644 --- a/src/app/showcase/doc/tieredmenu/importdoc.ts +++ b/src/app/showcase/doc/tieredmenu/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/tieredmenu/popupdoc.ts b/src/app/showcase/doc/tieredmenu/popupdoc.ts index 0d5e245a63b..b7d2e491577 100644 --- a/src/app/showcase/doc/tieredmenu/popupdoc.ts +++ b/src/app/showcase/doc/tieredmenu/popupdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'popup-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tieredmenu/styledoc.ts b/src/app/showcase/doc/tieredmenu/styledoc.ts index 50a31338cc6..9e0de3e1d78 100644 --- a/src/app/showcase/doc/tieredmenu/styledoc.ts +++ b/src/app/showcase/doc/tieredmenu/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/timeline/alignmentdoc.ts b/src/app/showcase/doc/timeline/alignmentdoc.ts index 6ecb3243abc..76adf1c081c 100644 --- a/src/app/showcase/doc/timeline/alignmentdoc.ts +++ b/src/app/showcase/doc/timeline/alignmentdoc.ts @@ -11,7 +11,7 @@ interface EventItem { @Component({ selector: 'alignment-doc', - template: `
+ template: `

Content location relative the line is defined with the align property.

 diff --git a/src/app/showcase/doc/timeline/basicdoc.ts b/src/app/showcase/doc/timeline/basicdoc.ts index a0b8884e174..82d1a09c5b7 100644 --- a/src/app/showcase/doc/timeline/basicdoc.ts +++ b/src/app/showcase/doc/timeline/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ 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 diff --git a/src/app/showcase/doc/timeline/horizontaldoc.ts b/src/app/showcase/doc/timeline/horizontaldoc.ts index 195578da5ce..21e328f9d19 100644 --- a/src/app/showcase/doc/timeline/horizontaldoc.ts +++ b/src/app/showcase/doc/timeline/horizontaldoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'horizontal-doc', - template: `

+ template: `

TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative.

 diff --git a/src/app/showcase/doc/timeline/importdoc.ts b/src/app/showcase/doc/timeline/importdoc.ts index dc581bd7659..5fe95a8b865 100644 --- a/src/app/showcase/doc/timeline/importdoc.ts +++ b/src/app/showcase/doc/timeline/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/timeline/oppositedoc.ts b/src/app/showcase/doc/timeline/oppositedoc.ts index 041e58e4bd4..1470c805d66 100644 --- a/src/app/showcase/doc/timeline/oppositedoc.ts +++ b/src/app/showcase/doc/timeline/oppositedoc.ts @@ -11,7 +11,7 @@ interface EventItem { @Component({ selector: 'opposite-doc', - template: `
+ template: `

Additional content at the other side of the line can be provided with the opposite property.

 diff --git a/src/app/showcase/doc/timeline/styledoc.ts b/src/app/showcase/doc/timeline/styledoc.ts index 99641337ee5..186cc957482 100644 --- a/src/app/showcase/doc/timeline/styledoc.ts +++ b/src/app/showcase/doc/timeline/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/timeline/templatedoc.ts b/src/app/showcase/doc/timeline/templatedoc.ts index aba153edaa2..ec4eec26256 100644 --- a/src/app/showcase/doc/timeline/templatedoc.ts +++ b/src/app/showcase/doc/timeline/templatedoc.ts @@ -11,7 +11,7 @@ interface EventItem { @Component({ selector: 'template-doc', - template: `
+ template: `

Sample implementation with custom content and styled markers.

 diff --git a/src/app/showcase/doc/toast/animationdoc.ts b/src/app/showcase/doc/toast/animationdoc.ts index 41bde7b2ced..ae6334cb3ca 100644 --- a/src/app/showcase/doc/toast/animationdoc.ts +++ b/src/app/showcase/doc/toast/animationdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'animation-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/toast/basicdoc.ts b/src/app/showcase/doc/toast/basicdoc.ts index 4bdb721f42a..1ebf880bfc3 100644 --- a/src/app/showcase/doc/toast/basicdoc.ts +++ b/src/app/showcase/doc/toast/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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, diff --git a/src/app/showcase/doc/toast/cleardoc.ts b/src/app/showcase/doc/toast/cleardoc.ts index db93b7616a4..3aa2987eb81 100644 --- a/src/app/showcase/doc/toast/cleardoc.ts +++ b/src/app/showcase/doc/toast/cleardoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'clear-doc', - template: `

+ template: `

Clicking the close icon on the toast, removes it manually. Same can also be achieved programmatically using the clear function of the messageService. Calling it without any arguments, removes all displayed messages whereas diff --git a/src/app/showcase/doc/toast/importdoc.ts b/src/app/showcase/doc/toast/importdoc.ts index e12dbe3ed75..ca5c8aae619 100644 --- a/src/app/showcase/doc/toast/importdoc.ts +++ b/src/app/showcase/doc/toast/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/toast/lifedoc.ts b/src/app/showcase/doc/toast/lifedoc.ts index 49ca6e22a97..86299b7b154 100644 --- a/src/app/showcase/doc/toast/lifedoc.ts +++ b/src/app/showcase/doc/toast/lifedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'life-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/toast/multipledoc.ts b/src/app/showcase/doc/toast/multipledoc.ts index 96e89cdc0f0..6e15f9c2618 100644 --- a/src/app/showcase/doc/toast/multipledoc.ts +++ b/src/app/showcase/doc/toast/multipledoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'toast-multiple-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/toast/positiondoc.ts b/src/app/showcase/doc/toast/positiondoc.ts index 1c4840f4fe4..ee995f55ad0 100644 --- a/src/app/showcase/doc/toast/positiondoc.ts +++ b/src/app/showcase/doc/toast/positiondoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'position-doc', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/toast/responsivedoc.ts b/src/app/showcase/doc/toast/responsivedoc.ts index 0b2fc924c13..e46506261f3 100644 --- a/src/app/showcase/doc/toast/responsivedoc.ts +++ b/src/app/showcase/doc/toast/responsivedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'responsive-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/toast/severitydoc.ts b/src/app/showcase/doc/toast/severitydoc.ts index 00b84410d3d..3f01e82d66d 100644 --- a/src/app/showcase/doc/toast/severitydoc.ts +++ b/src/app/showcase/doc/toast/severitydoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'severity-doc', - template: `

+ template: `

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 diff --git a/src/app/showcase/doc/toast/stickydoc.ts b/src/app/showcase/doc/toast/stickydoc.ts index 0b8579f5ffd..61ed93e79b6 100644 --- a/src/app/showcase/doc/toast/stickydoc.ts +++ b/src/app/showcase/doc/toast/stickydoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'sticky-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/toast/styledoc.ts b/src/app/showcase/doc/toast/styledoc.ts index 81a3130362c..ca30bf9b56a 100644 --- a/src/app/showcase/doc/toast/styledoc.ts +++ b/src/app/showcase/doc/toast/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/toast/targetdoc.ts b/src/app/showcase/doc/toast/targetdoc.ts index e3d15d4d48e..71d226157bf 100644 --- a/src/app/showcase/doc/toast/targetdoc.ts +++ b/src/app/showcase/doc/toast/targetdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'target-doc', - template: `
+ template: `

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.

 diff --git a/src/app/showcase/doc/toast/templatedoc.ts b/src/app/showcase/doc/toast/templatedoc.ts index 103027c5ba2..82d216ad3e0 100644 --- a/src/app/showcase/doc/toast/templatedoc.ts +++ b/src/app/showcase/doc/toast/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

Templating allows customizing the content where the message instance is available as the implicit variable.

 diff --git a/src/app/showcase/doc/togglebutton/basicdoc.ts b/src/app/showcase/doc/togglebutton/basicdoc.ts index 3a5dcdced78..f737e5e6f50 100644 --- a/src/app/showcase/doc/togglebutton/basicdoc.ts +++ b/src/app/showcase/doc/togglebutton/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/togglebutton/customizeddoc.ts b/src/app/showcase/doc/togglebutton/customizeddoc.ts index c96306f9074..49bfa2165a6 100644 --- a/src/app/showcase/doc/togglebutton/customizeddoc.ts +++ b/src/app/showcase/doc/togglebutton/customizeddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'customized-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/togglebutton/importdoc.ts b/src/app/showcase/doc/togglebutton/importdoc.ts index 7499a05489d..7b2fe7dcb05 100644 --- a/src/app/showcase/doc/togglebutton/importdoc.ts +++ b/src/app/showcase/doc/togglebutton/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts b/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts index 06a7a07a9ff..ff582429634 100644 --- a/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts +++ b/src/app/showcase/doc/togglebutton/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

ToggleButton can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/togglebutton/styledoc.ts b/src/app/showcase/doc/togglebutton/styledoc.ts index 45ed1151ac5..3383399c5da 100644 --- a/src/app/showcase/doc/togglebutton/styledoc.ts +++ b/src/app/showcase/doc/togglebutton/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/toolbar/basicdoc.ts b/src/app/showcase/doc/toolbar/basicdoc.ts index a3decd60b7a..02ef2f8d597 100644 --- a/src/app/showcase/doc/toolbar/basicdoc.ts +++ b/src/app/showcase/doc/toolbar/basicdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Toolbar provides start, center and end templates to place content at these sections.

 diff --git a/src/app/showcase/doc/toolbar/importdoc.ts b/src/app/showcase/doc/toolbar/importdoc.ts index 29d54a7500e..249e1da3ac5 100644 --- a/src/app/showcase/doc/toolbar/importdoc.ts +++ b/src/app/showcase/doc/toolbar/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/toolbar/styledoc.ts b/src/app/showcase/doc/toolbar/styledoc.ts index 9322819f8d2..fb4610c520f 100644 --- a/src/app/showcase/doc/toolbar/styledoc.ts +++ b/src/app/showcase/doc/toolbar/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/tooltip/autohidedoc.ts b/src/app/showcase/doc/tooltip/autohidedoc.ts index 39d38d5e909..93341ba2466 100644 --- a/src/app/showcase/doc/tooltip/autohidedoc.ts +++ b/src/app/showcase/doc/tooltip/autohidedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'auto-hide-doc', - template: `
+ template: `

Tooltip is hidden when mouse leaves the target element, in cases where tooltip needs to be interacted with, set autoHide to false to change the default behavior.

 diff --git a/src/app/showcase/doc/tooltip/basicdoc.ts b/src/app/showcase/doc/tooltip/basicdoc.ts index a40108963e6..0e305ccb6cd 100644 --- a/src/app/showcase/doc/tooltip/basicdoc.ts +++ b/src/app/showcase/doc/tooltip/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

Tooltip is applied to an element with pTooltip directive where the value of the directive defines the text to display.

 diff --git a/src/app/showcase/doc/tooltip/delaydoc.ts b/src/app/showcase/doc/tooltip/delaydoc.ts index 2dc10d3ef21..ab7842275fd 100644 --- a/src/app/showcase/doc/tooltip/delaydoc.ts +++ b/src/app/showcase/doc/tooltip/delaydoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'delay-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tooltip/eventdoc.ts b/src/app/showcase/doc/tooltip/eventdoc.ts index 24b3ef4070d..2ba5167a190 100644 --- a/src/app/showcase/doc/tooltip/eventdoc.ts +++ b/src/app/showcase/doc/tooltip/eventdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'event-doc', - template: `
+ template: `

Tooltip gets displayed on hover event of its target by default, other option is the focus event to display and blur to hide.

 diff --git a/src/app/showcase/doc/tooltip/importdoc.ts b/src/app/showcase/doc/tooltip/importdoc.ts index 343c54ec913..2c122491e67 100644 --- a/src/app/showcase/doc/tooltip/importdoc.ts +++ b/src/app/showcase/doc/tooltip/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/tooltip/optionsdoc.ts b/src/app/showcase/doc/tooltip/optionsdoc.ts index 29b06d05efe..f63027efb9d 100644 --- a/src/app/showcase/doc/tooltip/optionsdoc.ts +++ b/src/app/showcase/doc/tooltip/optionsdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'options-doc', - template: `
+ template: `

Tooltip is also configurable by using tooltipOptions property.

 diff --git a/src/app/showcase/doc/tooltip/positiondoc.ts b/src/app/showcase/doc/tooltip/positiondoc.ts index 107130d49a2..f92fcdb2283 100644 --- a/src/app/showcase/doc/tooltip/positiondoc.ts +++ b/src/app/showcase/doc/tooltip/positiondoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'position-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/tooltip/styledoc.ts b/src/app/showcase/doc/tooltip/styledoc.ts index 3e0c2468fed..c869502c55d 100644 --- a/src/app/showcase/doc/tooltip/styledoc.ts +++ b/src/app/showcase/doc/tooltip/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/tooltip/templatedoc.ts b/src/app/showcase/doc/tooltip/templatedoc.ts index 763d4706d95..e55c9ce76be 100644 --- a/src/app/showcase/doc/tooltip/templatedoc.ts +++ b/src/app/showcase/doc/tooltip/templatedoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'options-doc', - template: `
+ template: `

Tooltip can use either a string or a TemplateRef.

 diff --git a/src/app/showcase/doc/tree/basicdoc.ts b/src/app/showcase/doc/tree/basicdoc.ts index b16bf58c072..d365d88306c 100644 --- a/src/app/showcase/doc/tree/basicdoc.ts +++ b/src/app/showcase/doc/tree/basicdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tree/checkboxdoc.ts b/src/app/showcase/doc/tree/checkboxdoc.ts index e35ca287c20..a4fb2de11fd 100644 --- a/src/app/showcase/doc/tree/checkboxdoc.ts +++ b/src/app/showcase/doc/tree/checkboxdoc.ts @@ -6,7 +6,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'checkbox-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tree/contextmenudoc.ts b/src/app/showcase/doc/tree/contextmenudoc.ts index 4bac1513b8b..32880927ab3 100644 --- a/src/app/showcase/doc/tree/contextmenudoc.ts +++ b/src/app/showcase/doc/tree/contextmenudoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'context-menu-doc', - template: `
+ template: `

Tree requires a collection of TreeNode instances as a value.

 diff --git a/src/app/showcase/doc/tree/controlleddoc.ts b/src/app/showcase/doc/tree/controlleddoc.ts index a0ee5580f4d..e3089f4ba73 100644 --- a/src/app/showcase/doc/tree/controlleddoc.ts +++ b/src/app/showcase/doc/tree/controlleddoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'controlled-doc', - template: `
+ template: `

Tree requires a collection of TreeNode instances as a value.

 diff --git a/src/app/showcase/doc/tree/dragdropdoc.ts b/src/app/showcase/doc/tree/dragdropdoc.ts index e37e89eafdf..a0d903d4113 100644 --- a/src/app/showcase/doc/tree/dragdropdoc.ts +++ b/src/app/showcase/doc/tree/dragdropdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'drag-drop-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tree/eventdoc.ts b/src/app/showcase/doc/tree/eventdoc.ts index dcf9d40723b..2df19a0f6ca 100644 --- a/src/app/showcase/doc/tree/eventdoc.ts +++ b/src/app/showcase/doc/tree/eventdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'event-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tree/filterdoc.ts b/src/app/showcase/doc/tree/filterdoc.ts index 7ed76d9477a..d0de790364d 100644 --- a/src/app/showcase/doc/tree/filterdoc.ts +++ b/src/app/showcase/doc/tree/filterdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'filter-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/tree/importdoc.ts b/src/app/showcase/doc/tree/importdoc.ts index a818a0b3e0d..c1ba7ba1105 100644 --- a/src/app/showcase/doc/tree/importdoc.ts +++ b/src/app/showcase/doc/tree/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/tree/lazydoc.ts b/src/app/showcase/doc/tree/lazydoc.ts index 80e1a4d5e02..bb8a9afd6ef 100644 --- a/src/app/showcase/doc/tree/lazydoc.ts +++ b/src/app/showcase/doc/tree/lazydoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'lazy-demo', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tree/multipledoc.ts b/src/app/showcase/doc/tree/multipledoc.ts index 41d49f19179..14ee04b6ff8 100644 --- a/src/app/showcase/doc/tree/multipledoc.ts +++ b/src/app/showcase/doc/tree/multipledoc.ts @@ -6,7 +6,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'multiple-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/tree/singledoc.ts b/src/app/showcase/doc/tree/singledoc.ts index 80a691768da..97aac77eabb 100644 --- a/src/app/showcase/doc/tree/singledoc.ts +++ b/src/app/showcase/doc/tree/singledoc.ts @@ -6,7 +6,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'single-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/tree/styledoc.ts b/src/app/showcase/doc/tree/styledoc.ts index f59157a42b9..d24bae6ac1e 100644 --- a/src/app/showcase/doc/tree/styledoc.ts +++ b/src/app/showcase/doc/tree/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/tree/templatedoc.ts b/src/app/showcase/doc/tree/templatedoc.ts index e5d1487f9cf..f1ebe74953c 100644 --- a/src/app/showcase/doc/tree/templatedoc.ts +++ b/src/app/showcase/doc/tree/templatedoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'template-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/treeselect/basicdoc.ts b/src/app/showcase/doc/treeselect/basicdoc.ts index febc50483b7..4a0f9753ba7 100644 --- a/src/app/showcase/doc/treeselect/basicdoc.ts +++ b/src/app/showcase/doc/treeselect/basicdoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'basic-doc', - template: `
+ template: `

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.

diff --git a/src/app/showcase/doc/treeselect/checkboxdoc.ts b/src/app/showcase/doc/treeselect/checkboxdoc.ts index 0502a4c1f44..c20e702aea1 100644 --- a/src/app/showcase/doc/treeselect/checkboxdoc.ts +++ b/src/app/showcase/doc/treeselect/checkboxdoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'checkbox-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/treeselect/disableddoc.ts b/src/app/showcase/doc/treeselect/disableddoc.ts index 8286c3a9731..f2f1c1c96a4 100644 --- a/src/app/showcase/doc/treeselect/disableddoc.ts +++ b/src/app/showcase/doc/treeselect/disableddoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/treeselect/filterdoc.ts b/src/app/showcase/doc/treeselect/filterdoc.ts index 5757924e621..3896126217a 100644 --- a/src/app/showcase/doc/treeselect/filterdoc.ts +++ b/src/app/showcase/doc/treeselect/filterdoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'filter-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/treeselect/floatlabeldoc.ts b/src/app/showcase/doc/treeselect/floatlabeldoc.ts index 28283f7f369..5fb53238aa1 100644 --- a/src/app/showcase/doc/treeselect/floatlabeldoc.ts +++ b/src/app/showcase/doc/treeselect/floatlabeldoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'floatlabel-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/treeselect/importdoc.ts b/src/app/showcase/doc/treeselect/importdoc.ts index 1a2ad5fcaf5..ba937f5ad59 100644 --- a/src/app/showcase/doc/treeselect/importdoc.ts +++ b/src/app/showcase/doc/treeselect/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/treeselect/invaliddoc.ts b/src/app/showcase/doc/treeselect/invaliddoc.ts index 3f4d3e1d612..398ca0e66df 100644 --- a/src/app/showcase/doc/treeselect/invaliddoc.ts +++ b/src/app/showcase/doc/treeselect/invaliddoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'invalid-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/treeselect/multipledoc.ts b/src/app/showcase/doc/treeselect/multipledoc.ts index 9716786f49a..242f5bf77af 100644 --- a/src/app/showcase/doc/treeselect/multipledoc.ts +++ b/src/app/showcase/doc/treeselect/multipledoc.ts @@ -4,7 +4,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'multiple-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/treeselect/reactiveformsdoc.ts b/src/app/showcase/doc/treeselect/reactiveformsdoc.ts index 85ef68831c0..a814ee74f51 100644 --- a/src/app/showcase/doc/treeselect/reactiveformsdoc.ts +++ b/src/app/showcase/doc/treeselect/reactiveformsdoc.ts @@ -5,7 +5,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'reactive-forms-doc', - template: `

+ template: `

TreeSelect can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/treeselect/styledoc.ts b/src/app/showcase/doc/treeselect/styledoc.ts index e1b4c5f4b33..386fbba77f9 100644 --- a/src/app/showcase/doc/treeselect/styledoc.ts +++ b/src/app/showcase/doc/treeselect/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/treetable/basicdoc.ts b/src/app/showcase/doc/treetable/basicdoc.ts index 86cd0032804..8cf86b0f606 100644 --- a/src/app/showcase/doc/treetable/basicdoc.ts +++ b/src/app/showcase/doc/treetable/basicdoc.ts @@ -6,7 +6,7 @@ import { NodeService } from '../../service/nodeservice'; @Component({ selector: 'basic-doc', - template: `
+ template: `

TreeTable requires a collection of TreeNode instances as a value components as children for the representation.

 diff --git a/src/app/showcase/doc/treetable/columngroupdoc.ts b/src/app/showcase/doc/treetable/columngroupdoc.ts index 964ddcc8a8e..a8a079f3b46 100644 --- a/src/app/showcase/doc/treetable/columngroupdoc.ts +++ b/src/app/showcase/doc/treetable/columngroupdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'column-group-doc', - template: `
+ template: `
diff --git a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts index 6a3d31770a4..7b8d00ec6a0 100644 --- a/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts +++ b/src/app/showcase/doc/treetable/columnresizeexpanddoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'resize-expand-doc', - template: `
+ template: `

Setting columnResizeMode as expand changes the table width as well.

 diff --git a/src/app/showcase/doc/treetable/columnresizefitdoc.ts b/src/app/showcase/doc/treetable/columnresizefitdoc.ts index 5d496e8e7b1..013ec0a6995 100644 --- a/src/app/showcase/doc/treetable/columnresizefitdoc.ts +++ b/src/app/showcase/doc/treetable/columnresizefitdoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'resize-fit-doc', - template: `
+ template: `

Columns can be resized with drag and drop when resizableColumns is enabled. Default resize mode is fit that does not change the overall table width.

 diff --git a/src/app/showcase/doc/treetable/columntoggledoc.ts b/src/app/showcase/doc/treetable/columntoggledoc.ts index 9a7c41b6235..eb193a8f408 100644 --- a/src/app/showcase/doc/treetable/columntoggledoc.ts +++ b/src/app/showcase/doc/treetable/columntoggledoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'column-toggle-doc', - template: `
+ 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.

 diff --git a/src/app/showcase/doc/treetable/conditionalstyledoc.ts b/src/app/showcase/doc/treetable/conditionalstyledoc.ts index 5681702d43f..eff89f1fa4e 100644 --- a/src/app/showcase/doc/treetable/conditionalstyledoc.ts +++ b/src/app/showcase/doc/treetable/conditionalstyledoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'conditional-style-doc', - template: `
+ template: `

Particular rows and cells can be styled based on conditions. The ngClass receives a row data as a parameter to return a style class for a row whereas cells are customized using the body template.

 diff --git a/src/app/showcase/doc/treetable/contextmenudoc.ts b/src/app/showcase/doc/treetable/contextmenudoc.ts index 1cf917bb2ee..5b4781833b2 100644 --- a/src/app/showcase/doc/treetable/contextmenudoc.ts +++ b/src/app/showcase/doc/treetable/contextmenudoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'context-menu-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts index 0d86c01e4fd..68d0dc5a132 100644 --- a/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts +++ b/src/app/showcase/doc/treetable/dynamiccolumnsdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'dynamic-columns-doc', - template: `
+ template: `

Columns can be created programmatically.

 diff --git a/src/app/showcase/doc/treetable/editdoc.ts b/src/app/showcase/doc/treetable/editdoc.ts index 015c2775936..9aaf694e1aa 100644 --- a/src/app/showcase/doc/treetable/editdoc.ts +++ b/src/app/showcase/doc/treetable/editdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'edit-doc', - template: `
+ template: `

Incell editing is enabled by defining input elements with treeTableCellEditor.

 diff --git a/src/app/showcase/doc/treetable/filterdoc.ts b/src/app/showcase/doc/treetable/filterdoc.ts index 74c0917fa67..89fcbd47a6e 100644 --- a/src/app/showcase/doc/treetable/filterdoc.ts +++ b/src/app/showcase/doc/treetable/filterdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'filter-doc', - template: `
+ 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 diff --git a/src/app/showcase/doc/treetable/importdoc.ts b/src/app/showcase/doc/treetable/importdoc.ts index 90740bd9b9b..57734b6bf5d 100644 --- a/src/app/showcase/doc/treetable/importdoc.ts +++ b/src/app/showcase/doc/treetable/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/treetable/lazyloaddoc.ts b/src/app/showcase/doc/treetable/lazyloaddoc.ts index c6bfc743925..c2b0fa13da9 100644 --- a/src/app/showcase/doc/treetable/lazyloaddoc.ts +++ b/src/app/showcase/doc/treetable/lazyloaddoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'lazy-load-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts index 957fca9ca0c..13b4a21c354 100644 --- a/src/app/showcase/doc/treetable/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/treetable/paginatorbasicdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'paginator-basic-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts index 5e22307f116..79f7466dde3 100644 --- a/src/app/showcase/doc/treetable/paginatorlocaledoc.ts +++ b/src/app/showcase/doc/treetable/paginatorlocaledoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'paginator-locale-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts index 4caf7d05219..dd5b54aa850 100644 --- a/src/app/showcase/doc/treetable/paginatortemplatedoc.ts +++ b/src/app/showcase/doc/treetable/paginatortemplatedoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'paginator-template-doc', - template: `
+ template: `

Paginator UI is customized using the paginatorleft and paginatorright property. Each element can also be customized further with your own UI to replace the default one, refer to the diff --git a/src/app/showcase/doc/treetable/reorderdoc.ts b/src/app/showcase/doc/treetable/reorderdoc.ts index e648c090534..d11e78438c3 100644 --- a/src/app/showcase/doc/treetable/reorderdoc.ts +++ b/src/app/showcase/doc/treetable/reorderdoc.ts @@ -10,7 +10,7 @@ interface Column { @Component({ selector: 'reorder-doc', - template: `

+ template: `

Order of the columns can be changed using drag and drop when reorderableColumns is present.

 diff --git a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts index a75923a1d1a..f13a6ae335f 100644 --- a/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts +++ b/src/app/showcase/doc/treetable/scrollfrozencolumnsdoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'scroll-frozen-columns-doc', - template: `
+ template: `

A column can be fixed during horizontal scrolling by enabling the frozenColumns property.

 diff --git a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts index 3719ce4be15..443c5b37154 100644 --- a/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts +++ b/src/app/showcase/doc/treetable/scrollhorizontaldoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'scroll-horizontal-doc', - template: `
+ template: `

Horizontal scrolling is enabled when the total width of columns exceeds table width.

 diff --git a/src/app/showcase/doc/treetable/scrollverticaldoc.ts b/src/app/showcase/doc/treetable/scrollverticaldoc.ts index 74643b17898..ccd4dd0d1e6 100644 --- a/src/app/showcase/doc/treetable/scrollverticaldoc.ts +++ b/src/app/showcase/doc/treetable/scrollverticaldoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'scroll-vertical-doc', - template: `
+ template: `

Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.

 diff --git a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts index 4f15c27ae21..33270be74d0 100644 --- a/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts +++ b/src/app/showcase/doc/treetable/selectioncheckboxdoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'selection-checkbox-doc', - template: `
+ template: `

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

In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has checked and partialChecked properties to represent the checked state of a node.

diff --git a/src/app/showcase/doc/treetable/selectioneventscdoc.ts b/src/app/showcase/doc/treetable/selectioneventscdoc.ts index 9d7e230ffa2..a6dfa9df59f 100644 --- a/src/app/showcase/doc/treetable/selectioneventscdoc.ts +++ b/src/app/showcase/doc/treetable/selectioneventscdoc.ts @@ -15,7 +15,7 @@ interface NodeEvent { @Component({ selector: 'selection-events-doc', - template: `
+ template: `

TreeTable provides onNodeSelect and onNodeUnselect events to listen selection events.

 diff --git a/src/app/showcase/doc/treetable/selectionmultipledoc.ts b/src/app/showcase/doc/treetable/selectionmultipledoc.ts index 6d86f3a156c..f36f6e30711 100644 --- a/src/app/showcase/doc/treetable/selectionmultipledoc.ts +++ b/src/app/showcase/doc/treetable/selectionmultipledoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'selection-multiple-doc', - template: `
+ template: `

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 diff --git a/src/app/showcase/doc/treetable/selectionsingledoc.ts b/src/app/showcase/doc/treetable/selectionsingledoc.ts index fd6ec3613f2..6e72edce46e 100644 --- a/src/app/showcase/doc/treetable/selectionsingledoc.ts +++ b/src/app/showcase/doc/treetable/selectionsingledoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'selection-single-doc', - template: `

+ template: `

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

diff --git a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts b/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts index 24c7d357c62..c3041ff8816 100644 --- a/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts +++ b/src/app/showcase/doc/treetable/sortmultiplecolumndoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'sort-multiple-column-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts index 95926176ea8..66dfca0a976 100644 --- a/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts +++ b/src/app/showcase/doc/treetable/sortsinglecolumndoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'sort-single-column-doc', - template: `
+ template: `

Sorting on a column is enabled by adding the ttSortableColumn property.

 diff --git a/src/app/showcase/doc/treetable/styledoc.ts b/src/app/showcase/doc/treetable/styledoc.ts index 4f3cdcb6d80..ee1800258f3 100644 --- a/src/app/showcase/doc/treetable/styledoc.ts +++ b/src/app/showcase/doc/treetable/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/treetable/templatedoc.ts b/src/app/showcase/doc/treetable/templatedoc.ts index f2c87c0654a..8408bd38428 100644 --- a/src/app/showcase/doc/treetable/templatedoc.ts +++ b/src/app/showcase/doc/treetable/templatedoc.ts @@ -11,7 +11,7 @@ interface Column { @Component({ selector: 'template-doc', - template: `
+ template: `

Custom content at caption, header, body and summary sections are supported via templating.

 diff --git a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts index 2d43a4267c8..e6e63baeca0 100644 --- a/src/app/showcase/doc/tristatecheckbox/basicdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/basicdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'basic-doc', - template: `
+ template: `

A model can be bound using the standard ngModel directive.

 diff --git a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts index 6f15c1d55c6..34489bad942 100644 --- a/src/app/showcase/doc/tristatecheckbox/disableddoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/disableddoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'disabled-doc', - template: `
+ template: `

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

 diff --git a/src/app/showcase/doc/tristatecheckbox/importdoc.ts b/src/app/showcase/doc/tristatecheckbox/importdoc.ts index 2d83df31c08..4db48b46b6a 100644 --- a/src/app/showcase/doc/tristatecheckbox/importdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `
+ template: `
` diff --git a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts index 0c7bd3a4f8d..d204dd12408 100644 --- a/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/reactiveformsdoc.ts @@ -4,7 +4,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'reactive-forms-doc', - template: `
+ template: `

TriStateCheckbox can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.

 diff --git a/src/app/showcase/doc/tristatecheckbox/styledoc.ts b/src/app/showcase/doc/tristatecheckbox/styledoc.ts index 4b78d905f9a..5ba6b0d23de 100644 --- a/src/app/showcase/doc/tristatecheckbox/styledoc.ts +++ b/src/app/showcase/doc/tristatecheckbox/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/virtualscroller/basicdoc.ts b/src/app/showcase/doc/virtualscroller/basicdoc.ts index 71106686530..2eea81bfe5b 100644 --- a/src/app/showcase/doc/virtualscroller/basicdoc.ts +++ b/src/app/showcase/doc/virtualscroller/basicdoc.ts @@ -7,7 +7,7 @@ interface Item { } @Component({ selector: 'basic-doc', - template: `
+ template: `

VirtualScroller requires value as the data to display, itemSize for the dimensions of an item and pTemplate to define the content per item. Size of the viewport is configured using scrollWidth, diff --git a/src/app/showcase/doc/virtualscroller/importdoc.ts b/src/app/showcase/doc/virtualscroller/importdoc.ts index 4c4a3735330..1736b6ea9c3 100644 --- a/src/app/showcase/doc/virtualscroller/importdoc.ts +++ b/src/app/showcase/doc/virtualscroller/importdoc.ts @@ -3,7 +3,7 @@ import { Code } from '../../domain/code'; @Component({ selector: 'import-doc', - template: `

+ template: `
` diff --git a/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts b/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts index f151802f806..46b70e02e32 100644 --- a/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts +++ b/src/app/showcase/doc/virtualscroller/lazyloaddoc.ts @@ -6,7 +6,7 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'lazy-load-doc', - template: `
+ template: `

Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded on demand. To implement lazy loading, enable the lazy property and implement onLazyLoad callback to diff --git a/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts b/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts index 0ee87409468..ac10d124207 100644 --- a/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts +++ b/src/app/showcase/doc/virtualscroller/programmaticscrolldoc.ts @@ -8,7 +8,7 @@ interface Item { } @Component({ selector: 'programmatic-scroll-doc', - template: `

+ template: `

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

 diff --git a/src/app/showcase/doc/virtualscroller/styledoc.ts b/src/app/showcase/doc/virtualscroller/styledoc.ts index 001bbe79265..4b79aa6fd27 100644 --- a/src/app/showcase/doc/virtualscroller/styledoc.ts +++ b/src/app/showcase/doc/virtualscroller/styledoc.ts @@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core'; @Component({ selector: 'style-doc', - template: `
+ template: `

Following is the list of structural style classes, for theming classes visit theming page.

 diff --git a/src/app/showcase/doc/virtualscroller/templatedoc.ts b/src/app/showcase/doc/virtualscroller/templatedoc.ts index 17e1f9a95fa..ce4b636a00f 100644 --- a/src/app/showcase/doc/virtualscroller/templatedoc.ts +++ b/src/app/showcase/doc/virtualscroller/templatedoc.ts @@ -8,7 +8,7 @@ interface Item { @Component({ selector: 'template-doc', - template: `
+ template: `

Header and Footer are the two sections that are capable of displaying custom content by using header and footer templates.