nira-falcon 0.1.22 → 0.1.23

package/src/lib/core-radio-buttons/core-radio-buttons.component.html

@@ -0,0 +1,17 @@
+<div class="root" [ngClass]="{ 'container-row': layout == 'row' }">
+  <div
+    class="radio-bottom"
+    [ngClass]="{ 'item-row-reverse': layout == 'row' }"
+    *ngFor="let item of newItems"
+    (click)="onItemClick(item)"
+  >
+    <input
+      type="radio"
+      [name]="name"
+      [value]="item.value == selectedItem.value"
+      [checked]="item.value == selectedItem.value"
+      (click)="onItemClick(item)"
+    />
+    <span class="label">{{ item.title }}</span>
+  </div>
+</div>

package/src/lib/core-radio-buttons/core-radio-buttons.component.scss

@@ -0,0 +1,46 @@
+@mixin userSelect {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.container-row {
+  flex-direction: row;
+}
+.item-row-reverse {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.radio-bottom {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: auto;
+  cursor: pointer;
+  @include userSelect();
+}
+input[type="radio"] {
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-clip: content-box;
+  border: 1px solid var(--default-radio-buttons-input-border-color);
+  background-color: var(--default-radio-buttons-input-background-color);
+}
+
+input[type="radio"]:checked {
+  background-color: var(--default-radio-buttons-background-color);
+  padding: 4px;
+  border: 2px solid var(--default-radio-buttons-border-color);
+}
+.label {
+  font-size: small;
+  font-weight: 500;
+  margin-inline: 4px;
+}

package/src/lib/core-radio-buttons/core-radio-buttons.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoreRadioButtonsComponent } from './core-radio-buttons.component';
+
+describe('CoreRadioButtonsComponent', () => {
+  let component: CoreRadioButtonsComponent;
+  let fixture: ComponentFixture<CoreRadioButtonsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CoreRadioButtonsComponent]
+    });
+    fixture = TestBed.createComponent(CoreRadioButtonsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/core-radio-buttons/core-radio-buttons.component.ts

@@ -0,0 +1,64 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+type MenuItem<T> = {
+  title: T;
+  value: T;
+};
+type LayoutRadioButtons = 'row' | 'column';
+@Component({
+  selector: 'core-radio-buttons',
+  templateUrl: './core-radio-buttons.component.html',
+  styleUrls: ['./core-radio-buttons.component.scss'],
+})
+export class CoreRadioButtonsComponent<T> {
+  selectedItem: MenuItem<T> = {} as MenuItem<T>;
+  titleKeyObject!: keyof string | number;
+  valueKeyObject!: keyof string | number;
+  _defaultValue = undefined;
+  newItems: MenuItem<T>[] = [];
+  _items: any = [];
+  initCounter = 0;
+  @Input() set items(data: any) {
+    this._items = data;
+    this.initCounter++;
+    this.init();
+  }
+  @Input({ required: true }) set defaultValue(data: any) {
+    this._defaultValue = data;
+    this.initCounter++;
+    this.init();
+  }
+  @Input() titleKey!: string;
+  @Input() valueKey!: string;
+  @Input() layout: LayoutRadioButtons = 'column';
+  @Input() name: string = 'radio';
+  @Output() onChange = new EventEmitter<string>();
+  changeItemsType(items: any[]): MenuItem<T>[] {
+    return items.map((item) => {
+      return {
+        title: item[this.titleKeyObject],
+        value: item[this.valueKeyObject],
+      };
+    });
+  }
+  init() {
+    if (this.initCounter !== 2) {
+      return;
+    }
+    type ObjectKey = (typeof this._items)[0];
+    this.titleKeyObject = this.titleKey as ObjectKey;
+    this.valueKeyObject = this.valueKey as ObjectKey;
+    this.newItems = this.changeItemsType(this._items);
+    if (this._defaultValue === undefined) {
+      this.onItemClick(this.newItems[0]);
+    } else {
+      this.onItemClick(
+        this.newItems.find((item) => item.value == this._defaultValue)
+      );
+    }
+  }
+  onItemClick(item: MenuItem<T> | undefined): void {
+    if (!item) return;
+    this.selectedItem = item;
+    this.onChange.emit(String(item.value));
+  }
+}

package/src/lib/core-search-box/core-search-box.component.html

@@ -0,0 +1,14 @@
+<div class="search-box flex">
+  <input
+    type="search"
+    placeholder="{{ placeholder }}"
+    [(ngModel)]="value"
+    (ngModelChange)="change($event)"
+    class="box-border border rounded-r marker:focus:outline-0"
+  />
+  <div
+    class="search-button bg-white border border-r-0 border-gray-400 rounded fill-secondary-text-color cursor-pointer rounded-l"
+  >
+    <search-icon></search-icon>
+  </div>
+</div>

package/src/lib/core-search-box/core-search-box.component.scss

@@ -0,0 +1,37 @@
+.search-box {
+  width: 100%;
+  box-sizing: border-box;
+
+  input {
+    width: calc(100% - 40px);
+    color: var(--default-search-box-text-color);
+    font-size: 0.875rem;
+    padding: 0.1875rem 0.75rem;
+    border-color: var(--default-search-box-border-color);
+    &:hover {
+      border-color: var(--default-search-box-hover-border-color);
+    }
+    &:focus {
+      border-color: var(--default-search-box-focus-border-color);
+    }
+    &:hover > input,
+    &:hover > .search-button {
+      border-color: var(--default-search-box-icon-hover-border-color);
+    }
+  }
+
+  .search-button {
+    color: var(--default-search-box-icon-color);
+    left: -1px;
+    top: 4px;
+    height: 1.813rem;
+    padding: 0.3125rem 0.65rem;
+    border-radius: 0.25rem 0 0 0.25rem;
+    transition: 0.15s;
+
+    &:hover {
+      background: var(--default-search-box-icon-hover-border-color);
+      fill: var(--default-search-box-icon-hover-color);
+    }
+  }
+}

package/src/lib/core-search-box/core-search-box.component.ts

@@ -0,0 +1,15 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'core-search-box',
+  templateUrl: './core-search-box.component.html',
+  styleUrls: ['./core-search-box.component.scss'],
+})
+export class CoreSearchBoxComponent {
+  @Input() placeholder = '';
+  @Output() onChange: EventEmitter<string> = new EventEmitter();
+  value: string = '';
+  change(event: any) {
+    this.onChange.emit(event);
+  }
+}

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

@@ -0,0 +1,57 @@
+<div tabindex="-1" class="dropdown" (focusout)="focusOut()">
+  <div
+    class="select"
+    [ngClass]="{
+      'small': size=='small',
+      'select-clicked': isOpenMenu,
+      'highlight-background':
+        canHighlightBackground &&
+        (selectedItem | json) === ({} | json) &&
+        !(inputFormControl.touched && inputFormControl.errors),
+      selectError: inputFormControl.touched && inputFormControl.errors ,
+      'disable-selector': disabled,
+
+    }"
+    (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 class="label-error overflow-hidden">
+    <span
+      *ngIf="
+       inputFormControl.touched  &&
+      inputFormControl.errors?.['required']"
+      >این فیلد خالی است</span
+    >
+  </div>
+</div>

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

@@ -0,0 +1,129 @@
+@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;
+
+  .disable-selector {
+    background-color: #f7f7f7 !important;
+    border: 1px dashed #ced4da !important;
+    cursor: no-drop !important;
+  }
+  .highlight-background {
+    background-color: #dcf6ff !important;
+  }
+  .select {
+    background: #fff;
+    color: #304050;
+    display: flex;
+    height: 42px;
+    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;
+    }
+    &.small {
+      height: 34px;
+      border-radius: 8px;
+      .placeholder-top {
+        background-color: transparent;
+      }
+    }
+    .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-select/core-select-falcon.component.html

@@ -0,0 +1,56 @@
+<div tabindex="-1" class="dropdown" (focusout)="focusOut()">
+  <div
+    class="select"
+    [ngClass]="{
+      'select-clicked': isOpenMenu,
+      'highlight-background':
+        canHighlightBackground &&
+        (selectedItem | json) === ({} | json) &&
+        !(inputFormControl.touched && inputFormControl.errors),
+      selectError: inputFormControl.touched && inputFormControl.errors ,
+      'disable-selector': disabled,
+
+    }"
+    (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 class="label-error overflow-hidden">
+    <span
+      *ngIf="
+       inputFormControl.touched  &&
+      inputFormControl.errors?.['required']"
+      >این فیلد خالی است</span
+    >
+  </div>
+</div>

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

@@ -0,0 +1,123 @@
+@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;
+
+  .disable-selector {
+    background-color: #f7f7f7 !important;
+    border: 1px dashed #ced4da !important;
+    cursor: no-drop !important;
+  }
+  .highlight-background {
+    background-color: #dcf6ff !important;
+  }
+  .select {
+    background: #fff;
+    color: #304050;
+    display: flex;
+    height: 42px;
+    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;
+    }
+
+    .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-select/core-select.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CoreSelectComponent } from './core-select.component';
+
+describe('CoreSelectComponent', () => {
+  let component: CoreSelectComponent;
+  let fixture: ComponentFixture<CoreSelectComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [CoreSelectComponent]
+    });
+    fixture = TestBed.createComponent(CoreSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,93 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { environment } from '../../environments/environment';
+type MenuItem<T> = {
+  title: T;
+  value: T;
+};
+@Component({
+  selector: 'core-select',
+  templateUrl: './core-select' + environment.tempName,
+  styleUrls: ['./core-select' + environment.styleName],
+})
+export class CoreSelectComponent<T> {
+  selectedItem: MenuItem<T> = {} as MenuItem<T>;
+  titleKeyObject!: keyof string | number;
+  valueKeyObject!: keyof string | number;
+  newItems: MenuItem<T>[] = [];
+  isOpenMenu = false;
+  _items: any = [];
+  _defaultValue!: T;
+  @Input() titleKey!: string;
+  @Input() valueKey!: string;
+  @Input() size: string='small';
+  @Input() canHighlightBackground = false;
+  @Input() set items(data: any) {
+    this._items = data;
+    this.init();
+  }
+  @Input() set defaultValue(data: T) {
+    this._defaultValue = data;
+    this.init();
+  }
+  @Input() label: string = '';
+  @Input() disabled: boolean = false;
+  @Output() onItemSelected = new EventEmitter<any>();
+  @Input() inputFormControl: FormControl = new FormControl('', []);
+
+  constructor(private cdr: ChangeDetectorRef) {}
+  init() {
+    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.inputFormControl.setValue(this._defaultValue);
+    this.onItemSelect(
+      this.newItems.find((item) => item.value == this._defaultValue),
+      false
+    );
+  }
+  ngOnInit(): void {
+    this.init();
+  }
+
+  changeItemsType(items: any[]): MenuItem<T>[] {
+    return items.map((item) => {
+      return {
+        title: item[this.titleKeyObject],
+        value: item[this.valueKeyObject],
+      };
+    });
+  }
+
+  openMenuClick() {
+    if (this.disabled) return;
+    this.isOpenMenu = !this.isOpenMenu;
+  }
+
+  onItemSelect(selectedItem: MenuItem<T> | undefined, isFromUi: boolean): void {
+    if (isFromUi) this.inputFormControl.markAsTouched();
+    this.isOpenMenu = false;
+    if (!selectedItem) {
+      this.selectedItem = {} as MenuItem<T>;
+      return;
+    }
+    this.selectedItem = selectedItem;
+    const mainItem = this._items.find(
+      (item: any) => item[this.valueKeyObject] === selectedItem.value
+    );
+    this.inputFormControl.setValue(selectedItem.value);
+    this.onItemSelected.emit(mainItem);
+  }
+  focusOut() {
+    this.isOpenMenu = false;
+    this.inputFormControl.markAsTouched();
+  }
+}