@klippa/ngx-enhancy-forms 18.33.12 → 18.33.13

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.
Files changed (7) hide show
  1. package/esm2022/lib/elements/date-time-picker/date-time-picker.component.mjs +2 -2
  2. package/esm2022/lib/elements/select/select.component.mjs +2 -2
  3. package/esm2022/lib/elements/text-input/text-input.component.mjs +3 -3
  4. package/esm2022/lib/form/form-element/form-element.component.mjs +2 -2
  5. package/fesm2022/klippa-ngx-enhancy-forms.mjs +8 -8
  6. package/fesm2022/klippa-ngx-enhancy-forms.mjs.map +1 -1
  7. package/package.json +1 -1
package/esm2022/lib/elements/date-time-picker/date-time-picker.component.mjs CHANGED
@@ -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(click)=\"picker.open()\"\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:#667085}: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(click)=\"picker.open()\"\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:transparent}: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:after{position:absolute;left:50%;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-2px) translate(1px)}: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:#667085}: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(click)=\"picker.open()\"\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:#667085}: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"] }]
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(click)=\"picker.open()\"\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:transparent}: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:after{position:absolute;left:50%;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path d=\"M17.5 8.33329H2.5M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M6.5 18.3333H13.5C14.9001 18.3333 15.6002 18.3333 16.135 18.0608C16.6054 17.8211 16.9878 17.4387 17.2275 16.9683C17.5 16.4335 17.5 15.7334 17.5 14.3333V7.33329C17.5 5.93316 17.5 5.2331 17.2275 4.69832C16.9878 4.22791 16.6054 3.84546 16.135 3.60578C15.6002 3.33329 14.9001 3.33329 13.5 3.33329H6.5C5.09987 3.33329 4.3998 3.33329 3.86502 3.60578C3.39462 3.84546 3.01217 4.22791 2.77248 4.69832C2.5 5.2331 2.5 5.93316 2.5 7.33329V14.3333C2.5 15.7334 2.5 16.4335 2.77248 16.9683C3.01217 17.4387 3.39462 17.8211 3.86502 18.0608C4.3998 18.3333 5.09987 18.3333 6.5 18.3333Z\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/> </svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-2px) translate(1px)}: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:#667085}: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
  }, {
package/esm2022/lib/elements/select/select.component.mjs CHANGED
@@ -287,11 +287,11 @@ export class SelectComponent extends ValueAccessorBase {
287
287
  this.elRef.nativeElement?.querySelector('input')?.removeEventListener('keydown', this.keyListener);
288
288
  }
289
289
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectComponent, deps: [{ token: i1.FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: SELECT_TRANSLATIONS, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
290
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SelectComponent, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:28px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }
290
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SelectComponent, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:28px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }
291
291
  }
292
292
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectComponent, decorators: [{
293
293
  type: Component,
294
- args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:28px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
294
+ args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:28px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
295
295
  }], ctorParameters: () => [{ type: i1.FormElementComponent, decorators: [{
296
296
  type: Optional
297
297
  }, {
package/esm2022/lib/elements/text-input/text-input.component.mjs CHANGED
@@ -25,11 +25,11 @@ export class TextInputComponent extends ValueAccessorBase {
25
25
  return this.isPeekingPassword ? 'text' : 'password';
26
26
  }
27
27
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
28
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon", size: "size" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, hasTail: getTailTpl(), noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</div>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}.componentContainer.smallSized input{height:34px}i{position:absolute;left:.625rem;top:14px}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}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.hasTail{padding-right:2.5rem}input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
28
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon", size: "size" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, hasTail: getTailTpl(), noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n\t\t\t\t<path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t</svg>\n\t\t</div>\n\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</div>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}.componentContainer.smallSized input{height:34px}i{position:absolute;left:.625rem;top:14px}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}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.hasTail{padding-right:2.5rem}input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{font-size:18px;cursor:pointer;width:20px;height:20px}.tail .clearIcon:hover{background:#f2f4f7}.peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
29
29
  }
30
30
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextInputComponent, decorators: [{
31
31
  type: Component,
32
- args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, hasTail: getTailTpl(), noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</div>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}.componentContainer.smallSized input{height:34px}i{position:absolute;left:.625rem;top:14px}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}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.hasTail{padding-right:2.5rem}input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
32
+ args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"getType()\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, hasTail: getTailTpl(), noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n\t\t\t\t<path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t</svg>\n\t\t</div>\n\t\t<div class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</div>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}.componentContainer.smallSized input{height:34px}i{position:absolute;left:.625rem;top:14px}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}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.hasTail{padding-right:2.5rem}input.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}input.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{font-size:18px;cursor:pointer;width:20px;height:20px}.tail .clearIcon:hover{background:#f2f4f7}.peakBtn{border:none;background:transparent;height:100%;padding:0;display:flex;align-items:center;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
33
33
  }], propDecorators: { placeholder: [{
34
34
  type: Input
35
35
  }], type: [{
@@ -49,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
49
49
  }], onBlur: [{
50
50
  type: Output
51
51
  }] } });
52
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy90ZXh0LWlucHV0L3RleHQtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvdGV4dC1pbnB1dC90ZXh0LWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWMsTUFBTSxlQUFlLENBQUM7QUFDbEYsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0RBQXNELENBQUM7Ozs7QUFRdkYsTUFBTSxPQUFPLGtCQUFtQixTQUFRLGlCQUF5QjtJQU5qRTs7UUFPUyxzQkFBaUIsR0FBRyxLQUFLLENBQUM7UUFHekIsU0FBSSxHQUF3QixNQUFNLENBQUM7UUFDbkMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVsQixrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixtQkFBYyxHQUFHLElBQUksQ0FBQztRQUV0QixTQUFJLEdBQXVCLFFBQVEsQ0FBQztRQUNuQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQVk1QztJQVZPLGtCQUFrQjtRQUN4QixJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUM7SUFDbEQsQ0FBQztJQUVNLE9BQU87UUFDYixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssTUFBTSxFQUFFLENBQUM7WUFDMUIsT0FBTyxNQUFNLENBQUM7UUFDZixDQUFDO1FBQ0QsT0FBTyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDO0lBQ3JELENBQUM7OEdBdEJXLGtCQUFrQjtrR0FBbEIsa0JBQWtCLCtSQUZuQixDQUFDLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxrQkFBa0IsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDLENBQUMsaURDUnhGLDhrQ0FzQkE7OzJGRFphLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDQyxxQkFBcUIsYUFHcEIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLG9CQUFvQixFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQzs4QkFLOUUsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0ksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVGVtcGxhdGVSZWZ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtWYWx1ZUFjY2Vzc29yQmFzZX0gZnJvbSAnLi4vdmFsdWUtYWNjZXNzb3ItYmFzZS92YWx1ZS1hY2Nlc3Nvci1iYXNlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ2tscC1mb3JtLXRleHQtaW5wdXQnLFxuXHR0ZW1wbGF0ZVVybDogJy4vdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlVXJsczogWycuL3RleHQtaW5wdXQuY29tcG9uZW50LnNjc3MnXSxcblx0cHJvdmlkZXJzOiBbe3Byb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogVGV4dElucHV0Q29tcG9uZW50LCBtdWx0aTogdHJ1ZX1dLFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0SW5wdXRDb21wb25lbnQgZXh0ZW5kcyBWYWx1ZUFjY2Vzc29yQmFzZTxzdHJpbmc+IHtcblx0cHJpdmF0ZSBpc1BlZWtpbmdQYXNzd29yZCA9IGZhbHNlO1xuXG5cdEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmc7XG5cdEBJbnB1dCgpIHR5cGU6ICd0ZXh0JyB8ICdwYXNzd29yZCcgPSAndGV4dCc7XG5cdEBJbnB1dCgpIGNsZWFyYWJsZSA9IGZhbHNlO1xuXHRASW5wdXQoKSBpY29uOiAnc2VhcmNoJztcblx0QElucHV0KCkgaGFzQm9yZGVyTGVmdCA9IHRydWU7XG5cdEBJbnB1dCgpIGhhc0JvcmRlclJpZ2h0ID0gdHJ1ZTtcblx0QElucHV0KCkgcGFzc3dvcmRQZWVrSWNvbjogVGVtcGxhdGVSZWY8YW55Pjtcblx0QElucHV0KCkgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nID0gJ21lZGl1bSc7XG5cdEBPdXRwdXQoKSBvbkJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cblx0cHVibGljIHRvZ2dsZVBlYWtQYXNzd29yZCgpOiB2b2lkIHtcblx0XHR0aGlzLmlzUGVla2luZ1Bhc3N3b3JkID0gIXRoaXMuaXNQZWVraW5nUGFzc3dvcmQ7XG5cdH1cblxuXHRwdWJsaWMgZ2V0VHlwZSgpOiAndGV4dCcgfCAncGFzc3dvcmQnIHtcblx0XHRpZiAodGhpcy50eXBlID09PSAndGV4dCcpIHtcblx0XHRcdHJldHVybiAndGV4dCc7XG5cdFx0fVxuXHRcdHJldHVybiB0aGlzLmlzUGVla2luZ1Bhc3N3b3JkID8gJ3RleHQnIDogJ3Bhc3N3b3JkJztcblx0fVxufVxuIiwiPGRpdiBjbGFzcz1cImNvbXBvbmVudENvbnRhaW5lclwiIFtuZ0NsYXNzXT1cIntzbWFsbFNpemVkOiBzaXplID09PSAnc21hbGwnfVwiPlxuXHQ8bmctY29udGFpbmVyICpuZ0lmPVwiaWNvbj8ubGVuZ3RoID4gMFwiPlxuXHRcdDxpIGNsYXNzPVwidGktc2VhcmNoXCIgKm5nSWY9XCJpY29uID09PSAnc2VhcmNoJ1wiPjwvaT5cblx0PC9uZy1jb250YWluZXI+XG5cdDxpbnB1dFxuXHRcdFt0eXBlXT1cImdldFR5cGUoKVwiXG5cdFx0WyhuZ01vZGVsKV09XCJpbm5lclZhbHVlXCJcblx0XHRbbmdDbGFzc109XCJ7c2hvd0Vycm9yczogaXNJbkVycm9yU3RhdGUoKSwgaGFzSWNvbjogaWNvbj8ubGVuZ3RoID4gMCwgaGFzQ2xlYXJCdXR0b246IGNsZWFyYWJsZSwgaGFzVGFpbDogZ2V0VGFpbFRwbCgpLCBub0JvcmRlckxlZnQ6ICFoYXNCb3JkZXJMZWZ0LCBub0JvcmRlclJpZ2h0OiAhaGFzQm9yZGVyUmlnaHR9XCJcblx0XHQoaW5wdXQpPVwic2V0SW5uZXJWYWx1ZUFuZE5vdGlmeSgkZXZlbnQudGFyZ2V0LnZhbHVlKVwiXG5cdFx0W3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyID8gcGxhY2Vob2xkZXIgOiAnJ1wiXG5cdFx0KGJsdXIpPVwidG91Y2goKTsgb25CbHVyLmVtaXQoKVwiXG5cdFx0W2Rpc2FibGVkXT0nZGlzYWJsZWQnXG5cdFx0I25hdGl2ZUlucHV0UmVmXG5cdC8+XG5cdDxkaXYgY2xhc3M9XCJ0YWlsXCI+XG5cdFx0PG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJnZXRUYWlsVHBsKClcIj48L25nLWNvbnRhaW5lcj5cblx0XHQ8ZGl2IGNsYXNzPVwiY2xlYXJJY29uXCIgKm5nSWY9XCJjbGVhcmFibGUgJiYgaW5uZXJWYWx1ZT8ubGVuZ3RoID4gMFwiIChjbGljayk9XCJyZXNldFRvTnVsbCgpXCI+w5c8L2Rpdj5cblx0XHQ8ZGl2IGNsYXNzPVwicGVha0J0blwiIChjbGljayk9XCJ0b2dnbGVQZWFrUGFzc3dvcmQoKVwiICpuZ0lmPVwicGFzc3dvcmRQZWVrSWNvbiAmJiB0eXBlID09PSAncGFzc3dvcmQnXCI+XG5cdFx0XHQ8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInBhc3N3b3JkUGVla0ljb25cIj48L25nLWNvbnRhaW5lcj5cblx0XHQ8L2Rpdj5cblx0PC9kaXY+XG48L2Rpdj5cbiJdfQ==
52
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy90ZXh0LWlucHV0L3RleHQtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvdGV4dC1pbnB1dC90ZXh0LWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWMsTUFBTSxlQUFlLENBQUM7QUFDbEYsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0RBQXNELENBQUM7Ozs7QUFRdkYsTUFBTSxPQUFPLGtCQUFtQixTQUFRLGlCQUF5QjtJQU5qRTs7UUFPUyxzQkFBaUIsR0FBRyxLQUFLLENBQUM7UUFHekIsU0FBSSxHQUF3QixNQUFNLENBQUM7UUFDbkMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVsQixrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixtQkFBYyxHQUFHLElBQUksQ0FBQztRQUV0QixTQUFJLEdBQXVCLFFBQVEsQ0FBQztRQUNuQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQVk1QztJQVZPLGtCQUFrQjtRQUN4QixJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUM7SUFDbEQsQ0FBQztJQUVNLE9BQU87UUFDYixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssTUFBTSxFQUFFLENBQUM7WUFDMUIsT0FBTyxNQUFNLENBQUM7UUFDZixDQUFDO1FBQ0QsT0FBTyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDO0lBQ3JELENBQUM7OEdBdEJXLGtCQUFrQjtrR0FBbEIsa0JBQWtCLCtSQUZuQixDQUFDLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxrQkFBa0IsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDLENBQUMsaURDUnhGLG8xQ0EwQkE7OzJGRGhCYSxrQkFBa0I7a0JBTjlCLFNBQVM7K0JBQ0MscUJBQXFCLGFBR3BCLENBQUMsRUFBQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsV0FBVyxvQkFBb0IsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDLENBQUM7OEJBSzlFLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNJLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFRlbXBsYXRlUmVmfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7TkdfVkFMVUVfQUNDRVNTT1J9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7VmFsdWVBY2Nlc3NvckJhc2V9IGZyb20gJy4uL3ZhbHVlLWFjY2Vzc29yLWJhc2UvdmFsdWUtYWNjZXNzb3ItYmFzZS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6ICdrbHAtZm9ybS10ZXh0LWlucHV0Jyxcblx0dGVtcGxhdGVVcmw6ICcuL3RleHQtaW5wdXQuY29tcG9uZW50Lmh0bWwnLFxuXHRzdHlsZVVybHM6IFsnLi90ZXh0LWlucHV0LmNvbXBvbmVudC5zY3NzJ10sXG5cdHByb3ZpZGVyczogW3twcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUiwgdXNlRXhpc3Rpbmc6IFRleHRJbnB1dENvbXBvbmVudCwgbXVsdGk6IHRydWV9XSxcbn0pXG5leHBvcnQgY2xhc3MgVGV4dElucHV0Q29tcG9uZW50IGV4dGVuZHMgVmFsdWVBY2Nlc3NvckJhc2U8c3RyaW5nPiB7XG5cdHByaXZhdGUgaXNQZWVraW5nUGFzc3dvcmQgPSBmYWxzZTtcblxuXHRASW5wdXQoKSBwbGFjZWhvbGRlcjogc3RyaW5nO1xuXHRASW5wdXQoKSB0eXBlOiAndGV4dCcgfCAncGFzc3dvcmQnID0gJ3RleHQnO1xuXHRASW5wdXQoKSBjbGVhcmFibGUgPSBmYWxzZTtcblx0QElucHV0KCkgaWNvbjogJ3NlYXJjaCc7XG5cdEBJbnB1dCgpIGhhc0JvcmRlckxlZnQgPSB0cnVlO1xuXHRASW5wdXQoKSBoYXNCb3JkZXJSaWdodCA9IHRydWU7XG5cdEBJbnB1dCgpIHBhc3N3b3JkUGVla0ljb246IFRlbXBsYXRlUmVmPGFueT47XG5cdEBJbnB1dCgpIHNpemU6ICdzbWFsbCcgfCAnbWVkaXVtJyA9ICdtZWRpdW0nO1xuXHRAT3V0cHV0KCkgb25CbHVyID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG5cdHB1YmxpYyB0b2dnbGVQZWFrUGFzc3dvcmQoKTogdm9pZCB7XG5cdFx0dGhpcy5pc1BlZWtpbmdQYXNzd29yZCA9ICF0aGlzLmlzUGVla2luZ1Bhc3N3b3JkO1xuXHR9XG5cblx0cHVibGljIGdldFR5cGUoKTogJ3RleHQnIHwgJ3Bhc3N3b3JkJyB7XG5cdFx0aWYgKHRoaXMudHlwZSA9PT0gJ3RleHQnKSB7XG5cdFx0XHRyZXR1cm4gJ3RleHQnO1xuXHRcdH1cblx0XHRyZXR1cm4gdGhpcy5pc1BlZWtpbmdQYXNzd29yZCA/ICd0ZXh0JyA6ICdwYXNzd29yZCc7XG5cdH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjb21wb25lbnRDb250YWluZXJcIiBbbmdDbGFzc109XCJ7c21hbGxTaXplZDogc2l6ZSA9PT0gJ3NtYWxsJ31cIj5cblx0PG5nLWNvbnRhaW5lciAqbmdJZj1cImljb24/Lmxlbmd0aCA+IDBcIj5cblx0XHQ8aSBjbGFzcz1cInRpLXNlYXJjaFwiICpuZ0lmPVwiaWNvbiA9PT0gJ3NlYXJjaCdcIj48L2k+XG5cdDwvbmctY29udGFpbmVyPlxuXHQ8aW5wdXRcblx0XHRbdHlwZV09XCJnZXRUeXBlKClcIlxuXHRcdFsobmdNb2RlbCldPVwiaW5uZXJWYWx1ZVwiXG5cdFx0W25nQ2xhc3NdPVwie3Nob3dFcnJvcnM6IGlzSW5FcnJvclN0YXRlKCksIGhhc0ljb246IGljb24/Lmxlbmd0aCA+IDAsIGhhc0NsZWFyQnV0dG9uOiBjbGVhcmFibGUsIGhhc1RhaWw6IGdldFRhaWxUcGwoKSwgbm9Cb3JkZXJMZWZ0OiAhaGFzQm9yZGVyTGVmdCwgbm9Cb3JkZXJSaWdodDogIWhhc0JvcmRlclJpZ2h0fVwiXG5cdFx0KGlucHV0KT1cInNldElubmVyVmFsdWVBbmROb3RpZnkoJGV2ZW50LnRhcmdldC52YWx1ZSlcIlxuXHRcdFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlciA/IHBsYWNlaG9sZGVyIDogJydcIlxuXHRcdChibHVyKT1cInRvdWNoKCk7IG9uQmx1ci5lbWl0KClcIlxuXHRcdFtkaXNhYmxlZF09J2Rpc2FibGVkJ1xuXHRcdCNuYXRpdmVJbnB1dFJlZlxuXHQvPlxuXHQ8ZGl2IGNsYXNzPVwidGFpbFwiPlxuXHRcdDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiZ2V0VGFpbFRwbCgpXCI+PC9uZy1jb250YWluZXI+XG5cdFx0PGRpdiBjbGFzcz1cImNsZWFySWNvblwiICpuZ0lmPVwiY2xlYXJhYmxlICYmIGlubmVyVmFsdWU/Lmxlbmd0aCA+IDBcIiAoY2xpY2spPVwicmVzZXRUb051bGwoKVwiPlxuXHRcdFx0PHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgd2lkdGg9XCIyMFwiIGhlaWdodD1cIjIwXCIgdmlld0JveD1cIjAgMCAyMCAyMFwiIGZpbGw9XCJub25lXCI+XG5cdFx0XHRcdDxwYXRoIGQ9XCJNMTUgNUw1IDE1TTUgNUwxNSAxNVwiIHN0cm9rZT1cIiM0NzU0NjdcIiBzdHJva2Utd2lkdGg9XCIxLjVcIiBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIi8+XG5cdFx0XHQ8L3N2Zz5cblx0XHQ8L2Rpdj5cblx0XHQ8ZGl2IGNsYXNzPVwicGVha0J0blwiIChjbGljayk9XCJ0b2dnbGVQZWFrUGFzc3dvcmQoKVwiICpuZ0lmPVwicGFzc3dvcmRQZWVrSWNvbiAmJiB0eXBlID09PSAncGFzc3dvcmQnXCI+XG5cdFx0XHQ8bmctY29udGFpbmVyIFtuZ1RlbXBsYXRlT3V0bGV0XT1cInBhc3N3b3JkUGVla0ljb25cIj48L25nLWNvbnRhaW5lcj5cblx0XHQ8L2Rpdj5cblx0PC9kaXY+XG48L2Rpdj5cbiJdfQ==
package/esm2022/lib/form/form-element/form-element.component.mjs CHANGED
@@ -261,11 +261,11 @@ export class FormElementComponent {
261
261
  }
262
262
  }
263
263
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormElementComponent, deps: [{ token: i1.FormComponent, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
264
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FormElementComponent, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", verticalAlignment: "verticalAlignment", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip", errorMessageHasMaxWidth: "errorMessageHasMaxWidth" }, queries: [{ propertyName: "fieldInput", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true }], viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }, { propertyName: "tailTpl", first: true, predicate: ["tailTpl"], descendants: true }, { propertyName: "captionDummyForSpaceCalculation", first: true, predicate: ["captionDummyForSpaceCalculation"], descendants: true }, { propertyName: "absoluteAnchor", first: true, predicate: ["absoluteAnchor"], descendants: true }, { propertyName: "fixedAnchor", first: true, predicate: ["fixedAnchor"], descendants: true }, { propertyName: "fixedWrapper", first: true, predicate: ["fixedWrapper"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], ngImport: i0, template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t'fixedCaptionWidth': spaceDistribution === 'fixedCaptionWidth'\n\t}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t\t<div *ngIf=\"captionEndRef\" class=\"captionEndRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer,.componentContainer.fixedCaptionWidth .caption{flex:0 0 auto}.componentContainer.fixedCaptionWidth .inputContainer{flex:1 1 0px;overflow:hidden}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer,.captionEndRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#667085;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }, { kind: "component", type: i4.WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: i5.ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] }); }
264
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: FormElementComponent, selector: "klp-form-element", inputs: { caption: "caption", direction: "direction", captionSpacing: "captionSpacing", verticalAlignment: "verticalAlignment", spaceDistribution: "spaceDistribution", swapInputAndCaption: "swapInputAndCaption", errorMessageAsTooltip: "errorMessageAsTooltip", errorMessageHasMaxWidth: "errorMessageHasMaxWidth" }, queries: [{ propertyName: "fieldInput", first: true, predicate: NG_VALUE_ACCESSOR, descendants: true }], viewQueries: [{ propertyName: "internalComponentRef", first: true, predicate: ["internalComponentRef"], descendants: true }, { propertyName: "tailTpl", first: true, predicate: ["tailTpl"], descendants: true }, { propertyName: "captionDummyForSpaceCalculation", first: true, predicate: ["captionDummyForSpaceCalculation"], descendants: true }, { propertyName: "absoluteAnchor", first: true, predicate: ["absoluteAnchor"], descendants: true }, { propertyName: "fixedAnchor", first: true, predicate: ["fixedAnchor"], descendants: true }, { propertyName: "fixedWrapper", first: true, predicate: ["fixedWrapper"], descendants: true }, { propertyName: "inputContainer", first: true, predicate: ["inputContainer"], descendants: true }], ngImport: i0, template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t'fixedCaptionWidth': spaceDistribution === 'fixedCaptionWidth'\n\t}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t\t<div *ngIf=\"captionEndRef\" class=\"captionEndRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer,.componentContainer.fixedCaptionWidth .caption{flex:0 0 auto}.componentContainer.fixedCaptionWidth .inputContainer{flex:1 1 0px;overflow:hidden}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer,.captionEndRefContainer{display:flex}.caption{font-weight:500;flex:0 0 auto;color:#101828}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#667085;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }, { kind: "component", type: i4.WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: i5.ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] }); }
265
265
  }
266
266
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormElementComponent, decorators: [{
267
267
  type: Component,
268
- args: [{ selector: 'klp-form-element', template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t'fixedCaptionWidth': spaceDistribution === 'fixedCaptionWidth'\n\t}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t\t<div *ngIf=\"captionEndRef\" class=\"captionEndRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer,.componentContainer.fixedCaptionWidth .caption{flex:0 0 auto}.componentContainer.fixedCaptionWidth .inputContainer{flex:1 1 0px;overflow:hidden}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer,.captionEndRefContainer{display:flex}.caption{font-weight:700;flex:0 0 auto;color:#515365}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#667085;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"] }]
268
+ args: [{ selector: 'klp-form-element', template: "<div\n\tclass=\"componentContainer\"\n\t[ngClass]=\"{\n\t\thasCaption: caption || captionRef,\n\t\tvertical: direction === 'vertical',\n\t\thorizontal: direction === 'horizontal',\n\t\ttopAlignment: verticalAlignment === 'top',\n\t\treverseOrder: swapInputAndCaption,\n\t\thasErrors: getErrorToShow() && attachedControl.touched,\n\t\tpercentageSpacing: captionSpacing === 'percentages' && spaceDistribution !== 'fixedInputWidth',\n\t\t'd40-60': spaceDistribution === '40-60',\n\t\t'd30-70': spaceDistribution === '30-70',\n\t\t'd34-66': spaceDistribution === '34-66',\n\t\t'fixedInputWidth': spaceDistribution === 'fixedInputWidth',\n\t\t'fixedCaptionWidth': spaceDistribution === 'fixedCaptionWidth'\n\t}\"\n>\n\t<div class=\"errorAboveInputContainer\" *ngIf=\"direction === 'horizontal' && !errorMessageAsTooltip\">\n\t\t<div class=\"spacer\"></div>\n\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t</div>\n\n\t<div class=\"captionInputAndError\" #internalComponentRef>\n\t\t<div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation *ngIf=\"hasRightOfCaptionError()\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n\t\t</div>\n\t\t<ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n\t\t<ng-container *ngIf=\"direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t<div class=\"inputContainer\" #inputContainer>\n\t\t\t<ng-container *ngIf=\"errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()\">\n\t\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\t\t\t\t<div class=\"errorTooltip\">\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t</div>\n\t\t\t</ng-container>\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n\t<div class=\"caption\"\n\t\t*ngIf=\"caption || captionRef\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n\t>\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t\t<div class=\"rightOfCaptionError\" *ngIf=\"hasRightOfCaptionError()\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n\t\t</div>\n\t\t<div *ngIf=\"captionEndRef\" class=\"captionEndRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n\t\t</div>\n\t</div>\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"date\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('message')\">{{attachedControl.errors.message.value}}</div>\n\t\t<div *ngIf=\"showDefaultError('formLevel')\">{{getErrorMessage(\"formLevel\")}}</div>\n\t\t<div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n\t</div>\n</ng-template>\n\n<ng-template #tailTpl>\n\t<div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n\t\t<ng-container *ngIf=\"hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()\">\n\t\t\t<div class=\"errorTooltipTriangle\"></div>\n\t\t\t<div class=\"errorTooltipTriangleWhite\"></div>\n\n\t\t\t<div class=\"absoluteAnchor\" #absoluteAnchor></div>\n\t\t\t<div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n\t\t\t<div class=\"fixedWrapper\" #fixedWrapper>\n\t\t\t\t<div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n\t\t\t\t\t<div class=\"errorTooltipInner\">\n\t\t\t\t\t\t<i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n\t\t\t\t\t\t<ng-container *ngIf=\"getErrorToShow()\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t\t\t\t\t\t<div *ngIf=\"!getErrorToShow() && shouldShowWarningPopup()\">\n\t\t\t\t\t\t\t<ng-container *ngIf=\"getWarningToShowIsTemplateRef()\" [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n\t\t\t\t\t\t\t<span *ngIf=\"!getWarningToShowIsTemplateRef()\">{{getWarningToShow()}}</span>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t</ng-container>\n\t\t<klp-form-warning-icon variant=\"fill\" *ngIf=\"getErrorToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t\t<klp-form-warning-icon variant=\"line\" *ngIf=\"!getErrorToShow() && getWarningToShow()\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n\t</div>\n</ng-template>\n", styles: [":host{display:block}.componentContainer:not(.hasCaption) .captionInputAndError{display:block}.componentContainer:not(.hasCaption) .captionInputAndError .inputContainer{margin-top:0;padding-left:0;max-width:initial}.componentContainer:not(.hasCaption) .errorContainer{padding-left:0}.componentContainer.hasCaption .errorAboveInputContainer .spacer{display:block}.componentContainer.reverseOrder .captionInputAndError{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical .captionInputAndError{display:block}.componentContainer.vertical .captionInputAndError .inputContainer{margin-top:.3125rem}.componentContainer.vertical .captionInputAndError .errorContainer{margin-left:0}.componentContainer.topAlignment .captionInputAndError{align-items:flex-start}.componentContainer.horizontal.hasCaption .inputContainer,.componentContainer.horizontal.hasCaption .errorAboveInputContainer .errorContainer{padding-left:1rem}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .spacer{flex:0 1 40%}.componentContainer.horizontal.hasCaption.d40-60 .errorAboveInputContainer .errorContainer{flex:60 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .caption{max-width:40%;flex:40 1 0px}.componentContainer.horizontal.hasCaption.d40-60 .inputContainer{max-width:60%;flex:60 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .spacer{flex:0 1 34%}.componentContainer.horizontal.hasCaption.d34-66 .errorAboveInputContainer .errorContainer{flex:66 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .caption{max-width:34%;flex:34 1 0px}.componentContainer.horizontal.hasCaption.d34-66 .inputContainer{max-width:66%;flex:66 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .spacer{flex:0 1 30%}.componentContainer.horizontal.hasCaption.d30-70 .errorAboveInputContainer .errorContainer{flex:70 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .caption{max-width:30%;flex:30 1 0px}.componentContainer.horizontal.hasCaption.d30-70 .inputContainer{max-width:70%;flex:70 1 0px}.componentContainer.fixedInputWidth .caption{flex:1 1 0px;overflow:hidden}.componentContainer.fixedInputWidth .inputContainer,.componentContainer.fixedCaptionWidth .caption{flex:0 0 auto}.componentContainer.fixedCaptionWidth .inputContainer{flex:1 1 0px;overflow:hidden}.captionInputAndError{display:flex;align-items:center;min-height:42px}.errorAboveInputContainer{display:flex}.errorAboveInputContainer .spacer{display:none}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption{height:0px;overflow:hidden}.captionDummyForSpaceCalculation .caption.withErrorRightOfCaption .rightOfCaptionError{display:block}.captionRefContainer,.captionEndRefContainer{display:flex}.caption{font-weight:500;flex:0 0 auto;color:#101828}.caption.percentageSpacing{max-width:40%;flex:40 1 0px}.caption.percentageSpacing.d30-70{max-width:30%;flex:30 1 0px}.caption.percentageSpacing.d34-66{max-width:34%;flex:34 1 0px}.caption.withErrorRightOfCaption{display:flex;justify-content:space-between;gap:1rem}.caption.withErrorRightOfCaption .captionText{flex:1 2 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.caption.withErrorRightOfCaption .rightOfCaptionError{display:none;font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError ::ng-deep *{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.inputContainer{position:relative;flex:1}.inputContainer .errorTooltipContainer{position:relative}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangle,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipTriangleWhite,.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltip{display:flex}.inputContainer .errorTooltipContainer.alwaysOpen .closeBtn{display:block}.inputContainer .errorTooltipContainer.alwaysOpen .errorTooltipInner{padding-right:1.4rem}.inputContainer .errorTooltipContainer klp-form-warning-icon{cursor:pointer}.inputContainer .errorTooltipContainer .absoluteAnchor{position:absolute}.inputContainer .errorTooltipContainer .fixedAnchor,.inputContainer .errorTooltipContainer .fixedWrapper{position:fixed}.inputContainer .errorTooltipTriangle{display:none;z-index:1;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(0,0,0,.13)}.inputContainer .errorTooltipTriangleWhite{display:none;z-index:3;position:absolute;right:0;transform:translate(-.15rem,calc(-100% - .1rem - 2px)) scaleX(.8);width:0px;height:0px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid white}.inputContainer .errorTooltip{display:none;justify-content:flex-end;position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip .closeBtn{display:none;position:absolute;top:.2rem;right:.2rem;padding:.2rem .4rem;cursor:pointer;color:#667085;font-size:1rem}.inputContainer .errorTooltip .closeBtn:hover{color:#515365}.inputContainer .errorTooltipInner{background:#fff;padding:.4rem .6rem;border-radius:.4rem;border:1px solid rgba(0,0,0,.13);box-shadow:#00000021 2px 3px 10px}.inputContainer:hover .errorTooltipContainer .errorTooltip,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangle,.inputContainer:hover .errorTooltipContainer .errorTooltipTriangleWhite{display:flex}.errorContainer{color:#ff8000}\n"] }]
269
269
  }], ctorParameters: () => [{ type: i1.FormComponent, decorators: [{
270
270
  type: Optional
271
271
  }] }, { type: undefined, decorators: [{