Merge pull request #4 from mirumirumi/dev

release

angular.json

@@ -96,21 +96,13 @@
                     }
                 },
                 "test": {
-                    "builder": "@angular-devkit/build-angular:karma",
+                    "builder": "@angular-devkit/build-angular:jest",
                     "options": {
                         "polyfills": [
                             "zone.js",
                             "zone.js/testing"
                         ],
-                        "tsConfig": "tsconfig.spec.json",
-                        "inlineStyleLanguage": "scss",
-                        "assets": [
-                            "src/app/public"
-                        ],
-                        "styles": [
-                            "src/app/styles/global.scss"
-                        ],
-                        "scripts": []
+                        "tsConfig": "tsconfig.spec.json"
                     }
                 }
             }

package.json

@@ -41,16 +41,9 @@
         "@angular/cli": "~16.2.0",
         "@angular/compiler-cli": "^16.2.0",
         "@biomejs/biome": "^1.2.2",
-        "@types/jasmine": "~4.3.0",
         "@types/papaparse": "^5.3.9",
         "@types/throttle-debounce": "^5.0.0",
         "@vitest/coverage-v8": "^0.34.4",
-        "jasmine-core": "~4.6.0",
-        "karma": "~6.4.0",
-        "karma-chrome-launcher": "~3.2.0",
-        "karma-coverage": "~2.2.0",
-        "karma-jasmine": "~5.1.0",
-        "karma-jasmine-html-reporter": "~2.1.0",
         "stylelint": "^14.16.1",
         "stylelint-config-standard-scss": "^6.1.0",
         "typescript": "~5.1.3",

src/app/components/app.component.ts

@@ -26,7 +26,6 @@ export class AppComponent implements OnInit {
         context: {
           title: "Mobile (or Tablet) detected!",
           content: "This site is intended for PC use only. Please note that the screen may not display properly.",
-          height: 33,
         },
       })
       localStorage.setItem("mobile-detected", "true")

src/app/components/common/button/base-button/base-button.component.html

@@ -1,4 +1,4 @@
-<button [type]="submit ? 'submit' : 'button'" [class]="{
+<button #button [type]="submit ? 'submit' : 'button'" [class]="{
     btn_primary: type === 'fill',
     btn_outline_primary: type === 'outline',
     btn_text_only: type === 'text',
@@ -8,7 +8,7 @@
     color,
     borderColor,
     backgroundColor,
-  }" [disabled]="isSubmitting || disabled" #button (click)="onClick($event)">
+  }" [disabled]="isSubmitting || disabled" (click)="onClick($event)">
   <c-spinner *ngIf="isSubmitting; else elseBlock" [color]="spinnerColor || 'var(--color-text-white)'" />
   <ng-template #elseBlock>
     <ng-content></ng-content>

src/app/components/common/modal/half-modal/half-modal.component.html

@@ -1,4 +1,4 @@
-<div class="modal_body half_modal" [style.height]="halfModalHeight" [@show]="leaving ? 'hidden' : 'shown'"
+<div #modal class="modal_body half_modal" [style.height]="halfModalHeight" [@show]="leaving ? 'hidden' : 'shown'"
   (@show.done)="animationDone($event)">
   <button class="reset" (click)="close()">
     <fa-icon icon="times" size="xl"></fa-icon>

src/app/components/common/modal/half-modal/half-modal.component.scss

@@ -4,11 +4,11 @@
   inset: 0 !important;
   top: auto !important;
   width: 100% !important;
-  height: 73svh !important;
   padding: 1.5em 3.3em 0.7em !important;
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
   overflow-y: auto;
+  opacity: 0;
   .title {
     font-size: 1.35em !important;
   }

src/app/components/common/modal/half-modal/half-modal.component.ts

@@ -1,5 +1,5 @@
 import { animate, state, style, transition, trigger } from "@angular/animations"
-import { Component } from "@angular/core"
+import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core"
 
 import { ModalBase } from "../modal-base"
 
@@ -15,4 +15,17 @@ import { ModalBase } from "../modal-base"
     ]),
   ],
 })
-export class HalfModalComponent extends ModalBase {}
+export class HalfModalComponent extends ModalBase implements AfterViewInit {
+  @ViewChild("modal") modal!: ElementRef<HTMLDivElement>
+
+  override ngAfterViewInit() {
+    super.ngAfterViewInit()
+
+    if (this.halfModalHeight === "auto") {
+      this.halfModalHeight = `${(this.modal.nativeElement.offsetHeight + 1).toString()}px`
+    }
+    this.modal.nativeElement.style.opacity = "1"
+
+    this.cd.detectChanges()
+  }
+}

src/app/components/common/modal/modal-base.ts

@@ -21,7 +21,6 @@ type SimpleModal = {
   context: {
     title?: string
     content: string | SafeHtml
-    // Want to dynamically get only the actual height to be rendered
     height?: number
   }
 }
@@ -63,7 +62,7 @@ export abstract class ModalBase implements AfterViewInit {
   leaving = false
   closeEvent?: CloseEvent = undefined
   isAskAgain!: boolean
-  halfModalHeight!: string
+  halfModalHeight = "auto"
 
   constructor(
     @Inject(DIALOG_DATA) protected data: ModalType,

src/app/components/layouts/footer/footer.component.ts

@@ -41,6 +41,7 @@ export class FooterComponent implements OnInit {
         context: {
           title: "Privacy Policy and Terms of Use",
           content: statement,
+          height: 73,
         },
       },
       { autoFocus: "first-heading" },

src/app/services/modal.service.ts

@@ -23,7 +23,7 @@ export class ModalService<M extends ModalBase> {
       autoFocus?: AutoFocusTarget
     },
   ): DialogRef {
-    const data = type
+    const data = { ...type }
 
     if (typeof data.context.content === "string" && data.context.content[0] === "<") {
       data.context.content = this.sanitizer.bypassSecurityTrustHtml(data.context.content as string)