@registrucentras/rc-ses-angular-components 0.2.0

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

@@ -0,0 +1,89 @@
+import { CommonModule, DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, Renderer2, Input, OnChanges, SimpleChanges, OnInit, forwardRef, ViewChild, Injector, booleanAttribute } from "@angular/core";
+import { ControlContainer, ControlValueAccessor, FormControl, FormControlDirective, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatCommonModule } 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";
+
+@Component({
+  selector: 'rc-ses-agreement-checkbox',
+  standalone: true,
+  templateUrl: 'agreement-checkbox.html',
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+
+    MatCheckboxModule,
+    MatCommonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-agreement-checkbox'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RcSesAgreementCheckboxComponent),
+      multi: true
+    }
+  ]
+})
+export class RcSesAgreementCheckboxComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
+  @ViewChild(FormControlDirective, {static: true})
+  formControlDirective: FormControlDirective | undefined;
+
+  @Input() formControl!: FormControl;
+  @Input() formControlName: string | undefined;
+
+  @Input() description: string = '';
+  @Input({ transform: booleanAttribute }) flat: 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() {}
+
+  ngAfterViewInit() {
+    this.initialized = true;
+  }
+
+  ngOnDestroy() {
+    this.initialized = false;
+  }
+}

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

@@ -0,0 +1,132 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+
+    .mat-mdc-checkbox {
+      --mdc-checkbox-selected-focus-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+      --mdc-checkbox-selected-hover-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+      --mdc-checkbox-selected-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+      --mdc-checkbox-unselected-hover-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+
+      &:not(.mat-mdc-checkbox-checked) {
+
+        .mdc-checkbox__background {
+          background-color: white !important;
+
+          &:after {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    .mdc-checkbox {
+
+      &:hover:not(.disabled) {
+
+        .mdc-checkbox__background {
+
+          &::before {
+            box-shadow: 0px 0px 0px 5px #{color.adjust(mat.get-theme-color($theme, primary, 60), $alpha: -0.8)};
+            border-radius: var(--mdc-outlined-text-field-container-shape);
+            content: "";
+            position: absolute;
+            height: 100%;
+            width: 100%;
+          }
+        }
+
+        &:active {
+
+          .mdc-checkbox__background {
+            background-color: mat.get-theme-color($theme, primary, 98) !important;
+
+            &::after {
+
+            }
+          }
+        }
+      }
+
+      &:focus:not(:hover) {
+        --mdc-checkbox-unselected-focus-icon-color: #{mat.get-theme-color($theme, neutral, 50)} !important;
+
+        .mdc-checkbox__background {
+          outline: 2px solid #{mat.get-theme-color($theme, neutral, 0)} !important;
+          outline-offset: 2px;
+        }
+      }
+
+      &__background {
+        border-radius: .25rem !important;
+        bottom: .5rem !important;
+        height: 1.5rem !important;
+        left: .5rem !important;
+        right: .5rem !important;
+        top: .5rem !important;
+        width: 1.5rem !important;
+
+        &::after {
+          content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="%23fff" 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;
+          border: unset !important;
+          height: 1rem !important;
+          position: absolute;
+          transform: none !important;
+          width: 1rem !important;
+        }
+
+        svg {
+          display: none;
+
+        }
+      }
+
+      &__ripple {
+        display: none !important;
+      }
+    }
+
+    .mat-pseudo-checkbox {
+      border-radius: .25rem !important;
+      height: 1.5rem !important;
+      width: 1.5rem !important;
+
+      &-full {
+        border-width: 2px;
+      }
+
+      &-checked {
+
+        &::after {
+          content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="%23fff" 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;
+          border: unset !important;
+          bottom: .125rem !important;
+          height: 1rem !important;
+          left: .125rem !important;
+          right: .125rem !important;
+          transform: none !important;
+          top: .125rem !important;
+          width: 1rem !important;
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root,
+    .cdk-overlay-container {
+      --mdc-checkbox-selected-focus-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+      --mdc-checkbox-selected-hover-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+      --mdc-checkbox-selected-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+
+      --mdc-checkbox-unselected-focus-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+      --mdc-checkbox-unselected-hover-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+      --mdc-checkbox-unselected-icon-color: #{mat.get-theme-color($theme, neutral, 50)};
+
+      --mat-full-pseudo-checkbox-selected-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+      --mat-full-pseudo-checkbox-unselected-icon-color: #{mat.get-theme-color($theme, neutral, 50)};
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .mat-datepicker-popup {
+
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      --mat-datepicker-calendar-container-background-color: white;
+      --mat-datepicker-calendar-container-elevation-shadow: 0px 4px 16px 0px #091e423d, 0px 8px 16px 0px #091e421a;
+      ;
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-input {
+      background-color: white;
+    }
+
+    .mdc-text-field--outlined {
+      padding-right: max(.75rem, var(--mdc-outlined-text-field-container-shape)) !important;
+      padding-left: max(.75rem, var(--mdc-outlined-text-field-container-shape) + 4px) !important;
+
+      &:not(.mdc-text-field--disabled):not(.mat-form-field--readonly) {
+
+        &.mdc-text-field--focused {
+
+          .mdc-notched-outline {
+
+            &::before {
+              box-shadow: 0px 0px 0px 3px #{color.adjust(mat.get-theme-color($theme, neutral, 20), $alpha: -0.8)};
+              border-radius: var(--mdc-outlined-text-field-container-shape);
+              content: "";
+              position: absolute;
+              height: 100%;
+              width: 100%;
+            }
+          }
+
+          &.mdc-text-field--invalid {
+
+            .mdc-notched-outline::before {
+              box-shadow: 0px 0px 0px 3px #{color.adjust(mat.get-theme-color($theme, error, 40), $alpha: -0.8)};
+            }
+          }
+        }
+
+        &:not(.mdc-text-field--focused) {
+
+          &:hover {
+
+            &.mdc-text-field--invalid {
+
+              .mdc-notched-outline .mat-mdc-notch-piece {
+                border-color: mat.get-theme-color($theme, error, 40) !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      --mdc-outlined-text-field-caret-color: #{mat.get-theme-color($theme, neutral, 20)};
+      --mdc-outlined-text-field-disabled-input-text-color: #{mat.get-theme-color($theme, neutral, 40)};
+      --mdc-outlined-text-field-disabled-outline-color: #{mat.get-theme-color($theme, neutral, 40)};
+      --mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color($theme, neutral, 20)};
+      --mdc-outlined-text-field-focus-outline-width: 2px;
+      --mdc-outlined-text-field-input-text-color: #{mat.get-theme-color($theme, neutral, 20)};
+      --mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($theme, neutral, 40)};
+      --mdc-outlined-text-field-outline-color: #{mat.get-theme-color($theme, neutral, 40)};
+    }
+  }
+}

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

@@ -0,0 +1,31 @@
+import { DOCUMENT } from "@angular/common";
+import { Directive, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2 } from "@angular/core";
+
+@Directive({
+  selector: '[rc-ses-input]',
+  standalone: true,
+  host: {
+    class: 'rc-ses-element rc-ses-input'
+  },
+})
+export class RcSesInputDirective implements AfterViewInit, OnDestroy, OnInit {
+  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/form/input/number-stepper/number-stepper.html

@@ -0,0 +1,30 @@
+<mat-form-field>
+  <button
+    mat-icon-button
+    matSuffix
+    (click)="add()"
+    [disabled]="control.disabled || !canAdd()"
+  >
+    <mat-icon>add</mat-icon>
+  </button>
+
+  <button
+    mat-icon-button
+    matSuffix
+    (click)="subtract()"
+    [disabled]="control.disabled || !canSubtract()"
+  >
+    <mat-icon>remove</mat-icon>
+  </button>
+
+  <input
+    rc-ses-input
+    matInput
+    type="number"
+    [formControl]="control"
+    [placeholder]="placeholder"
+    [min]="min"
+    [max]="max"
+    [step]="step"
+  />
+</mat-form-field>

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

@@ -0,0 +1,88 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-number-stepper {
+      --mat-icon-button-hover-state-layer-opacity: 0;
+      --mat-icon-button-state-layer-color: transparent;
+      --mdc-icon-button-state-layer-size: 42px;
+
+      input[type="number"] {
+        appearance: textfield;
+        -moz-appearance: textfield;
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+      }
+
+      .mat-mdc-form-field {
+        max-width: 300px;
+
+        &-has-icon-suffix {
+
+          .mat-mdc-text-field-wrapper {
+            padding-right: 0 !important;
+          }
+        }
+
+        &-icon-suffix {
+
+          .mat-mdc-icon-button {
+            width: 44px !important
+          }
+
+          .mdc-icon-button {
+            background-color: mat.get-theme-color($theme, neutral, 98) !important;
+            border-left: 1px solid var(--mdc-outlined-text-field-outline-color) !important;
+            border-radius: 0 !important;
+
+            &:last-of-type {
+              border-bottom-right-radius: .25rem !important;
+              border-top-right-radius: .25rem !important;
+              margin-right: 1px;
+            }
+
+            &:not(:disabled) {
+
+              &:hover {
+                background-color: mat.get-theme-color($theme, neutral, 95) !important;
+              }
+            }
+
+            .mat-mdc-button-persistent-ripple {
+              border-radius: 0 !important;
+            }
+          }
+        }
+      }
+
+      @at-root .rc-ses-number-stepper :hover {
+        // .mdc-icon-button {
+        //   border-bottom-color: mat.get-theme-color($theme, neutral, 20) !important;
+        //   border-top-color: mat.get-theme-color($theme, neutral, 20) !important;
+        // }
+      }
+
+      @at-root .mat-focused .mat-mdc-form-field-icon-suffix {
+        --mdc-icon-button-state-layer-size: 40px;
+
+        .mdc-icon-button {
+
+          &:last-of-type {
+            margin-right: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+    }
+  }
+}

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

@@ -0,0 +1,103 @@
+import { CommonModule, DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, Renderer2, Input, 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 { MatExpansionModule } from "@angular/material/expansion";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+
+@Component({
+  selector: 'rc-ses-number-stepper',
+  standalone: true,
+  templateUrl: 'number-stepper.html',
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+
+    MatButtonModule,
+    MatCommonModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-number-stepper'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => RcSesNumberStepperComponent),
+      multi: true
+    }
+  ]
+})
+export class RcSesNumberStepperComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
+  @ViewChild(FormControlDirective, {static: true})
+  formControlDirective: FormControlDirective | undefined;
+
+  @Input() formControl!: FormControl;
+  @Input() formControlName: string | undefined;
+
+  @Input() max: number = Number.MAX_SAFE_INTEGER;
+  @Input() min: number = 0;
+  @Input() placeholder: string = '';
+  @Input() step: number = 1;
+
+  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() {}
+
+  ngAfterViewInit() {
+    this.initialized = true;
+  }
+
+  ngOnDestroy() {
+    this.initialized = false;
+  }
+
+  add = () => this.control.setValue(
+    Math.min(this.max, (Math.max(this.min, Math.min(this.max, this.control.value)) ?? 0) + this.step)
+  );
+
+  subtract = () => this.control.setValue(
+    Math.max(this.min, (Math.min(this.max, Math.max(this.min, this.control.value)) ?? 0) - this.step)
+  );
+
+  canAdd = () => !this.control.value || (this.max > this.control.value);
+
+  canSubtract = () => !this.control.value || (this.control.value > this.min);
+}

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

@@ -0,0 +1,85 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .mat-mdc-radio {
+
+      &-button {
+        --mat-radio-checked-ripple-color: #{color.adjust(mat.get-theme-color($theme, primary, 60), $alpha: -0.8)};
+        --mat-radio-ripple-color: #{color.adjust(mat.get-theme-color($theme, primary, 60), $alpha: -0.8)};
+
+        --mdc-radio-selected-focus-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+        --mdc-radio-selected-hover-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+        --mdc-radio-selected-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+        --mdc-radio-selected-pressed-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+
+        --mdc-radio-unselected-hover-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+        --mdc-radio-unselected-focus-icon-color: #{mat.get-theme-color($theme, neutral, 50)};
+        --mdc-radio-unselected-icon-color: #{mat.get-theme-color($theme, neutral, 50)};
+        --mdc-radio-unselected-pressed-icon-color: #{mat.get-theme-color($theme, primary, 50)};
+
+        .mdc-radio {
+
+          &__outer-circle {
+            background-color: white;
+          }
+
+          &__inner-circle {
+            // border-width: 5px !important;
+          }
+
+          &__background {
+
+            &::before {
+              height: 28px !important;
+              left: -.25rem !important;
+              top: -.25rem !important;
+              opacity: 1 !important;
+              width: 28px !important;
+            }
+          }
+
+          &__native-control {
+
+            &:focus:not(:hover):not(:checked) + .mdc-radio__background::before {
+              opacity: 0 !important;
+            }
+
+            &:checked {
+
+              & + .mdc-radio__background  {
+
+                .mdc-radio__inner-circle {
+                  border-width: 5px !important;
+                  transform: scale(1) !important;
+                }
+              }
+            }
+
+            &:active {
+
+              & + .mdc-radio__background  {
+
+                .mdc-radio__outer-circle {
+                  background-color: mat.get-theme-color($theme, neutral, 98);
+                }
+              }
+            }
+          }
+        }
+
+        .mdc-label {
+          margin-left: -.125rem !important;
+          padding-left: 0 !important;
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      --mdc-radio-state-layer-size: 40px;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+<mat-radio-group [formControl]="control">
+  @for (option of options; track option.value) {
+    <mat-radio-button [value]="option.value">
+      {{ option.label }}
+    </mat-radio-button>
+  }
+</mat-radio-group>