Skip to content

Commit

Permalink
Fixed #14286 - ToggleButton | Add missing template
Browse files Browse the repository at this point in the history
  • Loading branch information
cetincakiroglu committed Dec 7, 2023
1 parent c2829d8 commit 1c254c9
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 3 deletions.
19 changes: 19 additions & 0 deletions src/app/components/togglebutton/togglebutton.interface.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { TemplateRef } from '@angular/core';
import { ToggleButton } from './togglebutton';

/**
* Custom change event.
* @see {@link ToggleButton.onChange}
Expand All @@ -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 }>;
}
29 changes: 26 additions & 3 deletions src/app/components/togglebutton/togglebutton.ts
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -33,12 +35,16 @@ export const TOGGLEBUTTON_VALUE_ACCESSOR: any = {
[attr.data-pc-name]="'togglebutton'"
[attr.data-pc-section]="'root'"
>
@if(!iconTemplate) {
<span
*ngIf="onIcon || offIcon"
[class]="checked ? this.onIcon : this.offIcon"
[ngClass]="{ 'p-button-icon': true, 'p-button-icon-left': iconPos === 'left', 'p-button-icon-right': iconPos === 'right' }"
[attr.data-pc-section]="'icon'"
></span>
} @else {
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: checked }"></ng-container>
}
<span class="p-button-label" *ngIf="onLabel || offLabel" [attr.data-pc-section]="'label'">{{ checked ? (hasOnLabel ? onLabel : '') : hasOffLabel ? offLabel : '' }}</span>
</div>
`,
Expand Down Expand Up @@ -117,6 +123,10 @@ export class ToggleButton implements ControlValueAccessor {
*/
@Output() onChange: EventEmitter<ToggleButtonChangeEvent> = new EventEmitter<ToggleButtonChangeEvent>();

@ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;

iconTemplate: Nullable<TemplateRef<any>>;

checked: boolean = false;

onModelChange: Function = () => {};
Expand All @@ -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;
Expand Down Expand Up @@ -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 {}

0 comments on commit 1c254c9

Please sign in to comment.