From 3f40401ca0c661c68fb620274790cccf5ed13d43 Mon Sep 17 00:00:00 2001 From: Lubomir Balogh <24496198+lubobalogh@users.noreply.github.com> Date: Wed, 13 Sep 2023 14:17:08 +0200 Subject: [PATCH 01/65] primefaces/primeng#10482 Fix removing diacritics --- src/app/components/utils/objectutils.ts | 25 ++----------------------- 1 file changed, 2 insertions(+), 23 deletions(-) diff --git a/src/app/components/utils/objectutils.ts b/src/app/components/utils/objectutils.ts index ae5dbf6bf09..cd18dd1071f 100644 --- a/src/app/components/utils/objectutils.ts +++ b/src/app/components/utils/objectutils.ts @@ -134,29 +134,8 @@ export class ObjectUtils { } public static removeAccents(str) { - if (str && str.search(/[\xC0-\xFF]/g) > -1) { - str = str - .replace(/[\xC0-\xC5]/g, 'A') - .replace(/[\xC6]/g, 'AE') - .replace(/[\xC7]/g, 'C') - .replace(/[\xC8-\xCB]/g, 'E') - .replace(/[\xCC-\xCF]/g, 'I') - .replace(/[\xD0]/g, 'D') - .replace(/[\xD1]/g, 'N') - .replace(/[\xD2-\xD6\xD8]/g, 'O') - .replace(/[\xD9-\xDC]/g, 'U') - .replace(/[\xDD]/g, 'Y') - .replace(/[\xDE]/g, 'P') - .replace(/[\xE0-\xE5]/g, 'a') - .replace(/[\xE6]/g, 'ae') - .replace(/[\xE7]/g, 'c') - .replace(/[\xE8-\xEB]/g, 'e') - .replace(/[\xEC-\xEF]/g, 'i') - .replace(/[\xF1]/g, 'n') - .replace(/[\xF2-\xF6\xF8]/g, 'o') - .replace(/[\xF9-\xFC]/g, 'u') - .replace(/[\xFE]/g, 'p') - .replace(/[\xFD\xFF]/g, 'y'); + if (str) { + str = str.normalize('NFKD').replace(/\p{Diacritic}/gu, ''); } return str; From 29293685cefeb559ae9a4a34545909824455918d Mon Sep 17 00:00:00 2001 From: Guillaume de Jabrun Date: Wed, 20 Dec 2023 15:00:09 +0100 Subject: [PATCH 02/65] columnFilter: hide on mousedown instead of click When you do a mouse selection that ends outside the filter frame, with "click"event it close the column filter. This change the event listener to mousedown to avoid this issue. --- src/app/components/table/table.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index e99ccf2ea25..9638f8e5c86 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -5484,7 +5484,7 @@ export class ColumnFilter implements AfterContentInit { if (!this.documentClickListener) { const documentTarget: any = this.el ? this.el.nativeElement.ownerDocument : 'document'; - this.documentClickListener = this.renderer.listen(documentTarget, 'click', (event) => { + this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', (event) => { if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event)) { this.hide(); } From 4d23352ba1c8e47326fba7b7d4b5ce7b29851bda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 17:50:20 +0300 Subject: [PATCH 03/65] Fixed #14397 - Add missing template & update documentation --- .../table/columnfilter.interface.ts | 36 +++ src/app/components/table/table.ts | 140 +++++++-- src/app/showcase/doc/apidoc/index.json | 272 ++++++++++++++++++ 3 files changed, 421 insertions(+), 27 deletions(-) create mode 100644 src/app/components/table/columnfilter.interface.ts diff --git a/src/app/components/table/columnfilter.interface.ts b/src/app/components/table/columnfilter.interface.ts new file mode 100644 index 00000000000..e752589f0a6 --- /dev/null +++ b/src/app/components/table/columnfilter.interface.ts @@ -0,0 +1,36 @@ +import { TemplateRef } from '@angular/core'; + +/** + * Defines valid templates in Column Filter. + * @group Templates + */ +export interface TableColumnFilterTemplates { + /** + * Custom filter template. + */ + filterTemplate(): TemplateRef; + /** + * Custom header template. + */ + headerTemplate(): TemplateRef; + /** + * Custom footer template. + */ + footerTemplate(): TemplateRef; + /** + * Custom filter icon template. + */ + filterIconTemplate(): TemplateRef; + /** + * Custom remove rule icon template. + */ + removeRuleIconTemplate(): TemplateRef; + /** + * Custom add rule icon template. + */ + addRuleIconTemplate(): TemplateRef; + /** + * Custom clear filter icon template. + */ + clearFilterIconTemplate(): TemplateRef; +} diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index e99ccf2ea25..34ebf978bc7 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -4902,7 +4902,10 @@ export class ReorderableRow implements AfterViewInit { this.unbindEvents(); } } - +/** + * Column Filter element of Table. + * @group Components + */ @Component({ selector: 'p-columnFilter', template: ` @@ -4945,8 +4948,8 @@ export class ReorderableRow implements AfterViewInit {
; @@ -5114,6 +5194,8 @@ export class ColumnFilter implements AfterContentInit { addRuleIconTemplate: Nullable>; + clearFilterIconTemplate: Nullable>; + operatorOptions: any[] | undefined; overlayVisible: boolean | undefined; @@ -5249,6 +5331,10 @@ export class ColumnFilter implements AfterContentInit { this.filterIconTemplate = item.template; break; + case 'clearfiltericon': + this.clearFilterIconTemplate = item.template; + break; + case 'removeruleicon': this.removeRuleIconTemplate = item.template; break; diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index e978a77ff78..a5062733aa3 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -8142,6 +8142,14 @@ "readonly": false, "type": "string", "description": "Identifier of the underlying input element." + }, + { + "name": "pressDelay", + "optional": false, + "readonly": false, + "type": "number", + "default": "500", + "description": "Press delay in touch devices as miliseconds." } ] }, @@ -21346,6 +21354,74 @@ } } }, + "columnfilter": { + "interfaces": { + "components": { + "TableColumnFilter": { + "description": "Column Filter.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "field", + "optional": false, + "readonly": false, + "type": "string", + "description": "Property represented by the column." + } + ] + } + } + }, + "templates": { + "description": "Defines the templates used by the component.", + "values": [ + { + "parent": "columnfilter", + "name": "filterTemplate", + "parameters": [], + "description": "Custom filter template." + }, + { + "parent": "columnfilter", + "name": "headerTemplate", + "parameters": [], + "description": "Custom header template." + }, + { + "parent": "columnfilter", + "name": "footerTemplate", + "parameters": [], + "description": "Custom footer template." + }, + { + "parent": "columnfilter", + "name": "filterIconTemplate", + "parameters": [], + "description": "Custom filter icon template." + }, + { + "parent": "columnfilter", + "name": "removeRuleIconTemplate", + "parameters": [], + "description": "Custom remove rule icon template." + }, + { + "parent": "columnfilter", + "name": "addRuleIconTemplate", + "parameters": [], + "description": "Custom add rule icon template." + }, + { + "parent": "columnfilter", + "name": "clearFilterIconTemplate", + "parameters": [], + "description": "Custom clear filter icon template." + } + ] + } + } + }, "table": { "components": { "Table": { @@ -22286,6 +22362,202 @@ } ] } + }, + "ColumnFilter": { + "description": "Column Filter element of Table.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "field", + "optional": false, + "readonly": false, + "type": "string", + "description": "Property represented by the column." + }, + { + "name": "type", + "optional": false, + "readonly": false, + "type": "string", + "default": "text", + "description": "Type of the input." + }, + { + "name": "display", + "optional": false, + "readonly": false, + "type": "string", + "default": "row", + "description": "Filter display." + }, + { + "name": "showMenu", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Decides whether to display filter menu popup." + }, + { + "name": "matchMode", + "optional": false, + "readonly": false, + "type": "string", + "description": "Filter match mode." + }, + { + "name": "operator", + "optional": false, + "readonly": false, + "type": "string", + "default": "FilterOperator.AND", + "description": "Filter operator." + }, + { + "name": "showOperator", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Decides whether to display filter operator." + }, + { + "name": "showClearButton", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Decides whether to display clear filter button." + }, + { + "name": "showApplyButton", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Decides whether to display apply filter button." + }, + { + "name": "showMatchModes", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Decides whether to display filter match modes." + }, + { + "name": "showAddButton", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Decides whether to display add filter button." + }, + { + "name": "hideOnClear", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "false", + "description": "Decides whether to close popup on clear button click." + }, + { + "name": "placeholder", + "optional": false, + "readonly": false, + "type": "string", + "description": "Filter placeholder." + }, + { + "name": "matchModeOptions", + "optional": false, + "readonly": false, + "type": "SelectItem[]", + "description": "Filter match mode options." + }, + { + "name": "maxConstraints", + "optional": false, + "readonly": false, + "type": "number", + "default": "2", + "description": "Defines maximum amount of constraints." + }, + { + "name": "minFractionDigits", + "optional": false, + "readonly": false, + "type": "number", + "description": "Defines minimum fraction of digits." + }, + { + "name": "maxFractionDigits", + "optional": false, + "readonly": false, + "type": "number", + "description": "Defines maximum fraction of digits." + }, + { + "name": "prefix", + "optional": false, + "readonly": false, + "type": "string", + "description": "Defines prefix of the filter." + }, + { + "name": "suffix", + "optional": false, + "readonly": false, + "type": "string", + "description": "Defines suffix of the filter." + }, + { + "name": "locale", + "optional": false, + "readonly": false, + "type": "string", + "description": "Defines filter locale." + }, + { + "name": "localeMatcher", + "optional": false, + "readonly": false, + "type": "string", + "description": "Defines filter locale matcher." + }, + { + "name": "currency", + "optional": false, + "readonly": false, + "type": "string", + "description": "Enables currency input." + }, + { + "name": "currencyDisplay", + "optional": false, + "readonly": false, + "type": "string", + "description": "Defines the display of the currency input." + }, + { + "name": "useGrouping", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Defines if filter grouping will be enabled." + }, + { + "name": "showButtons", + "optional": false, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Defines the visibility of buttons." + } + ] + } } }, "interfaces": { From 182f89a75755abfae26c4b214719796588c2e3bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 17:59:34 +0300 Subject: [PATCH 04/65] Fix scroll bug --- src/app/showcase/layout/doc/app.docsection-nav.component.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/showcase/layout/doc/app.docsection-nav.component.ts b/src/app/showcase/layout/doc/app.docsection-nav.component.ts index f2d1d01647a..e4eee1064a2 100644 --- a/src/app/showcase/layout/doc/app.docsection-nav.component.ts +++ b/src/app/showcase/layout/doc/app.docsection-nav.component.ts @@ -66,7 +66,7 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy { hasHash && setTimeout(() => { this.scrollToLabelById(id); - }, 25); + }, 250); this.zone.runOutsideAngular(() => { this.scrollListener = this.renderer.listen(this.document, 'scroll', (event: any) => { @@ -148,7 +148,9 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy { if (typeof document !== undefined) { const label = document.getElementById(id); this.location.go(this.location.path().split('#')[0] + '#' + id); - label && label.parentElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); + setTimeout(() => { + label && label.parentElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); + }, 1); } } From ed8c17215f99a1f94fe070eb486f8b3da961afcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 17:59:46 +0300 Subject: [PATCH 05/65] Add column filter interface --- src/app/components/table/public_api.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/table/public_api.ts b/src/app/components/table/public_api.ts index 8e7d7b3551d..7c5e2a070d5 100644 --- a/src/app/components/table/public_api.ts +++ b/src/app/components/table/public_api.ts @@ -1,2 +1,3 @@ export * from './table'; export * from './table.interface'; +export * from './columnfilter.interface'; From dfd15137f02d5a44927fd69111937939a132786c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 18:12:44 +0300 Subject: [PATCH 06/65] Set new version & update changelog --- CHANGELOG.md | 25 ++++++ package.json | 2 +- src/app/showcase/data/versions.json | 2 +- .../layout/doc/codeeditor/templates.ts | 2 +- .../themes/lara-light-teal/theme.css | 86 +++++++++---------- 5 files changed, 71 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 925535204d4..866d790fa0a 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,29 @@ # Changelog +## [17.2.0](https://github.com/primefaces/primeng/tree/17.2.0) (2023-12-20) + +[Full Changelog](https://github.com/primefaces/primeng/compare/17.1.0...17.2.0) + +**Implemented New Features and Enhancements:** +- InputGroup | Add styleClass and style input properties [\#14404](https://github.com/primefaces/primeng/issues/14404) +- ContextMenu | Touch Device support [\#14375](https://github.com/primefaces/primeng/issues/14375) + +**Fixed bugs:** +- Table: Not able to provide custom Icons for column filter clear icon [\#14397](https://github.com/primefaces/primeng/issues/14397) +- BlockUI: entire page is blocked if "blocked" input contains true by default (even if a target is defined) [\#14230](https://github.com/primefaces/primeng/issues/14230) +- Inputnumber: Inputnumber#currency mode not allowing to remove minus sign for Dollar and INR fields. [\#14327](https://github.com/primefaces/primeng/issues/14327) +- Galleria: After images change not correct numVisible value in component. [\#14401](https://github.com/primefaces/primeng/issues/14401) +- Multiselect does not focus filter input [\#14387](https://github.com/primefaces/primeng/issues/14387) +- Accordion: TextArea shortcuts are not working when used in Accordian Panels [\#14368](https://github.com/primefaces/primeng/issues/14368) +- Component: Autocomplete with long list of options adds scrollbar to the whole page [\#14281](https://github.com/primefaces/primeng/issues/14281) +- Dropdown Empty Filter Message not displayed [\#14409](https://github.com/primefaces/primeng/issues/14409) +- PickList: Filtering bug, when moving item to target list [\#14334](https://github.com/primefaces/primeng/issues/14334) +- Drodown: Unable to type spaces in editable dropdowns [\#14377](https://github.com/primefaces/primeng/issues/14377) +- Table | Apply Rule and Remove Rule texts are not visible in column filter [\#14365](https://github.com/primefaces/primeng/issues/14365) +- Autocomplete: ForceSelection does not force selection - formControl value is changed even without selection [\#14389](https://github.com/primefaces/primeng/issues/14389) +- Table: Sort icons are not showing correct amount directions [\#14403](https://github.com/primefaces/primeng/issues/14403) +- Component: PanelMenu repeated rendering [\#14373](https://github.com/primefaces/primeng/issues/14373) +- Table | Resized column style is not applied (w/column reorder) [\#14386](https://github.com/primefaces/primeng/issues/14386) + ## [17.1.0](https://github.com/primefaces/primeng/tree/17.1.0) (2023-12-13) [Full Changelog](https://github.com/primefaces/primeng/compare/17.0.0...17.1.0) diff --git a/package.json b/package.json index fc497854f22..16aecf4cfb3 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primeng", - "version": "17.1.0", + "version": "17.2.0", "license": "SEE LICENSE IN LICENSE.md", "scripts": { "ng": "ng", diff --git a/src/app/showcase/data/versions.json b/src/app/showcase/data/versions.json index b988c3dc1b3..2b3c1894214 100644 --- a/src/app/showcase/data/versions.json +++ b/src/app/showcase/data/versions.json @@ -1,6 +1,6 @@ [ { - "version": "v17.1.0", + "version": "v17.2.0", "name": "v17", "url": "https://primeng.org" }, diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts index 3ce6d9bef4e..392fe31c097 100644 --- a/src/app/showcase/layout/doc/codeeditor/templates.ts +++ b/src/app/showcase/layout/doc/codeeditor/templates.ts @@ -15,7 +15,7 @@ export interface Props { const app_dependencies = pkg ? pkg.devDependencies : {}; const PrimeNG = { - version: '17.1.0', + version: '17.2.0', description: 'PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.' }; diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index f56428efdf4..8dcaa24fe96 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -46,7 +46,7 @@ --surface-hover: #f6f9fc; --focus-ring: 0 0 0 0.2rem #99f6e4; --maskbg: rgba(0, 0, 0, 0.4); - --highlight-bg: #0f766e; + --highlight-bg: #f0fdfa; --highlight-text-color: #0f766e; color-scheme: light; } @@ -432,7 +432,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -568,7 +568,7 @@ } .p-datepicker table td > span.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-datepicker table td > span:focus { outline: 0 none; @@ -582,7 +582,7 @@ } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; @@ -636,7 +636,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-datepicker .p-yearpicker { margin: 0.5rem 0; @@ -648,7 +648,7 @@ } .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid #e5e7eb; @@ -765,7 +765,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -1034,7 +1034,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -1364,7 +1364,7 @@ } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-listbox .p-listbox-list .p-listbox-item .p-checkbox { margin-right: 0.5rem; @@ -1515,7 +1515,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -2910,7 +2910,7 @@ background: #9ca3af; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } @@ -2967,7 +2967,7 @@ min-width: 1.143rem; line-height: 1.143rem; color: #0f766e; - background: #0f766e; + background: #f0fdfa; margin-left: 0.5rem; } .p-datatable .p-sortable-column:not(.p-highlight):hover { @@ -2978,14 +2978,14 @@ color: #374151; } .p-datatable .p-sortable-column.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { color: #0f766e; } .p-datatable .p-sortable-column.p-highlight:hover { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { @@ -3042,14 +3042,14 @@ outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #0f766e; + box-shadow: inset 0 2px 0 0 #f0fdfa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 #0f766e; + box-shadow: inset 0 -2px 0 0 #f0fdfa; } .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { background: #f3f4f6; @@ -3128,7 +3128,7 @@ background: #f8f8fa; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler { @@ -3231,7 +3231,7 @@ color: #374151; } .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-column-filter-menu-button:focus-visible { @@ -3282,7 +3282,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; @@ -3385,7 +3385,7 @@ } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -3419,11 +3419,11 @@ color: #4b5563; } .p-organizationchart .p-organizationchart-node-content.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { - color: #010505; + color: #80eed5; } .p-organizationchart .p-organizationchart-line-down { background: #e5e7eb; @@ -3525,8 +3525,8 @@ border-radius: 50%; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: #0f766e; - border-color: #0f766e; + background: #f0fdfa; + border-color: #f0fdfa; color: #0f766e; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { @@ -3593,7 +3593,7 @@ } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -3699,7 +3699,7 @@ color: #4b5563; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, @@ -3740,7 +3740,7 @@ height: 2rem; } .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { - background-color: #0c5e58; + background-color: #99f1dd; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content { border-radius: 6px; @@ -3751,7 +3751,7 @@ transition: box-shadow 0.2s; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight { - background-color: #0f766e; + background-color: #f0fdfa; color: #0f766e; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { @@ -3837,7 +3837,7 @@ min-width: 1.143rem; line-height: 1.143rem; color: #0f766e; - background: #0f766e; + background: #f0fdfa; margin-left: 0.5rem; } .p-treetable .p-sortable-column:not(.p-highlight):hover { @@ -3848,7 +3848,7 @@ color: #374151; } .p-treetable .p-sortable-column.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { @@ -3900,7 +3900,7 @@ outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { @@ -4568,7 +4568,7 @@ .p-fileupload .p-fileupload-content.p-fileupload-highlight { border-color: 1px dashed #14b8a6; border-style: dashed; - background-color: #0f766e; + background-color: #f0fdfa; } .p-fileupload .p-progressbar { height: 0.25rem; @@ -4664,7 +4664,7 @@ } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -4811,7 +4811,7 @@ } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -4934,7 +4934,7 @@ } .p-menu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5063,7 +5063,7 @@ } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5280,7 +5280,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5364,7 +5364,7 @@ } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5470,7 +5470,7 @@ box-shadow: 0 0 0 0.2rem #99f6e4; } .p-steps .p-steps-item.p-highlight .p-steps-number { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-steps .p-steps-item.p-highlight .p-steps-title { @@ -5603,7 +5603,7 @@ } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5938,7 +5938,7 @@ background: #9ca3af; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { @@ -5957,7 +5957,7 @@ background: rgba(255, 255, 255, 0.6); } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-galleria .p-galleria-thumbnail-container { From fa0ca81613414e30c5ba255bf80e991d22b2372b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 18:16:45 +0300 Subject: [PATCH 07/65] Set new version & update changelog --- CHANGELOG.md | 25 +++++++++++++++++++ package.json | 2 +- src/app/showcase/data/versions.json | 2 +- .../layout/doc/codeeditor/templates.ts | 2 +- 4 files changed, 28 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 925535204d4..866d790fa0a 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,29 @@ # Changelog +## [17.2.0](https://github.com/primefaces/primeng/tree/17.2.0) (2023-12-20) + +[Full Changelog](https://github.com/primefaces/primeng/compare/17.1.0...17.2.0) + +**Implemented New Features and Enhancements:** +- InputGroup | Add styleClass and style input properties [\#14404](https://github.com/primefaces/primeng/issues/14404) +- ContextMenu | Touch Device support [\#14375](https://github.com/primefaces/primeng/issues/14375) + +**Fixed bugs:** +- Table: Not able to provide custom Icons for column filter clear icon [\#14397](https://github.com/primefaces/primeng/issues/14397) +- BlockUI: entire page is blocked if "blocked" input contains true by default (even if a target is defined) [\#14230](https://github.com/primefaces/primeng/issues/14230) +- Inputnumber: Inputnumber#currency mode not allowing to remove minus sign for Dollar and INR fields. [\#14327](https://github.com/primefaces/primeng/issues/14327) +- Galleria: After images change not correct numVisible value in component. [\#14401](https://github.com/primefaces/primeng/issues/14401) +- Multiselect does not focus filter input [\#14387](https://github.com/primefaces/primeng/issues/14387) +- Accordion: TextArea shortcuts are not working when used in Accordian Panels [\#14368](https://github.com/primefaces/primeng/issues/14368) +- Component: Autocomplete with long list of options adds scrollbar to the whole page [\#14281](https://github.com/primefaces/primeng/issues/14281) +- Dropdown Empty Filter Message not displayed [\#14409](https://github.com/primefaces/primeng/issues/14409) +- PickList: Filtering bug, when moving item to target list [\#14334](https://github.com/primefaces/primeng/issues/14334) +- Drodown: Unable to type spaces in editable dropdowns [\#14377](https://github.com/primefaces/primeng/issues/14377) +- Table | Apply Rule and Remove Rule texts are not visible in column filter [\#14365](https://github.com/primefaces/primeng/issues/14365) +- Autocomplete: ForceSelection does not force selection - formControl value is changed even without selection [\#14389](https://github.com/primefaces/primeng/issues/14389) +- Table: Sort icons are not showing correct amount directions [\#14403](https://github.com/primefaces/primeng/issues/14403) +- Component: PanelMenu repeated rendering [\#14373](https://github.com/primefaces/primeng/issues/14373) +- Table | Resized column style is not applied (w/column reorder) [\#14386](https://github.com/primefaces/primeng/issues/14386) + ## [17.1.0](https://github.com/primefaces/primeng/tree/17.1.0) (2023-12-13) [Full Changelog](https://github.com/primefaces/primeng/compare/17.0.0...17.1.0) diff --git a/package.json b/package.json index fc497854f22..16aecf4cfb3 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primeng", - "version": "17.1.0", + "version": "17.2.0", "license": "SEE LICENSE IN LICENSE.md", "scripts": { "ng": "ng", diff --git a/src/app/showcase/data/versions.json b/src/app/showcase/data/versions.json index b988c3dc1b3..2b3c1894214 100644 --- a/src/app/showcase/data/versions.json +++ b/src/app/showcase/data/versions.json @@ -1,6 +1,6 @@ [ { - "version": "v17.1.0", + "version": "v17.2.0", "name": "v17", "url": "https://primeng.org" }, diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts index 3ce6d9bef4e..392fe31c097 100644 --- a/src/app/showcase/layout/doc/codeeditor/templates.ts +++ b/src/app/showcase/layout/doc/codeeditor/templates.ts @@ -15,7 +15,7 @@ export interface Props { const app_dependencies = pkg ? pkg.devDependencies : {}; const PrimeNG = { - version: '17.1.0', + version: '17.2.0', description: 'PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.' }; From 54891140341980c5bb231828b91c4f9f5374282b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 18:17:01 +0300 Subject: [PATCH 08/65] Fixed #14414 --- .../themes/lara-light-teal/theme.css | 86 +++++++++---------- 1 file changed, 43 insertions(+), 43 deletions(-) diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index f56428efdf4..8dcaa24fe96 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -46,7 +46,7 @@ --surface-hover: #f6f9fc; --focus-ring: 0 0 0 0.2rem #99f6e4; --maskbg: rgba(0, 0, 0, 0.4); - --highlight-bg: #0f766e; + --highlight-bg: #f0fdfa; --highlight-text-color: #0f766e; color-scheme: light; } @@ -432,7 +432,7 @@ } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -568,7 +568,7 @@ } .p-datepicker table td > span.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-datepicker table td > span:focus { outline: 0 none; @@ -582,7 +582,7 @@ } .p-datepicker table td.p-datepicker-today > span.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-datepicker .p-datepicker-buttonbar { padding: 1rem 0; @@ -636,7 +636,7 @@ } .p-datepicker .p-monthpicker .p-monthpicker-month.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-datepicker .p-yearpicker { margin: 0.5rem 0; @@ -648,7 +648,7 @@ } .p-datepicker .p-yearpicker .p-yearpicker-year.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-datepicker.p-datepicker-multiple-month .p-datepicker-group { border-left: 1px solid #e5e7eb; @@ -765,7 +765,7 @@ } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -1034,7 +1034,7 @@ } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -1364,7 +1364,7 @@ } .p-listbox .p-listbox-list .p-listbox-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-listbox .p-listbox-list .p-listbox-item .p-checkbox { margin-right: 0.5rem; @@ -1515,7 +1515,7 @@ } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -2910,7 +2910,7 @@ background: #9ca3af; } .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } @@ -2967,7 +2967,7 @@ min-width: 1.143rem; line-height: 1.143rem; color: #0f766e; - background: #0f766e; + background: #f0fdfa; margin-left: 0.5rem; } .p-datatable .p-sortable-column:not(.p-highlight):hover { @@ -2978,14 +2978,14 @@ color: #374151; } .p-datatable .p-sortable-column.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { color: #0f766e; } .p-datatable .p-sortable-column.p-highlight:hover { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-datatable .p-sortable-column.p-highlight:hover .p-sortable-column-icon { @@ -3042,14 +3042,14 @@ outline-offset: -0.15rem; } .p-datatable .p-datatable-tbody > tr.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-top > td { - box-shadow: inset 0 2px 0 0 #0f766e; + box-shadow: inset 0 2px 0 0 #f0fdfa; } .p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td { - box-shadow: inset 0 -2px 0 0 #0f766e; + box-shadow: inset 0 -2px 0 0 #f0fdfa; } .p-datatable.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { background: #f3f4f6; @@ -3128,7 +3128,7 @@ background: #f8f8fa; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-datatable.p-datatable-striped .p-datatable-tbody > tr:nth-child(even).p-highlight .p-row-toggler { @@ -3231,7 +3231,7 @@ color: #374151; } .p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active:hover { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-column-filter-menu-button:focus-visible { @@ -3282,7 +3282,7 @@ } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:not(.p-highlight):not(.p-disabled):hover { color: #4b5563; @@ -3385,7 +3385,7 @@ } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-orderlist .p-orderlist-list .p-orderlist-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -3419,11 +3419,11 @@ color: #4b5563; } .p-organizationchart .p-organizationchart-node-content.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-organizationchart .p-organizationchart-node-content.p-highlight .p-node-toggler i { - color: #010505; + color: #80eed5; } .p-organizationchart .p-organizationchart-line-down { background: #e5e7eb; @@ -3525,8 +3525,8 @@ border-radius: 50%; } .p-paginator .p-paginator-pages .p-paginator-page.p-highlight { - background: #0f766e; - border-color: #0f766e; + background: #f0fdfa; + border-color: #f0fdfa; color: #0f766e; } .p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover { @@ -3593,7 +3593,7 @@ } .p-picklist .p-picklist-list .p-picklist-item.p-highlight { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-picklist .p-picklist-list .p-picklist-item.p-highlight.p-focus { background: rgba(20, 184, 166, 0.24); @@ -3699,7 +3699,7 @@ color: #4b5563; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-tree .p-tree-container .p-treenode .p-treenode-content.p-highlight .p-tree-toggler, @@ -3740,7 +3740,7 @@ height: 2rem; } .p-tree .p-treenode-droppoint.p-treenode-droppoint-active { - background-color: #0c5e58; + background-color: #99f1dd; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content { border-radius: 6px; @@ -3751,7 +3751,7 @@ transition: box-shadow 0.2s; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight { - background-color: #0f766e; + background-color: #f0fdfa; color: #0f766e; } .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-highlight .p-treenode-icon { @@ -3837,7 +3837,7 @@ min-width: 1.143rem; line-height: 1.143rem; color: #0f766e; - background: #0f766e; + background: #f0fdfa; margin-left: 0.5rem; } .p-treetable .p-sortable-column:not(.p-highlight):hover { @@ -3848,7 +3848,7 @@ color: #374151; } .p-treetable .p-sortable-column.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { @@ -3900,7 +3900,7 @@ outline-offset: -0.15rem; } .p-treetable .p-treetable-tbody > tr.p-highlight { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-treetable .p-treetable-tbody > tr.p-highlight .p-treetable-toggler { @@ -4568,7 +4568,7 @@ .p-fileupload .p-fileupload-content.p-fileupload-highlight { border-color: 1px dashed #14b8a6; border-style: dashed; - background-color: #0f766e; + background-color: #f0fdfa; } .p-fileupload .p-progressbar { height: 0.25rem; @@ -4664,7 +4664,7 @@ } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-contextmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -4811,7 +4811,7 @@ } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-megamenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -4934,7 +4934,7 @@ } .p-menu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-menu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5063,7 +5063,7 @@ } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-menubar .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5280,7 +5280,7 @@ } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-panelmenu .p-panelmenu-content .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5364,7 +5364,7 @@ } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-slidemenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5470,7 +5470,7 @@ box-shadow: 0 0 0 0.2rem #99f6e4; } .p-steps .p-steps-item.p-highlight .p-steps-number { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-steps .p-steps-item.p-highlight .p-steps-title { @@ -5603,7 +5603,7 @@ } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content { color: #0f766e; - background: #0f766e; + background: #f0fdfa; } .p-tieredmenu .p-menuitem.p-highlight > .p-menuitem-content .p-menuitem-link .p-menuitem-text { color: #0f766e; @@ -5938,7 +5938,7 @@ background: #9ca3af; } .p-galleria .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-galleria.p-galleria-indicators-bottom .p-galleria-indicator, .p-galleria.p-galleria-indicators-top .p-galleria-indicator { @@ -5957,7 +5957,7 @@ background: rgba(255, 255, 255, 0.6); } .p-galleria.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight button { - background: #0f766e; + background: #f0fdfa; color: #0f766e; } .p-galleria .p-galleria-thumbnail-container { From ca3e95937519731bcca765599b44928c9aae56c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 18:17:32 +0300 Subject: [PATCH 09/65] Update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 866d790fa0a..e8dba9511ec 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ - ContextMenu | Touch Device support [\#14375](https://github.com/primefaces/primeng/issues/14375) **Fixed bugs:** +- Lara Light Teal: $highlightBg implementation defect [\#14414](https://github.com/primefaces/primeng/issues/14414) - Table: Not able to provide custom Icons for column filter clear icon [\#14397](https://github.com/primefaces/primeng/issues/14397) - BlockUI: entire page is blocked if "blocked" input contains true by default (even if a target is defined) [\#14230](https://github.com/primefaces/primeng/issues/14230) - Inputnumber: Inputnumber#currency mode not allowing to remove minus sign for Dollar and INR fields. [\#14327](https://github.com/primefaces/primeng/issues/14327) From 588726ea949b29207d17726465a9076e3d75c92b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 18:18:01 +0300 Subject: [PATCH 10/65] Code format --- src/app/components/blockui/blockui.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/blockui/blockui.ts b/src/app/components/blockui/blockui.ts index 76b043cb32a..d0f341e1b34 100755 --- a/src/app/components/blockui/blockui.ts +++ b/src/app/components/blockui/blockui.ts @@ -104,7 +104,7 @@ export class BlockUI implements AfterViewInit, OnDestroy { block() { if (isPlatformBrowser(this.platformId)) { this._blocked = true; - (this.mask as ElementRef).nativeElement.style.display = 'flex' + (this.mask as ElementRef).nativeElement.style.display = 'flex'; if (this.target) { this.target.getBlockableElement().appendChild((this.mask as ElementRef).nativeElement); From 3c3fd7575e96b753ab7d6101c70d490b73466f3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 18:25:01 +0300 Subject: [PATCH 11/65] Set new version --- src/app/components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/package.json b/src/app/components/package.json index d8241fe1621..9545162a7b4 100644 --- a/src/app/components/package.json +++ b/src/app/components/package.json @@ -1,6 +1,6 @@ { "name": "primeng", - "version": "17.1.0", + "version": "17.2.0", "repository": { "type": "git", "url": "https://github.com/primefaces/primeng" From ec8f7ac3f4a646d553d8d7228abf7aa72eeeedfb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 20 Dec 2023 18:27:21 +0300 Subject: [PATCH 12/65] Merge master --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 16aecf4cfb3..adb5c2e4525 100755 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "type": "git", "url": "https://github.com/primefaces/primeng.git" }, + "type": "module", "devDependencies": { "@angular-devkit/build-angular": "^17.0.5", "@angular-eslint/eslint-plugin": "17.1.1", From 03002b2f90877505b463e0cf407f2fff8cf437ae Mon Sep 17 00:00:00 2001 From: andreaslampe <70583111+anlampe@users.noreply.github.com> Date: Thu, 21 Dec 2023 15:17:22 +0100 Subject: [PATCH 13/65] Fix #14323: Dropdown fix regression - options overlay is closed before it handles the click event --- src/app/components/dropdown/dropdown.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 2f5bbc74f22..1ff2b4c67fc 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -1057,7 +1057,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV const value = this.getOptionValue(option); this.updateModel(value, event); this.focusedOptionIndex.set(this.findSelectedOptionIndex()); - isHide && this.hide(true); + isHide && setTimeout(() => this.hide(true), 1); preventChange === false && this.onChange.emit({ originalEvent: event, value: value }); } From a69224afd34f53ea60edf17ef0ea2bc2b87df4c1 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Fri, 22 Dec 2023 11:52:34 +0300 Subject: [PATCH 14/65] Add sale --- src/app/showcase/data/news.json | 8 ++++---- src/app/showcase/pages/lts/lts.component.html | 6 ++++-- src/app/showcase/pages/uikit/uikit.component.html | 6 ++++-- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/app/showcase/data/news.json b/src/app/showcase/data/news.json index c2e701aaf0e..7b234fcf21e 100644 --- a/src/app/showcase/data/news.json +++ b/src/app/showcase/data/news.json @@ -1,6 +1,6 @@ { - "id": 60, - "content": "Sakai Free Admin Template", - "linkText": "View Demo", - "linkHref": "https://primefaces.org/sakai-ng" + "id": 61, + "content": "New Year Sale is Here! 🎉", + "linkText": "Visit Store", + "linkHref": "https://primefaces.org/store" } diff --git a/src/app/showcase/pages/lts/lts.component.html b/src/app/showcase/pages/lts/lts.component.html index afacb018a10..e8b275deb99 100755 --- a/src/app/showcase/pages/lts/lts.component.html +++ b/src/app/showcase/pages/lts/lts.component.html @@ -158,7 +158,8 @@
- $249 + $249 + $149
@@ -200,7 +201,8 @@
- $990 + $990 + $490
diff --git a/src/app/showcase/pages/uikit/uikit.component.html b/src/app/showcase/pages/uikit/uikit.component.html index 9d460034f43..6e04074ed54 100755 --- a/src/app/showcase/pages/uikit/uikit.component.html +++ b/src/app/showcase/pages/uikit/uikit.component.html @@ -162,7 +162,8 @@
For individual designers
- $99 + $99 + $49
    @@ -207,7 +208,8 @@
    - $249 + $249 + $149
    From b18e88de2045585c8895adcd638fe8a94e9b49e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Fri, 22 Dec 2023 13:12:10 +0300 Subject: [PATCH 15/65] fix typo --- src/app/showcase/doc/inputgroup/basicdoc.ts | 36 +++++++++++-------- src/app/showcase/doc/inputgroup/importdoc.ts | 2 +- .../showcase/doc/inputgroup/multipledoc.ts | 34 +++++++++--------- 3 files changed, 39 insertions(+), 33 deletions(-) diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts index 1eb5f409b07..b973e6feca1 100644 --- a/src/app/showcase/doc/inputgroup/basicdoc.ts +++ b/src/app/showcase/doc/inputgroup/basicdoc.ts @@ -14,11 +14,13 @@ import { Code } from '../../domain/code'; + $ .00 + www @@ -35,32 +37,36 @@ export class BasicDoc { + $ .00 + www `, html: `
    - - - - - - - - $ - - .00 - - - www - - + + + + + + + + + $ + + .00 + + + + www + +
    `, typescript: ` diff --git a/src/app/showcase/doc/inputgroup/importdoc.ts b/src/app/showcase/doc/inputgroup/importdoc.ts index 0caca39ed6d..9f15f95f75e 100644 --- a/src/app/showcase/doc/inputgroup/importdoc.ts +++ b/src/app/showcase/doc/inputgroup/importdoc.ts @@ -8,6 +8,6 @@ import { Code } from '../../domain/code'; export class ImportDoc { code: Code = { typescript: `import { InputGroupModule } from 'primeng/inputgroup'; -import { InputGroupAddon } from 'primeng/inputgroupaddon';` +import { InputGroupAddonModule } from 'primeng/inputgroupaddon';` }; } diff --git a/src/app/showcase/doc/inputgroup/multipledoc.ts b/src/app/showcase/doc/inputgroup/multipledoc.ts index 11206cc0f9d..597b6241ef1 100644 --- a/src/app/showcase/doc/inputgroup/multipledoc.ts +++ b/src/app/showcase/doc/inputgroup/multipledoc.ts @@ -28,6 +28,21 @@ import { Code } from '../../domain/code'; export class MultipleDoc { code: Code = { basic: ` + + + + + + + + + +$ +.00 +`, + + html: `
    + @@ -35,26 +50,11 @@ export class MultipleDoc { - + $ .00 -`, - - html: `
    - - - - - - - - - - - $ - .00 - +
    `, typescript: ` From 347bee7df8e87acde6a02ecb39b71821a0ebbe0c Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 23 Dec 2023 17:52:38 +0300 Subject: [PATCH 16/65] Update LTS doc --- src/app/showcase/pages/lts/lts.component.html | 65 ++++++++++++++----- 1 file changed, 49 insertions(+), 16 deletions(-) diff --git a/src/app/showcase/pages/lts/lts.component.html b/src/app/showcase/pages/lts/lts.component.html index e8b275deb99..693664f9f72 100755 --- a/src/app/showcase/pages/lts/lts.component.html +++ b/src/app/showcase/pages/lts/lts.component.html @@ -24,18 +24,18 @@ PrimeNG LTS is a support service to provide a license for the finest compatible version suited to you. LTS covers the prior two versions from the latest release, this means up to 18 months of almost bi-weekly releases to bring the latest defect fixes and security updates to your project. - As an example, when PrimeNG moves to Angular 16, PrimeNG 15 and 14 will move to LTS support whereas STS - (short term support) versions of PrimeNG 16 will be open source under MIT license - for at least 6 months until Angular/PrimeNG 17 is released. + As an example, when PrimeNG moves to Angular 18, v17 and v16 will move to LTS support whereas STS + (short term support) versions of PrimeNG 18 will be open source under MIT license + for at least 6 months until Angular/PrimeNG 19 is released.

Version Support

- The following table provides the status for PrimeNG versions under support by LTS. + STS means open source short term support whereas LTS stands for commercial long term support. Legacy versions are only supported by PrimeNG PRO. + class="text-primary font-medium hover:underline">PrimeNG PRO.

@@ -44,17 +44,31 @@ Version Status - Active Ends - LTS Ends + End of STS + End of LTS - + - Active + STS + + + After v18 release + + + After v20 release + + + + + + + + LTS After v17 release @@ -79,10 +93,10 @@ - + - LTS + Legacy After v15 release @@ -96,7 +110,7 @@ - Out of Support + Legacy After v14 release @@ -105,6 +119,20 @@ After v16 release + + + + + + Legacy + + + After v13 release + + + After v15 release + +
@@ -252,15 +280,20 @@
Frequently Asked Questions
+
Do I have to purchase a license for PrimeNG?
+

No, only the versions that have the -lts suffix + required a paid license. Any other version is open source under MIT license.

+
Is LTS License mandatory to use PrimeNG?
-

No, all releases of the latest PrimeNG version are free - to use under MIT License until a new major version comes which happens every 6 months.

+

No, LTS is totally optional if you cannot update to + latest Angular immediately and still would like to receive updates for your version.

How long is the duration of the LTS license?

Duration is 1 year for Basic License, for Extended License there is no limit.

-
What happens after the license duration ends?
+
What happens after the LTS license duration ends? +

A message will be displayed at the application screen and license needs to be renewed at PrimeStore. This only applies to Basic License as Extended License has no time limit.

@@ -270,7 +303,7 @@

Yes, a license key is tied to the major version such as 15 and same license key cannot be used on another major version like 14.

-
How can I assign my license to a version?
+
How can I assign my LTS license to a version?

At PrimeStore, there is an "Assign" feature that activates your license by selecting a version.

From fa93d81ae25394c41e703b37c611ea28cb277252 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Mon, 25 Dec 2023 11:43:50 +0300 Subject: [PATCH 17/65] Fixed #14426 --- src/app/components/dropdown/dropdown.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 2f5bbc74f22..59e8fc63e2b 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -479,6 +479,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV @Input() autoDisplayFirst: boolean = true; /** * Whether to display options as grouped when nested options are provided. + * @deprecated since v17.3.0, set initial value by model instead. * @group Props */ @Input() group: boolean | undefined; From e60ec6c04a45f202727df566dac50f533f789b64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 26 Dec 2023 11:10:15 +0300 Subject: [PATCH 18/65] Fixed #14424 - Multiselect | pTemplate=selectedItems layout is empty on first render using Reactive forms --- src/app/components/multiselect/multiselect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts index c21a1f67e01..0fedc8091af 100755 --- a/src/app/components/multiselect/multiselect.ts +++ b/src/app/components/multiselect/multiselect.ts @@ -1096,6 +1096,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft } else { this.selectedOptions = [...modelValue]; } + this.cd.markForCheck(); } }); } From 9b895302076b4f18175b5cd67c6d8e30de4b7dd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 26 Dec 2023 11:26:38 +0300 Subject: [PATCH 19/65] Fixed #14430 --- src/app/components/menubar/menubar.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts index 3fdf02b8a8a..cca4b72f943 100755 --- a/src/app/components/menubar/menubar.ts +++ b/src/app/components/menubar/menubar.ts @@ -130,11 +130,11 @@ export class MenubarService { {{ getItemProp(processedItem, 'badge') }} - + - + | undefined; + @Output() itemClick: EventEmitter = new EventEmitter(); @Output() itemMouseEnter: EventEmitter = new EventEmitter(); @@ -380,6 +382,7 @@ export class MenubarSub implements OnInit, OnDestroy { [ariaLabel]="ariaLabel" [ariaLabelledBy]="ariaLabelledBy" [focusedItemId]="focused ? focusedItemId : undefined" + [submenuIconTemplate]="submenuIconTemplate" [activeItemPath]="activeItemPath()" (itemClick)="onItemClick($event)" (menuFocus)="onMenuFocus($event)" From 55cbc09331f897c00fe168410cc9c214247033de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 26 Dec 2023 11:32:16 +0300 Subject: [PATCH 20/65] Update documentation of picklist --- src/app/showcase/doc/picklist/basicdoc.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/showcase/doc/picklist/basicdoc.ts b/src/app/showcase/doc/picklist/basicdoc.ts index c7a3bdcccb9..c51578d2964 100644 --- a/src/app/showcase/doc/picklist/basicdoc.ts +++ b/src/app/showcase/doc/picklist/basicdoc.ts @@ -7,7 +7,10 @@ import { ProductService } from '../../service/productservice'; selector: 'basic-doc', 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.

+

+ PickList is used as a controlled input with source and target properties. Content of a list item needs to be defined with the pTemplate property that receives an object in the list as parameter. Drag & drop + functionality depends on @angular/cdk package. +

Date: Tue, 26 Dec 2023 14:13:23 +0300 Subject: [PATCH 21/65] Update menu, add guides section and replace accessibility doc --- .../{ => guides}/accessibility/colorsdoc.ts | 0 .../accessibility/formcontrolsdoc.ts | 2 +- .../accessibility/introductiondoc.ts | 0 .../accessibility/semantichtmldoc.ts | 2 +- .../{ => guides}/accessibility/waiariadoc.ts | 2 +- .../doc/{ => guides}/accessibility/wcagdoc.ts | 0 .../guidesdoc.module.ts} | 18 ++++----- src/app/showcase/layout/app.routes.ts | 5 ++- .../accessibilitydemo-routing.module.ts | 9 ----- .../accessibility/accessibilitydemo.module.ts | 11 ------ .../accessibilitydemo.component.html | 0 .../accessibilitydemo.component.ts | 12 +++--- .../csslayer/csslayerdemo.component.html | 1 + .../guides/csslayer/csslayerdemo.component.ts | 9 +++++ .../pages/guides/guides-routing.module.ts | 18 +++++++++ .../showcase/pages/guides/guides.module.ts | 13 +++++++ .../templateupdatedemo.component.html | 1 + .../templateupdatedemo.component.ts | 9 +++++ src/assets/showcase/data/menu.json | 37 ++++++++++++------- 19 files changed, 96 insertions(+), 53 deletions(-) rename src/app/showcase/doc/{ => guides}/accessibility/colorsdoc.ts (100%) rename src/app/showcase/doc/{ => guides}/accessibility/formcontrolsdoc.ts (97%) rename src/app/showcase/doc/{ => guides}/accessibility/introductiondoc.ts (100%) rename src/app/showcase/doc/{ => guides}/accessibility/semantichtmldoc.ts (96%) rename src/app/showcase/doc/{ => guides}/accessibility/waiariadoc.ts (98%) rename src/app/showcase/doc/{ => guides}/accessibility/wcagdoc.ts (100%) rename src/app/showcase/doc/{accessibility/accessibilitydoc.module.ts => guides/guidesdoc.module.ts} (60%) delete mode 100644 src/app/showcase/pages/accessibility/accessibilitydemo-routing.module.ts delete mode 100644 src/app/showcase/pages/accessibility/accessibilitydemo.module.ts rename src/app/showcase/pages/{ => guides}/accessibility/accessibilitydemo.component.html (100%) rename src/app/showcase/pages/{ => guides}/accessibility/accessibilitydemo.component.ts (66%) create mode 100644 src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html create mode 100644 src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts create mode 100644 src/app/showcase/pages/guides/guides-routing.module.ts create mode 100644 src/app/showcase/pages/guides/guides.module.ts create mode 100644 src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.html create mode 100644 src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.ts diff --git a/src/app/showcase/doc/accessibility/colorsdoc.ts b/src/app/showcase/doc/guides/accessibility/colorsdoc.ts similarity index 100% rename from src/app/showcase/doc/accessibility/colorsdoc.ts rename to src/app/showcase/doc/guides/accessibility/colorsdoc.ts diff --git a/src/app/showcase/doc/accessibility/formcontrolsdoc.ts b/src/app/showcase/doc/guides/accessibility/formcontrolsdoc.ts similarity index 97% rename from src/app/showcase/doc/accessibility/formcontrolsdoc.ts rename to src/app/showcase/doc/guides/accessibility/formcontrolsdoc.ts index c0d76840339..87861c43ccb 100644 --- a/src/app/showcase/doc/accessibility/formcontrolsdoc.ts +++ b/src/app/showcase/doc/guides/accessibility/formcontrolsdoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '../../../domain/code'; @Component({ selector: 'form-controls-doc', diff --git a/src/app/showcase/doc/accessibility/introductiondoc.ts b/src/app/showcase/doc/guides/accessibility/introductiondoc.ts similarity index 100% rename from src/app/showcase/doc/accessibility/introductiondoc.ts rename to src/app/showcase/doc/guides/accessibility/introductiondoc.ts diff --git a/src/app/showcase/doc/accessibility/semantichtmldoc.ts b/src/app/showcase/doc/guides/accessibility/semantichtmldoc.ts similarity index 96% rename from src/app/showcase/doc/accessibility/semantichtmldoc.ts rename to src/app/showcase/doc/guides/accessibility/semantichtmldoc.ts index 105f5f55c26..48285578994 100644 --- a/src/app/showcase/doc/accessibility/semantichtmldoc.ts +++ b/src/app/showcase/doc/guides/accessibility/semantichtmldoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '../../../domain/code'; @Component({ selector: 'semantic-html-doc', diff --git a/src/app/showcase/doc/accessibility/waiariadoc.ts b/src/app/showcase/doc/guides/accessibility/waiariadoc.ts similarity index 98% rename from src/app/showcase/doc/accessibility/waiariadoc.ts rename to src/app/showcase/doc/guides/accessibility/waiariadoc.ts index 2707f81eb60..2003fa5d99d 100644 --- a/src/app/showcase/doc/accessibility/waiariadoc.ts +++ b/src/app/showcase/doc/guides/accessibility/waiariadoc.ts @@ -1,5 +1,5 @@ import { Component } from '@angular/core'; -import { Code } from '../../domain/code'; +import { Code } from '../../../domain/code'; @Component({ selector: 'wai-aria-doc', diff --git a/src/app/showcase/doc/accessibility/wcagdoc.ts b/src/app/showcase/doc/guides/accessibility/wcagdoc.ts similarity index 100% rename from src/app/showcase/doc/accessibility/wcagdoc.ts rename to src/app/showcase/doc/guides/accessibility/wcagdoc.ts diff --git a/src/app/showcase/doc/accessibility/accessibilitydoc.module.ts b/src/app/showcase/doc/guides/guidesdoc.module.ts similarity index 60% rename from src/app/showcase/doc/accessibility/accessibilitydoc.module.ts rename to src/app/showcase/doc/guides/guidesdoc.module.ts index 10dd54b86ce..6282316dbbf 100644 --- a/src/app/showcase/doc/accessibility/accessibilitydoc.module.ts +++ b/src/app/showcase/doc/guides/guidesdoc.module.ts @@ -1,20 +1,20 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { AppDocModule } from '../../layout/doc/app.doc.module'; +import { AppCodeModule } from '../../layout/doc/app.code.component'; import { FormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { CheckboxModule } from 'primeng/checkbox'; -import { AppDocModule } from '../../layout/doc/app.doc.module'; -import { AppCodeModule } from '../../layout/doc/app.code.component'; -import { ColorsDoc } from './colorsdoc'; -import { FormControlsDoc } from './formcontrolsdoc'; -import { IntroductionDoc } from './introductiondoc'; -import { SemanticHTMLDoc } from './semantichtmldoc'; -import { WAIARIADoc } from './waiariadoc'; -import { WCAGDoc } from './wcagdoc'; +import { ColorsDoc } from './accessibility/colorsdoc'; +import { FormControlsDoc } from './accessibility/formcontrolsdoc'; +import { IntroductionDoc } from './accessibility/introductiondoc'; +import { SemanticHTMLDoc } from './accessibility/semantichtmldoc'; +import { WAIARIADoc } from './accessibility/waiariadoc'; +import { WCAGDoc } from './accessibility/wcagdoc'; @NgModule({ imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, FormsModule, CheckboxModule], exports: [AppDocModule], declarations: [ColorsDoc, FormControlsDoc, IntroductionDoc, SemanticHTMLDoc, WAIARIADoc, WCAGDoc] }) -export class AccessibilityDocModule {} +export class GuidesDocModule {} diff --git a/src/app/showcase/layout/app.routes.ts b/src/app/showcase/layout/app.routes.ts index d4e18fa27e5..073f7c86dc0 100644 --- a/src/app/showcase/layout/app.routes.ts +++ b/src/app/showcase/layout/app.routes.ts @@ -9,6 +9,7 @@ export const routes: Routes = [ component: AppMainComponent, children: [ { path: '', redirectTo: 'installation', pathMatch: 'full' }, + { path: 'accessibility', redirectTo: 'guides/accessibility', pathMatch: 'full' }, { path: 'installation', loadChildren: () => import('../pages/installation/installation.module').then((m) => m.InstallationModule) }, { path: 'configuration', loadChildren: () => import('../pages/configuration/configurationdemo.module').then((m) => m.ConfigurationDemoModule) }, { path: 'playground', loadChildren: () => import('../pages/playground/playground.module').then((m) => m.PlaygroundModule) }, @@ -109,13 +110,13 @@ export const routes: Routes = [ { path: 'treeselect', loadChildren: () => import('../pages/treeselect/treeselectdemo.module').then((m) => m.TreeSelectDemoModule) }, { path: 'treetable', loadChildren: () => import('../pages/treetable/treetabledemo.module').then((m) => m.TreeTableDemoModule) }, { path: 'tristatecheckbox', loadChildren: () => import('../pages/tristatecheckbox/tristatecheckboxdemo.module').then((m) => m.TriStateCheckboxDemoModule) }, - { path: 'accessibility', loadChildren: () => import('../pages/accessibility/accessibilitydemo.module').then((m) => m.AccessibilityDemoModule) }, { path: 'scroller', loadChildren: () => import('../pages/scroller/scrollerdemo.module').then((m) => m.ScrollerDemoModule) }, { path: 'uikit', loadChildren: () => import('../pages/uikit/uikit.module').then((m) => m.UIKitModule) }, { path: 'autofocus', loadChildren: () => import('../pages/autofocus/autofocusdemo.module').then((m) => m.AutoFocusDemoModule) }, { path: 'overlay', loadChildren: () => import('../pages/overlay/overlaydemo.module').then((m) => m.OverlayDemoModule) }, { path: 'animateonscroll', loadChildren: () => import('../pages/animate/animateonscrolldemo.module').then((m) => m.AnimateOnScrollDemoModule) }, - { path: 'templates', loadChildren: () => import('../pages/templates/templates.module').then((m) => m.TemplatesModule) } + { path: 'templates', loadChildren: () => import('../pages/templates/templates.module').then((m) => m.TemplatesModule) }, + { path: 'guides', loadChildren: () => import('../pages/guides/guides.module').then((m) => m.GuidesModule) } ] }, { path: 'notfound', loadChildren: () => import('../pages/notfound/notfound.module').then((m) => m.NotFoundModule) }, diff --git a/src/app/showcase/pages/accessibility/accessibilitydemo-routing.module.ts b/src/app/showcase/pages/accessibility/accessibilitydemo-routing.module.ts deleted file mode 100644 index cb63c05b5e3..00000000000 --- a/src/app/showcase/pages/accessibility/accessibilitydemo-routing.module.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { AccessibilityDemoComponent } from './accessibilitydemo.component'; - -@NgModule({ - imports: [RouterModule.forChild([{ path: '', component: AccessibilityDemoComponent }])], - exports: [RouterModule] -}) -export class AccessibilityDemoRoutingModule {} diff --git a/src/app/showcase/pages/accessibility/accessibilitydemo.module.ts b/src/app/showcase/pages/accessibility/accessibilitydemo.module.ts deleted file mode 100644 index be8a78d05d0..00000000000 --- a/src/app/showcase/pages/accessibility/accessibilitydemo.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { AccessibilityDocModule } from '../../doc/accessibility/accessibilitydoc.module'; -import { AccessibilityDemoRoutingModule } from './accessibilitydemo-routing.module'; -import { AccessibilityDemoComponent } from './accessibilitydemo.component'; - -@NgModule({ - imports: [CommonModule, AccessibilityDemoRoutingModule, AccessibilityDocModule], - declarations: [AccessibilityDemoComponent] -}) -export class AccessibilityDemoModule {} diff --git a/src/app/showcase/pages/accessibility/accessibilitydemo.component.html b/src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.html similarity index 100% rename from src/app/showcase/pages/accessibility/accessibilitydemo.component.html rename to src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.html diff --git a/src/app/showcase/pages/accessibility/accessibilitydemo.component.ts b/src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.ts similarity index 66% rename from src/app/showcase/pages/accessibility/accessibilitydemo.component.ts rename to src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.ts index a88dd1267d6..8828f693c4b 100644 --- a/src/app/showcase/pages/accessibility/accessibilitydemo.component.ts +++ b/src/app/showcase/pages/guides/accessibility/accessibilitydemo.component.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core'; -import { ColorsDoc } from '../../doc/accessibility/colorsdoc'; -import { FormControlsDoc } from '../../doc/accessibility/formcontrolsdoc'; -import { IntroductionDoc } from '../../doc/accessibility/introductiondoc'; -import { SemanticHTMLDoc } from '../../doc/accessibility/semantichtmldoc'; -import { WAIARIADoc } from '../../doc/accessibility/waiariadoc'; -import { WCAGDoc } from '../../doc/accessibility/wcagdoc'; +import { ColorsDoc } from '../../../doc/guides/accessibility/colorsdoc'; +import { FormControlsDoc } from '../../../doc/guides/accessibility/formcontrolsdoc'; +import { IntroductionDoc } from '../../../doc/guides/accessibility/introductiondoc'; +import { SemanticHTMLDoc } from '../../../doc/guides/accessibility/semantichtmldoc'; +import { WAIARIADoc } from '../../../doc/guides/accessibility/waiariadoc'; +import { WCAGDoc } from '../../../doc/guides/accessibility/wcagdoc'; @Component({ selector: 'accessibility', diff --git a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html new file mode 100644 index 00000000000..a9cf963aee4 --- /dev/null +++ b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts new file mode 100644 index 00000000000..12645728830 --- /dev/null +++ b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'css-layer', + templateUrl: './csslayerdemo.component.html' +}) +export class CssLayerDemoComponent { + docs = []; +} diff --git a/src/app/showcase/pages/guides/guides-routing.module.ts b/src/app/showcase/pages/guides/guides-routing.module.ts new file mode 100644 index 00000000000..fdf2132ef22 --- /dev/null +++ b/src/app/showcase/pages/guides/guides-routing.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { AccessibilityDemoComponent } from './accessibility/accessibilitydemo.component'; +import { TemplateUpdateDemoComponent } from './templateupdate/templateupdatedemo.component'; +import { CssLayerDemoComponent } from './csslayer/csslayerdemo.component'; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { path: '', redirectTo: 'accessibility', pathMatch: 'full' }, + { path: 'accessibility', component: AccessibilityDemoComponent }, + { path: 'templateupdate', component: TemplateUpdateDemoComponent }, + { path: 'csslayer', component: CssLayerDemoComponent } + ]) + ], + exports: [RouterModule] +}) +export class GuidesRoutingModule {} diff --git a/src/app/showcase/pages/guides/guides.module.ts b/src/app/showcase/pages/guides/guides.module.ts new file mode 100644 index 00000000000..6575d59a95d --- /dev/null +++ b/src/app/showcase/pages/guides/guides.module.ts @@ -0,0 +1,13 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { AccessibilityDemoComponent } from './accessibility/accessibilitydemo.component'; +import { GuidesRoutingModule } from './guides-routing.module'; +import { TemplateUpdateDemoComponent } from './templateupdate/templateupdatedemo.component'; +import { CssLayerDemoComponent } from './csslayer/csslayerdemo.component'; +import { GuidesDocModule } from '../../doc/guides/guidesdoc.module'; + +@NgModule({ + imports: [CommonModule, GuidesRoutingModule, GuidesDocModule], + declarations: [AccessibilityDemoComponent, TemplateUpdateDemoComponent, CssLayerDemoComponent] +}) +export class GuidesModule {} diff --git a/src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.html b/src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.html new file mode 100644 index 00000000000..0f06bb5a406 --- /dev/null +++ b/src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.ts b/src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.ts new file mode 100644 index 00000000000..b83b577c057 --- /dev/null +++ b/src/app/showcase/pages/guides/templateupdate/templateupdatedemo.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'template-update', + templateUrl: './templateupdatedemo.component.html' +}) +export class TemplateUpdateDemoComponent { + docs = []; +} diff --git a/src/assets/showcase/data/menu.json b/src/assets/showcase/data/menu.json index ff7b42c55c9..11db1696d51 100644 --- a/src/assets/showcase/data/menu.json +++ b/src/assets/showcase/data/menu.json @@ -506,14 +506,26 @@ "href": "https://blocks.primeng.org" }, { - "name": "PrimeFlex CSS", - "icon": "pi pi-table", - "href": "https://primeflex.org" - }, - { - "name": "Accessibility", - "icon": "pi pi-users", - "routerLink": "/accessibility" + "name": "Guides", + "icon": "pi pi-book", + "children": [ + { + "name": "Accessibility", + "routerLink": "/guides/accessibility" + }, + { + "name": "CSS Layer", + "routerLink": "/guides/csslayer" + }, + { + "name": "Template Update", + "routerLink": "/guides/templateupdate" + }, + { + "name": "PrimeTV", + "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" + } + ] }, { "name": "Support", @@ -537,11 +549,6 @@ } ] }, - { - "name": "PrimeTV", - "icon": "pi pi-youtube", - "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" - }, { "name": "Discover", "icon": "pi pi-search", @@ -581,6 +588,10 @@ { "name": "PrimeGear", "href": "https://gear.primefaces.org" + }, + { + "name": "PrimeFlex CSS", + "href": "https://primeflex.org" } ] } From f50bc22c272f6da2356d2bf44f91becd74207cdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 26 Dec 2023 17:46:26 +0300 Subject: [PATCH 22/65] css layer section added --- .../doc/guides/csslayer/bootstrapdoc.ts | 21 +++++++ .../doc/guides/csslayer/normalizedoc.ts | 21 +++++++ .../showcase/doc/guides/csslayer/resetdoc.ts | 32 ++++++++++ .../doc/guides/csslayer/specificitydoc.ts | 58 +++++++++++++++++++ .../doc/guides/csslayer/tailwinddoc.ts | 31 ++++++++++ .../showcase/doc/guides/guidesdoc.module.ts | 11 +++- .../csslayer/csslayerdemo.component.html | 2 +- .../guides/csslayer/csslayerdemo.component.ts | 41 ++++++++++++- 8 files changed, 212 insertions(+), 5 deletions(-) create mode 100644 src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts create mode 100644 src/app/showcase/doc/guides/csslayer/normalizedoc.ts create mode 100644 src/app/showcase/doc/guides/csslayer/resetdoc.ts create mode 100644 src/app/showcase/doc/guides/csslayer/specificitydoc.ts create mode 100644 src/app/showcase/doc/guides/csslayer/tailwinddoc.ts diff --git a/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts b/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts new file mode 100644 index 00000000000..16fde7cca99 --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'bootstrap-doc', + + template: ` + +

Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.

+ + + ` +}) +export class BootstrapDoc { + code: Code = { + basic: `@layer bootstrap-reboot, primeng + +@import "bootstrap-reboot.css" layer(bootstrap-rebooot); +` + }; +} diff --git a/src/app/showcase/doc/guides/csslayer/normalizedoc.ts b/src/app/showcase/doc/guides/csslayer/normalizedoc.ts new file mode 100644 index 00000000000..f31993e494c --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/normalizedoc.ts @@ -0,0 +1,21 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'normalize-doc', + + template: ` + +

Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primeNG coming after the normalized layer.

+ + + ` +}) +export class NormalizeDoc { + code: Code = { + basic: `@layer normalize, primeng; + +@import "normalize.css" layer(normalize-reset); +` + }; +} diff --git a/src/app/showcase/doc/guides/csslayer/resetdoc.ts b/src/app/showcase/doc/guides/csslayer/resetdoc.ts new file mode 100644 index 00000000000..4d48fbca1ed --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/resetdoc.ts @@ -0,0 +1,32 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'reset-doc', + + template: ` + +

+ Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeNG because global styles with a broader scope e.g. button { } and no layer + always override the PrimeNG components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best + practice is wrapping your CSS in a layer like reset and make sure primeNG comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeNG components. +

+ + + ` +}) +export class ResetDoc { + code: Code = { + basic: `/* Order */ +@layer reset, primeng; + +/* Reset CSS */ +@layer reset { + button, + input { + /* CSS to Reset */ + } +} +` + }; +} diff --git a/src/app/showcase/doc/guides/csslayer/specificitydoc.ts b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts new file mode 100644 index 00000000000..3491bb16dda --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts @@ -0,0 +1,58 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'specificity-doc', + + template: ` + +

A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.

+

+ The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at + MDN to begin with. In styled mode, PrimeNG wraps the built-in style classes under the primeNG cascade layer to make the library styles easy to override. CSS + in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written. +

+

+ For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without + the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeNG with a more straightforward class name such as + my-switch-slider. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components. +

+
+ +
+ + +

Layers also make it possible to use CSS Modules, view the CSS Modules guide for examples.

+ + `, + styles: ` + :host ::ng-deep { + .my-inputswitch .p-inputswitch-slider { + border-radius: 0; + } + .my-inputswitch .p-inputswitch-slider:before { + border-radius: 0; + } + } + ` +}) +export class SpecificityDoc { + checked: boolean = false; + + code: Code = { + basic: ` + + + ` + }; +} diff --git a/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts b/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts new file mode 100644 index 00000000000..61da889f2da --- /dev/null +++ b/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts @@ -0,0 +1,31 @@ +import { Component } from '@angular/core'; +import { Code } from 'src/app/showcase/domain/code'; + +@Component({ + selector: 'tailwind-doc', + + template: ` + +

+ Tailwind CSS includes a reset utility in base called preflight. If you are using this feature, wrap the base and utilities in separate + layers and make sure primeNG layer comes after the base. +

+ + + ` +}) +export class TailwindDoc { + code: Code = { + basic: `@layer tailwind-base, primeng, tailwind-utilities; + +@layer tailwind-base { + @tailwind base; +} + +@layer tailwind-utilities { + @tailwind components; + @tailwind utilities; +} + ` + }; +} diff --git a/src/app/showcase/doc/guides/guidesdoc.module.ts b/src/app/showcase/doc/guides/guidesdoc.module.ts index 6282316dbbf..ef66380679c 100644 --- a/src/app/showcase/doc/guides/guidesdoc.module.ts +++ b/src/app/showcase/doc/guides/guidesdoc.module.ts @@ -11,10 +11,15 @@ import { IntroductionDoc } from './accessibility/introductiondoc'; import { SemanticHTMLDoc } from './accessibility/semantichtmldoc'; import { WAIARIADoc } from './accessibility/waiariadoc'; import { WCAGDoc } from './accessibility/wcagdoc'; - +import { SpecificityDoc } from './csslayer/specificitydoc'; +import { ResetDoc } from './csslayer/resetdoc'; +import { InputSwitchModule } from 'primeng/inputswitch'; +import { TailwindDoc } from './csslayer/tailwinddoc'; +import { BootstrapDoc } from './csslayer/bootstrapdoc'; +import { NormalizeDoc } from './csslayer/normalizedoc'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, FormsModule, CheckboxModule], + imports: [CommonModule, AppCodeModule, AppDocModule, RouterModule, FormsModule, CheckboxModule, InputSwitchModule], exports: [AppDocModule], - declarations: [ColorsDoc, FormControlsDoc, IntroductionDoc, SemanticHTMLDoc, WAIARIADoc, WCAGDoc] + declarations: [ColorsDoc, FormControlsDoc, IntroductionDoc, SemanticHTMLDoc, WAIARIADoc, WCAGDoc, SpecificityDoc, ResetDoc, TailwindDoc, BootstrapDoc, NormalizeDoc] }) export class GuidesDocModule {} diff --git a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html index a9cf963aee4..cfcdaee2314 100644 --- a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html +++ b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts index 12645728830..fdf48751677 100644 --- a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts +++ b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.ts @@ -1,9 +1,48 @@ import { Component } from '@angular/core'; +import { BootstrapDoc } from 'src/app/showcase/doc/guides/csslayer/bootstrapdoc'; +import { NormalizeDoc } from 'src/app/showcase/doc/guides/csslayer/normalizedoc'; +import { ResetDoc } from 'src/app/showcase/doc/guides/csslayer/resetdoc'; +import { SpecificityDoc } from 'src/app/showcase/doc/guides/csslayer/specificitydoc'; +import { TailwindDoc } from 'src/app/showcase/doc/guides/csslayer/tailwinddoc'; @Component({ selector: 'css-layer', templateUrl: './csslayerdemo.component.html' }) export class CssLayerDemoComponent { - docs = []; + docs = [ + { + id: 'css-specificity', + label: 'CSS Specificity', + component: SpecificityDoc + }, + { + id: 'reset', + label: 'Reset', + component: ResetDoc + }, + { + id: 'libraries', + label: 'Libraries', + description: 'Compatibility between PrimeVue and CSS libraries.', + children: [ + { + id: 'tailwind', + label: 'Tailwind CSS', + component:TailwindDoc + }, + { + id: 'bootstrap', + label: 'Bootstrap', + component:BootstrapDoc + }, + { + id: 'normalize', + label: 'Normalize', + component:NormalizeDoc + }, + + ] + } + ]; } From a99d8d6b09cd551db8ed8c65ee026125002cdf70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 26 Dec 2023 18:38:53 +0300 Subject: [PATCH 23/65] Refactor --- .../doc/guides/csslayer/specificitydoc.ts | 59 +++++++++++-------- .../showcase/layout/doc/app.code.component.ts | 3 +- .../layout/doc/app.docsection.component.ts | 6 +- .../guides/csslayer/csslayerdemo.component.ts | 11 ++-- 4 files changed, 44 insertions(+), 35 deletions(-) diff --git a/src/app/showcase/doc/guides/csslayer/specificitydoc.ts b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts index 3491bb16dda..d420b2c9ba5 100644 --- a/src/app/showcase/doc/guides/csslayer/specificitydoc.ts +++ b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts @@ -1,16 +1,15 @@ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { Code } from 'src/app/showcase/domain/code'; @Component({ selector: 'specificity-doc', - template: `

A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.

The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at - MDN to begin with. In styled mode, PrimeNG wraps the built-in style classes under the primeNG cascade layer to make the library styles easy to override. CSS - in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written. + MDN to begin with. PrimeNG wraps the built-in style classes under the primeNG cascade layer to make the library styles easy to override. CSS in your app + without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.

For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without @@ -21,38 +20,48 @@ import { Code } from 'src/app/showcase/domain/code';

- -

Layers also make it possible to use CSS Modules, view the CSS Modules guide for examples.

+ `, + encapsulation: ViewEncapsulation.None, styles: ` - :host ::ng-deep { - .my-inputswitch .p-inputswitch-slider { - border-radius: 0; - } - .my-inputswitch .p-inputswitch-slider:before { - border-radius: 0; - } - } - ` + .my-inputswitch .p-inputswitch-slider { + border-radius: 0; + } + .my-inputswitch .p-inputswitch-slider:before { + border-radius: 0; + }` }) export class SpecificityDoc { checked: boolean = false; - code: Code = { - basic: ` - - - ` +@Component({ + template: \` +
+ +
\`, + encapsulation: ViewEncapsulation.None, + styles: \` + .my-inputswitch .p-inputswitch-slider { + border-radius: 0; + } + .my-inputswitch .p-inputswitch-slider:before { + border-radius: 0; + } + \` +}) +export class ExampleComponent { + checked: boolean = false; +}` }; } diff --git a/src/app/showcase/layout/doc/app.code.component.ts b/src/app/showcase/layout/doc/app.code.component.ts index 039094b3cb2..ea97aa4c2f3 100644 --- a/src/app/showcase/layout/doc/app.code.component.ts +++ b/src/app/showcase/layout/doc/app.code.component.ts @@ -13,6 +13,7 @@ import { useCodeSandbox, useStackBlitz } from './codeeditor'; +
-
+
From 70ff4f4ba45b3118c174962c3b3bc484b0a23d41 Mon Sep 17 00:00:00 2001 From: Grygoryev Date: Wed, 27 Dec 2023 14:05:06 +0300 Subject: [PATCH 25/65] DynamicDialog: ability to turn off autofocus on show --- src/app/components/dynamicdialog/dynamicdialog-config.ts | 5 +++++ src/app/components/dynamicdialog/dynamicdialog.ts | 5 ++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/components/dynamicdialog/dynamicdialog-config.ts b/src/app/components/dynamicdialog/dynamicdialog-config.ts index 818def1b0fa..cf5a7bf4e65 100755 --- a/src/app/components/dynamicdialog/dynamicdialog-config.ts +++ b/src/app/components/dynamicdialog/dynamicdialog-config.ts @@ -40,6 +40,11 @@ export class DynamicDialogConfig { * @group Props */ closeOnEscape?: boolean; + /** + * Specifies if autofocus should happen on show. + * @group Props + */ + focusOnShow?: boolean = true; /** * Base zIndex value to use in layering. * @group Props diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts index 1f364a560f9..6b299e400d9 100755 --- a/src/app/components/dynamicdialog/dynamicdialog.ts +++ b/src/app/components/dynamicdialog/dynamicdialog.ts @@ -333,7 +333,10 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy { if (this.config.modal !== false) { this.enableModality(); } - this.focus(); + + if (this.config.focusOnShow === true) { + this.focus(); + } break; case 'void': From 3deb85d6774030e071a7870ece8408374dd135be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Wed, 27 Dec 2023 16:47:28 +0300 Subject: [PATCH 26/65] Fixed #14254 - Sidebar | When trying to close the sidebar, the sidebar-mask disappears but the component stays open --- src/app/components/sidebar/sidebar.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/components/sidebar/sidebar.ts b/src/app/components/sidebar/sidebar.ts index 05328dd31a2..da1b376121b 100755 --- a/src/app/components/sidebar/sidebar.ts +++ b/src/app/components/sidebar/sidebar.ts @@ -321,7 +321,7 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { } close(event: Event) { - this.hide(false); + this.hide(); this.visibleChange.emit(false); event.preventDefault(); } @@ -386,8 +386,6 @@ export class Sidebar implements AfterViewInit, AfterContentInit, OnDestroy { onAnimationEnd(event: any) { switch (event.toState) { case 'void': - this.hide(); - ZIndexUtils.clear(this.container); this.unbindGlobalListeners(); break; From ca9dad7c97a3cff05903bcc648a197160bf2753a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 27 Dec 2023 18:48:21 +0300 Subject: [PATCH 27/65] Fixed #14421 --- src/app/components/scroller/scroller.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/components/scroller/scroller.ts b/src/app/components/scroller/scroller.ts index 8639e0f1cfc..a1f80ca1f8d 100644 --- a/src/app/components/scroller/scroller.ts +++ b/src/app/components/scroller/scroller.ts @@ -675,7 +675,14 @@ export class Scroller implements OnInit, AfterContentInit, AfterViewChecked, OnD scrollTo(calculateCoord(newFirst.cols, (this._itemSize)[1], contentPos.left), calculateCoord(newFirst.rows, (this._itemSize)[0], contentPos.top)); } else { newFirst = calculateFirst(index, numToleratedItems); - this.horizontal ? scrollTo(calculateCoord(newFirst, this._itemSize, contentPos.left), 0) : scrollTo(0, calculateCoord(newFirst, this._itemSize, contentPos.top)); + + if (this.horizontal) { + scrollTo(calculateCoord(newFirst, this._itemSize, contentPos.left), 0); + } + if (this.vertical) { + const currentScrollLeft = this.elementViewChild?.nativeElement.scrollLeft; + scrollTo(currentScrollLeft, calculateCoord(newFirst, this._itemSize, contentPos.top)); + } } this.isRangeChanged = this.first !== newFirst; From f1fa5ecb72393ba1dae3ae3a324e022b0b400630 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 27 Dec 2023 18:55:47 +0300 Subject: [PATCH 28/65] Fixed #14434 --- src/app/components/menubar/menubar.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts index cca4b72f943..dad923485a8 100755 --- a/src/app/components/menubar/menubar.ts +++ b/src/app/components/menubar/menubar.ts @@ -733,20 +733,20 @@ export class Menubar implements AfterContentInit, OnDestroy, OnInit { this.activeItemPath.set([]); this.focusedItemInfo.set({ index: -1, level: 0, parentKey: '', item: null }); - isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild.nativeElement); this.dirty = false; } show() { const processedItem = this.findVisibleItem(this.findFirstFocusedItemIndex()); - this.focusedItemInfo.set({ index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '', item: processedItem.item }); - DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + this.focusedItemInfo.set({ index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '', item: processedItem?.item }); + DomHandler.focus(this.rootmenu?.menubarViewChild.nativeElement); } onMenuFocus(event: any) { this.focused = true; const processedItem = this.findVisibleItem(this.findFirstFocusedItemIndex()); - const focusedItemInfo = this.focusedItemInfo().index !== -1 ? this.focusedItemInfo() : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '', item: processedItem.item }; + const focusedItemInfo = this.focusedItemInfo().index !== -1 ? this.focusedItemInfo() : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '', item: processedItem?.item }; this.focusedItemInfo.set(focusedItemInfo); this.onFocus.emit(event); From 0d2aac55319455da010d143f1c489594b11853a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 27 Dec 2023 19:18:29 +0300 Subject: [PATCH 29/65] Fixed #14316 --- src/app/components/megamenu/megamenu.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts index 8b89f911414..dac34266237 100755 --- a/src/app/components/megamenu/megamenu.ts +++ b/src/app/components/megamenu/megamenu.ts @@ -37,6 +37,7 @@ import { ObjectUtils, UniqueComponentId } from 'primeng/utils'; selector: 'p-megaMenuSub', template: `
    Date: Thu, 28 Dec 2023 12:47:17 +0300 Subject: [PATCH 30/65] Fixed #14376 --- src/app/components/autocomplete/autocomplete.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 0dfb6b51de0..02ba2686edb 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -145,7 +145,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { [required]="required" [attr.name]="name" role="combobox" - [attr.placeholder]="placeholder" + [attr.placeholder]="!filled ? placeholder : null" [attr.size]="size" aria-autocomplete="list" [maxlength]="maxlength" From ebca8f05dd40694e101c7513db15d137031ffe76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 13:28:17 +0300 Subject: [PATCH 31/65] Fixed #12579 --- src/app/components/tooltip/tooltip.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/tooltip/tooltip.css b/src/app/components/tooltip/tooltip.css index 59fa161d5cd..e6fa79e11d9 100755 --- a/src/app/components/tooltip/tooltip.css +++ b/src/app/components/tooltip/tooltip.css @@ -23,6 +23,7 @@ } .p-tooltip-arrow { + scale: 2; position: absolute; width: 0; height: 0; From b3ae34d7ad3dfc10227f5e5f95e5b2ca14a6dba9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 13:46:20 +0300 Subject: [PATCH 32/65] Fixed #12684 --- src/app/components/paginator/paginator.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts index b3f39578822..69fb7ab092e 100755 --- a/src/app/components/paginator/paginator.ts +++ b/src/app/components/paginator/paginator.ts @@ -58,7 +58,8 @@ import { PaginatorState } from './paginator.interface'; *ngFor="let pageLink of pageLinks" class="p-paginator-page p-paginator-element p-link" [ngClass]="{ 'p-highlight': pageLink - 1 == getPage() }" - [attr.aria-label]="getAriaLabel('pageLabel')" + [attr.aria-label]="getPageAriaLabel(pageLink)" + [attr.aria-current]="pageLink - 1 == getPage() ? 'page' : undefined" (click)="onPageLinkClick($event, pageLink - 1)" pRipple > @@ -290,6 +291,10 @@ export class Paginator implements OnInit, AfterContentInit, OnChanges { return this.config.translation.aria ? this.config.translation.aria[labelType] : undefined; } + getPageAriaLabel(value) { + return this.config.translation.aria ? this.config.translation.aria.pageLabel.replace(/{page}/g, `Page ${value}`) : undefined; + } + getLocalization(digit: number) { const numerals = [...new Intl.NumberFormat(this.locale, { useGrouping: false }).format(9876543210)].reverse(); const index = new Map(numerals.map((d, i) => [i, d])); From 1d26f579904154fe17d0a88f130ed877fb8ed467 Mon Sep 17 00:00:00 2001 From: lm-niranjan <152153204+lm-niranjan@users.noreply.github.com> Date: Thu, 28 Dec 2023 16:31:50 +0530 Subject: [PATCH 33/65] Fix setting tabindex attribute on ToggleButton For `ToggleButton` component the `tabindex` attribute value is not set as expected. --- src/app/components/togglebutton/togglebutton.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/togglebutton/togglebutton.ts b/src/app/components/togglebutton/togglebutton.ts index e54b0562d41..bdd8897fb00 100755 --- a/src/app/components/togglebutton/togglebutton.ts +++ b/src/app/components/togglebutton/togglebutton.ts @@ -26,7 +26,7 @@ export const TOGGLEBUTTON_VALUE_ACCESSOR: any = { [class]="styleClass" (click)="toggle($event)" (keydown)="onKeyDown($event)" - [attr.tabindex]="disabled ? null : '0'" + [attr.tabindex]="disabled ? null : tabindex" role="switch" [attr.aria-checked]="checked" [attr.aria-labelledby]="ariaLabelledBy" @@ -110,7 +110,7 @@ export class ToggleButton implements ControlValueAccessor { * Index of the element in tabbing order. * @group Props */ - @Input() tabindex: number | undefined; + @Input() tabindex: number | undefined = 0; /** * Position of the icon. * @group Props From 46626afe49c376ce754617ef0673a5f7c775f5b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 15:07:59 +0300 Subject: [PATCH 34/65] Fixed #14427 --- src/app/components/dropdown/dropdown.ts | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts index 59e8fc63e2b..7812da32db2 100755 --- a/src/app/components/dropdown/dropdown.ts +++ b/src/app/components/dropdown/dropdown.ts @@ -928,14 +928,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV const modelValue = this.modelValue(); const visibleOptions = this.visibleOptions(); - if (modelValue && this.editable) { - this.updateEditableLabel(); - } - if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions)) { this.selectedOption = visibleOptions[this.findSelectedOptionIndex()]; this.cd.markForCheck(); } + + if (modelValue && this.editable) { + this.updateEditableLabel(); + } }); } @@ -1103,7 +1103,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV updateEditableLabel(): void { if (this.editableInputViewChild) { - this.editableInputViewChild.nativeElement.value = this.getOptionLabel(this.modelValue()) === undefined ? this.editableInputViewChild.nativeElement.value : this.getOptionLabel(this.modelValue()); + this.editableInputViewChild.nativeElement.value = ObjectUtils.isNotEmpty(this.selectedOption) ? this.getOptionLabel(this.selectedOption) : this.editableInputViewChild.nativeElement.value; } } @@ -1200,6 +1200,8 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV this.onModelChange(value); this.updateModel(value, event); this.onChange.emit({ originalEvent: event, value: value }); + + !this.overlayVisible && ObjectUtils.isNotEmpty(value) && this.show(); } /** * Displays the panel. @@ -1213,6 +1215,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV if (isFocus) { DomHandler.focus(this.focusInputViewChild?.nativeElement); } + this.cd.markForCheck(); } @@ -1263,8 +1266,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV if (this.filter && this.resetFilterOnHide) { this.resetFilter(); } - - isFocus && DomHandler.focus(this.focusInputViewChild?.nativeElement); + if (isFocus) { + if (this.focusInputViewChild) { + DomHandler.focus(this.focusInputViewChild?.nativeElement); + } + if (this.editable && this.editableInputViewChild) { + DomHandler.focus(this.editableInputViewChild?.nativeElement); + } + } this.cd.markForCheck(); } From e5504df9f673651526d4d09a79619bd12f84412b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 15:16:45 +0300 Subject: [PATCH 35/65] Fixed #14420 --- src/app/components/picklist/picklist.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts index bd59d005f3d..1dc877357b3 100755 --- a/src/app/components/picklist/picklist.ts +++ b/src/app/components/picklist/picklist.ts @@ -673,7 +673,7 @@ export class PickList implements AfterViewChecked, AfterContentInit { } get moveToSourceAriaLabel() { - return this.allLeftButtonAriaLabel ? this.allLeftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToSource : undefined; + return this.leftButtonAriaLabel ? this.leftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToSource : undefined; } get moveAllToSourceAriaLabel() { From 6036d1f426d54d1466d20a8176abb42dba95ddde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 16:33:44 +0300 Subject: [PATCH 36/65] Fixed #13934 --- src/app/components/menu/menu.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts index d6b14c02659..354e2b97f78 100755 --- a/src/app/components/menu/menu.ts +++ b/src/app/components/menu/menu.ts @@ -159,7 +159,7 @@ export class MenuItemContent { class="p-menu-list p-reset" role="menu" [attr.id]="id + '_list'" - [tabindex]="tabindex" + [attr.tabindex]="getTabIndexValue()" [attr.data-pc-section]="'menu'" [attr.aria-activedescendant]="activedescendant()" [attr.aria-label]="ariaLabel" @@ -432,6 +432,10 @@ export class Menu implements OnDestroy { }); } + getTabIndexValue(): string | null { + return this.tabindex !== undefined ? this.tabindex.toString() : null; + } + onOverlayAnimationStart(event: AnimationEvent) { switch (event.toState) { case 'visible': From ad15d71f813d6e459e399c77c2ee34369f0974a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 17:00:50 +0300 Subject: [PATCH 37/65] Fixed #13934 --- src/app/components/menu/menu.ts | 35 +++++++++++++++++++++------------ 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts index 354e2b97f78..9f9ba355230 100755 --- a/src/app/components/menu/menu.ts +++ b/src/app/components/menu/menu.ts @@ -530,24 +530,28 @@ export class Menu implements OnDestroy { } onListFocus(event: Event) { - this.focused = true; - if (!this.popup) { - if (this.selectedOptionIndex() !== -1) { - this.changeFocusedOptionIndex(this.selectedOptionIndex()); - this.selectedOptionIndex.set(-1); - } else { - this.changeFocusedOptionIndex(0); + if (!this.focused) { + this.focused = true; + if (!this.popup) { + if (this.selectedOptionIndex() !== -1) { + this.changeFocusedOptionIndex(this.selectedOptionIndex()); + this.selectedOptionIndex.set(-1); + } else { + this.changeFocusedOptionIndex(0); + } } + this.onFocus.emit(event); } - this.onFocus.emit(event); } onListBlur(event: FocusEvent | MouseEvent) { - this.focused = false; - this.changeFocusedOptionIndex(-1); - this.selectedOptionIndex.set(-1); - this.focusedOptionIndex.set(-1); - this.onBlur.emit(event); + if (this.focused) { + this.focused = false; + this.changeFocusedOptionIndex(-1); + this.selectedOptionIndex.set(-1); + this.focusedOptionIndex.set(-1); + this.onBlur.emit(event); + } } onListKeyDown(event) { @@ -659,6 +663,11 @@ export class Menu implements OnDestroy { itemClick(event: any, id: string) { const { originalEvent, item } = event; + if (!this.focused) { + this.focused = true; + this.onFocus.emit(); + } + if (item.disabled) { originalEvent.preventDefault(); return; From ddff37d07c36e132c748ec3045426e8c7b7e295f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 17:00:56 +0300 Subject: [PATCH 38/65] Fix documentation --- src/app/showcase/doc/menu/customdoc.ts | 36 +++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/src/app/showcase/doc/menu/customdoc.ts b/src/app/showcase/doc/menu/customdoc.ts index 12845df9e88..5675d446b64 100644 --- a/src/app/showcase/doc/menu/customdoc.ts +++ b/src/app/showcase/doc/menu/customdoc.ts @@ -11,7 +11,17 @@ import { Code } from '../../domain/code';
    - + +
    + + {{ item.label }} +
    +
    + {{ item.shortcut }} + +
    +     +
    {{ item.label }} @@ -73,7 +83,17 @@ export class CustomContentDoc implements OnInit { code: Code = { basic: ` - + +
    + + {{ item.label }} +
    +
    + {{ item.shortcut }} + +
    +     +
    {{ item.label }} @@ -90,7 +110,17 @@ export class CustomContentDoc implements OnInit {
    - + +
    + + {{ item.label }} +
    +
    + {{ item.shortcut }} + +
    +     +
    {{ item.label }} From 5d129821d54e8a0053fe5c65ee85730359f2237d Mon Sep 17 00:00:00 2001 From: Luca Quercetti Date: Thu, 28 Dec 2023 15:35:06 +0100 Subject: [PATCH 39/65] fix #14445 added removed css classes for p-tree horizontal layout --- src/app/components/tree/tree.css | 61 ++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/src/app/components/tree/tree.css b/src/app/components/tree/tree.css index 56fcd7e37df..d63be17864f 100755 --- a/src/app/components/tree/tree.css +++ b/src/app/components/tree/tree.css @@ -90,6 +90,67 @@ border: 0 none; } + .p-tree-horizontal { + width: auto; + padding-left: 0; + padding-right: 0; + overflow: auto; + } + + .p-tree.p-tree-horizontal table, + .p-tree.p-tree-horizontal tr, + .p-tree.p-tree-horizontal td { + border-collapse: collapse; + margin: 0; + padding: 0; + vertical-align: middle; + } + + .p-tree-horizontal .p-treenode-content { + font-weight: normal; + padding: 0.4em 1em 0.4em 0.2em; + display: flex; + align-items: center; + } + + .p-tree-horizontal .p-treenode-parent .p-treenode-content { + font-weight: normal; + white-space: nowrap; + } + + .p-tree.p-tree-horizontal .p-treenode { + background: url('./images/line.gif') repeat-x scroll center center transparent; + padding: 0.25rem 2.5rem; + } + + .p-tree.p-tree-horizontal .p-treenode.p-treenode-leaf, + .p-tree.p-tree-horizontal .p-treenode.p-treenode-collapsed { + padding-right: 0; + } + + .p-tree.p-tree-horizontal .p-treenode-children { + padding: 0; + margin: 0; + } + + .p-tree.p-tree-horizontal .p-treenode-connector { + width: 1px; + } + + .p-tree.p-tree-horizontal .p-treenode-connector-table { + height: 100%; + width: 1px; + } + + .p-tree.p-tree-horizontal .p-treenode-connector-line { + background: url('./images/line.gif') repeat-y scroll 0 0 transparent; + width: 1px; + } + + .p-tree.p-tree-horizontal table { + height: 0; + } + /* Virtual Scroll */ .p-scroller .p-tree-container { overflow: visible; From 0dee5589f6f3469615953e253d8415a8873eddb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 18:06:10 +0300 Subject: [PATCH 40/65] Set new version --- package.json | 2 +- src/app/components/package.json | 2 +- src/app/showcase/data/versions.json | 6 +++--- src/app/showcase/layout/doc/codeeditor/templates.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index adb5c2e4525..ac5d14f14fe 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "primeng", - "version": "17.2.0", + "version": "17.3.0", "license": "SEE LICENSE IN LICENSE.md", "scripts": { "ng": "ng", diff --git a/src/app/components/package.json b/src/app/components/package.json index 9545162a7b4..772f2339ca4 100644 --- a/src/app/components/package.json +++ b/src/app/components/package.json @@ -1,6 +1,6 @@ { "name": "primeng", - "version": "17.2.0", + "version": "17.3.0", "repository": { "type": "git", "url": "https://github.com/primefaces/primeng" diff --git a/src/app/showcase/data/versions.json b/src/app/showcase/data/versions.json index 2b3c1894214..a5965bd9d55 100644 --- a/src/app/showcase/data/versions.json +++ b/src/app/showcase/data/versions.json @@ -1,11 +1,11 @@ [ { - "version": "v17.2.0", + "version": "v17.3.0", "name": "v17", "url": "https://primeng.org" }, { - "version": "v16.9.2-lts", + "version": "v16.9.3-lts", "name": "v16", "url": "https://www.primefaces.org/primeng-v16-lts/" }, @@ -15,7 +15,7 @@ "url": "https://www.primefaces.org/primeng-v15-lts/#/" }, { - "version": "v14.2.16-lts", + "version": "v14.2.17-lts", "name": "v14", "url": "https://www.primefaces.org/primeng-v14-lts" }, diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts index 392fe31c097..980ef8ea85d 100644 --- a/src/app/showcase/layout/doc/codeeditor/templates.ts +++ b/src/app/showcase/layout/doc/codeeditor/templates.ts @@ -15,7 +15,7 @@ export interface Props { const app_dependencies = pkg ? pkg.devDependencies : {}; const PrimeNG = { - version: '17.2.0', + version: '17.3.0', description: 'PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.' }; From 8f97fe0af9720eadb1471989642f9406856570c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 18:07:10 +0300 Subject: [PATCH 41/65] Remove type --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index ac5d14f14fe..5240e320e47 100755 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "type": "git", "url": "https://github.com/primefaces/primeng.git" }, - "type": "module", "devDependencies": { "@angular-devkit/build-angular": "^17.0.5", "@angular-eslint/eslint-plugin": "17.1.1", From f9295be110af5af393a1ca9aad3b84e33814ee53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 18:07:17 +0300 Subject: [PATCH 42/65] Update apidoc --- src/app/showcase/doc/apidoc/index.json | 30 +++++++++++--------------- 1 file changed, 12 insertions(+), 18 deletions(-) diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index a5062733aa3..3e15fe3b91b 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -9658,7 +9658,8 @@ "readonly": false, "type": "boolean", "default": "false", - "description": "Whether to display options as grouped when nested options are provided." + "description": "Whether to display options as grouped when nested options are provided.", + "deprecated": "since v17.3.0, set initial value by model instead." }, { "name": "showClear", @@ -10304,6 +10305,14 @@ "default": "false", "description": "Specifies if pressing escape key should hide the dialog." }, + { + "name": "focusOnShow", + "optional": true, + "readonly": false, + "type": "boolean", + "default": "true", + "description": "Specifies if autofocus should happen on show." + }, { "name": "baseZIndex", "optional": true, @@ -21356,23 +21365,7 @@ }, "columnfilter": { "interfaces": { - "components": { - "TableColumnFilter": { - "description": "Column Filter.", - "props": { - "description": "Defines the input properties of the component.", - "values": [ - { - "name": "field", - "optional": false, - "readonly": false, - "type": "string", - "description": "Property represented by the column." - } - ] - } - } - }, + "components": {}, "templates": { "description": "Defines the templates used by the component.", "values": [ @@ -24466,6 +24459,7 @@ "optional": false, "readonly": false, "type": "number", + "default": "0", "description": "Index of the element in tabbing order." }, { From 397c247a69733649be12158ba78d4098dda868af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 18:07:41 +0300 Subject: [PATCH 43/65] Code format --- src/app/showcase/doc/inputgroup/basicdoc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/showcase/doc/inputgroup/basicdoc.ts b/src/app/showcase/doc/inputgroup/basicdoc.ts index b973e6feca1..76393a076b8 100644 --- a/src/app/showcase/doc/inputgroup/basicdoc.ts +++ b/src/app/showcase/doc/inputgroup/basicdoc.ts @@ -20,7 +20,7 @@ import { Code } from '../../domain/code'; .00 - + www From caa5bad78c0e012965a2ef20cf34d4cc7184b3cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 18:23:17 +0300 Subject: [PATCH 44/65] Update changelog --- CHANGELOG.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e8dba9511ec..f5d62a453a1 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,33 @@ # Changelog +## [17.3.0](https://github.com/primefaces/primeng/tree/17.3.0) (2023-12-28) + +[Full Changelog](https://github.com/primefaces/primeng/compare/17.2.0...17.3.0) +**Breaking Changes:** +- Dropdown | Deprecate autoDisplayFirst property [\#14426](https://github.com/primefaces/primeng/issues/14426) + +**Implemented New Features and Enhancements:** +- DynamicDialog: Need to turn off autofocus on first focusable element [\#13486](https://github.com/primefaces/primeng/issues/13486) +- Inconsistent filtering behavior in p-dropdown when options contain diacritics [\#10482](https://github.com/primefaces/primeng/issues/10482) + +**Fixed bugs:** +- Component: ToggleButton [\#14443](https://github.com/primefaces/primeng/issues/14443) +- Tree removed css classes [\#14445](https://github.com/primefaces/primeng/issues/14445) +- Component: Sidebar [\#14254](https://github.com/primefaces/primeng/issues/14254) +- Overlay Panel: Interaction with components inside panel template cause panel to hide [\#14323](https://github.com/primefaces/primeng/issues/14323) +- Menu | itemClick requires double click in popup mode if items generated by function [\#13934](https://github.com/primefaces/primeng/issues/13934) +- Component: p-picklist [\#14420](https://github.com/primefaces/primeng/issues/14420) +- Component: Dropdown - If editable is true and optionValue is present, the selected option will not be shown [\#14427](https://github.com/primefaces/primeng/issues/14427) +- columnFilter: unwanted close on mouseup [\#14410](https://github.com/primefaces/primeng/issues/14410) +- p-paginator: not accessible [\#12684](https://github.com/primefaces/primeng/issues/12684) +- Tooltip arrow is broken [\#12579](https://github.com/primefaces/primeng/issues/12579) +- AutoComplete: (Multiple) Placeholder does not disappear after selecting item [\#14376](https://github.com/primefaces/primeng/issues/14376) +- Component: MenuItem's property visible wasn't working [\#14316](https://github.com/primefaces/primeng/issues/14316) +- TreeSelect: Trigger Button missing aria-label [\#14355](https://github.com/primefaces/primeng/issues/14355) +- p-menubar: ERROR TypeError: Cannot read properties of undefined (reading 'item') when clicking on disabled menu item [\#14434](https://github.com/primefaces/primeng/issues/14434) +- Table/Scroller: Scroller scrolls left when sorting columns [\#14421](https://github.com/primefaces/primeng/issues/14421) +- Multiselect: pTemplate="selectedItems" layout is empty on first render using Reactive forms [\#14424](https://github.com/primefaces/primeng/issues/14424) +- Menubar | submenuicon template does not work [\#14430](https://github.com/primefaces/primeng/issues/14430) + ## [17.2.0](https://github.com/primefaces/primeng/tree/17.2.0) (2023-12-20) [Full Changelog](https://github.com/primefaces/primeng/compare/17.1.0...17.2.0) @@ -107,6 +136,11 @@ - TypeError: this.focusedItemInfo.mutate is not a function [\#14119](https://github.com/primefaces/primeng/issues/14119) - Upgrade to Angular 17? [\#14063](https://github.com/primefaces/primeng/issues/14063) +## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [16.9.3-LTS](https://www.npmjs.com/package/primeng/v/16.9.3-lts) (2023-12-28) + +**Fixed bugs:** +- LTS 14 & 16 - Update LicenseManager and fix the false version check [\#14449](https://github.com/primefaces/primeng/issues/14449) + ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [16.9.2-LTS](https://www.npmjs.com/package/primeng/v/16.9.2-lts) (2023-12-14) **Fixed bugs:** @@ -936,6 +970,10 @@ - Sidebar: Footer Templating [\#12259](https://github.com/primefaces/primeng/issues/12259) - Calendar: Day names don't update [\#12148](https://github.com/primefaces/primeng/issues/12148) +## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.17-LTS](https://www.npmjs.com/package/primeng/v/14.2.17-lts) (2023-12-28) +**Fixed bugs:** +- LTS 14 & 16 - Update LicenseManager and fix the false version check [\#14449](https://github.com/primefaces/primeng/issues/14449) + ## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [14.2.16-LTS](https://www.npmjs.com/package/primeng/v/14.2.16-lts) (2023-11-17) **Fixed bugs:** - Fileupload component disables upload button [\#14046](https://github.com/primefaces/primeng/issues/14046) From 9522cee3f31d27114018ebc916acdcbc81919123 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 18:24:02 +0300 Subject: [PATCH 45/65] Remove empty page --- src/assets/showcase/data/menu.json | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/assets/showcase/data/menu.json b/src/assets/showcase/data/menu.json index 11db1696d51..18ab16cfa56 100644 --- a/src/assets/showcase/data/menu.json +++ b/src/assets/showcase/data/menu.json @@ -517,10 +517,6 @@ "name": "CSS Layer", "routerLink": "/guides/csslayer" }, - { - "name": "Template Update", - "routerLink": "/guides/templateupdate" - }, { "name": "PrimeTV", "href": "https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" From a4dc6e4d74a62561b775c8862c70df39be556186 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 28 Dec 2023 18:29:00 +0300 Subject: [PATCH 46/65] Sync master --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 5240e320e47..ac5d14f14fe 100755 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "type": "git", "url": "https://github.com/primefaces/primeng.git" }, + "type": "module", "devDependencies": { "@angular-devkit/build-angular": "^17.0.5", "@angular-eslint/eslint-plugin": "17.1.1", From a0b3066f19af8ac605bc13150d7312c547df1661 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Fri, 29 Dec 2023 09:42:53 +0300 Subject: [PATCH 47/65] fix typo --- src/app/showcase/doc/guides/csslayer/specificitydoc.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/showcase/doc/guides/csslayer/specificitydoc.ts b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts index d420b2c9ba5..5ec133b6076 100644 --- a/src/app/showcase/doc/guides/csslayer/specificitydoc.ts +++ b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts @@ -14,7 +14,7 @@ import { Code } from 'src/app/showcase/domain/code';

    For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeNG with a more straightforward class name such as - my-switch-slider. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components. + my-inputswitch. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.

    @@ -35,7 +35,7 @@ import { Code } from 'src/app/showcase/domain/code'; export class SpecificityDoc { checked: boolean = false; code: Code = { - basic: ``, + basic: ``, scss: `.my-inputswitch .p-inputswitch-slider { border-radius: 0; } From 818e09a9ff3f1927d822122dafbbb44fb7ae8d2d Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Fri, 29 Dec 2023 11:28:26 +0300 Subject: [PATCH 48/65] Fixed doc errors --- .../doc/guides/csslayer/bootstrapdoc.ts | 3 +-- .../showcase/doc/guides/csslayer/resetdoc.ts | 3 +-- .../doc/guides/csslayer/specificitydoc.ts | 3 +-- .../doc/guides/csslayer/tailwinddoc.ts | 3 +-- .../showcase/doc/installation/stylesdoc.ts | 24 +++++++++++++++++-- src/app/showcase/layout/app.config.ts | 13 ++++------ .../csslayer/csslayerdemo.component.html | 2 +- 7 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts b/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts index 16fde7cca99..74dd7affac3 100644 --- a/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts +++ b/src/app/showcase/doc/guides/csslayer/bootstrapdoc.ts @@ -15,7 +15,6 @@ export class BootstrapDoc { code: Code = { basic: `@layer bootstrap-reboot, primeng -@import "bootstrap-reboot.css" layer(bootstrap-rebooot); -` +@import "bootstrap-reboot.css" layer(bootstrap-rebooot);` }; } diff --git a/src/app/showcase/doc/guides/csslayer/resetdoc.ts b/src/app/showcase/doc/guides/csslayer/resetdoc.ts index 4d48fbca1ed..0b713e38ee7 100644 --- a/src/app/showcase/doc/guides/csslayer/resetdoc.ts +++ b/src/app/showcase/doc/guides/csslayer/resetdoc.ts @@ -26,7 +26,6 @@ export class ResetDoc { input { /* CSS to Reset */ } -} -` +}` }; } diff --git a/src/app/showcase/doc/guides/csslayer/specificitydoc.ts b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts index d420b2c9ba5..1ceadf3eff3 100644 --- a/src/app/showcase/doc/guides/csslayer/specificitydoc.ts +++ b/src/app/showcase/doc/guides/csslayer/specificitydoc.ts @@ -5,10 +5,9 @@ import { Code } from 'src/app/showcase/domain/code'; selector: 'specificity-doc', template: ` -

    A CSS layer is utilized in styled mode only, in unstyled mode the built-in CSS classes are not included and as a result no layer is defined. This documentation only applies to styled mode.

    The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at - MDN to begin with. PrimeNG wraps the built-in style classes under the primeNG cascade layer to make the library styles easy to override. CSS in your app + MDN to begin with. PrimeNG wraps the built-in style classes under the primeng cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.

    diff --git a/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts b/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts index 61da889f2da..335047b0b76 100644 --- a/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts +++ b/src/app/showcase/doc/guides/csslayer/tailwinddoc.ts @@ -25,7 +25,6 @@ export class TailwindDoc { @layer tailwind-utilities { @tailwind components; @tailwind utilities; -} - ` +}` }; } diff --git a/src/app/showcase/doc/installation/stylesdoc.ts b/src/app/showcase/doc/installation/stylesdoc.ts index 09f079a2356..f16fb4f0c52 100644 --- a/src/app/showcase/doc/installation/stylesdoc.ts +++ b/src/app/showcase/doc/installation/stylesdoc.ts @@ -9,11 +9,18 @@ import { Code } from '../../domain/code'; 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 angular.json or src/styles.css file.

    -

    angular.json

    +

    With angular.json

    -

    styles.css

    +

    With styles.css

    + +

    CSS layer

    +

    + The style classes of PrimeNG are defined under the primeng CSS layer to be easier to customize by having low specificity. If you are using a CSS library that styles default HTML elements such as Tailwind Preflight, Bootstrap, + Normalize, or similar, a custom CSS layer configuration would be necessary for compatibility. View the CSS Layer guide for more information. +

    + ` }) @@ -31,4 +38,17 @@ export class StylesDoc { scss: `@import "primeng/resources/themes/lara-light-blue/theme.css"; @import "primeng/resources/primeng.css";` }; + + code3: Code = { + scss: `/* Order */ +@layer reset, primeng; + +/* Reset CSS */ +@layer reset { + button, + input { + /* CSS to Reset */ + } +}` + }; } diff --git a/src/app/showcase/layout/app.config.ts b/src/app/showcase/layout/app.config.ts index ec48c41a172..c7a4f0d832d 100644 --- a/src/app/showcase/layout/app.config.ts +++ b/src/app/showcase/layout/app.config.ts @@ -1,15 +1,10 @@ import { ApplicationConfig } from '@angular/core'; -import { provideRouter, withDisabledInitialNavigation, withEnabledBlockingInitialNavigation, withInMemoryScrolling, withViewTransitions } from '@angular/router'; +import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router'; -import { routes } from './app.routes'; -import { provideClientHydration } from '@angular/platform-browser'; -import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { provideHttpClient, withFetch } from '@angular/common/http'; +import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; +import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { - providers: [ - provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation(), withViewTransitions()), - provideHttpClient(withFetch()), - provideAnimationsAsync() - ] + providers: [provideRouter(routes, withInMemoryScrolling({ anchorScrolling: 'enabled', scrollPositionRestoration: 'enabled' }), withEnabledBlockingInitialNavigation()), provideHttpClient(withFetch()), provideAnimationsAsync()] }; diff --git a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html index cfcdaee2314..f8279d9d5aa 100644 --- a/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html +++ b/src/app/showcase/pages/guides/csslayer/csslayerdemo.component.html @@ -1 +1 @@ - + From 595c9234e83eb2bbbc92d2a6be528070d3d30e76 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Fri, 29 Dec 2023 11:32:30 +0300 Subject: [PATCH 49/65] Fixed space --- src/app/showcase/doc/guides/csslayer/normalizedoc.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/app/showcase/doc/guides/csslayer/normalizedoc.ts b/src/app/showcase/doc/guides/csslayer/normalizedoc.ts index f31993e494c..95c9e479e0c 100644 --- a/src/app/showcase/doc/guides/csslayer/normalizedoc.ts +++ b/src/app/showcase/doc/guides/csslayer/normalizedoc.ts @@ -15,7 +15,6 @@ export class NormalizeDoc { code: Code = { basic: `@layer normalize, primeng; -@import "normalize.css" layer(normalize-reset); -` +@import "normalize.css" layer(normalize-reset);` }; } From d8abd81000a49b36fce64f8f1a633243c65826bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 2 Jan 2024 14:04:49 +0300 Subject: [PATCH 50/65] initial --- src/app/showcase/layout/app.component.ts | 43 ++++++++++++++++---- src/app/showcase/service/appconfigservice.ts | 9 ++++ 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index 1b9854e45f2..22e260b5874 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -1,6 +1,6 @@ -import { DOCUMENT } from '@angular/common'; +import { DOCUMENT, isPlatformBrowser } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; -import { Component, Inject, OnDestroy, OnInit, Renderer2, afterNextRender } from '@angular/core'; +import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2, afterNextRender } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { NavigationEnd, Router, RouterOutlet } from '@angular/router'; import { PrimeNGConfig } from 'primeng/api'; @@ -29,8 +29,8 @@ import { AppTopBarComponent } from './topbar/app.topbar.component'; imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent], providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService] }) -export class AppComponent implements OnInit, OnDestroy { - constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router) { +export class AppComponent implements OnDestroy { + constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router, @Inject(PLATFORM_ID) private platformId: any) { afterNextRender(() => { if (process.env.NODE_ENV === 'production') { this.injectScripts(); @@ -41,15 +41,25 @@ export class AppComponent implements OnInit, OnDestroy { } themeChangeSubscription: Subscription; + theme - ngOnInit() { + ngOnInit(): void { this.primeng.ripple = true; this.themeChangeSubscription = this.configService.themeChange$.subscribe((theme: Theme) => { this.switchTheme(theme); + console.log("ds") + }); - } - + if (isPlatformBrowser(this.platformId)) { + if(this.configService.getAppState()==="true"){ + this.switchThemeByLocalStorage() + + } + } + } + + injectScripts() { const script = this.renderer.createElement('script'); script.type = 'text/javascript'; @@ -85,7 +95,25 @@ export class AppComponent implements OnInit, OnDestroy { } }); } + switchThemeByLocalStorage() { + const id = 'theme-link'; + const linkElement = this.document.getElementById(id); + const cloneLinkElement = linkElement.cloneNode(true); + + cloneLinkElement.setAttribute('href', linkElement.getAttribute('href').replace(this.configService.config.theme, "lara-dark-blue")); + cloneLinkElement.setAttribute('id', id + '-clone'); + linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); + + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', id); + this.configService.updateConfig({ + theme: "lara-dark-blue", + darkMode: true + }); + }); + } switchTheme(theme: Theme) { const id = 'theme-link'; const linkElement = this.document.getElementById(id); @@ -104,6 +132,7 @@ export class AppComponent implements OnInit, OnDestroy { darkMode: theme.dark }); this.configService.completeThemeChange(theme); + this.configService.setAppState(theme.dark); }); } diff --git a/src/app/showcase/service/appconfigservice.ts b/src/app/showcase/service/appconfigservice.ts index a05b72e40f5..68ae253b892 100644 --- a/src/app/showcase/service/appconfigservice.ts +++ b/src/app/showcase/service/appconfigservice.ts @@ -76,4 +76,13 @@ export class AppConfigService { hideNews() { this.state.newsActive = false; } + + getAppState() : any{ + return localStorage.getItem("darkmode") + } + + setAppState(val){ + localStorage.setItem("darkmode",val) + console.log(this.getAppState()) + } } From 6ef652cceaafedc96842981be4cfdcb854675c50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 2 Jan 2024 17:39:21 +0300 Subject: [PATCH 51/65] Refactor and fix appconfig service --- src/app/showcase/doc/chart/basicdoc.ts | 14 ++- src/app/showcase/domain/appconfig.ts | 2 + src/app/showcase/layout/app.component.ts | 81 +++--------- src/app/showcase/layout/app.main.component.ts | 13 +- .../layout/config/app.config.component.ts | 46 ++++--- .../layout/doc/app.docapitable.component.ts | 2 +- .../layout/topbar/app.topbar.component.ts | 2 +- .../landing/featuressection.component.ts | 2 +- .../pages/landing/herosection.component.ts | 12 +- .../pages/landing/landing.component.ts | 52 ++------ .../landing/templatesection.component.ts | 2 +- .../pages/landing/themesection.component.ts | 44 ++----- .../pages/landing/userssection.component.ts | 2 +- .../showcase/pages/uikit/uikit.component.ts | 2 +- src/app/showcase/service/appconfigservice.ts | 117 ++++++++++++------ 15 files changed, 180 insertions(+), 213 deletions(-) diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts index f2538e42387..81bd53480bd 100644 --- a/src/app/showcase/doc/chart/basicdoc.ts +++ b/src/app/showcase/doc/chart/basicdoc.ts @@ -1,6 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; import { Code } from '../../domain/code'; +import { AppConfigService } from '../../service/appconfigservice'; +import { Subscription, debounceTime } from 'rxjs'; @Component({ selector: 'chart-basic-demo', @@ -22,9 +24,19 @@ export class BasicDoc implements OnInit { basicOptions: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/domain/appconfig.ts b/src/app/showcase/domain/appconfig.ts index 8e1e7e05afd..1e998ebd93f 100644 --- a/src/app/showcase/domain/appconfig.ts +++ b/src/app/showcase/domain/appconfig.ts @@ -3,4 +3,6 @@ export interface AppConfig { darkMode?: boolean; theme?: string; ripple?: boolean; + scale?: number; + tableTheme?: string; } diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts index 22e260b5874..0e82afa168e 100644 --- a/src/app/showcase/layout/app.component.ts +++ b/src/app/showcase/layout/app.component.ts @@ -21,6 +21,7 @@ import { AppConfigComponent } from './config/app.config.component'; import { AppMenuComponent } from './menu/app.menu.component'; import { AppNewsComponent } from './news/app.news.component'; import { AppTopBarComponent } from './topbar/app.topbar.component'; +import { AppConfig } from '../domain/appconfig'; @Component({ selector: 'app-root', @@ -29,7 +30,7 @@ import { AppTopBarComponent } from './topbar/app.topbar.component'; imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent], providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService] }) -export class AppComponent implements OnDestroy { +export class AppComponent implements OnInit { constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router, @Inject(PLATFORM_ID) private platformId: any) { afterNextRender(() => { if (process.env.NODE_ENV === 'production') { @@ -40,26 +41,22 @@ export class AppComponent implements OnDestroy { }); } - themeChangeSubscription: Subscription; - theme - ngOnInit(): void { this.primeng.ripple = true; - - this.themeChangeSubscription = this.configService.themeChange$.subscribe((theme: Theme) => { - this.switchTheme(theme); - console.log("ds") - - }); if (isPlatformBrowser(this.platformId)) { - if(this.configService.getAppState()==="true"){ - this.switchThemeByLocalStorage() - - } + this.checkAppState(); } - } - - + } + + checkAppState() { + const stored = localStorage.getItem('layout-config'); + let _config!: AppConfig; + if (stored) { + _config = JSON.parse(stored) as AppConfig; + this.configService.config.set(_config); + } + } + injectScripts() { const script = this.renderer.createElement('script'); script.type = 'text/javascript'; @@ -87,58 +84,12 @@ export class AppComponent implements OnDestroy { }); } - const { theme, darkMode } = this.configService.config; + const { theme, darkMode } = this.configService.config(); const landingTheme = darkMode ? 'lara-dark-blue' : 'lara-light-blue'; if (event.urlAfterRedirects === '/' && theme !== landingTheme) { - this.switchTheme({ name: landingTheme, dark: darkMode }); + this.configService.config.update((config) => ({ ...config, theme: landingTheme, dark: darkMode })); } } }); } - switchThemeByLocalStorage() { - const id = 'theme-link'; - const linkElement = this.document.getElementById(id); - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('href', linkElement.getAttribute('href').replace(this.configService.config.theme, "lara-dark-blue")); - cloneLinkElement.setAttribute('id', id + '-clone'); - - linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); - - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', id); - this.configService.updateConfig({ - theme: "lara-dark-blue", - darkMode: true - }); - }); - } - switchTheme(theme: Theme) { - const id = 'theme-link'; - const linkElement = this.document.getElementById(id); - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('href', linkElement.getAttribute('href').replace(this.configService.config.theme, theme.name)); - cloneLinkElement.setAttribute('id', id + '-clone'); - - linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); - - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', id); - this.configService.updateConfig({ - theme: theme.name, - darkMode: theme.dark - }); - this.configService.completeThemeChange(theme); - this.configService.setAppState(theme.dark); - }); - } - - ngOnDestroy() { - if (this.themeChangeSubscription) { - this.themeChangeSubscription.unsubscribe(); - } - } } diff --git a/src/app/showcase/layout/app.main.component.ts b/src/app/showcase/layout/app.main.component.ts index 8f763bf77bc..36387dd142b 100644 --- a/src/app/showcase/layout/app.main.component.ts +++ b/src/app/showcase/layout/app.main.component.ts @@ -37,15 +37,15 @@ export class AppMainComponent { } get isInputFilled(): boolean { - return this.configService.config.inputStyle === 'filled'; + return this.configService.config().inputStyle === 'filled'; } get isDarkMode(): boolean { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } get isRippleDisabled(): boolean { - return this.configService.config.ripple === false; + return this.configService.config().ripple === false; } get isMenuActive(): boolean { @@ -53,7 +53,7 @@ export class AppMainComponent { } get theme(): string { - return this.configService.config.theme; + return this.configService.config().theme; } get containerClass() { @@ -68,7 +68,7 @@ export class AppMainComponent { toggleDarkMode() { let newTheme = null; - const { theme, darkMode } = this.configService.config; + const { theme, darkMode } = this.configService.config(); if (darkMode) { newTheme = theme.replace('dark', 'light'); @@ -76,8 +76,7 @@ export class AppMainComponent { if (theme.includes('light') && theme !== 'fluent-light') newTheme = theme.replace('light', 'dark'); else newTheme = 'lara-dark-blue'; } - - this.configService.changeTheme({ name: newTheme, dark: !darkMode }); + this.configService.config.update((config) => ({ ...config, darkMode: !darkMode, theme: newTheme })); } hideMenu() { diff --git a/src/app/showcase/layout/config/app.config.component.ts b/src/app/showcase/layout/config/app.config.component.ts index cc664fd77f5..6345016f6b3 100644 --- a/src/app/showcase/layout/config/app.config.component.ts +++ b/src/app/showcase/layout/config/app.config.component.ts @@ -15,7 +15,6 @@ import { AppConfigService } from '../../service/appconfigservice'; imports: [CommonModule, FormsModule, SidebarModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButtonModule] }) export class AppConfigComponent { - scale: number = 14; inputStyles = [ { label: 'Outlined', value: 'outlined' }, { label: 'Filled', value: 'filled' } @@ -35,19 +34,32 @@ export class AppConfigComponent { } get isDarkToggleDisabled(): boolean { - return this.lightOnlyThemes.includes(this.configService.config.theme); + return this.lightOnlyThemes.includes(this.configService.config().theme); } get isDarkMode(): boolean { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } get inputStyle(): string { - return this.configService.config.inputStyle; + return this.configService.config().inputStyle; + } + set inputStyle(val: string) { + this.configService.config.update((config) => ({ ...config, inputStyle: val })); } get ripple(): boolean { - return this.configService.config.ripple; + return this.configService.config().ripple; + } + set ripple(val: boolean) { + this.configService.config.update((config) => ({ ...config, ripple: val })); + } + + get scale(): number { + return this.configService.config().scale; + } + set scale(val: number) { + this.configService.config.update((config) => ({ ...config, scale: val })); } onVisibleChange(value: boolean) { @@ -57,7 +69,7 @@ export class AppConfigComponent { } onCompactMaterialChange() { - const theme = this.configService.config.theme; + const theme = this.configService.config().theme; if (theme.startsWith('md')) { let tokens = theme.split('-'); @@ -83,7 +95,7 @@ export class AppConfigComponent { themeName += '-' + color; } - return this.configService.config.theme === themeName; + return this.configService.config().theme === themeName; } changeTheme(theme: string, color?: string) { @@ -106,28 +118,22 @@ export class AppConfigComponent { darkMode = this.isDarkMode; } - this.configService.changeTheme({ name: newTheme, dark: darkMode }); + this.configService.config.update((config) => ({ ...config, dark: darkMode, theme: newTheme })); } - onInputStyleChange(event: SelectButtonChangeEvent) { - this.configService.setInputStyle(event.value); + decrementScale() { + this.scale--; } - onRippleChange(event: InputSwitchChangeEvent) { - this.configService.setRipple(event.checked); + onRippleChange(event) { + this.ripple = event.checked; } - decrementScale() { - this.scale--; - this.applyScale(); + onInputStyleChange(event) { + this.inputStyle = event.value; } incrementScale() { this.scale++; - this.applyScale(); - } - - applyScale() { - this.renderer.setStyle(this.document.documentElement, 'font-size', this.scale + 'px'); } } diff --git a/src/app/showcase/layout/doc/app.docapitable.component.ts b/src/app/showcase/layout/doc/app.docapitable.component.ts index b78b4151229..4ff25bb7616 100644 --- a/src/app/showcase/layout/doc/app.docapitable.component.ts +++ b/src/app/showcase/layout/doc/app.docapitable.component.ts @@ -109,7 +109,7 @@ export class AppDocApiTable { constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, private configService: AppConfigService) {} get isDarkMode(): boolean { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } navigate(event, param) { diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts index 7e0d546b041..e993e36cca1 100644 --- a/src/app/showcase/layout/topbar/app.topbar.component.ts +++ b/src/app/showcase/layout/topbar/app.topbar.component.ts @@ -37,7 +37,7 @@ export class AppTopBarComponent implements OnDestroy { } get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } toggleMenu() { diff --git a/src/app/showcase/pages/landing/featuressection.component.ts b/src/app/showcase/pages/landing/featuressection.component.ts index d2b2081c500..a402299fa95 100644 --- a/src/app/showcase/pages/landing/featuressection.component.ts +++ b/src/app/showcase/pages/landing/featuressection.component.ts @@ -79,6 +79,6 @@ export class FeaturesSectionComponent { constructor(private configService: AppConfigService) {} get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } } diff --git a/src/app/showcase/pages/landing/herosection.component.ts b/src/app/showcase/pages/landing/herosection.component.ts index 0816ef1d881..0831ab4805e 100644 --- a/src/app/showcase/pages/landing/herosection.component.ts +++ b/src/app/showcase/pages/landing/herosection.component.ts @@ -14,7 +14,7 @@ import { RadioButtonModule } from 'primeng/radiobutton'; import { SelectButtonModule } from 'primeng/selectbutton'; import { SliderModule } from 'primeng/slider'; import { TabMenuModule } from 'primeng/tabmenu'; -import { Subscription } from 'rxjs'; +import { Subscription, debounceTime } from 'rxjs'; import { AppConfigService } from '../../service/appconfigservice'; @Component({ @@ -173,7 +173,7 @@ export class HeroSectionComponent implements OnInit, OnDestroy { rangeValues = [20, 80]; - themeChangeCompleteSubscription: Subscription; + subscription!: Subscription; constructor(private configService: AppConfigService, @Inject(PLATFORM_ID) private platformId: any) {} @@ -199,7 +199,7 @@ export class HeroSectionComponent implements OnInit, OnDestroy { { name: 'Onyama Limba', image: 'onyamalimba.png' } ]; - this.themeChangeCompleteSubscription = this.configService.themeChangeComplete$.subscribe(() => { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { this.setChartOptions(); }); } @@ -258,9 +258,9 @@ export class HeroSectionComponent implements OnInit, OnDestroy { } ngOnDestroy(): void { - if (this.themeChangeCompleteSubscription) { - this.themeChangeCompleteSubscription.unsubscribe(); - this.themeChangeCompleteSubscription = null; + if (this.subscription) { + this.subscription.unsubscribe(); + this.subscription = null; } } } diff --git a/src/app/showcase/pages/landing/landing.component.ts b/src/app/showcase/pages/landing/landing.component.ts index 3141567de0f..c17234f4901 100644 --- a/src/app/showcase/pages/landing/landing.component.ts +++ b/src/app/showcase/pages/landing/landing.component.ts @@ -11,6 +11,7 @@ import { HeroSectionComponent } from './herosection.component'; import { TemplateSectionComponent } from './templatesection.component'; import { ThemeSectionComponent } from './themesection.component'; import { UsersSectionComponent } from './userssection.component'; +import { Subscription } from 'rxjs'; @Component({ selector: 'landing', @@ -19,16 +20,14 @@ import { UsersSectionComponent } from './userssection.component'; imports: [CommonModule, NgOptimizedImage, AppNewsComponent, AppTopBarComponent, HeroSectionComponent, FeaturesSectionComponent, UsersSectionComponent, ThemeSectionComponent, BlockSectionComponent, TemplateSectionComponent, FooterSectionComponent] }) export class LandingComponent implements OnInit { - private tableTheme = 'lara-light-blue'; - - constructor(private configService: AppConfigService, private metaService: Meta, private titleService: Title) { - afterNextRender(() => { - if (this.configService.config.theme !== this.tableTheme) { - this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); - } - }); + get tableTheme() { + return this.configService.config().tableTheme; } + subscription!: Subscription; + + constructor(private configService: AppConfigService, private metaService: Meta, private titleService: Title) {} + get landingClass() { return { 'layout-dark': this.isDarkMode, @@ -38,7 +37,7 @@ export class LandingComponent implements OnInit { } get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } get isNewsActive() { @@ -51,37 +50,8 @@ export class LandingComponent implements OnInit { } toggleDarkMode() { - const theme = this.isDarkMode ? 'lara-light-blue' : 'lara-dark-blue'; - const newTableTheme = this.isDarkMode ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark'); - - this.configService.changeTheme({ name: theme, dark: !this.isDarkMode }); - this.replaceTableTheme(newTableTheme); - } - - changeTableTheme(value: string) { - this.replaceTableTheme(value); - } - - replaceTableTheme(newTheme: string) { - const elementId = 'home-table-link'; - const linkElement = document.getElementById(elementId); - const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null; - const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null; - - if (currentTableTheme !== newTheme && tableThemeTokens) { - const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme); - - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('id', elementId + '-clone'); - cloneLinkElement.setAttribute('href', newThemeUrl); - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', elementId); - }); - linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); - - this.tableTheme = newTheme; - } + const dark = !this.isDarkMode; + const newTableTheme = !dark ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark'); + this.configService.config.update((config) => ({ ...config, darkMode: dark, theme: dark ? 'lara-dark-blue' : 'lara-light-blue', tableTheme: newTableTheme })); } } diff --git a/src/app/showcase/pages/landing/templatesection.component.ts b/src/app/showcase/pages/landing/templatesection.component.ts index f343223938f..abae8c2a40a 100644 --- a/src/app/showcase/pages/landing/templatesection.component.ts +++ b/src/app/showcase/pages/landing/templatesection.component.ts @@ -140,6 +140,6 @@ export class TemplateSectionComponent { constructor(private configService: AppConfigService) {} get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } } diff --git a/src/app/showcase/pages/landing/themesection.component.ts b/src/app/showcase/pages/landing/themesection.component.ts index 3ac215894bd..85439bfe67f 100644 --- a/src/app/showcase/pages/landing/themesection.component.ts +++ b/src/app/showcase/pages/landing/themesection.component.ts @@ -8,6 +8,7 @@ import { Customer } from '../../domain/customer'; import { AppComponent } from '../../layout/app.component'; import { AppConfigService } from '../../service/appconfigservice'; import { CustomerService } from '../../service/customerservice'; +import { Subscription } from 'rxjs'; @Component({ selector: 'theme-section', @@ -161,7 +162,12 @@ export class ThemeSectionComponent { @ViewChild('dt') table: Table; - tableTheme: string = 'lara-light-blue'; + get tableTheme() { + return this.configService.config().tableTheme; + } + set tableTheme(value: string) { + this.configService.config.update((config) => ({ ...config, tableTheme: value })); + } customers: Customer[]; @@ -170,46 +176,20 @@ export class ThemeSectionComponent { loading: boolean = true; get isDarkMode() { - return this.configService.config.darkMode; - } - - changeTableTheme(value: string) { - if (isPlatformBrowser(this.platformId)) { - this.replaceTableTheme(value); - } - } - replaceTableTheme(newTheme: string) { - const elementId = 'home-table-link'; - const linkElement = document.getElementById(elementId); - const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null; - const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null; - - if (currentTableTheme !== newTheme && tableThemeTokens) { - const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme); - - const cloneLinkElement = linkElement.cloneNode(true); - - cloneLinkElement.setAttribute('id', elementId + '-clone'); - cloneLinkElement.setAttribute('href', newThemeUrl); - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); - cloneLinkElement.setAttribute('id', elementId); - }); - linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); - - this.tableTheme = newTheme; - } + return this.configService.config().darkMode; } ngOnInit() { - this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue'); - this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.loading = false; }); } + changeTableTheme(value: string) { + this.tableTheme = value; + } + getSeverity(status) { switch (status) { case 'unqualified': diff --git a/src/app/showcase/pages/landing/userssection.component.ts b/src/app/showcase/pages/landing/userssection.component.ts index fbb12681159..6eddb660048 100644 --- a/src/app/showcase/pages/landing/userssection.component.ts +++ b/src/app/showcase/pages/landing/userssection.component.ts @@ -76,6 +76,6 @@ export class UsersSectionComponent { ]; get isDarkMode() { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } } diff --git a/src/app/showcase/pages/uikit/uikit.component.ts b/src/app/showcase/pages/uikit/uikit.component.ts index 06140bd962a..3e73387cd4e 100755 --- a/src/app/showcase/pages/uikit/uikit.component.ts +++ b/src/app/showcase/pages/uikit/uikit.component.ts @@ -15,6 +15,6 @@ export class UIKitComponent { } get isDarkMode(): boolean { - return this.configService.config.darkMode; + return this.configService.config().darkMode; } } diff --git a/src/app/showcase/service/appconfigservice.ts b/src/app/showcase/service/appconfigservice.ts index 68ae253b892..1047c696b9c 100644 --- a/src/app/showcase/service/appconfigservice.ts +++ b/src/app/showcase/service/appconfigservice.ts @@ -1,18 +1,20 @@ -import { Injectable } from '@angular/core'; +import { Inject, Injectable, PLATFORM_ID, effect, signal } from '@angular/core'; import { Subject } from 'rxjs'; import { AppConfig } from '../domain/appconfig'; import { AppState } from '../domain/appstate'; -import { Theme } from '../domain/theme'; +import { isPlatformBrowser } from '@angular/common'; @Injectable({ providedIn: 'root' }) export class AppConfigService { - config: AppConfig = { + _config: AppConfig = { theme: 'lara-light-blue', darkMode: false, inputStyle: 'outlined', - ripple: true + ripple: true, + scale: 14, + tableTheme: 'lara-light-blue' }; state: AppState = { @@ -21,28 +23,37 @@ export class AppConfigService { newsActive: false }; - private themeChange = new Subject(); - - themeChange$ = this.themeChange.asObservable(); - - private themeChangeComplete = new Subject(); - - themeChangeComplete$ = this.themeChangeComplete.asObservable(); - - changeTheme(theme: Theme) { - this.themeChange.next(theme); + config = signal(this._config); + + private configUpdate = new Subject(); + + configUpdate$ = this.configUpdate.asObservable(); + + constructor(@Inject(PLATFORM_ID) private platformId: any) { + effect(() => { + const config = this.config(); + if (isPlatformBrowser(this.platformId)) { + if (this.updateStyle(config)) { + this.changeTheme(); + const newTableTheme = !config.darkMode ? config.tableTheme.replace('dark', 'light') : config.tableTheme.replace('light', 'dark'); + this.replaceTableTheme(newTableTheme); + } + this.changeScale(config.scale); + this.onConfigUpdate(); + } + }); } - completeThemeChange(theme: Theme) { - this.themeChangeComplete.next(theme); + updateStyle(config: AppConfig) { + return config.theme !== this._config.theme || config.darkMode !== this._config.darkMode || config.tableTheme !== this._config.tableTheme; } - updateConfig(config: AppConfig) { - this.config = { ...this.config, ...config }; - } - - getConfig() { - return this.config; + onConfigUpdate() { + const config = this.config(); + config.tableTheme = !config.darkMode ? config.tableTheme.replace('light', 'dark') : config.tableTheme.replace('dark', 'light'); + this._config = { ...config }; + this.configUpdate.next(this.config()); + localStorage.setItem('layout-config', JSON.stringify(config)); } showMenu() { @@ -61,14 +72,6 @@ export class AppConfigService { this.state.configActive = false; } - setRipple(value: boolean) { - this.config.ripple = value; - } - - setInputStyle(value: string) { - this.config.inputStyle = value; - } - showNews() { this.state.newsActive = true; } @@ -77,12 +80,56 @@ export class AppConfigService { this.state.newsActive = false; } - getAppState() : any{ - return localStorage.getItem("darkmode") + changeTheme() { + const config = this.config(); + const themeLink = document.getElementById('theme-link'); + const themeLinkHref = themeLink.getAttribute('href')!; + const newHref = themeLinkHref + .split('/') + .map((el) => (el == this._config.theme ? (el = config.theme) : el == `theme-${this._config.darkMode}` ? (el = `theme-${config.darkMode}`) : el)) + .join('/'); + + this.replaceThemeLink(newHref); + } + + replaceThemeLink(href: string) { + const id = 'theme-link'; + let themeLink = document.getElementById(id); + const cloneLinkElement = themeLink.cloneNode(true); + + cloneLinkElement.setAttribute('href', href); + cloneLinkElement.setAttribute('id', id + '-clone'); + + themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling); + cloneLinkElement.addEventListener('load', () => { + themeLink.remove(); + cloneLinkElement.setAttribute('id', id); + }); + } + + replaceTableTheme(newTheme: string) { + const elementId = 'home-table-link'; + const linkElement = document.getElementById(elementId); + const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null; + const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null; + if (currentTableTheme !== newTheme && tableThemeTokens) { + const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme); + + const cloneLinkElement = linkElement.cloneNode(true); + + cloneLinkElement.setAttribute('id', elementId + '-clone'); + cloneLinkElement.setAttribute('href', newThemeUrl); + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); + cloneLinkElement.setAttribute('id', elementId); + }); + linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling); + } } - setAppState(val){ - localStorage.setItem("darkmode",val) - console.log(this.getAppState()) + changeScale(value: number) { + if (isPlatformBrowser(this.platformId)) { + document.documentElement.style.fontSize = `${value}px`; + } } } From 885a69ab7b59b24db0016429f78ef1ff9499d587 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Tue, 2 Jan 2024 17:49:51 +0300 Subject: [PATCH 52/65] Fix chart light/dark switch --- src/app/showcase/doc/chart/basicdoc.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts index 81bd53480bd..600ce97c7b3 100644 --- a/src/app/showcase/doc/chart/basicdoc.ts +++ b/src/app/showcase/doc/chart/basicdoc.ts @@ -1,5 +1,5 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; import { Code } from '../../domain/code'; import { AppConfigService } from '../../service/appconfigservice'; import { Subscription, debounceTime } from 'rxjs'; @@ -26,9 +26,10 @@ export class BasicDoc implements OnInit { subscription!: Subscription; - constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService) { + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { this.initChart(); + this.cd.markForCheck(); }); } @@ -60,22 +61,24 @@ export class BasicDoc implements OnInit { plugins: { legend: { labels: { - color: textColor + fontColor: textColor } } }, scales: { - y: { - beginAtZero: true, + x: { ticks: { - color: textColorSecondary + color: textColorSecondary, + font: { + weight: 500 + } }, grid: { - color: surfaceBorder, + display: false, drawBorder: false } }, - x: { + y: { ticks: { color: textColorSecondary }, From cefe5417ae3bde6d2060b0715d04051987d779be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Tue, 2 Jan 2024 18:17:40 +0300 Subject: [PATCH 53/65] charts updated --- src/app/showcase/doc/chart/combodoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/doughnutdoc.ts | 19 +++++++++++++++---- .../showcase/doc/chart/horizontalbardoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/linedoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/linestyledoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/multiaxisdoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/piedoc.ts | 17 +++++++++++++++-- src/app/showcase/doc/chart/polarareadoc.ts | 17 ++++++++++++++--- src/app/showcase/doc/chart/radardoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/stackedbardoc.ts | 18 +++++++++++++++--- src/app/showcase/doc/chart/verticalbardoc.ts | 18 +++++++++++++++--- 11 files changed, 164 insertions(+), 33 deletions(-) diff --git a/src/app/showcase/doc/chart/combodoc.ts b/src/app/showcase/doc/chart/combodoc.ts index c912e3f54d9..d1e0249e3e8 100644 --- a/src/app/showcase/doc/chart/combodoc.ts +++ b/src/app/showcase/doc/chart/combodoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-combo-demo', template: ` @@ -19,9 +20,20 @@ export class ComboDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/doughnutdoc.ts b/src/app/showcase/doc/chart/doughnutdoc.ts index efda6aba860..36e54b8a73e 100644 --- a/src/app/showcase/doc/chart/doughnutdoc.ts +++ b/src/app/showcase/doc/chart/doughnutdoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-doughnut-demo', template: ` @@ -19,9 +20,20 @@ export class DoughnutDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); @@ -49,7 +61,6 @@ export class DoughnutDoc implements OnInit { }; } } - code: Code = { basic: ``, html: ` diff --git a/src/app/showcase/doc/chart/horizontalbardoc.ts b/src/app/showcase/doc/chart/horizontalbardoc.ts index 77c39d2b19c..4a90253e016 100644 --- a/src/app/showcase/doc/chart/horizontalbardoc.ts +++ b/src/app/showcase/doc/chart/horizontalbardoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-horizontal-bar-demo', template: ` @@ -19,9 +20,20 @@ export class HorizontalBarDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart() + } + + initChart(){ if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/linedoc.ts b/src/app/showcase/doc/chart/linedoc.ts index c7cd4756e16..e1dc2fb978e 100644 --- a/src/app/showcase/doc/chart/linedoc.ts +++ b/src/app/showcase/doc/chart/linedoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-line-demo', template: ` @@ -19,9 +20,20 @@ export class LineDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/linestyledoc.ts b/src/app/showcase/doc/chart/linestyledoc.ts index 5bd73554764..4c612ad0eed 100644 --- a/src/app/showcase/doc/chart/linestyledoc.ts +++ b/src/app/showcase/doc/chart/linestyledoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-line-style-demo', template: ` @@ -19,9 +20,20 @@ export class LineStyleDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/multiaxisdoc.ts b/src/app/showcase/doc/chart/multiaxisdoc.ts index edcd92aa19b..debb7dc8cfb 100644 --- a/src/app/showcase/doc/chart/multiaxisdoc.ts +++ b/src/app/showcase/doc/chart/multiaxisdoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-multi-axis-demo', template: ` @@ -19,9 +20,20 @@ export class MultiAxisDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/piedoc.ts b/src/app/showcase/doc/chart/piedoc.ts index 260b8e005e0..06b60e9d97f 100644 --- a/src/app/showcase/doc/chart/piedoc.ts +++ b/src/app/showcase/doc/chart/piedoc.ts @@ -1,6 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; import { Code } from '../../domain/code'; +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-pie-demo', @@ -19,9 +21,20 @@ export class PieDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/polarareadoc.ts b/src/app/showcase/doc/chart/polarareadoc.ts index 0b438c10734..6cf506310ea 100644 --- a/src/app/showcase/doc/chart/polarareadoc.ts +++ b/src/app/showcase/doc/chart/polarareadoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-polar-area-demo', template: ` @@ -19,9 +20,19 @@ export class PolarAreaDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/radardoc.ts b/src/app/showcase/doc/chart/radardoc.ts index 968da3827fd..708804a0612 100644 --- a/src/app/showcase/doc/chart/radardoc.ts +++ b/src/app/showcase/doc/chart/radardoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-radar-demo', template: ` @@ -19,9 +20,20 @@ export class RadarDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/stackedbardoc.ts b/src/app/showcase/doc/chart/stackedbardoc.ts index 74b4041ed00..e13c13c7401 100644 --- a/src/app/showcase/doc/chart/stackedbardoc.ts +++ b/src/app/showcase/doc/chart/stackedbardoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-stacked-bar-demo', template: ` @@ -19,9 +20,20 @@ export class StackedBarDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart(); + } + + initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); diff --git a/src/app/showcase/doc/chart/verticalbardoc.ts b/src/app/showcase/doc/chart/verticalbardoc.ts index 373446ef4d8..67aee8438c1 100644 --- a/src/app/showcase/doc/chart/verticalbardoc.ts +++ b/src/app/showcase/doc/chart/verticalbardoc.ts @@ -1,7 +1,8 @@ import { isPlatformBrowser } from '@angular/common'; -import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core'; import { Code } from '../../domain/code'; - +import { Subscription, debounceTime } from 'rxjs'; +import { AppConfigService } from '../../service/appconfigservice'; @Component({ selector: 'chart-vertical-bar-demo', template: ` @@ -19,9 +20,20 @@ export class VerticalBarDoc implements OnInit { options: any; - constructor(@Inject(PLATFORM_ID) private platformId: any) {} + subscription!: Subscription; + + constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) { + this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => { + this.initChart(); + this.cd.markForCheck(); + }); + } ngOnInit() { + this.initChart() + } + + initChart(){ if (isPlatformBrowser(this.platformId)) { const documentStyle = getComputedStyle(document.documentElement); const textColor = documentStyle.getPropertyValue('--text-color'); From 928b5a10a70c52a6a4d6759a12607bbb541a13ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Wed, 3 Jan 2024 14:13:02 +0300 Subject: [PATCH 54/65] Improve DataTable demo performance --- src/app/components/demo/deferreddemo.css | 10 + src/app/components/demo/deferreddemo.ts | 61 ++++ src/app/components/demo/ng-package.json | 6 + src/app/components/demo/public_api.ts | 1 + src/app/showcase/doc/table/basicdoc.ts | 48 +-- src/app/showcase/doc/table/celleditdoc.ts | 120 ++++---- .../doc/table/checkboxselectiondoc.ts | 58 ++-- src/app/showcase/doc/table/columngroupdoc.ts | 4 +- .../doc/table/columnresizeexpandmodedoc.ts | 48 +-- .../doc/table/columnresizefitmodedoc.ts | 48 +-- .../table/columnresizescrollablemodedoc.ts | 48 +-- .../showcase/doc/table/columnselectiondoc.ts | 8 +- src/app/showcase/doc/table/columntoggledoc.ts | 50 ++-- src/app/showcase/doc/table/contextmenudoc.ts | 50 ++-- .../doc/table/controlledselectiondoc.ts | 60 ++-- src/app/showcase/doc/table/customersdoc.ts | 8 +- src/app/showcase/doc/table/customsortdoc.ts | 8 +- src/app/showcase/doc/table/dynamicdoc.ts | 4 +- .../doc/table/expandablerowgroupdoc.ts | 104 +++---- src/app/showcase/doc/table/exportdoc.ts | 60 ++-- src/app/showcase/doc/table/filtermenudoc.ts | 8 +- src/app/showcase/doc/table/filterrowdoc.ts | 196 +++++++------ .../showcase/doc/table/flexiblescrolldoc.ts | 8 +- .../showcase/doc/table/frozencolumnsdoc.ts | 70 ++--- src/app/showcase/doc/table/frozenrowsdoc.ts | 76 ++--- src/app/showcase/doc/table/gridlinesdoc.ts | 48 +-- .../doc/table/horizontalandverticaldoc.ts | 8 +- src/app/showcase/doc/table/lazyloaddoc.ts | 142 ++++----- .../doc/table/multiplecolumnsortdoc.ts | 52 ++-- .../doc/table/multipleselectiondoc.ts | 56 ++-- .../doc/table/pageonlyselectiondoc.ts | 58 ++-- .../showcase/doc/table/paginatorbasicdoc.ts | 72 ++--- .../showcase/doc/table/paginatorlocaledoc.ts | 74 ++--- .../doc/table/paginatorprogrammaticdoc.ts | 4 +- src/app/showcase/doc/table/productsdoc.ts | 276 +++++++++--------- .../doc/table/radiobuttonselectiondoc.ts | 56 ++-- src/app/showcase/doc/table/reorderdoc.ts | 52 ++-- .../showcase/doc/table/responsivescrolldoc.ts | 58 ++-- .../showcase/doc/table/responsivestackdoc.ts | 54 ++-- src/app/showcase/doc/table/roweditdoc.ts | 138 ++++----- src/app/showcase/doc/table/rowexpanddoc.ts | 8 +- .../showcase/doc/table/rowspangroupingdoc.ts | 88 +++--- .../showcase/doc/table/selectioneventsdoc.ts | 8 +- .../showcase/doc/table/singlecolumnsortdoc.ts | 8 +- .../showcase/doc/table/singleselectiondoc.ts | 48 +-- src/app/showcase/doc/table/sizedoc.ts | 48 +-- src/app/showcase/doc/table/statefuldoc.ts | 8 +- src/app/showcase/doc/table/stripeddoc.ts | 44 +-- src/app/showcase/doc/table/styledoc.ts | 54 ++-- .../doc/table/subheadergroupingdoc.ts | 100 +++---- src/app/showcase/doc/table/tabledoc.module.ts | 5 +- src/app/showcase/doc/table/templatedoc.ts | 78 ++--- .../showcase/doc/table/verticalscrolldoc.ts | 48 +-- .../showcase/doc/table/virtualscrolldoc.ts | 8 +- .../doc/table/virtualscrolllazydoc.ts | 56 ++-- 55 files changed, 1550 insertions(+), 1369 deletions(-) create mode 100755 src/app/components/demo/deferreddemo.css create mode 100755 src/app/components/demo/deferreddemo.ts create mode 100644 src/app/components/demo/ng-package.json create mode 100644 src/app/components/demo/public_api.ts diff --git a/src/app/components/demo/deferreddemo.css b/src/app/components/demo/deferreddemo.css new file mode 100755 index 00000000000..02eb23994ea --- /dev/null +++ b/src/app/components/demo/deferreddemo.css @@ -0,0 +1,10 @@ +.demo-section-loading { + display: grid; + place-items: center; + padding: 2rem; + border-radius: 10px; + margin-bottom: 1rem; + font-size: 2rem; + height: 350px; + background: var(--maskbg); +} \ No newline at end of file diff --git a/src/app/components/demo/deferreddemo.ts b/src/app/components/demo/deferreddemo.ts new file mode 100755 index 00000000000..e8b1cfb3e48 --- /dev/null +++ b/src/app/components/demo/deferreddemo.ts @@ -0,0 +1,61 @@ +import { CommonModule, isPlatformBrowser } from '@angular/common'; +import { Component, ElementRef, EventEmitter, Inject, Input, NgModule, OnInit, Output, PLATFORM_ID } from '@angular/core'; +import { SharedModule } from 'primeng/api'; + +@Component({ + selector: 'p-deferred-demo', + template: ` +
    Loading...
    + + + + `, + styleUrls: ['./deferreddemo.css'], + host: { + class: 'p-element' + } +}) +export class DeferredDemo implements OnInit { + visible: boolean = false; + + observer = null; + + timeout = null; + + @Input() options: any; + + @Output() load: EventEmitter = new EventEmitter(); + + constructor(public el: ElementRef, @Inject(PLATFORM_ID) private platformId: any) {} + + ngOnInit() { + if (isPlatformBrowser(this.platformId)) { + this.observer = new IntersectionObserver(([entry]) => { + clearTimeout(this.timeout); + + if (entry.isIntersecting) { + this.timeout = setTimeout(() => { + this.visible = true; + this.observer.unobserve(this.el.nativeElement); + this.load.emit(); + }, 350); + } + }, this.options); + + this.observer.observe(this.el.nativeElement); + } + } + ngOnDestroy() { + if (!this.visible && this.el.nativeElement) { + this.observer?.unobserve(this.el.nativeElement); + } + clearTimeout(this.timeout); + } +} + +@NgModule({ + imports: [CommonModule, SharedModule], + exports: [DeferredDemo, SharedModule], + declarations: [DeferredDemo] +}) +export class DeferredDemoModule {} diff --git a/src/app/components/demo/ng-package.json b/src/app/components/demo/ng-package.json new file mode 100644 index 00000000000..ab5467eb7e4 --- /dev/null +++ b/src/app/components/demo/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "public_api.ts" + } + } \ No newline at end of file diff --git a/src/app/components/demo/public_api.ts b/src/app/components/demo/public_api.ts new file mode 100644 index 00000000000..75d9b10f247 --- /dev/null +++ b/src/app/components/demo/public_api.ts @@ -0,0 +1 @@ +export * from './deferreddemo'; diff --git a/src/app/showcase/doc/table/basicdoc.ts b/src/app/showcase/doc/table/basicdoc.ts index 5f95c71ceea..5c8990da1eb 100644 --- a/src/app/showcase/doc/table/basicdoc.ts +++ b/src/app/showcase/doc/table/basicdoc.ts @@ -8,41 +8,43 @@ import { ProductService } from '../../service/productservice'; template: `

    DataTable requires a collection to display along with column components for the representation of the data.

     -
    - - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + +
    + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class BasicDoc implements OnInit { +export class BasicDoc { products!: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); }); } - + code: Code = { basic: ` diff --git a/src/app/showcase/doc/table/celleditdoc.ts b/src/app/showcase/doc/table/celleditdoc.ts index 9ff64f5150e..6b3f9dae977 100644 --- a/src/app/showcase/doc/table/celleditdoc.ts +++ b/src/app/showcase/doc/table/celleditdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -8,71 +8,73 @@ import { ProductService } from '../../service/productservice'; 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.

     -
    - - - - Code - Name - Inventory Status - Price - - - - - - - - - - - {{ product.code }} - - - - - - - - - - {{ product.name }} - - - - - - - - - - {{ product.inventoryStatus }} - - - - - - - - - - {{ product.price | currency : 'USD' }} - - - - - - -
    + +
    + + + + Code + Name + Inventory Status + Price + + + + + + + + + + + {{ product.code }} + + + + + + + + + + {{ product.name }} + + + + + + + + + + {{ product.inventoryStatus }} + + + + + + + + + + {{ product.price | currency : 'USD' }} + + + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class CellEditDoc implements OnInit { +export class CellEditDoc { products!: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/checkboxselectiondoc.ts b/src/app/showcase/doc/table/checkboxselectiondoc.ts index 88022ecef4e..531fc34e2e5 100644 --- a/src/app/showcase/doc/table/checkboxselectiondoc.ts +++ b/src/app/showcase/doc/table/checkboxselectiondoc.ts @@ -8,43 +8,45 @@ import { ProductService } from '../../service/productservice'; template: `

    Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as multiple.

     -
    - - - - - - - Code - Name - Category - Quantity - - - - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + +
    + + + + + + + Code + Name + Category + Quantity + + + + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class CheckboxSelectionDoc implements OnInit { +export class CheckboxSelectionDoc { products!: Product[]; selectedProducts!: Product; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/columngroupdoc.ts b/src/app/showcase/doc/table/columngroupdoc.ts index 9757c42be51..5653cf6b074 100644 --- a/src/app/showcase/doc/table/columngroupdoc.ts +++ b/src/app/showcase/doc/table/columngroupdoc.ts @@ -6,6 +6,7 @@ import { Code } from '../../domain/code'; template: `

    Columns can be grouped using rowspan and colspan properties.

     +
    @@ -42,6 +43,7 @@ import { Code } from '../../domain/code';
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -54,7 +56,7 @@ export class ColumnGroupDoc { constructor(private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.sales = [ { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 }, { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 }, diff --git a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts index 6241e129eb7..ed9b29e73e6 100644 --- a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts +++ b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -8,35 +8,37 @@ import { ProductService } from '../../service/productservice'; template: `

    Setting columnResizeMode as expand changes the table width as well.

     -
    - - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + +
    + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ColumnResizeExpandModeDoc implements OnInit { +export class ColumnResizeExpandModeDoc { products!: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/columnresizefitmodedoc.ts b/src/app/showcase/doc/table/columnresizefitmodedoc.ts index f86b8263231..d1a99c7db6c 100644 --- a/src/app/showcase/doc/table/columnresizefitmodedoc.ts +++ b/src/app/showcase/doc/table/columnresizefitmodedoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -8,35 +8,37 @@ import { ProductService } from '../../service/productservice'; 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.

     -
    - - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + +
    + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ColumnResizeFitModeDoc implements OnInit { +export class ColumnResizeFitModeDoc { products!: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts index 7b66553e31f..9b41a32d585 100644 --- a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts +++ b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts @@ -1,39 +1,41 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @Component({ selector: 'column-resize-scrollable-mode-doc', - template: `
    - - - - Name - Country - Company - Representative - - - - - {{ customer.name }} - {{ customer.country.name }} - {{ customer.company }} - {{ customer.representative.name }} - - - -
    + template: ` +
    + + + + Name + Country + Company + Representative + + + + + {{ customer.name }} + {{ customer.country.name }} + {{ customer.company }} + {{ customer.representative.name }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ColumnResizeScrollableModeDoc implements OnInit { +export class ColumnResizeScrollableModeDoc { customers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/columnselectiondoc.ts b/src/app/showcase/doc/table/columnselectiondoc.ts index 058b2f54c43..2b1e2fbfd90 100644 --- a/src/app/showcase/doc/table/columnselectiondoc.ts +++ b/src/app/showcase/doc/table/columnselectiondoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { MessageService } from 'primeng/api'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; @@ -9,6 +9,7 @@ import { ProductService } from '../../service/productservice'; template: `

    Selection using custom elements.

     +
    @@ -34,18 +35,19 @@ import { ProductService } from '../../service/productservice';
    +     `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService] }) -export class ColumnSelectionDoc implements OnInit { +export class ColumnSelectionDoc { products!: Product[]; selectedProduct!: Product; constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts index 29ca9068014..595a7bd31f4 100644 --- a/src/app/showcase/doc/table/columntoggledoc.ts +++ b/src/app/showcase/doc/table/columntoggledoc.ts @@ -12,29 +12,31 @@ interface Column { template: `

    This demo uses a multiselect component to implement toggleable columns.

     -
    - - - - - - - Code - - {{ col.header }} - - - - - - {{ product.code }} - - {{ product[col.field] }} - - - - -
    + +
    + + + + + + + Code + + {{ col.header }} + + + + + + {{ product.code }} + + {{ product[col.field] }} + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -47,7 +49,7 @@ export class ColumnToggleDoc { constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/contextmenudoc.ts b/src/app/showcase/doc/table/contextmenudoc.ts index 464c98d4a7a..a7ee92bad37 100644 --- a/src/app/showcase/doc/table/contextmenudoc.ts +++ b/src/app/showcase/doc/table/contextmenudoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { MenuItem, MessageService } from 'primeng/api'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; @@ -13,32 +13,34 @@ import { ProductService } from '../../service/productservice'; contextMenuSelection property is used to get a hold of the right clicked row. For dynamic columns, setting pContextMenuRowDisabled property as true disables context menu for that particular row.

    -
    - - - - - Code - Name - Category - Price - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.price | currency : 'USD' }} - - - -
    + +
    + + + + + Code + Name + Category + Price + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.price | currency : 'USD' }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService] }) -export class ContextMenuDoc implements OnInit { +export class ContextMenuDoc { products!: Product[]; selectedProduct!: Product; @@ -47,7 +49,7 @@ export class ContextMenuDoc implements OnInit { constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsSmall().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/controlledselectiondoc.ts b/src/app/showcase/doc/table/controlledselectiondoc.ts index db85ed9e5b5..c222793959b 100644 --- a/src/app/showcase/doc/table/controlledselectiondoc.ts +++ b/src/app/showcase/doc/table/controlledselectiondoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -8,36 +8,38 @@ import { ProductService } from '../../service/productservice'; template: `

    Row selection can be controlled by utilizing rowSelectable and disabled properties.

     -
    - - - - - - - Code - Name - Category - Quantity - - - - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + +
    + + + + + + + Code + Name + Category + Quantity + + + + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ControlledSelectionDoc implements OnInit { +export class ControlledSelectionDoc { products!: Product[]; selectedProducts!: Product; @@ -46,7 +48,7 @@ export class ControlledSelectionDoc implements OnInit { this.isRowSelectable = this.isRowSelectable.bind(this); } - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/customersdoc.ts b/src/app/showcase/doc/table/customersdoc.ts index 804e453d28a..3f632cd6311 100644 --- a/src/app/showcase/doc/table/customersdoc.ts +++ b/src/app/showcase/doc/table/customersdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer, Representative } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @@ -8,6 +8,7 @@ import { CustomerService } from '../../service/customerservice'; template: `

    DataTable with selection, pagination, filtering, sorting and templating.

     +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class CustomersDoc implements OnInit { +export class CustomersDoc { customers!: Customer[]; selectedCustomers!: Customer[]; @@ -187,7 +189,7 @@ export class CustomersDoc implements OnInit { constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.loading = false; diff --git a/src/app/showcase/doc/table/customsortdoc.ts b/src/app/showcase/doc/table/customsortdoc.ts index 15ebe3e39c7..456637c6ee0 100644 --- a/src/app/showcase/doc/table/customsortdoc.ts +++ b/src/app/showcase/doc/table/customsortdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { SortEvent } from 'primeng/api'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; @@ -12,6 +12,7 @@ import { ProductService } from '../../service/productservice'; sortField, sortOrder and multiSortMeta.

    +
    @@ -34,15 +35,16 @@ import { ProductService } from '../../service/productservice';
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class CustomSortDoc implements OnInit { +export class CustomSortDoc { products!: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/dynamicdoc.ts b/src/app/showcase/doc/table/dynamicdoc.ts index 62af9fa8b54..e3cd8ded94e 100644 --- a/src/app/showcase/doc/table/dynamicdoc.ts +++ b/src/app/showcase/doc/table/dynamicdoc.ts @@ -12,6 +12,7 @@ interface Column { template: `

    Columns can be defined dynamically using the *ngFor directive.

     +
    @@ -30,6 +31,7 @@ interface Column {
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -40,7 +42,7 @@ export class DynamicDoc { constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/expandablerowgroupdoc.ts b/src/app/showcase/doc/table/expandablerowgroupdoc.ts index 15fc5126e14..f053100861b 100644 --- a/src/app/showcase/doc/table/expandablerowgroupdoc.ts +++ b/src/app/showcase/doc/table/expandablerowgroupdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @@ -8,63 +8,65 @@ import { CustomerService } from '../../service/customerservice'; 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.

     -
    - - - - Name - Country - Company - Status - Date - - - - - - - - {{ customer.representative.name }} - - - - - - Total Customers - {{ calculateCustomerTotal(customer.representative.name) }} - - - - - - {{ customer.name }} - - - - {{ customer.country.name }} - - - {{ customer.company }} - - - - - - {{ customer.date }} - - - - -
    + +
    + + + + Name + Country + Company + Status + Date + + + + + + + + {{ customer.representative.name }} + + + + + + Total Customers + {{ calculateCustomerTotal(customer.representative.name) }} + + + + + + {{ customer.name }} + + + + {{ customer.country.name }} + + + {{ customer.company }} + + + + + + {{ customer.date }} + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ExpandableRowGroupDoc implements OnInit { +export class ExpandableRowGroupDoc { customers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/exportdoc.ts b/src/app/showcase/doc/table/exportdoc.ts index 15fdcef8b42..e0b5919e441 100644 --- a/src/app/showcase/doc/table/exportdoc.ts +++ b/src/app/showcase/doc/table/exportdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import * as FileSaver from 'file-saver'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; @@ -24,36 +24,38 @@ interface ExportColumn {

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

    -
    - - -
    - - - - -
    -     - - - - {{ col.header }} - - - - - - - {{ rowData[col.field] }} - - - -     -
    + +
    + + +
    + + + + +
    +     + + + + {{ col.header }} + + + + + + + {{ rowData[col.field] }} + + + +     +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ExportDoc implements OnInit { +export class ExportDoc { products!: Product[]; selectedProducts!: Product[]; @@ -64,7 +66,7 @@ export class ExportDoc implements OnInit { exportColumns!: ExportColumn[]; - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/filtermenudoc.ts b/src/app/showcase/doc/table/filtermenudoc.ts index 9c11e0580cc..dfce1f6426f 100644 --- a/src/app/showcase/doc/table/filtermenudoc.ts +++ b/src/app/showcase/doc/table/filtermenudoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Table } from 'primeng/table'; import { Code } from '../../domain/code'; import { Customer, Representative } from '../../domain/customer'; @@ -9,6 +9,7 @@ import { CustomerService } from '../../service/customerservice'; template: `

    Filters are displayed in an overlay.

     +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class FilterMenuDoc implements OnInit { +export class FilterMenuDoc { customers!: Customer[]; representatives!: Representative[]; @@ -168,7 +170,7 @@ export class FilterMenuDoc implements OnInit { constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.loading = false; diff --git a/src/app/showcase/doc/table/filterrowdoc.ts b/src/app/showcase/doc/table/filterrowdoc.ts index 060d3e05795..217bc54521c 100644 --- a/src/app/showcase/doc/table/filterrowdoc.ts +++ b/src/app/showcase/doc/table/filterrowdoc.ts @@ -9,105 +9,107 @@ import { CustomerService } from '../../service/customerservice'; template: `

    Filters are displayed inline within a separate row.

     -
    - - -
    - - - - -
    -     - - - Name - Country - Agent - Status - Verified - - - - - - - - - - - - - -
    - - {{ option.name }} -
    -     -     -     -     - - - - - - - - - - - - - - - - -     - - - - {{ customer.name }} - - - - {{ customer.country.name }} - - - - {{ customer.representative.name }} - - - - - - - - - - - - No customers found. - - -     -
    + +
    + + +
    + + + + +
    +     + + + Name + Country + Agent + Status + Verified + + + + + + + + + + + + + +
    + + {{ option.name }} +
    +     +     +     +     + + + + + + + + + + + + + + + + +     + + + + {{ customer.name }} + + + + {{ customer.country.name }} + + + + {{ customer.representative.name }} + + + + + + + + + + + + No customers found. + + +     +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class FilterRowDoc implements OnInit { +export class FilterRowDoc { customers!: Customer[]; representatives!: Representative[]; @@ -120,7 +122,7 @@ export class FilterRowDoc implements OnInit { constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.loading = false; diff --git a/src/app/showcase/doc/table/flexiblescrolldoc.ts b/src/app/showcase/doc/table/flexiblescrolldoc.ts index d480dd4be55..df499a0bc10 100644 --- a/src/app/showcase/doc/table/flexiblescrolldoc.ts +++ b/src/app/showcase/doc/table/flexiblescrolldoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @@ -11,6 +11,7 @@ import { CustomerService } from '../../service/customerservice'; viewport adjusts itself according to the size changes.

    +
    @@ -39,17 +40,18 @@ import { CustomerService } from '../../service/customerservice';
    + `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class FlexibleScrollDoc implements OnInit { +export class FlexibleScrollDoc { customers!: Customer[]; dialogVisible: boolean = false; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; }); diff --git a/src/app/showcase/doc/table/frozencolumnsdoc.ts b/src/app/showcase/doc/table/frozencolumnsdoc.ts index e31c57ec2d9..5e2aee183be 100644 --- a/src/app/showcase/doc/table/frozencolumnsdoc.ts +++ b/src/app/showcase/doc/table/frozencolumnsdoc.ts @@ -8,49 +8,51 @@ import { CustomerService } from '../../service/customerservice'; 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.

     -
    - - - - - - Name - Id - Country - Date - Company - Status - Activity - Representative - Balance - - - - - {{ customer.name }} - {{ customer.id }} - {{ customer.country.name }} - {{ customer.date }} - {{ customer.company }} - {{ customer.status }} - {{ customer.activity }} - {{ customer.representative.name }} - {{ formatCurrency(customer.balance) }} - - - -
    + +
    + + + + + + Name + Id + Country + Date + Company + Status + Activity + Representative + Balance + + + + + {{ customer.name }} + {{ customer.id }} + {{ customer.country.name }} + {{ customer.date }} + {{ customer.company }} + {{ customer.status }} + {{ customer.activity }} + {{ customer.representative.name }} + {{ formatCurrency(customer.balance) }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class FrozenColumnsDoc implements OnInit { +export class FrozenColumnsDoc { balanceFrozen: boolean = false; customers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/frozenrowsdoc.ts b/src/app/showcase/doc/table/frozenrowsdoc.ts index 93909c51e75..bd473bcf91c 100644 --- a/src/app/showcase/doc/table/frozenrowsdoc.ts +++ b/src/app/showcase/doc/table/frozenrowsdoc.ts @@ -8,52 +8,54 @@ import { CustomerService } from '../../service/customerservice'; template: `

    Frozen rows are used to fix certain rows while scrolling, this data is defined with the frozenValue property.

     -
    - - - - Name - Country - Company - Representative - - - - - - {{ customer.name }} - {{ customer.country.name }} - {{ customer.company }} - {{ customer.representative.name }} - - - - - - - - {{ customer.name }} - {{ customer.country.name }} - {{ customer.company }} - {{ customer.representative.name }} - - - - - - -
    + +
    + + + + Name + Country + Company + Representative + + + + + + {{ customer.name }} + {{ customer.country.name }} + {{ customer.company }} + {{ customer.representative.name }} + + + + + + + + {{ customer.name }} + {{ customer.country.name }} + {{ customer.company }} + {{ customer.representative.name }} + + + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class FrozenRowsDoc implements OnInit { +export class FrozenRowsDoc { unlockedCustomers!: Customer[]; lockedCustomers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMedium().then((data) => { this.unlockedCustomers = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/gridlinesdoc.ts b/src/app/showcase/doc/table/gridlinesdoc.ts index 42280e85cde..cea6a97d548 100644 --- a/src/app/showcase/doc/table/gridlinesdoc.ts +++ b/src/app/showcase/doc/table/gridlinesdoc.ts @@ -8,28 +8,30 @@ import { ProductService } from '../../service/productservice'; template: `

    Adding p-datatable-gridlines class displays grid lines.

     -
    - - Header - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - Footer - -
    + +
    + + Header + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + Footer + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -38,7 +40,7 @@ export class GridlinesDoc { constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/horizontalandverticaldoc.ts b/src/app/showcase/doc/table/horizontalandverticaldoc.ts index 3295d2116a1..f0152d05df9 100644 --- a/src/app/showcase/doc/table/horizontalandverticaldoc.ts +++ b/src/app/showcase/doc/table/horizontalandverticaldoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @@ -8,6 +8,7 @@ import { CustomerService } from '../../service/customerservice'; template: `

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

     +
    @@ -51,15 +52,16 @@ import { CustomerService } from '../../service/customerservice';
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class HorizontalAndVerticalScrollDoc implements OnInit { +export class HorizontalAndVerticalScrollDoc { customers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/lazyloaddoc.ts b/src/app/showcase/doc/table/lazyloaddoc.ts index a390dbb476b..75e5e32a85f 100644 --- a/src/app/showcase/doc/table/lazyloaddoc.ts +++ b/src/app/showcase/doc/table/lazyloaddoc.ts @@ -13,73 +13,75 @@ import { CustomerService } from '../../service/customerservice'; the next page or whether there are instant data changes, the selection array can be implemented in several ways. One of them is as in the example below.

    -
    - - - - - Name - Country - Company - Representative - - - - - - - - - - - - - - - - - - - -
    - - {{ option.name }} -
    -     -     -     -     - - -     - - - - - - {{ customer.name }} - {{ customer.country.name }} - {{ customer.company }} - {{ customer.representative.name }} - - -     -
    + +
    + + + + + Name + Country + Company + Representative + + + + + + + + + + + + + + + + + + + +
    + + {{ option.name }} +
    +     +     +     +     + + +     + + + + + + {{ customer.name }} + {{ customer.country.name }} + {{ customer.company }} + {{ customer.representative.name }} + + +     +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -99,6 +101,10 @@ export class LazyLoadDoc implements OnInit { constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} ngOnInit() { + this.loading = true; + } + + loadDemoData() { this.representatives = [ { name: 'Amy Elsner', image: 'amyelsner.png' }, { name: 'Anna Fali', image: 'annafali.png' }, @@ -111,8 +117,6 @@ export class LazyLoadDoc implements OnInit { { name: 'Stephen Shaw', image: 'stephenshaw.png' }, { name: 'Xuxue Feng', image: 'xuxuefeng.png' } ]; - - this.loading = true; } loadCustomers(event: LazyLoadEvent) { diff --git a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts index 4572d26c4d1..6705fd59679 100644 --- a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts +++ b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -9,38 +9,40 @@ import { ProductService } from '../../service/productservice';

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

     -
    - - - - Code - Name - Category - Quantity - Price - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - {{ product.price | currency : 'USD' }} - - - -
    + +
    + + + + Code + Name + Category + Quantity + Price + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + {{ product.price | currency : 'USD' }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class MultipleColumnSortDoc implements OnInit { +export class MultipleColumnSortDoc { products: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/multipleselectiondoc.ts b/src/app/showcase/doc/table/multipleselectiondoc.ts index c613c5dd485..5454951dd65 100644 --- a/src/app/showcase/doc/table/multipleselectiondoc.ts +++ b/src/app/showcase/doc/table/multipleselectiondoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -11,35 +11,37 @@ import { ProductService } from '../../service/productservice'; enables multiple selection without meta key.

    -
    -
    - - MetaKey + +
    +
    + + MetaKey +
    + + Multiple Selection with MetaKey + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + +
    - - Multiple Selection with MetaKey - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class MultipleSelectionDoc implements OnInit { +export class MultipleSelectionDoc { products!: Product[]; selectedProducts!: Product; @@ -48,7 +50,7 @@ export class MultipleSelectionDoc implements OnInit { constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/pageonlyselectiondoc.ts b/src/app/showcase/doc/table/pageonlyselectiondoc.ts index 98ad9bb8046..e8f658eaa7b 100644 --- a/src/app/showcase/doc/table/pageonlyselectiondoc.ts +++ b/src/app/showcase/doc/table/pageonlyselectiondoc.ts @@ -5,43 +5,45 @@ import { ProductService } from '../../service/productservice'; @Component({ selector: 'page-only-selection-doc', - template: `
    - - - - - - - Code - Name - Category - Quantity - - - - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + template: ` +
    + + + + + + + Code + Name + Category + Quantity + + + + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class PageOnlySelectionDoc implements OnInit { +export class PageOnlySelectionDoc { products!: Product[]; selectedProducts!: Product; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/paginatorbasicdoc.ts b/src/app/showcase/doc/table/paginatorbasicdoc.ts index df443d8c440..2b8a053aabd 100644 --- a/src/app/showcase/doc/table/paginatorbasicdoc.ts +++ b/src/app/showcase/doc/table/paginatorbasicdoc.ts @@ -11,40 +11,42 @@ import { CustomerService } from '../../service/customerservice'; lazy loading example.

    -
    - - - - Name - Country - Company - Representative - - - - - {{ customer.name }} - {{ customer.country.name }} - {{ customer.company }} - {{ customer.representative.name }} - - - - - - - - - -
    + +
    + + + + Name + Country + Company + Representative + + + + + {{ customer.name }} + {{ customer.country.name }} + {{ customer.company }} + {{ customer.representative.name }} + + + + + + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -53,7 +55,7 @@ export class PaginatorBasicDoc { constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/paginatorlocaledoc.ts b/src/app/showcase/doc/table/paginatorlocaledoc.ts index ead1766b188..b785093f45c 100644 --- a/src/app/showcase/doc/table/paginatorlocaledoc.ts +++ b/src/app/showcase/doc/table/paginatorlocaledoc.ts @@ -8,41 +8,43 @@ import { CustomerService } from '../../service/customerservice'; 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.

     -
    - - - - Name - Country - Company - Representative - - - - - {{ customer.name }} - {{ customer.country.name }} - {{ customer.company }} - {{ customer.representative.name }} - - - - - - - - - -
    + +
    + + + + Name + Country + Company + Representative + + + + + {{ customer.name }} + {{ customer.country.name }} + {{ customer.company }} + {{ customer.representative.name }} + + + + + + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -51,7 +53,7 @@ export class PaginatorLocaleDoc { constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts index 62da8b17cdb..b847b0d003a 100644 --- a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts +++ b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts @@ -9,6 +9,7 @@ import { CustomerService } from '../../service/customerservice';

    Paginator can also be controlled via model using a binding to the first property where changes trigger a pagination.

     +
    @@ -44,6 +45,7 @@ import { CustomerService } from '../../service/customerservice';
    + `, changeDetection: ChangeDetectionStrategy.OnPush @@ -57,7 +59,7 @@ export class PaginatorProgrammaticDoc { constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.customerService.getCustomersLarge().then((customers) => { this.customers = customers; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/productsdoc.ts b/src/app/showcase/doc/table/productsdoc.ts index cf9aa6b96d1..b32ac269184 100644 --- a/src/app/showcase/doc/table/productsdoc.ts +++ b/src/app/showcase/doc/table/productsdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { ConfirmationService, MessageService } from 'primeng/api'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; @@ -9,152 +9,154 @@ import { ProductService } from '../../service/productservice'; template: `

    CRUD implementation example with a Dialog.

     -
    - - - - - - + +
    + + + + + + + + + + + + + + + +
    +
    Manage Products
    + + + + +
    +     + + + + + + Name + Image + Price + Category + Reviews + Status + + + + + + + + + {{ product.name }} + + {{ product.price | currency : 'USD' }} + {{ product.category }} + + + + + + + + + + + +
    In total there are {{ products ? products.length : 0 }} products.
    +     +     + + + + +
    + + + Name is required. +
    +
    + + +
    - - - - - - - - -
    -
    Manage Products
    - - - - -
    -     - - - - - - Name - Image - Price - Category - Reviews - Status - - - - - - - - - {{ product.name }} - - {{ product.price | currency : 'USD' }} - {{ product.category }} - - - - - - - - - - - -
    In total there are {{ products ? products.length : 0 }} products.
    -     -     - - - - -
    - - - Name is required. -
    -
    - - -
    - -
    - - - - - - - - - -
    - -
    - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    +
    + + + + + + + + +
    -
    -
    -
    - - +
    + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    -
    - - + +
    +
    + + +
    +
    + + +
    -
    - + - - - - - + + + + + - -
    + +
    + `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService, ConfirmationService] }) -export class ProductsDoc implements OnInit { +export class ProductsDoc { productDialog: boolean = false; products!: Product[]; @@ -169,7 +171,7 @@ export class ProductsDoc implements OnInit { constructor(private productService: ProductService, private messageService: MessageService, private confirmationService: ConfirmationService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProducts().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts index 9b74b40711a..dccb0b788d8 100644 --- a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts +++ b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -8,41 +8,43 @@ import { ProductService } from '../../service/productservice'; template: `

    Single selection can also be handled using radio buttons.

     -
    - - - - - Code - Name - Category - Quantity - - - - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + +
    + + + + + Code + Name + Category + Quantity + + + + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class RadioButtonSelectionDoc implements OnInit { +export class RadioButtonSelectionDoc { products!: Product[]; selectedProduct!: Product; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/reorderdoc.ts b/src/app/showcase/doc/table/reorderdoc.ts index 79a8e07760d..9c26405f5c6 100644 --- a/src/app/showcase/doc/table/reorderdoc.ts +++ b/src/app/showcase/doc/table/reorderdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -17,39 +17,41 @@ interface Column { reorder completes.

    -
    - - - - - - {{ col.header }} - - - - - - - - - - {{ rowData[col.field] }} - - - - -
    + +
    + + + + + + {{ col.header }} + + + + + + + + + + {{ rowData[col.field] }} + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ReorderDoc implements OnInit { +export class ReorderDoc { products!: Product[]; cols!: Column[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsSmall().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/responsivescrolldoc.ts b/src/app/showcase/doc/table/responsivescrolldoc.ts index 48687abdd63..356b4efee11 100644 --- a/src/app/showcase/doc/table/responsivescrolldoc.ts +++ b/src/app/showcase/doc/table/responsivescrolldoc.ts @@ -14,43 +14,45 @@ interface Column {

    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.

    -
    - - - - Name - Price - Category - Quantity - Status - Reviews - - - - - {{ product.name }} - {{ product.price | currency : 'USD' }} - {{ product.category }} - {{ product.quantity }} - - - - - - - -
    + +
    + + + + Name + Price + Category + Quantity + Status + Reviews + + + + + {{ product.name }} + {{ product.price | currency : 'USD' }} + {{ product.category }} + {{ product.quantity }} + + + + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ResponsiveScrollDoc implements OnInit { +export class ResponsiveScrollDoc { products!: Product[]; cols!: Column[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/responsivestackdoc.ts b/src/app/showcase/doc/table/responsivestackdoc.ts index e4e4196bd1e..1a0d2dda612 100644 --- a/src/app/showcase/doc/table/responsivestackdoc.ts +++ b/src/app/showcase/doc/table/responsivestackdoc.ts @@ -16,41 +16,43 @@ interface Column { p-column-title style class to the body cells.

    -
    - - - - Name - Price - Category - Quantity - Status - Reviews - - - - - Name{{ product.name }} - Price{{ product.price | currency : 'USD' }} - Category{{ product.category }} - Quantity{{ product.quantity }} - - Reviews - - - -
    + +
    + + + + Name + Price + Category + Quantity + Status + Reviews + + + + + Name{{ product.name }} + Price{{ product.price | currency : 'USD' }} + Category{{ product.category }} + Quantity{{ product.quantity }} + + Reviews + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class ResponsiveStackDoc implements OnInit { +export class ResponsiveStackDoc{ products!: Product[]; cols!: Column[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/roweditdoc.ts b/src/app/showcase/doc/table/roweditdoc.ts index b61a2e7faa2..82fb996497d 100644 --- a/src/app/showcase/doc/table/roweditdoc.ts +++ b/src/app/showcase/doc/table/roweditdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { MessageService, SelectItem } from 'primeng/api'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; @@ -21,76 +21,78 @@ import { ProductService } from '../../service/productservice'; whose key is the dataKey of the record where the value is any arbitrary number greater than zero.

    -
    - - - - - Code - Name - Inventory Status - Price - - - - - - - - - - - - {{ product.code }} - - - - - - - - - - {{ product.name }} - - - - - - - - - - {{ product.inventoryStatus }} - - - - - - - - - - {{ product.price | currency : 'USD' }} - - - - -
    - - - -
    - - -     -     -
    + +
    + + + + + Code + Name + Inventory Status + Price + + + + + + + + + + + + {{ product.code }} + + + + + + + + + + {{ product.name }} + + + + + + + + + + {{ product.inventoryStatus }} + + + + + + + + + + {{ product.price | currency : 'USD' }} + + + + +
    + + + +
    + + +     +     +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService] }) -export class RowEditDoc implements OnInit { +export class RowEditDoc { products!: Product[]; statuses!: SelectItem[]; @@ -99,7 +101,7 @@ export class RowEditDoc implements OnInit { constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/rowexpanddoc.ts b/src/app/showcase/doc/table/rowexpanddoc.ts index 474ef4c3380..2c06eedf5d8 100644 --- a/src/app/showcase/doc/table/rowexpanddoc.ts +++ b/src/app/showcase/doc/table/rowexpanddoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -12,6 +12,7 @@ import { ProductService } from '../../service/productservice'; event for the element.

    +
    @@ -79,15 +80,16 @@ import { ProductService } from '../../service/productservice';
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class RowExpandDoc implements OnInit { +export class RowExpandDoc { products!: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsWithOrdersSmall().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/rowspangroupingdoc.ts b/src/app/showcase/doc/table/rowspangroupingdoc.ts index d21d5216966..6a919ca0d2b 100644 --- a/src/app/showcase/doc/table/rowspangroupingdoc.ts +++ b/src/app/showcase/doc/table/rowspangroupingdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @@ -8,55 +8,57 @@ import { CustomerService } from '../../service/customerservice'; template: `

    When rowGroupMode is configured to be rowspan, the grouping column spans multiple rows.

     -
    - - - - # - Representative - Name - Country - Company - Status - Date - - - - - {{ rowIndex }} - - - {{ customer.representative.name }} - - - {{ customer.name }} - - - - {{ customer.country.name }} - - - {{ customer.company }} - - - - - - {{ customer.date }} - - - - -
    + +
    + + + + # + Representative + Name + Country + Company + Status + Date + + + + + {{ rowIndex }} + + + {{ customer.representative.name }} + + + {{ customer.name }} + + + + {{ customer.country.name }} + + + {{ customer.company }} + + + + + + {{ customer.date }} + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class RowspanGroupingDoc implements OnInit { +export class RowspanGroupingDoc { customers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/selectioneventsdoc.ts b/src/app/showcase/doc/table/selectioneventsdoc.ts index b24a25a9938..d96ca39eb50 100644 --- a/src/app/showcase/doc/table/selectioneventsdoc.ts +++ b/src/app/showcase/doc/table/selectioneventsdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { MessageService } from 'primeng/api'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; @@ -9,6 +9,7 @@ import { ProductService } from '../../service/productservice'; template: `

    Table provides onRowSelect and onRowUnselect events to listen selection events.

     +
    @@ -30,18 +31,19 @@ import { ProductService } from '../../service/productservice';
    +     `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService] }) -export class SelectionEventsDoc implements OnInit { +export class SelectionEventsDoc { products!: Product[]; selectedProduct!: Product; constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/singlecolumnsortdoc.ts b/src/app/showcase/doc/table/singlecolumnsortdoc.ts index aabda069fa0..7c89579e650 100644 --- a/src/app/showcase/doc/table/singlecolumnsortdoc.ts +++ b/src/app/showcase/doc/table/singlecolumnsortdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -12,6 +12,7 @@ import { ProductService } from '../../service/productservice';

    Default sorting is executed on a single column, in order to enable multiple field sorting, set sortMode property to "multiple" and use metakey when clicking on another column.

    +
    @@ -34,15 +35,16 @@ import { ProductService } from '../../service/productservice';
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class SingleColumnSortDoc implements OnInit { +export class SingleColumnSortDoc { products!: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData(){ this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/singleselectiondoc.ts b/src/app/showcase/doc/table/singleselectiondoc.ts index 170791b622a..ae0e9741aaf 100644 --- a/src/app/showcase/doc/table/singleselectiondoc.ts +++ b/src/app/showcase/doc/table/singleselectiondoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -15,37 +15,39 @@ import { ProductService } from '../../service/productservice'; setting it to false.

    -
    - - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + +
    + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class SingleSelectionDoc implements OnInit { +export class SingleSelectionDoc { products!: Product[]; selectedProduct!: Product; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/sizedoc.ts b/src/app/showcase/doc/table/sizedoc.ts index f2cf54c2556..b828c9691fa 100644 --- a/src/app/showcase/doc/table/sizedoc.ts +++ b/src/app/showcase/doc/table/sizedoc.ts @@ -8,29 +8,31 @@ import { ProductService } from '../../service/productservice'; template: `

    In addition to a regular table, alternatives with alternative sizes are available.

     -
    -
    - + +
    +
    + +
    + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + +
    - - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -43,7 +45,7 @@ export class SizeDoc { constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/statefuldoc.ts b/src/app/showcase/doc/table/statefuldoc.ts index 8c196c186a4..46ff3de6f62 100644 --- a/src/app/showcase/doc/table/statefuldoc.ts +++ b/src/app/showcase/doc/table/statefuldoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @@ -12,6 +12,7 @@ import { CustomerService } from '../../service/customerservice'; browser is closed. Other alternative is local referring to localStorage for an extended lifetime.

    +
    @@ -65,17 +66,18 @@ import { CustomerService } from '../../service/customerservice';
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class StatefulDoc implements OnInit { +export class StatefulDoc { customers!: Customer[]; selectedCustomers!: Customer; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMini().then((data) => { this.customers = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/stripeddoc.ts b/src/app/showcase/doc/table/stripeddoc.ts index 2bcbb8f7d2e..173dd8b3920 100644 --- a/src/app/showcase/doc/table/stripeddoc.ts +++ b/src/app/showcase/doc/table/stripeddoc.ts @@ -8,26 +8,28 @@ import { ProductService } from '../../service/productservice'; template: `

    Adding p-datatable-striped class displays striped rows.

     -
    - - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - {{ product.quantity }} - - - -
    + +
    + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + {{ product.quantity }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) @@ -36,7 +38,7 @@ export class StripedDoc { constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/styledoc.ts b/src/app/showcase/doc/table/styledoc.ts index 55cf647938f..8155d893a46 100644 --- a/src/app/showcase/doc/table/styledoc.ts +++ b/src/app/showcase/doc/table/styledoc.ts @@ -8,30 +8,32 @@ import { ProductService } from '../../service/productservice'; template: `

    Certain rows or cells can easily be styled based on conditions.

     -
    - - - - Code - Name - Category - Quantity - - - - - {{ product.code }} - {{ product.name }} - {{ product.category }} - -
    - {{ product.quantity }} -
    - - -     -     -
    + +
    + + + + Code + Name + Category + Quantity + + + + + {{ product.code }} + {{ product.name }} + {{ product.category }} + +
    + {{ product.quantity }} +
    + + +     +     +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [ @@ -58,12 +60,12 @@ import { ProductService } from '../../service/productservice'; ` ] }) -export class StyleDoc implements OnInit { +export class StyleDoc { products!: Product[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/subheadergroupingdoc.ts b/src/app/showcase/doc/table/subheadergroupingdoc.ts index be2a4dea9dd..72d68b02d64 100644 --- a/src/app/showcase/doc/table/subheadergroupingdoc.ts +++ b/src/app/showcase/doc/table/subheadergroupingdoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @@ -11,61 +11,63 @@ import { CustomerService } from '../../service/customerservice'; footer with groupfooter templates.

    -
    - - - - Name - Country - Company - Status - Date - - - - - - - {{ customer.representative.name }} - - - - - - Total Customers: {{ calculateCustomerTotal(customer.representative.name) }} - - - - - - {{ customer.name }} - - - - {{ customer.country.name }} - - - {{ customer.company }} - - - - - - {{ customer.date }} - - - - -
    + +
    + + + + Name + Country + Company + Status + Date + + + + + + + {{ customer.representative.name }} + + + + + + Total Customers: {{ calculateCustomerTotal(customer.representative.name) }} + + + + + + {{ customer.name }} + + + + {{ customer.country.name }} + + + {{ customer.company }} + + + + + + {{ customer.date }} + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class SubheaderGroupingDoc implements OnInit { +export class SubheaderGroupingDoc { customers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/tabledoc.module.ts b/src/app/showcase/doc/table/tabledoc.module.ts index 2f8439f32f0..36925424477 100644 --- a/src/app/showcase/doc/table/tabledoc.module.ts +++ b/src/app/showcase/doc/table/tabledoc.module.ts @@ -81,7 +81,7 @@ import { StylingDoc } from './stylingdoc'; import { SelectionEventsDoc } from './selectioneventsdoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { PaginatorLocaleDoc } from './paginatorlocaledoc'; - +import { DeferredDemoModule } from 'primeng/demo'; @NgModule({ imports: [ CommonModule, @@ -112,7 +112,8 @@ import { PaginatorLocaleDoc } from './paginatorlocaledoc'; SkeletonModule, SelectButtonModule, AppCodeModule, - AppDocModule + AppDocModule, + DeferredDemoModule ], declarations: [ ImportDoc, diff --git a/src/app/showcase/doc/table/templatedoc.ts b/src/app/showcase/doc/table/templatedoc.ts index eb84559c35a..8200e98ad42 100644 --- a/src/app/showcase/doc/table/templatedoc.ts +++ b/src/app/showcase/doc/table/templatedoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Product } from '../../domain/product'; import { ProductService } from '../../service/productservice'; @@ -13,52 +13,54 @@ interface Column { template: `

    Custom content at header, body and footer sections are supported via templating.

     -
    - - -
    - Products - -
    -     - - - Name - Image - Price - Category - Reviews - Status - - - - - {{ product.name }} - - {{ product.price | currency : 'USD' }} - {{ product.category }} - - - - - - - -
    In total there are {{ products ? products.length : 0 }} products.
    -     -     -
    + +
    + + +
    + Products + +
    +     + + + Name + Image + Price + Category + Reviews + Status + + + + + {{ product.name }} + + {{ product.price | currency : 'USD' }} + {{ product.category }} + + + + + + + +
    In total there are {{ products ? products.length : 0 }} products.
    +     +     +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class TemplateDoc implements OnInit { +export class TemplateDoc { products!: Product[]; cols!: Column[]; constructor(private productService: ProductService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.productService.getProductsMini().then((data) => { this.products = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/verticalscrolldoc.ts b/src/app/showcase/doc/table/verticalscrolldoc.ts index 263b50de847..58659e26fa0 100644 --- a/src/app/showcase/doc/table/verticalscrolldoc.ts +++ b/src/app/showcase/doc/table/verticalscrolldoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core'; import { Code } from '../../domain/code'; import { Customer } from '../../domain/customer'; import { CustomerService } from '../../service/customerservice'; @@ -8,35 +8,37 @@ import { CustomerService } from '../../service/customerservice'; template: `

    Adding scrollable property along with a scrollHeight for the data viewport enables vertical scrolling with fixed headers.

     -
    - - - - Name - Country - Company - Representative - - - - - {{ customer.name }} - {{ customer.country.name }} - {{ customer.company }} - {{ customer.representative.name }} - - - -
    + +
    + + + + Name + Country + Company + Representative + + + + + {{ customer.name }} + {{ customer.country.name }} + {{ customer.company }} + {{ customer.representative.name }} + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class VerticalScrollDoc implements OnInit { +export class VerticalScrollDoc { customers!: Customer[]; constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {} - ngOnInit() { + loadDemoData() { this.customerService.getCustomersMedium().then((data) => { this.customers = data; this.cd.markForCheck(); diff --git a/src/app/showcase/doc/table/virtualscrolldoc.ts b/src/app/showcase/doc/table/virtualscrolldoc.ts index 495559cc579..3bbb1c6f04c 100644 --- a/src/app/showcase/doc/table/virtualscrolldoc.ts +++ b/src/app/showcase/doc/table/virtualscrolldoc.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; import { Car } from '../../domain/car'; import { Code } from '../../domain/code'; import { CarService } from '../../service/carservice'; @@ -16,6 +16,7 @@ interface Column { suggested to use the same virtualScrollItemSize value on the tr element inside the body template.

    +
    @@ -34,10 +35,11 @@ interface Column {
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class VirtualScrollDoc implements OnInit { +export class VirtualScrollDoc { cars!: Car[]; virtualCars!: Car[]; @@ -46,7 +48,7 @@ export class VirtualScrollDoc implements OnInit { constructor(private carService: CarService) {} - ngOnInit() { + loadDemoData() { this.cols = [ { field: 'id', header: 'Id' }, { field: 'vin', header: 'Vin' }, diff --git a/src/app/showcase/doc/table/virtualscrolllazydoc.ts b/src/app/showcase/doc/table/virtualscrolllazydoc.ts index 7fdc9c34a56..e24c8847528 100644 --- a/src/app/showcase/doc/table/virtualscrolllazydoc.ts +++ b/src/app/showcase/doc/table/virtualscrolllazydoc.ts @@ -17,35 +17,37 @@ interface Column { suggested to use the same virtualScrollItemSize value on the tr element inside the body template.

    -
    - - - - - {{ col.header }} - - - - - - - {{ rowData[col.field] }} - - - - - - - - - - - -
    + +
    + + + + + {{ col.header }} + + + + + + + {{ rowData[col.field] }} + + + + + + + + + + + +
    +     `, changeDetection: ChangeDetectionStrategy.OnPush }) -export class VirtualScrollLazyDoc implements OnInit { +export class VirtualScrollLazyDoc { cars!: Car[]; virtualCars!: Car[]; @@ -54,7 +56,7 @@ export class VirtualScrollLazyDoc implements OnInit { constructor(private carService: CarService) {} - ngOnInit() { + loadDemoData() { this.cols = [ { field: 'id', header: 'Id' }, { field: 'vin', header: 'Vin' }, From 6852f8be6cbbad490687e7fd977253d4337f281d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Wed, 3 Jan 2024 14:47:32 +0300 Subject: [PATCH 55/65] menubarsub role update --- src/app/components/menubar/menubar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts index dad923485a8..b654a225a1c 100755 --- a/src/app/components/menubar/menubar.ts +++ b/src/app/components/menubar/menubar.ts @@ -57,7 +57,7 @@ export class MenubarService { #menubar [ngClass]="{ 'p-submenu-list': !root, 'p-menubar-root-list': root }" [attr.data-pc-section]="'menu'" - role="menu" + role="menubar" (focus)="menuFocus.emit($event)" (blur)="menuBlur.emit($event)" [tabindex]="0" From a55eeccf159540c7dda4596e054dd988ff4fd3b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Wed, 3 Jan 2024 14:56:32 +0300 Subject: [PATCH 56/65] =?UTF-8?q?Steps=20|=C2=A0aria-current=20attribute?= =?UTF-8?q?=20added?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/steps/steps.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/steps/steps.ts b/src/app/components/steps/steps.ts index 9aeee78bda8..d439bdba688 100755 --- a/src/app/components/steps/steps.ts +++ b/src/app/components/steps/steps.ts @@ -21,6 +21,7 @@ import { Subscription } from 'rxjs'; #menuitem [ngStyle]="item.style" [class]="item.styleClass" + [attr.aria-current]="isActive(item, i) ? 'step' : undefined" role="presentation" [attr.id]="item.id" pTooltip From f955d12506bfdc06dfce5876bdcaa9a114f0165a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Wed, 3 Jan 2024 15:37:05 +0300 Subject: [PATCH 57/65] ScrollPanel | aria-controls attribute added --- src/app/components/scrollpanel/scrollpanel.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/app/components/scrollpanel/scrollpanel.ts b/src/app/components/scrollpanel/scrollpanel.ts index 471779455d0..990efa1065d 100755 --- a/src/app/components/scrollpanel/scrollpanel.ts +++ b/src/app/components/scrollpanel/scrollpanel.ts @@ -22,6 +22,8 @@ import { import { PrimeTemplate } from 'primeng/api'; import { DomHandler } from 'primeng/dom'; import { Nullable } from 'primeng/ts-helpers'; +import { UniqueComponentId } from 'primeng/utils'; + /** * ScrollPanel is a cross browser, lightweight and themable alternative to native browser scrollbar. * @group Components @@ -44,6 +46,7 @@ import { Nullable } from 'primeng/ts-helpers'; [attr.aria-orientation]="'horizontal'" [attr.aria-valuenow]="lastScrollLeft" [attr.data-pc-section]="'barx'" + [attr.aria-controls]="contentId" (mousedown)="onXBarMouseDown($event)" (keydown)="onKeyDown($event)" (keyup)="onKeyUp()" @@ -58,6 +61,7 @@ import { Nullable } from 'primeng/ts-helpers'; [attr.aria-orientation]="'vertical'" [attr.aria-valuenow]="lastScrollTop" [attr.data-pc-section]="'bary'" + [attr.aria-controls]="contentId" (mousedown)="onYBarMouseDown($event)" (keydown)="onKeyDown($event)" (keyup)="onKeyUp()" @@ -125,6 +129,8 @@ export class ScrollPanel implements AfterViewInit, AfterContentInit, OnDestroy { timer: any; + contentId: string | undefined; + windowResizeListener: VoidFunction | null | undefined; contentScrollListener: VoidFunction | null | undefined; @@ -139,7 +145,9 @@ export class ScrollPanel implements AfterViewInit, AfterContentInit, OnDestroy { documentMouseUpListener: Nullable<(event?: any) => void>; - constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef, @Inject(DOCUMENT) private document: Document, private renderer: Renderer2) {} + constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef, @Inject(DOCUMENT) private document: Document, private renderer: Renderer2) { + this.contentId = UniqueComponentId() + '_content'; + } ngAfterViewInit() { if (isPlatformBrowser(this.platformId)) { From 6b47d101294e05ef46c74666b4f91538268e7dfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mehmet=20=C3=87etin?= <92744169+mehmetcetin01140@users.noreply.github.com> Date: Wed, 3 Jan 2024 16:02:49 +0300 Subject: [PATCH 58/65] metaKeySelection default type is changed as false --- src/app/components/listbox/listbox.ts | 2 +- src/app/components/orderlist/orderlist.ts | 2 +- src/app/components/picklist/picklist.ts | 2 +- src/app/components/table/table.ts | 2 +- src/app/components/tree/tree.ts | 2 +- src/app/components/treeselect/treeselect.ts | 2 +- src/app/components/treetable/treetable.ts | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/components/listbox/listbox.ts b/src/app/components/listbox/listbox.ts index 10d6141cbce..c7fc759b464 100755 --- a/src/app/components/listbox/listbox.ts +++ b/src/app/components/listbox/listbox.ts @@ -392,7 +392,7 @@ export class Listbox implements AfterContentInit, OnInit, ControlValueAccessor, * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = true; + @Input() metaKeySelection: boolean = false; /** * A property to uniquely identify a value in options. * @group Props diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts index 93f2cf3598b..b364408d466 100755 --- a/src/app/components/orderlist/orderlist.ts +++ b/src/app/components/orderlist/orderlist.ts @@ -221,7 +221,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit { * When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = true; + @Input() metaKeySelection: boolean = false; /** * Whether to enable dragdrop based reordering. diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts index 1dc877357b3..b4e24350d34 100755 --- a/src/app/components/picklist/picklist.ts +++ b/src/app/components/picklist/picklist.ts @@ -471,7 +471,7 @@ export class PickList implements AfterViewChecked, AfterContentInit { * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = true; + @Input() metaKeySelection: boolean = false; /** * Whether to enable dragdrop based reordering. * @group Props diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index 2a8715b9e2d..f985bd765ab 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -474,7 +474,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable * Defines whether metaKey should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean | undefined = true; + @Input() metaKeySelection: boolean | undefined = false; /** * Defines if the row is selectable. * @group Props diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts index 41f08ac5c4f..26571a10d2a 100755 --- a/src/app/components/tree/tree.ts +++ b/src/app/components/tree/tree.ts @@ -887,7 +887,7 @@ export class Tree implements OnInit, AfterContentInit, OnChanges, OnDestroy, Blo * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = true; + @Input() metaKeySelection: boolean = false; /** * Whether checkbox selections propagate to ancestor nodes. * @group Props diff --git a/src/app/components/treeselect/treeselect.ts b/src/app/components/treeselect/treeselect.ts index 2f579cbe859..f91cc1a390f 100755 --- a/src/app/components/treeselect/treeselect.ts +++ b/src/app/components/treeselect/treeselect.ts @@ -211,7 +211,7 @@ export class TreeSelect implements AfterContentInit { * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean = true; + @Input() metaKeySelection: boolean = false; /** * Defines how the selected items are displayed. * @group Props diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts index ee0c2dd1e14..b948963f348 100755 --- a/src/app/components/treetable/treetable.ts +++ b/src/app/components/treetable/treetable.ts @@ -410,7 +410,7 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable * Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically. * @group Props */ - @Input() metaKeySelection: boolean | undefined = true; + @Input() metaKeySelection: boolean | undefined = false; /** * Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields. * @group Props From 4b49e6b6c1326719e09d2034c8442f556be3b7d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 4 Jan 2024 10:29:13 +0300 Subject: [PATCH 59/65] Update structure --- src/app/components/demo/ng-package.json | 6 ------ src/app/components/demo/public_api.ts | 1 - .../demo/deferreddemo.scss} | 0 .../demo/deferreddemo.ts | 17 ++++------------- src/app/showcase/doc/table/tabledoc.module.ts | 5 +++-- 5 files changed, 7 insertions(+), 22 deletions(-) delete mode 100644 src/app/components/demo/ng-package.json delete mode 100644 src/app/components/demo/public_api.ts rename src/app/{components/demo/deferreddemo.css => showcase/demo/deferreddemo.scss} (100%) rename src/app/{components => showcase}/demo/deferreddemo.ts (77%) diff --git a/src/app/components/demo/ng-package.json b/src/app/components/demo/ng-package.json deleted file mode 100644 index ab5467eb7e4..00000000000 --- a/src/app/components/demo/ng-package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "$schema": "ng-packagr/ng-package.schema.json", - "lib": { - "entryFile": "public_api.ts" - } - } \ No newline at end of file diff --git a/src/app/components/demo/public_api.ts b/src/app/components/demo/public_api.ts deleted file mode 100644 index 75d9b10f247..00000000000 --- a/src/app/components/demo/public_api.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './deferreddemo'; diff --git a/src/app/components/demo/deferreddemo.css b/src/app/showcase/demo/deferreddemo.scss similarity index 100% rename from src/app/components/demo/deferreddemo.css rename to src/app/showcase/demo/deferreddemo.scss diff --git a/src/app/components/demo/deferreddemo.ts b/src/app/showcase/demo/deferreddemo.ts similarity index 77% rename from src/app/components/demo/deferreddemo.ts rename to src/app/showcase/demo/deferreddemo.ts index e8b1cfb3e48..45694fa6f3e 100755 --- a/src/app/components/demo/deferreddemo.ts +++ b/src/app/showcase/demo/deferreddemo.ts @@ -1,19 +1,17 @@ import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { Component, ElementRef, EventEmitter, Inject, Input, NgModule, OnInit, Output, PLATFORM_ID } from '@angular/core'; -import { SharedModule } from 'primeng/api'; +import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, PLATFORM_ID } from '@angular/core'; @Component({ selector: 'p-deferred-demo', + standalone: true, + imports: [CommonModule], template: `
    Loading...
    `, - styleUrls: ['./deferreddemo.css'], - host: { - class: 'p-element' - } + styleUrl: './deferreddemo.scss' }) export class DeferredDemo implements OnInit { visible: boolean = false; @@ -52,10 +50,3 @@ export class DeferredDemo implements OnInit { clearTimeout(this.timeout); } } - -@NgModule({ - imports: [CommonModule, SharedModule], - exports: [DeferredDemo, SharedModule], - declarations: [DeferredDemo] -}) -export class DeferredDemoModule {} diff --git a/src/app/showcase/doc/table/tabledoc.module.ts b/src/app/showcase/doc/table/tabledoc.module.ts index 36925424477..5bc4c656249 100644 --- a/src/app/showcase/doc/table/tabledoc.module.ts +++ b/src/app/showcase/doc/table/tabledoc.module.ts @@ -81,7 +81,8 @@ import { StylingDoc } from './stylingdoc'; import { SelectionEventsDoc } from './selectioneventsdoc'; import { AccessibilityDoc } from './accessibilitydoc'; import { PaginatorLocaleDoc } from './paginatorlocaledoc'; -import { DeferredDemoModule } from 'primeng/demo'; +import { DeferredDemo } from '../../demo/deferreddemo'; + @NgModule({ imports: [ CommonModule, @@ -113,7 +114,7 @@ import { DeferredDemoModule } from 'primeng/demo'; SelectButtonModule, AppCodeModule, AppDocModule, - DeferredDemoModule + DeferredDemo ], declarations: [ ImportDoc, From 30507a3208ca74d9c5d0d8b61567f747dbdd8d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 4 Jan 2024 10:46:53 +0300 Subject: [PATCH 60/65] Refactor --- src/app/showcase/demo/deferreddemo.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/showcase/demo/deferreddemo.ts b/src/app/showcase/demo/deferreddemo.ts index 45694fa6f3e..c4f76e9fbc6 100755 --- a/src/app/showcase/demo/deferreddemo.ts +++ b/src/app/showcase/demo/deferreddemo.ts @@ -6,10 +6,11 @@ import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, PLA standalone: true, imports: [CommonModule], template: ` -
    Loading...
    - - - + @if(!visible){ +
    Loading...
    + } @else { + + } `, styleUrl: './deferreddemo.scss' }) @@ -43,6 +44,7 @@ export class DeferredDemo implements OnInit { this.observer.observe(this.el.nativeElement); } } + ngOnDestroy() { if (!this.visible && this.el.nativeElement) { this.observer?.unobserve(this.el.nativeElement); From 632df90e29615a9e93258c87c9965d226017378f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 4 Jan 2024 11:06:18 +0300 Subject: [PATCH 61/65] Fixed #14476 --- src/app/components/megamenu/megamenu.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts index dac34266237..9e8f5b92e2a 100755 --- a/src/app/components/megamenu/megamenu.ts +++ b/src/app/components/megamenu/megamenu.ts @@ -614,7 +614,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit { this.focusedItemInfo.set({ index, key, parentKey, item }); this.dirty = !root; - DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement); } else { if (grouped) { this.onItemChange(event); @@ -623,7 +623,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit { this.hide(originalEvent); this.changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1); - DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement); } } } @@ -636,7 +636,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit { scrollInView(index: number = -1) { const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId; - const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`); + const element = DomHandler.findSingle(this.rootmenu?.el.nativeElement, `li[id="${id}"]`); if (element) { element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' }); @@ -657,14 +657,14 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit { this.focusedItemInfo.set({ index, key, parentKey, item }); grouped && (this.dirty = true); - isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement); } hide(event?, isFocus?: boolean) { this.activeItem.set(null); this.focusedItemInfo.set({ index: -1, key: '', parentKey: '', item: null }); - isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement); + isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement); this.dirty = false; } @@ -991,7 +991,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit { onEnterKey(event: KeyboardEvent) { if (this.focusedItemInfo().index !== -1) { - const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); + const element = DomHandler.findSingle(this.rootmenu?.el?.nativeElement, `li[id="${`${this.focusedItemId}`}"]`); const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]'); anchorElement ? anchorElement.click() : element && element.click(); @@ -1044,7 +1044,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit { if (isPlatformBrowser(this.platformId)) { if (!this.outsideClickListener) { this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => { - const isOutsideContainer = this.rootmenu.el.nativeElement !== event.target && !this.rootmenu.el.nativeElement.contains(event.target); + const isOutsideContainer = this.rootmenu?.el.nativeElement !== event.target && !this.rootmenu?.el.nativeElement.contains(event.target); if (isOutsideContainer) { this.hide(); From f3fe8764694d7a6843714b6613e7fa79c8fb6fa1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 4 Jan 2024 11:16:49 +0300 Subject: [PATCH 62/65] Fix role attribute --- src/app/components/tree/tree.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts index 26571a10d2a..86a4c935932 100755 --- a/src/app/components/tree/tree.ts +++ b/src/app/components/tree/tree.ts @@ -120,7 +120,7 @@ import {
    -