Merge pull request primefaces#15464 from alexciesielski/standalone-bu…

…tton

feat(button): make standalone

src/app/components/api/shared.ts

@@ -1,20 +1,22 @@
-import { CommonModule } from '@angular/common';
 import { Component, Directive, Input, NgModule, TemplateRef } from '@angular/core';
 
 @Component({
     selector: 'p-header',
+    standalone: true,
     template: '<ng-content></ng-content>'
 })
 export class Header {}
 
 @Component({
     selector: 'p-footer',
+    standalone: true,
     template: '<ng-content></ng-content>'
 })
 export class Footer {}
 
 @Directive({
     selector: '[pTemplate]',
+    standalone: true,
     host: {}
 })
 export class PrimeTemplate {
@@ -30,8 +32,7 @@ export class PrimeTemplate {
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [Header, Footer, PrimeTemplate],
-    declarations: [Header, Footer, PrimeTemplate]
+    imports: [Header, Footer, PrimeTemplate],
+    exports: [Header, Footer, PrimeTemplate]
 })
 export class SharedModule {}

src/app/components/autocomplete/autocomplete.spec.ts

@@ -5,10 +5,10 @@ import { By } from '@angular/platform-browser';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ButtonModule } from 'primeng/button';
-import { OverlayModule } from 'primeng/overlay';
-import { AutoComplete } from './autocomplete';
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
 import { TimesCircleIcon } from 'primeng/icons/timescircle';
+import { OverlayModule } from 'primeng/overlay';
+import { AutoComplete } from './autocomplete';
 
 @Component({
     template: `<p-autoComplete [(ngModel)]="brand" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)"></p-autoComplete>

src/app/components/autofocus/autofocus.ts

@@ -1,4 +1,4 @@
-import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Directive, ElementRef, Input, NgModule, PLATFORM_ID, booleanAttribute, inject } from '@angular/core';
 import { DomHandler } from 'primeng/dom';
 /**
@@ -7,6 +7,7 @@ import { DomHandler } from 'primeng/dom';
  */
 @Directive({
     selector: '[pAutoFocus]',
+    standalone: true,
     host: {
         class: 'p-element'
     }
@@ -64,8 +65,7 @@ export class AutoFocus {
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [AutoFocus],
-    declarations: [AutoFocus]
+    imports: [AutoFocus],
+    exports: [AutoFocus]
 })
 export class AutoFocusModule {}

src/app/components/button/button.css

@@ -49,17 +49,17 @@
 
     .p-button-group .p-button:focus,
     .p-button-group p-button:focus .p-button,
-    .p-buttonset .p-button:focus, 
-    .p-buttonset .p-button:focus, 
+    .p-buttonset .p-button:focus,
+    .p-buttonset .p-button:focus,
     .p-buttonset p-button:focus .p-button,
-    .p-buttonset .p-button:focus{
+    .p-buttonset .p-button:focus {
         position: relative;
         z-index: 1;
     }
 
     .p-button-group .p-button:not(:last-child),
-    .p-button-group .p-button:not(:last-child):hover, 
-    .p-button-group p-button:not(:last-child) .p-button, 
+    .p-button-group .p-button:not(:last-child):hover,
+    .p-button-group p-button:not(:last-child) .p-button,
     .p-button-group p-button:not(:last-child) .p-button:hover,
     .p-buttonset .p-button:not(:last-child),
     .p-buttonset .p-button:not(:last-child):hover,
@@ -75,7 +75,6 @@
         border-radius: 0;
     }
 
-
     .p-button-group .p-button:first-of-type:not(:only-of-type),
     .p-button-group p-button:first-of-type:not(:only-of-type) .p-button,
     .p-buttonset .p-button:first-of-type:not(:only-of-type),
@@ -92,7 +91,6 @@
         border-bottom-left-radius: 0;
     }
 
-
     p-button[iconpos='right'] spinnericon {
         order: 1;
     }

src/app/components/button/button.spec.ts

@@ -1,16 +1,15 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Button } from './button';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Button } from './button';
 
 describe('Button', () => {
     let button: Button;
     let fixture: ComponentFixture<Button>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopAnimationsModule],
-            declarations: [Button]
+            imports: [NoopAnimationsModule, Button]
         });
 
         fixture = TestBed.createComponent(Button);

src/app/components/button/button.ts

@@ -1,4 +1,4 @@
-import { CommonModule, DOCUMENT } from '@angular/common';
+import { DOCUMENT, NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common';
 import {
     AfterContentInit,
     AfterViewInit,
@@ -20,11 +20,11 @@ import {
     numberAttribute
 } from '@angular/core';
 import { PrimeTemplate, SharedModule } from 'primeng/api';
+import { AutoFocus } from 'primeng/autofocus';
 import { DomHandler } from 'primeng/dom';
 import { SpinnerIcon } from 'primeng/icons/spinner';
-import { RippleModule } from 'primeng/ripple';
+import { Ripple } from 'primeng/ripple';
 import { ObjectUtils } from 'primeng/utils';
-import { AutoFocusModule } from 'primeng/autofocus';
 
 type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';
 
@@ -36,12 +36,14 @@ const INTERNAL_BUTTON_CLASSES = {
     loading: 'p-button-loading',
     labelOnly: 'p-button-loading-label-only'
 } as const;
+
 /**
  * Button directive is an extension to button component.
  * @group Components
  */
 @Directive({
     selector: '[pButton]',
+    standalone: true,
     host: {
         class: 'p-element'
     }
@@ -329,6 +331,8 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
  */
 @Component({
     selector: 'p-button',
+    standalone: true,
+    imports: [NgIf, NgTemplateOutlet, NgStyle, NgClass, Ripple, AutoFocus, SpinnerIcon],
     template: `
         <button
             [attr.type]="type"
@@ -582,8 +586,7 @@ export class Button implements AfterContentInit {
 }
 
 @NgModule({
-    imports: [CommonModule, RippleModule, SharedModule, AutoFocusModule, SpinnerIcon],
-    exports: [ButtonDirective, Button, SharedModule],
-    declarations: [ButtonDirective, Button]
+    imports: [ButtonDirective, Button],
+    exports: [ButtonDirective, Button, SharedModule]
 })
 export class ButtonModule {}

src/app/components/card/card.spec.ts

@@ -1,10 +1,10 @@
-import { TestBed, ComponentFixture, async } from '@angular/core/testing';
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Card } from './card';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Footer, Header } from 'primeng/api';
 import { ButtonModule } from '../button/button';
+import { Card } from './card';
 
 @Component({
     template: `<p-card [header]="header" [subheader]="subheader" [style]="style" [styleClass]="styleClass">
@@ -37,8 +37,8 @@ describe('Card', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             schemas: [NO_ERRORS_SCHEMA],
-            imports: [NoopAnimationsModule, ButtonModule],
-            declarations: [Card, TestCardComponent, Header, Footer]
+            imports: [NoopAnimationsModule, ButtonModule, Header, Footer],
+            declarations: [Card, TestCardComponent]
         });
     }));
     beforeEach(() => {

src/app/components/dialog/dialog.spec.ts

@@ -3,12 +3,12 @@ import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Footer } from 'primeng/api';
-import { ButtonModule } from '../button/button';
-import { FocusTrapModule } from '../focustrap/focustrap';
-import { Dialog } from './dialog';
 import { TimesIcon } from 'primeng/icons/times';
 import { WindowMaximizeIcon } from 'primeng/icons/windowmaximize';
 import { WindowMinimizeIcon } from 'primeng/icons/windowminimize';
+import { ButtonModule } from '../button/button';
+import { FocusTrapModule } from '../focustrap/focustrap';
+import { Dialog } from './dialog';
 
 @Component({
     template: `
@@ -36,8 +36,8 @@ describe('Dialog', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopAnimationsModule, FocusTrapModule, ButtonModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon],
-            declarations: [Dialog, Footer, TestDialogComponent]
+            imports: [NoopAnimationsModule, FocusTrapModule, ButtonModule, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, Footer],
+            declarations: [Dialog, TestDialogComponent]
         });
 
         fixture = TestBed.createComponent(TestDialogComponent);

src/app/components/dynamicdialog/dynamicdialog.spec.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, NgModule } from '@angular/core';
-import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, flush, tick } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Footer } from 'primeng/api';
 import { DialogService } from './dialogservice';
@@ -60,8 +60,7 @@ export class FakeTestDialogModule {}
 describe('DynamicDialog', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopAnimationsModule, FakeTestDialogModule],
-            declarations: [Footer]
+            imports: [NoopAnimationsModule, FakeTestDialogModule, Footer]
         });
     });
 

src/app/components/fileupload/fileupload.spec.ts

@@ -1,24 +1,24 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { HttpClientModule } from '@angular/common/http';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { FileUpload } from './fileupload';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ProgressBarModule } from 'primeng/progressbar';
-import { ButtonModule } from 'primeng/button';
 import { PrimeTemplate } from 'primeng/api';
-import { MessagesModule } from 'primeng/messages';
-import { HttpClientModule } from '@angular/common/http';
+import { ButtonModule } from 'primeng/button';
 import { PlusIcon } from 'primeng/icons/plus';
 import { TimesIcon } from 'primeng/icons/times';
 import { UploadIcon } from 'primeng/icons/upload';
+import { MessagesModule } from 'primeng/messages';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { FileUpload } from './fileupload';
 
 describe('FileUpload', () => {
     let fileupload: FileUpload;
     let fixture: ComponentFixture<FileUpload>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopAnimationsModule, ProgressBarModule, MessagesModule, ButtonModule, HttpClientModule, PlusIcon, TimesIcon, UploadIcon],
-            declarations: [FileUpload, PrimeTemplate]
+            imports: [NoopAnimationsModule, ProgressBarModule, MessagesModule, ButtonModule, HttpClientModule, PlusIcon, TimesIcon, UploadIcon, PrimeTemplate],
+            declarations: [FileUpload]
         });
 
         fixture = TestBed.createComponent(FileUpload);

src/app/components/messages/messages.spec.ts

@@ -1,17 +1,16 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { Messages } from './messages';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Message, MessageService } from 'primeng/api';
 import { Button } from 'primeng/button';
-import { FormsModule } from '@angular/forms';
-import { MessageService } from 'primeng/api';
-import { Message } from 'primeng/api';
 import { CheckIcon } from 'primeng/icons/check';
-import { TimesCircleIcon } from 'primeng/icons/timescircle';
 import { ExclamationTriangleIcon } from 'primeng/icons/exclamationtriangle';
 import { InfoCircleIcon } from 'primeng/icons/infocircle';
 import { TimesIcon } from 'primeng/icons/times';
+import { TimesCircleIcon } from 'primeng/icons/timescircle';
+import { Messages } from './messages';
 
 @Component({
     template: `
@@ -90,8 +89,8 @@ describe('Messages', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopAnimationsModule, FormsModule, CheckIcon, TimesCircleIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon],
-            declarations: [Messages, Button, TestMessagesComponent],
+            imports: [NoopAnimationsModule, FormsModule, CheckIcon, TimesCircleIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, Button],
+            declarations: [Messages, TestMessagesComponent],
             providers: [MessageService]
         });
 

src/app/components/ripple/ripple.ts

@@ -1,4 +1,4 @@
-import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { AfterViewInit, Directive, ElementRef, Inject, NgModule, NgZone, OnDestroy, Optional, PLATFORM_ID, Renderer2 } from '@angular/core';
 import { PrimeNGConfig } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
@@ -9,6 +9,7 @@ import { VoidListener } from 'primeng/ts-helpers';
  */
 @Directive({
     selector: '[pRipple]',
+    standalone: true,
     host: {
         class: 'p-ripple p-element'
     }
@@ -118,8 +119,7 @@ export class Ripple implements AfterViewInit, OnDestroy {
 }
 
 @NgModule({
-    imports: [CommonModule],
-    exports: [Ripple],
-    declarations: [Ripple]
+    imports: [Ripple],
+    exports: [Ripple]
 })
 export class RippleModule {}

src/app/components/tabview/tabview.spec.ts

@@ -1,11 +1,11 @@
-import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { TabView, TabPanel } from './tabview';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { Component } from '@angular/core';
-import { Tooltip } from 'primeng/tooltip';
 import { PrimeTemplate } from 'primeng/api';
 import { TimesIcon } from 'primeng/icons/times';
+import { Tooltip } from 'primeng/tooltip';
+import { TabPanel, TabView } from './tabview';
 
 @Component({
     template: `<p-tabView>
@@ -39,8 +39,8 @@ describe('TabView', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [NoopAnimationsModule, TimesIcon],
-            declarations: [TabView, TabPanel, Tooltip, TestTabViewComponent, PrimeTemplate]
+            imports: [NoopAnimationsModule, TimesIcon, PrimeTemplate],
+            declarations: [TabView, TabPanel, Tooltip, TestTabViewComponent]
         }).compileComponents();
 
         fixture = TestBed.createComponent(TestTabViewComponent);