@annalib/anna-core 0.0.2 → 0.0.3

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

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

@@ -0,0 +1,275 @@
+/*Setting the properties of week-picker calendar*/
+@import "../../../anna-core-shared-lib/scss/colors", "../../../anna-core-shared-lib/scss/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

@@ -0,0 +1,24 @@
+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();
+    });
+});