ps-toolkit-ui 1.21.38 → 1.21.42

package/fesm2022/ps-toolkit-ui.mjs

@@ -7576,11 +7576,14 @@ class FooterComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FooterComponent, deps: [{ token: PsToolkitUiConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: FooterComponent, isStandalone: false, selector: "lib-footer", ngImport: i0, template: "<div id=\"Footer\">\r\n    <div class=\"copyright\">\r\n      <i class=\"far fa-copyright\"></i>\r\n      {{l('Copyright', 'SoftwareName')}}\r\n    </div>\r\n    <div class=\"creator\">\r\n      <i class=\"fas fa-heart\"></i> {{l('CreatorDesc')}} <a href=\"http://partsilicon.ir/\" target=\"_blank\">{{l('CreatorCom')}}</a>\r\n    </div>\r\n</div>\r\n", styles: ["#Footer{position:fixed;width:100%;line-height:35px;background-color:var(--base-dark);bottom:0;right:0;color:#fff;text-align:center;z-index:2;font-size:12px;font-weight:var(--font-bold)}#Footer .copyright,#Footer .creator{float:right;width:50%}#Footer .copyright i,#Footer .creator i,#Footer .creator a{color:var(--primary)!important}@media(max-width:599.98px){#Footer{z-index:-1}#Footer .copyright,#Footer .creator{width:100%;line-height:30px}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: FooterComponent, isStandalone: true, selector: "lib-footer", ngImport: i0, template: "<div id=\"Footer\">\r\n    <div class=\"copyright\">\r\n      <i class=\"far fa-copyright\"></i>\r\n      {{l('Copyright', 'SoftwareName')}}\r\n    </div>\r\n    <div class=\"creator\">\r\n      <i class=\"fas fa-heart\"></i> {{l('CreatorDesc')}} <a href=\"http://partsilicon.ir/\" target=\"_blank\">{{l('CreatorCom')}}</a>\r\n    </div>\r\n</div>\r\n", styles: ["#Footer{position:fixed;width:100%;line-height:35px;background-color:var(--base-dark);bottom:0;right:0;color:#fff;text-align:center;z-index:2;font-size:12px;font-weight:var(--font-bold)}#Footer .copyright,#Footer .creator{float:right;width:50%}#Footer .copyright i,#Footer .creator i,#Footer .creator a{color:var(--primary)!important}@media(max-width:599.98px){#Footer{z-index:-1}#Footer .copyright,#Footer .creator{width:100%;line-height:30px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-footer', standalone: false, template: "<div id=\"Footer\">\r\n    <div class=\"copyright\">\r\n      <i class=\"far fa-copyright\"></i>\r\n      {{l('Copyright', 'SoftwareName')}}\r\n    </div>\r\n    <div class=\"creator\">\r\n      <i class=\"fas fa-heart\"></i> {{l('CreatorDesc')}} <a href=\"http://partsilicon.ir/\" target=\"_blank\">{{l('CreatorCom')}}</a>\r\n    </div>\r\n</div>\r\n", styles: ["#Footer{position:fixed;width:100%;line-height:35px;background-color:var(--base-dark);bottom:0;right:0;color:#fff;text-align:center;z-index:2;font-size:12px;font-weight:var(--font-bold)}#Footer .copyright,#Footer .creator{float:right;width:50%}#Footer .copyright i,#Footer .creator i,#Footer .creator a{color:var(--primary)!important}@media(max-width:599.98px){#Footer{z-index:-1}#Footer .copyright,#Footer .creator{width:100%;line-height:30px}}\n"] }]
+            args: [{ selector: 'lib-footer', imports: [
+                        CommonModule,
+                        FormsModule,
+                    ], standalone: true, template: "<div id=\"Footer\">\r\n    <div class=\"copyright\">\r\n      <i class=\"far fa-copyright\"></i>\r\n      {{l('Copyright', 'SoftwareName')}}\r\n    </div>\r\n    <div class=\"creator\">\r\n      <i class=\"fas fa-heart\"></i> {{l('CreatorDesc')}} <a href=\"http://partsilicon.ir/\" target=\"_blank\">{{l('CreatorCom')}}</a>\r\n    </div>\r\n</div>\r\n", styles: ["#Footer{position:fixed;width:100%;line-height:35px;background-color:var(--base-dark);bottom:0;right:0;color:#fff;text-align:center;z-index:2;font-size:12px;font-weight:var(--font-bold)}#Footer .copyright,#Footer .creator{float:right;width:50%}#Footer .copyright i,#Footer .creator i,#Footer .creator a{color:var(--primary)!important}@media(max-width:599.98px){#Footer{z-index:-1}#Footer .copyright,#Footer .creator{width:100%;line-height:30px}}\n"] }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }] });
 
 class HeaderComponent {
@@ -7594,11 +7597,16 @@ class HeaderComponent {
         $$1(e.target).closest('#Header').find('.user-drop-down').slideToggle(100);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: HeaderComponent, deps: [{ token: PsToolkitUiConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: HeaderComponent, isStandalone: false, selector: "lib-header", inputs: { header: "header" }, ngImport: i0, template: "<div id=\"Header\" class=\"underline\">\r\n  <div class=\"content\"><ng-content></ng-content></div>\r\n  <div class=\"user-con\">\r\n    <i (click)=\"showUserDropDown($event)\" class=\"fad fa-user user\"></i>\r\n    <div class=\"user-drop-down\">\r\n      <div class=\"username underline\" *ngIf=\"header.username != null\">{{header.username}}</div>\r\n      <div class=\"info\" *ngIf=\"header.info != null\" [innerHTML]=\"header.info\"></div>\r\n      <span *ngFor=\"let btn of header.buttons\">\r\n        <lib-form-button [inp]=\"btn\" *ngIf=\"btn.type == type.Button\"></lib-form-button>\r\n        <lib-form-icon [inp]=\"btn\" *ngIf=\"btn.type == type.Icon\"></lib-form-icon>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Header{float:right;width:100%;height:50px;background-color:#fff;position:relative;z-index:110}#Header .content{float:right;width:calc(100% - 150px);height:100%;margin-right:50px;text-align:center}#Header .user-con{float:right;width:100px;justify-content:center;align-items:center;display:flex;height:100%;position:relative}#Header .user-con .user{float:right;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;font-size:18px;cursor:pointer;color:var(--primary)}#Header .user-con .user:hover{color:var(--primary-dark)}#Header .user-con .user-drop-down{width:150px;display:none;position:absolute;top:55px;left:20px;background-color:#fff;border-radius:var(--border-radius-base);box-shadow:var(--box-shadow);overflow:hidden}#Header .user-con .user-drop-down .username{text-align:center;line-height:35px;font-weight:var(--font-bold);float:right;width:100%;position:relative}#Header .user-con .user-drop-down .info{float:right;width:100%}::ng-deep #Header .user-drop-down .form-input-con.button .control{border-radius:0}@media(max-width:399.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}@media(min-width:400px)and (max-width:499.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}\n"], dependencies: [{ kind: "component", type: FormIconComponent, selector: "lib-form-icon", inputs: ["inp"], outputs: ["changeIndex"] }, { kind: "component", type: FormButtonComponent, selector: "lib-form-button", inputs: ["inp"], outputs: ["changeIndex"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: HeaderComponent, isStandalone: true, selector: "lib-header", inputs: { header: "header" }, ngImport: i0, template: "<div id=\"Header\" class=\"underline\">\r\n  <div class=\"content\"><ng-content></ng-content></div>\r\n  <div class=\"user-con\">\r\n    <i (click)=\"showUserDropDown($event)\" class=\"fad fa-user user\"></i>\r\n    <div class=\"user-drop-down\">\r\n      <div class=\"username underline\" *ngIf=\"header.username != null\">{{header.username}}</div>\r\n      <div class=\"info\" *ngIf=\"header.info != null\" [innerHTML]=\"header.info\"></div>\r\n      <span *ngFor=\"let btn of header.buttons\">\r\n        <lib-form-button [inp]=\"btn\" *ngIf=\"btn.type == type.Button\"></lib-form-button>\r\n        <lib-form-icon [inp]=\"btn\" *ngIf=\"btn.type == type.Icon\"></lib-form-icon>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Header{float:right;width:100%;height:50px;background-color:#fff;position:relative;z-index:110}#Header .content{float:right;width:calc(100% - 150px);height:100%;margin-right:50px;text-align:center}#Header .user-con{float:right;width:100px;justify-content:center;align-items:center;display:flex;height:100%;position:relative}#Header .user-con .user{float:right;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;font-size:18px;cursor:pointer;color:var(--primary)}#Header .user-con .user:hover{color:var(--primary-dark)}#Header .user-con .user-drop-down{width:150px;display:none;position:absolute;top:55px;left:20px;background-color:#fff;border-radius:var(--border-radius-base);box-shadow:var(--box-shadow);overflow:hidden}#Header .user-con .user-drop-down .username{text-align:center;line-height:35px;font-weight:var(--font-bold);float:right;width:100%;position:relative}#Header .user-con .user-drop-down .info{float:right;width:100%}::ng-deep #Header .user-drop-down .form-input-con.button .control{border-radius:0}@media(max-width:399.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}@media(min-width:400px)and (max-width:499.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FormButtonComponent, selector: "lib-form-button", inputs: ["inp"], outputs: ["changeIndex"] }, { kind: "component", type: FormIconComponent, selector: "lib-form-icon", inputs: ["inp"], outputs: ["changeIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-header', standalone: false, template: "<div id=\"Header\" class=\"underline\">\r\n  <div class=\"content\"><ng-content></ng-content></div>\r\n  <div class=\"user-con\">\r\n    <i (click)=\"showUserDropDown($event)\" class=\"fad fa-user user\"></i>\r\n    <div class=\"user-drop-down\">\r\n      <div class=\"username underline\" *ngIf=\"header.username != null\">{{header.username}}</div>\r\n      <div class=\"info\" *ngIf=\"header.info != null\" [innerHTML]=\"header.info\"></div>\r\n      <span *ngFor=\"let btn of header.buttons\">\r\n        <lib-form-button [inp]=\"btn\" *ngIf=\"btn.type == type.Button\"></lib-form-button>\r\n        <lib-form-icon [inp]=\"btn\" *ngIf=\"btn.type == type.Icon\"></lib-form-icon>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Header{float:right;width:100%;height:50px;background-color:#fff;position:relative;z-index:110}#Header .content{float:right;width:calc(100% - 150px);height:100%;margin-right:50px;text-align:center}#Header .user-con{float:right;width:100px;justify-content:center;align-items:center;display:flex;height:100%;position:relative}#Header .user-con .user{float:right;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;font-size:18px;cursor:pointer;color:var(--primary)}#Header .user-con .user:hover{color:var(--primary-dark)}#Header .user-con .user-drop-down{width:150px;display:none;position:absolute;top:55px;left:20px;background-color:#fff;border-radius:var(--border-radius-base);box-shadow:var(--box-shadow);overflow:hidden}#Header .user-con .user-drop-down .username{text-align:center;line-height:35px;font-weight:var(--font-bold);float:right;width:100%;position:relative}#Header .user-con .user-drop-down .info{float:right;width:100%}::ng-deep #Header .user-drop-down .form-input-con.button .control{border-radius:0}@media(max-width:399.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}@media(min-width:400px)and (max-width:499.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}\n"] }]
+            args: [{ selector: 'lib-header', imports: [
+                        CommonModule,
+                        FormsModule,
+                        FormButtonComponent,
+                        FormIconComponent
+                    ], standalone: true, template: "<div id=\"Header\" class=\"underline\">\r\n  <div class=\"content\"><ng-content></ng-content></div>\r\n  <div class=\"user-con\">\r\n    <i (click)=\"showUserDropDown($event)\" class=\"fad fa-user user\"></i>\r\n    <div class=\"user-drop-down\">\r\n      <div class=\"username underline\" *ngIf=\"header.username != null\">{{header.username}}</div>\r\n      <div class=\"info\" *ngIf=\"header.info != null\" [innerHTML]=\"header.info\"></div>\r\n      <span *ngFor=\"let btn of header.buttons\">\r\n        <lib-form-button [inp]=\"btn\" *ngIf=\"btn.type == type.Button\"></lib-form-button>\r\n        <lib-form-icon [inp]=\"btn\" *ngIf=\"btn.type == type.Icon\"></lib-form-icon>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Header{float:right;width:100%;height:50px;background-color:#fff;position:relative;z-index:110}#Header .content{float:right;width:calc(100% - 150px);height:100%;margin-right:50px;text-align:center}#Header .user-con{float:right;width:100px;justify-content:center;align-items:center;display:flex;height:100%;position:relative}#Header .user-con .user{float:right;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;font-size:18px;cursor:pointer;color:var(--primary)}#Header .user-con .user:hover{color:var(--primary-dark)}#Header .user-con .user-drop-down{width:150px;display:none;position:absolute;top:55px;left:20px;background-color:#fff;border-radius:var(--border-radius-base);box-shadow:var(--box-shadow);overflow:hidden}#Header .user-con .user-drop-down .username{text-align:center;line-height:35px;font-weight:var(--font-bold);float:right;width:100%;position:relative}#Header .user-con .user-drop-down .info{float:right;width:100%}::ng-deep #Header .user-drop-down .form-input-con.button .control{border-radius:0}@media(max-width:399.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}@media(min-width:400px)and (max-width:499.98px){#Header .content{font-size:12px;width:calc(100% - 100px)}#Header .user-con{width:50px}}\n"] }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }], propDecorators: { header: [{
                 type: Input
             }] } });
@@ -7643,11 +7651,15 @@ class SidebarItemComponent {
         $$1('#Sidebar').addClass('open').removeClass('close');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SidebarItemComponent, deps: [{ token: PsToolkitUiConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SidebarItemComponent, isStandalone: false, selector: "lib-sidebar-item", inputs: { item: "item", i: "i", base: "base", currentSidebar: "currentSidebar" }, ngImport: i0, template: "<div [className]=\"(isActive(item) ? 'parent-active open ' : '') + 'user-sidebar-item'\" [id]=\"'SidebarItem_' + item.id\">\r\n  <a (click)=\"closeSidebar()\" [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length == 0\" [className]=\"(currentSidebar && item.name == currentSidebar.name ? 'active ' : '') + 'content'\" [routerLink]=\"item.url\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <div *ngIf=\"item.countAll > 0\" class=\"count-all\">{{ item.countAll }}<div *ngIf=\"item.count > 0\" class=\"count\">{{ item.count }}</div></div>\r\n    <div *ngIf=\"item.countAll <= 0 && item.count > 0\" class=\"count\">{{ item.count }}</div>\r\n  </a>\r\n  <div [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length > 0\" (click)=\"openClose($event)\" class=\"content parent\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <div *ngIf=\"item.countAll > 0\" class=\"count-all\">{{ item.countAll }}<div *ngIf=\"item.count > 0\" class=\"count\">{{ item.count }}</div></div>\r\n    <div *ngIf=\"item.countAll <= 0 && item.count > 0\" class=\"count\">{{ item.count }}</div>\r\n    <i [className]=\"'fad fa-angle-left arrow'\"></i>\r\n  </div>\r\n  <div *ngIf=\"item.children.length > 0\" class=\"children\">\r\n    <div class=\"items\">\r\n      <lib-sidebar-item [i]=\"i + 1\" [item]=\"child\" [currentSidebar]=\"currentSidebar\" *ngFor=\"let child of item.children\"></lib-sidebar-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["item", "i", "base", "currentSidebar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SidebarItemComponent, isStandalone: true, selector: "lib-sidebar-item", inputs: { item: "item", i: "i", base: "base", currentSidebar: "currentSidebar" }, ngImport: i0, template: "<div [className]=\"(isActive(item) ? 'parent-active open ' : '') + 'user-sidebar-item'\" [id]=\"'SidebarItem_' + item.id\">\r\n  <a (click)=\"closeSidebar()\" [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length == 0\" [className]=\"(currentSidebar && item.name == currentSidebar.name ? 'active ' : '') + 'content'\" [routerLink]=\"item.url\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <div *ngIf=\"item.countAll > 0\" class=\"count-all\">{{ item.countAll }}<div *ngIf=\"item.count > 0\" class=\"count\">{{ item.count }}</div></div>\r\n    <div *ngIf=\"item.countAll <= 0 && item.count > 0\" class=\"count\">{{ item.count }}</div>\r\n  </a>\r\n  <div [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length > 0\" (click)=\"openClose($event)\" class=\"content parent\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <div *ngIf=\"item.countAll > 0\" class=\"count-all\">{{ item.countAll }}<div *ngIf=\"item.count > 0\" class=\"count\">{{ item.count }}</div></div>\r\n    <div *ngIf=\"item.countAll <= 0 && item.count > 0\" class=\"count\">{{ item.count }}</div>\r\n    <i [className]=\"'fad fa-angle-left arrow'\"></i>\r\n  </div>\r\n  <div *ngIf=\"item.children.length > 0\" class=\"children\">\r\n    <div class=\"items\">\r\n      <lib-sidebar-item [i]=\"i + 1\" [item]=\"child\" [currentSidebar]=\"currentSidebar\" *ngFor=\"let child of item.children\"></lib-sidebar-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["item", "i", "base", "currentSidebar"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SidebarItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sidebar-item', standalone: false, template: "<div [className]=\"(isActive(item) ? 'parent-active open ' : '') + 'user-sidebar-item'\" [id]=\"'SidebarItem_' + item.id\">\r\n  <a (click)=\"closeSidebar()\" [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length == 0\" [className]=\"(currentSidebar && item.name == currentSidebar.name ? 'active ' : '') + 'content'\" [routerLink]=\"item.url\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <div *ngIf=\"item.countAll > 0\" class=\"count-all\">{{ item.countAll }}<div *ngIf=\"item.count > 0\" class=\"count\">{{ item.count }}</div></div>\r\n    <div *ngIf=\"item.countAll <= 0 && item.count > 0\" class=\"count\">{{ item.count }}</div>\r\n  </a>\r\n  <div [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length > 0\" (click)=\"openClose($event)\" class=\"content parent\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <div *ngIf=\"item.countAll > 0\" class=\"count-all\">{{ item.countAll }}<div *ngIf=\"item.count > 0\" class=\"count\">{{ item.count }}</div></div>\r\n    <div *ngIf=\"item.countAll <= 0 && item.count > 0\" class=\"count\">{{ item.count }}</div>\r\n    <i [className]=\"'fad fa-angle-left arrow'\"></i>\r\n  </div>\r\n  <div *ngIf=\"item.children.length > 0\" class=\"children\">\r\n    <div class=\"items\">\r\n      <lib-sidebar-item [i]=\"i + 1\" [item]=\"child\" [currentSidebar]=\"currentSidebar\" *ngFor=\"let child of item.children\"></lib-sidebar-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'lib-sidebar-item', imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule
+                    ], standalone: true, template: "<div [className]=\"(isActive(item) ? 'parent-active open ' : '') + 'user-sidebar-item'\" [id]=\"'SidebarItem_' + item.id\">\r\n  <a (click)=\"closeSidebar()\" [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length == 0\" [className]=\"(currentSidebar && item.name == currentSidebar.name ? 'active ' : '') + 'content'\" [routerLink]=\"item.url\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <div *ngIf=\"item.countAll > 0\" class=\"count-all\">{{ item.countAll }}<div *ngIf=\"item.count > 0\" class=\"count\">{{ item.count }}</div></div>\r\n    <div *ngIf=\"item.countAll <= 0 && item.count > 0\" class=\"count\">{{ item.count }}</div>\r\n  </a>\r\n  <div [style]=\"{paddingRight: (i * 25) + 'px'}\" *ngIf=\"item.children.length > 0\" (click)=\"openClose($event)\" class=\"content parent\">\r\n    <i [className]=\"item.icon + ' icon'\"></i>\r\n    <div class=\"title\">{{ l(item.name) }}</div>\r\n    <div *ngIf=\"item.countAll > 0\" class=\"count-all\">{{ item.countAll }}<div *ngIf=\"item.count > 0\" class=\"count\">{{ item.count }}</div></div>\r\n    <div *ngIf=\"item.countAll <= 0 && item.count > 0\" class=\"count\">{{ item.count }}</div>\r\n    <i [className]=\"'fad fa-angle-left arrow'\"></i>\r\n  </div>\r\n  <div *ngIf=\"item.children.length > 0\" class=\"children\">\r\n    <div class=\"items\">\r\n      <lib-sidebar-item [i]=\"i + 1\" [item]=\"child\" [currentSidebar]=\"currentSidebar\" *ngFor=\"let child of item.children\"></lib-sidebar-item>\r\n    </div>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }], propDecorators: { item: [{
                 type: Input
             }], i: [{
@@ -7778,11 +7790,15 @@ class SidebarComponent {
         $$1('#Sidebar').toggleClass('open').toggleClass('close');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SidebarComponent, deps: [{ token: PsToolkitUiConfigService }, { token: i2.Router }, { token: SidebarService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SidebarComponent, isStandalone: false, selector: "lib-sidebar", inputs: { currentData: "currentData" }, ngImport: i0, template: "<div id=\"Sidebar\" [class]=\"(countItems > 1 ? 'open' : 'one-item') + (currentData.setting.sidebar?.mini ? ' mini' : '')\">\r\n  <div class=\"sidebar-shadow\" (click)=\"toggleSidebar()\"></div>\r\n  <div class=\"sidebar-scroll\">\r\n    <i (click)=\"toggleSidebar()\" class=\"toggle fad fa-angle-double-left\"></i>\r\n    <a class=\"brand-con\" href=\"/\">\r\n      <div class=\"logo\"></div>\r\n      <div class=\"title\">\r\n        {{l('SoftwareName')}}\r\n        <div class=\"version\">{{l('Version', currentData.software.Version)}}</div>\r\n      </div>\r\n    </a>\r\n    <div class=\"sidebar-con\" id=\"sidebar-con\">\r\n      <span *ngFor=\"let item of sidebar\">\r\n        <lib-sidebar-item [i]=\"0\" [item]=\"item\" [base]=\"true\" [currentSidebar]=\"currentSidebar\"></lib-sidebar-item>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep #Sidebar{float:right;width:78px;background-color:var(--base);min-height:calc(100vh - 35px);height:calc(100vh - 35px);direction:ltr;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-transition:width .3s;-webkit-transition:width .3s;transition:width .3s;z-index:112;position:relative}::ng-deep #Sidebar .sidebar-shadow{float:right;width:100%;left:0;visibility:hidden;background-color:var(--black);opacity:0;overflow:hidden;direction:ltr;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;z-index:103;height:100vh;min-height:100vh;position:fixed}::ng-deep #Sidebar .toggle{float:left;text-align:center;width:50px;left:-50px;height:50px;line-height:50px;color:var(--primary);font-size:18px;cursor:pointer;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;position:absolute;-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}::ng-deep #Sidebar .toggle:hover{color:var(--primary-dark)}::ng-deep #Sidebar .sidebar-scroll{width:100%;height:100%;position:absolute;top:0;right:0;background-color:var(--base);-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;z-index:104}::ng-deep #Sidebar .sidebar-scroll .brand-con{float:right;width:100%;height:50px;background-color:var(--base-dark);justify-content:center;align-items:center;display:flex;direction:rtl}::ng-deep #Sidebar .sidebar-scroll .brand-con .logo{float:right;width:30px;height:30px;background-repeat:no-repeat;background-position:center center;background-size:contain}::ng-deep #Sidebar .sidebar-scroll .brand-con .title{color:#fff;height:100%;font-size:15px;justify-content:center;align-items:center;display:flex;font-weight:var(--font-bold);position:relative;top:-4px;width:0;overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;white-space:nowrap}::ng-deep #Sidebar .sidebar-scroll .brand-con .title .version{position:absolute;top:27px;font-size:9px;font-weight:var(--font-light)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{float:right;width:100%;height:calc(100vh - 85px);overflow-y:auto;overflow-x:hidden;direction:ltr}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item{float:left;width:100%;text-align:center;position:relative}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content{float:right;width:100%;cursor:pointer;position:relative;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;justify-content:right;align-items:center;display:flex;direction:rtl}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot{background-color:var(--base);width:10px;height:10px;border-radius:50%;border:2px solid #eeeeee66;position:absolute;top:15px;right:-15px;z-index:2}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot.active{background-color:var(--base-white);border:2px solid var(--base-white)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.dot.parent{background-color:#eee6;border:none}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot.back{background-color:var(--base);border:none;z-index:1}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children{float:left;width:100%;position:relative;display:none}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children .items{float:left;width:100%}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children .line{width:1px;background-color:#eee6;top:0;left:calc(85% + 10px);height:calc(100% - 20px);position:absolute}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{float:right;width:0;height:45px;line-height:45px;font-size:12px;color:#fffc;font-weight:var(--font-normal);overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0;height:0}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all{position:absolute;min-width:20px;height:20px;border-radius:50%;background-color:var(--primary);left:10px;top:calc(50% - 10px);line-height:22px;color:#fff;font-size:12px;padding:0 5px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content>.count{position:absolute;min-width:20px;height:20px;border-radius:50%;background-color:var(--red);left:10px;top:calc(50% - 10px);line-height:22px;color:#fff;font-size:12px;padding:0 5px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all>.count{background-color:var(--red);border-radius:50%;bottom:-5px;color:#fff;font-size:10px;height:16px;line-height:18px;min-width:16px;padding:0 3px;position:absolute;left:calc(100% - 5px)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{float:right;width:100%;height:45px;line-height:45px;font-size:18px;color:#fffa;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0;height:45px;line-height:45px;font-size:13px;color:#fffc;overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;text-align:center}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{font-size:11px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content{background-color:var(--base-dark)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .title,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .title{color:#fff;font-weight:var(--font-bold)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .icon,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .icon{color:var(--primary)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .arrow,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .arrow{color:#fff}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.children{display:block}::ng-deep #Sidebar.open{width:260px}::ng-deep #Sidebar.open .toggle{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep #Sidebar.open .sidebar-scroll .brand-con .title{width:110px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:100%;height:30px;line-height:20px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content{flex-direction:column;padding:10px 0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{font-size:25px;height:60px;line-height:60px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{height:45px;line-height:45px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{height:20px;line-height:20px;position:absolute;bottom:0}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow:before{content:\"\\f107\"}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow:after{content:\"\\f107\\f107\"}::ng-deep #Sidebar.open.mini{width:150px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.open>.content .arrow{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item.open>.content .arrow{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{font-size:20px;height:60px;line-height:60px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{height:40px;line-height:40px}::ng-deep #Sidebar.one-item{width:0!important}::ng-deep #Sidebar.one-item .sidebar-shadow{display:none}::ng-deep #Sidebar.one-item .toggle{display:none}::ng-deep #Sidebar.one-item .sidebar-scroll{width:0!important}@media(max-width:1199.98px){::ng-deep #Sidebar{height:calc(100vh - 35px);min-height:calc(100vh - 35px)}::ng-deep #Sidebar,::ng-deep #Sidebar.open{width:78px}::ng-deep #Sidebar.mini{width:78px}::ng-deep #Sidebar.open.mini{width:78px}::ng-deep #Sidebar .sidebar-scroll{width:260px}::ng-deep #Sidebar.mini .sidebar-scroll{width:150px}::ng-deep #Sidebar.open .sidebar-scroll{width:100%}::ng-deep #Sidebar.open .sidebar-scroll .brand-con .title{width:0}::ng-deep #Sidebar .sidebar-scroll .brand-con .title{width:110px}::ng-deep #Sidebar .sidebar-shadow{opacity:.7;visibility:visible}::ng-deep #Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}::ng-deep #Sidebar .toggle{color:var(--white);-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep #Sidebar .toggle:hover{color:var(--white)}::ng-deep #Sidebar.open .toggle{color:var(--primary);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}::ng-deep #Sidebar.open .toggle:hover{color:var(--primary-dark)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 85px)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:100%;height:30px;line-height:30px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0;height:0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:45px;height:45px;line-height:45px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{width:40px;height:40px;line-height:40px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all{left:5px;bottom:5px;top:unset}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content>.count{left:5px;bottom:5px;top:unset}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0}}@media(max-width:399.98px){::ng-deep #Sidebar .sidebar-scroll{width:240px}}@media(max-width:599.98px){::ng-deep #Sidebar{height:100vh;min-height:100vh}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 50px)}::ng-deep #Sidebar,::ng-deep #Sidebar.open{width:0}::ng-deep #Sidebar.mini{width:0}::ng-deep #Sidebar.open.mini{width:0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["item", "i", "base", "currentSidebar"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", inputs: { currentData: "currentData" }, ngImport: i0, template: "<div id=\"Sidebar\" [class]=\"(countItems > 1 ? 'open' : 'one-item') + (currentData.setting.sidebar?.mini ? ' mini' : '')\">\r\n  <div class=\"sidebar-shadow\" (click)=\"toggleSidebar()\"></div>\r\n  <div class=\"sidebar-scroll\">\r\n    <i (click)=\"toggleSidebar()\" class=\"toggle fad fa-angle-double-left\"></i>\r\n    <a class=\"brand-con\" href=\"/\">\r\n      <div class=\"logo\"></div>\r\n      <div class=\"title\">\r\n        {{l('SoftwareName')}}\r\n        <div class=\"version\">{{l('Version', currentData.software.Version)}}</div>\r\n      </div>\r\n    </a>\r\n    <div class=\"sidebar-con\" id=\"sidebar-con\">\r\n      <span *ngFor=\"let item of sidebar\">\r\n        <lib-sidebar-item [i]=\"0\" [item]=\"item\" [base]=\"true\" [currentSidebar]=\"currentSidebar\"></lib-sidebar-item>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep #Sidebar{float:right;width:78px;background-color:var(--base);min-height:calc(100vh - 35px);height:calc(100vh - 35px);direction:ltr;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-transition:width .3s;-webkit-transition:width .3s;transition:width .3s;z-index:112;position:relative}::ng-deep #Sidebar .sidebar-shadow{float:right;width:100%;left:0;visibility:hidden;background-color:var(--black);opacity:0;overflow:hidden;direction:ltr;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;z-index:103;height:100vh;min-height:100vh;position:fixed}::ng-deep #Sidebar .toggle{float:left;text-align:center;width:50px;left:-50px;height:50px;line-height:50px;color:var(--primary);font-size:18px;cursor:pointer;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;position:absolute;-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}::ng-deep #Sidebar .toggle:hover{color:var(--primary-dark)}::ng-deep #Sidebar .sidebar-scroll{width:100%;height:100%;position:absolute;top:0;right:0;background-color:var(--base);-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;z-index:104}::ng-deep #Sidebar .sidebar-scroll .brand-con{float:right;width:100%;height:50px;background-color:var(--base-dark);justify-content:center;align-items:center;display:flex;direction:rtl}::ng-deep #Sidebar .sidebar-scroll .brand-con .logo{float:right;width:30px;height:30px;background-repeat:no-repeat;background-position:center center;background-size:contain}::ng-deep #Sidebar .sidebar-scroll .brand-con .title{color:#fff;height:100%;font-size:15px;justify-content:center;align-items:center;display:flex;font-weight:var(--font-bold);position:relative;top:-4px;width:0;overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;white-space:nowrap}::ng-deep #Sidebar .sidebar-scroll .brand-con .title .version{position:absolute;top:27px;font-size:9px;font-weight:var(--font-light)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{float:right;width:100%;height:calc(100vh - 85px);overflow-y:auto;overflow-x:hidden;direction:ltr}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item{float:left;width:100%;text-align:center;position:relative}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content{float:right;width:100%;cursor:pointer;position:relative;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;justify-content:right;align-items:center;display:flex;direction:rtl}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot{background-color:var(--base);width:10px;height:10px;border-radius:50%;border:2px solid #eeeeee66;position:absolute;top:15px;right:-15px;z-index:2}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot.active{background-color:var(--base-white);border:2px solid var(--base-white)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.dot.parent{background-color:#eee6;border:none}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot.back{background-color:var(--base);border:none;z-index:1}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children{float:left;width:100%;position:relative;display:none}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children .items{float:left;width:100%}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children .line{width:1px;background-color:#eee6;top:0;left:calc(85% + 10px);height:calc(100% - 20px);position:absolute}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{float:right;width:0;height:45px;line-height:45px;font-size:12px;color:#fffc;font-weight:var(--font-normal);overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0;height:0}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all{position:absolute;min-width:20px;height:20px;border-radius:50%;background-color:var(--primary);left:10px;top:calc(50% - 10px);line-height:22px;color:#fff;font-size:12px;padding:0 5px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content>.count{position:absolute;min-width:20px;height:20px;border-radius:50%;background-color:var(--red);left:10px;top:calc(50% - 10px);line-height:22px;color:#fff;font-size:12px;padding:0 5px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all>.count{background-color:var(--red);border-radius:50%;bottom:-5px;color:#fff;font-size:10px;height:16px;line-height:18px;min-width:16px;padding:0 3px;position:absolute;left:calc(100% - 5px)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{float:right;width:100%;height:45px;line-height:45px;font-size:18px;color:#fffa;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0;height:45px;line-height:45px;font-size:13px;color:#fffc;overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;text-align:center}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{font-size:11px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content{background-color:var(--base-dark)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .title,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .title{color:#fff;font-weight:var(--font-bold)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .icon,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .icon{color:var(--primary)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .arrow,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .arrow{color:#fff}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.children{display:block}::ng-deep #Sidebar.open{width:260px}::ng-deep #Sidebar.open .toggle{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep #Sidebar.open .sidebar-scroll .brand-con .title{width:110px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:100%;height:30px;line-height:20px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content{flex-direction:column;padding:10px 0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{font-size:25px;height:60px;line-height:60px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{height:45px;line-height:45px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{height:20px;line-height:20px;position:absolute;bottom:0}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow:before{content:\"\\f107\"}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow:after{content:\"\\f107\\f107\"}::ng-deep #Sidebar.open.mini{width:150px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.open>.content .arrow{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item.open>.content .arrow{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{font-size:20px;height:60px;line-height:60px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{height:40px;line-height:40px}::ng-deep #Sidebar.one-item{width:0!important}::ng-deep #Sidebar.one-item .sidebar-shadow{display:none}::ng-deep #Sidebar.one-item .toggle{display:none}::ng-deep #Sidebar.one-item .sidebar-scroll{width:0!important}@media(max-width:1199.98px){::ng-deep #Sidebar{height:calc(100vh - 35px);min-height:calc(100vh - 35px)}::ng-deep #Sidebar,::ng-deep #Sidebar.open{width:78px}::ng-deep #Sidebar.mini{width:78px}::ng-deep #Sidebar.open.mini{width:78px}::ng-deep #Sidebar .sidebar-scroll{width:260px}::ng-deep #Sidebar.mini .sidebar-scroll{width:150px}::ng-deep #Sidebar.open .sidebar-scroll{width:100%}::ng-deep #Sidebar.open .sidebar-scroll .brand-con .title{width:0}::ng-deep #Sidebar .sidebar-scroll .brand-con .title{width:110px}::ng-deep #Sidebar .sidebar-shadow{opacity:.7;visibility:visible}::ng-deep #Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}::ng-deep #Sidebar .toggle{color:var(--white);-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep #Sidebar .toggle:hover{color:var(--white)}::ng-deep #Sidebar.open .toggle{color:var(--primary);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}::ng-deep #Sidebar.open .toggle:hover{color:var(--primary-dark)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 85px)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:100%;height:30px;line-height:30px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0;height:0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:45px;height:45px;line-height:45px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{width:40px;height:40px;line-height:40px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all{left:5px;bottom:5px;top:unset}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content>.count{left:5px;bottom:5px;top:unset}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0}}@media(max-width:399.98px){::ng-deep #Sidebar .sidebar-scroll{width:240px}}@media(max-width:599.98px){::ng-deep #Sidebar{height:100vh;min-height:100vh}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 50px)}::ng-deep #Sidebar,::ng-deep #Sidebar.open{width:0}::ng-deep #Sidebar.mini{width:0}::ng-deep #Sidebar.open.mini{width:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: SidebarItemComponent, selector: "lib-sidebar-item", inputs: ["item", "i", "base", "currentSidebar"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sidebar', standalone: false, template: "<div id=\"Sidebar\" [class]=\"(countItems > 1 ? 'open' : 'one-item') + (currentData.setting.sidebar?.mini ? ' mini' : '')\">\r\n  <div class=\"sidebar-shadow\" (click)=\"toggleSidebar()\"></div>\r\n  <div class=\"sidebar-scroll\">\r\n    <i (click)=\"toggleSidebar()\" class=\"toggle fad fa-angle-double-left\"></i>\r\n    <a class=\"brand-con\" href=\"/\">\r\n      <div class=\"logo\"></div>\r\n      <div class=\"title\">\r\n        {{l('SoftwareName')}}\r\n        <div class=\"version\">{{l('Version', currentData.software.Version)}}</div>\r\n      </div>\r\n    </a>\r\n    <div class=\"sidebar-con\" id=\"sidebar-con\">\r\n      <span *ngFor=\"let item of sidebar\">\r\n        <lib-sidebar-item [i]=\"0\" [item]=\"item\" [base]=\"true\" [currentSidebar]=\"currentSidebar\"></lib-sidebar-item>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep #Sidebar{float:right;width:78px;background-color:var(--base);min-height:calc(100vh - 35px);height:calc(100vh - 35px);direction:ltr;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-transition:width .3s;-webkit-transition:width .3s;transition:width .3s;z-index:112;position:relative}::ng-deep #Sidebar .sidebar-shadow{float:right;width:100%;left:0;visibility:hidden;background-color:var(--black);opacity:0;overflow:hidden;direction:ltr;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;z-index:103;height:100vh;min-height:100vh;position:fixed}::ng-deep #Sidebar .toggle{float:left;text-align:center;width:50px;left:-50px;height:50px;line-height:50px;color:var(--primary);font-size:18px;cursor:pointer;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;position:absolute;-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}::ng-deep #Sidebar .toggle:hover{color:var(--primary-dark)}::ng-deep #Sidebar .sidebar-scroll{width:100%;height:100%;position:absolute;top:0;right:0;background-color:var(--base);-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;z-index:104}::ng-deep #Sidebar .sidebar-scroll .brand-con{float:right;width:100%;height:50px;background-color:var(--base-dark);justify-content:center;align-items:center;display:flex;direction:rtl}::ng-deep #Sidebar .sidebar-scroll .brand-con .logo{float:right;width:30px;height:30px;background-repeat:no-repeat;background-position:center center;background-size:contain}::ng-deep #Sidebar .sidebar-scroll .brand-con .title{color:#fff;height:100%;font-size:15px;justify-content:center;align-items:center;display:flex;font-weight:var(--font-bold);position:relative;top:-4px;width:0;overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;white-space:nowrap}::ng-deep #Sidebar .sidebar-scroll .brand-con .title .version{position:absolute;top:27px;font-size:9px;font-weight:var(--font-light)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{float:right;width:100%;height:calc(100vh - 85px);overflow-y:auto;overflow-x:hidden;direction:ltr}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item{float:left;width:100%;text-align:center;position:relative}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content{float:right;width:100%;cursor:pointer;position:relative;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;justify-content:right;align-items:center;display:flex;direction:rtl}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot{background-color:var(--base);width:10px;height:10px;border-radius:50%;border:2px solid #eeeeee66;position:absolute;top:15px;right:-15px;z-index:2}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot.active{background-color:var(--base-white);border:2px solid var(--base-white)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.dot.parent{background-color:#eee6;border:none}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot.back{background-color:var(--base);border:none;z-index:1}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children{float:left;width:100%;position:relative;display:none}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children .items{float:left;width:100%}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children .line{width:1px;background-color:#eee6;top:0;left:calc(85% + 10px);height:calc(100% - 20px);position:absolute}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{float:right;width:0;height:45px;line-height:45px;font-size:12px;color:#fffc;font-weight:var(--font-normal);overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0;height:0}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all{position:absolute;min-width:20px;height:20px;border-radius:50%;background-color:var(--primary);left:10px;top:calc(50% - 10px);line-height:22px;color:#fff;font-size:12px;padding:0 5px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content>.count{position:absolute;min-width:20px;height:20px;border-radius:50%;background-color:var(--red);left:10px;top:calc(50% - 10px);line-height:22px;color:#fff;font-size:12px;padding:0 5px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all>.count{background-color:var(--red);border-radius:50%;bottom:-5px;color:#fff;font-size:10px;height:16px;line-height:18px;min-width:16px;padding:0 3px;position:absolute;left:calc(100% - 5px)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{float:right;width:100%;height:45px;line-height:45px;font-size:18px;color:#fffa;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0;height:45px;line-height:45px;font-size:13px;color:#fffc;overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;text-align:center}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{font-size:11px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content{background-color:var(--base-dark)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .title,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .title{color:#fff;font-weight:var(--font-bold)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .icon,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .icon{color:var(--primary)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .arrow,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .arrow{color:#fff}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.children{display:block}::ng-deep #Sidebar.open{width:260px}::ng-deep #Sidebar.open .toggle{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep #Sidebar.open .sidebar-scroll .brand-con .title{width:110px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:100%;height:30px;line-height:20px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content{flex-direction:column;padding:10px 0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{font-size:25px;height:60px;line-height:60px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{height:45px;line-height:45px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{height:20px;line-height:20px;position:absolute;bottom:0}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow:before{content:\"\\f107\"}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow:after{content:\"\\f107\\f107\"}::ng-deep #Sidebar.open.mini{width:150px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.open>.content .arrow{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item.open>.content .arrow{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{font-size:20px;height:60px;line-height:60px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{height:40px;line-height:40px}::ng-deep #Sidebar.one-item{width:0!important}::ng-deep #Sidebar.one-item .sidebar-shadow{display:none}::ng-deep #Sidebar.one-item .toggle{display:none}::ng-deep #Sidebar.one-item .sidebar-scroll{width:0!important}@media(max-width:1199.98px){::ng-deep #Sidebar{height:calc(100vh - 35px);min-height:calc(100vh - 35px)}::ng-deep #Sidebar,::ng-deep #Sidebar.open{width:78px}::ng-deep #Sidebar.mini{width:78px}::ng-deep #Sidebar.open.mini{width:78px}::ng-deep #Sidebar .sidebar-scroll{width:260px}::ng-deep #Sidebar.mini .sidebar-scroll{width:150px}::ng-deep #Sidebar.open .sidebar-scroll{width:100%}::ng-deep #Sidebar.open .sidebar-scroll .brand-con .title{width:0}::ng-deep #Sidebar .sidebar-scroll .brand-con .title{width:110px}::ng-deep #Sidebar .sidebar-shadow{opacity:.7;visibility:visible}::ng-deep #Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}::ng-deep #Sidebar .toggle{color:var(--white);-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep #Sidebar .toggle:hover{color:var(--white)}::ng-deep #Sidebar.open .toggle{color:var(--primary);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}::ng-deep #Sidebar.open .toggle:hover{color:var(--primary-dark)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 85px)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:100%;height:30px;line-height:30px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0;height:0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:45px;height:45px;line-height:45px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{width:40px;height:40px;line-height:40px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all{left:5px;bottom:5px;top:unset}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content>.count{left:5px;bottom:5px;top:unset}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0}}@media(max-width:399.98px){::ng-deep #Sidebar .sidebar-scroll{width:240px}}@media(max-width:599.98px){::ng-deep #Sidebar{height:100vh;min-height:100vh}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 50px)}::ng-deep #Sidebar,::ng-deep #Sidebar.open{width:0}::ng-deep #Sidebar.mini{width:0}::ng-deep #Sidebar.open.mini{width:0}}\n"] }]
+            args: [{ selector: 'lib-sidebar', imports: [
+                        CommonModule,
+                        FormsModule,
+                        SidebarItemComponent
+                    ], standalone: true, template: "<div id=\"Sidebar\" [class]=\"(countItems > 1 ? 'open' : 'one-item') + (currentData.setting.sidebar?.mini ? ' mini' : '')\">\r\n  <div class=\"sidebar-shadow\" (click)=\"toggleSidebar()\"></div>\r\n  <div class=\"sidebar-scroll\">\r\n    <i (click)=\"toggleSidebar()\" class=\"toggle fad fa-angle-double-left\"></i>\r\n    <a class=\"brand-con\" href=\"/\">\r\n      <div class=\"logo\"></div>\r\n      <div class=\"title\">\r\n        {{l('SoftwareName')}}\r\n        <div class=\"version\">{{l('Version', currentData.software.Version)}}</div>\r\n      </div>\r\n    </a>\r\n    <div class=\"sidebar-con\" id=\"sidebar-con\">\r\n      <span *ngFor=\"let item of sidebar\">\r\n        <lib-sidebar-item [i]=\"0\" [item]=\"item\" [base]=\"true\" [currentSidebar]=\"currentSidebar\"></lib-sidebar-item>\r\n      </span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["::ng-deep #Sidebar{float:right;width:78px;background-color:var(--base);min-height:calc(100vh - 35px);height:calc(100vh - 35px);direction:ltr;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-transition:width .3s;-webkit-transition:width .3s;transition:width .3s;z-index:112;position:relative}::ng-deep #Sidebar .sidebar-shadow{float:right;width:100%;left:0;visibility:hidden;background-color:var(--black);opacity:0;overflow:hidden;direction:ltr;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;z-index:103;height:100vh;min-height:100vh;position:fixed}::ng-deep #Sidebar .toggle{float:left;text-align:center;width:50px;left:-50px;height:50px;line-height:50px;color:var(--primary);font-size:18px;cursor:pointer;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;position:absolute;-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}::ng-deep #Sidebar .toggle:hover{color:var(--primary-dark)}::ng-deep #Sidebar .sidebar-scroll{width:100%;height:100%;position:absolute;top:0;right:0;background-color:var(--base);-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;z-index:104}::ng-deep #Sidebar .sidebar-scroll .brand-con{float:right;width:100%;height:50px;background-color:var(--base-dark);justify-content:center;align-items:center;display:flex;direction:rtl}::ng-deep #Sidebar .sidebar-scroll .brand-con .logo{float:right;width:30px;height:30px;background-repeat:no-repeat;background-position:center center;background-size:contain}::ng-deep #Sidebar .sidebar-scroll .brand-con .title{color:#fff;height:100%;font-size:15px;justify-content:center;align-items:center;display:flex;font-weight:var(--font-bold);position:relative;top:-4px;width:0;overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;white-space:nowrap}::ng-deep #Sidebar .sidebar-scroll .brand-con .title .version{position:absolute;top:27px;font-size:9px;font-weight:var(--font-light)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{float:right;width:100%;height:calc(100vh - 85px);overflow-y:auto;overflow-x:hidden;direction:ltr}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item{float:left;width:100%;text-align:center;position:relative}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content{float:right;width:100%;cursor:pointer;position:relative;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;justify-content:right;align-items:center;display:flex;direction:rtl}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot{background-color:var(--base);width:10px;height:10px;border-radius:50%;border:2px solid #eeeeee66;position:absolute;top:15px;right:-15px;z-index:2}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot.active{background-color:var(--base-white);border:2px solid var(--base-white)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.dot.parent{background-color:#eee6;border:none}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .dot.back{background-color:var(--base);border:none;z-index:1}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children{float:left;width:100%;position:relative;display:none}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children .items{float:left;width:100%}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .children .line{width:1px;background-color:#eee6;top:0;left:calc(85% + 10px);height:calc(100% - 20px);position:absolute}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{float:right;width:0;height:45px;line-height:45px;font-size:12px;color:#fffc;font-weight:var(--font-normal);overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0;height:0}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all{position:absolute;min-width:20px;height:20px;border-radius:50%;background-color:var(--primary);left:10px;top:calc(50% - 10px);line-height:22px;color:#fff;font-size:12px;padding:0 5px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content>.count{position:absolute;min-width:20px;height:20px;border-radius:50%;background-color:var(--red);left:10px;top:calc(50% - 10px);line-height:22px;color:#fff;font-size:12px;padding:0 5px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all>.count{background-color:var(--red);border-radius:50%;bottom:-5px;color:#fff;font-size:10px;height:16px;line-height:18px;min-width:16px;padding:0 3px;position:absolute;left:calc(100% - 5px)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{float:right;width:100%;height:45px;line-height:45px;font-size:18px;color:#fffa;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0;height:45px;line-height:45px;font-size:13px;color:#fffc;overflow:hidden;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;text-align:center}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{font-size:11px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content{background-color:var(--base-dark)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .title,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .title{color:#fff;font-weight:var(--font-bold)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .icon,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .icon{color:var(--primary)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.content .arrow,::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item:hover>.content .arrow{color:#fff}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.parent-active>.children{display:block}::ng-deep #Sidebar.open{width:260px}::ng-deep #Sidebar.open .toggle{-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep #Sidebar.open .sidebar-scroll .brand-con .title{width:110px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:100%;height:30px;line-height:20px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content{flex-direction:column;padding:10px 0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{font-size:25px;height:60px;line-height:60px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{height:45px;line-height:45px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{height:20px;line-height:20px;position:absolute;bottom:0}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow:before{content:\"\\f107\"}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow:after{content:\"\\f107\\f107\"}::ng-deep #Sidebar.open.mini{width:150px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item.open>.content .arrow{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item.open>.content .arrow{-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-o-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{font-size:20px;height:60px;line-height:60px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{height:40px;line-height:40px}::ng-deep #Sidebar.one-item{width:0!important}::ng-deep #Sidebar.one-item .sidebar-shadow{display:none}::ng-deep #Sidebar.one-item .toggle{display:none}::ng-deep #Sidebar.one-item .sidebar-scroll{width:0!important}@media(max-width:1199.98px){::ng-deep #Sidebar{height:calc(100vh - 35px);min-height:calc(100vh - 35px)}::ng-deep #Sidebar,::ng-deep #Sidebar.open{width:78px}::ng-deep #Sidebar.mini{width:78px}::ng-deep #Sidebar.open.mini{width:78px}::ng-deep #Sidebar .sidebar-scroll{width:260px}::ng-deep #Sidebar.mini .sidebar-scroll{width:150px}::ng-deep #Sidebar.open .sidebar-scroll{width:100%}::ng-deep #Sidebar.open .sidebar-scroll .brand-con .title{width:0}::ng-deep #Sidebar .sidebar-scroll .brand-con .title{width:110px}::ng-deep #Sidebar .sidebar-shadow{opacity:.7;visibility:visible}::ng-deep #Sidebar.open .sidebar-shadow{opacity:0;visibility:hidden}::ng-deep #Sidebar .toggle{color:var(--white);-webkit-transform:scaleX(-1);-moz-transform:scaleX(-1);-o-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}::ng-deep #Sidebar .toggle:hover{color:var(--white)}::ng-deep #Sidebar.open .toggle{color:var(--primary);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-o-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}::ng-deep #Sidebar.open .toggle:hover{color:var(--primary-dark)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 85px)}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:calc(100% - 100px)}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:100%;height:30px;line-height:30px}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .title{width:0;height:0}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:45px;height:45px;line-height:45px}::ng-deep #Sidebar.mini .sidebar-scroll .sidebar-con .user-sidebar-item>.children .content .icon{width:40px;height:40px;line-height:40px}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .count-all{left:5px;bottom:5px;top:unset}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content>.count{left:5px;bottom:5px;top:unset}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:70px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .icon{width:100%}::ng-deep #Sidebar .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:30px}::ng-deep #Sidebar.open .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0}::ng-deep #Sidebar.open.mini .sidebar-scroll .sidebar-con .user-sidebar-item .content .arrow{width:0}}@media(max-width:399.98px){::ng-deep #Sidebar .sidebar-scroll{width:240px}}@media(max-width:599.98px){::ng-deep #Sidebar{height:100vh;min-height:100vh}::ng-deep #Sidebar .sidebar-scroll .sidebar-con{height:calc(100vh - 50px)}::ng-deep #Sidebar,::ng-deep #Sidebar.open{width:0}::ng-deep #Sidebar.mini{width:0}::ng-deep #Sidebar.open.mini{width:0}}\n"] }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }, { type: i2.Router }, { type: SidebarService }], propDecorators: { currentData: [{
                 type: Input
             }] } });
@@ -7866,11 +7882,16 @@ class StepsComponent {
         activeStep.form.submit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: StepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: StepsComponent, isStandalone: false, selector: "lib-steps", inputs: { steps: "steps" }, ngImport: i0, template: "<div class=\"steps\">\r\n  <div class=\"header\">\r\n    <div *ngFor=\"let s of steps.items; let i = index\" [className]=\"(steps.getCurrent() > i || steps.isDone ? 'done ' : steps.getCurrent() === i ? 'process ' : steps.activeAll ? 'next ' : '') + (steps.getActive() === i ? 'active ' : '') + 'step-con'\">\r\n      <div [className]=\"(s.description ? 'with-description ' : '') + (steps.updateAccess ? '' : 'disable ') + 'step'\" (click)=\"steps.updateAccess && changeStep(s)\">\r\n        <div *ngIf=\"s.icon != null\" [className]=\"s.icon + ' icon fa svg'\"></div>\r\n        <div class=\"title\">{{s.title}}</div>\r\n        <div *ngIf=\"s.description\" class=\"description o-h-d\">({{s.description}})</div>\r\n        <i *ngIf=\"s.onDelete\" (click)=\"onDelete(s)\" class=\"delete fas fa-times\"></i>\r\n        <i class=\"dot fad fa-dot-circle\"></i>\r\n        <i class=\"dot dot-done fad fa-circle-check green\"></i>\r\n        <i class=\"dot dot-process fad fa-circle-ellipsis\"></i>\r\n        <div class=\"line-r\"></div>\r\n        <div class=\"line-l\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"body\">\r\n    <span #ref><ng-content></ng-content></span>\r\n    <span *ngIf=\"!ref.children.length\">\r\n      <div *ngFor=\"let s of steps.items; let i = index\" class=\"step-con\">\r\n        <span *ngIf=\"steps.getActive() === i\">\r\n          <lib-form *ngIf=\"s.form != null\" [form]=\"s.form\"></lib-form>\r\n        </span>\r\n      </div>\r\n    </span>\r\n  </div>\r\n  <div class=\"footer topline p-t-20 m-t-20\" *ngIf=\"steps.viewAccess\">\r\n    <lib-form-button [inp]=\"saveNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() === steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() !== steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"previous\" *ngIf=\"steps.getActive() !== 0 && steps.updateAccess\"></lib-form-button>\r\n    <lib-form-button [inp]=\"saveDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && !steps.isDone\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && steps.isDone\"></lib-form-button>\r\n  </div>\r\n</div>\r\n", styles: [".steps{float:right;width:100%;padding:20px;background-color:#fff;border-radius:var(--border-radius-base)}.steps>.header{float:right;width:100%;display:flex;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;justify-content:center}.steps>.header>.step-con{float:right;width:160px;position:relative;padding:5px;display:flex}.steps>.header>.step-con .step{float:right;width:100%;position:relative;border-radius:var(--border-radius-base);cursor:default;pointer-events:none;padding:10px 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.steps>.header>.step-con.done .step:not(.disable),.steps>.header>.step-con.next .step:not(.disable),.steps>.header>.step-con.process .step:not(.disable){cursor:pointer;pointer-events:unset}.steps>.header>.step-con.done .step:not(.disable):hover,.steps>.header>.step-con.next .step:not(.disable):hover,.steps>.header>.step-con.process .step:not(.disable):hover,.steps>.header>.step-con.active .step{background-color:var(--base-white)}.steps>.header>.step-con .step .icon{float:right;width:40px;margin-right:calc(50% - 20px);text-align:center;font-size:25px;height:40px;line-height:40px}.steps>.header>.step-con .step .icon i{line-height:35px}.steps>.header>.step-con .step .title{float:right;width:100%;text-align:center;font-size:10px;line-height:15px;margin-bottom:15px;height:100%;display:flex;align-items:center;justify-content:center}.steps>.header>.step-con .step.with-description .title{float:right;width:100%;text-align:center;font-size:13px;height:25px;line-height:32px}.steps>.header>.step-con .step .description{float:right;width:100%;text-align:center;font-size:11px;height:25px;line-height:20px}.steps>.header>.step-con .step .dot{float:right;width:25px;height:25px;line-height:25px;border-radius:50%;font-size:20px}.steps>.header>.step-con .step .delete{width:20px;height:20px;line-height:20px;position:absolute;top:-10px;right:-10px;font-size:25px;text-align:center;color:var(--red);cursor:pointer;display:none}.steps>.header>.step-con .step .delete:hover{color:var(--red-dark)}.steps>.header>.step-con.process .step .delete{display:block}.steps>.header>.step-con .step .dot.dot-done{display:none;color:var(--green)}.steps>.header>.step-con .step .dot.dot-process{display:none;color:var(--primary)}.steps>.header>.step-con.done .step .dot,.steps>.header>.step-con.process .step .dot{display:none}.steps>.header>.step-con.done .step .dot.dot-done{display:block}.steps>.header>.step-con.process .step .dot.dot-process{display:block}.steps>.header>.step-con .step .line-r{position:absolute;width:calc(50% + 5px);height:2px;bottom:21px;right:-5px;background-image:linear-gradient(to right,#3330,#3333334d)}.steps>.header>.step-con .step .line-l{position:absolute;width:calc(50% + 5px);height:2px;bottom:21px;left:-5px;background-image:linear-gradient(to left,#3330,#3333334d)}.steps>.header>.step-con:first-of-type .step .line-r{display:none}.steps>.header>.step-con:last-of-type .step .line-l{display:none}.steps>.body{float:right;width:100%;min-height:calc(100vh - 400px)}.steps>.body .step-con{float:right;width:100%}.steps>.body .step-con span{display:flex;align-items:center;justify-content:center}.steps>.body .step-con span lib-form{display:contents}.steps>.footer{float:right;width:100%;position:relative}@media(max-width:399.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0;padding:10px}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:30px;margin-right:calc((100% - 30px)/2);font-size:18px;height:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{font-size:10px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:400px)and (max-width:499.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0;padding:10px}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:30px;margin-right:calc((100% - 30px)/2);font-size:18px;height:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{font-size:10px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:500px)and (max-width:599.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:35px;margin-right:calc((100% - 35px)/2);font-size:20px;height:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:600px)and (max-width:699.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:35px;margin-right:calc((100% - 35px)/2);font-size:20px;height:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px}}@media(min-width:700px)and (max-width:799.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}}@media(min-width:800px)and (max-width:899.99px){.steps{width:100%;margin:0}}@media(min-width:900px)and (max-width:999.99px){.steps{width:90%;margin:0 5%}}@media(min-width:1000px)and (max-width:1099.99px){.steps{width:80%;margin:0 10%}}@media(min-width:1100px)and (max-width:1199.99px){.steps{width:70%;margin:0 15%}}@media(min-width:1200px)and (max-width:1299.99px){.steps{width:70%;margin:0 15%}}\n"], dependencies: [{ kind: "component", type: FormButtonComponent, selector: "lib-form-button", inputs: ["inp"], outputs: ["changeIndex"] }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["form"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: StepsComponent, isStandalone: true, selector: "lib-steps", inputs: { steps: "steps" }, ngImport: i0, template: "<div class=\"steps\">\r\n  <div class=\"header\">\r\n    <div *ngFor=\"let s of steps.items; let i = index\" [className]=\"(steps.getCurrent() > i || steps.isDone ? 'done ' : steps.getCurrent() === i ? 'process ' : steps.activeAll ? 'next ' : '') + (steps.getActive() === i ? 'active ' : '') + 'step-con'\">\r\n      <div [className]=\"(s.description ? 'with-description ' : '') + (steps.updateAccess ? '' : 'disable ') + 'step'\" (click)=\"steps.updateAccess && changeStep(s)\">\r\n        <div *ngIf=\"s.icon != null\" [className]=\"s.icon + ' icon fa svg'\"></div>\r\n        <div class=\"title\">{{s.title}}</div>\r\n        <div *ngIf=\"s.description\" class=\"description o-h-d\">({{s.description}})</div>\r\n        <i *ngIf=\"s.onDelete\" (click)=\"onDelete(s)\" class=\"delete fas fa-times\"></i>\r\n        <i class=\"dot fad fa-dot-circle\"></i>\r\n        <i class=\"dot dot-done fad fa-circle-check green\"></i>\r\n        <i class=\"dot dot-process fad fa-circle-ellipsis\"></i>\r\n        <div class=\"line-r\"></div>\r\n        <div class=\"line-l\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"body\">\r\n    <span #ref><ng-content></ng-content></span>\r\n    <span *ngIf=\"!ref.children.length\">\r\n      <div *ngFor=\"let s of steps.items; let i = index\" class=\"step-con\">\r\n        <span *ngIf=\"steps.getActive() === i\">\r\n          <lib-form *ngIf=\"s.form != null\" [form]=\"s.form\"></lib-form>\r\n        </span>\r\n      </div>\r\n    </span>\r\n  </div>\r\n  <div class=\"footer topline p-t-20 m-t-20\" *ngIf=\"steps.viewAccess\">\r\n    <lib-form-button [inp]=\"saveNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() === steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() !== steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"previous\" *ngIf=\"steps.getActive() !== 0 && steps.updateAccess\"></lib-form-button>\r\n    <lib-form-button [inp]=\"saveDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && !steps.isDone\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && steps.isDone\"></lib-form-button>\r\n  </div>\r\n</div>\r\n", styles: [".steps{float:right;width:100%;padding:20px;background-color:#fff;border-radius:var(--border-radius-base)}.steps>.header{float:right;width:100%;display:flex;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;justify-content:center}.steps>.header>.step-con{float:right;width:160px;position:relative;padding:5px;display:flex}.steps>.header>.step-con .step{float:right;width:100%;position:relative;border-radius:var(--border-radius-base);cursor:default;pointer-events:none;padding:10px 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.steps>.header>.step-con.done .step:not(.disable),.steps>.header>.step-con.next .step:not(.disable),.steps>.header>.step-con.process .step:not(.disable){cursor:pointer;pointer-events:unset}.steps>.header>.step-con.done .step:not(.disable):hover,.steps>.header>.step-con.next .step:not(.disable):hover,.steps>.header>.step-con.process .step:not(.disable):hover,.steps>.header>.step-con.active .step{background-color:var(--base-white)}.steps>.header>.step-con .step .icon{float:right;width:40px;margin-right:calc(50% - 20px);text-align:center;font-size:25px;height:40px;line-height:40px}.steps>.header>.step-con .step .icon i{line-height:35px}.steps>.header>.step-con .step .title{float:right;width:100%;text-align:center;font-size:10px;line-height:15px;margin-bottom:15px;height:100%;display:flex;align-items:center;justify-content:center}.steps>.header>.step-con .step.with-description .title{float:right;width:100%;text-align:center;font-size:13px;height:25px;line-height:32px}.steps>.header>.step-con .step .description{float:right;width:100%;text-align:center;font-size:11px;height:25px;line-height:20px}.steps>.header>.step-con .step .dot{float:right;width:25px;height:25px;line-height:25px;border-radius:50%;font-size:20px}.steps>.header>.step-con .step .delete{width:20px;height:20px;line-height:20px;position:absolute;top:-10px;right:-10px;font-size:25px;text-align:center;color:var(--red);cursor:pointer;display:none}.steps>.header>.step-con .step .delete:hover{color:var(--red-dark)}.steps>.header>.step-con.process .step .delete{display:block}.steps>.header>.step-con .step .dot.dot-done{display:none;color:var(--green)}.steps>.header>.step-con .step .dot.dot-process{display:none;color:var(--primary)}.steps>.header>.step-con.done .step .dot,.steps>.header>.step-con.process .step .dot{display:none}.steps>.header>.step-con.done .step .dot.dot-done{display:block}.steps>.header>.step-con.process .step .dot.dot-process{display:block}.steps>.header>.step-con .step .line-r{position:absolute;width:calc(50% + 5px);height:2px;bottom:21px;right:-5px;background-image:linear-gradient(to right,#3330,#3333334d)}.steps>.header>.step-con .step .line-l{position:absolute;width:calc(50% + 5px);height:2px;bottom:21px;left:-5px;background-image:linear-gradient(to left,#3330,#3333334d)}.steps>.header>.step-con:first-of-type .step .line-r{display:none}.steps>.header>.step-con:last-of-type .step .line-l{display:none}.steps>.body{float:right;width:100%;min-height:calc(100vh - 400px)}.steps>.body .step-con{float:right;width:100%}.steps>.body .step-con span{display:flex;align-items:center;justify-content:center}.steps>.body .step-con span lib-form{display:contents}.steps>.footer{float:right;width:100%;position:relative}@media(max-width:399.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0;padding:10px}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:30px;margin-right:calc((100% - 30px)/2);font-size:18px;height:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{font-size:10px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:400px)and (max-width:499.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0;padding:10px}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:30px;margin-right:calc((100% - 30px)/2);font-size:18px;height:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{font-size:10px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:500px)and (max-width:599.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:35px;margin-right:calc((100% - 35px)/2);font-size:20px;height:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:600px)and (max-width:699.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:35px;margin-right:calc((100% - 35px)/2);font-size:20px;height:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px}}@media(min-width:700px)and (max-width:799.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}}@media(min-width:800px)and (max-width:899.99px){.steps{width:100%;margin:0}}@media(min-width:900px)and (max-width:999.99px){.steps{width:90%;margin:0 5%}}@media(min-width:1000px)and (max-width:1099.99px){.steps{width:80%;margin:0 10%}}@media(min-width:1100px)and (max-width:1199.99px){.steps{width:70%;margin:0 15%}}@media(min-width:1200px)and (max-width:1299.99px){.steps{width:70%;margin:0 15%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["form"] }, { kind: "component", type: FormButtonComponent, selector: "lib-form-button", inputs: ["inp"], outputs: ["changeIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: StepsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-steps', standalone: false, template: "<div class=\"steps\">\r\n  <div class=\"header\">\r\n    <div *ngFor=\"let s of steps.items; let i = index\" [className]=\"(steps.getCurrent() > i || steps.isDone ? 'done ' : steps.getCurrent() === i ? 'process ' : steps.activeAll ? 'next ' : '') + (steps.getActive() === i ? 'active ' : '') + 'step-con'\">\r\n      <div [className]=\"(s.description ? 'with-description ' : '') + (steps.updateAccess ? '' : 'disable ') + 'step'\" (click)=\"steps.updateAccess && changeStep(s)\">\r\n        <div *ngIf=\"s.icon != null\" [className]=\"s.icon + ' icon fa svg'\"></div>\r\n        <div class=\"title\">{{s.title}}</div>\r\n        <div *ngIf=\"s.description\" class=\"description o-h-d\">({{s.description}})</div>\r\n        <i *ngIf=\"s.onDelete\" (click)=\"onDelete(s)\" class=\"delete fas fa-times\"></i>\r\n        <i class=\"dot fad fa-dot-circle\"></i>\r\n        <i class=\"dot dot-done fad fa-circle-check green\"></i>\r\n        <i class=\"dot dot-process fad fa-circle-ellipsis\"></i>\r\n        <div class=\"line-r\"></div>\r\n        <div class=\"line-l\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"body\">\r\n    <span #ref><ng-content></ng-content></span>\r\n    <span *ngIf=\"!ref.children.length\">\r\n      <div *ngFor=\"let s of steps.items; let i = index\" class=\"step-con\">\r\n        <span *ngIf=\"steps.getActive() === i\">\r\n          <lib-form *ngIf=\"s.form != null\" [form]=\"s.form\"></lib-form>\r\n        </span>\r\n      </div>\r\n    </span>\r\n  </div>\r\n  <div class=\"footer topline p-t-20 m-t-20\" *ngIf=\"steps.viewAccess\">\r\n    <lib-form-button [inp]=\"saveNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() === steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() !== steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"previous\" *ngIf=\"steps.getActive() !== 0 && steps.updateAccess\"></lib-form-button>\r\n    <lib-form-button [inp]=\"saveDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && !steps.isDone\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && steps.isDone\"></lib-form-button>\r\n  </div>\r\n</div>\r\n", styles: [".steps{float:right;width:100%;padding:20px;background-color:#fff;border-radius:var(--border-radius-base)}.steps>.header{float:right;width:100%;display:flex;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;justify-content:center}.steps>.header>.step-con{float:right;width:160px;position:relative;padding:5px;display:flex}.steps>.header>.step-con .step{float:right;width:100%;position:relative;border-radius:var(--border-radius-base);cursor:default;pointer-events:none;padding:10px 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.steps>.header>.step-con.done .step:not(.disable),.steps>.header>.step-con.next .step:not(.disable),.steps>.header>.step-con.process .step:not(.disable){cursor:pointer;pointer-events:unset}.steps>.header>.step-con.done .step:not(.disable):hover,.steps>.header>.step-con.next .step:not(.disable):hover,.steps>.header>.step-con.process .step:not(.disable):hover,.steps>.header>.step-con.active .step{background-color:var(--base-white)}.steps>.header>.step-con .step .icon{float:right;width:40px;margin-right:calc(50% - 20px);text-align:center;font-size:25px;height:40px;line-height:40px}.steps>.header>.step-con .step .icon i{line-height:35px}.steps>.header>.step-con .step .title{float:right;width:100%;text-align:center;font-size:10px;line-height:15px;margin-bottom:15px;height:100%;display:flex;align-items:center;justify-content:center}.steps>.header>.step-con .step.with-description .title{float:right;width:100%;text-align:center;font-size:13px;height:25px;line-height:32px}.steps>.header>.step-con .step .description{float:right;width:100%;text-align:center;font-size:11px;height:25px;line-height:20px}.steps>.header>.step-con .step .dot{float:right;width:25px;height:25px;line-height:25px;border-radius:50%;font-size:20px}.steps>.header>.step-con .step .delete{width:20px;height:20px;line-height:20px;position:absolute;top:-10px;right:-10px;font-size:25px;text-align:center;color:var(--red);cursor:pointer;display:none}.steps>.header>.step-con .step .delete:hover{color:var(--red-dark)}.steps>.header>.step-con.process .step .delete{display:block}.steps>.header>.step-con .step .dot.dot-done{display:none;color:var(--green)}.steps>.header>.step-con .step .dot.dot-process{display:none;color:var(--primary)}.steps>.header>.step-con.done .step .dot,.steps>.header>.step-con.process .step .dot{display:none}.steps>.header>.step-con.done .step .dot.dot-done{display:block}.steps>.header>.step-con.process .step .dot.dot-process{display:block}.steps>.header>.step-con .step .line-r{position:absolute;width:calc(50% + 5px);height:2px;bottom:21px;right:-5px;background-image:linear-gradient(to right,#3330,#3333334d)}.steps>.header>.step-con .step .line-l{position:absolute;width:calc(50% + 5px);height:2px;bottom:21px;left:-5px;background-image:linear-gradient(to left,#3330,#3333334d)}.steps>.header>.step-con:first-of-type .step .line-r{display:none}.steps>.header>.step-con:last-of-type .step .line-l{display:none}.steps>.body{float:right;width:100%;min-height:calc(100vh - 400px)}.steps>.body .step-con{float:right;width:100%}.steps>.body .step-con span{display:flex;align-items:center;justify-content:center}.steps>.body .step-con span lib-form{display:contents}.steps>.footer{float:right;width:100%;position:relative}@media(max-width:399.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0;padding:10px}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:30px;margin-right:calc((100% - 30px)/2);font-size:18px;height:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{font-size:10px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:400px)and (max-width:499.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0;padding:10px}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:30px;margin-right:calc((100% - 30px)/2);font-size:18px;height:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{font-size:10px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:500px)and (max-width:599.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:35px;margin-right:calc((100% - 35px)/2);font-size:20px;height:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:600px)and (max-width:699.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:35px;margin-right:calc((100% - 35px)/2);font-size:20px;height:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px}}@media(min-width:700px)and (max-width:799.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}}@media(min-width:800px)and (max-width:899.99px){.steps{width:100%;margin:0}}@media(min-width:900px)and (max-width:999.99px){.steps{width:90%;margin:0 5%}}@media(min-width:1000px)and (max-width:1099.99px){.steps{width:80%;margin:0 10%}}@media(min-width:1100px)and (max-width:1199.99px){.steps{width:70%;margin:0 15%}}@media(min-width:1200px)and (max-width:1299.99px){.steps{width:70%;margin:0 15%}}\n"] }]
+            args: [{ selector: 'lib-steps', imports: [
+                        CommonModule,
+                        FormsModule,
+                        FormComponent,
+                        FormButtonComponent
+                    ], standalone: true, template: "<div class=\"steps\">\r\n  <div class=\"header\">\r\n    <div *ngFor=\"let s of steps.items; let i = index\" [className]=\"(steps.getCurrent() > i || steps.isDone ? 'done ' : steps.getCurrent() === i ? 'process ' : steps.activeAll ? 'next ' : '') + (steps.getActive() === i ? 'active ' : '') + 'step-con'\">\r\n      <div [className]=\"(s.description ? 'with-description ' : '') + (steps.updateAccess ? '' : 'disable ') + 'step'\" (click)=\"steps.updateAccess && changeStep(s)\">\r\n        <div *ngIf=\"s.icon != null\" [className]=\"s.icon + ' icon fa svg'\"></div>\r\n        <div class=\"title\">{{s.title}}</div>\r\n        <div *ngIf=\"s.description\" class=\"description o-h-d\">({{s.description}})</div>\r\n        <i *ngIf=\"s.onDelete\" (click)=\"onDelete(s)\" class=\"delete fas fa-times\"></i>\r\n        <i class=\"dot fad fa-dot-circle\"></i>\r\n        <i class=\"dot dot-done fad fa-circle-check green\"></i>\r\n        <i class=\"dot dot-process fad fa-circle-ellipsis\"></i>\r\n        <div class=\"line-r\"></div>\r\n        <div class=\"line-l\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"body\">\r\n    <span #ref><ng-content></ng-content></span>\r\n    <span *ngIf=\"!ref.children.length\">\r\n      <div *ngFor=\"let s of steps.items; let i = index\" class=\"step-con\">\r\n        <span *ngIf=\"steps.getActive() === i\">\r\n          <lib-form *ngIf=\"s.form != null\" [form]=\"s.form\"></lib-form>\r\n        </span>\r\n      </div>\r\n    </span>\r\n  </div>\r\n  <div class=\"footer topline p-t-20 m-t-20\" *ngIf=\"steps.viewAccess\">\r\n    <lib-form-button [inp]=\"saveNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() === steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editNext\" *ngIf=\"steps.getActive() !== steps.items.length - 1 && steps.getCurrent() !== steps.getActive()\"></lib-form-button>\r\n    <lib-form-button [inp]=\"previous\" *ngIf=\"steps.getActive() !== 0 && steps.updateAccess\"></lib-form-button>\r\n    <lib-form-button [inp]=\"saveDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && !steps.isDone\"></lib-form-button>\r\n    <lib-form-button [inp]=\"editDone\" *ngIf=\"steps.getActive() === steps.items.length - 1 && steps.isDone\"></lib-form-button>\r\n  </div>\r\n</div>\r\n", styles: [".steps{float:right;width:100%;padding:20px;background-color:#fff;border-radius:var(--border-radius-base)}.steps>.header{float:right;width:100%;display:flex;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;justify-content:center}.steps>.header>.step-con{float:right;width:160px;position:relative;padding:5px;display:flex}.steps>.header>.step-con .step{float:right;width:100%;position:relative;border-radius:var(--border-radius-base);cursor:default;pointer-events:none;padding:10px 5px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.steps>.header>.step-con.done .step:not(.disable),.steps>.header>.step-con.next .step:not(.disable),.steps>.header>.step-con.process .step:not(.disable){cursor:pointer;pointer-events:unset}.steps>.header>.step-con.done .step:not(.disable):hover,.steps>.header>.step-con.next .step:not(.disable):hover,.steps>.header>.step-con.process .step:not(.disable):hover,.steps>.header>.step-con.active .step{background-color:var(--base-white)}.steps>.header>.step-con .step .icon{float:right;width:40px;margin-right:calc(50% - 20px);text-align:center;font-size:25px;height:40px;line-height:40px}.steps>.header>.step-con .step .icon i{line-height:35px}.steps>.header>.step-con .step .title{float:right;width:100%;text-align:center;font-size:10px;line-height:15px;margin-bottom:15px;height:100%;display:flex;align-items:center;justify-content:center}.steps>.header>.step-con .step.with-description .title{float:right;width:100%;text-align:center;font-size:13px;height:25px;line-height:32px}.steps>.header>.step-con .step .description{float:right;width:100%;text-align:center;font-size:11px;height:25px;line-height:20px}.steps>.header>.step-con .step .dot{float:right;width:25px;height:25px;line-height:25px;border-radius:50%;font-size:20px}.steps>.header>.step-con .step .delete{width:20px;height:20px;line-height:20px;position:absolute;top:-10px;right:-10px;font-size:25px;text-align:center;color:var(--red);cursor:pointer;display:none}.steps>.header>.step-con .step .delete:hover{color:var(--red-dark)}.steps>.header>.step-con.process .step .delete{display:block}.steps>.header>.step-con .step .dot.dot-done{display:none;color:var(--green)}.steps>.header>.step-con .step .dot.dot-process{display:none;color:var(--primary)}.steps>.header>.step-con.done .step .dot,.steps>.header>.step-con.process .step .dot{display:none}.steps>.header>.step-con.done .step .dot.dot-done{display:block}.steps>.header>.step-con.process .step .dot.dot-process{display:block}.steps>.header>.step-con .step .line-r{position:absolute;width:calc(50% + 5px);height:2px;bottom:21px;right:-5px;background-image:linear-gradient(to right,#3330,#3333334d)}.steps>.header>.step-con .step .line-l{position:absolute;width:calc(50% + 5px);height:2px;bottom:21px;left:-5px;background-image:linear-gradient(to left,#3330,#3333334d)}.steps>.header>.step-con:first-of-type .step .line-r{display:none}.steps>.header>.step-con:last-of-type .step .line-l{display:none}.steps>.body{float:right;width:100%;min-height:calc(100vh - 400px)}.steps>.body .step-con{float:right;width:100%}.steps>.body .step-con span{display:flex;align-items:center;justify-content:center}.steps>.body .step-con span lib-form{display:contents}.steps>.footer{float:right;width:100%;position:relative}@media(max-width:399.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0;padding:10px}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:30px;margin-right:calc((100% - 30px)/2);font-size:18px;height:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{font-size:10px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:400px)and (max-width:499.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0;padding:10px}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:30px;margin-right:calc((100% - 30px)/2);font-size:18px;height:30px}.steps>.header>.step-con .step .icon i{line-height:25px}.steps>.header>.step-con .step .title{font-size:10px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:500px)and (max-width:599.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:35px;margin-right:calc((100% - 35px)/2);font-size:20px;height:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px;line-height:13px;justify-content:center;align-items:center;display:flex}}@media(min-width:600px)and (max-width:699.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}.steps .steps{width:100%;margin-right:0}.steps>.header>.step-con .step .icon{width:35px;margin-right:calc((100% - 35px)/2);font-size:20px;height:35px}.steps>.header>.step-con .step .icon i{line-height:30px}.steps>.header>.step-con .step .title{font-size:11px}}@media(min-width:700px)and (max-width:799.99px){.steps{width:96%;margin:20px 2%}.steps{width:100%;margin:0}}@media(min-width:800px)and (max-width:899.99px){.steps{width:100%;margin:0}}@media(min-width:900px)and (max-width:999.99px){.steps{width:90%;margin:0 5%}}@media(min-width:1000px)and (max-width:1099.99px){.steps{width:80%;margin:0 10%}}@media(min-width:1100px)and (max-width:1199.99px){.steps{width:70%;margin:0 15%}}@media(min-width:1200px)and (max-width:1299.99px){.steps{width:70%;margin:0 15%}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { steps: [{
                 type: Input
             }] } });
@@ -7879,11 +7900,14 @@ class SubHeaderComponent {
     constructor() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SubHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SubHeaderComponent, isStandalone: false, selector: "lib-sub-header", ngImport: i0, template: "<!--<div id=\"SubHeader\">-->\r\n<!--  <div class=\"breadcrumb\" *ngIf=\"app.breadcrumb != null\">-->\r\n<!--    <a class=\"item\"><div class=\"name\">{{app.breadcrumb[app.breadcrumb.length - 1].Name}}</div></a>-->\r\n<!--    <a class=\"item\" [routerLink]=\"b.Url\" *ngFor=\"let b of (app.breadcrumb.length == 1 ? [] : app.breadcrumb)\"><div class=\"name\">{{b.Name}}</div><i class=\"fad fa-angle-left\"></i></a>-->\r\n<!--  </div>-->\r\n<!--  <div class=\"breadcrumb\" *ngIf=\"app.breadcrumb == null\" [innerHTML]=\"this.l('LoadingDot')\">-->\r\n<!--  </div>-->\r\n<!--</div>-->\r\n", styles: ["#SubHeader{float:right;width:100%;height:40px;background-color:#fff;box-shadow:var(--box-shadow-header);position:relative;z-index:10;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}#SubHeader .breadcrumb{float:right;width:100%;height:40px;line-height:40px;padding:0 40px}#SubHeader .breadcrumb .item{float:right}#SubHeader .breadcrumb .item .name{float:right;height:40px;line-height:40px;font-size:12px;color:var(--black-light)!important;cursor:pointer;font-weight:var(--font-light);position:relative;padding:0 20px}#SubHeader .breadcrumb .item i{float:right;height:40px;line-height:40px;width:20px;text-align:center;font-size:15px;cursor:default;color:var(--black-light)!important}#SubHeader .breadcrumb .item:not(:first-of-type) .name:hover{color:var(--primary)!important}#SubHeader .breadcrumb .item:first-of-type .name{margin-left:30px;font-size:16px;color:var(--black)!important;cursor:default;pointer-events:none;font-weight:var(--font-bold);padding:0}#SubHeader .breadcrumb .item:last-of-type i{display:none}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SubHeaderComponent, isStandalone: true, selector: "lib-sub-header", ngImport: i0, template: "<!--<div id=\"SubHeader\">-->\r\n<!--  <div class=\"breadcrumb\" *ngIf=\"app.breadcrumb != null\">-->\r\n<!--    <a class=\"item\"><div class=\"name\">{{app.breadcrumb[app.breadcrumb.length - 1].Name}}</div></a>-->\r\n<!--    <a class=\"item\" [routerLink]=\"b.Url\" *ngFor=\"let b of (app.breadcrumb.length == 1 ? [] : app.breadcrumb)\"><div class=\"name\">{{b.Name}}</div><i class=\"fad fa-angle-left\"></i></a>-->\r\n<!--  </div>-->\r\n<!--  <div class=\"breadcrumb\" *ngIf=\"app.breadcrumb == null\" [innerHTML]=\"this.l('LoadingDot')\">-->\r\n<!--  </div>-->\r\n<!--</div>-->\r\n", styles: ["#SubHeader{float:right;width:100%;height:40px;background-color:#fff;box-shadow:var(--box-shadow-header);position:relative;z-index:10;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}#SubHeader .breadcrumb{float:right;width:100%;height:40px;line-height:40px;padding:0 40px}#SubHeader .breadcrumb .item{float:right}#SubHeader .breadcrumb .item .name{float:right;height:40px;line-height:40px;font-size:12px;color:var(--black-light)!important;cursor:pointer;font-weight:var(--font-light);position:relative;padding:0 20px}#SubHeader .breadcrumb .item i{float:right;height:40px;line-height:40px;width:20px;text-align:center;font-size:15px;cursor:default;color:var(--black-light)!important}#SubHeader .breadcrumb .item:not(:first-of-type) .name:hover{color:var(--primary)!important}#SubHeader .breadcrumb .item:first-of-type .name{margin-left:30px;font-size:16px;color:var(--black)!important;cursor:default;pointer-events:none;font-weight:var(--font-bold);padding:0}#SubHeader .breadcrumb .item:last-of-type i{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SubHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-sub-header', standalone: false, template: "<!--<div id=\"SubHeader\">-->\r\n<!--  <div class=\"breadcrumb\" *ngIf=\"app.breadcrumb != null\">-->\r\n<!--    <a class=\"item\"><div class=\"name\">{{app.breadcrumb[app.breadcrumb.length - 1].Name}}</div></a>-->\r\n<!--    <a class=\"item\" [routerLink]=\"b.Url\" *ngFor=\"let b of (app.breadcrumb.length == 1 ? [] : app.breadcrumb)\"><div class=\"name\">{{b.Name}}</div><i class=\"fad fa-angle-left\"></i></a>-->\r\n<!--  </div>-->\r\n<!--  <div class=\"breadcrumb\" *ngIf=\"app.breadcrumb == null\" [innerHTML]=\"this.l('LoadingDot')\">-->\r\n<!--  </div>-->\r\n<!--</div>-->\r\n", styles: ["#SubHeader{float:right;width:100%;height:40px;background-color:#fff;box-shadow:var(--box-shadow-header);position:relative;z-index:10;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}#SubHeader .breadcrumb{float:right;width:100%;height:40px;line-height:40px;padding:0 40px}#SubHeader .breadcrumb .item{float:right}#SubHeader .breadcrumb .item .name{float:right;height:40px;line-height:40px;font-size:12px;color:var(--black-light)!important;cursor:pointer;font-weight:var(--font-light);position:relative;padding:0 20px}#SubHeader .breadcrumb .item i{float:right;height:40px;line-height:40px;width:20px;text-align:center;font-size:15px;cursor:default;color:var(--black-light)!important}#SubHeader .breadcrumb .item:not(:first-of-type) .name:hover{color:var(--primary)!important}#SubHeader .breadcrumb .item:first-of-type .name{margin-left:30px;font-size:16px;color:var(--black)!important;cursor:default;pointer-events:none;font-weight:var(--font-bold);padding:0}#SubHeader .breadcrumb .item:last-of-type i{display:none}\n"] }]
+            args: [{ selector: 'lib-sub-header', imports: [
+                        CommonModule,
+                        FormsModule,
+                    ], standalone: true, template: "<!--<div id=\"SubHeader\">-->\r\n<!--  <div class=\"breadcrumb\" *ngIf=\"app.breadcrumb != null\">-->\r\n<!--    <a class=\"item\"><div class=\"name\">{{app.breadcrumb[app.breadcrumb.length - 1].Name}}</div></a>-->\r\n<!--    <a class=\"item\" [routerLink]=\"b.Url\" *ngFor=\"let b of (app.breadcrumb.length == 1 ? [] : app.breadcrumb)\"><div class=\"name\">{{b.Name}}</div><i class=\"fad fa-angle-left\"></i></a>-->\r\n<!--  </div>-->\r\n<!--  <div class=\"breadcrumb\" *ngIf=\"app.breadcrumb == null\" [innerHTML]=\"this.l('LoadingDot')\">-->\r\n<!--  </div>-->\r\n<!--</div>-->\r\n", styles: ["#SubHeader{float:right;width:100%;height:40px;background-color:#fff;box-shadow:var(--box-shadow-header);position:relative;z-index:10;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none}#SubHeader .breadcrumb{float:right;width:100%;height:40px;line-height:40px;padding:0 40px}#SubHeader .breadcrumb .item{float:right}#SubHeader .breadcrumb .item .name{float:right;height:40px;line-height:40px;font-size:12px;color:var(--black-light)!important;cursor:pointer;font-weight:var(--font-light);position:relative;padding:0 20px}#SubHeader .breadcrumb .item i{float:right;height:40px;line-height:40px;width:20px;text-align:center;font-size:15px;cursor:default;color:var(--black-light)!important}#SubHeader .breadcrumb .item:not(:first-of-type) .name:hover{color:var(--primary)!important}#SubHeader .breadcrumb .item:first-of-type .name{margin-left:30px;font-size:16px;color:var(--black)!important;cursor:default;pointer-events:none;font-weight:var(--font-bold);padding:0}#SubHeader .breadcrumb .item:last-of-type i{display:none}\n"] }]
         }], ctorParameters: () => [] });
 
 class TooltipComponent {
@@ -7892,11 +7916,14 @@ class TooltipComponent {
     constructor() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TooltipComponent, isStandalone: false, selector: "lib-tooltip", inputs: { text: "text", position: "position" }, ngImport: i0, template: "<div></div>\r\n", styles: ["[data-tooltip]{width:100%;height:100%;position:relative;z-index:10}[data-tooltip]:before,[data-tooltip]:after{position:absolute;visibility:hidden;opacity:0;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}[data-tooltip]:before{content:attr(data-tooltip);padding:0 10px;line-height:30px;min-width:50px;max-width:300px;width:max-content;width:-moz-max-content;border-radius:var(--border-radius-base);font-size:13px;background-color:var(--black);color:#fff;text-align:center;white-space:pre-wrap;z-index:6;transform:translate(-50%,-5px) scale(.5)}[data-tooltip]:after{content:\"\";border-style:solid;border-width:5px 5px 0px 5px;border-color:var(--black);transition-duration:0s;transform-origin:top;transform:translate(-50%) scaleY(0)}[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;opacity:1}[data-tooltip]:hover:before{transition-delay:.3s;transform:translate(-50%,-5px) scale(1)}[data-tooltip]:hover:after{transition-delay:.5s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}[data-tooltip-location=left]:before,[data-tooltip-location=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}[data-tooltip-location=left]:before{transform:translate(-5px,50%) scale(.5)}[data-tooltip-location=left]:hover:before{transform:translate(-5px,50%) scale(1)}[data-tooltip-location=left]:after{border-width:5px 0px 5px 5px;border-color:transparent transparent transparent rgba(55,64,70,.9);transform-origin:left;transform:translateY(50%) scaleX(0)}[data-tooltip-location=left]:hover:after{transform:translateY(50%) scaleX(1)}[data-tooltip-location=right]:before,[data-tooltip-location=right]:after{left:calc(100% + 5px);bottom:50%}[data-tooltip-location=right]:before{transform:translate(5px,50%) scale(.5)}[data-tooltip-location=right]:hover:before{transform:translate(5px,50%) scale(1)}[data-tooltip-location=right]:after{border-width:5px 5px 5px 0px;border-color:transparent rgba(55,64,70,.9) transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}[data-tooltip-location=right]:hover:after{transform:translateY(50%) scaleX(1)}[data-tooltip-location=bottom]:before,[data-tooltip-location=bottom]:after{top:calc(100% + 5px);bottom:auto}[data-tooltip-location=bottom]:before{transform:translate(-50%,5px) scale(.5)}[data-tooltip-location=bottom]:hover:before{transform:translate(-50%,5px) scale(1)}[data-tooltip-location=bottom]:after{border-width:0px 5px 5px 5px;border-color:transparent transparent rgba(55,64,70,.9) transparent;transform-origin:bottom}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", position: "position" }, ngImport: i0, template: "<div></div>\r\n", styles: ["[data-tooltip]{width:100%;height:100%;position:relative;z-index:10}[data-tooltip]:before,[data-tooltip]:after{position:absolute;visibility:hidden;opacity:0;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}[data-tooltip]:before{content:attr(data-tooltip);padding:0 10px;line-height:30px;min-width:50px;max-width:300px;width:max-content;width:-moz-max-content;border-radius:var(--border-radius-base);font-size:13px;background-color:var(--black);color:#fff;text-align:center;white-space:pre-wrap;z-index:6;transform:translate(-50%,-5px) scale(.5)}[data-tooltip]:after{content:\"\";border-style:solid;border-width:5px 5px 0px 5px;border-color:var(--black);transition-duration:0s;transform-origin:top;transform:translate(-50%) scaleY(0)}[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;opacity:1}[data-tooltip]:hover:before{transition-delay:.3s;transform:translate(-50%,-5px) scale(1)}[data-tooltip]:hover:after{transition-delay:.5s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}[data-tooltip-location=left]:before,[data-tooltip-location=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}[data-tooltip-location=left]:before{transform:translate(-5px,50%) scale(.5)}[data-tooltip-location=left]:hover:before{transform:translate(-5px,50%) scale(1)}[data-tooltip-location=left]:after{border-width:5px 0px 5px 5px;border-color:transparent transparent transparent rgba(55,64,70,.9);transform-origin:left;transform:translateY(50%) scaleX(0)}[data-tooltip-location=left]:hover:after{transform:translateY(50%) scaleX(1)}[data-tooltip-location=right]:before,[data-tooltip-location=right]:after{left:calc(100% + 5px);bottom:50%}[data-tooltip-location=right]:before{transform:translate(5px,50%) scale(.5)}[data-tooltip-location=right]:hover:before{transform:translate(5px,50%) scale(1)}[data-tooltip-location=right]:after{border-width:5px 5px 5px 0px;border-color:transparent rgba(55,64,70,.9) transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}[data-tooltip-location=right]:hover:after{transform:translateY(50%) scaleX(1)}[data-tooltip-location=bottom]:before,[data-tooltip-location=bottom]:after{top:calc(100% + 5px);bottom:auto}[data-tooltip-location=bottom]:before{transform:translate(-50%,5px) scale(.5)}[data-tooltip-location=bottom]:hover:before{transform:translate(-50%,5px) scale(1)}[data-tooltip-location=bottom]:after{border-width:0px 5px 5px 5px;border-color:transparent transparent rgba(55,64,70,.9) transparent;transform-origin:bottom}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tooltip', standalone: false, template: "<div></div>\r\n", styles: ["[data-tooltip]{width:100%;height:100%;position:relative;z-index:10}[data-tooltip]:before,[data-tooltip]:after{position:absolute;visibility:hidden;opacity:0;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}[data-tooltip]:before{content:attr(data-tooltip);padding:0 10px;line-height:30px;min-width:50px;max-width:300px;width:max-content;width:-moz-max-content;border-radius:var(--border-radius-base);font-size:13px;background-color:var(--black);color:#fff;text-align:center;white-space:pre-wrap;z-index:6;transform:translate(-50%,-5px) scale(.5)}[data-tooltip]:after{content:\"\";border-style:solid;border-width:5px 5px 0px 5px;border-color:var(--black);transition-duration:0s;transform-origin:top;transform:translate(-50%) scaleY(0)}[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;opacity:1}[data-tooltip]:hover:before{transition-delay:.3s;transform:translate(-50%,-5px) scale(1)}[data-tooltip]:hover:after{transition-delay:.5s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}[data-tooltip-location=left]:before,[data-tooltip-location=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}[data-tooltip-location=left]:before{transform:translate(-5px,50%) scale(.5)}[data-tooltip-location=left]:hover:before{transform:translate(-5px,50%) scale(1)}[data-tooltip-location=left]:after{border-width:5px 0px 5px 5px;border-color:transparent transparent transparent rgba(55,64,70,.9);transform-origin:left;transform:translateY(50%) scaleX(0)}[data-tooltip-location=left]:hover:after{transform:translateY(50%) scaleX(1)}[data-tooltip-location=right]:before,[data-tooltip-location=right]:after{left:calc(100% + 5px);bottom:50%}[data-tooltip-location=right]:before{transform:translate(5px,50%) scale(.5)}[data-tooltip-location=right]:hover:before{transform:translate(5px,50%) scale(1)}[data-tooltip-location=right]:after{border-width:5px 5px 5px 0px;border-color:transparent rgba(55,64,70,.9) transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}[data-tooltip-location=right]:hover:after{transform:translateY(50%) scaleX(1)}[data-tooltip-location=bottom]:before,[data-tooltip-location=bottom]:after{top:calc(100% + 5px);bottom:auto}[data-tooltip-location=bottom]:before{transform:translate(-50%,5px) scale(.5)}[data-tooltip-location=bottom]:hover:before{transform:translate(-50%,5px) scale(1)}[data-tooltip-location=bottom]:after{border-width:0px 5px 5px 5px;border-color:transparent transparent rgba(55,64,70,.9) transparent;transform-origin:bottom}\n"] }]
+            args: [{ selector: 'lib-tooltip', imports: [
+                        CommonModule,
+                        FormsModule,
+                    ], standalone: true, template: "<div></div>\r\n", styles: ["[data-tooltip]{width:100%;height:100%;position:relative;z-index:10}[data-tooltip]:before,[data-tooltip]:after{position:absolute;visibility:hidden;opacity:0;left:50%;bottom:calc(100% + 5px);pointer-events:none;transition:.2s;will-change:transform}[data-tooltip]:before{content:attr(data-tooltip);padding:0 10px;line-height:30px;min-width:50px;max-width:300px;width:max-content;width:-moz-max-content;border-radius:var(--border-radius-base);font-size:13px;background-color:var(--black);color:#fff;text-align:center;white-space:pre-wrap;z-index:6;transform:translate(-50%,-5px) scale(.5)}[data-tooltip]:after{content:\"\";border-style:solid;border-width:5px 5px 0px 5px;border-color:var(--black);transition-duration:0s;transform-origin:top;transform:translate(-50%) scaleY(0)}[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;opacity:1}[data-tooltip]:hover:before{transition-delay:.3s;transform:translate(-50%,-5px) scale(1)}[data-tooltip]:hover:after{transition-delay:.5s;transition-duration:.2s;transform:translate(-50%) scaleY(1)}[data-tooltip-location=left]:before,[data-tooltip-location=left]:after{left:auto;right:calc(100% + 5px);bottom:50%}[data-tooltip-location=left]:before{transform:translate(-5px,50%) scale(.5)}[data-tooltip-location=left]:hover:before{transform:translate(-5px,50%) scale(1)}[data-tooltip-location=left]:after{border-width:5px 0px 5px 5px;border-color:transparent transparent transparent rgba(55,64,70,.9);transform-origin:left;transform:translateY(50%) scaleX(0)}[data-tooltip-location=left]:hover:after{transform:translateY(50%) scaleX(1)}[data-tooltip-location=right]:before,[data-tooltip-location=right]:after{left:calc(100% + 5px);bottom:50%}[data-tooltip-location=right]:before{transform:translate(5px,50%) scale(.5)}[data-tooltip-location=right]:hover:before{transform:translate(5px,50%) scale(1)}[data-tooltip-location=right]:after{border-width:5px 5px 5px 0px;border-color:transparent rgba(55,64,70,.9) transparent transparent;transform-origin:right;transform:translateY(50%) scaleX(0)}[data-tooltip-location=right]:hover:after{transform:translateY(50%) scaleX(1)}[data-tooltip-location=bottom]:before,[data-tooltip-location=bottom]:after{top:calc(100% + 5px);bottom:auto}[data-tooltip-location=bottom]:before{transform:translate(-50%,5px) scale(.5)}[data-tooltip-location=bottom]:hover:before{transform:translate(-50%,5px) scale(1)}[data-tooltip-location=bottom]:after{border-width:0px 5px 5px 5px;border-color:transparent transparent rgba(55,64,70,.9) transparent;transform-origin:bottom}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input
             }], position: [{
@@ -7928,11 +7955,15 @@ class AlertComponent {
         this.alert.show();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AlertComponent, deps: [{ token: PsToolkitUiConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: AlertComponent, isStandalone: false, selector: "lib-alert", ngImport: i0, template: "<lib-modal *ngIf=\"alert\" [modal]=\"alert\"></lib-modal>\r\n", styles: [".accordion{float:right;width:100%;padding:20px;background-color:#fff;border-radius:var(--border-radius-base);position:relative;min-height:300px!important}.accordion>.loading{position:absolute;background-color:#fff;top:0;right:0;width:100%;height:100%;text-align:center;border-radius:var(--border-radius-base);z-index:4}.accordion>.loading .text{position:absolute;height:35px;line-height:35px;width:100%;text-align:center;font-weight:var(--font-bold);top:calc(50% - 20px)}::ng-deep .accordion>.loading .icon{font-size:20px!important;line-height:30px;position:relative;top:5px;margin-left:5px}.accordion>.title{float:right;width:100%;height:30px;line-height:30px;font-weight:var(--font-bold);font-size:16px;text-align:center;margin-bottom:10px;position:relative}.accordion .accordion-item{float:right;width:100%;margin-bottom:10px;position:relative}.accordion .accordion-item .header{float:right;width:100%;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:relative}.accordion .accordion-item .title{float:right;width:100%;height:30px;line-height:30px;background-color:var(--base);border-radius:var(--border-radius-base);text-align:center;font-size:12px;cursor:pointer;color:#fff}.accordion .accordion-item .title:hover{background-color:var(--base-dark)}.accordion .accordion-item .header .icon{position:absolute;top:0;right:0;width:30px;height:30px;line-height:29px;text-align:center;color:#fff;cursor:pointer;font-size:18px}.accordion .accordion-item .header .delete-icon{position:absolute;top:0;left:0;width:30px;height:30px;line-height:29px;text-align:center;color:#fff;cursor:pointer;font-size:18px}.accordion .accordion-item .content{display:none;float:right;width:100%;padding:10px}.accordion .accordion-item-con:first-of-type .content{display:block}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["modal"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: AlertComponent, isStandalone: true, selector: "lib-alert", ngImport: i0, template: "<lib-modal *ngIf=\"alert\" [modal]=\"alert\"></lib-modal>\r\n", styles: [".accordion{float:right;width:100%;padding:20px;background-color:#fff;border-radius:var(--border-radius-base);position:relative;min-height:300px!important}.accordion>.loading{position:absolute;background-color:#fff;top:0;right:0;width:100%;height:100%;text-align:center;border-radius:var(--border-radius-base);z-index:4}.accordion>.loading .text{position:absolute;height:35px;line-height:35px;width:100%;text-align:center;font-weight:var(--font-bold);top:calc(50% - 20px)}::ng-deep .accordion>.loading .icon{font-size:20px!important;line-height:30px;position:relative;top:5px;margin-left:5px}.accordion>.title{float:right;width:100%;height:30px;line-height:30px;font-weight:var(--font-bold);font-size:16px;text-align:center;margin-bottom:10px;position:relative}.accordion .accordion-item{float:right;width:100%;margin-bottom:10px;position:relative}.accordion .accordion-item .header{float:right;width:100%;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:relative}.accordion .accordion-item .title{float:right;width:100%;height:30px;line-height:30px;background-color:var(--base);border-radius:var(--border-radius-base);text-align:center;font-size:12px;cursor:pointer;color:#fff}.accordion .accordion-item .title:hover{background-color:var(--base-dark)}.accordion .accordion-item .header .icon{position:absolute;top:0;right:0;width:30px;height:30px;line-height:29px;text-align:center;color:#fff;cursor:pointer;font-size:18px}.accordion .accordion-item .header .delete-icon{position:absolute;top:0;left:0;width:30px;height:30px;line-height:29px;text-align:center;color:#fff;cursor:pointer;font-size:18px}.accordion .accordion-item .content{display:none;float:right;width:100%;padding:10px}.accordion .accordion-item-con:first-of-type .content{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["modal"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-alert', standalone: false, template: "<lib-modal *ngIf=\"alert\" [modal]=\"alert\"></lib-modal>\r\n", styles: [".accordion{float:right;width:100%;padding:20px;background-color:#fff;border-radius:var(--border-radius-base);position:relative;min-height:300px!important}.accordion>.loading{position:absolute;background-color:#fff;top:0;right:0;width:100%;height:100%;text-align:center;border-radius:var(--border-radius-base);z-index:4}.accordion>.loading .text{position:absolute;height:35px;line-height:35px;width:100%;text-align:center;font-weight:var(--font-bold);top:calc(50% - 20px)}::ng-deep .accordion>.loading .icon{font-size:20px!important;line-height:30px;position:relative;top:5px;margin-left:5px}.accordion>.title{float:right;width:100%;height:30px;line-height:30px;font-weight:var(--font-bold);font-size:16px;text-align:center;margin-bottom:10px;position:relative}.accordion .accordion-item{float:right;width:100%;margin-bottom:10px;position:relative}.accordion .accordion-item .header{float:right;width:100%;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:relative}.accordion .accordion-item .title{float:right;width:100%;height:30px;line-height:30px;background-color:var(--base);border-radius:var(--border-radius-base);text-align:center;font-size:12px;cursor:pointer;color:#fff}.accordion .accordion-item .title:hover{background-color:var(--base-dark)}.accordion .accordion-item .header .icon{position:absolute;top:0;right:0;width:30px;height:30px;line-height:29px;text-align:center;color:#fff;cursor:pointer;font-size:18px}.accordion .accordion-item .header .delete-icon{position:absolute;top:0;left:0;width:30px;height:30px;line-height:29px;text-align:center;color:#fff;cursor:pointer;font-size:18px}.accordion .accordion-item .content{display:none;float:right;width:100%;padding:10px}.accordion .accordion-item-con:first-of-type .content{display:block}\n"] }]
+            args: [{ selector: 'lib-alert', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ModalComponent
+                    ], standalone: true, template: "<lib-modal *ngIf=\"alert\" [modal]=\"alert\"></lib-modal>\r\n", styles: [".accordion{float:right;width:100%;padding:20px;background-color:#fff;border-radius:var(--border-radius-base);position:relative;min-height:300px!important}.accordion>.loading{position:absolute;background-color:#fff;top:0;right:0;width:100%;height:100%;text-align:center;border-radius:var(--border-radius-base);z-index:4}.accordion>.loading .text{position:absolute;height:35px;line-height:35px;width:100%;text-align:center;font-weight:var(--font-bold);top:calc(50% - 20px)}::ng-deep .accordion>.loading .icon{font-size:20px!important;line-height:30px;position:relative;top:5px;margin-left:5px}.accordion>.title{float:right;width:100%;height:30px;line-height:30px;font-weight:var(--font-bold);font-size:16px;text-align:center;margin-bottom:10px;position:relative}.accordion .accordion-item{float:right;width:100%;margin-bottom:10px;position:relative}.accordion .accordion-item .header{float:right;width:100%;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:relative}.accordion .accordion-item .title{float:right;width:100%;height:30px;line-height:30px;background-color:var(--base);border-radius:var(--border-radius-base);text-align:center;font-size:12px;cursor:pointer;color:#fff}.accordion .accordion-item .title:hover{background-color:var(--base-dark)}.accordion .accordion-item .header .icon{position:absolute;top:0;right:0;width:30px;height:30px;line-height:29px;text-align:center;color:#fff;cursor:pointer;font-size:18px}.accordion .accordion-item .header .delete-icon{position:absolute;top:0;left:0;width:30px;height:30px;line-height:29px;text-align:center;color:#fff;cursor:pointer;font-size:18px}.accordion .accordion-item .content{display:none;float:right;width:100%;padding:10px}.accordion .accordion-item-con:first-of-type .content{display:block}\n"] }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }] });
 
 class NotfoundComponent {
@@ -7951,11 +7982,15 @@ class NotfoundComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotfoundComponent, deps: [{ token: PsToolkitUiConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotfoundComponent, isStandalone: false, selector: "lib-notfound", ngImport: i0, template: "<div id=\"Notfound\">\r\n  <div class=\"notfound-con\">\r\n    <i class=\"far fa-frown notfound-icon\"></i>\r\n    <div class=\"notfound\">404</div>\r\n    <div class=\"notfound-text\">{{l(\"Text\")}}</div>\r\n    <div class=\"notfound-btn\">\r\n      <lib-form-button [inp]=\"back\"></lib-form-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Notfound{float:right;width:100%;position:relative;background-color:#fff;min-height:calc(100vh - 125px);justify-content:center;align-items:center;display:flex}#Notfound .notfound-con{width:100%;float:right;height:100%;border-radius:var(--border-radius-base)}#Notfound .notfound-con .notfound{float:right;width:100%;text-align:center;font-size:60px;height:100px;line-height:120px;font-weight:var(--font-bold);position:relative;z-index:2}#Notfound .notfound-con .notfound-text{float:right;width:100%;text-align:center;height:40px;line-height:40px;font-size:16px;font-weight:var(--font-light);position:relative;z-index:2}#Notfound .notfound-con .notfound-btn{margin-top:15px;float:right;width:20%;position:relative;z-index:2;margin-right:40%}#Notfound .notfound-con .notfound-icon{float:right;width:100%;color:var(--base-white);font-size:150px;text-align:center}@media(max-width:399.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:90px}#Notfound .notfound-con .notfound-text{font-size:14px}#Notfound .notfound-con .notfound-icon{font-size:300px;left:-90px}}@media(min-width:400px)and (max-width:499.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media(min-width:500px)and (max-width:599.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media(min-width:600px)and (max-width:699.99px){#Notfound .notfound-con{width:80%;right:10%}#Notfound .notfound-con .notfound{font-size:120px}#Notfound .notfound-con .notfound-text{font-size:17px}}\n"], dependencies: [{ kind: "component", type: FormButtonComponent, selector: "lib-form-button", inputs: ["inp"], outputs: ["changeIndex"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: NotfoundComponent, isStandalone: true, selector: "lib-notfound", ngImport: i0, template: "<div id=\"Notfound\">\r\n  <div class=\"notfound-con\">\r\n    <i class=\"far fa-frown notfound-icon\"></i>\r\n    <div class=\"notfound\">404</div>\r\n    <div class=\"notfound-text\">{{l(\"Text\")}}</div>\r\n    <div class=\"notfound-btn\">\r\n      <lib-form-button [inp]=\"back\"></lib-form-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Notfound{float:right;width:100%;position:relative;background-color:#fff;min-height:calc(100vh - 125px);justify-content:center;align-items:center;display:flex}#Notfound .notfound-con{width:100%;float:right;height:100%;border-radius:var(--border-radius-base)}#Notfound .notfound-con .notfound{float:right;width:100%;text-align:center;font-size:60px;height:100px;line-height:120px;font-weight:var(--font-bold);position:relative;z-index:2}#Notfound .notfound-con .notfound-text{float:right;width:100%;text-align:center;height:40px;line-height:40px;font-size:16px;font-weight:var(--font-light);position:relative;z-index:2}#Notfound .notfound-con .notfound-btn{margin-top:15px;float:right;width:20%;position:relative;z-index:2;margin-right:40%}#Notfound .notfound-con .notfound-icon{float:right;width:100%;color:var(--base-white);font-size:150px;text-align:center}@media(max-width:399.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:90px}#Notfound .notfound-con .notfound-text{font-size:14px}#Notfound .notfound-con .notfound-icon{font-size:300px;left:-90px}}@media(min-width:400px)and (max-width:499.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media(min-width:500px)and (max-width:599.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media(min-width:600px)and (max-width:699.99px){#Notfound .notfound-con{width:80%;right:10%}#Notfound .notfound-con .notfound{font-size:120px}#Notfound .notfound-con .notfound-text{font-size:17px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FormButtonComponent, selector: "lib-form-button", inputs: ["inp"], outputs: ["changeIndex"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: NotfoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-notfound', standalone: false, template: "<div id=\"Notfound\">\r\n  <div class=\"notfound-con\">\r\n    <i class=\"far fa-frown notfound-icon\"></i>\r\n    <div class=\"notfound\">404</div>\r\n    <div class=\"notfound-text\">{{l(\"Text\")}}</div>\r\n    <div class=\"notfound-btn\">\r\n      <lib-form-button [inp]=\"back\"></lib-form-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Notfound{float:right;width:100%;position:relative;background-color:#fff;min-height:calc(100vh - 125px);justify-content:center;align-items:center;display:flex}#Notfound .notfound-con{width:100%;float:right;height:100%;border-radius:var(--border-radius-base)}#Notfound .notfound-con .notfound{float:right;width:100%;text-align:center;font-size:60px;height:100px;line-height:120px;font-weight:var(--font-bold);position:relative;z-index:2}#Notfound .notfound-con .notfound-text{float:right;width:100%;text-align:center;height:40px;line-height:40px;font-size:16px;font-weight:var(--font-light);position:relative;z-index:2}#Notfound .notfound-con .notfound-btn{margin-top:15px;float:right;width:20%;position:relative;z-index:2;margin-right:40%}#Notfound .notfound-con .notfound-icon{float:right;width:100%;color:var(--base-white);font-size:150px;text-align:center}@media(max-width:399.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:90px}#Notfound .notfound-con .notfound-text{font-size:14px}#Notfound .notfound-con .notfound-icon{font-size:300px;left:-90px}}@media(min-width:400px)and (max-width:499.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media(min-width:500px)and (max-width:599.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media(min-width:600px)and (max-width:699.99px){#Notfound .notfound-con{width:80%;right:10%}#Notfound .notfound-con .notfound{font-size:120px}#Notfound .notfound-con .notfound-text{font-size:17px}}\n"] }]
+            args: [{ selector: 'lib-notfound', imports: [
+                        CommonModule,
+                        FormsModule,
+                        FormButtonComponent
+                    ], standalone: true, template: "<div id=\"Notfound\">\r\n  <div class=\"notfound-con\">\r\n    <i class=\"far fa-frown notfound-icon\"></i>\r\n    <div class=\"notfound\">404</div>\r\n    <div class=\"notfound-text\">{{l(\"Text\")}}</div>\r\n    <div class=\"notfound-btn\">\r\n      <lib-form-button [inp]=\"back\"></lib-form-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Notfound{float:right;width:100%;position:relative;background-color:#fff;min-height:calc(100vh - 125px);justify-content:center;align-items:center;display:flex}#Notfound .notfound-con{width:100%;float:right;height:100%;border-radius:var(--border-radius-base)}#Notfound .notfound-con .notfound{float:right;width:100%;text-align:center;font-size:60px;height:100px;line-height:120px;font-weight:var(--font-bold);position:relative;z-index:2}#Notfound .notfound-con .notfound-text{float:right;width:100%;text-align:center;height:40px;line-height:40px;font-size:16px;font-weight:var(--font-light);position:relative;z-index:2}#Notfound .notfound-con .notfound-btn{margin-top:15px;float:right;width:20%;position:relative;z-index:2;margin-right:40%}#Notfound .notfound-con .notfound-icon{float:right;width:100%;color:var(--base-white);font-size:150px;text-align:center}@media(max-width:399.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:90px}#Notfound .notfound-con .notfound-text{font-size:14px}#Notfound .notfound-con .notfound-icon{font-size:300px;left:-90px}}@media(min-width:400px)and (max-width:499.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media(min-width:500px)and (max-width:599.99px){#Notfound .notfound-con{width:90%;right:5%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media(min-width:600px)and (max-width:699.99px){#Notfound .notfound-con{width:80%;right:10%}#Notfound .notfound-con .notfound{font-size:120px}#Notfound .notfound-con .notfound-text{font-size:17px}}\n"] }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }] });
 
 class ErrorComponent {
@@ -8156,11 +8191,16 @@ class LoginComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoginComponent, deps: [{ token: PsToolkitUiConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoginComponent, isStandalone: false, selector: "lib-login", inputs: { login: "login", loginTemplate: "loginTemplate" }, ngImport: i0, template: "<div id=\"LoginMain\" *ngIf=\"loginTemplate == 'Main'\">\r\n  <div class=\"triangles\">\r\n    <i class=\"triangle triangle-1 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-2 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-3 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-4 fas fa-caret-left\"></i>\r\n  </div>\r\n  <div class=\"form-c\">\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"about-c\">\r\n    <div class=\"about\">\r\n      <div class=\"info\">\r\n        <div class=\"logo\"></div>\r\n        <div class=\"title\">\r\n          {{ login.l('SoftwareName') }}\r\n        </div>\r\n        <div class=\"sub-title\" [innerHTML]=\"login.l('SoftwareDesc')\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div id=\"LoginSimple\" *ngIf=\"loginTemplate == 'Simple'\">\r\n  <div class=\"form-c\">\r\n    <div class=\"title\">{{ login.l('SoftwareName') }}</div>\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n<div id=\"LoginModal\" *ngIf=\"loginTemplate == 'Modal'\">\r\n  <lib-modal [modal]=\"login.modal\">\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </lib-modal>\r\n</div>\r\n<lib-modal [modal]=\"rulesModal\"></lib-modal>\r\n", styles: ["#LoginMain{position:relative;width:100%;float:right;border-radius:var(--border-radius-base);background-color:#fff;height:calc(100vh - 35px);overflow-y:auto}#LoginMain .form-c,#LoginMain .about-c{width:50%;position:relative;z-index:2;justify-content:center;align-items:center;display:flex;height:calc(100vh - 35px);overflow-y:auto;padding:50px 0;float:left}#LoginMain .form-c{box-shadow:19px 0 35px -7px #0000000d}#LoginMain .form-c .form{width:60%;margin:0 auto}#LoginMain .about{width:100%;position:relative;float:right;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0}#LoginMain .about .info{width:100%;position:relative;float:right;z-index:2;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0;padding:50px 0;max-height:calc(100vh - 35px);overflow-y:auto}#LoginMain .triangles{position:absolute;width:100%;height:calc(100vh - 35px);overflow:hidden;z-index:1;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0}#LoginMain .triangles .triangle{position:absolute;color:var(--base);opacity:.1}#LoginMain .triangles .triangle-1{font-size:656px;top:50px;right:-150px}#LoginMain .triangles .triangle-2{font-size:1000px;top:150px;right:-240px}#LoginMain .triangles .triangle-3{font-size:900px;top:-347px;right:-220px}#LoginMain .triangles .triangle-4{font-size:900px;top:450px;right:-250px}#LoginMain .about .logo{height:200px;width:200px;background-position:center center;background-repeat:no-repeat;background-size:contain;margin:0 auto;position:relative}#LoginMain .about .title{width:100%;float:right;text-align:center;font-size:25px;height:40px;line-height:40px;position:relative;margin-top:20px;font-weight:bolder}#LoginMain .about .sub-title{float:right;text-align:center;font-size:12px;line-height:30px;position:relative;padding:20px;width:80%;margin-right:10%;font-weight:var(--font-light)}::ng-deep #LoginMain .form-c .form .title,::ng-deep #LoginModal .form .title{width:100%;float:right;text-align:center;font-size:25px;height:50px;line-height:50px;font-weight:var(--font-bold);margin-bottom:10px}::ng-deep #LoginMain .form-c .form .sub-title,::ng-deep #LoginModal .form .sub-title{width:100%;float:right;color:var(--black-light);text-align:center;font-size:12px;height:30px;line-height:30px;font-weight:var(--font-light);margin-bottom:20px}::ng-deep #LoginMain .form-c .form .sub-title:after,::ng-deep #LoginModal .form .sub-title:after{background-image:none!important}#LoginSimple{float:right;width:100%;min-height:100vh;padding:20px;justify-content:center;align-items:center;display:flex;background-color:#fff}#LoginSimple .form-c{float:right;background-color:#fff;border:var(--border-base);border-radius:var(--border-radius-base);padding:20px;width:400px}#LoginSimple .form-c .title{float:right;width:100%;line-height:60px;color:var(--primary);font-weight:var(--font-bold);font-size:25px;text-align:center}::ng-deep #LoginSimple .form-c .form .title{width:100%;float:right;font-size:18px;height:40px;line-height:40px;font-weight:var(--font-bold);margin-bottom:10px}::ng-deep #LoginSimple .form-c .form .sub-title{width:100%;float:right;color:var(--black-light);font-size:12px;height:30px;line-height:30px;font-weight:var(--font-light);margin-bottom:20px}::ng-deep #LoginSimple .form-c .form .sub-title:after{background-image:none!important}@media(max-width:399.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:100%}#LoginMain .about .info{padding:50px 5px}#LoginMain .about .logo{width:100px;height:100px}}@media(min-width:400px)and (max-width:499.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:80%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:100px;height:100px}}@media(min-width:500px)and (max-width:599.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:70%;float:right;margin-right:15%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:150px;height:150px}}@media(min-width:600px)and (max-width:699.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right;min-height:calc(100vh - 35px)}#LoginMain .form-c .form{width:70%;float:right;margin-right:15%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:150px;height:150px}}@media(min-width:700px)and (max-width:799.98px){#LoginMain .form-c .form{width:90%}}@media(min-width:800px)and (max-width:899.98px){#LoginMain .form-c .form{width:90%}}@media(min-width:900px)and (max-width:999.98px){#LoginMain .form-c .form{width:80%}}@media(min-width:1000px)and (max-width:1099.98px){#LoginMain .form-c .form{width:80%}}@media(min-width:1100px)and (max-width:1199.98px){#LoginMain .form-c .form{width:70%}}@media(min-width:1200px)and (max-width:1299.98px){#LoginMain .form-c .form{width:70%}}@media(max-width:599.98px){#LoginMain,#LoginMain .form-c,#LoginMain .about-c{height:calc(100vh - 60px)}#LoginMain .about .info{max-height:calc(100vh - 60px)}#LoginMain .triangles{height:calc(100vh - 60px)}}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["modal"] }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["form"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoginComponent, isStandalone: true, selector: "lib-login", inputs: { login: "login", loginTemplate: "loginTemplate" }, ngImport: i0, template: "<div id=\"LoginMain\" *ngIf=\"loginTemplate == 'Main'\">\r\n  <div class=\"triangles\">\r\n    <i class=\"triangle triangle-1 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-2 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-3 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-4 fas fa-caret-left\"></i>\r\n  </div>\r\n  <div class=\"form-c\">\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"about-c\">\r\n    <div class=\"about\">\r\n      <div class=\"info\">\r\n        <div class=\"logo\"></div>\r\n        <div class=\"title\">\r\n          {{ login.l('SoftwareName') }}\r\n        </div>\r\n        <div class=\"sub-title\" [innerHTML]=\"login.l('SoftwareDesc')\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div id=\"LoginSimple\" *ngIf=\"loginTemplate == 'Simple'\">\r\n  <div class=\"form-c\">\r\n    <div class=\"title\">{{ login.l('SoftwareName') }}</div>\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n<div id=\"LoginModal\" *ngIf=\"loginTemplate == 'Modal'\">\r\n  <lib-modal [modal]=\"login.modal\">\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </lib-modal>\r\n</div>\r\n<lib-modal [modal]=\"rulesModal\"></lib-modal>\r\n", styles: ["#LoginMain{position:relative;width:100%;float:right;border-radius:var(--border-radius-base);background-color:#fff;height:calc(100vh - 35px);overflow-y:auto}#LoginMain .form-c,#LoginMain .about-c{width:50%;position:relative;z-index:2;justify-content:center;align-items:center;display:flex;height:calc(100vh - 35px);overflow-y:auto;padding:50px 0;float:left}#LoginMain .form-c{box-shadow:19px 0 35px -7px #0000000d}#LoginMain .form-c .form{width:60%;margin:0 auto}#LoginMain .about{width:100%;position:relative;float:right;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0}#LoginMain .about .info{width:100%;position:relative;float:right;z-index:2;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0;padding:50px 0;max-height:calc(100vh - 35px);overflow-y:auto}#LoginMain .triangles{position:absolute;width:100%;height:calc(100vh - 35px);overflow:hidden;z-index:1;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0}#LoginMain .triangles .triangle{position:absolute;color:var(--base);opacity:.1}#LoginMain .triangles .triangle-1{font-size:656px;top:50px;right:-150px}#LoginMain .triangles .triangle-2{font-size:1000px;top:150px;right:-240px}#LoginMain .triangles .triangle-3{font-size:900px;top:-347px;right:-220px}#LoginMain .triangles .triangle-4{font-size:900px;top:450px;right:-250px}#LoginMain .about .logo{height:200px;width:200px;background-position:center center;background-repeat:no-repeat;background-size:contain;margin:0 auto;position:relative}#LoginMain .about .title{width:100%;float:right;text-align:center;font-size:25px;height:40px;line-height:40px;position:relative;margin-top:20px;font-weight:bolder}#LoginMain .about .sub-title{float:right;text-align:center;font-size:12px;line-height:30px;position:relative;padding:20px;width:80%;margin-right:10%;font-weight:var(--font-light)}::ng-deep #LoginMain .form-c .form .title,::ng-deep #LoginModal .form .title{width:100%;float:right;text-align:center;font-size:25px;height:50px;line-height:50px;font-weight:var(--font-bold);margin-bottom:10px}::ng-deep #LoginMain .form-c .form .sub-title,::ng-deep #LoginModal .form .sub-title{width:100%;float:right;color:var(--black-light);text-align:center;font-size:12px;height:30px;line-height:30px;font-weight:var(--font-light);margin-bottom:20px}::ng-deep #LoginMain .form-c .form .sub-title:after,::ng-deep #LoginModal .form .sub-title:after{background-image:none!important}#LoginSimple{float:right;width:100%;min-height:100vh;padding:20px;justify-content:center;align-items:center;display:flex;background-color:#fff}#LoginSimple .form-c{float:right;background-color:#fff;border:var(--border-base);border-radius:var(--border-radius-base);padding:20px;width:400px}#LoginSimple .form-c .title{float:right;width:100%;line-height:60px;color:var(--primary);font-weight:var(--font-bold);font-size:25px;text-align:center}::ng-deep #LoginSimple .form-c .form .title{width:100%;float:right;font-size:18px;height:40px;line-height:40px;font-weight:var(--font-bold);margin-bottom:10px}::ng-deep #LoginSimple .form-c .form .sub-title{width:100%;float:right;color:var(--black-light);font-size:12px;height:30px;line-height:30px;font-weight:var(--font-light);margin-bottom:20px}::ng-deep #LoginSimple .form-c .form .sub-title:after{background-image:none!important}@media(max-width:399.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:100%}#LoginMain .about .info{padding:50px 5px}#LoginMain .about .logo{width:100px;height:100px}}@media(min-width:400px)and (max-width:499.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:80%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:100px;height:100px}}@media(min-width:500px)and (max-width:599.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:70%;float:right;margin-right:15%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:150px;height:150px}}@media(min-width:600px)and (max-width:699.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right;min-height:calc(100vh - 35px)}#LoginMain .form-c .form{width:70%;float:right;margin-right:15%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:150px;height:150px}}@media(min-width:700px)and (max-width:799.98px){#LoginMain .form-c .form{width:90%}}@media(min-width:800px)and (max-width:899.98px){#LoginMain .form-c .form{width:90%}}@media(min-width:900px)and (max-width:999.98px){#LoginMain .form-c .form{width:80%}}@media(min-width:1000px)and (max-width:1099.98px){#LoginMain .form-c .form{width:80%}}@media(min-width:1100px)and (max-width:1199.98px){#LoginMain .form-c .form{width:70%}}@media(min-width:1200px)and (max-width:1299.98px){#LoginMain .form-c .form{width:70%}}@media(max-width:599.98px){#LoginMain,#LoginMain .form-c,#LoginMain .about-c{height:calc(100vh - 60px)}#LoginMain .about .info{max-height:calc(100vh - 60px)}#LoginMain .triangles{height:calc(100vh - 60px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ModalComponent, selector: "lib-modal", inputs: ["modal"] }, { kind: "component", type: FormComponent, selector: "lib-form", inputs: ["form"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-login', standalone: false, template: "<div id=\"LoginMain\" *ngIf=\"loginTemplate == 'Main'\">\r\n  <div class=\"triangles\">\r\n    <i class=\"triangle triangle-1 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-2 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-3 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-4 fas fa-caret-left\"></i>\r\n  </div>\r\n  <div class=\"form-c\">\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"about-c\">\r\n    <div class=\"about\">\r\n      <div class=\"info\">\r\n        <div class=\"logo\"></div>\r\n        <div class=\"title\">\r\n          {{ login.l('SoftwareName') }}\r\n        </div>\r\n        <div class=\"sub-title\" [innerHTML]=\"login.l('SoftwareDesc')\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div id=\"LoginSimple\" *ngIf=\"loginTemplate == 'Simple'\">\r\n  <div class=\"form-c\">\r\n    <div class=\"title\">{{ login.l('SoftwareName') }}</div>\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n<div id=\"LoginModal\" *ngIf=\"loginTemplate == 'Modal'\">\r\n  <lib-modal [modal]=\"login.modal\">\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </lib-modal>\r\n</div>\r\n<lib-modal [modal]=\"rulesModal\"></lib-modal>\r\n", styles: ["#LoginMain{position:relative;width:100%;float:right;border-radius:var(--border-radius-base);background-color:#fff;height:calc(100vh - 35px);overflow-y:auto}#LoginMain .form-c,#LoginMain .about-c{width:50%;position:relative;z-index:2;justify-content:center;align-items:center;display:flex;height:calc(100vh - 35px);overflow-y:auto;padding:50px 0;float:left}#LoginMain .form-c{box-shadow:19px 0 35px -7px #0000000d}#LoginMain .form-c .form{width:60%;margin:0 auto}#LoginMain .about{width:100%;position:relative;float:right;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0}#LoginMain .about .info{width:100%;position:relative;float:right;z-index:2;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0;padding:50px 0;max-height:calc(100vh - 35px);overflow-y:auto}#LoginMain .triangles{position:absolute;width:100%;height:calc(100vh - 35px);overflow:hidden;z-index:1;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0}#LoginMain .triangles .triangle{position:absolute;color:var(--base);opacity:.1}#LoginMain .triangles .triangle-1{font-size:656px;top:50px;right:-150px}#LoginMain .triangles .triangle-2{font-size:1000px;top:150px;right:-240px}#LoginMain .triangles .triangle-3{font-size:900px;top:-347px;right:-220px}#LoginMain .triangles .triangle-4{font-size:900px;top:450px;right:-250px}#LoginMain .about .logo{height:200px;width:200px;background-position:center center;background-repeat:no-repeat;background-size:contain;margin:0 auto;position:relative}#LoginMain .about .title{width:100%;float:right;text-align:center;font-size:25px;height:40px;line-height:40px;position:relative;margin-top:20px;font-weight:bolder}#LoginMain .about .sub-title{float:right;text-align:center;font-size:12px;line-height:30px;position:relative;padding:20px;width:80%;margin-right:10%;font-weight:var(--font-light)}::ng-deep #LoginMain .form-c .form .title,::ng-deep #LoginModal .form .title{width:100%;float:right;text-align:center;font-size:25px;height:50px;line-height:50px;font-weight:var(--font-bold);margin-bottom:10px}::ng-deep #LoginMain .form-c .form .sub-title,::ng-deep #LoginModal .form .sub-title{width:100%;float:right;color:var(--black-light);text-align:center;font-size:12px;height:30px;line-height:30px;font-weight:var(--font-light);margin-bottom:20px}::ng-deep #LoginMain .form-c .form .sub-title:after,::ng-deep #LoginModal .form .sub-title:after{background-image:none!important}#LoginSimple{float:right;width:100%;min-height:100vh;padding:20px;justify-content:center;align-items:center;display:flex;background-color:#fff}#LoginSimple .form-c{float:right;background-color:#fff;border:var(--border-base);border-radius:var(--border-radius-base);padding:20px;width:400px}#LoginSimple .form-c .title{float:right;width:100%;line-height:60px;color:var(--primary);font-weight:var(--font-bold);font-size:25px;text-align:center}::ng-deep #LoginSimple .form-c .form .title{width:100%;float:right;font-size:18px;height:40px;line-height:40px;font-weight:var(--font-bold);margin-bottom:10px}::ng-deep #LoginSimple .form-c .form .sub-title{width:100%;float:right;color:var(--black-light);font-size:12px;height:30px;line-height:30px;font-weight:var(--font-light);margin-bottom:20px}::ng-deep #LoginSimple .form-c .form .sub-title:after{background-image:none!important}@media(max-width:399.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:100%}#LoginMain .about .info{padding:50px 5px}#LoginMain .about .logo{width:100px;height:100px}}@media(min-width:400px)and (max-width:499.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:80%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:100px;height:100px}}@media(min-width:500px)and (max-width:599.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:70%;float:right;margin-right:15%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:150px;height:150px}}@media(min-width:600px)and (max-width:699.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right;min-height:calc(100vh - 35px)}#LoginMain .form-c .form{width:70%;float:right;margin-right:15%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:150px;height:150px}}@media(min-width:700px)and (max-width:799.98px){#LoginMain .form-c .form{width:90%}}@media(min-width:800px)and (max-width:899.98px){#LoginMain .form-c .form{width:90%}}@media(min-width:900px)and (max-width:999.98px){#LoginMain .form-c .form{width:80%}}@media(min-width:1000px)and (max-width:1099.98px){#LoginMain .form-c .form{width:80%}}@media(min-width:1100px)and (max-width:1199.98px){#LoginMain .form-c .form{width:70%}}@media(min-width:1200px)and (max-width:1299.98px){#LoginMain .form-c .form{width:70%}}@media(max-width:599.98px){#LoginMain,#LoginMain .form-c,#LoginMain .about-c{height:calc(100vh - 60px)}#LoginMain .about .info{max-height:calc(100vh - 60px)}#LoginMain .triangles{height:calc(100vh - 60px)}}\n"] }]
+            args: [{ selector: 'lib-login', imports: [
+                        CommonModule,
+                        FormsModule,
+                        ModalComponent,
+                        FormComponent
+                    ], standalone: true, template: "<div id=\"LoginMain\" *ngIf=\"loginTemplate == 'Main'\">\r\n  <div class=\"triangles\">\r\n    <i class=\"triangle triangle-1 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-2 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-3 fas fa-caret-left\"></i>\r\n    <i class=\"triangle triangle-4 fas fa-caret-left\"></i>\r\n  </div>\r\n  <div class=\"form-c\">\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"about-c\">\r\n    <div class=\"about\">\r\n      <div class=\"info\">\r\n        <div class=\"logo\"></div>\r\n        <div class=\"title\">\r\n          {{ login.l('SoftwareName') }}\r\n        </div>\r\n        <div class=\"sub-title\" [innerHTML]=\"login.l('SoftwareDesc')\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div id=\"LoginSimple\" *ngIf=\"loginTemplate == 'Simple'\">\r\n  <div class=\"form-c\">\r\n    <div class=\"title\">{{ login.l('SoftwareName') }}</div>\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n<div id=\"LoginModal\" *ngIf=\"loginTemplate == 'Modal'\">\r\n  <lib-modal [modal]=\"login.modal\">\r\n    <ng-container *ngFor=\"let step of login.steps; let i = index\">\r\n      <div class=\"form\" *ngIf=\"i === login.active\">\r\n        <lib-form [form]=step.form></lib-form>\r\n      </div>\r\n    </ng-container>\r\n  </lib-modal>\r\n</div>\r\n<lib-modal [modal]=\"rulesModal\"></lib-modal>\r\n", styles: ["#LoginMain{position:relative;width:100%;float:right;border-radius:var(--border-radius-base);background-color:#fff;height:calc(100vh - 35px);overflow-y:auto}#LoginMain .form-c,#LoginMain .about-c{width:50%;position:relative;z-index:2;justify-content:center;align-items:center;display:flex;height:calc(100vh - 35px);overflow-y:auto;padding:50px 0;float:left}#LoginMain .form-c{box-shadow:19px 0 35px -7px #0000000d}#LoginMain .form-c .form{width:60%;margin:0 auto}#LoginMain .about{width:100%;position:relative;float:right;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0}#LoginMain .about .info{width:100%;position:relative;float:right;z-index:2;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0;padding:50px 0;max-height:calc(100vh - 35px);overflow-y:auto}#LoginMain .triangles{position:absolute;width:100%;height:calc(100vh - 35px);overflow:hidden;z-index:1;border-radius:0 var(--border-radius-base) var(--border-radius-base) 0}#LoginMain .triangles .triangle{position:absolute;color:var(--base);opacity:.1}#LoginMain .triangles .triangle-1{font-size:656px;top:50px;right:-150px}#LoginMain .triangles .triangle-2{font-size:1000px;top:150px;right:-240px}#LoginMain .triangles .triangle-3{font-size:900px;top:-347px;right:-220px}#LoginMain .triangles .triangle-4{font-size:900px;top:450px;right:-250px}#LoginMain .about .logo{height:200px;width:200px;background-position:center center;background-repeat:no-repeat;background-size:contain;margin:0 auto;position:relative}#LoginMain .about .title{width:100%;float:right;text-align:center;font-size:25px;height:40px;line-height:40px;position:relative;margin-top:20px;font-weight:bolder}#LoginMain .about .sub-title{float:right;text-align:center;font-size:12px;line-height:30px;position:relative;padding:20px;width:80%;margin-right:10%;font-weight:var(--font-light)}::ng-deep #LoginMain .form-c .form .title,::ng-deep #LoginModal .form .title{width:100%;float:right;text-align:center;font-size:25px;height:50px;line-height:50px;font-weight:var(--font-bold);margin-bottom:10px}::ng-deep #LoginMain .form-c .form .sub-title,::ng-deep #LoginModal .form .sub-title{width:100%;float:right;color:var(--black-light);text-align:center;font-size:12px;height:30px;line-height:30px;font-weight:var(--font-light);margin-bottom:20px}::ng-deep #LoginMain .form-c .form .sub-title:after,::ng-deep #LoginModal .form .sub-title:after{background-image:none!important}#LoginSimple{float:right;width:100%;min-height:100vh;padding:20px;justify-content:center;align-items:center;display:flex;background-color:#fff}#LoginSimple .form-c{float:right;background-color:#fff;border:var(--border-base);border-radius:var(--border-radius-base);padding:20px;width:400px}#LoginSimple .form-c .title{float:right;width:100%;line-height:60px;color:var(--primary);font-weight:var(--font-bold);font-size:25px;text-align:center}::ng-deep #LoginSimple .form-c .form .title{width:100%;float:right;font-size:18px;height:40px;line-height:40px;font-weight:var(--font-bold);margin-bottom:10px}::ng-deep #LoginSimple .form-c .form .sub-title{width:100%;float:right;color:var(--black-light);font-size:12px;height:30px;line-height:30px;font-weight:var(--font-light);margin-bottom:20px}::ng-deep #LoginSimple .form-c .form .sub-title:after{background-image:none!important}@media(max-width:399.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:100%}#LoginMain .about .info{padding:50px 5px}#LoginMain .about .logo{width:100px;height:100px}}@media(min-width:400px)and (max-width:499.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:80%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:100px;height:100px}}@media(min-width:500px)and (max-width:599.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right}#LoginMain .form-c .form{width:70%;float:right;margin-right:15%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:150px;height:150px}}@media(min-width:600px)and (max-width:699.98px){#LoginMain .form-c{width:100%;float:right;box-shadow:unset}#LoginMain .about-c{width:100%;float:right;min-height:calc(100vh - 35px)}#LoginMain .form-c .form{width:70%;float:right;margin-right:15%}#LoginMain .about .info{padding:50px 10px}#LoginMain .about .logo{width:150px;height:150px}}@media(min-width:700px)and (max-width:799.98px){#LoginMain .form-c .form{width:90%}}@media(min-width:800px)and (max-width:899.98px){#LoginMain .form-c .form{width:90%}}@media(min-width:900px)and (max-width:999.98px){#LoginMain .form-c .form{width:80%}}@media(min-width:1000px)and (max-width:1099.98px){#LoginMain .form-c .form{width:80%}}@media(min-width:1100px)and (max-width:1199.98px){#LoginMain .form-c .form{width:70%}}@media(min-width:1200px)and (max-width:1299.98px){#LoginMain .form-c .form{width:70%}}@media(max-width:599.98px){#LoginMain,#LoginMain .form-c,#LoginMain .about-c{height:calc(100vh - 60px)}#LoginMain .about .info{max-height:calc(100vh - 60px)}#LoginMain .triangles{height:calc(100vh - 60px)}}\n"] }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }], propDecorators: { login: [{
                 type: Input
             }], loginTemplate: [{
@@ -8176,11 +8216,14 @@ class LoadingComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoadingComponent, deps: [{ token: PsToolkitUiConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoadingComponent, isStandalone: false, selector: "lib-loading", ngImport: i0, template: "<div id=\"Loading\">\r\n  <div class=\"content\">\r\n    <div class=\"loading-cell\">\r\n      <div class=\"icon\"><i class=\"fas fa-spin fa-spinner\"></i></div>\r\n      <div class=\"title\" [innerHTML]=\"l('Loading', 'Process')\"></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Loading{position:fixed;width:100%;height:100vh;background-color:var(--black);z-index:105;overflow-y:auto;top:0;right:0;display:table}#Loading .content{width:100%;height:100%;display:table-cell;vertical-align:middle}#Loading .content .loading-cell{width:100%;float:right}#Loading .content .loading-cell .icon{width:100%;float:right;height:70px;line-height:70px;text-align:center;font-size:40px;color:#fff}#Loading .content .loading-cell .title{width:100%;float:right;height:50px;line-height:50px;text-align:center;font-size:20px;color:#fff}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LoadingComponent, isStandalone: true, selector: "lib-loading", ngImport: i0, template: "<div id=\"Loading\">\r\n  <div class=\"content\">\r\n    <div class=\"loading-cell\">\r\n      <div class=\"icon\"><i class=\"fas fa-spin fa-spinner\"></i></div>\r\n      <div class=\"title\" [innerHTML]=\"l('Loading', 'Process')\"></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Loading{position:fixed;width:100%;height:100vh;background-color:var(--black);z-index:105;overflow-y:auto;top:0;right:0;display:table}#Loading .content{width:100%;height:100%;display:table-cell;vertical-align:middle}#Loading .content .loading-cell{width:100%;float:right}#Loading .content .loading-cell .icon{width:100%;float:right;height:70px;line-height:70px;text-align:center;font-size:40px;color:#fff}#Loading .content .loading-cell .title{width:100%;float:right;height:50px;line-height:50px;text-align:center;font-size:20px;color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-loading', standalone: false, template: "<div id=\"Loading\">\r\n  <div class=\"content\">\r\n    <div class=\"loading-cell\">\r\n      <div class=\"icon\"><i class=\"fas fa-spin fa-spinner\"></i></div>\r\n      <div class=\"title\" [innerHTML]=\"l('Loading', 'Process')\"></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Loading{position:fixed;width:100%;height:100vh;background-color:var(--black);z-index:105;overflow-y:auto;top:0;right:0;display:table}#Loading .content{width:100%;height:100%;display:table-cell;vertical-align:middle}#Loading .content .loading-cell{width:100%;float:right}#Loading .content .loading-cell .icon{width:100%;float:right;height:70px;line-height:70px;text-align:center;font-size:40px;color:#fff}#Loading .content .loading-cell .title{width:100%;float:right;height:50px;line-height:50px;text-align:center;font-size:20px;color:#fff}\n"] }]
+            args: [{ selector: 'lib-loading', imports: [
+                        CommonModule,
+                        FormsModule,
+                    ], standalone: true, template: "<div id=\"Loading\">\r\n  <div class=\"content\">\r\n    <div class=\"loading-cell\">\r\n      <div class=\"icon\"><i class=\"fas fa-spin fa-spinner\"></i></div>\r\n      <div class=\"title\" [innerHTML]=\"l('Loading', 'Process')\"></div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#Loading{position:fixed;width:100%;height:100vh;background-color:var(--black);z-index:105;overflow-y:auto;top:0;right:0;display:table}#Loading .content{width:100%;height:100%;display:table-cell;vertical-align:middle}#Loading .content .loading-cell{width:100%;float:right}#Loading .content .loading-cell .icon{width:100%;float:right;height:70px;line-height:70px;text-align:center;font-size:40px;color:#fff}#Loading .content .loading-cell .title{width:100%;float:right;height:50px;line-height:50px;text-align:center;font-size:20px;color:#fff}\n"] }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }] });
 
 class NotificationComponent {
@@ -8203,11 +8246,18 @@ class LayoutComponent {
     constructor() {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LayoutComponent, isStandalone: false, selector: "lib-layout", inputs: { currentData: "currentData", header: "header" }, ngImport: i0, template: "<div id=\"Layout\">\r\n  <div class=\"layout-con\">\r\n    <div class=\"panel\" *ngIf=\"currentData.user != null\">\r\n      <lib-sidebar [currentData]=\"currentData\">\r\n        <ng-content select=\"[slot=sidebar]\"></ng-content>\r\n      </lib-sidebar>\r\n      <div class=\"content\">\r\n        <lib-header [header]=\"header\">\r\n          <ng-content select=\"[slot=header]\"></ng-content>\r\n        </lib-header>\r\n\r\n        <div class=\"content-scroll-con\">\r\n          <div class=\"content-scroll\">\r\n            <router-outlet></router-outlet>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <lib-footer></lib-footer>\r\n  </div>\r\n</div>\r\n", styles: ["#Layout,#Layout .layout-con{float:right;width:100%}#Layout .panel{float:right;width:100%;position:relative;display:flex;flex-direction:row}#Layout .panel .content{float:left;width:100%;overflow:hidden;direction:rtl;position:relative;-moz-transition:width .3s;-webkit-transition:width .3s;transition:width .3s;background-color:var(--base-white)}#Layout .panel .content .content-scroll-con{width:100%;height:calc(100vh - 85px);min-height:calc(100vh - 85px);overflow-y:auto}#Layout .panel .content .content-scroll-con .content-scroll{float:right;width:100%;padding:20px}@media(max-width:599.98px){#Layout .panel .content .content-scroll-con{min-height:calc(100vh - 50px);height:calc(100vh - 50px)}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar", inputs: ["currentData"] }, { kind: "component", type: FooterComponent, selector: "lib-footer" }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["header"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: LayoutComponent, isStandalone: true, selector: "lib-layout", inputs: { currentData: "currentData", header: "header" }, ngImport: i0, template: "<div id=\"Layout\">\r\n  <div class=\"layout-con\">\r\n    <div class=\"panel\" *ngIf=\"currentData.user != null\">\r\n      <lib-sidebar [currentData]=\"currentData\">\r\n        <ng-content select=\"[slot=sidebar]\"></ng-content>\r\n      </lib-sidebar>\r\n      <div class=\"content\">\r\n        <lib-header [header]=\"header\">\r\n          <ng-content select=\"[slot=header]\"></ng-content>\r\n        </lib-header>\r\n\r\n        <div class=\"content-scroll-con\">\r\n          <div class=\"content-scroll\">\r\n            <router-outlet></router-outlet>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <lib-footer></lib-footer>\r\n  </div>\r\n</div>\r\n", styles: ["#Layout,#Layout .layout-con{float:right;width:100%}#Layout .panel{float:right;width:100%;position:relative;display:flex;flex-direction:row}#Layout .panel .content{float:left;width:100%;overflow:hidden;direction:rtl;position:relative;-moz-transition:width .3s;-webkit-transition:width .3s;transition:width .3s;background-color:var(--base-white)}#Layout .panel .content .content-scroll-con{width:100%;height:calc(100vh - 85px);min-height:calc(100vh - 85px);overflow-y:auto}#Layout .panel .content .content-scroll-con .content-scroll{float:right;width:100%;padding:20px}@media(max-width:599.98px){#Layout .panel .content .content-scroll-con{min-height:calc(100vh - 50px);height:calc(100vh - 50px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar", inputs: ["currentData"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["header"] }, { kind: "component", type: FooterComponent, selector: "lib-footer" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-layout', standalone: false, template: "<div id=\"Layout\">\r\n  <div class=\"layout-con\">\r\n    <div class=\"panel\" *ngIf=\"currentData.user != null\">\r\n      <lib-sidebar [currentData]=\"currentData\">\r\n        <ng-content select=\"[slot=sidebar]\"></ng-content>\r\n      </lib-sidebar>\r\n      <div class=\"content\">\r\n        <lib-header [header]=\"header\">\r\n          <ng-content select=\"[slot=header]\"></ng-content>\r\n        </lib-header>\r\n\r\n        <div class=\"content-scroll-con\">\r\n          <div class=\"content-scroll\">\r\n            <router-outlet></router-outlet>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <lib-footer></lib-footer>\r\n  </div>\r\n</div>\r\n", styles: ["#Layout,#Layout .layout-con{float:right;width:100%}#Layout .panel{float:right;width:100%;position:relative;display:flex;flex-direction:row}#Layout .panel .content{float:left;width:100%;overflow:hidden;direction:rtl;position:relative;-moz-transition:width .3s;-webkit-transition:width .3s;transition:width .3s;background-color:var(--base-white)}#Layout .panel .content .content-scroll-con{width:100%;height:calc(100vh - 85px);min-height:calc(100vh - 85px);overflow-y:auto}#Layout .panel .content .content-scroll-con .content-scroll{float:right;width:100%;padding:20px}@media(max-width:599.98px){#Layout .panel .content .content-scroll-con{min-height:calc(100vh - 50px);height:calc(100vh - 50px)}}\n"] }]
+            args: [{ selector: 'lib-layout', imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        SidebarComponent,
+                        HeaderComponent,
+                        FooterComponent
+                    ], standalone: true, template: "<div id=\"Layout\">\r\n  <div class=\"layout-con\">\r\n    <div class=\"panel\" *ngIf=\"currentData.user != null\">\r\n      <lib-sidebar [currentData]=\"currentData\">\r\n        <ng-content select=\"[slot=sidebar]\"></ng-content>\r\n      </lib-sidebar>\r\n      <div class=\"content\">\r\n        <lib-header [header]=\"header\">\r\n          <ng-content select=\"[slot=header]\"></ng-content>\r\n        </lib-header>\r\n\r\n        <div class=\"content-scroll-con\">\r\n          <div class=\"content-scroll\">\r\n            <router-outlet></router-outlet>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <lib-footer></lib-footer>\r\n  </div>\r\n</div>\r\n", styles: ["#Layout,#Layout .layout-con{float:right;width:100%}#Layout .panel{float:right;width:100%;position:relative;display:flex;flex-direction:row}#Layout .panel .content{float:left;width:100%;overflow:hidden;direction:rtl;position:relative;-moz-transition:width .3s;-webkit-transition:width .3s;transition:width .3s;background-color:var(--base-white)}#Layout .panel .content .content-scroll-con{width:100%;height:calc(100vh - 85px);min-height:calc(100vh - 85px);overflow-y:auto}#Layout .panel .content .content-scroll-con .content-scroll{float:right;width:100%;padding:20px}@media(max-width:599.98px){#Layout .panel .content .content-scroll-con{min-height:calc(100vh - 50px);height:calc(100vh - 50px)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { currentData: [{
                 type: Input
             }], header: [{
@@ -8305,11 +8355,14 @@ class CalendarComponent {
         this.setDate();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CalendarComponent, deps: [{ token: PsToolkitUiConfigService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CalendarComponent, isStandalone: false, selector: "lib-calendar", ngImport: i0, template: "<div id=\"Calendar\">\r\n  <div class=\"header\">\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? -1 : -20)\" class=\"fas fa-angle-right previous-month\"></i>\r\n    <div class=\"title\">\r\n      <div (click)=\"state === 'day' && changeState('month')\" class=\"month header-item\">\r\n        {{getActiveMonth()}}\r\n      </div>\r\n      <div (click)=\"(state === 'day' || state === 'month') && changeState('year')\" class=\"year header-item\">\r\n        {{active.format('jYYYY')}}\r\n      </div>\r\n    </div>\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? 1 : 20)\" class=\"fas fa-angle-left next-month\"></i>\r\n  </div>\r\n  <div [style]=\"state === 'day' ? {} : {display: 'none'}\" class=\"days-con\">\r\n    <div class=\"day-names underline\">\r\n      <div class=\"item-con\"><div class=\"item\">\u0634</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u06CC</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u062F</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u0633</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u0686</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u067E</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u062C</div></div>\r\n    </div>\r\n    <div class=\"days\">\r\n      <div [className]=\"'item-con not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of previousDays\"><div class=\"item\">{{d.day}}</div></div>\r\n      <div [className]=\"'item-con' + (d.today ? ' today' : '') + (d.selected ? ' selected' : '')\" *ngFor=\"let d of days\"><div class=\"item\">{{d.day}}</div></div>\r\n      <div [className]=\"'item-con not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of nextDays\"><div class=\"item\">{{d.day}}</div></div>\r\n    </div>\r\n  </div>\r\n  <div [style]=\"state === 'month' ? {} : {display: 'none'}\" class=\"months-con\">\r\n    <div [className]=\"(i + 1 == parseInt(active.format('jM')) ? 'selected ' : '') + 'month'\" (click)=\"changeMonth(i + 1)\" *ngFor=\"let m of months; let i = index\">{{m}}</div>\r\n  </div>\r\n  <div [style]=\"state === 'year' ? {} : {display: 'none'}\" class=\"years-con\">\r\n    <div [className]=\"(y == parseInt(active.format('jYYYY')) ? 'selected ' : '') + 'year'\" (click)=\"changeYear(y)\" *ngFor=\"let y of getYears()\">{{y}}</div>\r\n  </div>\r\n</div>\r\n", styles: ["#Calendar{float:right;width:100%;background-color:#fff;box-shadow:0 1px 3px #0006;border-radius:var(--border-radius-base);z-index:4;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:relative}#Calendar>.title{float:right;width:100%;text-align:center;line-height:30px;font-weight:var(--font-bold)}#Calendar .days-con{float:right;width:100%}#Calendar .header{float:right;width:100%;background:var(--black-white)}#Calendar .header .previous-month,#Calendar .header .next-month{float:right;width:30px;height:30px;line-height:30px;cursor:pointer;font-size:15px;text-align:center}#Calendar .header .previous-month:hover,#Calendar .header .next-month:hover{background:var(--black-white)}#Calendar .header .title{float:right;width:calc(100% - 60px);height:30px;font-size:12px;text-align:center;font-weight:var(--font-bold)}#Calendar .header .header-item{float:right;height:20px;line-height:20px;margin-top:5px;margin-right:5px;text-align:center;background-color:#fff;box-shadow:var(--box-shadow);border-radius:var(--border-radius-base);cursor:pointer}#Calendar .header .header-item:hover{background-color:var(--base-white)}#Calendar .header .header-item.year{width:calc(40% - 10px)}#Calendar .header .header-item.month{width:calc(60% - 10px)}#Calendar .days-con .day-names{float:right;width:100%;font-size:12px;text-align:center;font-weight:var(--font-bold);position:relative}#Calendar .days-con .day-names .item-con{float:right;width:calc(100% / 7);padding-top:calc(100% / 7);position:relative}#Calendar .days-con .day-names .item-con .item{position:absolute;top:0;right:0;width:100%;height:100%;justify-content:center;align-items:center;display:flex;font-size:11px}#Calendar .days-con .days{float:right;width:100%;font-size:12px;text-align:center;overflow:hidden;border-radius:var(--border-radius-base)}#Calendar .days-con .days .item-con{float:right;width:calc(100% / 7);padding-top:calc(100% / 7);position:relative;cursor:pointer}#Calendar .days-con .days .item-con.not-in-month{cursor:default;opacity:.5}#Calendar .days-con .days .item-con:hover{background-color:var(--black-white)}#Calendar .days-con .days .item-con.not-in-month:hover{background-color:unset}#Calendar .days-con .days .item-con.today{background-color:var(--primary);color:#fff}#Calendar .days-con .days .item-con.today.not-in-month:hover{background-color:var(--black-white)}#Calendar .days-con .days .item-con .item{width:100%;height:100%;top:0;right:0;position:absolute;justify-content:center;align-items:center;display:flex;font-size:11px}#Calendar .months-con{float:right;width:100%;height:325px}#Calendar .months-con .month{float:right;width:calc(100% / 3);height:81.25px;line-height:81.25px;font-size:13px;text-align:center;cursor:pointer}#Calendar .months-con .month:hover,#Calendar .months-con .month.selected{background-color:var(--black-white)}#Calendar .years-con{float:right;width:100%}#Calendar .years-con .year{float:right;width:25%;height:65px;line-height:65px;font-size:13px;text-align:center;cursor:pointer}#Calendar .years-con .year:hover,#Calendar .years-con .year.selected{background-color:var(--black-white)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CalendarComponent, isStandalone: true, selector: "lib-calendar", ngImport: i0, template: "<div id=\"Calendar\">\r\n  <div class=\"header\">\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? -1 : -20)\" class=\"fas fa-angle-right previous-month\"></i>\r\n    <div class=\"title\">\r\n      <div (click)=\"state === 'day' && changeState('month')\" class=\"month header-item\">\r\n        {{getActiveMonth()}}\r\n      </div>\r\n      <div (click)=\"(state === 'day' || state === 'month') && changeState('year')\" class=\"year header-item\">\r\n        {{active.format('jYYYY')}}\r\n      </div>\r\n    </div>\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? 1 : 20)\" class=\"fas fa-angle-left next-month\"></i>\r\n  </div>\r\n  <div [style]=\"state === 'day' ? {} : {display: 'none'}\" class=\"days-con\">\r\n    <div class=\"day-names underline\">\r\n      <div class=\"item-con\"><div class=\"item\">\u0634</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u06CC</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u062F</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u0633</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u0686</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u067E</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u062C</div></div>\r\n    </div>\r\n    <div class=\"days\">\r\n      <div [className]=\"'item-con not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of previousDays\"><div class=\"item\">{{d.day}}</div></div>\r\n      <div [className]=\"'item-con' + (d.today ? ' today' : '') + (d.selected ? ' selected' : '')\" *ngFor=\"let d of days\"><div class=\"item\">{{d.day}}</div></div>\r\n      <div [className]=\"'item-con not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of nextDays\"><div class=\"item\">{{d.day}}</div></div>\r\n    </div>\r\n  </div>\r\n  <div [style]=\"state === 'month' ? {} : {display: 'none'}\" class=\"months-con\">\r\n    <div [className]=\"(i + 1 == parseInt(active.format('jM')) ? 'selected ' : '') + 'month'\" (click)=\"changeMonth(i + 1)\" *ngFor=\"let m of months; let i = index\">{{m}}</div>\r\n  </div>\r\n  <div [style]=\"state === 'year' ? {} : {display: 'none'}\" class=\"years-con\">\r\n    <div [className]=\"(y == parseInt(active.format('jYYYY')) ? 'selected ' : '') + 'year'\" (click)=\"changeYear(y)\" *ngFor=\"let y of getYears()\">{{y}}</div>\r\n  </div>\r\n</div>\r\n", styles: ["#Calendar{float:right;width:100%;background-color:#fff;box-shadow:0 1px 3px #0006;border-radius:var(--border-radius-base);z-index:4;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:relative}#Calendar>.title{float:right;width:100%;text-align:center;line-height:30px;font-weight:var(--font-bold)}#Calendar .days-con{float:right;width:100%}#Calendar .header{float:right;width:100%;background:var(--black-white)}#Calendar .header .previous-month,#Calendar .header .next-month{float:right;width:30px;height:30px;line-height:30px;cursor:pointer;font-size:15px;text-align:center}#Calendar .header .previous-month:hover,#Calendar .header .next-month:hover{background:var(--black-white)}#Calendar .header .title{float:right;width:calc(100% - 60px);height:30px;font-size:12px;text-align:center;font-weight:var(--font-bold)}#Calendar .header .header-item{float:right;height:20px;line-height:20px;margin-top:5px;margin-right:5px;text-align:center;background-color:#fff;box-shadow:var(--box-shadow);border-radius:var(--border-radius-base);cursor:pointer}#Calendar .header .header-item:hover{background-color:var(--base-white)}#Calendar .header .header-item.year{width:calc(40% - 10px)}#Calendar .header .header-item.month{width:calc(60% - 10px)}#Calendar .days-con .day-names{float:right;width:100%;font-size:12px;text-align:center;font-weight:var(--font-bold);position:relative}#Calendar .days-con .day-names .item-con{float:right;width:calc(100% / 7);padding-top:calc(100% / 7);position:relative}#Calendar .days-con .day-names .item-con .item{position:absolute;top:0;right:0;width:100%;height:100%;justify-content:center;align-items:center;display:flex;font-size:11px}#Calendar .days-con .days{float:right;width:100%;font-size:12px;text-align:center;overflow:hidden;border-radius:var(--border-radius-base)}#Calendar .days-con .days .item-con{float:right;width:calc(100% / 7);padding-top:calc(100% / 7);position:relative;cursor:pointer}#Calendar .days-con .days .item-con.not-in-month{cursor:default;opacity:.5}#Calendar .days-con .days .item-con:hover{background-color:var(--black-white)}#Calendar .days-con .days .item-con.not-in-month:hover{background-color:unset}#Calendar .days-con .days .item-con.today{background-color:var(--primary);color:#fff}#Calendar .days-con .days .item-con.today.not-in-month:hover{background-color:var(--black-white)}#Calendar .days-con .days .item-con .item{width:100%;height:100%;top:0;right:0;position:absolute;justify-content:center;align-items:center;display:flex;font-size:11px}#Calendar .months-con{float:right;width:100%;height:325px}#Calendar .months-con .month{float:right;width:calc(100% / 3);height:81.25px;line-height:81.25px;font-size:13px;text-align:center;cursor:pointer}#Calendar .months-con .month:hover,#Calendar .months-con .month.selected{background-color:var(--black-white)}#Calendar .years-con{float:right;width:100%}#Calendar .years-con .year{float:right;width:25%;height:65px;line-height:65px;font-size:13px;text-align:center;cursor:pointer}#Calendar .years-con .year:hover,#Calendar .years-con .year.selected{background-color:var(--black-white)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-calendar', standalone: false, template: "<div id=\"Calendar\">\r\n  <div class=\"header\">\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? -1 : -20)\" class=\"fas fa-angle-right previous-month\"></i>\r\n    <div class=\"title\">\r\n      <div (click)=\"state === 'day' && changeState('month')\" class=\"month header-item\">\r\n        {{getActiveMonth()}}\r\n      </div>\r\n      <div (click)=\"(state === 'day' || state === 'month') && changeState('year')\" class=\"year header-item\">\r\n        {{active.format('jYYYY')}}\r\n      </div>\r\n    </div>\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? 1 : 20)\" class=\"fas fa-angle-left next-month\"></i>\r\n  </div>\r\n  <div [style]=\"state === 'day' ? {} : {display: 'none'}\" class=\"days-con\">\r\n    <div class=\"day-names underline\">\r\n      <div class=\"item-con\"><div class=\"item\">\u0634</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u06CC</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u062F</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u0633</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u0686</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u067E</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u062C</div></div>\r\n    </div>\r\n    <div class=\"days\">\r\n      <div [className]=\"'item-con not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of previousDays\"><div class=\"item\">{{d.day}}</div></div>\r\n      <div [className]=\"'item-con' + (d.today ? ' today' : '') + (d.selected ? ' selected' : '')\" *ngFor=\"let d of days\"><div class=\"item\">{{d.day}}</div></div>\r\n      <div [className]=\"'item-con not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of nextDays\"><div class=\"item\">{{d.day}}</div></div>\r\n    </div>\r\n  </div>\r\n  <div [style]=\"state === 'month' ? {} : {display: 'none'}\" class=\"months-con\">\r\n    <div [className]=\"(i + 1 == parseInt(active.format('jM')) ? 'selected ' : '') + 'month'\" (click)=\"changeMonth(i + 1)\" *ngFor=\"let m of months; let i = index\">{{m}}</div>\r\n  </div>\r\n  <div [style]=\"state === 'year' ? {} : {display: 'none'}\" class=\"years-con\">\r\n    <div [className]=\"(y == parseInt(active.format('jYYYY')) ? 'selected ' : '') + 'year'\" (click)=\"changeYear(y)\" *ngFor=\"let y of getYears()\">{{y}}</div>\r\n  </div>\r\n</div>\r\n", styles: ["#Calendar{float:right;width:100%;background-color:#fff;box-shadow:0 1px 3px #0006;border-radius:var(--border-radius-base);z-index:4;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:relative}#Calendar>.title{float:right;width:100%;text-align:center;line-height:30px;font-weight:var(--font-bold)}#Calendar .days-con{float:right;width:100%}#Calendar .header{float:right;width:100%;background:var(--black-white)}#Calendar .header .previous-month,#Calendar .header .next-month{float:right;width:30px;height:30px;line-height:30px;cursor:pointer;font-size:15px;text-align:center}#Calendar .header .previous-month:hover,#Calendar .header .next-month:hover{background:var(--black-white)}#Calendar .header .title{float:right;width:calc(100% - 60px);height:30px;font-size:12px;text-align:center;font-weight:var(--font-bold)}#Calendar .header .header-item{float:right;height:20px;line-height:20px;margin-top:5px;margin-right:5px;text-align:center;background-color:#fff;box-shadow:var(--box-shadow);border-radius:var(--border-radius-base);cursor:pointer}#Calendar .header .header-item:hover{background-color:var(--base-white)}#Calendar .header .header-item.year{width:calc(40% - 10px)}#Calendar .header .header-item.month{width:calc(60% - 10px)}#Calendar .days-con .day-names{float:right;width:100%;font-size:12px;text-align:center;font-weight:var(--font-bold);position:relative}#Calendar .days-con .day-names .item-con{float:right;width:calc(100% / 7);padding-top:calc(100% / 7);position:relative}#Calendar .days-con .day-names .item-con .item{position:absolute;top:0;right:0;width:100%;height:100%;justify-content:center;align-items:center;display:flex;font-size:11px}#Calendar .days-con .days{float:right;width:100%;font-size:12px;text-align:center;overflow:hidden;border-radius:var(--border-radius-base)}#Calendar .days-con .days .item-con{float:right;width:calc(100% / 7);padding-top:calc(100% / 7);position:relative;cursor:pointer}#Calendar .days-con .days .item-con.not-in-month{cursor:default;opacity:.5}#Calendar .days-con .days .item-con:hover{background-color:var(--black-white)}#Calendar .days-con .days .item-con.not-in-month:hover{background-color:unset}#Calendar .days-con .days .item-con.today{background-color:var(--primary);color:#fff}#Calendar .days-con .days .item-con.today.not-in-month:hover{background-color:var(--black-white)}#Calendar .days-con .days .item-con .item{width:100%;height:100%;top:0;right:0;position:absolute;justify-content:center;align-items:center;display:flex;font-size:11px}#Calendar .months-con{float:right;width:100%;height:325px}#Calendar .months-con .month{float:right;width:calc(100% / 3);height:81.25px;line-height:81.25px;font-size:13px;text-align:center;cursor:pointer}#Calendar .months-con .month:hover,#Calendar .months-con .month.selected{background-color:var(--black-white)}#Calendar .years-con{float:right;width:100%}#Calendar .years-con .year{float:right;width:25%;height:65px;line-height:65px;font-size:13px;text-align:center;cursor:pointer}#Calendar .years-con .year:hover,#Calendar .years-con .year.selected{background-color:var(--black-white)}\n"] }]
+            args: [{ selector: 'lib-calendar', imports: [
+                        CommonModule,
+                        FormsModule,
+                    ], standalone: true, template: "<div id=\"Calendar\">\r\n  <div class=\"header\">\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? -1 : -20)\" class=\"fas fa-angle-right previous-month\"></i>\r\n    <div class=\"title\">\r\n      <div (click)=\"state === 'day' && changeState('month')\" class=\"month header-item\">\r\n        {{getActiveMonth()}}\r\n      </div>\r\n      <div (click)=\"(state === 'day' || state === 'month') && changeState('year')\" class=\"year header-item\">\r\n        {{active.format('jYYYY')}}\r\n      </div>\r\n    </div>\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? 1 : 20)\" class=\"fas fa-angle-left next-month\"></i>\r\n  </div>\r\n  <div [style]=\"state === 'day' ? {} : {display: 'none'}\" class=\"days-con\">\r\n    <div class=\"day-names underline\">\r\n      <div class=\"item-con\"><div class=\"item\">\u0634</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u06CC</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u062F</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u0633</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u0686</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u067E</div></div>\r\n      <div class=\"item-con\"><div class=\"item\">\u062C</div></div>\r\n    </div>\r\n    <div class=\"days\">\r\n      <div [className]=\"'item-con not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of previousDays\"><div class=\"item\">{{d.day}}</div></div>\r\n      <div [className]=\"'item-con' + (d.today ? ' today' : '') + (d.selected ? ' selected' : '')\" *ngFor=\"let d of days\"><div class=\"item\">{{d.day}}</div></div>\r\n      <div [className]=\"'item-con not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of nextDays\"><div class=\"item\">{{d.day}}</div></div>\r\n    </div>\r\n  </div>\r\n  <div [style]=\"state === 'month' ? {} : {display: 'none'}\" class=\"months-con\">\r\n    <div [className]=\"(i + 1 == parseInt(active.format('jM')) ? 'selected ' : '') + 'month'\" (click)=\"changeMonth(i + 1)\" *ngFor=\"let m of months; let i = index\">{{m}}</div>\r\n  </div>\r\n  <div [style]=\"state === 'year' ? {} : {display: 'none'}\" class=\"years-con\">\r\n    <div [className]=\"(y == parseInt(active.format('jYYYY')) ? 'selected ' : '') + 'year'\" (click)=\"changeYear(y)\" *ngFor=\"let y of getYears()\">{{y}}</div>\r\n  </div>\r\n</div>\r\n", styles: ["#Calendar{float:right;width:100%;background-color:#fff;box-shadow:0 1px 3px #0006;border-radius:var(--border-radius-base);z-index:4;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:relative}#Calendar>.title{float:right;width:100%;text-align:center;line-height:30px;font-weight:var(--font-bold)}#Calendar .days-con{float:right;width:100%}#Calendar .header{float:right;width:100%;background:var(--black-white)}#Calendar .header .previous-month,#Calendar .header .next-month{float:right;width:30px;height:30px;line-height:30px;cursor:pointer;font-size:15px;text-align:center}#Calendar .header .previous-month:hover,#Calendar .header .next-month:hover{background:var(--black-white)}#Calendar .header .title{float:right;width:calc(100% - 60px);height:30px;font-size:12px;text-align:center;font-weight:var(--font-bold)}#Calendar .header .header-item{float:right;height:20px;line-height:20px;margin-top:5px;margin-right:5px;text-align:center;background-color:#fff;box-shadow:var(--box-shadow);border-radius:var(--border-radius-base);cursor:pointer}#Calendar .header .header-item:hover{background-color:var(--base-white)}#Calendar .header .header-item.year{width:calc(40% - 10px)}#Calendar .header .header-item.month{width:calc(60% - 10px)}#Calendar .days-con .day-names{float:right;width:100%;font-size:12px;text-align:center;font-weight:var(--font-bold);position:relative}#Calendar .days-con .day-names .item-con{float:right;width:calc(100% / 7);padding-top:calc(100% / 7);position:relative}#Calendar .days-con .day-names .item-con .item{position:absolute;top:0;right:0;width:100%;height:100%;justify-content:center;align-items:center;display:flex;font-size:11px}#Calendar .days-con .days{float:right;width:100%;font-size:12px;text-align:center;overflow:hidden;border-radius:var(--border-radius-base)}#Calendar .days-con .days .item-con{float:right;width:calc(100% / 7);padding-top:calc(100% / 7);position:relative;cursor:pointer}#Calendar .days-con .days .item-con.not-in-month{cursor:default;opacity:.5}#Calendar .days-con .days .item-con:hover{background-color:var(--black-white)}#Calendar .days-con .days .item-con.not-in-month:hover{background-color:unset}#Calendar .days-con .days .item-con.today{background-color:var(--primary);color:#fff}#Calendar .days-con .days .item-con.today.not-in-month:hover{background-color:var(--black-white)}#Calendar .days-con .days .item-con .item{width:100%;height:100%;top:0;right:0;position:absolute;justify-content:center;align-items:center;display:flex;font-size:11px}#Calendar .months-con{float:right;width:100%;height:325px}#Calendar .months-con .month{float:right;width:calc(100% / 3);height:81.25px;line-height:81.25px;font-size:13px;text-align:center;cursor:pointer}#Calendar .months-con .month:hover,#Calendar .months-con .month.selected{background-color:var(--black-white)}#Calendar .years-con{float:right;width:100%}#Calendar .years-con .year{float:right;width:25%;height:65px;line-height:65px;font-size:13px;text-align:center;cursor:pointer}#Calendar .years-con .year:hover,#Calendar .years-con .year.selected{background-color:var(--black-white)}\n"] }]
         }], ctorParameters: () => [{ type: PsToolkitUiConfigService }] });
 
 class ClockComponent {
@@ -8333,11 +8386,14 @@ class ClockComponent {
         document.getElementById('second').style.transform = 'rotate(' + (this.active.get('second') * 6) + 'deg)';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ClockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ClockComponent, isStandalone: false, selector: "lib-clock", ngImport: i0, template: "<div id=\"ClockCon\">\r\n  <div id=\"clock\">\r\n    <b></b>\r\n    <span></span>\r\n    <span></span>\r\n    <i id=\"hour\"></i>\r\n    <i id=\"minute\"></i>\r\n    <i id=\"second\"></i>\r\n  </div>\r\n</div>\r\n", styles: ["#ClockCon{width:10em;height:10em;float:right;position:relative}#ClockCon #clock{position:relative;width:10em;height:10em;line-height:1.5em;border:.0625em solid var(--black-white);border-radius:50%;box-shadow:inset .125em .25em .5em var(--black-white),-.25em -.5em .5em var(--black-white),0 0 .0625em .5em var(--black-white),0 0 .0625em .5625em var(--black-white),.125em .25em .5em .5em var(--black-white);transform:scale(.9);background-color:#fff}#ClockCon #clock *,#ClockCon #clock *:before,#ClockCon #clock *:after{box-sizing:border-box;background-clip:padding-box}#ClockCon #clock:before,#ClockCon #clock:after,#ClockCon #clock b:before,#ClockCon #clock b:after{position:absolute;width:1.5em;text-align:center}#ClockCon #clock b{position:absolute;top:4.25em;width:100%}#ClockCon #clock:before,#ClockCon #clock:after{left:4.25em}#ClockCon #clock:before{content:\"12\";top:0}#ClockCon #clock:after{content:\"6\";bottom:0}#ClockCon #clock b:before{left:0;content:\"9\"}#ClockCon #clock b:after{right:0;content:\"3\"}#ClockCon #clock span{position:absolute;top:0;left:4.9375em;width:.125em;height:100%}#ClockCon #clock span+span{transform:rotate(90deg)}#ClockCon #clock i,#ClockCon #clock span:before,#ClockCon #clock span:after{position:absolute;top:.5em;left:0;width:100%;height:9em}#ClockCon #clock span:before,#ClockCon #clock span:after{content:\"\";border-style:solid;border-color:#000;border-width:.5em 0;transform:rotate(30deg)}#ClockCon #clock span:after{transform:rotate(60deg)}#ClockCon #clock i{z-index:2;left:4.85em;width:.3em;background-color:#000;border:solid transparent;border-width:0 0 3em;border-radius:40%}#ClockCon #clock i:first-of-type{border-width:1.5em 0 3em}#ClockCon #clock i:last-of-type{background-color:var(--primary)}#ClockCon #clock i:last-of-type:before,#ClockCon #clock i:last-of-type:after{content:\"\";position:absolute;border-radius:50%}#ClockCon #clock i:last-of-type:before{top:4em;left:-.375em;width:1em;height:1em;background:#000}#ClockCon #clock i:last-of-type:after{top:4.25em;left:-.125em;width:.5em;height:.5em;background:#abc}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: ClockComponent, isStandalone: true, selector: "lib-clock", ngImport: i0, template: "<div id=\"ClockCon\">\r\n  <div id=\"clock\">\r\n    <b></b>\r\n    <span></span>\r\n    <span></span>\r\n    <i id=\"hour\"></i>\r\n    <i id=\"minute\"></i>\r\n    <i id=\"second\"></i>\r\n  </div>\r\n</div>\r\n", styles: ["#ClockCon{width:10em;height:10em;float:right;position:relative}#ClockCon #clock{position:relative;width:10em;height:10em;line-height:1.5em;border:.0625em solid var(--black-white);border-radius:50%;box-shadow:inset .125em .25em .5em var(--black-white),-.25em -.5em .5em var(--black-white),0 0 .0625em .5em var(--black-white),0 0 .0625em .5625em var(--black-white),.125em .25em .5em .5em var(--black-white);transform:scale(.9);background-color:#fff}#ClockCon #clock *,#ClockCon #clock *:before,#ClockCon #clock *:after{box-sizing:border-box;background-clip:padding-box}#ClockCon #clock:before,#ClockCon #clock:after,#ClockCon #clock b:before,#ClockCon #clock b:after{position:absolute;width:1.5em;text-align:center}#ClockCon #clock b{position:absolute;top:4.25em;width:100%}#ClockCon #clock:before,#ClockCon #clock:after{left:4.25em}#ClockCon #clock:before{content:\"12\";top:0}#ClockCon #clock:after{content:\"6\";bottom:0}#ClockCon #clock b:before{left:0;content:\"9\"}#ClockCon #clock b:after{right:0;content:\"3\"}#ClockCon #clock span{position:absolute;top:0;left:4.9375em;width:.125em;height:100%}#ClockCon #clock span+span{transform:rotate(90deg)}#ClockCon #clock i,#ClockCon #clock span:before,#ClockCon #clock span:after{position:absolute;top:.5em;left:0;width:100%;height:9em}#ClockCon #clock span:before,#ClockCon #clock span:after{content:\"\";border-style:solid;border-color:#000;border-width:.5em 0;transform:rotate(30deg)}#ClockCon #clock span:after{transform:rotate(60deg)}#ClockCon #clock i{z-index:2;left:4.85em;width:.3em;background-color:#000;border:solid transparent;border-width:0 0 3em;border-radius:40%}#ClockCon #clock i:first-of-type{border-width:1.5em 0 3em}#ClockCon #clock i:last-of-type{background-color:var(--primary)}#ClockCon #clock i:last-of-type:before,#ClockCon #clock i:last-of-type:after{content:\"\";position:absolute;border-radius:50%}#ClockCon #clock i:last-of-type:before{top:4em;left:-.375em;width:1em;height:1em;background:#000}#ClockCon #clock i:last-of-type:after{top:4.25em;left:-.125em;width:.5em;height:.5em;background:#abc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ClockComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-clock', standalone: false, template: "<div id=\"ClockCon\">\r\n  <div id=\"clock\">\r\n    <b></b>\r\n    <span></span>\r\n    <span></span>\r\n    <i id=\"hour\"></i>\r\n    <i id=\"minute\"></i>\r\n    <i id=\"second\"></i>\r\n  </div>\r\n</div>\r\n", styles: ["#ClockCon{width:10em;height:10em;float:right;position:relative}#ClockCon #clock{position:relative;width:10em;height:10em;line-height:1.5em;border:.0625em solid var(--black-white);border-radius:50%;box-shadow:inset .125em .25em .5em var(--black-white),-.25em -.5em .5em var(--black-white),0 0 .0625em .5em var(--black-white),0 0 .0625em .5625em var(--black-white),.125em .25em .5em .5em var(--black-white);transform:scale(.9);background-color:#fff}#ClockCon #clock *,#ClockCon #clock *:before,#ClockCon #clock *:after{box-sizing:border-box;background-clip:padding-box}#ClockCon #clock:before,#ClockCon #clock:after,#ClockCon #clock b:before,#ClockCon #clock b:after{position:absolute;width:1.5em;text-align:center}#ClockCon #clock b{position:absolute;top:4.25em;width:100%}#ClockCon #clock:before,#ClockCon #clock:after{left:4.25em}#ClockCon #clock:before{content:\"12\";top:0}#ClockCon #clock:after{content:\"6\";bottom:0}#ClockCon #clock b:before{left:0;content:\"9\"}#ClockCon #clock b:after{right:0;content:\"3\"}#ClockCon #clock span{position:absolute;top:0;left:4.9375em;width:.125em;height:100%}#ClockCon #clock span+span{transform:rotate(90deg)}#ClockCon #clock i,#ClockCon #clock span:before,#ClockCon #clock span:after{position:absolute;top:.5em;left:0;width:100%;height:9em}#ClockCon #clock span:before,#ClockCon #clock span:after{content:\"\";border-style:solid;border-color:#000;border-width:.5em 0;transform:rotate(30deg)}#ClockCon #clock span:after{transform:rotate(60deg)}#ClockCon #clock i{z-index:2;left:4.85em;width:.3em;background-color:#000;border:solid transparent;border-width:0 0 3em;border-radius:40%}#ClockCon #clock i:first-of-type{border-width:1.5em 0 3em}#ClockCon #clock i:last-of-type{background-color:var(--primary)}#ClockCon #clock i:last-of-type:before,#ClockCon #clock i:last-of-type:after{content:\"\";position:absolute;border-radius:50%}#ClockCon #clock i:last-of-type:before{top:4em;left:-.375em;width:1em;height:1em;background:#000}#ClockCon #clock i:last-of-type:after{top:4.25em;left:-.125em;width:.5em;height:.5em;background:#abc}\n"] }]
+            args: [{ selector: 'lib-clock', imports: [
+                        CommonModule,
+                        FormsModule,
+                    ], standalone: true, template: "<div id=\"ClockCon\">\r\n  <div id=\"clock\">\r\n    <b></b>\r\n    <span></span>\r\n    <span></span>\r\n    <i id=\"hour\"></i>\r\n    <i id=\"minute\"></i>\r\n    <i id=\"second\"></i>\r\n  </div>\r\n</div>\r\n", styles: ["#ClockCon{width:10em;height:10em;float:right;position:relative}#ClockCon #clock{position:relative;width:10em;height:10em;line-height:1.5em;border:.0625em solid var(--black-white);border-radius:50%;box-shadow:inset .125em .25em .5em var(--black-white),-.25em -.5em .5em var(--black-white),0 0 .0625em .5em var(--black-white),0 0 .0625em .5625em var(--black-white),.125em .25em .5em .5em var(--black-white);transform:scale(.9);background-color:#fff}#ClockCon #clock *,#ClockCon #clock *:before,#ClockCon #clock *:after{box-sizing:border-box;background-clip:padding-box}#ClockCon #clock:before,#ClockCon #clock:after,#ClockCon #clock b:before,#ClockCon #clock b:after{position:absolute;width:1.5em;text-align:center}#ClockCon #clock b{position:absolute;top:4.25em;width:100%}#ClockCon #clock:before,#ClockCon #clock:after{left:4.25em}#ClockCon #clock:before{content:\"12\";top:0}#ClockCon #clock:after{content:\"6\";bottom:0}#ClockCon #clock b:before{left:0;content:\"9\"}#ClockCon #clock b:after{right:0;content:\"3\"}#ClockCon #clock span{position:absolute;top:0;left:4.9375em;width:.125em;height:100%}#ClockCon #clock span+span{transform:rotate(90deg)}#ClockCon #clock i,#ClockCon #clock span:before,#ClockCon #clock span:after{position:absolute;top:.5em;left:0;width:100%;height:9em}#ClockCon #clock span:before,#ClockCon #clock span:after{content:\"\";border-style:solid;border-color:#000;border-width:.5em 0;transform:rotate(30deg)}#ClockCon #clock span:after{transform:rotate(60deg)}#ClockCon #clock i{z-index:2;left:4.85em;width:.3em;background-color:#000;border:solid transparent;border-width:0 0 3em;border-radius:40%}#ClockCon #clock i:first-of-type{border-width:1.5em 0 3em}#ClockCon #clock i:last-of-type{background-color:var(--primary)}#ClockCon #clock i:last-of-type:before,#ClockCon #clock i:last-of-type:after{content:\"\";position:absolute;border-radius:50%}#ClockCon #clock i:last-of-type:before{top:4em;left:-.375em;width:1em;height:1em;background:#000}#ClockCon #clock i:last-of-type:after{top:4.25em;left:-.125em;width:.5em;height:.5em;background:#abc}\n"] }]
         }], ctorParameters: () => [] });
 
 class PsToolkitUiModule {
@@ -8350,19 +8406,17 @@ class PsToolkitUiModule {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PsToolkitUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: PsToolkitUiModule, declarations: [SidebarItemComponent, SidebarComponent,
-            SubHeaderComponent, FooterComponent, StepsComponent,
-            HeaderComponent,
-            TooltipComponent, AlertComponent,
-            LayoutComponent, LoadingComponent, NotfoundComponent, CalendarComponent,
-            ClockComponent, LoginComponent], imports: [FormSelectItemComponent, FormCheckboxComponent, TablePaginationComponent, FormBankCardComponent, FormPlaqueSelectComponent,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: PsToolkitUiModule, imports: [FormSelectItemComponent, FormCheckboxComponent, TablePaginationComponent, FormBankCardComponent, FormPlaqueSelectComponent,
             TableLoadingComponent, FormTreeItemComponent, FormTextboxComponent, FormTextareaComponent, FormIconComponent, FormButtonComponent,
             FormDatetimeComponent, FormPlaqueComponent, FormFileComponent, FormSelectComponent, FormTableComponent, FormLabelComponent,
             AccordionComponent, FormRadioComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent,
             FormTreeComponent, FormTimeComponent, FormFingerComponent, FormVehicleSearchComponent, FormCkeditorComponent, FormUploaderComponent,
             FormVehicleComponent, FormHiddenComponent, FormToggleComponent, ChartComponent, FormTagComponent, FormStarComponent,
-            FormSlideComponent, FormDateComponent, NotificationComponent, ErrorComponent,
-            CommonModule,
+            FormSlideComponent, FormDateComponent, NotificationComponent, ErrorComponent, AlertComponent, SidebarComponent, SidebarItemComponent,
+            CommonModule, HeaderComponent, FooterComponent, SubHeaderComponent, LayoutComponent,
+            StepsComponent, NotfoundComponent, CalendarComponent,
+            ClockComponent, LoadingComponent, LoginComponent,
+            TooltipComponent,
             RouterModule,
             FormsModule,
             CKEditorModule], exports: [FormSelectItemComponent, FormCheckboxComponent, TablePaginationComponent, FormBankCardComponent, SidebarItemComponent, SidebarComponent,
@@ -8379,8 +8433,11 @@ class PsToolkitUiModule {
             AccordionComponent, FormRadioComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent,
             FormTreeComponent, FormTimeComponent, FormFingerComponent, FormVehicleSearchComponent, FormCkeditorComponent, FormUploaderComponent,
             FormVehicleComponent, FormHiddenComponent, FormToggleComponent, ChartComponent, FormTagComponent, FormStarComponent,
-            FormSlideComponent, FormDateComponent, NotificationComponent, ErrorComponent,
-            CommonModule,
+            FormSlideComponent, FormDateComponent, NotificationComponent, ErrorComponent, AlertComponent, SidebarComponent, SidebarItemComponent,
+            CommonModule, HeaderComponent, FooterComponent, SubHeaderComponent, LayoutComponent,
+            StepsComponent, NotfoundComponent, CalendarComponent,
+            ClockComponent, LoadingComponent, LoginComponent,
+            TooltipComponent,
             RouterModule,
             FormsModule,
             CKEditorModule] });
@@ -8388,14 +8445,7 @@ class PsToolkitUiModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: PsToolkitUiModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        SidebarItemComponent, SidebarComponent,
-                        SubHeaderComponent, FooterComponent, StepsComponent,
-                        HeaderComponent,
-                        TooltipComponent, AlertComponent,
-                        LayoutComponent, LoadingComponent, NotfoundComponent, CalendarComponent,
-                        ClockComponent, LoginComponent,
-                    ],
+                    declarations: [],
                     imports: [
                         FormSelectItemComponent, FormCheckboxComponent, TablePaginationComponent, FormBankCardComponent, FormPlaqueSelectComponent,
                         TableLoadingComponent, FormTreeItemComponent, FormTextboxComponent, FormTextareaComponent, FormIconComponent, FormButtonComponent,
@@ -8403,8 +8453,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                         AccordionComponent, FormRadioComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent,
                         FormTreeComponent, FormTimeComponent, FormFingerComponent, FormVehicleSearchComponent, FormCkeditorComponent, FormUploaderComponent,
                         FormVehicleComponent, FormHiddenComponent, FormToggleComponent, ChartComponent, FormTagComponent, FormStarComponent,
-                        FormSlideComponent, FormDateComponent, NotificationComponent, ErrorComponent,
-                        CommonModule,
+                        FormSlideComponent, FormDateComponent, NotificationComponent, ErrorComponent, AlertComponent, SidebarComponent, SidebarItemComponent,
+                        CommonModule, HeaderComponent, FooterComponent, SubHeaderComponent, LayoutComponent,
+                        StepsComponent, NotfoundComponent, CalendarComponent,
+                        ClockComponent, LoadingComponent, LoginComponent,
+                        TooltipComponent,
                         RouterModule,
                         FormsModule,
                         CKEditorModule