RED-3800: make some components standalone

src/lib/buttons/buttons.module.ts

@@ -9,11 +9,10 @@ import { IconButtonComponent } from './icon-button/icon-button.component';
 import { IqserIconsModule } from '../icons';
 
 const matModules = [MatButtonModule, MatTooltipModule];
-const components = [ChevronButtonComponent, CircleButtonComponent, IconButtonComponent];
+const deleteThisWhenAllComponentsAreStandalone = [CircleButtonComponent, IconButtonComponent, ChevronButtonComponent];
 
 @NgModule({
-    declarations: [...components],
+    imports: [CommonModule, IqserIconsModule, TranslateModule, ...deleteThisWhenAllComponentsAreStandalone, ...matModules],
-    imports: [CommonModule, IqserIconsModule, TranslateModule, ...matModules],
+    exports: [...deleteThisWhenAllComponentsAreStandalone],
-    exports: [...components],
 })
 export class IqserButtonsModule {}

src/lib/buttons/chevron-button/chevron-button.component.ts

@@ -1,10 +1,15 @@
 import { Component, Input } from '@angular/core';
 import { randomString } from '../../utils';
+import { NgIf } from '@angular/common';
+import { IqserIconsModule } from '../../icons';
+import { MatLegacyButtonModule } from '@angular/material/legacy-button';
 
 @Component({
     selector: 'iqser-chevron-button [label]',
     templateUrl: './chevron-button.component.html',
     styleUrls: ['./chevron-button.component.scss'],
+    standalone: true,
+    imports: [NgIf, IqserIconsModule, MatLegacyButtonModule],
 })
 export class ChevronButtonComponent {
     @Input() label!: string;

src/lib/buttons/circle-button/circle-button.component.ts

@@ -1,12 +1,17 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatTooltip } from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
 import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
+import { NgIf } from '@angular/common';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { IqserIconsModule } from '../../icons';
 
 @Component({
     selector: 'iqser-circle-button [icon]',
     templateUrl: './circle-button.component.html',
     styleUrls: ['./circle-button.component.scss'],
+    standalone: true,
+    imports: [MatTooltipModule, IqserIconsModule, NgIf, MatButtonModule],
 })
 export class CircleButtonComponent implements OnInit {
     readonly circleButtonTypes = CircleButtonTypes;

src/lib/buttons/icon-button/icon-button.component.html

@@ -9,4 +9,5 @@
     <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
     <span>{{ label }}</span>
 </button>
+
 <div *ngIf="showDot" class="dot"></div>

src/lib/buttons/icon-button/icon-button.component.ts

@@ -1,11 +1,16 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
 import { randomString } from '../../utils';
+import { NgClass, NgIf } from '@angular/common';
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { IqserIconsModule } from '../../icons';
 
 @Component({
     selector: 'iqser-icon-button [label]',
     templateUrl: './icon-button.component.html',
     styleUrls: ['./icon-button.component.scss'],
+    standalone: true,
+    imports: [NgClass, MatButtonModule, NgIf, IqserIconsModule],
 })
 export class IconButtonComponent {
     readonly iconButtonTypes = IconButtonTypes;

src/lib/empty-states/empty-state.module.ts

@@ -2,15 +2,15 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IqserIconsModule } from '../icons';
 import { EmptyStateComponent } from './empty-state/empty-state.component';
-import { IqserButtonsModule } from '../buttons';
+import { IconButtonComponent } from '../buttons';
 import { IqserHelpModeModule } from '../help-mode';
 
-const modules = [IqserIconsModule, IqserButtonsModule, IqserHelpModeModule];
+const modules = [IqserIconsModule, IqserHelpModeModule];
 const components = [EmptyStateComponent];
 
 @NgModule({
     declarations: [...components],
-    imports: [CommonModule, ...modules],
+    imports: [CommonModule, ...modules, IconButtonComponent],
     exports: [...components],
 })
 export class IqserEmptyStatesModule {}

src/lib/empty-states/empty-state/empty-state.component.html

@@ -7,17 +7,20 @@
     class="empty-state"
 >
     <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
+
     <div class="ng-content-wrapper heading-l">
         <ng-content></ng-content>
     </div>
-    <div class="heading-l" [innerHTML]="text"></div>
+
+    <div [innerHTML]="text" class="heading-l"></div>
+
     <iqser-icon-button
-        [buttonId]="buttonId"
         (action)="action.emit()"
         *ngIf="showButton"
+        [buttonId]="buttonId"
         [icon]="buttonIcon"
+        [iqserHelpMode]="helpModeKey"
         [label]="buttonLabel"
         [type]="iconButtonTypes.primary"
-        [iqserHelpMode]="helpModeKey"
     ></iqser-icon-button>
 </div>

src/lib/filtering/filters.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { TranslateModule } from '@ngx-translate/core';
-import { IqserButtonsModule } from '../buttons';
+import { ChevronButtonComponent, IconButtonComponent } from '../buttons';
 import { PopupFilterComponent } from './popup-filter/popup-filter.component';
 import { QuickFiltersComponent } from './quick-filters/quick-filters.component';
 import { IqserIconsModule } from '../icons';
@@ -13,12 +13,12 @@ import { SingleFilterComponent } from './single-filter/single-filter.component';
 import { FilterCardComponent } from './filter-card/filter-card.component';
 
 const matModules = [MatCheckboxModule, MatMenuModule];
-const modules = [TranslateModule, IqserButtonsModule, IqserIconsModule, IqserInputsModule, IqserHelpModeModule];
+const modules = [TranslateModule, IqserIconsModule, IqserInputsModule, IqserHelpModeModule];
 const components = [QuickFiltersComponent, PopupFilterComponent, SingleFilterComponent, FilterCardComponent];
 
 @NgModule({
     declarations: [...components],
     exports: [...components],
-    imports: [CommonModule, ...matModules, ...modules],
+    imports: [CommonModule, ...matModules, ...modules, IconButtonComponent, ChevronButtonComponent],
 })
 export class IqserFiltersModule {}

src/lib/help-mode/help-mode.module.ts

@@ -4,20 +4,20 @@ import { TranslateModule } from '@ngx-translate/core';
 import { HelpModeDialogComponent } from './help-mode-dialog/help-mode-dialog.component';
 import { HelpModeComponent } from './help-mode/help-mode.component';
 import { HelpModeDirective } from './help-mode.directive';
-import { IqserButtonsModule } from '../buttons';
 import { IqserIconsModule } from '../icons';
 import { HelpButtonComponent } from './help-button/help-button.component';
 import { HelpModeService } from './help-mode.service';
 import { HelpDocs } from './help-docs';
 import { HELP_DOCS } from './tokens';
 import { MatDialogModule } from '@angular/material/dialog';
+import { CircleButtonComponent } from '../buttons';
 
 const matModules = [MatDialogModule];
 const components = [HelpModeComponent, HelpModeDialogComponent, HelpModeDirective, HelpButtonComponent];
 
 @NgModule({
     declarations: [...components],
-    imports: [CommonModule, IqserIconsModule, ...matModules, TranslateModule, IqserButtonsModule],
+    imports: [CommonModule, IqserIconsModule, ...matModules, TranslateModule, CircleButtonComponent],
     exports: [...components],
 })
 export class IqserHelpModeModule {

src/lib/inputs/editable-input/editable-input.component.html

@@ -25,6 +25,7 @@
 
     <div class="flex">
         <iqser-circle-button (action)="saveValue()" [tooltip]="saveTooltip" [type]="buttonsType" icon="iqser:check"></iqser-circle-button>
+
         <iqser-circle-button
             (action)="editing = false"
             [tooltip]="cancelTooltip"

src/lib/inputs/input-with-action/input-with-action.component.ts

@@ -1,11 +1,17 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { randomString } from '../../utils';
+import { FormsModule } from '@angular/forms';
+import { NgIf } from '@angular/common';
+import { CircleButtonComponent } from '../../buttons';
+import { IqserIconsModule } from '../../icons';
 
 @Component({
     selector: 'iqser-input-with-action',
     templateUrl: './input-with-action.component.html',
     styleUrls: ['./input-with-action.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [FormsModule, NgIf, IqserIconsModule, CircleButtonComponent],
 })
 export class InputWithActionComponent {
     @Input() inputId = `${randomString() + '-search-input'}`;

src/lib/inputs/inputs.module.ts

@@ -1,7 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { IqserButtonsModule } from '../buttons';
 import { RoundCheckboxComponent } from './round-checkbox/round-checkbox.component';
 import { EditableInputComponent } from './editable-input/editable-input.component';
 import { InputWithActionComponent } from './input-with-action/input-with-action.component';
@@ -12,22 +11,16 @@ import { DynamicInputComponent } from './dynamic-input/dynamic-input.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { CircleButtonComponent } from '../buttons';
 
-const modules = [
+const modules = [IqserIconsModule, TranslateModule, FormsModule, ReactiveFormsModule, MatDatepickerModule, MatInputModule];
-    IqserIconsModule,
+const components = [RoundCheckboxComponent, EditableInputComponent, DetailsRadioComponent, DynamicInputComponent];
-    TranslateModule,
+const deleteThisWhenAllComponentsAreStandalone = [InputWithActionComponent];
-    IqserButtonsModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatDatepickerModule,
-    MatInputModule,
-];
-const components = [RoundCheckboxComponent, EditableInputComponent, InputWithActionComponent, DetailsRadioComponent, DynamicInputComponent];
 
 @NgModule({
     declarations: [...components],
-    exports: [...components],
+    exports: [...components, ...deleteThisWhenAllComponentsAreStandalone],
-    imports: [CommonModule, ...modules],
+    imports: [CommonModule, ...modules, ...deleteThisWhenAllComponentsAreStandalone, CircleButtonComponent],
     providers: [{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }],
 })
 export class IqserInputsModule {}

src/lib/listing/listing.module.ts

@@ -17,11 +17,11 @@ import { IqserEmptyStatesModule } from '../empty-states';
 import { WorkflowComponent } from './workflow/workflow.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { PageHeaderComponent } from './page-header/page-header.component';
-import { IqserButtonsModule } from '../buttons';
 import { IqserHelpModeModule } from '../help-mode';
 import { TableContentComponent } from './table-content/table-content.component';
 import { TableItemComponent } from './table-content/table-item/table-item.component';
 import { ColumnHeaderComponent } from './workflow/column-header/column-header.component';
+import { CircleButtonComponent, IconButtonComponent } from '../buttons';
 
 const matModules = [MatTooltipModule];
 const components = [
@@ -41,7 +41,6 @@ const modules = [
     IqserFiltersModule,
     IqserInputsModule,
     IqserIconsModule,
-    IqserButtonsModule,
     IqserScrollbarModule,
     IqserEmptyStatesModule,
     ScrollingModule,
@@ -53,6 +52,6 @@ const utils = [SyncWidthDirective];
 @NgModule({
     declarations: [...components, ...utils],
     exports: [...components, ...utils],
-    imports: [CommonModule, ...modules, ...matModules],
+    imports: [CommonModule, ...modules, ...matModules, CircleButtonComponent, IconButtonComponent],
 })
 export class IqserListingModule {}

src/lib/shared/shared.module.ts

@@ -4,11 +4,13 @@ import { CommonModule } from '@angular/common';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { IqserIconsModule } from '../icons';
 
-const components = [SmallChipComponent, StatusBarComponent, SideNavComponent, LogoComponent];
+const components = [SmallChipComponent, LogoComponent];
+
+const deleteThisWhenAllComponentsAreStandalone = [SideNavComponent, StatusBarComponent];
 
 @NgModule({
     declarations: [...components],
-    exports: [...components],
+    exports: [...components, ...deleteThisWhenAllComponentsAreStandalone],
-    imports: [CommonModule, MatTooltipModule, IqserIconsModule],
+    imports: [CommonModule, MatTooltipModule, IqserIconsModule, ...deleteThisWhenAllComponentsAreStandalone],
 })
 export class IqserSharedModule {}

src/lib/shared/side-nav/side-nav.component.ts

@@ -4,6 +4,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
     selector: 'iqser-side-nav [title]',
     templateUrl: './side-nav.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
 })
 export class SideNavComponent {
     @Input() title!: string;

src/lib/shared/status-bar/status-bar.component.ts

@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
 import { StatusBarConfig } from './status-bar-config.model';
+import { NgClass, NgForOf, NgIf, NgStyle } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
     selector: 'iqser-status-bar',
@@ -7,6 +9,8 @@ import { StatusBarConfig } from './status-bar-config.model';
     styleUrls: ['./status-bar.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [NgClass, NgStyle, NgForOf, MatTooltipModule, NgIf],
 })
 export class StatusBarComponent<T extends string> {
     @Input() configs: readonly StatusBarConfig<T>[] = [];