@apipass/inputs 0.2.7 → 0.2.8-alpha.0

package/fesm2015/apipass-inputs.js

@@ -2069,6 +2069,242 @@ DebouceInputDirective.ɵdir = ɵɵdefineDirective({ type: DebouceInputDirective,
             type: Output
         }] }); })();
 
+const _c0$6 = ["trigger"];
+const _c1$4 = ["input"];
+function SelectInterpolationComponent_ng_template_9_li_4_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "li", 15);
+    ɵɵlistener("click", function SelectInterpolationComponent_ng_template_9_li_4_Template_li_click_0_listener() { ɵɵrestoreView(_r7); const i_r5 = ctx.$implicit; const ctx_r6 = ɵɵnextContext(2); return ctx_r6.selectItem(i_r5); })("mousedown", function SelectInterpolationComponent_ng_template_9_li_4_Template_li_mousedown_0_listener() { ɵɵrestoreView(_r7); const i_r5 = ctx.$implicit; const ctx_r8 = ɵɵnextContext(2); return ctx_r8.selectItem(i_r5); });
+    ɵɵtext(1);
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const i_r5 = ctx.$implicit;
+    ɵɵadvance(1);
+    ɵɵtextInterpolate1(" ", i_r5.text, " ");
+} }
+function SelectInterpolationComponent_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "ul", 10);
+    ɵɵelementStart(1, "li", 11);
+    ɵɵelementStart(2, "mat-form-field", 12);
+    ɵɵelementStart(3, "input", 13);
+    ɵɵlistener("ngModelChange", function SelectInterpolationComponent_ng_template_9_Template_input_ngModelChange_3_listener($event) { ɵɵrestoreView(_r10); const ctx_r9 = ɵɵnextContext(); return ctx_r9.searchText = $event; })("blur", function SelectInterpolationComponent_ng_template_9_Template_input_blur_3_listener($event) { ɵɵrestoreView(_r10); const ctx_r11 = ɵɵnextContext(); return ctx_r11.onBlur($event); });
+    ɵɵelementEnd();
+    ɵɵelementEnd();
+    ɵɵelementEnd();
+    ɵɵtemplate(4, SelectInterpolationComponent_ng_template_9_li_4_Template, 2, 1, "li", 14);
+    ɵɵpipe(5, "selectFilter");
+    ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r3 = ɵɵnextContext();
+    ɵɵadvance(3);
+    ɵɵproperty("placeholder", ctx_r3.findPlaceHolder)("ngModel", ctx_r3.searchText);
+    ɵɵadvance(1);
+    ɵɵproperty("ngForOf", ɵɵpipeBind3(5, 3, ctx_r3.items, ctx_r3.searchText, "text"));
+} }
+const _c2$2 = function (a0) { return { "select-open": a0 }; };
+const _c3$2 = function () { return { standalone: true }; };
+const _c4$1 = function (a0, a1) { return { "fa-caret-down": a0, "fa-caret-up": a1 }; };
+class SelectInterpolationComponent {
+    constructor(sso) {
+        this.sso = sso;
+        this.edited = false;
+        this.selectedItemLabel = '';
+        this.searchText = '';
+        this.opened = false;
+        this.disabled = false;
+        this.items = [];
+        this.placeHolder = 'Select';
+        this.findPlaceHolder = 'Find item';
+        this.onSelect = new EventEmitter();
+        this.tabindex = '0';
+        this.onTouchedCallback = () => {
+        };
+        this.onChangeCallback = () => {
+        };
+        this.scrollStrategy = this.sso.block();
+    }
+    onBlur(target) {
+        if (this.selectedItemLabel) {
+            if (this.edited) {
+                this.writeValue(this.selectedItemLabel);
+                this.selectedItem = new CustomSelectItem(this.selectedItemLabel, this.selectedItemLabel);
+                this.onSelect.next(this.selectedItem);
+            }
+        }
+        else {
+            this.writeValue(undefined);
+            this.onSelect.next(undefined);
+        }
+        if (target && target.relatedTarget && target.relatedTarget.classList.contains('search-input-item')) {
+            return;
+        }
+        this.setTriggerRect();
+        this.opened = false;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.setInitialState();
+            this.setTriggerRect();
+        }, 300);
+    }
+    setInitialState() {
+        setTimeout(() => {
+            if (this.value && this.items) {
+                const selectedItem = this.items.find(item => item.id === this.value);
+                this.selectedItemLabel = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.text) || this.value;
+            }
+        });
+    }
+    setTriggerRect() {
+        setTimeout(() => {
+            var _a;
+            this._triggerRect = (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.nativeElement.getBoundingClientRect();
+        });
+    }
+    selectItem(item) {
+        this.opened = false;
+        this.edited = false;
+        this.selectedItem = item;
+        this.value = item.id;
+        this.selectedItemLabel = item.text;
+        this.searchText = '';
+        this.onSelect.next(item);
+    }
+    keyPress() {
+        this.setTriggerRect();
+        this.opened = false;
+        this.edited = true;
+        this.searchText = '';
+    }
+    clicked() {
+        this.setTriggerRect();
+        this.opened = true;
+        this.searchText = '';
+    }
+    get value() {
+        return this.innerValue;
+    }
+    set value(value) {
+        this.innerValue = value;
+        this.onChangeCallback(value);
+    }
+    writeValue(value) {
+        if (value !== this.value) {
+            this.value = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    arrowClick(event) {
+        var _a;
+        event.stopPropagation();
+        this.setTriggerRect();
+        if (this.opened) {
+            this.opened = false;
+        }
+        else {
+            this.opened = true;
+            this.searchText = '';
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+        }
+    }
+    onDrop($event) {
+        this.searchText = '';
+        if (!this.value) {
+            this.value = '';
+        }
+        this.edited = true;
+        this.value += `{{${$event.data}}}`;
+        this.selectedItemLabel = this.value;
+        this.onBlur(undefined);
+    }
+}
+SelectInterpolationComponent.ɵfac = function SelectInterpolationComponent_Factory(t) { return new (t || SelectInterpolationComponent)(ɵɵdirectiveInject(ScrollStrategyOptions)); };
+SelectInterpolationComponent.ɵcmp = ɵɵdefineComponent({ type: SelectInterpolationComponent, selectors: [["select-interpolation"]], viewQuery: function SelectInterpolationComponent_Query(rf, ctx) { if (rf & 1) {
+        ɵɵviewQuery(_c0$6, true);
+        ɵɵviewQuery(_c1$4, true, ElementRef);
+    } if (rf & 2) {
+        var _t;
+        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.trigger = _t.first);
+        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.input = _t.first);
+    } }, hostVars: 1, hostBindings: function SelectInterpolationComponent_HostBindings(rf, ctx) { if (rf & 1) {
+        ɵɵlistener("blur", function SelectInterpolationComponent_blur_HostBindingHandler($event) { return ctx.onBlur($event.target); });
+    } if (rf & 2) {
+        ɵɵattribute("tabindex", ctx.tabindex);
+    } }, inputs: { disabled: "disabled", items: "items", placeHolder: "placeHolder", findPlaceHolder: "findPlaceHolder" }, outputs: { onSelect: "onSelect" }, features: [ɵɵProvidersFeature([{
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SelectInterpolationComponent),
+                multi: true
+            }])], decls: 10, vars: 17, consts: [[1, "custom-select-input"], ["trigger", ""], ["cdkOverlayOrigin", "", "appearance", "fill", "autocomplete", "off", 1, "custom-select-component", 3, "ngClass"], ["origin", "cdkOverlayOrigin"], ["matInput", "", "dndDropzone", "", "autocomplete", "off", 3, "placeholder", "ngModel", "ngModelOptions", "disabled", "focus", "blur", "ngModelChange", "keyup", "click", "dndDrop"], ["input", ""], [1, "open-icon", 3, "click"], [1, "fas", 3, "ngClass"], [1, "custom-select-component"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayMinWidth"], [1, "ul-ac"], [1, "li-search", "search-input-item"], ["appearance", "fill", 1, "apipass-input-text", "search-input-item"], ["matInput", "", "aria-autocomplete", "none", "autocomplete", "off", 1, "search-input-item", 3, "placeholder", "ngModel", "ngModelChange", "blur"], ["class", "clickable", 3, "click", "mousedown", 4, "ngFor", "ngForOf"], [1, "clickable", 3, "click", "mousedown"]], template: function SelectInterpolationComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "div", 0, 1);
+        ɵɵelementStart(2, "mat-form-field", 2, 3);
+        ɵɵelementStart(4, "input", 4, 5);
+        ɵɵlistener("focus", function SelectInterpolationComponent_Template_input_focus_4_listener() { return ctx.opened = true; })("blur", function SelectInterpolationComponent_Template_input_blur_4_listener($event) { return ctx.onBlur($event); })("ngModelChange", function SelectInterpolationComponent_Template_input_ngModelChange_4_listener($event) { return ctx.selectedItemLabel = $event; })("keyup", function SelectInterpolationComponent_Template_input_keyup_4_listener() { return ctx.keyPress(); })("click", function SelectInterpolationComponent_Template_input_click_4_listener() { return ctx.clicked(); })("dndDrop", function SelectInterpolationComponent_Template_input_dndDrop_4_listener($event) { return ctx.onDrop($event); });
+        ɵɵelementEnd();
+        ɵɵelementStart(6, "span", 6);
+        ɵɵlistener("click", function SelectInterpolationComponent_Template_span_click_6_listener($event) { return ctx.arrowClick($event); });
+        ɵɵelement(7, "i", 7);
+        ɵɵelementEnd();
+        ɵɵelementEnd();
+        ɵɵelementEnd();
+        ɵɵelementStart(8, "div", 8);
+        ɵɵtemplate(9, SelectInterpolationComponent_ng_template_9_Template, 6, 7, "ng-template", 9);
+        ɵɵelementEnd();
+    } if (rf & 2) {
+        const _r1 = ɵɵreference(3);
+        ɵɵadvance(2);
+        ɵɵproperty("ngClass", ɵɵpureFunction1(11, _c2$2, ctx.opened));
+        ɵɵadvance(2);
+        ɵɵproperty("placeholder", ctx.placeHolder)("ngModel", ctx.selectedItemLabel)("ngModelOptions", ɵɵpureFunction0(13, _c3$2))("disabled", ctx.disabled);
+        ɵɵadvance(3);
+        ɵɵproperty("ngClass", ɵɵpureFunction2(14, _c4$1, !ctx.opened, ctx.opened));
+        ɵɵadvance(2);
+        ɵɵproperty("cdkConnectedOverlayPanelClass", "custom-select-overlay-panel")("cdkConnectedOverlayScrollStrategy", ctx.scrollStrategy)("cdkConnectedOverlayOrigin", _r1)("cdkConnectedOverlayOpen", ctx.opened)("cdkConnectedOverlayMinWidth", ctx._triggerRect == null ? null : ctx._triggerRect.width);
+    } }, directives: [MatFormField, CdkOverlayOrigin, NgClass, MatInput, DefaultValueAccessor, DndDropzoneDirective, NgControlStatus, NgModel, CdkConnectedOverlay, NgForOf], pipes: [SelectFilterPipe], styles: [".custom-select-component[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%],   .custom-select-overlay-panel{cursor:pointer}.custom-select-component[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%],   .custom-select-overlay-panel input{background:#fff!important;height:48px}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%],   .custom-select-overlay-panel .ul-ac{background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;margin-top:-1px;max-height:16rem;overflow:auto;padding:0;position:relative;width:100%}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%],   .custom-select-overlay-panel .ul-ac li{cursor:pointer;font-size:12px;overflow:hidden;padding:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover, .custom-select-input[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover,   .custom-select-overlay-panel .ul-ac li:hover{background:#bbbcbc}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%],   .custom-select-overlay-panel .ul-ac li .mat-form-field-flex{height:37px!important}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]   input[_ngcontent-%COMP%],   .custom-select-overlay-panel .ul-ac li .mat-form-field-flex input{height:auto}.custom-select-component[_ngcontent-%COMP%]   .selected[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .selected[_ngcontent-%COMP%],   .custom-select-overlay-panel .selected{background-color:#898a8a!important}.custom-select-component[_ngcontent-%COMP%]   .selected[_ngcontent-%COMP%]   .fa[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .selected[_ngcontent-%COMP%]   .fa[_ngcontent-%COMP%],   .custom-select-overlay-panel .selected .fa{color:#fff!important}.custom-select-component[_ngcontent-%COMP%]   .remove-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .remove-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%],   .custom-select-overlay-panel .remove-icon i{color:red;margin-right:10px}.custom-select-component[_ngcontent-%COMP%]   .open-icon[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .open-icon[_ngcontent-%COMP%],   .custom-select-overlay-panel .open-icon{cursor:pointer}.custom-select-component[_ngcontent-%COMP%]   .open-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .open-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%],   .custom-select-overlay-panel .open-icon i{color:rgba(0,0,0,.54)}.custom-select-component[_ngcontent-%COMP%]   .li-search[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .li-search[_ngcontent-%COMP%],   .custom-select-overlay-panel .li-search{border-bottom:1px solid #ccc!important;cursor:default!important}.custom-select-component[_ngcontent-%COMP%]   .li-search[_ngcontent-%COMP%]:hover, .custom-select-input[_ngcontent-%COMP%]   .li-search[_ngcontent-%COMP%]:hover,   .custom-select-overlay-panel .li-search:hover{background:#fff!important}.custom-select-component[_ngcontent-%COMP%]   .select-open[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%], .custom-select-input[_ngcontent-%COMP%]   .select-open[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%],   .custom-select-overlay-panel .select-open .mat-form-field-flex{border-radius:6px 6px 0 0!important}"] });
+/*@__PURE__*/ (function () { ɵsetClassMetadata(SelectInterpolationComponent, [{
+        type: Component,
+        args: [{
+                selector: 'select-interpolation',
+                templateUrl: 'select-interpolation.component.html',
+                styleUrls: ['select-interpolation.component.scss'],
+                providers: [{
+                        provide: NG_VALUE_ACCESSOR,
+                        useExisting: forwardRef(() => SelectInterpolationComponent),
+                        multi: true
+                    }]
+            }]
+    }], function () { return [{ type: ScrollStrategyOptions }]; }, { disabled: [{
+            type: Input
+        }], items: [{
+            type: Input
+        }], placeHolder: [{
+            type: Input
+        }], findPlaceHolder: [{
+            type: Input
+        }], onSelect: [{
+            type: Output
+        }], trigger: [{
+            type: ViewChild,
+            args: ['trigger']
+        }], input: [{
+            type: ViewChild,
+            args: ['input', { read: ElementRef }]
+        }], tabindex: [{
+            type: HostBinding,
+            args: ['attr.tabindex']
+        }], onBlur: [{
+            type: HostListener,
+            args: ['blur', ['$event.target']]
+        }] }); })();
+
 class InputsModule {
 }
 InputsModule.ɵmod = ɵɵdefineNgModule({ type: InputsModule });
@@ -2100,6 +2336,7 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
         InputAvatarComponent,
         InputFileComponent,
         CustomSelectComponent,
+        SelectInterpolationComponent,
         FieldComponent,
         AceEditorComponent,
         AceEditorDirective,
@@ -2126,6 +2363,7 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
         InputAvatarComponent,
         InputFileComponent,
         CustomSelectComponent,
+        SelectInterpolationComponent,
         FieldComponent,
         AceEditorComponent,
         AceEditorDirective,
@@ -2162,6 +2400,7 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
                     InputAvatarComponent,
                     InputFileComponent,
                     CustomSelectComponent,
+                    SelectInterpolationComponent,
                     FieldComponent,
                     AceEditorComponent,
                     AceEditorDirective,
@@ -2177,6 +2416,7 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
                     InputAvatarComponent,
                     InputFileComponent,
                     CustomSelectComponent,
+                    SelectInterpolationComponent,
                     FieldComponent,
                     AceEditorComponent,
                     AceEditorDirective,
@@ -2190,5 +2430,5 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
  * Generated bundle index. Do not edit.
  */
 
-export { AceEditorComponent, AceEditorDirective, CustomSelectComponent, CustomSelectItem, DebouceInputDirective, FieldComponent, InputAvatarComponent, InputBooleanComponent, InputFileComponent, InputNumberComponent, InputPasswordComponent, InputTextComponent, InputsModule, SelectBoxComponent, SelectEnumComponent };
+export { AceEditorComponent, AceEditorDirective, CustomSelectComponent, CustomSelectItem, DebouceInputDirective, FieldComponent, InputAvatarComponent, InputBooleanComponent, InputFileComponent, InputNumberComponent, InputPasswordComponent, InputTextComponent, InputsModule, SelectBoxComponent, SelectEnumComponent, SelectInterpolationComponent };
 //# sourceMappingURL=apipass-inputs.js.map