Merge branch 'main' into fix/autolink-event-contentready

swisspost · Jan 24, 2024 · 20d210d · 20d210d
2 parents 1e5a101 + fc56cf9
commit 20d210d
Show file tree

Hide file tree

Showing 101 changed files with 2,030 additions and 1,765 deletions.
diff --git a/.changeset/2024-01-14-update-icons.md b/.changeset/2024-01-14-update-icons.md
@@ -2,5 +2,6 @@
 '@swisspost/design-system-icons': minor
 ---
 
-Updated icons number 1000, 1007, 1020, 1021, 1022, 1023, 1024, 1027, 1028, 1034, 1039, 1040, 1042, 1044, 1047, 1049, 2000, 2001, 2002, 2005, 2018, 2023, 2024, 2032, 2037, 2057, 2058, 2059, 2068, 2081, 2082, 2086, 2087, 2092, 2094, 2095, 2098, 2099, 2107, 2114, 2115, 2116, 2120, 2122, 2124, 2125, 2126, 2128, 2136, 2137, 2138, 2140, 2141, 2144, 2145, 2148, 2149, 2150, 2151, 2153, 2154, 2155, 2156, 2157, 2158, 2159, 2160, 2161, 2162, 2163, 2164, 2165, 2166, 2167, 2168, 2170, 2173, 2175, 2177, 2178, 2179, 2180, 2182, 2185, 2188, 2191, 2192, 2193, 2195, 2196, 2197, 2198, 2199, 2200, 2201, 2202, 2205, 2206, 2207, 2209, 2212, 2217, 2218, 2219, 2220, 2221, 2222, 2223, 2224, 2225, 2226, 2227, 2228, 2229, 2230, 2231, 2232, 2233, 2234, 2235, 2236, 2237, 2238, 2239, 2240, 2241, 2242, 2243, 2244, 2245, 2246, 2247, 2248, 2249, 2250, 2254, 2255, 2256, 2257, 2261, 2262, 2263, 2264, 2266, 2267, 2268, 2269, 2271, 2273, 2274, 2275, 2277, 2278, 2279, 2280, 2283, 2284, 2285, 2286, 2287, 2288, 2289, 2290, 2291, 2292, 2293, 2296, 2297, 2298, 2299, 2300, 2301, 2302, 2303, 2304, 2305, 2310, 2311, 2312, 2314, 2315, 2317, 2318, 2319, 2321, 2322, 2323, 2326, 2327, 2328, 2329, 2330, 2331, 2332, 2333, 2334, 2337, 2339, 2340, 2341, 2342, 2343, 2344, 2346, 2347, 2348, 2349, 2350, 2351, 2352, 2353, 2354, 2355, 2356, 2357, 2358, 2359, 2360, 2361, 2362, 2364, 2365, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2377, 2378, 2379, 2381, 2383, 2384, 2385, 2388, 2389, 2390, 2391, 2392, 2393, 2394, 2397, 2398, 2402, 2403, 2404, 2406, 2407, 2408, 2409, 2411, 2412, 2414, 2415, 2417, 2418, 2419, 2420, 2421, 2422, 2423, 2424, 2425, 2426, 2427, 2428, 2429, 2430, 2431, 2432, 2433, 2434, 2435, 2436, 2437, 2438, 2439, 2440, 2441, 2442, 2443, 2444, 2445, 2446, 2447, 2448, 2449, 2450, 2451, 2453, 2456, 2457, 2459, 2460, 2462, 2463, 2464, 2465, 2466, 2467, 2468, 2470, 2471, 2473, 2475, 2476, 2477, 2478, 2479, 2480, 2481, 2483, 2484, 2485, 2486, 2487, 2488, 2489, 2490, 2491, 2492, 2493, 2494, 2497, 2498, 2499, 2500, 2501, 2502, 2503, 2504, 2505, 2506, 2507, 2508, 2509, 2510, 2512, 2514, 2518, 2519, 2520, 2521, 2522, 2523, 2524, 2525, 2526, 2527, 2528, 2529, 2530, 2531, 2533, 2534, 2535, 2536, 2538, 2539, 2540, 2541, 2542, 2543, 2544, 2545, 2546, 2550, 2551, 2552, 2553, 2554, 2555, 2556, 2557, 2558, 2559, 2560, 2561, 2562, 2563, 2564, 2565, 2566, 2567, 3007, 3008, 3009, 3017, 3018, 3019, 3033, 3037, 3039, 3040, 3041, 3042, 3043, 3045, 3046, 3047, 3048, 3049, 3050, 3051, 3052, 3053, 3054, 3055, 3056, 3057, 3058, 3059, 3060, 3061, 3062, 3063, 3064, 3065, 3066, 3067, 3069, 3070, 3072, 3073, 3074, 3077, 3078, 3080, 3081, 3083, 3084, 3085, 3086, 3090, 3091, 3092, 3093, 3094, 3095, 3096, 3097, 3099, 3100, 3102, 3106, 3107, 3108, 3110, 3111, 3112, 3113, 3114, 3115, 3117, 3121, 3123, 3125, 3126, 3127, 3128, 3129, 3130, 3131, 3132, 3133, 3135, 3137, 3138, 3146, 3147, 3148, 3149, 3150, 3151, 3153, 3154, 3155, 3156, 3160, 3161, 3162, 3164, 3165, 3170, 3172, 3173, 3176, 3177, 3178, 3179, 3180, 3181, 3182, 3183, 3190, 3195, 3196, 3198, 3200, 3201, 3205, 3206, 3209, 3210, 3211, 3212, 3214, 3215, 3216, 3217, 3218, 3219, 3220, 3221, 3224, 3225, 3226, 3227, 3231, 3235, 3238, 3241, 3242, 3246, 3250, 3252, 3253, 3255, 3256, 3258, 3259, 3260, 8006, 8009, 8010, 8011, 8014, 8015, 8017, 8018 and 8019. Added icon number 2571.
+Updated icons number 1000, 1007, 1020, 1021, 1022, 1023, 1024, 1027, 1028, 1034, 1039, 1040, 1042, 1044, 1047, 1049, 2000, 2001, 2002, 2005, 2018, 2023, 2024, 2032, 2037, 2057, 2058, 2059, 2068, 2081, 2082, 2086, 2087, 2092, 2094, 2095, 2098, 2099, 2107, 2114, 2115, 2116, 2120, 2122, 2124, 2125, 2126, 2128, 2136, 2137, 2138, 2140, 2141, 2144, 2145, 2148, 2149, 2150, 2151, 2153, 2154, 2155, 2156, 2157, 2158, 2159, 2160, 2161, 2162, 2163, 2164, 2165, 2166, 2167, 2168, 2170, 2173, 2175, 2177, 2178, 2179, 2180, 2182, 2185, 2188, 2191, 2192, 2193, 2195, 2196, 2197, 2198, 2199, 2200, 2201, 2202, 2205, 2206, 2207, 2209, 2212, 2217, 2218, 2219, 2220, 2221, 2222, 2223, 2224, 2225, 2226, 2227, 2228, 2229, 2230, 2231, 2232, 2233, 2234, 2235, 2236, 2237, 2238, 2239, 2240, 2241, 2242, 2243, 2244, 2245, 2246, 2247, 2248, 2249, 2250, 2254, 2255, 2256, 2257, 2261, 2262, 2263, 2264, 2266, 2267, 2268, 2269, 2271, 2273, 2274, 2275, 2277, 2278, 2279, 2280, 2283, 2284, 2285, 2286, 2287, 2288, 2289, 2290, 2291, 2292, 2293, 2296, 2297, 2298, 2299, 2300, 2301, 2302, 2303, 2304, 2305, 2310, 2311, 2312, 2314, 2315, 2317, 2318, 2319, 2321, 2322, 2323, 2326, 2327, 2328, 2329, 2330, 2331, 2332, 2333, 2334, 2337, 2339, 2340, 2341, 2342, 2343, 2344, 2346, 2347, 2348, 2349, 2350, 2351, 2352, 2353, 2354, 2355, 2356, 2357, 2358, 2359, 2360, 2361, 2362, 2364, 2365, 2367, 2368, 2369, 2370, 2371, 2372, 2373, 2374, 2375, 2377, 2378, 2379, 2381, 2383, 2384, 2385, 2388, 2389, 2390, 2391, 2392, 2393, 2394, 2397, 2398, 2402, 2403, 2404, 2406, 2407, 2408, 2409, 2411, 2412, 2414, 2415, 2417, 2418, 2419, 2420, 2421, 2422, 2423, 2424, 2425, 2426, 2427, 2428, 2429, 2430, 2431, 2432, 2433, 2434, 2435, 2436, 2437, 2438, 2439, 2440, 2441, 2442, 2443, 2444, 2445, 2446, 2447, 2448, 2449, 2450, 2451, 2453, 2456, 2457, 2459, 2460, 2462, 2463, 2464, 2465, 2466, 2467, 2468, 2470, 2471, 2473, 2475, 2476, 2477, 2478, 2479, 2480, 2481, 2483, 2484, 2485, 2486, 2487, 2488, 2489, 2490, 2491, 2492, 2493, 2494, 2497, 2498, 2499, 2500, 2501, 2502, 2503, 2504, 2505, 2506, 2507, 2508, 2509, 2510, 2512, 2514, 2518, 2519, 2520, 2521, 2522, 2523, 2524, 2525, 2526, 2527, 2528, 2529, 2530, 2531, 2533, 2534, 2535, 2536, 2538, 2539, 2540, 2541, 2542, 2543, 2544, 2545, 2546, 2550, 2551, 2552, 2553, 2554, 2555, 2556, 2557, 2558, 2559, 2560, 2561, 2562, 2563, 2564, 2565, 2566, 2567, 3007, 3008, 3009, 3017, 3018, 3019, 3033, 3037, 3039, 3040, 3041, 3042, 3043, 3045, 3046, 3047, 3048, 3049, 3050, 3051, 3052, 3053, 3054, 3055, 3056, 3057, 3058, 3059, 3060, 3061, 3062, 3063, 3064, 3065, 3066, 3067, 3069, 3070, 3072, 3073, 3074, 3077, 3078, 3080, 3081, 3083, 3084, 3085, 3086, 3090, 3091, 3092, 3093, 3094, 3095, 3096, 3097, 3099, 3100, 3102, 3106, 3107, 3108, 3110, 3111, 3112, 3113, 3114, 3115, 3117, 3121, 3123, 3125, 3126, 3127, 3128, 3129, 3130, 3131, 3132, 3133, 3135, 3137, 3138, 3146, 3147, 3148, 3149, 3150, 3151, 3153, 3154, 3155, 3156, 3160, 3161, 3162, 3164, 3165, 3170, 3172, 3173, 3176, 3177, 3178, 3179, 3180, 3181, 3182, 3183, 3190, 3195, 3196, 3198, 3200, 3201, 3205, 3206, 3209, 3210, 3211, 3212, 3214, 3215, 3216, 3217, 3218, 3219, 3220, 3221, 3224, 3225, 3226, 3227, 3231, 3235, 3238, 3241, 3242, 3246, 3250, 3252, 3253, 3255, 3256, 3258, 3259, 3260, 8006, 8009, 8010, 8011, 8014, 8015, 8017, 8018 and 8019.
 
+Added icon number 2571.
diff --git a/.changeset/angry-islands-shout.md b/.changeset/angry-islands-shout.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added a documentation page for the ng-bootstrap datepicker component.
diff --git a/.changeset/brave-dodos-know.md b/.changeset/brave-dodos-know.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Documented the form patterns and added a usage sample to align buttons together in the button component page.
diff --git a/.changeset/brown-dragons-fetch.md b/.changeset/brown-dragons-fetch.md
@@ -1,5 +1,4 @@
 ---
-'@swisspost/design-system-components': minor
 '@swisspost/design-system-documentation': patch
 ---
 

diff --git a/.changeset/itchy-singers-admire.md b/.changeset/itchy-singers-admire.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Convert LinkTo element to regular links to fix location issue.
diff --git a/.changeset/nice-items-deny.md b/.changeset/nice-items-deny.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': minor
+---
+
+Added internationalization guidelines for the following ng-bootstrap components: alert, carousel, datepicker, pagination, and timepicker.
diff --git a/.changeset/swift-humans-kneel.md b/.changeset/swift-humans-kneel.md
@@ -6,9 +6,8 @@
 Restricted `post-collapsible` to collapse behaviour only.
 The component remains unchanged when used with external controls, however, it no longer has a `header` slot.
 
-To get the same look and feel as in the previous version, use the `post-accordion-item` component instead.
+Before:
 
-Before: 
 ```html
 <post-collapsible collapsed="" headingLevel="6">
   <span slot="header">Titulum</span>
@@ -17,9 +16,12 @@ Before:
 ```
 
 After:
+
 ```html
 <post-accordion-item collapsed="" headingLevel="6">
   <span slot="header">Titulum</span>
   <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
 </post-accordion-item>
 ```
+
+To get the same look and feel as in the previous version, use the `post-accordion-item` component instead.
diff --git a/.changeset/tasty-planes-dance.md b/.changeset/tasty-planes-dance.md
diff --git a/packages/demo/src/app/common/ngb-localization/ngb-localization.component.html b/packages/demo/src/app/common/ngb-localization/ngb-localization.component.html
@@ -0,0 +1,22 @@
+<section id="internationalization">
+  <h3 class="bold mt-5">Internationalization</h3>
+
+  <p class="light font-curve-regular mt-4">
+    Some ng-bootstrap components contain static English text that does not appear on screen but is
+    used in aria attributes needed for accessibility.
+  </p>
+
+  <p class="light font-curve-regular mt-4">
+    The internationalization of this content is done using the
+    <code>@angular/localize</code>
+    package. To do this, make sure to add
+    <code>import '@angular/localize/init';</code>
+    to your
+    <code>polyfills.ts</code>
+    file, then use the implementation below to enable translations:
+  </p>
+
+  <code [highlight]="ngbLocalizationSample" [languages]="['ts']" class="block"></code>
+
+  <ng-content></ng-content>
+</section>
diff --git a/packages/demo/src/app/common/ngb-localization/ngb-localization.component.ts b/packages/demo/src/app/common/ngb-localization/ngb-localization.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+const ngbLocalizationSample = require('!!raw-loader!./ngb-localization.sample.ts').default;
+
+@Component({
+  selector: 'app-ngb-localization',
+  templateUrl: './ngb-localization.component.html',
+})
+export class NgbLocalizationComponent {
+  ngbLocalizationSample = ngbLocalizationSample;
+}
diff --git a/packages/demo/src/app/common/ngb-localization/ngb-localization.sample.ts b/packages/demo/src/app/common/ngb-localization/ngb-localization.sample.ts
@@ -0,0 +1,99 @@
+import { loadTranslations } from '@angular/localize';
+
+const I18N_VALUES = {
+  de: {
+    'ngb.alert.close': 'Schließen',
+    'ngb.carousel.slide-number': ' Folie {$INTERPOLATION} von {$INTERPOLATION_1} ',
+    'ngb.carousel.previous': 'Vorherige',
+    'ngb.carousel.next': 'Nächste',
+    'ngb.datepicker.select-year': 'Jahr auswählen',
+    'ngb.datepicker.select-month': 'Monat auswählen',
+    'ngb.datepicker.previous-month': 'Vorheriger Monat',
+    'ngb.datepicker.next-month': 'Nächster Monat',
+    'ngb.pagination.first-aria': 'Erster',
+    'ngb.pagination.previous-aria': 'Vorheriger',
+    'ngb.pagination.next-aria': 'Nächster',
+    'ngb.pagination.last-aria': 'Letzter',
+    'ngb.timepicker.hours': 'Stunden',
+    'ngb.timepicker.increment-hours': 'Stunden erhöhen',
+    'ngb.timepicker.decrement-hours': 'Stunden verringern',
+    'ngb.timepicker.minutes': 'Minuten',
+    'ngb.timepicker.increment-minutes': 'Minuten erhöhen',
+    'ngb.timepicker.decrement-minutes': 'Minuten verringern',
+    'ngb.timepicker.seconds': 'Sekunden',
+    'ngb.timepicker.increment-seconds': 'Sekunden erhöhen',
+    'ngb.timepicker.decrement-seconds': 'Sekunden verringern',
+  },
+  fr: {
+    'ngb.alert.close': 'Fermer',
+    'ngb.carousel.slide-number': 'Diapositive {$INTERPOLATION} sur {$INTERPOLATION_1}',
+    'ngb.carousel.previous': 'Précédente',
+    'ngb.carousel.next': 'Suivante',
+    'ngb.datepicker.select-year': "Sélectionner l'année",
+    'ngb.datepicker.select-month': 'Sélectionner le mois',
+    'ngb.datepicker.previous-month': 'Mois précédent',
+    'ngb.datepicker.next-month': 'Mois suivant',
+    'ngb.pagination.first-aria': 'Premier',
+    'ngb.pagination.previous-aria': 'Précédent',
+    'ngb.pagination.next-aria': 'Suivant',
+    'ngb.pagination.last-aria': 'Dernier',
+    'ngb.timepicker.hours': 'Heures',
+    'ngb.timepicker.increment-hours': 'Augmenter les heures',
+    'ngb.timepicker.decrement-hours': 'Diminuer les heures',
+    'ngb.timepicker.minutes': 'Minutes',
+    'ngb.timepicker.increment-minutes': 'Augmenter les minutes',
+    'ngb.timepicker.decrement-minutes': 'Diminuer les minutes',
+    'ngb.timepicker.seconds': 'Secondes',
+    'ngb.timepicker.increment-seconds': 'Augmenter les secondes',
+    'ngb.timepicker.decrement-seconds': 'Diminuer les secondes',
+  },
+  it: {
+    'ngb.alert.close': 'Chiudi',
+    'ngb.carousel.slide-number': 'Diapositiva {$INTERPOLATION} di {$INTERPOLATION_1}',
+    'ngb.carousel.previous': 'Precedente',
+    'ngb.carousel.next': 'Successiva',
+    'ngb.datepicker.select-year': "Seleziona l'anno",
+    'ngb.datepicker.select-month': 'Seleziona il mese',
+    'ngb.datepicker.previous-month': 'Mese precedente',
+    'ngb.datepicker.next-month': 'Mese successivo',
+    'ngb.pagination.first-aria': 'Primo',
+    'ngb.pagination.previous-aria': 'Precedente',
+    'ngb.pagination.next-aria': 'Successivo',
+    'ngb.pagination.last-aria': 'Ultimo',
+    'ngb.timepicker.hours': 'Ore',
+    'ngb.timepicker.increment-hours': 'Aumenta le ore',
+    'ngb.timepicker.decrement-hours': 'Diminuisci le ore',
+    'ngb.timepicker.minutes': 'Minuti',
+    'ngb.timepicker.increment-minutes': 'Aumenta i minuti',
+    'ngb.timepicker.decrement-minutes': 'Diminuisci i minuti',
+    'ngb.timepicker.seconds': 'Secondi',
+    'ngb.timepicker.increment-seconds': 'Aumenta i secondi',
+    'ngb.timepicker.decrement-seconds': 'Diminuisci i secondi',
+  },
+  en: {
+    'ngb.alert.close': 'Close',
+    'ngb.carousel.slide-number': 'Slide {$INTERPOLATION} of {$INTERPOLATION_1}',
+    'ngb.carousel.previous': 'Previous',
+    'ngb.carousel.next': 'Next',
+    'ngb.datepicker.select-year': 'Select Year',
+    'ngb.datepicker.select-month': 'Select Month',
+    'ngb.datepicker.previous-month': 'Previous Month',
+    'ngb.datepicker.next-month': 'Next Month',
+    'ngb.pagination.first-aria': 'First',
+    'ngb.pagination.previous-aria': 'Previous',
+    'ngb.pagination.next-aria': 'Next',
+    'ngb.pagination.last-aria': 'Last',
+    'ngb.timepicker.hours': 'Hours',
+    'ngb.timepicker.increment-hours': 'Increment Hours',
+    'ngb.timepicker.decrement-hours': 'Decrement Hours',
+    'ngb.timepicker.minutes': 'Minutes',
+    'ngb.timepicker.increment-minutes': 'Increment Minutes',
+    'ngb.timepicker.decrement-minutes': 'Decrement Minutes',
+    'ngb.timepicker.seconds': 'Seconds',
+    'ngb.timepicker.increment-seconds': 'Increment Seconds',
+    'ngb.timepicker.decrement-seconds': 'Decrement Seconds',
+  },
+};
+
+// use this function where your application's locale is initialized
+loadTranslations(I18N_VALUES[localeId]);
diff --git a/packages/demo/src/app/common/post-common.module.ts b/packages/demo/src/app/common/post-common.module.ts
@@ -6,10 +6,17 @@ import { DependencyLinkComponent } from './dependency-link/dependency-link.compo
 
 import { FooterComponent } from './footer/footer.component';
 import { FormatCodePipe } from './format-code.pipe';
+import { NgbLocalizationComponent } from './ngb-localization/ngb-localization.component';
+import { Highlight } from 'ngx-highlightjs';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, FormsModule],
-  declarations: [FooterComponent, FormatCodePipe, DependencyLinkComponent],
-  exports: [FooterComponent, FormatCodePipe, DependencyLinkComponent],
+  imports: [CommonModule, RouterModule, FormsModule, Highlight],
+  declarations: [
+    FooterComponent,
+    FormatCodePipe,
+    DependencyLinkComponent,
+    NgbLocalizationComponent,
+  ],
+  exports: [FooterComponent, FormatCodePipe, DependencyLinkComponent, NgbLocalizationComponent],
 })
 export class PostCommonModule {}
diff --git a/...demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html b/...demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
@@ -38,3 +38,5 @@ <h1 class="bold font-curve-large">Alerts</h1>
   [highlight]="codeTemplate"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
+
+<app-ngb-localization />
diff --git a/...app/ng-bootstrap/components/carousel/carousel-demo-page/carousel-demo-page.component.html b/...app/ng-bootstrap/components/carousel/carousel-demo-page/carousel-demo-page.component.html
@@ -22,3 +22,5 @@ <h3 class="mt-5 mb-3 bold">Light caption</h3>
   [highlight]="lightCarouselTemplate"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
+
+<app-ngb-localization />
diff --git a/...-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html b/...-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
@@ -62,7 +62,7 @@ <h1 class="bold font-curve-large">Datepicker</h1>
   <div class="alert alert-info" role="alert">
     <p>
       If you use internationalization, check out the custom
-      <a href="#internationalization">datepicker internationalization service and directive</a>
+      <a href="#internationalization">datepicker internationalization service</a>
       below
     </p>
   </div>
@@ -184,24 +184,15 @@ <h4 class="h5 bold mt-4">datepicker-simple.component.ts</h4>
   ></code>
 </section>
 
-<section id="internationalization">
+<app-ngb-localization>
   <p class="light font-curve-regular mt-4">
-    If you are using internationalization, add this service and directive to your application for
-    custom date translations. Note that the directive need to be imported every time you use the
-    datepicker. It's advised to wrap the datepicker and the directive inside a module to be able to
-    share more easily.
+    The datepicker requires additional translations for months and days of the week. These can be
+    configured using the service below:
   </p>
-  <h4 class="h5 bold mt-4">datepicker.localization.service.ts</h4>
-  <code
-    class="block"
-    [highlight]="localizationService"
-    [languages]="['typescript', 'javascript']"
-  ></code>
 
-  <h4 class="h5 bold mt-4">datepicker.title-localization.directive.ts</h4>
   <code
     class="block"
-    [highlight]="localizationDirective"
+    [highlight]="localizationService"
     [languages]="['typescript', 'javascript']"
   ></code>
-</section>
+</app-ngb-localization>
diff --git a/...ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.ts b/...ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.ts
@@ -15,8 +15,6 @@ const dpSimpleTs =
 const dpValidationTs =
   require('!!raw-loader!../datepicker-validation/datepicker-validation-demo.component.ts').default;
 const localizationService = require('!!raw-loader!./datepicker-localization.service.ts').default;
-const localizationDirective =
-  require('!!raw-loader!./datepicker-title-localization.directive.ts').default;
 
 @Component({
   selector: 'app-datepicker-demo-page',
@@ -30,7 +28,6 @@ export class NgbDatepickerDemoPageComponent implements OnInit {
   dpSimpleTs = dpSimpleTs;
   dpValidationTs = dpValidationTs;
   localizationService = localizationService;
-  localizationDirective = localizationDirective;
 
   form: UntypedFormGroup;
   sizes = ['sm', 'rg', 'md', 'lg'];