@eagami/ui 5.17.2 → 5.18.0

package/fesm2022/eagami-ui.mjs

@@ -1,44 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, signal, inject, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, afterNextRender, DestroyRef, viewChild, ElementRef, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, untracked, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, inject, CSP_NONCE, signal, effect, computed, Injectable, input, ChangeDetectionStrategy, Component, HostBinding, Directive, model, output, Injector, afterNextRender, DestroyRef, viewChild, ElementRef, HostListener, forwardRef, Renderer2, ViewContainerRef, TemplateRef, untracked, ViewEncapsulation, contentChild, viewChildren, PLATFORM_ID } from '@angular/core';
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-/**
- * Display name, flag, and reading direction for every built-in locale, in
- * language-switcher order: English first (the default fallback), then by each
- * language's own name (Latin scripts first, then Greek, Cyrillic, Hebrew,
- * Arabic, Devanagari, and Chinese by Unicode block order). Keyed by
- * `EagamiLocale` so a locale added to the union without an entry fails to
- * compile, keeping this single source exhaustive.
- */
-const LOCALE_DISPLAY = {
-    en: { label: 'English', flag: '🇬🇧', dir: 'ltr' },
-    de: { label: 'Deutsch', flag: '🇩🇪', dir: 'ltr' },
-    'es-ES': { label: 'Español', flag: '🇪🇸', dir: 'ltr' },
-    'fr-FR': { label: 'Français', flag: '🇫🇷', dir: 'ltr' },
-    is: { label: 'Íslenska', flag: '🇮🇸', dir: 'ltr' },
-    nl: { label: 'Nederlands', flag: '🇳🇱', dir: 'ltr' },
-    pl: { label: 'Polski', flag: '🇵🇱', dir: 'ltr' },
-    'pt-BR': { label: 'Português (Brasil)', flag: '🇧🇷', dir: 'ltr' },
-    el: { label: 'Ελληνικά', flag: '🇬🇷', dir: 'ltr' },
-    ru: { label: 'Русский', flag: '🇷🇺', dir: 'ltr' },
-    uk: { label: 'Українська', flag: '🇺🇦', dir: 'ltr' },
-    he: { label: 'עברית', flag: '🇮🇱', dir: 'rtl' },
-    ar: { label: 'العربية', flag: '🇸🇦', dir: 'rtl' },
-    hi: { label: 'हिन्दी', flag: '🇮🇳', dir: 'ltr' },
-    'zh-CN': { label: '中文', flag: '🇨🇳', dir: 'ltr' },
-};
-/**
- * Display metadata for every built-in locale. The single source the Storybook
- * locale toolbar and any consumer-built language switcher derive from, so the
- * displayed list never drifts from the locales the library ships.
- */
-const EAGAMI_LOCALE_META = Object.keys(LOCALE_DISPLAY).map(locale => ({ locale, ...LOCALE_DISPLAY[locale] }));
-/**
- * Supported locales for language switchers, in display order. Derived from
- * `EAGAMI_LOCALE_META` so the two never drift.
- */
-const EAGAMI_LOCALES = EAGAMI_LOCALE_META.map(m => m.locale);
+/** DI token carrying the consumer-supplied i18n configuration. */
+const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
 
 const STYLE_TAG_ID = 'eagami-palette';
 /**
@@ -51,8 +17,12 @@ const STYLE_TAG_ID = 'eagami-palette';
  * Idempotent: subsequent calls replace the previous stylesheet rather than
  * append, so a theme switcher can re-apply without leaking style tags.
  * No-ops outside a DOM context (SSR).
+ *
+ * Pass `nonce` under a `style-src` policy that requires one, or the browser
+ * drops the stylesheet and the app silently renders the library's own colours.
+ * `provideEagamiUi()` forwards Angular's `CSP_NONCE` automatically.
  */
-function applyPalette(palette) {
+function applyPalette(palette, nonce) {
     if (typeof document === 'undefined') {
         return;
     }
@@ -61,6 +31,10 @@ function applyPalette(palette) {
     if (!tag) {
         tag = document.createElement('style');
         tag.id = STYLE_TAG_ID;
+        // Before insertion: the policy is checked as the tag enters the document
+        if (nonce) {
+            tag.setAttribute('nonce', nonce);
+        }
         document.head.appendChild(tag);
     }
     tag.textContent = css;
@@ -347,8 +321,6 @@ function formatViolations(violations) {
     ].join('\n');
 }
 
-/** DI token carrying the consumer-supplied i18n configuration. */
-const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
 /**
  * Configures Eagami UI for the application.
  *
@@ -378,6 +350,10 @@ const EAGAMI_I18N_CONFIG = new InjectionToken('EAGAMI_I18N_CONFIG');
  *   },
  * });
  * ```
+ *
+ * A `palette` installs a `<style>` tag at bootstrap, carrying Angular's
+ * `CSP_NONCE` when the app provides one, so a strict `style-src` policy admits
+ * it instead of dropping the theme.
  */
 function provideEagamiUi(config = {}) {
     const i18nConfig = {
@@ -397,11 +373,48 @@ function provideEagamiUi(config = {}) {
             if (violations.length > 0) {
                 throw new Error(formatViolations(violations));
             }
-            applyPalette(palette);
+            applyPalette(palette, inject(CSP_NONCE, { optional: true }));
         }),
     ]);
 }
 
+/**
+ * Display name, flag, and reading direction for every built-in locale, in
+ * language-switcher order: English first (the default fallback), then by each
+ * language's own name (Latin scripts first, then Greek, Cyrillic, Hebrew,
+ * Arabic, Devanagari, and Chinese by Unicode block order). Keyed by
+ * `EagamiLocale` so a locale added to the union without an entry fails to
+ * compile, keeping this single source exhaustive.
+ */
+const LOCALE_DISPLAY = {
+    en: { label: 'English', flag: '🇬🇧', dir: 'ltr' },
+    de: { label: 'Deutsch', flag: '🇩🇪', dir: 'ltr' },
+    'es-ES': { label: 'Español', flag: '🇪🇸', dir: 'ltr' },
+    'fr-FR': { label: 'Français', flag: '🇫🇷', dir: 'ltr' },
+    is: { label: 'Íslenska', flag: '🇮🇸', dir: 'ltr' },
+    nl: { label: 'Nederlands', flag: '🇳🇱', dir: 'ltr' },
+    pl: { label: 'Polski', flag: '🇵🇱', dir: 'ltr' },
+    'pt-BR': { label: 'Português (Brasil)', flag: '🇧🇷', dir: 'ltr' },
+    el: { label: 'Ελληνικά', flag: '🇬🇷', dir: 'ltr' },
+    ru: { label: 'Русский', flag: '🇷🇺', dir: 'ltr' },
+    uk: { label: 'Українська', flag: '🇺🇦', dir: 'ltr' },
+    he: { label: 'עברית', flag: '🇮🇱', dir: 'rtl' },
+    ar: { label: 'العربية', flag: '🇸🇦', dir: 'rtl' },
+    hi: { label: 'हिन्दी', flag: '🇮🇳', dir: 'ltr' },
+    'zh-CN': { label: '中文', flag: '🇨🇳', dir: 'ltr' },
+};
+/**
+ * Display metadata for every built-in locale. The single source the Storybook
+ * locale toolbar and any consumer-built language switcher derive from, so the
+ * displayed list never drifts from the locales the library ships.
+ */
+const EAGAMI_LOCALE_META = Object.keys(LOCALE_DISPLAY).map(locale => ({ locale, ...LOCALE_DISPLAY[locale] }));
+/**
+ * Supported locales for language switchers, in display order. Derived from
+ * `EAGAMI_LOCALE_META` so the two never drift.
+ */
+const EAGAMI_LOCALES = EAGAMI_LOCALE_META.map(m => m.locale);
+
 /**
  * Module-level signal that lets external tooling (notably the Storybook
  * preview decorator) imperatively override the active locale on a running