nira-falcon 0.1.21 → 0.1.23

package/src/lib/core-table/core-table-status-column/core-table-status-column.component.scss

@@ -0,0 +1,14 @@
+.active {
+  background: var(--default-table-status-column-active-background-color);
+  color: var(--default-table-status-column-active-text-color);
+  border-radius: 16px;
+  padding: 2px 12px 2px 12px;
+  font-size: smaller;
+}
+.deActive {
+  color: var(--default-table-status-column-deActive-text-color);
+  background: var(--default-table-status-column-deActive-background-color);
+  border-radius: 16px;
+  padding: 2px 12px 2px 12px;
+  font-size: smaller;
+}

package/src/lib/core-table/core-table-status-column/core-table-status-column.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-core-table-status-column',
+  templateUrl: './core-table-status-column.component.html',
+  styleUrls: ['./core-table-status-column.component.scss'],
+})
+export class CoreTableStatusColumnComponent {
+  @Input({ required: true }) data!: any;
+  @Input({ required: true }) column!: any;
+}

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

@@ -0,0 +1,18 @@
+<div class="text-area-sec">
+  <textarea
+    rows="4"
+    (change)="change()"
+    [formControl]="textareaFormControl"
+    [ngClass]="{ 'have-value': textareaFormControl.value }"
+  ></textarea>
+  <label>{{ placeholder }} </label>
+  <div class="label-error overflow-hidden">
+    <span
+      *ngIf="
+      (textareaFormControl.touched || textareaFormControl.dirty) &&
+      textareaFormControl.errors?.['required']
+    "
+      >این فیلد خالی است</span
+    >
+  </div>
+</div>

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

@@ -0,0 +1,62 @@
+.text-area-sec {
+  background: var(--default-textarea-container-background-color);
+  position: relative;
+
+  label {
+    position: absolute;
+    right: 20px;
+    top: 8px;
+    color: var(--default-textarea-label-text-color);
+    font-size: 14px;
+    padding: 0px 8px;
+    border-radius: 15px;
+    pointer-events: none;
+    transition: 0.2s;
+  }
+
+  textarea {
+    direction: rtl;
+    width: 100%;
+    padding: 16px;
+    outline: none;
+    caret-color: var(--default-textarea-caret-color);
+    background-color: var(--default-textarea-background-color);
+    color: var(--default-textarea-text-color);
+    box-sizing: border-box;
+    border: 1px solid var(--default-textarea-border-color);
+    border-radius: 0.25rem;
+  }
+
+  textarea {
+    &:focus + label,
+    &.have-value + label {
+      top: -10px;
+      font-size: 0.7rem;
+      z-index: 1;
+    }
+
+    &:focus + label::after,
+    &.have-value + label::after {
+      content: "";
+      display: block;
+      background: white;
+      position: absolute;
+      width: 100%;
+      height: 3px;
+      top: 9px;
+      right: 0;
+      transition: 0.3s;
+      z-index: -1;
+    }
+  }
+}
+.label-error {
+  color: var(--default-textarea-validation-text-color);
+  font-size: 13px;
+  margin-block-start: 4px;
+  min-height: 21px;
+  text-align: start;
+}
+.error textarea {
+  border: 1px solid var(--default-textarea-validation-border-color);
+}

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

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'core-textarea',
+  templateUrl: './core-textarea.component.html',
+  styleUrls: ['./core-textarea.component.scss'],
+})
+export class CoreTextareaComponent {
+  @Input() textareaFormControl: FormControl = new FormControl('', []);
+  @Input() set model(value: string | null) {
+    if (value) {
+      this.textareaFormControl.setValue(value);
+    }
+  }
+  @Input() set disable(value: boolean) {
+    if (value) {
+      this.textareaFormControl.disable();
+    } else {
+      this.textareaFormControl.enable();
+    }
+  }
+  @Input() placeholder = '';
+  @Output() onChange: EventEmitter<string> = new EventEmitter();
+
+  change() {
+    if (!this.textareaFormControl.errors) {
+      this.onChange.emit(this.textareaFormControl.value);
+    }
+  }
+}

package/src/lib/core-time-picker/core-time-picker.component.html

@@ -0,0 +1,51 @@
+<div>
+  <div
+    class="container-input"
+    [ngClass]="{
+      error:
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors
+    }"
+  >
+    <time-icon
+      (click)="showSelectTimeModal()"
+      class="absolute left-3 top-3 fill-secondary-text-color h-5 cursor-pointer"
+    ></time-icon>
+    <input
+      [type]="'text'"
+      class="a-input-style have-value"
+      (keyup)="change($event)"
+      [formControl]="inputFormControl"
+      (blur)="onBlur()"
+      (paste)="onPaste($event)"
+      (keypress)="onKeyPress()"
+      [ngClass]="{
+        'have-value': inputFormControl.value.toString().length > 0,
+        'highlight-background':
+          canHighlightBackground &&
+          inputFormControl.value.toString().length === 0 &&
+          !(
+            (inputFormControl.touched || inputFormControl.dirty) &&
+            inputFormControl.errors
+          ),
+      }"
+    />
+
+    <label *ngIf="placeholder.length > 0">{{ placeholder }} </label>
+    <div class="label-error overflow-hidden">
+      <span
+        *ngIf="
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors?.['required']
+      "
+        >این فیلد خالی است</span
+      ><span
+        *ngIf="
+        (inputFormControl.touched || inputFormControl.dirty) &&
+        inputFormControl.errors?.['minlength']
+      "
+        >فرمت ساعت نامعتبر است</span
+      >
+    </div>
+  </div>
+</div>

package/src/lib/core-time-picker/core-time-picker.component.scss

@@ -0,0 +1,144 @@
+.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;
+  }
+}
+input[type="time"]::-webkit-calendar-picker-indicator {
+  display: none;
+  background: none;
+}
+/* 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-time-picker/core-time-picker.component.ts

@@ -0,0 +1,102 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { NiraModalService } from 'nira-modal';
+import { TimePickerModalComponent } from './time-picker-modal/time-picker-modal.component';
+
+@Component({
+  selector: 'core-time-picker',
+  templateUrl: './core-time-picker.component.html',
+  styleUrls: ['./core-time-picker.component.scss'],
+})
+export class CoreTimePickerComponent {
+  @Output() onSelect: EventEmitter<string> = new EventEmitter<string>();
+  @Output() onBlurEmit: EventEmitter<string> = new EventEmitter();
+  @Input() placeholder: string = '';
+  @Input() canHighlightBackground = false;
+  @Input() setCurrentTime = false;
+  @Input() inputFormControl: FormControl = new FormControl('', []);
+  selectedTime: string = '';
+  @Input() set defaultValue(data: string) {
+    this.selectedTime = data;
+  }
+  @Input() maxLength = 2000;
+  constructor(private niraModalService: NiraModalService) {}
+
+  ngOnInit(): void {
+    this.inputFormControl.addValidators(Validators.minLength(5));
+    if (this.setCurrentTime) {
+      var currentTime = new Date();
+      this.selectedTime =
+        String(
+          currentTime.getHours().toString().length > 1
+            ? currentTime.getHours().toString()
+            : '0' + currentTime.getHours().toString()
+        ) +
+        ':' +
+        String(
+          currentTime.getMinutes().toString().length > 1
+            ? currentTime.getMinutes().toString()
+            : '0' + currentTime.getMinutes().toString()
+        );
+
+      this.inputFormControl.setValue(this.selectedTime);
+      this.onSelect.emit(this.selectedTime);
+    }
+  }
+
+  showSelectTimeModal() {
+    const modal = this.niraModalService.open(TimePickerModalComponent, {
+      outsideClose: true,
+      data: this.selectedTime,
+    });
+    modal.afterClosed.subscribe((time: any) => {
+      if (time) {
+        this.selectedTime = time;
+        this.inputFormControl.setValue(this.selectedTime);
+        this.onSelect.emit(time);
+      }
+    });
+  }
+
+  focusOut() {
+    setTimeout(() => {
+      this.inputFormControl.markAsTouched();
+    }, 100);
+  }
+
+  change(event: any) {
+    setTimeout(() => {
+      let value = event.srcElement.value;
+      value = value.replaceAll(':', '');
+      if (isNaN(value)) {
+        this.inputFormControl.setValue('');
+      } else {
+        const formatValue = value
+          .toString()
+          .replace(/\B(?=(\d{2})+(?!\d))/g, ':');
+        this.inputFormControl.setValue(formatValue);
+      }
+      if (!this.inputFormControl.errors) {
+        this.onSelect.emit(this.inputFormControl.value);
+      }
+    }, 10);
+  }
+  onPaste(event: any) {
+    setTimeout(() => {
+      const value = event.srcElement.value;
+      this.inputFormControl.markAsTouched();
+      this.inputFormControl.setValue(value);
+      this.onSelect.emit(value);
+    }, 10);
+  }
+  onBlur() {
+    this.onBlurEmit.emit(this.inputFormControl.value);
+  }
+  onKeyPress() {
+    if (this.inputFormControl.value.toString().length > 4) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+}

package/src/lib/core-time-picker/time-picker-modal/time-picker-modal.component.html

@@ -0,0 +1,50 @@
+<div class="timepicker">
+  <div class="top">
+    <span class="h" (click)="onHourClick()" [class.active]="showHour">10</span
+    >:<span class="m" (click)="onMinutesClick()" [class.active]="showMin"
+      >15</span
+    >
+  </div>
+  <div class="circle">
+    <div *ngIf="showHour">
+      <div
+        class="hour"
+        *ngFor="let hour of hoursSubject | async"
+        [style]="{ left: hour.left, top: hour.top }"
+        (click)="onHourSelect(hour)"
+      >
+        {{ hour.text }}
+      </div>
+      <div
+        class="hour2"
+        *ngFor="let hour of hours2Subject | async"
+        [style]="{ left: hour.left, top: hour.top }"
+        (click)="onHourSelect(hour)"
+      >
+        {{ hour.text }}
+      </div>
+      <div class="mid"></div>
+    </div>
+    <div *ngIf="showMin">
+      <div
+        class="min"
+        *ngFor="let hour of minutesSubject | async"
+        [style]="{ left: hour.left, top: hour.top }"
+        (click)="onMinutesSelect(hour)"
+      >
+        {{ hour.text }}
+      </div>
+      <div class="mid"></div>
+    </div>
+  </div>
+  <div class="actions">
+    <core-btn
+      class="action ok"
+      (btnClicked)="submit()"
+      [colorState]="'success'"
+    >
+      انتخاب
+    </core-btn>
+    <core-btn class="action close" (btnClicked)="close()"> بستن </core-btn>
+  </div>
+</div>