diff --git a/package.json b/package.json index 2b43efa..b364b0f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-samples", - "version": "14.1.12", + "version": "15.1.10", "scripts": { "test": "gulp test", "postinstall": "gulp copy", @@ -15,10 +15,10 @@ "@angular/forms": "22.0.5", "@angular/platform-browser": "22.0.5", "@angular/router": "22.0.5", - "@boldreports/angular-reporting-components": "14.1.12", - "@boldreports/javascript-reporting-controls": "14.1.12", - "@boldreports/javascript-reporting-extensions": "14.1.12", - "@boldreports/types": "14.1.12", + "@boldreports/angular-reporting-components": "15.1.10", + "@boldreports/javascript-reporting-controls": "15.1.10", + "@boldreports/javascript-reporting-extensions": "15.1.10", + "@boldreports/types": "15.1.10", "@syncfusion/ej2-angular-buttons": "22.2.5", "@syncfusion/ej2-angular-calendars": "22.2.5", "@syncfusion/ej2-angular-dropdowns": "22.2.5", diff --git a/src/app/common/header/header.component.html b/src/app/common/header/header.component.html index 4d176a7..a4f33d1 100644 --- a/src/app/common/header/header.component.html +++ b/src/app/common/header/header.component.html @@ -1,25 +1,26 @@ -
-
+
+
-
Bold Reports® for Angular
-
- -
- {{platformName}} - {{platform}} +
+ + + +
+ +
+ Frameworks +
+ ASP.NET Core + Blazor + Angular + React + JavaScript
-
-
- - - Product Detail - Try it Free +
+ Product Details + Try it Free
\ No newline at end of file diff --git a/src/app/common/header/header.component.scss b/src/app/common/header/header.component.scss index 3f3c80c..afc90fd 100644 --- a/src/app/common/header/header.component.scss +++ b/src/app/common/header/header.component.scss @@ -61,84 +61,140 @@ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } -@font-face { - font-family: 'ej-sb-header-icons'; - src: - url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0hSRsAAAEoAAAAVmNtYXC1MrWKAAABlAAAAExnbHlmuazPKQAAAewAAATAaGVhZBSs0TUAAADQAAAANmhoZWEHmQNuAAAArAAAACRobXR4E6AAAAAAAYAAAAAUbG9jYQEcAvIAAAHgAAAADG1heHABHQEAAAABCAAAACBuYW1lS91XWgAABqwAAAKRcG9zdKWcZ6EAAAlAAAAAYwABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABQABAAAAAQAABmW/B18PPPUACwPoAAAAANjSRjMAAAAA2NJGMwAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAFAPQADgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPtAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wHnBwNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAIAAgAAgAA5wHnBOcH//8AAOcB5wPnB///AAAAAAAAAAEACAAIAAoAAAABAAQAAgADAAAAAAAkAJIA+AJgAAIAAAAAA+oDwQAHABIAADchESMVITUjJScjBwkBJyMHESMCA+hR/L5VAdKAXgMBAwEEA16ARSsBHczMroED/vwBAASBAc8AAAQAAAAAA+oDVAAWAC0ANwBCAAABESYGBwYWNz4BFxY3PgE1ETQmKwEiBgURHgEXFjc2FhcWNicuAQcRNCYrASIGJQM2FhcRJgcOASURPgEXAzYmJyMiA7Nq2WUOJxBexWIOCwoODwsDCw/8TwEOCgsOYsVfDycOZdlqDwsDCw8CDwOO2wZRO4Bi/mAE1ZUEAmKBCDgCrv4gLw45DBUGNgozBwQBDwsB7gsPDwf+EgsPAQMGMwo2BhYLOg4vAd8LEBAu/fVbKwoCORQBB1lS/cYJI1ICCwZYCAAAAAADAAAAAAPqA+oAJwAwADwAAAEeARUWBgcOARc+AT8BFwcGBwYjIi4CNTQ2NwcGDwEnNzY3NjcyFjcOASImNDYyFgEWABc2ADcmACcGAAIsBwgBChYeFQECHh4NLA1CIiUWDBYOCCQjDQwcCS8NMyovIAkQKAEnOicnOif9sgYBG9PUARsFBf7l1NP+5QJwBRAKAixPZVoMBBkbCiwNQRMTCQ4WCyGZfAwKGQomDDoYGAEGgB0nJzonJf7g0/7lBgYBG9PUARsFBf7lAAAOAAAAAAPqA5sACwAXACwAOQBIAFUAZABxAH4AigCXAKoAtgDzAAAlFhczBwYPATU2PwEHFh8BIyYvATc2PwIxBw4BDwEjBiMiLwImJzU3NhcyJxYfATEGDwEnJic1MxcGDwEnJiciDwEnJj0BNxcGDwEnJicjNzY3NTcnFjMyPwEXFhcVBzU2PwIWFxUHNSYnNTc2PwEFFh8BBwYHFQc1Nj8CFh8BBwYPAScmLwIOAQcxJyYnMTc2PwIfARYXFSMGJyMxPgE3MTc2MzYHHgEXPgE3LgEnDgETLgEHDgEHDgEHHgEXNzUjLgEnPgE3NTMmNjc2FhcyMTc+ATceARcVHgEXDgEPARc3PgE3LgEnMS4BJw4BAlEoEQECHS0GCwsBkQcPBAIzIQQCHBsGgQEGDgUBAQ4PCgkFAhQJAx0bHXEBAwEhIwIBFQNakgEDAgkWGhwfAgEEgWcDFQICESsEAQMBV9wcHxcYBgEDAYEBAwHOEgNWAQQBHR0K/tsYKAgCAwFbAxECzy8eAwcZGQYBBw4DYQUOBQcmFwEhNQVMAQQQCAE9MgEHEAUFCgoQ2gJ0V1ZyAgN0VlZzXRxJJyo1CkhYAQN5Xx8cQlkDAVJHBAEXJyM6CgFEAmBDRVcCR1kCAVNHBQEiSW4CAlZDA4FeR3HFCAgDJRACAhgsBQIhIggPKAUBCQYBAgMcJwoCAwEBAygnAQEEAUAYGAYGDAEBIioCBxUTCgICAQQBBhcWBgEBKiIDAQgKChMWCgFFAwMBBBgWBAEGFRQIFSAmBAEEFxkEAQULBAEJCAIJFBYHAQUmIARMEicEAwkGAQUiJgYBDiobAQgJAiwSAQQBCCglBQcIHy8MAQEBrFdyAQJ0VldyAgN0AaEWEAoKOywUa0hVcwUBPgJQPTxSAgIbQgwIHB8BR1UBAlw5OQFUQD9NAgE9AQZvVkdpGGB5AgJLAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABABAAAQABAAAAAAACAAcAEQABAAAAAAADABAAGAABAAAAAAAEABAAKAABAAAAAAAFAAsAOAABAAAAAAAGABAAQwABAAAAAAAKACwAUwABAAAAAAALABIAfwADAAEECQAAAAIAkQADAAEECQABACAAkwADAAEECQACAA4AswADAAEECQADACAAwQADAAEECQAEACAA4QADAAEECQAFABYBAQADAAEECQAGACABFwADAAEECQAKAFgBNwADAAEECQALACQBjyByZXBvcnRzLXNiLWljb25zUmVndWxhcnJlcG9ydHMtc2ItaWNvbnNyZXBvcnRzLXNiLWljb25zVmVyc2lvbiAxLjByZXBvcnRzLXNiLWljb25zRm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIAByAGUAcABvAHIAdABzAC0AcwBiAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAcgBlAHAAbwByAHQAcwAtAHMAYgAtAGkAYwBvAG4AcwByAGUAcABvAHIAdABzAC0AcwBiAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGUAcABvAHIAdABzAC0AcwBiAC0AaQBjAG8AbgBzAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUBAgEDAQQBBQEGAAhkb3dubG9hZAlib29rLW9wZW4QY2lyY2xlLWluZm8tLS0wMg9jbG91ZC1wdWJsaWMtd2YAAAA=) format('truetype'); - font-weight: normal; - font-style: normal; -} .ej-sb-header { - background-color: #FFFFFF; - box-shadow: 0 8px 11px -6px rgba(0, 0, 0, 0.12); - height: 48px; + background-color: var(--neutral-0); + box-shadow: 0 1px 3px rgba(13,19,31,0.1), 0 1px 2px -1px rgba(13,19,31,0.1); + height: 64px; width: 100%; display: flex; position: fixed; z-index: 10000; justify-content: space-between; + align-items: center; + padding: 0 22px; + border-bottom: 1px solid var(--neutral-200); .ej-sb-left-side { height: inherit; display: flex; align-items: center; + gap: 26px; .ej-sb-hamburger-icon { - margin: 0 21px 0 25px; font-size: 24px; cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + border-radius: var(--r-md, 8px); + transition: background var(--dur-fast, 120ms) var(--ease, cubic-bezier(.4,0,.2,1)); + + &:hover { + background-color: var(--blue-50); + } &::before { content: "\e914"; - color: #333; + color: (--neutral-600); } } - .ej-sb-platform-name { - font-size: 15px; - opacity: 0.87; - font-weight: 600; - color: #2b3a5c; + .ej-sb-logo-title-group { + display: flex; + align-items: center; + gap: 12px; + } + + .ej-sb-logo-link { + display: inline-block; + + .ej-sb-logo { + display: inline-block; + width: 120px; + height: 36px; + background-image: url('https://cdn.boldreports.com/website/images/logo/bold-reports-logo.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: bottom; + } } - .dropdown { + - button.btn-secondary { - background: transparent; - color: #2b3a5c; - opacity: .87; - border: none; - box-shadow: none; - margin-top: 4px; - padding-left: 5px; + .ej-sb-divider { + border-left: 1px solid var(--neutral-200); + height: 22px; + } - &:focus, - &:active, - &:active:focus { - background: transparent; - color: #2b3a5c; - border: none; - box-shadow: none; + .ej-sb-framework-group { + display: flex; + align-items: center; + gap: 9px; - } + .ej-sb-framework-label { + font-size: 12px; + font-weight: 600; + color: var(--neutral-500); + letter-spacing: 0.05em; } - .dropdown-menu { - a { + .ej-sb-framework-switcher { + position: relative; + display: inline-flex; + gap: 2px; + padding: 4px; + border-radius: 999px; + background: var(--neutral-0); + border: 1px solid rgba(255,255,255,0.9); + box-shadow: 0 8px 20px -10px rgba(10,62,125,0.22), 0 3px 8px -3px rgba(16,100,199,0.18); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + + .br-header-nav-link { + position: relative; cursor: pointer; - font-size: 14px; + font-size: 12.5px; + letter-spacing: -0.005em; + padding: 7px 14px; + border-radius: 999px; + border: none; + background: transparent; + color: var(--neutral-600); + box-shadow: none; + transform: translateZ(0); + transition: all var(--dur-fast, 120ms) var(--ease, cubic-bezier(.4,0,.2,1)); + white-space: nowrap; + text-decoration: none; + font-weight: 500; - &.active { - background: transparent; - color: #ff5f23; - cursor: default; - pointer-events: none; + &:hover { + color: var(--blue-600); + background: var(--blue-50); + transform: translateY(-1px); + box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 14px -6px rgba(16,100,199,0.35); } &:active { - background: transparent; - color: #2b3a5c; + transform: translateY(0); + } + + &.active { + background: var(--blue-600); + color: var(--neutral-0); + font-weight: 600; + box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 5px 12px -4px rgba(16,100,199,0.55); + text-shadow: 0 1px 0 rgba(0,0,0,0.12); + pointer-events: none; + + &:hover { + background: var(--blue-600); + color: var(--neutral-0); + transform: none; + box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 5px 12px -4px rgba(16,100,199,0.55); + } } } } @@ -149,71 +205,50 @@ height: inherit; display: flex; align-items: center; + gap: 12px; - .ej-sb-header-icons { - font-family: 'ej-sb-header-icons'; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - .ej-sb-divider { - border-left: 1px solid rgb(196, 196, 196); - height: 32px; - } a { - font-size: 20px; - cursor: pointer; - text-decoration: none; - margin: 0 10px 0px 10px; - color: #333; - opacity: .87; - &.ej-sb-button { - width: 125px; - border-radius: 5px; - height: 35px; - font-size: 14px; - font-weight: 500; - opacity: 1; - text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 600; + border-radius: 12px; + border: 1px solid transparent; cursor: pointer; - text-align: center; - padding: 0.4rem 0.5rem 1rem 0.5rem; - } - &.bold-schedule-demo { - border-color: #ff4800; - border-style: solid; - border-width: 1px; - background-color: #ffffff; - color: #ff4800 !important; - - &:hover { - background-color: #ff4800; - color: #ffffff !important; + line-height: 1; + text-decoration: none; + transition: all var(--dur, 180ms) var(--ease, cubic-bezier(.4,0,.2,1)); + font-size: 14px; + padding: 10px 18px; + min-height: 40px; + + &.product-detail { + color: var(--blue-600); + background: var(--neutral-0); + border: 1px solid var(--blue-200); + + &:hover { + background: var(--blue-50); + border-color: var(--blue-300); + color: var(--blue-700); + transform: translateY(-1px); + } } - } - &.try-it-free { - background-color: #ff4800; - color: #ffffff !important; - } - &.product-detail{ - border-color: #ff4800; - border-style: solid; - border-width: 1px; - background: white; - color: #ff4801; - &:hover{ - background: #ff4801; - color: white; + &.try-it-free { + color: var(--neutral-0); + background: var(--blue-600); + border: 1px solid var(--blue-600); + + &:hover { + background: var(--blue-700); + border: 1px solid var(--blue-700); + transform: translateY(-1px); + } } } - } .sb-icon-product:before { @@ -229,7 +264,22 @@ } } - @media only screen and (max-width: 850px) { + @media only screen and (max-width: 1064px) and (min-width: 769px) { + .ej-sb-right-side { + display: none; + } + } + + @media only screen and (max-width: 768px) { + .ej-sb-left-side { + .ej-sb-divider, + .ej-sb-framework-group { + display: none; + } + } + } + + @media only screen and (max-width: 500px) { .ej-sb-right-side { display: none; } diff --git a/src/app/common/header/header.component.ts b/src/app/common/header/header.component.ts index 542178c..a229404 100644 --- a/src/app/common/header/header.component.ts +++ b/src/app/common/header/header.component.ts @@ -1,60 +1,25 @@ -import { Component, Output, EventEmitter, Inject } from '@angular/core'; -import { CommonModule, DOCUMENT } from '@angular/common'; -import samples from '../../components/samples.json'; -import { Router } from '@angular/router'; -import { RouterService } from '../router.service'; - -const data = samples; +import { Component, Output, EventEmitter } from '@angular/core'; +import { NavigationHelper } from '../navigation/navigation-helper'; @Component({ selector: 'ej-header', standalone: true, - imports: [CommonModule], templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) export class HeaderComponent { - platforms: string[]; - platformName = data.platform; - document: Document; - constructor(private routerService: RouterService, private router: Router, @Inject(DOCUMENT) document: Document) { - this.document = document; - this.platforms = Object.keys(data.otherPlatforms); - } - // Declaring onHamBurgerClick Event to acheive sidebar toggling from the app component side. @Output() hamBurgerClick: EventEmitter<{}> = new EventEmitter(); + get aspNetUrl(): string { return NavigationHelper.getHref(''); } + get blazorUrl(): string { return NavigationHelper.getHref('blazor'); } + get angularUrl(): string { return NavigationHelper.getHref('angular'); } + get reactUrl(): string { return NavigationHelper.getHref('react'); } + get javascriptUrl(): string { return NavigationHelper.getHref('javascript'); } + // This will be fired on clicking hamburger icon. public onClick(): void { // This will fire an event in app component. this.hamBurgerClick.emit(); } - - public platformSwitcher(platform: string): void { - const routerData = this.routerService.getRouterData(this.router.url); - let platformBasePath; - let platformSamplePath; - const sampleName = routerData.reportRouterPath ? routerData.reportRouterPath : routerData.reportBasePath; - if (routerData.reportRouterPath) { - platformBasePath = this.getRouterPath(this.platformName, platform, routerData.reportBasePath); - } - platformSamplePath = this.getRouterPath(this.platformName, platform, sampleName); - const reportPath = routerData.reportRouterPath ? (platformBasePath + '/' + platformSamplePath) : platformSamplePath; - window.open(this.document.location.origin + "/" + (data.otherPlatforms as Record)[platform] + reportPath, '_self'); - } - - private getRouterPath(curPlatform: string, targetplatform: string, sampleName: string): string { - curPlatform = curPlatform.toLowerCase(); - targetplatform = targetplatform.toLowerCase(); - const samePath = (curPlatform.indexOf('asp') === -1 && targetplatform.indexOf('asp') === -1 && targetplatform.indexOf('blazor') === -1) || - (curPlatform.indexOf('asp') >= 0 && targetplatform.indexOf('asp') >= 0); - if (samePath) { - return sampleName; - } else { - return sampleName.split(/(?=[A-Z])/).map((name) => { - return name.toLowerCase(); - }).join('-'); - } - } } diff --git a/src/app/common/main-content/main-content.component.html b/src/app/common/main-content/main-content.component.html index d6f9f77..d064943 100644 --- a/src/app/common/main-content/main-content.component.html +++ b/src/app/common/main-content/main-content.component.html @@ -1,31 +1,36 @@
-
-

+
+
+

+

+
+
@@ -59,51 +64,55 @@

- \ No newline at end of file diff --git a/src/app/components/invoice/invoice.component.html b/src/app/components/invoice/invoice.component.html index 1c58059..3198fb0 100644 --- a/src/app/components/invoice/invoice.component.html +++ b/src/app/components/invoice/invoice.component.html @@ -6,12 +6,12 @@

In this demo, Invoice report is generated based on Report Parameters at run time, and it displays the comprehensive overview of an invoice that indicates the shipping order details using parameters, Report Parameters at run time, and it displays the comprehensive overview of an invoice that indicates the shipping order details using parameters, expressions, and calculated fields with Tablix report item. + target="_blank">expressions, and calculated fields with Tablix report item.

    -
  • Using Expression +
  • Using Expression with text box report item, the report is designed to dynamically display the invoice details.
  • Using the Total feature in table report item, the sum of product price is calculated. @@ -20,6 +20,6 @@

    More information about the text box, expressions, and table data region can be found in this documentation section. + target="_blank">documentation section.

\ No newline at end of file diff --git a/src/app/components/load-large-data/load-large-data.component.html b/src/app/components/load-large-data/load-large-data.component.html index 1eb71e4..bb70d71 100644 --- a/src/app/components/load-large-data/load-large-data.component.html +++ b/src/app/components/load-large-data/load-large-data.component.html @@ -10,12 +10,12 @@
  • The table is displayed with a total row, and the sum of sales is calculated by aggregation of OrderQty and UnitPrice data fields using the Expression support.
    • + target="_blank">Expression support.
  • The Item total data text box is formatted in Currency format to enhance the report design.

    • More information about Tablix can be found in this documentation + href="https://help.boldreports.com/enterprise-reporting/designer-guide/report-designer/report-items/tablix/" target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/mail-merge/mail-merge.component.html b/src/app/components/mail-merge/mail-merge.component.html index c90f98a..0c172c2 100644 --- a/src/app/components/mail-merge/mail-merge.component.html +++ b/src/app/components/mail-merge/mail-merge.component.html @@ -10,7 +10,7 @@
  • A Detail group is defined for a list, thereby it repeats each employee information in envelope format.
  • To keep data in a single page, rectangle report item is used as a container with the KeepTogether property as true.
  • Expression is used to frame the employee details dynamically at run time.
    • + target="_blank">Expression is used to frame the employee details dynamically at run time.

    You can print or export this report as PDF, Excel, Word, HTML, PowerPoint, or CSV format using the Print and Export @@ -19,6 +19,6 @@

    Mail merge report designing steps can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/multi-language-report/multi-language-report.component.html b/src/app/components/multi-language-report/multi-language-report.component.html index c035b3c..dbcf084 100644 --- a/src/app/components/multi-language-report/multi-language-report.component.html +++ b/src/app/components/multi-language-report/multi-language-report.component.html @@ -29,6 +29,6 @@

    For detailed guidance on implementing localization, refer to the documentation. + target="_blank">documentation.

    \ No newline at end of file diff --git a/src/app/components/nda-report/nda-report.component.html b/src/app/components/nda-report/nda-report.component.html index 837b3e2..0b92982 100644 --- a/src/app/components/nda-report/nda-report.component.html +++ b/src/app/components/nda-report/nda-report.component.html @@ -13,6 +13,6 @@

    More information about the PDF signature report item can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/northwind-products-suppliers-report/northwind-products-suppliers-report.component.html b/src/app/components/northwind-products-suppliers-report/northwind-products-suppliers-report.component.html index 81e6c84..e5dc670 100644 --- a/src/app/components/northwind-products-suppliers-report/northwind-products-suppliers-report.component.html +++ b/src/app/components/northwind-products-suppliers-report/northwind-products-suppliers-report.component.html @@ -10,17 +10,17 @@
    • The font color is categorized using the Conditional Formatting feature in the UnitInStock column of table to differentiate the range of values.
      • + target="_blank">Conditional Formatting feature in the UnitInStock column of table to differentiate the range of values.
    • The TopN filter is applied to the table and table and chart data regions to display the top five data from database. Similarly, the BottomN filter is applied to display the least demand products + target="_blank">chart data regions to display the top five data from database. Similarly, the BottomN filter is applied to display the least demand products from database.

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/parameter-customization/parameter-customization.component.html b/src/app/components/parameter-customization/parameter-customization.component.html index 1d9a7b8..ac3e965 100644 --- a/src/app/components/parameter-customization/parameter-customization.component.html +++ b/src/app/components/parameter-customization/parameter-customization.component.html @@ -8,9 +8,9 @@

    The Product Line Sales RDL report represents the best performing sales people and stores using Tablix and Tablix and Chart + target="_blank">Chart report items.

      @@ -22,7 +22,7 @@
    • End date non cascading parameter can be disabled using Switch button provided + target="_blank">Switch button provided
    • Null button in the end date parameter is used to set the parameter value as null. No data will be filtered since end date is null
      • @@ -30,6 +30,6 @@

      More information about Cascading Parameters can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/patient-experience-analysis/patient-experience-analysis.component.html b/src/app/components/patient-experience-analysis/patient-experience-analysis.component.html index ab99115..80746fa 100644 --- a/src/app/components/patient-experience-analysis/patient-experience-analysis.component.html +++ b/src/app/components/patient-experience-analysis/patient-experience-analysis.component.html @@ -6,8 +6,8 @@

    This report shows the Patient's satisfaction, average stay duration, count and average waiting time using Tablix and Chart + target="_blank">Tablix and Chart report items.

    @@ -18,6 +18,6 @@

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/paystub/paystub.component.html b/src/app/components/paystub/paystub.component.html index 69a9b8e..829f587 100644 --- a/src/app/components/paystub/paystub.component.html +++ b/src/app/components/paystub/paystub.component.html @@ -6,18 +6,18 @@

    Paystub RDLC report represents the paystub of a company in a single sheet using Tablix report item. + target="_blank">Tablix report item.

    More information about RDLC report can be found in this documentation + href="https://help.boldreports.com/embedded-reporting/angular-reporting/report-viewer/rdlc-report/" target="_blank">documentation section.

    diff --git a/src/app/components/personal-expense-analysis/personal-expense-analysis.component.html b/src/app/components/personal-expense-analysis/personal-expense-analysis.component.html index cc79082..d6532cc 100644 --- a/src/app/components/personal-expense-analysis/personal-expense-analysis.component.html +++ b/src/app/components/personal-expense-analysis/personal-expense-analysis.component.html @@ -11,14 +11,14 @@
  • RDL External image embedding concept is used to display the image in report.
  • Text box report items with expressions are used to format the currency data fields.
    • + target="_blank">expressions are used to format the currency data fields.
  • Alternate row formatting is applied in the table data region using the Conditional Formatting feature to alternate the background color for a table data region, which improves the readability of data.
    • + target="_blank">Conditional Formatting feature to alternate the background color for a table data region, which improves the readability of data.

    More information about handling images, text boxes, chart, and table report items can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/powerpoint-report/powerpoint-report.component.html b/src/app/components/powerpoint-report/powerpoint-report.component.html index 2e392be..97b5d52 100644 --- a/src/app/components/powerpoint-report/powerpoint-report.component.html +++ b/src/app/components/powerpoint-report/powerpoint-report.component.html @@ -13,6 +13,6 @@

    More information about Page break can be found in this documentation section. + target="_blank">documentation section.

    diff --git a/src/app/components/product-catalog/product-catalog.component.html b/src/app/components/product-catalog/product-catalog.component.html index 81f30c0..ccfead6 100644 --- a/src/app/components/product-catalog/product-catalog.component.html +++ b/src/app/components/product-catalog/product-catalog.component.html @@ -6,7 +6,7 @@

    This report shows Mountain bike products information using the Tablix report item in RDLC report. + target="_blank">Tablix report item in RDLC report.

    More information about RDLC report can be found in this documentation + href="https://help.boldreports.com/embedded-reporting/angular-reporting/report-viewer/rdlc-report/" target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/product-details/product-details.component.html b/src/app/components/product-details/product-details.component.html index 41e205e..495518f 100644 --- a/src/app/components/product-details/product-details.component.html +++ b/src/app/components/product-details/product-details.component.html @@ -10,14 +10,14 @@
  • Custom barcode report item is placed in a table cell to display the ProductId.
  • The total price value of each product is calculated based on the OrderQty and UnitPrice data fields using expression.
    • + target="_blank">expression.
  • The price values in the product details are formatted in the Currency format to improve the readability of data.
    • + target="_blank">format to improve the readability of data.

    More information about the Tablix data region can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/product-line-sales/product-line-sales.component.html b/src/app/components/product-line-sales/product-line-sales.component.html index 524dff5..0b90f15 100644 --- a/src/app/components/product-line-sales/product-line-sales.component.html +++ b/src/app/components/product-line-sales/product-line-sales.component.html @@ -6,8 +6,8 @@

    The Product Line Sales RDL report represents the best performing sales people and stores using Tablix and Chart + target="_blank">Tablix and Chart report items.

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/app/components/transcript-report/transcript-report.component.html b/src/app/components/transcript-report/transcript-report.component.html index 49de583..c2fbce2 100644 --- a/src/app/components/transcript-report/transcript-report.component.html +++ b/src/app/components/transcript-report/transcript-report.component.html @@ -15,6 +15,6 @@

    Transcript report designing steps can be found in this documentation section. + target="_blank">documentation section.

    diff --git a/src/app/components/website-visitor-analysis/website-visitor-analysis.component.html b/src/app/components/website-visitor-analysis/website-visitor-analysis.component.html index 79fec00..9833782 100644 --- a/src/app/components/website-visitor-analysis/website-visitor-analysis.component.html +++ b/src/app/components/website-visitor-analysis/website-visitor-analysis.component.html @@ -12,6 +12,6 @@

    More information about chart data region can be found in this documentation section. + target="_blank">documentation section.

    \ No newline at end of file diff --git a/src/assets/css/variable.css b/src/assets/css/variable.css new file mode 100644 index 0000000..f200a5e --- /dev/null +++ b/src/assets/css/variable.css @@ -0,0 +1,26 @@ +:root { + --blue-50: #EFF5FE; + --blue-100: #DCEAFB; + --blue-200: #C4DEFD; + --blue-300: #93C0F5; + --blue-500: #2E81C8; + --blue-600: #1064C7; + --blue-700: #0C4E9E; + --blue-800: #0A3E7D; + --blue-900: #082C59; + + --neutral-0: #FFFFFF; + --neutral-50: #F6F8FB; + --neutral-100: #EAEFF6; + --neutral-200: #D8E0EB; + --neutral-300: #C3CDDB; + --neutral-400: #9EAABC; + --neutral-500: #6E7A90; + --neutral-600: #5E6B80; + --neutral-700: #43506A; + --neutral-800: #2C3A4F; + --neutral-900: #172239; + --neutral-950: #0D131F; + + --font-family: "Inter", sans-serif; +} diff --git a/src/assets/footer/bg-texture.png b/src/assets/footer/bg-texture.png deleted file mode 100644 index 0af7abf..0000000 Binary files a/src/assets/footer/bg-texture.png and /dev/null differ diff --git a/src/assets/nav-icons/next.svg b/src/assets/nav-icons/next.svg new file mode 100644 index 0000000..24ab22f --- /dev/null +++ b/src/assets/nav-icons/next.svg @@ -0,0 +1,3 @@ + diff --git a/src/assets/nav-icons/open-new.svg b/src/assets/nav-icons/open-new.svg new file mode 100644 index 0000000..e589e50 --- /dev/null +++ b/src/assets/nav-icons/open-new.svg @@ -0,0 +1,5 @@ + diff --git a/src/assets/nav-icons/prev.svg b/src/assets/nav-icons/prev.svg new file mode 100644 index 0000000..4751027 --- /dev/null +++ b/src/assets/nav-icons/prev.svg @@ -0,0 +1,3 @@ + diff --git a/src/assets/sidebar/home.svg b/src/assets/sidebar/home.svg new file mode 100644 index 0000000..14c7e7d --- /dev/null +++ b/src/assets/sidebar/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/styles.scss b/src/styles.scss index 01af003..8bf89a4 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,6 @@ @import 'bootstrap/dist/css/bootstrap.min.css'; -@import 'prismjs/themes/prism.css'; +@import 'prismjs/themes/prism-dark.css'; +@import './assets/css/variable.css'; // Reports @import './../node_modules/@boldreports/javascript-reporting-controls/Content/v2.0/tailwind-light/bold.report-viewer.min.css'; @@ -15,12 +16,11 @@ @import './../node_modules/codemirror/lib/codemirror.css'; @import './../node_modules/codemirror/addon/hint/show-hint.css'; - body { - color: #2b3a5c; + color: var(--neutral-600); margin: 0; - background-color: #F2F2F2; - font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif"; + background-color: var(--neutral-50); + font-family: var(--font-family); } :focus { @@ -134,11 +134,12 @@ bold-reportviewer { } #description a{ - color: #ff5f23; + color: var(--blue-600); text-decoration: none; } #description a:hover { + color: var(--blue-700); text-decoration: underline; }