@klippa/ngx-enhancy-forms 18.33.0 → 18.33.2
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/esm2022/lib/elements/date-time-picker/date-time-picker.component.mjs +2 -2
- package/esm2022/lib/elements/email/email-input.component.mjs +2 -2
- package/esm2022/lib/elements/hour-minute-input/hour-minute-input.component.mjs +2 -2
- package/esm2022/lib/elements/number-input/number-input.component.mjs +2 -2
- package/esm2022/lib/elements/password-field/password-field.component.mjs +2 -2
- package/esm2022/lib/elements/select/select.component.mjs +9 -3
- package/esm2022/lib/elements/text-area/text-area.component.mjs +2 -2
- package/esm2022/lib/elements/text-input/text-input.component.mjs +2 -2
- package/fesm2022/klippa-ngx-enhancy-forms.mjs +22 -16
- package/fesm2022/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/lib/elements/select/select.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -373,7 +373,7 @@ export class DateTimePickerComponent extends MultipleValueAccessorBase {
|
|
|
373
373
|
deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
|
|
374
374
|
useFactory: matDateFormatsFactory,
|
|
375
375
|
},
|
|
376
|
-
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["picker"], descendants: true }, { propertyName: "timeDoubleDropdown", first: true, predicate: ["timeDoubleDropdown"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}\">\n\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t<div *ngIf=\"multiple\" class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t<ng-container *ngIf=\"selectedDates.length >= 2\">\n\t\t\t\t\t<span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n\t\t\t\t\t<span *ngIf=\"getSelectedMonths() === 1\">{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 1\">{{getTranslation('selectedDate', selectedDates[0])}}</span>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 0\" class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n\t\t\t</div>\n\n\t\t\t@if (disabled) {\n\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t}\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\tmatInput\n\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t\t<div class=\"tail\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\t<div class=\"timeContainer\" *ngIf=\"showTimeInput\" [ngClass]=\"{disabled: disabled}\">\n\n\t\t<div class=\"timeContainerInner\">\n\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"hourInput.focus()\">\n\t\t\t\t<path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t</svg>\n\n\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t<div class=\"divider\">:</div>\n\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t</div>\n\n\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown *ngIf=\"dropdownVisible\" [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\" [ngClass]=\"{isActive: isActive(hour, hours)}\">{{hour > 9 ? hour : '0' + hour }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\" [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{minute > 9 ? minute : '0' + minute}}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n", styles: [":host{display:block;--mdc-icon-button-icon-size: 18px;--mui-palette-text-disabled: red}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:#101828}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{padding:5px 0 0;height:36px;margin-right:6px;width:36px;color:#adadad}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{height:42px;width:42px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .placeholderForMultipleSelection,.componentContainer .placeholderForSelection{color:#adadad}.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer,.componentContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .dateContainer{flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px;display:flex}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer::ng-deep input{padding-right:2.5rem}.componentContainer .dateContainer::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}.tail{margin-left:.4rem;transform:translateY(.3rem)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8.OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }] }); }
|
|
376
|
+
], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInput"], descendants: true }, { propertyName: "datePickerRef", first: true, predicate: ["picker"], descendants: true }, { propertyName: "timeDoubleDropdown", first: true, predicate: ["timeDoubleDropdown"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}\">\n\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t<div *ngIf=\"multiple\" class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t<ng-container *ngIf=\"selectedDates.length >= 2\">\n\t\t\t\t\t<span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n\t\t\t\t\t<span *ngIf=\"getSelectedMonths() === 1\">{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 1\">{{getTranslation('selectedDate', selectedDates[0])}}</span>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 0\" class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n\t\t\t</div>\n\n\t\t\t@if (disabled) {\n\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t}\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\tmatInput\n\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t\t<div class=\"tail\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\t<div class=\"timeContainer\" *ngIf=\"showTimeInput\" [ngClass]=\"{disabled: disabled}\">\n\n\t\t<div class=\"timeContainerInner\">\n\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"hourInput.focus()\">\n\t\t\t\t<path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t</svg>\n\n\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t<div class=\"divider\">:</div>\n\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t</div>\n\n\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown *ngIf=\"dropdownVisible\" [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\" [ngClass]=\"{isActive: isActive(hour, hours)}\">{{hour > 9 ? hour : '0' + hour }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\" [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{minute > 9 ? minute : '0' + minute}}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n", styles: [":host{display:block;--mdc-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:#101828}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{padding:5px 0 0;height:36px;margin-right:6px;width:36px;color:#adadad}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{height:42px;width:42px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .placeholderForMultipleSelection,.componentContainer .placeholderForSelection{color:#adadad}.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer,.componentContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .dateContainer{flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px;display:flex}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer::ng-deep input{padding-right:2.5rem}.componentContainer .dateContainer::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}.tail{margin-left:.4rem;transform:translateY(.3rem)}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8.OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }] }); }
|
|
377
377
|
}
|
|
378
378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: DateTimePickerComponent, decorators: [{
|
|
379
379
|
type: Component,
|
|
@@ -384,7 +384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
384
384
|
deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
|
|
385
385
|
useFactory: matDateFormatsFactory,
|
|
386
386
|
},
|
|
387
|
-
], template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}\">\n\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t<div *ngIf=\"multiple\" class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t<ng-container *ngIf=\"selectedDates.length >= 2\">\n\t\t\t\t\t<span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n\t\t\t\t\t<span *ngIf=\"getSelectedMonths() === 1\">{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 1\">{{getTranslation('selectedDate', selectedDates[0])}}</span>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 0\" class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n\t\t\t</div>\n\n\t\t\t@if (disabled) {\n\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t}\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\tmatInput\n\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t\t<div class=\"tail\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\t<div class=\"timeContainer\" *ngIf=\"showTimeInput\" [ngClass]=\"{disabled: disabled}\">\n\n\t\t<div class=\"timeContainerInner\">\n\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"hourInput.focus()\">\n\t\t\t\t<path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t</svg>\n\n\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t<div class=\"divider\">:</div>\n\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t</div>\n\n\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown *ngIf=\"dropdownVisible\" [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\" [ngClass]=\"{isActive: isActive(hour, hours)}\">{{hour > 9 ? hour : '0' + hour }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\" [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{minute > 9 ? minute : '0' + minute}}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n", styles: [":host{display:block;--mdc-icon-button-icon-size: 18px
|
|
387
|
+
], template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}\">\n\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t<div *ngIf=\"multiple\" class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t<ng-container *ngIf=\"selectedDates.length >= 2\">\n\t\t\t\t\t<span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n\t\t\t\t\t<span *ngIf=\"getSelectedMonths() === 1\">{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 1\">{{getTranslation('selectedDate', selectedDates[0])}}</span>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 0\" class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n\t\t\t</div>\n\n\t\t\t@if (disabled) {\n\t\t\t\t<div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n\t\t\t}\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\tmatInput\n\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t\t<div class=\"tail\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\t<div class=\"timeContainer\" *ngIf=\"showTimeInput\" [ngClass]=\"{disabled: disabled}\">\n\n\t\t<div class=\"timeContainerInner\">\n\t\t\t<svg class=\"clockIcon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" (click)=\"hourInput.focus()\">\n\t\t\t\t<path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"#888da8\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t</svg>\n\n\t\t\t<input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n\t\t\t<div class=\"divider\">:</div>\n\t\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n\t\t</div>\n\n\t\t<div class=\"timeDoubleDropdown\" #timeDoubleDropdown *ngIf=\"dropdownVisible\" [onRenderFn]=\"timeDropdownRendered\">\n\t\t\t<div class=\"hourOfDay\">\n\t\t\t\t@for (hour of counter(24); track hour) {\n\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setHour(hour)\" [ngClass]=\"{isActive: isActive(hour, hours)}\">{{hour > 9 ? hour : '0' + hour }}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t\t<div class=\"minuteOfHour\">\n\t\t\t\t@for (minute of minutesOfHour; track minute) {\n\t\t\t\t\t<div class=\"entry\" (mousedown)=\"setMinute(minute)\" [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{minute > 9 ? minute : '0' + minute}}</div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n", styles: [":host{display:block;--mdc-icon-button-icon-size: 18px}:host ::ng-deep .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:unset}:host ::ng-deep .mat-datepicker-toggle-default-icon{color:#101828}:host ::ng-deep .mat-mdc-form-field{display:block;height:100%;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover,:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-focus-overlay:hover{background-color:unset}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:8px;padding-bottom:8px;min-height:40px;font-size:14px;color:#101828;width:100%}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-icon-suffix{height:100%;padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button{padding:5px 0 0;height:36px;margin-right:6px;width:36px;color:#adadad}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button.cdk-focused .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-icon-button span{height:42px;width:42px;top:50%;left:50%;transform:translate(-50%,-50%)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{display:none}:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:before,:host ::ng-deep .mat-mdc-form-field .mdc-line-ripple:after{display:none}:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mat-mdc-form-field.mat-mdc-focused,:host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-label{color:#adadad}:host ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input,:host ::ng-deep .mat-mdc-form-field-input-control,:host ::ng-deep .mdc-text-field__input{color:#101828}:host ::ng-deep .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper{padding:0}:host ::ng-deep .mat-mdc-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-mdc-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}:host ::ng-deep .disabledClickArea{position:absolute;inset:0;z-index:1}:host ::ng-deep .mat-mdc-form-field.mat-focused,:host ::ng-deep .mat-mdc-form-field-focus-overlay{opacity:unset;background-color:unset}.componentContainer{display:flex;position:relative;border-radius:2px;color:#101828}.componentContainer ::ng-deep .mdc-text-field__input::placeholder{color:#aaa!important}.componentContainer .placeholderForMultipleSelection,.componentContainer .placeholderForSelection{color:#adadad}.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer,.componentContainer.showErrors .clearButton.withoutSpacing{border-color:#ff8000}.componentContainer .clearButton{flex:0 0 auto;display:flex;align-items:center;background:#fff;color:#7b7b7b;border:1px solid #D0D5DD;margin-left:1.25rem;padding:6px 14px;font-size:18px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{border:1px solid #D0D5DD;background:#f2f4f7}.componentContainer .dateContainer{flex:1 1 auto;background:#fff;border:1px solid #D0D5DD;border-radius:8px;display:flex}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f2f4f7;border-color:transparent;cursor:pointer}.componentContainer .dateContainer.disabled::ng-deep input{cursor:pointer}.componentContainer .dateContainer:hover{border-color:#98a2b3}.componentContainer .dateContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .dateContainer::ng-deep input{padding-right:2.5rem}.componentContainer .dateContainer::ng-deep input:placeholder-shown{text-overflow:ellipsis}.componentContainer .dateContainer::ng-deep input::-webkit-input-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input::-moz-placeholder{color:red}.componentContainer .dateContainer::ng-deep input:-ms-input-placeholder{color:red}.componentContainer .timeContainer{width:102px;position:relative;margin-left:1.25rem}.componentContainer .timeContainer .timeContainerInner{height:100%;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD;border-radius:8px}.componentContainer .timeContainer .timeContainerInner:hover{border-color:#98a2b3}.componentContainer .timeContainer .timeContainerInner:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer .timeContainer.disabled .timeContainerInner,.componentContainer .timeContainer.disabled input{background:#f2f4f7}.componentContainer .timeContainer .clockIcon{width:18px;margin-right:.3125rem}.componentContainer .timeContainer input{color:#101828;text-align:center;width:20px;padding:0;border:none;height:100%}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}.componentContainer .timeContainer .timeDoubleDropdown{position:absolute;height:275px;width:102px;z-index:1;transform:translate(102px) translate(-100%);border:1px solid #D0D5DD;display:flex;background:#fff}.componentContainer .timeContainer .timeDoubleDropdown .hourOfDay{overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .minuteOfHour{border-left:1px solid #D0D5DD;overflow:auto;scrollbar-width:none;width:50%}.componentContainer .timeContainer .timeDoubleDropdown .entry{text-align:center;height:42px;width:100%;line-height:42px;background:#fff;cursor:pointer}.componentContainer .timeContainer .timeDoubleDropdown .entry:hover{background:#f8f9fa}.componentContainer .timeContainer .timeDoubleDropdown .entry.isActive{color:#fff;background:#00ac42}.tail{margin-left:.4rem;transform:translateY(.3rem)}\n"] }]
|
|
388
388
|
}], ctorParameters: () => [{ type: i1.FormElementComponent, decorators: [{
|
|
389
389
|
type: Host
|
|
390
390
|
}, {
|
|
@@ -10,11 +10,11 @@ export class EmailInputComponent extends ValueAccessorBase {
|
|
|
10
10
|
this.placeholder = '';
|
|
11
11
|
}
|
|
12
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: EmailInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: EmailInputComponent, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: EmailInputComponent, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: EmailInputComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"] }]
|
|
17
|
+
args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"] }]
|
|
18
18
|
}], propDecorators: { placeholder: [{
|
|
19
19
|
type: Input
|
|
20
20
|
}] } });
|
|
@@ -79,11 +79,11 @@ export class HourMinuteInputComponent extends ValueAccessorBase {
|
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: HourMinuteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
82
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: HourMinuteInputComponent, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{display:block;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer:hover{border-color:#98a2b3}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer:focus{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
82
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: HourMinuteInputComponent, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{display:block;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer:hover{border-color:#98a2b3}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
83
83
|
}
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: HourMinuteInputComponent, decorators: [{
|
|
85
85
|
type: Component,
|
|
86
|
-
args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{display:block;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer:hover{border-color:#98a2b3}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer:focus{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"] }]
|
|
86
|
+
args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{display:block;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer:hover{border-color:#98a2b3}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px;padding:0;border:none}.componentContainer input.hourInput{width:50px}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"] }]
|
|
87
87
|
}], propDecorators: { placeholders: [{
|
|
88
88
|
type: Input
|
|
89
89
|
}] } });
|
|
@@ -18,11 +18,11 @@ export class NumberInputComponent extends ValueAccessorBase {
|
|
|
18
18
|
}
|
|
19
19
|
}
|
|
20
20
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NumberInputComponent, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: NumberInputComponent, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
22
22
|
}
|
|
23
23
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
|
-
args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"] }]
|
|
25
|
+
args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"] }]
|
|
26
26
|
}], propDecorators: { placeholder: [{
|
|
27
27
|
type: Input
|
|
28
28
|
}], parseNumber: [{
|
|
@@ -10,11 +10,11 @@ export class PasswordFieldComponent extends ValueAccessorBase {
|
|
|
10
10
|
this.placeholder = 'Password';
|
|
11
11
|
}
|
|
12
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PasswordFieldComponent, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PasswordFieldComponent, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PasswordFieldComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"] }]
|
|
17
|
+
args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input:hover{border-color:#98a2b3}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"] }]
|
|
18
18
|
}], propDecorators: { placeholder: [{
|
|
19
19
|
type: Input
|
|
20
20
|
}] } });
|