@registrucentras/rc-ses-angular-components 0.2.0

package/projects/rc-ses/angular-components/src/lib/components/form/input/radio-button-group/radio-button-group.scss

@@ -0,0 +1,87 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-radio-button-group {
+      border: 1px solid #{mat.get-theme-color($theme, neutral, 50)};
+      border-radius: .1875rem;
+      display: block;
+      padding: .375rem;
+
+      &--has-background {
+        background-color: mat.get-theme-color($theme, neutral, 98);
+        border: none !important;
+      }
+
+      &--radio-as-buttons {
+        background-color: transparent !important;
+        border: none !important;
+        padding: 0;
+
+        .mat-mdc-radio-group {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: stretch;
+          margin: -.25rem;
+        }
+
+        .mat-mdc-radio-button {
+          background-color: var(--mdc-outlined-button-container-color);
+          border-color: var(--mdc-outlined-text-field-outline-color);
+          border-style: solid;
+          border-radius: var(--mdc-outlined-button-container-shape);
+          border-width: 1px;
+          display: flex;
+          flex: 0 0 0%;
+          justify-content: center;
+          margin: .25rem;
+          padding: 0 !important;
+
+          .mdc-radio {
+            position: absolute !important;
+            opacity: 0 !important;
+            padding: 0 !important;
+            z-index: -1;
+          }
+
+          .mdc-label {
+            cursor: pointer;
+            font-size: var(--mdc-text-button-label-text-size);
+            font-weight: 600;
+            line-height: 1.125rem;
+            padding: .8125rem 1rem !important;
+            text-wrap: nowrap;
+          }
+
+          &:hover {
+            border-color: mat.get-theme-color($theme, neutral, 25);
+            background-color: mat.get-theme-color($theme, neutral, 98);
+          }
+
+          &:active {
+            border-color: mat.get-theme-color($theme, neutral, 20);
+            background-color: mat.get-theme-color($theme, neutral, 95);
+          }
+
+          &:focus-within:not(:hover) {
+            outline: 2px solid #{mat.get-theme-color($theme, neutral, 0)} !important;
+            outline-offset: 2px;
+          }
+
+          &.mat-mdc-radio-checked {
+            border-color: mat.get-theme-color($theme, primary, 90);
+            background-color: mat.get-theme-color($theme, primary, 95);
+          }
+        }
+      }
+
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+    }
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/form/input/radio-button-group/radio-button-group.ts

@@ -0,0 +1,101 @@
+import { CommonModule, DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, Renderer2, Input, ContentChildren, QueryList, OnChanges, SimpleChanges, OnInit, forwardRef, ViewChild, Injector, booleanAttribute } from "@angular/core";
+import { ControlContainer, ControlValueAccessor, FormControl, FormControlDirective, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatCommonModule } from "@angular/material/core";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatRadioButton, MatRadioModule } from "@angular/material/radio";
+import { RcSesButtonDirective } from "../../../button/button";
+
+type Option = { value: string, label: string };
+type Options = Option[];
+
+@Component({
+  selector: 'rc-ses-radio-button-group',
+  standalone: true,
+  templateUrl: 'radio-button-group.html',
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+
+    MatButtonModule,
+    MatCommonModule,
+    MatFormFieldModule,
+    MatRadioModule,
+
+    RcSesButtonDirective,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-radio-button-group'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RcSesRadioButtonGroupComponent),
+      multi: true
+    }
+  ]
+})
+export class RcSesRadioButtonGroupComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
+  @ContentChildren(MatRadioButton)
+  queryOptions!: QueryList<MatRadioButton>;
+
+  @ViewChild(FormControlDirective, {static: true})
+  formControlDirective: FormControlDirective | undefined;
+
+  @Input() formControl!: FormControl;
+  @Input() formControlName: string | undefined;
+  @Input() options!: Options;
+
+  @Input({ transform: booleanAttribute }) displayAsButtons: boolean = false;
+  @Input({ transform: booleanAttribute }) hasBackground: boolean = false;
+
+  initialized: boolean = false;
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    public _element: ElementRef,
+    private _renderer: Renderer2,
+    private injector: Injector,
+  ) {}
+
+  get controlContainer() {
+    return this.injector.get(ControlContainer);
+  }
+
+  get control() {
+    return this.formControl ||
+      (this.formControlName && this.controlContainer.control?.get(this.formControlName));
+  }
+
+  writeValue(obj: any): void {
+    this.formControlDirective?.valueAccessor?.writeValue(obj);
+  }
+
+  registerOnChange(fn: any): void {
+    this.formControlDirective?.valueAccessor?.registerOnChange(fn);
+  }
+
+  registerOnTouched(fn: any): void {
+    this.formControlDirective?.valueAccessor?.registerOnTouched(fn);
+  }
+
+  ngOnChanges(_changes: SimpleChanges): void {}
+
+  ngOnInit() {
+    if (this.displayAsButtons)
+      this._renderer.addClass(this._element.nativeElement, 'rc-ses-radio-button-group--radio-as-buttons');
+
+    if (this.hasBackground)
+      this._renderer.addClass(this._element.nativeElement, 'rc-ses-radio-button-group--has-background');
+  }
+
+  ngAfterViewInit() {
+    this.initialized = true;
+  }
+
+  ngOnDestroy() {
+    this.initialized = false;
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/form/input/select/select.html

@@ -0,0 +1,40 @@
+<mat-form-field>
+  <mat-select
+    [formControl]="control"
+    [placeholder]="placeholder"
+    [multiple]="multiple"
+    [panelWidth]="panelWidth"
+    hideSingleSelectionIndicator
+    disableRipple
+  >
+    @if (searchable) {
+      <div class="rc-ses-select-search-wrapper">
+        @if (multiple) {
+          <mat-checkbox
+            [checked]="isFullSelection()"
+            [indeterminate]="isPartialSelection()"
+            (change)="handleSelectAllChange($event.checked)"
+          />
+        }
+        <mat-form-field>
+          <mat-icon matPrefix>search</mat-icon>
+          <input
+            rc-ses-input
+            matInput
+            type="text"
+            placeholder="Ieškoti"
+            (keyup)="filterOptions($event)"
+          />
+        </mat-form-field>
+      </div>
+    }
+    @for (option of filteredOptions; track option.value) {
+      <mat-option [value]="option.value">
+        {{ option.label }}
+        @if (option.description) {
+          <div class="description">{{ option.description }}</div>
+        }
+      </mat-option>
+    }
+  </mat-select>
+</mat-form-field>

package/projects/rc-ses/angular-components/src/lib/components/form/input/select/select.scss

@@ -0,0 +1,153 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-select {
+      display: block;
+      flex-grow: 1;
+
+      .mat-mdc-form-field {
+        width: 100%;
+      }
+
+      .mat-mdc-select-arrow-wrapper {
+        height: #{map-get($typography, 'body-2', 'line-height')} !important;
+      }
+    }
+
+    .cdk-overlay-pane {
+
+      .rc-ses-select-search-wrapper {
+        background-color: mat.get-theme-color($theme, neutral, 100);
+        border-bottom: 1px solid mat.get-theme-color($theme, neutral, 90);
+        border-top-left-radius: .25rem;
+        border-top-right-radius: .25rem;
+        display: flex;
+        margin-bottom: .375rem;
+        margin-top: -.375rem;
+        padding: .75rem 1rem;
+        position: sticky;
+        top: -.375rem;
+        z-index: 1;
+
+        .mat-mdc-checkbox {
+          margin-left: -.375rem;
+          margin-right: .5rem;
+          margin-top: .125rem;
+          vertical-align: top;
+        }
+
+        .mat-mdc-form-field {
+          flex-grow: 1;
+        }
+      }
+
+      div.mat-mdc-select-panel {
+        --mdc-list-list-item-container-shape: .1875rem !important;
+
+        border-radius: .25rem !important;
+        padding-bottom: .375rem !important;
+        padding-top: .375rem !important;
+        scrollbar-width: thin;
+
+        .mat-mdc-optgroup-label {
+          padding-left: .75rem !important;
+          padding-right: .75rem !important;
+
+          .mdc-list-item__primary-text {
+            color: mat.get-theme-color($theme, primary, 40) !important;
+            letter-spacing: .01em !important;
+            text-transform: uppercase !important;
+          }
+        }
+
+        .mdc-list-item {
+          margin-left: .375rem;
+          margin-right: .375rem;
+          padding: .8125rem .75rem !important;
+
+          &--disabled {
+            background-color: transparent !important;
+
+            &:before {
+              background-color: transparent !important;
+            }
+
+            .mat-pseudo-checkbox {
+              display: none !important;
+            }
+          }
+
+          &--selected {
+
+            &.mat-mdc-option-active:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
+              background-color: mat.get-theme-color($theme, neutral, 98) !important;
+            }
+          }
+        }
+
+        .mat-mdc-option {
+          min-height: 1.125rem !important;
+
+          &-multiple {
+
+            .mat-pseudo-checkbox {
+              margin-bottom: -.25rem;
+              margin-top: -.25rem;
+            }
+          }
+
+          .description {
+            color: mat.get-theme-color($theme, neutral, 40) !important;
+            font-size: map-get($typography, 'body-2', 'font-size');
+            font-style: italic;
+          }
+
+          .mat-pseudo-checkbox-checked::after {
+            content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="%23087fb2" d="m14.533 5.031-8 8a.751.751 0 0 1-1.063 0l-3.5-3.5A.751.751 0 0 1 3.033 8.47l2.969 2.97 7.47-7.469a.751.751 0 0 1 1.062 1.063l-.001-.002Z"/></svg>') !important;
+          }
+        }
+
+        .mat-mdc-form-field-icon-prefix .mat-icon {
+          padding: 0 !important;
+        }
+      }
+
+      &:not(.mat-mdc-select-panel-above) {
+
+        div.mat-mdc-select-panel {
+          margin-top: .25rem;
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      --mdc-list-list-item-label-text-color: #{mat.get-theme-color($theme, neutral, 20)};
+      --mdc-list-list-item-label-text-line-height: #{map-get($typography, 'body-2', 'line-height')};
+      --mdc-list-list-item-label-text-size: #{map-get($typography, 'body-2', 'font-size')};
+
+      --mat-optgroup-label-text-color: #{mat.get-theme-color($theme, primary, 40)};
+      --mat-optgroup-label-text-line-height: 1.0625rem;
+      --mat-optgroup-label-text-size: .75rem;
+      --mat-optgroup-label-text-weight: 500;
+
+      --mat-option-hover-state-layer-color: #{mat.get-theme-color($theme, neutral, 98)};
+      --mat-option-focus-state-layer-color: #{mat.get-theme-color($theme, neutral, 98)};
+      --mat-option-label-text-line-height: #{map-get($typography, 'body-2', 'line-height')};
+      --mat-option-label-text-size: #{map-get($typography, 'body-2', 'font-size')};
+      --mat-option-selected-state-layer-color: transparent;
+      --mat-option-selected-state-label-text-color: #{mat.get-theme-color($theme, neutral, 20)};
+
+      --mat-select-container-elevation-shadow:
+        0px 4px 16px 0px #{color.adjust(#091e42, $alpha: -0.76)},
+        0px 8px 16px 0px #{color.adjust(#091e42, $alpha: -0.90)};
+      --mat-select-trigger-text-size: #{map-get($typography, 'body-2', 'font-size')};
+      --mat-select-trigger-text-line-height: #{map-get($typography, 'body-2', 'line-height')};
+      --mat-select-panel-background-color: white;
+      --mat-select-placeholder-text-color: #{mat.get-theme-color($theme, neutral, 40)};
+    }
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/form/input/select/select.ts

@@ -0,0 +1,155 @@
+import { CommonModule, DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, Renderer2, Input, ContentChildren, QueryList, ChangeDetectorRef, model, OnChanges, SimpleChanges, OnInit, forwardRef, ViewChild, Injector, booleanAttribute } from "@angular/core";
+import { ControlContainer, ControlValueAccessor, FormControl, FormControlDirective, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonModule } from "@angular/material/button";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatCommonModule, MatOption, MatOptionModule } from "@angular/material/core";
+import { MatExpansionModule } from "@angular/material/expansion";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatSelectModule } from "@angular/material/select";
+
+type Option = { value: string, label: string, description?: string };
+type Options = Option[];
+
+@Component({
+  selector: 'rc-ses-select',
+  standalone: true,
+  templateUrl: 'select.html',
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+
+    MatButtonModule,
+    MatCheckboxModule,
+    MatCommonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatOptionModule,
+    MatSelectModule,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-select'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RcSesSelectComponent),
+      multi: true
+    }
+  ]
+})
+export class RcSesSelectComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
+  @ContentChildren(MatOption)
+  queryOptions!: QueryList<MatOption>;
+
+  @ViewChild(FormControlDirective, {static: true})
+  formControlDirective: FormControlDirective | undefined;
+
+  @Input() formControl!: FormControl;
+  @Input() formControlName: string | undefined;
+
+  @Input() options!: Options;
+
+  @Input({ transform: booleanAttribute }) multiple: boolean = false;
+  @Input({ transform: booleanAttribute }) searchable: boolean | '' = false;
+  @Input() panelWidth: 'auto' | 'dynamic' | null = 'auto';
+  @Input() placeholder: string = '';
+
+  filteredOptions: Options = [];
+
+  initialized: boolean = false;
+
+  readonly selectAll = model(false);
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    public _element: ElementRef,
+    private _renderer: Renderer2,
+    private injector: Injector,
+  ) {}
+
+  get controlContainer() {
+    return this.injector.get(ControlContainer);
+  }
+
+  get control() {
+    return this.formControl ||
+      (this.formControlName && this.controlContainer.control?.get(this.formControlName));
+  }
+
+  writeValue(obj: any): void {
+    this.formControlDirective?.valueAccessor?.writeValue(obj);
+  }
+
+  registerOnChange(fn: any): void {
+    this.formControlDirective?.valueAccessor?.registerOnChange(fn);
+  }
+
+  registerOnTouched(fn: any): void {
+    this.formControlDirective?.valueAccessor?.registerOnTouched(fn);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.filteredOptions = changes['options'].currentValue
+      ? changes['options'].currentValue
+      : []
+  }
+
+  ngOnInit() {
+    if (this.searchable)
+      this._renderer.addClass(this._element.nativeElement, 'rc-ses-select-searchable');
+
+    if (this.multiple)
+      this._renderer.addClass(this._element.nativeElement, 'rc-ses-select-multiple');
+  }
+
+  ngAfterViewInit() {
+    this.initialized = true;
+  }
+
+  ngOnDestroy() {
+    this.initialized = false;
+  }
+
+  filterOptions = ($event: KeyboardEvent) => {
+    $event.stopPropagation();
+    const query = ($event.target as HTMLInputElement).value;
+
+    this.filteredOptions = !query?.length
+      ? this.options
+      : this.options.filter((o) => o.label.indexOf(query) !== -1);
+  }
+
+  handleSelectAllChange = (checked: boolean) => {
+    const filteredOptionValues: Option['value'][] = this.filteredOptions.map((o) => o.value) || [];
+
+    if (checked) {
+      this.control.setValue(filteredOptionValues)
+    } else {
+      const currentSelection: Option['value'][] = this.control.value || [];
+      this.control.setValue(currentSelection.filter((c) => !filteredOptionValues.includes(c)))
+    }
+  }
+
+  isFullSelection = () => {
+    const currentSelection: Option['value'][] = this.control.value || [];
+
+    if (this.filteredOptions.length === 0 || currentSelection.length === 0)
+      return false;
+
+    return this.filteredOptions.every((o) => currentSelection.includes(o.value));
+  }
+
+  isPartialSelection = () => {
+    if (!this.filteredOptions.length || !this.control.value.length)
+      return false;
+
+    const currentSelection: Option['value'][] = this.control.value || [];
+    return !this.isFullSelection() && this.filteredOptions.some((o) => currentSelection.includes(o.value));
+  }
+}

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

@@ -0,0 +1,61 @@
+import { DomSanitizer } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { MatIconModule, MatIconRegistry } from "@angular/material/icon";
+
+@NgModule({
+  imports: [
+    MatIconModule,
+    MatIconModule,
+  ],
+})
+export class RcSesIconsModule {
+  constructor(
+    iconRegistry: MatIconRegistry,
+    sanitizer: DomSanitizer,
+  ) {
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-arrow-right',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#1F2733" d="m20.78 12.531-6.75 6.75a.75.75 0 1 1-1.06-1.061l5.47-5.47H3.75a.75.75 0 1 1 0-1.5h14.69l-5.47-5.469a.75.75 0 1 1 1.06-1.061l6.75 6.75a.748.748 0 0 1 0 1.061Z"/></svg>`)
+    );
+
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-caret-left',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#0E6790" d="M10.354 12.646a.501.501 0 0 1-.707.708l-5-5a.5.5 0 0 1 0-.707l5-5a.5.5 0 1 1 .707.707L5.707 8l4.647 4.646Z"/></svg>`)
+    );
+
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-circle',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="#1f2733"/></svg>`)
+    );
+
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-check-circle',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="#00a879"/><path fill="#fff" d="m18.533 9.03-8 8a.751.751 0 0 1-1.063 0l-3.5-3.5a.751.751 0 1 1 1.063-1.062l2.969 2.97 7.47-7.469a.751.751 0 0 1 1.062 1.063l-.001-.002Z"/></svg>`)
+    );
+
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-check-circle-fill',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 2.25A9.75 9.75 0 1 0 21.75 12 9.76 9.76 0 0 0 12 2.25Zm4.28 8.03-5.25 5.25a.747.747 0 0 1-1.06 0l-2.25-2.25a.75.75 0 1 1 1.06-1.06l1.72 1.72 4.72-4.72a.751.751 0 0 1 1.06 1.06Z"/></svg>`)
+    );
+
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-info-fill',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 2.25A9.75 9.75 0 1 0 21.75 12 9.76 9.76 0 0 0 12 2.25Zm-.375 4.5a1.125 1.125 0 1 1 0 2.25 1.125 1.125 0 0 1 0-2.25Zm1.125 10.5a1.5 1.5 0 0 1-1.5-1.5V12a.75.75 0 1 1 0-1.5 1.5 1.5 0 0 1 1.5 1.5v3.75a.75.75 0 1 1 0 1.5Z"/></svg>`)
+    );
+
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-scroll',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M9 9.75A.75.75 0 0 1 9.75 9h6a.75.75 0 1 1 0 1.5h-6A.75.75 0 0 1 9 9.75Zm.75 3.75h6a.75.75 0 1 0 0-1.5h-6a.75.75 0 1 0 0 1.5Zm12 4.5a3 3 0 0 1-3 3H8.25a3 3 0 0 1-3-3V6a1.5 1.5 0 0 0-3 0c0 .538.453.902.458.906A.75.75 0 0 1 1.8 8.099C1.692 8.02.75 7.276.75 6a3 3 0 0 1 3-3H16.5a3 3 0 0 1 3 3v9.75h.75a.75.75 0 0 1 .45.15c.113.08 1.05.824 1.05 2.1ZM9.024 16.264a.757.757 0 0 1 .726-.514H18V6a1.5 1.5 0 0 0-1.5-1.5H6.346c.265.455.405.973.404 1.5v12a1.5 1.5 0 0 0 3 0c0-.538-.453-.902-.457-.906a.733.733 0 0 1-.269-.83ZM20.25 18a1.18 1.18 0 0 0-.303-.75h-8.812c.075.243.113.496.113.75 0 .527-.138 1.044-.402 1.5h7.904a1.5 1.5 0 0 0 1.5-1.5Z"/></svg>`)
+    );
+
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-warning-diamond-fill',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="m22.064 10.942-9.005-9.006a1.5 1.5 0 0 0-2.115 0l-9 9.006a1.5 1.5 0 0 0 0 2.115l9.005 9.005a1.5 1.5 0 0 0 2.115 0l9.004-9.005a1.5 1.5 0 0 0 0-2.115h-.004ZM11.25 7.499a.75.75 0 1 1 1.5 0v5.25a.75.75 0 1 1-1.5 0V7.5Zm.75 9.75a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Z"/></svg>`)
+    );
+
+    iconRegistry.addSvgIconLiteral(
+      'rc-ses-warning-fill',
+      sanitizer.bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M22.201 17.634 14.003 3.396a2.322 2.322 0 0 0-4.004 0L1.801 17.634a2.204 2.204 0 0 0 0 2.223A2.282 2.282 0 0 0 3.803 21h16.396a2.284 2.284 0 0 0 2-1.143 2.205 2.205 0 0 0 .002-2.223ZM11.251 9.75a.75.75 0 1 1 1.5 0v3.75a.75.75 0 0 1-1.5 0V9.75Zm.75 8.25a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Z"/></svg>`)
+    );
+  }
+}

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

@@ -0,0 +1,19 @@
+<mat-card appearance="outlined">
+  <mat-card-content>
+    <button rc-ses-button mat-button type="button">
+      <mat-icon matListItemIcon svgIcon="rc-ses-caret-left" aria-hidden="false" />
+      Baigti pildyti vėliau
+    </button>
+
+    <button rc-ses-button mat-flat-button type="submit">
+      Baigti pildyti ir pridėti į krepšelį
+      <mat-icon matListItemIcon svgIcon="rc-ses-arrow-right" aria-hidden="false" />
+    </button>
+  </mat-card-content>
+</mat-card>
+
+<div class="rc-ses-footer-actions">
+  <button rc-ses-button mat-button color="neutral" type="button">
+    Atšaukti pildymą ir ištrinti formos duomenis
+  </button>
+</div>

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

@@ -0,0 +1,64 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-service-form-actions {
+      color: mat.get-theme-color($theme, primary, 30);
+
+      .mat-mdc-card-content {
+        align-items: center;
+        display: flex !important;
+        justify-content: space-between;
+        padding: 2rem !important;
+      }
+
+      button[type="submit"] {
+        --mdc-filled-button-container-height: 3.375rem;
+        --mat-filled-button-horizontal-padding: 2.25rem;
+        display: flex !important;
+        flex-direction: row-reverse;
+        flex-wrap: nowrap;
+
+        .mat-icon {
+          margin-left: .5rem !important;
+          margin-right: 0 !important;
+        }
+      }
+
+      .rc-ses-footer-actions {
+        display: flex;
+        justify-content: center;
+        margin-top: 1rem;
+        padding: .875rem 0;
+
+        .mdc-button {
+          text-decoration: underline !important;
+
+          &__label {
+            color: mat.get-theme-color($theme, neutral, 40) !important;
+          }
+
+          &:hover {
+            text-decoration: none !important;
+
+            .mdc-button__label {
+              color: mat.get-theme-color($theme, primary, 30) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+      .rc-ses-service-form-actions {
+        --mdc-outlined-card-container-shape: .375rem;
+        --mdc-outlined-card-container-color: #{mat.get-theme-color($theme, primary, 100)};
+        --mdc-outlined-card-outline-color: #{mat.get-theme-color($theme, primary, 90)};
+        --mdc-outlined-card-container-elevation: unset;
+      }
+    }
+  }
+}