Update to angular 22

src/ts/components/shared/action-bar/action-bar.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild, ElementRef, TemplateRef } from '@angular/core';
+import { Component, Input, ViewChild, ElementRef, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { ButtonAction } from '../../../common/interfaces';
 import { PonyTownGame } from '../../../client/game';
@@ -10,6 +10,7 @@ import { last } from '../../../common/utils';
 import { faCog } from '../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'action-bar',
 	templateUrl: 'action-bar.pug',

src/ts/components/shared/actions-modal/actions-modal.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import {
 	createButtionActionActions, expressionButtonAction, createButtonCommandActions,
@@ -23,6 +23,7 @@ function eyeSprite(e: PonyEye | undefined) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'actions-modal',
 	templateUrl: 'actions-modal.pug',

src/ts/components/shared/bitmap-box/bitmap-box.ts

@@ -1,7 +1,8 @@
-import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
 import { parseColor, colorToCSS } from '../../../common/color';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'bitmap-box',
 	templateUrl: 'bitmap-box.pug',

src/ts/components/shared/butt-mark-editor/butt-mark-editor.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { fill } from 'lodash';
 import { PonyInfo } from '../../../common/interfaces';
 import { CM_SIZE } from '../../../common/constants';
@@ -10,6 +10,7 @@ export interface ButtMarkEditorState {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'butt-mark-editor',
 	templateUrl: 'butt-mark-editor.pug',

src/ts/components/shared/character-list/character-list.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, ViewChild, ElementRef, OnInit, Input, NgZone } from '@angular/core';
+import { Component, Output, EventEmitter, ViewChild, ElementRef, OnInit, Input, NgZone, ChangeDetectionStrategy } from '@angular/core';
 import { uniq } from 'lodash';
 import { Key } from '../../../client/input/input';
 import { PonyObject } from '../../../common/interfaces';
@@ -43,6 +43,7 @@ function comparePonies(a: PonyObject, b: PonyObject) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'character-list',
 	templateUrl: 'character-list.pug',

src/ts/components/shared/character-preview/character-preview.ts

@@ -1,6 +1,5 @@
 import {
-	Component, Input, ElementRef, AfterViewInit, OnDestroy, NgZone, ViewChild, OnChanges, HostListener
-} from '@angular/core';
+	Component, Input, ElementRef, AfterViewInit, OnDestroy, NgZone, ViewChild, OnChanges, HostListener, ChangeDetectionStrategy } from '@angular/core';
 import { PonyInfo, PonyState } from '../../../common/interfaces';
 import { toPalette } from '../../../common/ponyInfo';
 import { GRASS_COLOR, TRANSPARENT } from '../../../common/colors';
@@ -21,6 +20,7 @@ const DEFAULT_STATE = defaultPonyState();
 const DEFAULT_OPTIONS = defaultDrawPonyOptions();
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'character-preview',
 	template: '<canvas class="rounded" #canvas></canvas>',

src/ts/components/shared/character-select/character-select.ts

@@ -1,4 +1,4 @@
-import { Component, Input, EventEmitter, Output, ViewChild, ElementRef } from '@angular/core';
+import { Component, Input, EventEmitter, Output, ViewChild, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import { Router } from '@angular/router';
 import { PonyObject } from '../../../common/interfaces';
 import { PLAYER_NAME_MAX_LENGTH } from '../../../common/constants';
@@ -12,6 +12,7 @@ import { delay } from '../../../common/utils';
 import { isMobile } from '../../../client/data';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'character-select',
 	templateUrl: 'character-select.pug',

src/ts/components/shared/chat-box/chat-box.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, NgZone, AfterViewInit, ViewChild, OnDestroy, Input } from '@angular/core';
+import { Component, ElementRef, NgZone, AfterViewInit, ViewChild, OnDestroy, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { ChatType, isPartyChat, Entity, FakeEntity } from '../../../common/interfaces';
 import { SAY_MAX_LENGTH } from '../../../common/constants';
@@ -39,6 +39,7 @@ function isActionCommand(message: string) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'chat-box',
 	templateUrl: 'chat-box.pug',

src/ts/components/shared/chat-log/chat-log.ts

@@ -1,6 +1,5 @@
 import {
-	Component, ViewChild, ElementRef, NgZone, AfterViewInit, OnDestroy, HostListener, Output, EventEmitter, DoCheck
-} from '@angular/core';
+	Component, ViewChild, ElementRef, NgZone, AfterViewInit, OnDestroy, HostListener, Output, EventEmitter, DoCheck, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { clamp, escapeRegExp } from 'lodash';
 import { PonyTownGame } from '../../../client/game';
@@ -208,6 +207,7 @@ function findUserIndex(users: IndexEntryUser[], id: number, crc: number | undefi
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'chat-log',
 	templateUrl: 'chat-log.pug',

src/ts/components/shared/color-picker/color-picker.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { clamp } from '../../../common/utils';
 import { parseColorFast, colorToCSS, colorFromHSVA, colorToHSVA, colorToHexRGB } from '../../../common/color';
 import { AgDragEvent } from '../directives/agDrag';
@@ -7,6 +7,7 @@ import { faChevronDown } from '../../../client/icons';
 const SIZE = 175;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'color-picker',
 	templateUrl: 'color-picker.pug',

src/ts/components/shared/date-picker/date-picker.ts

@@ -1,9 +1,10 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { times, formatISODate, parseISODate, createValidBirthDate } from '../../../common/utils';
 import { MONTH_NAMES_EN } from '../../../common/constants';
 import { getLocale } from '../../../client/clientUtils';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'date-picker',
 	templateUrl: 'date-picker.pug',

src/ts/components/shared/directives/draggable.ts

@@ -1,4 +1,4 @@
-import { Component, Directive, Input, Output, EventEmitter, ElementRef, OnInit, Injectable, OnDestroy } from '@angular/core';
+import { Component, Directive, Input, Output, EventEmitter, ElementRef, OnInit, Injectable, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { noop } from 'lodash';
 import { AgDragEvent, handleDrag } from './agDrag';
 import { clamp, setTransform, removeItem, pointInRect } from '../../../common/utils';
@@ -76,6 +76,7 @@ export class DraggableService {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'draggable-outlet',
 	template: `<div></div>`,

src/ts/components/shared/directives/dropdown.ts

@@ -1,7 +1,6 @@
 import {
 	Directive, HostListener, Input, Output, EventEmitter, TemplateRef, ViewContainerRef, ContentChild,
-	Renderer2, ElementRef, EmbeddedViewRef, Component, Injectable
-} from '@angular/core';
+	Renderer2, ElementRef, EmbeddedViewRef, Component, Injectable, ChangeDetectionStrategy } from '@angular/core';
 import { uniqueId } from 'lodash';
 import { focusFirstElement } from '../../../client/htmlUtils';
 
@@ -12,6 +11,7 @@ export class DropdownOutletService {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'dropdown-outlet',
 	template: `<ng-template></ng-template>`,

src/ts/components/shared/discord-button/discord-button.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { discordLink } from '../../../client/data';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'discord-button',
 	templateUrl: 'discord-button.pug',

src/ts/components/shared/discord-pony/discord-pony.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { defaultExpression } from '../../../common/ponyUtils';
 import { defaultPonyState } from '../../../common/ponyHelpers';
 import { DISCORD_PONY } from '../../../common/constants';
@@ -25,6 +25,7 @@ const DERP: Expression = {
 };
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'discord-pony',
 	templateUrl: 'discord-pony.pug',

src/ts/components/shared/fill-outline/fill-outline.ts

@@ -1,7 +1,8 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { faLock } from '../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'fill-outline',
 	templateUrl: 'fill-outline.pug',

src/ts/components/shared/friends-box/friends-box.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { faCog, faUserFriends, faUserPlus, faUserCog, faCircle } from '../../../client/icons';
 import { Model, Friend } from '../../services/model';
 import { PonyTownGame } from '../../../client/game';
@@ -7,6 +7,7 @@ import { removeItem } from '../../../common/utils';
 import { SettingsService } from '../../services/settingsService';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'friends-box',
 	templateUrl: 'friends-box.pug',

src/ts/components/shared/install-button/install-button.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { faTimes } from '../../../client/icons';
 import { InstallService } from '../../services/installService';
 import { isMobile } from '../../../client/data';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'install-button',
 	templateUrl: 'install-button.pug',

src/ts/components/shared/invites-modal/invites-modal.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { toPalette } from '../../../common/ponyInfo';
 import { decompressPonyString } from '../../../common/compressPony';
 import { PonyTownGame } from '../../../client/game';
@@ -7,6 +7,7 @@ import { removeItem } from '../../../common/utils';
 import { Model } from '../../services/model';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'invites-modal',
 	templateUrl: 'invites-modal.pug',

src/ts/components/shared/kbd-key/kbd-key.ts

@@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'kbd-key',
 	templateUrl: 'kbd-key.pug',

src/ts/components/shared/menu-bar/menu-bar.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, HostListener } from '@angular/core';
+import { Component, Input, Output, EventEmitter, HostListener, ChangeDetectionStrategy } from '@angular/core';
 import { AccountData, OAuthProvider } from '../../../common/interfaces';
 import { signUpProviders, signInProviders } from '../../../client/data';
 import { getProviderIcon } from '../sign-in-box/sign-in-box';
@@ -9,6 +9,7 @@ import { SettingsService } from '../../services/settingsService';
 import { REQUEST_DATE_OF_BIRTH } from '../../../common/constants';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'menu-bar',
 	templateUrl: 'menu-bar.pug',

src/ts/components/shared/menu-item/menu-item.ts

@@ -1,7 +1,8 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { emptyIcon } from '../../../client/icons';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'menu-item',
 	templateUrl: 'menu-item.pug',

src/ts/components/shared/mod-box/mod-box.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { ModAction, Pony } from '../../../common/interfaces';
 import { TIMEOUTS } from '../../../common/constants';
 import { Model } from '../../services/model';
@@ -9,6 +9,7 @@ const ageLabels = ['', 'M', 'A', '', '', '[M]', '[A]'];
 const ageTitles = ['Not set', 'Minor', 'Adult', '', '', 'Minor (locked)', 'Adult (locked)'];
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'mod-box',
 	templateUrl: 'mod-box.pug',

src/ts/components/shared/notification/notification-item.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { PlayerAction, Notification, NotificationFlags, EntityPlayerState } from '../../../common/interfaces';
 import { PonyTownGame } from '../../../client/game';
 import { hasFlag, setFlag } from '../../../common/utils';
@@ -6,6 +6,7 @@ import { faBan } from '../../../client/icons';
 import { getPaletteInfo } from '../../../client/pony';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'notification-item',
 	templateUrl: 'notification-item.pug',

src/ts/components/shared/notification/notification-list.ts

@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { Notification } from '../../../common/interfaces';
 import { faEllipsisV } from '../../../client/icons';
 
 const LIMIT = 8;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'notification-list',
 	templateUrl: 'notification-list.pug',

src/ts/components/shared/page-loader/page-loader.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { faSpinner } from '../../../client/icons';
 import { Model } from '../../services/model';
 import { hardReload } from '../../../client/clientUtils';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'page-loader',
 	templateUrl: 'page-loader.pug',

src/ts/components/shared/party-box/party-box.ts

@@ -1,10 +1,11 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 import { PartyMember } from '../../../common/interfaces';
 import { PonyTownGame } from '../../../client/game';
 import { partyLeaderIcon, offlineIcon } from '../../../client/icons';
 import { getPaletteInfo } from '../../../client/pony';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'party-box',
 	templateUrl: 'party-box.pug',

src/ts/components/shared/party-list/party-list.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, OnInit, OnDestroy } from '@angular/core';
+import { Component, HostListener, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { PartyMember } from '../../../common/interfaces';
 import { PARTY_LIMIT } from '../../../common/constants';
@@ -12,6 +12,7 @@ function visibleMembers(members: PartyMember[], max: number, start: number) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'party-list',
 	templateUrl: 'party-list.pug',

src/ts/components/shared/play-box/play-box.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { ServerInfo, AccountDataFlags } from '../../../common/interfaces';
 import { RequestError, delay, includes, hasFlag } from '../../../common/utils';
 import {
@@ -29,6 +29,7 @@ const ignoredErrors = [
 ];
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'play-box',
 	templateUrl: 'play-box.pug',

src/ts/components/shared/play-notice/play-notice.ts

@@ -1,8 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { discordLink } from '../../../client/data';
 import { GENERAL_RULES } from '../../../common/constants';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'play-notice',
 	templateUrl: 'play-notice.pug',

src/ts/components/shared/pony-box/pony-box.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { PlayerAction, Pony, EntityPlayerState, Entity } from '../../../common/interfaces';
 import { getPaletteInfo } from '../../../client/pony';
 import { Model } from '../../services/model';
@@ -14,6 +14,7 @@ import { isIgnored, isHidden, isFriend } from '../../../common/entityUtils';
 import { setFlag } from '../../../common/utils';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'pony-box',
 	templateUrl: 'pony-box.pug',

src/ts/components/shared/scale-picker/scale-picker.ts

@@ -1,7 +1,8 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { times } from 'lodash';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'scale-picker',
 	templateUrl: 'scale-picker.pug',

src/ts/components/shared/set-selection/set-selection.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, OnChanges, Directive, Optional } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, Directive, Optional, ChangeDetectionStrategy } from '@angular/core';
 import { clamp } from 'lodash';
 import { SpriteSet, ColorExtraSets, ColorExtraSet } from '../../../common/interfaces';
 import { getColorCount } from '../../../common/spriteUtils';
@@ -15,6 +15,7 @@ export class SetOutlineHidden {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'set-selection',
 	templateUrl: 'set-selection.pug',

src/ts/components/shared/settings-box/settings-box.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, NgZone, ViewChild, TemplateRef } from '@angular/core';
+import { Component, OnInit, OnDestroy, NgZone, ViewChild, TemplateRef, ChangeDetectionStrategy } from '@angular/core';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
@@ -14,6 +14,7 @@ import { SettingsService } from '../../services/settingsService';
 import { Audio } from '../../services/audio';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'settings-box',
 	templateUrl: 'settings-box.pug',

src/ts/components/shared/settings-modal/settings-modal.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { AccountSettings, BrowserSettings, GraphicsQuality } from '../../../common/interfaces';
 import { SettingsService } from '../../services/settingsService';
@@ -13,6 +13,7 @@ import { faSlidersH, faCommentSlash, faGamepad, faImage, faDownload, faUpload, f
 import { saveAs } from 'file-saver';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'settings-modal',
 	templateUrl: 'settings-modal.pug',

src/ts/components/shared/sign-in-box/sign-in-box.ts

@@ -1,4 +1,4 @@
-import { Component, Output, EventEmitter, OnInit } from '@angular/core';
+import { Component, Output, EventEmitter, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { signUpProviders, signInProviders, local } from '../../../client/data';
 import { emptyIcon, oauthIcons } from '../../../client/icons';
 import { OAuthProvider } from '../../../common/interfaces';
@@ -11,6 +11,7 @@ export function getProviderIcon(id: string) {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'sign-in-box',
 	templateUrl: 'sign-in-box.pug',

src/ts/components/shared/sprite-box/sprite-box.ts

@@ -1,6 +1,5 @@
 import {
-	Component, Input, AfterViewInit, ViewChild, ElementRef, NgZone, DoCheck, IterableDiffers, IterableDiffer, OnChanges
-} from '@angular/core';
+	Component, Input, AfterViewInit, ViewChild, ElementRef, NgZone, DoCheck, IterableDiffers, IterableDiffer, OnChanges, ChangeDetectionStrategy } from '@angular/core';
 import { Rect, Sprite, ColorExtra, Palette } from '../../../common/interfaces';
 import { parseColor, colorToCSS } from '../../../common/color';
 import { mockPaletteManager, toColorList, getColorsFromSet } from '../../../common/ponyInfo';
@@ -22,6 +21,7 @@ function drawAll() {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'sprite-box',
 	templateUrl: 'sprite-box.pug',

src/ts/components/shared/sprite-selection/sprite-selection.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectionStrategy } from '@angular/core';
 import { uniqueId } from 'lodash';
 import { ColorExtra } from '../../../common/interfaces';
 import { Key } from '../../../client/input/input';
@@ -7,6 +7,7 @@ import { focusElementAfterTimeout } from '../../../client/htmlUtils';
 const MAX = 999999;
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'sprite-selection',
 	templateUrl: 'sprite-selection.pug',

src/ts/components/shared/swap-box/swap-box.ts

@@ -1,4 +1,4 @@
-import { Component, NgZone, ViewChild } from '@angular/core';
+import { Component, NgZone, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { PonyTownGame } from '../../../client/game';
 import { PonyObject, Action } from '../../../common/interfaces';
 import { Dropdown } from '../directives/dropdown';
@@ -8,6 +8,7 @@ import { Model } from '../../services/model';
 // import { SWAP_TIMEOUT, SECOND } from '../../../common/constants';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'swap-box',
 	templateUrl: 'swap-box.pug',

src/ts/components/shared/tabset/tabset.ts

@@ -1,6 +1,5 @@
 import {
-	Component, Directive, TemplateRef, Input, ContentChild, ContentChildren, QueryList, Output, EventEmitter
-} from '@angular/core';
+	Component, Directive, TemplateRef, Input, ContentChild, ContentChildren, QueryList, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 import { uniqueId } from 'lodash';
 import { Key } from '../../../client/input/input';
 
@@ -36,6 +35,7 @@ export class Tab {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'tabset',
 	templateUrl: 'tabset.pug',

src/ts/components/shared/virtual-list/virtual-list.ts

@@ -1,7 +1,6 @@
 import {
 	Directive, DoCheck, Input, ViewContainerRef, TemplateRef, IterableDiffers, IterableDiffer,
-	EmbeddedViewRef, Component, ElementRef, ViewChild, NgZone, OnDestroy, ChangeDetectorRef, AfterViewInit
-} from '@angular/core';
+	EmbeddedViewRef, Component, ElementRef, ViewChild, NgZone, OnDestroy, ChangeDetectorRef, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
 
 interface Context<T> {
 	$implicit: T;
@@ -11,6 +10,7 @@ interface Context<T> {
 }
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'virtual-list',
 	template: '<div #padStart></div><ng-content></ng-content><div #padEnd></div>',

src/ts/components/shared/visit-pt-button/visit-pt-button.ts

@@ -1,6 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'visit-pt-button',
 	templateUrl: 'visit-pt-button.pug',

src/ts/components/shared/visit-pt-pony/visit-pt-pony.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, Input, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { defaultExpression } from '../../../common/ponyUtils';
 import { defaultPonyState } from '../../../common/ponyHelpers';
 import { Expression, Muzzle, HeadAnimation, BodyAnimation, Eye } from '../../../common/interfaces';
@@ -24,6 +24,7 @@ const EXCITED: Expression = {
 const MENO = 'DBWIzP8imd08//D19fVazSjcwf1GhLNEiMxENSovLy/NsIdJQDnGqYBiSztWQTM6LychEnE/KRX///9WPeE1HbSpBUEIIASwgEIAAAAAbIAgCFMY34AHAAjwgCMRQCVLY38IDhAAwmFBz4fAIxjKM6SjGlaxjWtYgjGI';
 
 @Component({
+	changeDetection: ChangeDetectionStrategy.Eager,
 	standalone: false,
 	selector: 'visit-pt-pony',
 	templateUrl: 'visit-pt-pony.pug',