@klippa/ngx-enhancy-forms 18.33.24 → 20.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/klippa-ngx-enhancy-forms.mjs +167 -148
- package/fesm2022/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/index.d.ts +707 -3
- package/package.json +5 -7
- package/esm2022/klippa-ngx-enhancy-forms.mjs +0 -5
- package/esm2022/lib/elementIsTruncatedCb.component.mjs +0 -58
- package/esm2022/lib/elements/button/button.component.mjs +0 -57
- package/esm2022/lib/elements/checkbox/checkbox.component.mjs +0 -23
- package/esm2022/lib/elements/date-picker/date-picker.component.mjs +0 -108
- package/esm2022/lib/elements/date-time-picker/date-time-picker.component.mjs +0 -436
- package/esm2022/lib/elements/email/email-input.component.mjs +0 -21
- package/esm2022/lib/elements/file-input/file-input.component.mjs +0 -76
- package/esm2022/lib/elements/hour-minute-input/hour-minute-input.component.mjs +0 -90
- package/esm2022/lib/elements/loading-indicator/loading-indicator.component.mjs +0 -20
- package/esm2022/lib/elements/number-input/number-input.component.mjs +0 -31
- package/esm2022/lib/elements/password-field/password-field.component.mjs +0 -21
- package/esm2022/lib/elements/radio/radio.component.mjs +0 -34
- package/esm2022/lib/elements/select/select-footer/select-footer.component.mjs +0 -15
- package/esm2022/lib/elements/select/select.component.mjs +0 -385
- package/esm2022/lib/elements/sortable-grouped-items/sortable-grouped-items.component.mjs +0 -54
- package/esm2022/lib/elements/sortable-items/sortable-items.component.mjs +0 -189
- package/esm2022/lib/elements/text-area/text-area.component.mjs +0 -23
- package/esm2022/lib/elements/text-input/text-input.component.mjs +0 -52
- package/esm2022/lib/elements/toggle/toggle.component.mjs +0 -21
- package/esm2022/lib/elements/value-accessor-base/multiple-value-accessor-base.component.mjs +0 -61
- package/esm2022/lib/elements/value-accessor-base/value-accessor-base.component.mjs +0 -167
- package/esm2022/lib/form/form-caption/form-caption.component.mjs +0 -31
- package/esm2022/lib/form/form-caption-end/form-caption-end.component.mjs +0 -34
- package/esm2022/lib/form/form-element/form-element.component.mjs +0 -317
- package/esm2022/lib/form/form-error/form-error.component.mjs +0 -40
- package/esm2022/lib/form/form-submit-button/form-submit-button.component.mjs +0 -71
- package/esm2022/lib/form/form-validation-error/form-validation-error.mjs +0 -22
- package/esm2022/lib/form/form.component.mjs +0 -442
- package/esm2022/lib/material.module.mjs +0 -22
- package/esm2022/lib/ngx-enhancy-forms.module.mjs +0 -191
- package/esm2022/lib/onRender.component.mjs +0 -19
- package/esm2022/lib/types.mjs +0 -2
- package/esm2022/lib/util/angular.mjs +0 -9
- package/esm2022/lib/util/arrays.mjs +0 -48
- package/esm2022/lib/util/classes.mjs +0 -2
- package/esm2022/lib/util/dom.mjs +0 -15
- package/esm2022/lib/util/objects.mjs +0 -38
- package/esm2022/lib/util/values.mjs +0 -23
- package/esm2022/lib/validators/dateValidator.mjs +0 -6
- package/esm2022/lib/validators/timeValidator.mjs +0 -6
- package/esm2022/lib/warning-icon/warning-icon.component.mjs +0 -17
- package/esm2022/lib/withTooltip.component.mjs +0 -185
- package/esm2022/public-api.mjs +0 -38
- package/lib/elementIsTruncatedCb.component.d.ts +0 -14
- package/lib/elements/button/button.component.d.ts +0 -16
- package/lib/elements/checkbox/checkbox.component.d.ts +0 -8
- package/lib/elements/date-picker/date-picker.component.d.ts +0 -26
- package/lib/elements/date-time-picker/date-time-picker.component.d.ts +0 -83
- package/lib/elements/email/email-input.component.d.ts +0 -7
- package/lib/elements/file-input/file-input.component.d.ts +0 -18
- package/lib/elements/hour-minute-input/hour-minute-input.component.d.ts +0 -20
- package/lib/elements/loading-indicator/loading-indicator.component.d.ts +0 -7
- package/lib/elements/number-input/number-input.component.d.ts +0 -9
- package/lib/elements/password-field/password-field.component.d.ts +0 -7
- package/lib/elements/radio/radio.component.d.ts +0 -21
- package/lib/elements/select/select-footer/select-footer.component.d.ts +0 -7
- package/lib/elements/select/select.component.d.ts +0 -91
- package/lib/elements/sortable-grouped-items/sortable-grouped-items.component.d.ts +0 -12
- package/lib/elements/sortable-items/sortable-items.component.d.ts +0 -29
- package/lib/elements/text-area/text-area.component.d.ts +0 -9
- package/lib/elements/text-input/text-input.component.d.ts +0 -19
- package/lib/elements/toggle/toggle.component.d.ts +0 -7
- package/lib/elements/value-accessor-base/multiple-value-accessor-base.component.d.ts +0 -14
- package/lib/elements/value-accessor-base/value-accessor-base.component.d.ts +0 -50
- package/lib/form/form-caption/form-caption.component.d.ts +0 -11
- package/lib/form/form-caption-end/form-caption-end.component.d.ts +0 -12
- package/lib/form/form-element/form-element.component.d.ts +0 -81
- package/lib/form/form-error/form-error.component.d.ts +0 -15
- package/lib/form/form-submit-button/form-submit-button.component.d.ts +0 -21
- package/lib/form/form-validation-error/form-validation-error.d.ts +0 -10
- package/lib/form/form.component.d.ts +0 -58
- package/lib/material.module.d.ts +0 -11
- package/lib/ngx-enhancy-forms.module.d.ts +0 -41
- package/lib/onRender.component.d.ts +0 -8
- package/lib/types.d.ts +0 -16
- package/lib/util/angular.d.ts +0 -2
- package/lib/util/arrays.d.ts +0 -8
- package/lib/util/classes.d.ts +0 -1
- package/lib/util/dom.d.ts +0 -2
- package/lib/util/objects.d.ts +0 -1
- package/lib/util/values.d.ts +0 -6
- package/lib/validators/dateValidator.d.ts +0 -3
- package/lib/validators/timeValidator.d.ts +0 -3
- package/lib/warning-icon/warning-icon.component.d.ts +0 -6
- package/lib/withTooltip.component.d.ts +0 -23
- package/public-api.d.ts +0 -34
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { Input, Directive, EventEmitter, Output, SkipSelf, Optional, Component, InjectionToken, TemplateRef, ContentChild, ViewChild, Inject, Host, HostBinding, ViewChildren, inject, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
@@ -8,7 +8,6 @@ import { isString } from 'lodash-es';
|
|
|
8
8
|
import { isArray, cloneDeep } from 'lodash';
|
|
9
9
|
import * as i4 from '@ng-select/ng-select';
|
|
10
10
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
11
|
-
import { SortablejsModule } from '@dustfoundation/ngx-sortablejs';
|
|
12
11
|
import { isSameDay, format, startOfMonth, endOfMonth, parse } from 'date-fns';
|
|
13
12
|
import * as i3 from '@angular/material/core';
|
|
14
13
|
import { MAT_NATIVE_DATE_FORMATS, MAT_DATE_FORMATS, MatNativeDateModule } from '@angular/material/core';
|
|
@@ -147,14 +146,15 @@ class SubFormDirective {
|
|
|
147
146
|
this.manuallyTriggerInjection = false;
|
|
148
147
|
this.allowInjectionToOverwrite = false;
|
|
149
148
|
}
|
|
150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
151
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SubFormDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
150
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: SubFormDirective, isStandalone: false, selector: "klp-sub-form", inputs: { injectInto: "injectInto", at: "at", manuallyTriggerInjection: "manuallyTriggerInjection", allowInjectionToOverwrite: "allowInjectionToOverwrite" }, ngImport: i0 }); }
|
|
152
151
|
}
|
|
153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SubFormDirective, decorators: [{
|
|
154
153
|
type: Directive,
|
|
155
154
|
args: [{
|
|
156
155
|
// tslint:disable-next-line:directive-selector
|
|
157
156
|
selector: 'klp-sub-form',
|
|
157
|
+
standalone: false
|
|
158
158
|
}]
|
|
159
159
|
}], propDecorators: { injectInto: [{
|
|
160
160
|
type: Input
|
|
@@ -219,12 +219,16 @@ class FormComponent {
|
|
|
219
219
|
this.topLevelFormControl.disable();
|
|
220
220
|
}
|
|
221
221
|
const source = injectInto.at(injectAt);
|
|
222
|
-
const
|
|
223
|
-
|
|
224
|
-
|
|
222
|
+
const parentValueBeforeInject = source?.value;
|
|
223
|
+
const childValueBeforeInject = this.topLevelFormControl.value;
|
|
224
|
+
if (isValueSet(parentValueBeforeInject)) {
|
|
225
|
+
this.topLevelFormControl.patchValue(parentValueBeforeInject);
|
|
225
226
|
}
|
|
226
227
|
injectInto.setControl(injectAt, this.topLevelFormControl);
|
|
227
|
-
this.onInjected.emit(
|
|
228
|
+
this.onInjected.emit({
|
|
229
|
+
childValue: childValueBeforeInject,
|
|
230
|
+
parentValue: parentValueBeforeInject,
|
|
231
|
+
});
|
|
228
232
|
}
|
|
229
233
|
else if (injectInto instanceof UntypedFormGroup) {
|
|
230
234
|
if (!allowInjectionToOverwrite) {
|
|
@@ -239,12 +243,16 @@ class FormComponent {
|
|
|
239
243
|
this.topLevelFormControl.disable();
|
|
240
244
|
}
|
|
241
245
|
const source = injectInto.get(injectAt);
|
|
242
|
-
const
|
|
243
|
-
|
|
244
|
-
|
|
246
|
+
const parentValueBeforeInject = source?.value;
|
|
247
|
+
const childValueBeforeInject = this.topLevelFormControl.value;
|
|
248
|
+
if (isValueSet(parentValueBeforeInject)) {
|
|
249
|
+
this.topLevelFormControl.patchValue(parentValueBeforeInject);
|
|
245
250
|
}
|
|
246
251
|
injectInto.setControl(injectAt, this.topLevelFormControl);
|
|
247
|
-
this.onInjected.emit(
|
|
252
|
+
this.onInjected.emit({
|
|
253
|
+
childValue: childValueBeforeInject,
|
|
254
|
+
parentValue: parentValueBeforeInject,
|
|
255
|
+
});
|
|
248
256
|
}
|
|
249
257
|
}
|
|
250
258
|
ngOnChanges(simpleChanges) {
|
|
@@ -264,12 +272,18 @@ class FormComponent {
|
|
|
264
272
|
const injectAt = this.subFormDirective.at;
|
|
265
273
|
if (injectInto instanceof UntypedFormArray) {
|
|
266
274
|
const idx = injectInto.controls.findIndex(e => e === this.topLevelFormControl);
|
|
275
|
+
if (idx === -1) {
|
|
276
|
+
return;
|
|
277
|
+
}
|
|
267
278
|
injectInto.removeAt(idx);
|
|
268
279
|
}
|
|
269
280
|
else if (injectInto instanceof UntypedFormGroup) {
|
|
270
281
|
if (typeof injectAt !== 'string') {
|
|
271
282
|
throw new Error(`cannot index FormGroup with ${typeof injectAt}`);
|
|
272
283
|
}
|
|
284
|
+
if (injectInto.get(injectAt) !== this.topLevelFormControl) {
|
|
285
|
+
return;
|
|
286
|
+
}
|
|
273
287
|
injectInto.setControl(injectAt, new FormControl());
|
|
274
288
|
}
|
|
275
289
|
}
|
|
@@ -540,12 +554,12 @@ class FormComponent {
|
|
|
540
554
|
}
|
|
541
555
|
});
|
|
542
556
|
}
|
|
543
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
557
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormComponent, deps: [{ token: FormComponent, optional: true, skipSelf: true }, { token: SubFormDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
558
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormComponent, isStandalone: false, selector: "klp-form", inputs: { readOnly: "readOnly", showErrorMessages: "showErrorMessages", errorMessageLocation: "errorMessageLocation", formGroup: "formGroup", formArray: "formArray", warnings: "warnings", immutableValues: "immutableValues", errors: "errors", patchValueInterceptor: "patchValueInterceptor", allowSubmitOn: "allowSubmitOn" }, outputs: { onInjected: "onInjected" }, usesOnChanges: true, ngImport: i0, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] }); }
|
|
545
559
|
}
|
|
546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
560
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormComponent, decorators: [{
|
|
547
561
|
type: Component,
|
|
548
|
-
args: [{ selector: 'klp-form', template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"] }]
|
|
562
|
+
args: [{ selector: 'klp-form', standalone: false, template: "<form>\n\t<ng-content></ng-content>\n</form>\n\n\n", styles: [":host{display:block}:host.row{display:flex}:host form{height:inherit}\n"] }]
|
|
549
563
|
}], ctorParameters: () => [{ type: FormComponent, decorators: [{
|
|
550
564
|
type: SkipSelf
|
|
551
565
|
}, {
|
|
@@ -589,13 +603,14 @@ class OnRenderDirective {
|
|
|
589
603
|
ngAfterViewInit() {
|
|
590
604
|
runNextRenderCycle(() => this.onRenderFn());
|
|
591
605
|
}
|
|
592
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
593
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
606
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OnRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
607
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: OnRenderDirective, isStandalone: false, selector: "[onRenderFn]", inputs: { onRenderFn: "onRenderFn" }, ngImport: i0 }); }
|
|
594
608
|
}
|
|
595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
609
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OnRenderDirective, decorators: [{
|
|
596
610
|
type: Directive,
|
|
597
611
|
args: [{
|
|
598
|
-
selector: '[onRenderFn]'
|
|
612
|
+
selector: '[onRenderFn]',
|
|
613
|
+
standalone: false
|
|
599
614
|
}]
|
|
600
615
|
}], propDecorators: { onRenderFn: [{
|
|
601
616
|
type: Input
|
|
@@ -605,12 +620,12 @@ class WarningIconComponent {
|
|
|
605
620
|
constructor() {
|
|
606
621
|
this.variant = 'line';
|
|
607
622
|
}
|
|
608
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
609
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
623
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WarningIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
624
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: WarningIconComponent, isStandalone: false, selector: "klp-form-warning-icon", inputs: { variant: "variant" }, ngImport: i0, template: "@if (variant === 'line') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.99976 7.49995V10.8333M9.99976 14.1666H10.0081M8.84585 3.24305L1.99178 15.0819C1.61161 15.7386 1.42153 16.0669 1.44962 16.3364C1.47412 16.5714 1.59727 16.785 1.7884 16.924C2.00753 17.0833 2.38691 17.0833 3.14569 17.0833H16.8538C17.6126 17.0833 17.992 17.0833 18.2111 16.924C18.4022 16.785 18.5254 16.5714 18.5499 16.3364C18.578 16.0669 18.3879 15.7386 18.0077 15.0819L11.1537 3.24305C10.7749 2.58875 10.5854 2.26159 10.3383 2.15172C10.1228 2.05587 9.87672 2.05587 9.66117 2.15172C9.41407 2.26159 9.22466 2.58875 8.84585 3.24305Z\" stroke=\"#ff8000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n}\n@if (variant === 'fill') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.6771 1.39035C10.246 1.19866 9.75387 1.19866 9.32277 1.39035C8.98983 1.53839 8.77355 1.79916 8.62305 2.01164C8.47508 2.22055 8.31666 2.49423 8.14243 2.79523L1.25313 14.6949C1.07821 14.997 0.919248 15.2715 0.811464 15.5045C0.701923 15.7413 0.583086 16.0596 0.62096 16.4229C0.669969 16.8929 0.916253 17.3201 1.29852 17.598C1.59393 17.8128 1.92892 17.8695 2.18872 17.8933C2.44435 17.9167 2.76156 17.9167 3.11063 17.9167H16.8892C17.2383 17.9167 17.5555 17.9167 17.8111 17.8933C18.0709 17.8695 18.4059 17.8128 18.7014 17.598C19.0836 17.3201 19.3299 16.8929 19.3789 16.4229C19.4168 16.0596 19.2979 15.7413 19.1884 15.5045C19.0806 15.2715 18.9217 14.997 18.7468 14.695L11.8574 2.7952C11.6832 2.49422 11.5248 2.22053 11.3768 2.01164C11.2263 1.79916 11.01 1.53839 10.6771 1.39035ZM10.8333 7.50004C10.8333 7.0398 10.4602 6.66671 9.99996 6.66671C9.53972 6.66671 9.16663 7.0398 9.16663 7.50004V10.8334C9.16663 11.2936 9.53972 11.6667 9.99996 11.6667C10.4602 11.6667 10.8333 11.2936 10.8333 10.8334V7.50004ZM9.99996 13.3334C9.53972 13.3334 9.16663 13.7065 9.16663 14.1667C9.16663 14.6269 9.53972 15 9.99996 15H10.0083C10.4685 15 10.8416 14.6269 10.8416 14.1667C10.8416 13.7065 10.4685 13.3334 10.0083 13.3334H9.99996Z\" fill=\"#ff8000\"/>\n </svg>\n}\n", styles: [":host{display:block;height:20px;width:20px;transform:translateY(-1px)}\n"] }); }
|
|
610
625
|
}
|
|
611
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WarningIconComponent, decorators: [{
|
|
612
627
|
type: Component,
|
|
613
|
-
args: [{ selector: 'klp-form-warning-icon', template: "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"
|
|
628
|
+
args: [{ selector: 'klp-form-warning-icon', standalone: false, template: "@if (variant === 'line') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M9.99976 7.49995V10.8333M9.99976 14.1666H10.0081M8.84585 3.24305L1.99178 15.0819C1.61161 15.7386 1.42153 16.0669 1.44962 16.3364C1.47412 16.5714 1.59727 16.785 1.7884 16.924C2.00753 17.0833 2.38691 17.0833 3.14569 17.0833H16.8538C17.6126 17.0833 17.992 17.0833 18.2111 16.924C18.4022 16.785 18.5254 16.5714 18.5499 16.3364C18.578 16.0669 18.3879 15.7386 18.0077 15.0819L11.1537 3.24305C10.7749 2.58875 10.5854 2.26159 10.3383 2.15172C10.1228 2.05587 9.87672 2.05587 9.66117 2.15172C9.41407 2.26159 9.22466 2.58875 8.84585 3.24305Z\" stroke=\"#ff8000\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n}\n@if (variant === 'fill') {\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.6771 1.39035C10.246 1.19866 9.75387 1.19866 9.32277 1.39035C8.98983 1.53839 8.77355 1.79916 8.62305 2.01164C8.47508 2.22055 8.31666 2.49423 8.14243 2.79523L1.25313 14.6949C1.07821 14.997 0.919248 15.2715 0.811464 15.5045C0.701923 15.7413 0.583086 16.0596 0.62096 16.4229C0.669969 16.8929 0.916253 17.3201 1.29852 17.598C1.59393 17.8128 1.92892 17.8695 2.18872 17.8933C2.44435 17.9167 2.76156 17.9167 3.11063 17.9167H16.8892C17.2383 17.9167 17.5555 17.9167 17.8111 17.8933C18.0709 17.8695 18.4059 17.8128 18.7014 17.598C19.0836 17.3201 19.3299 16.8929 19.3789 16.4229C19.4168 16.0596 19.2979 15.7413 19.1884 15.5045C19.0806 15.2715 18.9217 14.997 18.7468 14.695L11.8574 2.7952C11.6832 2.49422 11.5248 2.22053 11.3768 2.01164C11.2263 1.79916 11.01 1.53839 10.6771 1.39035ZM10.8333 7.50004C10.8333 7.0398 10.4602 6.66671 9.99996 6.66671C9.53972 6.66671 9.16663 7.0398 9.16663 7.50004V10.8334C9.16663 11.2936 9.53972 11.6667 9.99996 11.6667C10.4602 11.6667 10.8333 11.2936 10.8333 10.8334V7.50004ZM9.99996 13.3334C9.53972 13.3334 9.16663 13.7065 9.16663 14.1667C9.16663 14.6269 9.53972 15 9.99996 15H10.0083C10.4685 15 10.8416 14.6269 10.8416 14.1667C10.8416 13.7065 10.4685 13.3334 10.0083 13.3334H9.99996Z\" fill=\"#ff8000\"/>\n </svg>\n}\n", styles: [":host{display:block;height:20px;width:20px;transform:translateY(-1px)}\n"] }]
|
|
614
629
|
}], propDecorators: { variant: [{
|
|
615
630
|
type: Input
|
|
616
631
|
}] } });
|
|
@@ -657,13 +672,14 @@ class ElementIsTruncatedCbComponent {
|
|
|
657
672
|
ngOnDestroy() {
|
|
658
673
|
this.observer?.disconnect();
|
|
659
674
|
}
|
|
660
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
661
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
675
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ElementIsTruncatedCbComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
676
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: ElementIsTruncatedCbComponent, isStandalone: false, selector: "[elementIsTruncatedCb]", inputs: { elementIsTruncatedCb: "elementIsTruncatedCb" }, ngImport: i0 }); }
|
|
662
677
|
}
|
|
663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ElementIsTruncatedCbComponent, decorators: [{
|
|
664
679
|
type: Directive,
|
|
665
680
|
args: [{
|
|
666
|
-
selector: '[elementIsTruncatedCb]'
|
|
681
|
+
selector: '[elementIsTruncatedCb]',
|
|
682
|
+
standalone: false
|
|
667
683
|
}]
|
|
668
684
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { elementIsTruncatedCb: [{
|
|
669
685
|
type: Input
|
|
@@ -921,12 +937,12 @@ class FormElementComponent {
|
|
|
921
937
|
}
|
|
922
938
|
}
|
|
923
939
|
}
|
|
924
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
925
|
-
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()\"> *</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\"> *</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: 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: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }, { kind: "component", type: WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] }); }
|
|
940
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormElementComponent, deps: [{ token: FormComponent, optional: true }, { token: FORM_ERROR_MESSAGES, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
941
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FormElementComponent, isStandalone: false, 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 class=\"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 @if (direction === 'horizontal' && !errorMessageAsTooltip) {\n <div class=\"errorAboveInputContainer\">\n <div class=\"spacer\"></div>\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n </div>\n }\n\n <div class=\"captionInputAndError\" #internalComponentRef>\n @if (hasRightOfCaptionError()) {\n <div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation>\n <ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n </div>\n }\n <ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n @if (direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip) {\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n }\n <div class=\"inputContainer\" #inputContainer>\n @if (errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()) {\n <div class=\"errorTooltipTriangle\"></div>\n <div class=\"errorTooltipTriangleWhite\"></div>\n <div class=\"errorTooltip\">\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n @if (caption || captionRef) {\n <div class=\"caption\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n >\n @if (captionRef) {\n <div class=\"captionRefContainer\">\n <ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n @if (isRequired()) {\n <div> *</div>\n }\n </div>\n }\n @if (!captionRef) {\n <div class=\"captionText\">{{caption}}@if (isRequired()) {\n <span> *</span>\n }</div>\n }\n @if (hasRightOfCaptionError()) {\n <div class=\"rightOfCaptionError\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n <ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n </div>\n }\n @if (captionEndRef) {\n <div class=\"captionEndRefContainer\">\n <ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n </div>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n @if (shouldShowErrorMessages() && getErrorToShow()) {\n <div class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n @if (showDefaultError('min')) {\n <div>{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n }\n @if (showDefaultError('max')) {\n <div>{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n }\n @if (showDefaultError('required')) {\n <div>{{getErrorMessage(\"required\")}}</div>\n }\n @if (showDefaultError('email')) {\n <div>{{getErrorMessage(\"email\")}}</div>\n }\n @if (showDefaultError('minlength')) {\n <div>{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n }\n @if (showDefaultError('maxlength')) {\n <div>{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n }\n @if (showDefaultError('pattern')) {\n <div>{{getErrorMessage(\"pattern\")}}</div>\n }\n @if (showDefaultError('MatchPassword')) {\n <div>{{getErrorMessage(\"matchPassword\")}}</div>\n }\n @if (showDefaultError('date')) {\n <div>{{getErrorMessage(\"date\")}}</div>\n }\n @if (showDefaultError('message')) {\n <div>{{attachedControl.errors.message.value}}</div>\n }\n @if (showDefaultError('formLevel')) {\n <div>{{getErrorMessage(\"formLevel\")}}</div>\n }\n <div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n </div>\n }\n</ng-template>\n\n<ng-template #tailTpl>\n <div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n @if (hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()) {\n <div class=\"errorTooltipTriangle\"></div>\n <div class=\"errorTooltipTriangleWhite\"></div>\n <div class=\"absoluteAnchor\" #absoluteAnchor></div>\n <div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n <div class=\"fixedWrapper\" #fixedWrapper>\n <div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n <div class=\"errorTooltipInner\">\n <i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n @if (getErrorToShow()) {\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n }\n @if (!getErrorToShow() && shouldShowWarningPopup()) {\n <div>\n @if (getWarningToShowIsTemplateRef()) {\n <ng-container [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n }\n @if (!getWarningToShowIsTemplateRef()) {\n <span>{{getWarningToShow()}}</span>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (getErrorToShow()) {\n <klp-form-warning-icon variant=\"fill\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n }\n @if (!getErrorToShow() && getWarningToShow()) {\n <klp-form-warning-icon variant=\"line\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n }\n </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}.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{color:#101828}.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}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.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}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }, { kind: "component", type: WarningIconComponent, selector: "klp-form-warning-icon", inputs: ["variant"] }, { kind: "directive", type: ElementIsTruncatedCbComponent, selector: "[elementIsTruncatedCb]", inputs: ["elementIsTruncatedCb"] }] }); }
|
|
926
942
|
}
|
|
927
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
943
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormElementComponent, decorators: [{
|
|
928
944
|
type: Component,
|
|
929
|
-
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()\"> *</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\" class=\"captionText\">{{caption}}<span *ngIf=\"isRequired()\"> *</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"] }]
|
|
945
|
+
args: [{ selector: 'klp-form-element', standalone: false, template: "<div\n class=\"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 @if (direction === 'horizontal' && !errorMessageAsTooltip) {\n <div class=\"errorAboveInputContainer\">\n <div class=\"spacer\"></div>\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n </div>\n }\n\n <div class=\"captionInputAndError\" #internalComponentRef>\n @if (hasRightOfCaptionError()) {\n <div class=\"captionDummyForSpaceCalculation\" #captionDummyForSpaceCalculation>\n <ng-container [ngTemplateOutlet]=\"captionTpl\" [ngTemplateOutletContext]=\"{forCalculation: true}\"></ng-container>\n </div>\n }\n <ng-container [ngTemplateOutlet]=\"captionTpl\"></ng-container>\n @if (direction === 'vertical' && getErrorLocation() === 'belowCaption' && !errorMessageAsTooltip) {\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n }\n <div class=\"inputContainer\" #inputContainer>\n @if (errorMessageAsTooltip && shouldShowErrorMessages() && getErrorToShow()) {\n <div class=\"errorTooltipTriangle\"></div>\n <div class=\"errorTooltipTriangleWhite\"></div>\n <div class=\"errorTooltip\">\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n</div>\n\n<ng-template #captionTpl let-forCalculation=\"forCalculation\">\n @if (caption || captionRef) {\n <div class=\"caption\"\n\t\t[ngClass]=\"{\n\t\t\twithErrorRightOfCaption: getErrorLocation() === 'rightOfCaption'\n\t\t}\"\n >\n @if (captionRef) {\n <div class=\"captionRefContainer\">\n <ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n @if (isRequired()) {\n <div> *</div>\n }\n </div>\n }\n @if (!captionRef) {\n <div class=\"captionText\">{{caption}}@if (isRequired()) {\n <span> *</span>\n }</div>\n }\n @if (hasRightOfCaptionError()) {\n <div class=\"rightOfCaptionError\" [ngClass]=\"{errorFullyVisible: errorFullyVisible, errorMessageHasMaxWidth: errorMessageHasMaxWidth}\">\n <ng-container [ngTemplateOutlet]=\"errorRef\" [ngTemplateOutletContext]=\"{forCalculation: forCalculation}\"></ng-container>\n </div>\n }\n @if (captionEndRef) {\n <div class=\"captionEndRefContainer\">\n <ng-container [ngTemplateOutlet]=\"captionEndRef\"></ng-container>\n </div>\n }\n </div>\n }\n</ng-template>\n\n<ng-template #errorRef let-forCalculation=\"forCalculation\">\n @if (shouldShowErrorMessages() && getErrorToShow()) {\n <div class=\"errorContainer\" [elementIsTruncatedCb]=\"forCalculation ? setErrorMessageIsTruncated : null\" [ngClass]=\"{horizontal: direction === 'horizontal', hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70', 'd34-66': spaceDistribution === '34-66'}\">\n @if (showDefaultError('min')) {\n <div>{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n }\n @if (showDefaultError('max')) {\n <div>{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n }\n @if (showDefaultError('required')) {\n <div>{{getErrorMessage(\"required\")}}</div>\n }\n @if (showDefaultError('email')) {\n <div>{{getErrorMessage(\"email\")}}</div>\n }\n @if (showDefaultError('minlength')) {\n <div>{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n }\n @if (showDefaultError('maxlength')) {\n <div>{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n }\n @if (showDefaultError('pattern')) {\n <div>{{getErrorMessage(\"pattern\")}}</div>\n }\n @if (showDefaultError('MatchPassword')) {\n <div>{{getErrorMessage(\"matchPassword\")}}</div>\n }\n @if (showDefaultError('date')) {\n <div>{{getErrorMessage(\"date\")}}</div>\n }\n @if (showDefaultError('message')) {\n <div>{{attachedControl.errors.message.value}}</div>\n }\n @if (showDefaultError('formLevel')) {\n <div>{{getErrorMessage(\"formLevel\")}}</div>\n }\n <div [ngTemplateOutlet]=\"getCustomErrorHandler(getErrorToShow())?.templateRef\"></div>\n </div>\n }\n</ng-template>\n\n<ng-template #tailTpl>\n <div class=\"errorTooltipContainer\" [ngClass]=\"{alwaysOpen: shouldShowErrorTooltipOpened()}\">\n @if (hasHoverableErrorTooltip() || shouldShowErrorTooltipOpened()) {\n <div class=\"errorTooltipTriangle\"></div>\n <div class=\"errorTooltipTriangleWhite\"></div>\n <div class=\"absoluteAnchor\" #absoluteAnchor></div>\n <div class=\"fixedAnchor\" #fixedAnchor [onRenderFn]=\"setErrorTooltipOffset\"></div>\n <div class=\"fixedWrapper\" #fixedWrapper>\n <div class=\"errorTooltip\" [ngClass]=\"{noPointerEvents: !shouldShowErrorTooltipOpened()}\">\n <div class=\"errorTooltipInner\">\n <i class=\"closeBtn\" (click)=\"closePopup();\">\u00D7</i>\n @if (getErrorToShow()) {\n <ng-container [ngTemplateOutlet]=\"errorRef\"></ng-container>\n }\n @if (!getErrorToShow() && shouldShowWarningPopup()) {\n <div>\n @if (getWarningToShowIsTemplateRef()) {\n <ng-container [ngTemplateOutlet]=\"getWarningToShowAsTemplateRef()\"></ng-container>\n }\n @if (!getWarningToShowIsTemplateRef()) {\n <span>{{getWarningToShow()}}</span>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }\n @if (getErrorToShow()) {\n <klp-form-warning-icon variant=\"fill\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n }\n @if (!getErrorToShow() && getWarningToShow()) {\n <klp-form-warning-icon variant=\"line\" (click)=\"togglePopup()\"></klp-form-warning-icon>\n }\n </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}.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{color:#101828}.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}.caption.withErrorRightOfCaption .rightOfCaptionError.errorFullyVisible{display:block}.caption.withErrorRightOfCaption .rightOfCaptionError.errorMessageHasMaxWidth{max-width:40%}.caption.withErrorRightOfCaption .rightOfCaptionError{font-weight:400;overflow:hidden;flex:1 0 auto;text-align:right}.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}.inputContainer .errorTooltip.noPointerEvents{pointer-events:none}.inputContainer .errorTooltip{position:absolute;top:-.6rem;right:-1.875rem;transform:translateY(-100%);width:20rem}.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"] }]
|
|
930
946
|
}], ctorParameters: () => [{ type: FormComponent, decorators: [{
|
|
931
947
|
type: Optional
|
|
932
948
|
}] }, { type: undefined, decorators: [{
|
|
@@ -1101,14 +1117,15 @@ class ValueAccessorBase {
|
|
|
1101
1117
|
}
|
|
1102
1118
|
return false;
|
|
1103
1119
|
}
|
|
1104
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1105
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ValueAccessorBase, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ValueAccessorBase, isStandalone: false, selector: "ng-component", inputs: { disabled: "disabled", innerValueChangeInterceptor: "innerValueChangeInterceptor", formControlName: "formControlName", formControl: "formControl", inErrorState: "inErrorState", getTailTplFn: "getTailTplFn" }, outputs: { onTouch: "onTouch" }, viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], ngImport: i0, template: '', isInline: true }); }
|
|
1106
1122
|
}
|
|
1107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ValueAccessorBase, decorators: [{
|
|
1108
1124
|
type: Component,
|
|
1109
1125
|
args: [{
|
|
1110
1126
|
selector: '',
|
|
1111
1127
|
template: '',
|
|
1128
|
+
standalone: false
|
|
1112
1129
|
}]
|
|
1113
1130
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
1114
1131
|
type: Host
|
|
@@ -1142,12 +1159,12 @@ class LoadingIndicatorComponent {
|
|
|
1142
1159
|
this.variant = '3dots';
|
|
1143
1160
|
this.size = 'medium';
|
|
1144
1161
|
}
|
|
1145
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1146
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1162
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1163
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LoadingIndicatorComponent, isStandalone: false, selector: "klp-form-loading-indicator", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.picker{position:relative}.picker .chevronDown{position:absolute;top:18px;right:23px;width:0;height:0;border-top:5px solid #101828;border-left:5px solid transparent;border-right:5px solid transparent}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1147
1164
|
}
|
|
1148
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
|
|
1149
1166
|
type: Component,
|
|
1150
|
-
args: [{ selector: 'klp-form-loading-indicator', template: "<div class=\"threeDots\" [ngClass]=\"[size]\"
|
|
1167
|
+
args: [{ selector: 'klp-form-loading-indicator', standalone: false, template: "@if (variant === '3dots') {\n <div class=\"threeDots\" [ngClass]=\"[size]\">\n <div></div>\n <div></div>\n <div></div>\n <div></div>\n </div>\n}\n\n@if (variant === 'spinner') {\n <div class=\"spinner\" [ngClass]=\"[size]\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n <circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n <circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n <circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n <circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n <circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n <circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n </svg>\n </div>\n}\n\n@if (variant === 'textInput') {\n <div class=\"textInput\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n </div>\n}\n\n@if (variant === 'picker') {\n <div class=\"picker\">\n <input\n disabled\n type=\"text\"\n class=\"form-control\"\n placeholder=\"Loading...\"\n >\n <div class=\"chevronDown\"></div>\n </div>\n}\n", styles: [":host{display:block}.threeDots{display:block;position:relative}.threeDots.tiny{--base: 4px}.threeDots.small{--base: 8px}.threeDots.medium{--base: 12px}.threeDots.large{--base: 18px}.threeDots.huge{--base: 26px}.threeDots{width:calc(4 * var(--base));height:var(--base)}.threeDots div{position:absolute;top:0;width:var(--base);height:var(--base);border-radius:50%;background:#00ac42;animation-timing-function:cubic-bezier(0,1,1,0)}.threeDots div:nth-child(1){animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2){animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(1.5 * var(--base));animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(4){left:calc(3 * var(--base));animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{width:1rem;height:1rem}.spinner.small svg{width:1.6rem;height:1.6rem}.spinner.medium svg{width:2.5rem;height:2.5rem}.spinner.large svg{width:3rem;height:3rem}.spinner.huge svg{width:4rem;height:4rem}.spinner svg{-webkit-transition-property:-webkit-transform;-webkit-transition-duration:1.2s;-webkit-animation-name:rotate;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-transition-property:-moz-transform;-moz-animation-name:rotate;-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;transition-property:transform;animation-name:rotate;animation-duration:1.2s;animation-iteration-count:infinite;animation-timing-function:linear}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.picker{position:relative}.picker .chevronDown{position:absolute;top:18px;right:23px;width:0;height:0;border-top:5px solid #101828;border-left:5px solid transparent;border-right:5px solid transparent}\n"] }]
|
|
1151
1168
|
}], propDecorators: { variant: [{
|
|
1152
1169
|
type: Input
|
|
1153
1170
|
}], size: [{
|
|
@@ -1179,12 +1196,12 @@ class ButtonComponent {
|
|
|
1179
1196
|
});
|
|
1180
1197
|
}
|
|
1181
1198
|
}
|
|
1182
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1183
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1199
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1200
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ButtonComponent, isStandalone: false, selector: "klp-form-button", inputs: { variant: "variant", size: "size", fullWidth: "fullWidth", hasBorder: "hasBorder", disabled: "disabled", isLoading: "isLoading", type: "type", clickCallback: "clickCallback" }, host: { properties: { "class._fullWidth": "this._" } }, ngImport: i0, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n [type]=\"type\"\n (click)=\"onClick($event)\"\n >\n <div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n <ng-content></ng-content>\n </div>\n @if (isLoading) {\n <div class=\"loadingSpinnerContainer\">\n <klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n </div>\n }\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #D0D5DD;border-radius:8px;color:#101828;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#515365;background-color:#fff;border-color:#c1c8d2;font-weight:500}.white:hover,.white:active{color:#515365;background-color:#d6dae1;border-color:#d6dae1}.white:focus{text-decoration:underline}.greenFilled{background-color:#00ac42;border-color:#00ac42;color:#fff}.greenFilled:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#009338;border-color:#009338}.greenOutlined{background-color:#fff;border-color:#00ac42;color:#00ac42}.greenOutlined:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#009338;border-color:#009338}.greenLink{color:#00ac42;border:none;background:none;padding:0}.greenLink:hover,.greenLink:focus{text-decoration:underline}.contextMenuItem{color:#101828;background-color:#fff;border-color:#fff}.contextMenuItem:hover{background-color:#f2f4f7;border-color:#f2f4f7}.contextMenuItem:focus,.contextMenuItem:active{text-decoration:underline}.redFilled{color:#fff;background-color:#dc3545;border-color:#dc3545}.redFilled:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{color:#dc3545;background-color:#fff;border-color:#dc3545}.redOutlined:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{color:#fff;background-color:#ff8000;border-color:#ff8000}.orangeFilled:hover{color:#fff;background-color:#ff8d1a;border-color:#ff8d1a}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: LoadingIndicatorComponent, selector: "klp-form-loading-indicator", inputs: ["variant", "size"] }] }); }
|
|
1184
1201
|
}
|
|
1185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
1186
1203
|
type: Component,
|
|
1187
|
-
args: [{ selector: 'klp-form-button', template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n
|
|
1204
|
+
args: [{ selector: 'klp-form-button', standalone: false, template: "<button class=\"buttonFundamentals\"\n\t[ngClass]=\"[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? 'fullWidth' : '',\n\t\thasBorder ? '' : 'no-border',\n\t\tdisabled ? 'disabled' : ''\n\t]\"\n [type]=\"type\"\n (click)=\"onClick($event)\"\n >\n <div class=\"caption\" [ngClass]=\"{invisible: isLoading}\">\n <ng-content></ng-content>\n </div>\n @if (isLoading) {\n <div class=\"loadingSpinnerContainer\">\n <klp-form-loading-indicator variant=\"spinner\" size=\"small\"></klp-form-loading-indicator>\n </div>\n }\n</button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{cursor:pointer;letter-spacing:1px;font-size:13px;font-weight:700;padding:0 20px;border:1px solid #D0D5DD;border-radius:8px;color:#101828;height:2.625rem}.buttonFundamentals.disabled{cursor:not-allowed}.buttonFundamentals.tiny{font-size:.75rem;font-weight:400;height:2rem}.buttonFundamentals.large{height:3rem}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{position:absolute;inset:0;display:flex;justify-content:center;align-items:center}.white{color:#515365;background-color:#fff;border-color:#c1c8d2;font-weight:500}.white:hover,.white:active{color:#515365;background-color:#d6dae1;border-color:#d6dae1}.white:focus{text-decoration:underline}.greenFilled{background-color:#00ac42;border-color:#00ac42;color:#fff}.greenFilled:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#009338;border-color:#009338}.greenOutlined{background-color:#fff;border-color:#00ac42;color:#00ac42}.greenOutlined:hover{color:#fff;background-color:#00c64c;border-color:#00c64c}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#009338;border-color:#009338}.greenLink{color:#00ac42;border:none;background:none;padding:0}.greenLink:hover,.greenLink:focus{text-decoration:underline}.contextMenuItem{color:#101828;background-color:#fff;border-color:#fff}.contextMenuItem:hover{background-color:#f2f4f7;border-color:#f2f4f7}.contextMenuItem:focus,.contextMenuItem:active{text-decoration:underline}.redFilled{color:#fff;background-color:#dc3545;border-color:#dc3545}.redFilled:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{color:#dc3545;background-color:#fff;border-color:#dc3545}.redOutlined:hover{color:#fff;background-color:#e04b59;border-color:#e04b59}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.orangeFilled{color:#fff;background-color:#ff8000;border-color:#ff8000}.orangeFilled:hover{color:#fff;background-color:#ff8d1a;border-color:#ff8d1a}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}\n"] }]
|
|
1188
1205
|
}], propDecorators: { variant: [{
|
|
1189
1206
|
type: Input
|
|
1190
1207
|
}], size: [{
|
|
@@ -1211,12 +1228,12 @@ class CheckboxComponent extends ValueAccessorBase {
|
|
|
1211
1228
|
super(...arguments);
|
|
1212
1229
|
this.renderUndefinedAsIndeterminate = false;
|
|
1213
1230
|
}
|
|
1214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1215
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CheckboxComponent, isStandalone: false, selector: "klp-form-checkbox", inputs: { caption: "caption", renderUndefinedAsIndeterminate: "renderUndefinedAsIndeterminate" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n <label>\n <div class=\"checkboxContainer\">\n <div class=\"checkBoxVisualContainer\">\n <input type=\"checkbox\" class=\"checkboxNative\"\n [(ngModel)]=\"innerValue\"\n (change)=\"setInnerValueAndNotify(innerValue); touch()\"\n [disabled]=\"disabled\"\n #nativeInputRef\n />\n <div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n @if (innerValue === true) {\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n <path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @if (renderUndefinedAsIndeterminate && innerValue === undefined) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n <path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </div>\n </div>\n </div>\n @if (caption) {\n <div class=\"caption\">{{ caption }}</div>\n }\n </label>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;margin-bottom:0}label{display:flex;align-items:center;justify-content:center;margin-bottom:0}.checkboxContainer{position:relative}.checkBoxVisualContainer{padding:2px;margin-right:10px;border-radius:4px}.checkBoxVisualContainer:focus-within{outline:2px solid #00AC42}.caption{cursor:pointer;font-weight:400;color:#101828}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:20px;height:20px;cursor:pointer}.checkboxVisual{pointer-events:none;padding:.125rem;color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #D0D5DD;border-radius:4px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxVisual.filledWithColor{background-color:#00ac42;border-color:#00ac42}.checkboxNative:hover+.checkboxVisual{border-color:#98a2b3}.checkboxNative:hover+.checkboxVisual.filledWithColor{border-color:#00ac42}.checkboxNative:hover[disabled]+.checkboxVisual{border-color:#eaecf0}.checkboxNative:hover[disabled]+.checkboxVisual.filledWithColor{border-color:#f2f4f7}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual{background-color:#f2f4f7;border-color:#eaecf0}.checkboxNative[disabled]+.checkboxVisual svg{color:#101828}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1216
1233
|
}
|
|
1217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1218
1235
|
type: Component,
|
|
1219
|
-
args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<div class=\"componentContainer\">\n
|
|
1236
|
+
args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n <label>\n <div class=\"checkboxContainer\">\n <div class=\"checkBoxVisualContainer\">\n <input type=\"checkbox\" class=\"checkboxNative\"\n [(ngModel)]=\"innerValue\"\n (change)=\"setInnerValueAndNotify(innerValue); touch()\"\n [disabled]=\"disabled\"\n #nativeInputRef\n />\n <div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n @if (innerValue === true) {\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n <path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @if (renderUndefinedAsIndeterminate && innerValue === undefined) {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n <path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n </div>\n </div>\n </div>\n @if (caption) {\n <div class=\"caption\">{{ caption }}</div>\n }\n </label>\n</div>\n", styles: [":host{display:block}.componentContainer{display:flex;align-items:center;margin-bottom:0}label{display:flex;align-items:center;justify-content:center;margin-bottom:0}.checkboxContainer{position:relative}.checkBoxVisualContainer{padding:2px;margin-right:10px;border-radius:4px}.checkBoxVisualContainer:focus-within{outline:2px solid #00AC42}.caption{cursor:pointer;font-weight:400;color:#101828}.checkboxNative{position:absolute;opacity:0;top:0;left:0;width:20px;height:20px;cursor:pointer}.checkboxVisual{pointer-events:none;padding:.125rem;color:#fff;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:1px solid #D0D5DD;border-radius:4px;font-size:15px;font-weight:400;line-height:19px;vertical-align:bottom;text-align:center;background-color:#fff;cursor:pointer}.checkboxVisual.filledWithColor{background-color:#00ac42;border-color:#00ac42}.checkboxNative:hover+.checkboxVisual{border-color:#98a2b3}.checkboxNative:hover+.checkboxVisual.filledWithColor{border-color:#00ac42}.checkboxNative:hover[disabled]+.checkboxVisual{border-color:#eaecf0}.checkboxNative:hover[disabled]+.checkboxVisual.filledWithColor{border-color:#f2f4f7}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual{background-color:#f2f4f7;border-color:#eaecf0}.checkboxNative[disabled]+.checkboxVisual svg{color:#101828}\n"] }]
|
|
1220
1237
|
}], propDecorators: { caption: [{
|
|
1221
1238
|
type: Input
|
|
1222
1239
|
}], renderUndefinedAsIndeterminate: [{
|
|
@@ -1228,12 +1245,12 @@ class EmailInputComponent extends ValueAccessorBase {
|
|
|
1228
1245
|
super(...arguments);
|
|
1229
1246
|
this.placeholder = '';
|
|
1230
1247
|
}
|
|
1231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1248
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EmailInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: EmailInputComponent, isStandalone: false, selector: "klp-form-email-input", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD}input:hover{border-color:#98a2b3}input{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1233
1250
|
}
|
|
1234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: EmailInputComponent, decorators: [{
|
|
1235
1252
|
type: Component,
|
|
1236
|
-
args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD
|
|
1253
|
+
args: [{ selector: 'klp-form-email-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<input\n\t\ttype=\"email\"\n\t\tclass=\"form-control\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD}input:hover{border-color:#98a2b3}input{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer{position:relative}.showErrors{border-color:#ff8000;padding-right:2rem}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}\n"] }]
|
|
1237
1254
|
}], propDecorators: { placeholder: [{
|
|
1238
1255
|
type: Input
|
|
1239
1256
|
}] } });
|
|
@@ -1251,12 +1268,12 @@ class NumberInputComponent extends ValueAccessorBase {
|
|
|
1251
1268
|
super.setInnerValueAndNotify(value);
|
|
1252
1269
|
}
|
|
1253
1270
|
}
|
|
1254
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1255
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NumberInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: NumberInputComponent, isStandalone: false, selector: "klp-form-number-input", inputs: { placeholder: "placeholder", parseNumber: "parseNumber" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD}input:hover{border-color:#98a2b3}input{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1256
1273
|
}
|
|
1257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NumberInputComponent, decorators: [{
|
|
1258
1275
|
type: Component,
|
|
1259
|
-
args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD
|
|
1276
|
+
args: [{ selector: 'klp-form-number-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }], standalone: false, template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD}input:hover{border-color:#98a2b3}input{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"] }]
|
|
1260
1277
|
}], propDecorators: { placeholder: [{
|
|
1261
1278
|
type: Input
|
|
1262
1279
|
}], parseNumber: [{
|
|
@@ -1268,24 +1285,27 @@ class PasswordFieldComponent extends ValueAccessorBase {
|
|
|
1268
1285
|
super(...arguments);
|
|
1269
1286
|
this.placeholder = 'Password';
|
|
1270
1287
|
}
|
|
1271
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1272
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PasswordFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1289
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PasswordFieldComponent, isStandalone: false, selector: "klp-form-password-field", inputs: { placeholder: "placeholder" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD}input:hover{border-color:#98a2b3}input{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1273
1290
|
}
|
|
1274
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PasswordFieldComponent, decorators: [{
|
|
1275
1292
|
type: Component,
|
|
1276
|
-
args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD
|
|
1293
|
+
args: [{ selector: 'klp-form-password-field', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }], standalone: false, template: "<input\n\ttype=\"password\"\n\tclass=\"form-control\"\n [ngClass]=\"{showErrors: isInErrorState()}\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder\"\n\t(blur)=\"touch()\"\n\t[disabled]=\"disabled\"\n\t#nativeInputRef\n/>\n", styles: [":host{display:block}input{outline:none;display:block;border:1px solid #D0D5DD}input:hover{border-color:#98a2b3}input{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}input::-webkit-input-placeholder{color:#98a2b3}input:-moz-placeholder{color:#98a2b3}input::-moz-placeholder{color:#98a2b3}input:-ms-input-placeholder{color:#98a2b3}input:focus,input:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input:placeholder-shown{text-overflow:ellipsis}input[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.showErrors{border-color:#ff8000}\n"] }]
|
|
1277
1294
|
}], propDecorators: { placeholder: [{
|
|
1278
1295
|
type: Input
|
|
1279
1296
|
}] } });
|
|
1280
1297
|
|
|
1281
1298
|
const SELECT_TRANSLATIONS = new InjectionToken('klp.form.select.translations');
|
|
1282
1299
|
class KlpSelectOptionTemplateDirective {
|
|
1283
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1284
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1300
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: KlpSelectOptionTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1301
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: KlpSelectOptionTemplateDirective, isStandalone: false, selector: "[klpSelectOptionTpl]", ngImport: i0 }); }
|
|
1285
1302
|
}
|
|
1286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1303
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: KlpSelectOptionTemplateDirective, decorators: [{
|
|
1287
1304
|
type: Directive,
|
|
1288
|
-
args: [{
|
|
1305
|
+
args: [{
|
|
1306
|
+
selector: '[klpSelectOptionTpl]',
|
|
1307
|
+
standalone: false
|
|
1308
|
+
}]
|
|
1289
1309
|
}] });
|
|
1290
1310
|
class SelectComponent extends ValueAccessorBase {
|
|
1291
1311
|
constructor(parent, controlContainer, translations, elRef, ngZone) {
|
|
@@ -1574,12 +1594,12 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
1574
1594
|
super.ngOnDestroy();
|
|
1575
1595
|
this.elRef.nativeElement?.querySelector('input')?.removeEventListener('keydown', this.keyListener);
|
|
1576
1596
|
}
|
|
1577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1578
|
-
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.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.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{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}: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-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:#98a2b3;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-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap: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:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;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;line-height:22px}: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{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}: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-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{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=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}: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:#98a2b3;padding:8px}: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:35px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\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.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]" }] }); }
|
|
1597
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, deps: [{ token: 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 }); }
|
|
1598
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SelectComponent, isStandalone: false, 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 #ngSelect\n [placeholder]=\"getTranslation('placeholder')\"\n bindLabel=\"name\"\n bindValue=\"id\"\n [items]=\"options\"\n [clearable]=\"clearable\"\n [(ngModel)]=\"innerValue\"\n [ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n (change)=\"setInnerValueAndNotify(innerValue)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (blur)=\"touch(); onBlur.emit()\"\n (clear)=\"onClear.emit()\"\n (search)=\"searchQueryChanged($event.term)\"\n [searchable]=\"searchable\"\n [dropdownPosition]=\"dropdownPositionToUse\"\n [searchFn]=\"customSearchFn\"\n [selectOnTab]=\"true\"\n [virtualScroll]=\"true\"\n (scroll)=\"onScroll($event.end)\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (focus)=\"onFocus()\"\n >\n <ng-template let-item=\"item\" ng-option-tmp>\n @if (customOptionTpl) {\n <ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n }\n @if (!customOptionTpl) {\n <div [attr.data-cy]=\"item.id\">\n {{ item.name }}\n @if (item.description) {\n <div class=\"dropdown-item-description\">\n {{ item.description }}\n </div>\n }\n </div>\n }\n </ng-template>\n @if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n <ng-template ng-multi-label-tmp>\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n </div>\n </ng-template>\n }\n @if (footerElement) {\n <ng-template ng-footer-tmp>\n <ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n </ng-template>\n }\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n <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 <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.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}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}: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.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{height:initial;min-height:42px;display:flex}: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-opened>.ng-select-container{background:#fff}: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-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:#98a2b3;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-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap: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:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;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;line-height:22px}: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{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}: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-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{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=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}: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:#98a2b3;padding:8px}: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:35px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { 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]" }] }); }
|
|
1579
1599
|
}
|
|
1580
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1600
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1581
1601
|
type: Component,
|
|
1582
|
-
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.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.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{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}: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-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:#98a2b3;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-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap: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:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;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;line-height:22px}: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{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}: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-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{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=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}: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:#98a2b3;padding:8px}: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:35px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
|
|
1602
|
+
args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], standalone: false, template: "<ng-select\n #ngSelect\n [placeholder]=\"getTranslation('placeholder')\"\n bindLabel=\"name\"\n bindValue=\"id\"\n [items]=\"options\"\n [clearable]=\"clearable\"\n [(ngModel)]=\"innerValue\"\n [ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n (change)=\"setInnerValueAndNotify(innerValue)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n (blur)=\"touch(); onBlur.emit()\"\n (clear)=\"onClear.emit()\"\n (search)=\"searchQueryChanged($event.term)\"\n [searchable]=\"searchable\"\n [dropdownPosition]=\"dropdownPositionToUse\"\n [searchFn]=\"customSearchFn\"\n [selectOnTab]=\"true\"\n [virtualScroll]=\"true\"\n (scroll)=\"onScroll($event.end)\"\n (open)=\"onOpen()\"\n (close)=\"onClose()\"\n (focus)=\"onFocus()\"\n >\n <ng-template let-item=\"item\" ng-option-tmp>\n @if (customOptionTpl) {\n <ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n }\n @if (!customOptionTpl) {\n <div [attr.data-cy]=\"item.id\">\n {{ item.name }}\n @if (item.description) {\n <div class=\"dropdown-item-description\">\n {{ item.description }}\n </div>\n }\n </div>\n }\n </ng-template>\n @if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n <ng-template ng-multi-label-tmp>\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n </div>\n </ng-template>\n }\n @if (footerElement) {\n <ng-template ng-footer-tmp>\n <ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n </ng-template>\n }\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n <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 <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.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}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}: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.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{height:initial;min-height:42px;display:flex}: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-opened>.ng-select-container{background:#fff}: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-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:#98a2b3;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-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap: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:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;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;line-height:22px}: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{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}: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-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{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=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}: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:#98a2b3;padding:8px}: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:35px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
|
|
1583
1603
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
1584
1604
|
type: Optional
|
|
1585
1605
|
}, {
|
|
@@ -1654,12 +1674,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1654
1674
|
}] } });
|
|
1655
1675
|
|
|
1656
1676
|
class SelectFooterComponent {
|
|
1657
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1658
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1677
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1678
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SelectFooterComponent, isStandalone: false, selector: "klp-select-footer", inputs: { prefix: "prefix", text: "text" }, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<span class=\"prefix\">{{prefix}}</span>\n\t<span class=\"text\">{{text}}</span>\n</div>\n", styles: [":host{display:block}.componentContainer{cursor:pointer;padding:6px 10px}.componentContainer:hover{background:#e7faee}.prefix{font-size:80%;padding-right:.625rem}\n"] }); }
|
|
1659
1679
|
}
|
|
1660
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1680
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectFooterComponent, decorators: [{
|
|
1661
1681
|
type: Component,
|
|
1662
|
-
args: [{ selector: 'klp-select-footer', template: "<div class=\"componentContainer\">\n\t<span class=\"prefix\">{{prefix}}</span>\n\t<span class=\"text\">{{text}}</span>\n</div>\n", styles: [":host{display:block}.componentContainer{cursor:pointer;padding:6px 10px}.componentContainer:hover{background:#e7faee}.prefix{font-size:80%;padding-right:.625rem}\n"] }]
|
|
1682
|
+
args: [{ selector: 'klp-select-footer', standalone: false, template: "<div class=\"componentContainer\">\n\t<span class=\"prefix\">{{prefix}}</span>\n\t<span class=\"text\">{{text}}</span>\n</div>\n", styles: [":host{display:block}.componentContainer{cursor:pointer;padding:6px 10px}.componentContainer:hover{background:#e7faee}.prefix{font-size:80%;padding-right:.625rem}\n"] }]
|
|
1663
1683
|
}], propDecorators: { prefix: [{
|
|
1664
1684
|
type: Input
|
|
1665
1685
|
}], text: [{
|
|
@@ -1811,16 +1831,16 @@ class SortableItemsComponent extends ValueAccessorBase {
|
|
|
1811
1831
|
clearInterval(this.scrollInterval);
|
|
1812
1832
|
this.scrollInterval = null;
|
|
1813
1833
|
}
|
|
1814
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1815
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1834
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortableItemsComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1835
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SortableItemsComponent, isStandalone: false, selector: "klp-form-sortable-items", inputs: { sortableItemSize: "sortableItemSize" }, providers: [
|
|
1816
1836
|
{
|
|
1817
1837
|
provide: NG_VALUE_ACCESSOR,
|
|
1818
1838
|
useExisting: SortableItemsComponent,
|
|
1819
1839
|
multi: true,
|
|
1820
1840
|
},
|
|
1821
|
-
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dragItems", predicate: ["dragItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #listItem>\n
|
|
1841
|
+
], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "dragItems", predicate: ["dragItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #listItem>\n @for (item of innerValue; track item; let index = $index) {\n <li\n class=\"sortableItem\"\n [draggable]=\"!disabled\"\n\t\t\t[ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm',\n\t\t \t}\"\n #dragItem\n >\n <div class=\"visual\">\n <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\"></ng-container>\n </div>\n </li>\n }\n</ng-template>\n\n@if (!disabled) {\n <ol\n class=\"itemsContainer\"\n [ngClass]=\"{dragInProgress: dragSourceIndex >= 0}\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n </ol>\n}\n\n@if (disabled) {\n <ol class=\"itemsContainer disabled-mouse-cursor\">\n <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n </ol>\n}\n", styles: [":host{display:block;position:relative}.itemsContainer{border:1px solid #D0D5DD;border-radius:8px;padding:0;margin-top:0;margin-bottom:0;clip-path:inset(1px 0px 0px 0px round 6px);overflow:hidden}.dragInProgress .visual{pointer-events:none;transition:transform .1s linear}.sortableItem{list-style:none}.sortableItem .visual{border-top:1px solid #D0D5DD}.sortableItem .visual:hover{background:#f8f9fa}.sortableItem{cursor:grab}.largeSortableItem .visual{padding:15px}.smallSortableItem .visual{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
1822
1842
|
}
|
|
1823
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortableItemsComponent, decorators: [{
|
|
1824
1844
|
type: Component,
|
|
1825
1845
|
args: [{ selector: 'klp-form-sortable-items', providers: [
|
|
1826
1846
|
{
|
|
@@ -1828,7 +1848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1828
1848
|
useExisting: SortableItemsComponent,
|
|
1829
1849
|
multi: true,
|
|
1830
1850
|
},
|
|
1831
|
-
], template: "<ng-template #listItem>\n
|
|
1851
|
+
], standalone: false, template: "<ng-template #listItem>\n @for (item of innerValue; track item; let index = $index) {\n <li\n class=\"sortableItem\"\n [draggable]=\"!disabled\"\n\t\t\t[ngClass]=\"{\n\t\t\tlargeSortableItem: sortableItemSize === 'lg',\n\t\t \tsmallSortableItem: sortableItemSize === 'sm',\n\t\t \t}\"\n #dragItem\n >\n <div class=\"visual\">\n <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item, index:index }\"></ng-container>\n </div>\n </li>\n }\n</ng-template>\n\n@if (!disabled) {\n <ol\n class=\"itemsContainer\"\n [ngClass]=\"{dragInProgress: dragSourceIndex >= 0}\"\n >\n <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n </ol>\n}\n\n@if (disabled) {\n <ol class=\"itemsContainer disabled-mouse-cursor\">\n <ng-container *ngTemplateOutlet=\"listItem\"></ng-container>\n </ol>\n}\n", styles: [":host{display:block;position:relative}.itemsContainer{border:1px solid #D0D5DD;border-radius:8px;padding:0;margin-top:0;margin-bottom:0;clip-path:inset(1px 0px 0px 0px round 6px);overflow:hidden}.dragInProgress .visual{pointer-events:none;transition:transform .1s linear}.sortableItem{list-style:none}.sortableItem .visual{border-top:1px solid #D0D5DD}.sortableItem .visual:hover{background:#f8f9fa}.sortableItem{cursor:grab}.largeSortableItem .visual{padding:15px}.smallSortableItem .visual{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}\n"] }]
|
|
1832
1852
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
1833
1853
|
type: Host
|
|
1834
1854
|
}, {
|
|
@@ -1867,12 +1887,12 @@ class TextInputComponent extends ValueAccessorBase {
|
|
|
1867
1887
|
}
|
|
1868
1888
|
return this.isPeekingPassword ? 'text' : 'password';
|
|
1869
1889
|
}
|
|
1870
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1871
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1890
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TextInputComponent, isStandalone: false, 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 @if (icon?.length > 0) {\n @if (icon === 'search') {\n <i class=\"ti-search\"></i>\n }\n }\n <input\n [type]=\"getType()\"\n [(ngModel)]=\"innerValue\"\n [ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, hasTail: getTailTpl(), noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n (input)=\"setInnerValueAndNotify($event.target.value)\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n (blur)=\"touch(); onBlur.emit()\"\n [disabled]='disabled'\n #nativeInputRef\n />\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n @if (clearable && innerValue?.length > 0) {\n <div class=\"clearIcon\" (click)=\"resetToNull()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n @if (passwordPeekIcon && type === 'password') {\n <div class=\"peakBtn\" (click)=\"togglePeakPassword()\">\n <ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n </div>\n }\n </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}input:hover{border-color:#98a2b3}input{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}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.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"] }] }); }
|
|
1872
1892
|
}
|
|
1873
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1874
1894
|
type: Component,
|
|
1875
|
-
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\n
|
|
1895
|
+
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\n @if (icon?.length > 0) {\n @if (icon === 'search') {\n <i class=\"ti-search\"></i>\n }\n }\n <input\n [type]=\"getType()\"\n [(ngModel)]=\"innerValue\"\n [ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, hasTail: getTailTpl(), noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n (input)=\"setInnerValueAndNotify($event.target.value)\"\n [placeholder]=\"placeholder ? placeholder : ''\"\n (blur)=\"touch(); onBlur.emit()\"\n [disabled]='disabled'\n #nativeInputRef\n />\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n @if (clearable && innerValue?.length > 0) {\n <div class=\"clearIcon\" (click)=\"resetToNull()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M15 5L5 15M5 5L15 15\" stroke=\"#475467\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n }\n @if (passwordPeekIcon && type === 'password') {\n <div class=\"peakBtn\" (click)=\"togglePeakPassword()\">\n <ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n </div>\n }\n </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}input:hover{border-color:#98a2b3}input{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}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"] }]
|
|
1876
1896
|
}], propDecorators: { placeholder: [{
|
|
1877
1897
|
type: Input
|
|
1878
1898
|
}], type: [{
|
|
@@ -1898,12 +1918,12 @@ class ToggleComponent extends ValueAccessorBase {
|
|
|
1898
1918
|
super(...arguments);
|
|
1899
1919
|
this.transparentBackground = true;
|
|
1900
1920
|
}
|
|
1901
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1902
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1921
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ToggleComponent, isStandalone: false, selector: "klp-form-toggle", inputs: { transparentBackground: "transparentBackground" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #D0D5DD;border-radius:35px;background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.disabled .nativeCheckbox{cursor:not-allowed}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1903
1923
|
}
|
|
1904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1905
1925
|
type: Component,
|
|
1906
|
-
args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #D0D5DD;border-radius:35px;background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.disabled .nativeCheckbox{cursor:not-allowed}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"] }]
|
|
1926
|
+
args: [{ selector: 'klp-form-toggle', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: ToggleComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\">\n\t<input type=\"checkbox\" class=\"nativeCheckbox\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.checked); touch()\"\n\t\t[disabled]=\"disabled\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t #nativeInputRef\n\t/>\n\t<div class=\"toggleVisual\" [ngClass]=\"{transparentBackground: transparentBackground}\"></div>\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;padding-right:6px}.nativeCheckbox{position:absolute;opacity:0;top:0;left:0;width:35px;height:20px;cursor:pointer;margin:0}.toggleVisual{pointer-events:none;position:relative;display:block;transition:.4s ease;-webkit-transition:.4s ease;-moz-transition:.4s ease;-o-transition:.4s ease;-ms-transition:.4s ease;width:35px;height:20px;border:1px solid #D0D5DD;border-radius:35px;background:#eaecf0}.toggleVisual.transparentBackground{background:transparent}.toggleVisual:before{content:\"\";position:absolute;display:block;transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);-moz-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);margin:1px;width:33px;height:18px;top:-1px;left:-1px;border-radius:30px}.toggleVisual:after{content:\"\";position:absolute;display:block;box-shadow:0 0 0 1px #0000001a,0 4px #0000000a,0 4px 9px #00000021,0 3px 3px #0000000d;transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;height:20px;width:20px;top:-1px;left:0;border-radius:60px}.nativeCheckbox:checked+.toggleVisual:before{background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);-moz-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.disabled .nativeCheckbox{cursor:not-allowed}.showErrors+.toggleVisual:before{border:1px solid #ff8000}\n"] }]
|
|
1907
1927
|
}], propDecorators: { transparentBackground: [{
|
|
1908
1928
|
type: Input
|
|
1909
1929
|
}] } });
|
|
@@ -1921,12 +1941,12 @@ class FormCaptionComponent {
|
|
|
1921
1941
|
this.parent.registerCaption(this.contentRef);
|
|
1922
1942
|
});
|
|
1923
1943
|
}
|
|
1924
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1925
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1944
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormCaptionComponent, deps: [{ token: FormElementComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1945
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormCaptionComponent, isStandalone: false, selector: "klp-form-caption", viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }); }
|
|
1926
1946
|
}
|
|
1927
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1947
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormCaptionComponent, decorators: [{
|
|
1928
1948
|
type: Component,
|
|
1929
|
-
args: [{ selector: 'klp-form-caption', template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
1949
|
+
args: [{ selector: 'klp-form-caption', standalone: false, template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
1930
1950
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
1931
1951
|
type: Host
|
|
1932
1952
|
}, {
|
|
@@ -1952,12 +1972,12 @@ class FormErrorComponent {
|
|
|
1952
1972
|
getErrorValueMessage() {
|
|
1953
1973
|
return this.parent.getAttachedControl().errors[this.error];
|
|
1954
1974
|
}
|
|
1955
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1956
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1975
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormErrorComponent, deps: [{ token: FormElementComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1976
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FormErrorComponent, isStandalone: false, selector: "klp-form-error", inputs: { error: "error" }, queries: [{ propertyName: "contentChild", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template #contentRef>\n @if (error !== 'async') {\n <ng-container [ngTemplateOutlet]=\"contentChild\"></ng-container>\n }\n @if (error === 'async') {\n <div>{{getErrorValueMessage()}}</div>\n }\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
1957
1977
|
}
|
|
1958
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1978
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormErrorComponent, decorators: [{
|
|
1959
1979
|
type: Component,
|
|
1960
|
-
args: [{ selector: 'klp-form-error', template: "<ng-template #contentRef>\n
|
|
1980
|
+
args: [{ selector: 'klp-form-error', standalone: false, template: "<ng-template #contentRef>\n @if (error !== 'async') {\n <ng-container [ngTemplateOutlet]=\"contentChild\"></ng-container>\n }\n @if (error === 'async') {\n <div>{{getErrorValueMessage()}}</div>\n }\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
1961
1981
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
1962
1982
|
type: Host
|
|
1963
1983
|
}, {
|
|
@@ -2032,12 +2052,12 @@ class FormSubmitButtonComponent {
|
|
|
2032
2052
|
}
|
|
2033
2053
|
await this.after();
|
|
2034
2054
|
}
|
|
2035
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2036
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2055
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormSubmitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2056
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormSubmitButtonComponent, isStandalone: false, selector: "klp-form-submit-button", inputs: { isLoading: "isLoading", fullWidth: "fullWidth", variant: "variant", submitCallback: "submitCallback", before: "before", after: "after", disabled: "disabled" }, host: { properties: { "class._fullWidth": "this.fullWidth" } }, ngImport: i0, template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading || disabled\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\t[type]=\"buttonType\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] }); }
|
|
2037
2057
|
}
|
|
2038
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormSubmitButtonComponent, decorators: [{
|
|
2039
2059
|
type: Component,
|
|
2040
|
-
args: [{ selector: 'klp-form-submit-button', template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading || disabled\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\t[type]=\"buttonType\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"] }]
|
|
2060
|
+
args: [{ selector: 'klp-form-submit-button', standalone: false, template: "<klp-form-button\n\t\t[variant]=\"variant\"\n\t\t(click)=\"submitForm()\"\n\t\t[disabled]=\"isLoading || disabled\"\n\t\t[isLoading]=\"isLoading\"\n\t\t[fullWidth]=\"fullWidth\"\n\t\t[type]=\"buttonType\"\n\t\t[ngClass]=\"fullWidth ? 'fullWidth' : ''\"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n", styles: [":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}\n"] }]
|
|
2041
2061
|
}], propDecorators: { isLoading: [{
|
|
2042
2062
|
type: Input
|
|
2043
2063
|
}], fullWidth: [{
|
|
@@ -2091,14 +2111,15 @@ class MultipleValueAccessorBase extends ValueAccessorBase {
|
|
|
2091
2111
|
super.setInnerValueAndNotify(value);
|
|
2092
2112
|
}
|
|
2093
2113
|
}
|
|
2094
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2095
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2114
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultipleValueAccessorBase, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: MultipleValueAccessorBase, isStandalone: false, selector: "ng-component", inputs: { multiple: "multiple" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
2096
2116
|
}
|
|
2097
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MultipleValueAccessorBase, decorators: [{
|
|
2098
2118
|
type: Component,
|
|
2099
2119
|
args: [{
|
|
2100
2120
|
selector: '',
|
|
2101
2121
|
template: '',
|
|
2122
|
+
standalone: false
|
|
2102
2123
|
}]
|
|
2103
2124
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
2104
2125
|
type: Host
|
|
@@ -2467,17 +2488,17 @@ class DateTimePickerComponent extends MultipleValueAccessorBase {
|
|
|
2467
2488
|
console.log('a');
|
|
2468
2489
|
this.datePickerRef.open();
|
|
2469
2490
|
}
|
|
2470
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2491
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: DATE_TIME_PICKER_TRANSLATIONS, optional: true }, { token: DATE_PICKER_LOCALE, optional: true }, { token: i3.DateAdapter }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2492
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: DateTimePickerComponent, isStandalone: false, selector: "klp-form-date-time-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable", showTimeInput: "showTimeInput", initHour: "initHour", initMinute: "initMinute", invalidTimeAsMidnight: "invalidTimeAsMidnight" }, providers: [
|
|
2472
2493
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
|
|
2473
2494
|
{
|
|
2474
2495
|
provide: MAT_DATE_FORMATS,
|
|
2475
2496
|
deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
|
|
2476
2497
|
useFactory: matDateFormatsFactory,
|
|
2477
2498
|
},
|
|
2478
|
-
], 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: 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.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: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }] }); }
|
|
2499
|
+
], 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 <div class=\"dateContainer\" [ngClass]=\"{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}\">\n <mat-form-field floatLabel=\"never\">\n @if (multiple) {\n <div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n @if (selectedDates.length >= 2) {\n <span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n @if (getSelectedMonths() === 1) {\n <span>{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n }\n }\n @if (selectedDates.length === 1) {\n <span>{{getTranslation('selectedDate', selectedDates[0])}}</span>\n }\n @if (selectedDates.length === 0) {\n <span class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n }\n </div>\n }\n\n @if (disabled) {\n <div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n }\n <input\n #nativeInput\n matInput\n [matDatepicker]=\"picker\"\n [matDatepickerFilter]=\"filterDates\"\n [(ngModel)]=\"valueForMaterialDatePicker\"\n (dateInput)=\"dateChanged($event)\"\n (input)=\"nativeValueChanged()\"\n (click)=\"picker.open()\"\n [min]=\"minDateStartOfDay\"\n [max]=\"maxDateEndOfDay\"\n [placeholder]=\"getTranslation('placeholder')\"\n (blur)=\"touchDate()\"\n [ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n #picker\n [dateClass]=\"isSelected\"\n [startAt]=\"openPickerOnDate\"\n ></mat-datepicker>\n </mat-form-field>\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n @if (showTimeInput) {\n <div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n <div class=\"timeContainerInner\">\n <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 <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 </svg>\n <input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n <div class=\"divider\">:</div>\n <input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n </div>\n @if (dropdownVisible) {\n <div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n <div class=\"hourOfDay\">\n @for (hour of counter(24); track hour) {\n <div class=\"entry\" (mousedown)=\"setHour(hour)\" [ngClass]=\"{isActive: isActive(hour, hours)}\">{{hour > 9 ? hour : '0' + hour }}</div>\n }\n </div>\n <div class=\"minuteOfHour\">\n @for (minute of minutesOfHour; track minute) {\n <div class=\"entry\" (mousedown)=\"setMinute(minute)\" [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{minute > 9 ? minute : '0' + minute}}</div>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;--mat-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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: OnRenderDirective, selector: "[onRenderFn]", inputs: ["onRenderFn"] }] }); }
|
|
2479
2500
|
}
|
|
2480
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2501
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DateTimePickerComponent, decorators: [{
|
|
2481
2502
|
type: Component,
|
|
2482
2503
|
args: [{ selector: 'klp-form-date-time-picker', providers: [
|
|
2483
2504
|
{ provide: NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
|
|
@@ -2486,7 +2507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
2486
2507
|
deps: [DateTimePickerComponent, [new Optional(), KLP_DATE_FORMATS]],
|
|
2487
2508
|
useFactory: matDateFormatsFactory,
|
|
2488
2509
|
},
|
|
2489
|
-
], 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"] }]
|
|
2510
|
+
], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\" [ngClass]=\"{disabled: disabled}\">\n <div class=\"dateContainer\" [ngClass]=\"{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}\">\n <mat-form-field floatLabel=\"never\">\n @if (multiple) {\n <div class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n @if (selectedDates.length >= 2) {\n <span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n @if (getSelectedMonths() === 1) {\n <span>{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n }\n }\n @if (selectedDates.length === 1) {\n <span>{{getTranslation('selectedDate', selectedDates[0])}}</span>\n }\n @if (selectedDates.length === 0) {\n <span class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n }\n </div>\n }\n\n @if (disabled) {\n <div class=\"disabledClickArea\" (click)=\"picker.open()\"></div>\n }\n <input\n #nativeInput\n matInput\n [matDatepicker]=\"picker\"\n [matDatepickerFilter]=\"filterDates\"\n [(ngModel)]=\"valueForMaterialDatePicker\"\n (dateInput)=\"dateChanged($event)\"\n (input)=\"nativeValueChanged()\"\n (click)=\"picker.open()\"\n [min]=\"minDateStartOfDay\"\n [max]=\"maxDateEndOfDay\"\n [placeholder]=\"getTranslation('placeholder')\"\n (blur)=\"touchDate()\"\n [ngClass]=\"{inputForMultipleDays: multiple, disabled: disabled}\"\n >\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker\n #picker\n [dateClass]=\"isSelected\"\n [startAt]=\"openPickerOnDate\"\n ></mat-datepicker>\n </mat-form-field>\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n @if (showTimeInput) {\n <div class=\"timeContainer\" [ngClass]=\"{disabled: disabled}\">\n <div class=\"timeContainerInner\">\n <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 <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 </svg>\n <input #hourInput maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredHours();\">\n <div class=\"divider\">:</div>\n <input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (focus)=\"dropdownVisible = true\" (blur)=\"blurredMinutes();\">\n </div>\n @if (dropdownVisible) {\n <div class=\"timeDoubleDropdown\" #timeDoubleDropdown [onRenderFn]=\"timeDropdownRendered\">\n <div class=\"hourOfDay\">\n @for (hour of counter(24); track hour) {\n <div class=\"entry\" (mousedown)=\"setHour(hour)\" [ngClass]=\"{isActive: isActive(hour, hours)}\">{{hour > 9 ? hour : '0' + hour }}</div>\n }\n </div>\n <div class=\"minuteOfHour\">\n @for (minute of minutesOfHour; track minute) {\n <div class=\"entry\" (mousedown)=\"setMinute(minute)\" [ngClass]=\"{isActive: isActive(minute, minutes)}\">{{minute > 9 ? minute : '0' + minute}}</div>\n }\n </div>\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;--mat-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"] }]
|
|
2490
2511
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
2491
2512
|
type: Host
|
|
2492
2513
|
}, {
|
|
@@ -2600,12 +2621,12 @@ class DatePickerComponent extends MultipleValueAccessorBase {
|
|
|
2600
2621
|
}
|
|
2601
2622
|
return this.translations?.[key]?.(params) ?? this.getDefaultTranslation(key)(params);
|
|
2602
2623
|
}
|
|
2603
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2604
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2624
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: DATE_PICKER_TRANSLATIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2625
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DatePickerComponent, isStandalone: false, selector: "klp-form-date-picker", inputs: { minDate: "minDate", maxDate: "maxDate", sameMonthOnly: "sameMonthOnly", format: "format", placeholder: "placeholder", clearable: "clearable" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t(onTouch)=\"touch()\"\n\t></klp-form-date-time-picker>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}.componentContainer{position:relative}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton{border-color:#ff8000}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: DateTimePickerComponent, selector: "klp-form-date-time-picker", inputs: ["minDate", "maxDate", "sameMonthOnly", "format", "placeholder", "clearable", "showTimeInput", "initHour", "initMinute", "invalidTimeAsMidnight"] }] }); }
|
|
2605
2626
|
}
|
|
2606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2607
2628
|
type: Component,
|
|
2608
|
-
args: [{ selector: 'klp-form-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t(onTouch)=\"touch()\"\n\t></klp-form-date-time-picker>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block;--
|
|
2629
|
+
args: [{ selector: 'klp-form-date-picker', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: DatePickerComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<klp-form-date-time-picker\n\t\t[multiple]=\"multiple\"\n\t\t[disabled]=\"disabled\"\n\t\t[(ngModel)]=\"dateValue\"\n\t\t(ngModelChange)=\"dateChanged($event)\"\n\t\t[minDate]=\"minDate\"\n\t\t[maxDate]=\"maxDate\"\n\t\t[sameMonthOnly]=\"sameMonthOnly\"\n\t\t[format]=\"format\"\n\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t[clearable]=\"clearable\"\n\t\t[showTimeInput]=\"false\"\n\t\t(onTouch)=\"touch()\"\n\t></klp-form-date-time-picker>\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:block;--mat-icon-button-icon-size: 18px}.componentContainer{position:relative}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton{border-color:#ff8000}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0}\n"] }]
|
|
2609
2630
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
2610
2631
|
type: Host
|
|
2611
2632
|
}, {
|
|
@@ -2635,11 +2656,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
2635
2656
|
|
|
2636
2657
|
// material.module.ts
|
|
2637
2658
|
class MaterialModule {
|
|
2638
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2639
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2640
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2659
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2660
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: MaterialModule, imports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule], exports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule] }); }
|
|
2661
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MaterialModule, providers: [MatDatepickerModule], imports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule] }); }
|
|
2641
2662
|
}
|
|
2642
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: MaterialModule, decorators: [{
|
|
2643
2664
|
type: NgModule,
|
|
2644
2665
|
args: [{
|
|
2645
2666
|
imports: [MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule, MatButtonModule],
|
|
@@ -2693,12 +2714,12 @@ class FileInputComponent extends MultipleValueAccessorBase {
|
|
|
2693
2714
|
uploadFileClicked() {
|
|
2694
2715
|
this.nativeInputRef.nativeElement.click();
|
|
2695
2716
|
}
|
|
2696
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2697
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2717
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FileInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2718
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: FileInputComponent, isStandalone: false, selector: "klp-form-file-input", inputs: { isLoading: "isLoading", clearable: "clearable", onlyShowUploadButton: "onlyShowUploadButton", useFullParentSize: "useFullParentSize", buttonText: "buttonText", fullyCustom: "fullyCustom" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], viewQueries: [{ propertyName: "nativeInputRef", first: true, predicate: ["nativeInputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (fullyCustom) {\n <div class=\"fullyCustom\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n />\n <div (click)=\"uploadFileClicked()\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n </div>\n}\n\n@if (!fullyCustom) {\n <div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n >\n <div class=\"buttonContainer\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n >\n <klp-form-button\n class=\"uploadButton\"\n [isLoading]=\"isLoading\"\n [disabled]=\"disabled\"\n (click)=\"uploadFileClicked()\"\n >\n <div class=\"innerButton\">\n @if (buttonText) {\n <span>{{ buttonText }}</span>\n }\n @if (!buttonText) {\n <div>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n }\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n </klp-form-button>\n </div>\n @if (!onlyShowUploadButton) {\n <div class=\"fileName\">\n {{ getFileNames() }}\n </div>\n }\n @if (shouldShowClearButton()) {\n <klp-form-button class=\"clearButton\" variant=\"white\" (click)=\"resetToNull()\">X\n </klp-form-button>\n }\n </div>\n}\n\n<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}.fullyCustom input{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "klp-form-button", inputs: ["variant", "size", "fullWidth", "hasBorder", "disabled", "isLoading", "type", "clickCallback"] }] }); }
|
|
2698
2719
|
}
|
|
2699
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2720
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2700
2721
|
type: Component,
|
|
2701
|
-
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], template: "<div class=\"fullyCustom\"
|
|
2722
|
+
args: [{ selector: 'klp-form-file-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }], standalone: false, template: "@if (fullyCustom) {\n <div class=\"fullyCustom\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n />\n <div (click)=\"uploadFileClicked()\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n </div>\n}\n\n@if (!fullyCustom) {\n <div class=\"componentContainer\" [ngClass]=\"{fullParentSize: useFullParentSize, showErrors: isInErrorState()}\"\n >\n <div class=\"buttonContainer\">\n <input\n type=\"file\"\n #nativeInputRef\n (change)=\"onChange($event.target.files)\"\n [multiple]=\"multiple\"\n [disabled]=\"disabled\"\n >\n <klp-form-button\n class=\"uploadButton\"\n [isLoading]=\"isLoading\"\n [disabled]=\"disabled\"\n (click)=\"uploadFileClicked()\"\n >\n <div class=\"innerButton\">\n @if (buttonText) {\n <span>{{ buttonText }}</span>\n }\n @if (!buttonText) {\n <div>\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n </div>\n }\n <div class=\"tail\">\n <ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n </div>\n </div>\n </klp-form-button>\n </div>\n @if (!onlyShowUploadButton) {\n <div class=\"fileName\">\n {{ getFileNames() }}\n </div>\n }\n @if (shouldShowClearButton()) {\n <klp-form-button class=\"clearButton\" variant=\"white\" (click)=\"resetToNull()\">X\n </klp-form-button>\n }\n </div>\n}\n\n<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{display:flex;align-items:center}.componentContainer.showErrors ::ng-deep button{border-color:#ff8000}.componentContainer.fullParentSize{height:100%;justify-content:center;position:relative}.componentContainer:not(.fullParentSize) .buttonContainer{position:relative}.componentContainer .buttonContainer{flex:0 0 auto}.innerButton{display:flex;align-items:center}.tail{margin-left:.4rem}input{position:absolute;cursor:pointer;opacity:0;inset:0}.fileName{flex:1 1 0px;margin-left:.625rem;color:#515365;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clearButton{flex:0 0 auto}.fullyCustom input{display:none}\n"] }]
|
|
2702
2723
|
}], propDecorators: { isLoading: [{
|
|
2703
2724
|
type: Input
|
|
2704
2725
|
}], clearable: [{
|
|
@@ -2751,12 +2772,12 @@ class SortableGroupedItemsComponent extends ValueAccessorBase {
|
|
|
2751
2772
|
this.reloader = true;
|
|
2752
2773
|
});
|
|
2753
2774
|
}
|
|
2754
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2755
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2775
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortableGroupedItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2776
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SortableGroupedItemsComponent, isStandalone: false, selector: "klp-form-sortable-grouped-items", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container>\n <klp-form-sortable-items\n [(ngModel)]=\"items\"\n (ngModelChange)=\"onItemsRearranged($event)\"\n >\n <ng-template let-item=\"item\">\n @if (template) {\n <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n }\n @if (!template) {\n <div>{{item}}</div>\n }\n </ng-template>\n </klp-form-sortable-items>\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.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: SortableItemsComponent, selector: "klp-form-sortable-items", inputs: ["sortableItemSize"] }] }); }
|
|
2756
2777
|
}
|
|
2757
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SortableGroupedItemsComponent, decorators: [{
|
|
2758
2779
|
type: Component,
|
|
2759
|
-
args: [{ selector: 'klp-form-sortable-grouped-items', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], template: "<ng-container>\n
|
|
2780
|
+
args: [{ selector: 'klp-form-sortable-grouped-items', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SortableGroupedItemsComponent, multi: true }], standalone: false, template: "<ng-container>\n <klp-form-sortable-items\n [(ngModel)]=\"items\"\n (ngModelChange)=\"onItemsRearranged($event)\"\n >\n <ng-template let-item=\"item\">\n @if (template) {\n <ng-container [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ item: item }\"></ng-container>\n }\n @if (!template) {\n <div>{{item}}</div>\n }\n </ng-template>\n </klp-form-sortable-items>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
|
|
2760
2781
|
}], propDecorators: { template: [{
|
|
2761
2782
|
type: ContentChild,
|
|
2762
2783
|
args: [TemplateRef]
|
|
@@ -2840,12 +2861,12 @@ class HourMinuteInputComponent extends ValueAccessorBase {
|
|
|
2840
2861
|
this.touch();
|
|
2841
2862
|
}
|
|
2842
2863
|
}
|
|
2843
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2844
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2864
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HourMinuteInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2865
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: HourMinuteInputComponent, isStandalone: false, selector: "klp-form-hour-minute-input", inputs: { placeholders: "placeholders" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px;display:block;border:1px solid #D0D5DD}.componentContainer:hover{border-color:#98a2b3}.componentContainer{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer{width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input{padding:0;border:none}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
2845
2866
|
}
|
|
2846
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HourMinuteInputComponent, decorators: [{
|
|
2847
2868
|
type: Component,
|
|
2848
|
-
args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{display:block;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828
|
|
2869
|
+
args: [{ selector: 'klp-form-hour-minute-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: HourMinuteInputComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{disabled: disabled}\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<input class=\"hourInput\" maxlength=\"4\" [placeholder]=\"placeholders[0]\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (blur)=\"formatHours(); formatTime(); touchHours(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\" #nativeInputRef>\n\t<div class=\"divider\">:</div>\n\t<input maxlength=\"2\" [placeholder]=\"placeholders[1]\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (blur)=\"formatMinutes(); formatTime(); touchMinutes(); notifyNewTime()\" (ngModelChange)=\"notifyNewTime()\">\n\t<div class=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t</div>\n</div>\n", styles: [":host{display:flex}.componentContainer{height:42px;display:block;border:1px solid #D0D5DD}.componentContainer:hover{border-color:#98a2b3}.componentContainer{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}.componentContainer{width:initial;flex:0 0 auto;padding:6px .625rem;background:#fff;display:flex;align-items:center;border:1px solid #D0D5DD}.componentContainer.showErrors{border-color:#ff8000}.componentContainer.disabled{background:#f2f4f7;cursor:not-allowed}.componentContainer:focus-within{border-color:#00ac42;outline:1px solid #00AC42}.componentContainer input{color:#101828;text-align:center;height:100%;width:30px}.componentContainer input.hourInput{width:50px}.componentContainer input{padding:0;border:none}.componentContainer input::placeholder{color:#adadad}.componentContainer .divider{margin:0 .3125rem}.tail{margin-left:.4rem}\n"] }]
|
|
2849
2870
|
}], propDecorators: { placeholders: [{
|
|
2850
2871
|
type: Input
|
|
2851
2872
|
}] } });
|
|
@@ -2863,12 +2884,12 @@ class RadioComponent extends ValueAccessorBase {
|
|
|
2863
2884
|
this.size = 'medium';
|
|
2864
2885
|
this.Orientation = Orientation;
|
|
2865
2886
|
}
|
|
2866
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2867
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2887
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2888
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RadioComponent, isStandalone: false, selector: "klp-form-radio", inputs: { options: "options", orientation: "orientation", variant: "variant", size: "size" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n @for (option of options; track option) {\n <button class=\"optionContainer\"\n [ngClass]=\"{classic: variant === 'classic', button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n (click)=\"setInnerValueAndNotify(option.id)\"\n >\n <div class=\"radioAndName\">\n @if (variant === 'classic') {\n <div class=\"selectedRadioBtnContainer\">\n @if (innerValue === option.id) {\n <div class=\"selected\"></div>\n }\n </div>\n }\n <div class=\"nameAndDescription\">\n <div>{{option.name}}</div>\n @if (option.description) {\n <div class=\"description\">{{option.description}}</div>\n }\n </div>\n </div>\n </button>\n }\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:8px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:8px}.componentContainer.buttonGray{background:#eaecf0;border-radius:8px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #D0D5DD;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#00ac42}.optionContainer.classic .description{opacity:1;color:#101828}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;color:#00ac42;border:1px solid #00AC42;background-color:#fff}.optionContainer.button.isSelected{background:#00ac42;color:#fff}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:8px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2868
2889
|
}
|
|
2869
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RadioComponent, decorators: [{
|
|
2870
2891
|
type: Component,
|
|
2871
|
-
args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n
|
|
2892
|
+
args: [{ selector: 'klp-form-radio', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: RadioComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\" [ngClass]=\"{'verticallyOriented': orientation === Orientation.COLUMN, 'horizontallyOriented': orientation === Orientation.ROW, buttonGray: variant === 'buttonGray', sizeSmall: size === 'small'}\">\n @for (option of options; track option) {\n <button class=\"optionContainer\"\n [ngClass]=\"{classic: variant === 'classic', button: variant === 'button', buttonGray: variant === 'buttonGray', isSelected: innerValue === option.id}\"\n (click)=\"setInnerValueAndNotify(option.id)\"\n >\n <div class=\"radioAndName\">\n @if (variant === 'classic') {\n <div class=\"selectedRadioBtnContainer\">\n @if (innerValue === option.id) {\n <div class=\"selected\"></div>\n }\n </div>\n }\n <div class=\"nameAndDescription\">\n <div>{{option.name}}</div>\n @if (option.description) {\n <div class=\"description\">{{option.description}}</div>\n }\n </div>\n </div>\n </button>\n }\n</div>\n", styles: [":host{display:block}.componentContainer{position:relative;display:flex}.componentContainer.verticallyOriented{flex-direction:column}.componentContainer.verticallyOriented .optionContainer{margin-bottom:.3125rem}.componentContainer.verticallyOriented .optionContainer:last-child{margin-bottom:0}.componentContainer.horizontallyOriented{flex-direction:row}.componentContainer.horizontallyOriented .optionContainer:first-child{border-radius:6px 0 0 6px}.componentContainer.horizontallyOriented .optionContainer:last-child{border-radius:0 6px 6px 0}.componentContainer.horizontallyOriented.buttonGray .optionContainer:first-child{border-radius:8px}.componentContainer.horizontallyOriented.buttonGray .optionContainer:last-child{border-radius:8px}.componentContainer.buttonGray{background:#eaecf0;border-radius:8px;display:inline-block}.componentContainer.sizeSmall .optionContainer{padding:.4rem .8rem}.optionContainer{margin-right:.3125rem;background:transparent;border:none;align-items:center}.optionContainer.classic{cursor:pointer}.optionContainer.classic .selectedRadioBtnContainer{flex:0 0 auto;position:relative;height:20px;width:20px;padding:4px;border-radius:50%;border:2px solid #D0D5DD;margin-right:.3125rem}.optionContainer.classic .selectedRadioBtnContainer .selected{height:100%;width:100%;display:block;border-radius:100%;background-color:#00ac42}.optionContainer.classic .description{opacity:1;color:#101828}.optionContainer.classic .nameAndDescription{color:#515365}.optionContainer.button{position:relative;cursor:pointer;padding:10px 14px;margin-right:0;color:#00ac42;border:1px solid #00AC42;background-color:#fff}.optionContainer.button.isSelected{background:#00ac42;color:#fff}.optionContainer.buttonGray{position:relative;cursor:pointer;padding:10px 14px;margin:2px;color:#515365;background:#eaecf0;border-radius:8px}.optionContainer.buttonGray.isSelected{background:#fff;color:#101828}.radioAndName{display:flex;flex-direction:row;gap:.2rem}.nameAndDescription{text-align:left;line-height:1.1rem}.description{margin-top:.2rem;opacity:.6}\n"] }]
|
|
2872
2893
|
}], propDecorators: { options: [{
|
|
2873
2894
|
type: Input
|
|
2874
2895
|
}], orientation: [{
|
|
@@ -3039,13 +3060,14 @@ class WithTooltipDirective {
|
|
|
3039
3060
|
this.appRef.detachView(this.viewRefForTemplate);
|
|
3040
3061
|
this.viewRefForTemplate.destroy();
|
|
3041
3062
|
}
|
|
3042
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3043
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3063
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WithTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3064
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.14", type: WithTooltipDirective, isStandalone: false, selector: "[klpWithTooltip]", inputs: { klpWithTooltip: "klpWithTooltip", tooltipText: "tooltipText", tooltipTemplate: "tooltipTemplate", tooltipMinWidth: "tooltipMinWidth", tooltipMaxWidth: "tooltipMaxWidth", position: "position" }, ngImport: i0 }); }
|
|
3044
3065
|
}
|
|
3045
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: WithTooltipDirective, decorators: [{
|
|
3046
3067
|
type: Directive,
|
|
3047
3068
|
args: [{
|
|
3048
|
-
selector: '[klpWithTooltip]'
|
|
3069
|
+
selector: '[klpWithTooltip]',
|
|
3070
|
+
standalone: false
|
|
3049
3071
|
}]
|
|
3050
3072
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.NgZone }], propDecorators: { klpWithTooltip: [{
|
|
3051
3073
|
type: Input
|
|
@@ -3066,12 +3088,12 @@ class TextAreaComponent extends ValueAccessorBase {
|
|
|
3066
3088
|
super(...arguments);
|
|
3067
3089
|
this.onBlur = new EventEmitter();
|
|
3068
3090
|
}
|
|
3069
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3070
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3091
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextAreaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3092
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TextAreaComponent, isStandalone: false, selector: "klp-form-text-area", inputs: { placeholder: "placeholder" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\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></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none;display:block;border:1px solid #D0D5DD}textarea:hover{border-color:#98a2b3}textarea{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}textarea::-webkit-input-placeholder{color:#98a2b3}textarea:-moz-placeholder{color:#98a2b3}textarea::-moz-placeholder{color:#98a2b3}textarea:-ms-input-placeholder{color:#98a2b3}textarea:focus,textarea:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}textarea.input-sm{height:30px}textarea.input-lg{height:50px}textarea.error{border-color:#dc3545;background-color:#f6cdd1}textarea.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}textarea:placeholder-shown{text-overflow:ellipsis}textarea[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}textarea{height:100%;resize:none}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
3071
3093
|
}
|
|
3072
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3094
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TextAreaComponent, decorators: [{
|
|
3073
3095
|
type: Component,
|
|
3074
|
-
args: [{ selector: 'klp-form-text-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\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></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none;display:block;border:1px solid #D0D5DD
|
|
3096
|
+
args: [{ selector: 'klp-form-text-area', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextAreaComponent, multi: true }], standalone: false, template: "<div class=\"componentContainer\">\n\t<textarea\n\t\t[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState()}\"\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></textarea>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative;height:100%}textarea{outline:none;display:block;border:1px solid #D0D5DD}textarea:hover{border-color:#98a2b3}textarea{border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828}textarea::-webkit-input-placeholder{color:#98a2b3}textarea:-moz-placeholder{color:#98a2b3}textarea::-moz-placeholder{color:#98a2b3}textarea:-ms-input-placeholder{color:#98a2b3}textarea:focus,textarea:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}textarea.input-sm{height:30px}textarea.input-lg{height:50px}textarea.error{border-color:#dc3545;background-color:#f6cdd1}textarea.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}textarea:placeholder-shown{text-overflow:ellipsis}textarea[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}textarea{height:100%;resize:none}.showErrors{border-color:#ff8000}\n"] }]
|
|
3075
3097
|
}], propDecorators: { placeholder: [{
|
|
3076
3098
|
type: Input
|
|
3077
3099
|
}], onBlur: [{
|
|
@@ -3094,12 +3116,12 @@ class FormCaptionEndComponent {
|
|
|
3094
3116
|
ngOnDestroy() {
|
|
3095
3117
|
this.parent.registerCaptionEnd(null);
|
|
3096
3118
|
}
|
|
3097
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
3119
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormCaptionEndComponent, deps: [{ token: FormElementComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3120
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormCaptionEndComponent, isStandalone: false, selector: "klp-form-caption-end", viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["contentRef"], descendants: true }], ngImport: i0, template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }); }
|
|
3099
3121
|
}
|
|
3100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormCaptionEndComponent, decorators: [{
|
|
3101
3123
|
type: Component,
|
|
3102
|
-
args: [{ selector: 'klp-form-caption-end', template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
3124
|
+
args: [{ selector: 'klp-form-caption-end', standalone: false, template: "<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
|
|
3103
3125
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
3104
3126
|
type: Host
|
|
3105
3127
|
}, {
|
|
@@ -3110,8 +3132,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
3110
3132
|
}] } });
|
|
3111
3133
|
|
|
3112
3134
|
class NgxEnhancyFormsModule {
|
|
3113
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3114
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
3135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NgxEnhancyFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
3136
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: NgxEnhancyFormsModule, declarations: [ValueAccessorBase,
|
|
3115
3137
|
MultipleValueAccessorBase,
|
|
3116
3138
|
ButtonComponent,
|
|
3117
3139
|
CheckboxComponent,
|
|
@@ -3145,7 +3167,6 @@ class NgxEnhancyFormsModule {
|
|
|
3145
3167
|
ElementIsTruncatedCbComponent], imports: [CommonModule,
|
|
3146
3168
|
FormsModule,
|
|
3147
3169
|
NgSelectModule,
|
|
3148
|
-
SortablejsModule,
|
|
3149
3170
|
MaterialModule], exports: [ValueAccessorBase,
|
|
3150
3171
|
MultipleValueAccessorBase,
|
|
3151
3172
|
ButtonComponent,
|
|
@@ -3177,20 +3198,18 @@ class NgxEnhancyFormsModule {
|
|
|
3177
3198
|
WithTooltipDirective,
|
|
3178
3199
|
OnRenderDirective,
|
|
3179
3200
|
ElementIsTruncatedCbComponent] }); }
|
|
3180
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
3201
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NgxEnhancyFormsModule, imports: [CommonModule,
|
|
3181
3202
|
FormsModule,
|
|
3182
3203
|
NgSelectModule,
|
|
3183
|
-
SortablejsModule,
|
|
3184
3204
|
MaterialModule] }); }
|
|
3185
3205
|
}
|
|
3186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: NgxEnhancyFormsModule, decorators: [{
|
|
3187
3207
|
type: NgModule,
|
|
3188
3208
|
args: [{
|
|
3189
3209
|
imports: [
|
|
3190
3210
|
CommonModule,
|
|
3191
3211
|
FormsModule,
|
|
3192
3212
|
NgSelectModule,
|
|
3193
|
-
SortablejsModule,
|
|
3194
3213
|
MaterialModule,
|
|
3195
3214
|
],
|
|
3196
3215
|
declarations: [
|