nira-falcon 0.1.22 → 0.1.23

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/falcon-lib",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package copy.json

@@ -0,0 +1,13 @@
+{
+  "name": "nira-falcon",
+  "version": "0.1.16",
+  "peerDependencies": {
+    "@angular/common": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "jalali-moment": "^3.3.11"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/package.json

@@ -1,26 +1,13 @@
-{
-  "name": "nira-falcon",
-  "version": "0.1.22",
-  "peerDependencies": {
-    "@angular/common": "^16.1.0",
-    "@angular/core": "^16.1.0",
-    "jalali-moment": "^3.3.11"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/nira-falcon.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/nira-falcon.mjs",
-      "esm": "./esm2022/nira-falcon.mjs",
-      "default": "./fesm2022/nira-falcon.mjs"
-    }
-  }
-}
+{
+  "name": "nira-falcon",
+  "version": "0.1.23",
+  "peerDependencies": {
+    "@angular/common": "^16.1.0",
+    "@angular/core": "^16.1.0",
+    "jalali-moment": "^3.3.11"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/environments/environment.ts

@@ -0,0 +1,7 @@
+export const environment = {
+  tempName: '-bluebird.component.html',
+  styleName: '-bluebird.component.scss',
+
+  // tempName: '-falcon.component.html',
+  // styleName: '-falcon.component.scss',
+};

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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>