@annalib/anna-core 7.2.4 → 7.2.5

package/src/lib/anna-dropdown-lib/components/anna-calendar-filter/anna-calendar-filter.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
-
-import { AnnaCalendarFilterComponent } from "./anna-calendar-filter.component";
-
-describe("OrderListingCalendarFilterComponent", () => {
-    let component: AnnaCalendarFilterComponent;
-    let fixture: ComponentFixture<AnnaCalendarFilterComponent>;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AnnaCalendarFilterComponent],
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AnnaCalendarFilterComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it("should create", () => {
-        expect(component).toBeTruthy();
-    });
-});

package/src/lib/anna-dropdown-lib/components/anna-calendar-filter/anna-calendar-filter.component.ts

@@ -1,106 +0,0 @@
-// Angular import statements
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from "@angular/core";
-
-//Third party import statements
-import { NgbDate, NgbDatepickerConfig, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
-import { AnnaDateTimeFormatService } from '../../../anna-core-shared-lib/services/anna-date-time-format.service';
-
-@Component({
-    selector: "anna-core-calendar-filter-lib",
-    templateUrl: "./anna-calendar-filter.component.html",
-    styleUrls: ["./anna-calendar-filter.component.scss"],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AnnaCalendarFilterComponent implements OnInit,OnChanges {
-    
-    @Input() maxDate: any;
-    @Input() label: string;
-    @Input() minDate: any;
-    @Output() selectedDate = new EventEmitter();
-    @Input() selectedFromDate: any;
-    @Input() selectedToDate: any;
-    @Output() apply = new EventEmitter();
-    @Output() cancel = new EventEmitter();
-    fromDate: any;
-    toDate: any;
-    hoveredDate: any;
-    disableApplyBtn: boolean = false;
-    dateToBeShownInInput: string = "";
-
-    constructor(private annaTimeService: AnnaDateTimeFormatService,
-        private datePickerConfig: NgbDatepickerConfig) {}
-    
-    
-    ngOnChanges(changes: SimpleChanges): void {
-        this.fromDate = this.selectedFromDate;
-        this.toDate = this.selectedToDate;
-        this.setInputText();
-    }
-
-    ngOnInit() {
-        // this.fromDate = this.selectedFromDate;
-        // this.toDate = this.selectedToDate;
-        
-        this.datePickerConfig.markDisabled = (date: NgbDateStruct) => {
-            return false;
-        };
-
-        // this.setInputText();
-    }
-
-    onDateSelection(date: NgbDate) {
-        if (!this.fromDate && !this.toDate) {
-            this.fromDate = date;
-        } else if (this.fromDate && !this.toDate && (date.after(this.fromDate) || date.equals(this.fromDate))) {
-            this.toDate = date;
-        } else {
-            this.toDate = null;
-            this.fromDate = date;
-        }
-        this.selectedDate.emit({ fromDate: this.fromDate, toDate: this.toDate });
-        this.disableCalendarApplyBtn();
-        this.setInputText();
-    }
-
-    isHovered(date: NgbDate) {
-        return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
-    }
-
-    isInside(date: NgbDate) {
-        return this.toDate && date.after(this.fromDate) && date.before(this.toDate);
-    }
-
-    isRange(date: NgbDate) {
-        return (
-            date.equals(this.fromDate) || (this.toDate && date.equals(this.toDate)) || this.isInside(date) || this.isHovered(date)
-        );
-    }
-
-    cancelSelection() {
-        this.cancel.emit();
-    }
-
-    applySelection() {
-        if (this.fromDate && this.toDate) {
-            let dateObj = { fromDate: this.fromDate, toDate: this.toDate };
-            this.apply.emit(dateObj);
-        }
-    }
-
-    disableCalendarApplyBtn() {
-        this.disableApplyBtn = !(this.fromDate && this.toDate);
-    }
-
-    setInputText(){
-
-        if(this.fromDate && this.toDate){
-            this.dateToBeShownInInput = `${this.annaTimeService.convertNgbDateToMoment(this.fromDate)} - ${this.annaTimeService.convertNgbDateToMoment(this.toDate)}`;
-        }
-        else if(this.fromDate){
-            this.dateToBeShownInInput = `${this.annaTimeService.convertNgbDateToMoment(this.fromDate)}`;
-    
-        }
-
-    }
-    
-}

package/src/lib/anna-dropdown-lib/components/anna-week-calendar-filter/anna-week-calendar-filter.component.html

@@ -1,129 +0,0 @@
-<form class="form-inline" *ngIf="config.showAsDropdown">
-    <div class="form-group hidden">
-        <div class="input-group">
-            <input
-                name="datepicker"
-                class="form-control"
-                ngbDatepicker
-                #datepicker="ngbDatepicker"
-                [autoClose]="false"
-                (dateSelect)="selectWeek($event)"
-                (closed)="isFocused(false)"
-                [displayMonths]="1"
-                [dayTemplate]="t"
-                [startDate]="fromDate!"
-                [firstDayOfWeek]="config.firstDayOfWeek"
-                [showWeekNumbers]="config.showWeekNumbers"
-                tabindex="-1"
-                style="display: none"
-                [footerTemplate]="footerTemplate"
-            />
-        </div>
-    </div>
-
-    <!--Single week select-->
-    <div *ngIf="!config.selectMultipleWeeks">
-        <span style="position: relative; left: 30px; font-size: 12px"> &nbsp;{{ weekNumbers }} </span>
-        <div class="form-group">
-            <div class="input-group">
-                <div class="single-week">
-                    <div class="left">
-                        <span class="material-icons next-round-btn" (click)="previousWeek()"> navigate_next </span>
-                    </div>
-                    <input
-                        #dpFromDate
-                        class="form-control"
-                        placeholder="Select Weeks"
-                        [ngClass]="[config.customClass == '' ? '' : config.customClass]"
-                        name="dpFromDate"
-                        [value]="dateToDisplay"
-                        [readonly]="true"
-                        (click)="isFocused(true); isDropdownOpenedForCalendar(datepicker)"
-                    />
-                    <i class="mdi mdi-menu-down" *ngIf='!datepicker.isOpen()' (click)="datepicker.open()"></i>
-                    <i class='mdi mdi-menu-up' *ngIf="datepicker.isOpen()" (click)="isDropdownOpenedForCalendar(datepicker)"></i>
-                    <div class="right">
-                        <span class="material-icons round-btn" (click)="nextWeek()"> navigate_next </span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!--Multiple week select-->
-    <div class="form-group" *ngIf="config.selectMultipleWeeks">
-        <div class="input-group">
-            <div class="multiple-weeks">
-                <input
-                    #dpFromDate
-                    class="form-control"
-                    placeholder="Select Weeks"
-                    [ngClass]="[config.customClass == '' ? '' : config.customClass]"
-                    name="dpFromDate"
-                    [readonly]="true"
-                    [value]="weekNumbers"
-                    (click)="isFocused(true); isDropdownOpenedForCalendar(datepicker)"
-                />
-                <i *ngIf="!multiSelectDropdownOpen" class="mdi mdi-menu-down multiselect-input-arrow"></i>
-                <i *ngIf="multiSelectDropdownOpen" class="mdi mdi-menu-up multiselect-input-arrow"></i>
-            </div>
-        </div>
-    </div>
-</form>
-
-<ngb-datepicker
-    #weekPicker
-    *ngIf="!config.showAsDropdown"
-    [displayMonths]="1"
-    [startDate]="fromDate!"
-    [firstDayOfWeek]="config.firstDayOfWeek"
-    [showWeekNumbers]="config.showWeekNumbers"
-    [dayTemplate]="t"
-    [maxDate]="maxDate"
-    [minDate]="minDate"
-    (dateSelect)="selectWeek($event)"
-    [markDisabled]="disabledFunc"
->
-</ngb-datepicker>
-
-<ng-template #footerTemplate>
-    <hr class="my-0" />
-    <button
-        class="btn btn-primary btn-sm m-2 float-right"
-        (click)="applyChanges(); closeDatepicker(datepicker)"
-        style="background-color: #268bff; color: #ffffff"
-    >
-        Apply
-    </button>
-    <button
-        class="btn btn-primary btn-sm m-2 float-right"
-        (click)="revertDates(); closeDatepicker(datepicker)"
-        style="background-color: rgba(38, 139, 255, 0.12); color: #268bff"
-    >
-        Cancel
-    </button>
-</ng-template>
-
-<ng-template #t let-date let-focused="focused" let-disabled="disabled">
-    <span
-        class="custom-day"
-        [class.focused]="focused"
-        [class.range]="isRange(date)"
-        [class.faded]="isHovered(date) || isInside(date)"
-        [class.disabled]="disabled"
-        (mouseenter)="hoveredDate = date"
-        (mouseleave)="hoveredDate = null"
-    >
-        {{ date.day }}
-    </span>
-</ng-template>
-
-<!--
-
-<hr>
-
-<pre>From: {{ fromDate | json }} </pre>
-<pre>To: {{ toDate | json }} </pre>
-<pre>weekNumbers: {{ weekNumbers | json }} </pre>
-
--->

package/src/lib/anna-dropdown-lib/components/anna-week-calendar-filter/anna-week-calendar-filter.component.scss

@@ -1,275 +0,0 @@
-/*Setting the properties of week-picker calendar*/
-@import "colors", "fonts";
-
-@mixin font-style {
-  font-style: unset !important;
-}
-
-@mixin week-width {
-  width: 3rem !important;
-}
-
-@mixin material-icon {
-  //   height: 1.8rem;
-  line-height: 1.3;
-  //   background-color: #d8d8d8;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-@mixin input-group {
-  width: 212px;
-  border-radius: 2px;
-  border: solid 1px #b3b3b3;
-  height: 1.875rem;
-  cursor: pointer; //Lur setting issue no 36
-}
-
-@mixin outline {
-  outline: none !important;
-}
-
-@mixin common-css {
-  background-color: rgba(38, 139, 255, 0.12) !important;
-  color: $charcoal !important;
-}
-
-:host::ng-deep {
-  &.right {
-    width: unset !important;
-    background-color: white !important;
-  }
-
-  &.ngb-dp-day,
-  &.ngb-dp-weekday {
-    @include week-width;
-    @include font-style;
-    color: $green;
-    outline: none;
-  }
-
-  &.ngb-dp-day {
-    &:first-child {
-      border: 1px solid black;
-    }
-    &.disabled {
-      color: $lightGrey;
-      cursor: not-allowed;
-    }
-  }
-
-  &.ngb-dp-showweek:before {
-    content: "Weeks";
-    margin-right: 5px;
-  }
-
-  &.ngb-dp-week-number {
-    @include font-style;
-    width: 4rem !important;
-    margin-right: 5px;
-    font-weight: bold;
-    color: black !important;
-    border-right: 1px solid rgba(0, 0, 0, 0.125);
-    &::before {
-      @include font-style;
-      content: "Week ";
-    }
-  }
-
-  &.ngb-dp-weekday.ngb-dp-showweek {
-    margin-right: 5px;
-    width: 4rem !important;
-    border-right: 1px solid rgba(0, 0, 0, 0.125);
-  }
-
-  &.dropdown-menu {
-    box-shadow: none;
-    &.show {
-      top: 15px !important;
-    }
-  }
-
-  &.bg-light {
-    background-color: white !important;
-  }
-
-  &.ngb-dp-weekdays {
-    border-top: 1px solid rgba(0, 0, 0, 0.125);
-  }
-
-  &.ngb-dp-arrow-btn:focus {
-    box-shadow: none;
-  }
-}
-
-.custom-day {
-  text-align: center;
-  padding: 0.185rem 0.25rem;
-  display: inline-block;
-  height: 1.75rem;
-  font-weight: bold;
-  color: $darkBlueShade;
-  @include week-width;
-  &.focused {
-    background-color: white; //$lightGray-5;
-  }
-
-  &.faded {
-    background-color: rgba(2, 117, 216, 0.5) !important; //#0275d880
-    &:focus {
-      @include outline;
-    }
-  }
-
-  &:hover {
-    @include common-css;
-  }
-
-  &:focus {
-    @include outline;
-  }
-
-  &.range {
-    @include common-css;
-    &:focus {
-      @include outline;
-    }
-  }
-
-  &.disabled {
-    color: $lightGray;
-  }
-}
-
-.input-group {
-  & > .single-week,
-  .multiple-weeks {
-    display: inline-flex !important;
-    & > .form-control {
-      @include input-group;
-    }
-  }
-
-  & > .form-control {
-    @include input-group;
-  }
-}
-
-.form-control[readonly] {
-  background-color: white !important;
-}
-
-@mixin round-button($name, $direction, $boolean) {
-  @if $boolean {
-    .next-#{"" + $name} {
-      transform: rotate(180deg);
-      // margin-#{"" + $direction}: 5px;
-      margin-#{"" + $direction}: $fs-2;
-      @include material-icon;
-    }
-  } @else {
-    .#{"" + $name} {
-      @include material-icon;
-      // margin-#{"" + $direction}: 5px;
-      margin-#{"" + $direction}: $fs-4;
-    }
-  }
-}
-
-$roundBtn: "round-btn";
-@include round-button($roundBtn, "left", true);
-@include round-button($roundBtn, "left", false);
-
-:host::ng-deep select.custom-select {
-  background: none;
-  appearance: auto;
-}
-
-//Lur Setting issue no 11
-.left,
-.right {
-  width: $fs-30 !important;
-  height: $fs-30;
-  background: $lightSilver !important;
-  border-radius: 50%;
-}
-
-.left {
-  margin-right: $fs-5;
-}
-
-.right {
-  margin-left: $fs-5;
-}
-
-// lur-setting issue no 20 till line number 267
-:host::ng-deep .right .ngb-dp-navigation-chevron,
-:host::ng-deep .ngb-dp-navigation-chevron {
-  color: $primary-color;
-}
-
-:host::ng-deep .ngb-dp-arrow-btn:focus {
-  outline-width: 0px;
-}
-
-.custom-day.faded {
-  background-color: rgba(38, 139, 255, 0.2);
-  color: black;
-  font-weight: 600;
-}
-
-.custom-day {
-  text-align: center;
-  padding: 0.185rem 0.25rem;
-  color: black;
-  display: inline-block;
-  line-height: 1.9;
-  height: 2rem;
-  width: 2rem;
-}
-
-.custom-day.focused {
-  background-color: $lightGray-5;
-}
-
-.custom-day.range,
-.custom-day:hover {
-  background-color: $primary-color;
-  color: white;
-  font-weight: 600;
-}
-
-//Lur setting issue no 38
-:host::ng-deep div.ngb-dp-weekday {
-  color: $oliveGreen;
-  @include fonts(Roboto, $fs-13, normal, bold, normal, 2.6, normal);
-}
-
-.mdi-menu-up,
-.mdi-menu-down {
-  position: absolute;
-  right: $fs-39;
-  top: 1px;
-  font-size: $fs-22;
-  cursor: pointer;
-}
-
-.multiselect-input-arrow {
-  position: absolute;
-  right: $fs-12;
-  top: 3px;
-  font-size: $fs-20;
-  cursor: pointer;
-  pointer-events: none;
-}
-
-button:focus {
-  outline: none;
-  box-shadow: none;
-  border-color: transparent;
-}
-
-
-::ng-deep .ngb-dp-header, ::ng-deep .ngb-dp-week{
-  background: white !important;
-}

package/src/lib/anna-dropdown-lib/components/anna-week-calendar-filter/anna-week-calendar-filter.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
-
-import { AnnaWeekCalendarComponent } from "./anna-week-calendar-filter.component";
-
-describe("AnnaWeekCalendarComponent", () => {
-    let component: AnnaWeekCalendarComponent;
-    let fixture: ComponentFixture<AnnaWeekCalendarComponent>;
-
-    beforeEach(waitForAsync(() => {
-        TestBed.configureTestingModule({
-            declarations: [AnnaWeekCalendarComponent],
-        }).compileComponents();
-    }));
-
-    beforeEach(() => {
-        fixture = TestBed.createComponent(AnnaWeekCalendarComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
-
-    it("should create", () => {
-        expect(component).toBeTruthy();
-    });
-});