Merge pull request #316 from e-picsa/fix/rotate-popup

Fix/rotate popup

apps/picsa-apps/extension-app-native/android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3043001
-        versionName "3.43.1"
+        versionCode 3043002
+        versionName "3.43.2"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html

@@ -1,5 +1,5 @@
 <div class="page-content" *mobxAutorun>
-  <picsa-sidenav-layout [opened]="false" #picsaSidenav>
+  <picsa-sidenav-layout #picsaSidenav>
     <!-- Header -->
     <button
       desktopHeader

apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html

@@ -1,7 +1,7 @@
 <climate-print-layout *ngIf="chartService.chartPng"></climate-print-layout>
 
 <div class="page-content">
-  <picsa-sidenav-layout #snav>
+  <picsa-sidenav-layout #snav [initialOpen]="true">
     <button desktopHeader mat-button color="primary" (click)="showShareDialog()">
       <mat-icon>share</mat-icon>{{ 'Share' | translate }}
     </button>

libs/components/src/components/picsa-sidenav.component.ts

@@ -1,6 +1,15 @@
 import { MediaMatcher } from '@angular/cdk/layout';
 import { DomPortal } from '@angular/cdk/portal';
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  input,
+  OnInit,
+  signal,
+  ViewChild,
+} from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 
 import { PicsaCommonComponentsService } from '../services/components.service';
@@ -31,8 +40,7 @@ import { PicsaCommonComponentsService } from '../services/components.service';
       <!-- default buttons -->
       <button mat-button color="primary" #optionsToggleButton (click)="snav.toggle()">
         <span style="margin-right: 8px">
-          <span *ngIf="snav.opened">{{ 'Hide Options' | translate }}</span>
-          <span *ngIf="!snav.opened">{{ 'Show Options' | translate }}</span>
+          <span>{{ 'Options' | translate }}</span>
         </span>
         <mat-icon iconPositionEnd>menu</mat-icon>
       </button>
@@ -45,9 +53,9 @@ import { PicsaCommonComponentsService } from '../services/components.service';
         [fixedInViewport]="mobileQuery.matches"
         position="end"
         style="width: 300px"
-        [opened]="opened"
+        [opened]="opened()"
         [fixedTopGap]="0"
-        (openedChange)="handleSidenavChange()"
+        (openedChange)="handleSidenavChange(snav.opened)"
         (swipeRight)="snav.toggle()"
       >
         <!-- Sidenav Content -->
@@ -118,7 +126,10 @@ export class PicsaSidenavComponent implements OnInit, AfterViewInit {
 
   public headerAttached = false;
 
-  @Input() opened = true;
+  /** Specify whether should be initially opened */
+  initialOpen = input<boolean>();
+
+  public opened = signal(this.initialOpen() ? true : false);
 
   @ViewChild('headerContent') headerContent: ElementRef<HTMLElement>;
   @ViewChild(MatSidenav) matSidenav: MatSidenav;
@@ -153,7 +164,8 @@ export class PicsaSidenavComponent implements OnInit, AfterViewInit {
   }
 
   /** when toggling sidebar also trigger resize event to ensure chart resizes */
-  public handleSidenavChange() {
+  public handleSidenavChange(opened: boolean) {
+    this.opened.set(opened);
     requestAnimationFrame(() => {
       window.dispatchEvent(new Event('resize'));
     });

libs/shared/src/features/animations/index.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
-import { LottieModule, provideCacheableAnimationLoader, provideLottieOptions } from 'ngx-lottie';
+import { LottieComponent, provideCacheableAnimationLoader, provideLottieOptions } from 'ngx-lottie';
 
 import { PicsaAnimationComponent } from './animation.component';
 
 @NgModule({
   declarations: [PicsaAnimationComponent],
-  imports: [CommonModule, LottieModule],
+  imports: [CommonModule, LottieComponent],
   exports: [PicsaAnimationComponent],
 })
 /**

package.json

@@ -1,6 +1,6 @@
 {
   "name": "picsa-apps",
-  "version": "3.43.1",
+  "version": "3.43.2",
   "license": "See LICENSE",
   "scripts": {
     "ng": "nx",
@@ -104,7 +104,7 @@
     "mobx-angular": "^4.7.1",
     "ngx-extended-pdf-viewer": "^18.1.7",
     "ngx-json-viewer": "^3.2.1",
-    "ngx-lottie": "^10.0.0",
+    "ngx-lottie": "^11.0.0",
     "openapi-fetch": "^0.8.2",
     "papaparse": "^5.3.2",
     "parse": "3.4.2",

yarn.lock

@@ -18393,16 +18393,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ngx-lottie@npm:^10.0.0":
-  version: 10.0.0
-  resolution: "ngx-lottie@npm:10.0.0"
+"ngx-lottie@npm:^11.0.0":
+  version: 11.0.2
+  resolution: "ngx-lottie@npm:11.0.2"
   dependencies:
     "@scarf/scarf": ^1.1.1
     tslib: ^2.3.0
   peerDependencies:
-    "@angular/core": ">=15"
+    "@angular/core": ">=17"
     lottie-web: ">=5.9.2"
-  checksum: 1e7abd8baab02f3ae365bff90272ead63db9fc2b6a4c1775ad58ce7349300c14e824d294804ceb045c5dae6e07beceacbbbf7350eb3d5d52f71940c6ba24b997
+  checksum: fea48078ff7e8bcd02511c4f44f2031e07a8e6935f1cdb090f76e9941acd2c054d6a97faf3da0c3f8852ea58d138ad5fb38fa733c555ff37229dd1579d97b25d
   languageName: node
   linkType: hard
 
@@ -19634,7 +19634,7 @@ __metadata:
     ng-packagr: 17.3.0
     ngx-extended-pdf-viewer: ^18.1.7
     ngx-json-viewer: ^3.2.1
-    ngx-lottie: ^10.0.0
+    ngx-lottie: ^11.0.0
     nx: 18.2.1
     openapi-fetch: ^0.8.2
     openapi-typescript: ^6.7.3