carriera-intern 0.0.0 → 1.1.76

package/projects/carriera-intern-components/src/app/components/avatar/avatar.component.scss

@@ -1,414 +0,0 @@
-@use "sass:map";
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
-}
-
-p,
-ul,
-ol,
-dl,
-blockquote,
-figure,
-pre {
-  margin: 0;
-}
-
-button,
-input,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
-  max-width: 100%;
-  height: auto;
-}
-
-/* Remove default list styles on ul, ol */
-ul,
-ol {
-  padding-left: 1.5rem;
-  list-style-position: outside;
-}
-
-/* Link styles */
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/* Tables */
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-/* Remove outline for focus on mouse users, but keep it for keyboard */
-:focus:not(:focus-visible) {
-  outline: none;
-}
-
-// Color theme map
-$avatar-colors: (
-  "blue": (
-    "background": #b7b6f1,
-    "text": #2724d6,
-    "aliases": (
-      "navy",
-    ),
-  ),
-  "green": (
-    "background": #b6dfdb,
-    "text": #259f94,
-    "aliases": (),
-  ),
-  "red": (
-    "background": #f4bebe,
-    "text": #df3c3c,
-    "aliases": (),
-  ),
-  "yellow": (
-    "background": #fddeb9,
-    "text": #f89b2e,
-    "aliases": (),
-  ),
-  "purple": (
-    "background": #dfc2f9,
-    "text": #9e47ec,
-    "aliases": (
-      "magenta",
-    ),
-  ),
-  "gold": (
-    "background": #efdcb4,
-    "text": #cf961d,
-    "aliases": (),
-  ),
-  "light-green": (
-    "background": #c5e3b6,
-    "text": #50ac25,
-    "aliases": (
-      "lime",
-    ),
-  ),
-  "orange": (
-    "background": #ffcfc0,
-    "text": #ff7043,
-    "aliases": (),
-  ),
-  "light-blue": (
-    "background": #b2e6f7,
-    "text": #1ab5e6,
-    "aliases": (
-      "azure",
-    ),
-  ),
-  "pink": (
-    "background": #f4bed6,
-    "text": #df3d85,
-    "aliases": (),
-  ),
-  "brown": (
-    "background": #d6c9bd,
-    "text": #865e3a,
-    "aliases": (),
-  ),
-  "gray": (
-    "background": #dadada,
-    "text": #6c6c6c,
-    "aliases": (),
-  ),
-);
-
-// Mixins
-@mixin avatar-size($width, $height, $font-size, $initials-height) {
-  width: $width;
-  height: $height;
-
-  .avatar-initials {
-    font-size: $font-size;
-    width: $width;
-    height: $initials-height;
-  }
-}
-
-@mixin rounded-variant($size) {
-  width: $size;
-  height: $size;
-}
-
-@mixin owner-badge(
-  $bottom: -3px,
-  $right: -3px,
-  $badge-size: 3px,
-  $border-width: 3px
-) {
-  &::after {
-    content: "";
-    width: $badge-size;
-    height: $badge-size;
-    border-radius: 50%;
-    background-color: white;
-    border: $border-width solid #3b73ed;
-    box-sizing: content-box;
-    outline: 1px solid white;
-    position: absolute;
-    bottom: $bottom;
-    right: $right;
-  }
-}
-
-@mixin avatar-placeholder($head-size, $body-size, $body-top) {
-  &:not(:has(img)) {
-    &::before {
-      content: "";
-      position: absolute;
-      width: $head-size;
-      height: $head-size;
-      border-radius: 50%;
-      opacity: 40%;
-      background-color: #6c6c6c;
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      width: $body-size;
-      height: $body-size;
-      border-radius: 50%;
-      opacity: 40%;
-      top: $body-top;
-      right: auto;
-      border: 0;
-      outline: 0;
-      background-color: #6c6c6c;
-    }
-  }
-}
-
-@mixin color-theme($bg-color, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  &.lg,
-  &.xl {
-    &::before,
-    &::after {
-      background-color: $text-color;
-    }
-  }
-}
-
-.avatar {
-  width: 18px;
-  height: 20px;
-  border-radius: 1px;
-  background-color: map.get(map.get($avatar-colors, "gray"), "background");
-  color: map.get(map.get($avatar-colors, "gray"), "text");
-  display: grid;
-  place-items: center;
-  position: relative;
-  transition: transform 0.1s ease-in-out;
-
-  &:has(img) {
-    .avatar-initials {
-      display: none;
-    }
-  }
-}
-
-.avatar-image {
-  width: 100%;
-  height: 100%;
-
-  aspect-ratio: 1/1;
-  object-fit: cover;
-  border-radius: 1px;
-  user-select: none;
-}
-
-.avatar-initials {
-  font-family: Montserrat;
-  font-weight: 800;
-  font-size: 7px;
-  height: 9px;
-  width: 18px;
-  text-align: center;
-  vertical-align: middle;
-  line-height: normal;
-  pointer-events: none;
-  user-select: none;
-}
-
-.is-owner:not(.rounded):not(.lg):not(.xl) {
-  border-radius: 1px;
-  @include owner-badge();
-
-  &.inverse {
-    &::after {
-      background-color: #2f2f2f;
-      outline: 1px solid #2f2f2f;
-    }
-  }
-}
-
-.rounded {
-  width: 18px;
-  height: 18px;
-  border-radius: 50% !important;
-
-  .avatar-image {
-    border-radius: 50% !important;
-  }
-}
-
-.xs {
-  &.rounded {
-    &.hover {
-      &:hover {
-        transform: scale(calc(17 / 9));
-      }
-    }
-  }
-
-  &.hover {
-    &:hover {
-      transform: scale(calc(17 / 10));
-    }
-  }
-}
-
-.sm {
-  @include avatar-size(22px, 24px, 9px, 12px);
-
-  &.rounded {
-    @include rounded-variant(22px);
-  }
-}
-
-.mod {
-  @include avatar-size(28px, 32px, 11px, 14px);
-  border-radius: 2px;
-
-  &.is-rounded {
-    @include rounded-variant(28px);
-  }
-
-  &.is-owner {
-    &::after {
-      bottom: -2px;
-      right: -2px;
-    }
-  }
-
-  .avatar-image {
-    border-radius: 2px;
-  }
-}
-
-.md {
-  @include avatar-size(32px, 34px, 11px, 14px);
-  border-radius: 2px;
-
-  &.is-rounded {
-    @include rounded-variant(32px);
-  }
-
-  &.is-owner {
-    &::after {
-      bottom: -2px;
-      right: -2px;
-    }
-  }
-
-  .avatar-image {
-    border-radius: 2px;
-  }
-}
-
-.lg {
-  width: 74px;
-  height: 82px;
-  overflow: hidden;
-  border-radius: 2px;
-
-  .avatar-image {
-    border-radius: 2px;
-  }
-
-  &.rounded {
-    @include rounded-variant(74px);
-  }
-
-  .avatar-initials {
-    display: none;
-  }
-
-  @include avatar-placeholder(46px, 100px, 50px);
-}
-
-.xl {
-  width: 160px;
-  height: 178px;
-  overflow: hidden;
-  border-radius: 3px;
-
-  .avatar-image {
-    border-radius: 2px;
-  }
-
-  &.rounded {
-    @include rounded-variant(178px);
-  }
-
-  .avatar-initials {
-    display: none;
-  }
-
-  @include avatar-placeholder(110px, 240px, 120px);
-}
-
-// Generate color theme classes
-@each $color-name, $color-props in $avatar-colors {
-  $bg: map.get($color-props, "background");
-  $text: map.get($color-props, "text");
-  $aliases: map.get($color-props, "aliases");
-
-  // Primary color class
-  .#{$color-name} {
-    @include color-theme($bg, $text);
-  }
-
-  // Generate alias classes
-  @each $alias in $aliases {
-    .#{$alias} {
-      @include color-theme($bg, $text);
-    }
-  }
-}
-
-.has-custom-hover-size {
-  &.rounded:hover,
-  &:hover {
-    transform: scale(var(--hover-size)) !important;
-  }
-}

package/projects/carriera-intern-components/src/app/components/avatar/avatar.component.spec.ts

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

package/projects/carriera-intern-components/src/app/components/avatar/avatar.component.ts

@@ -1,66 +0,0 @@
-import { Component, input } from '@angular/core';
-
-// Models
-import { Driver, Size } from './models';
-
-// Pipes
-import { AvatarClassesPipe } from './pipes/avatar-classes.pipe';
-import { InitialsPipe } from './pipes/initials.pipe';
-
-/**
- * Represents a user avatar component.
- */
-@Component({
-  selector: 'cai-avatar',
-  templateUrl: './avatar.component.html',
-  styleUrl: './avatar.component.scss',
-  imports: [
-    // Pipes
-    AvatarClassesPipe,
-    InitialsPipe,
-  ],
-})
-export class AvatarComponent {
-  /**
-   * The driver object containing information to display in the avatar.
-   * This input is required.
-   * @type {Driver}
-   */
-  driver = input.required<Driver>();
-
-  /**
-   * The size of the avatar in pixels.
-   * @type {Size}
-   */
-  size = input<Size>(18);
-
-  /**
-   * Whether the avatar should be rounded or not.
-   * @type {boolean}
-   */
-  rounded = input<boolean>(false);
-
-  /**
-   * Whether the owner element should be dark or light
-   * @type {boolean}
-   */
-  inverse = input<boolean>(false);
-
-  /**
-   * The tooltip to display when hovering over the avatar.
-   * @type {string}
-   */
-  tooltip = input<string | null>(null);
-
-  /**
-   * The size to apply when hovering over the avatar.
-   * @type {number}
-   */
-  customHoverSize = input<number>();
-
-  /**
-   * Whether the avatar should be hovered or not.
-   * @type {boolean}
-   */
-  hover = input<boolean>(true);
-}