af-connect-components 0.0.25 → 0.0.26

package/projects/af-connect-components/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "af-connect-components",
+  "version": "0.0.26",
+  "peerDependencies": {
+    "@angular/common": "^15.0.0",
+    "@angular/core": "^15.0.0",
+    "node-sass": "^8.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-breadcrumb/af-connect-breadcrumb.component.html

@@ -0,0 +1,13 @@
+<div class="breadcrumb-wrapper">
+    <div class="breadcrumb-container">
+      <div class="home-icon-container" (click)="goToDashboard()">
+        <lib-af-connect-svg-button [customSize]="24" src="../../../assets/icons/home.svg" emitValue="isCloseModal"></lib-af-connect-svg-button>
+      </div>
+      <div class="titles-container">
+        <div class="home-title" (click)="goToDashboard()">Home</div>
+        <afc-expandable-arrow></afc-expandable-arrow>
+        <div class="current-title">{{ currentPage }}</div>
+      </div>
+    </div>
+  </div>
+  

package/projects/af-connect-components/src/lib/af-connect-breadcrumb/af-connect-breadcrumb.component.scss

@@ -0,0 +1,50 @@
+@import '../../styles/breakpoints.scss';
+
+.breadcrumb-wrapper {
+  padding: 2rem 0;
+
+  @include media(mobileBreakPointTreshold) {
+    padding: 12px 6px;
+  }
+}
+
+.breadcrumb-container {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem;
+  background: var(--main-white-color);
+  border-radius: 22px;
+  gap: 14px;
+}
+
+.home-icon-container {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  background-color: var(--breadcrumb-background-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 16px;
+}
+
+.titles-container {
+  display: flex;
+  gap: 1rem;
+  font-size: 14px;
+  justify-content: space-between;
+  align-items: center;
+
+  @include media(mobileBreakPointTreshold) {
+    gap: 0.5rem;
+  }
+}
+
+.current-title {
+  color: var(--primary-dark-teal-color);
+  margin-right: 0.375rem;
+}
+
+.home-title {
+  cursor: pointer;
+}

package/projects/af-connect-components/src/lib/af-connect-breadcrumb/af-connect-breadcrumb.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AfConnectBreadcrumbComponent } from './af-connect-breadcrumb.component';
+
+describe('AfConnectBreadcrumbComponent', () => {
+  let component: AfConnectBreadcrumbComponent;
+  let fixture: ComponentFixture<AfConnectBreadcrumbComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AfConnectBreadcrumbComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AfConnectBreadcrumbComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-breadcrumb/af-connect-breadcrumb.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'lib-af-connect-breadcrumb',
+  templateUrl: './af-connect-breadcrumb.component.html',
+  styleUrls: ['./af-connect-breadcrumb.component.scss']
+})
+export class AfConnectBreadcrumbComponent {
+  @Input() currentPage: string;
+
+  public goToDashboard() {
+    // this.router.navigate(['/dashboard']);
+  }
+
+  constructor(private router: Router) {}
+}

package/projects/af-connect-components/src/lib/af-connect-button/af-connect-button.component.html

@@ -0,0 +1,25 @@
+<button
+  [class.hybrid]="hybrid"
+  [ngClass]="[
+    fullWidth ? 'fullWidth' : '', 'button',
+    size,
+    variant,
+    activeItem === title || isActive ? 'active' : '',
+    iconPosition
+  ]"
+  title=""
+  [disabled]="disabled"
+  (click)="this.clickBtn.emit(emitValue || title)"
+>
+  <!-- TODO: Templates -->
+  <div
+    *ngIf="iconSrc"
+    [ngStyle]="{
+      '-webkit-mask-image': 'url(' + iconSrc + ')',
+      'width': iconSize + 'px'
+    }"
+    class="icon"
+  >
+  </div>
+  <span [class]="['title', size, variant]">{{ title }}</span>
+</button>

package/projects/af-connect-components/src/lib/af-connect-button/af-connect-button.component.scss

@@ -0,0 +1,306 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+  display: flex;
+  justify-content: center;
+  width: auto;
+}
+
+:host(.align-right) {
+  justify-content: flex-end;
+}
+
+:host(.align-left) {
+  justify-content: flex-start;
+}
+
+:host(.full-width) {
+  .button {
+    width: 100%;
+  }
+}
+
+:host(.register-button) {
+  .button {
+    color: var(--main-white-color);
+    border-color: var(--main-white-color);
+  }
+}
+
+@mixin link-styles {
+  color: var(--primary-connected-orange-color);
+  background: none;
+  border: none;
+  padding: 0px;
+  height: fit-content;
+  width: auto;
+  display: block;
+
+  &:disabled {
+    color: var(--neutral-anchor-color);
+  }
+
+  &:hover:not(:disabled),
+  &:disabled {
+    background: transparent;
+  }
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  border-radius: 30px;
+  font-size: 0.8rem;
+  padding: 0px 10px;
+  background-color: var(--transparent-color);
+  color: var(--primary-connected-orange-color);
+  border: solid 1px var(--primary-connected-orange-color);
+
+  &:disabled {
+    border-color: var(--neutral-anchor-color);
+    color: var(--neutral-anchor-color);
+    cursor: auto;
+    .icon {
+      background: var(--neutral-anchor-color);
+    }
+  }
+
+  &.small {
+    width: 8.4rem;
+    height: 2rem;
+  }
+
+  &.dynamic {
+    width: 100%;
+    height: 2rem;
+  }
+
+  &.medium {
+    width: 8.875rem;
+    height: 2.6rem;
+
+    @include media(tabletTreshold) {
+      height: 2.1rem;
+    }
+  }
+
+  &.large {
+    width: 12rem;
+    height: 2.6rem;
+
+    @include media(tabletTreshold) {
+      min-width: 8.5rem;
+      height: 2.3rem;
+      font-size: 12px;
+    }
+  }
+
+  &.x-large {
+    width: 22rem;
+    height: 3.1875rem;
+    font-size: 1.375rem;
+
+    @include media(tabletTreshold) {
+      width: 11.8rem;
+      height: 2.5rem;
+      font-size: 1rem;
+    }
+  }
+  
+  &.block {
+    width: 22rem;
+    font-size: 1rem;
+    height: 3rem;
+
+    @include media(tabletTreshold) {
+      width: 11.8rem;
+      height: 2.5rem;
+    }
+  }
+
+  &.filled {
+    color: var(--main-white-color);
+    background-color: var(--primary-connected-orange-color);
+    &:hover:not(:disabled) {
+      background: var(--primary-catalyst-yellow-color) 0% 0% no-repeat padding-box;
+      border-color: var(--primary-catalyst-yellow-color);
+    }
+    &:disabled {
+      background-color: var(--neutral-button-color);
+      color: var(--neutral-anchor-color);
+      border-color: var(--neutral-button-color);
+    }
+  }
+
+  &.transparent {
+    color: var(--main-white-color);
+    border: solid 1px var(--main-white-color);
+  }
+
+  &.cancel {
+    color: var(--neutral-anchor-color);
+    background: var(--neutral-button-color);
+    border: none;
+  }
+
+  &.link {
+    @include link-styles;
+  }
+
+  &.hybrid {
+    @include media(mobileBreakPointTreshold) {
+      @include link-styles;
+      .icon {
+        display: none;
+      }
+    }
+  }
+
+  &.fullWidth {
+    width: 100%;
+  }
+
+  &.greyish {
+    padding: 10px 8px;
+    color: var(--main-black-color);
+    background: var(--neutral-button-color);
+    border: none;
+    font-family: var(--standard-font-family-hero-new);
+    font-size: 0.875rem;
+    width: 6.25rem;
+    height: 2.35rem;
+    transition: background-color 125ms ease-in-out;
+    > .title {
+      white-space: nowrap;
+      font-family: var(--standard-font-family-hero-new);
+      font-size: 14px;
+    }
+
+    &.small {
+      height: 2rem;
+      width: 5.5rem;
+
+      @include media(mobileBreakPointTreshold) {
+        min-width: auto;
+        max-width: 4.8rem;
+      }
+    }
+
+    &.active {
+      background-color: var(--primary-balanced-teal-color);
+      color: var(--main-white-color);
+    }
+
+    @include media(mobileBreakPointTreshold) {
+      min-width: 100%;
+      width: auto;
+      max-height: 2rem;
+      padding: 0;
+    }
+  }
+
+  &.start {
+    flex-direction: row;
+  }
+
+  &.end {
+    flex-direction: row-reverse;
+  }
+}
+
+.mat-button-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.icon {
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  mask-position: center;
+  aspect-ratio: 1;
+  background: var(--primary-connected-orange-color);
+}
+
+.filled .icon {
+  background: var(--main-white-color);
+}
+
+.title {
+  font-family: var(--standard-font-family-hero-new-bold);
+  font-size: 14px;
+
+  &.small,
+  &.dynamic {
+    font-size: 12px;
+  }
+
+  &.medium {
+    font-size: 14px;
+  }
+
+  &.x-large {
+    font-size: 1.375rem;
+    font-family: var(--standard-font-family-hero-new);
+  }
+
+  &.link {
+    font-family: var(--standard-font-family-hero-new-semibold);
+  }
+
+  @include media(tabletTreshold) {
+    font-size: 0.75rem;
+
+    &.x-large {
+      font-size: 1rem;
+    }
+  }
+
+  @include media(mobileBreakPointTreshold) {
+    &.large {
+      font-family: var(--standard-font-family-hero-new-semibold);
+    }
+  }
+}
+
+:host(.bold) {
+  .title {
+    font-family: var(--standard-font-family-hero-new-semibold);
+  }
+}
+
+:host(.filter) {
+  .button {
+    &.small {
+      min-height: 32px;
+    }
+  }
+
+  .title {
+    font-size: 1rem;
+    font-family: var(--standard-font-family-hero-new-semibold);
+
+    @include media(mobileBreakPointTreshold) {
+      font-size: 14px;
+    }
+  }
+
+  .button {
+    max-width: 6.5rem;
+
+    @include media(mobileBreakPointTreshold) {
+      max-width: 4.5rem;
+      max-height: 1.75rem;
+    }
+  }
+}
+
+:host(.auto-width) {
+  width: auto;
+}
+
+:host(.full-width) {
+  width: 100%;
+}

package/projects/af-connect-components/src/lib/af-connect-button/af-connect-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AfConnectButtonComponent } from './af-connect-button.component';
+
+describe('AfConnectButtonComponent', () => {
+  let component: AfConnectButtonComponent;
+  let fixture: ComponentFixture<AfConnectButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AfConnectButtonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AfConnectButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-button/af-connect-button.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { EmitValue } from '../constants/base.constants';
+
+@Component({
+  selector: 'lib-af-connect-button',
+  templateUrl: './af-connect-button.component.html',
+  styleUrls: ['./af-connect-button.component.scss']
+})
+export class AfConnectButtonComponent {
+  @Input() isActive: boolean;
+  @Input() emitValue: EmitValue;
+  @Input() title = '';
+  @Input() disabled: boolean;
+  @Input() hybrid: boolean;
+  @Input() fullWidth: boolean;
+  @Input() size: 'small' | 'medium' | 'large' | 'x-large' | 'block' | 'dynamic' = 'small';
+  @Input() variant: 'outlined' | 'filled' | 'transparent' | 'link' | 'cancel' | 'greyish' = 'outlined';
+  @Input() iconSrc: string;
+  @Input() iconSize = 14;
+  @Input() iconPosition: 'start' | 'end' = 'start';
+  @Input() activeItem: string;
+  @Output() clickBtn = new EventEmitter<string>();
+
+  ngOnInit(): void {}
+}

package/projects/af-connect-components/src/lib/af-connect-card/af-connect-card-header/af-connect-card-header.component.html

@@ -0,0 +1,20 @@
+<div [class]="['card-header', variant]" (click)="toggleMobileContent()">
+    <div class="title-container">
+      <div class="inner-title-container">
+        <div class="heading-container">
+          <span>{{ title }}</span>
+          <ng-content select="[headingChip]"></ng-content>
+        </div>
+        <div class="chip-container">
+          <ng-content select="[chip]"></ng-content>
+        </div>
+      </div>
+      <div class="subtitle" [class]="[subtitleColor]">{{ subTitle }}</div>
+    </div>
+    <div class="buttons-container">
+      <ng-content></ng-content>
+    </div>
+  </div>
+  
+  <div *ngIf="!hideBorderLine" [class]="['border-line', variant]"></div>
+