nira-falcon 0.1.21 → 0.1.23

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

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

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

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

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

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

@@ -0,0 +1,131 @@
+.header {
+  background-color: var(--default-confirm-dialog-header-background-color);
+}
+.header-icon {
+  fill: var(--default-confirm-dialog-header-close-icon-color);
+  :hover {
+    fill: var(--default-confirm-dialog-header-close-icon-hover-color);
+    background-color: var(
+      --default-confirm-dialog-header-close-icon-hover-background-color
+    );
+  }
+}
+
+.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;
+    }
+  }
+
+  &.round {
+    border-radius: 30px;
+    background: transparent;
+
+    &:active {
+      color: #fff;
+      background-color: transparent;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+
+  &.square {
+    padding-inline: 16px;
+    border-radius: 0.25rem;
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { IModal, NiraModalConfig } from 'nira-modal';
+import { Subject } from 'rxjs';
+import { ConfirmDialog } from '../falconTypes';
+
+@Component({
+  selector: 'app-core-confirm-dialog',
+  templateUrl: './core-confirm-dialog.component.html',
+  styleUrls: ['./core-confirm-dialog.component.scss'],
+})
+export class CoreConfirmDialogComponent implements IModal {
+  @Input() closeSubject!: Subject<any>;
+  @Input() config!: NiraModalConfig;
+  confirmDialog!: ConfirmDialog;
+  async ngOnInit() {
+    this.confirmDialog = {
+      cancelBtn: this.config.data.cancelBtn,
+      confirmBtn: this.config.data.confirmBtn,
+      text: this.config.data.text,
+      title: this.config.data.title,
+    };
+  }
+  close() {
+    this.closeSubject.next('false');
+  }
+  confirm() {
+    this.closeSubject.next('true');
+  }
+}

package/src/lib/core-date-picker/core-date-picker-bluebird.component.html

@@ -0,0 +1,15 @@
+<core-input
+  [placeholder]="label"
+  [inputFormControl]="_inputFormControl"
+  (click)="isOpenCalendar = true"
+  [size]="size"
+>
+</core-input>
+<lib-nira-date-picker
+  [(isOpenCalendar)]="isOpenCalendar"
+  [defaultDate]="date ? date : defaultDate"
+  (datePickerResult)="onDatePickerResult($event)"
+  [selectToday]="canSelectToday"
+  (todayDate)="onTodayDate($event)"
+>
+</lib-nira-date-picker>

package/src/lib/core-date-picker/core-date-picker-falcon.component.html

@@ -0,0 +1,14 @@
+<core-input
+  [placeholder]="label"
+  [inputFormControl]="_inputFormControl"
+  (click)="isOpenCalendar = true"
+>
+</core-input>
+<lib-nira-date-picker
+  [(isOpenCalendar)]="isOpenCalendar"
+  [defaultDate]="date ? date : defaultDate"
+  (datePickerResult)="onDatePickerResult($event)"
+  [selectToday]="canSelectToday"
+  (todayDate)="onTodayDate($event)"
+>
+</lib-nira-date-picker>

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

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { environment } from '../../environments/environment';
+
+@Component({
+  selector: 'core-date-picker',
+  templateUrl: './core-date-picker' + environment.tempName,
+  styleUrls: ['./core-date-picker' + environment.styleName],
+})
+export class CoreDatePickerComponent implements OnInit {
+  _inputFormControl = new FormControl('', []);
+
+  @Input() canSelectToday: boolean = false;
+  @Input() defaultDate: string = '';
+  @Input() label: string = '';
+  @Input() set inputFormControl(value: FormControl) {
+    this._inputFormControl = value;
+  }
+  @Input() size = '';
+  isOpenCalendar: boolean = false;
+  date: string = '';
+  constructor(private changeDetectorRef: ChangeDetectorRef) {}
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+
+  onDatePickerResult(result: string) {
+    this._inputFormControl.setValue(result);
+    this.date = result;
+  }
+  onTodayDate(todayDate: string) {
+    this.date = todayDate;
+    this._inputFormControl.setValue(todayDate);
+  }
+}

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

@@ -0,0 +1,95 @@
+<div>
+  <div
+    class="container-input"
+    [ngClass]="{
+      error:
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors
+    }"
+  >
+    <input
+      [type]="'text'"
+      class="a-input-style"
+      [formControl]="inputFormControl"
+      (blur)="onBlur()"
+      (keyup)="change($event)"
+      (paste)="onPaste($event)"
+      [ngClass]="{
+        xsmall: size == 'xsmall',
+        'have-value': inputFormControl.value.toString().length > 0,
+        'highlight-background':
+          canHighlightBackground &&
+          inputFormControl.value.toString().length === 0 &&
+          !(
+            (inputFormControl.touched || inputFormControl.dirty) &&
+            inputFormControl.errors
+          ),
+        'disable-input': isDisable
+      }"
+      (keypress)="onKeyPress()"
+    />
+    <label
+      *ngIf="placeholder.length > 0"
+      [ngClass]="{ xsmall: size == 'xsmall' }"
+      >{{ placeholder }}
+    </label>
+    <div class="label-error overflow-hidden">
+      <span
+        class="label-number"
+        *ngIf="
+          canShowWordifyFa &&
+          inputFormControl.value.toString().length > 0 &&
+          inputType === 'number'
+        "
+        ><app-core-number
+          [canShowWordInToolTip]="false"
+          [type]="'word'"
+          [number]="inputFormControl.value"
+        ></app-core-number
+      ></span>
+
+      <span
+        *ngIf="
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors?.['required']
+      "
+        >این فیلد خالی است</span
+      >
+      <span
+        *ngIf="
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors?.['prePayment']
+      "
+        >مبلغ صحیح نیست</span
+      >
+      <span
+        *ngIf="
+      (inputFormControl.touched || inputFormControl.dirty) &&
+      inputFormControl.errors?.['minlength']
+    "
+      >
+        حداقل تعداد کارکتر
+        {{inputFormControl.errors?.['minlength'].requiredLength|persianDigits}}
+        عدد باشد
+      </span>
+      <span
+        *ngIf="
+      (inputFormControl.touched || inputFormControl.dirty) &&
+      inputFormControl.errors?.['maxlength']
+    "
+      >
+        حداکثر تعداد کارکتر
+        {{inputFormControl.errors?.['maxlength'].requiredLength |persianDigits}}
+        عدد باشد
+      </span>
+      <span
+        *ngIf="
+      (inputFormControl.touched || inputFormControl.dirty) &&
+      inputFormControl.errors?.['pattern']?.requiredPattern=='^09[0-9]{9}$'
+    "
+      >
+        شماره همراه اشتباه هست
+      </span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,152 @@
+.container {
+  position: relative;
+}
+
+input:focus {
+  border: 2px solid blue;
+}
+
+input {
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  &.xsmall {
+    height: 30px !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
+  }
+}
+
+.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: rgb(255, 255, 255);
+  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: transparent;
+  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;
+    &.xsmall {
+      top: 8px !important;
+    }
+  }
+
+  input {
+    &:focus + label,
+    &.have-value + label {
+      top: -10px;
+      font-size: 10px;
+      z-index: 3;
+      &.xsmall {
+        top: -8px !important;
+      }
+    }
+
+    &: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-falcon.component.html

@@ -0,0 +1,90 @@
+<div>
+  <div
+    class="container-input"
+    [ngClass]="{
+      error:
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors
+    }"
+  >
+    <input
+      [type]="inputType"
+      class="a-input-style"
+      [formControl]="inputFormControl"
+      (blur)="onBlur()"
+      (keyup)="change($event)"
+      (paste)="onPaste($event)"
+      [ngClass]="{
+        'have-value': inputFormControl.value.toString().length > 0,
+        'highlight-background':
+          canHighlightBackground &&
+          inputFormControl.value.toString().length === 0 &&
+          !(
+            (inputFormControl.touched || inputFormControl.dirty) &&
+            inputFormControl.errors
+          ),
+        'disable-input': isDisable
+      }"
+      (keypress)="onKeyPress()"
+    />
+    <label *ngIf="placeholder.length > 0">{{ placeholder }} </label>
+    <div class="label-error overflow-hidden">
+      <span
+        class="label-number"
+        *ngIf="
+          canShowWordifyFa &&
+          inputFormControl.value.toString().length > 0 &&
+          inputType === 'number'
+        "
+        ><app-core-number
+          [canShowWordInToolTip]="false"
+          [type]="'word'"
+          [number]="inputFormControl.value"
+        ></app-core-number
+      ></span>
+
+      <span
+        *ngIf="
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors?.['required']
+      "
+        >این فیلد خالی است</span
+      >
+      <span
+        *ngIf="
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors?.['prePayment']
+      "
+        >مبلغ صحیح نیست</span
+      >
+      <span
+        *ngIf="
+      (inputFormControl.touched || inputFormControl.dirty) &&
+      inputFormControl.errors?.['minlength']
+    "
+      >
+        حداقل تعداد کارکتر
+        {{inputFormControl.errors?.['minlength'].requiredLength|persianDigits}}
+        عدد باشد
+      </span>
+      <span
+        *ngIf="
+      (inputFormControl.touched || inputFormControl.dirty) &&
+      inputFormControl.errors?.['maxlength']
+    "
+      >
+        حداکثر تعداد کارکتر
+        {{inputFormControl.errors?.['maxlength'].requiredLength |persianDigits}}
+        عدد باشد
+      </span>
+      <span
+        *ngIf="
+      (inputFormControl.touched || inputFormControl.dirty) &&
+      inputFormControl.errors?.['pattern']?.requiredPattern=='^09[0-9]{9}$'
+    "
+      >
+        شماره همراه اشتباه هست
+      </span>
+    </div>
+  </div>
+</div>