nira-falcon 0.1.22 → 0.1.23

package/src/lib/core-spinner/core-spinner.component.html

@@ -0,0 +1,14 @@
+<div *ngIf="type === 'circle'" class="spinner" [ngClass]="[colorState]">
+  <svg
+    viewBox="25 25 50 50"
+    [ngStyle]="{ width: size + 'px', height: size + 'px' }"
+  >
+    <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
+  </svg>
+</div>
+
+<div
+  *ngIf="type === 'line'"
+  class="line-progress-bar"
+  [ngClass]="[colorState]"
+></div>

package/src/lib/core-spinner/core-spinner.component.scss

@@ -0,0 +1,162 @@
+*,
+:after,
+:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.spinner {
+  &.success {
+    stroke: var(--success-button-color);
+  }
+  &.warning {
+    stroke: var(--warning-button-color);
+  }
+  &.default {
+    stroke: var(--default-button-color);
+  }
+  &.primary {
+    stroke: var(--primary-button-color);
+  }
+  &.danger {
+    stroke: var(--danger-button-color);
+  }
+}
+.spinner svg {
+  -webkit-animation: loading-rotate 2s linear infinite;
+  -moz-animation: loading-rotate 2s linear infinite;
+  -o-animation: loading-rotate 2s linear infinite;
+  animation: loading-rotate 2s linear infinite;
+}
+
+.spinner .path {
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-width: 4;
+  stroke-linecap: round;
+  -webkit-animation: loading-dash 1.5s ease-in-out infinite;
+  -moz-animation: loading-dash 1.5s ease-in-out infinite;
+  -o-animation: loading-dash 1.5s ease-in-out infinite;
+  animation: loading-dash 1.5s ease-in-out infinite;
+}
+
+@-webkit-keyframes loading-rotate {
+  to {
+    -webkit-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+@-moz-keyframes loading-rotate {
+  to {
+    -moz-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+@-o-keyframes loading-rotate {
+  to {
+    -o-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes loading-rotate {
+  to {
+    -webkit-transform: rotate(1turn);
+    -moz-transform: rotate(1turn);
+    -o-transform: rotate(1turn);
+    transform: rotate(1turn);
+  }
+}
+
+@-webkit-keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+  to {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
+
+@-moz-keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+  to {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
+
+@-o-keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+  to {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
+
+@keyframes loading-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
+  }
+  to {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
+  }
+}
+
+.line-progress-bar {
+  height: 3px;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+}
+.line-progress-bar::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 100%;
+  animation: grow 1.5s ease-in-out infinite;
+  background: var(--primary-button-color);
+}
+
+@keyframes grow {
+  50% {
+    width: 100%;
+  }
+  100% {
+    width: 0;
+    right: 0;
+    left: unset;
+  }
+}

package/src/lib/core-spinner/core-spinner.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { ColorState } from '../falconTypes';
+
+@Component({
+  selector: 'core-spinner',
+  templateUrl: './core-spinner.component.html',
+  styleUrls: ['./core-spinner.component.scss'],
+})
+export class CoreSpinnerComponent {
+  @Input() size: number = 24;
+  @Input() colorState: ColorState = 'default';
+  @Input() type: 'circle' | 'line' = 'circle';
+}

package/src/lib/core-switch/core-switch.component.html

@@ -0,0 +1,13 @@
+<div class="switch-container" (click)="change()">
+  <input
+    type="checkbox"
+    class="switch"
+    [checked]="toggle === icon.iconActive"
+  />
+  <div class="switch-color">
+    <span>{{ label }} </span>
+  </div>
+  <label for="switch" class="label"
+    ><span class="material-symbols-outlined">{{ toggle }} </span>
+  </label>
+</div>

package/src/lib/core-switch/core-switch.component.scss

@@ -0,0 +1,58 @@
+@mixin userSelect {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.switch-container {
+  min-width: 55px;
+  max-width: 118px;
+  height: 30px;
+  border-radius: 10em;
+  border: 1px solid var(--default-switch-border-color);
+  position: relative;
+  cursor: pointer;
+  text-align: end;
+  .switch {
+    display: none;
+    &:checked {
+      & ~ .label {
+        transform: translatex(87px) rotatez(360deg);
+      }
+    }
+    ~ .label {
+      transition: all 1s cubic-bezier(0.34, 1.36, 0.2, 1);
+    }
+  }
+
+  .switch-color {
+    width: 100%;
+    height: 30px;
+    background: var(--default-switch-background-color);
+    border-radius: 10em;
+    z-index: 0;
+    position: absolute;
+    transition: all 500ms cubic-bezier(0.34, 1.36, 0.2, 1);
+  }
+  .label {
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    border-radius: 10em;
+    background: var(--default-switch-background-label-color);
+    position: absolute;
+    top: 2px;
+    left: 3px;
+    box-shadow: 2px 2px 10px 2px var(--default-switch-box-shadow-color);
+    z-index: 2;
+    cursor: pointer;
+    @include userSelect();
+    span {
+      font-size: 20px;
+      padding-block-start: 3px;
+      padding-inline-start: 1px;
+      color: var(--default-switch-text-color);
+    }
+  }
+}

package/src/lib/core-switch/core-switch.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoreSwitchComponent } from './core-switch.component';
+
+describe('CoreSwitchComponent', () => {
+  let component: CoreSwitchComponent;
+  let fixture: ComponentFixture<CoreSwitchComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CoreSwitchComponent]
+    });
+    fixture = TestBed.createComponent(CoreSwitchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/core-switch/core-switch.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+interface ISwitch {
+  iconActive: string;
+  iconInactive: string;
+}
+@Component({
+  selector: 'core-switch',
+  templateUrl: './core-switch.component.html',
+  styleUrls: ['./core-switch.component.scss'],
+})
+export class CoreSwitchComponent {
+  toggle!: string;
+
+  @Output() value = new EventEmitter<string>();
+  @Input() icon!: ISwitch;
+  @Input() label = '';
+  @Input() set defaultValue(value: string) {
+    this.toggle = value;
+  }
+
+  change() {
+    if (this.toggle === this.icon.iconActive)
+      this.toggle = this.icon.iconInactive;
+    else this.toggle = this.icon.iconActive;
+
+    this.value.emit(this.toggle);
+  }
+}

package/src/lib/core-table/core-column-date-picker/core-column-date-picker.component.html

@@ -0,0 +1,21 @@
+<div class="relative">
+  <core-column-input
+    (click)="isOpenCalendar = true"
+    [value]="date"
+    [isDatePicker]="true"
+    [showRemoveIcon]="false"
+  >
+  </core-column-input>
+  <close-icon
+    *ngIf="date"
+    (click)="clearedText()"
+    class="absolute w-4 top-2 left-11 close-icon"
+  ></close-icon>
+</div>
+<lib-nira-date-picker
+  [(isOpenCalendar)]="isOpenCalendar"
+  [defaultDate]="date ? date : defaultDate"
+  (datePickerResult)="onDatePickerResult($event)"
+  [selectToday]="canSelectToday"
+>
+</lib-nira-date-picker>

package/src/lib/core-table/core-column-date-picker/core-column-date-picker.component.scss

@@ -0,0 +1,3 @@
+.close-icon {
+  fill: var(--default-table-column-date-picker-close-icon-color);
+}

package/src/lib/core-table/core-column-date-picker/core-column-date-picker.component.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'core-column-date-picker',
+  templateUrl: './core-column-date-picker.component.html',
+  styleUrls: ['./core-column-date-picker.component.scss'],
+})
+export class CoreColumnDatePickerComponent {
+  @Input() canSelectToday: boolean = false;
+  @Input() defaultDate: string = '';
+  @Input() inputFormControl: FormControl = new FormControl('', []);
+
+  @Output() onChange: EventEmitter<any> = new EventEmitter();
+  niraDatePickerForm: FormGroup = {} as FormGroup;
+  isOpenCalendar: boolean = false;
+  date: string = '';
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+  ngOnInit(): void {
+    this.niraDatePickerForm = new FormGroup({
+      niraDatePickerFormCtrl: this.inputFormControl,
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+
+  clearedText() {
+    this.niraDatePickerForm.setValue({
+      niraDatePickerFormCtrl: '',
+    });
+    this.date = '';
+    this.onChange.emit(undefined);
+  }
+  onDatePickerResult(result: string) {
+    this.niraDatePickerForm.setValue({
+      niraDatePickerFormCtrl: result,
+    });
+    this.date = result;
+    this.onChange.emit(result);
+  }
+  onTodayDate(todayDate: string) {
+    this.date = todayDate;
+    this.niraDatePickerForm.setValue({
+      niraDatePickerFormCtrl: todayDate,
+    });
+  }
+}

package/src/lib/core-table/core-column-input/core-column-input.component.html

@@ -0,0 +1,17 @@
+<div class="search-box flex focus:bg-slate-600">
+  <input
+    [type]="showRemoveIcon ? 'search' : 'text'"
+    placeholder="{{ placeholder }}"
+    [(ngModel)]="value"
+    (ngModelChange)="change($event)"
+    class="box-border"
+  />
+  <search-icon
+    *ngIf="!isDatePicker"
+    class="absolute top-1 w-5 right-1 fill-gray-500"
+  ></search-icon>
+  <calendar-icon
+    *ngIf="isDatePicker"
+    class="absolute top-1 w-5 right-1 fill-gray-500"
+  ></calendar-icon>
+</div>

package/src/lib/core-table/core-column-input/core-column-input.component.scss

@@ -0,0 +1,21 @@
+.search-box {
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  background: transparent;
+
+  input {
+    width: 100%;
+    color: var(--default-table-column-input-text-color);
+    outline: 0;
+    background: transparent;
+    border-bottom: 1px solid var(--default-table-column-input-border-color);
+    font-size: 0.875rem;
+    padding-block: 5px;
+    padding-right: 30px;
+    padding-left: 6px;
+    &:focus {
+      border-bottom: 1px solid #96bdf2;
+    }
+  }
+}

package/src/lib/core-table/core-column-input/core-column-input.component.ts

@@ -0,0 +1,23 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { InputType } from '../../falconTypes';
+
+@Component({
+  selector: 'core-column-input',
+  templateUrl: './core-column-input.component.html',
+  styleUrls: ['./core-column-input.component.scss'],
+})
+export class CoreColumnInputComponent {
+  inputType!: InputType;
+  @Input() showRemoveIcon: boolean = true;
+  @Input() placeholder = '';
+  @Output() onChange: EventEmitter<string> = new EventEmitter();
+  @Input() value: string = '';
+  @Input() set type(value: InputType) {
+    this.inputType = value;
+  }
+  @Input() isDatePicker: boolean = false;
+  @Input() maxLength = 2000;
+  change(event: any) {
+    this.onChange.emit(event);
+  }
+}

package/src/lib/core-table/core-column-selector/core-column-selector.component.html

@@ -0,0 +1,47 @@
+<div tabindex="-1" class="dropdown" (focusout)="focusOut()">
+  <close-icon
+    *ngIf="selectedItem.title"
+    (click)="removedText()"
+    class="absolute w-4 top-2 right-2 fill-gray-600"
+  ></close-icon>
+  <div
+    class="select"
+    [ngClass]="{
+      'select-clicked': isOpenMenu,
+      selectError: inputFormControl.touched && inputFormControl.errors
+    }"
+    (click)="openMenuClick()"
+  >
+    <span
+      class="placeholder-top"
+      *ngIf="(selectedItem | json) != ({} | json)"
+      >{{ label }}</span
+    >
+    <arrow-down-icon
+      class="caret fill-secondary-text-color h-6"
+      [ngClass]="{ 'caret-rotate': isOpenMenu }"
+    ></arrow-down-icon>
+
+    <span
+      [ngClass]="[
+        label.length > 0 && (selectedItem | json) == ({} | json)
+          ? 'placeholder'
+          : 'selected'
+      ]"
+      >{{
+        label.length > 0 && (selectedItem | json) == ({} | json)
+          ? label
+          : selectedItem.title
+      }}</span
+    >
+  </div>
+  <ul class="menu" [ngClass]="{ 'menu-open': isOpenMenu }">
+    <li
+      *ngFor="let item of newItems"
+      [ngClass]="{ active: item == selectedItem }"
+      (click)="onItemSelect(item, true)"
+    >
+      {{ item.title }}
+    </li>
+  </ul>
+</div>

package/src/lib/core-table/core-column-selector/core-column-selector.component.scss

@@ -0,0 +1,113 @@
+@mixin userSelect {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.dropdown {
+  min-width: 15em;
+  position: relative;
+  width: calc(100% - 34px);
+  min-width: 120px;
+  .select {
+    color: var(--default-selector-text-color);
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    align-items: center;
+    border-bottom: 1px solid var(--default-table-column-input-border-color);
+    padding-block: 3px;
+    padding-inline-start: 12px;
+    outline: 0;
+    padding-inline-end: 2px;
+    cursor: pointer;
+    transition: background 0.3s;
+    font-size: 12px;
+    @include userSelect();
+    &:focus {
+      border-bottom: 1px solid #96bdf2;
+    }
+
+    .selected {
+      padding-inline: 12px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.7);
+      @include userSelect();
+    }
+    .placeholder-top {
+      position: absolute;
+      right: 13px;
+      background: var(--default-selector-label-background-color);
+      top: -8px;
+      padding-inline: 6px;
+      font-size: 11px;
+      color: var(--default-selector-label-text--color);
+    }
+    .caret {
+      fill: var(--default-selector-icon-color);
+      color: #595c5f;
+      @include userSelect();
+    }
+    .caret-rotate {
+      transform: rotate(180deg);
+    }
+    .placeholder {
+      color: var(--default-selector-placeholder-text-color);
+      padding-inline: 16px;
+    }
+  }
+  .select-clicked {
+    border-bottom: 1px solid #96bdf2;
+  }
+  .menu {
+    list-style: none;
+    padding-inline: 0px;
+    background: var(--default-selector-menu-background-color);
+    border: 1px solid var(--default-selector-menu-border-color);
+    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
+    border-radius: 0.5em;
+    color: var(--default-selector-menu-text-color);
+    position: absolute;
+    top: 40px;
+    left: 50%;
+    width: 100%;
+    transform: translateX(-50%);
+    opacity: 0;
+    display: none;
+    transition: 0, 2s;
+    z-index: 10;
+    max-height: 200px;
+    overflow: auto;
+    li {
+      padding: 0.7em 0.5em;
+      margin: 0.3em 0;
+      margin-inline: 4px;
+      border-radius: 0.5em;
+      font-size: 14px;
+      text-align: start;
+      cursor: pointer;
+      &:hover {
+        background: var(--default-selector-menu-item-hover-color);
+      }
+    }
+    .active {
+      background: var(--default-selector-menu-item-active-color);
+    }
+  }
+  .menu-open {
+    display: block;
+    opacity: 1;
+  }
+  .label-error {
+    color: var(--default-selector-validation-text-color);
+    font-size: 13px;
+    margin-block-start: 4px;
+    min-height: 21px;
+    width: 100%;
+    display: inline-block !important;
+    text-align: start;
+  }
+  .selectError {
+    border: 1px solid var(--default-selector-validation-border-color) !important;
+  }
+}