MOBILE-4842 chore: Migrate some Inputs and Outputs on directives

Author: crazyserver

src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html

@@ -41,8 +41,9 @@ <h2>{{ field.dimtitle }}</h2>
             } @else {
                 <ion-item class="ion-text-wrap">
                     <ion-label>
-                        <p class="item-heading">{{ 'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle
-                    } }}</p>
+                        <p class="item-heading">
+                            {{ 'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle} }}
+                        </p>
                         <p>
                             <core-format-text [text]="selectedValues[n].peercomment" contextLevel="module" [contextInstanceId]="moduleId"
                                 [courseId]="courseId" />

src/core/directives/aria-button.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, ElementRef, OnInit, Output, EventEmitter, OnChanges, SimpleChanges, Input, inject } from '@angular/core';
+import { Directive, ElementRef, OnInit, inject, input, effect, output } from '@angular/core';
 import { CoreDom } from '@singletons/dom';
 import { toBoolean } from '../transforms/boolean';
 
@@ -22,35 +22,31 @@ import { toBoolean } from '../transforms/boolean';
 @Directive({
     selector: '[ariaButtonClick]',
 })
-export class CoreAriaButtonClickDirective implements OnInit, OnChanges {
+export class CoreAriaButtonClickDirective implements OnInit {
 
-    @Input({ transform: toBoolean }) disabled = false;
-    @Output() ariaButtonClick = new EventEmitter();
+    readonly disabled = input(false, { transform: toBoolean });
+    readonly ariaButtonClick = output<MouseEvent | KeyboardEvent>();// Emit when the button is clicked.
 
     protected element: HTMLElement = inject(ElementRef).nativeElement;
 
-    /**
-     * @inheritdoc
-     */
-    ngOnInit(): void {
-        CoreDom.initializeClickableElementA11y(this.element, (event) => this.ariaButtonClick.emit(event));
+    constructor() {
+        effect(() => {
+            const disabled = this.disabled();
+            if (this.element.getAttribute('tabindex') === '0' && disabled) {
+                this.element.setAttribute('tabindex', '-1');
+            }
+
+            if (this.element.getAttribute('tabindex') === '-1' && !disabled) {
+                this.element.setAttribute('tabindex', '0');
+            }
+        });
     }
 
     /**
      * @inheritdoc
      */
-    ngOnChanges(changes: SimpleChanges): void {
-        if (!changes.disabled) {
-            return;
-        }
-
-        if (this.element.getAttribute('tabindex') === '0' && this.disabled) {
-            this.element.setAttribute('tabindex', '-1');
-        }
-
-        if (this.element.getAttribute('tabindex') === '-1' && !this.disabled) {
-            this.element.setAttribute('tabindex', '0');
-        }
+    ngOnInit(): void {
+        CoreDom.initializeClickableElementA11y(this.element, (event) => this.ariaButtonClick.emit(event));
     }
 
 }

src/core/directives/auto-focus.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, Input, ElementRef, AfterViewInit, inject } from '@angular/core';
+import { Directive, ElementRef, AfterViewInit, inject, input } from '@angular/core';
 
 import { CoreDom } from '@singletons/dom';
 import { CoreWait } from '@singletons/wait';
@@ -31,7 +31,7 @@ import { toBoolean } from '../transforms/boolean';
 })
 export class CoreAutoFocusDirective implements AfterViewInit {
 
-    @Input({ alias: 'core-auto-focus', transform: toBoolean }) autoFocus = true;
+    readonly autoFocus = input(true, { alias: 'core-auto-focus', transform: toBoolean });
 
     protected element: HTMLIonInputElement | HTMLIonTextareaElement | HTMLIonSearchbarElement | HTMLElement
         = inject(ElementRef).nativeElement;
@@ -40,7 +40,7 @@ export class CoreAutoFocusDirective implements AfterViewInit {
      * @inheritdoc
      */
     async ngAfterViewInit(): Promise<void> {
-        if (!this.autoFocus) {
+        if (!this.autoFocus()) {
             return;
         }
 

src/core/directives/auto-rows.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, ElementRef, Output, EventEmitter, AfterViewInit, Input, OnChanges, inject } from '@angular/core';
+import { Directive, ElementRef, Output, EventEmitter, inject, input, effect, output } from '@angular/core';
 
 /**
  * Directive to adapt a textarea rows depending on the input text. It's based on Moodle's data-auto-rows.
@@ -24,45 +24,28 @@ import { Directive, ElementRef, Output, EventEmitter, AfterViewInit, Input, OnCh
 @Directive({
     selector: 'textarea[core-auto-rows], ion-textarea[core-auto-rows]',
 })
-export class CoreAutoRowsDirective implements AfterViewInit, OnChanges {
+export class CoreAutoRowsDirective {
+
+    readonly value = input<string>(undefined, { alias: 'core-auto-rows' });
+    readonly onResize = output<void>();// Emit when resizing the textarea.
 
     protected height = 0;
     protected element: HTMLElement = inject(ElementRef).nativeElement;
 
-    @Input('core-auto-rows') value?: string;
-    @Output() onResize: EventEmitter<void>; // Emit when resizing the textarea.
-
     constructor() {
-        this.onResize = new EventEmitter();
-    }
+        effect(() => {
+            this.value();
 
-    /**
-     * Resize after initialized.
-     */
-    ngAfterViewInit(): void {
-        // Wait for rendering of child views.
-        setTimeout(() => {
+            // Resize the textarea when the value changes.
             this.resize();
-        }, 300);
-    }
-
-    /**
-     * Resize when content changes.
-     */
-    ngOnChanges(): void {
-        this.resize();
-
-        if (this.value === '') {
-            // Maybe the form was resetted. In that case it takes a bit to update the height.
-            setTimeout(() => this.resize(), 300);
-        }
+        });
     }
 
     /**
      * Resize the textarea.
      */
     protected resize(): void {
-        if (this.element.tagName == 'ION-TEXTAREA') {
+        if (this.element.tagName === 'ION-TEXTAREA') {
             // Search the actual textarea.
             const textarea = this.element.querySelector('textarea');
             if (!textarea) {
@@ -77,7 +60,7 @@ export class CoreAutoRowsDirective implements AfterViewInit, OnChanges {
         this.element.style.height = `${this.element.scrollHeight}px`;
 
         // Emit event when resizing.
-        if (this.height != this.element.scrollHeight) {
+        if (this.height !== this.element.scrollHeight) {
             this.height = this.element.scrollHeight;
             this.onResize.emit();
         }

src/core/directives/collapsible-footer.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, ElementRef, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { Directive, ElementRef, OnDestroy, OnInit, inject, input } from '@angular/core';
 import { ScrollDetail } from '@ionic/core';
 import { IonContent } from '@ionic/angular';
 import { CoreUtils } from '@singletons/utils';
@@ -38,7 +38,7 @@ import { toBoolean } from '../transforms/boolean';
 })
 export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
 
-    @Input({ transform: toBoolean }) appearOnBottom = false; // Whether footer should re-appear when reaching the bottom.
+    readonly appearOnBottom = input(false, { transform: toBoolean }); // Whether footer should re-appear when reaching the bottom.
 
     protected id = '0';
     protected element: HTMLElement = inject(ElementRef).nativeElement;
@@ -218,7 +218,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
     protected onScroll(scrollDetail: ScrollDetail, scrollElement: HTMLElement): void {
         const maxScroll = scrollElement.scrollHeight - scrollElement.offsetHeight;
         const footerHasFocus = this.moduleNav?.contains(document.activeElement);
-        if (scrollDetail.scrollTop <= 0 || (this.appearOnBottom && scrollDetail.scrollTop >= maxScroll) || footerHasFocus) {
+        if (scrollDetail.scrollTop <= 0 || (this.appearOnBottom() && scrollDetail.scrollTop >= maxScroll) || footerHasFocus) {
             // Reset.
             this.setBarHeight(this.initialHeight);
         } else {

src/core/directives/collapsible-item.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, ElementRef, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { Directive, ElementRef, OnDestroy, OnInit, inject, input } from '@angular/core';
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
 import { CoreLoadingComponent } from '@components/loading/loading';
 import { CoreSettingsHelper } from '@features/settings/services/settings-helper';
@@ -46,7 +46,7 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
      * Using this parameter will force display: block to calculate height better.
      * If you want to avoid this use class="inline" at the same time to use display: inline-block.
      */
-    @Input('collapsible-item') height: number | string = defaultMaxHeight;
+    readonly height = input<number | string>(defaultMaxHeight, { alias: 'collapsible-item' });
 
     protected element: HTMLElement = inject(ElementRef).nativeElement;
     protected toggleExpandEnabled = false;
@@ -72,16 +72,17 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
-        if (this.height === null) {
+        const height = this.height();
+        if (height === null) {
             return;
         }
 
-        if (typeof this.height === 'string') {
-            this.maxHeight = this.height === ''
+        if (typeof height === 'string') {
+            this.maxHeight = height === ''
                 ? defaultMaxHeight
-                : parseInt(this.height, 10);
+                : parseInt(height, 10);
         } else {
-            this.maxHeight = this.height;
+            this.maxHeight = height;
         }
         this.maxHeight = this.maxHeight < minMaxHeight ? defaultMaxHeight : this.maxHeight;
 

src/core/directives/download-file.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Directive, Input, OnInit, ElementRef, inject } from '@angular/core';
+import { Directive, OnInit, ElementRef, inject, input } from '@angular/core';
 import { CoreFileHelper } from '@services/file-helper';
 import { CoreAlerts } from '@services/overlays/alerts';
 import { CoreLoadings } from '@services/overlays/loadings';
@@ -28,9 +28,9 @@ import { Translate } from '@singletons';
 })
 export class CoreDownloadFileDirective implements OnInit {
 
-    @Input('core-download-file') file?: CoreWSFile; // The file to download.
-    @Input() component?: string; // Component to link the file to.
-    @Input() componentId?: string | number; // Component ID to use in conjunction with the component.
+    readonly file = input<CoreWSFile>(undefined, { alias: 'core-download-file' }); // The file to download.
+    readonly component = input<string>(); // Component to link the file to.
+    readonly componentId = input<string | number>(); // Component ID to use in conjunction with the component.
 
     protected element: HTMLElement = inject(ElementRef).nativeElement;
 
@@ -39,7 +39,8 @@ export class CoreDownloadFileDirective implements OnInit {
      */
     ngOnInit(): void {
         this.element.addEventListener('click', async (ev: Event) => {
-            if (!this.file) {
+            const file = this.file();
+            if (!file) {
                 return;
             }
 
@@ -49,7 +50,7 @@ export class CoreDownloadFileDirective implements OnInit {
             const modal = await CoreLoadings.show();
 
             try {
-                await CoreFileHelper.downloadAndOpenFile(this.file, this.component, this.componentId);
+                await CoreFileHelper.downloadAndOpenFile(file, this.component(), this.componentId());
             } catch (error) {
                 CoreAlerts.showError(error, { default: Translate.instant('core.errordownloading') });
             } finally {

src/core/directives/supress-events.ts

@@ -14,7 +14,7 @@
 
 // Based on http://roblouie.com/article/198/using-gestures-in-the-ionic-2-beta/
 
-import { Directive, ElementRef, OnInit, Input, Output, EventEmitter, inject } from '@angular/core';
+import { Directive, ElementRef, OnInit, Output, EventEmitter, inject, input } from '@angular/core';
 import { CoreLogger } from '@singletons/logger';
 
 /**
@@ -41,7 +41,9 @@ import { CoreLogger } from '@singletons/logger';
 })
 export class CoreSupressEventsDirective implements OnInit {
 
-    @Input('core-suppress-events') suppressEvents?: string | string[];
+    readonly suppressEvents = input<string | string[]>(undefined, { alias: 'core-suppress-events' });
+    // Not migrable yet, observed is not supported in Angular 20.
+    // https://github.com/angular/angular/issues/54837
     @Output() onClick = new EventEmitter();
 
     protected element: HTMLElement = inject(ElementRef).nativeElement;
@@ -59,17 +61,18 @@ export class CoreSupressEventsDirective implements OnInit {
 
         let events: string[];
 
-        if (this.suppressEvents == 'all' || this.suppressEvents === undefined || this.suppressEvents === null) {
+        const suppressEvents = this.suppressEvents();
+        if (suppressEvents == 'all' || suppressEvents === undefined || suppressEvents === null) {
             // Suppress all events.
             events = ['click', 'mousedown', 'touchdown', 'touchmove', 'touchstart'];
 
-        } else if (typeof this.suppressEvents == 'string') {
+        } else if (typeof suppressEvents == 'string') {
             // It's a string, just suppress this event.
-            events = [this.suppressEvents];
+            events = [suppressEvents];
 
-        } else if (Array.isArray(this.suppressEvents)) {
+        } else if (Array.isArray(suppressEvents)) {
             // Array supplied.
-            events = this.suppressEvents;
+            events = suppressEvents;
         } else {
             events = [];
         }