@indice/ng-components 0.2.86 → 0.2.90
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/README.md +4 -4
- package/bundles/indice-ng-components.umd.js +80 -47
- package/bundles/indice-ng-components.umd.js.map +1 -1
- package/esm2015/lib/controls/date-picker/date-picker.component.js +68 -34
- package/esm2015/lib/controls/kpi-tile/kpi-tile.component.js +1 -1
- package/esm2015/lib/controls/list-view/list-column.component.js +1 -1
- package/esm2015/lib/controls/list-view/list-view-empty-state.component.js +2 -2
- package/esm2015/lib/controls/skeleton-loader/skeleton-loader.component.js +1 -1
- package/esm2015/lib/controls/toggle/toggle.component.js +2 -2
- package/esm2015/lib/layouts/views/view-layout/view-layout.component.js +12 -12
- package/esm2015/lib/services/toaster.service.js +1 -1
- package/fesm2015/indice-ng-components.js +80 -46
- package/fesm2015/indice-ng-components.js.map +1 -1
- package/indice-ng-components.metadata.json +1 -1
- package/lib/controls/date-picker/date-picker.component.d.ts +10 -8
- package/package.json +1 -1
|
@@ -685,7 +685,7 @@ class ListViewEmptyStateComponent {
|
|
|
685
685
|
ListViewEmptyStateComponent.decorators = [
|
|
686
686
|
{ type: Component, args: [{
|
|
687
687
|
selector: 'lib-list-view-empty-state',
|
|
688
|
-
template: "<div class=\"p-20\">\n <div class=\"text-center p-2\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\n </svg>\n <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\n <p class=\"mt-1 text-sm text-gray-500\">\n {{subTitle}}\n </p>\n <div class=\"mt-6\" *ngIf=\"false\">\n <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\n <!-- Heroicon name: solid/plus -->\n <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\n <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\n </svg>\n {{newItemLabel}}\n </button>\n </div>\n </div>\n</div>\n"
|
|
688
|
+
template: "<div class=\"p-20\">\r\n <div class=\"text-center p-2\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"mx-auto h-12 w-12 text-gray-400\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4\" />\r\n </svg>\r\n <h3 class=\"mt-2 text-sm font-medium text-gray-900\">{{title}}</h3>\r\n <p class=\"mt-1 text-sm text-gray-500\">\r\n {{subTitle}}\r\n </p>\r\n <div class=\"mt-6\" *ngIf=\"false\">\r\n <button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-gray-500\">\r\n <!-- Heroicon name: solid/plus -->\r\n <svg class=\"-ml-1 mr-2 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" aria-hidden=\"true\">\r\n <path vector-effect=\"non-scaling-stroke\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z\" />\r\n </svg>\r\n {{newItemLabel}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n"
|
|
689
689
|
},] }
|
|
690
690
|
];
|
|
691
691
|
ListViewEmptyStateComponent.ctorParameters = () => [];
|
|
@@ -772,7 +772,7 @@ KpiTileComponent.propDecorators = {
|
|
|
772
772
|
// freaksly simple date picker : https://tailwind-elements.com/docs/standard/forms/datepicker/
|
|
773
773
|
class DatepickerComponent {
|
|
774
774
|
constructor() {
|
|
775
|
-
this.readonly =
|
|
775
|
+
this.readonly = false;
|
|
776
776
|
this.disabled = false;
|
|
777
777
|
this.displayFormat = 'dd/MM/yyyy';
|
|
778
778
|
this.placeholder = '';
|
|
@@ -821,15 +821,25 @@ class DatepickerComponent {
|
|
|
821
821
|
this.showCalendarYears = this.paginate(this.calendarYears, 1);
|
|
822
822
|
this.calcDays();
|
|
823
823
|
}
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
824
|
+
writeValue(obj) {
|
|
825
|
+
if (obj) {
|
|
826
|
+
this.value = new Date(obj);
|
|
827
|
+
this.month = this.value.getMonth();
|
|
828
|
+
this.year = this.value.getFullYear();
|
|
828
829
|
}
|
|
829
|
-
const d = new Date(year !== null && year !== void 0 ? year : this.year, this.month, day !== null && day !== void 0 ? day : (_a = this.value) === null || _a === void 0 ? void 0 : _a.getDay());
|
|
830
|
-
return date1.toDateString() === d.toDateString();
|
|
831
830
|
}
|
|
832
|
-
|
|
831
|
+
registerOnChange(fn) {
|
|
832
|
+
this.onChange$ = fn;
|
|
833
|
+
}
|
|
834
|
+
registerOnTouched(fn) {
|
|
835
|
+
this.onTouched$ = fn;
|
|
836
|
+
}
|
|
837
|
+
onBlur(event) {
|
|
838
|
+
if (this.onTouched$) {
|
|
839
|
+
this.onTouched$();
|
|
840
|
+
}
|
|
841
|
+
this.getDateFromInput();
|
|
842
|
+
}
|
|
833
843
|
selectDateValue(date) {
|
|
834
844
|
// This should be in UTC
|
|
835
845
|
let selectedDate = new Date(this.year, this.month, date.day, 3, 0, 0, 0);
|
|
@@ -845,7 +855,9 @@ class DatepickerComponent {
|
|
|
845
855
|
this.showCalendar = false;
|
|
846
856
|
}
|
|
847
857
|
selectYearValue(year) {
|
|
848
|
-
|
|
858
|
+
var _a, _b, _c;
|
|
859
|
+
// This should be in UTC
|
|
860
|
+
let selectedDate = new Date(year.year, (_a = this.month) !== null && _a !== void 0 ? _a : 1, (_c = (_b = this.calendarDates) === null || _b === void 0 ? void 0 : _b.find(x => x.selected == true).day) !== null && _c !== void 0 ? _c : 1, 3, 0, 0, 0);
|
|
849
861
|
this.year = year.year;
|
|
850
862
|
this.value = selectedDate;
|
|
851
863
|
this.valueChange.emit(this.value);
|
|
@@ -858,6 +870,7 @@ class DatepickerComponent {
|
|
|
858
870
|
}
|
|
859
871
|
this.showYears = false;
|
|
860
872
|
this.showCalendar = true;
|
|
873
|
+
this.calcDays();
|
|
861
874
|
}
|
|
862
875
|
previousMonth() {
|
|
863
876
|
if (this.month !== 0) {
|
|
@@ -895,24 +908,38 @@ class DatepickerComponent {
|
|
|
895
908
|
}
|
|
896
909
|
}
|
|
897
910
|
nextYear() {
|
|
898
|
-
this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage <= this.calendarYears.length / this.yearsPerPage
|
|
911
|
+
this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage <= this.calendarYears.length / this.yearsPerPage
|
|
912
|
+
? ++this.calendarYearPage
|
|
913
|
+
: this.calendarYearPage);
|
|
899
914
|
this.calcDays();
|
|
900
915
|
if (this.onTouched$) {
|
|
901
916
|
this.onTouched$();
|
|
902
917
|
}
|
|
903
918
|
}
|
|
919
|
+
compareDates(date1, day, year) {
|
|
920
|
+
var _a;
|
|
921
|
+
if (!date1) {
|
|
922
|
+
return false;
|
|
923
|
+
}
|
|
924
|
+
const d = new Date(year !== null && year !== void 0 ? year : this.year, this.month, day !== null && day !== void 0 ? day : (_a = this.value) === null || _a === void 0 ? void 0 : _a.getDay());
|
|
925
|
+
return date1.toDateString() === d.toDateString();
|
|
926
|
+
}
|
|
927
|
+
;
|
|
904
928
|
calcDays() {
|
|
929
|
+
var _a;
|
|
905
930
|
const daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
|
|
906
931
|
// find where to start calendar day of week
|
|
907
932
|
const dayOfWeek = new Date(this.year, this.month).getDay();
|
|
908
|
-
const blankdaysArray =
|
|
933
|
+
const blankdaysArray = new Array();
|
|
909
934
|
for (var i = 1; i <= dayOfWeek; i++) {
|
|
910
|
-
|
|
935
|
+
// check if month is February
|
|
936
|
+
blankdaysArray.push(this.month != 2 ? (32 - i) : (29 - i));
|
|
937
|
+
blankdaysArray.reverse().sort();
|
|
911
938
|
}
|
|
912
939
|
const daysArray = [];
|
|
913
940
|
const today = new Date();
|
|
914
941
|
for (var i = 1; i <= daysInMonth; i++) {
|
|
915
|
-
daysArray.push({ day: i, today: this.compareDates(today, i, null), selected: this.compareDates(this.value, i, null) });
|
|
942
|
+
daysArray.push({ day: i, today: this.compareDates(today, i, null), selected: this.compareDates((_a = this.value) !== null && _a !== void 0 ? _a : today, i, null) });
|
|
916
943
|
}
|
|
917
944
|
const yearsArray = [];
|
|
918
945
|
for (let i = 1950; i <= today.getFullYear() + 2; i++) {
|
|
@@ -929,41 +956,48 @@ class DatepickerComponent {
|
|
|
929
956
|
d.selected = this.compareDates(this.value, d, this.year);
|
|
930
957
|
});
|
|
931
958
|
}
|
|
932
|
-
writeValue(obj) {
|
|
933
|
-
if (obj) {
|
|
934
|
-
this.value = new Date(obj);
|
|
935
|
-
this.month = this.value.getMonth();
|
|
936
|
-
this.year = this.value.getFullYear();
|
|
937
|
-
}
|
|
938
|
-
}
|
|
939
|
-
registerOnChange(fn) {
|
|
940
|
-
this.onChange$ = fn;
|
|
941
|
-
}
|
|
942
|
-
registerOnTouched(fn) {
|
|
943
|
-
this.onTouched$ = fn;
|
|
944
|
-
}
|
|
945
|
-
onBlur(event) {
|
|
946
|
-
if (this.onTouched$) {
|
|
947
|
-
this.onTouched$();
|
|
948
|
-
}
|
|
949
|
-
}
|
|
950
959
|
paginate(array, page_number) {
|
|
951
960
|
return array.slice((page_number - 1) * this.yearsPerPage, page_number * this.yearsPerPage);
|
|
952
961
|
}
|
|
962
|
+
getDateFromInput() {
|
|
963
|
+
var _a, _b;
|
|
964
|
+
if (((_a = this.dateInput) === null || _a === void 0 ? void 0 : _a.nativeElement.value) !== '') {
|
|
965
|
+
var dateParts = (_b = this.dateInput) === null || _b === void 0 ? void 0 : _b.nativeElement.value.split("/");
|
|
966
|
+
let dateInGrFormat = new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0], 3, 0, 0);
|
|
967
|
+
if (dateInGrFormat.toString() !== 'Invalid Date') {
|
|
968
|
+
this.writeValue(dateInGrFormat);
|
|
969
|
+
this.calcDays();
|
|
970
|
+
this.valueChange.emit(dateInGrFormat);
|
|
971
|
+
}
|
|
972
|
+
if (this.onChange$) {
|
|
973
|
+
this.onChange$(this.value);
|
|
974
|
+
}
|
|
975
|
+
this.updateDays();
|
|
976
|
+
if (this.onTouched$) {
|
|
977
|
+
this.onTouched$();
|
|
978
|
+
}
|
|
979
|
+
}
|
|
980
|
+
this.showCalendar = false;
|
|
981
|
+
}
|
|
953
982
|
openYears() {
|
|
954
983
|
this.showYears = !this.showYears;
|
|
955
|
-
this.
|
|
984
|
+
this.calendarYearPage = Math.ceil(this.calendarYears.map(x => x.year).indexOf(this.year) / this.yearsPerPage);
|
|
985
|
+
this.showCalendarYears = this.paginate(this.calendarYears, this.calendarYearPage !== 0 ? this.calendarYearPage : 1);
|
|
956
986
|
this.calcDays();
|
|
957
987
|
}
|
|
958
988
|
openCalendar() {
|
|
959
989
|
this.showCalendar = !this.showCalendar;
|
|
960
990
|
this.calcDays();
|
|
961
991
|
}
|
|
992
|
+
closeCalendar() {
|
|
993
|
+
this.showCalendar = false;
|
|
994
|
+
this.getDateFromInput();
|
|
995
|
+
}
|
|
962
996
|
}
|
|
963
997
|
DatepickerComponent.decorators = [
|
|
964
998
|
{ type: Component, args: [{
|
|
965
999
|
selector: 'lib-date-picker',
|
|
966
|
-
template: "<div class=\"relative flex\">\r\n\r\n <input type=\"text\"\r\n #dateInput\r\n [readonly]=\"readonly\"\r\n name=\"dateInput\"\r\n (blur)=\"onBlur($event)\"\r\n id=\"dateInput\"\r\n [value]=\"value | date: displayFormat\"\r\n class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300 focus:border-0\"\r\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n <button class=\"relative inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500\"\r\n [disabled]=\"disabled\"\r\n (click)=\"openCalendar()\"\r\n [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n </button>\r\n\r\n <div *ngIf=\"showCalendar\"\r\n class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\r\n style=\"height:18rem;min-width:16rem;\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div>\r\n <button class=\"text-lg font-bold text-gray-800\"
|
|
1000
|
+
template: "<div class=\"relative flex\"\r\n (clickOutside)=\"closeCalendar()\">\r\n\r\n <input type=\"text\"\r\n #dateInput\r\n [readonly]=\"readonly\"\r\n name=\"dateInput\"\r\n (blur)=\"onBlur($event)\"\r\n id=\"dateInput\"\r\n (focus)=\"showCalendar = false\"\r\n [value]=\"value | date: displayFormat\"\r\n class=\"w-full focus:ring-0 focus:outline-none rounded-none sm:text-sm border-gray-300 focus:border-0\"\r\n [ngClass]=\"{'cursor-not-allowed': disabled}\"\r\n [placeholder]=\"disabled ? '' : placeholder\">\r\n\r\n <button type=\"button\"\r\n class=\"relative inline-flex items-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-r-sm text-gray-700 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-500 focus:border-gray-500\"\r\n [disabled]=\"disabled\"\r\n (click)=\"openCalendar()\"\r\n [ngClass]=\"{'cursor-not-allowed': disabled}\">\r\n <i class=\"ms-Icon ms-Icon--DateTime2\"></i>\r\n </button>\r\n\r\n <div *ngIf=\"showCalendar\"\r\n class=\"bg-gray-100 mt-10 rounded-sm shadow-md p-4 absolute left-0 z-50 w-full\"\r\n style=\"height:18rem;min-width:16rem;\"\r\n name=\"calendar\">\r\n <div class=\"flex justify-between items-center mb-2\">\r\n <div>\r\n <button type=\"button\"\r\n (click)=\"openYears()\">\r\n <span class=\"text-lg font-bold text-gray-800\">\r\n {{monthNames[month]}}\r\n </span>\r\n <span class=\"ml-1 text-lg text-gray-600 font-normal\">\r\n {{year}}</span>\r\n </button>\r\n </div>\r\n <div *ngIf=\"!showYears; else showYearsPickerTmpl\">\r\n <button type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n (click)=\"previousMonth();\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 19l-7-7 7-7\" />\r\n </svg>\r\n </button>\r\n <button type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n (click)=\"nextMonth()\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" />\r\n </svg>\r\n </button>\r\n </div>\r\n <ng-template #showYearsPickerTmpl>\r\n <div>\r\n <button type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n (click)=\"previousYear();\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M15 19l-7-7 7-7\" />\r\n </svg>\r\n </button>\r\n <button type=\"button\"\r\n class=\"transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-200 p-1 rounded-full disabled:opacity-25\"\r\n (click)=\"nextYear()\">\r\n <svg class=\"h-6 w-6 text-gray-500 inline-flex\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke=\"currentColor\">\r\n <path stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"2\"\r\n d=\"M9 5l7 7-7 7\" />\r\n </svg>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"flex flex-wrap mb-3 -mx-1\"\r\n *ngIf=\"!showYears; else showCalYearsTmpl\">\r\n <div *ngFor=\"let day of dayNames\"\r\n class=\"text-gray-800 font-medium text-center text-sm uppercase\"\r\n style=\"width: 14.28%\">{{day}}</div>\r\n </div>\r\n\r\n <ng-template #showCalYearsTmpl>\r\n <div class=\"flex flex-wrap -mx-1 items-center\">\r\n <div *ngFor=\"let year of showCalendarYears\"\r\n style=\"width: 18.28%\"\r\n class=\"px-1 mb-1\">\r\n <div (click)=\"selectYearValue(year)\"\r\n class=\"cursor-pointer text-center hover:text-red-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n [class]=\"year.selected ? 'bg-gray-700 text-red-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{year.year}}</div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <div class=\"flex flex-wrap -mx-1 items-center\"\r\n *ngIf=\"!showYears\">\r\n <div *ngFor=\"let blankday of blankDays\"\r\n style=\"width: 14.28%\"\r\n class=\"text-center border p-1 border-transparent text-sm opacity-50\">{{blankday}}</div>\r\n <div *ngFor=\"let date of calendarDates\"\r\n style=\"width: 14.28%\"\r\n class=\"px-1 mb-1\">\r\n <div (click)=\"selectDateValue(date)\"\r\n class=\"cursor-pointer text-center hover:text-red-600 text-sm leading-none rounded-full leading-loose transition ease-in-out duration-100\"\r\n [class]=\"date.selected ? 'bg-gray-700 text-red-600 font-medium' : 'text-gray-800 hover:bg-gray-800'\">{{date.day}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>",
|
|
967
1001
|
providers: [
|
|
968
1002
|
{
|
|
969
1003
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1140,7 +1174,7 @@ class ToggleComponent {
|
|
|
1140
1174
|
ToggleComponent.decorators = [
|
|
1141
1175
|
{ type: Component, args: [{
|
|
1142
1176
|
selector: 'lib-toggle',
|
|
1143
|
-
template: "<button type=\"button\"\r\n [ngClass]=\"value ? '
|
|
1177
|
+
template: "<button type=\"button\"\r\n [ngClass]=\"value ? (disabled ? 'on disabled' : 'on') : 'off'\"\r\n class=\"toggle-button\"\r\n role=\"switch\"\r\n aria-checked=\"false\"\r\n aria-labelledby=\"isPrivate\"\r\n (click)=\"changeValue()\"\r\n (blur)=\"onBlur($event)\"\r\n value=\"{{value}}\"\r\n [disabled]=\"disabled\"\r\n [title]=\"disabled ? '\u03A4\u03BF \u03B1\u03C1\u03C7\u03B5\u03AF\u03BF \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03B9\u03B4\u03C9\u03C4\u03B9\u03BA\u03CC' : '\u0399\u03B4\u03B9\u03C9\u03C4\u03B9\u03BA\u03CC'\">\r\n <span aria-hidden=\"true\"\r\n [ngClass]=\"value ? 'enabled-anim' : 'disabled-anim'\"\r\n class=\"toggle-span\"></span>\r\n</button>",
|
|
1144
1178
|
providers: [
|
|
1145
1179
|
{
|
|
1146
1180
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1627,7 +1661,16 @@ class ViewLayoutComponent {
|
|
|
1627
1661
|
// tslint:disable-next-line:no-output-on-prefix
|
|
1628
1662
|
this.onSearch = new EventEmitter();
|
|
1629
1663
|
}
|
|
1630
|
-
ngOnInit() {
|
|
1664
|
+
ngOnInit() {
|
|
1665
|
+
var _a;
|
|
1666
|
+
fromEvent((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement, 'keyup').pipe(map((event) => {
|
|
1667
|
+
return event.target.value; // Get input value.
|
|
1668
|
+
}), filter(inputValue => inputValue.length >= 3 || inputValue.length === 0),
|
|
1669
|
+
// If character length greater than minimumSearchCharacters setting.
|
|
1670
|
+
debounceTime(1000), // Time in milliseconds between key events.
|
|
1671
|
+
distinctUntilChanged() // If previous query is different from current.
|
|
1672
|
+
).subscribe();
|
|
1673
|
+
}
|
|
1631
1674
|
emitActionClick(action) {
|
|
1632
1675
|
this.onAction.emit(action);
|
|
1633
1676
|
}
|
|
@@ -1645,16 +1688,7 @@ class ViewLayoutComponent {
|
|
|
1645
1688
|
}
|
|
1646
1689
|
searchActionType(text) {
|
|
1647
1690
|
var _a;
|
|
1648
|
-
|
|
1649
|
-
return event.target.value; // Get input value.
|
|
1650
|
-
}), filter(inputValue => inputValue.length >= 3 || inputValue.length === 0),
|
|
1651
|
-
// If character length greater than minimumSearchCharacters setting.
|
|
1652
|
-
debounceTime(1000), // Time in milliseconds between key events.
|
|
1653
|
-
distinctUntilChanged() // If previous query is different from current.
|
|
1654
|
-
).subscribe(_ => {
|
|
1655
|
-
var _a;
|
|
1656
|
-
this.onSearch.emit((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement.value);
|
|
1657
|
-
});
|
|
1691
|
+
this.onSearch.emit((_a = this.searchInput$) === null || _a === void 0 ? void 0 : _a.nativeElement.value);
|
|
1658
1692
|
}
|
|
1659
1693
|
handleClear(event) {
|
|
1660
1694
|
var _a;
|