carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/interval-dropdown.component.html

@@ -0,0 +1,98 @@
+@let isFormValid = form?.valid;
+<div
+  class="dropdown-container"
+  [class.focus]="open()"
+  [ngbPopover]="popoverRef"
+  #container
+  #dropdown="ngbPopover"
+  popoverClass="cai-dropdown cai-dropdown-popover"
+  container="body"
+  placement="bottom-start"
+  [positionTarget]="anchor"
+  [animation]="true"
+  [autoClose]="'outside'"
+  (hidden)="handleCloseDropdown()"
+  (shown)="handleOpenDropdown()"
+  (click)="handleClick()"
+>
+  <div>{{ custom() ? "Custom" : selectedOption()?.name }}</div>
+  <svg-icon name="cai-arrow-secondary-down" class="dropdown-icon"></svg-icon>
+  <div #anchor class="dropdown-anchor" [class.custom]="custom()"></div>
+</div>
+@let maxHeight = (options()?.length || 1) * 28 + 6;
+<ng-template #popoverRef>
+  <div
+    class="popover-dropdown-menu"
+    [style.--container-width]="containerWidth() + 'px'"
+    [style.--max-height]="
+      custom() ? '124px' : maxHeight > 306 ? '306px' : maxHeight + 'px'
+    "
+    [class.custom]="custom()"
+    (click)="$event.stopPropagation()"
+  >
+    <div class="options-container">
+      <ng-container *ngTemplateOutlet="optionsRef"></ng-container>
+    </div>
+    <div class="custom-container">
+      <ng-container *ngTemplateOutlet="customRef"></ng-container>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #optionsRef>
+  @if (options()?.length) {
+    @for (option of options(); track option.id) {
+      @let isSelected = option.id === selectedOption()?.id;
+      @let isCustomSelected = option.name === "Custom" && isSelected;
+      <div
+        class="dropdown-item"
+        [class.selected]="isSelected"
+        [class.custom-selected]="isCustomSelected"
+        (pointerdown)="handleOption($event, option)"
+      >
+        <p>{{ option.name }}</p>
+        <svg-icon name="cai-checkmark" class="dropdown-item-icon"></svg-icon>
+      </div>
+    }
+  } @else {
+    <div class="dropdown-item no-results">
+      <p>No results</p>
+    </div>
+  }
+</ng-template>
+
+<ng-template #customRef>
+  <div class="custom-range-header">CUSTOM RANGE</div>
+  @if (form) {
+    <div class="custom-range-content" [formGroup]="form">
+      <div class="custom-range-content-item" [class.disabled]="!custom()">
+        <cai-input-datetime-picker
+          formControlName="from"
+          [inputConfig]="{ configType: 'from' } | dropdownFilterInputConfig"
+        ></cai-input-datetime-picker>
+      </div>
+      <div class="custom-range-content-item" [class.disabled]="!custom()">
+        <cai-input-datetime-picker
+          formControlName="to"
+          [inputConfig]="{ configType: 'to' } | dropdownFilterInputConfig"
+        ></cai-input-datetime-picker>
+      </div>
+    </div>
+  }
+  <div class="custom-range-footer">
+    <button
+      class="custom-range-button clear"
+      [class.valid]="isFormValid"
+      (click)="handleClearAll($event)"
+    >
+      CLEAR ALL
+    </button>
+    <button
+      class="custom-range-button set"
+      [class.valid]="isFormValid"
+      (click)="handleSet($event)"
+    >
+      SET
+    </button>
+  </div>
+</ng-template>

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/interval-dropdown.component.scss

@@ -0,0 +1,437 @@
+@use "variables" as *;
+$bezier: cubic-bezier(0.46, 0.03, 0.51, 0.95);
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 5000s $bezier 0s !important;
+}
+
+input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #ffffff !important;
+}
+
+input:-moz-autofill,
+input:-moz-autofill-preview {
+  filter: none;
+}
+
+*,
+*::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;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 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;
+}
+
+.dropdown-container {
+  width: 100%;
+
+  position: relative;
+  padding: 4px 6px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+
+  user-select: none;
+  cursor: pointer;
+
+  border-radius: 2px;
+
+  font-weight: 800;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0%;
+
+  transition:
+    background-color 0.2s $bezier,
+    color 0.2s $bezier;
+
+  background-color: $color-white-200;
+  color: $color-black-200;
+
+  .dropdown-icon {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $color-black-100;
+    transition:
+      color 0.2s $bezier,
+      transform 0.2s $bezier;
+    transform: rotate(0deg);
+  }
+
+  &:hover:not(.focus) {
+    background-color: $color-white-500;
+    color: $color-black-300;
+
+    .dropdown-icon {
+      color: $color-black-300;
+    }
+  }
+
+  &.focus {
+    background-color: $color-black-500;
+    color: $color-white-50;
+
+    .dropdown-icon {
+      transform: rotate(180deg);
+      color: $color-white-70;
+    }
+  }
+}
+
+.dropdown-anchor {
+  position: absolute;
+  width: 100%;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+  bottom: 4px;
+  left: 0px;
+
+  transition: transform 0.2s $bezier;
+}
+
+.popover-dropdown-menu {
+  min-width: 0px !important;
+  background-color: $color-text-base-content;
+  width: var(--container-width);
+  border: 0;
+  border-radius: 3px;
+  padding: 4px;
+  padding-right: 0px;
+  max-height: 306px;
+  z-index: 1100 !important;
+  overflow-y: scroll;
+
+  font-family: Montserrat;
+  font-style: normal;
+
+  position: relative;
+  // &::-webkit-scrollbar {
+  //   background-color: $color-text-base-content;
+  //   border-radius: 0 3px 3px 0;
+  //   width: 6px;
+  // }
+
+  // &::-webkit-scrollbar-thumb {
+  //   background-color: #919191;
+  //   width: 2px;
+  //   border: 2px solid $color-text-base-content;
+  //   border-radius: 3px;
+  // }
+
+  padding-right: 4px;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  transition:
+    max-height 0.2s $bezier,
+    opacity 0.2s $bezier,
+    height 0.1s $bezier,
+    width 0.2s $bezier,
+    transform 0.2s $bezier;
+  animation: dropdown-menu-opening 0.2s $bezier;
+
+  max-height: var(--max-height);
+  height: var(--max-height);
+}
+
+.closing {
+  animation: dropdown-menu-closing 0.2s $bezier;
+  opacity: 0;
+  max-height: 0;
+}
+
+.options-container {
+  padding: 4px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  opacity: 1;
+  transition: opacity 0.1s $bezier;
+}
+
+.custom-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+
+  opacity: 0;
+  transition: opacity 0.1s $bezier;
+
+  width: 100%;
+  padding: 4px;
+}
+
+.popover-dropdown-menu.custom {
+  width: 300px;
+  transform: translateX(-78px);
+  overflow: hidden;
+
+  .options-container {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .custom-container {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@keyframes dropdown-menu-opening {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+  100% {
+    max-height: 306px;
+    opacity: 1;
+  }
+}
+
+@keyframes dropdown-menu-closing {
+  0% {
+    max-height: 306px;
+    opacity: 1;
+  }
+  100% {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+.dropdown-item {
+  color: white;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  height: 26px;
+  padding: 4px;
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  user-select: none;
+
+  cursor: pointer;
+
+  background-color: $color-black-500;
+  transition:
+    background-color 0.2s $bezier,
+    color 0.2s $bezier;
+  border-radius: 2px;
+
+  &:hover {
+    background-color: $color-black-300;
+    color: white;
+  }
+
+  &:focus-visible {
+    background-color: $color-black-300;
+    border: 0;
+    outline: none;
+  }
+
+  position: relative;
+
+  &.selected {
+    font-weight: 700;
+    .dropdown-item-icon {
+      opacity: 1;
+    }
+    cursor: default;
+  }
+
+  &.custom-selected {
+    cursor: pointer !important;
+  }
+
+  .dropdown-item-icon {
+    opacity: 0;
+    transition: opacity 0.2s $bezier;
+    color: $color-blue-300;
+  }
+
+  &:not(:first-child) {
+    margin-top: 2px;
+  }
+}
+
+.no-results {
+  color: $color-black-100;
+  font-weight: 700;
+
+  pointer-events: none;
+}
+
+.custom-range-header {
+  color: $color-white-50;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 14px;
+  text-transform: uppercase;
+
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 2px;
+  padding-bottom: 6px;
+
+  border-bottom: 1px solid $color-black-300;
+  margin-bottom: 2px;
+  user-select: none;
+}
+
+.custom-range-footer {
+  padding-top: 4px;
+  border-top: 1px solid $color-black-300;
+  margin-top: 2px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  gap: 4px;
+}
+
+.custom-range-content {
+  padding-top: 22px;
+  padding-bottom: 18px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  user-select: none;
+}
+
+.custom-range-button {
+  padding: 2px;
+
+  background-color: $color-black-100-20;
+
+  color: $color-black-100;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 14px;
+  text-transform: uppercase;
+
+  border-radius: 2px;
+  flex: 1;
+  cursor: default !important;
+
+  &.valid {
+    color: $color-white-500;
+    cursor: pointer !important;
+  }
+
+  transition:
+    background-color 0.2s $bezier,
+    color 0.2s $bezier;
+  user-select: none;
+}
+
+.custom-range-content-item {
+  &.disabled {
+    pointer-events: none !important;
+    cursor: default !important;
+    z-index: -1 !important;
+  }
+  flex: 1;
+}
+
+.clear.valid {
+  &:hover {
+    background-color: $color-white-200;
+    color: $color-black-300;
+  }
+}
+
+.set.valid {
+  background-color: $color-blue-500;
+  &:hover {
+    background-color: $color-blue-50;
+    color: $color-blue-700;
+  }
+}

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/interval-dropdown.component.spec.ts

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

package/projects/carriera-intern-components/src/app/components/toolbar-dropdown/interval-dropdown.component.ts

@@ -0,0 +1,160 @@
+import { CommonModule } from '@angular/common';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  ViewChild,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { NgbPopover, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+
+// Components
+import { SvgIconComponent } from 'angular-svg-icon';
+
+// Interfaces
+import { IIntervalDropdownOption } from './interfaces';
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms';
+import { CaiInputDatetimePickerComponent } from '../input-datetime-picker/cai-input-datetime-picker.component';
+
+// Pipes
+import { DropdownFilterInputConfigPipe } from './pipes/dropdown-filter-input-config.pipe';
+import { IntervalDropdownHelper } from './utils/helpers/interval-dropdown.helper';
+
+@Component({
+  selector: 'cai-interval-dropdown',
+  templateUrl: './interval-dropdown.component.html',
+  styleUrl: './interval-dropdown.component.scss',
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+
+    // Pipes
+    DropdownFilterInputConfigPipe,
+
+    // Components
+    CaiInputDatetimePickerComponent,
+    SvgIconComponent,
+
+    // Bootstrap
+    NgbPopoverModule,
+  ],
+})
+export class IntervalDropdownComponent implements AfterViewInit {
+  @ViewChild('dropdown') dropdown!: NgbPopover;
+  @ViewChild('container') containerRef!: ElementRef<HTMLDivElement>;
+  containerWidth = signal<number>(0);
+
+  selectedOption = input<IIntervalDropdownOption | null>(null);
+  options = input<IIntervalDropdownOption[]>([]);
+  companyDays = input<number | null>(null);
+  custom = signal<boolean>(false);
+  open = signal<boolean>(false);
+
+  // Outputs
+  onClose = output();
+  onOpen = output();
+  onSelectionChange = output<IIntervalDropdownOption>();
+
+  form: UntypedFormGroup = new FormGroup({});
+
+  private updateContainerWidth(): void {
+    if (this.containerRef?.nativeElement) {
+      this.containerWidth.set(
+        this.containerRef?.nativeElement?.offsetWidth ?? 0,
+      );
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.form = IntervalDropdownHelper.createFormGroup(this.companyDays());
+    this.updateContainerWidth();
+  }
+
+  handleOpenDropdown() {
+    this.updateContainerWidth();
+    this.openDropdown();
+  }
+
+  handleCloseDropdown() {
+    this.closeDropdown();
+  }
+
+  handleClick() {
+    if (!this.open()) {
+      this.open.set(true);
+      return;
+    }
+  }
+
+  closeDropdown() {
+    this.open.set(false);
+    this.custom.set(false);
+    this.form.get('from')?.disable();
+    this.form.get('to')?.disable();
+    this.dropdown?.close();
+    this.onClose.emit();
+  }
+
+  openDropdown() {
+    this.open.set(true);
+    this.onOpen.emit();
+  }
+
+  handleOption(event: MouseEvent, option: IIntervalDropdownOption) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (option.name === 'Custom') {
+      this.custom.set(true);
+      this.form.get('from')?.enable();
+      this.form.get('to')?.enable();
+      return;
+    }
+
+    if (option.id === this.selectedOption()?.id) {
+      return;
+    }
+
+    this.onSelectionChange.emit(option);
+    this.closeDropdown();
+  }
+
+  handleClearAll(event: MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    this.form.reset();
+  }
+
+  handleSet(event: MouseEvent) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (!this.form.valid) {
+      return;
+    }
+
+    let option = this.options().find((option) => option.name === 'Custom');
+
+    if (option) {
+      option = {
+        ...option,
+        startDate: this.form.get('from')?.value,
+        endDate: this.form.get('to')?.value,
+      };
+
+      this.onSelectionChange.emit(option);
+      this.closeDropdown();
+    }
+  }
+}