nira-falcon 0.1.24 → 0.1.26

package/src/lib/core-auto-complete/core-auto-complete.component.html

@@ -1,30 +0,0 @@
-<div class="dropdown">
-  <div
-    class="select"
-    [ngClass]="{ 'select-clicked': isOpenMenu }"
-    (click)="openMenuClick()"
-  >
-    <input
-      class="selected"
-      [placeholder]="label"
-      [(ngModel)]="value"
-      (ngModelChange)="onChanged($event)"
-      (focusout)="focusOut()"
-    />
-    <span
-      class="material-symbols-outlined caret"
-      [ngClass]="{ 'caret-rotate': isOpenMenu }"
-    >
-      expand_more
-    </span>
-  </div>
-  <ul class="menu" [ngClass]="{ 'menu-open': isOpenMenu }">
-    <li
-      *ngFor="let item of _items"
-      [ngClass]="{ active: item == selectedItem }"
-      (click)="onItemSelect(item)"
-    >
-      {{ item.title }}
-    </li>
-  </ul>
-</div>

package/src/lib/core-auto-complete/core-auto-complete.component.scss

@@ -1,89 +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: 100%;
-  min-width: 120px;
-  .select {
-    background: #fff;
-    color: #304050;
-    display: flex;
-    flex-direction: row-reverse;
-    justify-content: space-between;
-    align-items: center;
-    border: 2px solid #ced4da;
-    border-radius: 4px;
-    padding: 8px;
-    cursor: pointer;
-    transition: background 0.3s;
-    font-size: 13px;
-    @include userSelect();
-    &:hover {
-      background: #fbfbfb;
-      .selected {
-        background: #fbfbfb;
-      }
-    }
-    .selected {
-      width: 100%;
-      font-size: 13px;
-      outline: none;
-      border: none;
-      @include userSelect();
-    }
-    .caret {
-      color: #595c5f;
-      @include userSelect();
-    }
-    .caret-rotate {
-      transform: rotate(180deg);
-    }
-  }
-  .select-clicked {
-    border: 2px #4f6883 solid;
-    box-shadow: 0 0 0.8em #888;
-  }
-
-  .menu {
-    list-style: none;
-    padding-inline: 0px;
-    background: #fff;
-    border: 1px #e3e8f1 solid;
-    box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
-    border-radius: 0.5em;
-    color: #595c5f;
-    position: absolute;
-    top: 42px;
-    left: 50%;
-    width: 100%;
-    transform: translateX(-50%);
-    opacity: 0;
-    display: none;
-    transition: 0, 2s;
-    z-index: 3;
-    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: #f6f6f6;
-      }
-    }
-    .active {
-      background: #ced4da;
-    }
-  }
-  .menu-open {
-    display: block;
-    opacity: 1;
-  }
-}

package/src/lib/core-auto-complete/core-auto-complete.component.ts

@@ -1,92 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-} from '@angular/core';
-import { MenuItem } from '../falconTypes';
-
-@Component({
-  selector: 'core-auto-complete',
-  templateUrl: './core-auto-complete.component.html',
-  styleUrls: ['./core-auto-complete.component.scss'],
-})
-export class CoreAutoCompleteComponent<T> implements OnInit {
-  selectedItem: MenuItem<T> = {} as MenuItem<T>;
-  titleKeyObject!: keyof string | number;
-  valueKeyObject!: keyof string | number;
-  filterItems: MenuItem<T>[] = [];
-  newItems: MenuItem<T>[] = [];
-  value!: T;
-  isOpenMenu = false;
-
-  get _items() {
-    return this.filterItems;
-  }
-
-  @Input() label = 'ddd';
-  @Input() titleKey!: string;
-  @Input() valueKey!: string;
-  @Input() items: any[] = [];
-  @Input() set defaultValue(value: T) {
-    this.value = value;
-  }
-  @Output() onChange = new EventEmitter<string>();
-
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  ngOnInit(): void {
-    type ObjectKey = (typeof this.items)[0];
-    this.titleKeyObject = this.titleKey as ObjectKey;
-    this.valueKeyObject = this.valueKey as ObjectKey;
-    this.newItems = this.changeItemsType(this.items);
-
-    this.filterItems = this.newItems.filter(
-      (item: any) => !item.title.indexOf(this.value)
-    );
-  }
-  ngAfterViewInit(): void {
-    this.cdr.detectChanges();
-  }
-
-  changeItemsType(items: any[]): MenuItem<T>[] {
-    return items.map((item) => {
-      return {
-        title: item[this.titleKeyObject],
-        value: item[this.valueKeyObject],
-      };
-    });
-  }
-
-  openMenuClick() {
-    this.isOpenMenu = !this.isOpenMenu;
-    this.filterItems = this.newItems.filter(
-      (item: any) => !item.title.indexOf(this.value)
-    );
-  }
-
-  onItemSelect(item: MenuItem<T> | undefined): void {
-    this.isOpenMenu = false;
-    if (!item) return;
-    this.selectedItem = item;
-    this.value = item.title;
-  }
-
-  focusOut() {
-    if (!this.items || this.items.length == 0 || !this.selectedItem) return;
-    setTimeout(() => {
-      this.isOpenMenu = false;
-      if (!this.newItems.some((item: any) => item.title == this.value)) {
-        this.value = this.selectedItem.title;
-      }
-    }, 100);
-  }
-
-  onChanged(value: any) {
-    this.filterItems = this.items.filter(
-      (item: any) => !item.title.indexOf(value)
-    );
-  }
-}

package/src/lib/core-btn/core-btn-bluebird.component.html

@@ -1,21 +0,0 @@
-<button
-  (click)="clicked()"
-  [ngClass]="[
-    'button',
-    disable ? 'disabled' : '',
-    theme,
-    colorState,
-    color,
-    size,
-    loading ? 'cursorLoading' : ''
-  ]"
-  [type]="buttonType"
->
-  <ng-content *ngIf="!loading"></ng-content>
-  <core-spinner
-    *ngIf="loading"
-    class="loading"
-    [colorState]="colorState"
-    [size]="20"
-  ></core-spinner>
-</button>

package/src/lib/core-btn/core-btn-bluebird.component.scss

@@ -1,123 +0,0 @@
-:host {
-  width: 100%;
-}
-
-.button {
-  width: 100%;
-  height: 30px;
-  outline: none;
-  border: none;
-  text-align: center;
-  color: var(--default);
-  background-color: transparent;
-  box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1),
-    0 2px 5px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07),
-    0 1px 2px 0 rgba(0, 0, 0, 0.08);
-  line-height: 1.5;
-  font-size: 14px;
-  font-weight: 500;
-  display: inline-block;
-  margin-inline-start: auto;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  transition: 0.3s;
-  cursor: pointer;
-  &:hover {
-    box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1),
-      0 2px 5px 0 rgba(43, 45, 80, 0.1), 0 3px 9px 0 rgba(43, 45, 80, 0.08),
-      0 1px 1.5px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
-  }
-  &.small {
-    height: 30px;
-    border-radius: 8px !important;
-  }
-  &.medium {
-    height: 38px;
-  }
-  &.round {
-    border: 2px solid #7b1fa2;
-    height: 44px;
-    border-radius: 30px;
-    background-color: #7b1fa2;
-    &:hover {
-      color: #fff;
-      background-color: #7b1fa2;
-    }
-
-    &:active {
-      color: #fff;
-      background-color: #7b1fa2;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-  }
-  &.Orange {
-    background-color: #fc6a15;
-    color: #fff !important;
-  }
-  &.White {
-    background-color: #fff;
-  }
-
-  &.success {
-    color: var(--success-button-color);
-    &:active {
-      background-color: var(--success-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.warning {
-    color: var(--warning-button-color);
-    &:active {
-      background-color: var(--warning-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.default {
-    color: var(--default-button-color);
-    &:active {
-      background-color: var(--default-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.primary {
-    color: var(--primary-button-color);
-    &:active {
-      background-color: var(--primary-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.danger {
-    color: var(--danger-button-color);
-    &:active {
-      background-color: var(--danger-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.square {
-    padding-inline: 16px;
-    border-radius: 0.25rem;
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-  }
-}
-.loading {
-  display: inline-block;
-  float: inline-end;
-  margin-inline-end: 8px;
-}
-.cursorLoading {
-  cursor: wait;
-}

package/src/lib/core-btn/core-btn-falcon.component.html

@@ -1,20 +0,0 @@
-<button
-  (click)="clicked()"
-  [ngClass]="[
-    'button',
-    disable ? 'disabled' : '',
-    theme,
-    colorState,
-    size,
-    loading ? 'cursorLoading' : ''
-  ]"
-  [type]="buttonType"
->
-  <ng-content *ngIf="!loading"></ng-content>
-  <core-spinner
-    *ngIf="loading"
-    class="loading"
-    [colorState]="colorState"
-    [size]="20"
-  ></core-spinner>
-</button>

package/src/lib/core-btn/core-btn-falcon.component.scss

@@ -1,115 +0,0 @@
-:host {
-  width: 100%;
-}
-
-.button {
-  width: 100%;
-  height: 30px;
-  outline: none;
-  border: none;
-  text-align: center;
-  color: var(--default);
-  background-color: transparent;
-  box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1),
-    0 2px 5px 0 rgba(43, 45, 80, 0.08), 0 1px 1.5px 0 rgba(0, 0, 0, 0.07),
-    0 1px 2px 0 rgba(0, 0, 0, 0.08);
-  line-height: 1.5;
-  font-size: 14px;
-  font-weight: 500;
-  display: inline-block;
-  margin-inline-start: auto;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  transition: 0.3s;
-  cursor: pointer;
-  &:hover {
-    box-shadow: 0 0 0 1px rgba(43, 45, 80, 0.1),
-      0 2px 5px 0 rgba(43, 45, 80, 0.1), 0 3px 9px 0 rgba(43, 45, 80, 0.08),
-      0 1px 1.5px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.08);
-  }
-  &.small {
-    height: 30px;
-  }
-  &.medium {
-    height: 38px;
-  }
-  &.round {
-    border: 2px solid #7b1fa2;
-    height: 44px;
-    border-radius: 30px;
-    background-color: #7b1fa2;
-    &:hover {
-      color: #fff;
-      background-color: #7b1fa2;
-    }
-
-    &:active {
-      color: #fff;
-      background-color: #7b1fa2;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-  }
-
-  &.success {
-    color: var(--success-button-color);
-    &:active {
-      background-color: var(--success-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.warning {
-    color: var(--warning-button-color);
-    &:active {
-      background-color: var(--warning-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.default {
-    color: var(--default-button-color);
-    &:active {
-      background-color: var(--default-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.primary {
-    color: var(--primary-button-color);
-    &:active {
-      background-color: var(--primary-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.danger {
-    color: var(--danger-button-color);
-    &:active {
-      background-color: var(--danger-button-background-color);
-      box-shadow: none;
-    }
-  }
-
-  &.square {
-    padding-inline: 16px;
-    border-radius: 0.25rem;
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.4;
-    }
-  }
-}
-.loading {
-  display: inline-block;
-  float: inline-end;
-  margin-inline-end: 8px;
-}
-.cursorLoading {
-  cursor: wait;
-}

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

@@ -1,54 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { NiraModalService } from 'nira-modal';
-import {
-  ButtonSize,
-  ButtonType,
-  Color,
-  ColorState,
-  ConfirmDialog,
-  ThemePalette,
-} from '../falconTypes';
-import { CoreConfirmDialogComponent } from '../core-confirm-dialog/core-confirm-dialog.component';
-import { FormGroup } from '@angular/forms';
-import { environment } from '../../environments/environment';
-
-@Component({
-  selector: 'core-btn',
-  templateUrl: './core-btn' + environment.tempName,
-  styleUrls: ['./core-btn' + environment.styleName],
-})
-export class CoreBtnComponent {
-  disable = false;
-  @Input() formGroup: FormGroup | undefined = undefined;
-  @Input() loading: boolean = false;
-  @Input() theme: ThemePalette = 'square';
-  @Input() buttonType: ButtonType = 'button';
-  @Input() size: ButtonSize = 'small';
-  @Input() color: Color = 'White';
-  @Input() set isDisabled(value: boolean) {
-    this.disable = value;
-  }
-  @Input() colorState: ColorState = 'default';
-  @Output() btnClicked: EventEmitter<any> = new EventEmitter();
-  @Input() confirmDialog: ConfirmDialog | undefined;
-  constructor(private niraModalService: NiraModalService) {}
-  clicked() {
-    if (!this.disable) {
-      if (this.confirmDialog != undefined) {
-        const modal = this.niraModalService.open(CoreConfirmDialogComponent, {
-          data: this.confirmDialog,
-        });
-        modal.afterClosed.subscribe((result) => {
-          if (result === 'true') {
-            this.btnClicked.emit();
-          }
-        });
-      } else {
-        this.btnClicked.emit();
-      }
-    }
-    if (this.formGroup) {
-      this.formGroup.markAllAsTouched();
-    }
-  }
-}

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

@@ -1,3 +0,0 @@
-<div class="h-min rounded-lg shadow-md" [class]="cardClass">
-  <ng-content></ng-content>
-</div>

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

@@ -1,10 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'core-card',
-  templateUrl: './core-card.component.html',
-  styleUrls: ['./core-card.component.scss'],
-})
-export class CoreCardComponent {
-  @Input() cardClass = 'bg-white';
-}

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

@@ -1,9 +0,0 @@
-<div class="flex gap-3">
-  <input
-    type="checkbox"
-    [name]="name"
-    [(ngModel)]="checked"
-    (change)="change($event)"
-  />
-  <span class="checkmark">{{ label }}</span>
-</div>

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

@@ -1,60 +0,0 @@
-.container {
-  display: inline;
-  position: relative;
-  padding-left: 35px;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 18px;
-  padding-inline: 8px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.label {
-  padding-right: 8px;
-}
-.container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.checkmark {
-}
-
-.container:hover input ~ .checkmark {
-  background-color: var(--default-checkbox-input-hover-background-color);
-}
-
-.container input:checked ~ .checkmark {
-  background-color: var(--default-checkbox-input-checked-background-color);
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-.container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.container .checkmark:after {
-  left: 10px;
-  top: 4px;
-  width: 4px;
-  height: 10px;
-  border: solid white;
-  border-width: 0 3px 3px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-.container {
-  font-size: 13px;
-  font-weight: 500;
-}

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

@@ -1,19 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormControl } from '@angular/forms';
-
-@Component({
-  selector: 'core-checkbox',
-  templateUrl: './core-checkbox.component.html',
-  styleUrls: ['./core-checkbox.component.scss'],
-})
-export class CoreCheckboxComponent {
-  @Input() label = '';
-  @Input() name = '1';
-  @Input() checked = false;
-  @Output() onChange: EventEmitter<any> = new EventEmitter();
-  @Input() inputFormControl: FormControl = new FormControl('', []);
-
-  change(event: any) {
-    this.onChange.emit(event);
-  }
-}

package/src/lib/core-confirm-dialog/core-confirm-dialog.component.html

@@ -1,28 +0,0 @@
-<core-card class="block min-w-64 m-5">
-  <div class="header flex mb-6 justify-between">
-    <b class="m-3 self-center">{{ confirmDialog.title }}</b>
-    <close-icon
-      (click)="close()"
-      class="header-icon h-10 m-3 rounded-full cursor-pointer p-2 hover:shadow-md"
-    ></close-icon>
-  </div>
-
-  <p class="max-w-lg px-6">{{ confirmDialog.text }}</p>
-  <div class="grid grid-cols-4 gap-x-2 p-3" dir="ltr">
-    <button
-      class="col-span-1 button square default small"
-      (click)="close()"
-      type="button"
-    >
-      {{ confirmDialog.cancelBtn }}
-    </button>
-
-    <button
-      class="col-span-1 button square danger small"
-      (click)="confirm()"
-      type="button"
-    >
-      {{ confirmDialog.confirmBtn }}
-    </button>
-  </div>
-</core-card>