@igo2/sdg-core 1.0.0-next.60

package/src/typography/typography.scss

@@ -0,0 +1,156 @@
+@use '@angular/material' as mat;
+@use '../theme/colors';
+@use '../theme/palettes';
+@use '../layout/breakpoints';
+@use './typography.utils' as typo-utils;
+
+// https://design.quebec.ca/bases/polices-caracteres
+// https://design.quebec.ca/bases/niveaux-titres
+// https://material.angular.io/guide/typography
+$font-family-text: 'Open Sans', sans-serif;
+$font-family-title: 'Roboto', sans-serif;
+
+$typography: mat.m2-define-typography-config(
+  $font-family: $font-family-text,
+  $headline-1: mat.m2-define-typography-level(110px, 110px, 500),
+  $headline-2: mat.m2-define-typography-level(54px, 54px, 500),
+  $headline-3: mat.m2-define-typography-level(43px, 46px, 500),
+  $headline-4: mat.m2-define-typography-level(32px, 38px, 500),
+  // h1
+  $headline-5: mat.m2-define-typography-level(48px, 56px, bold),
+  // h2
+  $headline-6: mat.m2-define-typography-level(36px, 40px, bold),
+  // h3
+  $subtitle-1: mat.m2-define-typography-level(28px, 32px, bold),
+  // h4
+  $subtitle-2: mat.m2-define-typography-level(21px, 24px, bold),
+  $body-1: mat.m2-define-typography-level(16px, 24px, 400),
+  $body-2: mat.m2-define-typography-level(12px, 18px, 400),
+  $caption: mat.m2-define-typography-level(12px, 18px, 400),
+  $button: mat.m2-define-typography-level(13px, 13px, 500)
+);
+
+$typography-mobile: mat.m2-define-typography-config(
+  // h1
+  $headline-5: mat.m2-define-typography-level(36px, 40px, bold),
+  // h2
+  $headline-6: mat.m2-define-typography-level(28px, 32px, bold),
+  // h3
+  $subtitle-1: mat.m2-define-typography-level(25px, 32px, bold)
+);
+
+$font-color: colors.$blue-dark;
+
+@mixin typo-set-base-styles {
+  body {
+    color: $font-color;
+  }
+
+  a {
+    font-family: $font-family-text;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    cursor: pointer;
+    color: colors.$blue-piv;
+    text-decoration: underline;
+    background-color: transparent;
+    width: fit-content;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  p,
+  ul,
+  li,
+  u,
+  .text {
+    font-family: $font-family-text;
+    color: $font-color;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  p {
+    margin-bottom: 24px;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  .h1,
+  .h2,
+  .h3,
+  .h4,
+  .h5,
+  .h6 {
+    font-family: $font-family-title !important;
+    color: $font-color;
+  }
+
+  h1 {
+    margin-top: 72px !important;
+    margin-bottom: 32px !important;
+
+    @include typo-utils.title-border;
+
+    @include breakpoints.media(mobile) {
+      margin-top: 48px !important;
+      margin-bottom: 16px !important;
+    }
+  }
+
+  h2 {
+    margin-top: 48px !important;
+    margin-bottom: 16px !important;
+  }
+
+  h3 {
+    margin-top: 24px !important;
+    margin-bottom: 16px !important;
+  }
+
+  // WORKAROUND, mat-typography area of intersection h4 is using mat-body-1
+  // https://github.com/angular/components/issues/26351
+  h4 {
+    @include typo-utils.title-level-4;
+  }
+
+  h4 {
+    margin-top: 24px !important;
+    margin-bottom: 8px !important;
+  }
+
+  h5 {
+    font-size: 19px !important;
+    line-height: 24px !important;
+  }
+
+  h6 {
+    font-size: 16px !important;
+    line-height: 20px !important;
+  }
+
+  h5,
+  h6 {
+    font-weight: bold !important;
+    margin-top: 16px !important;
+    margin-bottom: 0px !important;
+  }
+
+  .accroche {
+    font-size: 18px;
+    line-height: 28px;
+    font-weight: 600;
+    max-width: 82.5rem;
+    padding-bottom: 24px;
+  }
+}

package/src/typography/typography.utils.scss

@@ -0,0 +1,18 @@
+@use '../theme/colors';
+
+@mixin title-border {
+  &:after {
+    content: '';
+    display: block;
+    margin: 0;
+    width: 48px;
+    padding-top: 4px;
+    border-bottom: 4px solid colors.$pink;
+  }
+}
+
+@mixin title-level-4 {
+  font-size: 21px !important;
+  line-height: 24px !important;
+  font-weight: bold !important;
+}

package/translation/index.d.ts

@@ -0,0 +1,5 @@
+export * from './translation.interface';
+export * from './translation.service';
+export * from './translation.provider';
+export * from './translation-mock.provider';
+export * from './translation.utils';

package/translation/translation-mock.provider.d.ts

@@ -0,0 +1,12 @@
+import { WritableSignal } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Language } from './translation.interface';
+import { TranslationFeature, TranslationFeatureKind } from './translation.provider';
+import { TranslationService } from './translation.service';
+export declare function withIgo2TranslationMock(): TranslationFeature<TranslationFeatureKind.Translation>;
+export declare class TranslationServiceMock implements TranslationService {
+    lang: WritableSignal<Language>;
+    get(key: string | string[]): string;
+    getAsync(key: string | string[]): Observable<string>;
+    setLanguage(): void;
+}

package/translation/translation.interface.d.ts

@@ -0,0 +1 @@
+export type Language = 'fr' | 'en';

package/translation/translation.provider.d.ts

@@ -0,0 +1,21 @@
+import { EnvironmentProviders, Provider, Type } from '@angular/core';
+import { LanguageOptions } from '@igo2/core/language';
+import { TitleResolver } from '../router';
+import { TranslationService } from './translation.service';
+export interface TranslationFeature<KindT extends TranslationFeatureKind> {
+    kind: KindT;
+    providers: (Provider | EnvironmentProviders)[];
+}
+export declare enum TranslationFeatureKind {
+    Translation = 0,
+    RouterTitleResolver = 1
+}
+export declare function provideTranslation(...features: TranslationFeature<TranslationFeatureKind>[]): EnvironmentProviders;
+/** Base on the @ngx-translate library with the IgoLanguageModule */
+export declare function withIgo2Translation(options: LanguageOptions, service: Type<TranslationService>): TranslationFeature<TranslationFeatureKind.Translation>;
+/**
+ * Provide a translater for the Route title.
+ * Some components is base on the title of the route and
+ * this Resolver will allow to automatically resolve the translation
+ **/
+export declare function withRouterTitleResolver<T>(resolver: Type<TitleResolver<T>>): TranslationFeature<TranslationFeatureKind.RouterTitleResolver>;

package/translation/translation.service.d.ts

@@ -0,0 +1,13 @@
+import { WritableSignal } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Language } from './translation.interface';
+export type Translation = string | Translation[] | TranslationObject | any;
+export interface TranslationObject {
+    [key: string]: Translation;
+}
+export declare abstract class TranslationService {
+    abstract lang: WritableSignal<Language>;
+    abstract get(key: string | string[], interpolateParams?: Record<string, unknown>): Translation | TranslationObject;
+    abstract getAsync(key: string | string[], interpolateParams?: Record<string, unknown>): Observable<Translation | TranslationObject>;
+    abstract setLanguage(lang: Language): void;
+}

package/translation/translation.utils.d.ts

@@ -0,0 +1,2 @@
+export declare function readQueryParamLanguage(): string | undefined;
+export declare function parseUrlWithLanguage(routerUrl: string, lang: string): [url: string, params: string | undefined];

package/utils/coercion.d.ts

@@ -0,0 +1,2 @@
+import { Translation, TranslationObject } from '../translation';
+export declare function labelAttribute(value: Translation | TranslationObject, defaultValue?: Translation | TranslationObject): Translation | TranslationObject;

package/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './coercion';