@klippa/ngx-enhancy-forms 18.33.8 → 18.33.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -10,11 +10,11 @@ export class CheckboxComponent extends ValueAccessorBase {
|
|
|
10
10
|
this.renderUndefinedAsIndeterminate = false;
|
|
11
11
|
}
|
|
12
12
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: CheckboxComponent, 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\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t#nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t<svg *ngIf=\"innerValue === true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n\t</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}.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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: CheckboxComponent, 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\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t#nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t<svg *ngIf=\"innerValue === true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n\t</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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
14
14
|
}
|
|
15
15
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
|
-
args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t#nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t<svg *ngIf=\"innerValue === true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n\t</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}.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"] }]
|
|
17
|
+
args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t#nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t<svg *ngIf=\"innerValue === true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n\t</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"] }]
|
|
18
18
|
}], propDecorators: { caption: [{
|
|
19
19
|
type: Input
|
|
20
20
|
}], renderUndefinedAsIndeterminate: [{
|
|
@@ -287,11 +287,11 @@ export class SelectComponent extends ValueAccessorBase {
|
|
|
287
287
|
this.elRef.nativeElement?.querySelector('input')?.removeEventListener('keydown', this.keyListener);
|
|
288
288
|
}
|
|
289
289
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectComponent, deps: [{ token: i1.FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: SELECT_TRANSLATIONS, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SelectComponent, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:40px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }
|
|
290
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SelectComponent, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:40px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }
|
|
291
291
|
}
|
|
292
292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectComponent, decorators: [{
|
|
293
293
|
type: Component,
|
|
294
|
-
args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:40px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
|
|
294
|
+
args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:40px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
|
|
295
295
|
}], ctorParameters: () => [{ type: i1.FormElementComponent, decorators: [{
|
|
296
296
|
type: Optional
|
|
297
297
|
}, {
|
|
@@ -1212,11 +1212,11 @@ class CheckboxComponent extends ValueAccessorBase {
|
|
|
1212
1212
|
this.renderUndefinedAsIndeterminate = false;
|
|
1213
1213
|
}
|
|
1214
1214
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1215
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: CheckboxComponent, 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\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t#nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t<svg *ngIf=\"innerValue === true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n\t</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}.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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
|
|
1215
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: CheckboxComponent, 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\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t#nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t<svg *ngIf=\"innerValue === true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n\t</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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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
1216
|
}
|
|
1217
1217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1218
1218
|
type: Component,
|
|
1219
|
-
args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t#nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t<svg *ngIf=\"innerValue === true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n\t</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}.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"] }]
|
|
1219
|
+
args: [{ selector: 'klp-form-checkbox', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true }], template: "<div class=\"componentContainer\">\n\t<label>\n\t\t<div class=\"checkboxContainer\">\n\t\t\t<div class=\"checkBoxVisualContainer\">\n\t\t\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t#nativeInputRef\n\t\t\t\t/>\n\t\t\t\t<div class=\"checkboxVisual\" [ngClass]=\"{filledWithColor: innerValue === true || (renderUndefinedAsIndeterminate && innerValue === undefined)}\">\n\t\t\t\t\t<svg *ngIf=\"innerValue === true\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"9\" viewBox=\"0 0 12 9\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M10.3333 1L3.91667 7.41667L1 4.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t\t<svg *ngIf=\"renderUndefinedAsIndeterminate && innerValue === undefined\" xmlns=\"http://www.w3.org/2000/svg\" width=\"11\" height=\"2\" viewBox=\"0 0 11 2\" fill=\"none\">\n\t\t\t\t\t\t<path d=\"M1 1H9.16667\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n\t</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
1220
|
}], propDecorators: { caption: [{
|
|
1221
1221
|
type: Input
|
|
1222
1222
|
}], renderUndefinedAsIndeterminate: [{
|
|
@@ -1557,11 +1557,11 @@ class SelectComponent extends ValueAccessorBase {
|
|
|
1557
1557
|
this.elRef.nativeElement?.querySelector('input')?.removeEventListener('keydown', this.keyListener);
|
|
1558
1558
|
}
|
|
1559
1559
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", 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 }); }
|
|
1560
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SelectComponent, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:40px;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]" }] }); }
|
|
1560
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: SelectComponent, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:40px;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]" }] }); }
|
|
1561
1561
|
}
|
|
1562
1562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1563
1563
|
type: Component,
|
|
1564
|
-
args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:40px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
|
|
1564
|
+
args: [{ selector: 'klp-form-select', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], template: "<ng-select\n\t#ngSelect\n\t[placeholder]=\"getTranslation('placeholder')\"\n\tbindLabel=\"name\"\n\tbindValue=\"id\"\n\t[items]=\"options\"\n\t[clearable]=\"clearable\"\n\t[(ngModel)]=\"innerValue\"\n\t[ngClass]=\"{showErrors: isInErrorState(), verticalOrientation: orientation === 'vertical', truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t[multiple]=\"multiple\"\n\t[disabled]=\"disabled\"\n\t(blur)=\"touch(); onBlur.emit()\"\n\t(clear)=\"onClear.emit()\"\n\t(search)=\"searchQueryChanged($event.term)\"\n\t[searchable]=\"searchable\"\n\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t[searchFn]=\"customSearchFn\"\n\t[selectOnTab]=\"true\"\n\t[virtualScroll]=\"true\"\n\t(scroll)=\"onScroll($event.end)\"\n\t(open)=\"onOpen()\"\n\t(close)=\"onClose()\"\n\t(focus)=\"onFocus()\"\n>\n\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t<ng-container *ngIf=\"customOptionTpl\" [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t<div [attr.data-cy]=\"item.id\" *ngIf=\"!customOptionTpl\">\n\t\t\t{{ item.name }}\n\t\t\t<div *ngIf=\"item.description\" class=\"dropdown-item-description\">\n\t\t\t\t{{ item.description }}\n\t\t\t</div>\n\t\t</div>\n\t</ng-template>\n\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n\n<div class=\"tail\" #tailRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n<!-- I have no idea how to avoid that -->\n<div class=\"tailMock\" #tailMockRef>\n\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n</div>\n", styles: [":host{display:block;position:relative}ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{display:block;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#101828;height:initial;min-height:42px;display:flex}:host ::ng-deep ng-select.ng-select .ng-select-container:hover{border-color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-webkit-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container::-moz-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:-ms-input-placeholder{color:#98a2b3}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}:host ::ng-deep ng-select.ng-select .ng-select-container.input-sm{height:30px}:host ::ng-deep ng-select.ng-select .ng-select-container.input-lg{height:50px}:host ::ng-deep ng-select.ng-select .ng-select-container.error{border-color:#dc3545;background-color:#f6cdd1}:host ::ng-deep ng-select.ng-select .ng-select-container.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}:host ::ng-deep ng-select.ng-select .ng-select-container:placeholder-shown{text-overflow:ellipsis}:host ::ng-deep ng-select.ng-select .ng-select-container[disabled]{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep ng-select.ng-select .ng-select-container:focus,:host ::ng-deep ng-select.ng-select .ng-select-container:focus-within{border-color:#d0d5dd;outline:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#00df56}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;min-height:42px;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#101828;font-size:14px;line-height:1.5;margin:0;outline:none;overflow:visible;padding:.375rem .75rem;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa;max-width:100%}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:4.5rem;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-right:5px;margin-top:3px;margin-bottom:3px;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:none;line-height:1rem;font-size:1rem;border-radius:3px;align-self:center;margin-right:2px;color:#98a2b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover{background-color:#f2f4f7;color:#667085}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:3px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999;width:initial}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 1px #0000000f}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;cursor:default;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host .ng-select.noBorderLeft ::ng-deep .ng-select-container{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}:host .ng-select.noBorderRight ::ng-deep .ng-select-container{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:9px;color:#101828}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;right:40px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"] }]
|
|
1565
1565
|
}], ctorParameters: () => [{ type: FormElementComponent, decorators: [{
|
|
1566
1566
|
type: Optional
|
|
1567
1567
|
}, {
|