fix: inputs readonly and isHandset required

packages/src/lib/anchor-menu/anchor-menu.component.ts

@@ -19,7 +19,7 @@ import { Anchor } from './anchor-menu.interface';
   styleUrls: ['./anchor-menu.component.scss']
 })
 export class AnchorMenuComponent implements OnInit {
-  anchors = input.required<Anchor[]>();
+  readonly anchors = input.required<Anchor[]>();
 
   constructor(
     private activatedRoute: ActivatedRoute,

packages/src/lib/block-link/block-link-icon/block-link-icon.component.ts

@@ -25,7 +25,7 @@ export class BlockLinkIconComponent {
   readonly icon = input.required<BlockLinkSection['icon']>();
   readonly description = input<BlockLinkSection['description']>();
 
-  externalPath: Signal<boolean | undefined> = computed(() => {
+  readonly externalPath: Signal<boolean | undefined> = computed(() => {
     if (!this.path()) {
       return;
     }

packages/src/lib/block-link/block-link-see-more/block-link-see-more.component.ts

@@ -24,7 +24,7 @@ export class BlockLinkSeeMoreComponent {
   readonly label = input.required<BlockLinkSection['seeMoreLabel']>();
   readonly path = input.required<BlockLinkSection['path']>();
 
-  externalPath: Signal<boolean | undefined> = computed(() => {
+  readonly externalPath: Signal<boolean | undefined> = computed(() => {
     if (!this.path()) {
       return;
     }

packages/src/lib/block-link/block-link-subsection/block-link-subsection.component.ts

@@ -23,7 +23,7 @@ import { BlockLinkSubsection } from '../block-link.interface';
 export class BlockLinkSubsectionComponent {
   readonly subsection = input.required<BlockLinkSubsection>();
 
-  externalPath: Signal<boolean | undefined> = computed(() => {
+  readonly externalPath: Signal<boolean | undefined> = computed(() => {
     const path = this.subsection().path;
     if (!path) {
       return;

packages/src/lib/block-link/block-link-title-description/block-link-title-description.component.ts

@@ -24,7 +24,7 @@ export class BlockLinkTitleDescriptionComponent {
   readonly section = input.required<BlockLinkSection>();
   readonly isHandset = input.required<boolean>();
 
-  externalPath: Signal<boolean | undefined> = computed(() => {
+  readonly externalPath: Signal<boolean | undefined> = computed(() => {
     const path = this.section().path;
     if (!path) {
       return;

packages/src/lib/block-link/block-link.component.ts

@@ -33,7 +33,7 @@ export class BlockLinkComponent {
   readonly section = input.required<BlockLinkSection>();
   readonly isHandset = input.required<boolean>();
 
-  externalPath: Signal<boolean | undefined> = computed(() => {
+  readonly externalPath: Signal<boolean | undefined> = computed(() => {
     const path = this.section().path;
     if (!path) {
       return;

packages/src/lib/breadcrumbs/breadcrumbs-base.ts

@@ -10,7 +10,7 @@ import {
 export abstract class BreadcrumbsBase {
   abstract breadcrumbs: Signal<Breadcrumbs>;
 
-  readonly isHandset = input(false);
+  readonly isHandset = input.required<boolean>();
 
   readonly breadcrumbsList = this.getBreadcrumbs();
 

packages/src/lib/breadcrumbs/breadcrumbs-item/breadcrumbs-item.component.spec.ts

@@ -21,6 +21,7 @@ describe('BreadcrumbsItemComponent', () => {
       menu: [{ title: '', url: '' }]
     });
     fixture.componentRef.setInput('last', false);
+    fixture.componentRef.setInput('isHandset', false);
 
     fixture.detectChanges();
   });
@@ -38,6 +39,7 @@ describe('BreadcrumbsItemComponent', () => {
 
     fixture.componentRef.setInput('breadcrumb', breadcrumb);
     fixture.componentRef.setInput('last', false);
+    fixture.componentRef.setInput('isHandset', false);
 
     fixture.detectChanges();
 
@@ -56,6 +58,7 @@ describe('BreadcrumbsItemComponent', () => {
 
     fixture.componentRef.setInput('breadcrumb', breadcrumb);
     fixture.componentRef.setInput('last', true);
+    fixture.componentRef.setInput('isHandset', false);
 
     fixture.detectChanges();
 

packages/src/lib/breadcrumbs/breadcrumbs-item/breadcrumbs-item.component.ts

@@ -13,7 +13,7 @@ import { Breadcrumb } from '../shared/breadcrumbs.interface';
   styleUrl: './breadcrumbs-item.component.scss'
 })
 export class BreadcrumbsItemComponent {
-  breadcrumb = input.required<Breadcrumb>();
-  last = input.required<boolean>();
-  isHandset = input<boolean>();
+  readonly breadcrumb = input.required<Breadcrumb>();
+  readonly last = input.required<boolean>();
+  readonly isHandset = input.required<boolean>();
 }

packages/src/lib/breadcrumbs/breadcrumbs-list/breadcrumbs-list.component.ts

@@ -47,8 +47,8 @@ import { AnyBreadcrumb, BreadcrumbMenu } from '../shared';
   `
 })
 export class BreadcrumbsListComponent {
-  breadcrumbs = input.required<AnyBreadcrumb[]>();
-  isHandset = input(false);
+  readonly breadcrumbs = input.required<AnyBreadcrumb[]>();
+  readonly isHandset = input.required<boolean>();
 
   isMenu(breadcrumb: AnyBreadcrumb): breadcrumb is BreadcrumbMenu {
     return !!(breadcrumb as BreadcrumbMenu)?.menu;

packages/src/lib/breadcrumbs/breadcrumbs-menu/breadcrumbs-menu.component.ts

@@ -15,5 +15,5 @@ import { BreadcrumbMenu } from '../shared/breadcrumbs.interface';
   styleUrl: './breadcrumbs-menu.component.scss'
 })
 export class BreadcrumbsMenuComponent {
-  breadcrumb = input.required<BreadcrumbMenu>();
+  readonly breadcrumb = input.required<BreadcrumbMenu>();
 }

packages/src/lib/breadcrumbs/breadcrumbs.component.ts

@@ -25,5 +25,5 @@ import { Breadcrumbs } from './shared';
   }
 })
 export class BreadcrumbsComponent extends BreadcrumbsBase {
-  breadcrumbs = input.required<Breadcrumbs>();
+  readonly breadcrumbs = input.required<Breadcrumbs>();
 }

packages/src/lib/button/button.component.ts

@@ -5,8 +5,8 @@ type ButtonColor = 'primary' | 'accent' | 'warn';
 
 @Directive()
 class ButtonBase {
-  color = input<ButtonColor>();
-  disableRipple = input<boolean>();
+  readonly color = input<ButtonColor>();
+  readonly disableRipple = input<boolean>();
 
   click = output();
 

packages/src/lib/contact/contact.component.ts

@@ -12,6 +12,6 @@ import { IContact } from './contact.interface';
   styleUrls: ['./contact.component.scss']
 })
 export class ContactComponent {
-  title = input.required<string>();
-  contact = input.required<IContact>();
+  readonly title = input.required<string>();
+  readonly contact = input.required<IContact>();
 }

packages/src/lib/footer/footer-copyright/footer-copyright.component.ts

@@ -16,8 +16,10 @@ import { FooterCopyright } from '../footer.interface';
   styleUrls: ['./footer-copyright.component.scss']
 })
 export class FooterCopyrightComponent {
-  copyright = input.required<FooterCopyright>();
+  readonly copyright = input.required<FooterCopyright>();
   readonly containerClass = input<string>();
 
-  year = computed(() => this.copyright().year || new Date().getFullYear());
+  readonly year = computed(
+    () => this.copyright().year || new Date().getFullYear()
+  );
 }

packages/src/lib/footer/footer-links/footer-links.component.ts

@@ -11,6 +11,6 @@ import { SiteMapLinks } from '../footer.interface';
   styleUrls: ['./footer-links.component.scss']
 })
 export class FooterLinksComponent {
-  externalLinks = input<SiteMapLinks>();
+  readonly externalLinks = input<SiteMapLinks>();
   readonly containerClass = input<string>();
 }

packages/src/lib/footer/footer-navigation/footer-navigation.component.ts

@@ -12,8 +12,8 @@ import { FooterNavLogo, SiteMapLinks } from '../footer.interface';
   styleUrls: ['./footer-navigation.component.scss']
 })
 export class FooterNavigationComponent {
-  title = input<string>();
-  logo = input<FooterNavLogo>();
-  siteMapLinks = input<SiteMapLinks>();
+  readonly title = input<string>();
+  readonly logo = input<FooterNavLogo>();
+  readonly siteMapLinks = input<SiteMapLinks>();
   readonly containerClass = input<string>();
 }

packages/src/lib/footer/footer.component.ts

@@ -22,10 +22,10 @@ import {
   styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent {
-  title = input<string>();
-  logo = input<FooterNavLogo>();
-  siteMapLinks = input<SiteMapLinks>();
-  externalLinks = input<SiteMapLinks>();
-  copyright = input.required<FooterCopyright>();
-  containerClass = input<string>();
+  readonly title = input<string>();
+  readonly logo = input<FooterNavLogo>();
+  readonly siteMapLinks = input<SiteMapLinks>();
+  readonly externalLinks = input<SiteMapLinks>();
+  readonly copyright = input.required<FooterCopyright>();
+  readonly containerClass = input<string>();
 }

packages/src/lib/header/header.component.ts

@@ -3,6 +3,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 
+import { Language } from '@igo2/sdg/core';
+
 import {
   IHeaderContactUs,
   IHeaderLanguageChoice,
@@ -20,7 +22,7 @@ export class HeaderComponent {
   readonly title = input.required<string>();
   readonly contactUs = input<IHeaderContactUs>();
   readonly languages = input<IHeaderLanguages>();
-  readonly currentLanguage = input<string>();
+  readonly currentLanguage = input<IHeaderLanguageChoice['key']>();
   readonly isHandset = input.required<boolean>();
   readonly containerClass = input<string>();
 
@@ -33,7 +35,7 @@ export class HeaderComponent {
     );
   }
 
-  changeLanguage(language: string): void {
+  changeLanguage(language: Language): void {
     this.languageChange.emit(language);
   }
 }

packages/src/lib/lateral-menu/lateral-menu-item/lateral-menu-item.component.ts

@@ -12,7 +12,7 @@ import { LateralMenuItem } from '../lateral-menu.interface';
   styleUrls: ['./lateral-menu-item.component.scss']
 })
 export class LateralMenuItemComponent {
-  item = input.required<LateralMenuItem>();
-  isSectionItem = input<boolean>();
-  isHandset = input.required<boolean>();
+  readonly item = input.required<LateralMenuItem>();
+  readonly isSectionItem = input<boolean>();
+  readonly isHandset = input.required<boolean>();
 }

packages/src/lib/lateral-menu/lateral-menu-section/lateral-menu-section.component.ts

@@ -53,8 +53,8 @@ import { LateralMenuItem } from '../lateral-menu.interface';
   ]
 })
 export class LateralMenuSectionComponent implements OnInit {
-  section = input.required<LateralMenuItem>();
-  isHandset = input.required<boolean>();
+  readonly section = input.required<LateralMenuItem>();
+  readonly isHandset = input.required<boolean>();
 
   opened = signal(false);
 

packages/src/lib/lateral-menu/lateral-menu.component.ts

@@ -54,9 +54,9 @@ import { LateralMenuSections } from './lateral-menu.interface';
   ]
 })
 export class LateralMenuComponent {
-  title = input.required<string>();
-  sections = input.required<LateralMenuSections>();
-  isHandset = input.required<boolean>();
+  readonly title = input.required<string>();
+  readonly sections = input.required<LateralMenuSections>();
+  readonly isHandset = input.required<boolean>();
 
   opened = signal(false);
 

packages/src/lib/notice/notice.component.html

@@ -1,9 +1,7 @@
-<div class="sdg-notice-colored-zone" [class]="getColoredZoneClass()">
-  <mat-icon
-    class="sdg-notice-colored-zone-icon"
-    [class]="getColoredZoneIconClass()"
-    >{{ getColoredZoneIcon() }}</mat-icon
-  >
+<div class="sdg-notice-colored-zone" [class]="coloredZoneClass()">
+  <mat-icon class="sdg-notice-colored-zone-icon" [class]="coloredZoneClass()">{{
+    coloredZoneIcon()
+  }}</mat-icon>
 </div>
 
 <div class="sdg-notice-content" [class.--handset]="isHandset()">

packages/src/lib/notice/notice.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input
+} from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 
 import { NoticeIcon, NoticeType } from './notice.interface';
@@ -20,19 +25,12 @@ export class NoticeComponent {
   readonly message = input.required<string>();
   readonly isHandset = input.required<boolean>();
 
-  getColoredZoneClass() {
-    return `--${NoticeType[this.type()]}`;
-  }
-
-  getColoredZoneIconClass() {
-    return `--${NoticeType[this.type()]}`;
-  }
-
-  getColoredZoneIcon(): string | undefined {
+  readonly coloredZoneClass = computed(() => `--${NoticeType[this.type()]}`);
+  readonly coloredZoneIcon = computed(() => {
     if (Object.keys(NoticeType).includes(this.type()) && !this.icon()) {
       return NoticeIcon[this.type()];
     } else {
       return this.icon();
     }
-  }
+  });
 }

packages/src/lib/paginator/paginator.component.ts

@@ -22,11 +22,11 @@ import { IgoLanguageModule } from '@igo2/core/language';
   styleUrls: ['./paginator.component.scss']
 })
 export class PaginatorComponent implements OnInit {
-  listLength = input.required<number>();
-  pageSize = input.required<number>();
-  middlePagesMaxRange = input<number>(1);
-  initialPageIndex = input<number>(0);
-  isHandset = input<boolean>();
+  readonly listLength = input.required<number>();
+  readonly pageSize = input.required<number>();
+  readonly middlePagesMaxRange = input<number>(1);
+  readonly initialPageIndex = input<number>(0);
+  readonly isHandset = input.required<boolean>();
 
   pageChange = output<number>();
 

packages/src/lib/sequential-links/sequential-links.component.ts

@@ -13,9 +13,9 @@ import { SequentialLink } from './sequential-links.interface';
   styleUrls: ['./sequential-links.component.scss']
 })
 export class SequentialLinksComponent {
-  previous = input<SequentialLink>();
-  next = input<SequentialLink>();
-  isHandset = input<boolean>();
+  readonly previous = input<SequentialLink>();
+  readonly next = input<SequentialLink>();
+  readonly isHandset = input.required<boolean>();
 
   constructor(
     private router: Router,

packages/src/lib/tile/tile.component.spec.ts

@@ -17,6 +17,7 @@ describe('TileComponent', () => {
     component = fixture.componentInstance;
     fixture.componentRef.setInput('title', 'Title');
     fixture.componentRef.setInput('href', 'https://www.google.com/');
+    fixture.componentRef.setInput('isHandset', false);
     fixture.detectChanges();
   });
 

packages/src/lib/tile/tile.component.ts

@@ -11,13 +11,13 @@ import { Router } from '@angular/router';
   styleUrls: ['./tile.component.scss']
 })
 export class TileComponent {
-  icon = input<string>();
-  title = input.required<string, string>({
+  readonly icon = input<string>();
+  readonly title = input.required<string, string>({
     transform: this.titleValidation
   });
-  message = input<string>();
-  href = input.required<string>();
-  isHandset = input<boolean>();
+  readonly message = input<string>();
+  readonly href = input.required<string>();
+  readonly isHandset = input.required<boolean>();
 
   constructor(private router: Router) {}
 

projects/demo/src/app/components/example-viewer/example-viewer.component.ts

@@ -24,9 +24,9 @@ const DEMO_SHOWCASES_PATH = `${GITHUB_PATH}/projects/demo/src/app/pages/componen
   styleUrls: ['./example-viewer.component.scss']
 })
 export class ExampleViewerComponent {
-  title = input.required<string>();
-  codeFolder = input<string>();
-  configFolder = input<string>();
+  readonly title = input.required<string>();
+  readonly codeFolder = input<string>();
+  readonly configFolder = input<string>();
 
   @HostBinding('class.example-viewer') baseClass = true;
 

projects/demo/src/app/components/external-link/external-link.component.ts

@@ -9,6 +9,6 @@ import { MatIcon } from '@angular/material/icon';
   styleUrl: './external-link.component.scss'
 })
 export class ExternalLinkComponent {
-  title = input.required<string>();
-  link = input.required<string>();
+  readonly title = input.required<string>();
+  readonly link = input.required<string>();
 }

projects/demo/src/app/components/screen/basic-screen/basic-screen.component.ts

@@ -11,6 +11,6 @@ import { BreadcrumbsWithRouterComponent } from '@igo2/sdg';
   styleUrl: './basic-screen.component.scss'
 })
 export class BasicScreenComponent {
-  title = input.required<string>();
-  isHandset = input.required<boolean>();
+  readonly title = input.required<string>();
+  readonly isHandset = input.required<boolean>();
 }

projects/demo/src/app/components/screen/split-screen/split-screen.component.ts

@@ -11,6 +11,6 @@ import { BreadcrumbsWithRouterComponent } from '@igo2/sdg';
   styleUrl: './split-screen.component.scss'
 })
 export class SplitScreenComponent {
-  title = input<string>();
-  isHandset = input.required<boolean>();
+  readonly title = input<string>();
+  readonly isHandset = input.required<boolean>();
 }