@registrucentras/rc-ses-angular-components 0.2.0 → 0.4.0

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

@@ -1,45 +0,0 @@
-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

@@ -1,16 +0,0 @@
-@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

@@ -1,32 +0,0 @@
-@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

@@ -1,43 +0,0 @@
-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

@@ -1,5 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-@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

@@ -1,48 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-@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

@@ -1,37 +0,0 @@
-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

@@ -1,18 +0,0 @@
-<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

@@ -1,93 +0,0 @@
-@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

@@ -1,41 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<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

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