MOBILE-4759 chore: Main components, pipes and directives as standalone

Author: crazyserver

src/core/components/attachments/attachments.ts

@@ -28,6 +28,15 @@ import { toBoolean } from '@/core/transforms/boolean';
 import { CoreAlerts } from '@services/overlays/alerts';
 import { CoreToasts } from '@services/overlays/toasts';
 import { CoreWSFile } from '@services/ws';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreFileComponent } from '../file/file';
+import { CoreLocalFileComponent } from '../local-file/local-file';
+import { NgFor } from '@angular/common';
+import { CoreFaIconDirective } from '../../directives/fa-icon';
+import { CoreUpdateNonReactiveAttributesDirective } from '../../directives/update-non-reactive-attributes';
+import { CoreMarkRequiredComponent } from '../mark-required/mark-required';
+import { IonicModule } from '@ionic/angular';
+import { CoreLoadingComponent } from '../loading/loading';
 
 /**
  * Component to render attachments, allow adding more and delete the current ones.
@@ -46,6 +55,18 @@ import { CoreWSFile } from '@services/ws';
     selector: 'core-attachments',
     templateUrl: 'core-attachments.html',
     styleUrl: 'attachments.scss',
+    standalone: true,
+    imports: [
+        CoreLoadingComponent,
+        IonicModule,
+        CoreMarkRequiredComponent,
+        CoreUpdateNonReactiveAttributesDirective,
+        CoreFaIconDirective,
+        NgFor,
+        CoreLocalFileComponent,
+        CoreFileComponent,
+        TranslateModule,
+    ],
 })
 export class CoreAttachmentsComponent implements OnInit {
 

src/core/components/bs-tooltip/bs-tooltip.ts

@@ -14,13 +14,16 @@
 
 import { toBoolean } from '@/core/transforms/boolean';
 import { Component, Input } from '@angular/core';
+import { IonicModule } from '@ionic/angular';
 
 /**
  * Component to display a Bootstrap Tooltip in a popover.
  */
 @Component({
     selector: 'core-bs-tooltip',
     templateUrl: 'core-bs-tooltip.html',
+    standalone: true,
+    imports: [IonicModule],
 })
 export class CoreBSTooltipComponent {
 

src/core/components/button-with-spinner/button-with-spinner.ts

@@ -15,6 +15,8 @@
 import { toBoolean } from '@/core/transforms/boolean';
 import { Component, Input } from '@angular/core';
 import { CoreAnimations } from '@components/animations';
+import { TranslateModule } from '@ngx-translate/core';
+import { IonicModule } from '@ionic/angular';
 
 /**
  * Component to show a button or a spinner when loading.
@@ -29,6 +31,8 @@ import { CoreAnimations } from '@components/animations';
     templateUrl: 'core-button-with-spinner.html',
     styleUrl: 'button-with-spinner.scss',
     animations: [CoreAnimations.SHOW_HIDE],
+    standalone: true,
+    imports: [IonicModule, TranslateModule],
 })
 export class CoreButtonWithSpinnerComponent {
 

src/core/components/chart/chart.ts

@@ -18,6 +18,8 @@ import { Component, Input, OnDestroy, OnInit, ElementRef, OnChanges, ViewChild,
 import { CoreFilter } from '@features/filter/services/filter';
 import { CoreFilterHelper } from '@features/filter/services/filter-helper';
 import { ChartLegendLabelItem, ChartLegendOptions } from 'chart.js';
+import { CoreFaIconDirective } from '../../directives/fa-icon';
+import { IonicModule } from '@ionic/angular';
 
 /**
  * This component shows a chart using chart.js.
@@ -31,6 +33,8 @@ import { ChartLegendLabelItem, ChartLegendOptions } from 'chart.js';
     selector: 'core-chart',
     templateUrl: 'core-chart.html',
     styleUrl: 'chart.scss',
+    standalone: true,
+    imports: [IonicModule, CoreFaIconDirective],
 })
 export class CoreChartComponent implements OnDestroy, OnInit, OnChanges {
 

src/core/components/chrono/chrono.ts

@@ -24,6 +24,7 @@ import {
     SimpleChange,
     ChangeDetectorRef,
 } from '@angular/core';
+import { CoreSecondsToHMSPipe } from '../../pipes/seconds-to-hms';
 
 /**
  * This component shows a chronometer in format HH:MM:SS.
@@ -40,6 +41,10 @@ import {
 @Component({
     selector: 'core-chrono',
     templateUrl: 'core-chrono.html',
+    standalone: true,
+    imports: [
+        CoreSecondsToHMSPipe,
+    ],
 })
 export class CoreChronoComponent implements OnInit, OnChanges, OnDestroy {
 

src/core/components/combobox/combobox.ts

@@ -16,8 +16,12 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { Translate } from '@singletons';
 import { ModalOptions } from '@ionic/core';
 import { CoreModals } from '@services/overlays/modals';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { toBoolean } from '@/core/transforms/boolean';
+import { CoreFormatTextDirective } from '../../directives/format-text';
+import { CoreUpdateNonReactiveAttributesDirective } from '../../directives/update-non-reactive-attributes';
+import { CoreFaIconDirective } from '../../directives/fa-icon';
+import { IonicModule } from '@ionic/angular';
 
 /**
  * Component that show a combo select button (combobox).
@@ -44,10 +48,18 @@ import { toBoolean } from '@/core/transforms/boolean';
     providers: [
         {
             provide: NG_VALUE_ACCESSOR,
-            multi:true,
+            multi: true,
             useExisting: CoreComboboxComponent,
         },
     ],
+    standalone: true,
+    imports: [
+        IonicModule,
+        FormsModule,
+        CoreFaIconDirective,
+        CoreUpdateNonReactiveAttributesDirective,
+        CoreFormatTextDirective,
+    ],
 })
 export class CoreComboboxComponent implements ControlValueAccessor {
 

src/core/components/components.module.ts

@@ -12,14 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule, Type } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { TranslateModule } from '@ngx-translate/core';
-import { FormsModule } from '@angular/forms';
-
-import { CoreDirectivesModule } from '@directives/directives.module';
-import { CorePipesModule } from '@pipes/pipes.module';
+import { NgModule, Type } from '@angular/core';
 
 import { CoreAttachmentsComponent } from './attachments/attachments';
 import { CoreBSTooltipComponent } from './bs-tooltip/bs-tooltip';
@@ -44,7 +37,6 @@ import { CoreNavigationBarComponent } from './navigation-bar/navigation-bar';
 import { CoreProgressBarComponent } from './progress-bar/progress-bar';
 import { CoreRecaptchaComponent } from './recaptcha/recaptcha';
 import { CoreSendMessageFormComponent } from './send-message-form/send-message-form';
-import { CoreShowPasswordComponent } from './show-password/show-password';
 import { CoreSitePickerComponent } from './site-picker/site-picker';
 import { CoreSplitViewComponent } from './split-view/split-view';
 import { CoreTabComponent } from './tabs/tab';
@@ -72,14 +64,17 @@ import { CoreSitesListComponent } from './sites-list/sites-list';
 export async function getCoreStandaloneComponents(): Promise<Type<unknown>[]> {
     // eslint-disable-next-line deprecation/deprecation
     const { CoreStyleComponent } = await import('@components/style/style');
+    // eslint-disable-next-line deprecation/deprecation
+    const { CoreShowPasswordComponent } = await import('@components/show-password/show-password');
 
     return [
         CoreStyleComponent,
+        CoreShowPasswordComponent,
     ];
 }
 
 @NgModule({
-    declarations: [
+    imports: [
         CoreAttachmentsComponent,
         CoreBSTooltipComponent,
         CoreButtonWithSpinnerComponent,
@@ -107,7 +102,6 @@ export async function getCoreStandaloneComponents(): Promise<Type<unknown>[]> {
         CoreProgressBarComponent,
         CoreRecaptchaComponent,
         CoreSendMessageFormComponent,
-        CoreShowPasswordComponent, // eslint-disable-line deprecation/deprecation
         CoreSitePickerComponent,
         CoreSplitViewComponent,
         CoreSwipeSlidesComponent,
@@ -123,14 +117,6 @@ export async function getCoreStandaloneComponents(): Promise<Type<unknown>[]> {
         CoreSheetModalComponent,
         CoreSitesListComponent,
     ],
-    imports: [
-        CommonModule,
-        IonicModule,
-        FormsModule,
-        TranslateModule.forChild(),
-        CoreDirectivesModule,
-        CorePipesModule,
-    ],
     exports: [
         CoreAttachmentsComponent,
         CoreBSTooltipComponent,
@@ -159,7 +145,6 @@ export async function getCoreStandaloneComponents(): Promise<Type<unknown>[]> {
         CoreProgressBarComponent,
         CoreRecaptchaComponent,
         CoreSendMessageFormComponent,
-        CoreShowPasswordComponent, // eslint-disable-line deprecation/deprecation
         CoreSitePickerComponent,
         CoreSplitViewComponent,
         CoreSwipeSlidesComponent,
@@ -175,6 +160,5 @@ export async function getCoreStandaloneComponents(): Promise<Type<unknown>[]> {
         CoreSheetModalComponent,
         CoreSitesListComponent,
     ],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class CoreComponentsModule {}

src/core/components/context-menu/context-menu-item.ts

@@ -33,6 +33,7 @@ import { CoreUtils } from '@singletons/utils';
 @Component({
     selector: 'core-context-menu-item',
     template: '',
+    standalone: true,
 })
 export class CoreContextMenuItemComponent implements OnInit, OnDestroy, OnChanges {
 

src/core/components/context-menu/context-menu.ts

@@ -20,13 +20,22 @@ import { CoreUtils } from '@singletons/utils';
 import { Translate } from '@singletons';
 import { CoreContextMenuItemComponent } from './context-menu-item';
 import { CoreDirectivesRegistry } from '@singletons/directives-registry';
+import { CoreFaIconDirective } from '../../directives/fa-icon';
+import { CoreUpdateNonReactiveAttributesDirective } from '../../directives/update-non-reactive-attributes';
+import { IonicModule } from '@ionic/angular';
 
 /**
  * This component adds a button (usually in the navigation bar) that displays a context menu popover.
  */
 @Component({
     selector: 'core-context-menu',
     templateUrl: 'core-context-menu.html',
+    standalone: true,
+    imports: [
+        IonicModule,
+        CoreUpdateNonReactiveAttributesDirective,
+        CoreFaIconDirective,
+    ],
 })
 export class CoreContextMenuComponent implements OnInit, OnDestroy {
 

src/core/components/course-image/course-image.ts

@@ -17,11 +17,20 @@ import { Component, ElementRef, HostBinding, input, effect } from '@angular/core
 import { CoreCourseListItem } from '@features/courses/services/courses';
 import { CoreCoursesHelper } from '@features/courses/services/courses-helper';
 import { CoreColors } from '@singletons/colors';
+import { CoreExternalContentDirective } from '../../directives/external-content';
+import { CoreFaIconDirective } from '../../directives/fa-icon';
+import { IonicModule } from '@ionic/angular';
 
 @Component({
     selector: 'core-course-image',
     templateUrl: 'course-image.html',
     styleUrl: './course-image.scss',
+    standalone: true,
+    imports: [
+        IonicModule,
+        CoreFaIconDirective,
+        CoreExternalContentDirective,
+    ],
 })
 export class CoreCourseImageComponent {