@lenne.tech/ng-base 13.6.7 → 13.9.0

package/esm2020/shared/public-api.mjs

@@ -21,11 +21,15 @@ export * from './services/user.service';
 export * from './services/loader.service';
 export * from './services/scroll.service';
 export * from './services/image.service';
+export * from './services/toast.service';
+export * from './services/breadcrumb.service';
 // Enums
 export * from './enums/comparison-operator.enum';
 export * from './enums/graphql-request-type.enum';
 export * from './enums/logical-operator.enum';
 export * from './enums/sort-order.enum';
+export * from './enums/toast-type.enum';
+export * from './enums/skeleton-type.enum';
 // Interfaces
 export * from './interfaces/base-module-config.interface';
 export * from './interfaces/can-component-deactivate.interface';
@@ -41,6 +45,8 @@ export * from './interfaces/single-filter-input.interface';
 export * from './interfaces/sort-input.interface';
 export * from './interfaces/find-args.interface';
 export * from './interfaces/time-components.interface';
+export * from './interfaces/toast.interface';
+export * from './interfaces/breadcrumb.interface';
 // Types
 export * from './types/storage.type';
 export * from './types/graphql-fields.type';
@@ -48,4 +54,4 @@ export * from './types/graphql-fields.type';
 export * from './validators/match.validator';
 // Functions
 export * from './functions/ws-client.function';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWJhc2Uvc2hhcmVkL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxVQUFVO0FBQ1YsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxzQkFBc0IsQ0FBQztBQUVyQyxXQUFXO0FBQ1gsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxpQ0FBaUMsQ0FBQztBQUNoRCxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDBCQUEwQixDQUFDO0FBRXpDLFFBQVE7QUFDUixjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLHlCQUF5QixDQUFDO0FBRXhDLGFBQWE7QUFDYixjQUFjLDJDQUEyQyxDQUFDO0FBQzFELGNBQWMsaURBQWlELENBQUM7QUFDaEUsY0FBYyw4Q0FBOEMsQ0FBQztBQUM3RCxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYyxxQ0FBcUMsQ0FBQztBQUNwRCxjQUFjLHdDQUF3QyxDQUFDO0FBQ3ZELGNBQWMsOENBQThDLENBQUM7QUFDN0QsY0FBYyxnREFBZ0QsQ0FBQztBQUMvRCxjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsNENBQTRDLENBQUM7QUFDM0QsY0FBYyxtQ0FBbUMsQ0FBQztBQUNsRCxjQUFjLGtDQUFrQyxDQUFDO0FBQ2pELGNBQWMsd0NBQXdDLENBQUM7QUFFdkQsUUFBUTtBQUNSLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyw2QkFBNkIsQ0FBQztBQUU1QyxhQUFhO0FBQ2IsY0FBYyw4QkFBOEIsQ0FBQztBQUU3QyxZQUFZO0FBQ1osY0FBYyxnQ0FBZ0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXhwb3J0cyBmb3IgcHVibGljIEFQSVxuICovXG5cbi8vIENsYXNzZXNcbmV4cG9ydCAqIGZyb20gJy4vY2xhc3Nlcy9iYXNpYy11c2VyLmNsYXNzJztcbmV4cG9ydCAqIGZyb20gJy4vY2xhc3Nlcy9ncmFwaHFsLWVudW0uY2xhc3MnO1xuZXhwb3J0ICogZnJvbSAnLi9jbGFzc2VzL2dyYXBocWwtbWV0YS5jbGFzcyc7XG5leHBvcnQgKiBmcm9tICcuL2NsYXNzZXMvZ3JhcGhxbC10eXBlLmNsYXNzJztcbmV4cG9ydCAqIGZyb20gJy4vY2xhc3Nlcy9oZWxwZXIuY2xhc3MnO1xuZXhwb3J0ICogZnJvbSAnLi9jbGFzc2VzL3N0YW5kYXJkLmNsYXNzJztcbmV4cG9ydCAqIGZyb20gJy4vY2xhc3Nlcy9hdXRoLmNsYXNzJztcblxuLy8gU2VydmljZXNcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvYXV0aC5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvZ3JhcGhxbC5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvZ3JhcGhxbC1tZXRhLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9ncmFwaHFsLXBsdXMuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL2Zvcm1zLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9zdG9yYWdlLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy93cy5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvdXNlci5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvbG9hZGVyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9zY3JvbGwuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL2ltYWdlLnNlcnZpY2UnO1xuXG4vLyBFbnVtc1xuZXhwb3J0ICogZnJvbSAnLi9lbnVtcy9jb21wYXJpc29uLW9wZXJhdG9yLmVudW0nO1xuZXhwb3J0ICogZnJvbSAnLi9lbnVtcy9ncmFwaHFsLXJlcXVlc3QtdHlwZS5lbnVtJztcbmV4cG9ydCAqIGZyb20gJy4vZW51bXMvbG9naWNhbC1vcGVyYXRvci5lbnVtJztcbmV4cG9ydCAqIGZyb20gJy4vZW51bXMvc29ydC1vcmRlci5lbnVtJztcblxuLy8gSW50ZXJmYWNlc1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2Jhc2UtbW9kdWxlLWNvbmZpZy5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2Nhbi1jb21wb25lbnQtZGVhY3RpdmF0ZS5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2NvbWJpbmVkLWZpbHRlci1pbnB1dC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2ZpZWxkLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvZmllbGQtb2JqZWN0LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvZmlsdGVyLWlucHV0LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvZ3JhcGhxbC1vcHRpb25zLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvZ3JhcGhxbC1wbHVzLW9wdGlvbnMuaW50ZXJmYWNlbic7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvZ3JhcGhxbC10eXBlLWNvbGxlY3Rpb24uaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9ncmFwaHFsLWZpZWxkcy1vYmplY3QuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9zaW5nbGUtZmlsdGVyLWlucHV0LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvc29ydC1pbnB1dC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2ZpbmQtYXJncy5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL3RpbWUtY29tcG9uZW50cy5pbnRlcmZhY2UnO1xuXG4vLyBUeXBlc1xuZXhwb3J0ICogZnJvbSAnLi90eXBlcy9zdG9yYWdlLnR5cGUnO1xuZXhwb3J0ICogZnJvbSAnLi90eXBlcy9ncmFwaHFsLWZpZWxkcy50eXBlJztcblxuLy8gVmFsaWRhdG9yc1xuZXhwb3J0ICogZnJvbSAnLi92YWxpZGF0b3JzL21hdGNoLnZhbGlkYXRvcic7XG5cbi8vIEZ1bmN0aW9uc1xuZXhwb3J0ICogZnJvbSAnLi9mdW5jdGlvbnMvd3MtY2xpZW50LmZ1bmN0aW9uJztcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWJhc2Uvc2hhcmVkL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxVQUFVO0FBQ1YsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxzQkFBc0IsQ0FBQztBQUVyQyxXQUFXO0FBQ1gsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxpQ0FBaUMsQ0FBQztBQUNoRCxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDBCQUEwQixDQUFDO0FBQ3pDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYywrQkFBK0IsQ0FBQztBQUU5QyxRQUFRO0FBQ1IsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsNEJBQTRCLENBQUM7QUFFM0MsYUFBYTtBQUNiLGNBQWMsMkNBQTJDLENBQUM7QUFDMUQsY0FBYyxpREFBaUQsQ0FBQztBQUNoRSxjQUFjLDhDQUE4QyxDQUFDO0FBQzdELGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyxxQ0FBcUMsQ0FBQztBQUNwRCxjQUFjLHFDQUFxQyxDQUFDO0FBQ3BELGNBQWMsd0NBQXdDLENBQUM7QUFDdkQsY0FBYyw4Q0FBOEMsQ0FBQztBQUM3RCxjQUFjLGdEQUFnRCxDQUFDO0FBQy9ELGNBQWMsOENBQThDLENBQUM7QUFDN0QsY0FBYyw0Q0FBNEMsQ0FBQztBQUMzRCxjQUFjLG1DQUFtQyxDQUFDO0FBQ2xELGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyx3Q0FBd0MsQ0FBQztBQUN2RCxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsbUNBQW1DLENBQUM7QUFFbEQsUUFBUTtBQUNSLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyw2QkFBNkIsQ0FBQztBQUU1QyxhQUFhO0FBQ2IsY0FBYyw4QkFBOEIsQ0FBQztBQUU3QyxZQUFZO0FBQ1osY0FBYyxnQ0FBZ0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXhwb3J0cyBmb3IgcHVibGljIEFQSVxuICovXG5cbi8vIENsYXNzZXNcbmV4cG9ydCAqIGZyb20gJy4vY2xhc3Nlcy9iYXNpYy11c2VyLmNsYXNzJztcbmV4cG9ydCAqIGZyb20gJy4vY2xhc3Nlcy9ncmFwaHFsLWVudW0uY2xhc3MnO1xuZXhwb3J0ICogZnJvbSAnLi9jbGFzc2VzL2dyYXBocWwtbWV0YS5jbGFzcyc7XG5leHBvcnQgKiBmcm9tICcuL2NsYXNzZXMvZ3JhcGhxbC10eXBlLmNsYXNzJztcbmV4cG9ydCAqIGZyb20gJy4vY2xhc3Nlcy9oZWxwZXIuY2xhc3MnO1xuZXhwb3J0ICogZnJvbSAnLi9jbGFzc2VzL3N0YW5kYXJkLmNsYXNzJztcbmV4cG9ydCAqIGZyb20gJy4vY2xhc3Nlcy9hdXRoLmNsYXNzJztcblxuLy8gU2VydmljZXNcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvYXV0aC5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvZ3JhcGhxbC5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvZ3JhcGhxbC1tZXRhLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9ncmFwaHFsLXBsdXMuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL2Zvcm1zLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9zdG9yYWdlLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy93cy5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvdXNlci5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvbG9hZGVyLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy9zY3JvbGwuc2VydmljZSc7XG5leHBvcnQgKiBmcm9tICcuL3NlcnZpY2VzL2ltYWdlLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9zZXJ2aWNlcy90b2FzdC5zZXJ2aWNlJztcbmV4cG9ydCAqIGZyb20gJy4vc2VydmljZXMvYnJlYWRjcnVtYi5zZXJ2aWNlJztcblxuLy8gRW51bXNcbmV4cG9ydCAqIGZyb20gJy4vZW51bXMvY29tcGFyaXNvbi1vcGVyYXRvci5lbnVtJztcbmV4cG9ydCAqIGZyb20gJy4vZW51bXMvZ3JhcGhxbC1yZXF1ZXN0LXR5cGUuZW51bSc7XG5leHBvcnQgKiBmcm9tICcuL2VudW1zL2xvZ2ljYWwtb3BlcmF0b3IuZW51bSc7XG5leHBvcnQgKiBmcm9tICcuL2VudW1zL3NvcnQtb3JkZXIuZW51bSc7XG5leHBvcnQgKiBmcm9tICcuL2VudW1zL3RvYXN0LXR5cGUuZW51bSc7XG5leHBvcnQgKiBmcm9tICcuL2VudW1zL3NrZWxldG9uLXR5cGUuZW51bSc7XG5cbi8vIEludGVyZmFjZXNcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9iYXNlLW1vZHVsZS1jb25maWcuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9jYW4tY29tcG9uZW50LWRlYWN0aXZhdGUuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9jb21iaW5lZC1maWx0ZXItaW5wdXQuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9maWVsZC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2ZpZWxkLW9iamVjdC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2ZpbHRlci1pbnB1dC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2dyYXBocWwtb3B0aW9ucy5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2dyYXBocWwtcGx1cy1vcHRpb25zLmludGVyZmFjZW4nO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2dyYXBocWwtdHlwZS1jb2xsZWN0aW9uLmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvZ3JhcGhxbC1maWVsZHMtb2JqZWN0LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvc2luZ2xlLWZpbHRlci1pbnB1dC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL3NvcnQtaW5wdXQuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy9maW5kLWFyZ3MuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy90aW1lLWNvbXBvbmVudHMuaW50ZXJmYWNlJztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcy90b2FzdC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzL2JyZWFkY3J1bWIuaW50ZXJmYWNlJztcblxuLy8gVHlwZXNcbmV4cG9ydCAqIGZyb20gJy4vdHlwZXMvc3RvcmFnZS50eXBlJztcbmV4cG9ydCAqIGZyb20gJy4vdHlwZXMvZ3JhcGhxbC1maWVsZHMudHlwZSc7XG5cbi8vIFZhbGlkYXRvcnNcbmV4cG9ydCAqIGZyb20gJy4vdmFsaWRhdG9ycy9tYXRjaC52YWxpZGF0b3InO1xuXG4vLyBGdW5jdGlvbnNcbmV4cG9ydCAqIGZyb20gJy4vZnVuY3Rpb25zL3dzLWNsaWVudC5mdW5jdGlvbic7XG4iXX0=

package/esm2020/shared/services/breadcrumb.service.mjs

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, filter } from 'rxjs';
+import { NavigationEnd } from '@angular/router';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/router";
+export class BreadcrumbService {
+    constructor(router) {
+        this.router = router;
+        this._breadcrumbs = new BehaviorSubject([]);
+        this.subscribeToRouteChanges();
+    }
+    set breadcrumbs(value) {
+        this._breadcrumbs.next(value);
+    }
+    get breadcrumbsObservable() {
+        return this._breadcrumbs.asObservable();
+    }
+    /**
+     * Subscribe to route changes and add element to breadcrumb
+     */
+    subscribeToRouteChanges() {
+        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event) => {
+            const root = this.router.routerState.snapshot.root;
+            const breadcrumbs = [];
+            this.addBreadcrumb(root, [], breadcrumbs);
+            this.breadcrumbs = breadcrumbs;
+        });
+    }
+    /**
+     * Add element to breadcrumb
+     *
+     * @param route
+     * @param parentUrl
+     * @param breadcrumbs
+     * @private
+     */
+    addBreadcrumb(route, parentUrl, breadcrumbs) {
+        if (route) {
+            const routeUrl = parentUrl.concat(route.url.map((url) => url.path));
+            if (route.data?.breadcrumb) {
+                const breadcrumb = {
+                    label: this.getLabel(route.data),
+                    url: '/' + routeUrl.join('/'),
+                };
+                breadcrumbs.push(breadcrumb);
+            }
+            this.addBreadcrumb(route.firstChild, routeUrl, breadcrumbs);
+        }
+    }
+    /**
+     * Get label for breadcrumb
+     *
+     * @param data
+     * @private
+     */
+    getLabel(data) {
+        return typeof data.breadcrumb === 'function' ? data.breadcrumb(data) : data.breadcrumb;
+    }
+}
+BreadcrumbService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BreadcrumbService, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+BreadcrumbService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BreadcrumbService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Router }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnJlYWRjcnVtYi5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctYmFzZS9zaGFyZWQvc2VydmljZXMvYnJlYWRjcnVtYi5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0MsT0FBTyxFQUFnQyxhQUFhLEVBQVUsTUFBTSxpQkFBaUIsQ0FBQzs7O0FBTXRGLE1BQU0sT0FBTyxpQkFBaUI7SUFXNUIsWUFBb0IsTUFBYztRQUFkLFdBQU0sR0FBTixNQUFNLENBQVE7UUFWakIsaUJBQVksR0FBRyxJQUFJLGVBQWUsQ0FBZSxFQUFFLENBQUMsQ0FBQztRQVdwRSxJQUFJLENBQUMsdUJBQXVCLEVBQUUsQ0FBQztJQUNqQyxDQUFDO0lBVkQsSUFBSSxXQUFXLENBQUMsS0FBbUI7UUFDakMsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELElBQUkscUJBQXFCO1FBQ3ZCLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMxQyxDQUFDO0lBTUQ7O09BRUc7SUFDSCx1QkFBdUI7UUFDckIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsS0FBSyxZQUFZLGFBQWEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDN0YsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztZQUNuRCxNQUFNLFdBQVcsR0FBaUIsRUFBRSxDQUFDO1lBQ3JDLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxFQUFFLEVBQUUsRUFBRSxXQUFXLENBQUMsQ0FBQztZQUMxQyxJQUFJLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztRQUNqQyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7Ozs7OztPQU9HO0lBQ0ssYUFBYSxDQUFDLEtBQTZCLEVBQUUsU0FBbUIsRUFBRSxXQUF5QjtRQUNqRyxJQUFJLEtBQUssRUFBRTtZQUNULE1BQU0sUUFBUSxHQUFHLFNBQVMsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDO1lBRXBFLElBQUksS0FBSyxDQUFDLElBQUksRUFBRSxVQUFVLEVBQUU7Z0JBQzFCLE1BQU0sVUFBVSxHQUFHO29CQUNqQixLQUFLLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDO29CQUNoQyxHQUFHLEVBQUUsR0FBRyxHQUFHLFFBQVEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDO2lCQUM5QixDQUFDO2dCQUNGLFdBQVcsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7YUFDOUI7WUFFRCxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxVQUFVLEVBQUUsUUFBUSxFQUFFLFdBQVcsQ0FBQyxDQUFDO1NBQzdEO0lBQ0gsQ0FBQztJQUVEOzs7OztPQUtHO0lBQ0ssUUFBUSxDQUFDLElBQVU7UUFDekIsT0FBTyxPQUFPLElBQUksQ0FBQyxVQUFVLEtBQUssVUFBVSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO0lBQ3pGLENBQUM7OzhHQTNEVSxpQkFBaUI7a0hBQWpCLGlCQUFpQixjQUZoQixNQUFNOzJGQUVQLGlCQUFpQjtrQkFIN0IsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIGZpbHRlciB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQWN0aXZhdGVkUm91dGVTbmFwc2hvdCwgRGF0YSwgTmF2aWdhdGlvbkVuZCwgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IEJyZWFkY3J1bWIgfSBmcm9tICcuLi9pbnRlcmZhY2VzL2JyZWFkY3J1bWIuaW50ZXJmYWNlJztcblxuQEluamVjdGFibGUoe1xuICBwcm92aWRlZEluOiAncm9vdCcsXG59KVxuZXhwb3J0IGNsYXNzIEJyZWFkY3J1bWJTZXJ2aWNlIHtcbiAgcHJpdmF0ZSByZWFkb25seSBfYnJlYWRjcnVtYnMgPSBuZXcgQmVoYXZpb3JTdWJqZWN0PEJyZWFkY3J1bWJbXT4oW10pO1xuXG4gIHNldCBicmVhZGNydW1icyh2YWx1ZTogQnJlYWRjcnVtYltdKSB7XG4gICAgdGhpcy5fYnJlYWRjcnVtYnMubmV4dCh2YWx1ZSk7XG4gIH1cblxuICBnZXQgYnJlYWRjcnVtYnNPYnNlcnZhYmxlKCkge1xuICAgIHJldHVybiB0aGlzLl9icmVhZGNydW1icy5hc09ic2VydmFibGUoKTtcbiAgfVxuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcm91dGVyOiBSb3V0ZXIpIHtcbiAgICB0aGlzLnN1YnNjcmliZVRvUm91dGVDaGFuZ2VzKCk7XG4gIH1cblxuICAvKipcbiAgICogU3Vic2NyaWJlIHRvIHJvdXRlIGNoYW5nZXMgYW5kIGFkZCBlbGVtZW50IHRvIGJyZWFkY3J1bWJcbiAgICovXG4gIHN1YnNjcmliZVRvUm91dGVDaGFuZ2VzKCkge1xuICAgIHRoaXMucm91dGVyLmV2ZW50cy5waXBlKGZpbHRlcigoZXZlbnQpID0+IGV2ZW50IGluc3RhbmNlb2YgTmF2aWdhdGlvbkVuZCkpLnN1YnNjcmliZSgoZXZlbnQpID0+IHtcbiAgICAgIGNvbnN0IHJvb3QgPSB0aGlzLnJvdXRlci5yb3V0ZXJTdGF0ZS5zbmFwc2hvdC5yb290O1xuICAgICAgY29uc3QgYnJlYWRjcnVtYnM6IEJyZWFkY3J1bWJbXSA9IFtdO1xuICAgICAgdGhpcy5hZGRCcmVhZGNydW1iKHJvb3QsIFtdLCBicmVhZGNydW1icyk7XG4gICAgICB0aGlzLmJyZWFkY3J1bWJzID0gYnJlYWRjcnVtYnM7XG4gICAgfSk7XG4gIH1cblxuICAvKipcbiAgICogQWRkIGVsZW1lbnQgdG8gYnJlYWRjcnVtYlxuICAgKlxuICAgKiBAcGFyYW0gcm91dGVcbiAgICogQHBhcmFtIHBhcmVudFVybFxuICAgKiBAcGFyYW0gYnJlYWRjcnVtYnNcbiAgICogQHByaXZhdGVcbiAgICovXG4gIHByaXZhdGUgYWRkQnJlYWRjcnVtYihyb3V0ZTogQWN0aXZhdGVkUm91dGVTbmFwc2hvdCwgcGFyZW50VXJsOiBzdHJpbmdbXSwgYnJlYWRjcnVtYnM6IEJyZWFkY3J1bWJbXSkge1xuICAgIGlmIChyb3V0ZSkge1xuICAgICAgY29uc3Qgcm91dGVVcmwgPSBwYXJlbnRVcmwuY29uY2F0KHJvdXRlLnVybC5tYXAoKHVybCkgPT4gdXJsLnBhdGgpKTtcblxuICAgICAgaWYgKHJvdXRlLmRhdGE/LmJyZWFkY3J1bWIpIHtcbiAgICAgICAgY29uc3QgYnJlYWRjcnVtYiA9IHtcbiAgICAgICAgICBsYWJlbDogdGhpcy5nZXRMYWJlbChyb3V0ZS5kYXRhKSxcbiAgICAgICAgICB1cmw6ICcvJyArIHJvdXRlVXJsLmpvaW4oJy8nKSxcbiAgICAgICAgfTtcbiAgICAgICAgYnJlYWRjcnVtYnMucHVzaChicmVhZGNydW1iKTtcbiAgICAgIH1cblxuICAgICAgdGhpcy5hZGRCcmVhZGNydW1iKHJvdXRlLmZpcnN0Q2hpbGQsIHJvdXRlVXJsLCBicmVhZGNydW1icyk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIEdldCBsYWJlbCBmb3IgYnJlYWRjcnVtYlxuICAgKlxuICAgKiBAcGFyYW0gZGF0YVxuICAgKiBAcHJpdmF0ZVxuICAgKi9cbiAgcHJpdmF0ZSBnZXRMYWJlbChkYXRhOiBEYXRhKSB7XG4gICAgcmV0dXJuIHR5cGVvZiBkYXRhLmJyZWFkY3J1bWIgPT09ICdmdW5jdGlvbicgPyBkYXRhLmJyZWFkY3J1bWIoZGF0YSkgOiBkYXRhLmJyZWFkY3J1bWI7XG4gIH1cbn1cbiJdfQ==

package/esm2020/shared/services/toast.service.mjs

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export class ToastService {
+    constructor() {
+        this.toastsObservables = new BehaviorSubject([]);
+    }
+    get toastsAsObservable() {
+        return this.toastsObservables.asObservable();
+    }
+    /**
+     * Show new toast
+     *
+     * @param toast
+     * @param duration
+     */
+    show(toast, duration) {
+        const value = this.toastsObservables.value;
+        value.push(toast);
+        this.toastsObservables.next(value);
+        if (duration) {
+            setTimeout(() => {
+                const currentToasts = this.toastsObservables.value;
+                const foundIndex = currentToasts.findIndex((e) => e.id === toast.id);
+                if (foundIndex > -1) {
+                    currentToasts.splice(foundIndex, 1);
+                    this.toastsObservables.next(currentToasts);
+                }
+            }, duration);
+        }
+    }
+}
+ToastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ToastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ToastService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3Quc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWJhc2Uvc2hhcmVkL3NlcnZpY2VzL3RvYXN0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sTUFBTSxDQUFDOztBQU12QyxNQUFNLE9BQU8sWUFBWTtJQUh6QjtRQUlVLHNCQUFpQixHQUFHLElBQUksZUFBZSxDQUFVLEVBQUUsQ0FBQyxDQUFDO0tBNkI5RDtJQTNCQyxJQUFJLGtCQUFrQjtRQUNwQixPQUFPLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxZQUFZLEVBQUUsQ0FBQztJQUMvQyxDQUFDO0lBRUQ7Ozs7O09BS0c7SUFDSCxJQUFJLENBQUMsS0FBWSxFQUFFLFFBQWlCO1FBQ2xDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUM7UUFDM0MsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNsQixJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBRW5DLElBQUksUUFBUSxFQUFFO1lBQ1osVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDZCxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDO2dCQUNuRCxNQUFNLFVBQVUsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQztnQkFFckUsSUFBSSxVQUFVLEdBQUcsQ0FBQyxDQUFDLEVBQUU7b0JBQ25CLGFBQWEsQ0FBQyxNQUFNLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQyxDQUFDO29CQUNwQyxJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO2lCQUM1QztZQUNILENBQUMsRUFBRSxRQUFRLENBQUMsQ0FBQztTQUNkO0lBQ0gsQ0FBQzs7eUdBN0JVLFlBQVk7NkdBQVosWUFBWSxjQUZYLE1BQU07MkZBRVAsWUFBWTtrQkFIeEIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IFRvYXN0IH0gZnJvbSAnLi4vaW50ZXJmYWNlcy90b2FzdC5pbnRlcmZhY2UnO1xuXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46ICdyb290Jyxcbn0pXG5leHBvcnQgY2xhc3MgVG9hc3RTZXJ2aWNlIHtcbiAgcHJpdmF0ZSB0b2FzdHNPYnNlcnZhYmxlcyA9IG5ldyBCZWhhdmlvclN1YmplY3Q8VG9hc3RbXT4oW10pO1xuXG4gIGdldCB0b2FzdHNBc09ic2VydmFibGUoKSB7XG4gICAgcmV0dXJuIHRoaXMudG9hc3RzT2JzZXJ2YWJsZXMuYXNPYnNlcnZhYmxlKCk7XG4gIH1cblxuICAvKipcbiAgICogU2hvdyBuZXcgdG9hc3RcbiAgICpcbiAgICogQHBhcmFtIHRvYXN0XG4gICAqIEBwYXJhbSBkdXJhdGlvblxuICAgKi9cbiAgc2hvdyh0b2FzdDogVG9hc3QsIGR1cmF0aW9uPzogbnVtYmVyKSB7XG4gICAgY29uc3QgdmFsdWUgPSB0aGlzLnRvYXN0c09ic2VydmFibGVzLnZhbHVlO1xuICAgIHZhbHVlLnB1c2godG9hc3QpO1xuICAgIHRoaXMudG9hc3RzT2JzZXJ2YWJsZXMubmV4dCh2YWx1ZSk7XG5cbiAgICBpZiAoZHVyYXRpb24pIHtcbiAgICAgIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICBjb25zdCBjdXJyZW50VG9hc3RzID0gdGhpcy50b2FzdHNPYnNlcnZhYmxlcy52YWx1ZTtcbiAgICAgICAgY29uc3QgZm91bmRJbmRleCA9IGN1cnJlbnRUb2FzdHMuZmluZEluZGV4KChlKSA9PiBlLmlkID09PSB0b2FzdC5pZCk7XG5cbiAgICAgICAgaWYgKGZvdW5kSW5kZXggPiAtMSkge1xuICAgICAgICAgIGN1cnJlbnRUb2FzdHMuc3BsaWNlKGZvdW5kSW5kZXgsIDEpO1xuICAgICAgICAgIHRoaXMudG9hc3RzT2JzZXJ2YWJsZXMubmV4dChjdXJyZW50VG9hc3RzKTtcbiAgICAgICAgfVxuICAgICAgfSwgZHVyYXRpb24pO1xuICAgIH1cbiAgfVxufVxuIl19

package/fesm2015/lenne.tech-ng-base-base-components.mjs

@@ -4,6 +4,10 @@ import * as i2 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { trigger, transition, query, style, animate } from '@angular/animations';
+import { Subscription } from 'rxjs';
+import * as i1$1 from '@lenne.tech/ng-base/shared';
+import { ToastType } from '@lenne.tech/ng-base/shared';
 
 class InputComponent {
     constructor() {
@@ -42,14 +46,15 @@ class SelectComponent {
         this.placeholder = '';
         this.required = false;
         this.multiple = false;
+        this.search = false;
         this.options = [];
     }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", options: "options" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [multiple]=\"multiple\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SelectComponent, selector: "base-select", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", control: "control", tabIndex: "tabIndex", required: "required", multiple: "multiple", search: "search", options: "options" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [multiple]=\"multiple\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [multiple]=\"multiple\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [""] }]
+            args: [{ selector: 'base-select', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n  <select\n    [id]=\"id\"\n    [name]=\"name\"\n    class=\"form-select\"\n    [attr.aria-label]=\"placeholder\"\n    [attr.data-live-search]=\"search\"\n    [formControl]=\"control\"\n    [required]=\"required\"\n    [tabIndex]=\"tabIndex ?? null\"\n    [multiple]=\"multiple\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n  >\n    <option [ngValue]=\"null\" selected>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [ngValue]=\"option.value\">\n      {{ option.text }}\n    </option>\n  </select>\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n    <div *ngIf=\"control?.errors?.['minlength']\">\n      Die Mindestl\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['minlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['maxlength']\">\n      Die maximale L\u00E4nge f\u00FCr dieses Feld betr\u00E4gt\n      {{control?.errors?.['maxlength']?.requiredLength}} Zeichen.\n    </div>\n    <div *ngIf=\"control?.errors?.['email']\">Bitte eine g\u00FCltige E-Mail Adresse angeben.</div>\n  </div>\n</div>\n", styles: [""] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -66,6 +71,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
+            }], search: [{
+                type: Input
             }], options: [{
                 type: Input
             }] } });
@@ -125,6 +132,200 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
                 type: Input
             }] } });
 
+const toastAnimation = trigger('toastAnimation', [
+    transition('* <=> *', [
+        query(':enter', [style({ transform: 'translateX(100%)' }), animate('200ms ease-in', style({ transform: 'translateX(0%)' }))], { optional: true }),
+        query(':leave', animate('200ms ease-in', style({ transform: 'translateX(100%)' })), { optional: true }),
+    ]),
+]);
+class ToastComponent {
+    constructor(toastService) {
+        this.toastService = toastService;
+        this.toasts = [];
+        this.ToastType = ToastType;
+        this.subscriptions = new Subscription();
+        this.position = 'bottom-right';
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.toastService.toastsAsObservable.subscribe({
+            next: (value) => {
+                this.toasts = value;
+            },
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    getDefaultTitle(toast) {
+        switch (toast.type) {
+            case ToastType.ERROR:
+                return 'Irgendetwas ist schiefgelaufen';
+            case ToastType.INFO:
+                return 'Info';
+            case ToastType.WARNING:
+                return 'Achtung';
+            case ToastType.SUCCESS:
+                return 'Erfolgreich';
+        }
+    }
+    getDefaultDescription(toast) {
+        switch (toast.type) {
+            case ToastType.ERROR:
+                return 'Sollte das Problem länger bestehen bleiben, dann wenden Sie sich bitte\n' + '        an den Support.';
+            case ToastType.INFO:
+                return 'Info';
+            case ToastType.WARNING:
+                return 'Warning';
+            case ToastType.SUCCESS:
+                return 'Die Änderungen wurden erfolgreich gespeichert.';
+        }
+    }
+    reload() {
+        location.reload();
+    }
+}
+ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ToastComponent, deps: [{ token: i1$1.ToastService }], target: i0.ɵɵFactoryTarget.Component });
+ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: ToastComponent, selector: "base-toast", inputs: { position: "position" }, ngImport: i0, template: "<div class=\"toast-wrapper\" [ngClass]=\"position\">\n  <div class=\"toast-container\" [@toastAnimation]=\"toasts.length\">\n    <div\n      class=\"toast show\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n      *ngFor=\"let toast of toasts\"\n      [ngClass]=\"toast.type\"\n    >\n      <div class=\"toast-header\">\n        <strong class=\"me-auto\">{{ toast?.title ?? getDefaultTitle(toast) }}</strong>\n        <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"toast-body\">\n        {{ toast?.description ?? getDefaultDescription(toast) }}\n\n        <div class=\"mt-2\" *ngIf=\"toast?.errorCode\">\n          <code>ERROR: {{ toast.errorCode }}</code>\n        </div>\n\n        <div class=\"mt-2\" *ngIf=\"toast.type === ToastType.ERROR\">\n          <a class=\"color-secondary\" href=\"#\" (click)=\"reload()\">Seite neu laden</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".toast-wrapper{position:fixed;padding:10px}.bottom-right{bottom:0;right:0}.top-right{top:0;right:0}.toast{border-radius:0;border:0}.toast a{text-decoration:none;font-weight:600}.toast .toast-header{border-radius:0}.error .toast-header{background-color:var(--bs-danger);color:var(--bs-white)}.warning .toast-header{background-color:var(--bs-warning);color:var(--bs-white)}.info .toast-header{background-color:var(--bs-info);color:var(--bs-white)}.success .toast-header{background-color:var(--bs-success);color:var(--bs-white)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [toastAnimation] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-toast', animations: [toastAnimation], template: "<div class=\"toast-wrapper\" [ngClass]=\"position\">\n  <div class=\"toast-container\" [@toastAnimation]=\"toasts.length\">\n    <div\n      class=\"toast show\"\n      role=\"alert\"\n      aria-live=\"assertive\"\n      aria-atomic=\"true\"\n      *ngFor=\"let toast of toasts\"\n      [ngClass]=\"toast.type\"\n    >\n      <div class=\"toast-header\">\n        <strong class=\"me-auto\">{{ toast?.title ?? getDefaultTitle(toast) }}</strong>\n        <button type=\"button\" class=\"btn-close btn-close-white\" data-bs-dismiss=\"toast\" aria-label=\"Close\"></button>\n      </div>\n      <div class=\"toast-body\">\n        {{ toast?.description ?? getDefaultDescription(toast) }}\n\n        <div class=\"mt-2\" *ngIf=\"toast?.errorCode\">\n          <code>ERROR: {{ toast.errorCode }}</code>\n        </div>\n\n        <div class=\"mt-2\" *ngIf=\"toast.type === ToastType.ERROR\">\n          <a class=\"color-secondary\" href=\"#\" (click)=\"reload()\">Seite neu laden</a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".toast-wrapper{position:fixed;padding:10px}.bottom-right{bottom:0;right:0}.top-right{top:0;right:0}.toast{border-radius:0;border:0}.toast a{text-decoration:none;font-weight:600}.toast .toast-header{border-radius:0}.error .toast-header{background-color:var(--bs-danger);color:var(--bs-white)}.warning .toast-header{background-color:var(--bs-warning);color:var(--bs-white)}.info .toast-header{background-color:var(--bs-info);color:var(--bs-white)}.success .toast-header{background-color:var(--bs-success);color:var(--bs-white)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ToastService }]; }, propDecorators: { position: [{
+                type: Input
+            }] } });
+
+class TagsComponent {
+    constructor() {
+        this.label = '';
+        this.placeholder = '';
+        this.required = false;
+        this.inputValue = '';
+    }
+    /**
+     * Listen to enter keys
+     *
+     * @param event
+     */
+    enterKey(event) {
+        if (event.code === 'Backspace' && !this.inputValue) {
+            this.removeTag();
+            return;
+        }
+        else {
+            if (event.code === 'Comma' || event.code === 'Space' || event.code === 'Enter') {
+                this.addTag(this.inputValue);
+                this.inputValue = '';
+            }
+        }
+    }
+    /**
+     * Add new tag
+     *
+     * @param tag
+     */
+    addTag(tag) {
+        if (!this.control.value) {
+            this.control.setValue([]);
+        }
+        if (tag.endsWith(',') || tag.endsWith(' ')) {
+            tag = tag.slice(0, -1);
+        }
+        if (tag.length > 0 && this.control.value && !this.control.value.some((item) => item === tag)) {
+            this.control.value.push(tag);
+            this.control.setErrors(null);
+        }
+    }
+    /**
+     * Remove tag
+     *
+     * @param tag
+     */
+    removeTag(tag) {
+        if (tag) {
+            this.control.setValue(this.control.value.filter((item) => item !== tag));
+        }
+        else {
+            this.control.value.splice(-1);
+        }
+        if (this.control.value.length === 0) {
+            this.control.setErrors({ required: true });
+        }
+    }
+}
+TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: TagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: TagsComponent, selector: "base-tags", inputs: { id: "id", name: "name", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", tabIndex: "tabIndex", control: "control", required: "required" }, ngImport: i0, template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ tag }}\n      <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n  />\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: TagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-tags', template: "<div class=\"form-group mb-3\">\n  <label [for]=\"id\" class=\"form-label\" [ngClass]=\"{ required: required }\" *ngIf=\"label\">{{ label }}</label>\n\n  <div class=\"tag-wrapper\" *ngIf=\"control?.value\">\n    <div class=\"tag\" *ngFor=\"let tag of control?.value\">\n      {{ tag }}\n      <span (click)=\"removeTag(tag)\"><i class=\"bi bi-x-circle\"></i></span>\n    </div>\n  </div>\n  <input\n    [id]=\"id\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [ngClass]=\"{ 'is-invalid': control?.invalid && control?.touched }\"\n    [(ngModel)]=\"inputValue\"\n    [autocomplete]=\"autocomplete ?? null\"\n    [tabIndex]=\"tabIndex ?? null\"\n    type=\"text\"\n    class=\"form-control\"\n    (keyup)=\"enterKey($event)\"\n  />\n\n  <div class=\"invalid-feedback m-2\" *ngIf=\"control?.invalid && (control?.dirty || control?.touched)\">\n    <div *ngIf=\"control?.errors?.['required']\">Dieses Feld ist ein Pflichtfeld.</div>\n  </div>\n</div>\n", styles: [".tag-wrapper{display:flex;flex-direction:row;justify-content:flex-start;column-gap:10px;row-gap:10px;flex-wrap:wrap;margin-bottom:10px}.tag-wrapper .tag{background-color:var(--bs-light);color:var(--bs-dark);padding:10px 15px;font-style:normal;font-weight:300;font-size:14px;line-height:140%}.tag-wrapper .tag span{margin-left:20px;cursor:pointer}.tag-wrapper .tag span .bi{color:var(--bs-black)}.tag-wrapper .tag span .bi:before{vertical-align:-.175em}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }] } });
+
+class LoadingBarComponent {
+}
+LoadingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: LoadingBarComponent, selector: "base-loading-bar", ngImport: i0, template: "<div class=\"slider\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: LoadingBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-loading-bar', template: "<div class=\"slider\">\n  <div class=\"line\"></div>\n  <div class=\"subline inc\"></div>\n  <div class=\"subline dec\"></div>\n</div>\n", styles: [":host{--base-loading-bar-color: #f28c18;--base-loading-bar-height: 5px;--base-loading-bar-z-index: 999999999}.slider{position:fixed;left:0;right:0;height:var(--base-loading-bar-height);overflow-x:hidden;z-index:var(--base-loading-bar-z-index);background-color:#fff}.line{position:absolute;opacity:.6;background:var(--base-loading-bar-color);width:150%;height:var(--base-loading-bar-height)}.subline{position:absolute;background:var(--base-loading-bar-color);height:var(--base-loading-bar-height)}.inc{animation:increase 2s infinite}.dec{animation:decrease 2s .5s infinite}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
+        }] });
+
+class SkeletonLoaderComponent {
+    constructor() {
+        this.count = 1;
+        this.size = 18;
+    }
+    convertToArray(value) {
+        if (!value) {
+            return [];
+        }
+        const res = [];
+        for (let i = 0; i < value; i++) {
+            res.push(i);
+        }
+        console.log(res);
+        return res;
+    }
+}
+SkeletonLoaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SkeletonLoaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: SkeletonLoaderComponent, selector: "base-skeleton-loader", inputs: { type: "type", count: "count", size: "size" }, ngImport: i0, template: "<ng-container *ngIf=\"type\" [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'LINE'\">\n    <div class=\"line-loader-wrapper\">\n      <div class=\"line-loader\" *ngFor=\"let key of convertToArray(count)\"></div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'RECTANGLE'\">\n    <div class=\"line-rectangle\" [ngStyle]=\"{ height: size + 'px' }\"></div>\n  </div>\n\n  <div *ngSwitchCase=\"'AVATAR'\">\n    <div class=\"line-avatar\" [ngStyle]=\"{ height: size + 'px', width: size + 'px' }\"></div>\n  </div>\n</ng-container>\n", styles: ["@keyframes shine{to{background-position-x:-200%}}.line-loader-wrapper>:not(:first-of-type){margin-top:10px}.line-loader-wrapper .line-loader{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;height:18px;border-radius:5px}.line-rectangle{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:5px}.line-avatar{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:50%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-skeleton-loader', template: "<ng-container *ngIf=\"type\" [ngSwitch]=\"type\">\n  <div *ngSwitchCase=\"'LINE'\">\n    <div class=\"line-loader-wrapper\">\n      <div class=\"line-loader\" *ngFor=\"let key of convertToArray(count)\"></div>\n    </div>\n  </div>\n\n  <div *ngSwitchCase=\"'RECTANGLE'\">\n    <div class=\"line-rectangle\" [ngStyle]=\"{ height: size + 'px' }\"></div>\n  </div>\n\n  <div *ngSwitchCase=\"'AVATAR'\">\n    <div class=\"line-avatar\" [ngStyle]=\"{ height: size + 'px', width: size + 'px' }\"></div>\n  </div>\n</ng-container>\n", styles: ["@keyframes shine{to{background-position-x:-200%}}.line-loader-wrapper>:not(:first-of-type){margin-top:10px}.line-loader-wrapper .line-loader{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;height:18px;border-radius:5px}.line-rectangle{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:5px}.line-avatar{background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#ececec 33%);background-size:200% 100%;animation:1.5s shine linear infinite;border-radius:50%}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], count: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+class BreadcrumbComponent {
+    constructor(breadcrumbService) {
+        this.breadcrumbService = breadcrumbService;
+        this.breadcrumbs$ = breadcrumbService.breadcrumbsObservable;
+    }
+}
+BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$1.BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.3", type: BreadcrumbComponent, selector: "base-breadcrumb", ngImport: i0, template: "<ul class=\"pt-3\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs$ | async\">\n    <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n  </li>\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\">\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'base-breadcrumb', template: "<ul class=\"pt-3\">\n  <li *ngFor=\"let breadcrumb of breadcrumbs$ | async\">\n    <a [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n  </li>\n</ul>\n", styles: ["ul{list-style:none;margin:0;padding:0}ul li{display:inline}ul li:before{content:\">\";margin:0 6px}ul li:first-child:before{content:\"\";margin:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.BreadcrumbService }]; } });
+
 // Modules
 const imports = [FormsModule, ReactiveFormsModule, CommonModule];
 // Imported and exported elements
@@ -134,6 +335,11 @@ const elements = [
     SelectComponent,
     CheckboxComponent,
     TextareaComponent,
+    ToastComponent,
+    TagsComponent,
+    LoadingBarComponent,
+    SkeletonLoaderComponent,
+    BreadcrumbComponent,
 ];
 class BaseComponentsModule {
 }
@@ -143,13 +349,23 @@ BaseComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         InputComponent,
         SelectComponent,
         CheckboxComponent,
-        TextareaComponent
+        TextareaComponent,
+        ToastComponent,
+        TagsComponent,
+        LoadingBarComponent,
+        SkeletonLoaderComponent,
+        BreadcrumbComponent
     ], imports: [FormsModule, ReactiveFormsModule, CommonModule], exports: [
         // Components
         InputComponent,
         SelectComponent,
         CheckboxComponent,
-        TextareaComponent
+        TextareaComponent,
+        ToastComponent,
+        TagsComponent,
+        LoadingBarComponent,
+        SkeletonLoaderComponent,
+        BreadcrumbComponent
     ] });
 BaseComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BaseComponentsModule, imports: [imports] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImport: i0, type: BaseComponentsModule, decorators: [{
@@ -169,5 +385,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BaseComponentsModule, CheckboxComponent, InputComponent, SelectComponent, TextareaComponent };
+export { BaseComponentsModule, BreadcrumbComponent, CheckboxComponent, InputComponent, LoadingBarComponent, SelectComponent, SkeletonLoaderComponent, TagsComponent, TextareaComponent, ToastComponent };
 //# sourceMappingURL=lenne.tech-ng-base-base-components.mjs.map