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

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

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

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

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

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

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

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

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

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

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

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