@onemrvapublic/design-system 22.5.0-develop.2 → 22.5.0-develop.4

package/fesm2022/onemrvapublic-design-system.mjs

@@ -1,5 +1,5 @@
 // Auto-generated — do not edit
-const VERSION = '22.5.0-develop.2';
+const VERSION = '22.5.0-develop.4';
 
 const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;
 

package/fesm2022/onemrvapublic-design-system.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"onemrvapublic-design-system.mjs","sources":["../../../../projects/onemrva/design-system/version.ts","../../../../projects/onemrva/design-system/index.ts","../../../../projects/onemrva/design-system/onemrvapublic-design-system.ts"],"sourcesContent":["// Auto-generated — do not edit\nexport const VERSION = '22.5.0-develop.2';\n","export { VERSION } from './version';\n\nexport const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;AACO,MAAM,OAAO,GAAG;;ACChB,MAAM,yCAAyC,GAAG;;ACFzD;;AAEG;;;;"}
+{"version":3,"file":"onemrvapublic-design-system.mjs","sources":["../../../../projects/onemrva/design-system/version.ts","../../../../projects/onemrva/design-system/index.ts","../../../../projects/onemrva/design-system/onemrvapublic-design-system.ts"],"sourcesContent":["// Auto-generated — do not edit\nexport const VERSION = '22.5.0-develop.4';\n","export { VERSION } from './version';\n\nexport const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;AACO,MAAM,OAAO,GAAG;;ACChB,MAAM,yCAAyC,GAAG;;ACFzD;;AAEG;;;;"}

package/layout/src/components/layout/layout.component.scss

@@ -260,3 +260,13 @@
 nav a.disabled {
   pointer-events: none;
 }
+
+// The profile menu renders in an overlay outside :host
+.mat-mdc-menu-item.logout-button[disabled] {
+  opacity: 0.4;
+}
+
+// The profile menu renders in an overlay outside :host
+.mat-mdc-menu-item.logout-button[disabled] {
+  opacity: 0.4;
+}

package/mat-choice-chip/src/onemrva-mat-choice-chip.component.scss

@@ -1,5 +1,8 @@
 @use '@angular/material' as mat;
 
+// Sized and spaced like mat-chip (see theme/overrides/_chips.scss): same
+// container height, 12px horizontal padding, and an 18px leading checkmark
+// with an 8px gap when selected, like a selected mat-chip-option.
 .onemrva-theme onemrva-mat-choice-chip {
   @include mat.checkbox-overrides(
     (
@@ -7,43 +10,54 @@
     )
   );
 
-  .mat-mdc-checkbox:not(.mat-mdc-checkbox-checked)
-    .mat-internal-form-field
-    > label {
-    padding-left: 14px;
-  }
+  display: inline-block;
+  vertical-align: middle;
 
   mat-checkbox.onemrva-choice-chip {
+    display: inline-flex;
+    box-sizing: border-box;
+    height: var(--mat-chip-container-height, 38px);
     user-select: none;
     border: 1px solid var(--mat-sys-primary);
     border-radius: var(--chip-border-radius);
     background: var(--mat-sys-primary-container);
     padding: 0;
 
-    label {
-      color: var(--mat-sys-primary);
-      font-family: var(--mat-sys-label-large-font);
-      font-size: var(--mat-sys-label-large-size);
-      font-weight: var(--mat-sys-label-large-weight);
-      line-height: var(--mat-sys-label-large-line-height);
-    }
+    .mdc-form-field {
+      display: flex;
+      align-items: center;
+      height: 100%;
 
-    &.mat-mdc-checkbox-checked {
-      background-color: var(--mat-sys-primary);
-      color: var(--mat-sys-on-primary);
+      .mdc-checkbox {
+        flex: 0 0 auto;
+        width: 0;
+        height: 18px;
+        padding: 0;
+        margin: 0;
+        visibility: hidden;
+        transition:
+          width 400ms,
+          margin-left 400ms;
 
-      .mdc-checkbox__background {
-        background-color: var(--mat-sys-primary);
-        background: none !important;
-        border: none !important;
-        top: -6px;
-        left: 10px;
+        .mdc-checkbox__ripple,
+        input {
+          display: none;
+        }
+
+        .mdc-checkbox__background {
+          top: 0;
+          left: 0;
+        }
       }
 
-      label {
-        line-height: var(--mdc-chip-container-height);
-        padding: 5px 14px 5px;
-        color: var(--mat-sys-on-primary);
+      > label {
+        padding: 0 12px;
+        color: var(--mat-sys-primary);
+        font-family: var(--mat-sys-label-large-font);
+        font-size: var(--mat-sys-label-large-size);
+        font-weight: var(--mat-sys-label-large-weight);
+        line-height: var(--mat-sys-label-large-line-height);
+        white-space: nowrap;
       }
     }
 
@@ -51,29 +65,25 @@
       display: none;
     }
 
-    .mdc-form-field {
-      display: inline-block;
+    &.mat-mdc-checkbox-checked {
+      background-color: var(--mat-sys-primary);
 
-      .mdc-checkbox {
-        padding: 0;
-        margin: 0;
-        transition: width 400ms;
+      .mdc-form-field {
+        .mdc-checkbox {
+          width: 18px;
+          margin-left: 8px;
+          visibility: visible;
+        }
 
-        .mdc-checkbox__ripple,
-        input {
-          display: none;
+        .mdc-checkbox__background {
+          background: none !important;
+          border: none !important;
         }
-      }
-    }
 
-    &:not(.mat-mdc-checkbox-checked) {
-      label {
-        line-height: var(--mdc-chip-container-height);
-        padding: 5px 14px;
-      }
-      .mdc-checkbox {
-        visibility: hidden;
-        width: 0;
+        > label {
+          padding-left: 8px;
+          color: var(--mat-sys-on-primary);
+        }
       }
     }
 
@@ -86,7 +96,8 @@
           color: var(--mat-sys-primary-fixed-dim);
         }
       }
-      label {
+
+      .mdc-form-field > label {
         color: var(--mat-sys-on-surface);
       }
     }

package/mat-multi-select/src/onemrva-mat-multi-select.component.scss

@@ -2,33 +2,40 @@
   display: inline-block;
   width: 100%;
 
+  // Small chip (22px per Figma): same colors and outline as mat-chip, with a
+  // tighter radius, vertically centred on the select trigger.
   .mat-select-counter {
-    top: var(--spacer);
+    top: 50%;
     right: var(--triple-spacer);
-    display: block;
-    padding: var(--quarter-spacer) var(--half-spacer) var(--quarter-spacer)
-      var(--spacer);
-    background: var(--mat-sys-primary-container);
-    color: var(--mat-sys-on-primary-container);
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--quarter-spacer);
+    box-sizing: border-box;
+    height: 22px;
     min-width: var(--triple-spacer);
-    font-family: var(--brand-font);
+    padding: 0 var(--half-spacer) 0 var(--spacer);
+    background: var(--mat-sys-primary-container);
+    color: var(--mat-sys-primary);
 
     border: 1px solid var(--mat-sys-primary);
-    border-radius: var(--button-border-radius);
+    border-radius: var(--small-border-radius);
 
     span.text {
-      font-family: var(--sys-label-large-font);
+      font-family: var(--mat-sys-label-large-font);
       font-style: normal;
-      font-weight: 500;
+      font-weight: var(--mat-sys-label-large-weight);
       font-size: 0.75rem;
-      line-height: 1.25rem;
+      line-height: 1rem;
     }
     mat-icon {
-      font-size: 0.75rem;
-      height: 0.75rem;
-      width: 0.75rem;
-      line-height: 1rem;
-      padding: 0 var(--quarter-spacer) 0 var(--quarter-spacer);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.875rem;
+      height: 0.875rem;
+      width: 0.875rem;
+      color: var(--mat-sys-primary);
       cursor: pointer;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "22.5.0-develop.2",
+  "version": "22.5.0-develop.4",
   "description": "Design System Onem/Rva without theme included",
   "publishConfig": {
     "access": "public"

package/types/onemrvapublic-design-system-layout.d.ts

@@ -248,8 +248,8 @@ declare class LayoutAfterNavComponent implements AfterViewInit {
 /**
  * Application shell composing header, sidenav, content, and footer slots.
  *
- * Exposes 8 inputs and 2 outputs.
- * Inputs: logo, languages: OnemRvaLanguage[], environment: Environment, logoRedictionUrl: (string | any[] | null) | undefined, profile: OnemRvaProfile | null, id, role, showThemeSwitcher.
+ * Exposes 9 inputs and 2 outputs.
+ * Inputs: logo, disableLogoutButton, languages: OnemRvaLanguage[], environment: Environment, logoRedictionUrl: (string | any[] | null) | undefined, profile: OnemRvaProfile | null, id, role, showThemeSwitcher.
  * Outputs: login: void, logout: void.
  *
  * @MatKeywords layout, shell, page, app, sidenav, header, footer
@@ -271,7 +271,7 @@ declare class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
     readonly afterNav: Signal<LayoutAfterNavComponent | undefined>;
     readonly footer: Signal<LayoutFooterComponent | undefined>;
     readonly logo: _angular_core.InputSignal<string>;
-    readonly hideLogoutButton: _angular_core.InputSignal<boolean>;
+    readonly disableLogoutButton: _angular_core.InputSignal<boolean>;
     logoFinal: Signal<string>;
     readonly languages: _angular_core.InputSignal<OnemRvaLanguage[]>;
     readonly languagesFinal: Signal<OnemRvaLanguage[]>;
@@ -314,7 +314,7 @@ declare class LayoutComponent implements OnInit, AfterViewInit, OnDestroy {
     changeLanguage(langCode: string): void;
     toggleSideNav(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutComponent, "onemrva-layout", never, { "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "hideLogoutButton": { "alias": "hideLogoutButton"; "required": false; "isSignal": true; }; "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; "logoRedictionUrl": { "alias": "logoRedictionUrl"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "showThemeSwitcher": { "alias": "showThemeSwitcher"; "required": false; "isSignal": true; }; }, { "login": "login"; "logout": "logout"; }, ["routes", "title", "loginMenu", "content", "afterNav", "footer"], ["onemrva-mat-notification"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutComponent, "onemrva-layout", never, { "logo": { "alias": "logo"; "required": false; "isSignal": true; }; "disableLogoutButton": { "alias": "disableLogoutButton"; "required": false; "isSignal": true; }; "languages": { "alias": "languages"; "required": false; "isSignal": true; }; "environment": { "alias": "environment"; "required": false; "isSignal": true; }; "logoRedictionUrl": { "alias": "logoRedictionUrl"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "showThemeSwitcher": { "alias": "showThemeSwitcher"; "required": false; "isSignal": true; }; }, { "login": "login"; "logout": "logout"; }, ["routes", "title", "loginMenu", "content", "afterNav", "footer"], ["onemrva-mat-notification"], true, never>;
 }
 
 /**

package/types/onemrvapublic-design-system.d.ts

@@ -1,4 +1,4 @@
-declare const VERSION = "22.5.0-develop.2";
+declare const VERSION = "22.5.0-develop.4";
 
 declare const ɵɵtsModuleIndicatorApiExtractorWorkaround = true;