@registrucentras/rc-ses-angular-components 0.2.0

package/projects/rc-ses/angular-components/src/lib/components/message/message.ts

@@ -0,0 +1,52 @@
+import { DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, Input, ChangeDetectionStrategy, ContentChild, contentChild, booleanAttribute, contentChildren } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { MatIconModule } from "@angular/material/icon";
+import { RcSesButtonDirective } from "../button/button";
+
+@Component({
+  selector: 'rc-ses-message',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'message.html',
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    RcSesButtonDirective,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-message'
+  },
+})
+export class RcSesMessageComponent implements AfterViewInit, OnDestroy, OnInit {
+  @Input() severity: 'default' | 'info' | 'warning' | 'error' | 'success' | null | undefined = 'default';
+  @Input() theme: 'light' | 'dark' | null | undefined = 'light';
+
+  @Input({ transform: booleanAttribute }) hideIcon: boolean = false;
+  @Input({ transform: booleanAttribute }) dismissible: boolean = false;
+
+  public initialized: boolean | undefined;
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    public _el: ElementRef,
+    private _renderer: Renderer2,
+  ) {}
+
+  ngOnInit() {}
+
+  ngAfterViewInit() {
+    this.initialized = true;
+  }
+
+  ngOnDestroy() {
+    this.initialized = false;
+  }
+
+  get containerClass() {
+    return {
+      [`rc-ses-message--severity-${this.severity}`]: this.severity,
+      [`rc-ses-message--theme-${this.theme}`]: this.theme,
+    };
+  }
+}

package/projects/rc-ses/angular-components/src/lib/theme/index.scss

@@ -0,0 +1,65 @@
+@use '@angular/material' as mat;
+
+@use './palette.scss' as palette;
+@use './typography.scss' as typography;
+@use './theme.scss' as theme;
+
+@use '../components/accordion/accordion.scss' as rc-ses-accordion;
+@use '../components/breadcrumbs/breadcrumbs.scss' as rc-ses-breadcrumbs;
+@use '../components/button/button.scss' as rc-ses-button;
+@use '../components/divider/divider.scss' as rc-ses-divider;
+@use '../components/form/form-field/form-field.scss' as rc-ses-form-field;
+@use '../components/form/input/agreement-checkbox/agreement-checkbox.scss' as rc-ses-agreement-checkbox;
+@use '../components/form/input/checkbox/checkbox.scss' as rc-ses-checkbox;
+@use '../components/form/input/datepicker/datepicker.scss' as rc-ses-datepicker;
+@use '../components/form/input/input/input.scss' as rc-ses-input;
+@use '../components/form/input/number-stepper/number-stepper.scss' as rc-ses-number-stepper;
+@use '../components/form/input/select/select.scss' as rc-ses-select;
+@use '../components/form/input/radio/radio.scss' as rc-ses-radio;
+@use '../components/form/input/radio-button-group/radio-button-group.scss' as rc-ses-radio-button-group;
+@use '../components/message/message.scss' as rc-ses-message;
+@use '../components/layout/service-header/service-header.scss' as rc-ses-service-header;
+@use '../components/layout/service-form-actions/service-form-actions.scss' as rc-ses-service-form-actions;
+@use '../components/layout/service-form-container/service-form-container.scss' as rc-ses-service-form-container;
+@use '../components/layout/service-page/service-page.scss' as rc-ses-service-page;
+@use '../components/layout/service-wizard-steps/service-wizard-steps.scss' as rc-ses-service-wizard-steps;
+
+@layer rc-ses-variables, rc-ses, material;
+
+@layer material {
+  @include mat.core();
+
+  html {
+    @include mat.all-component-themes(theme.$theme);
+  }
+
+  html, body {
+    height: 100%;
+    margin: 0;
+  }
+
+  @include mat.color-variants-backwards-compatibility(theme.$theme);
+  @include mat.typography-hierarchy(typography.$typography, $back-compat: true);
+}
+
+@include rc-ses-agreement-checkbox.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-accordion.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-button.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-checkbox.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-divider.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-form-field.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-datepicker.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-input.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-message.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-number-stepper.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-radio.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-radio-button-group.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-select.bootstrap(theme.$theme, typography.$typography);
+
+@include rc-ses-service-header.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-breadcrumbs.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-service-form-actions.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-service-form-container.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-service-page.bootstrap(theme.$theme, typography.$typography);
+@include rc-ses-service-wizard-steps.bootstrap(theme.$theme, typography.$typography);
+

package/projects/rc-ses/angular-components/src/lib/theme/palette.scss

@@ -0,0 +1,183 @@
+$rc-ses-primary-palette: (
+    0: #082d44,
+   10: #082d44,
+   20: #164763,
+   25: #155575,
+   30: #0e6790,
+   35: #087fb2,
+   40: #087fb2,
+   50: #06a0d4,
+   60: #50c9f3,
+   70: #50c9f3,
+   80: #88daf7,
+   90: #88daf7,
+   95: #b9e9fa,
+   98: #dcf4fc,
+   99: #ecf9fe,
+  100: #f3fbfe,
+
+  secondary: (
+      0: #002c24,
+     10: #002c24,
+     20: #004e3d,
+     25: #00664e,
+     30: #008561,
+     35: #00a879,
+     40: #00a879,
+     50: #00c288,
+     60: #05d091,
+     70: #05d091,
+     80: #6fe7bd,
+     90: #6fe7bd,
+     95: #a5f3d3,
+     98: #d1fae7,
+     99: #ecfdf6,
+    100: #ecfdf6,
+  ),
+  neutral: (
+      0: #10161f,
+     10: #10161f,
+     20: #1f2733,
+     25: #29323d,
+     30: #4a5361,
+     35: #6b747f,
+     40: #6b747f,
+     50: #8e959e,
+     60: #a9afb8,
+     70: #a9afb8,
+     80: #c5cad1,
+     90: #c5cad1,
+     95: #dce0e5,
+     98: #f0f2f5,
+     99: #f9fafb,
+    100: #f9fafb,
+  ),
+  neutral-variant: (
+     0: #10161f,
+    10: #10161f,
+    20: #1f2733,
+    25: #29323d,
+    30: #4a5361,
+    35: #6b747f,
+    40: #6b747f,
+    50: #8e959e,
+    60: #a9afb8,
+    70: #a9afb8,
+    80: #c5cad1,
+    90: #c5cad1,
+    95: #dce0e5,
+    98: #f0f2f5,
+    99: #f9fafb,
+    100: #f9fafb,
+  ),
+  error: (
+      0: #31110d,
+     10: #31110d,
+     20: #4a1a14,
+     25: #63231b,
+     30: #96362a,
+     35: #c84838,
+     40: #c84838,
+     50: #fa5a46,
+     60: #fb7b6b,
+     70: #fb7b6b,
+     80: #fc9c90,
+     90: #fdbdb5,
+     95: #fdbdb5,
+     98: #fededa,
+     99: #fef4f2,
+    100: #fef4f2,
+  )
+);
+
+$rc-ses-tertiary-palette: (
+     0: #082d44,
+    10: #082d44,
+    20: #164763,
+    25: #155575,
+    30: #0e6790,
+    35: #087fb2,
+    40: #087fb2,
+    50: #06a0d4,
+    60: #50c9f3,
+    70: #50c9f3,
+    80: #88daf7,
+    90: #88daf7,
+    95: #b9e9fa,
+    98: #dcf4fc,
+    99: #ecf9fe,
+   100: #f3fbfe,
+
+  secondary: (
+      0: #002c24,
+     10: #002c24,
+     20: #004e3d,
+     25: #00664e,
+     30: #008561,
+     35: #00a879,
+     40: #00a879,
+     50: #00c288,
+     60: #05d091,
+     70: #05d091,
+     80: #6fe7bd,
+     90: #6fe7bd,
+     95: #a5f3d3,
+     98: #d1fae7,
+     99: #ecfdf6,
+    100: #ecfdf6,
+  ),
+  neutral: (
+      0: #10161f,
+     10: #10161f,
+     20: #1f2733,
+     25: #29323d,
+     30: #4a5361,
+     35: #6b747f,
+     40: #6b747f,
+     50: #8e959e,
+     60: #a9afb8,
+     70: #a9afb8,
+     80: #c5cad1,
+     90: #dce0e5,
+     95: #dce0e5,
+     98: #f0f2f5,
+     99: #f9fafb,
+    100: #f9fafb,
+  ),
+  neutral-variant: (
+      0: #10161f,
+     10: #10161f,
+     20: #1f2733,
+     25: #29323d,
+     30: #4a5361,
+     35: #6b747f,
+     40: #6b747f,
+     50: #6b747f,
+     60: #a9afb8,
+     70: #a9afb8,
+     80: #c5cad1,
+     90: #c5cad1,
+     95: #dce0e5,
+     98: #f0f2f5,
+     99: #f9fafb,
+    100: #f9fafb,
+  ),
+  error: (
+      0: #31110d,
+     10: #31110d,
+     20: #4a1a14,
+     25: #63231b,
+     30: #96362a,
+     35: #c84838,
+     40: #c84838,
+     50: #fa5a46,
+     60: #fb7b6b,
+     70: #fb7b6b,
+     80: #fdbdb5,
+     90: #fdbdb5,
+     95: #fdbdb5,
+     98: #fededa,
+     99: #fef4f2,
+    100: #fef4f2,
+  ),
+);

package/projects/rc-ses/angular-components/src/lib/theme/theme.scss

@@ -0,0 +1,24 @@
+@use '@angular/material' as mat;
+@use './palette.scss' as palette;
+
+$theme: null;
+
+@layer material {
+  $theme: mat.define-theme((
+    color: (
+      theme-type: light,
+      primary: palette.$rc-ses-primary-palette,
+      tertiary: palette.$rc-ses-tertiary-palette,
+    ),
+    density: (
+      scale: 0,
+    ),
+    typography: (
+      brand-family: 'Public Sans',
+      plain-family: 'Public Sans',
+      bold-weight: 700,
+      medium-weight: 500,
+      regular-weight: 400
+    )
+  )) !global;
+}

package/projects/rc-ses/angular-components/src/lib/theme/typography.scss

@@ -0,0 +1,63 @@
+@use '@angular/material' as mat;
+
+$typography: null;
+
+@layer material {
+  $typography: mat.m2-define-typography-config(
+    $font-family: 'Public Sans',
+    $headline-1: mat.m2-define-typography-level(
+      $font-size: 2.25rem,
+      $font-weight: 500,
+      $letter-spacing: 0,
+      $line-height: 3rem,
+    ),
+    $headline-2: mat.m2-define-typography-level(
+      $font-size: 5rem,
+      $font-weight: 500,
+      $letter-spacing: 0,
+      $line-height: 2.7,
+    ),
+    $headline-3: mat.m2-define-typography-level(
+      $font-size: 1.75rem,
+      $font-weight: 500,
+      $letter-spacing: 0,
+      $line-height: 2.3625,
+    ),
+    $headline-4: mat.m2-define-typography-level(
+      $font-size: 1.5rem,
+      $font-weight: 500,
+      $letter-spacing: 0,
+      $line-height: 2.025,
+    ),
+    $headline-5: mat.m2-define-typography-level(
+      $font-size: 2.25rem,
+      $font-weight: 500,
+      $letter-spacing: 0,
+      $line-height: 3rem,
+    ),
+    $headline-6: mat.m2-define-typography-level(
+      $font-size: 1.25rem,
+      $font-weight: 500,
+      $letter-spacing: 0,
+      $line-height: 1.51875,
+    ),
+    $body-1: mat.m2-define-typography-level(
+      $font-size: 0.9375rem,
+      $font-weight: 400,
+      $letter-spacing: 0,
+      $line-height: 1.125rem,
+    ),
+    $body-2: mat.m2-define-typography-level(
+      $font-size: 0.9375rem,
+      $font-weight: 400,
+      $letter-spacing: 0,
+      $line-height: 1.125rem,
+    ),
+    $button: mat.m2-define-typography-level(
+      $font-weight: 400,
+      $font-size: 0.9375rem,
+      $line-height: 1.125rem,
+      $letter-spacing: 0,
+    ),
+  ) !global;
+}

package/projects/rc-ses/angular-components/src/public-api.ts

@@ -0,0 +1,22 @@
+/*
+ * Public API Surface of @rc-ses/angular-components
+ */
+export * from './lib/components/accordion/accordion';
+export * from './lib/components/breadcrumbs/breadcrumbs';
+export * from './lib/components/divider/divider';
+export * from './lib/components/form/form-field/form-field';
+
+export * from './lib/components/form/input/agreement-checkbox/agreement-checkbox';
+export * from './lib/components/form/input/input/input';
+export * from './lib/components/form/input/number-stepper/number-stepper';
+export * from './lib/components/form/input/radio-button-group/radio-button-group';
+export * from './lib/components/form/input/select/select';
+
+export * from './lib/components/layout/service-form-actions/service-form-actions';
+export * from './lib/components/layout/service-form-container/service-form-container';
+export * from './lib/components/layout/service-header/service-header';
+export * from './lib/components/layout/service-page/service-page';
+export * from './lib/components/layout/service-wizard-steps/service-wizard-steps';
+
+export * from './lib/components/message/message';
+

package/projects/rc-ses/angular-components/src/styles.scss

@@ -0,0 +1,40 @@
+
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+@include mat.core();
+
+// Define the theme object.
+$app-theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: mat.$azure-palette,
+    tertiary: mat.$blue-palette,
+  ),
+  density: (
+    scale: 0,
+  )
+));
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+:root {
+  @include mat.all-component-themes($app-theme);
+}
+
+// Comment out the line below if you want to use the pre-defined typography utility classes.
+// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
+// @include mat.typography-hierarchy($app-theme);
+
+// Comment out the line below if you want to use the deprecated `color` inputs.
+// @include mat.color-variants-backwards-compatibility($app-theme);
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

package/projects/rc-ses/angular-components/src/test.ts

@@ -0,0 +1,14 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+

package/projects/rc-ses/angular-components/tsconfig.lib.json

@@ -0,0 +1,15 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/rc-ses/angular-components/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,37 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "paths": {
+      "@registrucentras/rc-ses-angular-components": [
+        "./dist/registrucentras/rc-ses-angular-components"
+      ]
+    },
+    "outDir": "./dist/out-tsc",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "sourceMap": true,
+    "declaration": false,
+    "experimentalDecorators": true,
+    "moduleResolution": "bundler",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ],
+    "moduleResolution": "node"
+  },
+  "files": [
+    "projects/rc-ses/angular-components/src/test.ts"
+  ],
+  "include": [
+    "projects/rc-ses/angular-components/src/**/*.spec.ts",
+    "projects/rc-ses/angular-components/src/**/*.d.ts"
+  ]
+}