MOBILE-4081 modicon: Fix modicon purpose

src/addons/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html

@@ -16,7 +16,7 @@
                 <ion-card>
                     <ion-item class="core-course-module-handler ion-text-wrap" detail="false" (click)="action($event, item)" button>
                         <core-mod-icon slot="start" *ngIf="item.iconUrl" [modicon]="item.iconUrl" [modname]="item.modname"
-                            [componentId]="item.cmid" [showAlt]="false">
+                            [componentId]="item.cmid" [showAlt]="false" [purpose]="item.purpose">
                         </core-mod-icon>
                         <ion-label>
                             <!-- Add the icon title so accessibility tools read it. -->

src/addons/block/recentlyaccesseditems/services/recentlyaccesseditems.ts

@@ -103,6 +103,8 @@ export const AddonBlockRecentlyAccessedItems = makeSingleton(AddonBlockRecentlyA
 
 /**
  * Result of WS block_recentlyaccesseditems_get_recent_items.
+ *
+ * The most recently accessed activities/resources by the logged user.
  */
 export type AddonBlockRecentlyAccessedItemsItem = {
     id: number; // Id.
@@ -116,6 +118,7 @@ export type AddonBlockRecentlyAccessedItemsItem = {
     viewurl: string; // Viewurl.
     courseviewurl: string; // Courseviewurl.
     icon: string; // Icon.
+    purpose?: string; // Purpose. @since 4.0
 } & AddonBlockRecentlyAccessedItemsItemCalculatedData;
 
 /**

src/addons/block/timeline/components/events/addon-block-timeline-events.html

@@ -23,7 +23,7 @@
                             <ion-col class="addon-block-timeline-activity-time ion-no-padding">
                                 <small>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</small>
                                 <core-mod-icon *ngIf="event.iconUrl" [modicon]="event.iconUrl" [componentId]="event.instance"
-                                    [modname]="event.modulename">
+                                    [modname]="event.modulename" [purpose]="event.purpose">
                                 </core-mod-icon>
                             </ion-col>
                             <ion-col class="addon-block-timeline-activity-name ion-no-padding">

src/addons/calendar/components/upcoming-events/addon-calendar-upcoming-events.html

@@ -8,7 +8,7 @@
                 <ion-item class="ion-text-wrap addon-calendar-event" [attr.aria-label]="event.name" (click)="eventClicked(event)" button
                     [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" [detail]="false">
                     <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [modname]="event.modulename"
-                        [componentId]="event.instance" [showAlt]="false"></core-mod-icon>
+                        [componentId]="event.instance" [showAlt]="false" [purpose]="event.purpose"></core-mod-icon>
                     <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start" aria-hidden="true">
                     </ion-icon>
                     <ion-label>

src/addons/calendar/pages/day/day.html

@@ -70,7 +70,7 @@
                                         (click)="gotoEvent(event.id, day)" [class.item-dimmed]="event.ispast"
                                         [ngClass]="['addon-calendar-eventtype-'+event.eventtype]" button [detail]="false">
                                         <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" slot="start" [showAlt]="false"
-                                            [modname]="event.modulename" [componentId]="event.instance">
+                                            [modname]="event.modulename" [componentId]="event.instance" [purpose]="event.purpose">
                                         </core-mod-icon>
                                         <ion-icon *ngIf="event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" slot="start"
                                             aria-hidden="true">

src/addons/calendar/pages/event/event.html

@@ -42,7 +42,7 @@
         <ion-list *ngIf="event">
             <ion-item class="ion-text-wrap addon-calendar-event" collapsible [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
                 <core-mod-icon *ngIf="event.moduleIcon" [modicon]="event.moduleIcon" [showAlt]="false" [modname]="event.modulename"
-                    [componentId]="event.instance" slot="start"></core-mod-icon>
+                    [componentId]="event.instance" slot="start" [purpose]="event.purpose"></core-mod-icon>
                 <ion-icon *ngIf=" event.eventIcon && !event.moduleIcon" [name]="event.eventIcon" aria-hidden="true" slot="start">
                 </ion-icon>
                 <ion-label>

src/addons/calendar/services/calendar-helper.ts

@@ -178,6 +178,7 @@ export class AddonCalendarHelperProvider {
             format: 1,
             visible: 1,
             offline: false,
+            purpose: 'purpose' in event ? event.purpose : undefined,
         };
 
         if (event.modulename) {

src/addons/calendar/services/calendar.ts

@@ -1949,6 +1949,7 @@ export type AddonCalendarEventBase = {
  */
 export type AddonCalendarEvent = AddonCalendarEventBase & {
     url: string; // Url.
+    purpose?: string; // Purpose. @since 4.0
     action?: {
         name: string; // Name.
         url: string; // Url.
@@ -2302,6 +2303,7 @@ export type AddonCalendarEventToDisplay = Partial<AddonCalendarCalendarEvent> &
     ispast?: boolean; // Calculated in the app. Whether the event is in the past.
     contextLevel?: ContextLevel;
     contextInstanceId?: number;
+    purpose?: string; // Purpose. @since 4.0
 };
 
 /**

src/core/components/mod-icon/mod-icon.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { CoreConstants } from '@/core/constants';
+import { CoreConstants, ModPurpose } from '@/core/constants';
 import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChange } from '@angular/core';
 import { CoreCourse } from '@features/course/services/course';
 import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
@@ -31,10 +31,11 @@ const fallbackModName = 'external-tool';
 })
 export class CoreModIconComponent implements OnInit, OnChanges {
 
-    @Input() modname?; // The module name. Used also as component if set.
+    @Input() modname?: string; // The module name. Used also as component if set.
-    @Input() componentId?; // Component Id for external icons.
+    @Input() componentId?: number; // Component Id for external icons.
     @Input() modicon?: string; // Module icon url or local url.
     @Input() showAlt = true; // Show alt otherwise it's only presentation icon.
+    @Input() purpose: ModPurpose = ModPurpose.MOD_PURPOSE_OTHER; // Purpose of the module.
 
     icon = '';
     modNameTranslated = '';
@@ -62,10 +63,15 @@ export class CoreModIconComponent implements OnInit, OnChanges {
         this.modNameTranslated = this.modname ? CoreCourse.translateModuleName(this.modname) || '' : '';
         if (CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.0')) {
             this.legacyIcon = false;
-            const purposeClass =
-                CoreCourseModuleDelegate.supportsFeature<string>(this.modname, CoreConstants.FEATURE_MOD_PURPOSE, '');
 
-            if (purposeClass != '') {
+            const purposeClass =
+                CoreCourseModuleDelegate.supportsFeature<ModPurpose>(
+                    this.modname || '',
+                    CoreConstants.FEATURE_MOD_PURPOSE,
+                    this.purpose,
+                );
+
+            if (purposeClass) {
                 const element: HTMLElement = this.el.nativeElement;
                 element.classList.add(purposeClass);
             }
@@ -94,8 +100,8 @@ export class CoreModIconComponent implements OnInit, OnChanges {
         // If modname is not set icon won't be cached.
         // Also if the url matches the regexp (the theme will manage the image so it's not cached).
         this.linkIconWithComponent =
-            this.modname &&
+            !!this.modname &&
-            this.componentId &&
+            !!this.componentId &&
             !this.isLocalUrl &&
             !this.icon.match('/theme/image.php/[^/]+/' + this.modname + '/[-0-9]*/');
     }