@indice/ng-components 0.2.159 → 0.2.160

package/esm2020/lib/helpers/base-list.component.mjs

@@ -53,7 +53,7 @@ export class BaseListComponent {
             // changing the view mode does not require reloading...
             this.view = params.get('view') || ListViewType.Tiles;
             // console.log('route changes ', this.view);
-            if (params.get('search') !== this.search) {
+            if (params.get('search') !== null && params.get('search') !== this.search) {
                 this.searchChanged(params.get('search'));
             }
             const page = +(params.get('page') || 1);
@@ -70,15 +70,16 @@ export class BaseListComponent {
             if (params.get('sort') !== this.sort) {
                 this.sort = params.get('sort');
             }
-            // if (params.get('sortdir') !== this.sortdir) {
-            //   this.sortdir = params.get('sortdir');
-            // }
+            if (params.get('dir') !== this.sortdir) {
+                this.sortdir = params.get('dir');
+            }
         });
         // just to sync params in query
         this.setRouteParams(true);
         this.load();
     }
     setRouteParams(locationChange = false) {
+        console.log(this.sortdir);
         this.router$.navigate([], {
             relativeTo: this.route$, queryParams: {
                 view: this.view,
@@ -178,4 +179,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i1.Router }]; } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9oZWxwZXJzL2Jhc2UtbGlzdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUE0QixFQUFFLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEQsT0FBTyxFQUFFLFNBQVMsRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFFN0QsT0FBTyxFQUEwQyxnQkFBZ0IsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQzlHLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxVQUFVLENBQUM7OztBQUdqQyxNQUFNLE9BQWdCLGlCQUFpQjtJQWlCckMsWUFBb0IsTUFBc0IsRUFBVSxPQUFlO1FBQS9DLFdBQU0sR0FBTixNQUFNLENBQWdCO1FBQVUsWUFBTyxHQUFQLE9BQU8sQ0FBUTtRQWhCNUQsVUFBSyxHQUEyQixJQUFJLENBQUM7UUFDckMsU0FBSSxHQUFXLFlBQVksQ0FBQyxLQUFLLENBQUM7UUFDbEMsVUFBSyxHQUFrQixJQUFJLENBQUM7UUFDNUIsWUFBTyxHQUFpQixFQUFFLENBQUM7UUFDM0IsZ0JBQVcsR0FBVSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNyQyxTQUFJLEdBQUcsQ0FBQyxDQUFDO1FBQ1QsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNkLFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVixTQUFJLEdBQWtCLEVBQUUsQ0FBQztRQUN6QixZQUFPLEdBQWtCLEVBQUUsQ0FBQztRQUM1QixXQUFNLEdBQWtCLEVBQUUsQ0FBQztRQUMzQixnQkFBVyxHQUFpQixFQUFFLENBQUM7UUFDL0IsY0FBUyxHQUFxQixFQUFFLENBQUM7SUFLeEMsQ0FBQztJQUVELFdBQVc7UUFD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QUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztRQUNkLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxNQUFNLEdBQUcsVUFBVSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN0QixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDZCxDQUFDOzs4R0FuTW1CLGlCQUFpQjtrR0FBakIsaUJBQWlCLG9EQURoQixFQUFFOzJGQUNILGlCQUFpQjtrQkFEdEMsU0FBUzttQkFBQyxFQUFFLFFBQVEsRUFBRSxFQUFFLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBPYnNlcnZhYmxlLCBTdWJzY3JpcHRpb24sIG9mIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgT25EZXN0cm95IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBY3RpdmF0ZWRSb3V0ZSwgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcbmltcG9ydCB7IEhlYWRlck1ldGFJdGVtLCBJUmVzdWx0U2V0LCBNZW51T3B0aW9uLCBSb3V0ZXJWaWV3QWN0aW9uLCBWaWV3QWN0aW9uLCBMaXN0Vmlld1R5cGUgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBJY29ucyB9IGZyb20gJy4uL2ljb25zJztcblxuQENvbXBvbmVudCh7IHRlbXBsYXRlOiAnJyB9KVxuZXhwb3J0IGFic3RyYWN0IGNsYXNzIEJhc2VMaXN0Q29tcG9uZW50PFQ+IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBwdWJsaWMgaXRlbXM6IFRbXSB8IG51bGwgfCB1bmRlZmluZWQgPSBudWxsO1xuICBwdWJsaWMgdmlldzogc3RyaW5nID0gTGlzdFZpZXdUeXBlLlRpbGVzO1xuICBwdWJsaWMgdGl0bGU6IHN0cmluZyB8IG51bGwgPSBudWxsO1xuICBwdWJsaWMgYWN0aW9uczogVmlld0FjdGlvbltdID0gW107XG4gIHB1YmxpYyBsb2FkZXJJdGVtczogYW55W10gPSBbMSwgMiwgMywgNCwgNV07XG4gIHB1YmxpYyBwYWdlID0gMTtcbiAgcHVibGljIHBhZ2VTaXplID0gMjA7XG4gIHB1YmxpYyBjb3VudCA9IDA7XG4gIHB1YmxpYyBzb3J0OiBzdHJpbmcgfCBudWxsID0gJyc7XG4gIHB1YmxpYyBzb3J0ZGlyOiBzdHJpbmcgfCBudWxsID0gJyc7XG4gIHB1YmxpYyBzZWFyY2g6IHN0cmluZyB8IG51bGwgPSAnJztcbiAgcHVibGljIHNvcnRPcHRpb25zOiBNZW51T3B0aW9uW10gPSBbXTtcbiAgcHVibGljIG1ldGFJdGVtczogSGVhZGVyTWV0YUl0ZW1bXSA9IFtdO1xuICBwdWJsaWMgYWJzdHJhY3QgbmV3SXRlbUxpbms6IHN0cmluZyB8IG51bGw7XG4gIHByaXZhdGUgcm91dGVTdWIkOiBTdWJzY3JpcHRpb24gfCB1bmRlZmluZWQ7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSByb3V0ZSQ6IEFjdGl2YXRlZFJvdXRlLCBwcml2YXRlIHJvdXRlciQ6IFJvdXRlcikge1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucm91dGVTdWIkKSB7XG4gICAgICB0aGlzLnJvdXRlU3ViJC51bnN1YnNjcmliZSgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBnZXRWaWV3QWN0aW9ucygpOiBPYnNlcnZhYmxlPFZpZXdBY3Rpb25bXT4ge1xuICAgIGNvbnN0IGFjdGlvbnMgPSBbXG4gICAgICBuZXcgVmlld0FjdGlvbignc2VhcmNoJywgbnVsbCwgbnVsbCwgSWNvbnMuU2VhcmNoLCAnzrHOvc6xzrbOrs+EzrfPg863JyksXG4gICAgICBuZXcgVmlld0FjdGlvbigncmVmcmVzaCcsIG51bGwsIG51bGwsIEljb25zLlJlZnJlc2gsICfOsc69zrHOvc6tz4nPg863IM+Dz4TOv865z4fOtc6vz4nOvScpXG4gICAgXTtcbiAgICBpZiAodGhpcy5uZXdJdGVtTGluaykge1xuICAgICAgYWN0aW9ucy5wdXNoKG5ldyBSb3V0ZXJWaWV3QWN0aW9uKEljb25zLkFkZCwgdGhpcy5uZXdJdGVtTGluaywgJ3JpZ2h0cGFuZScsICfPgM+Bzr/Pg864zq7Ous63IM69zq3Osc+CIM61zrPOs8+BzrHPhs6uz4I7JykpO1xuICAgIH1cbiAgICByZXR1cm4gb2YoYWN0aW9ucyk7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmdldFZpZXdBY3Rpb25zKCkuc3Vic2NyaWJlKGFjdGlvbnMgPT4ge1xuICAgICAgdGhpcy5hY3Rpb25zID0gYWN0aW9ucyB8fCBbXTtcbiAgICB9KTtcblxuICAgIHRoaXMubWV0YUl0ZW1zID0gW1xuICAgICAgeyBrZXk6ICdjb3VudCcsIGljb246IEljb25zLkl0ZW1zQ291bnQsIHRleHQ6ICfPgM6xz4HOsc66zrHOu8+OIM+AzrXPgc65zrzOrc69zrXPhM61Li4uJyB9XG4gICAgXTtcblxuICAgIC8vIGRpc2FibGVkIGV4dGVybmFsIHJvdXRlIGNoYW5nZXMgbW9uaXRvcmluZyBkdWUgdG8gc3luYyBpc3N1ZXMgLSB3aGljaCBpcyBiYWQgOikgLSByZWZyZXNoIGZyb20gdXJsIHdpbGwgbm90IHdvcmtcbiAgICAvLyB1bnRpbCBpIGNvbWUgdXAgd2l0aCBhIHNvbHV0aW9uLi4uXG5cbiAgICB0aGlzLnJvdXRlU3ViJCA9IHRoaXMucm91dGUkLnF1ZXJ5UGFyYW1NYXAuc3Vic2NyaWJlKHBhcmFtcyA9PiB7XG4gICAgICBpZiAocGFyYW1zLmtleXMubGVuZ3RoID09PSAwKSB7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgLy8gY2hhbmdpbmcgdGhlIHZpZXcgbW9kZSBkb2VzIG5vdCByZXF1aXJlIHJlbG9hZGluZy4uLlxuICAgICAgdGhpcy52aWV3ID0gcGFyYW1zLmdldCgndmlldycpIHx8IExpc3RWaWV3VHlwZS5UaWxlcztcbiAgICAgIC8vIGNvbnNvbGUubG9nKCdyb3V0ZSBjaGFuZ2VzICcsIHRoaXMudmlldyk7XG5cbiAgICAgIGlmIChwYXJhbXMuZ2V0KCdzZWFyY2gnKSAhPT0gdGhpcy5zZWFyY2gpIHtcbiAgICAgICAgdGhpcy5zZWFyY2hDaGFuZ2VkKHBhcmFtcy5nZXQoJ3NlYXJjaCcpKTtcbiAgICAgIH1cblxuICAgICAgY29uc3QgcGFnZSA9ICsocGFyYW1zLmdldCgncGFnZScpIHx8IDEpO1xuICAgICAgaWYgKHBhZ2UgIT09IHRoaXMucGFnZSkge1xuICAgICAgICB0aGlzLnBhZ2UgPSBwYWdlO1xuICAgICAgfVxuXG4gICAgICBjb25zdCBzaXplID0gKyhwYXJhbXMuZ2V0KCdwYWdlc2l6ZScpIHx8IDIwKTtcbiAgICAgIGlmICh0aGlzLnBhZ2VTaXplICE9PSBzaXplKSB7XG4gICAgICAgIHRoaXMucGFnZVNpemUgPSBzaXplO1xuICAgICAgfVxuXG4gICAgICBpZiAocGFyYW1zLmdldCgnc2VhcmNoJykgIT09IHRoaXMuc2VhcmNoKSB7XG4gICAgICAgIHRoaXMuc2VhcmNoID0gcGFyYW1zLmdldCgnc2VhcmNoJyk7XG4gICAgICB9XG5cbiAgICAgIGlmIChwYXJhbXMuZ2V0KCdzb3J0JykgIT09IHRoaXMuc29ydCkge1xuICAgICAgICB0aGlzLnNvcnQgPSBwYXJhbXMuZ2V0KCdzb3J0Jyk7XG4gICAgICB9XG5cbiAgICAgIC8vIGlmIChwYXJhbXMuZ2V0KCdzb3J0ZGlyJykgIT09IHRoaXMuc29ydGRpcikge1xuICAgICAgLy8gICB0aGlzLnNvcnRkaXIgPSBwYXJhbXMuZ2V0KCdzb3J0ZGlyJyk7XG4gICAgICAvLyB9XG5cbiAgICB9KTtcblxuICAgIC8vIGp1c3QgdG8gc3luYyBwYXJhbXMgaW4gcXVlcnlcbiAgICB0aGlzLnNldFJvdXRlUGFyYW1zKHRydWUpO1xuICAgIHRoaXMubG9hZCgpO1xuICB9XG5cbiAgcHJpdmF0ZSBzZXRSb3V0ZVBhcmFtcyhsb2NhdGlvbkNoYW5nZTogYm9vbGVhbiA9IGZhbHNlKTogdm9pZCB7XG4gICAgdGhpcy5yb3V0ZXIkLm5hdmlnYXRlKFtdLCB7XG4gICAgICByZWxhdGl2ZVRvOiB0aGlzLnJvdXRlJCwgcXVlcnlQYXJhbXM6IHtcbiAgICAgICAgdmlldzogdGhpcy52aWV3LFxuICAgICAgICBwYWdlOiB0aGlzLnBhZ2UsXG4gICAgICAgIHBhZ2VzaXplOiB0aGlzLnBhZ2VTaXplLFxuICAgICAgICBzZWFyY2g6IHRoaXMuc2VhcmNoLFxuICAgICAgICBzb3J0OiB0aGlzLnNvcnQsXG4gICAgICAgIGRpcjogdGhpcy5zb3J0ZGlyXG4gICAgICB9LCBxdWVyeVBhcmFtc0hhbmRsaW5nOiAnbWVyZ2UnLCBza2lwTG9jYXRpb25DaGFuZ2U6IGxvY2F0aW9uQ2hhbmdlXG4gICAgfSk7XG4gIH1cblxuICBwdWJsaWMgYWN0aW9uSGFuZGxlcigkZXZlbnQ6IFZpZXdBY3Rpb24pOiB2b2lkIHtcbiAgICAvLyBjb25zb2xlLmxvZygnQmFzZUxpc3RDb21wb25lbnQgYWN0aW9uSGFuZGxlcicsICRldmVudCk7XG4gICAgaWYgKCRldmVudC5rZXkgPT09ICdyZWZyZXNoJykge1xuICAgICAgdGhpcy5yZWZyZXNoKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBsb2FkKCk6IHZvaWQge1xuICAgIC8vIGNvbnNvbGUubG9nKCdCYXNlTGlzdENvbXBvbmVudCBMT0FEJyk7XG4gICAgdGhpcy5jb3VudCA9IDA7XG4gICAgdGhpcy5pdGVtcyA9IG51bGw7XG4gICAgdGhpcy5sb2FkSXRlbXMoKS5zdWJzY3JpYmUocmVzdWx0ID0+IHtcbiAgICAgIHRoaXMuY291bnQgPSByZXN1bHQgPyByZXN1bHQuY291bnQgOiAwO1xuICAgICAgdGhpcy5pdGVtcyA9IHJlc3VsdD8uaXRlbXM7XG4gICAgICB0aGlzLnVwZGF0ZUhlYWRlck1ldGEoKTtcbiAgICB9LCBlcnIgPT4ge1xuICAgICAgdGhpcy5jb3VudCA9IDA7XG4gICAgICB0aGlzLml0ZW1zID0gbnVsbDtcbiAgICAgIHRoaXMudXBkYXRlSGVhZGVyTWV0YSgpO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVIZWFkZXJNZXRhKCk6IHZvaWQge1xuICAgIGNvbnN0IGNvdW50ID0gdGhpcy5tZXRhSXRlbXM/LmZpbHRlcihtID0+IG0ua2V5ID09PSAnY291bnQnKVswXTtcbiAgICBpZiAoY291bnQpIHtcbiAgICAgIHRoaXMuY291bnQgPT09IDEgPyBjb3VudC50ZXh0ID0gYCR7dGhpcy5jb3VudH0gzrHPgM6/z4TOrc67zrXPg868zrFgIDogY291bnQudGV4dCA9IGAke3RoaXMuY291bnR9IM6xz4DOv8+EzrXOu86tz4POvM6xz4TOsWA7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIGFic3RyYWN0IGxvYWRJdGVtcygpOiBPYnNlcnZhYmxlPElSZXN1bHRTZXQ8VD4gfCBudWxsIHwgdW5kZWZpbmVkPjtcblxuICBwdWJsaWMgY2xlYXIoKTogdm9pZCB7XG4gICAgdGhpcy5jb3VudCA9IDA7XG4gICAgdGhpcy5wYWdlID0gMTtcbiAgICB0aGlzLml0ZW1zID0gbnVsbDtcbiAgICB0aGlzLnNlYXJjaCA9IG51bGw7XG4gICAgdGhpcy5zZXRSb3V0ZVBhcmFtcygpO1xuICAgIHRoaXMubG9hZCgpO1xuICB9XG5cbiAgcHVibGljIHJlZnJlc2goKTogdm9pZCB7XG4gICAgdGhpcy5jb3VudCA9IDA7XG4gICAgdGhpcy5wYWdlID0gMTtcbiAgICB0aGlzLml0ZW1zID0gbnVsbDtcbiAgICB0aGlzLnNldFJvdXRlUGFyYW1zKCk7XG4gICAgdGhpcy5sb2FkKCk7XG4gIH1cblxuICBwdWJsaWMgcGFnZUNoYW5nZWQocGFnZTogbnVtYmVyKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucGFnZSAhPT0gcGFnZSkge1xuICAgICAgdGhpcy5wYWdlID0gcGFnZTtcbiAgICAgIHRoaXMuc2V0Um91dGVQYXJhbXMoKTtcbiAgICAgIHRoaXMubG9hZCgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBwYWdlU2l6ZUNoYW5nZWQocGFnZVNpemU6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLnBhZ2VTaXplICE9PSBwYWdlU2l6ZSkge1xuICAgICAgdGhpcy5wYWdlU2l6ZSA9IHBhZ2VTaXplO1xuICAgICAgdGhpcy5wYWdlID0gMTtcbiAgICAgIHRoaXMuc2V0Um91dGVQYXJhbXMoKTtcbiAgICAgIHRoaXMucmVmcmVzaCgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBzb3J0Q2hhbmdlZChzb3J0OiBzdHJpbmcpOiB2b2lkIHtcbiAgICAvLyBjb25zb2xlLmxvZygnYmFzZS1saXN0IHNvcnRDaGFuZ2VkJywgc29ydCk7XG4gICAgaWYgKHRoaXMuc29ydCAhPT0gc29ydCkge1xuICAgICAgdGhpcy5wYWdlID0gMTtcbiAgICAgIHRoaXMuc29ydCA9IHNvcnQ7XG4gICAgICB0aGlzLnNldFJvdXRlUGFyYW1zKCk7XG4gICAgICB0aGlzLnJlZnJlc2goKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgc29ydGRpckNoYW5nZWQoc29ydGRpcjogc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuc29ydGRpciAhPT0gc29ydGRpcikge1xuICAgICAgdGhpcy5wYWdlID0gMTtcbiAgICAgIHRoaXMuc29ydGRpciA9IHNvcnRkaXI7XG4gICAgICB0aGlzLnNldFJvdXRlUGFyYW1zKCk7XG4gICAgICB0aGlzLnJlZnJlc2goKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgc2VhcmNoQ2hhbmdlZChzZWFyY2hUZXh0OiBzdHJpbmcgfCBudWxsKTogdm9pZCB7XG4gICAgdGhpcy5jb3VudCA9IDA7XG4gICAgdGhpcy5wYWdlID0gMTtcbiAgICB0aGlzLml0ZW1zID0gbnVsbDtcbiAgICB0aGlzLnNlYXJjaCA9IHNlYXJjaFRleHQ7XG4gICAgdGhpcy5zZXRSb3V0ZVBhcmFtcygpO1xuICAgIHRoaXMubG9hZCgpO1xuICB9XG59XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFzZS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9oZWxwZXJzL2Jhc2UtbGlzdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUE0QixFQUFFLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDcEQsT0FBTyxFQUFFLFNBQVMsRUFBcUIsTUFBTSxlQUFlLENBQUM7QUFFN0QsT0FBTyxFQUEwQyxnQkFBZ0IsRUFBRSxVQUFVLEVBQUUsWUFBWSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQzlHLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxVQUFVLENBQUM7OztBQUdqQyxNQUFNLE9BQWdCLGlCQUFpQjtJQWlCckMsWUFBb0IsTUFBc0IsRUFBVSxPQUFlO1FBQS9DLFdBQU0sR0FBTixNQUFNLENBQWdCO1FBQVUsWUFBTyxHQUFQLE9BQU8sQ0FBUTtRQWhCNUQsVUFBSyxHQUEyQixJQUFJLENBQUM7UUFDckMsU0FBSSxHQUFXLFlBQVksQ0FBQyxLQUFLLENBQUM7UUFDbEMsVUFBSyxHQUFrQixJQUFJLENBQUM7UUFDNUIsWUFBTyxHQUFpQixFQUFFLENBQUM7UUFDM0IsZ0JBQVcsR0FBVSxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNyQyxTQUFJLEdBQUcsQ0FBQyxDQUFDO1FBQ1QsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNkLFVBQUssR0FBRyxDQUFDLENBQUM7UUFDVixTQUFJLEdBQWtCLEVBQUUsQ0FBQztRQUN6QixZQUFPLEdBQWtCLEVBQUUsQ0FBQztRQUM1QixXQUFNLEdBQWtCLEVBQUUsQ0FBQztRQUMzQixnQkFBVyxHQUFpQixFQUFFLENBQUM7UUFDL0IsY0FBUyxHQUFxQixFQUFFLENBQUM7SUFLeEMsQ0FBQztJQUVELFdBQVc7UUFD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SSxHQUFHLENBQUMsQ0FBQztZQUNkLElBQUksQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN0QixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7U0FDaEI7SUFDSCxDQUFDO0lBRU0sYUFBYSxDQUFDLFVBQXlCO1FBQzVDLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ2YsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUM7UUFDZCxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztRQUNsQixJQUFJLENBQUMsTUFBTSxHQUFHLFVBQVUsQ0FBQztRQUN6QixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdEIsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ2QsQ0FBQzs7OEdBcE1tQixpQkFBaUI7a0dBQWpCLGlCQUFpQixvREFEaEIsRUFBRTsyRkFDSCxpQkFBaUI7a0JBRHRDLFNBQVM7bUJBQUMsRUFBRSxRQUFRLEVBQUUsRUFBRSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3Vic2NyaXB0aW9uLCBvZiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQWN0aXZhdGVkUm91dGUsIFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBIZWFkZXJNZXRhSXRlbSwgSVJlc3VsdFNldCwgTWVudU9wdGlvbiwgUm91dGVyVmlld0FjdGlvbiwgVmlld0FjdGlvbiwgTGlzdFZpZXdUeXBlIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgSWNvbnMgfSBmcm9tICcuLi9pY29ucyc7XG5cbkBDb21wb25lbnQoeyB0ZW1wbGF0ZTogJycgfSlcbmV4cG9ydCBhYnN0cmFjdCBjbGFzcyBCYXNlTGlzdENvbXBvbmVudDxUPiBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgcHVibGljIGl0ZW1zOiBUW10gfCBudWxsIHwgdW5kZWZpbmVkID0gbnVsbDtcbiAgcHVibGljIHZpZXc6IHN0cmluZyA9IExpc3RWaWV3VHlwZS5UaWxlcztcbiAgcHVibGljIHRpdGxlOiBzdHJpbmcgfCBudWxsID0gbnVsbDtcbiAgcHVibGljIGFjdGlvbnM6IFZpZXdBY3Rpb25bXSA9IFtdO1xuICBwdWJsaWMgbG9hZGVySXRlbXM6IGFueVtdID0gWzEsIDIsIDMsIDQsIDVdO1xuICBwdWJsaWMgcGFnZSA9IDE7XG4gIHB1YmxpYyBwYWdlU2l6ZSA9IDIwO1xuICBwdWJsaWMgY291bnQgPSAwO1xuICBwdWJsaWMgc29ydDogc3RyaW5nIHwgbnVsbCA9ICcnO1xuICBwdWJsaWMgc29ydGRpcjogc3RyaW5nIHwgbnVsbCA9ICcnO1xuICBwdWJsaWMgc2VhcmNoOiBzdHJpbmcgfCBudWxsID0gJyc7XG4gIHB1YmxpYyBzb3J0T3B0aW9uczogTWVudU9wdGlvbltdID0gW107XG4gIHB1YmxpYyBtZXRhSXRlbXM6IEhlYWRlck1ldGFJdGVtW10gPSBbXTtcbiAgcHVibGljIGFic3RyYWN0IG5ld0l0ZW1MaW5rOiBzdHJpbmcgfCBudWxsO1xuICBwcml2YXRlIHJvdXRlU3ViJDogU3Vic2NyaXB0aW9uIHwgdW5kZWZpbmVkO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcm91dGUkOiBBY3RpdmF0ZWRSb3V0ZSwgcHJpdmF0ZSByb3V0ZXIkOiBSb3V0ZXIpIHtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLnJvdXRlU3ViJCkge1xuICAgICAgdGhpcy5yb3V0ZVN1YiQudW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgZ2V0Vmlld0FjdGlvbnMoKTogT2JzZXJ2YWJsZTxWaWV3QWN0aW9uW10+IHtcbiAgICBjb25zdCBhY3Rpb25zID0gW1xuICAgICAgbmV3IFZpZXdBY3Rpb24oJ3NlYXJjaCcsIG51bGwsIG51bGwsIEljb25zLlNlYXJjaCwgJ86xzr3Osc62zq7PhM63z4POtycpLFxuICAgICAgbmV3IFZpZXdBY3Rpb24oJ3JlZnJlc2gnLCBudWxsLCBudWxsLCBJY29ucy5SZWZyZXNoLCAnzrHOvc6xzr3Orc+Jz4POtyDPg8+Ezr/Ouc+HzrXOr8+Jzr0nKVxuICAgIF07XG4gICAgaWYgKHRoaXMubmV3SXRlbUxpbmspIHtcbiAgICAgIGFjdGlvbnMucHVzaChuZXcgUm91dGVyVmlld0FjdGlvbihJY29ucy5BZGQsIHRoaXMubmV3SXRlbUxpbmssICdyaWdodHBhbmUnLCAnz4DPgc6/z4POuM6uzrrOtyDOvc6tzrHPgiDOtc6zzrPPgc6xz4bOrs+COycpKTtcbiAgICB9XG4gICAgcmV0dXJuIG9mKGFjdGlvbnMpO1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5nZXRWaWV3QWN0aW9ucygpLnN1YnNjcmliZShhY3Rpb25zID0+IHtcbiAgICAgIHRoaXMuYWN0aW9ucyA9IGFjdGlvbnMgfHwgW107XG4gICAgfSk7XG5cbiAgICB0aGlzLm1ldGFJdGVtcyA9IFtcbiAgICAgIHsga2V5OiAnY291bnQnLCBpY29uOiBJY29ucy5JdGVtc0NvdW50LCB0ZXh0OiAnz4DOsc+BzrHOus6xzrvPjiDPgM61z4HOuc68zq3Ovc61z4TOtS4uLicgfVxuICAgIF07XG5cbiAgICAvLyBkaXNhYmxlZCBleHRlcm5hbCByb3V0ZSBjaGFuZ2VzIG1vbml0b3JpbmcgZHVlIHRvIHN5bmMgaXNzdWVzIC0gd2hpY2ggaXMgYmFkIDopIC0gcmVmcmVzaCBmcm9tIHVybCB3aWxsIG5vdCB3b3JrXG4gICAgLy8gdW50aWwgaSBjb21lIHVwIHdpdGggYSBzb2x1dGlvbi4uLlxuXG4gICAgdGhpcy5yb3V0ZVN1YiQgPSB0aGlzLnJvdXRlJC5xdWVyeVBhcmFtTWFwLnN1YnNjcmliZShwYXJhbXMgPT4ge1xuICAgICAgaWYgKHBhcmFtcy5rZXlzLmxlbmd0aCA9PT0gMCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIC8vIGNoYW5naW5nIHRoZSB2aWV3IG1vZGUgZG9lcyBub3QgcmVxdWlyZSByZWxvYWRpbmcuLi5cbiAgICAgIHRoaXMudmlldyA9IHBhcmFtcy5nZXQoJ3ZpZXcnKSB8fCBMaXN0Vmlld1R5cGUuVGlsZXM7XG4gICAgICAvLyBjb25zb2xlLmxvZygncm91dGUgY2hhbmdlcyAnLCB0aGlzLnZpZXcpO1xuXG4gICAgICBpZiAocGFyYW1zLmdldCgnc2VhcmNoJykgIT09IG51bGwgJiYgcGFyYW1zLmdldCgnc2VhcmNoJykgIT09IHRoaXMuc2VhcmNoKSB7XG4gICAgICAgIHRoaXMuc2VhcmNoQ2hhbmdlZChwYXJhbXMuZ2V0KCdzZWFyY2gnKSk7XG4gICAgICB9XG5cbiAgICAgIGNvbnN0IHBhZ2UgPSArKHBhcmFtcy5nZXQoJ3BhZ2UnKSB8fCAxKTtcbiAgICAgIGlmIChwYWdlICE9PSB0aGlzLnBhZ2UpIHtcbiAgICAgICAgdGhpcy5wYWdlID0gcGFnZTtcbiAgICAgIH1cblxuICAgICAgY29uc3Qgc2l6ZSA9ICsocGFyYW1zLmdldCgncGFnZXNpemUnKSB8fCAyMCk7XG4gICAgICBpZiAodGhpcy5wYWdlU2l6ZSAhPT0gc2l6ZSkge1xuICAgICAgICB0aGlzLnBhZ2VTaXplID0gc2l6ZTtcbiAgICAgIH1cblxuICAgICAgaWYgKHBhcmFtcy5nZXQoJ3NlYXJjaCcpICE9PSB0aGlzLnNlYXJjaCkge1xuICAgICAgICB0aGlzLnNlYXJjaCA9IHBhcmFtcy5nZXQoJ3NlYXJjaCcpO1xuICAgICAgfVxuXG4gICAgICBpZiAocGFyYW1zLmdldCgnc29ydCcpICE9PSB0aGlzLnNvcnQpIHtcbiAgICAgICAgdGhpcy5zb3J0ID0gcGFyYW1zLmdldCgnc29ydCcpO1xuICAgICAgfVxuXG4gICAgICBpZiAocGFyYW1zLmdldCgnZGlyJykgIT09IHRoaXMuc29ydGRpcikge1xuICAgICAgICB0aGlzLnNvcnRkaXIgPSBwYXJhbXMuZ2V0KCdkaXInKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgICBcbiAgICAvLyBqdXN0IHRvIHN5bmMgcGFyYW1zIGluIHF1ZXJ5XG4gICAgdGhpcy5zZXRSb3V0ZVBhcmFtcyh0cnVlKTtcbiAgICB0aGlzLmxvYWQoKTtcbiAgfVxuXG4gIHByaXZhdGUgc2V0Um91dGVQYXJhbXMobG9jYXRpb25DaGFuZ2U6IGJvb2xlYW4gPSBmYWxzZSk6IHZvaWQge1xuICAgIGNvbnNvbGUubG9nKHRoaXMuc29ydGRpcik7XG4gICAgXG4gICAgdGhpcy5yb3V0ZXIkLm5hdmlnYXRlKFtdLCB7XG4gICAgICByZWxhdGl2ZVRvOiB0aGlzLnJvdXRlJCwgcXVlcnlQYXJhbXM6IHtcbiAgICAgICAgdmlldzogdGhpcy52aWV3LFxuICAgICAgICBwYWdlOiB0aGlzLnBhZ2UsXG4gICAgICAgIHBhZ2VzaXplOiB0aGlzLnBhZ2VTaXplLFxuICAgICAgICBzZWFyY2g6IHRoaXMuc2VhcmNoLFxuICAgICAgICBzb3J0OiB0aGlzLnNvcnQsXG4gICAgICAgIGRpcjogdGhpcy5zb3J0ZGlyXG4gICAgICB9LCBxdWVyeVBhcmFtc0hhbmRsaW5nOiAnbWVyZ2UnLCBza2lwTG9jYXRpb25DaGFuZ2U6IGxvY2F0aW9uQ2hhbmdlXG4gICAgfSk7XG4gIH1cblxuICBwdWJsaWMgYWN0aW9uSGFuZGxlcigkZXZlbnQ6IFZpZXdBY3Rpb24pOiB2b2lkIHtcbiAgICAvLyBjb25zb2xlLmxvZygnQmFzZUxpc3RDb21wb25lbnQgYWN0aW9uSGFuZGxlcicsICRldmVudCk7XG4gICAgaWYgKCRldmVudC5rZXkgPT09ICdyZWZyZXNoJykge1xuICAgICAgdGhpcy5yZWZyZXNoKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBsb2FkKCk6IHZvaWQge1xuICAgIC8vIGNvbnNvbGUubG9nKCdCYXNlTGlzdENvbXBvbmVudCBMT0FEJyk7XG4gICAgdGhpcy5jb3VudCA9IDA7XG4gICAgdGhpcy5pdGVtcyA9IG51bGw7XG4gICAgdGhpcy5sb2FkSXRlbXMoKS5zdWJzY3JpYmUocmVzdWx0ID0+IHtcbiAgICAgIHRoaXMuY291bnQgPSByZXN1bHQgPyByZXN1bHQuY291bnQgOiAwO1xuICAgICAgdGhpcy5pdGVtcyA9IHJlc3VsdD8uaXRlbXM7XG4gICAgICB0aGlzLnVwZGF0ZUhlYWRlck1ldGEoKTtcbiAgICB9LCBlcnIgPT4ge1xuICAgICAgdGhpcy5jb3VudCA9IDA7XG4gICAgICB0aGlzLml0ZW1zID0gbnVsbDtcbiAgICAgIHRoaXMudXBkYXRlSGVhZGVyTWV0YSgpO1xuICAgIH0pO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGVIZWFkZXJNZXRhKCk6IHZvaWQge1xuICAgIGNvbnN0IGNvdW50ID0gdGhpcy5tZXRhSXRlbXM/LmZpbHRlcihtID0+IG0ua2V5ID09PSAnY291bnQnKVswXTtcbiAgICBpZiAoY291bnQpIHtcbiAgICAgIHRoaXMuY291bnQgPT09IDEgPyBjb3VudC50ZXh0ID0gYCR7dGhpcy5jb3VudH0gzrHPgM6/z4TOrc67zrXPg868zrFgIDogY291bnQudGV4dCA9IGAke3RoaXMuY291bnR9IM6xz4DOv8+EzrXOu86tz4POvM6xz4TOsWA7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIGFic3RyYWN0IGxvYWRJdGVtcygpOiBPYnNlcnZhYmxlPElSZXN1bHRTZXQ8VD4gfCBudWxsIHwgdW5kZWZpbmVkPjtcblxuICBwdWJsaWMgY2xlYXIoKTogdm9pZCB7XG4gICAgdGhpcy5jb3VudCA9IDA7XG4gICAgdGhpcy5wYWdlID0gMTtcbiAgICB0aGlzLml0ZW1zID0gbnVsbDtcbiAgICB0aGlzLnNlYXJjaCA9IG51bGw7XG4gICAgdGhpcy5zZXRSb3V0ZVBhcmFtcygpO1xuICAgIHRoaXMubG9hZCgpO1xuICB9XG5cbiAgcHVibGljIHJlZnJlc2goKTogdm9pZCB7XG4gICAgdGhpcy5jb3VudCA9IDA7XG4gICAgdGhpcy5wYWdlID0gMTtcbiAgICB0aGlzLml0ZW1zID0gbnVsbDtcbiAgICB0aGlzLnNldFJvdXRlUGFyYW1zKCk7XG4gICAgdGhpcy5sb2FkKCk7XG4gIH1cblxuICBwdWJsaWMgcGFnZUNoYW5nZWQocGFnZTogbnVtYmVyKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucGFnZSAhPT0gcGFnZSkge1xuICAgICAgdGhpcy5wYWdlID0gcGFnZTtcbiAgICAgIHRoaXMuc2V0Um91dGVQYXJhbXMoKTtcbiAgICAgIHRoaXMubG9hZCgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBwYWdlU2l6ZUNoYW5nZWQocGFnZVNpemU6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLnBhZ2VTaXplICE9PSBwYWdlU2l6ZSkge1xuICAgICAgdGhpcy5wYWdlU2l6ZSA9IHBhZ2VTaXplO1xuICAgICAgdGhpcy5wYWdlID0gMTtcbiAgICAgIHRoaXMuc2V0Um91dGVQYXJhbXMoKTtcbiAgICAgIHRoaXMucmVmcmVzaCgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBzb3J0Q2hhbmdlZChzb3J0OiBzdHJpbmcpOiB2b2lkIHtcbiAgICAvLyBjb25zb2xlLmxvZygnYmFzZS1saXN0IHNvcnRDaGFuZ2VkJywgc29ydCk7XG4gICAgaWYgKHRoaXMuc29ydCAhPT0gc29ydCkge1xuICAgICAgdGhpcy5wYWdlID0gMTtcbiAgICAgIHRoaXMuc29ydCA9IHNvcnQ7XG4gICAgICB0aGlzLnNldFJvdXRlUGFyYW1zKCk7XG4gICAgICB0aGlzLnJlZnJlc2goKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgc29ydGRpckNoYW5nZWQoc29ydGRpcjogc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuc29ydGRpciAhPT0gc29ydGRpcikge1xuICAgICAgdGhpcy5wYWdlID0gMTtcbiAgICAgIHRoaXMuc29ydGRpciA9IHNvcnRkaXI7XG4gICAgICB0aGlzLnNldFJvdXRlUGFyYW1zKCk7XG4gICAgICB0aGlzLnJlZnJlc2goKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgc2VhcmNoQ2hhbmdlZChzZWFyY2hUZXh0OiBzdHJpbmcgfCBudWxsKTogdm9pZCB7XG4gICAgdGhpcy5jb3VudCA9IDA7XG4gICAgdGhpcy5wYWdlID0gMTtcbiAgICB0aGlzLml0ZW1zID0gbnVsbDtcbiAgICB0aGlzLnNlYXJjaCA9IHNlYXJjaFRleHQ7XG4gICAgdGhpcy5zZXRSb3V0ZVBhcmFtcygpO1xuICAgIHRoaXMubG9hZCgpO1xuICB9XG59XG4iXX0=

package/fesm2015/indice-ng-components.mjs

@@ -1635,12 +1635,12 @@ class LibTabGroupComponent {
 LibTabGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 LibTabGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibTabGroupComponent, selector: "lib-tab-group", outputs: { tabChanged: "tabChanged" }, providers: [
         { provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
-    ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"sm:hidden\">\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\n    </select>\n</div>\n<div class=\"hidden sm:block\">\n    <div class=\"tab-group-container\">\n        <nav class=\"-mb-px flex space-x-8\" aria-label=\"Tabs\">\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\n                {{ tab.label }}\n            </a>\n        </nav>\n    </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    ], queries: [{ propertyName: "tabs", predicate: LibTabComponent, descendants: true }], ngImport: i0, template: "<div class=\"tab-group-select-hidden\">\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\n    </select>\n</div>\n<div class=\"tab-group-container-hidden\">\n    <div class=\"tab-group-container\">\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\n                {{ tab.label }}\n            </a>\n        </nav>\n    </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibTabGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-tab-group', providers: [
                         { provide: LIBTABGROUP_ACCESSOR, useExisting: forwardRef(() => LibTabGroupComponent) }
-                    ], template: "<div class=\"sm:hidden\">\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\n    </select>\n</div>\n<div class=\"hidden sm:block\">\n    <div class=\"tab-group-container\">\n        <nav class=\"-mb-px flex space-x-8\" aria-label=\"Tabs\">\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\n                {{ tab.label }}\n            </a>\n        </nav>\n    </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\n</div>" }]
+                    ], template: "<div class=\"tab-group-select-hidden\">\n    <label for=\"tabs\" class=\"sr-only\">Select a tab</label>\n    <select id=\"tabs\" name=\"tabs\" (change)=\"onTabSelectChanged(+tabsSelect.value)\" class=\"tab-group-select\" #tabsSelect>\n        <option [value]=\"i\" *ngFor=\"let tab of tabs; let i = index\">{{ tab.label }}</option>\n    </select>\n</div>\n<div class=\"tab-group-container-hidden\">\n    <div class=\"tab-group-container\">\n        <nav class=\"tab-group-container-nav\" aria-label=\"Tabs\">\n            <a *ngFor=\"let tab of tabs\" href=\"javascript:void(0)\" [class.tab]=\"!tab.isActive\" [class.tab-active]=\"tab.isActive\" (click)=\"onTabChanged(tab)\">\n                {{ tab.label }}\n            </a>\n        </nav>\n    </div>\n</div>\n<div *ngIf=\"currentTab?.content\">\n    <ng-container [ngTemplateOutlet]=\"currentTab!.content\"></ng-container>\n</div>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [LibTabComponent, { descendants: true }]
@@ -1832,12 +1832,12 @@ class LibStepperComponent {
 LibStepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 LibStepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: LibStepperComponent, selector: "lib-stepper", inputs: { linear: "linear", type: "type" }, outputs: { stepChanged: "stepChanged" }, providers: [
         { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
-    ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\n                    </span>\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"space-y-6\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"flex items-start\">\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\n                        </span>\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"flex items-start\">\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\n                            </div>\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"lg:border-t lg:border-b lg:border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"rounded-md overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 lg:rounded-none\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\n                    <!-- Completed Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <!-- <h4 class=\"sr-only\">Status</h4>\n        <p class=\"text-sm font-medium text-gray-900\">Migrating MySQL database...</p> -->\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+    ], queries: [{ propertyName: "steps", predicate: LibStepComponent, descendants: true }], ngImport: i0, template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\n                    </span>\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"space-y-6\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"flex items-start\">\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\n                        </span>\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"flex items-start\">\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\n                            </div>\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"border-t border-b border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"rounded-md overflow-hidden flex border-l border-r border-gray-200 lg:rounded-none\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\n                    <!-- Completed Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: LibStepperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-stepper', providers: [
                         { provide: LIBSTEPPER_ACCESSOR, useExisting: forwardRef(() => LibStepperComponent) }
-                    ], template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\n                    </span>\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"space-y-6\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"flex items-start\">\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\n                        </span>\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"flex items-start\">\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\n                            </div>\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"lg:border-t lg:border-b lg:border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"rounded-md overflow-hidden lg:flex lg:border-l lg:border-r lg:border-gray-200 lg:rounded-none\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\n                    <!-- Completed Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <!-- <h4 class=\"sr-only\">Status</h4>\n        <p class=\"text-sm font-medium text-gray-900\">Migrating MySQL database...</p> -->\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>" }]
+                    ], template: "<ng-container [ngSwitch]=\"type\">\n    <!-- Bullets -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Bullets\">\n        <p class=\"text-sm font-medium\">Step {{ currentStepIndex + 1 }} of {{ steps.length }}</p>\n        <ol role=\"list\" class=\"ml-8 flex items-center space-x-5\">\n            <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                <!-- Completed Step -->\n                <div class=\"block w-2.5 h-2.5 bg-blue-600 rounded-full hover:bg-blue-900\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"relative flex items-center justify-center\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"absolute w-5 h-5 p-px flex\" aria-hidden=\"true\">\n                        <span class=\"w-full h-full rounded-full bg-blue-200\"></span>\n                    </span>\n                    <span class=\"relative block w-2.5 h-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n                <!-- Upcoming Step -->\n                <div href=\"#\" class=\"block w-2.5 h-2.5 bg-gray-200 rounded-full hover:bg-gray-400\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"sr-only\">Step {{ step.index }}</span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Bullets & Text -->\n    <div class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.BulletsAndText\">\n        <nav aria-label=\"Progress\">\n            <ol role=\"list\" class=\"space-y-6\">\n                <li class=\"cursor-pointer\" *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\">\n                    <!-- Complete Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Completed\">\n                        <span class=\"flex items-start\">\n                            <span class=\"flex-shrink-0 relative h-5 w-5 flex items-center justify-center\">\n                                <svg class=\"h-full w-full text-blue-600 group-hover:text-blue-800\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                            <span class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"flex items-start\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                        <span class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                            <span class=\"absolute h-4 w-4 rounded-full bg-blue-200\"></span>\n                            <span class=\"relative block w-2 h-2 bg-blue-600 rounded-full\"></span>\n                        </span>\n                        <span class=\"ml-3 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"group\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"flex items-start\">\n                            <div class=\"flex-shrink-0 h-5 w-5 relative flex items-center justify-center\" aria-hidden=\"true\">\n                                <div class=\"h-2 w-2 bg-gray-300 rounded-full group-hover:bg-gray-400\"></div>\n                            </div>\n                            <p class=\"ml-3 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </p>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Circles -->\n    <nav class=\"flex justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Circles\">\n        <ol class=\"flex items-center\" role=\"list\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pr-8 sm:pr-20 cursor-pointer\">\n                <!-- Completed Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-blue-600\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full hover:bg-blue-900\">\n                        <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                        </svg>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"relative w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\" aria-current=\"step\">\n                        <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"absolute inset-0 flex items-center\" aria-hidden=\"true\">\n                        <div class=\"h-0.5 w-full bg-gray-200\"></div>\n                    </div>\n                    <div class=\"group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400\">\n                        <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\" aria-hidden=\"true\"></span>\n                        <span class=\"sr-only\">Step {{ step.index + 1 }}</span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Circles With Text -->\n    <nav class=\"flex items-center justify-center\" aria-label=\"Progress\" *ngSwitchCase=\"StepperType.CirclesWithText\">\n        <ol role=\"list\" class=\"overflow-hidden\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative pb-10 cursor-pointer\">\n                <!-- Complete Step -->\n                <ng-container *ngIf=\"step.state === StepState.Completed\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-blue-600\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                                <svg class=\"w-5 h-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                    <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                </svg>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Active Step -->\n                <ng-container *ngIf=\"step.state === StepState.Active\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div class=\"relative flex items-start group\" aria-current=\"step\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-blue-600 rounded-full\">\n                                <span class=\"h-2.5 w-2.5 bg-blue-600 rounded-full\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-blue-600\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n                <!-- Upcoming Step -->\n                <ng-container *ngIf=\"step.state === StepState.Upcoming\">\n                    <div class=\"-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full bg-gray-300\" aria-hidden=\"true\" *ngIf=\"!step.isLast\"></div>\n                    <div href=\"#\" class=\"relative flex items-start group\">\n                        <span class=\"h-9 flex items-center\" aria-hidden=\"true\">\n                            <span class=\"relative z-10 w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                                <span class=\"h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300\"></span>\n                            </span>\n                        </span>\n                        <span class=\"ml-4 min-w-0 flex flex-col\">\n                            <span class=\"text-xs font-semibold tracking-wide uppercase text-gray-500\" *ngIf=\"step.stepLabel\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                            </span>\n                            <span class=\"text-sm text-gray-500\" *ngIf=\"step.stepInfo\">\n                                <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                            </span>\n                        </span>\n                    </div>\n                </ng-container>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Panels\">\n        <ol role=\"list\" class=\"border border-gray-300 rounded-md divide-y divide-gray-300 md:flex md:divide-y-0\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative md:flex-1 md:flex cursor-pointer\">\n                <!-- Completed step -->\n                <div class=\"group flex items-center w-full\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full group-hover:bg-blue-800\">\n                            <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                            </svg>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Active step -->\n                <div class=\"px-6 py-4 flex items-center text-sm font-medium\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                        <span class=\"text-blue-600\">{{ (step.index + 1) }}</span>\n                    </span>\n                    <span class=\"ml-4 text-sm font-medium text-blue-600\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming step -->\n                <div class=\"group flex items-center\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"px-6 py-4 flex items-center text-sm font-medium\">\n                        <span class=\"flex-shrink-0 w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full group-hover:border-gray-400\">\n                            <span class=\"text-gray-500 group-hover:text-gray-900\">{{ (step.index + 1) }}</span>\n                        </span>\n                        <span class=\"ml-4 text-sm font-medium text-gray-500 group-hover:text-gray-900\" *ngIf=\"step.stepLabel\">\n                            <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                        </span>\n                    </span>\n                </div>\n                <!-- Arrow separator for lg screens and up -->\n                <div *ngIf=\"!step.isLast\" class=\"hidden md:block absolute top-0 right-0 h-full w-5\" aria-hidden=\"true\">\n                    <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 22 80\" fill=\"none\" preserveAspectRatio=\"none\">\n                        <path d=\"M0 -2L20 40L0 82\" vector-effect=\"non-scaling-stroke\" stroke=\"currentcolor\" stroke-linejoin=\"round\" />\n                    </svg>\n                </div>\n            </li>\n        </ol>\n    </nav>\n    <!-- Panels With Border -->\n    <div class=\"border-t border-b border-gray-200\" *ngSwitchCase=\"StepperType.PanelsWithBorder\">\n        <nav class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\" aria-label=\"Progress\">\n            <ol role=\"list\" class=\"rounded-md overflow-hidden flex border-l border-r border-gray-200 lg:rounded-none\">\n                <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"relative overflow-hidden lg:flex-1 cursor-pointer\">\n                    <!-- Completed Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-b-0 rounded-t-md lg:border-0\" *ngIf=\"step.state === StepState.Completed\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center bg-blue-600 rounded-full\">\n                                        <svg class=\"w-6 h-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n                                            <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                                        </svg>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                    </div>\n                    <!-- Active Step -->\n                    <div class=\"border border-gray-200 overflow-hidden lg:border-0\" *ngIf=\"step.state === StepState.Active\">\n                        <div aria-current=\"step\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-blue-600 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-blue-600 rounded-full\">\n                                        <span class=\"text-blue-600\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-blue-600 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!-- Upcoming Step -->\n                    <div class=\"border border-gray-200 overflow-hidden border-t-0 rounded-b-md lg:border-0\" *ngIf=\"step.state === StepState.Upcoming\">\n                        <div class=\"group\">\n                            <span class=\"absolute top-0 left-0 w-1 h-full bg-transparent group-hover:bg-gray-200 lg:w-full lg:h-1 lg:bottom-0 lg:top-auto\" aria-hidden=\"true\"></span>\n                            <span class=\"px-6 py-5 flex items-start text-sm font-medium lg:pl-9\">\n                                <span class=\"flex-shrink-0\">\n                                    <span class=\"w-10 h-10 flex items-center justify-center border-2 border-gray-300 rounded-full\">\n                                        <span class=\"text-gray-500\">{{ step.index + 1 }}</span>\n                                    </span>\n                                </span>\n                                <span class=\"mt-0.5 ml-4 min-w-0 flex flex-col\">\n                                    <span class=\"text-xs font-semibold text-gray-500 tracking-wide uppercase\" *ngIf=\"step.stepLabel\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                                    </span>\n                                    <span class=\"text-sm font-medium text-gray-500\" *ngIf=\"step.stepInfo\">\n                                        <ng-container [ngTemplateOutlet]=\"step.stepInfo.template\"></ng-container>\n                                    </span>\n                                </span>\n                            </span>\n                        </div>\n                        <!-- Separator -->\n                        <div class=\"hidden absolute top-0 left-0 w-3 inset-0 lg:block\" aria-hidden=\"true\" *ngIf=\"step.index !== 0\">\n                            <svg class=\"h-full w-full text-gray-300\" viewBox=\"0 0 12 82\" fill=\"none\" preserveAspectRatio=\"none\">\n                                <path d=\"M0.5 0V31L10.5 41L0.5 51V82\" stroke=\"currentcolor\" vector-effect=\"non-scaling-stroke\" />\n                            </svg>\n                        </div>\n                    </div>\n                </li>\n            </ol>\n        </nav>\n    </div>\n    <!-- Progress -->\n    <div *ngSwitchCase=\"StepperType.Progress\">\n        <div class=\"mt-6\" aria-hidden=\"true\">\n            <div class=\"bg-gray-200 rounded-full overflow-hidden\">\n                <div class=\"h-2 bg-blue-600 rounded-full\" [style.width]=\"(((currentStepIndex + 1) / steps.length) * 100) + '%'\"></div>\n            </div>\n            <div class=\"hidden sm:grid grid-cols-4 text-sm font-medium text-gray-600 mt-6\">\n                <div *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"text-blue-600 cursor-pointer\">\n                    <ng-container *ngIf=\"step.stepLabel\" [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                </div>\n            </div>\n        </div>\n    </div>\n    <!-- Simple -->\n    <nav aria-label=\"Progress\" *ngSwitchCase=\"StepperType.Simple\">\n        <ol role=\"list\" class=\"space-y-4 md:flex md:space-y-0 md:space-x-8\">\n            <li *ngFor=\"let step of steps\" (click)=\"onSelectStep(step)\" class=\"md:flex-1 cursor-pointer\">\n                <!-- Completed Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-blue-600 hover:border-blue-800 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Completed\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase group-hover:text-blue-800\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Active Step -->\n                <div class=\"pl-4 py-2 flex flex-col border-l-4 border-blue-600 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" aria-current=\"step\" *ngIf=\"step.state === StepState.Active\">\n                    <span class=\"text-xs text-blue-600 font-semibold tracking-wide uppercase\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n                <!-- Upcoming Step -->\n                <div class=\"group pl-4 py-2 flex flex-col border-l-4 border-gray-200 hover:border-gray-300 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4\" *ngIf=\"step.state === StepState.Upcoming\">\n                    <span class=\"text-xs text-gray-500 font-semibold tracking-wide uppercase group-hover:text-gray-700\">Step {{ step.index + 1 }}</span>\n                    <span class=\"text-sm font-medium\" *ngIf=\"step.stepLabel\">\n                        <ng-container [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-container>\n                    </span>\n                </div>\n            </li>\n        </ol>\n    </nav>\n</ng-container>\n<ng-container *ngFor=\"let step of steps\">\n    <ng-container *ngIf=\"step.state === StepState.Active\" [ngTemplateOutlet]=\"step.content\"></ng-container>\n</ng-container>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { steps: [{
                 type: ContentChildren,
                 args: [LibStepComponent, { descendants: true }]
@@ -3084,7 +3084,7 @@ class BaseListComponent {
             // changing the view mode does not require reloading...
             this.view = params.get('view') || ListViewType.Tiles;
             // console.log('route changes ', this.view);
-            if (params.get('search') !== this.search) {
+            if (params.get('search') !== null && params.get('search') !== this.search) {
                 this.searchChanged(params.get('search'));
             }
             const page = +(params.get('page') || 1);
@@ -3101,15 +3101,16 @@ class BaseListComponent {
             if (params.get('sort') !== this.sort) {
                 this.sort = params.get('sort');
             }
-            // if (params.get('sortdir') !== this.sortdir) {
-            //   this.sortdir = params.get('sortdir');
-            // }
+            if (params.get('dir') !== this.sortdir) {
+                this.sortdir = params.get('dir');
+            }
         });
         // just to sync params in query
         this.setRouteParams(true);
         this.load();
     }
     setRouteParams(locationChange = false) {
+        console.log(this.sortdir);
         this.router$.navigate([], {
             relativeTo: this.route$, queryParams: {
                 view: this.view,