@memberjunction/ng-explorer-core 0.9.226 → 0.9.230

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/lib/data-browser-component/data-browser.component.js +1 -1
  2. package/dist/lib/favorites/favorites.component.js +2 -2
  3. package/dist/lib/generic/resource-container-component.js +4 -4
  4. package/dist/lib/generic-browser-list/generic-browser-list.component.js +3 -3
  5. package/dist/lib/header/header.component.js +17 -24
  6. package/dist/lib/home-component/home.component.js +11 -25
  7. package/dist/lib/navigation/navigation.component.d.ts.map +1 -1
  8. package/dist/lib/navigation/navigation.component.js +20 -15
  9. package/dist/lib/resource-wrappers/record-resource.component.js +5 -4
  10. package/dist/lib/single-dashboard/Components/add-item/add-item.component.js +17 -16
  11. package/dist/lib/single-dashboard/Components/delete-item/delete-item.component.js +3 -3
  12. package/dist/lib/single-dashboard/Components/edit-dashboard/edit-dashboard.component.js +2 -2
  13. package/dist/lib/single-entity/single-entity.component.js +20 -22
  14. package/dist/lib/user-notifications/user-notifications.component.js +2 -2
  15. package/package.json +16 -16
package/dist/lib/data-browser-component/data-browser.component.js CHANGED
@@ -84,6 +84,6 @@ DataBrowserComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataBr
84
84
  } }, dependencies: [i3.NgForOf, i3.NgIf, i4.LoaderComponent, i5.CardComponent, i5.CardBodyComponent, i5.CardTitleDirective, i5.CardSubtitleDirective], styles: [".data-browser-container[_ngcontent-%COMP%] {\r\n padding: 10px;\r\n}\r\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] .card-item[_ngcontent-%COMP%] {\r\n background: #fff;\r\n border-radius: 10px;\r\n height: 250px;\r\n border: 3px solid transparent;\r\n}\r\n\r\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] .card-item[_ngcontent-%COMP%]:hover {\r\n border: 3px solid var(--border-active);\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n\r\n }\r\n .main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] .card-item[_ngcontent-%COMP%]:hover .view-card-content[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\r\n color: var(--border-active);\r\n }\r\n .view-card-content[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\r\n font-size: 36px;\r\n text-align: center;\r\n line-height: 42px;\r\n font-weight: 500;\r\n color: var(--text-darked);\r\n }\r\n .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n text-align: center;\r\n font-size: 18px;\r\n line-height: 28px;\r\n color: var(--text-darked);\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] {\r\n height: 100%;\r\n border: none;\r\n }\r\n .card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: center; \r\n align-items: center;\r\n }", ".main-area[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n .list-view .k-listview-header, .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}"] });
85
85
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataBrowserComponent, [{
86
86
  type: Component,
87
- args: [{ selector: 'app-data-browser', template: "<div class=\"data-browser-container\">\r\n <div class=\"card-header-entity\">\r\n <div class=\"title-wrap\">\r\n <h1>Data Applications</h1>\r\n </div>\r\n </div>\r\n <div class=\"main-area\"> \r\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\" ></kendo-loader>\r\n <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showLoader\">\r\n <div class=\"card-item\" *ngFor=\"let app of applications\">\r\n <kendo-card class=\"card-wrapper\">\r\n <!-- <kendo-card-header class=\"k-hstack view-card\">\r\n <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('table')\"></kendo-svgicon>\r\n <div class=\"btn-wrapper\">\r\n <button kendoButton fillMode=\"flat\" (click)=\"editView(entity)\">\r\n <span class=\"k-icon k-i-edit\"></span>\r\n </button>\r\n <button kendoButton fillMode=\"flat\" (click)=\"handleDeleteView(entity)\"><span\r\n class=\"k-icon k-i-delete\"></span></button>\r\n </div> \r\n </kendo-card-header> -->\r\n \r\n <kendo-card-body (click)=\"appItemClick(app)\">\r\n <div class=\"view-card-content k-cursor-pointer\">\r\n <h2 kendoCardTitle>{{ app.Name }}</h2>\r\n <p kendoCardSubtitle>{{ app.Description }}</p>\r\n </div>\r\n </kendo-card-body>\r\n </kendo-card>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".data-browser-container {\r\n padding: 10px;\r\n}\r\n.main-area .card-list .card-item {\r\n background: #fff;\r\n border-radius: 10px;\r\n height: 250px;\r\n border: 3px solid transparent;\r\n}\r\n\r\n.main-area .card-list .card-item:hover {\r\n border: 3px solid var(--border-active);\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n\r\n }\r\n .main-area .card-list .card-item:hover .view-card-content h2 {\r\n color: var(--border-active);\r\n }\r\n .view-card-content h2 {\r\n font-size: 36px;\r\n text-align: center;\r\n line-height: 42px;\r\n font-weight: 500;\r\n color: var(--text-darked);\r\n }\r\n .view-card-content p {\r\n text-align: center;\r\n font-size: 18px;\r\n line-height: 28px;\r\n color: var(--text-darked);\r\n }\r\n .card-wrapper {\r\n height: 100%;\r\n border: none;\r\n }\r\n .card-wrapper .k-card-body {\r\n display: flex;\r\n justify-content: center; \r\n align-items: center;\r\n }", "\r\n.main-area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n"] }]
87
+ args: [{ selector: 'app-data-browser', template: "<div class=\"data-browser-container\">\r\n <div class=\"card-header-entity\">\r\n <div class=\"title-wrap\">\r\n <h1>Data Applications</h1>\r\n </div>\r\n </div>\r\n <div class=\"main-area\"> \r\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\" ></kendo-loader>\r\n <div class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\" *ngIf=\"!showLoader\">\r\n <div class=\"card-item\" *ngFor=\"let app of applications\">\r\n <kendo-card class=\"card-wrapper\">\r\n <kendo-card-body (click)=\"appItemClick(app)\">\r\n <div class=\"view-card-content k-cursor-pointer\">\r\n <h2 kendoCardTitle>{{ app.Name }}</h2>\r\n <p kendoCardSubtitle>{{ app.Description }}</p>\r\n </div>\r\n </kendo-card-body>\r\n </kendo-card>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".data-browser-container {\r\n padding: 10px;\r\n}\r\n.main-area .card-list .card-item {\r\n background: #fff;\r\n border-radius: 10px;\r\n height: 250px;\r\n border: 3px solid transparent;\r\n}\r\n\r\n.main-area .card-list .card-item:hover {\r\n border: 3px solid var(--border-active);\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n\r\n }\r\n .main-area .card-list .card-item:hover .view-card-content h2 {\r\n color: var(--border-active);\r\n }\r\n .view-card-content h2 {\r\n font-size: 36px;\r\n text-align: center;\r\n line-height: 42px;\r\n font-weight: 500;\r\n color: var(--text-darked);\r\n }\r\n .view-card-content p {\r\n text-align: center;\r\n font-size: 18px;\r\n line-height: 28px;\r\n color: var(--text-darked);\r\n }\r\n .card-wrapper {\r\n height: 100%;\r\n border: none;\r\n }\r\n .card-wrapper .k-card-body {\r\n display: flex;\r\n justify-content: center; \r\n align-items: center;\r\n }", "\r\n.main-area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n"] }]
88
88
  }], () => [{ type: i1.SharedService }, { type: i2.Router }], null); })();
89
89
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DataBrowserComponent, { className: "DataBrowserComponent", filePath: "src\\lib\\data-browser-component\\data-browser.component.ts", lineNumber: 11 }); })();
package/dist/lib/favorites/favorites.component.js CHANGED
@@ -119,7 +119,7 @@ export class FavoritesComponent {
119
119
  }
120
120
  }
121
121
  FavoritesComponent.ɵfac = function FavoritesComponent_Factory(t) { return new (t || FavoritesComponent)(i0.ɵɵdirectiveInject(i1.Router)); };
122
- FavoritesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FavoritesComponent, selectors: [["app-favorites"]], decls: 4, vars: 1, consts: [[1, "list-view", 3, "data"], [1, "entity-wrap"], ["kendoListViewHeaderTemplate", ""], ["kendoListViewItemTemplate", ""], [1, "header"], [1, "head-tag"], [1, "k-icon", "k-i-clock"], [1, "count"], [1, "list-item", 3, "click"]], template: function FavoritesComponent_Template(rf, ctx) { if (rf & 1) {
122
+ FavoritesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FavoritesComponent, selectors: [["app-favorites"]], decls: 4, vars: 1, consts: [[1, "list-view", 3, "data"], [1, "entity-wrap"], ["kendoListViewHeaderTemplate", ""], ["kendoListViewItemTemplate", ""], [1, "header"], [1, "head-tag"], [1, "fa-regular", "fa-clock"], [1, "count"], [1, "list-item", 3, "click"]], template: function FavoritesComponent_Template(rf, ctx) { if (rf & 1) {
123
123
  i0.ɵɵelementStart(0, "kendo-listview", 0);
124
124
  i0.ɵɵelementContainerStart(1, 1);
125
125
  i0.ɵɵtemplate(2, FavoritesComponent_ng_template_2_Template, 6, 1, "ng-template", 2)(3, FavoritesComponent_ng_template_3_Template, 4, 2, "ng-template", 3);
@@ -130,6 +130,6 @@ FavoritesComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Favorite
130
130
  } }, dependencies: [i2.ItemTemplateDirective, i2.HeaderTemplateDirective, i2.ListViewComponent], styles: [".favorites-list[_ngcontent-%COMP%] {\r\n width: 400px;\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n .list-view .k-listview-header, .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}"] });
131
131
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FavoritesComponent, [{
132
132
  type: Component,
133
- args: [{ selector: 'app-favorites', template: "<kendo-listview\n [data]=\"favorites\"\n class=\"list-view\"\n>\n <ng-container class=\"entity-wrap\">\n <ng-template kendoListViewHeaderTemplate>\n <div class=\"header\"> \n <div class=\"head-tag\">\n <span class=\"k-icon k-i-clock\"></span>\n Favorites\n </div>\n <div class=\"count\">{{favorites.length}}</div>\n </div>\n </ng-template>\n <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\n <div class=\"list-item\" (click)=\"favoriteItemClick(dataItem)\">\n <b>{{dataItem.Entity}}</b>: {{favoriteItemDisplayName(dataItem)}}\n </div>\n </ng-template>\n </ng-container>\n</kendo-listview>\n", styles: [".favorites-list {\r\n width: 400px;\r\n}", "\r\n.main-area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n"] }]
133
+ args: [{ selector: 'app-favorites', template: "<kendo-listview\r\n [data]=\"favorites\"\r\n class=\"list-view\"\r\n>\r\n <ng-container class=\"entity-wrap\">\r\n <ng-template kendoListViewHeaderTemplate>\r\n <div class=\"header\"> \r\n <div class=\"head-tag\">\r\n <span class=\"fa-regular fa-clock\"></span>\r\n Favorites\r\n </div>\r\n <div class=\"count\">{{favorites.length}}</div>\r\n </div>\r\n </ng-template>\r\n <ng-template kendoListViewItemTemplate let-dataItem=\"dataItem\">\r\n <div class=\"list-item\" (click)=\"favoriteItemClick(dataItem)\">\r\n <b>{{dataItem.Entity}}</b>: {{favoriteItemDisplayName(dataItem)}}\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n</kendo-listview>\r\n", styles: [".favorites-list {\r\n width: 400px;\r\n}", "\r\n.main-area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n"] }]
134
134
  }], () => [{ type: i1.Router }], null); })();
135
135
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FavoritesComponent, { className: "FavoritesComponent", filePath: "src\\lib\\favorites\\favorites.component.ts", lineNumber: 11 }); })();
package/dist/lib/generic/resource-container-component.js CHANGED
@@ -78,9 +78,9 @@ ResourceContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
78
78
  } if (rf & 2) {
79
79
  let _t;
80
80
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.resourceContainer = _t.first);
81
- } }, inputs: { Data: "Data", isVisible: "isVisible" }, outputs: { ResourceRecordSaved: "ResourceRecordSaved", ContentLoadingStarted: "ContentLoadingStarted", ContentLoadingComplete: "ContentLoadingComplete" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["mjContainer", "", "mjFillContainer", ""]], template: function ResourceContainerComponent_Template(rf, ctx) { if (rf & 1) {
82
- i0.ɵɵelementStart(0, "div");
83
- i0.ɵɵtemplate(1, ResourceContainerComponent_ng_template_1_Template, 0, 0, "ng-template", 0);
81
+ } }, inputs: { Data: "Data", isVisible: "isVisible" }, outputs: { ResourceRecordSaved: "ResourceRecordSaved", ContentLoadingStarted: "ContentLoadingStarted", ContentLoadingComplete: "ContentLoadingComplete" }, features: [i0.ɵɵNgOnChangesFeature], decls: 2, vars: 2, consts: [["mjFillContainer", ""], ["mjContainer", "", "mjFillContainer", ""]], template: function ResourceContainerComponent_Template(rf, ctx) { if (rf & 1) {
82
+ i0.ɵɵelementStart(0, "div", 0);
83
+ i0.ɵɵtemplate(1, ResourceContainerComponent_ng_template_1_Template, 0, 0, "ng-template", 1);
84
84
  i0.ɵɵelementEnd();
85
85
  } if (rf & 2) {
86
86
  i0.ɵɵstyleProp("display", !ctx.isVisible ? "none" : "block");
@@ -89,7 +89,7 @@ ResourceContainerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
89
89
  type: Component,
90
90
  args: [{
91
91
  selector: 'mj-resource',
92
- template: `<div [style.display]="!isVisible ? 'none' : 'block'"><ng-template mjContainer mjFillContainer></ng-template></div>`,
92
+ template: `<div [style.display]="!isVisible ? 'none' : 'block'" mjFillContainer><ng-template mjContainer mjFillContainer></ng-template></div>`,
93
93
  }]
94
94
  }], () => [{ type: i1.SharedService }], { Data: [{
95
95
  type: Input
package/dist/lib/generic-browser-list/generic-browser-list.component.js CHANGED
@@ -123,7 +123,7 @@ function GenericBrowserListComponent_kendo_dialog_21_Template(rf, ctx) { if (rf
123
123
  i0.ɵɵelementStart(7, "div", 49)(8, "button", 50);
124
124
  i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_21_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r26); const ctx_r27 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r27.onConfirmDeleteItem(false)); });
125
125
  i0.ɵɵelement(9, "span", 51);
126
- i0.ɵɵtext(10, " No, Cancel");
126
+ i0.ɵɵtext(10, " No, Cancel ");
127
127
  i0.ɵɵelementEnd();
128
128
  i0.ɵɵelementStart(11, "button", 52);
129
129
  i0.ɵɵlistener("click", function GenericBrowserListComponent_kendo_dialog_21_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r26); const ctx_r28 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r28.onConfirmDeleteItem(true)); });
@@ -546,7 +546,7 @@ export class GenericBrowserListComponent {
546
546
  }
547
547
  }
548
548
  GenericBrowserListComponent.ɵfac = function GenericBrowserListComponent_Factory(t) { return new (t || GenericBrowserListComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router)); };
549
- GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 24, vars: 9, consts: [[1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], ["themeColor", "info", 1, "custom-dropdwn", 3, "data", "itemClick"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "clearButton", "keyup"], ["searchInput", ""], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], [4, "ngIf"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], [3, "minWidth", "width", "title", "close", 4, "ngIf"], ["title", "Create new Folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["type", "converging-spinner"], [3, "kendoGridBinding", "cellClick", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], [3, "kendoGridBinding", "cellClick"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-pen-to-square"], [1, "fa-regular", "fa-trash-can"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], [3, "click"], ["class", "fa-3x fa-regular fa-folder", 4, "ngIf"], ["class", "fa-3x fa-solid fa-table-cells", 4, "ngIf"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], [1, "fa-3x", "fa-regular", "fa-folder"], [1, "fa-3x", "fa-solid", "fa-table-cells"], ["title", "Confirm", 1, "dialog-wrapper", 3, "minWidth", "width", "close"], [1, "k-m-7.5", "k-text-center"], [1, "k-actions", "k-actions-end", "popup-actions", "popup-actions-btn"], ["kendoButton", "", 1, "cancel-btn", 3, "click"], [1, "k-icon", "k-i-close"], ["kendoButton", "", "themeColor", "primary", 1, "yes-btn", 3, "click"], [1, "k-icon", "k-i-check"], [3, "minWidth", "width", "title", "close"], ["type", "text", "placeholder", "Search", 3, "keyup"], ["kendoButton", ""], ["kendoButton", "", "themeColor", "primary"], ["title", "Create new Folder", 1, "dialog-wrapper", 3, "minWidth", "width", "close"], ["placeholder", "Enter a folder name", 3, "valueChange"], [1, "popup-actions-btn"], ["fillMode", "outline", "themeColor", "info", "kendoButton", "", 1, "yes-btn", 3, "click"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
549
+ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenericBrowserListComponent, selectors: [["app-generic-browser-list"]], inputs: { showLoader: "showLoader", itemType: "itemType", title: "title", items: "items", iconName: "iconName", disableAddButton: "disableAddButton", addText: "addText", backText: "backText", ItemEntityName: "ItemEntityName", CategoryEntityName: "CategoryEntityName", selectedFolderID: "selectedFolderID", showNotifications: "showNotifications", categoryEntityID: "categoryEntityID", displayAsGrid: "displayAsGrid", resourceName: "resourceName", viewingResource: "viewingResource", displayItemsAsList: "displayItemsAsList" }, outputs: { BeforeAddFolderEvent: "BeforeAddFolderEvent", BeforeAddItemEvent: "BeforeAddItemEvent", BeforeDeleteFolderEvent: "BeforeDeleteFolderEvent", BeforeDeleteItemEvent: "BeforeDeleteItemEvent", BeforeUpdateFolderEvent: "BeforeUpdateFolderEvent", BeforeUpdateItemEvent: "BeforeUpdateItemEvent", AfterAddFolderEvent: "AfterAddFolderEvent", AfterAddItemEvent: "AfterAddItemEvent", AfterDeleteFolderEvent: "AfterDeleteFolderEvent", AfterDeleteItemEvent: "AfterDeleteItemEvent", AfterUpdateFolderEvent: "AfterUpdateFolderEvent", AfterUpdateItemEvent: "AfterUpdateItemEvent", itemClickEvent: "itemClickEvent", backButtonClickEvent: "backButtonClickEvent", viewModeChangeEvent: "viewModeChangeEvent" }, decls: 24, vars: 9, consts: [[1, "generic-browser-list-container"], [1, "main-fav-wrapper"], [1, "title-wrapper"], ["themeColor", "info", 1, "custom-dropdwn", 3, "data", "itemClick"], [1, "fa-solid", "fa-plus"], [1, "search"], ["type", "text", "placeholder", "Search", "size", "large", "rounded", "large", "fillMode", "solid", 3, "clearButton", "keyup"], ["searchInput", ""], ["kendoTextBoxPrefixTemplate", "", 3, "showSeparator"], [1, "filter-wrapper"], ["kendobutton", "", 1, "cursor-pointer", "grid-btn", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-bars"], ["kendobutton", "", 1, "cursor-pointer", "active", "btn-cmn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], [1, "main-area"], ["type", "converging-spinner", 4, "ngIf"], [4, "ngIf"], ["class", "dialog-wrapper", "title", "Confirm", 3, "minWidth", "width", "close", 4, "ngIf"], [3, "minWidth", "width", "title", "close", 4, "ngIf"], ["title", "Create new Folder", "class", "dialog-wrapper", 3, "minWidth", "width", "close", 4, "ngIf"], [1, "fa-solid", "fa-magnifying-glass", "margin-left-small"], ["type", "converging-spinner"], [3, "kendoGridBinding", "cellClick", 4, "ngIf"], ["class", "card-list k-d-flex k-flex-row k-h-full k-flex-wrap", 4, "ngIf"], [3, "kendoGridBinding", "cellClick"], ["field", "Name", "title", "Name"], ["field", "Size", "title", "Size"], ["field", "LastOpened", "title", "Last Opened"], ["field", "ModifiedBy", "title", "Modified By"], ["title", ""], ["kendoGridCellTemplate", ""], [1, "grid-wrapper"], [1, "list-btn", 3, "click"], [1, "fa-regular", "fa-pen-to-square"], [1, "fa-regular", "fa-trash-can"], [1, "card-list", "k-d-flex", "k-flex-row", "k-h-full", "k-flex-wrap"], [4, "ngFor", "ngForOf"], [1, "card-wrapper", "cursor-pointer"], [1, "list-item-icon"], [3, "click"], ["class", "fa-3x fa-regular fa-folder", 4, "ngIf"], ["class", "fa-3x fa-solid fa-table-cells", 4, "ngIf"], [1, "padding-top-small"], ["kendoCardTitle", ""], ["kendoCardSubtitle", ""], [1, "fa-3x", "fa-regular", "fa-folder"], [1, "fa-3x", "fa-solid", "fa-table-cells"], ["title", "Confirm", 1, "dialog-wrapper", 3, "minWidth", "width", "close"], [1, "k-m-7.5", "k-text-center"], [1, "k-actions", "k-actions-end", "popup-actions", "popup-actions-btn"], ["kendoButton", "", 1, "cancel-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], ["kendoButton", "", "themeColor", "primary", 1, "yes-btn", 3, "click"], [1, "fa-solid", "fa-check"], [3, "minWidth", "width", "title", "close"], ["type", "text", "placeholder", "Search", 3, "keyup"], ["kendoButton", ""], ["kendoButton", "", "themeColor", "primary"], ["title", "Create new Folder", 1, "dialog-wrapper", 3, "minWidth", "width", "close"], ["placeholder", "Enter a folder name", 3, "valueChange"], [1, "popup-actions-btn"], ["fillMode", "outline", "themeColor", "info", "kendoButton", "", 1, "yes-btn", 3, "click"], ["kendoButton", "", "themeColor", "info", 1, "cancel-btn", 3, "click"]], template: function GenericBrowserListComponent_Template(rf, ctx) { if (rf & 1) {
550
550
  const _r37 = i0.ɵɵgetCurrentView();
551
551
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h4");
552
552
  i0.ɵɵtext(4);
@@ -595,7 +595,7 @@ GenericBrowserListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
595
595
  } }, dependencies: [i3.NgForOf, i3.NgIf, i4.GridComponent, i4.DataBindingDirective, i4.ColumnComponent, i4.CellTemplateDirective, i5.DialogComponent, i5.DialogActionsComponent, i6.LoaderComponent, i7.ButtonComponent, i7.DropDownButtonComponent, i8.TextBoxComponent, i8.TextBoxPrefixTemplateDirective, i9.CardComponent, i9.CardBodyComponent, i9.CardTitleDirective, i9.CardSubtitleDirective], styles: [".card-header-entity .title-wrap h1 {\r\n margin: 0 !important;\r\n font-size: 36px !important;\r\n line-height: 42px !important;\r\n color: var(--black) !important;\r\n}\r\n .card-header-entity .add-item .k-button {\r\n border: 1px solid var(--border-blue) !important;\r\n background: var(--white-color) !important;\r\n color: var(--border-blue);\r\n font-weight: 500 ;\r\n font-size: 16px ;\r\n border-radius: 10px;\r\n line-height: 34px;\r\n}\r\n .card-header-entity .add-item .k-button:hover {\r\n background: var(--border-blue) !important;\r\n color: var(--white-color);\r\n}\r\n .card-header-entity .add-item .k-button:hover .k-button-text svg path {\r\n fill: var(--white-color) !important;\r\n}\r\n .title-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 14px 0;\r\n border-bottom: 1px solid var(--med-gray);\r\n}\r\n .title-wrapper[_ngcontent-%COMP%] h4[_ngcontent-%COMP%] {\r\n margin: 0;\r\n font-size: 24px;\r\n line-height: 28px;\r\n }\r\n .main-fav-wrapper[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 20px;\r\n }\r\n .filter-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: flex-start;\r\n gap: 14px;\r\n align-items: center;\r\n}\r\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\r\n width: 100%;\r\n height: 100%;\r\n font-size: 16px;\r\n background: transparent;\r\n border: none;\r\n box-sizing: border-box;\r\n padding-left: 40px;\r\n\r\n }\r\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] {\r\n background: var(--light-shade);\r\n width: 360px;\r\n height: 44px;\r\n position: relative;\r\n border-radius: 10px;\r\n }\r\n .title-wrapper[_ngcontent-%COMP%] .search[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 12px;\r\n}\r\n .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\r\n background: var(--border-blue);\r\n color: var(--white-color);\r\n font-size: 16px;\r\n border: none;\r\n padding: 8px 25px;\r\n border-radius: 10px;\r\n}\r\n .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, .card-header-entity .add-item .k-button .k-button-text {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n.btn-cmn[_ngcontent-%COMP%] {\r\n width: 44px;\r\n height: 44px;\r\n min-width: 44px;\r\n background: transparent;\r\n border-radius: 8px;\r\n border: 1px solid var(--gray-color);\r\n}\r\n.btn-cmn.active[_ngcontent-%COMP%] {\r\n border: 1px solid var(--border-blue);\r\n}\r\n .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\r\n border: 1px solid var(--gray-color);\r\n border-radius: 8px; padding: 10px 25px;\r\n background: var(--white-color);\r\n color: var(--sideNav);\r\n}\r\n .main-area .card-list .card-wrapper .k-card-body {\r\n padding: 16px !important;\r\n position: relative;\r\n}\r\n .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n top:12px;\r\n right: 12px;\r\n z-index: 9;\r\n}\r\n.grid-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn[_ngcontent-%COMP%] {\r\n width: 38px;\r\n height: 38px;\r\n background: #000;\r\n min-width: 38px;\r\n border: 1px solid var(--gray-color);\r\n border-radius: 8px; \r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: transparent;\r\n cursor: pointer;\r\n}\r\n .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn[_ngcontent-%COMP%]:hover {\r\n border: 1px solid var(--border-active);\r\n}\r\n\r\n\r\n .main-area .card-list .card-wrapper:hover {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n border: 1px solid var(--border-active);\r\n}\r\n .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\r\n color: var(--border-blue);\r\n}\r\n .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\r\n color: var(--sideNav);\r\n font-size: 14px;\r\n line-height: 16px;\r\n height: auto;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n\r\n}\r\n .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\r\n font-size: 18px;\r\n line-height: 21px;\r\n color: var(--text-darked);\r\n font-weight: 600;\r\n}\r\n.breadcrumb-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 0;\r\n}\r\n.breadcrumb-wrap[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\r\n font-size: 16px;\r\n line-height: 18px;\r\n font-weight: 400;\r\n color: var(--black);\r\n}\r\n .k-menu-popup {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n border-radius: 10px;\r\n padding: 16px;\r\n}\r\n\r\n .k-menu-popup kendo-button-list ul li .k-menu-link {\r\n box-shadow: none !important;\r\n} \r\n .k-menu-popup kendo-button-list ul li .k-menu-link:active {\r\n background: transparent !important;\r\n}\r\n .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\r\n color: var(--primary-color);\r\n background: transparent !important;\r\n\r\n}\r\n .dialog-wrapper .popup-actions-btn button {\r\n flex: 1;\r\n}\r\n .dialog-wrapper .popup-actions-btn {\r\n display: flex;\r\n}\r\n .dialog-wrapper .popup-actions-btn .cancel-btn {\r\n background: var(--primary-color);\r\n color: var(--white-color);\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 34px;\r\n text-align: center;\r\n border-radius: 10px;\r\n border: 1px solid transparent;\r\n\r\n}\r\n .dialog-wrapper .popup-actions-btn .yes-btn {\r\n border:1px solid var(--primary-color);\r\n background: transparent;\r\n color: var(--primary-color);\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 34px;\r\n text-align: center;\r\n border-radius: 10px;\r\n box-shadow: none;\r\n}\r\n .dialog-wrapper .popup-actions-btn .yes-btn:focus {\r\n box-shadow: none !important;\r\n}\r\n .dialog-wrapper .k-window-title {\r\n font-size: 30px;\r\n font-weight: 500;\r\n line-height: 36px;\r\n text-align: left;\r\n color: var(--text-darked);\r\n}\r\n .dialog-wrapper p {\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n text-align: left;\r\n color: var(--black);\r\n}\r\n\r\n.margin-left-small[_ngcontent-%COMP%] {\r\n margin-left: 10px;\r\n}\r\n\r\n.card-wrapper[_ngcontent-%COMP%] {\r\n min-width: 230px;\r\n height: 150px;\r\n min-height: 125px;\r\n}\r\n\r\n.padding-top-small[_ngcontent-%COMP%] {\r\n padding-top: 10px;\r\n}\r\n\r\n.cursor-pointer[_ngcontent-%COMP%] {\r\n cursor: pointer;\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n .list-view .k-listview-header, .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}"] });
596
596
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenericBrowserListComponent, [{
597
597
  type: Component,
598
- args: [{ selector: 'app-generic-browser-list', template: "\r\n<div class=\"generic-browser-list-container\">\r\n <div class=\"main-fav-wrapper\">\r\n <div class=\"title-wrapper\">\r\n <h4>{{title}}</h4>\r\n <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"data\" themeColor=\"info\">\r\n <span class=\"fa-solid fa-plus\"></span>\r\n Create New\r\n </kendo-dropdownbutton>\r\n </div>\r\n <div class=\"title-wrapper\">\r\n <div class=\"search\">\r\n <kendo-textbox \r\n type=\"text\" \r\n #searchInput \r\n placeholder=\"Search\" \r\n (keyup)=\"onKeyup(searchInput.value)\"\r\n [clearButton]=\"true\"\r\n size=\"large\"\r\n rounded=\"large\"\r\n fillMode=\"solid\"\r\n >\r\n <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\r\n <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\r\n </ng-template>\r\n </kendo-textbox>\r\n </div>\r\n <div class=\"filter-wrapper\">\r\n <!--\r\n <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\r\n Sort By Recents\r\n </kendo-dropdownbutton>\r\n -->\r\n <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\r\n <span class=\"fa-solid fa-bars\"></span>\r\n </button>\r\n <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\r\n <span class=\"fa-solid fa-table-cells-large\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"main-area\">\r\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\r\n <div *ngIf=\"!showLoader\">\r\n <kendo-grid *ngIf=\"displayAsGrid\" (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\r\n <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\r\n <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\r\n <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\r\n <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\r\n <kendo-grid-column title=\"\">\r\n <ng-template kendoGridCellTemplate let-dataItem>\r\n <div class=\"grid-wrapper\">\r\n <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\r\n <i class=\"fa-regular fa-pen-to-square\"></i>\r\n </button>\r\n <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\r\n <i class=\"fa-regular fa-trash-can\"></i>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </kendo-grid-column>\r\n </kendo-grid>\r\n <div *ngIf=\"!displayAsGrid\" class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\r\n <div *ngFor=\"let d of items\">\r\n <kendo-card class=\"card-wrapper cursor-pointer\">\r\n <div class=\"list-item-icon\">\r\n <button (click)=\"editItem(d)\" class=\"list-btn\">\r\n <span class=\"fa-regular fa-pen-to-square\"></span>\r\n </button>\r\n <button (click)=\"deleteItem(d)\" class=\"list-btn\">\r\n <span class=\"fa-regular fa-trash-can\"></span>\r\n </button>\r\n </div>\r\n <kendo-card-body (click)=\"itemClick(d)\">\r\n <span *ngIf=\"d.Type === 'Folder'\" class=\"fa-3x fa-regular fa-folder\"></span>\r\n <span *ngIf=\"d.Type !== 'Folder'\" class=\"fa-3x fa-solid fa-table-cells\"></span>\r\n <div class=\"padding-top-small\">\r\n <h5 kendoCardTitle>{{ d.Name }}</h5>\r\n <p kendoCardSubtitle>{{ d.Description }}</p>\r\n </div>\r\n </kendo-card-body>\r\n </kendo-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <kendo-dialog \r\n [minWidth]=\"450\"\r\n [width]=\"650\"\r\n class=\"dialog-wrapper\" title=\"Confirm\" *ngIf=\"deleteDialogOpened\" (close)=\"onConfirmDeleteItem(false)\">\r\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\r\n <div [class]=\"showLoader ? 'disabled-div' : ''\">\r\n <p class=\"k-m-7.5 k-text-center\">\r\n Are you sure you want to delete <b>{{selectedItem?.Name}}</b>\r\n </p>\r\n <div class=\"k-actions k-actions-end popup-actions popup-actions-btn\">\r\n <button class=\"cancel-btn\" kendoButton (click)=\"onConfirmDeleteItem(false)\"><span class=\"k-icon k-i-close\"></span> No, Cancel</button>\r\n <button class=\"yes-btn\" kendoButton (click)=\"onConfirmDeleteItem(true)\" themeColor=\"primary\">\r\n <span class=\"k-icon k-i-check\"></span> Yes, Delete\r\n </button>\r\n </div>\r\n </div>\r\n </kendo-dialog>\r\n <kendo-dialog \r\n\r\n [minWidth]=\"450\"\r\n [width]=\"600\"\r\n [title]=\"getCopyFromTitle()\" \r\n *ngIf=\"copyFromDialogOpened\" \r\n (close)=\"toggleCopyFromView()\"\r\n >\r\n <div class=\"search\">\r\n <input type=\"text\" placeholder=\"Search\" (keyup)=\"onKeyup(searchInput.value)\"/>\r\n </div>\r\n <kendo-dialog-actions>\r\n <button kendoButton>\r\n Cancel\r\n </button>\r\n <button kendoButton themeColor=\"primary\">\r\n Create new {{resourceName}}\r\n </button>\r\n </kendo-dialog-actions>\r\n </kendo-dialog>\r\n <kendo-dialog \r\n title=\"Create new Folder\" \r\n *ngIf=\"createFolderDialogOpened\" \r\n (close)=\"toggleCreateFolderView()\"\r\n [minWidth]=\"250\"\r\n [width]=\"450\"\r\n class=\"dialog-wrapper\"\r\n >\r\n <div class=\"search\">\r\n <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\r\n </div>\r\n <kendo-dialog-actions class=\" popup-actions-btn\">\r\n <button class=\"yes-btn\" fillMode=\"outline\" themeColor=\"info\" (click)=\"toggleCreateFolderView()\" kendoButton>\r\n Cancel\r\n </button>\r\n <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\r\n Create\r\n </button>\r\n </kendo-dialog-actions>\r\n </kendo-dialog>\r\n</div>\r\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\r\n margin: 0 !important;\r\n font-size: 36px !important;\r\n line-height: 42px !important;\r\n color: var(--black) !important;\r\n}\r\n ::ng-deep .card-header-entity .add-item .k-button {\r\n border: 1px solid var(--border-blue) !important;\r\n background: var(--white-color) !important;\r\n color: var(--border-blue);\r\n font-weight: 500 ;\r\n font-size: 16px ;\r\n border-radius: 10px;\r\n line-height: 34px;\r\n}\r\n::ng-deep .card-header-entity .add-item .k-button:hover {\r\n background: var(--border-blue) !important;\r\n color: var(--white-color);\r\n}\r\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\r\n fill: var(--white-color) !important;\r\n}\r\n .title-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 14px 0;\r\n border-bottom: 1px solid var(--med-gray);\r\n}\r\n .title-wrapper h4 {\r\n margin: 0;\r\n font-size: 24px;\r\n line-height: 28px;\r\n }\r\n .main-fav-wrapper {\r\n background: #fff;\r\n padding: 20px;\r\n }\r\n .filter-wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n gap: 14px;\r\n align-items: center;\r\n}\r\n .title-wrapper .search input {\r\n width: 100%;\r\n height: 100%;\r\n font-size: 16px;\r\n background: transparent;\r\n border: none;\r\n box-sizing: border-box;\r\n padding-left: 40px;\r\n\r\n }\r\n .title-wrapper .search {\r\n background: var(--light-shade);\r\n width: 360px;\r\n height: 44px;\r\n position: relative;\r\n border-radius: 10px;\r\n }\r\n .title-wrapper .search svg {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 12px;\r\n}\r\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\r\n background: var(--border-blue);\r\n color: var(--white-color);\r\n font-size: 16px;\r\n border: none;\r\n padding: 8px 25px;\r\n border-radius: 10px;\r\n}\r\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n.btn-cmn {\r\n width: 44px;\r\n height: 44px;\r\n min-width: 44px;\r\n background: transparent;\r\n border-radius: 8px;\r\n border: 1px solid var(--gray-color);\r\n}\r\n.btn-cmn.active {\r\n border: 1px solid var(--border-blue);\r\n}\r\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\r\n border: 1px solid var(--gray-color);\r\n border-radius: 8px; padding: 10px 25px;\r\n background: var(--white-color);\r\n color: var(--sideNav);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\r\n padding: 16px !important;\r\n position: relative;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n top:12px;\r\n right: 12px;\r\n z-index: 9;\r\n}\r\n.grid-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\r\n width: 38px;\r\n height: 38px;\r\n background: #000;\r\n min-width: 38px;\r\n border: 1px solid var(--gray-color);\r\n border-radius: 8px; \r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: transparent;\r\n cursor: pointer;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\r\n border: 1px solid var(--border-active);\r\n}\r\n\r\n\r\n::ng-deep .main-area .card-list .card-wrapper:hover {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n border: 1px solid var(--border-active);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\r\n color: var(--border-blue);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\r\n color: var(--sideNav);\r\n font-size: 14px;\r\n line-height: 16px;\r\n height: auto;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\r\n font-size: 18px;\r\n line-height: 21px;\r\n color: var(--text-darked);\r\n font-weight: 600;\r\n}\r\n.breadcrumb-wrap {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 0;\r\n}\r\n.breadcrumb-wrap span {\r\n font-size: 16px;\r\n line-height: 18px;\r\n font-weight: 400;\r\n color: var(--black);\r\n}\r\n::ng-deep .k-menu-popup {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n border-radius: 10px;\r\n padding: 16px;\r\n}\r\n\r\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\r\n box-shadow: none !important;\r\n} \r\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\r\n background: transparent !important;\r\n}\r\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\r\n color: var(--primary-color);\r\n background: transparent !important;\r\n\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn button {\r\n flex: 1;\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn {\r\n display: flex;\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\r\n background: var(--primary-color);\r\n color: var(--white-color);\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 34px;\r\n text-align: center;\r\n border-radius: 10px;\r\n border: 1px solid transparent;\r\n\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\r\n border:1px solid var(--primary-color);\r\n background: transparent;\r\n color: var(--primary-color);\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 34px;\r\n text-align: center;\r\n border-radius: 10px;\r\n box-shadow: none;\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\r\n box-shadow: none !important;\r\n}\r\n::ng-deep .dialog-wrapper .k-window-title {\r\n font-size: 30px;\r\n font-weight: 500;\r\n line-height: 36px;\r\n text-align: left;\r\n color: var(--text-darked);\r\n}\r\n::ng-deep .dialog-wrapper p {\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n text-align: left;\r\n color: var(--black);\r\n}\r\n\r\n.margin-left-small {\r\n margin-left: 10px;\r\n}\r\n\r\n.card-wrapper {\r\n min-width: 230px;\r\n height: 150px;\r\n min-height: 125px;\r\n}\r\n\r\n.padding-top-small {\r\n padding-top: 10px;\r\n}\r\n\r\n.cursor-pointer {\r\n cursor: pointer;\r\n}", "\r\n.main-area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n"] }]
598
+ args: [{ selector: 'app-generic-browser-list', template: "\r\n<div class=\"generic-browser-list-container\">\r\n <div class=\"main-fav-wrapper\">\r\n <div class=\"title-wrapper\">\r\n <h4>{{title}}</h4>\r\n <kendo-dropdownbutton class=\"custom-dropdwn\" (itemClick)=\"onDropdownItemClick($event)\" [data]=\"data\" themeColor=\"info\">\r\n <span class=\"fa-solid fa-plus\"></span>\r\n Create New\r\n </kendo-dropdownbutton>\r\n </div>\r\n <div class=\"title-wrapper\">\r\n <div class=\"search\">\r\n <kendo-textbox \r\n type=\"text\" \r\n #searchInput \r\n placeholder=\"Search\" \r\n (keyup)=\"onKeyup(searchInput.value)\"\r\n [clearButton]=\"true\"\r\n size=\"large\"\r\n rounded=\"large\"\r\n fillMode=\"solid\"\r\n >\r\n <ng-template kendoTextBoxPrefixTemplate [showSeparator]=\"true\">\r\n <span class=\"fa-solid fa-magnifying-glass margin-left-small\"></span>\r\n </ng-template>\r\n </kendo-textbox>\r\n </div>\r\n <div class=\"filter-wrapper\">\r\n <!--\r\n <kendo-dropdownbutton [data]=\"data\" themeColor=\"primary\">\r\n Sort By Recents\r\n </kendo-dropdownbutton>\r\n -->\r\n <button kendobutton (click)=\"changeViewMode('grid')\" class=\"cursor-pointer grid-btn btn-cmn\">\r\n <span class=\"fa-solid fa-bars\"></span>\r\n </button>\r\n <button kendobutton (click)=\"changeViewMode('list')\" class=\"cursor-pointer active btn-cmn\">\r\n <span class=\"fa-solid fa-table-cells-large\"></span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"main-area\">\r\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\r\n <div *ngIf=\"!showLoader\">\r\n <kendo-grid *ngIf=\"displayAsGrid\" (cellClick)=\"onCellItemClicked($event)\" [kendoGridBinding]=\"items\">\r\n <kendo-grid-column field=\"Name\" title=\"Name\"></kendo-grid-column>\r\n <kendo-grid-column field=\"Size\" title=\"Size\"></kendo-grid-column>\r\n <kendo-grid-column field=\"LastOpened\" title=\"Last Opened\"></kendo-grid-column>\r\n <kendo-grid-column field=\"ModifiedBy\" title=\"Modified By\"></kendo-grid-column>\r\n <kendo-grid-column title=\"\">\r\n <ng-template kendoGridCellTemplate let-dataItem>\r\n <div class=\"grid-wrapper\">\r\n <button class=\"list-btn\" (click)=\"editItem(dataItem)\">\r\n <i class=\"fa-regular fa-pen-to-square\"></i>\r\n </button>\r\n <button class=\"list-btn\" (click)=\"deleteItem(dataItem)\">\r\n <i class=\"fa-regular fa-trash-can\"></i>\r\n </button>\r\n </div>\r\n </ng-template>\r\n </kendo-grid-column>\r\n </kendo-grid>\r\n <div *ngIf=\"!displayAsGrid\" class=\"card-list k-d-flex k-flex-row k-h-full k-flex-wrap\">\r\n <div *ngFor=\"let d of items\">\r\n <kendo-card class=\"card-wrapper cursor-pointer\">\r\n <div class=\"list-item-icon\">\r\n <button (click)=\"editItem(d)\" class=\"list-btn\">\r\n <span class=\"fa-regular fa-pen-to-square\"></span>\r\n </button>\r\n <button (click)=\"deleteItem(d)\" class=\"list-btn\">\r\n <span class=\"fa-regular fa-trash-can\"></span>\r\n </button>\r\n </div>\r\n <kendo-card-body (click)=\"itemClick(d)\">\r\n <span *ngIf=\"d.Type === 'Folder'\" class=\"fa-3x fa-regular fa-folder\"></span>\r\n <span *ngIf=\"d.Type !== 'Folder'\" class=\"fa-3x fa-solid fa-table-cells\"></span>\r\n <div class=\"padding-top-small\">\r\n <h5 kendoCardTitle>{{ d.Name }}</h5>\r\n <p kendoCardSubtitle>{{ d.Description }}</p>\r\n </div>\r\n </kendo-card-body>\r\n </kendo-card>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <kendo-dialog \r\n [minWidth]=\"450\"\r\n [width]=\"650\"\r\n class=\"dialog-wrapper\" title=\"Confirm\" *ngIf=\"deleteDialogOpened\" (close)=\"onConfirmDeleteItem(false)\">\r\n <kendo-loader *ngIf=\"showLoader\" type=\"converging-spinner\"></kendo-loader>\r\n <div [class]=\"showLoader ? 'disabled-div' : ''\">\r\n <p class=\"k-m-7.5 k-text-center\">\r\n Are you sure you want to delete <b>{{selectedItem?.Name}}</b>\r\n </p>\r\n <div class=\"k-actions k-actions-end popup-actions popup-actions-btn\">\r\n <button class=\"cancel-btn\" kendoButton (click)=\"onConfirmDeleteItem(false)\">\r\n <span class=\"fa-solid fa-xmark\"></span> No, Cancel\r\n </button>\r\n <button class=\"yes-btn\" kendoButton (click)=\"onConfirmDeleteItem(true)\" themeColor=\"primary\">\r\n <span class=\"fa-solid fa-check\"></span> Yes, Delete\r\n </button>\r\n </div>\r\n </div>\r\n </kendo-dialog>\r\n <kendo-dialog \r\n\r\n [minWidth]=\"450\"\r\n [width]=\"600\"\r\n [title]=\"getCopyFromTitle()\" \r\n *ngIf=\"copyFromDialogOpened\" \r\n (close)=\"toggleCopyFromView()\"\r\n >\r\n <div class=\"search\">\r\n <input type=\"text\" placeholder=\"Search\" (keyup)=\"onKeyup(searchInput.value)\"/>\r\n </div>\r\n <kendo-dialog-actions>\r\n <button kendoButton>\r\n Cancel\r\n </button>\r\n <button kendoButton themeColor=\"primary\">\r\n Create new {{resourceName}}\r\n </button>\r\n </kendo-dialog-actions>\r\n </kendo-dialog>\r\n <kendo-dialog \r\n title=\"Create new Folder\" \r\n *ngIf=\"createFolderDialogOpened\" \r\n (close)=\"toggleCreateFolderView()\"\r\n [minWidth]=\"250\"\r\n [width]=\"450\"\r\n class=\"dialog-wrapper\"\r\n >\r\n <div class=\"search\">\r\n <kendo-textbox placeholder=\"Enter a folder name\" (valueChange)=\"onCreateFolderKeyup($event)\"/>\r\n </div>\r\n <kendo-dialog-actions class=\" popup-actions-btn\">\r\n <button class=\"yes-btn\" fillMode=\"outline\" themeColor=\"info\" (click)=\"toggleCreateFolderView()\" kendoButton>\r\n Cancel\r\n </button>\r\n <button class=\"cancel-btn\" (click)=\"createFolder()\" kendoButton themeColor=\"info\">\r\n Create\r\n </button>\r\n </kendo-dialog-actions>\r\n </kendo-dialog>\r\n</div>\r\n", styles: ["::ng-deep .card-header-entity .title-wrap h1 {\r\n margin: 0 !important;\r\n font-size: 36px !important;\r\n line-height: 42px !important;\r\n color: var(--black) !important;\r\n}\r\n ::ng-deep .card-header-entity .add-item .k-button {\r\n border: 1px solid var(--border-blue) !important;\r\n background: var(--white-color) !important;\r\n color: var(--border-blue);\r\n font-weight: 500 ;\r\n font-size: 16px ;\r\n border-radius: 10px;\r\n line-height: 34px;\r\n}\r\n::ng-deep .card-header-entity .add-item .k-button:hover {\r\n background: var(--border-blue) !important;\r\n color: var(--white-color);\r\n}\r\n::ng-deep .card-header-entity .add-item .k-button:hover .k-button-text svg path {\r\n fill: var(--white-color) !important;\r\n}\r\n .title-wrapper {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 14px 0;\r\n border-bottom: 1px solid var(--med-gray);\r\n}\r\n .title-wrapper h4 {\r\n margin: 0;\r\n font-size: 24px;\r\n line-height: 28px;\r\n }\r\n .main-fav-wrapper {\r\n background: #fff;\r\n padding: 20px;\r\n }\r\n .filter-wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n gap: 14px;\r\n align-items: center;\r\n}\r\n .title-wrapper .search input {\r\n width: 100%;\r\n height: 100%;\r\n font-size: 16px;\r\n background: transparent;\r\n border: none;\r\n box-sizing: border-box;\r\n padding-left: 40px;\r\n\r\n }\r\n .title-wrapper .search {\r\n background: var(--light-shade);\r\n width: 360px;\r\n height: 44px;\r\n position: relative;\r\n border-radius: 10px;\r\n }\r\n .title-wrapper .search svg {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n left: 12px;\r\n}\r\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button {\r\n background: var(--border-blue);\r\n color: var(--white-color);\r\n font-size: 16px;\r\n border: none;\r\n padding: 8px 25px;\r\n border-radius: 10px;\r\n}\r\n::ng-deep .main-fav-wrapper .title-wrapper .k-dropdown-button .k-button .k-button-text, ::ng-deep .card-header-entity .add-item .k-button .k-button-text {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n.btn-cmn {\r\n width: 44px;\r\n height: 44px;\r\n min-width: 44px;\r\n background: transparent;\r\n border-radius: 8px;\r\n border: 1px solid var(--gray-color);\r\n}\r\n.btn-cmn.active {\r\n border: 1px solid var(--border-blue);\r\n}\r\n::ng-deep .main-fav-wrapper .title-wrapper .filter-wrapper .k-dropdown-button .k-button {\r\n border: 1px solid var(--gray-color);\r\n border-radius: 8px; padding: 10px 25px;\r\n background: var(--white-color);\r\n color: var(--sideNav);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body {\r\n padding: 16px !important;\r\n position: relative;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n top:12px;\r\n right: 12px;\r\n z-index: 9;\r\n}\r\n.grid-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .list-item-icon .common-btn, .list-btn {\r\n width: 38px;\r\n height: 38px;\r\n background: #000;\r\n min-width: 38px;\r\n border: 1px solid var(--gray-color);\r\n border-radius: 8px; \r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: transparent;\r\n cursor: pointer;\r\n}\r\n::ng-deep .main-fav-wrapper .main-area .card-list .card-wrapper .k-card-body .list-item-icon:hover, .list-btn:hover {\r\n border: 1px solid var(--border-active);\r\n}\r\n\r\n\r\n::ng-deep .main-area .card-list .card-wrapper:hover {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n border: 1px solid var(--border-active);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper:hover .k-card-body .view-card-content-list h5 {\r\n color: var(--border-blue);\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list p {\r\n color: var(--sideNav);\r\n font-size: 14px;\r\n line-height: 16px;\r\n height: auto;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n\r\n}\r\n::ng-deep .main-area .card-list .card-wrapper .k-card-body .view-card-content-list h5 {\r\n font-size: 18px;\r\n line-height: 21px;\r\n color: var(--text-darked);\r\n font-weight: 600;\r\n}\r\n.breadcrumb-wrap {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 0;\r\n}\r\n.breadcrumb-wrap span {\r\n font-size: 16px;\r\n line-height: 18px;\r\n font-weight: 400;\r\n color: var(--black);\r\n}\r\n::ng-deep .k-menu-popup {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n border-radius: 10px;\r\n padding: 16px;\r\n}\r\n\r\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link {\r\n box-shadow: none !important;\r\n} \r\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link:active {\r\n background: transparent !important;\r\n}\r\n::ng-deep .k-menu-popup kendo-button-list ul li .k-menu-link .k-menu-link-text:hover {\r\n color: var(--primary-color);\r\n background: transparent !important;\r\n\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn button {\r\n flex: 1;\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn {\r\n display: flex;\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn .cancel-btn {\r\n background: var(--primary-color);\r\n color: var(--white-color);\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 34px;\r\n text-align: center;\r\n border-radius: 10px;\r\n border: 1px solid transparent;\r\n\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn {\r\n border:1px solid var(--primary-color);\r\n background: transparent;\r\n color: var(--primary-color);\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 34px;\r\n text-align: center;\r\n border-radius: 10px;\r\n box-shadow: none;\r\n}\r\n::ng-deep .dialog-wrapper .popup-actions-btn .yes-btn:focus {\r\n box-shadow: none !important;\r\n}\r\n::ng-deep .dialog-wrapper .k-window-title {\r\n font-size: 30px;\r\n font-weight: 500;\r\n line-height: 36px;\r\n text-align: left;\r\n color: var(--text-darked);\r\n}\r\n::ng-deep .dialog-wrapper p {\r\n font-size: 16px;\r\n font-weight: 500;\r\n line-height: 20px;\r\n text-align: left;\r\n color: var(--black);\r\n}\r\n\r\n.margin-left-small {\r\n margin-left: 10px;\r\n}\r\n\r\n.card-wrapper {\r\n min-width: 230px;\r\n height: 150px;\r\n min-height: 125px;\r\n}\r\n\r\n.padding-top-small {\r\n padding-top: 10px;\r\n}\r\n\r\n.cursor-pointer {\r\n cursor: pointer;\r\n}", "\r\n.main-area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n"] }]
599
599
  }], () => [{ type: i1.SharedService }, { type: i2.Router }], { showLoader: [{
600
600
  type: Input
601
601
  }], itemType: [{
package/dist/lib/header/header.component.js CHANGED
@@ -20,12 +20,11 @@ import * as i4 from "@angular/router";
20
20
  import * as i5 from "@angular/common";
21
21
  import * as i6 from "@angular/forms";
22
22
  import * as i7 from "@progress/kendo-angular-inputs";
23
- import * as i8 from "@progress/kendo-angular-icons";
24
- import * as i9 from "@progress/kendo-angular-layout";
25
- import * as i10 from "@progress/kendo-angular-dropdowns";
23
+ import * as i8 from "@progress/kendo-angular-layout";
24
+ import * as i9 from "@progress/kendo-angular-dropdowns";
26
25
  const _c0 = ["searchInput"];
27
26
  function HeaderComponent_span_18_Template(rf, ctx) { if (rf & 1) {
28
- i0.ɵɵelementStart(0, "span", 20);
27
+ i0.ɵɵelementStart(0, "span", 22);
29
28
  i0.ɵɵtext(1);
30
29
  i0.ɵɵelementEnd();
31
30
  } if (rf & 2) {
@@ -153,10 +152,10 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
153
152
  let _t;
154
153
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchInput = _t.first);
155
154
  i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.entityDropdown = _t.first);
156
- } }, inputs: { applicationName: "applicationName", applicationInstance: "applicationInstance" }, outputs: { toggle: "toggle" }, decls: 23, vars: 9, consts: [[1, "header-wrap"], [1, "header", "header-bg"], [1, "nav-container"], [1, "menu-button"], [1, "k-icon", 3, "click"], [3, "icon"], [1, "title"], ["kendoCardMedia", "", "src", "assets/MJ_logo.svg", "height", "45px", 1, "app-logo"], [1, "user-info-wrapper"], [1, "search-wrapper"], ["textField", "Name", "valueField", "ID", 1, "search-entity-list", 3, "data", "ngModel", "ngModelChange"], ["type", "text", "id", "txtSearch", "placeholder", "Search", "kendoTextBox", "", 3, "keydown.enter"], ["searchInput", ""], [1, "icon-inbox", 3, "click"], [1, "k-icon", 2, "cursor", "pointer"], ["class", "notification", 4, "ngIf"], [1, "user-info"], ["shape", "circle", 1, "k-m-0", 2, "margin", "0", 3, "imageSrc"], [1, "example-col"], [3, "data", "value", "valueChange"], [1, "notification"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
155
+ } }, inputs: { applicationName: "applicationName", applicationInstance: "applicationInstance" }, outputs: { toggle: "toggle" }, decls: 23, vars: 6, consts: [[1, "header-wrap"], [1, "header", "header-bg"], [1, "nav-container"], [1, "menu-button"], [1, "k-icon", 3, "click"], [1, "fa-solid", "fa-bars", "fa-xl"], [1, "title"], ["kendoCardMedia", "", "src", "assets/MJ_logo.svg", "height", "45px", 1, "app-logo"], [1, "user-info-wrapper"], [1, "search-wrapper"], ["textField", "Name", "valueField", "ID", 1, "search-entity-list", 3, "data", "ngModel", "ngModelChange"], ["type", "text", "id", "txtSearch", "placeholder", "Search", "kendoTextBox", "", 3, "keydown.enter"], ["searchInput", ""], [1, "fa-solid", "fa-magnifying-glass"], [1, "icon-inbox", 3, "click"], [1, "k-icon", 2, "cursor", "pointer"], [1, "fa-solid", "fa-inbox", "fa-xl"], ["class", "notification", 4, "ngIf"], [1, "user-info"], ["shape", "circle", 1, "k-m-0", 2, "margin", "0", 3, "imageSrc"], [1, "example-col"], [3, "data", "value", "valueChange"], [1, "notification"]], template: function HeaderComponent_Template(rf, ctx) { if (rf & 1) {
157
156
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "span", 4);
158
157
  i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_4_listener() { return ctx.onButtonClick(); });
159
- i0.ɵɵelement(5, "kendo-svgicon", 5);
158
+ i0.ɵɵelement(5, "span", 5);
160
159
  i0.ɵɵelementEnd()();
161
160
  i0.ɵɵelementStart(6, "div", 6);
162
161
  i0.ɵɵelement(7, "img", 7);
@@ -169,40 +168,34 @@ HeaderComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HeaderCompo
169
168
  i0.ɵɵelementEnd();
170
169
  i0.ɵɵelementStart(13, "span", 4);
171
170
  i0.ɵɵlistener("click", function HeaderComponent_Template_span_click_13_listener($event) { return ctx.onSearch($event); });
172
- i0.ɵɵelement(14, "kendo-svgicon", 5);
171
+ i0.ɵɵelement(14, "span", 13);
173
172
  i0.ɵɵelementEnd()();
174
- i0.ɵɵelementStart(15, "div", 13);
173
+ i0.ɵɵelementStart(15, "div", 14);
175
174
  i0.ɵɵlistener("click", function HeaderComponent_Template_div_click_15_listener($event) { return ctx.showNotifications($event); });
176
- i0.ɵɵelementStart(16, "span", 14);
177
- i0.ɵɵelement(17, "kendo-svgicon", 5);
175
+ i0.ɵɵelementStart(16, "span", 15);
176
+ i0.ɵɵelement(17, "span", 16);
178
177
  i0.ɵɵelementEnd();
179
- i0.ɵɵtemplate(18, HeaderComponent_span_18_Template, 2, 1, "span", 15);
178
+ i0.ɵɵtemplate(18, HeaderComponent_span_18_Template, 2, 1, "span", 17);
180
179
  i0.ɵɵelementEnd();
181
- i0.ɵɵelementStart(19, "div", 16);
182
- i0.ɵɵelement(20, "kendo-avatar", 17);
183
- i0.ɵɵelementStart(21, "div", 18)(22, "kendo-dropdownlist", 19);
180
+ i0.ɵɵelementStart(19, "div", 18);
181
+ i0.ɵɵelement(20, "kendo-avatar", 19);
182
+ i0.ɵɵelementStart(21, "div", 20)(22, "kendo-dropdownlist", 21);
184
183
  i0.ɵɵlistener("valueChange", function HeaderComponent_Template_kendo_dropdownlist_valueChange_22_listener($event) { return ctx.valueChange($event); });
185
184
  i0.ɵɵelementEnd()()()()()()();
186
185
  } if (rf & 2) {
187
- i0.ɵɵadvance(5);
188
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("menu"));
189
- i0.ɵɵadvance(5);
186
+ i0.ɵɵadvance(10);
190
187
  i0.ɵɵproperty("data", ctx.searchableEntities);
191
188
  i0.ɵɵtwoWayProperty("ngModel", ctx.selectedEntity);
192
- i0.ɵɵadvance(4);
193
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("search"));
194
- i0.ɵɵadvance(3);
195
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("inbox"));
196
- i0.ɵɵadvance();
189
+ i0.ɵɵadvance(8);
197
190
  i0.ɵɵproperty("ngIf", ctx.UnreadNotificationCount > 0);
198
191
  i0.ɵɵadvance(2);
199
192
  i0.ɵɵproperty("imageSrc", ctx.userImageURL);
200
193
  i0.ɵɵadvance(2);
201
194
  i0.ɵɵproperty("data", ctx.menuItems)("value", ctx.selectedMenuItem);
202
- } }, dependencies: [i5.NgIf, i6.NgControlStatus, i6.NgModel, i7.TextBoxDirective, i8.SVGIconComponent, i9.AvatarComponent, i9.CardMediaDirective, i10.DropDownListComponent], styles: ["@import './../../../../.././MJExplorer/src/styles/_variables.scss';\r\n.header-wrap[_ngcontent-%COMP%] {\r\n flex: auto;\r\n}\r\n\r\n.title[_ngcontent-%COMP%] {\r\n font-size: x-large; \r\n}\r\n.app-logo[_ngcontent-%COMP%] {\r\n width: 297px;\r\n}\r\n.user-info[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n\r\n.user-info[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\r\n border: none;\r\n background: transparent;\r\n width: auto;\r\n color: #fff;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n gap: 40px;\r\n align-items: center;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%] {\r\n position: relative;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%] .k-svg-icon[_ngcontent-%COMP%] {\r\n width: 28px;\r\n height: 28px;\r\n min-width: 28px;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\n\r\n.user-info-wrapper[_ngcontent-%COMP%] .header[_ngcontent-%COMP%] .k-avatar[_ngcontent-%COMP%] {\r\n padding-left: 25px;\r\n border-left: 2px solid #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n max-width: 526px;\r\n width: 100%;\r\n height: 44px;\r\n}\r\n .search-wrapper #txtSearch::placeholder, .search-wrapper input::placeholder {\r\n color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] .k-input[_ngcontent-%COMP%]::placeholder {\r\n color: #54585F;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] .k-input[_ngcontent-%COMP%]{\r\nbackground: var(--light-gray);\r\nborder-radius: 0 10px 10px 0;\r\nwidth: 360px;\r\nheight: 44px;\r\ncolor: var(--text-darked);\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] .k-dropdownlist[_ngcontent-%COMP%] {\r\n width: 170px; \r\n height: 100%;\r\n background: var(--gray-color);\r\n border-radius: 10px 0px 0px 10px;\r\n margin: 0;\r\n font-size: 16px;\r\n font-weight: 600;\r\n line-height: 19px;\r\n letter-spacing: 0em;\r\n text-align: center;\r\n color: var(--text-darked);\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] .k-icon[_ngcontent-%COMP%] {\r\n color: var(--text-darked);\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 9;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n} \r\n.k-input[_ngcontent-%COMP%] {\r\n color: black;\r\n}\r\n\r\n\r\n\n\r\n@media (max-width: 1700px) {\r\n .title[_ngcontent-%COMP%] {\r\n font-size: x-small; \n\r\n }\r\n \r\n\r\n\r\n\n\r\n}\r\n@media (max-width: 1200px) {\r\n .title[_ngcontent-%COMP%] {\r\n display: none;\r\n }\r\n .app-logo[_ngcontent-%COMP%] {\r\n display: none\r\n }\r\n\r\n .search-wrapper[_ngcontent-%COMP%] {\r\n width: 350px;\r\n } \r\n .search-entity-list[_ngcontent-%COMP%] {\r\n width: 150px; \r\n }\r\n}"] });
195
+ } }, dependencies: [i5.NgIf, i6.NgControlStatus, i6.NgModel, i7.TextBoxDirective, i8.AvatarComponent, i8.CardMediaDirective, i9.DropDownListComponent], styles: ["@import './../../../../.././MJExplorer/src/styles/_variables.scss';\r\n.header-wrap[_ngcontent-%COMP%] {\r\n flex: auto;\r\n}\r\n\r\n.title[_ngcontent-%COMP%] {\r\n font-size: x-large; \r\n}\r\n.app-logo[_ngcontent-%COMP%] {\r\n width: 297px;\r\n}\r\n.user-info[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n\r\n.user-info[_ngcontent-%COMP%] kendo-dropdownlist[_ngcontent-%COMP%] {\r\n border: none;\r\n background: transparent;\r\n width: auto;\r\n color: #fff;\r\n}\r\n.user-info-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n gap: 40px;\r\n align-items: center;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%] {\r\n position: relative;\r\n}\r\n.icon-inbox[_ngcontent-%COMP%] .k-svg-icon[_ngcontent-%COMP%] {\r\n width: 28px;\r\n height: 28px;\r\n min-width: 28px;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\n\r\n.user-info-wrapper[_ngcontent-%COMP%] .header[_ngcontent-%COMP%] .k-avatar[_ngcontent-%COMP%] {\r\n padding-left: 25px;\r\n border-left: 2px solid #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n max-width: 526px;\r\n width: 100%;\r\n height: 44px;\r\n}\r\n .search-wrapper #txtSearch::placeholder, .search-wrapper input::placeholder {\r\n color: #fff;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] .k-input[_ngcontent-%COMP%]::placeholder {\r\n color: #54585F;\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] .k-input[_ngcontent-%COMP%]{\r\nbackground: var(--light-gray);\r\nborder-radius: 0 10px 10px 0;\r\nwidth: 360px;\r\nheight: 44px;\r\ncolor: var(--text-darked);\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] .k-dropdownlist[_ngcontent-%COMP%] {\r\n width: 170px; \r\n height: 100%;\r\n background: var(--gray-color);\r\n border-radius: 10px 0px 0px 10px;\r\n margin: 0;\r\n font-size: 16px;\r\n font-weight: 600;\r\n line-height: 19px;\r\n letter-spacing: 0em;\r\n text-align: center;\r\n color: var(--text-darked);\r\n}\r\n.search-wrapper[_ngcontent-%COMP%] .k-icon[_ngcontent-%COMP%] {\r\n color: var(--text-darked);\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 9;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n} \r\n.k-input[_ngcontent-%COMP%] {\r\n color: black;\r\n}\r\n\r\n\r\n\n\r\n@media (max-width: 1700px) {\r\n .title[_ngcontent-%COMP%] {\r\n font-size: x-small; \n\r\n }\r\n \r\n\r\n\r\n\n\r\n}\r\n@media (max-width: 1200px) {\r\n .title[_ngcontent-%COMP%] {\r\n display: none;\r\n }\r\n .app-logo[_ngcontent-%COMP%] {\r\n display: none\r\n }\r\n\r\n .search-wrapper[_ngcontent-%COMP%] {\r\n width: 350px;\r\n } \r\n .search-entity-list[_ngcontent-%COMP%] {\r\n width: 150px; \r\n }\r\n}"] });
203
196
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HeaderComponent, [{
204
197
  type: Component,
205
- args: [{ selector: 'app-header-component', template: "<div class=\"header-wrap\">\r\n <div class=\"header header-bg\">\r\n <div class=\"nav-container\">\r\n <div class=\"menu-button\">\r\n <span class=\"k-icon\" (click)=\"onButtonClick()\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('menu')\" ></kendo-svgicon></span>\r\n </div>\r\n\r\n <div class=\"title\">\r\n <img kendoCardMedia src=\"assets/MJ_logo.svg\" height=\"45px\" class=\"app-logo\" />\r\n <!-- <h1 class=\"k-ml-2.5\">{{appName}}</h1> -->\r\n </div>\r\n\r\n <div class=\"user-info-wrapper\">\r\n <div class=\"search-wrapper\">\r\n <kendo-dropdownlist\r\n [data]=\"searchableEntities\"\r\n textField=\"Name\"\r\n valueField=\"ID\"\r\n class = \"search-entity-list\"\r\n [(ngModel)]=\"selectedEntity\"\r\n >\r\n </kendo-dropdownlist>\r\n <input \r\n type=\"text\"\r\n id=\"txtSearch\"\r\n placeholder=\"Search\"\r\n kendoTextBox\r\n (keydown.enter)=\"onSearch($event)\"\r\n #searchInput\r\n />\r\n <span class=\"k-icon\" (click)=\"onSearch($event)\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('search')\"></kendo-svgicon></span>\r\n </div>\r\n <div class=\"icon-inbox\" (click)=\"showNotifications($event)\">\r\n <span class=\"k-icon\" style=\"cursor: pointer;\"><kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('inbox')\"></kendo-svgicon></span>\r\n <span class=\"notification\" *ngIf=\"UnreadNotificationCount > 0\">{{UnreadNotificationCount}}</span>\r\n </div>\r\n <div class=\"user-info\">\r\n <kendo-avatar class=\"k-m-0\" style=\"margin: 0;\" [imageSrc]=\"userImageURL\" shape=\"circle\"> </kendo-avatar>\r\n <div class=\"example-col\">\r\n <kendo-dropdownlist [data]=\"menuItems\" [value]=\"selectedMenuItem\" (valueChange)=\"valueChange($event)\">\r\n </kendo-dropdownlist>\r\n \r\n </div>\r\n </div>\r\n \r\n\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"nav-breadcrumb\">\r\n <kendo-breadcrumb (itemClick)=\"onBreadCrumbClick($event)\" [items]=\"breadCrumbItems\">\r\n </kendo-breadcrumb>\r\n </div> -->\r\n</div>\r\n", styles: ["@import './../../../../.././MJExplorer/src/styles/_variables.scss';\r\n.header-wrap {\r\n flex: auto;\r\n}\r\n\r\n.title {\r\n font-size: x-large; \r\n}\r\n.app-logo {\r\n width: 297px;\r\n}\r\n.user-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n\r\n.user-info kendo-dropdownlist {\r\n border: none;\r\n background: transparent;\r\n width: auto;\r\n color: #fff;\r\n}\r\n.user-info-wrapper {\r\n display: flex;\r\n gap: 40px;\r\n align-items: center;\r\n}\r\n.icon-inbox {\r\n position: relative;\r\n}\r\n.icon-inbox .k-svg-icon {\r\n width: 28px;\r\n height: 28px;\r\n min-width: 28px;\r\n}\r\n/* .icon-inbox .notification {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n width: 16px;\r\n height: 16px;\r\n min-width: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #ff6358;\r\n border-radius: 50%;\r\n color: #fff;\r\n font-size: 10px;\r\n} */\r\n.user-info-wrapper .header .k-avatar {\r\n padding-left: 25px;\r\n border-left: 2px solid #fff;\r\n}\r\n.search-wrapper {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n max-width: 526px;\r\n width: 100%;\r\n height: 44px;\r\n}\r\n::ng-deep .search-wrapper #txtSearch::placeholder, ::ng-deep .search-wrapper input::placeholder {\r\n color: #fff;\r\n}\r\n.search-wrapper .k-input::placeholder {\r\n color: #54585F;\r\n}\r\n.search-wrapper .k-input{\r\nbackground: var(--light-gray);\r\nborder-radius: 0 10px 10px 0;\r\nwidth: 360px;\r\nheight: 44px;\r\ncolor: var(--text-darked);\r\n}\r\n.search-wrapper .k-dropdownlist {\r\n width: 170px; \r\n height: 100%;\r\n background: var(--gray-color);\r\n border-radius: 10px 0px 0px 10px;\r\n margin: 0;\r\n font-size: 16px;\r\n font-weight: 600;\r\n line-height: 19px;\r\n letter-spacing: 0em;\r\n text-align: center;\r\n color: var(--text-darked);\r\n}\r\n.search-wrapper .k-icon {\r\n color: var(--text-darked);\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 9;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n} \r\n.k-input {\r\n color: black;\r\n}\r\n\r\n\r\n/*RESPONSIVE STUFF HERE */\r\n@media (max-width: 1700px) {\r\n .title {\r\n font-size: x-small; /* or any other size you prefer */\r\n }\r\n /* .app-logo {\r\n width: 50px;\r\n height: 25px;\r\n } */\r\n}\r\n@media (max-width: 1200px) {\r\n .title {\r\n display: none;\r\n }\r\n .app-logo {\r\n display: none\r\n }\r\n\r\n .search-wrapper {\r\n width: 350px;\r\n } \r\n .search-entity-list {\r\n width: 150px; \r\n }\r\n}\r\n"] }]
198
+ args: [{ selector: 'app-header-component', template: "<div class=\"header-wrap\">\r\n <div class=\"header header-bg\">\r\n <div class=\"nav-container\">\r\n <div class=\"menu-button\">\r\n <span class=\"k-icon\" (click)=\"onButtonClick()\">\r\n <span class=\"fa-solid fa-bars fa-xl\"></span>\r\n </span>\r\n </div>\r\n\r\n <div class=\"title\">\r\n <img kendoCardMedia src=\"assets/MJ_logo.svg\" height=\"45px\" class=\"app-logo\" />\r\n </div>\r\n\r\n <div class=\"user-info-wrapper\">\r\n <div class=\"search-wrapper\">\r\n <kendo-dropdownlist\r\n [data]=\"searchableEntities\"\r\n textField=\"Name\"\r\n valueField=\"ID\"\r\n class = \"search-entity-list\"\r\n [(ngModel)]=\"selectedEntity\"\r\n >\r\n </kendo-dropdownlist>\r\n <input \r\n type=\"text\"\r\n id=\"txtSearch\"\r\n placeholder=\"Search\"\r\n kendoTextBox\r\n (keydown.enter)=\"onSearch($event)\"\r\n #searchInput\r\n />\r\n <span class=\"k-icon\" (click)=\"onSearch($event)\">\r\n <span class=\"fa-solid fa-magnifying-glass\"></span>\r\n </span>\r\n </div>\r\n <div class=\"icon-inbox\" (click)=\"showNotifications($event)\">\r\n <span class=\"k-icon\" style=\"cursor: pointer;\">\r\n <span class=\"fa-solid fa-inbox fa-xl\"></span>\r\n </span>\r\n <span class=\"notification\" *ngIf=\"UnreadNotificationCount > 0\">{{UnreadNotificationCount}}</span>\r\n </div>\r\n <div class=\"user-info\">\r\n <kendo-avatar class=\"k-m-0\" style=\"margin: 0;\" [imageSrc]=\"userImageURL\" shape=\"circle\"> </kendo-avatar>\r\n <div class=\"example-col\">\r\n <kendo-dropdownlist [data]=\"menuItems\" [value]=\"selectedMenuItem\" (valueChange)=\"valueChange($event)\">\r\n </kendo-dropdownlist>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["@import './../../../../.././MJExplorer/src/styles/_variables.scss';\r\n.header-wrap {\r\n flex: auto;\r\n}\r\n\r\n.title {\r\n font-size: x-large; \r\n}\r\n.app-logo {\r\n width: 297px;\r\n}\r\n.user-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n\r\n.user-info kendo-dropdownlist {\r\n border: none;\r\n background: transparent;\r\n width: auto;\r\n color: #fff;\r\n}\r\n.user-info-wrapper {\r\n display: flex;\r\n gap: 40px;\r\n align-items: center;\r\n}\r\n.icon-inbox {\r\n position: relative;\r\n}\r\n.icon-inbox .k-svg-icon {\r\n width: 28px;\r\n height: 28px;\r\n min-width: 28px;\r\n}\r\n/* .icon-inbox .notification {\r\n position: absolute;\r\n top: -8px;\r\n right: -8px;\r\n width: 16px;\r\n height: 16px;\r\n min-width: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #ff6358;\r\n border-radius: 50%;\r\n color: #fff;\r\n font-size: 10px;\r\n} */\r\n.user-info-wrapper .header .k-avatar {\r\n padding-left: 25px;\r\n border-left: 2px solid #fff;\r\n}\r\n.search-wrapper {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n max-width: 526px;\r\n width: 100%;\r\n height: 44px;\r\n}\r\n::ng-deep .search-wrapper #txtSearch::placeholder, ::ng-deep .search-wrapper input::placeholder {\r\n color: #fff;\r\n}\r\n.search-wrapper .k-input::placeholder {\r\n color: #54585F;\r\n}\r\n.search-wrapper .k-input{\r\nbackground: var(--light-gray);\r\nborder-radius: 0 10px 10px 0;\r\nwidth: 360px;\r\nheight: 44px;\r\ncolor: var(--text-darked);\r\n}\r\n.search-wrapper .k-dropdownlist {\r\n width: 170px; \r\n height: 100%;\r\n background: var(--gray-color);\r\n border-radius: 10px 0px 0px 10px;\r\n margin: 0;\r\n font-size: 16px;\r\n font-weight: 600;\r\n line-height: 19px;\r\n letter-spacing: 0em;\r\n text-align: center;\r\n color: var(--text-darked);\r\n}\r\n.search-wrapper .k-icon {\r\n color: var(--text-darked);\r\n position: absolute;\r\n right: 10px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 9;\r\n cursor: pointer;\r\n margin-right: 2px;\r\n} \r\n.k-input {\r\n color: black;\r\n}\r\n\r\n\r\n/*RESPONSIVE STUFF HERE */\r\n@media (max-width: 1700px) {\r\n .title {\r\n font-size: x-small; /* or any other size you prefer */\r\n }\r\n /* .app-logo {\r\n width: 50px;\r\n height: 25px;\r\n } */\r\n}\r\n@media (max-width: 1200px) {\r\n .title {\r\n display: none;\r\n }\r\n .app-logo {\r\n display: none\r\n }\r\n\r\n .search-wrapper {\r\n width: 350px;\r\n } \r\n .search-entity-list {\r\n width: 150px; \r\n }\r\n}\r\n"] }]
206
199
  }], () => [{ type: i1.MJAuthBase }, { type: i2.SharedService }, { type: i3.MSFTUserImageService }, { type: i4.Router }], { applicationName: [{
207
200
  type: Input
208
201
  }], applicationInstance: [{
package/dist/lib/home-component/home.component.js CHANGED
@@ -2,8 +2,7 @@ import { Component } from '@angular/core';
2
2
  import * as i0 from "@angular/core";
3
3
  import * as i1 from "@memberjunction/ng-shared";
4
4
  import * as i2 from "@angular/router";
5
- import * as i3 from "@progress/kendo-angular-icons";
6
- import * as i4 from "../favorites/favorites.component";
5
+ import * as i3 from "../favorites/favorites.component";
7
6
  export class HomeComponent {
8
7
  constructor(sharedService, router) {
9
8
  this.sharedService = sharedService;
@@ -14,64 +13,51 @@ export class HomeComponent {
14
13
  }
15
14
  }
16
15
  HomeComponent.ɵfac = function HomeComponent_Factory(t) { return new (t || HomeComponent)(i0.ɵɵdirectiveInject(i1.SharedService), i0.ɵɵdirectiveInject(i2.Router)); };
17
- HomeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeComponent, selectors: [["app-home"]], decls: 32, vars: 6, consts: [[1, "home-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], [1, "nav-container"], [1, "nav-item", 3, "click"], [3, "icon"], [1, "home-favorites"]], template: function HomeComponent_Template(rf, ctx) { if (rf & 1) {
16
+ HomeComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeComponent, selectors: [["app-home"]], decls: 32, vars: 0, consts: [[1, "home-container"], [1, "card-header-entity"], [1, "title-wrap"], [1, "main-area"], [1, "nav-container"], [1, "nav-item", 3, "click"], [1, "fa-solid", "fa-user", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-table-cells", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-database", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-layer-group", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-chart-line", "fa-4x", "sky-blue"], [1, "fa-solid", "fa-gear", "fa-4x", "sky-blue"], [1, "home-favorites"]], template: function HomeComponent_Template(rf, ctx) { if (rf & 1) {
18
17
  i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h1");
19
18
  i0.ɵɵtext(4, "Home");
20
19
  i0.ɵɵelementEnd()()();
21
20
  i0.ɵɵelementStart(5, "div", 3)(6, "div", 4)(7, "div", 5);
22
21
  i0.ɵɵlistener("click", function HomeComponent_Template_div_click_7_listener() { return ctx.navigate("askskip"); });
23
- i0.ɵɵelement(8, "kendo-svgicon", 6);
22
+ i0.ɵɵelement(8, "span", 6);
24
23
  i0.ɵɵelementStart(9, "span");
25
24
  i0.ɵɵtext(10, "Ask Skip");
26
25
  i0.ɵɵelementEnd()();
27
26
  i0.ɵɵelementStart(11, "div", 5);
28
27
  i0.ɵɵlistener("click", function HomeComponent_Template_div_click_11_listener() { return ctx.navigate("data"); });
29
- i0.ɵɵelement(12, "kendo-svgicon", 6);
28
+ i0.ɵɵelement(12, "span", 7);
30
29
  i0.ɵɵelementStart(13, "span");
31
30
  i0.ɵɵtext(14, "Data");
32
31
  i0.ɵɵelementEnd()();
33
32
  i0.ɵɵelementStart(15, "div", 5);
34
33
  i0.ɵɵlistener("click", function HomeComponent_Template_div_click_15_listener() { return ctx.navigate("queries"); });
35
- i0.ɵɵelement(16, "kendo-svgicon", 6);
34
+ i0.ɵɵelement(16, "span", 8);
36
35
  i0.ɵɵelementStart(17, "span");
37
36
  i0.ɵɵtext(18, "Queries");
38
37
  i0.ɵɵelementEnd()();
39
38
  i0.ɵɵelementStart(19, "div", 5);
40
39
  i0.ɵɵlistener("click", function HomeComponent_Template_div_click_19_listener() { return ctx.navigate("dashboards"); });
41
- i0.ɵɵelement(20, "kendo-svgicon", 6);
40
+ i0.ɵɵelement(20, "span", 9);
42
41
  i0.ɵɵelementStart(21, "span");
43
42
  i0.ɵɵtext(22, "Dashboards");
44
43
  i0.ɵɵelementEnd()();
45
44
  i0.ɵɵelementStart(23, "div", 5);
46
45
  i0.ɵɵlistener("click", function HomeComponent_Template_div_click_23_listener() { return ctx.navigate("reports"); });
47
- i0.ɵɵelement(24, "kendo-svgicon", 6);
46
+ i0.ɵɵelement(24, "span", 10);
48
47
  i0.ɵɵelementStart(25, "span");
49
48
  i0.ɵɵtext(26, "Reports");
50
49
  i0.ɵɵelementEnd()();
51
50
  i0.ɵɵelementStart(27, "div", 5);
52
51
  i0.ɵɵlistener("click", function HomeComponent_Template_div_click_27_listener() { return ctx.navigate("settings"); });
53
- i0.ɵɵelement(28, "kendo-svgicon", 6);
52
+ i0.ɵɵelement(28, "span", 11);
54
53
  i0.ɵɵelementStart(29, "span");
55
54
  i0.ɵɵtext(30, "Settings");
56
55
  i0.ɵɵelementEnd()()();
57
- i0.ɵɵelement(31, "app-favorites", 7);
56
+ i0.ɵɵelement(31, "app-favorites", 12);
58
57
  i0.ɵɵelementEnd()();
59
- } if (rf & 2) {
60
- i0.ɵɵadvance(8);
61
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("user"));
62
- i0.ɵɵadvance(4);
63
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("table"));
64
- i0.ɵɵadvance(4);
65
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("data"));
66
- i0.ɵɵadvance(4);
67
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("aggregateFields"));
68
- i0.ɵɵadvance(4);
69
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("graph"));
70
- i0.ɵɵadvance(4);
71
- i0.ɵɵproperty("icon", ctx.sharedService.kendoSVGIcon("gear"));
72
- } }, dependencies: [i3.SVGIconComponent, i4.FavoritesComponent], styles: [".home-container[_ngcontent-%COMP%] {\r\n padding: 10px;\r\n}\r\n\r\n.nav-container[_ngcontent-%COMP%] {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n flex: 1;\r\n}\r\n.nav-item[_ngcontent-%COMP%] {\r\n border: solid 1px lightgray;\r\n border-radius: 5px;\r\n background: #fff;\r\n border-radius: 15px;\r\n width: 100%;;\r\n height: auto;\r\n box-sizing: border-box;\r\n padding: 25px;\r\n text-align: left;\r\n display: flex;\r\n gap: 26px;\r\n vertical-align: middle; \r\n font-size: 20px;\r\n cursor: pointer;\r\n}\r\n.nav-item[_ngcontent-%COMP%] .k-svg-icon[_ngcontent-%COMP%] {\r\n width: 75px;\r\n height: 75px;\r\n color: var(--sky-blue);\r\n}\r\n.nav-item[_ngcontent-%COMP%]:hover {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n}\r\n\r\n\r\n.home-favorites[_ngcontent-%COMP%] {\r\n width: 500px;\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n .list-view .k-listview-header, .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}"] });
58
+ } }, dependencies: [i3.FavoritesComponent], styles: [".home-container[_ngcontent-%COMP%] {\r\n padding: 10px;\r\n}\r\n\r\n.nav-container[_ngcontent-%COMP%] {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n flex: 1;\r\n}\r\n.nav-item[_ngcontent-%COMP%] {\r\n border: solid 1px lightgray;\r\n border-radius: 5px;\r\n background: #fff;\r\n border-radius: 15px;\r\n width: 100%;;\r\n height: auto;\r\n box-sizing: border-box;\r\n padding: 25px;\r\n text-align: left;\r\n display: flex;\r\n gap: 26px;\r\n vertical-align: middle; \r\n font-size: 20px;\r\n cursor: pointer;\r\n}\r\n.nav-item[_ngcontent-%COMP%] .k-svg-icon[_ngcontent-%COMP%] {\r\n width: 75px;\r\n height: 75px;\r\n color: var(--sky-blue);\r\n}\r\n.nav-item[_ngcontent-%COMP%]:hover {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n}\r\n\r\n\r\n.home-favorites[_ngcontent-%COMP%] {\r\n width: 500px;\r\n}\r\n\r\n.sky-blue[_ngcontent-%COMP%] {\r\n color: var(--sky-blue);\r\n}", ".main-area[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view[_ngcontent-%COMP%] {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n .list-view .k-listview-header, .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%], .footer[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header[_ngcontent-%COMP%] .head-tag[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header[_ngcontent-%COMP%] .count[_ngcontent-%COMP%] {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer[_ngcontent-%COMP%] {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card[_ngcontent-%COMP%] .view-icon[_ngcontent-%COMP%] {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .k-card-body[_ngcontent-%COMP%] {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper[_ngcontent-%COMP%] .view-card[_ngcontent-%COMP%] {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card[_ngcontent-%COMP%] .btn-wrapper[_ngcontent-%COMP%] {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] h5[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body[_ngcontent-%COMP%] .view-card-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container[_ngcontent-%COMP%] {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] h1[_ngcontent-%COMP%] {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity[_ngcontent-%COMP%] .title-wrap[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area[_ngcontent-%COMP%] .card-list[_ngcontent-%COMP%] {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}"] });
73
59
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeComponent, [{
74
60
  type: Component,
75
- args: [{ selector: 'app-home', template: "<div class=\"home-container\">\n <div class=\"card-header-entity\">\n <div class=\"title-wrap\">\n <h1>Home</h1>\n </div>\n </div>\n <div class=\"main-area\"> \n <div class=\"nav-container\">\n <div class=\"nav-item\" (click)=\"navigate('askskip')\">\n <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('user')\"></kendo-svgicon>\n <span>Ask Skip</span>\n </div>\n <div class=\"nav-item\" (click)=\"navigate('data')\">\n <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('table')\"></kendo-svgicon>\n <span>Data</span>\n </div>\n <div class=\"nav-item\" (click)=\"navigate('queries')\">\n <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('data')\"></kendo-svgicon>\n <span>Queries</span>\n </div>\n <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\n <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('aggregateFields')\"></kendo-svgicon>\n <span>Dashboards</span>\n </div>\n <div class=\"nav-item\" (click)=\"navigate('reports')\">\n <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('graph')\"></kendo-svgicon>\n <span>Reports</span>\n </div>\n <div class=\"nav-item\" (click)=\"navigate('settings')\">\n <kendo-svgicon [icon]=\"sharedService.kendoSVGIcon('gear')\"></kendo-svgicon>\n <span>Settings</span>\n </div>\n </div>\n\n <app-favorites class=\"home-favorites\"></app-favorites>\n </div>\n</div>", styles: [".home-container {\r\n padding: 10px;\r\n}\r\n\r\n.nav-container {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n flex: 1;\r\n}\r\n.nav-item {\r\n border: solid 1px lightgray;\r\n border-radius: 5px;\r\n background: #fff;\r\n border-radius: 15px;\r\n width: 100%;;\r\n height: auto;\r\n box-sizing: border-box;\r\n padding: 25px;\r\n text-align: left;\r\n display: flex;\r\n gap: 26px;\r\n vertical-align: middle; \r\n font-size: 20px;\r\n cursor: pointer;\r\n}\r\n.nav-item .k-svg-icon {\r\n width: 75px;\r\n height: 75px;\r\n color: var(--sky-blue);\r\n}\r\n.nav-item:hover {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n}\r\n\r\n\r\n.home-favorites {\r\n width: 500px;\r\n}", "\r\n.main-area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n"] }]
61
+ args: [{ selector: 'app-home', template: "<div class=\"home-container\">\r\n <div class=\"card-header-entity\">\r\n <div class=\"title-wrap\">\r\n <h1>Home</h1>\r\n </div>\r\n </div>\r\n <div class=\"main-area\"> \r\n <div class=\"nav-container\">\r\n <div class=\"nav-item\" (click)=\"navigate('askskip')\">\r\n <span class=\"fa-solid fa-user fa-4x sky-blue\"></span>\r\n <span>Ask Skip</span>\r\n </div>\r\n <div class=\"nav-item\" (click)=\"navigate('data')\">\r\n <span class=\"fa-solid fa-table-cells fa-4x sky-blue\"></span>\r\n <span>Data</span>\r\n </div>\r\n <div class=\"nav-item\" (click)=\"navigate('queries')\">\r\n <span class=\"fa-solid fa-database fa-4x sky-blue\"></span>\r\n <span>Queries</span>\r\n </div>\r\n <div class=\"nav-item\" (click)=\"navigate('dashboards')\">\r\n <span class=\"fa-solid fa-layer-group fa-4x sky-blue\"></span>\r\n <span>Dashboards</span>\r\n </div>\r\n <div class=\"nav-item\" (click)=\"navigate('reports')\">\r\n <span class=\"fa-solid fa-chart-line fa-4x sky-blue\"></span>\r\n <span>Reports</span>\r\n </div>\r\n <div class=\"nav-item\" (click)=\"navigate('settings')\">\r\n <span class=\"fa-solid fa-gear fa-4x sky-blue\"></span>\r\n <span>Settings</span>\r\n </div>\r\n </div>\r\n\r\n <app-favorites class=\"home-favorites\"></app-favorites>\r\n </div>\r\n</div>", styles: [".home-container {\r\n padding: 10px;\r\n}\r\n\r\n.nav-container {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 24px;\r\n flex: 1;\r\n}\r\n.nav-item {\r\n border: solid 1px lightgray;\r\n border-radius: 5px;\r\n background: #fff;\r\n border-radius: 15px;\r\n width: 100%;;\r\n height: auto;\r\n box-sizing: border-box;\r\n padding: 25px;\r\n text-align: left;\r\n display: flex;\r\n gap: 26px;\r\n vertical-align: middle; \r\n font-size: 20px;\r\n cursor: pointer;\r\n}\r\n.nav-item .k-svg-icon {\r\n width: 75px;\r\n height: 75px;\r\n color: var(--sky-blue);\r\n}\r\n.nav-item:hover {\r\n box-shadow: 0px 0px 20px 0px rgba(60, 73, 99, 0.2);\r\n}\r\n\r\n\r\n.home-favorites {\r\n width: 500px;\r\n}\r\n\r\n.sky-blue {\r\n color: var(--sky-blue);\r\n}", "\r\n.main-area {\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n width: 100%;\r\n gap: 24px;\r\n padding: 24px 0;\r\n}\r\n.list-view {\r\n padding: 16px;\r\n min-width: 300px;\r\n border-radius: 4px;\r\n background: #FAFAFA;\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-header, \r\n::ng-deep .list-view .k-listview-footer {\r\n border: none;\r\n}\r\n::ng-deep .list-view .k-listview-content {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 4px;\r\n background: #fff;\r\n padding: 16px;\r\n}\r\n\r\n.header,\r\n.footer {\r\n color: #424242;\r\n font-size: 16px;\r\n height: auto;\r\n margin:0;\r\n}\r\n\r\n.header {\r\n color: #424242;\r\n margin-bottom: 16px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n.header .head-tag {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\nfont-size: 16px;\r\nfont-style: normal;\r\nfont-weight: 400;\r\nline-height: 20px;\r\n}\r\n\r\n.header .count {\r\n width: 24px;\r\n height: 24px;\r\n min-width: 24px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 10px;\r\n background: rgba(0, 0, 0, 0.08);\r\n border-radius: 50%;\r\n}\r\n.footer {\r\n font-size: 14px;\r\n margin-top: 16px;\r\n}\r\n\r\n.list-item {\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 30px;\r\n cursor: pointer;\r\n margin: 4px;\r\n}\r\n.card-container {\r\n margin: 0;\r\n padding: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n\r\n\r\n\r\n\r\n \r\n.view-card .view-icon {\r\n color: var(--sideNav);\r\n}\r\n.card-wrapper {\r\n border: 1px solid rgba(0, 0, 0, 0.08);\r\n border-radius: 6px;\r\n width: 100% !important;\r\n}\r\n.card-wrapper .k-card-body {\r\n background: #fff;\r\n padding: 12px 20px;\r\n}\r\n.card-wrapper .view-card {\r\n overflow: auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: #fafafa;\r\n padding: 4px 15px;\r\n}\r\n.view-card .btn-wrapper {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.k-card-body .view-card-content h5 {\r\n color: #424242;\r\n font-size: 16px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n margin-bottom: 0;\r\n letter-spacing: 0.18px;\r\n}\r\n.k-card-body .view-card-content p {\r\n color: #666;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n height: 48px;\r\n margin-bottom: 0;\r\n}\r\n.card-container {\r\n padding: 0;\r\n margin: 0;\r\n box-shadow: none;\r\n}\r\n.card-header-entity {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(0, 0, 0, 0.08);\r\n}\r\n\r\n.card-header-entity .title-wrap h1 {\r\n color: #424242;\r\n font-size: 28px;\r\n font-style: normal;\r\n font-weight: 300;\r\n line-height: 28px;\r\n margin-bottom: 15px;\r\n}\r\n.card-header-entity .title-wrap {\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.card-header-entity .title-wrap p {\r\n margin: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #424242;\r\n font-size: 14px;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: 20px;\r\n}\r\n.main-area .card-list {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 20px;\r\n}\r\n"] }]
76
62
  }], () => [{ type: i1.SharedService }, { type: i2.Router }], null); })();
77
63
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(HomeComponent, { className: "HomeComponent", filePath: "src\\lib\\home-component\\home.component.ts", lineNumber: 10 }); })();