@abp/ng.feature-management 5.0.0 → 5.1.2

package/fesm2015/abp-ng.feature-management.mjs

@@ -0,0 +1,211 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, HostBinding, EventEmitter, Component, Output, NgModule } from '@angular/core';
+import { finalize } from 'rxjs/operators';
+import * as i1 from '@abp/ng.core';
+import { CoreModule } from '@abp/ng.core';
+import * as i2 from '@abp/ng.feature-management/proxy';
+import * as i3 from '@abp/ng.theme.shared';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import * as i4 from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i5 from '@angular/common';
+import * as i6 from '@angular/forms';
+
+const INPUT_TYPES = {
+    numeric: 'number',
+    default: 'text',
+};
+class FreeTextInputDirective {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    set feature(val) {
+        this._feature = val;
+        this.setInputType();
+    }
+    get feature() {
+        return this._feature;
+    }
+    setInputType() {
+        var _a, _b, _c, _d;
+        const validatorType = (_c = (_b = (_a = this.feature) === null || _a === void 0 ? void 0 : _a.valueType) === null || _b === void 0 ? void 0 : _b.validator) === null || _c === void 0 ? void 0 : _c.name.toLowerCase();
+        this.type = (_d = INPUT_TYPES[validatorType]) !== null && _d !== void 0 ? _d : INPUT_TYPES.default;
+    }
+}
+FreeTextInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FreeTextInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FreeTextInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: FreeTextInputDirective, selector: "input[abpFeatureManagementFreeText]", inputs: { feature: ["abpFeatureManagementFreeText", "feature"] }, host: { properties: { "type": "this.type" } }, exportAs: ["inputAbpFeatureManagementFreeText"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FreeTextInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[abpFeatureManagementFreeText]',
+                    exportAs: 'inputAbpFeatureManagementFreeText',
+                }]
+        }], propDecorators: { feature: [{
+                type: Input,
+                args: ['abpFeatureManagementFreeText']
+            }], type: [{
+                type: HostBinding,
+                args: ['type']
+            }] } });
+
+var ValueTypes;
+(function (ValueTypes) {
+    ValueTypes["ToggleStringValueType"] = "ToggleStringValueType";
+    ValueTypes["FreeTextStringValueType"] = "FreeTextStringValueType";
+    ValueTypes["SelectionStringValueType"] = "SelectionStringValueType";
+})(ValueTypes || (ValueTypes = {}));
+class FeatureManagementComponent {
+    constructor(track, service, configState) {
+        this.track = track;
+        this.service = service;
+        this.configState = configState;
+        this.groups = [];
+        this.valueTypes = ValueTypes;
+        this.visibleChange = new EventEmitter();
+        this.modalBusy = false;
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        if (this._visible === value)
+            return;
+        this._visible = value;
+        this.visibleChange.emit(value);
+        if (value)
+            this.openModal();
+    }
+    openModal() {
+        if (!this.providerName) {
+            throw new Error('providerName is required.');
+        }
+        this.getFeatures();
+    }
+    getFeatures() {
+        this.service.get(this.providerName, this.providerKey).subscribe(res => {
+            var _a;
+            if (!((_a = res.groups) === null || _a === void 0 ? void 0 : _a.length))
+                return;
+            this.groups = res.groups.map(({ name, displayName }) => ({ name, displayName }));
+            this.selectedGroupDisplayName = this.groups[0].displayName;
+            this.features = res.groups.reduce((acc, val) => (Object.assign(Object.assign({}, acc), { [val.name]: mapFeatures(val.features, document.body.dir) })), {});
+        });
+    }
+    save() {
+        if (this.modalBusy)
+            return;
+        const changedFeatures = [];
+        Object.keys(this.features).forEach(key => {
+            this.features[key].forEach(feature => {
+                if (feature.value !== feature.initialValue)
+                    changedFeatures.push({ name: feature.name, value: `${feature.value}` });
+            });
+        });
+        if (!changedFeatures.length) {
+            this.visible = false;
+            return;
+        }
+        this.modalBusy = true;
+        this.service
+            .update(this.providerName, this.providerKey, { features: changedFeatures })
+            .pipe(finalize(() => (this.modalBusy = false)))
+            .subscribe(() => {
+            this.visible = false;
+            if (!this.providerKey) {
+                // to refresh host's features
+                this.configState.refreshAppState().subscribe();
+            }
+        });
+    }
+    onCheckboxClick(val, feature) {
+        if (val) {
+            this.checkToggleAncestors(feature);
+        }
+        else {
+            this.uncheckToggleDescendants(feature);
+        }
+    }
+    uncheckToggleDescendants(feature) {
+        this.findAllDescendantsOfByType(feature, ValueTypes.ToggleStringValueType).forEach(node => this.setFeatureValue(node, false));
+    }
+    checkToggleAncestors(feature) {
+        this.findAllAncestorsOfByType(feature, ValueTypes.ToggleStringValueType).forEach(node => this.setFeatureValue(node, true));
+    }
+    findAllAncestorsOfByType(feature, type) {
+        let parent = this.findParentByType(feature, type);
+        const ancestors = [];
+        while (parent) {
+            ancestors.push(parent);
+            parent = this.findParentByType(parent, type);
+        }
+        return ancestors;
+    }
+    findAllDescendantsOfByType(feature, type) {
+        const descendants = [];
+        const queue = [feature];
+        while (queue.length) {
+            const node = queue.pop();
+            const newDescendants = this.findChildrenByType(node, type);
+            descendants.push(...newDescendants);
+            queue.push(...newDescendants);
+        }
+        return descendants;
+    }
+    findParentByType(feature, type) {
+        return this.getCurrentGroup().find(f => f.valueType.name === type && f.name === feature.parentName);
+    }
+    findChildrenByType(feature, type) {
+        return this.getCurrentGroup().filter(f => f.valueType.name === type && f.parentName === feature.name);
+    }
+    getCurrentGroup() {
+        var _a;
+        return (_a = this.features[this.selectedGroupDisplayName]) !== null && _a !== void 0 ? _a : [];
+    }
+    setFeatureValue(feature, val) {
+        feature.value = val;
+    }
+}
+FeatureManagementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementComponent, deps: [{ token: i1.TrackByService }, { token: i2.FeaturesService }, { token: i1.ConfigStateService }], target: i0.ɵɵFactoryTarget.Component });
+FeatureManagementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FeatureManagementComponent, selector: "abp-feature-management", inputs: { providerKey: "providerKey", providerName: "providerName", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, exportAs: ["abpFeatureManagement"], ngImport: i0, template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-4\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          [(activeId)]=\"selectedGroupDisplayName\"\r\n          class=\"nav-pills\"\r\n          orientation=\"vertical\"\r\n        >\r\n          <li\r\n            *ngFor=\"let group of groups; trackBy: track.by('name')\"\r\n            [ngbNavItem]=\"group.displayName\"\r\n          >\r\n            <a ngbNavLink>{{ group.displayName }}</a>\r\n            <ng-template ngbNavContent>\r\n              <h4>{{ selectedGroupDisplayName }}</h4>\r\n              <hr class=\"mt-2 mb-3\" />\r\n\r\n              <div\r\n                class=\"mt-2\"\r\n                *ngFor=\"let feature of features[group.name]; let i = index; trackBy: track.by('id')\"\r\n                [ngStyle]=\"feature.style\"\r\n                [ngSwitch]=\"feature.valueType?.name\"\r\n                (keyup.enter)=\"save()\"\r\n              >\r\n                <ng-container *ngSwitchCase=\"valueTypes.ToggleStringValueType\">\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      (ngModelChange)=\"onCheckboxClick($event, feature)\"\r\n                    />\r\n\r\n                    <label class=\"form-check-label\" [htmlFor]=\"feature.name\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.FreeTextStringValueType\">\r\n                  <div class=\"mb-3 form-group\">\r\n                    <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <input\r\n                      class=\"form-control\"\r\n                      type=\"text\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      [abpFeatureManagementFreeText]=\"feature\"\r\n                    />\r\n\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.SelectionStringValueType\">\r\n                  <ng-container *ngIf=\"feature.valueType.itemSource?.items?.length\">\r\n                    <div class=\"mb-3 form-group\">\r\n                      <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                        feature.displayName\r\n                      }}</label>\r\n                      <select class=\"form-select\" [id]=\"feature.name\" [(ngModel)]=\"feature.value\">\r\n                        <option\r\n                          *ngFor=\"\r\n                            let item of feature.valueType.itemSource?.items;\r\n                            trackBy: track.by('value')\r\n                          \"\r\n                          [ngValue]=\"item.value\"\r\n                        >\r\n                          {{\r\n                            item.displayText?.resourceName + '::' + item.displayText?.name\r\n                              | abpLocalization\r\n                          }}\r\n                        </option>\r\n                      </select>\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                      ></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <ng-template #descTmp let-description>\r\n        <small *ngIf=\"description\" class=\"d-block form-text text-muted\">{{ description }}</small>\r\n      </ng-template>\r\n\r\n      <div class=\"col-md-8\"><div [ngbNavOutlet]=\"nav\"></div></div>\r\n\r\n      <div class=\"mx-3\" *ngIf=\"!groups.length\">\r\n        {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button abpClose type=\"button\" class=\"btn btn-secondary\">\r\n      {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-check\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'AbpFeatureManagement::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", components: [{ type: i3.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { type: i4.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { type: i3.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { type: i4.NgbNavLink, selector: "a[ngbNavLink]" }, { type: i4.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FreeTextInputDirective, selector: "input[abpFeatureManagementFreeText]", inputs: ["abpFeatureManagementFreeText"], exportAs: ["inputAbpFeatureManagementFreeText"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3.ModalCloseDirective, selector: "[abpClose]" }], pipes: { "abpLocalization": i1.LocalizationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-feature-management', exportAs: 'abpFeatureManagement', template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-4\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          [(activeId)]=\"selectedGroupDisplayName\"\r\n          class=\"nav-pills\"\r\n          orientation=\"vertical\"\r\n        >\r\n          <li\r\n            *ngFor=\"let group of groups; trackBy: track.by('name')\"\r\n            [ngbNavItem]=\"group.displayName\"\r\n          >\r\n            <a ngbNavLink>{{ group.displayName }}</a>\r\n            <ng-template ngbNavContent>\r\n              <h4>{{ selectedGroupDisplayName }}</h4>\r\n              <hr class=\"mt-2 mb-3\" />\r\n\r\n              <div\r\n                class=\"mt-2\"\r\n                *ngFor=\"let feature of features[group.name]; let i = index; trackBy: track.by('id')\"\r\n                [ngStyle]=\"feature.style\"\r\n                [ngSwitch]=\"feature.valueType?.name\"\r\n                (keyup.enter)=\"save()\"\r\n              >\r\n                <ng-container *ngSwitchCase=\"valueTypes.ToggleStringValueType\">\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      (ngModelChange)=\"onCheckboxClick($event, feature)\"\r\n                    />\r\n\r\n                    <label class=\"form-check-label\" [htmlFor]=\"feature.name\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.FreeTextStringValueType\">\r\n                  <div class=\"mb-3 form-group\">\r\n                    <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <input\r\n                      class=\"form-control\"\r\n                      type=\"text\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      [abpFeatureManagementFreeText]=\"feature\"\r\n                    />\r\n\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.SelectionStringValueType\">\r\n                  <ng-container *ngIf=\"feature.valueType.itemSource?.items?.length\">\r\n                    <div class=\"mb-3 form-group\">\r\n                      <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                        feature.displayName\r\n                      }}</label>\r\n                      <select class=\"form-select\" [id]=\"feature.name\" [(ngModel)]=\"feature.value\">\r\n                        <option\r\n                          *ngFor=\"\r\n                            let item of feature.valueType.itemSource?.items;\r\n                            trackBy: track.by('value')\r\n                          \"\r\n                          [ngValue]=\"item.value\"\r\n                        >\r\n                          {{\r\n                            item.displayText?.resourceName + '::' + item.displayText?.name\r\n                              | abpLocalization\r\n                          }}\r\n                        </option>\r\n                      </select>\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                      ></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <ng-template #descTmp let-description>\r\n        <small *ngIf=\"description\" class=\"d-block form-text text-muted\">{{ description }}</small>\r\n      </ng-template>\r\n\r\n      <div class=\"col-md-8\"><div [ngbNavOutlet]=\"nav\"></div></div>\r\n\r\n      <div class=\"mx-3\" *ngIf=\"!groups.length\">\r\n        {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button abpClose type=\"button\" class=\"btn btn-secondary\">\r\n      {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-check\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'AbpFeatureManagement::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.TrackByService }, { type: i2.FeaturesService }, { type: i1.ConfigStateService }]; }, propDecorators: { providerKey: [{
+                type: Input
+            }], providerName: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }] } });
+function mapFeatures(features, dir) {
+    const margin = `margin-${dir === 'rtl' ? 'right' : 'left'}.px`;
+    return features.map(feature => {
+        var _a;
+        const value = ((_a = feature.valueType) === null || _a === void 0 ? void 0 : _a.name) === ValueTypes.ToggleStringValueType
+            ? (feature.value || '').toLowerCase() === 'true'
+            : feature.value;
+        return Object.assign(Object.assign({}, feature), { value, initialValue: value, style: { [margin]: feature.depth * 20 } });
+    });
+}
+
+const exported = [FeatureManagementComponent, FreeTextInputDirective];
+class FeatureManagementModule {
+}
+FeatureManagementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeatureManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementModule, declarations: [FeatureManagementComponent, FreeTextInputDirective], imports: [CoreModule, ThemeSharedModule, NgbNavModule], exports: [FeatureManagementComponent, FreeTextInputDirective] });
+FeatureManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementModule, imports: [[CoreModule, ThemeSharedModule, NgbNavModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...exported],
+                    imports: [CoreModule, ThemeSharedModule, NgbNavModule],
+                    exports: [...exported],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FeatureManagementComponent, FeatureManagementModule, FreeTextInputDirective, INPUT_TYPES };
+//# sourceMappingURL=abp-ng.feature-management.mjs.map

package/fesm2015/abp-ng.feature-management.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"abp-ng.feature-management.mjs","sources":["../../../../packages/feature-management/src/lib/directives/free-text-input.directive.ts","../../../../packages/feature-management/src/lib/components/feature-management/feature-management.component.ts","../../../../packages/feature-management/src/lib/components/feature-management/feature-management.component.html","../../../../packages/feature-management/src/lib/feature-management.module.ts","../../../../packages/feature-management/src/abp-ng.feature-management.ts"],"sourcesContent":["import { Directive, HostBinding, Input } from '@angular/core';\r\n\r\n// TODO: improve this type\r\nexport interface FreeTextType {\r\n  valueType: {\r\n    validator: {\r\n      name: string;\r\n    };\r\n  };\r\n}\r\n\r\nexport const INPUT_TYPES = {\r\n  numeric: 'number',\r\n  default: 'text',\r\n};\r\n\r\n@Directive({\r\n  selector: 'input[abpFeatureManagementFreeText]',\r\n  exportAs: 'inputAbpFeatureManagementFreeText',\r\n})\r\nexport class FreeTextInputDirective {\r\n  _feature: FreeTextType;\r\n  // eslint-disable-next-line @angular-eslint/no-input-rename\r\n  @Input('abpFeatureManagementFreeText') set feature(val: FreeTextType) {\r\n    this._feature = val;\r\n    this.setInputType();\r\n  }\r\n\r\n  get feature() {\r\n    return this._feature;\r\n  }\r\n\r\n  @HostBinding('type') type: string;\r\n\r\n  private setInputType() {\r\n    const validatorType = this.feature?.valueType?.validator?.name.toLowerCase();\r\n    this.type = INPUT_TYPES[validatorType] ?? INPUT_TYPES.default;\r\n  }\r\n}\r\n","import { ConfigStateService, TrackByService } from '@abp/ng.core';\r\nimport {\r\n  FeatureDto,\r\n  FeatureGroupDto,\r\n  FeaturesService,\r\n  UpdateFeatureDto,\r\n} from '@abp/ng.feature-management/proxy';\r\nimport { LocaleDirection } from '@abp/ng.theme.shared';\r\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { finalize } from 'rxjs/operators';\r\nimport { FeatureManagement } from '../../models/feature-management';\r\n\r\nenum ValueTypes {\r\n  ToggleStringValueType = 'ToggleStringValueType',\r\n  FreeTextStringValueType = 'FreeTextStringValueType',\r\n  SelectionStringValueType = 'SelectionStringValueType',\r\n}\r\n\r\n@Component({\r\n  selector: 'abp-feature-management',\r\n  templateUrl: './feature-management.component.html',\r\n  exportAs: 'abpFeatureManagement',\r\n})\r\nexport class FeatureManagementComponent\r\n  implements\r\n    FeatureManagement.FeatureManagementComponentInputs,\r\n    FeatureManagement.FeatureManagementComponentOutputs\r\n{\r\n  @Input()\r\n  providerKey: string;\r\n\r\n  @Input()\r\n  providerName: string;\r\n\r\n  selectedGroupDisplayName: string;\r\n\r\n  groups: Pick<FeatureGroupDto, 'name' | 'displayName'>[] = [];\r\n\r\n  features: {\r\n    [group: string]: Array<FeatureDto & { style?: { [key: string]: number }; initialValue: any }>;\r\n  };\r\n\r\n  valueTypes = ValueTypes;\r\n\r\n  protected _visible;\r\n\r\n  @Input()\r\n  get visible(): boolean {\r\n    return this._visible;\r\n  }\r\n\r\n  set visible(value: boolean) {\r\n    if (this._visible === value) return;\r\n\r\n    this._visible = value;\r\n    this.visibleChange.emit(value);\r\n    if (value) this.openModal();\r\n  }\r\n\r\n  @Output() readonly visibleChange = new EventEmitter<boolean>();\r\n\r\n  modalBusy = false;\r\n\r\n  constructor(\r\n    public readonly track: TrackByService,\r\n    protected service: FeaturesService,\r\n    protected configState: ConfigStateService,\r\n  ) {}\r\n\r\n  openModal() {\r\n    if (!this.providerName) {\r\n      throw new Error('providerName is required.');\r\n    }\r\n\r\n    this.getFeatures();\r\n  }\r\n\r\n  getFeatures() {\r\n    this.service.get(this.providerName, this.providerKey).subscribe(res => {\r\n      if (!res.groups?.length) return;\r\n      this.groups = res.groups.map(({ name, displayName }) => ({ name, displayName }));\r\n      this.selectedGroupDisplayName = this.groups[0].displayName;\r\n      this.features = res.groups.reduce(\r\n        (acc, val) => ({\r\n          ...acc,\r\n          [val.name]: mapFeatures(val.features, document.body.dir as LocaleDirection),\r\n        }),\r\n        {},\r\n      );\r\n    });\r\n  }\r\n\r\n  save() {\r\n    if (this.modalBusy) return;\r\n\r\n    const changedFeatures = [] as UpdateFeatureDto[];\r\n\r\n    Object.keys(this.features).forEach(key => {\r\n      this.features[key].forEach(feature => {\r\n        if (feature.value !== feature.initialValue)\r\n          changedFeatures.push({ name: feature.name, value: `${feature.value}` });\r\n      });\r\n    });\r\n\r\n    if (!changedFeatures.length) {\r\n      this.visible = false;\r\n      return;\r\n    }\r\n\r\n    this.modalBusy = true;\r\n    this.service\r\n      .update(this.providerName, this.providerKey, { features: changedFeatures })\r\n      .pipe(finalize(() => (this.modalBusy = false)))\r\n      .subscribe(() => {\r\n        this.visible = false;\r\n\r\n        if (!this.providerKey) {\r\n          // to refresh host's features\r\n          this.configState.refreshAppState().subscribe();\r\n        }\r\n      });\r\n  }\r\n\r\n  onCheckboxClick(val: boolean, feature: FeatureDto) {\r\n    if (val) {\r\n      this.checkToggleAncestors(feature);\r\n    } else {\r\n      this.uncheckToggleDescendants(feature);\r\n    }\r\n  }\r\n\r\n  private uncheckToggleDescendants(feature: FeatureDto) {\r\n    this.findAllDescendantsOfByType(feature, ValueTypes.ToggleStringValueType).forEach(node =>\r\n      this.setFeatureValue(node, false),\r\n    );\r\n  }\r\n\r\n  private checkToggleAncestors(feature: FeatureDto) {\r\n    this.findAllAncestorsOfByType(feature, ValueTypes.ToggleStringValueType).forEach(node =>\r\n      this.setFeatureValue(node, true),\r\n    );\r\n  }\r\n\r\n  private findAllAncestorsOfByType(feature: FeatureDto, type: ValueTypes) {\r\n    let parent = this.findParentByType(feature, type);\r\n    const ancestors = [];\r\n    while (parent) {\r\n      ancestors.push(parent);\r\n      parent = this.findParentByType(parent, type);\r\n    }\r\n    return ancestors;\r\n  }\r\n\r\n  private findAllDescendantsOfByType(feature: FeatureDto, type: ValueTypes) {\r\n    const descendants = [];\r\n    const queue = [feature];\r\n\r\n    while (queue.length) {\r\n      const node = queue.pop();\r\n      const newDescendants = this.findChildrenByType(node, type);\r\n      descendants.push(...newDescendants);\r\n      queue.push(...newDescendants);\r\n    }\r\n\r\n    return descendants;\r\n  }\r\n\r\n  private findParentByType(feature: FeatureDto, type: ValueTypes) {\r\n    return this.getCurrentGroup().find(\r\n      f => f.valueType.name === type && f.name === feature.parentName,\r\n    );\r\n  }\r\n\r\n  private findChildrenByType(feature: FeatureDto, type: ValueTypes) {\r\n    return this.getCurrentGroup().filter(\r\n      f => f.valueType.name === type && f.parentName === feature.name,\r\n    );\r\n  }\r\n\r\n  private getCurrentGroup() {\r\n    return this.features[this.selectedGroupDisplayName] ?? [];\r\n  }\r\n\r\n  private setFeatureValue(feature: FeatureDto, val: boolean) {\r\n    feature.value = val as any;\r\n  }\r\n}\r\n\r\nfunction mapFeatures(features: FeatureDto[], dir: LocaleDirection) {\r\n  const margin = `margin-${dir === 'rtl' ? 'right' : 'left'}.px`;\r\n\r\n  return features.map(feature => {\r\n    const value =\r\n      feature.valueType?.name === ValueTypes.ToggleStringValueType\r\n        ? (feature.value || '').toLowerCase() === 'true'\r\n        : feature.value;\r\n\r\n    return {\r\n      ...feature,\r\n      value,\r\n      initialValue: value,\r\n      style: { [margin]: feature.depth * 20 },\r\n    };\r\n  });\r\n}\r\n","<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-4\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          [(activeId)]=\"selectedGroupDisplayName\"\r\n          class=\"nav-pills\"\r\n          orientation=\"vertical\"\r\n        >\r\n          <li\r\n            *ngFor=\"let group of groups; trackBy: track.by('name')\"\r\n            [ngbNavItem]=\"group.displayName\"\r\n          >\r\n            <a ngbNavLink>{{ group.displayName }}</a>\r\n            <ng-template ngbNavContent>\r\n              <h4>{{ selectedGroupDisplayName }}</h4>\r\n              <hr class=\"mt-2 mb-3\" />\r\n\r\n              <div\r\n                class=\"mt-2\"\r\n                *ngFor=\"let feature of features[group.name]; let i = index; trackBy: track.by('id')\"\r\n                [ngStyle]=\"feature.style\"\r\n                [ngSwitch]=\"feature.valueType?.name\"\r\n                (keyup.enter)=\"save()\"\r\n              >\r\n                <ng-container *ngSwitchCase=\"valueTypes.ToggleStringValueType\">\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      (ngModelChange)=\"onCheckboxClick($event, feature)\"\r\n                    />\r\n\r\n                    <label class=\"form-check-label\" [htmlFor]=\"feature.name\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.FreeTextStringValueType\">\r\n                  <div class=\"mb-3 form-group\">\r\n                    <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <input\r\n                      class=\"form-control\"\r\n                      type=\"text\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      [abpFeatureManagementFreeText]=\"feature\"\r\n                    />\r\n\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.SelectionStringValueType\">\r\n                  <ng-container *ngIf=\"feature.valueType.itemSource?.items?.length\">\r\n                    <div class=\"mb-3 form-group\">\r\n                      <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                        feature.displayName\r\n                      }}</label>\r\n                      <select class=\"form-select\" [id]=\"feature.name\" [(ngModel)]=\"feature.value\">\r\n                        <option\r\n                          *ngFor=\"\r\n                            let item of feature.valueType.itemSource?.items;\r\n                            trackBy: track.by('value')\r\n                          \"\r\n                          [ngValue]=\"item.value\"\r\n                        >\r\n                          {{\r\n                            item.displayText?.resourceName + '::' + item.displayText?.name\r\n                              | abpLocalization\r\n                          }}\r\n                        </option>\r\n                      </select>\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                      ></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <ng-template #descTmp let-description>\r\n        <small *ngIf=\"description\" class=\"d-block form-text text-muted\">{{ description }}</small>\r\n      </ng-template>\r\n\r\n      <div class=\"col-md-8\"><div [ngbNavOutlet]=\"nav\"></div></div>\r\n\r\n      <div class=\"mx-3\" *ngIf=\"!groups.length\">\r\n        {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button abpClose type=\"button\" class=\"btn btn-secondary\">\r\n      {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-check\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'AbpFeatureManagement::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n","import { CoreModule } from '@abp/ng.core';\r\nimport { ThemeSharedModule } from '@abp/ng.theme.shared';\r\nimport { NgModule } from '@angular/core';\r\nimport { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';\r\nimport { FeatureManagementComponent } from './components/feature-management/feature-management.component';\r\nimport { FreeTextInputDirective } from './directives/free-text-input.directive';\r\n\r\nconst exported = [FeatureManagementComponent, FreeTextInputDirective];\r\n\r\n@NgModule({\r\n  declarations: [...exported],\r\n  imports: [CoreModule, ThemeSharedModule, NgbNavModule],\r\n  exports: [...exported],\r\n})\r\nexport class FeatureManagementModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/abp-ng.feature-management-proxy.mjs

@@ -0,0 +1,40 @@
+import * as i1 from '@abp/ng.core';
+import * as i0 from '@angular/core';
+import { Injectable } from '@angular/core';
+
+class FeaturesService {
+    constructor(restService) {
+        this.restService = restService;
+        this.apiName = 'AbpFeatureManagement';
+        this.get = (providerName, providerKey) => this.restService.request({
+            method: 'GET',
+            url: '/api/feature-management/features',
+            params: { providerName, providerKey },
+        }, { apiName: this.apiName });
+        this.update = (providerName, providerKey, input) => this.restService.request({
+            method: 'PUT',
+            url: '/api/feature-management/features',
+            params: { providerName, providerKey },
+            body: input,
+        }, { apiName: this.apiName });
+    }
+}
+FeaturesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeaturesService, deps: [{ token: i1.RestService }], target: i0.ɵɵFactoryTarget.Injectable });
+FeaturesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeaturesService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeaturesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.RestService }]; } });
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FeaturesService, index as StringValues };
+//# sourceMappingURL=abp-ng.feature-management-proxy.mjs.map

package/fesm2020/abp-ng.feature-management-proxy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"abp-ng.feature-management-proxy.mjs","sources":["../../../../packages/feature-management/proxy/src/lib/proxy/feature-management/features.service.ts","../../../../packages/feature-management/proxy/src/abp-ng.feature-management-proxy.ts"],"sourcesContent":["import type { GetFeatureListResultDto, UpdateFeaturesDto } from './models';\r\nimport { RestService } from '@abp/ng.core';\r\nimport { Injectable } from '@angular/core';\r\n\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class FeaturesService {\r\n  apiName = 'AbpFeatureManagement';\r\n\r\n  get = (providerName: string, providerKey: string) =>\r\n    this.restService.request<any, GetFeatureListResultDto>({\r\n      method: 'GET',\r\n      url: '/api/feature-management/features',\r\n      params: { providerName, providerKey },\r\n    },\r\n    { apiName: this.apiName });\r\n\r\n  update = (providerName: string, providerKey: string, input: UpdateFeaturesDto) =>\r\n    this.restService.request<any, void>({\r\n      method: 'PUT',\r\n      url: '/api/feature-management/features',\r\n      params: { providerName, providerKey },\r\n      body: input,\r\n    },\r\n    { apiName: this.apiName });\r\n\r\n  constructor(private restService: RestService) {}\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAOa,eAAe;IAoB1B,YAAoB,WAAwB;QAAxB,gBAAW,GAAX,WAAW,CAAa;QAnB5C,YAAO,GAAG,sBAAsB,CAAC;QAEjC,QAAG,GAAG,CAAC,YAAoB,EAAE,WAAmB,KAC9C,IAAI,CAAC,WAAW,CAAC,OAAO,CAA+B;YACrD,MAAM,EAAE,KAAK;YACb,GAAG,EAAE,kCAAkC;YACvC,MAAM,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE;SACtC,EACD,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QAE7B,WAAM,GAAG,CAAC,YAAoB,EAAE,WAAmB,EAAE,KAAwB,KAC3E,IAAI,CAAC,WAAW,CAAC,OAAO,CAAY;YAClC,MAAM,EAAE,KAAK;YACb,GAAG,EAAE,kCAAkC;YACvC,MAAM,EAAE,EAAE,YAAY,EAAE,WAAW,EAAE;YACrC,IAAI,EAAE,KAAK;SACZ,EACD,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KAEmB;;4GApBrC,eAAe;gHAAf,eAAe,cAFd,MAAM;2FAEP,eAAe;kBAH3B,UAAU;mBAAC;oBACV,UAAU,EAAE,MAAM;iBACnB;;;;;;;ACND;;;;;;"}

package/fesm2020/abp-ng.feature-management.mjs

@@ -0,0 +1,215 @@
+import * as i1 from '@abp/ng.core';
+import { CoreModule } from '@abp/ng.core';
+import * as i2 from '@abp/ng.feature-management/proxy';
+import * as i0 from '@angular/core';
+import { Directive, Input, HostBinding, EventEmitter, Component, Output, NgModule } from '@angular/core';
+import { finalize } from 'rxjs/operators';
+import * as i3 from '@abp/ng.theme.shared';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import * as i4 from '@ng-bootstrap/ng-bootstrap';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i5 from '@angular/common';
+import * as i6 from '@angular/forms';
+
+const INPUT_TYPES = {
+    numeric: 'number',
+    default: 'text',
+};
+class FreeTextInputDirective {
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    set feature(val) {
+        this._feature = val;
+        this.setInputType();
+    }
+    get feature() {
+        return this._feature;
+    }
+    setInputType() {
+        const validatorType = this.feature?.valueType?.validator?.name.toLowerCase();
+        this.type = INPUT_TYPES[validatorType] ?? INPUT_TYPES.default;
+    }
+}
+FreeTextInputDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FreeTextInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FreeTextInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: FreeTextInputDirective, selector: "input[abpFeatureManagementFreeText]", inputs: { feature: ["abpFeatureManagementFreeText", "feature"] }, host: { properties: { "type": "this.type" } }, exportAs: ["inputAbpFeatureManagementFreeText"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FreeTextInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[abpFeatureManagementFreeText]',
+                    exportAs: 'inputAbpFeatureManagementFreeText',
+                }]
+        }], propDecorators: { feature: [{
+                type: Input,
+                args: ['abpFeatureManagementFreeText']
+            }], type: [{
+                type: HostBinding,
+                args: ['type']
+            }] } });
+
+var ValueTypes;
+(function (ValueTypes) {
+    ValueTypes["ToggleStringValueType"] = "ToggleStringValueType";
+    ValueTypes["FreeTextStringValueType"] = "FreeTextStringValueType";
+    ValueTypes["SelectionStringValueType"] = "SelectionStringValueType";
+})(ValueTypes || (ValueTypes = {}));
+class FeatureManagementComponent {
+    constructor(track, service, configState) {
+        this.track = track;
+        this.service = service;
+        this.configState = configState;
+        this.groups = [];
+        this.valueTypes = ValueTypes;
+        this.visibleChange = new EventEmitter();
+        this.modalBusy = false;
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        if (this._visible === value)
+            return;
+        this._visible = value;
+        this.visibleChange.emit(value);
+        if (value)
+            this.openModal();
+    }
+    openModal() {
+        if (!this.providerName) {
+            throw new Error('providerName is required.');
+        }
+        this.getFeatures();
+    }
+    getFeatures() {
+        this.service.get(this.providerName, this.providerKey).subscribe(res => {
+            if (!res.groups?.length)
+                return;
+            this.groups = res.groups.map(({ name, displayName }) => ({ name, displayName }));
+            this.selectedGroupDisplayName = this.groups[0].displayName;
+            this.features = res.groups.reduce((acc, val) => ({
+                ...acc,
+                [val.name]: mapFeatures(val.features, document.body.dir),
+            }), {});
+        });
+    }
+    save() {
+        if (this.modalBusy)
+            return;
+        const changedFeatures = [];
+        Object.keys(this.features).forEach(key => {
+            this.features[key].forEach(feature => {
+                if (feature.value !== feature.initialValue)
+                    changedFeatures.push({ name: feature.name, value: `${feature.value}` });
+            });
+        });
+        if (!changedFeatures.length) {
+            this.visible = false;
+            return;
+        }
+        this.modalBusy = true;
+        this.service
+            .update(this.providerName, this.providerKey, { features: changedFeatures })
+            .pipe(finalize(() => (this.modalBusy = false)))
+            .subscribe(() => {
+            this.visible = false;
+            if (!this.providerKey) {
+                // to refresh host's features
+                this.configState.refreshAppState().subscribe();
+            }
+        });
+    }
+    onCheckboxClick(val, feature) {
+        if (val) {
+            this.checkToggleAncestors(feature);
+        }
+        else {
+            this.uncheckToggleDescendants(feature);
+        }
+    }
+    uncheckToggleDescendants(feature) {
+        this.findAllDescendantsOfByType(feature, ValueTypes.ToggleStringValueType).forEach(node => this.setFeatureValue(node, false));
+    }
+    checkToggleAncestors(feature) {
+        this.findAllAncestorsOfByType(feature, ValueTypes.ToggleStringValueType).forEach(node => this.setFeatureValue(node, true));
+    }
+    findAllAncestorsOfByType(feature, type) {
+        let parent = this.findParentByType(feature, type);
+        const ancestors = [];
+        while (parent) {
+            ancestors.push(parent);
+            parent = this.findParentByType(parent, type);
+        }
+        return ancestors;
+    }
+    findAllDescendantsOfByType(feature, type) {
+        const descendants = [];
+        const queue = [feature];
+        while (queue.length) {
+            const node = queue.pop();
+            const newDescendants = this.findChildrenByType(node, type);
+            descendants.push(...newDescendants);
+            queue.push(...newDescendants);
+        }
+        return descendants;
+    }
+    findParentByType(feature, type) {
+        return this.getCurrentGroup().find(f => f.valueType.name === type && f.name === feature.parentName);
+    }
+    findChildrenByType(feature, type) {
+        return this.getCurrentGroup().filter(f => f.valueType.name === type && f.parentName === feature.name);
+    }
+    getCurrentGroup() {
+        return this.features[this.selectedGroupDisplayName] ?? [];
+    }
+    setFeatureValue(feature, val) {
+        feature.value = val;
+    }
+}
+FeatureManagementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementComponent, deps: [{ token: i1.TrackByService }, { token: i2.FeaturesService }, { token: i1.ConfigStateService }], target: i0.ɵɵFactoryTarget.Component });
+FeatureManagementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FeatureManagementComponent, selector: "abp-feature-management", inputs: { providerKey: "providerKey", providerName: "providerName", visible: "visible" }, outputs: { visibleChange: "visibleChange" }, exportAs: ["abpFeatureManagement"], ngImport: i0, template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-4\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          [(activeId)]=\"selectedGroupDisplayName\"\r\n          class=\"nav-pills\"\r\n          orientation=\"vertical\"\r\n        >\r\n          <li\r\n            *ngFor=\"let group of groups; trackBy: track.by('name')\"\r\n            [ngbNavItem]=\"group.displayName\"\r\n          >\r\n            <a ngbNavLink>{{ group.displayName }}</a>\r\n            <ng-template ngbNavContent>\r\n              <h4>{{ selectedGroupDisplayName }}</h4>\r\n              <hr class=\"mt-2 mb-3\" />\r\n\r\n              <div\r\n                class=\"mt-2\"\r\n                *ngFor=\"let feature of features[group.name]; let i = index; trackBy: track.by('id')\"\r\n                [ngStyle]=\"feature.style\"\r\n                [ngSwitch]=\"feature.valueType?.name\"\r\n                (keyup.enter)=\"save()\"\r\n              >\r\n                <ng-container *ngSwitchCase=\"valueTypes.ToggleStringValueType\">\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      (ngModelChange)=\"onCheckboxClick($event, feature)\"\r\n                    />\r\n\r\n                    <label class=\"form-check-label\" [htmlFor]=\"feature.name\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.FreeTextStringValueType\">\r\n                  <div class=\"mb-3 form-group\">\r\n                    <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <input\r\n                      class=\"form-control\"\r\n                      type=\"text\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      [abpFeatureManagementFreeText]=\"feature\"\r\n                    />\r\n\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.SelectionStringValueType\">\r\n                  <ng-container *ngIf=\"feature.valueType.itemSource?.items?.length\">\r\n                    <div class=\"mb-3 form-group\">\r\n                      <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                        feature.displayName\r\n                      }}</label>\r\n                      <select class=\"form-select\" [id]=\"feature.name\" [(ngModel)]=\"feature.value\">\r\n                        <option\r\n                          *ngFor=\"\r\n                            let item of feature.valueType.itemSource?.items;\r\n                            trackBy: track.by('value')\r\n                          \"\r\n                          [ngValue]=\"item.value\"\r\n                        >\r\n                          {{\r\n                            item.displayText?.resourceName + '::' + item.displayText?.name\r\n                              | abpLocalization\r\n                          }}\r\n                        </option>\r\n                      </select>\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                      ></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <ng-template #descTmp let-description>\r\n        <small *ngIf=\"description\" class=\"d-block form-text text-muted\">{{ description }}</small>\r\n      </ng-template>\r\n\r\n      <div class=\"col-md-8\"><div [ngbNavOutlet]=\"nav\"></div></div>\r\n\r\n      <div class=\"mx-3\" *ngIf=\"!groups.length\">\r\n        {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button abpClose type=\"button\" class=\"btn btn-secondary\">\r\n      {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-check\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'AbpFeatureManagement::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", components: [{ type: i3.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { type: i4.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { type: i3.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { type: i4.NgbNavLink, selector: "a[ngbNavLink]" }, { type: i4.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: FreeTextInputDirective, selector: "input[abpFeatureManagementFreeText]", inputs: ["abpFeatureManagementFreeText"], exportAs: ["inputAbpFeatureManagementFreeText"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i3.ModalCloseDirective, selector: "[abpClose]" }], pipes: { "abpLocalization": i1.LocalizationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-feature-management', exportAs: 'abpFeatureManagement', template: "<abp-modal *ngIf=\"visible\" [(visible)]=\"visible\" [busy]=\"modalBusy\" [options]=\"{ size: 'lg' }\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'AbpFeatureManagement::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    <div class=\"row\">\r\n      <div class=\"col-md-4\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          [(activeId)]=\"selectedGroupDisplayName\"\r\n          class=\"nav-pills\"\r\n          orientation=\"vertical\"\r\n        >\r\n          <li\r\n            *ngFor=\"let group of groups; trackBy: track.by('name')\"\r\n            [ngbNavItem]=\"group.displayName\"\r\n          >\r\n            <a ngbNavLink>{{ group.displayName }}</a>\r\n            <ng-template ngbNavContent>\r\n              <h4>{{ selectedGroupDisplayName }}</h4>\r\n              <hr class=\"mt-2 mb-3\" />\r\n\r\n              <div\r\n                class=\"mt-2\"\r\n                *ngFor=\"let feature of features[group.name]; let i = index; trackBy: track.by('id')\"\r\n                [ngStyle]=\"feature.style\"\r\n                [ngSwitch]=\"feature.valueType?.name\"\r\n                (keyup.enter)=\"save()\"\r\n              >\r\n                <ng-container *ngSwitchCase=\"valueTypes.ToggleStringValueType\">\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      (ngModelChange)=\"onCheckboxClick($event, feature)\"\r\n                    />\r\n\r\n                    <label class=\"form-check-label\" [htmlFor]=\"feature.name\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.FreeTextStringValueType\">\r\n                  <div class=\"mb-3 form-group\">\r\n                    <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                      feature.displayName\r\n                    }}</label>\r\n                    <input\r\n                      class=\"form-control\"\r\n                      type=\"text\"\r\n                      [id]=\"feature.name\"\r\n                      [(ngModel)]=\"feature.value\"\r\n                      [abpFeatureManagementFreeText]=\"feature\"\r\n                    />\r\n\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                    ></ng-container>\r\n                  </div>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"valueTypes.SelectionStringValueType\">\r\n                  <ng-container *ngIf=\"feature.valueType.itemSource?.items?.length\">\r\n                    <div class=\"mb-3 form-group\">\r\n                      <label [htmlFor]=\"feature.name\" class=\"form-label\">{{\r\n                        feature.displayName\r\n                      }}</label>\r\n                      <select class=\"form-select\" [id]=\"feature.name\" [(ngModel)]=\"feature.value\">\r\n                        <option\r\n                          *ngFor=\"\r\n                            let item of feature.valueType.itemSource?.items;\r\n                            trackBy: track.by('value')\r\n                          \"\r\n                          [ngValue]=\"item.value\"\r\n                        >\r\n                          {{\r\n                            item.displayText?.resourceName + '::' + item.displayText?.name\r\n                              | abpLocalization\r\n                          }}\r\n                        </option>\r\n                      </select>\r\n                      <ng-container\r\n                        *ngTemplateOutlet=\"descTmp; context: { $implicit: feature.description }\"\r\n                      ></ng-container>\r\n                    </div>\r\n                  </ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchDefault>{{ feature.displayName }}</ng-container>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n\r\n      <ng-template #descTmp let-description>\r\n        <small *ngIf=\"description\" class=\"d-block form-text text-muted\">{{ description }}</small>\r\n      </ng-template>\r\n\r\n      <div class=\"col-md-8\"><div [ngbNavOutlet]=\"nav\"></div></div>\r\n\r\n      <div class=\"mx-3\" *ngIf=\"!groups.length\">\r\n        {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button abpClose type=\"button\" class=\"btn btn-secondary\">\r\n      {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-check\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"save()\"\r\n    >\r\n      {{ 'AbpFeatureManagement::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i1.TrackByService }, { type: i2.FeaturesService }, { type: i1.ConfigStateService }]; }, propDecorators: { providerKey: [{
+                type: Input
+            }], providerName: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }] } });
+function mapFeatures(features, dir) {
+    const margin = `margin-${dir === 'rtl' ? 'right' : 'left'}.px`;
+    return features.map(feature => {
+        const value = feature.valueType?.name === ValueTypes.ToggleStringValueType
+            ? (feature.value || '').toLowerCase() === 'true'
+            : feature.value;
+        return {
+            ...feature,
+            value,
+            initialValue: value,
+            style: { [margin]: feature.depth * 20 },
+        };
+    });
+}
+
+const exported = [FeatureManagementComponent, FreeTextInputDirective];
+class FeatureManagementModule {
+}
+FeatureManagementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FeatureManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementModule, declarations: [FeatureManagementComponent, FreeTextInputDirective], imports: [CoreModule, ThemeSharedModule, NgbNavModule], exports: [FeatureManagementComponent, FreeTextInputDirective] });
+FeatureManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementModule, imports: [[CoreModule, ThemeSharedModule, NgbNavModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FeatureManagementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...exported],
+                    imports: [CoreModule, ThemeSharedModule, NgbNavModule],
+                    exports: [...exported],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FeatureManagementComponent, FeatureManagementModule, FreeTextInputDirective, INPUT_TYPES };
+//# sourceMappingURL=abp-ng.feature-management.mjs.map