@abp/ng.feature-management 7.2.2 → 7.3.0-rc.2

package/{fesm2020 → fesm2022}/abp-ng.feature-management.mjs

@@ -12,277 +12,277 @@ import * as i6 from '@ng-bootstrap/ng-bootstrap';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { SettingTabsService } from '@abp/ng.setting-management/config';
 
-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: "15.0.4", ngImport: i0, type: FreeTextInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FreeTextInputDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", 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: "15.0.4", ngImport: i0, type: FreeTextInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'input[abpFeatureManagementFreeText]',
-                    exportAs: 'inputAbpFeatureManagementFreeText',
-                }]
-        }], propDecorators: { feature: [{
-                type: Input,
-                args: ['abpFeatureManagementFreeText']
-            }], type: [{
-                type: HostBinding,
-                args: ['type']
+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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FreeTextInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.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: "16.0.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, toasterService, service, configState, confirmationService) {
-        this.track = track;
-        this.toasterService = toasterService;
-        this.service = service;
-        this.configState = configState;
-        this.confirmationService = confirmationService;
-        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();
-            }
-        });
-    }
-    resetToDefault() {
-        this.confirmationService
-            .warn('AbpFeatureManagement::AreYouSureToResetToDefault', 'AbpFeatureManagement::AreYouSure')
-            .subscribe((status) => {
-            if (status === Confirmation.Status.confirm) {
-                this.service.delete(this.providerName, this.providerKey).subscribe(() => {
-                    this.toasterService.success('AbpFeatureManagement::ResetedToDefault');
-                    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: "15.0.4", ngImport: i0, type: FeatureManagementComponent, deps: [{ token: i1.TrackByService }, { token: i2.ToasterService }, { token: i3.FeaturesService }, { token: i1.ConfigStateService }, { token: i2.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component });
-FeatureManagementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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      <ng-container *ngIf=\"groups.length\">\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=\"\r\n                    let feature of features[group.name];\r\n                    let i = index;\r\n                    trackBy: track.by('id')\r\n                  \"\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      </ng-container>\r\n\r\n      <div class=\"col\" *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    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-refresh\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"resetToDefault()\"\r\n    >\r\n      {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}\r\n    </abp-button>\r\n\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", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2.ModalCloseDirective, selector: "[abpClose]" }, { kind: "directive", type: i6.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i6.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i6.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i6.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i6.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i6.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i6.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: FreeTextInputDirective, selector: "input[abpFeatureManagementFreeText]", inputs: ["abpFeatureManagementFreeText"], exportAs: ["inputAbpFeatureManagementFreeText"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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      <ng-container *ngIf=\"groups.length\">\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=\"\r\n                    let feature of features[group.name];\r\n                    let i = index;\r\n                    trackBy: track.by('id')\r\n                  \"\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      </ng-container>\r\n\r\n      <div class=\"col\" *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    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-refresh\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"resetToDefault()\"\r\n    >\r\n      {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}\r\n    </abp-button>\r\n\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.ToasterService }, { type: i3.FeaturesService }, { type: i1.ConfigStateService }, { type: i2.ConfirmationService }]; }, 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 },
-        };
-    });
+var ValueTypes;
+(function (ValueTypes) {
+    ValueTypes["ToggleStringValueType"] = "ToggleStringValueType";
+    ValueTypes["FreeTextStringValueType"] = "FreeTextStringValueType";
+    ValueTypes["SelectionStringValueType"] = "SelectionStringValueType";
+})(ValueTypes || (ValueTypes = {}));
+class FeatureManagementComponent {
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        if (this._visible === value)
+            return;
+        this._visible = value;
+        this.visibleChange.emit(value);
+        if (value)
+            this.openModal();
+    }
+    constructor(track, toasterService, service, configState, confirmationService) {
+        this.track = track;
+        this.toasterService = toasterService;
+        this.service = service;
+        this.configState = configState;
+        this.confirmationService = confirmationService;
+        this.groups = [];
+        this.valueTypes = ValueTypes;
+        this.visibleChange = new EventEmitter();
+        this.modalBusy = false;
+    }
+    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();
+            }
+        });
+    }
+    resetToDefault() {
+        this.confirmationService
+            .warn('AbpFeatureManagement::AreYouSureToResetToDefault', 'AbpFeatureManagement::AreYouSure')
+            .subscribe((status) => {
+            if (status === Confirmation.Status.confirm) {
+                this.service.delete(this.providerName, this.providerKey).subscribe(() => {
+                    this.toasterService.success('AbpFeatureManagement::ResetedToDefault');
+                    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;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FeatureManagementComponent, deps: [{ token: i1.TrackByService }, { token: i2.ToasterService }, { token: i3.FeaturesService }, { token: i1.ConfigStateService }, { token: i2.ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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      <ng-container *ngIf=\"groups.length\">\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=\"\r\n                    let feature of features[group.name];\r\n                    let i = index;\r\n                    trackBy: track.by('id')\r\n                  \"\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      </ng-container>\r\n\r\n      <div class=\"col\" *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    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-refresh\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"resetToDefault()\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}\r\n    </abp-button>\r\n\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      aria-hidden=\"true\"\r\n    >\r\n      {{ 'AbpFeatureManagement::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2.ModalCloseDirective, selector: "[abpClose]" }, { kind: "directive", type: i6.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i6.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i6.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i6.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i6.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i6.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i6.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: FreeTextInputDirective, selector: "input[abpFeatureManagementFreeText]", inputs: ["abpFeatureManagementFreeText"], exportAs: ["inputAbpFeatureManagementFreeText"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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      <ng-container *ngIf=\"groups.length\">\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=\"\r\n                    let feature of features[group.name];\r\n                    let i = index;\r\n                    trackBy: track.by('id')\r\n                  \"\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      </ng-container>\r\n\r\n      <div class=\"col\" *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    <abp-button\r\n      *ngIf=\"groups.length\"\r\n      iconClass=\"fa fa-refresh\"\r\n      [disabled]=\"modalBusy\"\r\n      (click)=\"resetToDefault()\"\r\n      aria-hidden=\"true\"\r\n    >\r\n      {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}\r\n    </abp-button>\r\n\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      aria-hidden=\"true\"\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.ToasterService }, { type: i3.FeaturesService }, { type: i1.ConfigStateService }, { type: i2.ConfirmationService }]; }, 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 },
+        };
+    });
 }
 
-class FeatureManagementTabComponent {
-    constructor() {
-        this.visibleFeatures = false;
-        this.onVisibleFeaturesChange = (value) => {
-            this.visibleFeatures = value;
-        };
-    }
-    openFeaturesModal() {
-        setTimeout(() => {
-            this.visibleFeatures = true;
-        }, 0);
-    }
-}
-FeatureManagementTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FeatureManagementTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FeatureManagementTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: FeatureManagementTabComponent, selector: "abp-feature-management-tab", ngImport: i0, template: "<p class=\"text-wrap\">{{ 'AbpFeatureManagement::ManageHostFeaturesText' | abpLocalization }}</p>\r\n\r\n<button class=\"btn btn-primary\" type=\"button\" (click)=\"openFeaturesModal()\">\r\n  <i class=\"fa fa-cog\"></i>\r\n  {{ 'AbpFeatureManagement::ManageHostFeatures' | abpLocalization }}\r\n</button>\r\n<abp-feature-management\r\n  *abpReplaceableTemplate=\"{\r\n    inputs: {\r\n      providerName: { value: 'T' },\r\n      providerKey: { value: providerKey },\r\n      visible: { value: visibleFeatures, twoWay: true }\r\n    },\r\n    outputs: { visibleChange: onVisibleFeaturesChange },\r\n    componentKey: 'FeatureManagement.FeatureManagementComponent'\r\n  }\"\r\n  [(visible)]=\"visibleFeatures\"\r\n  providerName=\"T\"\r\n  [providerKey]=\"providerKey\"\r\n>\r\n</abp-feature-management>\r\n", dependencies: [{ kind: "directive", type: i1.ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }, { kind: "component", type: FeatureManagementComponent, selector: "abp-feature-management", inputs: ["providerKey", "providerName", "visible"], outputs: ["visibleChange"], exportAs: ["abpFeatureManagement"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FeatureManagementTabComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'abp-feature-management-tab', template: "<p class=\"text-wrap\">{{ 'AbpFeatureManagement::ManageHostFeaturesText' | abpLocalization }}</p>\r\n\r\n<button class=\"btn btn-primary\" type=\"button\" (click)=\"openFeaturesModal()\">\r\n  <i class=\"fa fa-cog\"></i>\r\n  {{ 'AbpFeatureManagement::ManageHostFeatures' | abpLocalization }}\r\n</button>\r\n<abp-feature-management\r\n  *abpReplaceableTemplate=\"{\r\n    inputs: {\r\n      providerName: { value: 'T' },\r\n      providerKey: { value: providerKey },\r\n      visible: { value: visibleFeatures, twoWay: true }\r\n    },\r\n    outputs: { visibleChange: onVisibleFeaturesChange },\r\n    componentKey: 'FeatureManagement.FeatureManagementComponent'\r\n  }\"\r\n  [(visible)]=\"visibleFeatures\"\r\n  providerName=\"T\"\r\n  [providerKey]=\"providerKey\"\r\n>\r\n</abp-feature-management>\r\n" }]
+class FeatureManagementTabComponent {
+    constructor() {
+        this.visibleFeatures = false;
+        this.onVisibleFeaturesChange = (value) => {
+            this.visibleFeatures = value;
+        };
+    }
+    openFeaturesModal() {
+        setTimeout(() => {
+            this.visibleFeatures = true;
+        }, 0);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FeatureManagementTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: FeatureManagementTabComponent, selector: "abp-feature-management-tab", ngImport: i0, template: "<p class=\"text-wrap\">{{ 'AbpFeatureManagement::ManageHostFeaturesText' | abpLocalization }}</p>\r\n\r\n<button class=\"btn btn-primary\" type=\"button\" (click)=\"openFeaturesModal()\">\r\n  <i class=\"fa fa-cog\" aria-hidden=\"true\"></i>\r\n  {{ 'AbpFeatureManagement::ManageHostFeatures' | abpLocalization }}\r\n</button>\r\n<abp-feature-management\r\n  *abpReplaceableTemplate=\"{\r\n    inputs: {\r\n      providerName: { value: 'T' },\r\n      providerKey: { value: providerKey },\r\n      visible: { value: visibleFeatures, twoWay: true }\r\n    },\r\n    outputs: { visibleChange: onVisibleFeaturesChange },\r\n    componentKey: 'FeatureManagement.FeatureManagementComponent'\r\n  }\"\r\n  [(visible)]=\"visibleFeatures\"\r\n  providerName=\"T\"\r\n  [providerKey]=\"providerKey\"\r\n>\r\n</abp-feature-management>\r\n", dependencies: [{ kind: "directive", type: i1.ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }, { kind: "component", type: FeatureManagementComponent, selector: "abp-feature-management", inputs: ["providerKey", "providerName", "visible"], outputs: ["visibleChange"], exportAs: ["abpFeatureManagement"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FeatureManagementTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-feature-management-tab', template: "<p class=\"text-wrap\">{{ 'AbpFeatureManagement::ManageHostFeaturesText' | abpLocalization }}</p>\r\n\r\n<button class=\"btn btn-primary\" type=\"button\" (click)=\"openFeaturesModal()\">\r\n  <i class=\"fa fa-cog\" aria-hidden=\"true\"></i>\r\n  {{ 'AbpFeatureManagement::ManageHostFeatures' | abpLocalization }}\r\n</button>\r\n<abp-feature-management\r\n  *abpReplaceableTemplate=\"{\r\n    inputs: {\r\n      providerName: { value: 'T' },\r\n      providerKey: { value: providerKey },\r\n      visible: { value: visibleFeatures, twoWay: true }\r\n    },\r\n    outputs: { visibleChange: onVisibleFeaturesChange },\r\n    componentKey: 'FeatureManagement.FeatureManagementComponent'\r\n  }\"\r\n  [(visible)]=\"visibleFeatures\"\r\n  providerName=\"T\"\r\n  [providerKey]=\"providerKey\"\r\n>\r\n</abp-feature-management>\r\n" }]
         }] });
 
-const FEATURE_MANAGEMENT_SETTINGS_PROVIDERS = [
-    {
-        provide: APP_INITIALIZER,
-        useFactory: configureSettingTabs,
-        deps: [SettingTabsService],
-        multi: true,
-    },
-];
-function configureSettingTabs(settingtabs) {
-    return () => {
-        settingtabs.add([
-            {
-                name: "AbpFeatureManagement::Permission:FeatureManagement" /* eFeatureManagementTabNames.FeatureManagement */,
-                order: 104,
-                requiredPolicy: 'FeatureManagement.ManageHostFeatures',
-                component: FeatureManagementTabComponent,
-            },
-        ]);
-    };
+const FEATURE_MANAGEMENT_SETTINGS_PROVIDERS = [
+    {
+        provide: APP_INITIALIZER,
+        useFactory: configureSettingTabs,
+        deps: [SettingTabsService],
+        multi: true,
+    },
+];
+function configureSettingTabs(settingtabs) {
+    return () => {
+        settingtabs.add([
+            {
+                name: "AbpFeatureManagement::Permission:FeatureManagement" /* eFeatureManagementTabNames.FeatureManagement */,
+                order: 104,
+                requiredPolicy: 'FeatureManagement.ManageHostFeatures',
+                component: FeatureManagementTabComponent,
+            },
+        ]);
+    };
 }
 
-const exported = [
-    FeatureManagementComponent,
-    FreeTextInputDirective,
-    FeatureManagementTabComponent,
-];
-class FeatureManagementModule {
-    static forRoot() {
-        return {
-            ngModule: FeatureManagementModule,
-            providers: [FEATURE_MANAGEMENT_SETTINGS_PROVIDERS],
-        };
-    }
-}
-FeatureManagementModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FeatureManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FeatureManagementModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: FeatureManagementModule, declarations: [FeatureManagementComponent,
-        FreeTextInputDirective,
-        FeatureManagementTabComponent], imports: [CoreModule, ThemeSharedModule, NgbNavModule], exports: [FeatureManagementComponent,
-        FreeTextInputDirective,
-        FeatureManagementTabComponent] });
-FeatureManagementModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FeatureManagementModule, imports: [CoreModule, ThemeSharedModule, NgbNavModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FeatureManagementModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...exported],
-                    imports: [CoreModule, ThemeSharedModule, NgbNavModule],
-                    exports: [...exported],
-                }]
+const exported = [
+    FeatureManagementComponent,
+    FreeTextInputDirective,
+    FeatureManagementTabComponent,
+];
+class FeatureManagementModule {
+    static forRoot() {
+        return {
+            ngModule: FeatureManagementModule,
+            providers: [FEATURE_MANAGEMENT_SETTINGS_PROVIDERS],
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FeatureManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: FeatureManagementModule, declarations: [FeatureManagementComponent,
+            FreeTextInputDirective,
+            FeatureManagementTabComponent], imports: [CoreModule, ThemeSharedModule, NgbNavModule], exports: [FeatureManagementComponent,
+            FreeTextInputDirective,
+            FeatureManagementTabComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FeatureManagementModule, imports: [CoreModule, ThemeSharedModule, NgbNavModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: FeatureManagementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...exported],
+                    imports: [CoreModule, ThemeSharedModule, NgbNavModule],
+                    exports: [...exported],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { FEATURE_MANAGEMENT_SETTINGS_PROVIDERS, FeatureManagementComponent, FeatureManagementModule, FeatureManagementTabComponent, FreeTextInputDirective, INPUT_TYPES, configureSettingTabs };