@registrucentras/rc-ses-angular-components 0.2.0

package/projects/rc-ses/angular-components/package-lock.json

@@ -0,0 +1,224 @@
+{
+  "name": "@registrucentras/rc-ses-angular-components",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@registrucentras/rc-ses-angular-components",
+      "version": "0.1.0",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "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"
+      }
+    },
+    "node_modules/@angular/animations": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-18.2.14.tgz",
+      "integrity": "sha512-Kp/MWShoYYO+R3lrrZbZgszbbLGVXHB+39mdJZwnIuZMDkeL3JsIBlSOzyJRTnpS1vITc+9jgHvP/6uKbMrW1Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "18.2.14"
+      }
+    },
+    "node_modules/@angular/cdk": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.2.14.tgz",
+      "integrity": "sha512-vDyOh1lwjfVk9OqoroZAP8pf3xxKUvyl+TVR8nJxL4c5fOfUFkD7l94HaanqKSRwJcI2xiztuu92IVoHn8T33Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^7.1.2"
+      },
+      "peerDependencies": {
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/common": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-18.2.14.tgz",
+      "integrity": "sha512-ZPRswzaVRiqcfZoowuAM22Hr2/z10ajWOUoFDoQ9tWqz/fH/773kJv2F9VvePIekgNPCzaizqv9gF6tGNqaAwg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "18.2.14",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/core": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-18.2.14.tgz",
+      "integrity": "sha512-BIPrCs93ZZTY9ym7yfoTgAQ5rs706yoYeAdrgc8kh/bDbM9DawxKlgeKBx2FLt09Y0YQ1bFhKVp0cV4gDEaMxQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "rxjs": "^6.5.3 || ^7.4.0",
+        "zone.js": "~0.14.10"
+      }
+    },
+    "node_modules/@angular/forms": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-18.2.14.tgz",
+      "integrity": "sha512-fZVwXctmBJa5VdopJae/T9MYKPXNd04+6j4k/6X819y+9fiyWLJt2QicSc5Rc+YD9mmhXag3xaljlrnotf9VGA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "18.2.14",
+        "@angular/core": "18.2.14",
+        "@angular/platform-browser": "18.2.14",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/material": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.2.14.tgz",
+      "integrity": "sha512-28pxzJP49Mymt664WnCtPkKeg7kXUsQKTKGf/Kl95rNTEdTJLbnlcc8wV0rT0yQNR7kXgpfBnG7h0ETLv/iu5Q==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^18.0.0 || ^19.0.0",
+        "@angular/cdk": "18.2.14",
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "@angular/forms": "^18.0.0 || ^19.0.0",
+        "@angular/platform-browser": "^18.0.0 || ^19.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/platform-browser": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-18.2.14.tgz",
+      "integrity": "sha512-W+JTxI25su3RiZVZT3Yrw6KNUCmOIy7OZIZ+612skPgYK2f2qil7VclnW1oCwG896h50cMJU/lnAfxZxefQgyQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "18.2.14",
+        "@angular/common": "18.2.14",
+        "@angular/core": "18.2.14"
+      },
+      "peerDependenciesMeta": {
+        "@angular/animations": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@angular/router": {
+      "version": "18.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-18.2.14.tgz",
+      "integrity": "sha512-v/gweh8MBjjDfh1QssuyjISa+6SVVIvIZox7MaMs81RkaoVHwS9grDtPud1pTKHzms2KxSVpvwwyvkRJQplueg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^18.19.1 || ^20.11.1 || >=22.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "18.2.14",
+        "@angular/core": "18.2.14",
+        "@angular/platform-browser": "18.2.14",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/zone.js": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.10.tgz",
+      "integrity": "sha512-YGAhaO7J5ywOXW6InXNlLmfU194F8lVgu7bRntUF3TiG8Y3nBK0x1UJJuHUP/e8IyihkjCYqhCScpSwnlaSRkQ==",
+      "license": "MIT",
+      "peer": true
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+{
+  "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"
+    }
+  },
+  "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
+}

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

@@ -0,0 +1,71 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-accordion {
+
+      .mat-expansion-panel {
+        border: 1px solid #{mat.get-theme-color($theme, neutral, 60)};
+        border-radius: var(--mat-expansion-container-shape) !important;
+        box-shadow: unset !important;
+        margin-bottom: 1rem !important;
+
+        &-header {
+          background-color: mat.get-theme-color($theme, neutral, 99) !important;
+          border-bottom-left-radius: 0 !important;
+          border-bottom-right-radius: 0 !important;
+        }
+
+        &-body {
+          padding: 3rem 2rem 4rem !important;
+        }
+
+        .mat-expansion-indicator {
+          border-radius: 1.25rem;
+          height: 2.5rem;
+          line-height: 2.5rem;
+          text-align: center;
+          width: 2.5rem;
+
+          &:before {
+            content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="%236b747f" d="M20.031 15.53a.747.747 0 0 1-1.061 0L12 8.56l-6.969 6.97A.75.75 0 1 1 3.97 14.47l7.5-7.5a.75.75 0 0 1 1.061 0l7.5 7.5a.748.748 0 0 1 0 1.061Z"/></svg>');
+            display: inline-block;
+            height: 1.5rem;
+            vertical-align: sub;
+            width: 1.5rem;
+          }
+
+          svg {
+            display: none !important;
+          }
+        }
+
+        &:hover {
+
+          .mat-expansion-panel-header {
+            background-color: mat.get-theme-color($theme, neutral, 98) !important;
+          }
+
+          .mat-expansion-indicator {
+            background-color: mat.get-theme-color($theme, neutral, 20);
+
+            &:before {
+              content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="white" d="M20.031 15.53a.747.747 0 0 1-1.061 0L12 8.56l-6.969 6.97A.75.75 0 1 1 3.97 14.47l7.5-7.5a.75.75 0 0 1 1.061 0l7.5 7.5a.748.748 0 0 1 0 1.061Z"/></svg>');
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      --mat-expansion-header-text-color: #{mat.get-theme-color($theme, neutral, 20)};
+      --mat-expansion-header-text-size: #{map-get($typography, 'headline-6', 'font-size')};
+      --mat-expansion-header-text-line-height: 1.5rem;
+
+      --mat-expansion-container-background-color: transparent;
+      --mat-expansion-container-shape: .375rem;
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import { DOCUMENT } from "@angular/common";
+import { Directive, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, Input } from "@angular/core";
+
+@Directive({
+  selector: '[rc-ses-accordion]',
+  standalone: true,
+  host: {
+    class: 'rc-ses-element rc-ses-accordion'
+  },
+})
+export class RcSesAccordionDirective implements AfterViewInit, OnDestroy, OnInit {
+  @Input() path: { label: string, path: string }[] = [];
+
+  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;
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/breadcrumbs/breadcrumbs.html

@@ -0,0 +1,7 @@
+<mat-nav-list role="navigation">
+  @for (item of path; track $index) {
+    <mat-list-item [activated]="$last">
+      <div matListItemTitle [routerLink]="item.path">{{item.label}}</div>
+    </mat-list-item>
+  }
+</mat-nav-list>

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

@@ -0,0 +1,54 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-breadcrumbs {
+
+      .mat-mdc-nav-list {
+        display: flex !important;
+        flex-direction: row;
+        padding: 0 0 .375rem !important;
+      }
+
+      .mat-mdc-list-item {
+        flex-basis: content;
+        min-height: 1.5rem;
+        padding: 0 !important;
+
+        & + .mat-mdc-list-item {
+
+          .mat-mdc-list-item-title:before {
+            color: mat.get-theme-color($theme, neutral, 40) !important;
+            content: "/";
+            display: inline;
+            margin: 0 .378rem;
+          }
+        }
+
+        &.mdc-list-item--activated {
+
+          .mat-mdc-list-item-title {
+            color: mat.get-theme-color($theme, neutral, 20) !important;
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+      .rc-ses-breadcrumbs {
+
+        .mat-mdc-nav-list {
+          --mat-list-active-indicator-color: transparent;
+          --mdc-list-list-item-hover-state-layer-color: transparent;
+          --mdc-list-list-item-label-text-color: #{mat.get-theme-color($theme, neutral, 40)};
+          --mdc-list-list-item-label-text-size: .6875rem;
+          --mdc-list-list-item-label-text-weight: 400;
+          --mdc-list-list-item-one-line-container-height: .875rem;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,40 @@
+import { DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, Input } from "@angular/core";
+import { MatListModule } from '@angular/material/list';
+import { RouterLink } from "@angular/router";
+
+@Component({
+  selector: 'rc-ses-breadcrumbs',
+  standalone: true,
+  templateUrl: 'breadcrumbs.html',
+  imports: [
+    RouterLink,
+    MatListModule,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-breadcrumbs'
+  },
+})
+export class Breadcrumbs implements AfterViewInit, OnDestroy, OnInit {
+  @Input() path: { label: string, path: string }[] = [];
+
+  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;
+  }
+}