nira-falcon 0.1.22 → 0.1.24

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

@@ -0,0 +1,141 @@
+.container {
+  position: relative;
+}
+
+input:focus {
+  border: 2px solid blue;
+}
+
+input {
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+}
+
+.highlight-background {
+  background-color: #dcf6ff !important;
+}
+
+.icon-style {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.icon-style-email {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+}
+
+.a-input-style {
+  height: 42px;
+  width: 100%;
+  padding: 16px;
+  outline: none;
+  caret-color: rgba(2, 2, 2, 0.7);
+  background-color: rgba(242, 244, 247, 0.15);
+  color: rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+}
+
+.a-input-style:focus {
+  background-color: rgba(242, 244, 247, 0.05);
+  border-radius: 3px;
+  border: 1px solid rgba(19, 92, 175, 0.397);
+}
+
+.a-input-style::placeholder {
+  height: 15px;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 15px;
+  letter-spacing: -0.03em;
+  color: rgba(194, 194, 194, 0.7);
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #ffffff00;
+  &.have-value {
+    -webkit-text-fill-color: #181818 !important;
+  }
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.label-error {
+  color: red;
+  font-size: 13px;
+  margin-block-start: 4px;
+  min-height: 21px;
+  width: 100%;
+  display: inline-block !important;
+  text-align: start;
+}
+
+.label-number {
+  color: #6a6a6a;
+}
+
+.error input {
+  border: 1px solid #fe5f5f;
+}
+
+.container-input {
+  background: white;
+  position: relative;
+
+  .disable-input {
+    background-color: #f7f7f7;
+    border: 1px dashed #ced4da;
+    pointer-events: none;
+  }
+  label {
+    position: absolute;
+    right: 20px;
+    top: 12px;
+    color: gray;
+    font-size: 12px;
+    padding: 0px 8px;
+    border-radius: 15px;
+    pointer-events: none;
+    transition: 0.2s;
+  }
+
+  input {
+    &:focus + label,
+    &.have-value + label {
+      top: -10px;
+      font-size: 10px;
+      z-index: 3;
+    }
+
+    &:focus + label::after,
+    &.have-value + label::after {
+      content: "";
+      display: block;
+      background: rgb(255, 255, 255);
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      top: 10px;
+      right: 0;
+      transition: 0.3s;
+      z-index: -1;
+    }
+  }
+}

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

@@ -0,0 +1,112 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { environment } from '../../environments/environment';
+type InputType = 'number' | 'password' | 'text';
+@Component({
+  selector: 'core-input',
+  templateUrl: './core-input' + environment.tempName,
+  styleUrls: ['./core-input' + environment.styleName],
+})
+export class CoreInputComponent {
+  inputType!: InputType;
+  isDisable = false;
+  lastValue = '';
+  @Input() set type(value: InputType) {
+    this.inputType = value;
+  }
+  @Input() canShowWordifyFa = false;
+  @Input() canSplitNumber = false;
+  @Input() canHighlightBackground = false;
+  @Input() maxLength = 2000;
+  @Input() size = '';
+  @Input() inputFormControl: FormControl = new FormControl('', []);
+  @Input() set disable(value: boolean) {
+    this.isDisable = value;
+    if (value) {
+      this.inputFormControl.disable();
+    } else {
+      this.inputFormControl.enable();
+    }
+  }
+  @Input() placeholder = '';
+  @Output() onChange: EventEmitter<string> = new EventEmitter();
+  @Output() onBlurEmit: EventEmitter<string> = new EventEmitter();
+
+  ngOnInit() {
+    this.inputFormControl.valueChanges.subscribe((change) => {
+      if (this.lastValue !== change) {
+        this.formatPrice(change.toString());
+      }
+    });
+  }
+  change(event: any) {
+    this.formatPrice(event.srcElement.value);
+  }
+
+  onPaste(event: any) {
+    setTimeout(() => {
+      const value = event.srcElement.value;
+      this.inputFormControl.markAsTouched();
+      this.inputFormControl.setValue(value);
+      this.lastValue = value;
+      if (this.inputType === 'number' && this.canSplitNumber) {
+        this.onChange.emit(value.replaceAll(',', ''));
+      } else {
+        if (!this.inputFormControl.errors) {
+          this.onChange.emit(value);
+        }
+      }
+    }, 10);
+  }
+
+  onBlur() {
+    if (this.inputType === 'number' && this.canSplitNumber) {
+      this.onChange.emit(this.inputFormControl.value.replaceAll(',', ''));
+    } else {
+      if (!this.inputFormControl.errors) {
+        this.onChange.emit(this.inputFormControl.value);
+      }
+    }
+    this.onBlurEmit.emit(this.inputFormControl.value);
+  }
+
+  onKeyPress() {
+    if (this.inputFormControl.value.toString().length == this.maxLength) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  formatPrice(event: any) {
+    if (this.inputType === 'number' && this.canSplitNumber) {
+      setTimeout(() => {
+        let value = event;
+        value = Number(value.replaceAll(',', ''));
+        if (isNaN(value)) {
+          this.inputFormControl.setValue('');
+          this.lastValue = value;
+        } else {
+          const formatValue = value
+            .toString()
+            .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+          this.inputFormControl.setValue(formatValue);
+          this.lastValue = formatValue;
+        }
+        if (!this.inputFormControl.errors) {
+          this.onChange.emit(this.inputFormControl.value.replaceAll(',', ''));
+        }
+      }, 10);
+    } else {
+      if (!this.inputFormControl.errors) {
+        this.onChange.emit(this.inputFormControl.value);
+      }
+    }
+  }
+}

package/src/lib/core-multi-select/core-multi-select-row/core-multi-select-row.component.html

@@ -0,0 +1,3 @@
+<li [ngClass]="{ active: _isSelected }" (click)="onItemSelect()">
+  {{ item.title }}
+</li>

package/src/lib/core-multi-select/core-multi-select-row/core-multi-select-row.component.scss

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

package/src/lib/core-multi-select/core-multi-select-row/core-multi-select-row.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-core-multi-select-row',
+  templateUrl: './core-multi-select-row.component.html',
+  styleUrls: ['./core-multi-select-row.component.scss'],
+})
+export class CoreMultiSelectRowComponent {
+  @Input() set isSelected(value: boolean) {
+    this._isSelected = value;
+  }
+  @Input() item!: any;
+  @Output() onSelect: EventEmitter<boolean> = new EventEmitter();
+  _isSelected = false;
+
+  onItemSelect() {
+    this.onSelect.emit(true);
+  }
+}

package/src/lib/core-multi-select/core-multi-select.component.html

@@ -0,0 +1,41 @@
+<div tabindex="-1" class="dropdown" (focusout)="focusOut()">
+  <div
+    class="select"
+    [ngClass]="{
+      'select-clicked': isOpenMenu,
+      selectError: inputFormControl.touched && inputFormControl.errors
+    }"
+    (click)="openMenuClick()"
+  >
+    <span class="placeholder-top" *ngIf="isSelectedItems">{{ label }}</span>
+    <arrow-down-icon
+      class="caret fill-secondary-text-color h-6"
+      [ngClass]="{ 'caret-rotate': isOpenMenu }"
+    ></arrow-down-icon>
+
+    <span
+      class="text-content"
+      [ngClass]="[
+        label.length > 0 && !isSelectedItems ? 'placeholder' : 'selected'
+      ]"
+      >{{ label.length > 0 && !isSelectedItems ? label : text }}</span
+    >
+  </div>
+  <ul class="menu" [ngClass]="{ 'menu-open': isOpenMenu }">
+    <app-core-multi-select-row
+      *ngFor="let item of newItems"
+      [item]="item"
+      [isSelected]="selectedItems[item.value] ? true : false"
+      (onSelect)="onItemSelect(item, true)"
+    >
+    </app-core-multi-select-row>
+  </ul>
+  <div class="label-error overflow-hidden">
+    <span
+      *ngIf="
+       inputFormControl.touched  &&
+      inputFormControl.errors?.['required']"
+      >این فیلد خالی است</span
+    >
+  </div>
+</div>

package/src/lib/core-multi-select/core-multi-select.component.scss

@@ -0,0 +1,119 @@
+@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;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    align-items: center;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    padding: 8px;
+    cursor: pointer;
+    transition: background 0.3s;
+    font-size: 12px;
+    @include userSelect();
+    &:hover {
+      background: #fbfbfb;
+    }
+    .text-content {
+      white-space: nowrap;
+      display: block;
+      width: 263px;
+      overflow: hidden;
+      word-wrap: break-word;
+      text-overflow: ellipsis;
+    }
+    .selected {
+      padding-inline: 12px;
+      font-size: 14px;
+      color: rgba(0, 0, 0, 0.7);
+      @include userSelect();
+    }
+    .placeholder-top {
+      position: absolute;
+      right: 13px;
+      background: white;
+      top: -8px;
+      padding-inline: 6px;
+      font-size: 11px;
+      color: #888;
+    }
+    .caret {
+      color: #595c5f;
+      @include userSelect();
+    }
+    .caret-rotate {
+      transform: rotate(180deg);
+    }
+    .placeholder {
+      color: #888;
+      padding-inline: 16px;
+    }
+  }
+  .select-clicked {
+    border: 1px solid rgba(19, 92, 175, 0.397);
+  }
+
+  .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: 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: #f6f6f6;
+      }
+    }
+    .active {
+      background: #ced4da;
+    }
+  }
+  .menu-open {
+    display: block;
+    opacity: 1;
+  }
+  .label-error {
+    color: red;
+    font-size: 13px;
+    margin-block-start: 4px;
+    min-height: 21px;
+    width: 100%;
+    display: inline-block !important;
+    text-align: start;
+  }
+  .selectError {
+    border: 1px solid #fe5f5f !important;
+  }
+}

package/src/lib/core-multi-select/core-multi-select.component.ts

@@ -0,0 +1,139 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+interface ISelectedItemsDictionary {
+  [index: string]: any;
+}
+@Component({
+  selector: 'core-multi-select',
+  templateUrl: './core-multi-select.component.html',
+  styleUrls: ['./core-multi-select.component.scss'],
+})
+export class CoreMultiSelectComponent {
+  selectedItems: ISelectedItemsDictionary[] = [];
+  newItems: any[] = [];
+  isOpenMenu = false;
+  _items: any = [];
+  _defaultValue = [];
+  _titleKey!: any;
+  _valueKey!: any;
+  initCounter = 0;
+  hasTitleKey = false;
+  hasValueKey = false;
+  hasItems = false;
+  hasDefaultValue = false;
+  text = '';
+  @Input() set titleKey(data: any) {
+    this._titleKey = data;
+    this.hasTitleKey = true;
+    this.init();
+  }
+  @Input() set valueKey(data: any) {
+    this._valueKey = data;
+    this.hasValueKey = true;
+    this.init();
+  }
+  @Input() set items(data: any) {
+    this._items = data;
+    this.hasItems = true;
+    this.init();
+  }
+  @Input({ required: true }) set defaultValue(data: any) {
+    this._defaultValue = data;
+    this.hasDefaultValue = true;
+    this.init();
+  }
+  @Input() label: string = '';
+  @Input() singleSelectItems: string[] = [];
+  @Output() onItemSelected = new EventEmitter<any[]>();
+  @Input() inputFormControl: FormControl = new FormControl('', []);
+
+  get isSelectedItems() {
+    return Object.keys(this.selectedItems).length > 0 ? true : false;
+  }
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  init() {
+    if (
+      this.hasTitleKey &&
+      this.hasValueKey &&
+      this.hasItems &&
+      this.hasDefaultValue
+    ) {
+      this.newItems = this.changeItemsType(this._items);
+    }
+  }
+
+  ngOnInit(): void {
+    if (this._defaultValue.length == 0) return;
+    this._defaultValue.forEach((item1: any, index: number) => {
+      const value = this.newItems.find((item: any) => item.value === item1);
+      if (value) {
+        this.selectedItems[value.value] = value;
+      }
+    });
+  }
+  ngAfterViewInit(): void {
+    this.showText();
+    this.cdr.detectChanges();
+  }
+
+  onItemSelect(selectedItem: any, isFromUi: boolean): void {
+    if (this.selectedItems[selectedItem.value]) {
+      delete this.selectedItems[selectedItem.value];
+    } else {
+      let flag = false;
+      Object.keys(this.selectedItems).forEach((item) => {
+        if (this.singleSelectItems.find((data) => data == item)) {
+          flag = true;
+          return;
+        }
+      });
+      if (
+        Object.keys(this.selectedItems).length > 0 &&
+        this.singleSelectItems.find((data) => data == selectedItem.value)
+      ) {
+      } else if (!flag) this.selectedItems[selectedItem.value] = selectedItem;
+    }
+    this.showText();
+    this.onItemSelected.emit(this.selectedItems);
+  }
+
+  showText() {
+    let text = '';
+    const items = Object.values(this.selectedItems);
+    items.forEach((item1: any, index: number) => {
+      if (index < items.length - 1) {
+        text = item1.title + ' , ' + text;
+      } else {
+        text = text + item1.title;
+      }
+    });
+    this.text = text;
+    this.inputFormControl.setValue(this.text);
+  }
+
+  changeItemsType(items: any[]): any[] {
+    return items.map((item) => {
+      return {
+        title: item[this._titleKey],
+        value: item[this._valueKey],
+      };
+    });
+  }
+
+  openMenuClick() {
+    this.isOpenMenu = !this.isOpenMenu;
+  }
+
+  focusOut() {
+    this.isOpenMenu = false;
+    this.inputFormControl.markAsTouched();
+  }
+}

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

@@ -0,0 +1,3 @@
+<span [title]="toolTipText(number)"
+  >{{ wordifyFa(number) | persianDigits }} {{ canShowIRR ? "ریال" : "" }}
+</span>

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

@@ -0,0 +1 @@
+ 

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

@@ -0,0 +1,45 @@
+import { Component, Input } from '@angular/core';
+import { WordifyFa } from '../wordify';
+
+@Component({
+  selector: 'app-core-number',
+  templateUrl: './core-number.component.html',
+  styleUrls: ['./core-number.component.scss'],
+})
+export class CoreNumberComponent {
+  @Input() number: number | string | undefined = '';
+  @Input() type: 'number' | 'word' = 'number';
+  @Input() canSplitNumbers = false;
+  @Input() canShowWordInToolTip = false;
+  @Input() canShowIRR = false;
+
+  wordifyFa(number: string | number | undefined) {
+    if (number === undefined) {
+      return '';
+    }
+    if (this.type === 'number') {
+      if (this.canSplitNumbers) {
+        return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+      } else {
+        return number;
+      }
+    } else {
+      const newNumber = Number(number.toString().replaceAll(',', ''));
+      if (newNumber > 10) {
+        return WordifyFa(newNumber / 10) + ' تومان ';
+      } else {
+        return WordifyFa(number);
+      }
+    }
+  }
+
+  toolTipText(number: string | number | undefined) {
+    if (this.number === undefined) return '';
+    if (!this.canShowWordInToolTip) return '';
+    if (number && +number > 10) {
+      return WordifyFa(+number / 10) + ' تومان ';
+    } else {
+      return WordifyFa(number);
+    }
+  }
+}

package/src/lib/core-page-title/core-page-title.component.html

@@ -0,0 +1,14 @@
+<div
+  class="container-page core-page-title flex flex-col text-right justify-center rounded-lg pt-2 pb-7 px-10 h-40 shadow-md"
+>
+  <div class="title my-5 w-5/6">
+    <span class="title-text text-2xl font-bold">
+      {{ title }}
+    </span>
+  </div>
+  <div class="description w-5/6">
+    <p class="description-text text-base">
+      {{ description }}
+    </p>
+  </div>
+</div>

package/src/lib/core-page-title/core-page-title.component.scss

@@ -0,0 +1,16 @@
+.core-page-title {
+  background-image: url("../../assets/images/hub-dashboard-title-bg.png");
+  background-repeat: no-repeat;
+  background-position: left;
+  background-size: contain;
+}
+
+.description-text {
+  color: var(--default-page-title-text-color);
+}
+.title-text {
+  color: var(--default-page-title-text-color);
+}
+.container-page {
+  background-color: var(--default-page-title-background-color);
+}

package/src/lib/core-page-title/core-page-title.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'core-page-title',
+  templateUrl: './core-page-title.component.html',
+  styleUrls: ['./core-page-title.component.scss'],
+})
+export class CorePageTitleComponent {
+  @Input() title = '';
+  @Input() description = '';
+}