From 686edacdfcf53511c0a63816027768e69060ebe0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 6 Dec 2023 18:39:51 +0300 Subject: [PATCH 1/4] Update package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 0ac08b283dd..de53216a2bb 100755 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "primeng", "version": "17.0.0", "license": "SEE LICENSE IN LICENSE.md", + "type": "module", "scripts": { "ng": "ng", "start": "ng serve", From 09e5249562c31803a19ae171685e8cbcd441fb2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 7 Dec 2023 10:07:35 +0300 Subject: [PATCH 2/4] Fixed #14286 - Add missing icon template --- .../togglebutton/togglebutton.interface.ts | 19 ++++++++++++ .../components/togglebutton/togglebutton.ts | 29 +++++++++++++++++-- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/app/components/togglebutton/togglebutton.interface.ts b/src/app/components/togglebutton/togglebutton.interface.ts index 67d6d3b4551..c1ab3b02ff3 100644 --- a/src/app/components/togglebutton/togglebutton.interface.ts +++ b/src/app/components/togglebutton/togglebutton.interface.ts @@ -1,4 +1,6 @@ +import { TemplateRef } from '@angular/core'; import { ToggleButton } from './togglebutton'; + /** * Custom change event. * @see {@link ToggleButton.onChange} @@ -14,3 +16,20 @@ export interface ToggleButtonChangeEvent { */ checked: boolean | undefined; } + +/** + * Defines valid templates in ToggleButton. + * @group Templates + */ +export interface ToggleButtonTemplates { + /** + * Custom icon template. + * @param {boolean} context - checked state as boolean. + */ + icon(context: { + /** + * Checked. + */ + $implicit: boolean; + }): TemplateRef<{ $implicit: boolean }>; +} diff --git a/src/app/components/togglebutton/togglebutton.ts b/src/app/components/togglebutton/togglebutton.ts index 9c05cccf370..e54b0562d41 100755 --- a/src/app/components/togglebutton/togglebutton.ts +++ b/src/app/components/togglebutton/togglebutton.ts @@ -1,8 +1,10 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, NgModule, Output } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { RippleModule } from 'primeng/ripple'; import { ToggleButtonChangeEvent } from './togglebutton.interface'; +import { Nullable } from 'primeng/ts-helpers'; +import { PrimeTemplate, SharedModule } from 'primeng/api'; type ToggleButtonIconPosition = 'left' | 'right'; @@ -33,12 +35,16 @@ export const TOGGLEBUTTON_VALUE_ACCESSOR: any = { [attr.data-pc-name]="'togglebutton'" [attr.data-pc-section]="'root'" > + @if(!iconTemplate) { + } @else { + + } {{ checked ? (hasOnLabel ? onLabel : '') : hasOffLabel ? offLabel : '' }} `, @@ -117,6 +123,10 @@ export class ToggleButton implements ControlValueAccessor { */ @Output() onChange: EventEmitter = new EventEmitter(); + @ContentChildren(PrimeTemplate) templates!: QueryList; + + iconTemplate: Nullable>; + checked: boolean = false; onModelChange: Function = () => {}; @@ -125,6 +135,19 @@ export class ToggleButton implements ControlValueAccessor { constructor(public cd: ChangeDetectorRef) {} + ngAfterContentInit() { + this.templates.forEach((item) => { + switch (item.getType()) { + case 'icon': + this.iconTemplate = item.template; + break; + default: + this.iconTemplate = item.template; + break; + } + }); + } + toggle(event: Event) { if (!this.disabled) { this.checked = !this.checked; @@ -184,8 +207,8 @@ export class ToggleButton implements ControlValueAccessor { } @NgModule({ - imports: [CommonModule, RippleModule], - exports: [ToggleButton], + imports: [CommonModule, RippleModule, SharedModule], + exports: [ToggleButton, SharedModule], declarations: [ToggleButton] }) export class ToggleButtonModule {} From 02176f16b3c34d28ebb2e505541c68e3dba12720 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 7 Dec 2023 10:12:51 +0300 Subject: [PATCH 3/4] Revert "Fixed #14286 - Add missing icon template" This reverts commit 09e5249562c31803a19ae171685e8cbcd441fb2b. --- .../togglebutton/togglebutton.interface.ts | 19 ------------ .../components/togglebutton/togglebutton.ts | 29 ++----------------- 2 files changed, 3 insertions(+), 45 deletions(-) diff --git a/src/app/components/togglebutton/togglebutton.interface.ts b/src/app/components/togglebutton/togglebutton.interface.ts index c1ab3b02ff3..67d6d3b4551 100644 --- a/src/app/components/togglebutton/togglebutton.interface.ts +++ b/src/app/components/togglebutton/togglebutton.interface.ts @@ -1,6 +1,4 @@ -import { TemplateRef } from '@angular/core'; import { ToggleButton } from './togglebutton'; - /** * Custom change event. * @see {@link ToggleButton.onChange} @@ -16,20 +14,3 @@ export interface ToggleButtonChangeEvent { */ checked: boolean | undefined; } - -/** - * Defines valid templates in ToggleButton. - * @group Templates - */ -export interface ToggleButtonTemplates { - /** - * Custom icon template. - * @param {boolean} context - checked state as boolean. - */ - icon(context: { - /** - * Checked. - */ - $implicit: boolean; - }): TemplateRef<{ $implicit: boolean }>; -} diff --git a/src/app/components/togglebutton/togglebutton.ts b/src/app/components/togglebutton/togglebutton.ts index e54b0562d41..9c05cccf370 100755 --- a/src/app/components/togglebutton/togglebutton.ts +++ b/src/app/components/togglebutton/togglebutton.ts @@ -1,10 +1,8 @@ import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, EventEmitter, forwardRef, Input, NgModule, Output, QueryList, TemplateRef } from '@angular/core'; +import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, forwardRef, Input, NgModule, Output } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { RippleModule } from 'primeng/ripple'; import { ToggleButtonChangeEvent } from './togglebutton.interface'; -import { Nullable } from 'primeng/ts-helpers'; -import { PrimeTemplate, SharedModule } from 'primeng/api'; type ToggleButtonIconPosition = 'left' | 'right'; @@ -35,16 +33,12 @@ export const TOGGLEBUTTON_VALUE_ACCESSOR: any = { [attr.data-pc-name]="'togglebutton'" [attr.data-pc-section]="'root'" > - @if(!iconTemplate) { - } @else { - - } {{ checked ? (hasOnLabel ? onLabel : '') : hasOffLabel ? offLabel : '' }} `, @@ -123,10 +117,6 @@ export class ToggleButton implements ControlValueAccessor { */ @Output() onChange: EventEmitter = new EventEmitter(); - @ContentChildren(PrimeTemplate) templates!: QueryList; - - iconTemplate: Nullable>; - checked: boolean = false; onModelChange: Function = () => {}; @@ -135,19 +125,6 @@ export class ToggleButton implements ControlValueAccessor { constructor(public cd: ChangeDetectorRef) {} - ngAfterContentInit() { - this.templates.forEach((item) => { - switch (item.getType()) { - case 'icon': - this.iconTemplate = item.template; - break; - default: - this.iconTemplate = item.template; - break; - } - }); - } - toggle(event: Event) { if (!this.disabled) { this.checked = !this.checked; @@ -207,8 +184,8 @@ export class ToggleButton implements ControlValueAccessor { } @NgModule({ - imports: [CommonModule, RippleModule, SharedModule], - exports: [ToggleButton, SharedModule], + imports: [CommonModule, RippleModule], + exports: [ToggleButton], declarations: [ToggleButton] }) export class ToggleButtonModule {} From d394cd042c4b14695f7c82a2d98647460ef0357b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Thu, 7 Dec 2023 12:23:54 +0300 Subject: [PATCH 4/4] Remove legacy theme designer links --- src/app/showcase/doc/theming/customthemedoc.ts | 13 ++----------- .../pages/landing/footersection.component.ts | 18 ------------------ .../pages/landing/themesection.component.ts | 1 - src/assets/showcase/data/menu.json | 4 ---- 4 files changed, 2 insertions(+), 34 deletions(-) diff --git a/src/app/showcase/doc/theming/customthemedoc.ts b/src/app/showcase/doc/theming/customthemedoc.ts index f31474f9f93..f54618e1f04 100644 --- a/src/app/showcase/doc/theming/customthemedoc.ts +++ b/src/app/showcase/doc/theming/customthemedoc.ts @@ -11,17 +11,8 @@ import { Code } from '../../domain/code'; SASS API documentation.

- There are 3 alternatives to create your own theme. First option is using the Visual Editor, second one is compiling a theme with command line sass and final alternative is embedding scss files within your project to let your build - environment do the compilation. In all cases, the generated theme file should be imported to your project. Here is a video tutorial that demonstrates all three options. -

- -
- -

Visual Editor

-

- Visual Editor is an easy way to quickly customize an existing theme without dealing with the details of the SASS API. The editor allows changing common settings like primary color for - built-in themes. Once you have completed the design, click the download button to access the generated theme.css file and import it to your project as an asset. In near future, an advanced UI Designer will be available with the - ability to edit all variables and components where you'll also be able to save your themes when accessed with an account. + There are 2 alternatives to create your own theme. First option is compiling a theme with command line sass whereas second option is embedding scss files within your project to let your build environment do the compilation. In all + cases, the generated theme file should be imported to your project.

Theme SCSS

diff --git a/src/app/showcase/pages/landing/footersection.component.ts b/src/app/showcase/pages/landing/footersection.component.ts index 1a4398af676..055e0cf7eca 100644 --- a/src/app/showcase/pages/landing/footersection.component.ts +++ b/src/app/showcase/pages/landing/footersection.component.ts @@ -65,24 +65,6 @@ import { RouterModule } from '@angular/router'; -
- -
diff --git a/src/app/showcase/pages/landing/themesection.component.ts b/src/app/showcase/pages/landing/themesection.component.ts index 56f026d99a5..3ac215894bd 100644 --- a/src/app/showcase/pages/landing/themesection.component.ts +++ b/src/app/showcase/pages/landing/themesection.component.ts @@ -21,7 +21,6 @@ import { CustomerService } from '../../service/customerservice'; - more...