@c-standard/angular-devui-extension/fesm2020/c-standard-angular-devui-extension-select.mjs

an extensional components lib for devui

import * as i0 from '@angular/core';
import { forwardRef, EventEmitter, Component, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
import * as i2$1 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from 'ng-devui';
import { DropDownDirective, DropDownModule, SelectModule, FormModule } from 'ng-devui';
import * as i4 from '@c-standard/angular-devui-extension/template';
import { TemplateDirective, TemplateModule } from '@c-standard/angular-devui-extension/template';
import * as i1 from '@c-standard/angular-devui-extension/utils';
import { ObjToValuePipe } from '@c-standard/angular-devui-extension/utils';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';

const SELECT_BOX_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => SelectBoxComponent),
    multi: true,
};
class SelectBoxComponent {
    constructor(er) {
        this.er = er;
        this._dataSource = [];
        this.valueExpr = 'value';
        this.displayExpr = 'text';
        this.placeholder = '';
        this.multiple = false;
        this.allowClear = false;
        this.allowSearch = false;
        this.disabled = false;
        this.validateRules = [];
        this.selectedOptionChange = new EventEmitter();
        this.expandChange = new EventEmitter();
        this.initialized = new EventEmitter();
        this.onTouchedCallback = () => { };
        this.onChangeCallback = (_v) => { };
    }
    get dataSource() {
        return this._dataSource;
    }
    set dataSource(value) {
        this._dataSource = value;
        if (this.dataSource.length > 0) {
            this.writeDisplayText();
        }
    }
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
    registerOnTouched(fn) {
        this.onTouchedCallback = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    writeValue(value) {
        this.value = value;
        this.writeDisplayText();
    }
    onModeChange(value) {
        let val = value;
        if (this.valueExpr != undefined) {
            val = value[this.valueExpr];
        }
        this.onChangeCallback(val);
        this.selectedOptionChange.emit(value);
    }
    onExpandChange(e) {
        this.expandChange.emit(e);
    }
    ngOnInit() {
        this.initialized.emit({
            element: this.er,
            component: this,
        });
    }
    writeDisplayText() {
        if (this.valueExpr == undefined) {
            this.originalValue = this.value;
        }
        else {
            this.originalValue = this._dataSource.find((t) => t[this.valueExpr] == this.value);
        }
    }
}
SelectBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
SelectBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SelectBoxComponent, selector: "d-select-box", inputs: { dataSource: "dataSource", valueExpr: "valueExpr", displayExpr: "displayExpr", placeholder: "placeholder", multiple: "multiple", allowClear: "allowClear", allowSearch: "allowSearch", disabled: "disabled", validateRules: "validateRules" }, outputs: { selectedOptionChange: "selectedOptionChange", expandChange: "expandChange", initialized: "initialized" }, providers: [SELECT_BOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `
        <d-select
            [options]="dataSource"
            [filterKey]="displayExpr"
            [isSearch]="allowSearch"
            [appendToBody]="true"
            [multiple]="multiple"
            [allowClear]="allowClear"
            [disabled]="disabled"
            [placeholder]="placeholder"
            [ngModel]="originalValue"
            [dValidateRules]="validateRules"
            (ngModelChange)="onModeChange($event)"
            (toggleChange)="onExpandChange($event)"
        ></d-select>
    `, isInline: true, components: [{ type: i2.SelectComponent, selector: "d-select", inputs: ["options", "isSearch", "toggleOnFocus", "scrollHight", "highlightItemClass", "filterKey", "multiple", "isSelectAll", "readonly", "size", "appendToBody", "appendToBodyDirections", "width", "templateItemSize", "disabled", "placeholder", "searchPlaceholder", "searchFn", "valueParser", "formatter", "direction", "overview", "allowClear", "color", "enableLazyLoad", "virtualScroll", "inputItemTemplate", "extraConfig", "optionDisabledKey", "optionImmutableKey", "noResultItemTemplate", "keepMultipleOrder", "customViewTemplate", "customViewDirection", "autoFocus", "notAutoScroll", "loadingTemplateRef", "showAnimation"], outputs: ["valueChange", "toggleChange", "loadMore"], exportAs: ["select"] }], directives: [{ type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.DFormControlRuleDirective, selector: "[dValidateRules][formControlName],[dValidateRules][ngModel],[dValidateRules][formControl]", inputs: ["dValidateRules", "dValidatePopConfig"], outputs: ["dRulesStatusChange"], exportAs: ["dValidateRules"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectBoxComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'd-select-box',
                    template: `
        <d-select
            [options]="dataSource"
            [filterKey]="displayExpr"
            [isSearch]="allowSearch"
            [appendToBody]="true"
            [multiple]="multiple"
            [allowClear]="allowClear"
            [disabled]="disabled"
            [placeholder]="placeholder"
            [ngModel]="originalValue"
            [dValidateRules]="validateRules"
            (ngModelChange)="onModeChange($event)"
            (toggleChange)="onExpandChange($event)"
        ></d-select>
    `,
                    providers: [SELECT_BOX_CONTROL_VALUE_ACCESSOR],
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { dataSource: [{
                type: Input
            }], valueExpr: [{
                type: Input
            }], displayExpr: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], multiple: [{
                type: Input
            }], allowClear: [{
                type: Input
            }], allowSearch: [{
                type: Input
            }], disabled: [{
                type: Input
            }], validateRules: [{
                type: Input
            }], selectedOptionChange: [{
                type: Output
            }], expandChange: [{
                type: Output
            }], initialized: [{
                type: Output
            }] } });

const SELECT_BOX_PRO_CONTROL_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => SelectBoxProComponent),
    multi: true,
};
class SelectBoxProComponent {
    constructor(_ref, _obj2value) {
        this._ref = _ref;
        this._obj2value = _obj2value;
        this.disabled = false;
        this.contentTemplate = 'template';
        this.valueChange = new EventEmitter();
        this.initialized = new EventEmitter();
        this.expanded = new EventEmitter();
        this.collapsed = new EventEmitter();
        this.options = [];
        this.expand = false;
        this.displayValue = null;
        this.onTouchedCallback = () => { };
        this.onChangeCallback = (_v) => { };
    }
    get value() {
        return this._value;
    }
    set value(value) {
        this._value = value;
        if (this._value) {
            this.onChangeCallback(value);
            this.writeDisplayText();
        }
    }
    get dataSource() {
        return this._dataSource || [];
    }
    set dataSource(value) {
        this._dataSource = value;
        if (this.dataSource instanceof Array) {
            this.options = this.dataSource;
        }
    }
    ngOnInit() {
        this.initialized.emit({
            element: this._ref.nativeElement,
            component: this,
        });
    }
    registerOnChange(fn) {
        this.onChangeCallback = fn;
    }
    registerOnTouched(fn) {
        this.onTouchedCallback = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    writeValue(value) {
        this._value = value;
        this.writeDisplayText();
    }
    onDropDownBoxToggle(expanded) {
        if (expanded) {
            this.expand = true;
            this.expanded.emit();
        }
        else {
            this.expand = false;
            this.collapsed.emit();
        }
    }
    collapse() {
        if (this.dropDownBox?.isOpen) {
            this.expand = false;
            return this.dropDownBox.toggle();
        }
        return false;
    }
    get templates() {
        if (this.definitions != null) {
            const templates = {};
            for (const definition of this.definitions.toArray()) {
                templates[definition.template] = definition.templateRef;
            }
            return templates;
        }
        else {
            return {};
        }
    }
    writeDisplayText() {
        if (this.value instanceof Object && this.displayExpr != undefined) {
            this.displayValue = this.value[this.displayExpr];
        }
        else {
            this.displayValue = this.value;
        }
    }
}
SelectBoxProComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectBoxProComponent, deps: [{ token: i0.ElementRef }, { token: i1.ObjToValuePipe }], target: i0.ɵɵFactoryTarget.Component });
SelectBoxProComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: SelectBoxProComponent, selector: "d-select-box-pro", inputs: { value: "value", dataSource: "dataSource", disabled: "disabled", valueExpr: "valueExpr", displayExpr: "displayExpr", placeholder: "placeholder", contentTemplate: "contentTemplate" }, outputs: { valueChange: "valueChange", initialized: "initialized", expanded: "expanded", collapsed: "collapsed" }, providers: [ObjToValuePipe, SELECT_BOX_PRO_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "definitions", predicate: TemplateDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "dropDownBox", first: true, predicate: ["dropDownBox"], descendants: true, read: DropDownDirective }], ngImport: i0, template: "<div\r\n    dDropDown\r\n    #dropDownBox=\"d-dropdown\"\r\n    class=\"dropdown-box devui-input-group devui-dropdown-origin\"\r\n    [trigger]=\"'manually'\"\r\n    [closeScope]=\"'blank'\"\r\n    (toggleEvent)=\"onDropDownBoxToggle($event)\"\r\n>\r\n    <input\r\n        #input\r\n        dDropDownToggle\r\n        class=\"devui-form-control devui-select-input devui-input\"\r\n        autocomplete=\"off\"\r\n        readonly=\"readonly\"\r\n        [placeholder]=\"placeholder\"\r\n        (click)=\"dropDownBox.toggle()\"\r\n        [value]=\"displayValue\"\r\n    />\r\n    <div\r\n        class=\"devui-input-group-addon\"\r\n        (click)=\"dropDownBox.toggle()\"\r\n    >\r\n        <i\r\n            class=\"icon-chevron-down dropdown-icon\"\r\n            [ngClass]=\"{ 'expand':expand, 'collapse': !expand }\"\r\n        ></i>\r\n    </div>\r\n\r\n    <div\r\n        dDropDownMenu\r\n        class=\"devui-dropdown-menu\"\r\n    >\r\n        <ng-container\r\n            *ngIf=\"options.length > 0\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: {data:options, value:value} }\"\r\n            [ngTemplateOutlet]=\"templates[contentTemplate]\"\r\n        >\r\n            <!-- todo \u4F18\u5316\u9ED8\u8BA4\u9009\u9879\u7684\u5C55\u793A\u65B9\u5F0F -->\r\n            <div *xTemplate=\"let data of 'template'\">{{ options.length }}</div>\r\n        </ng-container>\r\n        <div *ngIf=\"options.length <= 0\" class=\"x-no-data-tip\">\u65E0\u6570\u636E</div>\r\n    </div>\r\n</div>\r\n", styles: [".dropdown-box{width:100%;display:flex;align-items:center}.dropdown-box .dropdown-icon{transition:all .3s}.dropdown-box .devui-dropdown-menu{width:100%}.x-no-data-tip{-webkit-user-select:none;user-select:none;cursor:not-allowed;padding:10px;color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5)}.expand{transform:rotate(180deg)}.collapse{transform:rotate(0)}\n"], directives: [{ type: i2.DropDownDirective, selector: "[dDropDown]", inputs: ["isOpen", "disabled", "showAnimation", "trigger", "closeScope", "closeOnMouseLeaveMenu"], outputs: ["toggleEvent"], exportAs: ["d-dropdown"] }, { type: i2.DropDownToggleDirective, selector: "[dDropDownToggle]", inputs: ["toggleOnFocus", "autoFocus"], exportAs: ["d-dropdown-toggle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.DropDownMenuDirective, selector: "[dDropDownMenu]", exportAs: ["d-dropdown-menu"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.TemplateDirective, selector: "[xTemplate][xTemplateOf]", inputs: ["xTemplateOf"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectBoxProComponent, decorators: [{
            type: Component,
            args: [{ selector: 'd-select-box-pro', providers: [ObjToValuePipe, SELECT_BOX_PRO_CONTROL_VALUE_ACCESSOR], template: "<div\r\n    dDropDown\r\n    #dropDownBox=\"d-dropdown\"\r\n    class=\"dropdown-box devui-input-group devui-dropdown-origin\"\r\n    [trigger]=\"'manually'\"\r\n    [closeScope]=\"'blank'\"\r\n    (toggleEvent)=\"onDropDownBoxToggle($event)\"\r\n>\r\n    <input\r\n        #input\r\n        dDropDownToggle\r\n        class=\"devui-form-control devui-select-input devui-input\"\r\n        autocomplete=\"off\"\r\n        readonly=\"readonly\"\r\n        [placeholder]=\"placeholder\"\r\n        (click)=\"dropDownBox.toggle()\"\r\n        [value]=\"displayValue\"\r\n    />\r\n    <div\r\n        class=\"devui-input-group-addon\"\r\n        (click)=\"dropDownBox.toggle()\"\r\n    >\r\n        <i\r\n            class=\"icon-chevron-down dropdown-icon\"\r\n            [ngClass]=\"{ 'expand':expand, 'collapse': !expand }\"\r\n        ></i>\r\n    </div>\r\n\r\n    <div\r\n        dDropDownMenu\r\n        class=\"devui-dropdown-menu\"\r\n    >\r\n        <ng-container\r\n            *ngIf=\"options.length > 0\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: {data:options, value:value} }\"\r\n            [ngTemplateOutlet]=\"templates[contentTemplate]\"\r\n        >\r\n            <!-- todo \u4F18\u5316\u9ED8\u8BA4\u9009\u9879\u7684\u5C55\u793A\u65B9\u5F0F -->\r\n            <div *xTemplate=\"let data of 'template'\">{{ options.length }}</div>\r\n        </ng-container>\r\n        <div *ngIf=\"options.length <= 0\" class=\"x-no-data-tip\">\u65E0\u6570\u636E</div>\r\n    </div>\r\n</div>\r\n", styles: [".dropdown-box{width:100%;display:flex;align-items:center}.dropdown-box .dropdown-icon{transition:all .3s}.dropdown-box .devui-dropdown-menu{width:100%}.x-no-data-tip{-webkit-user-select:none;user-select:none;cursor:not-allowed;padding:10px;color:var(--devui-disabled-text, #cfd0d3);background-color:var(--devui-disabled-bg, #f5f5f5)}.expand{transform:rotate(180deg)}.collapse{transform:rotate(0)}\n"] }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ObjToValuePipe }]; }, propDecorators: { value: [{
                type: Input
            }], dataSource: [{
                type: Input
            }], disabled: [{
                type: Input
            }], valueExpr: [{
                type: Input
            }], displayExpr: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], contentTemplate: [{
                type: Input
            }], valueChange: [{
                type: Output
            }], initialized: [{
                type: Output
            }], expanded: [{
                type: Output
            }], collapsed: [{
                type: Output
            }], input: [{
                type: ViewChild,
                args: ['input']
            }], dropDownBox: [{
                type: ViewChild,
                args: ['dropDownBox', { read: DropDownDirective }]
            }], definitions: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }] } });

class SelectPlusModule {
}
SelectPlusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectPlusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
SelectPlusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectPlusModule, declarations: [SelectBoxComponent, SelectBoxProComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule, TemplateModule, DropDownModule, SelectModule, FormModule], exports: [SelectBoxComponent, SelectBoxProComponent] });
SelectPlusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectPlusModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule, TemplateModule, DropDownModule, SelectModule, FormModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SelectPlusModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [SelectBoxComponent, SelectBoxProComponent],
                    imports: [CommonModule, FormsModule, ReactiveFormsModule, TemplateModule, DropDownModule, SelectModule, FormModule],
                    exports: [SelectBoxComponent, SelectBoxProComponent],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { SelectBoxComponent, SelectBoxProComponent, SelectPlusModule };
//# sourceMappingURL=c-standard-angular-devui-extension-select.mjs.map