@ng-doc/app 15.11.2 → 15.12.0

package/esm2020/type-controls/string-control/string-control.module.mjs

@@ -7,7 +7,7 @@ import { NgDocButtonIconModule, NgDocClearControlModule, NgDocFocusableModule, N
 import { FlControlSilencerModule } from 'flex-controls';
 import { NgDocStringControlComponent } from './string-control.component';
 import * as i0 from "@angular/core";
-const provider = provideTypeControl('string', NgDocStringControlComponent);
+const provider = provideTypeControl('string', NgDocStringControlComponent, { order: 20 });
 export class NgDocStringControlModule {
 }
 NgDocStringControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocStringControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -51,4 +51,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                     exports: [NgDocStringControlComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5nLWNvbnRyb2wubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hcHAvdHlwZS1jb250cm9scy9zdHJpbmctY29udHJvbC9zdHJpbmctY29udHJvbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzdDLE9BQU8sRUFBQyxRQUFRLEVBQVcsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3hFLE9BQU8sRUFDTixxQkFBcUIsRUFDckIsdUJBQXVCLEVBQ3ZCLG9CQUFvQixFQUNwQixlQUFlLEVBQ2Ysc0JBQXNCLEVBQ3RCLHVCQUF1QixHQUN2QixNQUFNLGdCQUFnQixDQUFDO0FBQ3hCLE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUV0RCxPQUFPLEVBQUMsMkJBQTJCLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQzs7QUFFdkUsTUFBTSxRQUFRLEdBQWEsa0JBQWtCLENBQUMsUUFBUSxFQUFFLDJCQUEyQixDQUFDLENBQUM7QUFtQnJGLE1BQU0sT0FBTyx3QkFBd0I7O3FIQUF4Qix3QkFBd0I7c0hBQXhCLHdCQUF3QixpQkFoQnJCLDJCQUEyQixhQUV6QyxZQUFZO1FBQ1osdUJBQXVCO1FBQ3ZCLHNCQUFzQjtRQUN0Qix1QkFBdUI7UUFDdkIsV0FBVztRQUNYLHVCQUF1QjtRQUN2Qix1QkFBdUI7UUFDdkIsZUFBZTtRQUNmLHFCQUFxQjtRQUNyQixvQkFBb0IsYUFHWCwyQkFBMkI7c0hBRXpCLHdCQUF3QixhQUh6QixDQUFDLFFBQVEsQ0FBQyxZQVhwQixZQUFZO1FBQ1osdUJBQXVCO1FBQ3ZCLHNCQUFzQjtRQUN0Qix1QkFBdUI7UUFDdkIsV0FBVztRQUNYLHVCQUF1QjtRQUN2Qix1QkFBdUI7UUFDdkIsZUFBZTtRQUNmLHFCQUFxQjtRQUNyQixvQkFBb0I7MkZBS1Qsd0JBQXdCO2tCQWpCcEMsUUFBUTttQkFBQztvQkFDVCxZQUFZLEVBQUUsQ0FBQywyQkFBMkIsQ0FBQztvQkFDM0MsT0FBTyxFQUFFO3dCQUNSLFlBQVk7d0JBQ1osdUJBQXVCO3dCQUN2QixzQkFBc0I7d0JBQ3RCLHVCQUF1Qjt3QkFDdkIsV0FBVzt3QkFDWCx1QkFBdUI7d0JBQ3ZCLHVCQUF1Qjt3QkFDdkIsZUFBZTt3QkFDZixxQkFBcUI7d0JBQ3JCLG9CQUFvQjtxQkFDcEI7b0JBQ0QsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDO29CQUNyQixPQUFPLEVBQUUsQ0FBQywyQkFBMkIsQ0FBQztpQkFDdEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbW1vbk1vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7TmdNb2R1bGUsIFByb3ZpZGVyfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7cHJvdmlkZVR5cGVDb250cm9sfSBmcm9tICdAbmctZG9jL2FwcC9oZWxwZXJzJztcbmltcG9ydCB7TmdEb2NFeHRyYWN0VmFsdWVNb2R1bGV9IGZyb20gJ0BuZy1kb2MvYXBwL3BpcGVzL2V4dHJhY3QtdmFsdWUnO1xuaW1wb3J0IHtcblx0TmdEb2NCdXR0b25JY29uTW9kdWxlLFxuXHROZ0RvY0NsZWFyQ29udHJvbE1vZHVsZSxcblx0TmdEb2NGb2N1c2FibGVNb2R1bGUsXG5cdE5nRG9jSWNvbk1vZHVsZSxcblx0TmdEb2NJbnB1dFN0cmluZ01vZHVsZSxcblx0TmdEb2NJbnB1dFdyYXBwZXJNb2R1bGUsXG59IGZyb20gJ0BuZy1kb2MvdWkta2l0JztcbmltcG9ydCB7RmxDb250cm9sU2lsZW5jZXJNb2R1bGV9IGZyb20gJ2ZsZXgtY29udHJvbHMnO1xuXG5pbXBvcnQge05nRG9jU3RyaW5nQ29udHJvbENvbXBvbmVudH0gZnJvbSAnLi9zdHJpbmctY29udHJvbC5jb21wb25lbnQnO1xuXG5jb25zdCBwcm92aWRlcjogUHJvdmlkZXIgPSBwcm92aWRlVHlwZUNvbnRyb2woJ3N0cmluZycsIE5nRG9jU3RyaW5nQ29udHJvbENvbXBvbmVudCk7XG5cbkBOZ01vZHVsZSh7XG5cdGRlY2xhcmF0aW9uczogW05nRG9jU3RyaW5nQ29udHJvbENvbXBvbmVudF0sXG5cdGltcG9ydHM6IFtcblx0XHRDb21tb25Nb2R1bGUsXG5cdFx0TmdEb2NJbnB1dFdyYXBwZXJNb2R1bGUsXG5cdFx0TmdEb2NJbnB1dFN0cmluZ01vZHVsZSxcblx0XHROZ0RvY0NsZWFyQ29udHJvbE1vZHVsZSxcblx0XHRGb3Jtc01vZHVsZSxcblx0XHRGbENvbnRyb2xTaWxlbmNlck1vZHVsZSxcblx0XHROZ0RvY0V4dHJhY3RWYWx1ZU1vZHVsZSxcblx0XHROZ0RvY0ljb25Nb2R1bGUsXG5cdFx0TmdEb2NCdXR0b25JY29uTW9kdWxlLFxuXHRcdE5nRG9jRm9jdXNhYmxlTW9kdWxlLFxuXHRdLFxuXHRwcm92aWRlcnM6IFtwcm92aWRlcl0sXG5cdGV4cG9ydHM6IFtOZ0RvY1N0cmluZ0NvbnRyb2xDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBOZ0RvY1N0cmluZ0NvbnRyb2xNb2R1bGUge31cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5nLWNvbnRyb2wubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9hcHAvdHlwZS1jb250cm9scy9zdHJpbmctY29udHJvbC9zdHJpbmctY29udHJvbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzdDLE9BQU8sRUFBQyxRQUFRLEVBQVcsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3hFLE9BQU8sRUFDTixxQkFBcUIsRUFDckIsdUJBQXVCLEVBQ3ZCLG9CQUFvQixFQUNwQixlQUFlLEVBQ2Ysc0JBQXNCLEVBQ3RCLHVCQUF1QixHQUN2QixNQUFNLGdCQUFnQixDQUFDO0FBQ3hCLE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUV0RCxPQUFPLEVBQUMsMkJBQTJCLEVBQUMsTUFBTSw0QkFBNEIsQ0FBQzs7QUFFdkUsTUFBTSxRQUFRLEdBQWEsa0JBQWtCLENBQUMsUUFBUSxFQUFFLDJCQUEyQixFQUFFLEVBQUMsS0FBSyxFQUFFLEVBQUUsRUFBQyxDQUFDLENBQUM7QUFtQmxHLE1BQU0sT0FBTyx3QkFBd0I7O3FIQUF4Qix3QkFBd0I7c0hBQXhCLHdCQUF3QixpQkFoQnJCLDJCQUEyQixhQUV6QyxZQUFZO1FBQ1osdUJBQXVCO1FBQ3ZCLHNCQUFzQjtRQUN0Qix1QkFBdUI7UUFDdkIsV0FBVztRQUNYLHVCQUF1QjtRQUN2Qix1QkFBdUI7UUFDdkIsZUFBZTtRQUNmLHFCQUFxQjtRQUNyQixvQkFBb0IsYUFHWCwyQkFBMkI7c0hBRXpCLHdCQUF3QixhQUh6QixDQUFDLFFBQVEsQ0FBQyxZQVhwQixZQUFZO1FBQ1osdUJBQXVCO1FBQ3ZCLHNCQUFzQjtRQUN0Qix1QkFBdUI7UUFDdkIsV0FBVztRQUNYLHVCQUF1QjtRQUN2Qix1QkFBdUI7UUFDdkIsZUFBZTtRQUNmLHFCQUFxQjtRQUNyQixvQkFBb0I7MkZBS1Qsd0JBQXdCO2tCQWpCcEMsUUFBUTttQkFBQztvQkFDVCxZQUFZLEVBQUUsQ0FBQywyQkFBMkIsQ0FBQztvQkFDM0MsT0FBTyxFQUFFO3dCQUNSLFlBQVk7d0JBQ1osdUJBQXVCO3dCQUN2QixzQkFBc0I7d0JBQ3RCLHVCQUF1Qjt3QkFDdkIsV0FBVzt3QkFDWCx1QkFBdUI7d0JBQ3ZCLHVCQUF1Qjt3QkFDdkIsZUFBZTt3QkFDZixxQkFBcUI7d0JBQ3JCLG9CQUFvQjtxQkFDcEI7b0JBQ0QsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDO29CQUNyQixPQUFPLEVBQUUsQ0FBQywyQkFBMkIsQ0FBQztpQkFDdEMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbW1vbk1vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7TmdNb2R1bGUsIFByb3ZpZGVyfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7cHJvdmlkZVR5cGVDb250cm9sfSBmcm9tICdAbmctZG9jL2FwcC9oZWxwZXJzJztcbmltcG9ydCB7TmdEb2NFeHRyYWN0VmFsdWVNb2R1bGV9IGZyb20gJ0BuZy1kb2MvYXBwL3BpcGVzL2V4dHJhY3QtdmFsdWUnO1xuaW1wb3J0IHtcblx0TmdEb2NCdXR0b25JY29uTW9kdWxlLFxuXHROZ0RvY0NsZWFyQ29udHJvbE1vZHVsZSxcblx0TmdEb2NGb2N1c2FibGVNb2R1bGUsXG5cdE5nRG9jSWNvbk1vZHVsZSxcblx0TmdEb2NJbnB1dFN0cmluZ01vZHVsZSxcblx0TmdEb2NJbnB1dFdyYXBwZXJNb2R1bGUsXG59IGZyb20gJ0BuZy1kb2MvdWkta2l0JztcbmltcG9ydCB7RmxDb250cm9sU2lsZW5jZXJNb2R1bGV9IGZyb20gJ2ZsZXgtY29udHJvbHMnO1xuXG5pbXBvcnQge05nRG9jU3RyaW5nQ29udHJvbENvbXBvbmVudH0gZnJvbSAnLi9zdHJpbmctY29udHJvbC5jb21wb25lbnQnO1xuXG5jb25zdCBwcm92aWRlcjogUHJvdmlkZXIgPSBwcm92aWRlVHlwZUNvbnRyb2woJ3N0cmluZycsIE5nRG9jU3RyaW5nQ29udHJvbENvbXBvbmVudCwge29yZGVyOiAyMH0pO1xuXG5ATmdNb2R1bGUoe1xuXHRkZWNsYXJhdGlvbnM6IFtOZ0RvY1N0cmluZ0NvbnRyb2xDb21wb25lbnRdLFxuXHRpbXBvcnRzOiBbXG5cdFx0Q29tbW9uTW9kdWxlLFxuXHRcdE5nRG9jSW5wdXRXcmFwcGVyTW9kdWxlLFxuXHRcdE5nRG9jSW5wdXRTdHJpbmdNb2R1bGUsXG5cdFx0TmdEb2NDbGVhckNvbnRyb2xNb2R1bGUsXG5cdFx0Rm9ybXNNb2R1bGUsXG5cdFx0RmxDb250cm9sU2lsZW5jZXJNb2R1bGUsXG5cdFx0TmdEb2NFeHRyYWN0VmFsdWVNb2R1bGUsXG5cdFx0TmdEb2NJY29uTW9kdWxlLFxuXHRcdE5nRG9jQnV0dG9uSWNvbk1vZHVsZSxcblx0XHROZ0RvY0ZvY3VzYWJsZU1vZHVsZSxcblx0XSxcblx0cHJvdmlkZXJzOiBbcHJvdmlkZXJdLFxuXHRleHBvcnRzOiBbTmdEb2NTdHJpbmdDb250cm9sQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgTmdEb2NTdHJpbmdDb250cm9sTW9kdWxlIHt9XG4iXX0=

package/esm2020/type-controls/type-alias-control/type-alias-control.module.mjs

@@ -7,7 +7,7 @@ import { NgDocExtractValueModule } from '@ng-doc/app/pipes/extract-value';
 import { NgDocButtonIconModule, NgDocComboboxModule, NgDocDataModule, NgDocFocusableModule, NgDocIconModule, NgDocListModule, NgDocOptionModule, NgDocTextModule, NgDocTooltipModule, } from '@ng-doc/ui-kit';
 import { NgDocTypeAliasControlComponent } from './type-alias-control.component';
 import * as i0 from "@angular/core";
-const provider = provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent);
+const provider = provideTypeControl('NgDocTypeAlias', NgDocTypeAliasControlComponent, { order: 10 });
 export class NgDocTypeAliasControlModule {
 }
 NgDocTypeAliasControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocTypeAliasControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -60,4 +60,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                     exports: [NgDocTypeAliasControlComponent],
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZS1hbGlhcy1jb250cm9sLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYXBwL3R5cGUtY29udHJvbHMvdHlwZS1hbGlhcy1jb250cm9sL3R5cGUtYWxpYXMtY29udHJvbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzdDLE9BQU8sRUFBQyxRQUFRLEVBQVcsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3hFLE9BQU8sRUFDTixxQkFBcUIsRUFDckIsbUJBQW1CLEVBQ25CLGVBQWUsRUFDZixvQkFBb0IsRUFDcEIsZUFBZSxFQUNmLGVBQWUsRUFDZixpQkFBaUIsRUFDakIsZUFBZSxFQUNmLGtCQUFrQixHQUNsQixNQUFNLGdCQUFnQixDQUFDO0FBRXhCLE9BQU8sRUFBQyw4QkFBOEIsRUFBQyxNQUFNLGdDQUFnQyxDQUFDOztBQUU5RSxNQUFNLFFBQVEsR0FBYSxrQkFBa0IsQ0FBQyxnQkFBZ0IsRUFBRSw4QkFBOEIsQ0FBQyxDQUFDO0FBc0JoRyxNQUFNLE9BQU8sMkJBQTJCOzt3SEFBM0IsMkJBQTJCO3lIQUEzQiwyQkFBMkIsaUJBbkJ4Qiw4QkFBOEIsYUFFNUMsWUFBWTtRQUNaLG1CQUFtQjtRQUNuQixlQUFlO1FBQ2YsV0FBVztRQUNYLGlCQUFpQjtRQUNqQixlQUFlO1FBQ2YsdUJBQXVCO1FBQ3ZCLGVBQWU7UUFDZixtQkFBbUI7UUFDbkIsa0JBQWtCO1FBQ2xCLHFCQUFxQjtRQUNyQixvQkFBb0I7UUFDcEIsZUFBZSxhQUdOLDhCQUE4Qjt5SEFFNUIsMkJBQTJCLGFBSDVCLENBQUMsUUFBUSxDQUFDLFlBZHBCLFlBQVk7UUFDWixtQkFBbUI7UUFDbkIsZUFBZTtRQUNmLFdBQVc7UUFDWCxpQkFBaUI7UUFDakIsZUFBZTtRQUNmLHVCQUF1QjtRQUN2QixlQUFlO1FBQ2YsbUJBQW1CO1FBQ25CLGtCQUFrQjtRQUNsQixxQkFBcUI7UUFDckIsb0JBQW9CO1FBQ3BCLGVBQWU7MkZBS0osMkJBQTJCO2tCQXBCdkMsUUFBUTttQkFBQztvQkFDVCxZQUFZLEVBQUUsQ0FBQyw4QkFBOEIsQ0FBQztvQkFDOUMsT0FBTyxFQUFFO3dCQUNSLFlBQVk7d0JBQ1osbUJBQW1CO3dCQUNuQixlQUFlO3dCQUNmLFdBQVc7d0JBQ1gsaUJBQWlCO3dCQUNqQixlQUFlO3dCQUNmLHVCQUF1Qjt3QkFDdkIsZUFBZTt3QkFDZixtQkFBbUI7d0JBQ25CLGtCQUFrQjt3QkFDbEIscUJBQXFCO3dCQUNyQixvQkFBb0I7d0JBQ3BCLGVBQWU7cUJBQ2Y7b0JBQ0QsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDO29CQUNyQixPQUFPLEVBQUUsQ0FBQyw4QkFBOEIsQ0FBQztpQkFDekMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbW1vbk1vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7TmdNb2R1bGUsIFByb3ZpZGVyfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7TmdEb2NLaW5kSWNvbk1vZHVsZX0gZnJvbSAnQG5nLWRvYy9hcHAvY29tcG9uZW50cy9raW5kLWljb24nO1xuaW1wb3J0IHtwcm92aWRlVHlwZUNvbnRyb2x9IGZyb20gJ0BuZy1kb2MvYXBwL2hlbHBlcnMnO1xuaW1wb3J0IHtOZ0RvY0V4dHJhY3RWYWx1ZU1vZHVsZX0gZnJvbSAnQG5nLWRvYy9hcHAvcGlwZXMvZXh0cmFjdC12YWx1ZSc7XG5pbXBvcnQge1xuXHROZ0RvY0J1dHRvbkljb25Nb2R1bGUsXG5cdE5nRG9jQ29tYm9ib3hNb2R1bGUsXG5cdE5nRG9jRGF0YU1vZHVsZSxcblx0TmdEb2NGb2N1c2FibGVNb2R1bGUsXG5cdE5nRG9jSWNvbk1vZHVsZSxcblx0TmdEb2NMaXN0TW9kdWxlLFxuXHROZ0RvY09wdGlvbk1vZHVsZSxcblx0TmdEb2NUZXh0TW9kdWxlLFxuXHROZ0RvY1Rvb2x0aXBNb2R1bGUsXG59IGZyb20gJ0BuZy1kb2MvdWkta2l0JztcblxuaW1wb3J0IHtOZ0RvY1R5cGVBbGlhc0NvbnRyb2xDb21wb25lbnR9IGZyb20gJy4vdHlwZS1hbGlhcy1jb250cm9sLmNvbXBvbmVudCc7XG5cbmNvbnN0IHByb3ZpZGVyOiBQcm92aWRlciA9IHByb3ZpZGVUeXBlQ29udHJvbCgnTmdEb2NUeXBlQWxpYXMnLCBOZ0RvY1R5cGVBbGlhc0NvbnRyb2xDb21wb25lbnQpO1xuXG5ATmdNb2R1bGUoe1xuXHRkZWNsYXJhdGlvbnM6IFtOZ0RvY1R5cGVBbGlhc0NvbnRyb2xDb21wb25lbnRdLFxuXHRpbXBvcnRzOiBbXG5cdFx0Q29tbW9uTW9kdWxlLFxuXHRcdE5nRG9jQ29tYm9ib3hNb2R1bGUsXG5cdFx0TmdEb2NEYXRhTW9kdWxlLFxuXHRcdEZvcm1zTW9kdWxlLFxuXHRcdE5nRG9jT3B0aW9uTW9kdWxlLFxuXHRcdE5nRG9jTGlzdE1vZHVsZSxcblx0XHROZ0RvY0V4dHJhY3RWYWx1ZU1vZHVsZSxcblx0XHROZ0RvY1RleHRNb2R1bGUsXG5cdFx0TmdEb2NLaW5kSWNvbk1vZHVsZSxcblx0XHROZ0RvY1Rvb2x0aXBNb2R1bGUsXG5cdFx0TmdEb2NCdXR0b25JY29uTW9kdWxlLFxuXHRcdE5nRG9jRm9jdXNhYmxlTW9kdWxlLFxuXHRcdE5nRG9jSWNvbk1vZHVsZSxcblx0XSxcblx0cHJvdmlkZXJzOiBbcHJvdmlkZXJdLFxuXHRleHBvcnRzOiBbTmdEb2NUeXBlQWxpYXNDb250cm9sQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgTmdEb2NUeXBlQWxpYXNDb250cm9sTW9kdWxlIHt9XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZS1hbGlhcy1jb250cm9sLm1vZHVsZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvYXBwL3R5cGUtY29udHJvbHMvdHlwZS1hbGlhcy1jb250cm9sL3R5cGUtYWxpYXMtY29udHJvbC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQzdDLE9BQU8sRUFBQyxRQUFRLEVBQVcsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQzNDLE9BQU8sRUFBQyxtQkFBbUIsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBQ3JFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHFCQUFxQixDQUFDO0FBQ3ZELE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLGlDQUFpQyxDQUFDO0FBQ3hFLE9BQU8sRUFDTixxQkFBcUIsRUFDckIsbUJBQW1CLEVBQ25CLGVBQWUsRUFDZixvQkFBb0IsRUFDcEIsZUFBZSxFQUNmLGVBQWUsRUFDZixpQkFBaUIsRUFDakIsZUFBZSxFQUNmLGtCQUFrQixHQUNsQixNQUFNLGdCQUFnQixDQUFDO0FBRXhCLE9BQU8sRUFBQyw4QkFBOEIsRUFBQyxNQUFNLGdDQUFnQyxDQUFDOztBQUU5RSxNQUFNLFFBQVEsR0FBYSxrQkFBa0IsQ0FBQyxnQkFBZ0IsRUFBRSw4QkFBOEIsRUFBRSxFQUFDLEtBQUssRUFBRSxFQUFFLEVBQUMsQ0FBQyxDQUFDO0FBc0I3RyxNQUFNLE9BQU8sMkJBQTJCOzt3SEFBM0IsMkJBQTJCO3lIQUEzQiwyQkFBMkIsaUJBbkJ4Qiw4QkFBOEIsYUFFNUMsWUFBWTtRQUNaLG1CQUFtQjtRQUNuQixlQUFlO1FBQ2YsV0FBVztRQUNYLGlCQUFpQjtRQUNqQixlQUFlO1FBQ2YsdUJBQXVCO1FBQ3ZCLGVBQWU7UUFDZixtQkFBbUI7UUFDbkIsa0JBQWtCO1FBQ2xCLHFCQUFxQjtRQUNyQixvQkFBb0I7UUFDcEIsZUFBZSxhQUdOLDhCQUE4Qjt5SEFFNUIsMkJBQTJCLGFBSDVCLENBQUMsUUFBUSxDQUFDLFlBZHBCLFlBQVk7UUFDWixtQkFBbUI7UUFDbkIsZUFBZTtRQUNmLFdBQVc7UUFDWCxpQkFBaUI7UUFDakIsZUFBZTtRQUNmLHVCQUF1QjtRQUN2QixlQUFlO1FBQ2YsbUJBQW1CO1FBQ25CLGtCQUFrQjtRQUNsQixxQkFBcUI7UUFDckIsb0JBQW9CO1FBQ3BCLGVBQWU7MkZBS0osMkJBQTJCO2tCQXBCdkMsUUFBUTttQkFBQztvQkFDVCxZQUFZLEVBQUUsQ0FBQyw4QkFBOEIsQ0FBQztvQkFDOUMsT0FBTyxFQUFFO3dCQUNSLFlBQVk7d0JBQ1osbUJBQW1CO3dCQUNuQixlQUFlO3dCQUNmLFdBQVc7d0JBQ1gsaUJBQWlCO3dCQUNqQixlQUFlO3dCQUNmLHVCQUF1Qjt3QkFDdkIsZUFBZTt3QkFDZixtQkFBbUI7d0JBQ25CLGtCQUFrQjt3QkFDbEIscUJBQXFCO3dCQUNyQixvQkFBb0I7d0JBQ3BCLGVBQWU7cUJBQ2Y7b0JBQ0QsU0FBUyxFQUFFLENBQUMsUUFBUSxDQUFDO29CQUNyQixPQUFPLEVBQUUsQ0FBQyw4QkFBOEIsQ0FBQztpQkFDekMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbW1vbk1vZHVsZX0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7TmdNb2R1bGUsIFByb3ZpZGVyfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybXNNb2R1bGV9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7TmdEb2NLaW5kSWNvbk1vZHVsZX0gZnJvbSAnQG5nLWRvYy9hcHAvY29tcG9uZW50cy9raW5kLWljb24nO1xuaW1wb3J0IHtwcm92aWRlVHlwZUNvbnRyb2x9IGZyb20gJ0BuZy1kb2MvYXBwL2hlbHBlcnMnO1xuaW1wb3J0IHtOZ0RvY0V4dHJhY3RWYWx1ZU1vZHVsZX0gZnJvbSAnQG5nLWRvYy9hcHAvcGlwZXMvZXh0cmFjdC12YWx1ZSc7XG5pbXBvcnQge1xuXHROZ0RvY0J1dHRvbkljb25Nb2R1bGUsXG5cdE5nRG9jQ29tYm9ib3hNb2R1bGUsXG5cdE5nRG9jRGF0YU1vZHVsZSxcblx0TmdEb2NGb2N1c2FibGVNb2R1bGUsXG5cdE5nRG9jSWNvbk1vZHVsZSxcblx0TmdEb2NMaXN0TW9kdWxlLFxuXHROZ0RvY09wdGlvbk1vZHVsZSxcblx0TmdEb2NUZXh0TW9kdWxlLFxuXHROZ0RvY1Rvb2x0aXBNb2R1bGUsXG59IGZyb20gJ0BuZy1kb2MvdWkta2l0JztcblxuaW1wb3J0IHtOZ0RvY1R5cGVBbGlhc0NvbnRyb2xDb21wb25lbnR9IGZyb20gJy4vdHlwZS1hbGlhcy1jb250cm9sLmNvbXBvbmVudCc7XG5cbmNvbnN0IHByb3ZpZGVyOiBQcm92aWRlciA9IHByb3ZpZGVUeXBlQ29udHJvbCgnTmdEb2NUeXBlQWxpYXMnLCBOZ0RvY1R5cGVBbGlhc0NvbnRyb2xDb21wb25lbnQsIHtvcmRlcjogMTB9KTtcblxuQE5nTW9kdWxlKHtcblx0ZGVjbGFyYXRpb25zOiBbTmdEb2NUeXBlQWxpYXNDb250cm9sQ29tcG9uZW50XSxcblx0aW1wb3J0czogW1xuXHRcdENvbW1vbk1vZHVsZSxcblx0XHROZ0RvY0NvbWJvYm94TW9kdWxlLFxuXHRcdE5nRG9jRGF0YU1vZHVsZSxcblx0XHRGb3Jtc01vZHVsZSxcblx0XHROZ0RvY09wdGlvbk1vZHVsZSxcblx0XHROZ0RvY0xpc3RNb2R1bGUsXG5cdFx0TmdEb2NFeHRyYWN0VmFsdWVNb2R1bGUsXG5cdFx0TmdEb2NUZXh0TW9kdWxlLFxuXHRcdE5nRG9jS2luZEljb25Nb2R1bGUsXG5cdFx0TmdEb2NUb29sdGlwTW9kdWxlLFxuXHRcdE5nRG9jQnV0dG9uSWNvbk1vZHVsZSxcblx0XHROZ0RvY0ZvY3VzYWJsZU1vZHVsZSxcblx0XHROZ0RvY0ljb25Nb2R1bGUsXG5cdF0sXG5cdHByb3ZpZGVyczogW3Byb3ZpZGVyXSxcblx0ZXhwb3J0czogW05nRG9jVHlwZUFsaWFzQ29udHJvbENvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIE5nRG9jVHlwZUFsaWFzQ29udHJvbE1vZHVsZSB7fVxuIl19

package/fesm2015/ng-doc-app-components-playground.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Directive, isDevMode, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, EventEmitter, Output, ChangeDetectorRef, Injector, NgModule } from '@angular/core';
-import { extractValueOrThrow, extractValue } from '@ng-doc/core/helpers/extract-value';
-import { objectKeys } from '@ng-doc/core/helpers/object-keys';
+import { Directive, ViewContainerRef, Component, ChangeDetectionStrategy, Input, ViewChild, HostBinding, EventEmitter, isDevMode, Output, ChangeDetectorRef, Injector, NgModule } from '@angular/core';
+import { extractValue } from '@ng-doc/core/helpers/extract-value';
+import { objectKeys as objectKeys$1 } from '@ng-doc/core/helpers/object-keys';
 import * as i1$1 from '@ng-doc/app/classes/root-page';
 import { NgDocRootPage } from '@ng-doc/app/classes/root-page';
 import * as i3 from '@angular/forms';
@@ -10,10 +10,11 @@ import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
+import { isPlaygroundProperty, getTokenForType, getPlaygroundDemoToken } from '@ng-doc/app/helpers';
+import { objectKeys, isPresent, extractValueOrThrow } from '@ng-doc/core';
 import { pluck, takeUntil } from 'rxjs/operators';
 import * as i4 from '@ng-doc/ui-kit';
-import { NgDocLabelModule, NgDocTooltipModule, NgDocAsArrayModule, NgDocButtonIconModule, NgDocIconModule, NgDocTextModule, NgDocCheckboxModule, NgDocButtonModule } from '@ng-doc/ui-kit';
-import { isPlaygroundProperty, getTokenForType, getPlaygroundDemoToken } from '@ng-doc/app/helpers';
+import { NgDocLabelModule, NgDocTooltipModule, NgDocAsArrayModule, NgDocButtonIconModule, NgDocIconModule, NgDocTextModule, NgDocCheckboxModule, NgDocButtonModule, NgDocBindModule, NgDocRunModule } from '@ng-doc/ui-kit';
 import { __decorate, __metadata } from 'tslib';
 import { buildPlaygroundDemoTemplate } from '@ng-doc/core/helpers/build-playground-demo-template';
 import { formatHtml } from '@ng-doc/core/helpers/format-html';
@@ -44,67 +45,41 @@ class NgDocPlaygroundPropertyComponent {
         this.injector = injector;
         this.name = '';
     }
-    ngOnChanges({ property, control }) {
-        var _a, _b, _c, _d, _e, _f;
-        if (property && this.property) {
-            (_a = this.propertyControl) === null || _a === void 0 ? void 0 : _a.destroy();
-            this.propertyControl = undefined;
-            const type = isPlaygroundProperty(this.property) ? this.property.type : 'boolean';
-            const typeControl = (_b = this.getControlForType(type)) !== null && _b !== void 0 ? _b : this.getControlForTypeAlias(isPlaygroundProperty(this.property) ? this.property.options : undefined);
-            if (typeControl && this.propertyOutlet) {
-                this.propertyControl = this.propertyOutlet.createComponent(typeControl.control);
-                this.propertyControl.instance.name = this.name;
-                this.propertyControl.instance.description = this.tooltipContent;
-                this.propertyControl.instance.options = isPlaygroundProperty(this.property)
+    ngOnChanges({ property, control, typeControl }) {
+        var _a, _b, _c, _d, _e;
+        if ((property || control || typeControl) && this.property && this.typeControl) {
+            (_a = this.propertyTypeControl) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.propertyTypeControl = undefined;
+            if (this.typeControl && this.propertyOutlet) {
+                this.propertyTypeControl = this.propertyOutlet.createComponent(this.typeControl.control);
+                this.propertyTypeControl.instance.name = this.name;
+                this.propertyTypeControl.instance.description = this.tooltipContent;
+                this.propertyTypeControl.instance.options = isPlaygroundProperty(this.property)
                     ? this.property.options
                     : undefined;
-                this.propertyControl.instance.default = isPlaygroundProperty(this.property)
+                this.propertyTypeControl.instance.default = isPlaygroundProperty(this.property)
                     ? this.property.default
                     : undefined;
-                this.propertyControl.instance.writeValue((_c = this.control) === null || _c === void 0 ? void 0 : _c.value);
-                this.option = typeControl.options;
-            }
-            else if (isDevMode()) {
-                console.warn(`NgDocPlayground didn't find the control for the @Input "${this.name}", the type "${type}" was not recognized'`);
+                this.propertyTypeControl.instance.writeValue((_b = this.control) === null || _b === void 0 ? void 0 : _b.value);
+                this.option = this.typeControl.options;
             }
         }
         if (control) {
-            (_d = this.control) === null || _d === void 0 ? void 0 : _d.registerOnChange((value) => { var _a, _b; return (_b = (_a = this.propertyControl) === null || _a === void 0 ? void 0 : _a.instance) === null || _b === void 0 ? void 0 : _b.writeValue(value); });
-            (_e = this.propertyControl) === null || _e === void 0 ? void 0 : _e.instance.registerOnChange((value) => { var _a; return (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(value); });
-            (_f = this.propertyControl) === null || _f === void 0 ? void 0 : _f.instance.registerOnTouched(() => { var _a; return (_a = this.control) === null || _a === void 0 ? void 0 : _a.markAsTouched(); });
+            (_c = this.control) === null || _c === void 0 ? void 0 : _c.registerOnChange((value) => { var _a, _b; return (_b = (_a = this.propertyTypeControl) === null || _a === void 0 ? void 0 : _a.instance) === null || _b === void 0 ? void 0 : _b.writeValue(value); });
+            (_d = this.propertyTypeControl) === null || _d === void 0 ? void 0 : _d.instance.registerOnChange((value) => { var _a; return (_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(value); });
+            (_e = this.propertyTypeControl) === null || _e === void 0 ? void 0 : _e.instance.registerOnTouched(() => { var _a; return (_a = this.control) === null || _a === void 0 ? void 0 : _a.markAsTouched(); });
         }
     }
     get hasPropertyControl() {
-        return !!this.propertyControl;
+        return !!this.propertyTypeControl;
     }
     get tooltipContent() {
         var _a;
         return this.property && isPlaygroundProperty(this.property) ? (_a = this.property.description) !== null && _a !== void 0 ? _a : '' : '';
     }
-    getControlForType(type) {
-        const token = getTokenForType(type);
-        return token ? this.injector.get(token) : undefined;
-    }
-    getControlForTypeAlias(options) {
-        if (options && options.length) {
-            let optionsIsValid = true;
-            try {
-                // checking that all values are extractable
-                options.forEach((item) => extractValueOrThrow(item));
-            }
-            catch (_a) {
-                optionsIsValid = false;
-            }
-            if (optionsIsValid) {
-                const token = getTokenForType('NgDocTypeAlias');
-                return token ? this.injector.get(token) : undefined;
-            }
-        }
-        return undefined;
-    }
 }
 NgDocPlaygroundPropertyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundPropertyComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NgDocPlaygroundPropertyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", control: "control" }, host: { properties: { "attr.data-has-property-control": "this.hasPropertyControl" } }, viewQueries: [{ propertyName: "propertyOutlet", first: true, predicate: ["propertyOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span [ngDocTooltip]=\"tooltipContent\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"], dependencies: [{ kind: "component", type: i4.NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: i4.NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgDocPlaygroundPropertyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: { name: "name", property: "property", typeControl: "typeControl", control: "control" }, host: { properties: { "attr.data-has-property-control": "this.hasPropertyControl" } }, viewQueries: [{ propertyName: "propertyOutlet", first: true, predicate: ["propertyOutlet"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span [ngDocTooltip]=\"tooltipContent\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"], dependencies: [{ kind: "component", type: i4.NgDocLabelComponent, selector: "label[ng-doc-label]", inputs: ["ng-doc-label", "align"] }, { kind: "directive", type: i4.NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundPropertyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng-doc-playground-property', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [ng-doc-label]=\"option?.hideLabel ? '' : labelContent\">\n\t<ng-template #labelContent>\n\t\t<span [ngDocTooltip]=\"tooltipContent\" [canOpen]=\"!!tooltipContent\"\n\t\t\t  [positions]=\"['left-center', 'top-right', 'bottom-right']\">{{name}}</span>\n\t</ng-template>\n\t<ng-container #propertyOutlet></ng-container>\n</label>\n", styles: [":host{display:block}:host[data-has-property-control=false]{display:none}\n"] }]
@@ -112,6 +87,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                 type: Input
             }], property: [{
                 type: Input
+            }], typeControl: [{
+                type: Input
             }], control: [{
                 type: Input
             }], propertyOutlet: [{
@@ -123,25 +100,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
             }] } });
 
 class NgDocPlaygroundPropertiesComponent {
-    constructor(breakpointObserver) {
+    constructor(breakpointObserver, injector) {
         this.breakpointObserver = breakpointObserver;
+        this.injector = injector;
         this.recreateDemo = false;
         this.recreateDemoChange = new EventEmitter();
         this.resetForm = new EventEmitter();
         this.breakpoints = [Breakpoints.XSmall];
+        this.propertyControls = [];
+        this.contentTypeControl = this.getControlForType('boolean');
         this.observer = this.breakpointObserver.observe(this.breakpoints).pipe(pluck('matches'));
     }
+    ngOnChanges({ properties }) {
+        if (properties && this.properties) {
+            this.propertyControls = objectKeys(this.properties)
+                .map((key) => {
+                if (this.properties) {
+                    const property = this.properties[key];
+                    const typeControl = this.getTypeControl(property);
+                    if (typeControl) {
+                        return {
+                            propertyName: String(key),
+                            property,
+                            typeControl,
+                        };
+                    }
+                }
+                return null;
+            })
+                .filter(isPresent)
+                .sort((a, b) => {
+                var _a, _b;
+                const aOrder = (_a = a.typeControl.options) === null || _a === void 0 ? void 0 : _a.order;
+                const bOrder = (_b = b.typeControl.options) === null || _b === void 0 ? void 0 : _b.order;
+                if (isPresent(aOrder) && isPresent(bOrder)) {
+                    return aOrder - bOrder;
+                }
+                if (isPresent(aOrder)) {
+                    return -1;
+                }
+                if (isPresent(bOrder)) {
+                    return 1;
+                }
+                return a.property.name.localeCompare(b.property.name);
+            });
+        }
+    }
     getFormControl(controlType, key) {
         var _a;
         return (_a = this.form.get(controlType)) === null || _a === void 0 ? void 0 : _a.get(key);
     }
+    getTypeControl(property) {
+        var _a;
+        const type = property.type;
+        const typeControl = (_a = this.getControlForType(type)) !== null && _a !== void 0 ? _a : this.getControlForTypeAlias(isPlaygroundProperty(property) ? property.options : undefined);
+        if (!typeControl && isDevMode()) {
+            console.warn(`NgDocPlayground didn't find the control for the @Input "${property.name}", the type "${type}" was not recognized'`);
+        }
+        return typeControl;
+    }
+    getControlForType(type) {
+        const token = getTokenForType(type);
+        return token ? this.injector.get(token) : undefined;
+    }
+    getControlForTypeAlias(options) {
+        if (options && options.length) {
+            let optionsIsValid = true;
+            try {
+                // checking that all values are extractable
+                options.forEach((item) => extractValueOrThrow(item));
+            }
+            catch (_a) {
+                optionsIsValid = false;
+            }
+            if (optionsIsValid) {
+                const token = getTokenForType('NgDocTypeAlias');
+                return token ? this.injector.get(token) : undefined;
+            }
+        }
+        return undefined;
+    }
 }
-NgDocPlaygroundPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
-NgDocPlaygroundPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", dynamicContent: "dynamicContent", recreateDemo: "recreateDemo" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, ngImport: i0, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"(properties | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let property of properties | keyvalue\"\n\t\t\t\t[name]=\"property.value.name\"\n\t\t\t\t[property]=\"property.value\"\n\t\t\t\t[control]=\"getFormControl('properties', property.key)\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[control]=\"getFormControl('content', content.key)\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}:host .ng-doc-playground-properties-wrapper.vertical{flex-direction:column}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-demos{margin-right:0;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-properties{width:100%}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-demos{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: i4.NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "size"] }, { kind: "component", type: i4.NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: i4.NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "component", type: i4.NgDocCheckboxComponent, selector: "ng-doc-checkbox", inputs: ["color"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgDocButtonComponent, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: ["size", "color", "rounded"] }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "control"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NgDocPlaygroundPropertiesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, deps: [{ token: i1.BreakpointObserver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+NgDocPlaygroundPropertiesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.4", type: NgDocPlaygroundPropertiesComponent, selector: "ng-doc-playground-properties", inputs: { form: "form", properties: "properties", dynamicContent: "dynamicContent", recreateDemo: "recreateDemo" }, outputs: { recreateDemoChange: "recreateDemoChange", resetForm: "resetForm" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"propertyControls.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let propertyControl of propertyControls\"\n\t\t\t\t[name]=\"propertyControl.property.name\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'properties': propertyControl.propertyName\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[typeControl]=\"contentTypeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'content': content.key\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}:host .ng-doc-playground-properties-wrapper.vertical{flex-direction:column}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-demos{margin-right:0;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-properties{width:100%}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-demos{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgDocTooltipDirective, selector: "[ngDocTooltip]", inputs: ["ngDocTooltip", "delay", "displayOrigin", "pointerOrigin", "positions", "canOpen", "panelClass", "minHeight", "maxHeight", "height", "minWidth", "maxWidth", "width"], outputs: ["beforeOpen", "afterOpen", "beforeClose", "afterClose"], exportAs: ["ngDocTooltip"] }, { kind: "component", type: i4.NgDocIconComponent, selector: "ng-doc-icon", inputs: ["icon", "size"] }, { kind: "component", type: i4.NgDocTextComponent, selector: "[ng-doc-text]", inputs: ["size", "color", "align", "absoluteContent"] }, { kind: "directive", type: i4.NgDocTextRightDirective, selector: "[ngDocTextRight]" }, { kind: "component", type: i4.NgDocCheckboxComponent, selector: "ng-doc-checkbox", inputs: ["color"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.NgDocButtonComponent, selector: "button[ng-doc-button], a[ng-doc-button], button[ng-doc-button-flat], a[ng-doc-button-flat], button[ng-doc-button-text], a[ng-doc-button-text]", inputs: ["size", "color", "rounded"] }, { kind: "component", type: NgDocPlaygroundPropertyComponent, selector: "ng-doc-playground-property", inputs: ["name", "property", "typeControl", "control"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: i4.NgDocBindPipe, name: "ngDocBind" }, { kind: "pipe", type: i4.NgDocRunPipe, name: "ngDocRun" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundPropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng-doc-playground-properties', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"(properties | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let property of properties | keyvalue\"\n\t\t\t\t[name]=\"property.value.name\"\n\t\t\t\t[property]=\"property.value\"\n\t\t\t\t[control]=\"getFormControl('properties', property.key)\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[control]=\"getFormControl('content', content.key)\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}:host .ng-doc-playground-properties-wrapper.vertical{flex-direction:column}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-demos{margin-right:0;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-properties{width:100%}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-demos{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; }, propDecorators: { form: [{
+            args: [{ selector: 'ng-doc-playground-properties', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ng-doc-playground-properties-wrapper\" [class.vertical]=\"observer | async\">\n\t<div class=\"ng-doc-playground-demos\">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"ng-doc-playground-properties\">\n\t\t<div class=\"ng-doc-playground-header\">\n\t\t\t<h4 ng-doc-text>Playground</h4>\n\t\t\t<button ng-doc-button color=\"red\" (click)=\"resetForm.emit()\">Reset</button>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-setting\">\n\t\t\t<ng-doc-checkbox [(ngModel)]=\"recreateDemo\" (ngModelChange)=\"recreateDemoChange.emit($event)\">\n\t\t\t\t<span\n\t\t\t\t\tng-doc-text\n\t\t\t\t\t[ngDocTooltip]=\"'Recreates demo everytime\\none of the input has changed'\"\n\t\t\t\t\t[positions]=\"['bottom-right', 'left-center']\"\n\t\t\t\t>\n\t\t\t\t\tRecreate\n\t\t\t\t\t<ng-doc-icon icon=\"info\" ngDocTextRight></ng-doc-icon>\n\t\t\t\t</span>\n\t\t\t</ng-doc-checkbox>\n\t\t</div>\n\t\t<div class=\"ng-doc-playground-divider\"></div>\n\t\t<ng-container *ngIf=\"propertyControls.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Settings</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let propertyControl of propertyControls\"\n\t\t\t\t[name]=\"propertyControl.property.name\"\n\t\t\t\t[property]=\"propertyControl.property\"\n\t\t\t\t[typeControl]=\"propertyControl.typeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'properties': propertyControl.propertyName\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\n\t\t<ng-container *ngIf=\"(dynamicContent | keyvalue)?.length\">\n\t\t\t<h5 class=\"ng-doc-title\" ng-doc-text>Content</h5>\n\t\t\t<ng-doc-playground-property\n\t\t\t\t*ngFor=\"let content of dynamicContent | keyvalue\"\n\t\t\t\t[name]=\"content.value.label\"\n\t\t\t\t[property]=\"content.value\"\n\t\t\t\t[typeControl]=\"contentTypeControl\"\n\t\t\t\t[control]=\"getFormControl | ngDocBind: this | ngDocRun: 'content': content.key\"\n\t\t\t>\n\t\t\t</ng-doc-playground-property>\n\t\t</ng-container>\n\t</div>\n</div>\n", styles: [":host .ng-doc-playground-properties-wrapper{position:relative;display:flex}:host .ng-doc-playground-properties-wrapper.vertical{flex-direction:column}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-demos{margin-right:0;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper.vertical .ng-doc-playground-properties{width:100%}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-demos{display:flex;flex-direction:column;width:100%;overflow:hidden;margin-right:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties{flex-shrink:0;width:300px;padding:calc(var(--ng-doc-base-gutter) * 2) calc(var(--ng-doc-base-gutter) * 3);background-color:var(--ng-doc-base-1);border-radius:var(--ng-doc-base-gutter)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties ng-doc-playground-property:not(:last-child){margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-controls{display:flex;justify-content:flex-end}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:calc(var(--ng-doc-base-gutter) * 2)}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-header h4{margin:0}:host .ng-doc-playground-properties-wrapper .ng-doc-playground-properties .ng-doc-playground-setting{display:flex;flex-direction:column}:host .ng-doc-playground-properties-wrapper .ng-doc-title{margin-top:0;margin-bottom:calc(var(--ng-doc-base-gutter) + var(--ng-doc-base-gutter) / 2)}:host .ng-doc-playground-divider{margin:calc(var(--ng-doc-base-gutter) * 2) 0;height:1px;background-color:var(--ng-doc-base-2)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.BreakpointObserver }, { type: i0.Injector }]; }, propDecorators: { form: [{
                 type: Input
             }], properties: [{
                 type: Input
@@ -208,7 +253,7 @@ let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
     getActiveContent() {
         var _a, _b;
         const formData = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls.content.value) !== null && _b !== void 0 ? _b : {};
-        return objectKeys(formData).reduce((result, key) => {
+        return objectKeys$1(formData).reduce((result, key) => {
             var _a, _b, _c;
             result[key] = formData[key] ? (_c = (_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b[key].template) !== null && _c !== void 0 ? _c : '' : '';
             return result;
@@ -217,7 +262,7 @@ let NgDocPlaygroundDemoComponent = class NgDocPlaygroundDemoComponent {
     getActiveInputs() {
         var _a, _b;
         const formData = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.controls.properties.value) !== null && _b !== void 0 ? _b : {};
-        return objectKeys(formData).reduce((result, key) => {
+        return objectKeys$1(formData).reduce((result, key) => {
             var _a, _b;
             const property = (_a = this.properties) === null || _a === void 0 ? void 0 : _a[key];
             if (property) {
@@ -284,7 +329,7 @@ class NgDocPlaygroundComponent {
     }
     getPropertiesFormValues() {
         var _a;
-        return objectKeys((_a = this.properties) !== null && _a !== void 0 ? _a : {}).reduce((controls, key) => {
+        return objectKeys$1((_a = this.properties) !== null && _a !== void 0 ? _a : {}).reduce((controls, key) => {
             var _a, _b;
             if (this.properties) {
                 controls[key] = extractValue((_b = (_a = this.properties[key]) === null || _a === void 0 ? void 0 : _a.default) !== null && _b !== void 0 ? _b : 'undefined');
@@ -294,7 +339,7 @@ class NgDocPlaygroundComponent {
     }
     getContentFormValues() {
         var _a, _b;
-        return objectKeys((_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : {}).reduce((controls, key) => {
+        return objectKeys$1((_b = (_a = this.configuration) === null || _a === void 0 ? void 0 : _a.content) !== null && _b !== void 0 ? _b : {}).reduce((controls, key) => {
             var _a;
             if ((_a = this.configuration) === null || _a === void 0 ? void 0 : _a.content) {
                 controls[key] = false;
@@ -336,7 +381,9 @@ NgDocPlaygroundModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", v
         NgDocCheckboxModule,
         FormsModule,
         NgDocButtonModule,
-        NgDocDemoDisplayerModule], exports: [NgDocPlaygroundComponent,
+        NgDocDemoDisplayerModule,
+        NgDocBindModule,
+        NgDocRunModule], exports: [NgDocPlaygroundComponent,
         NgDocPlaygroundPropertyComponent,
         NgDocPlaygroundPropertiesComponent,
         NgDocPlaygroundDemoComponent] });
@@ -352,7 +399,9 @@ NgDocPlaygroundModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
         NgDocCheckboxModule,
         FormsModule,
         NgDocButtonModule,
-        NgDocDemoDisplayerModule] });
+        NgDocDemoDisplayerModule,
+        NgDocBindModule,
+        NgDocRunModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImport: i0, type: NgDocPlaygroundModule, decorators: [{
             type: NgModule,
             args: [{
@@ -376,6 +425,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.4", ngImpor
                         FormsModule,
                         NgDocButtonModule,
                         NgDocDemoDisplayerModule,
+                        NgDocBindModule,
+                        NgDocRunModule,
                     ],
                     exports: [
                         NgDocPlaygroundComponent,