refactor: migra NgModules a componentes standalone

libs/ui/src/index.ts

@@ -51,11 +51,10 @@ export * from './lib/ui/panel';
 export * from './lib/ui/progress';
 export * from './lib/ui/select';
 // ./lib/ui/slide-toggle: omitido(s) por colisión con otro módulo -> PiSlideToggleComponent
-export { PiSharedUISlideToggleModule } from './lib/ui/slide-toggle';
 export * from './lib/ui/slider';
 export * from './lib/ui/spinner';
 export * from './lib/ui/tab';
 // ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
-export { PiBaseTextViewerComponent, PiSharedUITextModule, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
+export { PiBaseTextViewerComponent, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
 export * from './lib/ui/tooltip';
 export * from './lib/ui/wrapper';

libs/ui/src/lib/ui/accordion/accordion.module.ts

@@ -1,56 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
-
-import { PiAccordionComponent } from './accordion/accordion.component';
-
-import { CdkAccordionModule } from '@angular/cdk/accordion';
-import { PiSharedUIIconModule } from '../icon';
-import { PiSharedUITextModule } from '../text';
-import {
-  PiAccordionFooterDirective,
-  PiAccordionHeaderDirective,
-  PiAccordionItemContentDirective,
-  PiAccordionItemDirective,
-  PiAccordionItemHeaderDirective,
-  PiAccordionSummaryContentDirective,
-} from './directives/accordion-content.directive';
-import { PiSharedUtilColorModule } from '../../util/color';
-import { PiSharedUIButtonModule } from '../button';
-import { PiSharedUIChipModule } from '../chip';
-
-const MATERIAL_MODULES = [CdkAccordionModule];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    PiSharedUIButtonModule,
-    PiSharedUIChipModule,
-    PiSharedUIIconModule,
-    PiSharedUITextModule,
-    PiSharedUITextModule,
-    PiSharedUtilColorModule,
-    TranslatePipe, TranslateDirective,
-    MATERIAL_MODULES,
-  ],
-  declarations: [
-    PiAccordionComponent,
-    PiAccordionItemHeaderDirective,
-    PiAccordionItemContentDirective,
-    PiAccordionItemDirective,
-    PiAccordionSummaryContentDirective,
-    PiAccordionHeaderDirective,
-    PiAccordionFooterDirective,
-  ],
-  exports: [
-    PiAccordionComponent,
-    PiAccordionItemHeaderDirective,
-    PiAccordionItemContentDirective,
-    PiAccordionItemDirective,
-    PiAccordionSummaryContentDirective,
-    PiAccordionHeaderDirective,
-    PiAccordionFooterDirective,
-  ],
-})
-export class PiSharedUIAccordionModule {}

libs/ui/src/lib/ui/accordion/accordion/accordion.component.ts

@@ -14,13 +14,30 @@ import {
 } from '@angular/core';
 import { padding, styleType, textColor } from '../../../styles';
 import { PiAccordionItemDirective } from '../directives/accordion-content.directive';
+import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { PiDynamicColorDirective } from '../../../util/color/directives/colors.directive';
+import { PiTextViewerComponent } from '../../text/text-viewer/text-viewer.component';
+import { PiChipStatusComponent } from '../../chip/chip-status/chip-status.component';
+import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-accordion',
     templateUrl: './accordion.component.html',
     styleUrls: ['../styles/accordion.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        NgIf,
+        NgFor,
+        PiDynamicColorDirective,
+        PiTextViewerComponent,
+        NgTemplateOutlet,
+        PiChipStatusComponent,
+        PiIconButtonComponent,
+        PiIconComponent,
+        TranslatePipe,
+    ],
 })
 export class PiAccordionComponent implements OnChanges, AfterContentInit {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/accordion/directives/accordion-content.directive.ts

@@ -13,10 +13,7 @@ import { status } from '../../../util/status';
  * If it is needed it must be used as a Header for the whole accordion.
  */
 
-@Directive({
-  standalone: false,
-  selector: 'pi-accordion-header',
-})
+@Directive({ selector: 'pi-accordion-header', })
 export class PiAccordionHeaderDirective {
   @HostBinding('class') className = 'pi-accordion-header';
 }
@@ -26,27 +23,18 @@ export class PiAccordionHeaderDirective {
  */
 
 // Accordion Item Header Content
-@Directive({
-  standalone: false,
-  selector: '[pi-accordion-item-header-content]',
-})
+@Directive({ selector: '[pi-accordion-item-header-content]', })
 export class PiAccordionItemHeaderDirective {
   constructor(public templateRef: TemplateRef<Element>) {}
 }
 // Accordion Item Summary Content
-@Directive({
-  standalone: false,
-  selector: '[pi-accordion-item-summary-content]',
-})
+@Directive({ selector: '[pi-accordion-item-summary-content]', })
 export class PiAccordionSummaryContentDirective {
   constructor(public templateRef: TemplateRef<Element>) {}
 }
 
 // Accordion Item Expandable Content
-@Directive({
-  standalone: false,
-  selector: '[pi-accordion-item-expandable-content]',
-})
+@Directive({ selector: '[pi-accordion-item-expandable-content]', })
 export class PiAccordionItemContentDirective {
   constructor(public templateRef: TemplateRef<Element>) {}
 }
@@ -55,18 +43,12 @@ export class PiAccordionItemContentDirective {
  * The accordion footer is a separated content of the accordion items group.
  * If it is needed it must be used as a Footer for the whole accordion.
  */
-@Directive({
-  standalone: false,
-  selector: 'pi-accordion-footer',
-})
+@Directive({ selector: 'pi-accordion-footer', })
 export class PiAccordionFooterDirective {
   @HostBinding('class') className = 'pi-accordion-footer';
 }
 
-@Directive({
-  standalone: false,
-  selector: 'pi-accordion-item',
-})
+@Directive({ selector: 'pi-accordion-item', })
 export class PiAccordionItemDirective {
   @Input() title = '';
   @Input() subtitle = '';

libs/ui/src/lib/ui/accordion/index.ts

@@ -1,4 +1,4 @@
-export * from './accordion.module';
+
 
 export * from './accordion/accordion.component';
 

libs/ui/src/lib/ui/banner/banner.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PiBannerComponent } from './banner/banner.component';
-
-// Shared
-import { PiSharedUITextModule } from '../text';
-import { PiSharedUIWrapperModule } from '../wrapper';
-import { PiSharedUtilColorModule } from '../../util/color';
-import { PiSharedUIButtonModule } from '../button';
-import { PiSharedUIImageModule } from '../image';
-
-@NgModule({
-  imports: [CommonModule, PiSharedUITextModule, PiSharedUIWrapperModule, PiSharedUtilColorModule, PiSharedUIButtonModule, PiSharedUIImageModule],
-  declarations: [PiBannerComponent],
-  exports: [PiBannerComponent],
-})
-export class PiSharedUIBannerModule {}

libs/ui/src/lib/ui/banner/banner/banner.component.ts

@@ -1,10 +1,19 @@
 import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
+import { PiBackgroundImageDirective } from '../../image/background-image.directive';
+import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
+import { NgIf } from '@angular/common';
+import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
 
 @Component({
-  standalone: false,
     selector: 'pi-banner',
     templateUrl: './banner.component.html',
     styleUrls: ['./banner.component.scss'],
+    imports: [
+        PiBackgroundImageDirective,
+        PiTextWeightBoldDirective,
+        NgIf,
+        PiIconButtonComponent,
+    ],
 })
 export class PiBannerComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/banner/index.ts

@@ -1,3 +1,3 @@
-export * from './banner.module';
+
 
 export * from './banner/banner.component';

libs/ui/src/lib/ui/button/action-button/action-button.component.ts

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 import { buttonSize, mode } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
+import { NgIf } from '@angular/common';
 
 @Component({
-  standalone: false,
     selector: 'pi-action-button',
     templateUrl: './action-button.component.html',
     styleUrls: ['./action-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf],
 })
 export class PiActionButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/button.directive.ts

@@ -2,10 +2,7 @@ import { Directive, HostBinding, Input } from '@angular/core';
 import { buttonSize } from '../../styles';
 
 // Style
-@Directive({
-  standalone: false,
-  selector: '[pi-ghost]',
-})
+@Directive({ selector: '[pi-ghost]', })
 export class PiGhostButtonDirective {
   @HostBinding('class') get classes(): string {
     const hasPaddingClass = this.hasPadding ? '' : 'pi-button__trimmed';
@@ -14,20 +11,14 @@ export class PiGhostButtonDirective {
   @Input() hasPadding = true;
 }
 
-@Directive({
-  standalone: false,
-  selector: '[pi-outline]',
-})
+@Directive({ selector: '[pi-outline]', })
 export class PiOutlineButtonDirective {
   @HostBinding('class') get classes(): string {
     return 'pi-button pi-button__appearance--outline';
   }
 }
 
-@Directive({
-  standalone: false,
-  selector: '[pi-button-size]',
-})
+@Directive({ selector: '[pi-button-size]', })
 export class PiButtonSizeDirective {
   @HostBinding('class') get classes(): string {
     return this.sizeClass;
@@ -41,10 +32,7 @@ export class PiButtonSizeDirective {
 }
 
 // Size
-@Directive({
-  standalone: false,
-  selector: '[xx-small]',
-})
+@Directive({ selector: '[xx-small]', })
 export class PiXXSmallButtonDirective {
   @HostBinding('class') get classes(): string {
     return 'pi-button pi-button__xx-small';
@@ -52,50 +40,35 @@ export class PiXXSmallButtonDirective {
 }
 
 // Size
-@Directive({
-  standalone: false,
-  selector: '[x-small]',
-})
+@Directive({ selector: '[x-small]', })
 export class PiXSmallButtonDirective {
   @HostBinding('class') get classes(): string {
     return 'pi-button pi-button__x-small';
   }
 }
 
-@Directive({
-  standalone: false,
-  selector: '[small]',
-})
+@Directive({ selector: '[small]', })
 export class PiSmallButtonDirective {
   @HostBinding('class') get classes(): string {
     return 'pi-button pi-button__small';
   }
 }
 
-@Directive({
-  standalone: false,
-  selector: '[medium]',
-})
+@Directive({ selector: '[medium]', })
 export class PiMediumButtonDirective {
   @HostBinding('class') get classes(): string {
     return 'pi-button pi-button__medium';
   }
 }
 
-@Directive({
-  standalone: false,
-  selector: '[large]',
-})
+@Directive({ selector: '[large]', })
 export class PiLargeButtonDirective {
   @HostBinding('class') get classes(): string {
     return 'pi-button pi-button__large';
   }
 }
 
-@Directive({
-  standalone: false,
-  selector: '[w100]',
-})
+@Directive({ selector: '[w100]', })
 export class PiW100ButtonDirective {
   @HostBinding('class') get classes(): string {
     return 'pi-button pi-button__w100';

libs/ui/src/lib/ui/button/chevron-button/chevron-button.component.ts

@@ -8,13 +8,14 @@ import {
 } from '@angular/core';
 import { ComponentFamilyClass } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-chevron-button',
     templateUrl: './chevron-button.component.html',
     styleUrls: ['./chevron-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [MatIcon],
 })
 export class PiChevronButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/close-button/close-button.component.ts

@@ -8,13 +8,14 @@ import {
 } from '@angular/core';
 import { ComponentFamilyClass } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-close-button',
     templateUrl: './close-button.component.html',
     styleUrls: ['./close-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [TranslatePipe],
 })
 export class PiCloseButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/hamburger/hamburger.component.ts

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Output } from '@angular/core';
 import { ComponentFamilyClass } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-hamburger',
     templateUrl: './hamburger.component.html',
     styleUrls: ['./hamburger.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [TranslatePipe],
 })
 export class PiHamburgerComponent extends PiBaseButtonComponent {
     @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts

@@ -8,13 +8,15 @@ import {
 } from '@angular/core';
 import { buttonSize, mode } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-icon-button',
     templateUrl: './icon-button.component.html',
     styleUrls: ['./icon-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiIconButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/index.ts

@@ -10,7 +10,7 @@ export * from './switch-button/switch-button.component';
 export * from './toggle-button/toggle-button.component';
 
 // Export button's module
-export * from './ui-button.module';
+
 
 // Export button's directive
 export * from './button.directive';

libs/ui/src/lib/ui/button/radio-button/radio-button.component.ts

@@ -1,12 +1,14 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 import { PiBaseButtonComponent } from '../base-button.component';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-radio-button',
     templateUrl: './radio-button.component.html',
     styleUrls: ['./radio-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiRadioButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/switch-button/switch-button.component.ts

@@ -8,13 +8,15 @@ import {
 } from '@angular/core';
 import { ComponentFamilyClass } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
+import { NgTemplateOutlet } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-switch-button',
     templateUrl: './switch-button.component.html',
     styleUrls: ['./switch-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgTemplateOutlet, MatIcon],
 })
 export class PiSwitchButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/switch-button/switch-button.directive.ts

@@ -1,33 +1,21 @@
 import { Directive, HostBinding } from '@angular/core';
 
-@Directive({
-  standalone: false,
-  selector: 'pi-prefix-left',
-})
+@Directive({ selector: 'pi-prefix-left', })
 export class PiSwitchButtonPrefixLeftDirective {
   @HostBinding('class') className = 'pi-switch-button__prefix--left';
 }
 
-@Directive({
-  standalone: false,
-  selector: 'pi-suffix-left',
-})
+@Directive({ selector: 'pi-suffix-left', })
 export class PiSwitchButtonSuffixLeftDirective {
   @HostBinding('class') className = 'pi-switch-button__suffix--left';
 }
 
-@Directive({
-  standalone: false,
-    selector: 'pi-prefix-right',
-  })
+@Directive({ selector: 'pi-prefix-right', })
   export class PiSwitchButtonPrefixRightDirective {
     @HostBinding('class') className = 'pi-switch-button__prefix--right';
   }
   
-  @Directive({
-  standalone: false,
-    selector: 'pi-suffix-right',
-  })
+  @Directive({ selector: 'pi-suffix-right', })
   export class PiSwitchButtonSuffixRightDirective {
     @HostBinding('class') className = 'pi-switch-button__suffix--right';
   }

libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts

@@ -1,13 +1,15 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 import { buttonSize } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-toggle-button',
     templateUrl: './toggle-button.component.html',
     styleUrls: ['./toggle-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiToggleButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/ui-button.module.ts

@@ -1,88 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
-
-import { MatIconModule } from '@angular/material/icon';
-
-import {
-  PiButtonSizeDirective,
-  PiGhostButtonDirective,
-  PiLargeButtonDirective,
-  PiMediumButtonDirective,
-  PiOutlineButtonDirective,
-  PiSmallButtonDirective,
-  PiW100ButtonDirective,
-  PiXSmallButtonDirective,
-  PiXXSmallButtonDirective,
-} from './button.directive';
-import { PiCloseButtonComponent } from './close-button/close-button.component';
-import { PiHamburgerComponent } from './hamburger/hamburger.component';
-import { PiIconButtonComponent } from './icon-button/icon-button.component';
-
-import { PiSharedUIIconModule } from '../icon';
-import { PiChevronButtonComponent } from './chevron-button/chevron-button.component';
-import { PiSwitchButtonComponent } from './switch-button/switch-button.component';
-import { PiToggleButtonComponent } from './toggle-button/toggle-button.component';
-import { PiRadioButtonComponent } from './radio-button/radio-button.component';
-import { PiActionButtonComponent } from './action-button/action-button.component';
-import {
-  PiSwitchButtonPrefixLeftDirective,
-  PiSwitchButtonSuffixLeftDirective,
-  PiSwitchButtonPrefixRightDirective,
-  PiSwitchButtonSuffixRightDirective,
-} from './switch-button/switch-button.directive';
-
-@NgModule({
-  imports: [CommonModule, TranslatePipe, TranslateDirective, PiSharedUIIconModule, MatIconModule],
-  declarations: [
-    PiActionButtonComponent,
-    PiChevronButtonComponent,
-    PiCloseButtonComponent,
-    PiGhostButtonDirective,
-    PiButtonSizeDirective,
-    PiHamburgerComponent,
-    PiIconButtonComponent,
-    PiLargeButtonDirective,
-    PiMediumButtonDirective,
-    PiOutlineButtonDirective,
-    PiRadioButtonComponent,
-    PiSmallButtonDirective,
-    PiSwitchButtonComponent,
-    PiToggleButtonComponent,
-    PiW100ButtonDirective,
-    PiXSmallButtonDirective,
-    PiXXSmallButtonDirective,
-    PiRadioButtonComponent,
-    PiSwitchButtonPrefixLeftDirective,
-    PiSwitchButtonSuffixLeftDirective,
-    PiSwitchButtonPrefixRightDirective,
-    PiSwitchButtonSuffixRightDirective,
-  ],
-
-  exports: [
-    PiActionButtonComponent,
-    PiChevronButtonComponent,
-    PiCloseButtonComponent,
-    PiButtonSizeDirective,
-    PiCloseButtonComponent,
-    PiGhostButtonDirective,
-    PiHamburgerComponent,
-    PiIconButtonComponent,
-    PiLargeButtonDirective,
-    PiMediumButtonDirective,
-    PiOutlineButtonDirective,
-    PiRadioButtonComponent,
-    PiSmallButtonDirective,
-    PiSwitchButtonComponent,
-    PiToggleButtonComponent,
-    PiW100ButtonDirective,
-    PiXSmallButtonDirective,
-    PiXXSmallButtonDirective,
-    PiRadioButtonComponent,
-    PiSwitchButtonSuffixLeftDirective,
-    PiSwitchButtonPrefixLeftDirective,
-    PiSwitchButtonPrefixRightDirective,
-    PiSwitchButtonSuffixRightDirective,
-  ],
-})
-export class PiSharedUIButtonModule {}

libs/ui/src/lib/ui/card/card/card.component.ts

@@ -3,12 +3,14 @@ import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
 
 // Components
 import { PiBaseCardComponent } from '../base-card.component';
+import { NgIf } from '@angular/common';
+import { PiIconComponent } from '../../icon/icon/icon.component';
 
 @Component({
-  standalone: false,
     selector: 'pi-card',
     templateUrl: './card.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, PiIconComponent],
 })
 export class PiCardComponent extends PiBaseCardComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/card/directives/card.directive.ts

@@ -1,7 +1,6 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
 @Directive({
-  standalone: false,
     selector: 'pi-card-top-content',
     host: {
         class: 'pi-card-content pi-card-content__top',
@@ -9,34 +8,22 @@ import { Directive, HostBinding, Input } from '@angular/core';
 })
 export class PiCardTopContentDirective {}
 
-@Directive({
-  standalone: false,
-  selector: 'pi-card-center-content',
-})
+@Directive({ selector: 'pi-card-center-content', })
 export class PiCardCenterContentDirective {
   @HostBinding('class') className = 'pi-card-content pi-card-content__center';
 }
 
-@Directive({
-  standalone: false,
-  selector: 'pi-card-bottom-content',
-})
+@Directive({ selector: 'pi-card-bottom-content', })
 export class PiCardBottomContentDirective {
   @HostBinding('class') className = 'pi-card-content pi-card-content__bottom';
 }
 
-@Directive({
-  standalone: false,
-  selector: 'pi-card-left-content',
-})
+@Directive({ selector: 'pi-card-left-content', })
 export class PiCardLeftContentDirective {
   @HostBinding('class') className = 'pi-card-content pi-card-content__left';
 }
 
-@Directive({
-  standalone: false,
-  selector: 'pi-card-right-content',
-})
+@Directive({ selector: 'pi-card-right-content', })
 export class PiCardRightContentDirective {
   @HostBinding('class') className = 'pi-card-content pi-card-content__right';
 }

libs/ui/src/lib/ui/card/index.ts

@@ -1,4 +1,4 @@
-export * from './ui-card.module';
+
 
 export * from './card/card.component';
 

libs/ui/src/lib/ui/card/ui-card.module.ts

@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { PiSharedUIIconModule } from '../icon';
-import { PiCardComponent } from './card/card.component';
-import {
-  PiCardBottomContentDirective,
-  PiCardCenterContentDirective,
-  PiCardLeftContentDirective,
-  PiCardRightContentDirective,
-  PiCardTopContentDirective,
-} from './directives/card.directive';
-
-@NgModule({
-  imports: [CommonModule, PiSharedUIIconModule],
-  declarations: [
-    PiCardComponent,
-    PiCardTopContentDirective,
-    PiCardCenterContentDirective,
-    PiCardBottomContentDirective,
-    PiCardLeftContentDirective,
-    PiCardRightContentDirective,
-  ],
-  exports: [
-    PiCardComponent,
-    PiCardTopContentDirective,
-    PiCardCenterContentDirective,
-    PiCardBottomContentDirective,
-    PiCardLeftContentDirective,
-    PiCardRightContentDirective,
-  ],
-})
-export class PiSharedUICardModule {}

libs/ui/src/lib/ui/carousel/carousel.directive.ts

@@ -1,7 +1,6 @@
 import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
 
 @Directive({
-  standalone: false,
     selector: '[pi-carousel-item]',
     host: { class: 'pi-carousel pi-carousel__item' },
 })

libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts

@@ -25,13 +25,20 @@ import { ComponentFamilyClass, justify, theming } from '../../../styles';
 import { Device, DeviceConfigsFacade } from '../../../util/device-configs';
 import { PiCarouselItemDirective } from '../carousel.directive';
 import { Subject, combineLatest, skip, takeUntil } from 'rxjs';
+import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
 
 @Component({
-  standalone: false,
     selector: 'pi-carousel',
     templateUrl: './carousel.component.html',
     styleUrls: ['./carousel.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        NgIf,
+        PiIconButtonComponent,
+        NgFor,
+        NgTemplateOutlet,
+    ],
 })
 export class PiCarouselComponent
   implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy

libs/ui/src/lib/ui/carousel/index.ts

@@ -1,4 +1,4 @@
-export * from './ui-carousel.module';
+
 
 export * from './carousel/carousel.component';
 

libs/ui/src/lib/ui/carousel/ui-carousel.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PiCarouselComponent } from './carousel/carousel.component';
-import { PiCarouselItemDirective } from './carousel.directive';
-import { PiSharedUIButtonModule } from '../button';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    PiSharedUIButtonModule,
-  ],
-  declarations: [PiCarouselComponent, PiCarouselItemDirective],
-  exports: [PiCarouselComponent, PiCarouselItemDirective],
-})
-export class PiSharedUICarouselModule {}

libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts

@@ -7,13 +7,15 @@ import {
   Output
 } from '@angular/core';
 import { Dataset } from '../../../util/models';
+import { NgFor } from '@angular/common';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-chart-legend',
     templateUrl: './chart-legend.component.html',
     styleUrls: ['./chart-legend.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgFor, TranslatePipe],
 })
 export class PiChartLegendComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/chart/chart.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PiChartComponent } from './chart/chart.component';
-import { PiChartLegendComponent } from './chart-legend/chart-legend.component';
-import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
-
-@NgModule({
-  imports: [
-    CommonModule, 
-    TranslatePipe, TranslateDirective,
-  ],
-  declarations: [PiChartComponent, PiChartLegendComponent],
-  exports: [PiChartComponent, PiChartLegendComponent],
-})
-export class PiSharedUIChartModule {}

libs/ui/src/lib/ui/chart/chart/chart.component.ts

@@ -25,6 +25,7 @@ import {
   Tooltip,
 } from 'chart.js';
 import { datasetConfig, scalesConfig, tooltipConfig } from '../chart.configs';
+import { PiChartLegendComponent } from '../chart-legend/chart-legend.component';
 
 function registerChartComponents() {
   Chart.register(CategoryScale);
@@ -41,11 +42,11 @@ function registerChartComponents() {
 
 registerChartComponents();
 @Component({
-  standalone: false,
     selector: 'pi-chart',
     templateUrl: './chart.component.html',
     styleUrls: ['./chart.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [PiChartLegendComponent],
 })
 export class PiChartComponent implements OnInit, AfterViewInit {
   @Input() type: 'line' | 'bar' = 'line';

libs/ui/src/lib/ui/chart/index.ts

@@ -1,4 +1,4 @@
-export * from './chart.module';
+
 
 export * from './chart/chart.component';
 

libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts

@@ -9,13 +9,15 @@ import {
 import { ComponentFamilyClass, mode, styleType } from '../../../styles';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { chipColor } from '../entities/chip.model';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-chip-action',
     templateUrl: './chip-action.component.html',
     styleUrls: ['./chip-action.component.scss', '../styles/base-chip.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiChipActionComponent extends PiBaseChipComponent {
   @HostBinding('class') get actionClasses(): string {

libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts

@@ -11,13 +11,14 @@ import { Date } from '../../../util/models';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { DateTime } from 'luxon';
 import _ from 'lodash';
+import { NgIf } from '@angular/common';
 
 @Component({
-  standalone: false,
     selector: 'pi-chip-date',
     templateUrl: './chip-date.component.html',
     styleUrls: ['./chip-date.component.scss', '../styles/base-chip.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf],
 })
 export class PiChipDateComponent extends PiBaseChipComponent {
   @HostBinding('class') get dateClasses(): string {

libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts

@@ -3,13 +3,15 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular
 // Shared
 import { status } from '../../../util/status';
 import { PiBaseChipComponent } from '../base-chip.component';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-chip-status',
     templateUrl: './chip-status.component.html',
     styleUrls: ['./chip-status.component.scss', '../styles/base-chip.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiChipStatusComponent extends PiBaseChipComponent {
   @HostBinding('class') get statusClasses(): string {

libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts

@@ -10,13 +10,15 @@ import { ComponentFamilyClass } from '../../../styles';
 import { DateTime } from 'luxon';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { chipThemingColor } from '../entities/chip.model';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-chip-time',
     templateUrl: './chip-time.component.html',
     styleUrls: ['./chip-time.component.scss', '../styles/base-chip.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiChipTimeComponent extends PiBaseChipComponent {
   @HostBinding('class') get dateClasses(): string {

libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { unit } from '../../../util/models';
+import { NgIf } from '@angular/common';
 
 @Component({
-  standalone: false,
     selector: 'pi-chip-value',
     templateUrl: './chip-value.component.html',
     styleUrls: ['./chip-value.component.scss', '../styles/base-chip.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf],
 })
 export class PiChipValueComponent extends PiBaseChipComponent {
   @HostBinding('class') get valueClasses(): string {

libs/ui/src/lib/ui/chip/chip/chip.component.ts

@@ -1,13 +1,15 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 import { theming } from '../../../styles';
 import { PiBaseChipComponent } from '../base-chip.component';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-chip',
     templateUrl: './chip.component.html',
     styleUrls: ['./chip.component.scss', '../styles/base-chip.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiChipComponent extends PiBaseChipComponent {
   @HostBinding('class') get chipClasses(): string {

libs/ui/src/lib/ui/chip/index.ts

@@ -1,4 +1,4 @@
-export * from './ui-chip.module';
+
 
 export * from './chip/chip.component';
 export * from './chip-action/chip-action.component';

libs/ui/src/lib/ui/chip/tile/tile.component.ts

@@ -1,12 +1,14 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
 import { ComponentFamilyClass, theming } from '../../../styles';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-tile',
     templateUrl: './tile.component.html',
     styleUrls: ['./tile.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiTileComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/chip/ui-chip.module.ts

@@ -1,41 +0,0 @@
-// Angular
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { MatIconModule } from '@angular/material/icon';
-
-// Components
-import { PiChipComponent } from './chip/chip.component';
-import { PiChipStatusComponent } from './chip-status/chip-status.component';
-import { PiTileComponent } from './tile/tile.component';
-import { PiChipValueComponent } from './chip-value/chip-value.component';
-import { PiChipDateComponent } from './chip-date/chip-date.component';
-import { PiChipTimeComponent } from './chip-time/chip-time.component';
-import { PiChipActionComponent } from './chip-action/chip-action.component';
-import { PiSharedUtilAffixModule } from '../../util/affix';
-import { PiSharedUtilValueModule } from '../../util/value';
-
-const MATERIAL_IMPORTS = [MatIconModule];
-
-@NgModule({
-  imports: [CommonModule, MATERIAL_IMPORTS, PiSharedUtilAffixModule, PiSharedUtilValueModule],
-  declarations: [
-    PiChipComponent,
-    PiChipActionComponent,
-    PiChipDateComponent,
-    PiChipStatusComponent,
-    PiChipValueComponent,
-    PiChipTimeComponent,
-    PiTileComponent,
-  ],
-  exports: [
-    PiChipComponent,
-    PiChipActionComponent,
-    PiChipDateComponent,
-    PiChipStatusComponent,
-    PiChipValueComponent,
-    PiChipTimeComponent,
-    PiTileComponent,
-  ],
-})
-export class PiSharedUIChipModule {}

libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts

@@ -14,12 +14,19 @@ import {
 import { justify } from '../../../styles';
 import { ListMode } from '../../../util/list-configs';
 import { cardType, columnsNumber, rowsNumber } from '../entities/data-grid.model';
+import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import { PiGridItemDirective } from '../directives/grid-item.directive';
 
 @Component({
-  standalone: false,
     selector: 'pi-data-grid',
     templateUrl: './data-grid.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        NgIf,
+        PiGridItemDirective,
+        NgTemplateOutlet,
+        NgFor,
+    ],
 })
 export class PiDataGridComponent<T> {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/data-grid/directives/cell.directive.ts

@@ -1,10 +1,7 @@
 import { AfterViewInit, Directive, ElementRef, HostBinding, Input } from '@angular/core';
 import { itemType } from '../entities/data-grid.model';
 
-@Directive({
-  standalone: false,
-  selector: '[pi-cell]',
-})
+@Directive({ selector: '[pi-cell]', })
 export class PiCellDirective implements AfterViewInit {
   @HostBinding(`class`) get cellType(): string | undefined {
     const textAlignClass = this.textAlign !== 'left' && `pi-cell__text-align--${this.textAlign}`;

libs/ui/src/lib/ui/data-grid/directives/grid-item.directive.ts

@@ -1,10 +1,7 @@
 import { Directive, ElementRef, HostBinding, HostListener, Input, Renderer2 } from '@angular/core';
 import { columnsNumber } from '../entities/data-grid.model';
 
-@Directive({
-  standalone: false,
-  selector: '[pi-grid-item]',
-})
+@Directive({ selector: '[pi-grid-item]', })
 export class PiGridItemDirective {
   @HostBinding(`class`) get gridItemType(): string {
     const isExpandableClass = this.isExpandable ? 'is-expandable' : '';

libs/ui/src/lib/ui/data-grid/index.ts

@@ -1,4 +1,4 @@
-export * from './shared-ui-data-grid.module';
+
 
 export * from './data-grid/data-grid.component';
 

libs/ui/src/lib/ui/data-grid/shared-ui-data-grid.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { PiDataGridComponent } from './data-grid/data-grid.component';
-import { PiCellDirective } from './directives/cell.directive';
-import { PiGridItemDirective } from './directives/grid-item.directive';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [PiDataGridComponent, PiCellDirective, PiGridItemDirective],
-  exports: [PiDataGridComponent, PiCellDirective, PiGridItemDirective],
-})
-export class PiSharedUIDataGridModule {}

libs/ui/src/lib/ui/data-table/base-data-table/base-data-table.component.ts

@@ -11,7 +11,6 @@ import {
 import { take } from 'rxjs/operators';
 
 @Component({
-  standalone: false,
     selector: 'pi-base-data-table',
     templateUrl: './base-data-table.component.html',
     styleUrls: ['./base-data-table.component.scss'],

libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts

@@ -1,12 +1,19 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
+import { PiBaseDataTableComponent } from '../base-data-table/base-data-table.component';
 
 export type PiDropdownSelectorTemplateType = 'text' | 'date' | 'amount' | 'input' | 'action';
 @Component({
-  standalone: false,
     selector: 'pi-cell-type',
     templateUrl: './cell-type.component.html',
     styleUrls: ['./cell-type.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        NgSwitch,
+        NgSwitchCase,
+        NgTemplateOutlet,
+        PiBaseDataTableComponent,
+    ],
 })
 export class PiCellTypeComponent {
     @HostBinding('class') className = 'pi-cell-type';

libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts

@@ -20,12 +20,13 @@ import {
 
 // RxJS
 import { take } from 'rxjs/operators';
+import { NgFor, NgTemplateOutlet } from '@angular/common';
 @Component({
-  standalone: false,
     selector: 'pi-data-table-item',
     templateUrl: './data-table-item.component.html',
     styleUrls: ['./data-table-item.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgFor, NgTemplateOutlet],
 })
 export class PiDataTableItemComponent implements AfterViewInit {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/data-table/index.ts

@@ -1,4 +1,4 @@
-export * from './ui-data-table.module';
+
 
 export * from './base-data-table/base-data-table.component';
 export * from './cell-type/cell-type.component';

libs/ui/src/lib/ui/data-table/ui-data-table.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-// Components
-import { PiBaseDataTableComponent } from './base-data-table/base-data-table.component';
-import { PiCellTypeComponent } from './cell-type/cell-type.component';
-import { PiDataTableItemComponent } from './data-table-item/data-table-item.component';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [PiBaseDataTableComponent, PiDataTableItemComponent, PiCellTypeComponent],
-  exports: [PiBaseDataTableComponent, PiDataTableItemComponent, PiCellTypeComponent],
-})
-export class PiSharedUIDataTableModule {}

libs/ui/src/lib/ui/divider/divider/divider.component.ts

@@ -2,13 +2,15 @@ import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular
 
 // Shared
 import { alignment, gap, iconSize, textColor } from '../../../styles';
+import { NgIf } from '@angular/common';
+import { PiIconComponent } from '../../icon/icon/icon.component';
 
 @Component({
-  standalone: false,
     selector: 'pi-divider',
     templateUrl: './divider.component.html',
     styleUrls: ['./divider.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, PiIconComponent],
 })
 export class PiDividerComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/divider/index.ts

@@ -1,3 +1,3 @@
-export * from './ui-divider.module';
+
 
 export * from './divider/divider.component';

libs/ui/src/lib/ui/divider/ui-divider.module.ts

@@ -1,16 +0,0 @@
-// Angular
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-// Component
-import { PiDividerComponent } from './divider/divider.component';
-
-// Shared
-import { PiSharedUIIconModule } from '../icon';
-
-@NgModule({
-  imports: [CommonModule, PiSharedUIIconModule],
-  declarations: [PiDividerComponent],
-  exports: [PiDividerComponent],
-})
-export class PiSharedUIDividerModule {}

libs/ui/src/lib/ui/error-status-code/index.ts

@@ -1,3 +1,3 @@
-export * from './ui-error-status-code.module';
+
 
 export * from './not-found/not-found.component';

libs/ui/src/lib/ui/error-status-code/not-found/not-found.component.ts

@@ -1,12 +1,28 @@
-import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, forwardRef } from '@angular/core';
 import { Location } from '@angular/common';
 import { LayoutTypeClass } from '../../../styles';
+import { PiMainWrapper } from '../../wrapper/main/main.wrapper';
+import { PiHeadlineComponent, PiHeadlineLabelContentDirective, PiHeadlineDescriptionContentDirective } from '../../image/headline/headline.component';
+import { PiTextXLargeDirective, PiTextMediumDirective } from '../../text/directives/text-sizes.directive';
+import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
+
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-not-found',
     templateUrl: './not-found.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+    PiMainWrapper,
+    PiHeadlineComponent,
+    PiHeadlineLabelContentDirective,
+    PiTextXLargeDirective,
+    PiTextWeightBoldDirective,
+    PiHeadlineDescriptionContentDirective,
+    PiTextMediumDirective,
+    forwardRef(() => PiNotFoundComponent),
+    TranslatePipe
+],
 })
 export class PiNotFoundComponent {
   @HostBinding('class') className = LayoutTypeClass.VerticallyCentered;

libs/ui/src/lib/ui/error-status-code/ui-error-status-code.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PiNotFoundComponent } from './not-found/not-found.component';
-import { PiSharedUIButtonModule } from '../button';
-import { PiSharedUIImageModule } from '../image';
-import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
-import { PiSharedUIWrapperModule } from '../wrapper';
-import { PiSharedUITextModule } from '../text';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    PiSharedUIButtonModule,
-    PiSharedUIImageModule,
-    PiSharedUITextModule,
-    PiSharedUIWrapperModule,
-    TranslatePipe, TranslateDirective
-  ],
-  declarations: [PiNotFoundComponent],
-  exports: [PiNotFoundComponent],
-})
-export class PiSharedUIErrorStatusCodeModule {}

libs/ui/src/lib/ui/form-field/base-form-field.component.ts

@@ -4,7 +4,6 @@ import { ComponentFamilyClass } from '../../styles';
 import { PiFormControl } from '../../util/form-control';
 
 @Component({
-  standalone: false,
   template: '',
   providers: [
     {

libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.ts

@@ -1,12 +1,17 @@
-import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, HostBinding, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 
-import { NgxCurrencyInputMode } from 'ngx-currency';
+import { NgxCurrencyInputMode, NgxCurrencyDirective } from 'ngx-currency';
 
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
+import { NgIf, NgFor } from '@angular/common';
+import { MatInput } from '@angular/material/input';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-currency-field',
     templateUrl: './currency-field.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17,6 +22,20 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+    MatFormField,
+    MatLabel,
+    MatSuffix,
+    NgIf,
+    MatInput,
+    NgxCurrencyDirective,
+    ReactiveFormsModule,
+    PiAutofocusDirective,
+    MatError,
+    NgFor,
+    forwardRef(() => PiCurrencyFieldComponent),
+    TranslatePipe
+],
 })
 export class PiCurrencyFieldComponent extends PiBaseFormFieldComponent {
   @HostBinding('class') className = `pi-form-field__currency`;

libs/ui/src/lib/ui/form-field/directives/autofocus.directive.ts

@@ -1,10 +1,7 @@
 import { Directive, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 import { MatInput } from '@angular/material/input';
 
-@Directive({
-  standalone: false,
-  selector: '[pi-autofocus]',
-})
+@Directive({ selector: '[pi-autofocus]', })
 export class PiAutofocusDirective implements OnInit, OnChanges {
   @Input() isAutofocusSelected: boolean;
 

libs/ui/src/lib/ui/form-field/directives/checkbox-grid.directive.ts

@@ -1,9 +1,6 @@
 import { Directive, HostBinding, Input } from '@angular/core';
 
-@Directive({
-  standalone: false,
-  selector: '[pi-checkbox-grid]',
-})
+@Directive({ selector: '[pi-checkbox-grid]', })
 export class PiCheckboxGridDirective {
   @HostBinding('class') get classes(): string {
     const columnClass =

libs/ui/src/lib/ui/form-field/directives/label.directive.ts

@@ -1,9 +1,6 @@
 import { Directive, ElementRef, HostBinding, Input, OnInit, Renderer2 } from '@angular/core';
 
-@Directive({
-  standalone: false,
-  selector: 'pi-label',
-})
+@Directive({ selector: 'pi-label', })
 export class PiLabelDirective implements OnInit {
   @HostBinding('class') get classes(): string {
     const validationClass = this.isRequired ? 'is-required' : ''; 

libs/ui/src/lib/ui/form-field/directives/radio-grid.directive.ts

@@ -2,10 +2,7 @@ import { Directive, HostBinding, Input } from '@angular/core';
 import { justify } from '../../../styles';
 
 // Flex
-@Directive({
-  standalone: false,
-  selector: '[pi-radio-grid]',
-})
+@Directive({ selector: '[pi-radio-grid]', })
 export class PiRadioGridDirective {
   @HostBinding('class') get classes(): string {
     const typeClass = this.type && `pi-radio-grid__type--${this.type}`;

libs/ui/src/lib/ui/form-field/email-field/email-field.component.ts

@@ -1,9 +1,15 @@
 import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { MatInput } from '@angular/material/input';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-email-field',
     templateUrl: './email-field.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,6 +20,20 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        MatFormField,
+        MatLabel,
+        MatSuffix,
+        PiIconComponent,
+        MatInput,
+        ReactiveFormsModule,
+        PiAutofocusDirective,
+        NgIf,
+        MatError,
+        NgFor,
+        PiCurrencyFieldComponent,
+        TranslatePipe,
+    ],
 })
 export class PiEmailFieldComponent extends PiBaseFormFieldComponent {
   @HostBinding('class') className = `pi-form-field__email`;

libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.ts

@@ -1,10 +1,15 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { iconSize } from '../../../styles';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-icon-field',
     templateUrl: './icon-field.component.html',
     styleUrls: ['./icon-field.component.scss'],
@@ -16,6 +21,18 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        PiIconComponent,
+        MatFormField,
+        MatLabel,
+        MatInput,
+        ReactiveFormsModule,
+        PiAutofocusDirective,
+        NgIf,
+        MatError,
+        NgFor,
+        TranslatePipe,
+    ],
 })
 export class PiIconFieldComponent extends PiBaseFormFieldComponent {
   @HostBinding('class') get componentClasses(): string {

libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.ts

@@ -1,10 +1,17 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Injectable, Input } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { unit } from '../../../util/models';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { MatFormField, MatLabel, MatPrefix, MatSuffix, MatError } from '@angular/material/form-field';
+import { PiPrefixDirective, PiSuffixDirective } from '../../../util/affix/affix.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { MatInput } from '@angular/material/input';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-incremental-number-field',
     templateUrl: './incremental-number-field.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -15,6 +22,23 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        MatFormField,
+        MatLabel,
+        PiPrefixDirective,
+        MatPrefix,
+        NgIf,
+        PiIconComponent,
+        PiSuffixDirective,
+        MatSuffix,
+        MatInput,
+        ReactiveFormsModule,
+        PiAutofocusDirective,
+        MatError,
+        NgFor,
+        PiCurrencyFieldComponent,
+        TranslatePipe,
+    ],
 })
 @Injectable()
 export class PiIncrementalNumberFieldComponent extends PiBaseFormFieldComponent {

libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.ts

@@ -1,12 +1,29 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
-import { FormGroup, FormGroupDirective } from '@angular/forms';
+import { FormGroup, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
 import { unit } from '../../../util/models';
+import { PiLabelDirective } from '../directives/label.directive';
+import { PiIncrementalNumberFieldComponent } from '../incremental-number-field/incremental-number-field.component';
+import { PiDividerComponent } from '../../divider/divider/divider.component';
+import { NgIf, NgFor } from '@angular/common';
+import { MatError } from '@angular/material/form-field';
+import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-incremental-range-field',
     templateUrl: './incremental-range-field.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        ReactiveFormsModule,
+        PiLabelDirective,
+        PiIncrementalNumberFieldComponent,
+        PiDividerComponent,
+        NgIf,
+        MatError,
+        NgFor,
+        PiCurrencyFieldComponent,
+        TranslatePipe,
+    ],
 })
 export class PiIncrementalRangeFieldComponent {
   @HostBinding('class') className =

libs/ui/src/lib/ui/form-field/index.ts

@@ -15,7 +15,7 @@ export * from './email-field/email-field.component';
 export * from './password-field/password-field.component';
 export * from './icon-field/icon-field.component';
 
-export * from './ui-form-field.module';
+
 
 export * from './phone-field/phone-field.component';
 

libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts

@@ -1,9 +1,14 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Injectable } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { MatFormField, MatLabel, MatPrefix, MatSuffix, MatError } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-number-field',
     templateUrl: './number-field.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,6 +19,20 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        MatFormField,
+        MatLabel,
+        MatPrefix,
+        MatSuffix,
+        MatInput,
+        ReactiveFormsModule,
+        PiAutofocusDirective,
+        NgIf,
+        MatError,
+        NgFor,
+        PiCurrencyFieldComponent,
+        TranslatePipe,
+    ],
 })
 
 @Injectable()

libs/ui/src/lib/ui/form-field/password-field/password-field.component.ts

@@ -1,9 +1,16 @@
 import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
+import { PiSuffixDirective } from '../../../util/affix/affix.directive';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { MatInput } from '@angular/material/input';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-password-field',
     templateUrl: './password-field.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,6 +21,21 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        MatFormField,
+        MatLabel,
+        PiSuffixDirective,
+        MatSuffix,
+        PiIconComponent,
+        MatInput,
+        ReactiveFormsModule,
+        PiAutofocusDirective,
+        NgIf,
+        MatError,
+        NgFor,
+        PiCurrencyFieldComponent,
+        TranslatePipe,
+    ],
 })
 export class PiPasswordFieldComponent extends PiBaseFormFieldComponent {
   @HostBinding('class') className = `pi-form-field__password`;

libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.ts

@@ -1,9 +1,15 @@
 import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { MatInput } from '@angular/material/input';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-phone-field',
     templateUrl: './phone-field.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,6 +20,20 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        MatFormField,
+        MatLabel,
+        MatSuffix,
+        PiIconComponent,
+        MatInput,
+        ReactiveFormsModule,
+        PiAutofocusDirective,
+        NgIf,
+        MatError,
+        NgFor,
+        PiCurrencyFieldComponent,
+        TranslatePipe,
+    ],
 })
 export class PiPhoneFieldComponent extends PiBaseFormFieldComponent {
   @HostBinding('class') className = `pi-form-field__phone`;

libs/ui/src/lib/ui/form-field/search-field/search-field.component.ts

@@ -8,12 +8,13 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { OnInit } from '@angular/core';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { NgIf } from '@angular/common';
 
 @Component({
-  standalone: false,
     selector: 'pi-search-field',
     templateUrl: './search-field.component.html',
     styleUrls: ['./search-field.component.scss'],
@@ -25,6 +26,11 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        PiIconComponent,
+        ReactiveFormsModule,
+        NgIf,
+    ],
 })
 export class PiSearchFieldComponent extends PiBaseFormFieldComponent implements OnInit {
   @HostBinding('class') override get classes(): string {

libs/ui/src/lib/ui/form-field/slide-toggle/slide-toggle.component.ts

@@ -1,9 +1,8 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
 
 @Component({
-  standalone: false,
     selector: 'pi-slide-toggle',
     templateUrl: './slide-toggle.component.html',
     styleUrls: ['./slide-toggle.component.scss'],
@@ -15,6 +14,7 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [ReactiveFormsModule],
 })
 export class PiSlideToggleComponent extends PiBaseFormFieldComponent implements OnInit {
   @HostBinding('class') override get classes(): string {

libs/ui/src/lib/ui/form-field/text-field/text-field.component.ts

@@ -1,9 +1,14 @@
 import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { MatFormField, MatLabel, MatSuffix, MatError } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-text-field',
     templateUrl: './text-field.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,6 +19,19 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        MatFormField,
+        MatLabel,
+        MatSuffix,
+        MatInput,
+        ReactiveFormsModule,
+        PiAutofocusDirective,
+        NgIf,
+        MatError,
+        NgFor,
+        PiCurrencyFieldComponent,
+        TranslatePipe,
+    ],
 })
 export class PiTextFieldComponent extends PiBaseFormFieldComponent {
   @HostBinding('class') className = `pi-form-field__text`;

libs/ui/src/lib/ui/form-field/textarea/textarea.component.ts

@@ -1,9 +1,15 @@
 import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
+import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { CdkTextareaAutosize } from '@angular/cdk/text-field';
+import { PiAutofocusDirective } from '../directives/autofocus.directive';
+import { NgIf, NgFor } from '@angular/common';
+import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-textarea',
     templateUrl: './textarea.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -14,6 +20,19 @@ import { PiBaseFormFieldComponent } from '../base-form-field.component';
             multi: true,
         },
     ],
+    imports: [
+        MatFormField,
+        MatLabel,
+        MatInput,
+        CdkTextareaAutosize,
+        ReactiveFormsModule,
+        PiAutofocusDirective,
+        NgIf,
+        MatError,
+        NgFor,
+        PiCurrencyFieldComponent,
+        TranslatePipe,
+    ],
 })
 export class PiTextareaComponent extends PiBaseFormFieldComponent {
   @HostBinding('class') className = 'pi-form-field__textarea';

libs/ui/src/lib/ui/form-field/ui-form-field.module.ts

@@ -1,113 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-
-// CDK
-import { OverlayModule } from '@angular/cdk/overlay';
-
-// Material
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSelectModule } from '@angular/material/select';
-import { TranslatePipe, TranslateDirective } from '@ngx-translate/core';
-import { MatIconModule } from '@angular/material/icon';
-
-// Ngx Currency
-import { NgxCurrencyDirective } from 'ngx-currency';
-// Shared
-import { PiSharedUIButtonModule } from '../button';
-import { PiSharedUIIconModule } from '../icon';
-import { PiSharedUITooltipModule } from '../tooltip';
-import { PiSharedUIWrapperModule } from '../wrapper';
-
-// Components
-import { PiCurrencyFieldComponent } from './currency-field/currency-field.component';
-import { PiEmailFieldComponent } from './email-field/email-field.component';
-import { PiIconFieldComponent } from './icon-field/icon-field.component';
-import { PiIncrementalNumberFieldComponent } from './incremental-number-field/incremental-number-field.component';
-import { PiNumberFieldComponent } from './number-field/number-field.component';
-import { PiPasswordFieldComponent } from './password-field/password-field.component';
-import { PiPhoneFieldComponent } from './phone-field/phone-field.component';
-import { PiSearchFieldComponent } from './search-field/search-field.component';
-import { PiTextFieldComponent } from './text-field/text-field.component';
-import { PiTextareaComponent } from './textarea/textarea.component';
-import { PiSharedUtilPipesModule } from '../../util/pipes';
-
-import { PiCheckboxGridDirective } from './directives/checkbox-grid.directive';
-import { PiLabelDirective } from './directives/label.directive';
-import { PiRadioGridDirective } from './directives/radio-grid.directive';
-import { PiSharedUIDividerModule } from '../divider';
-import { PiSharedUtilAffixModule } from '../../util/affix';
-import { PiSharedUtilColorModule } from '../../util/color';
-import { PiSharedUtilStatusModule } from '../../util/status';
-import { PiAutofocusDirective } from './directives/autofocus.directive';
-import { PiIncrementalRangeFieldComponent } from './incremental-range-field/incremental-range-field.component';
-import { PiSlideToggleComponent } from './slide-toggle/slide-toggle.component';
-
-const MATERIAL_IMPORTS = [
-  MatFormFieldModule,
-  MatInputModule,
-  MatProgressBarModule,
-  MatProgressSpinnerModule,
-  MatSelectModule,
-  MatIconModule,
-];
-@NgModule({
-  imports: [
-    CommonModule,
-    PiSharedUIButtonModule,
-    PiSharedUIDividerModule,
-    PiSharedUIIconModule,
-    PiSharedUITooltipModule,
-    PiSharedUIWrapperModule,
-    PiSharedUtilAffixModule,
-    PiSharedUtilColorModule,
-    PiSharedUtilPipesModule,
-    PiSharedUtilStatusModule,
-    FormsModule,
-    MATERIAL_IMPORTS,
-    NgxCurrencyDirective,
-    OverlayModule,
-    ReactiveFormsModule,
-    TranslatePipe, TranslateDirective,
-  ],
-  declarations: [
-    PiAutofocusDirective,
-    PiCheckboxGridDirective,
-    PiCurrencyFieldComponent,
-    PiEmailFieldComponent,
-    PiIconFieldComponent,
-    PiIncrementalNumberFieldComponent,
-    PiIncrementalRangeFieldComponent,
-    PiLabelDirective,
-    PiNumberFieldComponent,
-    PiPasswordFieldComponent,
-    PiPhoneFieldComponent,
-    PiRadioGridDirective,
-    PiSearchFieldComponent,
-    PiSlideToggleComponent,
-    PiTextareaComponent,
-    PiTextFieldComponent,
-  ],
-  exports: [
-    PiAutofocusDirective,
-    PiCheckboxGridDirective,
-    PiCurrencyFieldComponent,
-    PiEmailFieldComponent,
-    PiIconFieldComponent,
-    PiIncrementalNumberFieldComponent,
-    PiIncrementalRangeFieldComponent,
-    PiLabelDirective,
-    PiNumberFieldComponent,
-    PiPasswordFieldComponent,
-    PiPhoneFieldComponent,
-    PiRadioGridDirective,
-    PiSearchFieldComponent,
-    PiSlideToggleComponent,
-    PiTextareaComponent,
-    PiTextFieldComponent,
-  ],
-})
-export class PiSharedUIFormFieldModule {}

libs/ui/src/lib/ui/icon/icon/icon.component.ts

@@ -8,13 +8,15 @@ import {
   iconSize,
   styleType,
 } from '../../../styles';
+import { NgIf } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-  standalone: false,
     selector: 'pi-icon',
     templateUrl: './icon.component.html',
     styleUrls: ['./icon.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, MatIcon],
 })
 export class PiIconComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/icon/index.ts

@@ -1,3 +1,3 @@
-export * from './ui-icon.module';
+
 
 export * from './icon/icon.component';

libs/ui/src/lib/ui/icon/ui-icon.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { PiIconComponent } from './icon/icon.component';
-import { MatIconModule } from '@angular/material/icon';
-
-@NgModule({
-  declarations: [PiIconComponent],
-  imports: [CommonModule, MatIconModule],
-  exports: [PiIconComponent],
-})
-export class PiSharedUIIconModule {}

libs/ui/src/lib/ui/image/background-image.directive.ts

@@ -16,10 +16,7 @@ import { Device, DeviceConfigsFacade } from '../../util/device-configs';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-@Directive({
-  standalone: false,
-  selector: '[pi-background-image]',
-})
+@Directive({ selector: '[pi-background-image]', })
 export class PiBackgroundImageDirective implements AfterViewInit, OnDestroy {
   @HostBinding('class') get classes(): string {
     const animationClass = this.animation && `pi-background-image__animation--${this.animation}`;

libs/ui/src/lib/ui/image/headline/headline.component.ts

@@ -14,27 +14,27 @@ import {
   flexDirection,
   gap,
 } from '../../../styles';
+import { NgIf } from '@angular/common';
+import { SanitizerAltImagePipe } from '../../../util/pipes/pipes';
 
 @Directive({
-  standalone: false,
     selector: 'pi-headline-label-content',
     host: { class: 'pi-headline-content pi-headline-content__label' },
 })
 export class PiHeadlineLabelContentDirective {}
 
 @Directive({
-  standalone: false,
     selector: 'pi-headline-description-content',
     host: { class: 'pi-headline-content pi-headline-content__description' },
 })
 export class PiHeadlineDescriptionContentDirective {}
 
 @Component({
-  standalone: false,
     selector: 'pi-headline',
     templateUrl: './headline.component.html',
     styleUrls: ['./headline.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [NgIf, SanitizerAltImagePipe],
 })
 export class PiHeadlineComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/image/index.ts

@@ -1,4 +1,4 @@
-export * from './ui-image.module';
+
 
 export * from './background-image.directive';
 

libs/ui/src/lib/ui/image/ui-image.module.ts

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-// Shared
-import { PiSharedUtilPipesModule } from '../../util/pipes';
-
-// Components
-import {
-  PiHeadlineComponent,
-  PiHeadlineDescriptionContentDirective,
-  PiHeadlineLabelContentDirective,
-} from './headline/headline.component';
-import { PiBackgroundImageDirective } from './background-image.directive';
-
-@NgModule({
-  imports: [CommonModule, PiSharedUtilPipesModule],
-  declarations: [
-    PiHeadlineComponent,
-    PiHeadlineDescriptionContentDirective,
-    PiHeadlineLabelContentDirective,
-    PiBackgroundImageDirective,
-  ],
-  exports: [
-    PiHeadlineComponent,
-    PiHeadlineDescriptionContentDirective,
-    PiHeadlineLabelContentDirective,
-    PiBackgroundImageDirective,
-  ],
-})
-export class PiSharedUIImageModule {}

libs/ui/src/lib/ui/list-item/index.ts

@@ -1,3 +1,3 @@
-export * from './ui-list-item.module';
+
 
 export * from './list-item/list-item.component';

libs/ui/src/lib/ui/list-item/list-item/list-item.component.ts

@@ -11,35 +11,30 @@ import {
 } from '../../../styles';
 
 @Directive({
-  standalone: false,
     selector: 'pi-list-item-left-icon',
     host: { class: 'pi-list-item-icon pi-list-item-icon__left' },
 })
 export class PiListItemLeftIconDirective {}
 
 @Directive({
-  standalone: false,
     selector: 'pi-list-item-left-content',
     host: { class: 'pi-list-item-content pi-list-item-content__left' },
 })
 export class PiListItemLeftContentDirective {}
 
 @Directive({
-  standalone: false,
     selector: 'pi-list-item-right-content',
     host: { class: 'pi-list-item-content pi-list-item-content__right' },
 })
 export class PiListItemRightContentDirective {}
 
 @Directive({
-  standalone: false,
     selector: 'pi-list-item-right-icon',
     host: { class: 'pi-list-item-icon pi-list-item-icon__right' },
 })
 export class PiListItemRightIconDirective {}
 
 @Component({
-  standalone: false,
     selector: 'pi-list-item',
     templateUrl: './list-item.component.html',
     styleUrls: ['./list-item.component.scss'],

libs/ui/src/lib/ui/list-item/ui-list-item.module.ts

@@ -1,28 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {
-  PiListItemComponent,
-  PiListItemLeftIconDirective,
-  PiListItemLeftContentDirective,
-  PiListItemRightContentDirective,
-  PiListItemRightIconDirective,
-} from './list-item/list-item.component';
-
-@NgModule({
-  imports: [CommonModule],
-  declarations: [
-    PiListItemComponent,
-    PiListItemLeftIconDirective,
-    PiListItemLeftContentDirective,
-    PiListItemRightContentDirective,
-    PiListItemRightIconDirective,
-  ],
-  exports: [
-    PiListItemComponent,
-    PiListItemLeftIconDirective,
-    PiListItemLeftContentDirective,
-    PiListItemRightContentDirective,
-    PiListItemRightIconDirective,
-  ],
-})
-export class PiSharedUIListItemModule {}

libs/ui/src/lib/ui/modal/index.ts

@@ -1,6 +1,6 @@
 export * from './modal/modal.component';
 
-export * from './ui-modal.module';
+
 
 export * from './entities/modal.model';
 

libs/ui/src/lib/ui/modal/modal/modal.component.ts

@@ -6,13 +6,33 @@ import {
   ModalStyleType,
   ModalType,
 } from '../entities/modal.model';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
+import { PiTextLargeDirective } from '../../text/directives/text-sizes.directive';
+import { PiColorPrimaryDirective } from '../../../util/color/directives/colors.directive';
+import { PiCloseButtonComponent } from '../../button/close-button/close-button.component';
+import { PiHeadlineComponent, PiHeadlineLabelContentDirective, PiHeadlineDescriptionContentDirective } from '../../image/headline/headline.component';
+import { PiActionWrapper } from '../../wrapper/action/action.wrapper';
+import { PiGhostButtonDirective } from '../../button/button.directive';
 
 @Component({
-  standalone: false,
     selector: 'pi-modal',
     templateUrl: './modal.component.html',
     styleUrls: ['./modal.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        NgIf,
+        PiTextWeightBoldDirective,
+        PiTextLargeDirective,
+        PiColorPrimaryDirective,
+        PiCloseButtonComponent,
+        NgTemplateOutlet,
+        PiHeadlineComponent,
+        PiHeadlineLabelContentDirective,
+        PiHeadlineDescriptionContentDirective,
+        PiActionWrapper,
+        PiGhostButtonDirective,
+    ],
 })
 export class PiModalComponent {
   @HostBinding('class')

libs/ui/src/lib/ui/modal/ui-modal.module.ts

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PiModalComponent } from './modal/modal.component';
-
-// Material
-import { MatDialogModule } from '@angular/material/dialog';
-
-// Shared
-import { PiSharedUIButtonModule } from '../button';
-import { PiSharedUIImageModule } from '../image';
-import { PiSharedUITextModule } from '../text';
-import { PiSharedUIWrapperModule } from '../wrapper';
-import { PiSharedUtilColorModule } from '../../util/color';
-
-const MATERIAL_IMPORTS = [MatDialogModule];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    PiSharedUIButtonModule,
-    PiSharedUIImageModule,
-    PiSharedUITextModule,
-    PiSharedUIWrapperModule,
-    PiSharedUtilColorModule,
-    MATERIAL_IMPORTS,
-  ],
-  declarations: [PiModalComponent],
-  exports: [PiModalComponent],
-})
-export class PiSharedUIModalModule {}

libs/ui/src/lib/ui/note/index.ts

@@ -1,3 +1,3 @@
-export * from './ui-note.module';
+
 
 export * from './note/note.component';

libs/ui/src/lib/ui/note/note/note.component.ts

@@ -11,27 +11,33 @@ import { NoteStatus } from '../entities/note.model';
 
 import { status } from '../../../util/status';
 import { gap, alignment } from '../../../styles';
+import { MatIcon } from '@angular/material/icon';
+import { NgIf } from '@angular/common';
+import { PiTextSmallDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive';
 
 @Directive({
-  standalone: false,
     selector: 'pi-note-label-content',
     host: { class: 'pi-note-content pi-note-content__label' },
 })
 export class PiNoteLabelContentDirective {}
 
 @Directive({
-  standalone: false,
     selector: 'pi-note-action-content',
     host: { class: 'pi-note-content pi-note-content__action' },
 })
 export class PiNoteActionContentDirective {}
 
 @Component({
-  standalone: false,
     selector: 'pi-note',
     templateUrl: './note.component.html',
     styleUrls: ['./note.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        MatIcon,
+        NgIf,
+        PiTextSmallDirective,
+        PiTextXSmallDirective,
+    ],
 })
 export class PiNoteComponent implements OnInit {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/note/ui-note.module.ts

@@ -1,20 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { MatIconModule } from '@angular/material/icon';
-
-import { PiSharedUITextModule } from '../text';
-import { PiSharedUtilColorModule } from '../../util/color';
-
-import {
-  PiNoteActionContentDirective,
-  PiNoteComponent,
-  PiNoteLabelContentDirective,
-} from './note/note.component';
-
-@NgModule({
-  imports: [CommonModule, MatIconModule, PiSharedUITextModule, PiSharedUtilColorModule],
-  declarations: [PiNoteComponent, PiNoteLabelContentDirective, PiNoteActionContentDirective],
-  exports: [PiNoteComponent, PiNoteLabelContentDirective, PiNoteActionContentDirective],
-})
-export class PiSharedUINoteModule {}

libs/ui/src/lib/ui/notification/index.ts

@@ -13,7 +13,7 @@ export * from './state/notification.effects';
 export * from './utils';
 
 // Module
-export * from './shared-ui-notification.module';
+
 
 // Components
 export * from './snack-bar/snack-bar.component';

libs/ui/src/lib/ui/notification/shared-ui-notification.module.ts

@@ -1,23 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-
-import { PiSharedUIButtonModule } from '../button';
-import { PiSharedUIIconModule } from '../icon';
-import { PiSharedUITextModule } from '../text';
-
-import { PiSnackBarComponent } from './snack-bar/snack-bar.component';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    MatSnackBarModule,
-    PiSharedUIButtonModule,
-    PiSharedUIIconModule,
-    PiSharedUITextModule,
-  ],
-  declarations: [PiSnackBarComponent],
-  exports: [PiSnackBarComponent],
-})
-export class PiSharedUINotificationModule {}

libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts

@@ -1,20 +1,28 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  HostBinding,
-  Inject,
-  Input,
-  Optional,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, Optional, forwardRef } from '@angular/core';
 import { MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import { styleType } from '../../../styles';
+import { NgIf } from '@angular/common';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { PiMediumButtonDirective, PiGhostButtonDirective } from '../../button/button.directive';
+import { PiTextWeightMediumDirective } from '../../text/directives/text-weights.directive';
+import { PiTextMediumDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive';
+
 
 @Component({
-  standalone: false,
     selector: 'pi-snack-bar',
     templateUrl: './snack-bar.component.html',
     styleUrls: ['./snack-bar.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+    NgIf,
+    PiIconComponent,
+    PiMediumButtonDirective,
+    PiTextWeightMediumDirective,
+    PiTextMediumDirective,
+    PiTextXSmallDirective,
+    PiGhostButtonDirective,
+    forwardRef(() => PiSnackBarComponent)
+],
 })
 export class PiSnackBarComponent {
   @HostBinding('class') className = 'pi-snackbar';

libs/ui/src/lib/ui/paginator/index.ts

@@ -1,3 +1,3 @@
-export * from './shared-ui-paginator.module';
+
 
 export * from './paginator/paginator.component';

libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts

@@ -1,19 +1,21 @@
-import {
-  ChangeDetectionStrategy,
-  EventEmitter,
-  Component,
-  Output,
-  Input,
-  OnInit,
-  HostBinding,
-} from '@angular/core';
+import { ChangeDetectionStrategy, EventEmitter, Component, Output, Input, OnInit, HostBinding, forwardRef } from '@angular/core';
+import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
+import { NgIf, NgFor } from '@angular/common';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+
 
 @Component({
-  standalone: false,
     selector: 'pi-paginator',
     templateUrl: './paginator.component.html',
     styleUrls: ['./paginator.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+    PiIconButtonComponent,
+    NgIf,
+    NgFor,
+    PiIconComponent,
+    forwardRef(() => PiPaginatorComponent)
+],
 })
 export class PiPaginatorComponent implements OnInit {
   @HostBinding('class') className = 'pi-paginator';

libs/ui/src/lib/ui/paginator/shared-ui-paginator.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { PiPaginatorComponent } from './paginator/paginator.component';
-
-import { PiSharedUIButtonModule } from '../button';
-import { PiSharedUIIconModule } from '../icon';
-
-@NgModule({
-  imports: [CommonModule, PiSharedUIButtonModule, PiSharedUIIconModule],
-  declarations: [PiPaginatorComponent],
-  exports: [PiPaginatorComponent],
-})
-export class PiSharedUIPaginatorModule {}

libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.ts

@@ -11,16 +11,39 @@ import {
   SimpleChanges,
   TemplateRef,
 } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ComponentFamilyClass } from '../../../styles';
 import { PiBasePanelComponent } from '../base-panel.component';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { PiTextMediumDirective, PiTextXSmallDirective } from '../../text/directives/text-sizes.directive';
+import { PiTextWeightMediumDirective, PiTextWeightLightDirective } from '../../text/directives/text-weights.directive';
+import { PiMediumButtonDirective } from '../../button/button.directive';
+import { PiColorGreyDirective } from '../../../util/color/directives/colors.directive';
+import { PiDividerComponent } from '../../divider/divider/divider.component';
+import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  standalone: false,
     selector: 'pi-expansion-panel',
     templateUrl: './expansion-panel.component.html',
     styleUrls: ['./expansion-panel.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        NgIf,
+        ReactiveFormsModule,
+        PiTextMediumDirective,
+        PiTextWeightMediumDirective,
+        PiMediumButtonDirective,
+        PiColorGreyDirective,
+        PiTextWeightLightDirective,
+        PiTextXSmallDirective,
+        PiDividerComponent,
+        PiIconButtonComponent,
+        NgTemplateOutlet,
+        PiIconComponent,
+        TranslatePipe,
+    ],
 })
 export class PiExpansionPanelComponent extends PiBasePanelComponent implements OnInit, OnChanges {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/panel/index.ts

@@ -5,4 +5,4 @@ export * from './panel.directive';
 
 export * from './base-panel.component';
 
-export * from './ui-panel.module';
+