af-connect-components 0.0.26 → 0.0.28

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

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

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

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

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

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

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

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

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

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

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