@registrucentras/rc-ses-angular-components 0.2.0

package/projects/rc-ses/angular-components/src/lib/components/layout/service-form-actions/service-form-actions.ts

@@ -0,0 +1,45 @@
+import { DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, contentChild } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { MatCardModule } from "@angular/material/card";
+import { MatAccordion } from "@angular/material/expansion";
+import { MatIconModule } from "@angular/material/icon";
+import { RcSesButtonDirective } from "../../button/button";
+
+@Component({
+  selector: 'rc-ses-service-form-actions',
+  standalone: true,
+  templateUrl: 'service-form-actions.html',
+  imports: [
+    MatButtonModule,
+    MatCardModule,
+    MatIconModule,
+    RcSesButtonDirective,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-service-form-actions'
+  },
+})
+export class ServiceFormActions implements AfterViewInit, OnDestroy, OnInit {
+  public readonly accordion = contentChild.required(MatAccordion);
+
+  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/layout/service-form-container/service-form-container.html

@@ -0,0 +1,16 @@
+@if (canCollapse) {
+  <div class="rc-ses-accordion-toggle-controls">
+    <button mat-button (click)="accordion().openAll()">
+      <mat-icon>unfold_more</mat-icon>
+      Praskleisti visus
+    </button>
+    <button mat-button (click)="accordion().closeAll()">
+      <mat-icon>unfold_less</mat-icon>
+      Suskleisti visus
+    </button>
+  </div>
+}
+
+<ng-content />
+
+<rc-ses-service-form-actions />

package/projects/rc-ses/angular-components/src/lib/components/layout/service-form-container/service-form-container.scss

@@ -0,0 +1,32 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-service-form-container {
+
+      .rc-ses-accordion-toggle-controls {
+        display: flex;
+        justify-content: flex-end;
+        margin: 0 -.625rem 1rem;
+
+        .mat-mdc-button {
+          margin: 0 .625rem;
+
+          .mat-mdc-button-touch-target {
+            height: var(--mdc-text-button-container-height) !important;
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      .rc-ses-service-form-container {
+        --mdc-text-button-container-height: 2.375rem;
+        --mat-text-button-icon-spacing: .125rem;
+        --mat-text-button-with-icon-horizontal-padding: .125rem;
+      }
+    }
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/layout/service-form-container/service-form-container.ts

@@ -0,0 +1,43 @@
+import { DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, contentChild, input, Input, booleanAttribute } from "@angular/core";
+import { MatButtonModule } from "@angular/material/button";
+import { MatAccordion } from "@angular/material/expansion";
+import { MatIconModule } from "@angular/material/icon";
+import { ServiceFormActions } from "../service-form-actions/service-form-actions";
+
+@Component({
+  selector: 'rc-ses-service-form-container',
+  standalone: true,
+  templateUrl: 'service-form-container.html',
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    ServiceFormActions,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-service-form-container'
+  },
+})
+export class ServiceFormContainer implements AfterViewInit, OnDestroy, OnInit {
+  @Input({ transform: booleanAttribute }) canCollapse: boolean = true;
+
+  public readonly accordion = contentChild.required(MatAccordion);
+
+  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/layout/service-header/service-header.html

@@ -0,0 +1,5 @@
+<div class="container">
+  <rc-ses-breadcrumbs [path]="fullPath" />
+  <h1>{{ serviceName }}</h1>
+  <p>{{ serviceDescription }}</p>
+</div>

package/projects/rc-ses/angular-components/src/lib/components/layout/service-header/service-header.scss

@@ -0,0 +1,35 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-service-header {
+      background-color: mat.get-theme-color($theme, primary, 99);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      padding: 1.5rem 0;
+
+      .container {
+        flex: 1 1 100%;
+        flex-wrap: wrap;
+      }
+
+      h1 {
+        margin-bottom: .5rem;
+        flex: 1 1 100%;
+      }
+
+      p {
+        flex: 1 1 100%;
+        font-weight: 300;
+        line-height: 1.125rem;
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+    }
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/layout/service-header/service-header.ts

@@ -0,0 +1,48 @@
+import { DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, Input } from "@angular/core";
+import { Breadcrumbs } from "../../breadcrumbs/breadcrumbs";
+
+type PathItem = { label: string, path: string };
+
+@Component({
+  selector: 'rc-ses-service-header',
+  standalone: true,
+  templateUrl: 'service-header.html',
+  imports: [Breadcrumbs],
+  host: {
+    class: 'rc-ses-element rc-ses-service-header'
+  },
+})
+export class ServiceHeader implements AfterViewInit, OnDestroy, OnInit {
+  @Input() serviceName: string | undefined = undefined;
+  @Input() serviceDescription: string | undefined = undefined;
+
+  @Input() path: PathItem[] | undefined = [];
+
+  get fullPath(): PathItem[] {
+    return [
+      { label: 'Savitarna', path: '/'},
+      ...(this.path ?? []),
+    ];
+  }
+
+  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/layout/service-page/service-page.html

@@ -0,0 +1,14 @@
+<div>
+  <ng-content select="rc-ses-service-header"></ng-content>
+</div>
+
+<div class="container container-main">
+  <div class="sidebar-wrapper">
+    <ng-content select="rc-ses-service-wizard-steps"></ng-content>
+  </div>
+
+  <div class="content-wrapper">
+    <ng-content></ng-content>
+    <ng-content select="rc-ses-service-form-container"></ng-content>
+  </div>
+</div>

package/projects/rc-ses/angular-components/src/lib/components/layout/service-page/service-page.scss

@@ -0,0 +1,38 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-service-page {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+
+      .container {
+        display: flex;
+        flex-direction: row;
+        margin: 0 auto;
+        max-width: 1130px;
+        padding: 0 1.25rem !important;
+      }
+
+      .container-main {
+        margin-top: 3rem;
+      }
+
+      .sidebar-wrapper {
+        flex: 1 1 0%;
+      }
+
+      .content-wrapper {
+        width: 840px;
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+    }
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/layout/service-page/service-page.ts

@@ -0,0 +1,37 @@
+import { DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, Input } from "@angular/core";
+import { Breadcrumbs } from "../../breadcrumbs/breadcrumbs";
+
+@Component({
+  selector: 'rc-ses-service-page',
+  standalone: true,
+  templateUrl: 'service-page.html',
+  imports: [Breadcrumbs],
+  host: {
+    class: 'rc-ses-element rc-ses-service-page'
+  },
+})
+export class ServicePage implements AfterViewInit, OnDestroy, OnInit {
+  @Input() serviceName: string | undefined = undefined;
+  @Input() serviceDescription: string | undefined = undefined;
+
+  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/layout/service-wizard-steps/service-wizard-steps.html

@@ -0,0 +1,18 @@
+<mat-nav-list role="navigation">
+  @for (item of steps; track $index) {
+    <mat-list-item
+      [activated]="item.state === 'active'"
+      [class]="'wizard-step-status--' + item.state"
+    >
+      @switch (item.state) {
+        @case ('completed') {
+          <mat-icon matListItemIcon svgIcon="rc-ses-check-circle" aria-hidden="false"></mat-icon>
+        }
+        @default {
+          <mat-icon matListItemIcon svgIcon="rc-ses-circle" aria-hidden="false"></mat-icon>
+        }
+      }
+      <div matListItemTitle>{{ item.label }}</div>
+    </mat-list-item>
+  }
+</mat-nav-list>

package/projects/rc-ses/angular-components/src/lib/components/layout/service-wizard-steps/service-wizard-steps.scss

@@ -0,0 +1,93 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-service-wizard-steps {
+      cursor: default !important;
+
+      .mat-icon {
+        position: relative;
+        text-align: center !important;
+
+        svg {
+          vertical-align: middle;
+        }
+      }
+
+      .wizard-step-status {
+
+        &--active {
+
+          .mat-icon svg {
+            height: .75rem !important;
+            width: .75rem !important;
+          }
+        }
+
+        &--pending {
+
+          .mat-icon svg {
+            height: .375rem !important;
+            width: .375rem !important;
+
+            * {
+              fill: mat.get-theme-color($theme, neutral, 90) !important;
+            }
+          }
+        }
+      }
+
+      .mdc-list {
+        padding: 3.375rem 0 1.5rem !important;
+      }
+
+      .mdc-list-item {
+        --mdc-list-list-item-container-color: transparent !important;
+        --mdc-list-list-item-hover-state-layer-color: transparent !important;
+        --mdc-list-list-item-label-text-color: #{mat.get-theme-color($theme, neutral, 30)};
+        --mdc-list-list-item-label-text-line-height: 1.125rem;
+        --mdc-list-list-item-label-text-size: .875rem;
+        --mdc-list-list-item-one-line-container-height: 2rem;
+        --mat-list-active-indicator-color: transparent !important;
+
+        cursor: default !important;
+
+        &--with-leading-icon .mdc-list-item__start {
+          margin-left: 0 !important;
+          margin-right: .625rem !important;
+        }
+      }
+
+      .mat-mdc-list-item {
+
+        &:after {
+          content: "";
+          border-left: 2px solid mat.get-theme-color($theme, neutral, 98);
+          height: 100%;
+          left: 11px;
+          position: absolute;
+          // K: 50%;
+          z-index: -1;
+        }
+
+        &:first-of-type:after {
+          top: 50%;
+        }
+
+        &:last-of-type:after {
+          bottom: 50%;
+        }
+
+        .mat-mdc-focus-indicator {
+          display: none !important;
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+    }
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/layout/service-wizard-steps/service-wizard-steps.ts

@@ -0,0 +1,41 @@
+import { CommonModule, DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, Input } from "@angular/core";
+import { MatCommonModule } from "@angular/material/core";
+import { MatIconModule } from "@angular/material/icon";
+import { MatListModule } from "@angular/material/list";
+import { RcSesIconsModule } from "../../icons/icons.module";
+import { HttpClient } from "@angular/common/http";
+// import { MatCommonModule } from "@angular/material/core";
+
+@Component({
+  selector: 'rc-ses-service-wizard-steps',
+  standalone: true,
+  templateUrl: 'service-wizard-steps.html',
+  imports: [MatIconModule, MatListModule, RcSesIconsModule],
+  host: {
+    class: 'rc-ses-element rc-ses-service-wizard-steps'
+  },
+})
+export class ServiceWizardSteps implements AfterViewInit, OnDestroy, OnInit {
+  @Input() steps: { label: string, state: 'completed' | 'active' | 'pending' }[] = [];
+
+  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/message/message.html

@@ -0,0 +1,39 @@
+<div
+  aria-live="polite"
+  class="rc-ses-message--wrapper mat-accent"
+  [class]="containerClass"
+>
+
+  @if (!hideIcon) {
+    <div class="rc-ses-message--icon">
+      @switch (severity) {
+        @case ('info') {
+          <mat-icon matListItemIcon svgIcon="rc-ses-info-fill" aria-hidden="false" />
+        }
+        @case ('warning') {
+          <mat-icon matListItemIcon svgIcon="rc-ses-warning-fill" aria-hidden="false" />
+        }
+        @case ('error') {
+          <mat-icon matListItemIcon svgIcon="rc-ses-warning-diamond-fill" aria-hidden="false" />
+        }
+        @case ('success') {
+          <mat-icon matListItemIcon svgIcon="rc-ses-check-circle-fill" aria-hidden="false" />
+        }
+        @default {
+          <mat-icon matListItemIcon svgIcon="rc-ses-info-fill" aria-hidden="false" />
+        }
+      }
+    </div>
+  }
+
+  <div class="rc-ses-message--content">
+    <ng-content />
+  </div>
+
+  <div class="rc-ses-message--actions">
+    @if (dismissible) {
+      <button rc-ses-button mat-stroked-button>Uždaryti</button>
+    }
+    <ng-content select="[actions]" />
+  </div>
+</div>

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

@@ -0,0 +1,141 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-message {
+      display: block;
+      font-size: .875rem;
+      line-height: 1.125rem;
+      margin-bottom: 1.25rem;
+
+      &--wrapper {
+        align-items: center;
+        border-radius: .375rem;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        padding: .75rem 1rem;
+      }
+
+      &--icon {
+        flex-grow: 0;
+        margin-right: .75rem;
+      }
+
+      &--content {
+        flex-grow: 1;
+      }
+
+      &--actions {
+        align-items: center;
+        display: flex;
+        flex-grow: 0;
+
+        &:not(:empty) {
+          margin-left: .75rem;
+        }
+      }
+
+      &--severity {
+
+        &-default {
+          background-color: mat.get-theme-color($theme, neutral, 98);
+          border-color: mat.get-theme-color($theme, neutral, 90);
+          color: mat.get-theme-color($theme, primary, 20);
+
+          svg path {
+            fill: mat.get-theme-color($theme, neutral, 40);
+          }
+
+          &.rc-ses-message--theme-dark {
+            background-color: mat.get-theme-color($theme, neutral, 20);
+            border-color: mat.get-theme-color($theme, neutral, 20);
+          }
+        }
+
+        &-info {
+          background-color: mat.get-theme-color($theme, primary, 100);
+          border-color: mat.get-theme-color($theme, primary, 90);
+          color: mat.get-theme-color($theme, neutral, 20);
+
+          svg path {
+            fill: mat.get-theme-color($theme, primary, 50);
+          }
+
+          &.rc-ses-message--theme-dark {
+            background-color: mat.get-theme-color($theme, primary, 20);
+            border-color: mat.get-theme-color($theme, primary, 20);
+          }
+        }
+
+        &-warning {
+          background-color: #fdefcf;
+          border-color: #fbd170;
+          color: #4a3504;
+
+          svg path {
+            fill: #c78f0d;
+          }
+
+          &.rc-ses-message--theme-dark {
+            background-color: #fbd170;
+            border-color: #fbd170;
+            color: #312303;
+          }
+        }
+
+        &-error {
+          background-color: mat.get-theme-color($theme, error, 99);
+          border-color: mat.get-theme-color($theme, error, 90);
+          color: mat.get-theme-color($theme, error, 20);
+
+          svg path {
+            fill: mat.get-theme-color($theme, error, 40);
+          }
+
+          &.rc-ses-message--theme-dark {
+            background-color: mat.get-theme-color($theme, error, 40);
+            border-color: mat.get-theme-color($theme, error, 40);
+          }
+        }
+
+        &-success {
+          background-color: mat.get-theme-color($theme, secondary, 98);
+          border-color: mat.get-theme-color($theme, secondary, 90);
+          color: mat.get-theme-color($theme, secondary, 20);
+
+          svg path {
+            fill: mat.get-theme-color($theme, secondary, 40);
+          }
+
+          &.rc-ses-message--theme-dark {
+            background-color: mat.get-theme-color($theme, secondary, 30);
+            border-color: mat.get-theme-color($theme, secondary, 30);
+          }
+        }
+      }
+
+      &--theme {
+
+        &-light {
+          border-style: solid;
+          border-width: 1px;
+        }
+
+        &-dark {
+          color: white;
+
+          svg path {
+            fill: white;
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+    }
+  }
+}