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

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

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

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

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

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

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

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

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

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

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

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