@indice/ng-components 0.2.157 → 0.2.158
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_styles.css +63 -0
- package/esm2020/lib/controls/date-picker/date-picker.component.mjs +77 -45
- package/esm2020/lib/pages/auth/auth-callback/auth-callback.component.mjs +2 -1
- package/fesm2015/indice-ng-components.mjs +80 -46
- package/fesm2015/indice-ng-components.mjs.map +1 -1
- package/fesm2020/indice-ng-components.mjs +77 -45
- package/fesm2020/indice-ng-components.mjs.map +1 -1
- package/lib/controls/date-picker/date-picker.component.d.ts +9 -4
- package/package.json +2 -6
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, TemplateRef, ContentChild, ContentChildren, forwardRef, ViewChild, Injectable, InjectionToken, ViewEncapsulation, ChangeDetectionStrategy, Optional, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, PLATFORM_ID, Directive, Inject, Input, Output, Component, TemplateRef, ContentChild, ContentChildren, LOCALE_ID, forwardRef, ViewChild, Injectable, InjectionToken, ViewEncapsulation, ChangeDetectionStrategy, Optional, Injector, ElementRef, ViewChildren, Pipe, HostListener, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
|
|
4
|
+
import { isPlatformBrowser, getLocaleMonthNames, FormStyle, TranslationWidth, getLocaleDayNames, DOCUMENT, CommonModule } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
6
6
|
import { Router, NavigationStart, ActivatedRoute, ActivationStart, RouterModule } from '@angular/router';
|
|
7
7
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
@@ -863,30 +863,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
863
863
|
|
|
864
864
|
// freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
|
|
865
865
|
class DatepickerComponent {
|
|
866
|
-
constructor() {
|
|
866
|
+
constructor(locale) {
|
|
867
|
+
this.locale = locale;
|
|
867
868
|
this.readonly = false;
|
|
868
869
|
this.disabled = false;
|
|
870
|
+
this.inline = false;
|
|
869
871
|
this.displayFormat = 'dd/MM/yyyy';
|
|
870
872
|
this.placeholder = '';
|
|
871
873
|
this.value = null;
|
|
872
874
|
this.valueChange = new EventEmitter();
|
|
875
|
+
this.minDate = undefined;
|
|
876
|
+
this.maxDate = undefined;
|
|
873
877
|
this.showCalendar = false;
|
|
874
878
|
this.showYears = false;
|
|
875
|
-
this.monthNames =
|
|
876
|
-
|
|
877
|
-
'Φεβρουάριος',
|
|
878
|
-
'Μάρτιος',
|
|
879
|
-
'Απρίλιος',
|
|
880
|
-
'Μάϊος',
|
|
881
|
-
'Ιούνιος',
|
|
882
|
-
'Ιούλιος',
|
|
883
|
-
'Αύγουστος',
|
|
884
|
-
'Σεπτέμβριος',
|
|
885
|
-
'Οκτώβριος',
|
|
886
|
-
'Νοεμβριος',
|
|
887
|
-
'Δεκέμβριος',
|
|
888
|
-
];
|
|
889
|
-
this.dayNames = ['Κυρ', 'Δευ', 'Τρι', 'Τετ', 'Πεμ', 'Παρ', 'Σαβ'];
|
|
879
|
+
this.monthNames = getLocaleMonthNames(this.locale, FormStyle.Standalone, TranslationWidth.Wide);
|
|
880
|
+
this.dayNames = getLocaleDayNames(this.locale, FormStyle.Standalone, TranslationWidth.Abbreviated);
|
|
890
881
|
this.month = -1;
|
|
891
882
|
this.year = -1;
|
|
892
883
|
this.calendarDates = [];
|
|
@@ -933,34 +924,45 @@ class DatepickerComponent {
|
|
|
933
924
|
}
|
|
934
925
|
selectDateValue(date) {
|
|
935
926
|
// This should be in UTC
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
this.onChange$
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
this.onTouched$
|
|
927
|
+
if (!this.outOfRangeDate(date.day)) {
|
|
928
|
+
let selectedDate = new Date(this.year, this.month, date.day, 3, 0, 0, 0);
|
|
929
|
+
this.value = selectedDate;
|
|
930
|
+
this.valueChange.emit(this.value);
|
|
931
|
+
if (this.onChange$) {
|
|
932
|
+
this.onChange$(this.value);
|
|
933
|
+
}
|
|
934
|
+
this.updateDays();
|
|
935
|
+
if (this.onTouched$) {
|
|
936
|
+
this.onTouched$();
|
|
937
|
+
}
|
|
938
|
+
this.calcDays();
|
|
939
|
+
this.showCalendar = false;
|
|
945
940
|
}
|
|
946
|
-
this.showCalendar = false;
|
|
947
941
|
}
|
|
948
942
|
selectYearValue(year) {
|
|
949
943
|
// This should be in UTC
|
|
950
|
-
|
|
944
|
+
const tempYear = this.year;
|
|
951
945
|
this.year = year.year;
|
|
952
|
-
this.
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
this.
|
|
946
|
+
if (!this.outOfRangeDate(this.calendarDates?.find(x => x.selected == true) ?? { day: 1 })) {
|
|
947
|
+
let selectedDate = new Date(year.year, this.month ?? 1, this.calendarDates?.find(x => x.selected == true).day ?? 1, 3, 0, 0, 0);
|
|
948
|
+
this.value = selectedDate;
|
|
949
|
+
this.valueChange.emit(this.value);
|
|
950
|
+
if (this.onChange$) {
|
|
951
|
+
this.onChange$(this.value);
|
|
952
|
+
}
|
|
953
|
+
this.updateDays();
|
|
954
|
+
if (this.onTouched$) {
|
|
955
|
+
this.onTouched$();
|
|
956
|
+
}
|
|
957
|
+
this.showYears = false;
|
|
958
|
+
this.showCalendar = true;
|
|
959
|
+
this.calcDays();
|
|
956
960
|
}
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
this.
|
|
961
|
+
else {
|
|
962
|
+
this.year = tempYear;
|
|
963
|
+
this.showYears = false;
|
|
964
|
+
this.showCalendar = true;
|
|
960
965
|
}
|
|
961
|
-
this.showYears = false;
|
|
962
|
-
this.showCalendar = true;
|
|
963
|
-
this.calcDays();
|
|
964
966
|
}
|
|
965
967
|
previousMonth() {
|
|
966
968
|
if (this.month !== 0) {
|
|
@@ -1048,7 +1050,7 @@ class DatepickerComponent {
|
|
|
1048
1050
|
return array.slice((page_number - 1) * this.yearsPerPage, page_number * this.yearsPerPage);
|
|
1049
1051
|
}
|
|
1050
1052
|
getDateFromInput() {
|
|
1051
|
-
if (this.dateInput?.nativeElement.value !== '') {
|
|
1053
|
+
if (this.dateInput?.nativeElement.value !== '' && !this.inline) {
|
|
1052
1054
|
var dateParts = this.dateInput?.nativeElement.value.split("/");
|
|
1053
1055
|
let dateInGrFormat = new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0], 3, 0, 0);
|
|
1054
1056
|
if (dateInGrFormat.toString() !== 'Invalid Date') {
|
|
@@ -1080,15 +1082,35 @@ class DatepickerComponent {
|
|
|
1080
1082
|
this.showCalendar = false;
|
|
1081
1083
|
this.getDateFromInput();
|
|
1082
1084
|
}
|
|
1085
|
+
outOfRangeDate(date) {
|
|
1086
|
+
let outOfRange = false;
|
|
1087
|
+
if (this.minDate || this.maxDate) {
|
|
1088
|
+
const d = new Date(this.year, this.month, date.day);
|
|
1089
|
+
const dateInMillis = d.getTime();
|
|
1090
|
+
if (this.minDate) {
|
|
1091
|
+
let minDate = this.minDate.getTime();
|
|
1092
|
+
if (dateInMillis < minDate && this.minDate.toDateString() !== d.toDateString()) {
|
|
1093
|
+
outOfRange = true;
|
|
1094
|
+
}
|
|
1095
|
+
}
|
|
1096
|
+
if (this.maxDate) {
|
|
1097
|
+
let maxDate = this.maxDate.getTime();
|
|
1098
|
+
if (dateInMillis > maxDate && this.maxDate.toDateString() !== d.toDateString()) {
|
|
1099
|
+
outOfRange = true;
|
|
1100
|
+
}
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
return outOfRange;
|
|
1104
|
+
}
|
|
1083
1105
|
}
|
|
1084
|
-
DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1085
|
-
DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
1106
|
+
DatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, deps: [{ token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
|
|
1107
|
+
DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DatepickerComponent, selector: "lib-date-picker", inputs: { readonly: "readonly", disabled: "disabled", inline: "inline", displayFormat: ["display-format", "displayFormat"], placeholder: "placeholder", value: "value", minDate: "minDate", maxDate: "maxDate" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
1086
1108
|
{
|
|
1087
1109
|
provide: NG_VALUE_ACCESSOR,
|
|
1088
1110
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1089
1111
|
multi: true
|
|
1090
1112
|
}
|
|
1091
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"relative
|
|
1113
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"flex\"\n [ngClass]=\"{'relative': !inline}\"\n (clickOutside)=\"closeCalendar()\">\n\n <input type=\"text\"\n *ngIf=\"!inline\"\n #dateInput\n [readonly]=\"readonly\"\n name=\"dateInput\"\n (blur)=\"onBlur($event)\"\n id=\"dateInput\"\n (focus)=\"showCalendar = false\"\n [value]=\"value | date: displayFormat\"\n class=\"detapicker-input\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\n [placeholder]=\"disabled ? '' : placeholder\">\n\n <button type=\"button\"\n *ngIf=\"!inline\"\n class=\"datepicker-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendar()\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\">\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n </button>\n\n <div *ngIf=\"showCalendar || inline\"\n [ngClass]=\"{'absolute': !inline}\"\n class=\"datepicker-background\"\n style=\"height:18rem;min-width:16rem;\"\n name=\"calendar\">\n <div class=\"datepicker-btn-wrapper\">\n <div>\n <button type=\"button\"\n (click)=\"openYears()\">\n <span class=\"datepicker-selected-month\">\n {{monthNames[month]}}\n </span>\n <span class=\"datepicker-selected-year\">\n {{year}}</span>\n </button>\n </div>\n <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"previousMonth();\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"nextMonth()\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n <ng-template #showYearsPickerTmpl>\n <div>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"previousYear();\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"nextYear()\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n </ng-template>\n </div>\n\n <div class=\"datepicker-wrapper\"\n *ngIf=\"!showYears; else showCalYearsTmpl\">\n <div *ngFor=\"let day of dayNames\"\n class=\"datepicker-day-name\"\n style=\"width: 14.28%\">{{day}}</div>\n </div>\n\n <ng-template #showCalYearsTmpl>\n <div class=\"datepicker-content-wrapper\">\n <div *ngFor=\"let year of showCalendarYears\"\n style=\"width: 18.28%\"\n class=\"px-1 mb-1\">\n <div (click)=\"selectYearValue(year)\"\n class=\"datepicker-year\"\n [class]=\"year.selected ? 'selected' : 'not-selected'\">\n {{year.year}}</div>\n </div>\n </div>\n </ng-template>\n\n <div class=\"datepicker-content-wrapper\"\n *ngIf=\"!showYears\">\n <div *ngFor=\"let blankday of blankDays\"\n style=\"width: 14.28%\"\n class=\"datepicker-blank-days\">{{blankday}}</div>\n <div *ngFor=\"let date of calendarDates;\"\n style=\"width: 14.28%\"\n class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\"\n class=\"datepicker-days\"\n [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n {{date.day}}</div>\n </div>\n </div>\n </div>\n\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
1092
1114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1093
1115
|
type: Component,
|
|
1094
1116
|
args: [{ selector: 'lib-date-picker', providers: [
|
|
@@ -1097,11 +1119,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
1097
1119
|
useExisting: forwardRef(() => DatepickerComponent),
|
|
1098
1120
|
multi: true
|
|
1099
1121
|
}
|
|
1100
|
-
], template: "<div class=\"relative
|
|
1101
|
-
}], ctorParameters: function () { return [
|
|
1122
|
+
], template: "<div class=\"flex\"\n [ngClass]=\"{'relative': !inline}\"\n (clickOutside)=\"closeCalendar()\">\n\n <input type=\"text\"\n *ngIf=\"!inline\"\n #dateInput\n [readonly]=\"readonly\"\n name=\"dateInput\"\n (blur)=\"onBlur($event)\"\n id=\"dateInput\"\n (focus)=\"showCalendar = false\"\n [value]=\"value | date: displayFormat\"\n class=\"detapicker-input\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\n [placeholder]=\"disabled ? '' : placeholder\">\n\n <button type=\"button\"\n *ngIf=\"!inline\"\n class=\"datepicker-button\"\n [disabled]=\"disabled\"\n (click)=\"openCalendar()\"\n [ngClass]=\"{'cursor-not-allowed': disabled}\">\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\n </button>\n\n <div *ngIf=\"showCalendar || inline\"\n [ngClass]=\"{'absolute': !inline}\"\n class=\"datepicker-background\"\n style=\"height:18rem;min-width:16rem;\"\n name=\"calendar\">\n <div class=\"datepicker-btn-wrapper\">\n <div>\n <button type=\"button\"\n (click)=\"openYears()\">\n <span class=\"datepicker-selected-month\">\n {{monthNames[month]}}\n </span>\n <span class=\"datepicker-selected-year\">\n {{year}}</span>\n </button>\n </div>\n <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"previousMonth();\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"nextMonth()\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n <ng-template #showYearsPickerTmpl>\n <div>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"previousYear();\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M15 19l-7-7 7-7\" />\n </svg>\n </button>\n <button type=\"button\"\n class=\"datepicker-nav-btn\"\n (click)=\"nextYear()\">\n <svg fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\">\n <path stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M9 5l7 7-7 7\" />\n </svg>\n </button>\n </div>\n </ng-template>\n </div>\n\n <div class=\"datepicker-wrapper\"\n *ngIf=\"!showYears; else showCalYearsTmpl\">\n <div *ngFor=\"let day of dayNames\"\n class=\"datepicker-day-name\"\n style=\"width: 14.28%\">{{day}}</div>\n </div>\n\n <ng-template #showCalYearsTmpl>\n <div class=\"datepicker-content-wrapper\">\n <div *ngFor=\"let year of showCalendarYears\"\n style=\"width: 18.28%\"\n class=\"px-1 mb-1\">\n <div (click)=\"selectYearValue(year)\"\n class=\"datepicker-year\"\n [class]=\"year.selected ? 'selected' : 'not-selected'\">\n {{year.year}}</div>\n </div>\n </div>\n </ng-template>\n\n <div class=\"datepicker-content-wrapper\"\n *ngIf=\"!showYears\">\n <div *ngFor=\"let blankday of blankDays\"\n style=\"width: 14.28%\"\n class=\"datepicker-blank-days\">{{blankday}}</div>\n <div *ngFor=\"let date of calendarDates;\"\n style=\"width: 14.28%\"\n class=\"px-1 mb-1\">\n <div (click)=\"selectDateValue(date)\"\n class=\"datepicker-days\"\n [ngClass]=\"{'out-of-range': outOfRangeDate(date),'selected': date.selected, 'not-selected':!date.selected }\">\n {{date.day}}</div>\n </div>\n </div>\n </div>\n\n</div>" }]
|
|
1123
|
+
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1124
|
+
type: Inject,
|
|
1125
|
+
args: [LOCALE_ID]
|
|
1126
|
+
}] }]; }, propDecorators: { readonly: [{
|
|
1102
1127
|
type: Input
|
|
1103
1128
|
}], disabled: [{
|
|
1104
1129
|
type: Input
|
|
1130
|
+
}], inline: [{
|
|
1131
|
+
type: Input
|
|
1105
1132
|
}], displayFormat: [{
|
|
1106
1133
|
type: Input,
|
|
1107
1134
|
args: ['display-format']
|
|
@@ -1114,6 +1141,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
|
|
|
1114
1141
|
}], dateInput: [{
|
|
1115
1142
|
type: ViewChild,
|
|
1116
1143
|
args: ['dateInput']
|
|
1144
|
+
}], minDate: [{
|
|
1145
|
+
type: Input
|
|
1146
|
+
}], maxDate: [{
|
|
1147
|
+
type: Input
|
|
1117
1148
|
}] } });
|
|
1118
1149
|
|
|
1119
1150
|
class ToasterService {
|
|
@@ -2763,6 +2794,7 @@ class AuthCallbackComponent {
|
|
|
2763
2794
|
ngOnInit() {
|
|
2764
2795
|
this.authService.signinRedirectCallback().subscribe((user) => {
|
|
2765
2796
|
if (user) {
|
|
2797
|
+
debugger;
|
|
2766
2798
|
this.router.navigateByUrl(user.state?.url || '/');
|
|
2767
2799
|
}
|
|
2768
2800
|
});
|