@registrucentras/rc-ses-angular-components 0.1.0

package/lib/components/message/message.d.ts

@@ -0,0 +1,23 @@
+import { AfterViewInit, OnDestroy, ElementRef, OnInit, Renderer2 } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare class RcSesMessageComponent implements AfterViewInit, OnDestroy, OnInit {
+    private _document;
+    _el: ElementRef;
+    private _renderer;
+    severity: 'default' | 'info' | 'warning' | 'error' | 'success' | null | undefined;
+    theme: 'light' | 'dark' | null | undefined;
+    hideIcon: boolean;
+    dismissible: boolean;
+    initialized: boolean | undefined;
+    constructor(_document: Document, _el: ElementRef, _renderer: Renderer2);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get containerClass(): {
+        [x: string]: "error" | "dark" | "default" | "info" | "warning" | "success" | "light" | null | undefined;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<RcSesMessageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RcSesMessageComponent, "rc-ses-message", never, { "severity": { "alias": "severity"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; }, {}, never, ["*", "[actions]"], true, never>;
+    static ngAcceptInputType_hideIcon: unknown;
+    static ngAcceptInputType_dismissible: unknown;
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@registrucentras/rc-ses-angular-components",
+  "version": "0.1.0",
+  "author": "VĮ REGISTRŲ CENTRAS",
+  "description": "RC SES Angular komponentų biblioteka",
+  "keywords": [
+    "angular",
+    "components",
+    "registrucentras",
+    "rc-ses",
+    "rc-ses-angular-components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/registrucentras/rc-ses-angular-components.git"
+  },
+  "private": false,
+  "exports": {
+    "./theme": {
+      "index": "./src/lib/theme/index.scss",
+      "palette": "./src/lib/theme/palette.scss",
+      "theme": "./src/lib/theme/theme.scss",
+      "typography": "./src/lib/theme/typography.scss"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/registrucentras-rc-ses-angular-components.mjs",
+      "esm": "./esm2022/registrucentras-rc-ses-angular-components.mjs",
+      "default": "./fesm2022/registrucentras-rc-ses-angular-components.mjs"
+    }
+  },
+  "peerDependencies": {
+    "@angular/animations": "^18.1.0",
+    "@angular/cdk": "^18.1.2",
+    "@angular/common": "^18.1.0",
+    "@angular/core": "^18.1.0",
+    "@angular/forms": "^18.1.0",
+    "@angular/material": "^18.1.2",
+    "@angular/platform-browser": "^18.1.0",
+    "@angular/router": "^18.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/registrucentras-rc-ses-angular-components.mjs",
+  "typings": "index.d.ts"
+}

package/public-api.d.ts

@@ -0,0 +1,15 @@
+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/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/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/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/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;
+}