@sumaris-net/ngx-components 21.0.0 → 21.1.0

package/doc/changelog.md

@@ -2330,3 +2330,9 @@ enh: Environment: add useHash property to configure Angular router to use hash U
 - enh(image-gallery): emit `modeChange` when gallery mode updates
 - fix(menu) Rename getter `MenuService.enabled: `Observable<boolean>` into `enabled$`, and add `get enabled(): boolean`
 - enh(theme) Allow overriding configuration properties (e.g. `sumaris.color.*` theme colors) using the injected `ENVIRONMENT` token's new `properties` field - useful to customize the app without a server-side (Pod) configuration, e.g. for offline apps on mobile
+
+## 21.1.0
+- fix(badge) restore legacy badge sizing tokens (M3) and explicit icon size, so side-panel pastilles (Capture, SFA) are visible again - See issue sumari-app#2090
+- fix(theme) restore explicit hover/focus state-layer opacity on form fields (Settings page hover highlight) - See issue sumari-app#2090
+- fix(theme) right margin on `mat-slide-toggle[matSuffix]` (M3 switches are wider — 'Thème sombre ?' toggle touched the field frame edge) - See issue sumari-app#2090
+- test(badge): add unit tests for `BadgeDirective` (pastille visibility, icon rendering, hidden state)

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -8154,10 +8154,12 @@ class BadgeDirective extends MatBadge {
         if (!hidden) {
             let html = '';
             if (this.appBadgeMatIcon) {
-                html = `<i class="material-icons" style="font-size: ${fontSize};">${this.appBadgeMatIcon}</i>`;
+                html = `<i class="material-icons" style="font-size: ${fontSize}; width: ${fontSize}; height: ${fontSize};">${this.appBadgeMatIcon}</i>`;
             }
             else if (this.appBadgeIcon) {
-                html = `<ion-icon style="font-size: ${fontSize}; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
+                // Explicit width/height: Ionic 8 sets `contain: strict` on ion-icon, which can
+                // collapse its 1em box inside a badge content span (see issue sumaris-app#2090)
+                html = `<ion-icon style="font-size: ${fontSize}; width: ${fontSize}; height: ${fontSize}; pointer-events: none;" name="${this.appBadgeIcon}"></ion-icon>`;
             }
             else if (isNotNilOrBlank(this.content) && this.content !== EMPTY_CHAR) {
                 html = '' + this.content;