@registrucentras/rc-ses-angular-components 0.2.0

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

@@ -0,0 +1,248 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-button {
+
+      &:not(:disabled):not(.disabled) {
+
+        &:hover {
+          .mat-mdc-button-persistent-ripple::before {
+            background-color: mat.get-theme-color($theme, primary, 90) !important;
+          }
+        }
+
+        &:active {
+          .mat-mdc-button-persistent-ripple::before {
+            background-color: mat.get-theme-color($theme, primary, 70) !important;
+          }
+        }
+
+        &:focus:not(:hover) {
+          outline: 2px solid #{mat.get-theme-color($theme, neutral, 0)} !important;
+          outline-offset: 2px;
+
+          .mat-mdc-button-persistent-ripple::before {
+            background-color: mat.get-theme-color($theme, primary, 90) !important;
+          }
+        }
+
+        .mat-mdc-button-touch-target {
+          height: var(--mdc-text-button-container-height) !important;
+        }
+
+        /*
+         * TEXT ONLY
+         */
+        &.mat-mdc-button {
+
+          &:hover {
+            background-color: mat.get-theme-color($theme, primary, 98) !important;
+            color: mat.get-theme-color($theme, primary, 30) !important;
+          }
+
+          &:active {
+            background-color: mat.get-theme-color($theme, primary, 95) !important;
+            color: mat.get-theme-color($theme, primary, 20) !important;
+          }
+        }
+
+        &.mat-mdc-outlined-button {
+          background-color: white !important;
+          color: mat.get-theme-color($theme, primary, 40) !important;
+
+          .mat-mdc-button-touch-target {
+            height: var(--mdc-outlined-button-container-height) !important;
+          }
+
+          .mat-mdc-button-persistent-ripple {
+            display: none !important;
+          }
+
+          &:hover {
+            background-color: mat.get-theme-color($theme, primary, 100) !important;
+            color: mat.get-theme-color($theme, primary, 30) !important;
+          }
+
+          &:active {
+            background-color: mat.get-theme-color($theme, primary, 98) !important;
+            color: mat.get-theme-color($theme, primary, 30) !important;
+          }
+        }
+
+        /*
+         * SECONDARY
+         */
+        &.mat-secondary {
+          background-color: mat.get-theme-color($theme, secondary, 95) !important;
+          color: mat.get-theme-color($theme, secondary, 10) !important;
+
+          &:hover {
+            .mat-mdc-button-persistent-ripple::before {
+              background-color: mat.get-theme-color($theme, secondary, 90) !important;
+            }
+          }
+
+          &:active {
+            .mat-mdc-button-persistent-ripple::before {
+              background-color: mat.get-theme-color($theme, secondary, 90) !important;
+            }
+          }
+
+          &.mat-mdc-outlined-button {
+            background-color: white !important;
+            border-color: mat.get-theme-color($theme, secondary, 30) !important;
+            color: mat.get-theme-color($theme, secondary, 30) !important;
+
+            &:hover {
+              background-color: mat.get-theme-color($theme, secondary, 99) !important;
+            }
+
+            &:active {
+              background-color: mat.get-theme-color($theme, secondary, 98) !important;
+            }
+          }
+        }
+
+        /*
+         * TERTIARY
+         */
+        &.mat-neutral {
+          color: mat.get-theme-color($theme, neutral, 20) !important;
+
+          &:hover {
+            .mat-mdc-button-persistent-ripple::before {
+              background-color: mat.get-theme-color($theme, neutral, 95) !important;
+            }
+          }
+
+          &:active {
+            .mat-mdc-button-persistent-ripple::before {
+              background-color: mat.get-theme-color($theme, neutral, 90) !important;
+            }
+          }
+
+          &.mat-mdc-unelevated-button {
+            background-color: mat.get-theme-color($theme, neutral, 98) !important;
+
+            &:hover {
+              .mat-mdc-button-persistent-ripple::before {
+                background-color: mat.get-theme-color($theme, neutral, 95) !important;
+              }
+            }
+
+            &:active {
+              .mat-mdc-button-persistent-ripple::before {
+                background-color: mat.get-theme-color($theme, neutral, 90) !important;
+              }
+            }
+          }
+
+          &.mat-mdc-outlined-button {
+            background-color: white !important;
+            border-color: mat.get-theme-color($theme, neutral, 40) !important;
+            color: mat.get-theme-color($theme, neutral, 20) !important;
+
+            &:hover {
+              background-color: mat.get-theme-color($theme, neutral, 25) !important;
+              color: white !important;
+            }
+
+            &:active {
+              background-color: mat.get-theme-color($theme, neutral, 20) !important;
+              color: white !important;
+            }
+          }
+        }
+
+        /*
+         * DARK
+         */
+        &.mat-dark {
+          background-color: mat.get-theme-color($theme, neutral, 20) !important;
+          color: white !important;
+
+          &:hover {
+            .mat-mdc-button-persistent-ripple::before {
+              background-color: mat.get-theme-color($theme, neutral, 25) !important;
+            }
+          }
+
+          &:active {
+            .mat-mdc-button-persistent-ripple::before {
+              background-color: mat.get-theme-color($theme, neutral, 30) !important;
+            }
+          }
+        }
+
+        /*
+         * DANGER
+         */
+        &.mat-danger {
+          background-color: mat.get-theme-color($theme, error, 98) !important;
+          color: mat.get-theme-color($theme, error, 30) !important;
+
+          &:hover {
+            .mat-mdc-button-persistent-ripple::before {
+              background-color: mat.get-theme-color($theme, error, 90) !important;
+            }
+          }
+
+          &:active {
+            .mat-mdc-button-persistent-ripple::before {
+              background-color: mat.get-theme-color($theme, error, 80) !important;
+            }
+          }
+
+          &:focus:not(:hover) {
+            outline-color: #{mat.get-theme-color($theme, error, 30)} !important;
+          }
+        }
+      }
+
+      &.mat-danger {
+        &.disabled,
+        &:disabled {
+          background-color: mat.get-theme-color($theme, error, 100) !important;
+          color: mat.get-theme-color($theme, error, 90) !important;
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      --mdc-text-button-container-shape: .1875rem;
+      --mdc-text-button-container-height: 2.75rem;
+      --mdc-text-button-label-text-size: #{map-get($typography, 'body-2', 'font-size')};
+
+      --mdc-filled-button-container-color: #{mat.get-theme-color($theme, primary, 95)};
+      --mdc-filled-button-container-height: 2.75rem;
+      --mdc-filled-button-container-shape: .1875rem;
+      --mdc-filled-button-disabled-label-text-color: #{mat.get-theme-color($theme, neutral, 50)};
+      --mdc-filled-button-disabled-container-color: #{mat.get-theme-color($theme, neutral, 98)};
+      --mat-filled-button-horizontal-padding: 1.25rem;
+      --mdc-filled-button-label-text-weight: 600;
+      --mat-filled-button-hover-state-layer-opacity: 1;
+      --mdc-filled-button-label-text-color: #{mat.get-theme-color($theme, primary, 0)};
+      --mat-filled-button-pressed-state-layer-opacity: 1;
+      --mat-filled-button-state-layer-color: 0;
+      --mdc-filled-button-label-text-size: #{map-get($typography, 'body-2', 'font-size')};
+
+      --mdc-outlined-button-container-color: white;
+      --mdc-outlined-button-container-height: 2.75rem;
+      --mdc-outlined-button-container-shape: .1875rem;
+      --mdc-outlined-button-disabled-label-text-color: #{mat.get-theme-color($theme, neutral, 70)};
+      --mdc-outlined-button-disabled-container-color: #{mat.get-theme-color($theme, neutral, 90)};
+      --mat-outlined-button-horizontal-padding: 1.25rem;
+      --mat-outlined-button-hover-state-layer-opacity: 1;
+      --mdc-outlined-button-label-text-size: #{map-get($typography, 'body-2', 'font-size')};
+      --mdc-outlined-button-label-text-color: #{mat.get-theme-color($theme, primary, 40)};
+      --mdc-outlined-button-label-text-weight: 600;
+      --mdc-outlined-button-outline-color: #{mat.get-theme-color($theme, primary, 40)};
+      --mat-outlined-button-pressed-state-layer-opacity: 1;
+      --mat-outlined-button-state-layer-color: 0;
+
+    }
+  }
+}

package/projects/rc-ses/angular-components/src/lib/components/button/button.spec.ts

@@ -0,0 +1,46 @@
+import { RcSesButtonDirective } from "./button";
+import { ElementRef } from "@angular/core";
+
+describe("RcSesButtonDirective", () => {
+  it("removes mat-ripple attributes on init", () => {
+    const buttonEl = document.createElement("button");
+    buttonEl.setAttribute("mat-ripple-loader-class-name", "loader");
+    buttonEl.setAttribute("mat-ripple-loader-uninitialized", "true");
+
+    const renderer = {
+      removeAttribute: (el: HTMLElement, name: string) => el.removeAttribute(name),
+    } as any;
+
+    const directive = new RcSesButtonDirective(
+      document,
+      new ElementRef(buttonEl),
+      renderer,
+    );
+
+    directive.ngOnInit();
+
+    expect(buttonEl.hasAttribute("mat-ripple-loader-class-name")).toBeFalse();
+    expect(buttonEl.hasAttribute("mat-ripple-loader-uninitialized")).toBeFalse();
+  });
+
+  it("toggles initialized flag on lifecycle", () => {
+    const buttonEl = document.createElement("button");
+    const renderer = {
+      removeAttribute: (el: HTMLElement, name: string) => el.removeAttribute(name),
+    } as any;
+
+    const directive = new RcSesButtonDirective(
+      document,
+      new ElementRef(buttonEl),
+      renderer,
+    );
+
+    expect(directive.initialized).toBeUndefined();
+
+    directive.ngAfterViewInit();
+    expect(directive.initialized).toBeTrue();
+
+    directive.ngOnDestroy();
+    expect(directive.initialized).toBeFalse();
+  });
+});

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

@@ -0,0 +1,34 @@
+import { DOCUMENT } from "@angular/common";
+import { Directive, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, Input } from "@angular/core";
+
+@Directive({
+  selector: '[rc-ses-button]',
+  standalone: true,
+  host: {
+    class: 'rc-ses-element rc-ses-button'
+  },
+})
+export class RcSesButtonDirective implements AfterViewInit, OnDestroy, OnInit {
+  @Input() color: "primary" | "secondary" | "neutral" | "dark" | "danger" = "primary";
+
+  public initialized: boolean | undefined;
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    public _el: ElementRef,
+    private _renderer: Renderer2,
+  ) {}
+
+  ngOnInit() {
+    this._renderer.removeAttribute(this._el.nativeElement, 'mat-ripple-loader-class-name');
+    this._renderer.removeAttribute(this._el.nativeElement, 'mat-ripple-loader-uninitialized');
+  }
+
+  ngAfterViewInit() {
+    this.initialized = true;
+  }
+
+  ngOnDestroy() {
+    this.initialized = false;
+  }
+}

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

@@ -0,0 +1,18 @@
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-divider {
+
+      .mat-divider {
+        margin: 2rem 0 !important;
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      --mat-divider-color: #{mat.get-theme-color($theme, neutral, 95)};
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import { Component } from "@angular/core";
+import { MatDividerModule } from "@angular/material/divider";
+
+@Component({
+  selector: 'rc-ses-divider',
+  standalone: true,
+  imports: [
+    MatDividerModule,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-divider',
+  },
+  template: `<mat-divider />`,
+})
+export class RcSesDividerComponent {
+}

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

@@ -0,0 +1,11 @@
+@if(label) {
+  <mat-label #matLabel class="rc-ses-label">
+    {{ label }}:
+    @if(labelSubtitle) {
+      <div class="rc-ses-label-subtitle">{{ labelSubtitle }}</div>
+    }
+  </mat-label>
+}
+<div class="rc-ses-form-field__input-wrapper">
+  <ng-content />
+</div>

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

@@ -0,0 +1,149 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@layer rc-ses {
+  :host {
+    align-items: flex-start;
+    display: flex;
+
+    &.rc-ses-has-label-subtitle {
+      align-items: center;
+
+      .rc-ses-label {
+        margin-top: 0 !important;
+      }
+    }
+  }
+}
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+
+    .rc-ses-form-field {
+      margin-bottom: 1rem;
+
+      .rc-ses-label {
+        color: mat.get-theme-color($theme, neutral, 0);
+        flex: 0 0 243px;
+        font-size: map-get($typography, 'body-2', 'font-size');
+        font-weight: 500;
+        line-height: 1.125rem;
+        margin-right: 1.5rem;
+        margin-top: .75rem;
+        text-align: right;
+        width: 243px;
+
+        .rc-ses-label-subtitle {
+          color: mat.get-theme-color($theme, neutral, 30);
+          font-size: .75rem;
+          font-style: italic;
+          font-weight: 500;
+          line-height: 1rem;
+          margin-top: .125rem;
+        }
+      }
+
+      .rc-ses-form-field__input-wrapper {
+        flex-grow: 1;
+      }
+
+      .mat-form-field {
+
+        &-appearance-fill {
+          background-color: transparent !important;
+
+          .mat-mdc-text-field-wrapper,
+          .mat-mdc-form-field-focus-overlay {
+            background-color: transparent !important;
+          }
+
+          .mdc-line-ripple {
+            display: none !important;
+          }
+        }
+      }
+
+      .mat-mdc-form-field {
+        width: 100%;
+
+        &:not(:disabled):not(.mat-form-field-disabled):not(.mat-form-field--readonly) {
+
+          &:not(.mat-form-field-invalid):hover {
+
+           .mat-mdc-notch-piece {
+              border-color: mat.get-theme-color($theme, neutral, 20) !important;
+            }
+          }
+        }
+
+        &-disabled {
+          background-color: mat.get-theme-color($theme, neutral, 98) !important;
+        }
+
+
+        &--readonly {
+
+          .mat-mdc-notch-piece,
+          &:active .mat-mdc-notch-piece,
+          &:hover .mat-mdc-notch-piece,
+          &:focus .mat-mdc-notch-piece {
+            border-color: mat.get-theme-color($theme, neutral, 40) !important;
+          }
+
+          .mat-mdc-input-element {
+            color: mat.get-theme-color($theme, neutral, 20) !important;
+          }
+
+          .mdc-notched-outline {
+
+            &::before {
+              content: unset !important;
+            }
+
+            .mat-mdc-notch-piece {
+              border-color: mat.get-theme-color($theme, neutral, 40) !important;
+              border-width: 1px !important;
+            }
+          }
+        }
+
+        &-hint {
+          display: block;
+          font-size: .875rem;
+          line-height: 1.125rem;
+          padding-top: .625rem;
+        }
+
+        &-hint-wrapper,
+        &-error-wrapper {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
+      }
+
+      &--contains {
+
+        &--agreement-checkbox-component,
+        &--radio-button-group-component {
+          align-items: center !important;
+
+          .rc-ses-label {
+            margin-top: 0;
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+      --mat-form-field-container-height: 2.75rem;
+      --mat-form-field-container-text-line-height: 1.125rem;
+      --mat-form-field-container-text-size: #{map-get($typography, 'body-2', 'font-size')};
+      --mat-form-field-container-vertical-padding: .8125rem;
+
+      --mat-form-field-subscript-text-line-height: 1rem;
+      --mat-form-field-subscript-text-size: .8125rem;
+    }
+  }
+}

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

@@ -0,0 +1,87 @@
+import { CommonModule, DOCUMENT } from "@angular/common";
+import { Component, AfterViewInit, OnDestroy, ElementRef, Inject, OnInit, Renderer2, Input, ContentChild, AfterContentInit, ViewChild } from "@angular/core";
+import { ControlContainer, FormGroupDirective, FormsModule } from "@angular/forms";
+import { MatError, MatFormField, MatFormFieldControl, MatFormFieldModule, MatLabel } from "@angular/material/form-field";
+import { MatInput, MatInputModule } from "@angular/material/input";
+import { MatIconModule } from "@angular/material/icon";
+import { MatButtonModule } from "@angular/material/button";
+import { RcSesInputDirective } from "../input/input/input";
+import { RcSesAgreementCheckboxComponent } from "../input/agreement-checkbox/agreement-checkbox";
+import { RcSesRadioButtonGroupComponent } from "../input/radio-button-group/radio-button-group";
+
+@Component({
+  selector: 'rc-ses-form-field',
+  standalone: true,
+  templateUrl: './form-field.html',
+  styleUrl: './form-field.scss',
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatError,
+    RcSesInputDirective,
+  ],
+  host: {
+    class: 'rc-ses-element rc-ses-form-field'
+  },
+  viewProviders: [
+    { provide: ControlContainer, useExisting: FormGroupDirective }
+  ],
+})
+export class RcSesFormFieldComponent implements AfterViewInit, AfterContentInit, OnDestroy, OnInit {
+  @ContentChild(MatFormFieldControl) control!: MatFormFieldControl<any>;
+
+  @ContentChild(MatFormField, { read: ElementRef}) formFieldRef!: ElementRef<MatFormField>;
+  @ContentChild(MatFormField) formField!: MatFormField;
+
+  @ContentChild(MatInput, { read: ElementRef}) inputRef!: ElementRef<MatInput>;
+  @ContentChild(MatInput) input!: MatInput;
+
+  @ContentChild(RcSesAgreementCheckboxComponent, { read: ElementRef })
+  rcSesAgreementCheckboxComponent: RcSesAgreementCheckboxComponent | undefined = undefined;
+
+  @ContentChild(RcSesRadioButtonGroupComponent, { read: ElementRef })
+  rcSesRadioButtonGroupComponent: RcSesRadioButtonGroupComponent | undefined = undefined;
+
+  @ViewChild(MatLabel, { read: ElementRef }) labelComponent: MatLabel | undefined;
+
+  @Input() label: string | undefined = undefined;
+  @Input() labelSubtitle: string | undefined = undefined;
+
+  public initialized: boolean = false;
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    public _element: ElementRef,
+    private _renderer: Renderer2,
+  ) {}
+
+  ngOnInit() {
+    if (this.labelSubtitle)
+      this._renderer.addClass(this._element.nativeElement, 'rc-ses-has-label-subtitle');
+  }
+
+  ngAfterViewInit() {}
+
+  ngAfterContentInit(): void {
+    if (this.input?.readonly) {
+      this._renderer.addClass(this.formField._elementRef.nativeElement, 'mat-form-field-readonly');
+      this._renderer.addClass(this.formFieldRef.nativeElement, 'mat-form-field--readonly');
+    }
+
+    if (this.rcSesAgreementCheckboxComponent)
+      this._renderer.addClass(this._element.nativeElement, 'rc-ses-form-field--contains--agreement-checkbox-component');
+
+    if (this.rcSesRadioButtonGroupComponent)
+      this._renderer.addClass(this._element.nativeElement, 'rc-ses-form-field--contains--radio-button-group-component');
+
+    this.initialized = true;
+  }
+
+  ngOnDestroy() {
+    this.initialized = false;
+  }
+}

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

@@ -0,0 +1,10 @@
+<mat-form-field [appearance]="flat ? 'fill' : 'outline'">
+  <input hidden="true" matInput style="display: none;" />
+  <mat-checkbox
+    type="checkbox"
+    [formControl]="control"
+  >
+    {{ description }}
+    <ng-content />
+  </mat-checkbox>
+</mat-form-field>

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

@@ -0,0 +1,36 @@
+@use 'sass:color';
+@use '@angular/material' as mat;
+
+@mixin bootstrap($theme, $typography) {
+  @layer rc-ses {
+    .rc-ses-agreement-checkbox {
+      flex-grow: 1;
+
+      b, strong {
+        font-weight: 600;
+      }
+
+      .mat-mdc-form-field {
+        background-color: mat.get-theme-color($theme, neutral, 99);
+        display: block !important;
+      }
+
+      .mat-form-field {
+
+        &-appearance-fill {
+
+          .mat-internal-form-field {
+            --mat-checkbox-label-text-size: #{map-get($typography, 'body-2', 'font-size')};
+            line-height: 1.3125rem;
+          }
+        }
+      }
+    }
+  }
+
+  @layer rc-ses-variables {
+    :root {
+
+    }
+  }
+}