nexheal-lib 0.0.8 → 0.0.10
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/fesm2022/nexheal-lib.mjs +12 -12
- package/fesm2022/nexheal-lib.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2022/nexheal-lib.mjs
CHANGED
|
@@ -310,7 +310,7 @@ class AutocompleteControl {
|
|
|
310
310
|
useExisting: AutocompleteControl,
|
|
311
311
|
multi: true,
|
|
312
312
|
},
|
|
313
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" [ngClass]=\"{'is-invalid': error}\"\r\n [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n <label class=\"clear\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n @if (isDropdownOpen) {\r\n <div #dropdownElement class=\"option-list\">\r\n @if (filteredSuggestions.length === 0) {\r\n <div class=\"no-results\">\r\n <div>No results found</div>\r\n @if (isAddNewItem) {\r\n <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n Add New Item\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': suggestion === selectedItems,\r\n 'highlighted': highlightedIndex === i\r\n }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n @if (suggestion.countryCode) {\r\n <img src=\"https://flagcdn.com/w80/{{ suggestion.countryCode }}.png\" width=\"20\"\r\n alt=\"{{ suggestion.countryCode }} flag\" loading=\"lazy\" />\r\n }\r\n {{ suggestion[optionDisplayProperty] }}\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
313
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "dropdownElement", first: true, predicate: ["dropdownElement"], descendants: true }], ngImport: i0, template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" [ngClass]=\"{'is-invalid': error}\"\r\n [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n <label class=\"clear\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n @if (isDropdownOpen) {\r\n <div #dropdownElement class=\"option-list\">\r\n @if (filteredSuggestions.length === 0) {\r\n <div class=\"no-results\">\r\n <div>No results found</div>\r\n @if (isAddNewItem) {\r\n <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n Add New Item\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': suggestion === selectedItems,\r\n 'highlighted': highlightedIndex === i\r\n }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n @if (suggestion.countryCode) {\r\n <img src=\"https://flagcdn.com/w80/{{ suggestion.countryCode }}.png\" width=\"20\"\r\n alt=\"{{ suggestion.countryCode }} flag\" loading=\"lazy\" />\r\n }\r\n {{ suggestion[optionDisplayProperty] }}\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
314
314
|
}
|
|
315
315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AutocompleteControl, decorators: [{
|
|
316
316
|
type: Component,
|
|
@@ -320,7 +320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
320
320
|
useExisting: AutocompleteControl,
|
|
321
321
|
multi: true,
|
|
322
322
|
},
|
|
323
|
-
], template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" [ngClass]=\"{'is-invalid': error}\"\r\n [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n <label class=\"clear\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n @if (isDropdownOpen) {\r\n <div #dropdownElement class=\"option-list\">\r\n @if (filteredSuggestions.length === 0) {\r\n <div class=\"no-results\">\r\n <div>No results found</div>\r\n @if (isAddNewItem) {\r\n <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n Add New Item\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': suggestion === selectedItems,\r\n 'highlighted': highlightedIndex === i\r\n }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n @if (suggestion.countryCode) {\r\n <img src=\"https://flagcdn.com/w80/{{ suggestion.countryCode }}.png\" width=\"20\"\r\n alt=\"{{ suggestion.countryCode }} flag\" loading=\"lazy\" />\r\n }\r\n {{ suggestion[optionDisplayProperty] }}\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}\n"] }]
|
|
323
|
+
], template: "<div class=\"form-group auto-complete\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #inputElement type=\"text\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" (focus)=\"onFocus()\" [ngClass]=\"{'is-invalid': error}\"\r\n [attr.autocomplete]=\"autocomplete || null\" [readonly]=\"readonly\" />\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (!inputLoader && inputControl.value && clearVal && hasFocus) {\r\n <label class=\"clear\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n @if (isDropdownOpen) {\r\n <div #dropdownElement class=\"option-list\">\r\n @if (filteredSuggestions.length === 0) {\r\n <div class=\"no-results\">\r\n <div>No results found</div>\r\n @if (isAddNewItem) {\r\n <div (click)=\"onAddNewItemClick()\" class=\"btn-new\">\r\n Add New Item\r\n </div>\r\n }\r\n </div>\r\n } @else {\r\n @for (suggestion of filteredSuggestions; track suggestion[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': suggestion === selectedItems,\r\n 'highlighted': highlightedIndex === i\r\n }\" (mousedown)=\"onOptionMouseDown()\" (click)=\"selectSuggestion(suggestion)\" (mouseover)=\"onMouseOver(i)\">\r\n @if (suggestion.countryCode) {\r\n <img src=\"https://flagcdn.com/w80/{{ suggestion.countryCode }}.png\" width=\"20\"\r\n alt=\"{{ suggestion.countryCode }} flag\" loading=\"lazy\" />\r\n }\r\n {{ suggestion[optionDisplayProperty] }}\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.auto-complete .form-control{padding-right:unset}.form-group.auto-complete .clear{right:7px}.form-group.auto-complete .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.auto-complete .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}\n"] }]
|
|
324
324
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
325
325
|
type: Input
|
|
326
326
|
}], required: [{
|
|
@@ -1048,7 +1048,7 @@ class CalendarControl {
|
|
|
1048
1048
|
useExisting: forwardRef(() => CalendarControl),
|
|
1049
1049
|
multi: true,
|
|
1050
1050
|
},
|
|
1051
|
-
], viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["root"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "datePickerEl", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\">\r\n <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n <div class=\"form-group calendar\" #root (click)=\"openCalendar()\" >\r\n <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n (focus)=\"onFocus()\" [readonly]=\"readonly\" (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n <span class=\"calendar-icon\">\r\n <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n </span>\r\n <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled && !readonly) && clearVal\" (click)=\"clearDate($event)\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (click)=\"$event.stopPropagation()\">\r\n \r\n <!-- time picker -->\r\n <ng-container *ngIf=\"timeOnly\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-select\">\r\n <button (click)=\"incrementHour()\"><i class=\"he he-chevron-up\"></i></button>\r\n <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n <div class=\"time-value\">\r\n {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n </div>\r\n </ng-container>\r\n <ng-template #show24>\r\n <div class=\"time-value\">\r\n {{ selectedHour | number:'2.0' }}\r\n </div>\r\n </ng-template>\r\n\r\n <button (click)=\"decrementHour()\"><i class=\"he he-chevron-down\"></i></button>\r\n </div>\r\n <span class=\"time-separator\">:</span>\r\n <div class=\"time-select\">\r\n <button (click)=\"incrementMinute()\"><i class=\"he he-chevron-up\"></i></button>\r\n <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n <button (click)=\"decrementMinute()\"><i class=\"he he-chevron-down\"></i></button>\r\n </div>\r\n <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- day view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'day'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\" (click)=\"goToMonthView()\">\r\n <div>{{ displayMonthName }}</div>\r\n <div>{{ displayYear }}</div>\r\n </div>\r\n <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"week-header\">\r\n <div>Sun</div>\r\n <div>Mon</div>\r\n <div>Tue</div>\r\n <div>Wed</div>\r\n <div>Thu</div>\r\n <div>Fri</div>\r\n <div>Sat</div>\r\n </div>\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n day !== null &&\r\n displayYear === todayYear &&\r\n displayMonth === todayMonth &&\r\n day === todayDate\r\n \">\r\n {{day ? day : ''}}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"showTime\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-select\">\r\n <button type=\"button\" (click)=\"incrementHour()\">\r\n <i class=\"he he-chevron-up\"></i>\r\n </button>\r\n <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n <div class=\"time-value\">\r\n {{\r\n selectedHour % 12 === 0\r\n ? 12\r\n : selectedHour % 12\r\n | number:'2.0' }}\r\n </div>\r\n </ng-container>\r\n <ng-template #show24>\r\n <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n </ng-template>\r\n <button type=\"button\" (click)=\"decrementHour()\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <span class=\"time-separator\">:</span>\r\n <div class=\"time-select\">\r\n <button type=\"button\" (click)=\"incrementMinute()\">\r\n <i class=\"he he-chevron-up\"></i>\r\n </button>\r\n <div class=\"time-value\">\r\n {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n <button type=\"button\" (click)=\"decrementMinute()\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- month view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"month-grid\">\r\n <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- year range view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"year-grid\">\r\n <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
|
|
1051
|
+
], viewQueries: [{ propertyName: "rootElement", first: true, predicate: ["root"], descendants: true, static: true }, { propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, static: true }, { propertyName: "datePickerEl", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n <div class=\"form-group calendar\" #root (click)=\"openCalendar()\" >\r\n <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n (focus)=\"onFocus()\" [readonly]=\"readonly\" (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n <span class=\"calendar-icon\">\r\n <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n </span>\r\n <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled && !readonly) && clearVal\" (click)=\"clearDate($event)\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (click)=\"$event.stopPropagation()\">\r\n \r\n <!-- time picker -->\r\n <ng-container *ngIf=\"timeOnly\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-select\">\r\n <button (click)=\"incrementHour()\"><i class=\"he he-chevron-up\"></i></button>\r\n <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n <div class=\"time-value\">\r\n {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n </div>\r\n </ng-container>\r\n <ng-template #show24>\r\n <div class=\"time-value\">\r\n {{ selectedHour | number:'2.0' }}\r\n </div>\r\n </ng-template>\r\n\r\n <button (click)=\"decrementHour()\"><i class=\"he he-chevron-down\"></i></button>\r\n </div>\r\n <span class=\"time-separator\">:</span>\r\n <div class=\"time-select\">\r\n <button (click)=\"incrementMinute()\"><i class=\"he he-chevron-up\"></i></button>\r\n <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n <button (click)=\"decrementMinute()\"><i class=\"he he-chevron-down\"></i></button>\r\n </div>\r\n <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- day view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'day'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\" (click)=\"goToMonthView()\">\r\n <div>{{ displayMonthName }}</div>\r\n <div>{{ displayYear }}</div>\r\n </div>\r\n <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"week-header\">\r\n <div>Sun</div>\r\n <div>Mon</div>\r\n <div>Tue</div>\r\n <div>Wed</div>\r\n <div>Thu</div>\r\n <div>Fri</div>\r\n <div>Sat</div>\r\n </div>\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n day !== null &&\r\n displayYear === todayYear &&\r\n displayMonth === todayMonth &&\r\n day === todayDate\r\n \">\r\n {{day ? day : ''}}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"showTime\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-select\">\r\n <button type=\"button\" (click)=\"incrementHour()\">\r\n <i class=\"he he-chevron-up\"></i>\r\n </button>\r\n <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n <div class=\"time-value\">\r\n {{\r\n selectedHour % 12 === 0\r\n ? 12\r\n : selectedHour % 12\r\n | number:'2.0' }}\r\n </div>\r\n </ng-container>\r\n <ng-template #show24>\r\n <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n </ng-template>\r\n <button type=\"button\" (click)=\"decrementHour()\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <span class=\"time-separator\">:</span>\r\n <div class=\"time-select\">\r\n <button type=\"button\" (click)=\"incrementMinute()\">\r\n <i class=\"he he-chevron-up\"></i>\r\n </button>\r\n <div class=\"time-value\">\r\n {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n <button type=\"button\" (click)=\"decrementMinute()\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- month view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"month-grid\">\r\n <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- year range view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"year-grid\">\r\n <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
|
|
1052
1052
|
}
|
|
1053
1053
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CalendarControl, decorators: [{
|
|
1054
1054
|
type: Component,
|
|
@@ -1063,7 +1063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
1063
1063
|
useExisting: forwardRef(() => CalendarControl),
|
|
1064
1064
|
multi: true,
|
|
1065
1065
|
},
|
|
1066
|
-
], template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\">\r\n <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n <div class=\"form-group calendar\" #root (click)=\"openCalendar()\" >\r\n <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n (focus)=\"onFocus()\" [readonly]=\"readonly\" (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n <span class=\"calendar-icon\">\r\n <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n </span>\r\n <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled && !readonly) && clearVal\" (click)=\"clearDate($event)\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (click)=\"$event.stopPropagation()\">\r\n \r\n <!-- time picker -->\r\n <ng-container *ngIf=\"timeOnly\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-select\">\r\n <button (click)=\"incrementHour()\"><i class=\"he he-chevron-up\"></i></button>\r\n <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n <div class=\"time-value\">\r\n {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n </div>\r\n </ng-container>\r\n <ng-template #show24>\r\n <div class=\"time-value\">\r\n {{ selectedHour | number:'2.0' }}\r\n </div>\r\n </ng-template>\r\n\r\n <button (click)=\"decrementHour()\"><i class=\"he he-chevron-down\"></i></button>\r\n </div>\r\n <span class=\"time-separator\">:</span>\r\n <div class=\"time-select\">\r\n <button (click)=\"incrementMinute()\"><i class=\"he he-chevron-up\"></i></button>\r\n <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n <button (click)=\"decrementMinute()\"><i class=\"he he-chevron-down\"></i></button>\r\n </div>\r\n <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- day view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'day'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\" (click)=\"goToMonthView()\">\r\n <div>{{ displayMonthName }}</div>\r\n <div>{{ displayYear }}</div>\r\n </div>\r\n <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"week-header\">\r\n <div>Sun</div>\r\n <div>Mon</div>\r\n <div>Tue</div>\r\n <div>Wed</div>\r\n <div>Thu</div>\r\n <div>Fri</div>\r\n <div>Sat</div>\r\n </div>\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n day !== null &&\r\n displayYear === todayYear &&\r\n displayMonth === todayMonth &&\r\n day === todayDate\r\n \">\r\n {{day ? day : ''}}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"showTime\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-select\">\r\n <button type=\"button\" (click)=\"incrementHour()\">\r\n <i class=\"he he-chevron-up\"></i>\r\n </button>\r\n <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n <div class=\"time-value\">\r\n {{\r\n selectedHour % 12 === 0\r\n ? 12\r\n : selectedHour % 12\r\n | number:'2.0' }}\r\n </div>\r\n </ng-container>\r\n <ng-template #show24>\r\n <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n </ng-template>\r\n <button type=\"button\" (click)=\"decrementHour()\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <span class=\"time-separator\">:</span>\r\n <div class=\"time-select\">\r\n <button type=\"button\" (click)=\"incrementMinute()\">\r\n <i class=\"he he-chevron-up\"></i>\r\n </button>\r\n <div class=\"time-value\">\r\n {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n <button type=\"button\" (click)=\"decrementMinute()\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- month view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"month-grid\">\r\n <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- year range view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"year-grid\">\r\n <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"] }]
|
|
1066
|
+
], template: "<div class=\"form-group calendar\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n <label class=\"inp-label\" [ngClass]=\"{'required' : required}\" *ngIf=\"title\">{{ title }}</label>\r\n <div class=\"form-group calendar\" #root (click)=\"openCalendar()\" >\r\n <input type=\"text\" #inputEl [placeholder]=\"(inputPlaceholder && placeholder) ? placeholder : ''\"\r\n [formControl]=\"inputControl\" class=\"form-control\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\"\r\n (focus)=\"onFocus()\" [readonly]=\"readonly\" (click)=\"openCalendar(); $event.stopPropagation()\" (keydown)=\"onInputKeydown($event)\" />\r\n\r\n <span class=\"focus-border\" *ngIf=\"deFocus\"></span>\r\n <span class=\"calendar-icon\">\r\n <i class=\"he\" [ngClass]=\"!timeOnly ? 'he-calendar-blank' : 'he-clock'\"></i>\r\n </span>\r\n <label class=\"clear\" *ngIf=\"!inputLoader && (selectedDate && !disabled && !readonly) && clearVal\" (click)=\"clearDate($event)\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n <label *ngIf=\"inputLoader\" class=\"loader input-loader\"></label>\r\n <div *ngIf=\"error\" class=\"val-msg\">{{ errorMessage }}</div>\r\n\r\n <div class=\"datepicker-group\" #datePicker *ngIf=\"isOpen\" (click)=\"$event.stopPropagation()\">\r\n \r\n <!-- time picker -->\r\n <ng-container *ngIf=\"timeOnly\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-select\">\r\n <button (click)=\"incrementHour()\"><i class=\"he he-chevron-up\"></i></button>\r\n <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n <div class=\"time-value\">\r\n {{ ((selectedHour % 12) || 12) | number:'2.0' }}\r\n </div>\r\n </ng-container>\r\n <ng-template #show24>\r\n <div class=\"time-value\">\r\n {{ selectedHour | number:'2.0' }}\r\n </div>\r\n </ng-template>\r\n\r\n <button (click)=\"decrementHour()\"><i class=\"he he-chevron-down\"></i></button>\r\n </div>\r\n <span class=\"time-separator\">:</span>\r\n <div class=\"time-select\">\r\n <button (click)=\"incrementMinute()\"><i class=\"he he-chevron-up\"></i></button>\r\n <div class=\"time-value\">{{ selectedMinute | number:'2.0' }}</div>\r\n <button (click)=\"decrementMinute()\"><i class=\"he he-chevron-down\"></i></button>\r\n </div>\r\n <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- day view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'day'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"prevMonth()\"><i class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\" (click)=\"goToMonthView()\">\r\n <div>{{ displayMonthName }}</div>\r\n <div>{{ displayYear }}</div>\r\n </div>\r\n <button class=\"calendar-arrow\" (click)=\"nextMonth()\"><i class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"week-header\">\r\n <div>Sun</div>\r\n <div>Mon</div>\r\n <div>Tue</div>\r\n <div>Wed</div>\r\n <div>Thu</div>\r\n <div>Fri</div>\r\n <div>Sat</div>\r\n </div>\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of daysInMonth\" (click)=\"selectDay(day)\"\r\n [class.disabled]=\"day !== null && dayClassMap[day].disabled\"\r\n [class.selected]=\"day !== null && dayClassMap[day].selected\" [class.today]=\"\r\n day !== null &&\r\n displayYear === todayYear &&\r\n displayMonth === todayMonth &&\r\n day === todayDate\r\n \">\r\n {{day ? day : ''}}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"showTime\">\r\n <div class=\"time-picker\">\r\n <div class=\"time-select\">\r\n <button type=\"button\" (click)=\"incrementHour()\">\r\n <i class=\"he he-chevron-up\"></i>\r\n </button>\r\n <ng-container *ngIf=\"hourFormat === '12'; else show24\">\r\n <div class=\"time-value\">\r\n {{\r\n selectedHour % 12 === 0\r\n ? 12\r\n : selectedHour % 12\r\n | number:'2.0' }}\r\n </div>\r\n </ng-container>\r\n <ng-template #show24>\r\n <div class=\"time-value\">{{ selectedHour | number:'2.0' }}</div>\r\n </ng-template>\r\n <button type=\"button\" (click)=\"decrementHour()\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <span class=\"time-separator\">:</span>\r\n <div class=\"time-select\">\r\n <button type=\"button\" (click)=\"incrementMinute()\">\r\n <i class=\"he he-chevron-up\"></i>\r\n </button>\r\n <div class=\"time-value\">\r\n {{ selectedMinute < 10 ? '0' +selectedMinute : selectedMinute }} </div>\r\n <button type=\"button\" (click)=\"decrementMinute()\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </button>\r\n </div>\r\n <div class=\"ampm-toggle\" *ngIf=\"hourFormat === '12'\">\r\n <button type=\"button\" [class.active]=\"meridian === 'AM'\" (click)=\"setMeridian('AM')\">AM</button>\r\n <button type=\"button\" [class.active]=\"meridian === 'PM'\" (click)=\"setMeridian('PM')\">PM</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <!-- month view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'month'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear - 1\"><i\r\n class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\" (click)=\"goToYearRangeView()\">{{ displayYear }}</div>\r\n <button class=\"calendar-arrow\" (click)=\"displayYear = displayYear + 1\"><i\r\n class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"month-grid\">\r\n <div class=\"month-cell\" *ngFor=\"let m of months; index as i\" (click)=\"selectMonth(i)\">{{ m }}\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <!-- year range view -->\r\n <ng-container *ngIf=\"!timeOnly && currentView === 'yearRange'\">\r\n <div class=\"header\">\r\n <button class=\"calendar-arrow\" (click)=\"prevYearRange()\"><i class=\"he he-chevron-left\"></i></button>\r\n <div class=\"title\">{{ yearRange[0] }} ~ {{ yearRange[yearRangeSize-1] }}</div>\r\n <button class=\"calendar-arrow\" (click)=\"nextYearRange()\"><i class=\"he he-chevron-right\"></i></button>\r\n </div>\r\n <div class=\"year-grid\">\r\n <div class=\"year-cell\" *ngFor=\"let y of yearRange\" (click)=\"selectYear(y)\">{{ y }}</div>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n</div>", styles: [".form-group.calendar{position:relative}.form-group.calendar .clear{top:9px;right:34px}.form-group.calendar .datepicker-group{left:0;width:100%;z-index:1000;padding:.5rem;color:#495057;min-width:240px;border-radius:3px;background:#fff;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}.form-group.calendar .datepicker-group .header{display:flex;font-weight:600;padding:5px;align-items:center;justify-content:space-between;border-bottom:1px solid #dee2e6}.form-group.calendar .datepicker-group .header .title{gap:8px;display:flex;font-size:15px;cursor:pointer;font-weight:600}.form-group.calendar .datepicker-group .header .calendar-arrow{width:28px;height:28px;border:none;line-height:1;cursor:pointer;background:none}.form-group.calendar .datepicker-group .header .calendar-arrow i{font-size:14px}.form-group.calendar .datepicker-group .header .calendar-arrow:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .week-header{display:grid;padding:8px 0;font-size:13px;font-weight:700;text-align:center;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid,.form-group.calendar .datepicker-group .month-grid,.form-group.calendar .datepicker-group .year-grid{gap:3px;padding:5px;display:grid;grid-template-columns:repeat(7,1fr)}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{display:flex;font-size:14px;cursor:pointer;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .days-grid .day-cell.today,.form-group.calendar .datepicker-group .days-grid .month-cell.today,.form-group.calendar .datepicker-group .days-grid .year-cell.today,.form-group.calendar .datepicker-group .month-grid .day-cell.today,.form-group.calendar .datepicker-group .month-grid .month-cell.today,.form-group.calendar .datepicker-group .month-grid .year-cell.today,.form-group.calendar .datepicker-group .year-grid .day-cell.today,.form-group.calendar .datepicker-group .year-grid .month-cell.today,.form-group.calendar .datepicker-group .year-grid .year-cell.today{color:#37c0b3;font-weight:700;border:1px solid #37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.selected,.form-group.calendar .datepicker-group .days-grid .day-cell:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.selected,.form-group.calendar .datepicker-group .days-grid .month-cell:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.selected,.form-group.calendar .datepicker-group .days-grid .year-cell:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.selected,.form-group.calendar .datepicker-group .month-grid .day-cell:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.selected,.form-group.calendar .datepicker-group .month-grid .month-cell:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.selected,.form-group.calendar .datepicker-group .month-grid .year-cell:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.selected,.form-group.calendar .datepicker-group .year-grid .day-cell:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.selected,.form-group.calendar .datepicker-group .year-grid .month-cell:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.selected,.form-group.calendar .datepicker-group .year-grid .year-cell:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled{color:#e0e0e0;background:none;-webkit-user-select:none;user-select:none;cursor:not-allowed}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today{color:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled.today:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled.today:hover{color:#fff;background:#37c0b3}.form-group.calendar .datepicker-group .days-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .days-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .month-grid .year-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .day-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .month-cell.disabled:hover,.form-group.calendar .datepicker-group .year-grid .year-cell.disabled:hover{color:#e0e0e0;background:transparent}.form-group.calendar .datepicker-group .days-grid .day-cell,.form-group.calendar .datepicker-group .month-grid .day-cell,.form-group.calendar .datepicker-group .year-grid .day-cell{padding:5px 2px;border-radius:50%}.form-group.calendar .datepicker-group .days-grid .month-cell,.form-group.calendar .datepicker-group .days-grid .year-cell,.form-group.calendar .datepicker-group .month-grid .month-cell,.form-group.calendar .datepicker-group .month-grid .year-cell,.form-group.calendar .datepicker-group .year-grid .month-cell,.form-group.calendar .datepicker-group .year-grid .year-cell{padding:8px 2px;border-radius:3px}.form-group.calendar .datepicker-group .month-grid{grid-template-columns:repeat(3,1fr)}.form-group.calendar .datepicker-group .year-grid{grid-template-columns:repeat(4,1fr)}.form-group.calendar .datepicker-group .time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle{gap:6px;display:flex;margin-left:1rem;flex-direction:column;justify-content:center}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button{cursor:pointer;padding:3px 8px;font-size:.75rem;background:#fff;border:1px solid #cccccc}.form-group.calendar .datepicker-group .time-picker .ampm-toggle button.active{color:#fff;border-color:#37c0b3;background-color:#37c0b3}.form-group.calendar .datepicker-group .time-picker .time-select{display:flex;margin:0 .75rem;align-items:center;flex-direction:column}.form-group.calendar .datepicker-group .time-picker .time-select button{border:none;cursor:pointer;padding:4px 8px;background:transparent}.form-group.calendar .datepicker-group .time-picker .time-select button i{font-size:1rem}.form-group.calendar .datepicker-group .time-picker .time-select button:hover{background:#f0f0f0}.form-group.calendar .datepicker-group .time-picker .time-select .time-value{width:2rem;font-size:1rem;text-align:center;margin:2px 3px 4px}.form-group.calendar .datepicker-group .time-picker .time-separator{line-height:1;font-size:1rem}\n"] }]
|
|
1067
1067
|
}], ctorParameters: () => [{ type: i1.DatePipe }], propDecorators: { title: [{
|
|
1068
1068
|
type: Input
|
|
1069
1069
|
}], required: [{
|
|
@@ -1406,7 +1406,7 @@ class InputControl {
|
|
|
1406
1406
|
useExisting: forwardRef(() => InputControl),
|
|
1407
1407
|
multi: true,
|
|
1408
1408
|
},
|
|
1409
|
-
], ngImport: i0, template: "<div class=\"form-group input\" [ngClass]=\"customClass\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n @if (useReactiveForms) {\r\n <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n (keypress)=\"onKeyPress($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n } @else {\r\n <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"ngModel\"\r\n [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n (keypress)=\"onKeyPress($event)\" />\r\n }\r\n @if(deFocus){\r\n <span class=\"focus-border\"></span>\r\n }\r\n @if (!inputLoader && showClearButton()) {\r\n <label class=\"clear\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (price) {\r\n <label class=\"ls-price\">\r\n <i class=\"he he-rupee\"></i>\r\n </label>\r\n }\r\n\r\n @if (type === 'search') {\r\n <label class=\"ls-search\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (advSearch) {\r\n <label class=\"rs-search\" (click)=\"onAdvSearchClick()\">\r\n <i class=\"he he-search-adv\"></i>\r\n </label>\r\n }\r\n\r\n @if (search) {\r\n <label class=\"rs-search\" (click)=\"onSearchClick()\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (type === 'password' && !disabled) {\r\n <label class=\"toggle-eye\" (click)=\"passwordVisible()\">\r\n <i class=\"he\" [ngClass]=\"showPassword ? 'he-eye-off' : 'he-eye'\"></i>\r\n </label>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group .toggle-eye,.form-group ::ng-deep .toggle-eye{top:28px;right:10px;padding:5px;line-height:1;position:absolute}.form-group .toggle-eye .he,.form-group ::ng-deep .toggle-eye .he{font-size:18px}.form-group .toggle-eye .rb,.form-group ::ng-deep .toggle-eye .rb{font-size:17px;color:#5f6554}.form-group.no-label .toggle-eye{top:9px}.form-group.group-sm .toggle-eye{top:5px}.form-group.left-input-search .ls-search{top:9px;left:10px;position:absolute}.form-group.left-input-search .ls-search .he{font-size:1em;color:#807a7a;font-weight:600}.form-group.left-input-search .form-control{text-indent:1.25rem}.form-group.right-input-search .rs-search{top:27px;right:7px;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.right-input-search .rs-search i{font-size:16px;color:#807a7a}.form-group.right-input-search .rs-search:hover{background:#ff7f5d1a}.form-group.right-input-search .rs-search:hover i{color:#ff7f5d}.form-group.right-input-search .rs-search+.rs-search{right:37px}.form-group.right-input-search .clear{right:2.5rem}.form-group.right-input-search .form-control{padding-right:4rem}.form-group.right-input-search.no-label .rs-search{top:7px}.form-group.right-input-search.no-label .clear{top:10px}.form-group.right-input-search.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.right-input-search.group-sm.no-label .rs-search i{font-size:14px}.form-group.right-input-search.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.right-input-search.double-search .form-control{padding-right:6rem}.form-group.right-input-search.double-search .clear{right:4.5rem}.form-group.price-input .form-control{text-indent:1rem}.form-group.price-input .ls-price{top:21px;padding:8px;display:flex;color:#2ba599;position:absolute;align-items:center;height:calc(var(--input-height) - 2px)}.form-group.price-input .ls-price i{top:1px;color:inherit;cursor:default;font-size:12px}.form-group .clear{z-index:4;cursor:pointer;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1409
|
+
], ngImport: i0, template: "<div class=\"form-group input\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n @if (useReactiveForms) {\r\n <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n (keypress)=\"onKeyPress($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n } @else {\r\n <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"ngModel\"\r\n [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n (keypress)=\"onKeyPress($event)\" />\r\n }\r\n @if(deFocus){\r\n <span class=\"focus-border\"></span>\r\n }\r\n @if (!inputLoader && showClearButton()) {\r\n <label class=\"clear\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (price) {\r\n <label class=\"ls-price\">\r\n <i class=\"he he-rupee\"></i>\r\n </label>\r\n }\r\n\r\n @if (type === 'search') {\r\n <label class=\"ls-search\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (advSearch) {\r\n <label class=\"rs-search\" (click)=\"onAdvSearchClick()\">\r\n <i class=\"he he-search-adv\"></i>\r\n </label>\r\n }\r\n\r\n @if (search) {\r\n <label class=\"rs-search\" (click)=\"onSearchClick()\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (type === 'password' && !disabled) {\r\n <label class=\"toggle-eye\" (click)=\"passwordVisible()\">\r\n <i class=\"he\" [ngClass]=\"showPassword ? 'he-eye-off' : 'he-eye'\"></i>\r\n </label>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group .toggle-eye,.form-group ::ng-deep .toggle-eye{top:28px;right:10px;padding:5px;line-height:1;position:absolute}.form-group .toggle-eye .he,.form-group ::ng-deep .toggle-eye .he{font-size:18px}.form-group .toggle-eye .rb,.form-group ::ng-deep .toggle-eye .rb{font-size:17px;color:#5f6554}.form-group.no-label .toggle-eye{top:9px}.form-group.group-sm .toggle-eye{top:5px}.form-group.left-input-search .ls-search{top:9px;left:10px;position:absolute}.form-group.left-input-search .ls-search .he{font-size:1em;color:#807a7a;font-weight:600}.form-group.left-input-search .form-control{text-indent:1.25rem}.form-group.right-input-search .rs-search{top:27px;right:7px;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.right-input-search .rs-search i{font-size:16px;color:#807a7a}.form-group.right-input-search .rs-search:hover{background:#ff7f5d1a}.form-group.right-input-search .rs-search:hover i{color:#ff7f5d}.form-group.right-input-search .rs-search+.rs-search{right:37px}.form-group.right-input-search .clear{right:2.5rem}.form-group.right-input-search .form-control{padding-right:4rem}.form-group.right-input-search.no-label .rs-search{top:7px}.form-group.right-input-search.no-label .clear{top:10px}.form-group.right-input-search.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.right-input-search.group-sm.no-label .rs-search i{font-size:14px}.form-group.right-input-search.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.right-input-search.double-search .form-control{padding-right:6rem}.form-group.right-input-search.double-search .clear{right:4.5rem}.form-group.price-input .form-control{text-indent:1rem}.form-group.price-input .ls-price{top:21px;padding:8px;display:flex;color:#2ba599;position:absolute;align-items:center;height:calc(var(--input-height) - 2px)}.form-group.price-input .ls-price i{top:1px;color:inherit;cursor:default;font-size:12px}.form-group .clear{z-index:4;cursor:pointer;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1410
1410
|
}
|
|
1411
1411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: InputControl, decorators: [{
|
|
1412
1412
|
type: Component,
|
|
@@ -1420,7 +1420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
1420
1420
|
useExisting: forwardRef(() => InputControl),
|
|
1421
1421
|
multi: true,
|
|
1422
1422
|
},
|
|
1423
|
-
], template: "<div class=\"form-group input\" [ngClass]=\"customClass\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n @if (useReactiveForms) {\r\n <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n (keypress)=\"onKeyPress($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n } @else {\r\n <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"ngModel\"\r\n [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n (keypress)=\"onKeyPress($event)\" />\r\n }\r\n @if(deFocus){\r\n <span class=\"focus-border\"></span>\r\n }\r\n @if (!inputLoader && showClearButton()) {\r\n <label class=\"clear\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (price) {\r\n <label class=\"ls-price\">\r\n <i class=\"he he-rupee\"></i>\r\n </label>\r\n }\r\n\r\n @if (type === 'search') {\r\n <label class=\"ls-search\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (advSearch) {\r\n <label class=\"rs-search\" (click)=\"onAdvSearchClick()\">\r\n <i class=\"he he-search-adv\"></i>\r\n </label>\r\n }\r\n\r\n @if (search) {\r\n <label class=\"rs-search\" (click)=\"onSearchClick()\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (type === 'password' && !disabled) {\r\n <label class=\"toggle-eye\" (click)=\"passwordVisible()\">\r\n <i class=\"he\" [ngClass]=\"showPassword ? 'he-eye-off' : 'he-eye'\"></i>\r\n </label>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group .toggle-eye,.form-group ::ng-deep .toggle-eye{top:28px;right:10px;padding:5px;line-height:1;position:absolute}.form-group .toggle-eye .he,.form-group ::ng-deep .toggle-eye .he{font-size:18px}.form-group .toggle-eye .rb,.form-group ::ng-deep .toggle-eye .rb{font-size:17px;color:#5f6554}.form-group.no-label .toggle-eye{top:9px}.form-group.group-sm .toggle-eye{top:5px}.form-group.left-input-search .ls-search{top:9px;left:10px;position:absolute}.form-group.left-input-search .ls-search .he{font-size:1em;color:#807a7a;font-weight:600}.form-group.left-input-search .form-control{text-indent:1.25rem}.form-group.right-input-search .rs-search{top:27px;right:7px;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.right-input-search .rs-search i{font-size:16px;color:#807a7a}.form-group.right-input-search .rs-search:hover{background:#ff7f5d1a}.form-group.right-input-search .rs-search:hover i{color:#ff7f5d}.form-group.right-input-search .rs-search+.rs-search{right:37px}.form-group.right-input-search .clear{right:2.5rem}.form-group.right-input-search .form-control{padding-right:4rem}.form-group.right-input-search.no-label .rs-search{top:7px}.form-group.right-input-search.no-label .clear{top:10px}.form-group.right-input-search.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.right-input-search.group-sm.no-label .rs-search i{font-size:14px}.form-group.right-input-search.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.right-input-search.double-search .form-control{padding-right:6rem}.form-group.right-input-search.double-search .clear{right:4.5rem}.form-group.price-input .form-control{text-indent:1rem}.form-group.price-input .ls-price{top:21px;padding:8px;display:flex;color:#2ba599;position:absolute;align-items:center;height:calc(var(--input-height) - 2px)}.form-group.price-input .ls-price i{top:1px;color:inherit;cursor:default;font-size:12px}.form-group .clear{z-index:4;cursor:pointer;background-color:transparent}\n"] }]
|
|
1423
|
+
], template: "<div class=\"form-group input\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n @if (useReactiveForms) {\r\n <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n (keypress)=\"onKeyPress($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n } @else {\r\n <input [type]=\"getInputType()\" class=\"form-control\" [placeholder]=\"placeholder\" [(ngModel)]=\"ngModel\"\r\n [ngClass]=\"{ 'is-invalid': error }\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [readonly]=\"readonly\"\r\n (keypress)=\"onKeyPress($event)\" />\r\n }\r\n @if(deFocus){\r\n <span class=\"focus-border\"></span>\r\n }\r\n @if (!inputLoader && showClearButton()) {\r\n <label class=\"clear\" (click)=\"resetInput()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (price) {\r\n <label class=\"ls-price\">\r\n <i class=\"he he-rupee\"></i>\r\n </label>\r\n }\r\n\r\n @if (type === 'search') {\r\n <label class=\"ls-search\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (advSearch) {\r\n <label class=\"rs-search\" (click)=\"onAdvSearchClick()\">\r\n <i class=\"he he-search-adv\"></i>\r\n </label>\r\n }\r\n\r\n @if (search) {\r\n <label class=\"rs-search\" (click)=\"onSearchClick()\">\r\n <i class=\"he he-search\"></i>\r\n </label>\r\n }\r\n\r\n @if (type === 'password' && !disabled) {\r\n <label class=\"toggle-eye\" (click)=\"passwordVisible()\">\r\n <i class=\"he\" [ngClass]=\"showPassword ? 'he-eye-off' : 'he-eye'\"></i>\r\n </label>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group .toggle-eye,.form-group ::ng-deep .toggle-eye{top:28px;right:10px;padding:5px;line-height:1;position:absolute}.form-group .toggle-eye .he,.form-group ::ng-deep .toggle-eye .he{font-size:18px}.form-group .toggle-eye .rb,.form-group ::ng-deep .toggle-eye .rb{font-size:17px;color:#5f6554}.form-group.no-label .toggle-eye{top:9px}.form-group.group-sm .toggle-eye{top:5px}.form-group.left-input-search .ls-search{top:9px;left:10px;position:absolute}.form-group.left-input-search .ls-search .he{font-size:1em;color:#807a7a;font-weight:600}.form-group.left-input-search .form-control{text-indent:1.25rem}.form-group.right-input-search .rs-search{top:27px;right:7px;padding:5px;width:30px;height:30px;display:grid;cursor:pointer;position:absolute;border-radius:5px;place-items:center}.form-group.right-input-search .rs-search i{font-size:16px;color:#807a7a}.form-group.right-input-search .rs-search:hover{background:#ff7f5d1a}.form-group.right-input-search .rs-search:hover i{color:#ff7f5d}.form-group.right-input-search .rs-search+.rs-search{right:37px}.form-group.right-input-search .clear{right:2.5rem}.form-group.right-input-search .form-control{padding-right:4rem}.form-group.right-input-search.no-label .rs-search{top:7px}.form-group.right-input-search.no-label .clear{top:10px}.form-group.right-input-search.group-sm.no-label .rs-search{top:4px;width:27px;height:27px}.form-group.right-input-search.group-sm.no-label .rs-search i{font-size:14px}.form-group.right-input-search.group-sm.no-label .clear{top:6px;right:2.25rem}.form-group.right-input-search.double-search .form-control{padding-right:6rem}.form-group.right-input-search.double-search .clear{right:4.5rem}.form-group.price-input .form-control{text-indent:1rem}.form-group.price-input .ls-price{top:21px;padding:8px;display:flex;color:#2ba599;position:absolute;align-items:center;height:calc(var(--input-height) - 2px)}.form-group.price-input .ls-price i{top:1px;color:inherit;cursor:default;font-size:12px}.form-group .clear{z-index:4;cursor:pointer;background-color:transparent}\n"] }]
|
|
1424
1424
|
}], propDecorators: { type: [{
|
|
1425
1425
|
type: Input
|
|
1426
1426
|
}], title: [{
|
|
@@ -1902,7 +1902,7 @@ class MultiselectControl {
|
|
|
1902
1902
|
useExisting: forwardRef(() => MultiselectControl),
|
|
1903
1903
|
multi: true,
|
|
1904
1904
|
},
|
|
1905
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" (clickOutside)=\"selectListOutsideClick()\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label> }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n @if (showSearch && options.length > 3) {\r\n <div class=\"list-filter\">\r\n <div>\r\n <label class=\"checkbox-container select-all\">\r\n <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n (keydown)=\"onKeyDown($event)\" />\r\n </div>\r\n <div class=\"ms-close\">\r\n <button type=\"button\" class=\"icon-button\">\r\n <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"list-wrap\">\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n <label class=\"checkbox-container multi-select\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n {{ option[optionDisplayProperty] }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (filteredOptions.length === 0) {\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;width:calc(100% - 70px)}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
|
|
1905
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" (clickOutside)=\"selectListOutsideClick()\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label> }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n @if (showSearch && options.length > 3) {\r\n <div class=\"list-filter\">\r\n <div>\r\n <label class=\"checkbox-container select-all\">\r\n <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n (keydown)=\"onKeyDown($event)\" />\r\n </div>\r\n <div class=\"ms-close\">\r\n <button type=\"button\" class=\"icon-button\">\r\n <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"list-wrap\">\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n <label class=\"checkbox-container multi-select\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n {{ option[optionDisplayProperty] }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (filteredOptions.length === 0) {\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;width:calc(100% - 70px)}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
|
|
1906
1906
|
}
|
|
1907
1907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MultiselectControl, decorators: [{
|
|
1908
1908
|
type: Component,
|
|
@@ -1916,7 +1916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
1916
1916
|
useExisting: forwardRef(() => MultiselectControl),
|
|
1917
1917
|
multi: true,
|
|
1918
1918
|
},
|
|
1919
|
-
], template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" (clickOutside)=\"selectListOutsideClick()\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label> }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n @if (showSearch && options.length > 3) {\r\n <div class=\"list-filter\">\r\n <div>\r\n <label class=\"checkbox-container select-all\">\r\n <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n (keydown)=\"onKeyDown($event)\" />\r\n </div>\r\n <div class=\"ms-close\">\r\n <button type=\"button\" class=\"icon-button\">\r\n <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"list-wrap\">\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n <label class=\"checkbox-container multi-select\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n {{ option[optionDisplayProperty] }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (filteredOptions.length === 0) {\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;width:calc(100% - 70px)}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"] }]
|
|
1919
|
+
], template: "<div class=\"form-group multi-select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" (clickOutside)=\"selectListOutsideClick()\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" placeholder=\"{{ placeholder }}\" [formControl]=\"inputControl\"\r\n [ngClass]=\"{'is-invalid': error}\" (blur)=\"onBlur($event)\" (click)=\"toggleDropdown()\" readonly\r\n [value]=\"selectedItemList\" (keydown)=\"onKeyDown($event)\" [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && clearVal && selectedItems.length > 0) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label> }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n @if (showSearch && options.length > 3) {\r\n <div class=\"list-filter\">\r\n <div>\r\n <label class=\"checkbox-container select-all\">\r\n <input type=\"checkbox\" [checked]=\"selectAllChecked\" (change)=\"onSelectAllChange($event)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n </label>\r\n </div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search...\" (input)=\"handleInput($event) \"\r\n (keydown)=\"onKeyDown($event)\" />\r\n </div>\r\n <div class=\"ms-close\">\r\n <button type=\"button\" class=\"icon-button\">\r\n <a (click)=\"onCloseDropdown()\"><i class=\"he he-close\"></i></a>\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"list-wrap\">\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let i = $index) {\r\n <div class=\"list-item\" (change)=\"toggleCheckbox(option)\" [ngClass]=\"{ 'highlighted': i === highlightedIndex }\">\r\n <label class=\"checkbox-container multi-select\">\r\n <input type=\"checkbox\" [checked]=\"isSelected(option)\" tabindex=\"-1\" />\r\n <span class=\"checkmark\"></span>\r\n {{ option[optionDisplayProperty] }}\r\n </label>\r\n </div>\r\n }\r\n </div>\r\n\r\n @if (filteredOptions.length === 0) {\r\n <div class=\"no-results\">No results found</div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.multi-select .option-list .list-filter{gap:10px;display:flex;padding:9px 10px;align-items:center;border-bottom:1px solid #efefef}.form-group.multi-select .option-list .list-filter .checkbox-container.select-all{top:-10px;margin-bottom:0;padding-left:22px}.form-group.multi-select .option-list .list-filter .form-group{margin-bottom:0;width:calc(100% - 70px)}.form-group.multi-select .option-list .list-filter .form-group .form-control{height:34px;border-radius:5px;background:#fff;padding:.275rem .5rem;border:1px solid #cccccc!important}.form-group.multi-select .option-list .list-filter .form-group .form-control::placeholder{font-size:.925em}.form-group.multi-select .option-list .list-filter .ms-close .icon-button{background:#f0f0f0}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a{width:28px;height:28px;display:grid;cursor:pointer;position:relative;border-radius:5px;place-items:center;text-decoration:none;border:1px solid #efefef;box-shadow:0 0 3px #ebebeb}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a i{font-size:14px}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover{background:#ff7f5d1a}.form-group.multi-select .option-list .list-filter .ms-close .icon-button a:hover i{color:#ff7f5d}.form-group.multi-select .option-list .list-wrap{overflow:auto;max-height:180px}.form-group.multi-select .option-list .list-item{padding:0}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select{width:100%;font-size:1em;margin-bottom:0;font-weight:400;color:#584e4e;letter-spacing:.015rem;padding:10px 10px 10px 40px}.form-group.multi-select .option-list .list-item .checkbox-container.multi-select .checkmark{top:9px;left:10px}.form-group.multi-select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.multi-select .clear{right:30px}\n"] }]
|
|
1920
1920
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
|
|
1921
1921
|
type: Input
|
|
1922
1922
|
}], selectedItems: [{
|
|
@@ -2290,7 +2290,7 @@ class SelectControl {
|
|
|
2290
2290
|
useExisting: forwardRef(() => SelectControl),
|
|
2291
2291
|
multi: true,
|
|
2292
2292
|
},
|
|
2293
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group select\" [ngClass]=\"customClass\" (clickOutside)=\"selectListOutsideClick($event)\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\r\n [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\r\n (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label> }\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label>\r\n }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n <div class=\"no-results\" *ngIf=\"filteredOptions.length === 0\">\r\n <div>No results found</div>\r\n <div *ngIf=\"isAddNewItem\" (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\r\n </div>\r\n\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': option === selectedItem,\r\n 'highlighted': idx === highlightedIndex\r\n }\" (click)=\"selectOption(option)\">\r\n @if (option.countryCode) {\r\n <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\r\n }\r\n {{ option[optionDisplayProperty] }}\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
|
|
2293
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" (clickOutside)=\"selectListOutsideClick($event)\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\r\n [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\r\n (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label> }\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label>\r\n }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n <div class=\"no-results\" *ngIf=\"filteredOptions.length === 0\">\r\n <div>No results found</div>\r\n <div *ngIf=\"isAddNewItem\" (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\r\n </div>\r\n\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': option === selectedItem,\r\n 'highlighted': idx === highlightedIndex\r\n }\" (click)=\"selectOption(option)\">\r\n @if (option.countryCode) {\r\n <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\r\n }\r\n {{ option[optionDisplayProperty] }}\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", outputs: ["clickOutside"] }] });
|
|
2294
2294
|
}
|
|
2295
2295
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SelectControl, decorators: [{
|
|
2296
2296
|
type: Component,
|
|
@@ -2304,7 +2304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2304
2304
|
useExisting: forwardRef(() => SelectControl),
|
|
2305
2305
|
multi: true,
|
|
2306
2306
|
},
|
|
2307
|
-
], template: "<div class=\"form-group select\" [ngClass]=\"customClass\" (clickOutside)=\"selectListOutsideClick($event)\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\r\n [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\r\n (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label> }\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label>\r\n }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n <div class=\"no-results\" *ngIf=\"filteredOptions.length === 0\">\r\n <div>No results found</div>\r\n <div *ngIf=\"isAddNewItem\" (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\r\n </div>\r\n\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': option === selectedItem,\r\n 'highlighted': idx === highlightedIndex\r\n }\" (click)=\"selectOption(option)\">\r\n @if (option.countryCode) {\r\n <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\r\n }\r\n {{ option[optionDisplayProperty] }}\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"] }]
|
|
2307
|
+
], template: "<div class=\"form-group select\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\" (clickOutside)=\"selectListOutsideClick($event)\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{ 'required': required }\">{{ title }}</label>\r\n }\r\n\r\n <input #input type=\"text\" class=\"form-control\" [placeholder]=\"placeholder ? placeholder : ''\"\r\n [formControl]=\"inputControl\" [ngClass]=\"{ 'is-invalid': error }\" (blur)=\"onBlur()\" (click)=\"toggleDropdown()\"\r\n (keydown)=\"onKeyDown($event)\" readonly [attr.autocomplete]=\"autocomplete || null\" />\r\n\r\n @if (deFocus) {\r\n <span class=\"focus-border\"></span>\r\n }\r\n\r\n @if (!inputLoader && isDropdownOpen && selectedItem && clearVal) {\r\n <label class=\"clear\" (click)=\"resetSelection()\">\r\n <i class=\"he he-close\"></i>\r\n </label> }\r\n @if (!inputLoader) {\r\n <label class=\"arrow\">\r\n <i class=\"he he-chevron-down\"></i>\r\n </label>\r\n }\r\n\r\n @if (isDropdownOpen) {\r\n <div #dropdown class=\"option-list\">\r\n <div class=\"no-results\" *ngIf=\"filteredOptions.length === 0\">\r\n <div>No results found</div>\r\n <div *ngIf=\"isAddNewItem\" (click)=\"onAddNewItemClick()\" class=\"btn-new\">Add New Item</div>\r\n </div>\r\n\r\n @for (option of filteredOptions; track option[optionDisplayProperty]; let idx = $index) {\r\n <div class=\"list-item\" [ngClass]=\"{\r\n 'active': option === selectedItem,\r\n 'highlighted': idx === highlightedIndex\r\n }\" (click)=\"selectOption(option)\">\r\n @if (option.countryCode) {\r\n <img src=\"https://flagcdn.com/w80/{{ option.countryCode }}.png\" width=\"20\" alt=\"{{ option.countryCode }} flag\" loading=\"lazy\" />\r\n }\r\n {{ option[optionDisplayProperty] }}\r\n </div>\r\n }\r\n\r\n </div>\r\n }\r\n\r\n @if (inputLoader) {\r\n <label class=\"loader input-loader\"></label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group.select .option-list .no-results{padding:10px;color:#9b9b9b;text-align:center}.form-group.select .option-list .no-results .btn-new{padding:5px 0;cursor:pointer;color:#0d6efd}.form-group.select .clear{right:30px}\n"] }]
|
|
2308
2308
|
}], propDecorators: { optionDisplayProperty: [{
|
|
2309
2309
|
type: Input
|
|
2310
2310
|
}], required: [{
|
|
@@ -2812,7 +2812,7 @@ class TextareaControl {
|
|
|
2812
2812
|
useExisting: forwardRef(() => TextareaControl),
|
|
2813
2813
|
multi: true,
|
|
2814
2814
|
},
|
|
2815
|
-
], ngImport: i0, template: "<div class=\"form-group textarea\" [ngClass]=\"customClass\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{'required' : required}\">{{ title }}</label>\r\n }\r\n <textarea class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"textareaControl\"\r\n [ngClass]=\"{ 'is-invalid': error }\" [readonly]=\"readonly\" (blur)=\"onBlur()\"></textarea>\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (textareaControl.value && clearVal && !readonly) {\r\n <label class=\"clear\" (click)=\"resetTextarea()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group textarea{resize:none;min-height:100px}.form-group textarea.resize{resize:auto}.form-group textarea::-webkit-scrollbar-thumb{border-radius:10px}.form-group textarea::-webkit-scrollbar-track{background:#e8eaf1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2815
|
+
], ngImport: i0, template: "<div class=\"form-group textarea\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{'required' : required}\">{{ title }}</label>\r\n }\r\n <textarea class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"textareaControl\"\r\n [ngClass]=\"{ 'is-invalid': error }\" [readonly]=\"readonly\" (blur)=\"onBlur()\"></textarea>\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (textareaControl.value && clearVal && !readonly) {\r\n <label class=\"clear\" (click)=\"resetTextarea()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group textarea{resize:none;min-height:100px}.form-group textarea.resize{resize:auto}.form-group textarea::-webkit-scrollbar-thumb{border-radius:10px}.form-group textarea::-webkit-scrollbar-track{background:#e8eaf1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2816
2816
|
}
|
|
2817
2817
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TextareaControl, decorators: [{
|
|
2818
2818
|
type: Component,
|
|
@@ -2825,7 +2825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2825
2825
|
useExisting: forwardRef(() => TextareaControl),
|
|
2826
2826
|
multi: true,
|
|
2827
2827
|
},
|
|
2828
|
-
], template: "<div class=\"form-group textarea\" [ngClass]=\"customClass\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{'required' : required}\">{{ title }}</label>\r\n }\r\n <textarea class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"textareaControl\"\r\n [ngClass]=\"{ 'is-invalid': error }\" [readonly]=\"readonly\" (blur)=\"onBlur()\"></textarea>\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (textareaControl.value && clearVal && !readonly) {\r\n <label class=\"clear\" (click)=\"resetTextarea()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group textarea{resize:none;min-height:100px}.form-group textarea.resize{resize:auto}.form-group textarea::-webkit-scrollbar-thumb{border-radius:10px}.form-group textarea::-webkit-scrollbar-track{background:#e8eaf1}\n"] }]
|
|
2828
|
+
], template: "<div class=\"form-group textarea\" [ngClass]=\"customClass\" [class.readonly]=\"readonly\">\r\n @if (title) {\r\n <label class=\"inp-label\" [ngClass]=\"{'required' : required}\">{{ title }}</label>\r\n }\r\n <textarea class=\"form-control\" [placeholder]=\"placeholder\" [formControl]=\"textareaControl\"\r\n [ngClass]=\"{ 'is-invalid': error }\" [readonly]=\"readonly\" (blur)=\"onBlur()\"></textarea>\r\n\r\n <span class=\"focus-border\"></span>\r\n\r\n @if (textareaControl.value && clearVal && !readonly) {\r\n <label class=\"clear\" (click)=\"resetTextarea()\">\r\n <i class=\"he he-close\"></i>\r\n </label>\r\n }\r\n\r\n @if (error) {\r\n <div class=\"val-msg\">{{ errorMessage }}</div>\r\n }\r\n</div>", styles: [".form-group textarea{resize:none;min-height:100px}.form-group textarea.resize{resize:auto}.form-group textarea::-webkit-scrollbar-thumb{border-radius:10px}.form-group textarea::-webkit-scrollbar-track{background:#e8eaf1}\n"] }]
|
|
2829
2829
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
2830
2830
|
type: Input
|
|
2831
2831
|
}], placeholder: [{
|