ng-tailwind 5.0.16 → 5.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ngt-datatable/ngt-datatable.component.d.ts +3 -0
- package/components/ngt-select/ngt-select.component.d.ts +2 -0
- package/esm2020/components/ngt-datatable/ngt-datatable.component.mjs +25 -4
- package/esm2020/components/ngt-datatable/ngt-th-check/ngt-th-check.component.mjs +4 -2
- package/esm2020/components/ngt-select/ngt-select.component.mjs +26 -3
- package/fesm2015/ng-tailwind.mjs +53 -7
- package/fesm2015/ng-tailwind.mjs.map +1 -1
- package/fesm2020/ng-tailwind.mjs +52 -6
- package/fesm2020/ng-tailwind.mjs.map +1 -1
- package/package.json +1 -1
package/fesm2020/ng-tailwind.mjs
CHANGED
|
@@ -3189,6 +3189,12 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3189
3189
|
ngOnDestroy() {
|
|
3190
3190
|
this.destroySubscriptions();
|
|
3191
3191
|
}
|
|
3192
|
+
onOpen() {
|
|
3193
|
+
const parentElement = document.getElementById('ngtSelectParentContainer');
|
|
3194
|
+
if (this.dropdownPosition == 'auto' && parentElement) {
|
|
3195
|
+
this.calculateDropdownPosition(parentElement);
|
|
3196
|
+
}
|
|
3197
|
+
}
|
|
3192
3198
|
removeItem(event, item) {
|
|
3193
3199
|
event.preventDefault();
|
|
3194
3200
|
event.stopPropagation();
|
|
@@ -3315,6 +3321,23 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3315
3321
|
disabled() {
|
|
3316
3322
|
return this.isDisabled || this.isDisabledByParent();
|
|
3317
3323
|
}
|
|
3324
|
+
calculateDropdownPosition(parentElement) {
|
|
3325
|
+
setTimeout(() => {
|
|
3326
|
+
const ngSelectElement = this.ngSelectComponent.element;
|
|
3327
|
+
const ngSelectHeight = ngSelectElement.offsetHeight;
|
|
3328
|
+
const ngSelectYPosition = ngSelectElement.getBoundingClientRect().y;
|
|
3329
|
+
const dropdownHeight = this.ngSelectComponent.dropdownPanel.contentElementRef.nativeElement.offsetHeight;
|
|
3330
|
+
const openedSelectHeight = ngSelectHeight + dropdownHeight;
|
|
3331
|
+
const parentYPosition = parentElement.getBoundingClientRect().y;
|
|
3332
|
+
const ngSelectYPositionInsideParent = ngSelectYPosition - parentYPosition;
|
|
3333
|
+
const openedSelectTotalHeight = openedSelectHeight + ngSelectYPositionInsideParent;
|
|
3334
|
+
const dropdownPosition = openedSelectTotalHeight > parentElement.clientHeight
|
|
3335
|
+
? 'top'
|
|
3336
|
+
: 'bottom';
|
|
3337
|
+
this.ngSelectComponent.dropdownPanel['_currentPosition'] = dropdownPosition;
|
|
3338
|
+
this.ngSelectComponent.dropdownPanel['_updateDropdownClass'](dropdownPosition);
|
|
3339
|
+
});
|
|
3340
|
+
}
|
|
3318
3341
|
initNgSelectItems() {
|
|
3319
3342
|
if (this.remoteResource && this.canLoadItems()) {
|
|
3320
3343
|
this.ngSelectItems = new Observable(observer => {
|
|
@@ -3480,7 +3503,7 @@ class NgtSelectComponent extends NgtBaseNgModel {
|
|
|
3480
3503
|
NgtSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectComponent, deps: [{ token: NgtStylizableDirective, optional: true, self: true }, { token: i2$1.ControlContainer, host: true, optional: true }, { token: NgtTranslateService, optional: true }, { token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtFormComponent, optional: true, skipSelf: true }, { token: NgtSectionComponent, optional: true, skipSelf: true }, { token: NgtModalComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
3481
3504
|
NgtSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtSelectComponent, selector: "ngt-select", inputs: { label: "label", labelIcon: "labelIcon", labelIconColor: "labelIconColor", helpTitle: "helpTitle", helpText: "helpText", helpTextColor: "helpTextColor", shining: "shining", loading: "loading", loadingText: "loadingText", notFoundText: "notFoundText", dropdownPosition: "dropdownPosition", typeToSearchText: "typeToSearchText", clearAllTooltip: "clearAllTooltip", placeholder: "placeholder", createText: "createText", labelForId: "labelForId", dropdownPanelMinHeight: "dropdownPanelMinHeight", helperReverseYPosition: "helperReverseYPosition", helperAutoXReverse: "helperAutoXReverse", name: "name", autoLoad: "autoLoad", allowCreate: "allowCreate", allowOriginalItemsUnselect: "allowOriginalItemsUnselect", isDisabled: "isDisabled", isReadonly: "isReadonly", remoteResource: "remoteResource", hideSelected: "hideSelected", bindLabel: "bindLabel", bindValue: "bindValue", items: "items", inputAttrs: "inputAttrs", closeOnSelect: "closeOnSelect", clearable: "clearable", groupBy: "groupBy", maxSelectedItems: "maxSelectedItems", multiple: "multiple", searchable: "searchable", clearSearchOnAdd: "clearSearchOnAdd", virtualScroll: "virtualScroll", tabIndex: "tabIndex", typeahead: "typeahead", guessCompareWith: "guessCompareWith", autoSelectUniqueOption: "autoSelectUniqueOption", groupValue: "groupValue", trackBy: "trackBy", sortSelectedItemsFn: "sortSelectedItemsFn", isAllowedToRemoveFn: "isAllowedToRemoveFn", isRequired: "isRequired", compareWith: "compareWith" }, outputs: { onLoadRemoteResource: "onLoadRemoteResource", onSelectedItemRemove: "onSelectedItemRemove", onClear: "onClear", onClose: "onClose" }, providers: [
|
|
3482
3505
|
NgtMakeProvider(NgtSelectComponent)
|
|
3483
|
-
], queries: [{ propertyName: "ngtOptionTemplate", first: true, predicate: NgtSelectOptionTmp, descendants: true, read: TemplateRef }, { propertyName: "ngtOptionSelectedTemplate", first: true, predicate: NgtSelectOptionSelectedTmp, descendants: true, read: TemplateRef }, { propertyName: "ngtSelectHeaderTemplate", first: true, predicate: NgtSelectHeaderTmp, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label\" [hidden]='shining'\n class=\"{{ shining ? '' : 'block' }} {{ ngtStyle.compile(['color.text', 'text', 'font', 'fontCase']) }} mb-2 flex\">\n <ngt-svg *ngIf=\"labelIcon\" class=\"mr-1 {{labelIconColor}}\" src=\"{{labelIcon}}\"></ngt-svg>\n {{ label }}:\n\n <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ ngtStyle.compile(['text']) }} {{ getSelectClass() }} normal-case\"\n style=\"min-height: 2.5rem;\">\n <ng-select class=\"custom\" [(ngModel)]='nativeValue' [name]='nativeName' [addTag]='allowCreate'\n [addTagText]=\"createText || ngtTranslateService.ngtSelectCreateText\" [bindLabel]=\"bindLabel\"\n [multiple]=\"multiple\" [hideSelected]=\"hideSelected\" [typeahead]=\"typeahead\"\n [notFoundText]=\"notFoundText || ngtTranslateService.ngtSelectNotFoundText\" [searchable]=\"searchable\"\n [searchFn]=\"itemSearchFn\" [disabled]='disabled() || isReadonly'\n [clearable]=\"clearable && hasSelectedValue()\" [closeOnSelect]=\"closeOnSelect\" [trackByFn]=\"trackBy\"\n [labelForId]=\"labelForId\" [typeToSearchText]=\"typeToSearchText || ngtTranslateService.ngtSelectTypeToSearchText\"\n [placeholder]=\"placeholder || ngtTranslateService.ngtSelectPlaceholder\" [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\" [clearAllText]=\"clearAllTooltip || ngtTranslateService.ngtSelectClearAllTooltip\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\" [bindValue]=\"bindValue\" [virtualScroll]=\"virtualScroll\"\n [loadingText]=\"loadingText || ngtTranslateService.ngtSelectLoadingText\" [maxSelectedItems]=\"maxSelectedItems\"\n [tabIndex]=\"tabIndex\" [items]=\"ngSelectItems | async\" [groupValue]=\"groupValue\" [loading]=\"loading\"\n [compareWith]='compareWith' [inputAttrs]=\"inputAttrs\" (scroll)=\"onScroll($event)\" (close)=\"onClose.emit()\"\n (change)=\"onNativeChange($event)\" (clear)='onClearSelect()' (remove)='onRemoveSelectedItem($event)'\n (click)=\"wasClicked = true\">\n\n <ng-template *ngIf='ngtSelectHeaderTemplate' ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"ngtSelectHeaderTemplate\">\n </ng-template>\n </ng-template>\n\n <ng-template ng-label-tmp let-item=\"item\">\n <div class=\"flex w-full items-center pr-1\">\n <ng-container *ngIf=\"multiple && !cantRemoveItem(item)\">\n <div class=\"ng-value-icon px-1 h-full border-r mr-2 {{ ngtStyle.compile(['color.text', 'text']) }} cursor-pointer\"\n (click)='removeItem($event, item)'>\n <svg class=\"ng-value-icon fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\">\n <path\n d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n </svg>\n </div>\n </ng-container>\n\n <ng-template *ngIf='ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionSelectedTemplate\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n\n <ng-template *ngIf='!ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </div>\n </ng-template>\n\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"ngtOptionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, index: index, searchTerm: search }\">\n </ng-template>\n </ng-template>\n </ng-select>\n</div>\n\n<ng-container *ngIf='shining'>\n <div class=\"flex\">\n <ngt-shining class=\"{{ ngtStyle.compile(['h']) }} w-full\"></ngt-shining>\n </div>\n</ng-container>\n\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;background-color:#ebf5ff;border-radius:2px;margin-right:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}.ng-select,.ng-select.custom .ng-select-container{height:100%;margin-top:-1px;margin-bottom:-1px}.ng-select-container{color:inherit!important;min-height:2.5rem!important}.select-border-disabled .ng-select-container{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem;padding:1px}.select-border-error .ng-select-container{border:solid #c53030 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.select-border-normal .ng-select-container{border:solid #cbd5e0 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.ng-value{max-width:100%}.ng-select-dropdown-panel-auto .ng-dropdown-panel .ng-dropdown-panel-items{min-height:unset}.ng-select-dropdown-panel-xs .ng-dropdown-panel .ng-dropdown-panel-items{min-height:80px!important}.ng-select-dropdown-panel-sm .ng-dropdown-panel .ng-dropdown-panel-items{min-height:100px!important}.ng-select-dropdown-panel-md .ng-dropdown-panel .ng-dropdown-panel-items{min-height:120px!important}.ng-select-dropdown-panel-lg .ng-dropdown-panel .ng-dropdown-panel-items{min-height:140px!important}.ng-select-dropdown-panel-xl .ng-dropdown-panel .ng-dropdown-panel-items{min-height:160px!important}.ng-dropdown-panel .ng-dropdown-header{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "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", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i9.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i9.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i9.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
|
|
3506
|
+
], queries: [{ propertyName: "ngtOptionTemplate", first: true, predicate: NgtSelectOptionTmp, descendants: true, read: TemplateRef }, { propertyName: "ngtOptionSelectedTemplate", first: true, predicate: NgtSelectOptionSelectedTmp, descendants: true, read: TemplateRef }, { propertyName: "ngtSelectHeaderTemplate", first: true, predicate: NgtSelectHeaderTmp, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label *ngIf=\"label\" [hidden]='shining'\n class=\"{{ shining ? '' : 'block' }} {{ ngtStyle.compile(['color.text', 'text', 'font', 'fontCase']) }} mb-2 flex\">\n <ngt-svg *ngIf=\"labelIcon\" class=\"mr-1 {{labelIconColor}}\" src=\"{{labelIcon}}\"></ngt-svg>\n {{ label }}:\n\n <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ ngtStyle.compile(['text']) }} {{ getSelectClass() }} normal-case\"\n style=\"min-height: 2.5rem;\">\n <ng-select class=\"custom\" [(ngModel)]='nativeValue' [name]='nativeName' [addTag]='allowCreate'\n [addTagText]=\"createText || ngtTranslateService.ngtSelectCreateText\" [bindLabel]=\"bindLabel\"\n [multiple]=\"multiple\" [hideSelected]=\"hideSelected\" [typeahead]=\"typeahead\"\n [notFoundText]=\"notFoundText || ngtTranslateService.ngtSelectNotFoundText\" [searchable]=\"searchable\"\n [searchFn]=\"itemSearchFn\" [disabled]='disabled() || isReadonly' [clearable]=\"clearable && hasSelectedValue()\"\n [closeOnSelect]=\"closeOnSelect\" [trackByFn]=\"trackBy\" [labelForId]=\"labelForId\"\n [typeToSearchText]=\"typeToSearchText || ngtTranslateService.ngtSelectTypeToSearchText\"\n [placeholder]=\"placeholder || ngtTranslateService.ngtSelectPlaceholder\" [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\" [clearAllText]=\"clearAllTooltip || ngtTranslateService.ngtSelectClearAllTooltip\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\" [bindValue]=\"bindValue\" [virtualScroll]=\"virtualScroll\"\n [loadingText]=\"loadingText || ngtTranslateService.ngtSelectLoadingText\" [maxSelectedItems]=\"maxSelectedItems\"\n [tabIndex]=\"tabIndex\" [items]=\"ngSelectItems | async\" [groupValue]=\"groupValue\" [loading]=\"loading\"\n [compareWith]='compareWith' [inputAttrs]=\"inputAttrs\" (scroll)=\"onScroll($event)\" (close)=\"onClose.emit()\"\n (change)=\"onNativeChange($event)\" (clear)='onClearSelect()' (remove)='onRemoveSelectedItem($event)'\n (open)=\"onOpen()\" (click)=\"wasClicked = true\">\n\n <ng-template *ngIf='ngtSelectHeaderTemplate' ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"ngtSelectHeaderTemplate\">\n </ng-template>\n </ng-template>\n\n <ng-template ng-label-tmp let-item=\"item\">\n <div class=\"flex w-full items-center pr-1\">\n <ng-container *ngIf=\"multiple && !cantRemoveItem(item)\">\n <div class=\"ng-value-icon px-1 h-full border-r mr-2 {{ ngtStyle.compile(['color.text', 'text']) }} cursor-pointer\"\n (click)='removeItem($event, item)'>\n <svg class=\"ng-value-icon fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\">\n <path\n d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n </svg>\n </div>\n </ng-container>\n\n <ng-template *ngIf='ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionSelectedTemplate\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n\n <ng-template *ngIf='!ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </div>\n </ng-template>\n\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"ngtOptionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, index: index, searchTerm: search }\">\n </ng-template>\n </ng-template>\n </ng-select>\n</div>\n\n<ng-container *ngIf='shining'>\n <div class=\"flex\">\n <ngt-shining class=\"{{ ngtStyle.compile(['h']) }} w-full\"></ngt-shining>\n </div>\n</ng-container>\n\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;background-color:#ebf5ff;border-radius:2px;margin-right:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}.ng-select,.ng-select.custom .ng-select-container{height:100%;margin-top:-1px;margin-bottom:-1px}.ng-select-container{color:inherit!important;min-height:2.5rem!important}.select-border-disabled .ng-select-container{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem;padding:1px}.select-border-error .ng-select-container{border:solid #c53030 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.select-border-normal .ng-select-container{border:solid #cbd5e0 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.ng-value{max-width:100%}.ng-select-dropdown-panel-auto .ng-dropdown-panel .ng-dropdown-panel-items{min-height:unset}.ng-select-dropdown-panel-xs .ng-dropdown-panel .ng-dropdown-panel-items{min-height:80px!important}.ng-select-dropdown-panel-sm .ng-dropdown-panel .ng-dropdown-panel-items{min-height:100px!important}.ng-select-dropdown-panel-md .ng-dropdown-panel .ng-dropdown-panel-items{min-height:120px!important}.ng-select-dropdown-panel-lg .ng-dropdown-panel .ng-dropdown-panel-items{min-height:140px!important}.ng-select-dropdown-panel-xl .ng-dropdown-panel .ng-dropdown-panel-items{min-height:160px!important}.ng-dropdown-panel .ng-dropdown-header{padding:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "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", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i9.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i9.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i9.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: NgtValidationComponent, selector: "ngt-validation", inputs: ["control", "container", "minValue", "minLength"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtHelperComponent, selector: "ngt-helper", inputs: ["helpTextColor", "helpText", "helpTitle", "icon", "iconSize", "iconColor", "iconTitle", "tooltipSize", "autoXReverse", "helperReverseYPosition"] }, { kind: "component", type: NgtSvgComponent, selector: "ngt-svg", inputs: ["src", "class"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], viewProviders: [
|
|
3484
3507
|
{ provide: ControlContainer, useExisting: NgForm }
|
|
3485
3508
|
], encapsulation: i0.ViewEncapsulation.None });
|
|
3486
3509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtSelectComponent, decorators: [{
|
|
@@ -3489,7 +3512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImpor
|
|
|
3489
3512
|
NgtMakeProvider(NgtSelectComponent)
|
|
3490
3513
|
], viewProviders: [
|
|
3491
3514
|
{ provide: ControlContainer, useExisting: NgForm }
|
|
3492
|
-
], encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"label\" [hidden]='shining'\n class=\"{{ shining ? '' : 'block' }} {{ ngtStyle.compile(['color.text', 'text', 'font', 'fontCase']) }} mb-2 flex\">\n <ngt-svg *ngIf=\"labelIcon\" class=\"mr-1 {{labelIconColor}}\" src=\"{{labelIcon}}\"></ngt-svg>\n {{ label }}:\n\n <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ ngtStyle.compile(['text']) }} {{ getSelectClass() }} normal-case\"\n style=\"min-height: 2.5rem;\">\n <ng-select class=\"custom\" [(ngModel)]='nativeValue' [name]='nativeName' [addTag]='allowCreate'\n [addTagText]=\"createText || ngtTranslateService.ngtSelectCreateText\" [bindLabel]=\"bindLabel\"\n [multiple]=\"multiple\" [hideSelected]=\"hideSelected\" [typeahead]=\"typeahead\"\n [notFoundText]=\"notFoundText || ngtTranslateService.ngtSelectNotFoundText\" [searchable]=\"searchable\"\n [searchFn]=\"itemSearchFn\" [disabled]='disabled() || isReadonly'\n [clearable]=\"clearable && hasSelectedValue()\" [closeOnSelect]=\"closeOnSelect\" [trackByFn]=\"trackBy\"\n [labelForId]=\"labelForId\" [typeToSearchText]=\"typeToSearchText || ngtTranslateService.ngtSelectTypeToSearchText\"\n [placeholder]=\"placeholder || ngtTranslateService.ngtSelectPlaceholder\" [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\" [clearAllText]=\"clearAllTooltip || ngtTranslateService.ngtSelectClearAllTooltip\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\" [bindValue]=\"bindValue\" [virtualScroll]=\"virtualScroll\"\n [loadingText]=\"loadingText || ngtTranslateService.ngtSelectLoadingText\" [maxSelectedItems]=\"maxSelectedItems\"\n [tabIndex]=\"tabIndex\" [items]=\"ngSelectItems | async\" [groupValue]=\"groupValue\" [loading]=\"loading\"\n [compareWith]='compareWith' [inputAttrs]=\"inputAttrs\" (scroll)=\"onScroll($event)\" (close)=\"onClose.emit()\"\n (change)=\"onNativeChange($event)\" (clear)='onClearSelect()' (remove)='onRemoveSelectedItem($event)'\n (click)=\"wasClicked = true\">\n\n <ng-template *ngIf='ngtSelectHeaderTemplate' ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"ngtSelectHeaderTemplate\">\n </ng-template>\n </ng-template>\n\n <ng-template ng-label-tmp let-item=\"item\">\n <div class=\"flex w-full items-center pr-1\">\n <ng-container *ngIf=\"multiple && !cantRemoveItem(item)\">\n <div class=\"ng-value-icon px-1 h-full border-r mr-2 {{ ngtStyle.compile(['color.text', 'text']) }} cursor-pointer\"\n (click)='removeItem($event, item)'>\n <svg class=\"ng-value-icon fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\">\n <path\n d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n </svg>\n </div>\n </ng-container>\n\n <ng-template *ngIf='ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionSelectedTemplate\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n\n <ng-template *ngIf='!ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </div>\n </ng-template>\n\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"ngtOptionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, index: index, searchTerm: search }\">\n </ng-template>\n </ng-template>\n </ng-select>\n</div>\n\n<ng-container *ngIf='shining'>\n <div class=\"flex\">\n <ngt-shining class=\"{{ ngtStyle.compile(['h']) }} w-full\"></ngt-shining>\n </div>\n</ng-container>\n\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">\n", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;background-color:#ebf5ff;border-radius:2px;margin-right:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}.ng-select,.ng-select.custom .ng-select-container{height:100%;margin-top:-1px;margin-bottom:-1px}.ng-select-container{color:inherit!important;min-height:2.5rem!important}.select-border-disabled .ng-select-container{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem;padding:1px}.select-border-error .ng-select-container{border:solid #c53030 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.select-border-normal .ng-select-container{border:solid #cbd5e0 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.ng-value{max-width:100%}.ng-select-dropdown-panel-auto .ng-dropdown-panel .ng-dropdown-panel-items{min-height:unset}.ng-select-dropdown-panel-xs .ng-dropdown-panel .ng-dropdown-panel-items{min-height:80px!important}.ng-select-dropdown-panel-sm .ng-dropdown-panel .ng-dropdown-panel-items{min-height:100px!important}.ng-select-dropdown-panel-md .ng-dropdown-panel .ng-dropdown-panel-items{min-height:120px!important}.ng-select-dropdown-panel-lg .ng-dropdown-panel .ng-dropdown-panel-items{min-height:140px!important}.ng-select-dropdown-panel-xl .ng-dropdown-panel .ng-dropdown-panel-items{min-height:160px!important}.ng-dropdown-panel .ng-dropdown-header{padding:0!important}\n"] }]
|
|
3515
|
+
], encapsulation: ViewEncapsulation.None, template: "<label *ngIf=\"label\" [hidden]='shining'\n class=\"{{ shining ? '' : 'block' }} {{ ngtStyle.compile(['color.text', 'text', 'font', 'fontCase']) }} mb-2 flex\">\n <ngt-svg *ngIf=\"labelIcon\" class=\"mr-1 {{labelIconColor}}\" src=\"{{labelIcon}}\"></ngt-svg>\n {{ label }}:\n\n <span class=\"text-red-500 font-bold text-md ml-1\" *ngIf=\"isRequired\">*</span>\n\n <ngt-helper *ngIf=\"helpText\" [helpTitle]=\"helpTitle\" [iconColor]=\"helpTextColor\"\n [helperReverseYPosition]=\"helperReverseYPosition\" [autoXReverse]=\"helperAutoXReverse\" class=\"ml-1\">\n {{ helpText }}\n </ngt-helper>\n</label>\n\n<div [hidden]='shining' class=\"{{ ngtStyle.compile(['text']) }} {{ getSelectClass() }} normal-case\"\n style=\"min-height: 2.5rem;\">\n <ng-select class=\"custom\" [(ngModel)]='nativeValue' [name]='nativeName' [addTag]='allowCreate'\n [addTagText]=\"createText || ngtTranslateService.ngtSelectCreateText\" [bindLabel]=\"bindLabel\"\n [multiple]=\"multiple\" [hideSelected]=\"hideSelected\" [typeahead]=\"typeahead\"\n [notFoundText]=\"notFoundText || ngtTranslateService.ngtSelectNotFoundText\" [searchable]=\"searchable\"\n [searchFn]=\"itemSearchFn\" [disabled]='disabled() || isReadonly' [clearable]=\"clearable && hasSelectedValue()\"\n [closeOnSelect]=\"closeOnSelect\" [trackByFn]=\"trackBy\" [labelForId]=\"labelForId\"\n [typeToSearchText]=\"typeToSearchText || ngtTranslateService.ngtSelectTypeToSearchText\"\n [placeholder]=\"placeholder || ngtTranslateService.ngtSelectPlaceholder\" [dropdownPosition]=\"dropdownPosition\"\n [groupBy]=\"groupBy\" [clearAllText]=\"clearAllTooltip || ngtTranslateService.ngtSelectClearAllTooltip\"\n [clearSearchOnAdd]=\"clearSearchOnAdd\" [bindValue]=\"bindValue\" [virtualScroll]=\"virtualScroll\"\n [loadingText]=\"loadingText || ngtTranslateService.ngtSelectLoadingText\" [maxSelectedItems]=\"maxSelectedItems\"\n [tabIndex]=\"tabIndex\" [items]=\"ngSelectItems | async\" [groupValue]=\"groupValue\" [loading]=\"loading\"\n [compareWith]='compareWith' [inputAttrs]=\"inputAttrs\" (scroll)=\"onScroll($event)\" (close)=\"onClose.emit()\"\n (change)=\"onNativeChange($event)\" (clear)='onClearSelect()' (remove)='onRemoveSelectedItem($event)'\n (open)=\"onOpen()\" (click)=\"wasClicked = true\">\n\n <ng-template *ngIf='ngtSelectHeaderTemplate' ng-header-tmp>\n <ng-template [ngTemplateOutlet]=\"ngtSelectHeaderTemplate\">\n </ng-template>\n </ng-template>\n\n <ng-template ng-label-tmp let-item=\"item\">\n <div class=\"flex w-full items-center pr-1\">\n <ng-container *ngIf=\"multiple && !cantRemoveItem(item)\">\n <div class=\"ng-value-icon px-1 h-full border-r mr-2 {{ ngtStyle.compile(['color.text', 'text']) }} cursor-pointer\"\n (click)='removeItem($event, item)'>\n <svg class=\"ng-value-icon fill-current self-center\" xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\">\n <path\n d=\"M19.1 17.2l-5.3-5.3 5.3-5.3-1.8-1.8-5.3 5.4-5.3-5.3-1.8 1.7 5.3 5.3-5.3 5.3L6.7 19l5.3-5.3 5.3 5.3 1.8-1.8z\" />\n </svg>\n </div>\n </ng-container>\n\n <ng-template *ngIf='ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionSelectedTemplate\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n\n <ng-template *ngIf='!ngtOptionSelectedTemplate' [ngTemplateOutlet]=\"ngtOptionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item }\">\n </ng-template>\n </div>\n </ng-template>\n\n <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <ng-template [ngTemplateOutlet]=\"ngtOptionTemplate\"\n [ngTemplateOutletContext]=\"{ item: item, index: index, searchTerm: search }\">\n </ng-template>\n </ng-template>\n </ng-select>\n</div>\n\n<ng-container *ngIf='shining'>\n <div class=\"flex\">\n <ngt-shining class=\"{{ ngtStyle.compile(['h']) }} w-full\"></ngt-shining>\n </div>\n</ng-container>\n\n<ngt-validation [control]=\"formControl\" [container]=\"formContainer\"></ngt-validation>\n\n<input *ngIf='componentReady' type='hidden' [ngModel]=\"value\" [name]=\"name\" [value]=\"value\">", styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px #00000013,0 0 0 3px #007eff1a}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;background-color:#ebf5ff;border-radius:2px;margin-right:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px #0000000f;left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}.ng-select,.ng-select.custom .ng-select-container{height:100%;margin-top:-1px;margin-bottom:-1px}.ng-select-container{color:inherit!important;min-height:2.5rem!important}.select-border-disabled .ng-select-container{border:solid #cbd5e0 1px!important;background-color:#fafafa!important;border-radius:.25rem;padding:1px}.select-border-error .ng-select-container{border:solid #c53030 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.select-border-normal .ng-select-container{border:solid #cbd5e0 1px!important;background-color:unset!important;border-radius:.25rem;padding:1px}.ng-value{max-width:100%}.ng-select-dropdown-panel-auto .ng-dropdown-panel .ng-dropdown-panel-items{min-height:unset}.ng-select-dropdown-panel-xs .ng-dropdown-panel .ng-dropdown-panel-items{min-height:80px!important}.ng-select-dropdown-panel-sm .ng-dropdown-panel .ng-dropdown-panel-items{min-height:100px!important}.ng-select-dropdown-panel-md .ng-dropdown-panel .ng-dropdown-panel-items{min-height:120px!important}.ng-select-dropdown-panel-lg .ng-dropdown-panel .ng-dropdown-panel-items{min-height:140px!important}.ng-select-dropdown-panel-xl .ng-dropdown-panel .ng-dropdown-panel-items{min-height:160px!important}.ng-dropdown-panel .ng-dropdown-header{padding:0!important}\n"] }]
|
|
3493
3516
|
}], ctorParameters: function () { return [{ type: NgtStylizableDirective, decorators: [{
|
|
3494
3517
|
type: Optional
|
|
3495
3518
|
}, {
|
|
@@ -4147,6 +4170,22 @@ class NgtDatatableComponent {
|
|
|
4147
4170
|
}
|
|
4148
4171
|
});
|
|
4149
4172
|
}
|
|
4173
|
+
getTagFilterValue(filter) {
|
|
4174
|
+
const filtersTag = this.getFiltersTagArray(filter);
|
|
4175
|
+
return filtersTag.length > 1
|
|
4176
|
+
? filtersTag[0] + " +"
|
|
4177
|
+
: filtersTag[0];
|
|
4178
|
+
}
|
|
4179
|
+
getTitle(filter) {
|
|
4180
|
+
const filtersTag = this.getFiltersTagArray(filter);
|
|
4181
|
+
return filtersTag.length > 1
|
|
4182
|
+
? filtersTag.slice(1).join(",")
|
|
4183
|
+
: '';
|
|
4184
|
+
}
|
|
4185
|
+
getFiltersTagArray(filter) {
|
|
4186
|
+
const tag = filter?.value?.tagValue ? filter.value.tagValue : filter.value;
|
|
4187
|
+
return tag.split(",");
|
|
4188
|
+
}
|
|
4150
4189
|
loadData(page) {
|
|
4151
4190
|
return new Promise((resolve, reject) => {
|
|
4152
4191
|
const pagination = { ...this.ngtPagination.getPagination(), ...{ page: page } };
|
|
@@ -4249,7 +4288,12 @@ class NgtDatatableComponent {
|
|
|
4249
4288
|
}
|
|
4250
4289
|
this.onSelectedElementsChange.emit(this.selectedElements);
|
|
4251
4290
|
}));
|
|
4252
|
-
this.subscriptions.push(this.onSelectAllRegisters.subscribe(() =>
|
|
4291
|
+
this.subscriptions.push(this.onSelectAllRegisters.subscribe(() => {
|
|
4292
|
+
this.hasSelectedAllElements = !this.hasSelectedAllElements;
|
|
4293
|
+
if (!this.hasSelectedAllElements) {
|
|
4294
|
+
this.selectedElements = [];
|
|
4295
|
+
}
|
|
4296
|
+
}));
|
|
4253
4297
|
}
|
|
4254
4298
|
canApplyFilters(filters) {
|
|
4255
4299
|
if (!this.searching) {
|
|
@@ -4272,10 +4316,10 @@ class NgtDatatableComponent {
|
|
|
4272
4316
|
}
|
|
4273
4317
|
}
|
|
4274
4318
|
NgtDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, deps: [{ token: i0.Injector }, { token: NgtHttpService }, { token: i0.ChangeDetectorRef }, { token: NgtTranslateService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4275
|
-
NgtDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDatatableComponent, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription", canSelectAllRegisters: "canSelectAllRegisters" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onSelectAllRegisters: "onSelectAllRegisters", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable>\n {{ filter.translation + ': ' + (filter
|
|
4319
|
+
NgtDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NgtDatatableComponent, selector: "ngt-datatable", inputs: { remoteResource: "remoteResource", type: "type", filterTagBgColor: "filterTagBgColor", filterTagMargin: "filterTagMargin", paginationMargin: "paginationMargin", inputSearch: "inputSearch", searchDelay: "searchDelay", searchTermMinLength: "searchTermMinLength", searchTermOnEnter: "searchTermOnEnter", defaultFilters: "defaultFilters", filtersDescription: "filtersDescription", canSelectAllRegisters: "canSelectAllRegisters" }, outputs: { onDataChange: "onDataChange", onClearFilter: "onClearFilter", onClearSelectedElements: "onClearSelectedElements", onSelectedElementsChange: "onSelectedElementsChange", onToogleAllCheckboxes: "onToogleAllCheckboxes", onToogleCheckbox: "onToogleCheckbox", onSelectAllRegisters: "onSelectAllRegisters", onOpenSearchModal: "onOpenSearchModal", onSearch: "onSearch" }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "ngtPagination", first: true, predicate: ["ngtPagination"], descendants: true, static: true }, { propertyName: "searchModal", first: true, predicate: ["searchModal"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n [title]=\"getTitle(filter)\">\n {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n </ngt-tag>\n </ng-container>\n </ng-container>\n </div>\n\n <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n <ng-content></ng-content>\n </table>\n\n <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n {{ ngtTranslateService.ngtDatatableNoDataFound }}\n </p>\n\n <div *ngIf=\"loading\">\n <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n <ng-container *ngIf=\"columnCount.length >= 2\">\n <ng-container *ngFor=\"let j of columnCount; let last = last\">\n <ng-container *ngIf=\"last\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n\n <ng-container *ngIf=\"!last\">\n <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"columnCount.length < 2\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n </div>\n </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n #ngtPagination>\n </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]='true' [isDisabled]=\"false\" #searchModal>\n <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgtShiningComponent, selector: "ngt-shining", inputs: ["shiningWidth"] }, { kind: "component", type: NgtPaginationComponent, selector: "ngt-pagination", inputs: ["pagesInterval"], outputs: ["onPageChange", "onPerPageChange"] }, { kind: "component", type: NgtModalComponent, selector: "ngt-modal", inputs: ["customLayout", "disableDefaultCloses", "isDisabled", "ngtStyle"], outputs: ["onCloseModal", "onOpenModal"] }, { kind: "component", type: NgtTagComponent, selector: "ngt-tag", inputs: ["icon"] }, { kind: "directive", type: NgtStylizableDirective, selector: "[ngt-stylizable]", inputs: ["color", "color.text", "color.bg", "color.border", "h", "w", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "border", "shadow", "rounded", "font", "text", "breakWords", "overflow", "position", "justifyContent", "cursor", "fontCase"] }] });
|
|
4276
4320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NgtDatatableComponent, decorators: [{
|
|
4277
4321
|
type: Component,
|
|
4278
|
-
args: [{ selector: 'ngt-datatable', template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable>\n {{ filter.translation + ': ' + (filter
|
|
4322
|
+
args: [{ selector: 'ngt-datatable', template: "<div class=\"w-full\">\n <div class=\"flex flex-wrap w-full\">\n <ngt-tag *ngIf=\"hasAppliedFilters()\" class=\"w-full sm:w-auto {{ filterTagMargin }}\"\n [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\" color.bg=\"bg-red-500\" (click)=\"removeFilter()\" ngt-stylizable>\n Limpar Filtros\n </ngt-tag>\n\n <ng-container *ngIf=\"hasAppliedFilters()\">\n <ng-container *ngFor=\"let filter of filtersTranslated\">\n <ngt-tag class=\"w-full sm:w-auto {{ filterTagMargin }}\" [class.sm:mr-4]=\"filterTagMargin == 'mb-4'\"\n [color.bg]=\"filterTagBgColor\" (click)=\"removeFilter(filter.reference)\" ngt-stylizable\n [title]=\"getTitle(filter)\">\n {{ filter.translation + ': ' + getTagFilterValue(filter) }}\n </ngt-tag>\n </ng-container>\n </ng-container>\n </div>\n\n <table style=\"display: table;\" class=\"text-left w-full border-collapse table-responsive\" #table>\n <ng-content></ng-content>\n </table>\n\n <p *ngIf=\"emptyStateVisible\" class=\"mt-8 mx-auto self-center text-center text-xl\">\n {{ ngtTranslateService.ngtDatatableNoDataFound }}\n </p>\n\n <div *ngIf=\"loading\">\n <div *ngFor=\"let i of [1, 2, 3, 4]\" class=\"flex w-full mt-3\">\n <ng-container *ngIf=\"columnCount.length >= 2\">\n <ng-container *ngFor=\"let j of columnCount; let last = last\">\n <ng-container *ngIf=\"last\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n\n <ng-container *ngIf=\"!last\">\n <ngt-shining class=\"h-10 w-full mr-10\"></ngt-shining>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"columnCount.length < 2\">\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full mr-10 ml-10\"></ngt-shining>\n <ngt-shining class=\"h-10 w-full\"></ngt-shining>\n </ng-container>\n </div>\n </div>\n</div>\n\n<div class=\"clearfix {{ paginationMargin }}\" [hidden]='!data || data.length == 0'>\n <ngt-pagination [pagesInterval]='4' (onPageChange)='apply($event, false)' (onPerPageChange)='apply(1, false)'\n #ngtPagination>\n </ngt-pagination>\n</div>\n\n<ngt-modal [customLayout]='true' [isDisabled]=\"false\" #searchModal>\n <ng-container *ngTemplateOutlet=\"searchModalTemplate\"></ng-container>\n</ngt-modal>", styles: ["@media (max-width: 767px){.table-responsive{display:block;position:relative;width:100%}.table-responsive thead,.table-responsive tbody,.table-responsive th,.table-responsive td,.table-responsive tr{display:block}.table-responsive td,.table-responsive th{height:50px}.table-responsive thead{float:left;margin-bottom:15px}.table-responsive tbody{width:auto;position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}.table-responsive tbody tr{display:inline-block;min-width:100%}}\n"] }]
|
|
4279
4323
|
}], ctorParameters: function () { return [{ type: i0.Injector }, { type: NgtHttpService }, { type: i0.ChangeDetectorRef }, { type: NgtTranslateService, decorators: [{
|
|
4280
4324
|
type: Optional
|
|
4281
4325
|
}] }]; }, propDecorators: { table: [{
|
|
@@ -4616,8 +4660,10 @@ class NgtThCheckComponent {
|
|
|
4616
4660
|
if (this.ngtDataTable) {
|
|
4617
4661
|
this.ngtDataTable.onToogleAllCheckboxes.emit(checked);
|
|
4618
4662
|
this.hasSelectedAllCheckboxes = checked;
|
|
4663
|
+
this.checked = checked;
|
|
4619
4664
|
if (!checked && this.hasSelectedAllElements()) {
|
|
4620
|
-
this.
|
|
4665
|
+
this.hasSelectedAllCheckboxes = true;
|
|
4666
|
+
this.checked = true;
|
|
4621
4667
|
}
|
|
4622
4668
|
}
|
|
4623
4669
|
}
|