nira-falcon 0.1.25 → 0.1.27

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

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

@@ -1,162 +0,0 @@
-*,
-: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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,113 +0,0 @@
-@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;
-  }
-}