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

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

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

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

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

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

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

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

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

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