nira-falcon 0.1.25 → 0.1.27

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

@@ -1,424 +0,0 @@
-.timepicker {
-  width: 300px;
-  height: 450px;
-  background-color: var(--default-time-picker-background-color);
-  position: relative;
-  font-family: Calibri;
-  .top {
-    background-color: var(--default-time-picker-header-background-color);
-    color: var(--default-time-picker-header-text-color);
-    height: 100px;
-    line-height: 100px;
-    font-size: 50px;
-    text-align: center;
-    .h {
-      :hover {
-        cursor: pointer;
-      }
-    }
-    .m {
-      :hover {
-        cursor: pointer;
-      }
-    }
-    .active {
-      color: var(--default-time-picker-header-item-active-text-color);
-    }
-  }
-  .circle {
-    user-select: none;
-    background-color: var(--default-time-picker-circle-background-color);
-    width: 250px;
-    height: 250px;
-    border-radius: 1000px;
-    position: relative;
-    top: 25px;
-    right: 25px;
-    box-sizing: border-box;
-    .mid {
-      position: absolute;
-      left: calc(50%);
-      top: calc(50%);
-      width: 2px;
-      height: 2px;
-      border-radius: 10px;
-      background-color: var(--default-time-picker-point-background-color);
-    }
-    .hour {
-      position: absolute;
-      height: 40px;
-      line-height: 40px;
-      width: 40px;
-      border-radius: 40px;
-      text-align: center;
-      &.selected {
-        background-color: var(
-          --default-time-picker-hour-hover-background-color
-        );
-        &::after {
-          content: "";
-        }
-      }
-      &::after {
-        z-index: -1;
-        background-color: var(
-          --default-time-picker-hour-hover-background-color
-        );
-        height: 1px;
-        width: 100%;
-        position: absolute;
-        transform: rotate(-90deg);
-        transform-origin: 100% 0%;
-        top: 50%;
-        width: 101px;
-        right: 50%;
-      }
-      &:hover {
-        color: var(--default-time-picker-hour-hover-text-color);
-        z-index: 2;
-        cursor: pointer;
-        &::after {
-          content: "";
-        }
-      }
-      &:nth-child(12):after {
-        transform: rotate(330deg);
-      }
-      &:nth-child(11):after {
-        transform: rotate(300deg);
-      }
-      &:nth-child(10):after {
-        transform: rotate(270deg);
-      }
-      &:nth-child(9):after {
-        transform: rotate(240deg);
-      }
-      &:nth-child(8):after {
-        transform: rotate(210deg);
-      }
-      &:nth-child(7):after {
-        transform: rotate(180deg);
-      }
-      &:nth-child(6):after {
-        transform: rotate(150deg);
-      }
-      &:nth-child(5):after {
-        transform: rotate(120deg);
-      }
-      &:nth-child(4):after {
-        transform: rotate(90deg);
-      }
-      &:nth-child(3):after {
-        transform: rotate(60deg);
-      }
-      &:nth-child(2):after {
-        transform: rotate(30deg);
-      }
-      &:nth-child(1):after {
-        transform: rotate(0deg);
-      }
-    }
-    .hour2 {
-      z-index: 2;
-      position: absolute;
-      height: 30px;
-      line-height: 30px;
-      width: 30px;
-      border-radius: 40px;
-      text-align: center;
-      font-size: 14px;
-      &:hover {
-        color: var(--default-time-picker-hour-hover-text-color);
-        cursor: pointer;
-        &::after {
-          content: "";
-          background-color: var(
-            --default-time-picker-hour-hover-background-color
-          );
-          height: 1px;
-          width: 100%;
-          position: absolute;
-          transform: rotate(-90deg);
-          transform-origin: 100% 0%;
-          top: 50%;
-          width: 64px;
-          right: 50%;
-          z-index: -1;
-        }
-      }
-      &:nth-child(24):after {
-        transform: rotate(690deg);
-      }
-      &:nth-child(23):after {
-        transform: rotate(660deg);
-      }
-      &:nth-child(22):after {
-        transform: rotate(630deg);
-      }
-      &:nth-child(21):after {
-        transform: rotate(600deg);
-      }
-      &:nth-child(20):after {
-        transform: rotate(570deg);
-      }
-      &:nth-child(19):after {
-        transform: rotate(540deg);
-      }
-      &:nth-child(18):after {
-        transform: rotate(510deg);
-      }
-      &:nth-child(17):after {
-        transform: rotate(480deg);
-      }
-      &:nth-child(16):after {
-        transform: rotate(450deg);
-      }
-      &:nth-child(15):after {
-        transform: rotate(420deg);
-      }
-      &:nth-child(14):after {
-        transform: rotate(390deg);
-      }
-      &:nth-child(13):after {
-        transform: rotate(360deg);
-      }
-    }
-    .min {
-      position: absolute;
-      height: 20px;
-      line-height: 20px;
-      width: 20px;
-      border-radius: 40px;
-      text-align: center;
-      font-size: 12px;
-      &:hover {
-        background-color: var(
-          --default-time-picker-hour-hover-background-color
-        );
-        color: var(--default-time-picker-hour-hover-text-color);
-        cursor: pointer;
-        &::after {
-          content: "";
-          background-color: var(
-            --default-time-picker-hour-hover-background-color
-          );
-          height: 1px;
-          width: 100%;
-          position: absolute;
-          transform: rotate(-90deg);
-          transform-origin: 100% 0%;
-          top: 50%;
-          width: 101px;
-          right: 50%;
-        }
-      }
-      &:nth-child(60):after {
-        transform: rotate(354deg);
-      }
-      &:nth-child(59):after {
-        transform: rotate(348deg);
-      }
-      &:nth-child(58):after {
-        transform: rotate(342deg);
-      }
-      &:nth-child(57):after {
-        transform: rotate(336deg);
-      }
-      &:nth-child(56):after {
-        transform: rotate(330deg);
-      }
-      &:nth-child(55):after {
-        transform: rotate(324deg);
-      }
-      &:nth-child(54):after {
-        transform: rotate(318deg);
-      }
-      &:nth-child(53):after {
-        transform: rotate(312deg);
-      }
-      &:nth-child(52):after {
-        transform: rotate(306deg);
-      }
-      &:nth-child(51):after {
-        transform: rotate(300deg);
-      }
-      &:nth-child(50):after {
-        transform: rotate(294deg);
-      }
-      &:nth-child(49):after {
-        transform: rotate(288deg);
-      }
-      &:nth-child(48):after {
-        transform: rotate(282deg);
-      }
-      &:nth-child(47):after {
-        transform: rotate(276deg);
-      }
-      &:nth-child(46):after {
-        transform: rotate(270deg);
-      }
-      &:nth-child(45):after {
-        transform: rotate(264deg);
-      }
-      &:nth-child(44):after {
-        transform: rotate(258deg);
-      }
-      &:nth-child(43):after {
-        transform: rotate(252deg);
-      }
-      &:nth-child(42):after {
-        transform: rotate(246deg);
-      }
-      &:nth-child(41):after {
-        transform: rotate(240deg);
-      }
-      &:nth-child(40):after {
-        transform: rotate(234deg);
-      }
-      &:nth-child(39):after {
-        transform: rotate(228deg);
-      }
-      &:nth-child(38):after {
-        transform: rotate(222deg);
-      }
-      &:nth-child(37):after {
-        transform: rotate(216deg);
-      }
-      &:nth-child(36):after {
-        transform: rotate(210deg);
-      }
-      &:nth-child(35):after {
-        transform: rotate(204deg);
-      }
-      &:nth-child(34):after {
-        transform: rotate(198deg);
-      }
-      &:nth-child(33):after {
-        transform: rotate(192deg);
-      }
-      &:nth-child(32):after {
-        transform: rotate(186deg);
-      }
-      &:nth-child(31):after {
-        transform: rotate(180deg);
-      }
-      &:nth-child(30):after {
-        transform: rotate(174deg);
-      }
-      &:nth-child(29):after {
-        transform: rotate(168deg);
-      }
-      &:nth-child(28):after {
-        transform: rotate(162deg);
-      }
-      &:nth-child(27):after {
-        transform: rotate(156deg);
-      }
-      &:nth-child(26):after {
-        transform: rotate(150deg);
-      }
-      &:nth-child(25):after {
-        transform: rotate(144deg);
-      }
-      &:nth-child(24):after {
-        transform: rotate(138deg);
-      }
-      &:nth-child(23):after {
-        transform: rotate(132deg);
-      }
-      &:nth-child(22):after {
-        transform: rotate(126deg);
-      }
-      &:nth-child(21):after {
-        transform: rotate(120deg);
-      }
-      &:nth-child(20):after {
-        transform: rotate(114deg);
-      }
-      &:nth-child(19):after {
-        transform: rotate(108deg);
-      }
-      &:nth-child(18):after {
-        transform: rotate(102deg);
-      }
-      &:nth-child(17):after {
-        transform: rotate(96deg);
-      }
-      &:nth-child(16):after {
-        transform: rotate(90deg);
-      }
-      &:nth-child(15):after {
-        transform: rotate(84deg);
-      }
-      &:nth-child(14):after {
-        transform: rotate(78deg);
-      }
-      &:nth-child(13):after {
-        transform: rotate(72deg);
-      }
-      &:nth-child(12):after {
-        transform: rotate(66deg);
-      }
-      &:nth-child(11):after {
-        transform: rotate(60deg);
-      }
-      &:nth-child(10):after {
-        transform: rotate(54deg);
-      }
-      &:nth-child(9):after {
-        transform: rotate(48deg);
-      }
-      &:nth-child(8):after {
-        transform: rotate(42deg);
-      }
-      &:nth-child(7):after {
-        transform: rotate(36deg);
-      }
-      &:nth-child(6):after {
-        transform: rotate(30deg);
-      }
-      &:nth-child(5):after {
-        transform: rotate(24deg);
-      }
-      &:nth-child(4):after {
-        transform: rotate(18deg);
-      }
-      &:nth-child(3):after {
-        transform: rotate(12deg);
-      }
-      &:nth-child(2):after {
-        transform: rotate(6deg);
-      }
-      &:nth-child(1):after {
-        transform: rotate(0deg);
-      }
-    }
-  }
-  .actions {
-    color: var(--default-time-picker-button-text-color);
-    font-weight: bold;
-    font-size: 20px;
-    display: flex;
-    justify-content: flex-end;
-    position: absolute;
-    width: 100%;
-    box-sizing: border-box;
-    bottom: 10px;
-    padding-inline: 12px;
-    .action {
-      display: inline-block;
-      text-align: center;
-      font-size: 18px;
-      padding-inline: 12px;
-      height: 37.5px;
-      line-height: 37.5px;
-      margin-right: 10px;
-      cursor: pointer;
-      border-radius: 2px;
-    }
-  }
-}
-.timepicker .circle .hour:hover,
-.timepicker .circle .hour2:hover {
-  background-color: var(--default-time-picker-hour-hover-background-color);
-}

package/src/lib/core-time-picker/time-picker-modal/time-picker-modal.component.spec.ts

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

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

@@ -1,172 +0,0 @@
-import { ChangeDetectorRef, Component, Input } from '@angular/core';
-import { IModal, NiraModalConfig } from 'nira-modal';
-import { BehaviorSubject, Subject } from 'rxjs';
-type Location = {
-  left: string;
-  top: string;
-  text: string;
-  value: string;
-};
-@Component({
-  selector: 'lib-time-picker-modal',
-  templateUrl: './time-picker-modal.component.html',
-  styleUrls: ['./time-picker-modal.component.scss'],
-})
-export class TimePickerModalComponent implements IModal {
-  @Input() config!: NiraModalConfig;
-  @Input() closeSubject!: Subject<any>;
-  hoursSubject: BehaviorSubject<Location[]> = new BehaviorSubject<Location[]>(
-    []
-  );
-  hours2Subject: BehaviorSubject<Location[]> = new BehaviorSubject<Location[]>(
-    []
-  );
-  minutesSubject: BehaviorSubject<Location[]> = new BehaviorSubject<Location[]>(
-    []
-  );
-  showHour: boolean = true;
-  showMin: boolean = false;
-  constructor(private cdr: ChangeDetectorRef) {}
-
-  ngOnInit(): void {
-    const defaultTime = this.config.data;
-    let topElement = document
-      .getElementsByClassName('timepicker')[0]
-      .getElementsByClassName('top')[0];
-    if (defaultTime) {
-      const items = defaultTime.split(':');
-      topElement.getElementsByClassName('h')[0].innerHTML = items[0];
-      topElement.getElementsByClassName('m')[0].innerHTML = items[1];
-    } else {
-      var currentTime = new Date();
-
-      if (topElement.getElementsByClassName('h').length > 0)
-        document.getElementsByClassName('h')[0].innerHTML = String(
-          currentTime.getHours().toString().length > 1
-            ? currentTime.getHours().toString()
-            : '0' + currentTime.getHours().toString()
-        );
-      if (topElement.getElementsByClassName('m').length > 0)
-        document.getElementsByClassName('m')[0].innerHTML = String(
-          currentTime.getMinutes().toString().length > 1
-            ? currentTime.getMinutes().toString()
-            : '0' + currentTime.getMinutes().toString()
-        );
-    }
-
-    this.selectHours();
-  }
-  close() {
-    this.closeSubject.next('');
-  }
-  submit() {
-    let topElement = document
-      .getElementsByClassName('timepicker')[0]
-      .getElementsByClassName('top')[0];
-    const h = topElement.getElementsByClassName('h');
-    const m = topElement.getElementsByClassName('m');
-    let selectedTime;
-    if (h.length > 0 && m.length > 0) {
-      selectedTime = h[0].textContent + ':' + m[0].textContent;
-    }
-    this.closeSubject.next(selectedTime);
-  }
-
-  ngAfterViewInit(): void {
-    this.cdr.detectChanges();
-  }
-
-  onHourClick() {
-    this.selectHours();
-  }
-
-  onMinutesClick() {
-    this.selectMinutes();
-  }
-
-  createCircleOfDivs(
-    num: any,
-    radius: number,
-    offsetX: number,
-    offsetY: number,
-    add: number,
-    teilbar: number
-  ) {
-    let x, y;
-    let items: Location[] = [];
-    for (let n = 0; n < num; n++) {
-      let item: Location = {} as Location;
-      x = radius * Math.cos((n / num) * 2 * Math.PI);
-      y = radius * Math.sin((n / num) * 2 * Math.PI);
-      if (teilbar == 1) {
-        if (n + 3 > 12) {
-          item.text = String(n + 3 - 12 + add);
-        } else {
-          if (n + 3 + add == 24) {
-            item.text = '0';
-          } else {
-            item.text = String(n + 3 + add);
-          }
-        }
-      } else {
-        if (n % teilbar == 0) {
-          if (n + 15 >= 60) {
-            item.value = String(n + 15 - 60);
-            item.text = String(n + 15 - 60 + add);
-          } else {
-            item.value = String(n + 15);
-            item.text = String(n + 15 + add);
-          }
-        } else {
-          if (n + 15 >= 60) {
-            item.value = String(n + 15 - 60);
-            item.text = '⋅';
-          } else {
-            item.value = String(n + 15);
-            item.text = '\u00B7';
-          }
-        }
-      }
-
-      item.left = x + offsetX + 'px';
-      item.top = y + offsetY + 'px';
-
-      items.push(item);
-    }
-    return items;
-  }
-
-  onHourSelect(item: Location) {
-    let topElement = document
-      .getElementsByClassName('timepicker')[0]
-      .getElementsByClassName('top')[0];
-    if (topElement.getElementsByClassName('h').length > 0)
-      document.getElementsByClassName('h')[0].innerHTML = String(
-        item.text.length > 1 ? item.text : '0' + item.text
-      );
-    this.selectMinutes();
-  }
-
-  onMinutesSelect(item: Location) {
-    let topElement = document
-      .getElementsByClassName('timepicker')[0]
-      .getElementsByClassName('top')[0];
-    if (topElement.getElementsByClassName('m').length > 0)
-      document.getElementsByClassName('m')[0].innerHTML = String(
-        item.value.length > 1 ? item.value : '0' + item.value
-      );
-  }
-
-  selectHours() {
-    this.showHour = true;
-    this.showMin = false;
-    this.hoursSubject.next(this.createCircleOfDivs(12, 101, 105, 105, 0, 1));
-    this.hours2Subject.next(this.createCircleOfDivs(12, 64, 110, 110, 12, 1));
-  }
-
-  selectMinutes() {
-    this.showHour = false;
-    this.showMin = true;
-    this.minutesSubject.next(this.createCircleOfDivs(60, 101, 115, 115, 0, 5));
-  }
-}