@onemrvapublic/design-system 22.6.0-develop.2 → 22.7.0-develop.1

package/fesm2022/onemrvapublic-design-system.mjs

@@ -1,5 +1,5 @@
 // Auto-generated — do not edit
-const VERSION = '22.6.0-develop.2';
+const VERSION = '22.7.0-develop.1';
 
 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.6.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.7.0-develop.1';\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onemrvapublic/design-system",
-  "version": "22.6.0-develop.2",
+  "version": "22.7.0-develop.1",
   "description": "Design System Onem/Rva without theme included",
   "publishConfig": {
     "access": "public"
@@ -20,7 +20,8 @@
     "@ngrx/component-store": ">=21.0.0 <23.0.0",
     "ngx-mask": ">=22.0.0 <23.0.0",
     "ibantools": ">=4.5.0 <5.0.0",
-    "libphonenumber-js": ">=1.11.0 <2.0.0"
+    "libphonenumber-js": ">=1.11.0 <2.0.0",
+    "orejime": ">=3.2.0 <4.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/material-luxon-adapter": {
@@ -31,6 +32,9 @@
     },
     "ngx-mask": {
       "optional": true
+    },
+    "orejime": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -58,6 +62,10 @@
       "types": "./types/onemrvapublic-design-system-collapsible-page-divider.d.ts",
       "default": "./fesm2022/onemrvapublic-design-system-collapsible-page-divider.mjs"
     },
+    "./cookie-consent": {
+      "types": "./types/onemrvapublic-design-system-cookie-consent.d.ts",
+      "default": "./fesm2022/onemrvapublic-design-system-cookie-consent.mjs"
+    },
     "./flag-icon": {
       "types": "./types/onemrvapublic-design-system-flag-icon.d.ts",
       "default": "./fesm2022/onemrvapublic-design-system-flag-icon.mjs"

package/theme/index.scss

@@ -5,6 +5,7 @@
 @forward './overrides/card' as cards-*;
 @forward './overrides/checkbox' as checkbox-*;
 @forward './overrides/chips' as chips-*;
+@forward './overrides/cookie-consent' as cookie-consent-*;
 @forward './overrides/datepicker' as datepicker-*;
 @forward './overrides/drag-and-drop' as drag-and-drop-*;
 @forward './overrides/dialogs' as dialogs-*;
@@ -54,6 +55,7 @@
 @use './overrides/card';
 @use './overrides/carousel';
 @use './overrides/chips';
+@use './overrides/cookie-consent';
 @use './overrides/datepicker';
 @use './overrides/timepicker';
 @use './overrides/dialogs';
@@ -196,6 +198,7 @@
   @include card.override();
   @include chips.override();
   @include carousel.override();
+  @include cookie-consent.override();
   @include datepicker.override();
   @include timepicker.override();
   @include dialogs.override();

package/theme/overrides/_cookie-consent.scss

@@ -0,0 +1,173 @@
+// Orejime (cookie consent) restyled to the design system.
+// Applies on top of orejime/dist/orejime-standard.css, see the cookie-consent entry point.
+
+@mixin override() {
+  .orejime-Env {
+    h1 {
+      --orejime-space-s: 8px;
+    }
+    .orejime-Modal {
+      padding: var(--triple-spacer) !important;
+    }
+
+    .orejime-Modal-header {
+      margin-bottom: var(--double-spacer);
+    }
+
+    .orejime-Modal-body {
+      margin-bottom: var(--double-spacer);
+    }
+
+    .orejime-Modal-title {
+      margin-bottom: var(--spacer);
+    }
+
+    .orejime-ModalWrapper {
+      border: 1px solid var(--mat-sys-outline);
+      border-radius: 16px;
+    }
+
+    .orejime-Modal-poweredByLink {
+      display: none;
+    }
+
+    .orejime-Modal-footer {
+      justify-content: flex-end;
+    }
+
+    p {
+      font: var(--mat-sys-body-medium) !important;
+      color: var(--mat-sys-on-surface);
+    }
+
+    @media (min-width: 960px) {
+      .orejime-Banner-body {
+        max-width: 35vw;
+      }
+    }
+
+    .orejime-Banner-actions {
+      display: flex;
+    }
+
+    // "Decline optional cookies" before "Accept all cookies"
+    .orejime-Banner-actionItem--decline {
+      order: 1;
+    }
+
+    .orejime-Banner-actionItem--save {
+      order: 2;
+    }
+
+    .orejime-PurposeToggles {
+      flex-direction: row-reverse;
+      gap: var(--spacer);
+      justify-content: center;
+    }
+
+    .orejime-Button {
+      box-sizing: border-box;
+      min-height: 2.25rem;
+      padding-inline: var(--double-spacer);
+      border-radius: var(--button-border-radius);
+      font-family: var(--brand-font);
+      font-size: 1rem;
+      font-weight: 500;
+      cursor: pointer;
+
+      &:hover,
+      &:active {
+        box-shadow: var(--mat-sys-level2) !important;
+      }
+
+      &:not([disabled]):not([aria-disabled='true']):hover,
+      &:not([disabled]):not([aria-disabled='true']):focus:not(:focus-visible) {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline: 5px solid var(--mat-sys-primary-fixed-dim);
+        outline-offset: 1px;
+      }
+
+      &:disabled {
+        background: var(--background-gradient);
+        color: var(--mat-sys-on-primary);
+        opacity: 0.4;
+        cursor: default;
+        box-shadow: none;
+      }
+    }
+
+    // Secondary actions, like mat-stroked-button
+    .orejime-Modal-saveButton,
+    .orejime-Button--info,
+    .orejime-Button--decline {
+      border: 2px solid var(--mat-sys-primary);
+      background: var(--mat-sys-surface);
+      color: var(--mat-sys-primary);
+    }
+
+    // Primary actions, like mat-flat-button color="accent"
+    .orejime-PurposeToggles-enableAll,
+    .orejime-Banner-saveButton {
+      border: 0;
+      background: var(--background-gradient);
+      color: var(--on-background-gradient);
+    }
+
+    // Purpose checkboxes rendered as Material slide toggles
+    .orejime-Purpose-input[type='checkbox'] {
+      appearance: none;
+      box-sizing: border-box;
+      flex: none;
+      position: relative;
+      width: 52px;
+      height: 32px;
+      margin: 0;
+      border: 2px solid var(--mat-sys-outline);
+      border-radius: 16px;
+      background: var(--mat-sys-surface-container-highest);
+      cursor: pointer;
+      transition:
+        background-color 0.2s cubic-bezier(0.2, 0, 0, 1),
+        border-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+
+      // thumb
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 4px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: var(--mat-sys-outline);
+        transform: translateY(-50%);
+        transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+      }
+
+      &:checked {
+        background: var(--background-gradient);
+        border-color: var(--on-background-gradient);
+
+        &::before {
+          left: 20px;
+          width: 24px;
+          height: 24px;
+          background: var(--mat-sys-on-primary);
+        }
+      }
+
+      &:focus-visible {
+        outline: 3px solid var(--mat-sys-secondary);
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        opacity: 0.38;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,143 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, EnvironmentProviders } from '@angular/core';
+import { Observable } from 'rxjs';
+
+/**
+ * A cookie Orejime deletes when consent for its purpose is withdrawn: a name,
+ * a regex (also accepted as a `'/…/flags'` string), or `[name, path, domain]`
+ * for cookies set outside of `/` or the current domain.
+ */
+type CookieConsentCookie = string | RegExp | [string, string, string];
+interface CookieConsentPurpose {
+    id: string;
+    /** Translation key, resolved with ngx-translate when the banner is built. */
+    title: string;
+    /** Translation key, resolved with ngx-translate when the banner is built. */
+    description?: string;
+    cookies?: CookieConsentCookie[];
+    isMandatory?: boolean;
+    isExempt?: boolean;
+    default?: boolean;
+    runsOnce?: boolean;
+}
+interface CookieConsentOptions {
+    /**
+     * The purposes the user can consent to. The essential purpose
+     * (`ESSENTIAL_COOKIE_PURPOSE`) is prepended unless `essentialPurpose` is false.
+     */
+    purposes: CookieConsentPurpose[];
+    /**
+     * Link shown in the banner and the modal, either a single URL or one per
+     * language. Defaults to the ONEM cookie policy.
+     */
+    privacyPolicyUrl?: string | Partial<Record<string, string>>;
+    /** Adds the mandatory essential-cookies purpose. Defaults to true. */
+    essentialPurpose?: boolean;
+    /**
+     * Cookie in which Orejime stores the consent. The name is required so that
+     * applications sharing a domain never share their consent. Bump it to ask
+     * every user for consent again, e.g. after adding a purpose.
+     */
+    cookie: {
+        name: string;
+        duration?: number;
+        domain?: string;
+        sameSite?: 'strict' | 'lax' | 'none';
+    };
+    forceModal?: boolean;
+    forceBanner?: boolean;
+    /**
+     * Where Orejime mounts itself. Defaults to a new element at the start of
+     * `<body>`, which must then carry the `onemrva-theme` class to be styled.
+     */
+    orejimeElement?: string | HTMLElement;
+    /**
+     * Raw Orejime translations, deep-merged over the library labels.
+     * Use it for app-specific wording; the defaults live under the
+     * `cookieConsent` key of the design-system translation files.
+     */
+    translations?: OrejimeTranslations;
+}
+type OrejimeTranslations = Record<string, Record<string, string>>;
+/** The configuration object `loadOrejime()` expects. */
+interface OrejimeConfig {
+    privacyPolicyUrl: string;
+    purposes: CookieConsentPurpose[];
+    cookie?: CookieConsentOptions['cookie'];
+    forceModal?: boolean;
+    forceBanner?: boolean;
+    orejimeElement?: string | HTMLElement;
+    translations?: OrejimeTranslations;
+}
+interface OrejimeManager {
+    getConsent(purposeId: string): boolean;
+    setConsent(purposeId: string, consent: boolean): void;
+    clearConsents(): void;
+    acceptAll(): void;
+    declineAll(): void;
+    on(event: 'update', callback: (updated: Record<string, boolean>, all: Record<string, boolean>) => void): void;
+    on(event: 'clear', callback: () => void): void;
+}
+interface OrejimeInstance {
+    prompt(): void;
+    manager: OrejimeManager;
+}
+/** Signature of the global installed by `orejime/dist/orejime-standard-*.js`. */
+type LoadOrejime = (config: OrejimeConfig) => OrejimeInstance;
+
+declare const COOKIE_CONSENT_OPTIONS: InjectionToken<CookieConsentOptions>;
+/**
+ * Configures the cookie consent banner. Nothing is shown until
+ * `CookieConsentService.init()` is called, so the app decides when
+ * (typically after authentication and once translations are loaded).
+ */
+declare function provideCookieConsent(options: CookieConsentOptions): EnvironmentProviders;
+
+declare const ESSENTIAL_COOKIE_PURPOSE = "essential";
+/**
+ * Angular wrapper around Orejime (https://orejime.boscop.fr).
+ *
+ * Orejime is not bundled: the app loads `orejime/dist/orejime-standard-en.js`
+ * and `orejime/dist/orejime-standard.css` through the `scripts` and `styles`
+ * of its `angular.json`, which installs the global `loadOrejime()` used here.
+ *
+ * The orejime-standard-<lang>.js bundles only differ by their default texts,
+ * and every text is overridden from the `cookieConsent` translations of the
+ * current language, so a single bundle serves every language.
+ *
+ * Labels are resolved once, in `init()`. Orejime cannot be re-translated in
+ * place, so apps that switch language at runtime should reload the page.
+ */
+declare class CookieConsentService {
+    private readonly options;
+    private readonly translate;
+    private readonly document;
+    private instance?;
+    private initialization?;
+    private readonly consentsSubject;
+    /** Consent per purpose id; empty until `init()` has resolved. */
+    readonly consents: i0.Signal<Record<string, boolean>>;
+    /**
+     * Shows the banner if the user has not decided yet, and starts tracking
+     * consent. Waits for the current language's translations. Safe to call
+     * more than once.
+     */
+    init(): Promise<void>;
+    /** Emits the consent for one purpose now and on every change. */
+    consent$(purposeId: string): Observable<boolean>;
+    hasConsent(purposeId: string): boolean;
+    /**
+     * Opens the preferences modal, e.g. from a "Cookie settings" footer link.
+     * Initializes first if needed, so a misconfiguration surfaces as an error
+     * instead of a button that does nothing.
+     */
+    openPreferences(): Promise<void>;
+    private load;
+    private createConfig;
+    private privacyPolicyUrl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CookieConsentService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CookieConsentService>;
+}
+
+export { COOKIE_CONSENT_OPTIONS, CookieConsentService, ESSENTIAL_COOKIE_PURPOSE, provideCookieConsent };
+export type { CookieConsentCookie, CookieConsentOptions, CookieConsentPurpose, LoadOrejime, OrejimeConfig, OrejimeInstance, OrejimeManager, OrejimeTranslations };

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

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